/* Built from src/css/ by build.js — edit the modules, not this file.
   Modules, in order: 01-tokens-and-base.css, 02-animations.css, 03-header.css, 04-buttons.css, 05-marquee.css, 06-hero.css, 07-home.css, 08-about.css, 09-cast.css, 10-footer.css, 11-responsive.css, 12-print.css, 13-doc.css, 14-consent.css, 15-error.css, 16-touch.css, 17-program.css, 18-home-billing.css */

/* ==========================================================================
   The Apology Tour — September L. Davis
   Production stylesheet. Design tokens mirror the source design file.
   ========================================================================== */

:root {
  --blue: #0e66c0;
  --gold: #eadb75;
  /* Lightened from #eaab75, which read at 2.87:1 on blue and missed the 3:1
     large-text floor for the wordmark. This clears it at 3.14:1. */
  --peach: #eeb583;
  /* Blue text on gold or peach only. The brand blue above measures 4.05:1 on
     gold, under the 4.5:1 body-text floor, so the Get Tickets label and the
     schedule badges failed. This clears both: 6.65:1 on gold, 5.17:1 on
     peach. Never use it as a background; --blue remains the page blue. */
  --blue-deep: #094687;
  --ink: #000;
  --paper: #fff;

  --display: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --body: Inter, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --script: 'Great Vibes', 'Snell Roundhand', cursive;

  /* Static fallbacks only. site.js measures the real header on load, on
     resize and after webfonts settle, then overwrites both of these. The
     narrow-screen fallbacks live in 11-responsive.css.
       --header-h      sticky bar alone, for scroll-margin-top
       --top-chrome-h  header + marquee, for sizing the hero to one screen */
  --header-h: 68px;
  --top-chrome-h: 107px;

  --gutter: clamp(18px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Backstop for the body rule below. iOS Safari will still rubber-band
     sideways if only body clips, which surfaces any sub-pixel overflow as a
     horizontal drag on the whole page. */
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  background: var(--blue);
  color: var(--ink);
  font-family: var(--body);
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; }

a { color: var(--peach); text-decoration: none; }
a:hover { color: var(--gold); }

::selection { background: var(--gold); color: var(--blue); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--blue-deep);
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 14px;
  padding: 12px 18px;
  border: 3px solid var(--ink);
}
.skip-link:focus { left: 8px; top: 8px; }

.site { background: var(--paper); min-height: 100vh; }

.is-hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes sldRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sldZoom { from { transform: scale(1.02); } to { transform: scale(1.16); } }
@keyframes sldSlam {
  0% { opacity: 0; transform: scale(2.4) rotate(-3deg); filter: blur(14px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes sldSign { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sldKiss {
  0% { opacity: 0; transform: translate(60px, -70px) scale(2.6) rotate(-38deg); }
  45% { opacity: 1; transform: translate(6px, -6px) scale(1.25) rotate(-16deg); }
  62% { transform: translate(0, 0) scale(0.86, 1.14) rotate(-11deg); }
  76% { transform: scale(1.12, 0.9) rotate(-13deg); }
  100% { opacity: 1; transform: scale(1) rotate(-12deg); }
}
@keyframes sldPulse {
  0%, 100% { transform: none; box-shadow: 8px 8px 0 var(--ink); }
  50% { transform: translate(-2px, -2px); box-shadow: 12px 12px 0 var(--ink); }
}

/* --------------------------------------------------------------------------
   Header

   Four flat flex children: brand, nav, social, Get Tickets. Keeping them flat
   (rather than in left/right wrappers) is what lets the narrow-screen rules in
   11-responsive.css reorder them into two clean rows instead of letting the
   row wrap wherever it happens to run out of room.
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blue);
  border-bottom: 3px solid var(--ink);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px clamp(14px, 2.4vw, 34px);
  padding: 10px clamp(14px, 3vw, 32px);
  min-height: var(--header-h);
}

/* Social channels, sitting just left of the Get Tickets button. */
.social {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.6vw, 8px);
}

.social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px box around a 22px icon. See 16-touch.css. */
  min-width: 44px;
  min-height: 44px;
  color: var(--paper);
  line-height: 0;
}
.social__link:hover { color: var(--gold); }

.social__link svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}

.brand {
  font-family: var(--script);
  font-size: 30px;
  color: var(--peach);
  line-height: 1;
  white-space: nowrap;
}
.brand:hover { color: var(--gold); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 26px);
  flex-wrap: wrap;
  /* Pushes social + Get Tickets to the right edge on wide screens. */
  margin-right: auto;
}

.nav__link {
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  padding-bottom: 3px;
  border-bottom: 3px solid transparent;
}
.nav__link:hover { border-bottom-color: var(--gold); color: var(--gold); }
.nav__link[aria-current='page'] { border-bottom-color: var(--peach); }

/* The ticket CTA never shrinks and never wraps. It is the only conversion the
   site owns, and it was being clipped by the page's overflow-x guard. */
.btn--header { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn--header {
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--blue-deep);
  background: var(--gold);
  border: 3px solid var(--ink);
  padding: 11px 20px;
}
.btn--header:hover { background: var(--peach); color: var(--ink); }

.btn--hero {
  letter-spacing: 0.14em;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--blue-deep);
  background: var(--gold);
  border: 4px solid var(--ink);
  padding: 17px 34px;
  box-shadow: 8px 8px 0 var(--ink);
  animation: sldPulse 2.6s ease-in-out infinite;
}
.btn--hero:hover { background: var(--paper); color: var(--blue); }

.btn--statement {
  letter-spacing: 0.14em;
  font-size: 16px;
  color: var(--paper);
  background: var(--blue);
  border: 4px solid var(--ink);
  padding: 16px 30px;
  box-shadow: 8px 8px 0 var(--ink);
}
.btn--statement:hover { background: var(--ink); color: var(--gold); }

.btn--footer {
  letter-spacing: 0.14em;
  font-size: 13px;
  color: var(--blue-deep);
  background: var(--gold);
  padding: 10px 18px;
  margin-top: 6px;
}
.btn--footer:hover { background: var(--peach); color: var(--blue-deep); }

