/* Shared base for the two show pages (/knock-knock, /wombo). Each page sets
   its own palette in :root and adds its own layout on top. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 19px/1.6 'Crimson Pro', Georgia, serif;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: Anton, Impact, sans-serif; font-weight: 400; line-height: 1; margin: 0; letter-spacing: .01em; }
p { margin: 0 0 1em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 32px, 960px); margin-inline: auto; }

/* Printed-paper grain over everything, like the poster. */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  opacity: var(--grain, .14); mix-blend-mode: var(--grain-blend, multiply);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A torn bottom edge: the section underneath shows through the rips. */
/* Earlier sections stack above later ones, so each tear overlaps the next. */
main > section { position: relative; }
main > section:nth-child(1) { z-index: 9; } main > section:nth-child(2) { z-index: 8; }
main > section:nth-child(3) { z-index: 7; } main > section:nth-child(4) { z-index: 6; }
main > section:nth-child(5) { z-index: 5; } main > section:nth-child(6) { z-index: 4; }
main > section:nth-child(7) { z-index: 3; } main > section:nth-child(8) { z-index: 2; }
.torn {
  margin-bottom: -14px; padding-bottom: 14px;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V9L114 12 108 8 101 14 95 10 88 13 80 7 73 12 66 9 58 15 51 10 44 12 37 7 30 13 22 9 15 14 8 10 0 12Z'/%3E%3C/svg%3E") bottom / 760px 15px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V9L114 12 108 8 101 14 95 10 88 13 80 7 73 12 66 9 58 15 51 10 44 12 37 7 30 13 22 9 15 14 8 10 0 12Z'/%3E%3C/svg%3E") bottom / 760px 15px repeat-x;
}

/* Top bar */
.bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 11px max(16px, calc((100% - 960px) / 2));
  background: #120d0a; color: #efe3cf;
  font: 13px/1 'Special Elite', 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase;
}
.bar a { text-decoration: none; }
.bar a:hover { color: var(--accent); }
.bar nav { display: flex; gap: 18px; }
.bar [aria-current] { color: var(--accent); }

/* Running-time / cast / set, as a programme rider with dotted leaders. */
.rider { list-style: none; margin: 0; padding: 0; }
.rider li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 14px 0; border-bottom: 1px dashed currentColor; }
.rider li:first-child { border-top: 1px dashed currentColor; }
.rider b { font: 400 22px/1.2 Anton, Impact, sans-serif; letter-spacing: .02em; text-transform: uppercase; }
@media (max-width: 560px) { .rider li { grid-template-columns: 1fr; } }

/* Sign-up: a ticket stub for audiences, an index card for producers. */
.signup { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: start; }
@media (max-width: 760px) { .signup { grid-template-columns: 1fr; } }
.signup h2 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 8px; }
.signup .sub { font-size: 17px; margin-bottom: 18px; opacity: .85; }
.ticket {
  background: var(--ticket, #f3c623); color: #181009; padding: 26px 26px 26px 40px; position: relative;
  transform: rotate(-1.2deg);
  /* perforations down the left edge */
  -webkit-mask: radial-gradient(circle 6px at 0 50%, #0000 98%, #000) 0 0 / 100% 22px;
          mask: radial-gradient(circle 6px at 0 50%, #0000 98%, #000) 0 0 / 100% 22px;
}
.ticket::before { content: ''; position: absolute; left: 22px; top: 14px; bottom: 14px; border-left: 2px dashed rgba(24,16,9,.45); }
.card {
  background: #f7efdc; color: #181009; padding: 26px; transform: rotate(.6deg);
  border-top: 6px solid #b9241a;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.card h2 { color: #b9241a; }
.field { display: block; width: 100%; font: 18px/1.3 'Special Elite', 'Courier New', monospace; color: #181009;
  background: transparent; border: 0; border-bottom: 2px solid #181009; padding: 8px 2px; margin-bottom: 14px; border-radius: 0; }
.field:focus { outline: none; border-bottom-color: #b9241a; background: rgba(255,255,255,.35); }
textarea.field { min-height: 96px; resize: vertical; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row .field { flex: 1 1 180px; }
.btn {
  display: inline-block; cursor: pointer; border: 0; border-radius: 0;
  font: 400 18px/1 Anton, Impact, sans-serif; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  background: #181009; color: #f7efdc; padding: 14px 22px; transition: transform .12s ease;
}
.btn:hover { transform: rotate(-2deg) scale(1.03); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .6; cursor: progress; }
.done { font: 400 24px/1.15 Anton, Impact, sans-serif; text-transform: uppercase; }
.done small { display: block; margin-top: 6px; font: 17px/1.4 'Crimson Pro', Georgia, serif; text-transform: none; }
.done .btn { margin-top: 14px; font-size: 16px; }
.err { color: #8a1c10; font-size: 16px; margin: 8px 0 0; min-height: 1em; }

/* Also on the bill */
.also { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; text-decoration: none; }
.also img { transform: rotate(-2deg); box-shadow: 0 12px 30px rgba(0,0,0,.4); transition: transform .3s ease; }
.also:hover img { transform: rotate(0) scale(1.03); }
.also h2 { font-size: clamp(30px, 5vw, 48px); }
@media (max-width: 560px) { .also { grid-template-columns: 1fr; } .also img { max-width: 260px; } }

.foot { background: #120d0a; color: #b7a78a; padding: 34px 16px 40px; text-align: center;
  font: 13px/1.9 'Special Elite', 'Courier New', monospace; letter-spacing: .08em; text-transform: uppercase; }
.foot a { color: #efe3cf; }
.foot .name { text-transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}