/* Poster-inspired surfaces. All decoration is non-interactive and stays behind content. */
:root { --paper: #f5f3ed; }
.shows, .studio, .classes, .testimonials, .contact, .visit, .site-footer {
  position: relative;
  isolation: isolate;
  background-image: url('../assets/textures/paper-grain.svg');
}
.shows, .classes, .visit { background-color: var(--paper); }

/* A torn edge joins the sections without adding empty space to the layout. */
.studio::before, .classes::before, .testimonials::before, .contact::before, .visit::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -20px 0 auto;
  height: 22px;
  background: var(--edge-color) url('../assets/textures/paper-grain.svg');
  clip-path: polygon(0.00% 27.8%,0.53% 41.4%,1.40% 32.0%,2.37% 38.6%,3.37% 22.3%,4.27% 15.1%,5.15% 34.9%,6.21% 17.2%,6.59% 29.1%,7.00% 16.7%,7.32% 17.3%,7.85% 27.6%,8.80% 39.0%,9.55% 45.7%,10.02% 36.8%,10.63% 51.1%,10.96% 55.9%,11.61% 50.7%,11.94% 54.0%,12.47% 53.2%,12.78% 52.0%,13.62% 56.4%,14.68% 64.7%,15.39% 59.2%,15.98% 58.7%,16.96% 64.5%,17.91% 57.9%,18.40% 44.4%,19.46% 59.8%,20.38% 55.4%,21.41% 42.0%,21.95% 37.9%,22.30% 51.6%,22.76% 52.8%,23.43% 59.7%,24.38% 56.7%,24.81% 43.7%,25.69% 46.2%,26.28% 30.7%,27.34% 41.0%,27.98% 49.3%,28.26% 48.1%,28.99% 36.8%,30.00% 49.3%,30.99% 42.8%,31.75% 60.6%,32.09% 59.8%,33.17% 44.4%,34.03% 42.7%,35.12% 48.1%,35.42% 53.8%,35.84% 43.5%,36.88% 37.0%,37.68% 32.7%,38.19% 26.6%,38.54% 24.3%,39.51% 30.4%,40.46% 17.2%,41.21% 22.5%,41.59% 26.4%,42.23% 27.9%,42.76% 36.5%,43.04% 27.7%,43.96% 24.9%,45.02% 39.4%,45.77% 34.4%,46.30% 28.1%,46.96% 27.5%,47.65% 27.0%,48.63% 33.0%,49.20% 19.9%,49.97% 32.2%,50.77% 33.6%,51.52% 22.7%,52.03% 23.6%,53.00% 24.4%,53.79% 31.6%,54.64% 23.6%,55.20% 24.4%,55.63% 31.2%,55.97% 36.4%,56.58% 34.0%,56.99% 53.5%,57.41% 42.2%,58.14% 50.3%,58.94% 54.0%,59.99% 48.8%,60.87% 33.2%,61.76% 44.8%,62.16% 50.7%,62.73% 40.6%,63.13% 43.1%,63.51% 31.8%,63.96% 29.3%,64.43% 21.7%,65.14% 31.5%,65.57% 18.9%,66.19% 21.0%,66.88% 24.3%,67.95% 26.2%,68.91% 43.8%,69.97% 50.1%,70.88% 34.6%,71.55% 41.4%,72.13% 28.1%,72.62% 36.8%,73.03% 47.1%,73.48% 23.2%,74.05% 24.4%,74.38% 16.1%,74.88% 17.3%,75.32% 23.9%,75.90% 15.2%,76.89% 36.8%,77.75% 26.5%,78.19% 26.3%,79.24% 24.8%,80.12% 27.4%,80.43% 22.3%,81.21% 37.1%,81.67% 28.5%,81.96% 28.8%,82.73% 37.0%,83.09% 49.1%,83.38% 49.4%,84.30% 35.8%,85.08% 42.5%,85.85% 45.3%,86.58% 50.9%,87.51% 39.6%,87.99% 29.7%,88.52% 30.6%,88.89% 25.7%,89.49% 21.0%,90.22% 40.1%,90.96% 42.4%,91.39% 43.2%,91.89% 53.4%,92.31% 49.7%,93.13% 59.4%,93.64% 66.2%,94.64% 58.0%,95.13% 59.6%,95.98% 52.3%,96.59% 54.6%,97.60% 68.5%,98.66% 60.2%,99.25% 64.2%,99.76% 57.8%,100% 42%,100% 100%,0 100%);
}
.shows::after, .studio::after, .testimonials::after, .contact::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: clamp(100px,18vw,270px);
  aspect-ratio: 300 / 220;
  mask: url('../assets/textures/dry-strokes.svg') center / contain no-repeat;
  -webkit-mask: url('../assets/textures/dry-strokes.svg') center / contain no-repeat;
}
.shows::after { right: 0; top: 15px; background: #191b19; opacity: .07; }

/* Black paper, a purple paint field, and light lettering. */
.studio {
  --edge-color: #19161d;
  --ink: #f5f3ed;
  --plum: #c8a5dc;
  --muted: #d1c9d5;
  color: var(--ink);
  background-color: #19161d;
  background-image: url('../assets/textures/paper-grain.svg'), linear-gradient(113deg,transparent 0 64%,#302039 64% 100%);
}
.studio-copy p { color: var(--muted); }
.studio-photo figcaption { color: var(--muted); }
.studio::after { left: 0; bottom: 15px; background: #bb83cf; opacity: .22; transform: rotate(-12deg); }
.studio-photo { position: relative; }
.studio-photo::after {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 96px;
  height: 31px;
  right: -12px;
  top: 4px;
  transform: rotate(31deg);
  background: #8b2a38 url('../assets/textures/paper-grain.svg');
  clip-path: polygon(2% 0,97% 3%,100% 21%,97% 42%,100% 65%,97% 100%,0 96%,3% 77%,0 54%,3% 25%);
}

/* White paper with red ink for the classes and course programme. */
.classes { --edge-color: var(--paper); --plum: #982f40; }
.classes .courses { border-top: 2px solid #242124; }
.courses-heading > .eyebrow { display: inline-block; padding: 7px 12px; background: #982f40; color: #fff; transform: rotate(-2deg); }
.classes .carousel-controls button { border-color: #bb9398; }
.class-enquiry { border-color: #cdb8b8; }

/* Deep red, warm white: the testimonials read like a printed spread. */
.testimonials {
  --edge-color: #862837;
  --ink: #fff7f0;
  --plum: #f0c0b6;
  --muted: #f0d9d5;
  color: var(--ink);
  background-color: #862837;
}
.testimonials::after { right: 26px; top: 40px; background: #f0c0b6; opacity: .12; transform: rotate(12deg); }
.testimonials .sample-label, .testimonials .testimonial { border-color: #ffffff45; }
.testimonials .testimonial-name { font-weight: 600; }

/* A broad brush-like purple cut behind the contact heading. */
.contact { --edge-color: #19161d; background-color: #19161d; }
.contact::after { left: 0; bottom: 28px; width: clamp(170px,28vw,410px); background: #9665ad; opacity: .2; }
.contact .contact-copy { position: relative; }
.contact .contact-copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: calc(-1 * var(--gutter));
  top: 20%;
  width: calc(100% + var(--gutter));
  height: 145px;
  background: #38243f url('../assets/textures/paper-grain.svg');
  transform: rotate(-5deg);
  clip-path: polygon(0 7%,86% 0,82% 9%,100% 11%,90% 28%,96% 31%,91% 52%,99% 58%,83% 76%,88% 89%,0 100%);
}
.contact .text-link:hover { color: #c6a5d0; }
.visit { --edge-color: var(--paper); }
.site-footer {
  --ink: #f5f3ed;
  --plum: #c8a5dc;
  --line: #ffffff30;
  color: var(--ink);
  background-color: #19161d;
}
.footer-top { border-top: 0; }

@media (max-width: 760px) {
  .studio::before, .classes::before, .testimonials::before, .contact::before, .visit::before { top: -12px; height: 14px; }
  .studio { background-image: url('../assets/textures/paper-grain.svg'), linear-gradient(113deg,transparent 0 73%,#302039 73% 100%); }
  .studio-photo::after { width: 72px; height: 25px; right: -9px; }
  .shows::after, .testimonials::after { opacity: .06; }
  .contact .contact-copy::before { height: 100px; }
}
@media (forced-colors: active) {
  .studio::before, .classes::before, .testimonials::before, .contact::before, .visit::before,
  .shows::after, .studio::after, .testimonials::after, .contact::after,
  .studio-photo::after, .contact .contact-copy::before { display: none; }
}