/* Sits on ink at the foot of the video wall. Gold on black is the only
   pairing in the set that does not need the black keyline to separate it from
   its ground, so this one carries the offset shadow instead. */
.btn--reel {
  letter-spacing: 0.14em;
  font-size: 14px;
  color: var(--blue-deep);
  background: var(--gold);
  border: 3px solid var(--ink);
  padding: 14px 26px;
  box-shadow: 6px 6px 0 rgba(255, 255, 255, 0.22);
}
.btn--reel:hover {
  background: var(--paper);
  color: var(--blue);
  box-shadow: 6px 6px 0 var(--gold);
}

.link-underline {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 3px solid var(--blue);
  padding-bottom: 4px;
}
.link-underline:hover { color: var(--blue); }

/* --------------------------------------------------------------------------
   Billing strip above the hero

   See src/partials/marquee.html for why the class is still called "marquee".
   No animation here on purpose: the reader sets the pace.
   -------------------------------------------------------------------------- */

.marquee {
  background: var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: clamp(9px, 1.5vw, 15px) var(--gutter);
  text-align: center;
}

/* The pullquote's treatment, kept: script gold over display caps. It is the
   one place on the site her voice is set rather than spoken, so flattening it
   to a caps strip threw away the reason the line works. Scaled down to sit in
   a band above the hero rather than as a full section below it. */
.marquee__line {
  font-family: var(--script);
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.15;
  color: var(--gold);
  margin: 0;
  text-wrap: balance;
}

.marquee__sub {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(10.5px, 1.15vw, 15px);
  line-height: 1.4;
  color: var(--paper);
  margin: 5px 0 0;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--blue);
  /* Subtract the marquee too, not just the header. Sizing against --header-h
     alone overshot by the marquee's height and pushed the CTA below the fold. */
  min-height: calc(100vh - var(--top-chrome-h));
  min-height: calc(100dvh - var(--top-chrome-h));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 32%;
  animation: sldZoom 26s ease-in-out infinite alternate;
  transform-origin: 62% 40%;
}

.hero__scrim,
.hero__scrim--side { position: absolute; inset: 0; pointer-events: none; }

.hero__scrim {
  background: linear-gradient(to bottom,
    rgba(14, 102, 192, 0.4) 0%,
    rgba(14, 102, 192, 0) 26%,
    rgba(0, 0, 0, 0.3) 52%,
    rgba(0, 0, 0, 0.72) 100%);
}

.hero__scrim--side {
  background: linear-gradient(105deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.5) 34%,
    rgba(0, 0, 0, 0.12) 58%,
    rgba(0, 0, 0, 0) 74%);
}

.hero__shout {
  position: absolute;
  top: clamp(10px, 3vh, 44px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--paper);
  font-size: clamp(64px, 15.5vw, 260px);
  line-height: 0.82;
  letter-spacing: -0.035em;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  animation: sldSlam 1.1s cubic-bezier(.2, 1.5, .4, 1) both;
  z-index: 2;
}

.hero__body {
  position: relative;
  z-index: 3;
  padding: clamp(24px, 5vw, 64px) var(--gutter) clamp(28px, 5vw, 60px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.hero__stack { animation: sldRise 0.9s 0.45s ease both; }
.hero__aside { animation: sldRise 0.9s 0.7s ease both; }

.hero__script {
  font-family: var(--script);
  font-size: clamp(44px, 7vw, 108px);
  color: var(--peach);
  line-height: 0.9;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.hero__title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--paper);
  font-size: clamp(24px, 3.6vw, 58px);
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 2px 0 20px;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.hero__count {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(15px, 1.7vw, 22px);
  color: var(--gold);
  margin: 0 0 4px;
}

.hero__dates {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(15px, 1.7vw, 22px);
  color: var(--paper);
  margin: 0 0 22px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero__statement-link {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(13px, 1.4vw, 17px);
  color: var(--paper);
  border-bottom: 3px solid var(--peach);
  padding-bottom: 4px;
}
.hero__statement-link:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   Home — pull quote, facts, schedule, FAQ
   -------------------------------------------------------------------------- */

.facts { background: var(--blue); padding: clamp(40px, 6vw, 90px) var(--gutter); }

.facts__grid {
  background: var(--paper);
  border: 5px solid var(--ink);
  box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.35);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.fact { padding: clamp(24px, 3vw, 40px); border-right: 3px solid var(--ink); }
.fact:last-child { border-right: 0; }

.fact__label {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--blue);
  margin-bottom: 12px;
}

.fact__value {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
  margin-bottom: 10px;
}

.fact__note { margin: 0; font-size: 16px; line-height: 1.6; }

.inline-link { color: var(--blue); border-bottom: 2px solid var(--peach); }
.inline-link:hover { color: var(--blue); border-bottom-color: var(--blue); }

.schedule {
  background: var(--paper);
  padding: clamp(46px, 7vw, 100px) var(--gutter);
  border-top: 5px solid var(--ink);
  scroll-margin-top: var(--header-h);
}

.schedule__title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(34px, 5.5vw, 74px);
  line-height: 0.9;
  margin: 0 0 8px;
  color: var(--blue);
}

.schedule__note {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  margin: 0 0 34px;
}

.schedule__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 3px;
  background: var(--ink);
  border: 4px solid var(--ink);
}

.show {
  background: var(--paper);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.show--final { background: var(--gold); }

.show__day {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--blue-deep);
}

.show__date {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.05;
}

.show__time { font-size: 15px; color: var(--ink); font-weight: 600; }

.show__tag {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: var(--blue-deep);
}

.show__badge {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--blue-deep);
  background: var(--peach);
  border: 2px solid var(--ink);
  padding: 4px 9px;
  align-self: flex-start;
  margin-top: 2px;
}

/* Two-show dates get one button per performance, so they need to wrap. */
.show__buys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 6px;
}

.show__buy {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--ink);
  border-bottom: 2px solid var(--peach);
  align-self: flex-start;
}
.show__buy:hover { color: var(--blue); border-bottom-color: var(--blue); }
.show--final .show__buy { border-bottom-color: var(--ink); }

.faq {
  background: var(--peach);
  border-top: 5px solid var(--ink);
  padding: clamp(46px, 7vw, 100px) var(--gutter);
}

.faq__title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(34px, 5.5vw, 74px);
  line-height: 0.9;
  margin: 0 0 32px;
  color: var(--blue);
}

.faq__lede {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  margin: -20px 0 30px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--ink);
  border: 4px solid var(--ink);
  max-width: 980px;
}

.faq__item { background: var(--paper); padding: 20px 24px; }

.faq__q {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(16px, 1.7vw, 20px);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--blue); }

.faq__a { margin: 14px 0 0; font-size: 16px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   About — the statement
   -------------------------------------------------------------------------- */

.statement {
  background: var(--peach);
  padding: clamp(28px, 5vw, 80px) clamp(14px, 4vw, 72px) clamp(48px, 7vw, 110px);
}

.statement__frame {
  max-width: 1060px;
  margin: 0 auto;
  border: 3px solid var(--ink);
  padding: clamp(8px, 1.2vw, 16px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
}

.statement__frame-inner { border: 1px solid var(--ink); padding: clamp(8px, 1.2vw, 16px); }

.statement__sheet {
  background: var(--paper);
  padding: clamp(30px, 6vw, 92px) clamp(22px, 6vw, 96px) clamp(40px, 6vw, 88px);
}

.statement__letterhead {
  text-align: center;
  padding-bottom: clamp(24px, 3vw, 42px);
  margin-bottom: clamp(28px, 4vw, 52px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.statement__eyebrow {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 11px;
  color: var(--blue);
  margin-bottom: 18px;
}

.statement__name {
  font-family: var(--script);
  font-size: clamp(46px, 7vw, 100px);
  line-height: 1;
  color: var(--blue);
}

.statement__creds {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: clamp(11px, 1.1vw, 15px);
  color: var(--ink);
  margin-top: 12px;
}

.statement__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
.statement__rule span:first-child,
.statement__rule span:last-child {
  width: clamp(30px, 8vw, 90px);
  height: 1px;
  background: rgba(0, 0, 0, 0.3);
}
.statement__rule em {
  font-family: var(--display);
  font-weight: 300;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--ink);
}

.statement__prose {
  max-width: 40em;
  margin: 0 auto;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.8;
}
.statement__prose p { margin: 0 0 1.5em; }
.statement__prose p.lede { font-size: 1.35em; line-height: 1.5; font-weight: 500; }
.statement__prose p.shout {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.5em;
  line-height: 1.15;
  color: var(--blue);
  letter-spacing: -0.01em;
}
.statement__prose p.signoff { margin-bottom: 1.2em; }

.statement__schedule {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 20px 24px;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.82em;
  line-height: 1.9;
}
.statement__schedule li + li { border-top: 1px solid rgba(0, 0, 0, 0.12); }

.statement__producer {
  margin: 2.4em 0 0;
  padding-top: 1.2em;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  font-size: 0.78em;
  font-style: italic;
  line-height: 1.6;
  color: #555;
}

.signblock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 0.6em;
}

.signblock__sig { width: min(100%, 460px); height: auto; display: block; }

.signblock__initials {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--ink);
}

.kiss {
  position: absolute;
  right: clamp(0px, 6vw, 60px);
  bottom: -18px;
  font-size: clamp(48px, 7vw, 84px);
  line-height: 1;
  opacity: 0;
  transform-origin: 50% 60%;
  pointer-events: none;
}

.statement__actions {
  max-width: 1060px;
  margin: clamp(30px, 4vw, 54px) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Cast & Creative
   -------------------------------------------------------------------------- */

.cast-hero {
  background: var(--blue);
  padding: clamp(40px, 6vw, 90px) var(--gutter) clamp(30px, 4vw, 60px);
}

.cast-hero__title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--paper);
  font-size: clamp(44px, 9vw, 128px);
  line-height: 0.85;
  margin: 0 0 14px;
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.25);
}

.cast-hero__sub {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--gold);
  margin: 0;
  max-width: 32ch;
}

.section {
  border-top: 5px solid var(--ink);
  padding: clamp(40px, 6vw, 88px) var(--gutter);
}
.section--paper { background: var(--paper); }
.section--gold { background: var(--gold); padding: clamp(36px, 5vw, 72px) var(--gutter); }
.section--blue { background: var(--blue); }

.section__title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(28px, 4vw, 52px);
  color: var(--blue);
  margin: 0 0 28px;
}
.section__title--center { text-align: center; margin: 0 0 8px; }
.section__title--sm { font-size: clamp(24px, 3vw, 40px); margin: 0 0 22px; }
.section__title--onblue { color: var(--paper); }

.section__lede {
  text-align: center;
  margin: 0 auto clamp(28px, 4vw, 48px);
  max-width: 46ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
}

.star {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: clamp(48px, 7vw, 96px);
}

.star__photo {
  width: min(100%, 340px);
  /* Beats the width/height attribute presentational hint so aspect-ratio wins. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 50%;
  border: 5px solid var(--ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.star__name {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1;
  color: var(--blue);
}

.star__role { font-size: clamp(17px, 1.5vw, 21px); margin-top: 8px; }

.star .kiss {
  right: clamp(-56px, -5vw, -28px);
  top: -14px;
  bottom: auto;
  font-size: clamp(34px, 4vw, 54px);
}

.subhead {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(24px, 3.2vw, 42px);
  color: var(--blue);
  margin: 0 0 clamp(24px, 3vw, 40px);
  text-align: center;
}

.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(28px, 3.5vw, 52px);
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.cast-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.cast-card__placeholder {
  width: min(100%, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--peach);
  border: 3px dashed var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  color: var(--blue-deep);
}

.cast-card__name {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.05;
  color: var(--blue);
}

.cast-card__role { font-size: 16px; margin-top: 6px; color: var(--ink); }

.featuring {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 32px);
}

.credits { max-width: 820px; display: flex; flex-direction: column; gap: 14px; }

.credit {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(16px, 1.5vw, 20px);
}

.credit__role {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.credit__dots {
  flex: 1;
  border-bottom: 2px dotted var(--blue);
  transform: translateY(-4px);
}

.credit__name { font-weight: 500; white-space: nowrap; }

.bio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.bio {
  background: var(--paper);
  border: 4px solid var(--ink);
  padding: 26px;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.3);
}

.bio__character {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin-bottom: 6px;
}

.bio__name {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.05;
  margin-bottom: 12px;
}

.bio__text { margin: 0; font-size: 16px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(46px, 6vw, 88px) var(--gutter) 40px;
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 36px;
  align-items: flex-start;
}

.footer__brand { flex: 1 1 280px; max-width: 340px; }

.footer__mark {
  width: min(100%, 300px);
  aspect-ratio: 3075 / 925;
  margin-bottom: 10px;
  background-color: var(--peach);
  -webkit-mask-image: url('/uploads/signature.png');
  mask-image: url('/uploads/signature.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.footer__tag {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 14px;
  color: var(--gold);
}

.footer__label {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 12px;
}

.footer__text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--paper); }

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.footer__link {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  color: var(--paper);
}
.footer__link:hover { color: var(--gold); }

.footer__legal {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid #333;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #888;
}
.footer__legal a { color: #888; margin-left: 8px; }
.footer__legal a:hover { color: var(--gold); }

.footer__prefs {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  font: inherit;
  letter-spacing: inherit;
  color: #888;
  text-decoration: underline;
  cursor: pointer;
}
.footer__prefs:hover { color: var(--gold); }

.footer__credit { display: block; margin-top: 8px; }
.footer__credit a { margin-left: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* ------------------------------------------------------------------- header

   The wide header is one row: brand, nav, social, Get Tickets. It needs 860px
   to fit; below that there is not enough room, and letting it wrap on its own
   produced three
   ragged rows with Get Tickets pushed off the right edge and clipped by the
   page's overflow guard. Force two rows instead:

     row 1   brand .......................... Get Tickets
     row 2   Home  About  Merch

   Get Tickets stays on row one at every width. The social icons drop out and
   are served from the footer instead.

   860px is measured, not guessed: below it the one-row header wraps. Tablets
   in portrait get this layout too, which is the right call. */

@media (max-width: 859px) {
  :root {
    /* Fallbacks for the two-row header until site.js measures it. */
    --header-h: 92px;
    --top-chrome-h: 131px;
  }

  .header {
    gap: 8px 12px;
    padding: 8px clamp(12px, 3vw, 20px);
  }

  .brand {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 24px;
  }

  .btn--header {
    order: 2;
    font-size: 12px;
    padding: 10px 14px;
    letter-spacing: 0.12em;
  }

  /* flex-basis 100% is what forces the second row. */
  .nav {
    order: 3;
    flex: 1 0 100%;
    margin-right: 0;
    gap: 20px;
  }

  .nav__link { font-size: 12px; letter-spacing: 0.1em; }

  .social { display: none; }
}

/* Small phones (iPhone SE and similar). The brand is a nowrap script face, so
   it and the button have to give ground together or row one overflows. */
@media (max-width: 380px) {
  .brand { font-size: 20px; }
  .btn--header { font-size: 11px; padding: 9px 10px; letter-spacing: 0.08em; }
  .nav { gap: 16px; }
}

/* --------------------------------------------------------------------- body */

@media (max-width: 640px) {
  .fact { border-right: 0; border-bottom: 3px solid var(--ink); }
  .fact:last-child { border-bottom: 0; }
  .featuring { gap: 10px 24px; }
  .credit__name { white-space: normal; }

  /* The statement's double frame is a letterpress conceit that costs 118px of
     a 390px screen, squeezing the prose to a 35-character measure. Collapse it
     to a single hairline and give the words the room back. */
  .statement { padding-left: 10px; padding-right: 10px; }

  .statement__frame {
    border-width: 1px;
    padding: 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  }

  .statement__frame-inner { border: 0; padding: 0; }
  .statement__sheet { padding: 30px 18px 38px; }
}

/* ------------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .hero__img,
  .hero__shout,
  .hero__stack,
  .hero__aside,
  .btn--hero { animation: none !important; }
  .signblock__sig { clip-path: none !important; }
  .kiss { opacity: 1 !important; transform: rotate(-12deg); }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Print — the statement should print cleanly
   -------------------------------------------------------------------------- */

@media print {
  .header, .marquee, .footer, .statement__actions, .hero { display: none !important; }
  .statement { background: #fff; padding: 0; }
  .statement__frame { border: 0; box-shadow: none; }
  .statement__frame-inner { border: 0; }

  /* Program: a printed program with every bio collapsed is useless, so
     reveal them and drop the controls that mean nothing on paper. */
  /* content-visibility, not display, is what until-found toggles. */
  .cast-row__bio[hidden] {
    content-visibility: visible !important;
    display: block !important;
    padding: 0 0 22px !important;
  }
  .cast-row__chev,
  .cast-row__ig,
  .company__more { display: none !important; }

  .prog-cast,
  .prog-band,
  .prog-creative,
  .prog-company,
  .prog-companies,
  .prog__head { background: #fff !important; }

  .prog__title,
  .cast-row__name,
  .cast-row__role,
  .cast-row__bio p,
  .prog-h2--shadow,
  .cast-note { color: #000 !important; text-shadow: none !important; }

  .cast-note { background: none !important; border-left: 2px solid #000; }
}

/* --------------------------------------------------------------------------
   Long-form documents (privacy policy)
   -------------------------------------------------------------------------- */

  .doc { background: var(--paper); padding: clamp(32px, 6vw, 90px) var(--gutter); }
  .doc__inner { max-width: 68ch; margin: 0 auto; }
  .doc h1 {
    font-family: var(--display);
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 0.92;
    color: var(--blue);
    margin: 0 0 10px;
  }
  .doc__meta {
    font-family: var(--display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    margin: 0;
  }
  .doc__intro { font-size: 18px; line-height: 1.7; margin: 24px 0 0; }
  .doc h2 {
    font-family: var(--display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(18px, 2.2vw, 24px);
    color: var(--blue);
    margin: 40px 0 12px;
    padding-top: 20px;
    border-top: 3px solid var(--ink);
  }
  .doc h3 {
    font-family: var(--display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 15px;
    margin: 26px 0 6px;
  }
  .doc p, .doc li { font-size: 16.5px; line-height: 1.75; }
  .doc ul { padding-left: 1.2em; }
  .doc li { margin-bottom: 8px; }
  .doc table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 15px;
  }
  .doc th, .doc td {
    border: 2px solid var(--ink);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
  }
  .doc th {
    font-family: var(--display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
    background: var(--gold);
    color: var(--blue-deep);
  }
  .doc__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .doc__toc {
    background: var(--peach);
    border: 3px solid var(--ink);
    padding: 20px 24px;
    margin: 32px 0 8px;
  }
  .doc__toc ol { margin: 0; padding-left: 1.3em; }
  .doc__toc li { margin-bottom: 4px; font-size: 15px; }
  .doc__toc a { color: var(--blue-deep); border-bottom: 1px solid rgba(9, 70, 135, 0.45); }
  .doc__callout {
    background: var(--gold);
    border: 3px solid var(--ink);
    padding: 18px 22px;
    margin: 24px 0;
  }
  .doc__callout p { margin: 0; font-weight: 500; }
  .doc__prefs {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--blue-deep);
    text-decoration: underline;
    cursor: pointer;
  }
  .doc h2[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* --------------------------------------------------------------------------
   Consent banner — shown only where consent is required (see js/analytics.js)
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--ink);
  border-top: 4px solid var(--gold);
  padding: 18px clamp(16px, 4vw, 40px);
  animation: sldRise 0.4s ease both;
}

.consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.consent__copy { flex: 1 1 420px; }

.consent__title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: var(--gold);
  margin: 0 0 6px;
}

.consent__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper);
  max-width: 70ch;
}
.consent__text a { color: var(--peach); border-bottom: 1px solid currentColor; }
.consent__text a:hover { color: var(--gold); }

.consent__actions {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

.consent__btn {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  padding: 13px 22px;
  border: 3px solid var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.consent__btn--yes { background: var(--gold); color: var(--blue-deep); }
.consent__btn--yes:hover { background: var(--peach); color: var(--ink); }

.consent__btn--no {
  background: transparent;
  color: var(--paper);
  border-color: #555;
}
.consent__btn--no:hover { border-color: var(--paper); }

@media (max-width: 520px) {
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1; text-align: center; padding: 13px 12px; }
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

  .oops {
    min-height: 100vh;
    background: var(--blue);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(28px, 8vw, 96px);
    gap: 18px;
  }
  .oops__code {
    font-family: var(--display);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--paper);
    font-size: clamp(72px, 18vw, 240px);
    line-height: 0.82;
    letter-spacing: -0.035em;
    margin: 0;
    text-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  }
  .oops__script {
    font-family: var(--script);
    font-size: clamp(34px, 6vw, 76px);
    color: var(--peach);
    line-height: 1;
  }
  .oops__text {
    font-family: var(--display);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--paper);
    font-size: clamp(15px, 1.8vw, 21px);
    max-width: 34ch;
    margin: 0;
  }

/* --------------------------------------------------------------------------
   Touch targets

   Most links here are small-caps type at 12-15px, which gives a hit area of
   about 22px. Apple and Google both ask for 44px. Growing the type would wreck
   the typography, so the hit area is grown instead: a transparent pseudo
   element centred on the link, 44px tall, which catches the tap without moving
   a single pixel of what you see.

   Only vertical growth is needed. These links sit in rows with 16px or more
   between them, so nothing overlaps horizontally.
   -------------------------------------------------------------------------- */

.nav__link,
.brand,
.footer__link,
.show__buy,
.hero__statement-link,
.link-underline,
.footer__legal a,
.footer__prefs,
.inline-link { position: relative; }

.nav__link::after,
.brand::after,
.footer__link::after,
.show__buy::after,
.hero__statement-link::after,
.link-underline::after,
.footer__legal a::after,
.footer__prefs::after,
.inline-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Inline links inside running prose are the exception. A 44px band there would
   sit on top of the lines above and below and steal their taps. */
.doc .inline-link::after,
.statement__prose .inline-link::after { content: none; }

/* Grey flash on tap reads as a rendering fault against this palette. */
a,
button,
summary,
.consent__btn { -webkit-tap-highlight-color: rgba(234, 219, 117, 0.35); }

/* FAQ rows are the one place where growing the real box is the right fix:
   the whole summary is the control, and it already has padding to spare. */
.faq__q {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Buttons carry their own hit area rather than a pseudo element: they are
   already boxes, they just sat a few pixels under the minimum. */
.btn,
.consent__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Digital program (/bios)

   Read on a phone, in a dark house, in the few minutes before curtain. That
   sets the whole design:

   - Cast is name-led and expands in place. People look up a person, and an
     overlay would hide the list they were reading.
   - Company credits are role-led and grouped by department. People look up a
     function, and 28 names read as five short lists rather than one long one.
   - Only the three company blurbs use the overlay, because each is a
     standalone read rather than part of a list.

   The heavy display face with a hard black offset is the show's playbill
   voice, kept for section headings and cast names and deliberately withheld
   from the credit rows, where 28 of them would be noise. Nunito Sans 900
   stands in for Prenton Ultra Condensed, which is licensed and not ours.
   -------------------------------------------------------------------------- */

.prog { background: var(--paper); }

/* ------------------------------------------------------------------- header */

/* Centred, like a title page. Every section heading below it is centred too,
   so left-aligning this was the one thing out of step. */
.prog__head {
  background: var(--blue);
  border-bottom: 5px solid var(--ink);
  padding: clamp(30px, 4.5vw, 56px) var(--gutter) clamp(30px, 4vw, 56px);
  text-align: center;
}

.prog__title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--paper);
  font-size: clamp(26px, 5.2vw, 62px);
  line-height: 1;
  letter-spacing: -0.01em;
  /* No measure cap: the <br> between artist and title is the only break
     wanted. A cap was splitting it into four ragged lines. */
  margin: 0 auto;
}

/* ------------------------------------------------------------ section heads */

.prog-h2--shadow {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 3px 3px 0 var(--ink);
  font-size: clamp(34px, 5.5vw, 60px);
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0 0 clamp(32px, 5vw, 56px);
}

.prog-cast .prog-h2--shadow { color: var(--gold); }
.prog-band .prog-h2--shadow { color: var(--blue); }
.prog-creative .prog-h2--shadow { color: var(--blue); }
.prog-company .prog-h2--shadow { color: var(--blue); }
.prog-companies .prog-h2--shadow { color: var(--gold); }

.prog-h2 {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(15px, 1.7vw, 19px);
  color: var(--blue);
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--ink);
}

/* -------------------------------------------------------------------- cast */

.prog-cast {
  background: var(--blue);
  border-bottom: 5px solid var(--ink);
  padding: clamp(40px, 6vw, 88px) var(--gutter);
}

.cast-list {
  max-width: 720px;
  margin: 0 auto;
  border-top: 2px solid rgba(255, 255, 255, 0.25);
}

.cast-row { border-bottom: 2px solid rgba(255, 255, 255, 0.25); }

/* Row bar: the expand control, plus a follow link that sits outside it so
   following someone never requires opening their bio first. */
.cast-row__bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cast-row__static { flex: 1; min-width: 0; }

/* Instagram. Icon rather than "Follow @handle" text, which would crowd the
   row at phone width and push the name into wrapping. */
.cast-row__ig {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--gold);
}
.cast-row__ig:hover { color: var(--paper); }

.cast-row__ig svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}

/* The whole row is the control on rows that have a bio. */
.cast-row__toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cast-row__head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  flex: 1;
  min-width: 0;
  padding: 18px 0;
}

.cast-row__photo {
  width: clamp(56px, 9vw, 76px);
  height: auto;
  aspect-ratio: 1;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 50%;
  border: 3px solid var(--ink);
}

.cast-row__id { min-width: 0; }

.cast-row__name {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.05;
  color: var(--gold);
  text-shadow: 2px 2px 0 var(--ink);
  margin: 0;
}

.cast-row__role {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--paper);
  margin: 5px 0 0;
}

/* Selected-date performers. The one line a ticket-holder needs to catch. */
.cast-row__note {
  display: inline-block;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  color: var(--blue-deep);
  background: var(--peach);
  border: 2px solid var(--ink);
  padding: 3px 7px;
  margin: 8px 0 0;
}

/* Chevron. Rotates when the row is open. */
.cast-row__chev {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  border-right: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}

.cast-row__toggle[aria-expanded='true'] .cast-row__chev {
  transform: rotate(225deg) translate(-2px, -2px);
}

.cast-row__toggle:hover .cast-row__name { color: var(--paper); }

.cast-row__bio {
  padding: 0 0 22px;
  max-width: 62ch;
}

/* hidden="until-found" hides content via content-visibility, not display, so
   the element keeps its box. Without this every collapsed row leaves a 22px
   gap under it. */
.cast-row__bio[hidden] { padding: 0; }

.cast-row__bio p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--paper);
}

/* Alternating-casting note, set apart from the list it qualifies. */
.cast-note {
  max-width: 720px;
  margin: 22px auto 0;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.22);
  border-left: 4px solid var(--peach);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper);
}

/* ------------------------------------------------------------- credit rows */

.prog-band,
.prog-creative,
.prog-company {
  border-bottom: 5px solid var(--ink);
  padding: clamp(40px, 6vw, 88px) var(--gutter);
}

.prog-band { background: var(--peach); }
.prog-creative { background: var(--paper); }
.prog-company { background: var(--gold); }

/* Creative is one block under its own section heading, so it centres on a
   single reading column instead of spreading into the multi-column grid. */
.dept-grid.dept-grid--single { max-width: 560px; }

.dept-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(30px, 4vw, 52px);
  align-items: start;
}

.dept__title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--blue-deep);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--ink);
}

/* A standalone credit belonging to the whole department rather than to any
   one role, e.g. "Based on a character originally created by...". */
.dept__note {
  margin: 16px 0 0;
  font-family: var(--body);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0.75;
}

.credit-list { margin: 0; }

/* Role left, name right, on one line until the column gets tight. */
.credit-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.credit-row:last-child { border-bottom: 0; }

.prog-company .credit-row,
.prog-band .credit-row { border-bottom-color: rgba(0, 0, 0, 0.22); }

.credit-row__role {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.7;
  flex: 0 1 auto;
}

.credit-row__name {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 500;
  text-align: right;
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------- companies */

.prog-companies {
  background: var(--blue);
  border-bottom: 5px solid var(--ink);
  padding: clamp(40px, 6vw, 88px) var(--gutter);
}

.company-list {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.company__btn {
  display: block;
  width: 100%;
  min-height: 44px;
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
  padding: 18px 20px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.company__btn:hover { background: var(--gold); }

.company__name {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.1;
  color: var(--blue);
}

.company__role {
  display: block;
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  margin-top: 4px;
}

.company__more {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
  color: var(--blue);
  margin-top: 10px;
}

/* ------------------------------------------------------------------- modal */

.team-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}

.team-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
}

.team-modal__panel {
  position: relative;
  width: min(100%, 620px);
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  padding: clamp(40px, 5vw, 56px) clamp(18px, 3vw, 32px) clamp(28px, 4vw, 40px);
}

.team-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background: none;
  border: 0;
  font-size: 34px;
  line-height: 1;
  color: var(--paper);
  cursor: pointer;
}
.team-modal__close:hover { color: var(--gold); }

.team-modal__name {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1;
  color: var(--paper);
  margin: 0 0 8px;
}

.team-modal__role {
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--gold);
  margin: 0 0 22px;
}

.team-modal__bio p {
  margin: 0 0 1.1em;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--paper);
  text-align: left;
}
.team-modal__bio p:last-child { margin-bottom: 0; }

/* Named people inside a company overlay (the producers under Boundary Road). */
.modal-person {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 2px solid rgba(255, 255, 255, 0.25);
  text-align: left;
}

.modal-person__name {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.1;
  color: var(--gold);
  margin: 0;
}

.modal-person__meta {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: var(--peach);
  margin: 5px 0 14px;
}

.modal-person__link {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}
.modal-person__link a { color: var(--gold); border-bottom: 1px solid currentColor; }

/* ----------------------------------------------------------------- closing */

.prog__body {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 72px) var(--gutter) clamp(50px, 7vw, 96px);
}

.prog-section { margin-bottom: clamp(40px, 5vw, 68px); }
.prog-section--last { margin-bottom: 0; }

.prog-thanks {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
}

.prog-more {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  line-height: 1.5;
}

.prog-more__item { padding: 7px 0; }
.prog-more__item:first-child { color: var(--blue); }

/* ------------------------------------------------------------------ narrow */

@media (max-width: 520px) {
  /* Role above name once the column is too tight for both on one line. */
  .credit-row {
    flex-direction: column;
    gap: 1px;
    padding: 9px 0;
  }
  .credit-row__name { text-align: left; }
}

/* --------------------------------------------------------------------------
   Home — synopsis, video wall, cast and creative

   Three sections the ticket path did not previously answer, in the order a
   stranger needs them: what the show is, what it looks like, who is in it.
   The schedule follows, so the page asks for money only after it has made the
   case. The header's Get Tickets button is sticky throughout, so nothing here
   stands between a visitor who arrived ready to buy and the checkout.

   Ground colours alternate so no two neighbouring sections share one:

     hero      image
     facts     blue
     synopsis  paper
     video     ink
     company   blue
     schedule  paper
     faq       peach

   The cast list reuses .cast-list / .cast-row from 17-program.css rather than
   restating them. Those rules assume gold on blue, which is why .billing
   carries the blue ground the program section gives them on /bios. The credit
   rows are the other way round: 17 grounds them for paper, so every colour in
   them is restated for blue below. This file loads after 17 in filename
   order, so it wins either way.
   -------------------------------------------------------------------------- */

/* Shared by all three headings here, and matched to .schedule__title and
   .faq__title so the page carries one heading scale rather than four. */
.synopsis__title,
.reel__title,
.billing__title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(34px, 5.5vw, 74px);
  line-height: 0.9;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
}

/* The small-caps line under each heading, matched to .schedule__note. */
.synopsis__lede,
.reel__lede,
.billing__lede {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 34px;
}

/* ---------------------------------------------------------------- synopsis */

.synopsis {
  background: var(--paper);
  border-top: 5px solid var(--ink);
  padding: clamp(46px, 7vw, 100px) var(--gutter);
  scroll-margin-top: var(--header-h);
}

.synopsis { text-align: center; }
.synopsis__title { color: var(--blue); }
.synopsis__lede { margin-bottom: 34px; }

/* Full width, centred. 1100px is wide enough that the section reads as a
   full-bleed statement rather than a column, and the paragraphs below take
   their own measure inside it so the prose never runs to 140 characters. */
.synopsis__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* 62ch holds each paragraph inside the 45 to 75 characters prose reads best
   at, whatever the container does. Centred text needs the tighter measure:
   a ragged left edge is harder to track back to than a straight one. */
.synopsis__p {
  max-width: 62ch;
  margin: 0 auto 20px;
  font-size: clamp(16.5px, 1.5vw, 18.5px);
  line-height: 1.7;
}

/* The one line in this section that is not a joke, set apart from the copy
   that is. Blue-deep on gold clears 6.65:1 — see the note in 01-tokens. */
.synopsis__pull {
  display: inline-block;
  margin: 34px auto 0;
  padding: 18px 22px;
  background: var(--gold);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
  font-size: clamp(15px, 1.8vw, 20px);
  color: var(--blue-deep);
}

/* Emphasis inside an all-caps line that is already at weight 900 cannot come
   from weight alone: 900 to 1000 is barely a shift, and there is nothing
   above it. So the base drops to 800 and the emphasised phrase takes both the
   heavier weight and a colour change, which is what actually reads at a
   glance in display type. Ink on gold clears 13:1. */
.synopsis__pull { font-weight: 800; }

/* Its own line, as a block rather than a <br />: the first half still wraps
   to two or three lines on a phone, and a hard break there would land in the
   wrong place at most widths. */
.synopsis__pull strong {
  display: block;
  margin-top: 2px;
  font-weight: 1000;
  color: var(--ink);
}

/* -------------------------------------------------------------- video wall */

/* Ink, because video reads best on it and because it is the one hard break in
   a page that otherwise runs blue and paper. */
.reel {
  background: var(--ink);
  padding: clamp(46px, 7vw, 100px) var(--gutter);
  scroll-margin-top: var(--header-h);
}

.reel__title { color: var(--gold); }
.reel__lede { color: var(--paper); opacity: 0.78; }

/* Explicit column counts rather than auto-fit.
 
   Four vertical clips is the shape of this section, and auto-fit would put
   three across at some widths and orphan the fourth on a row of its own
   against a lot of black. Four, then two, then one always divides cleanly. */
.reel__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  max-width: 1120px;
  counter-reset: reel;
}

/* The column count follows the clip count so a row never has a hole in it.
   Two and three also take a narrower cap, or the cards grow to fill 1120px
   and a 9:16 box becomes taller than the screen. */
.reel__grid--n1 { grid-template-columns: minmax(0, 1fr); max-width: 380px; }
.reel__grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.reel__grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 940px; }

@media (max-width: 900px) {
  .reel__grid,
  .reel__grid--n3,
  .reel__grid--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
}

@media (max-width: 520px) {
  .reel__grid,
  .reel__grid--n2,
  .reel__grid--n3,
  .reel__grid--n4 { grid-template-columns: minmax(0, 1fr); max-width: 380px; }
}

.reel-card {
  margin: 0;
  min-width: 0;
  counter-increment: reel;
}

/* 9:16, the shape the clips are shot in, so the frame never letterboxes. */
.reel-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #0d0d0d;
  border: 4px solid var(--paper);
  overflow: hidden;
}

.reel-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0d0d0d;
}

/* Our own play control rather than the browser's, so a paused card is a
   designed card. It hands over to native controls on first play — see
   bindReels in site.js. */
.reel-card__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  overflow: hidden;
}

.reel-card.is-playing .reel-card__play { display: none; }

/* The card index, set large and low-contrast so it reads as a mark on the
   card rather than a label competing with the play cue. A counter rather than
   markup, so the build stays out of it. */
.reel-card__play::after {
  content: counter(reel, decimal-leading-zero);
  position: absolute;
  top: -14px;
  right: 8px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 120px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

/* Keeps the play cue and the handle legible over whatever frame is showing. */
.reel-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.62) 100%);
}

/* Play triangle, drawn rather than shipped as an asset. The hard black offset
   is the same device the display headings use. */
.reel-card__cue {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-38%, -50%);
  border-left: 34px solid var(--gold);
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  filter: drop-shadow(4px 4px 0 var(--ink));
  transition: transform 0.18s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.reel-card__play:hover .reel-card__cue,
.reel-card__play:focus-visible .reel-card__cue {
  transform: translate(-38%, -50%) scale(1.16);
}

.reel-card__handle {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 13px;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--paper);
  text-align: left;
  overflow-wrap: anywhere;
}

.reel-card__caption {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper);
  opacity: 0.86;
}

/* The one way out of a card, under it rather than over the video, so it is
   never in the way of the play control. */
.reel-card__link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11.5px;
  color: var(--peach);
  border-bottom: 2px solid transparent;
}
.reel-card__link:hover { color: var(--gold); border-bottom-color: var(--gold); }

.btn--reel { margin-top: clamp(26px, 3vw, 38px); }

/* ------------------------------------------------------- cast and creative */

/* Named .billing, not .company: /bios already puts class="company" on each of
   its three company blurb cards, and a bare .company rule here landed a gold
   ground, a 5px keyline and centred text on all of them. The class is scoped
   to this page's own block now, and matches config.billing, which is where
   the names come from. */

/* Soft yellow ground with blue type, which puts this section back in step with
   the rest of the home view: every other band here is dark type on a light
   ground, and only the program on /bios is gold on blue.

   17-program.css grounds .cast-list and .cast-row for blue, so every colour in
   them is restated below. Contrast on gold follows the note in 01-tokens:
   --blue measures 4.05:1, which clears the 3:1 floor for large display type
   but not the 4.5:1 floor for body text, so anything small takes --blue-deep
   or --ink instead. */
.billing {
  background: var(--gold);
  border-top: 5px solid var(--ink);
  padding: clamp(46px, 7vw, 100px) var(--gutter);
  scroll-margin-top: var(--header-h);
  /* Centred, like the program's title page, rather than left-aligned like the
     rest of the home view. Cast is a list of names and Creative is a list of
     credits; both are read down a single column, and centring is what keeps a
     short list from drifting against a wide screen. */
  text-align: center;
}

/* Large display type, so --blue clears its floor. No hard offset here: the
   shadow was doing separation work that a light ground does on its own. */
.billing__title { color: var(--blue); }
.billing__lede { color: var(--blue-deep); }

.billing__title,
.billing__lede { margin-left: auto; margin-right: auto; }

/* 720px is the program's measure for the same list, and it holds a long name
   plus a date tag on one line without stretching the rules across the page. */
.billing .cast-list {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  border-top-color: rgba(0, 0, 0, 0.2);
}

.billing .cast-row { border-bottom-color: rgba(0, 0, 0, 0.2); }

/* Names are 19px and up at weight 900, which is large text, so --blue holds. */
.billing .cast-row__name {
  color: var(--blue);
  text-shadow: none;
}
.billing .cast-row__toggle:hover .cast-row__name { color: var(--ink); }

.billing .cast-row__role { color: var(--blue-deep); }

/* Running prose, so it takes ink rather than either blue. */
.billing .cast-row__bio p { color: var(--ink); }

.billing .cast-row__ig { color: var(--blue-deep); }
.billing .cast-row__ig:hover { color: var(--blue); }

.billing .cast-row__chev {
  border-right-color: var(--blue-deep);
  border-bottom-color: var(--blue-deep);
}

/* Paper rather than peach: peach and gold are too close in value to separate
   a small tag, and the black keyline alone was carrying it. */
.billing .cast-row__note {
  background: var(--paper);
  color: var(--blue-deep);
}

/* The break between the performers who are there every night and the pair who
   alternate. A label rather than a heading: it divides, it does not
   introduce. */
.cast-group {
  margin: 0;
  padding: 26px 0 12px;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11.5px;
  color: var(--blue-deep);
  text-align: left;
}

/* ---------------------------------------------------------------- creative */

.billing__creative {
  max-width: 560px;
  margin: clamp(44px, 6vw, 72px) auto 0;
  text-align: left;
}

.billing__subhead {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  color: var(--blue-deep);
  text-align: center;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--blue-deep);
}

/* The credit rows come from 17-program.css already grounded for a light
   surface, so only the rule colour needs strengthening against gold. */
.billing .credit-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}
.billing .credit-row:last-child { border-bottom: 0; }

.billing .credit-row__name { color: var(--blue-deep); }

/* The standalone credit under the list. A sentence, not a role/name pairing,
   so it is set in the body face and centred under the block it belongs to. */
.billing__note {
  margin: 20px 0 0;
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.75;
  text-align: center;
}

/* ------------------------------------------------------------- narrow work */

@media (max-width: 520px) {
  /* One column, so a full-width 9:16 box would run taller than the screen. */
  .reel-card__media { max-width: 380px; }
  .reel-card__caption { max-width: 380px; }
  .reel-card__play::after { font-size: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-card__cue { transition: none; }
  .reel-card__play:hover .reel-card__cue,
  .reel-card__play:focus-visible .reel-card__cue { transform: translate(-38%, -50%); }
}