/*
Theme Name: WPPAC
Theme URI: https://wppac.com
Author: RealBrand Consulting
Description: Custom theme for White Plains Performing Arts Center. Design system ported verbatim from the approved static build, so the WordPress site and the review site render identically.
Version: 4.9.1
Requires at least: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: wppac
*/
/* =====================================================================
   WPPAC, shared design system
   Dark, cinematic default · Warm Platinum headlines · Pearl section heads
   Green = spare accent only (never on read words) · Fraunces (de-wonked) + Inter
   Body set +1.5pt for legibility (Jeremy). Light "champagne" theme via .theme-light.
   ===================================================================== */

:root{
  /* dark stage */
  --nav-h:78px;            /* measured and overwritten by wppac.js on load/resize */
  --noir:#070a13;
  --noir-2:#0b1020;
  --panel:#0a0e1a;
  --bone:#f3f1ea;              /* warm white text */
  --bone-dim:rgba(243,241,234,.82);   /* brightened, client direction */
  --bone-faint:rgba(243,241,234,.70);
  --cream:#f4efe2;            /* pearl / ivory heading */

  /* accent, champagne-gold (formerly green). Kickers, badges, rules, idx, fills. */
  --green:#c9a86a;         /* rich gold: rules, borders, selection */
  --green-2:#e6cf9c;       /* light champagne-gold: text, links, fills (dark --ok text) */
  --green-soft:rgba(201,168,106,.15);
  --accent-hi:#f2e2bb;     /* hover highlight for gold fills (dark-text buttons) */
  --gold-btn:linear-gradient(178deg,#d3ad55 0%,#a67c2b 100%);    /* primary CTA: WHITE text on rich gold */
  --gold-btn-hi:linear-gradient(178deg,#e0bb63 0%,#b88c36 100%);

  /* warm metals, the headline family */
  --bronze:#d3b784;          /* warm italic accent on dark */
  --platinum-grad:linear-gradient(176deg,#f8efd6 0%,#e7d3a3 42%,#cbb37e 60%,#f3e6c6 100%);
  --silver-grad:linear-gradient(176deg,#f7fafe 0%,#dfe6ef 34%,#aab4c3 54%,#e8eef6 78%,#c3ccd8 100%);

  --line:rgba(243,241,234,.13);
  --line-2:rgba(243,241,234,.07);

  --maxw:1320px;
  --ok:#0a1207;              /* ink used on green/platinum fills */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto;
  /* jumping to #anchor must clear the fixed header, otherwise the heading
     the visitor was sent to lands underneath the nav */
  scroll-padding-top:calc(var(--nav-h) + 18px);
  /* No page here is ever meant to scroll sideways. After a tablet rotates, Safari
     counts the closed menu drawer (parked off-screen to the right) as page width.
     clip, not hidden: it stops the sideways scroll without creating a scroll
     container, so sticky elements and smooth scrolling keep working. */
  overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--noir);
  color:var(--bone);
  font-family:"Inter",system-ui,sans-serif;
  font-size:18.5px;           /* +1.5pt for older / phone readers (Jeremy) */
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-variation-settings:"WONK" 0,"SOFT" 0;  /* de-wonked Fraunces everywhere: crisp Y / V (Stephen). Inter ignores these axes. */
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.08;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
/* Images now ship intrinsic width/height attributes so the browser can reserve
   space. height:auto is required alongside them: without it, any rule that sets
   only a width (.figure img, .cat-banner img, ...) keeps the attribute height and
   the box stretches. Rules that deliberately set both still win on specificity. */
img{display:block;max-width:100%;height:auto}
::selection{background:var(--green);color:#fff}

/* headline metals, apply to h1/h2 or spans */
.platinum,.platinum span{background:var(--platinum-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}      /* span rule: gradient survives the line-split spans */
.platinum{padding:.06em 0 .16em;overflow:visible}
/* the gradient is painted inside each word and line span, whose box ends just above
   the bottom of g, y, p and J; room below, cancelled by the margin, so nothing moves */
.platinum span,.silver span{padding-bottom:.28em;margin-bottom:-.28em}              /* room so g/y/p never clip */
.silver,.silver span{background:var(--silver-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.silver{padding:.06em 0 .16em;overflow:visible;filter:drop-shadow(0 1px 0 rgba(255,255,255,.06))}
.pearl{color:var(--cream)}
/* headline italics: warm bronze, de-wonked, one weight heavier, NOT green */
h1 em,h2 em,h3 em,.statement em{font-style:normal;font-weight:600;color:var(--bronze)}  /* no italics, client direction */
.platinum em{color:transparent}               /* inside a platinum line, italic keeps the gradient */

.skip-link{position:fixed;top:-100px;left:16px;z-index:9900;background:var(--green-2);color:var(--ok);
  padding:12px 22px;border-radius:8px;font-size:13px;font-weight:600;letter-spacing:.04em;transition:top .25s}
.skip-link:focus{top:16px}

/* visible keyboard focus (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
.btn:focus-visible,.nav-cta:focus-visible,.g-cell:focus-visible,.hs-item:focus-visible,.scard:focus-within{
  outline:2px solid var(--green-2);outline-offset:3px;border-radius:6px}
.form-field input:focus-visible,.form-field textarea:focus-visible,.form-field select:focus-visible{
  outline:2px solid var(--green-2);outline-offset:1px}

/* ---------- overlays ---------- */
.grain{position:fixed;inset:0;z-index:8000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.vignette{position:fixed;inset:0;z-index:7900;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 38%,transparent 46%,rgba(3,5,11,.5) 100%);}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--green),var(--green-2));z-index:9500;}

/* ---------- logo (real PNG lockup, ~3.45:1) ---------- */
.logo{display:block;height:46px;width:auto}
.logo--sm{height:36px}
.logo--lg{height:66px}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:9800;background:var(--noir);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:24px}
.loader .logo{opacity:0;height:84px}
.loader-rule{height:1px;width:0;background:linear-gradient(90deg,transparent,var(--green-2),transparent)}

/* =========================================================
   HEADER / NAV
   ========================================================= */
header.site{position:fixed;top:0;left:0;width:100%;z-index:7000;transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent}
header.site.scrolled{background:rgba(7,10,19,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
header.site.solid{background:rgba(7,10,19,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--maxw);margin:0 auto;padding:16px clamp(20px,4vw,40px)}
.brand{display:block;line-height:0;flex:0 0 auto}
/* The nav keeps the width its links need. It used to be allowed to shrink while
   its links could not, so the links spilled out of it and under the phone icon. */
.nav-main{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.nav-item{position:relative;flex:0 0 auto}
.nav-main > .nav-item > a{display:inline-block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);
  opacity:1;padding:10px 13px;border-radius:8px;transition:opacity .25s,color .25s,background .25s;
  /* never more than two lines, and centre them (client direction) */
  text-align:center;line-height:1.3;max-width:150px;
  /* hug the wrapped lines: a capped box otherwise stays at its cap while the text
     inside is only as wide as its longest line (What's On / Stage) */
  width:min-content}
.nav-main > .nav-item > a:hover,.nav-main > .nav-item > a[aria-current="page"],.nav-item:hover > a{opacity:1;color:var(--green-2);background:rgba(255,255,255,.04)}
/* subcategory dropdown (rolls out on hover / keyboard focus) */
.nav-drop{position:absolute;top:100%;left:0;min-width:210px;background:rgba(9,13,24,.97);backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:60;box-shadow:0 24px 60px -24px rgba(0,0,0,.85)}
.nav-drop::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}  /* keeps hover alive across the gap */
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:none}
.nav-drop a{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim);
  padding:9px 12px;border-radius:7px;white-space:nowrap;transition:color .2s,background .2s}
.nav-drop a:hover{color:var(--green-2);background:rgba(255,255,255,.05)}
.nav-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.nav-cta{border-radius:40px;padding:11px 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  transition:transform .25s,background .25s,color .25s,border-color .25s}
.nav-cta.solid{color:#fff;background:var(--gold-btn);text-shadow:0 1px 2px rgba(0,0,0,.38)}
.nav-cta.solid:hover{background:var(--gold-btn-hi);transform:translateY(-1px)}
.nav-cta.ghost{color:var(--bone);border:1px solid rgba(243,241,234,.34)}
.nav-cta.ghost:hover{border-color:var(--green-2);color:var(--green-2)}
/* header utility cluster: phone (click-to-call), newsletter, social */
.nav-util{display:flex;align-items:center;gap:2px;margin-right:2px}
.nu-ic{display:inline-flex;align-items:center;gap:8px;color:var(--bone);opacity:1;padding:9px 8px;border-radius:30px;
  transition:opacity .25s,color .25s,background .25s}
.nu-ic:hover{opacity:1;color:var(--green-2);background:rgba(255,255,255,.05)}
.nu-ic svg{display:block;width:19px;height:19px}
.nu-phone span{font-size:14.5px;font-weight:600;letter-spacing:.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Breakpoints measured, not guessed: the header row was checked every 10px in three
   browser engines. The number shows only where it fits with room to spare, and below
   1200px the full nav no longer fits, so the header switches to the menu button. */
@media (max-width:1319px){.nu-phone span{display:none}}
@media (max-width:1199px){.nav-util{display:none}}   /* phone + social live in the drawer on mobile/tablet */
/* drawer utility row (phone + social on mobile) */
.drawer-util{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 22px}
.drawer-util a{font-family:"Inter",sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-dim);border-bottom:none;padding:4px 0}
.drawer-util a:hover{color:var(--green-2)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;
  border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;margin:0 auto;background:var(--bone);transition:transform .3s,opacity .3s}

/* mobile drawer */
/* Menu starts BELOW the fixed header instead of centring into it, which is why
   items collided with the header bar on mobile. (client feedback, round 3) */
.drawer{position:fixed;inset:0;z-index:6900;background:rgba(6,9,17,.97);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:flex-start;gap:2px;
  padding:calc(env(safe-area-inset-top,0px) + 104px) clamp(24px,7vw,60px) 48px;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.16,.7,.2,1);visibility:hidden;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.drawer.open{transform:none;visibility:visible}
.drawer a{font-family:"Fraunces",serif;font-size:clamp(24px,6vw,36px);color:var(--bone);padding:9px 0;
  border-bottom:1px solid var(--line-2)}
.drawer a:last-of-type{border-bottom:none}
.drawer a em{color:var(--bronze)}
.drawer .drawer-cta{margin-top:22px;font-family:"Inter",sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;display:inline-flex;align-self:flex-start;padding:14px 26px;border-radius:40px;background:var(--green-2);color:var(--ok)}
@media (max-width:1199px){.nav-main,.nav-actions .nav-cta.ghost{display:none}.nav-toggle{display:flex}}
/* keep a compact Buy Tickets in the header on phones, primary purchase path stays one tap, not buried in the drawer */
@media (max-width:620px){.nav-bar{padding-top:14px;padding-bottom:14px;gap:12px}.nav-actions{gap:8px}.nav-actions .nav-cta.solid{padding:10px 14px;font-size:11px;letter-spacing:.06em}.logo{height:34px}}

/* ---------- reveals ---------- */
.reveal{opacity:1}
html.anim .reveal{opacity:0;transform:translateY(40px)}
html.anim .reveal.in{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.16,.7,.2,1),transform 1s cubic-bezier(.16,.7,.2,1)}
/* varied reveal directions, so each section feels like something different happens */
html.anim .reveal.rv-l{transform:translateX(-46px)}
html.anim .reveal.rv-r{transform:translateX(46px)}
html.anim .reveal.rv-scale{transform:scale(.93)}
html.anim .reveal.rv-l.in,html.anim .reveal.rv-r.in,html.anim .reveal.rv-scale.in{transform:none}
/* section-scoped variety (no markup needed): manifesto glides from the left, quotes from the right, academy copy scales up */
html.anim .manifesto .reveal{transform:translateX(-42px)}
html.anim .quotes .reveal{transform:translateX(42px)}
html.anim .immerse-inner .reveal{transform:translateY(30px) scale(.97)}
html.anim .manifesto .reveal.in,html.anim .quotes .reveal.in,html.anim .immerse-inner .reveal.in{transform:none}
/* gallery cells cascade in, alternating sides */
html.anim .g-grid .g-cell{opacity:0;transform:translateY(44px);transition:opacity .9s cubic-bezier(.16,.7,.2,1),transform .9s cubic-bezier(.16,.7,.2,1)}
html.anim .g-grid .g-cell:nth-child(odd){transform:translateX(-38px)}
html.anim .g-grid .g-cell:nth-child(even){transform:translateX(38px)}

/* Sideways reveals and narrow screens do not mix. On one column the element
   already fills the width, so starting it 38-46px to the side makes the whole
   page scrollable horizontally until the animation lands, which reads as a
   layout bug on a phone. Below 900px every sideways reveal becomes a vertical
   one: same effect, nothing sticks out. Kept in one place so a new rv- variant
   above is covered automatically. */
@media (max-width:900px){
  html.anim .reveal.rv-l,
  html.anim .reveal.rv-r,
  html.anim .manifesto .reveal,
  html.anim .quotes .reveal,
  html.anim .g-grid .g-cell:nth-child(odd),
  html.anim .g-grid .g-cell:nth-child(even){transform:translateY(26px)}
}
html.anim .g-grid .g-cell.in{opacity:1;transform:none}
.lines .ln-wrap{overflow:hidden;display:block;padding-bottom:.85em;margin-bottom:-.85em}  /* room so g/y/p descenders never clip: Fraunces' descender is deep and .42em     was still clipping the g in "Stage" at large sizes */
.lines,.lines[data-split]{line-height:1.16;text-wrap:pretty}
.lines .ln-inner{display:block}
html.anim .lines .ln-inner{transform:translateY(110%)}
html.anim .lines.in .ln-inner{transform:translateY(0);transition:transform 1.05s cubic-bezier(.16,.8,.2,1)}
.lines .ln-wrap:nth-child(2) .ln-inner{transition-delay:.08s}
.lines .ln-wrap:nth-child(3) .ln-inner{transition-delay:.16s}
.lines .ln-wrap:nth-child(4) .ln-inner{transition-delay:.24s}

/* ---------- layout helpers ---------- */
.section{position:relative;padding:clamp(42px,6vh,76px) clamp(20px,5vw,80px)}  /* halved, client direction */
.section.tight{padding-top:clamp(26px,3.5vh,44px);padding-bottom:clamp(26px,3.5vh,44px)}
.wrap{max-width:var(--maxw);margin:0 auto}
.wrap-narrow{max-width:860px;margin:0 auto}
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:34px}
.sec-head .idx{font-family:"Fraunces",serif;font-size:15px;color:var(--green-2);letter-spacing:.1em}
.sec-head .lbl{font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-dim)}
.sec-head:before{content:"";flex:0 0 28px;height:1px;background:var(--green);opacity:.7}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:12.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--green-2)}
.eyebrow .ln{width:42px;height:1px;background:var(--green-2)}

.btn{display:inline-flex;align-items:center;gap:10px;border-radius:46px;padding:15px 28px;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;
  transition:transform .3s,background .3s,color .3s,border-color .3s}
.btn-green{background:var(--gold-btn);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.16)}
.btn-green:hover{background:var(--gold-btn-hi);transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(243,241,234,.34);color:var(--bone);font-weight:500}
.btn-ghost:hover{border-color:var(--green-2);color:var(--green-2)}

/* =========================================================
   PAGE HERO (interior pages)
   ========================================================= */
/* Hero height follows the picture's own aspect ratio (--phero-ar, emitted per
   page from the file on disk) so the whole frame is visible instead of being
   centre-cropped. Capped at 78svh so a tall photo cannot eat a whole screen. */
.phero{position:relative;display:flex;align-items:flex-end;overflow:hidden;background:var(--noir);
  height:min(calc(100vw / var(--phero-ar, 2.2)), 78svh);min-height:46svh}
.phero.tall{height:min(calc(100vw / var(--phero-ar, 2.05)), 82svh);min-height:52svh}
.phero-media{position:absolute;inset:0;z-index:0}
.phero-media picture{display:block;width:100%;height:100%}
.phero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:1}
/* Show key art puts the artwork on the right and leaves the left clear for the
   title. Wide screens show the whole file; once the band is forced taller than
   the picture, crop from the left so the artwork survives rather than the middle. */
@media (max-width:1100px){.phero--art .phero-media img{object-position:100% 42%}}  /* favor faces (upper-center), not the bottom */
.phero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,10,19,.62) 0%,rgba(7,10,19,.25) 34%,rgba(7,10,19,.72) 78%,var(--noir) 100%)}
.phero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;
  padding:150px clamp(20px,5vw,80px) clamp(46px,7vh,84px)}
.phero-inner .crumbs{margin-bottom:20px}

/* On a phone the hero is short (46svh) while its content is tall, and because
   the inner block is bottom-aligned inside an overflow:hidden box the eyebrow
   and the top of the show title were being pushed up under the fixed nav.
   Let the hero grow to fit instead, and start the text clear of the header. */
@media (max-width:820px){
  .phero,.phero.tall{height:auto;min-height:min(calc(100vw / var(--phero-ar, 2.2)), 62svh)}
  .phero-inner{padding-top:calc(var(--nav-h) + 28px)}
}
.phero h1{font-size:clamp(38px,6vw,82px);max-width:16ch;font-weight:500}
.phero .phero-sub{margin-top:22px;max-width:52ch;color:var(--bone-dim);font-size:clamp(15px,1.4vw,19px)}
/* plain (no photo) page hero */
.phead{position:relative;padding:clamp(140px,18vh,210px) clamp(20px,5vw,80px) clamp(40px,6vh,70px);
  background:radial-gradient(70% 90% at 12% 0%,var(--green-soft),transparent 55%),var(--noir)}
.phead .wrap{max-width:var(--maxw)}
.phead h1{font-size:clamp(38px,6vw,80px);max-width:18ch}
.phead .phero-sub{margin-top:20px;max-width:56ch;color:var(--bone-dim);font-size:clamp(15px,1.4vw,19px)}

.crumbs{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint)}
.crumbs a{color:var(--green-2)}
.crumbs a:hover{color:var(--bone)}
.crumbs span{margin:0 8px;opacity:.5}

/* section sub-nav (cluster pages) */
.subnav{position:sticky;top:0;z-index:60;background:rgba(7,10,19,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2)}
.subnav-row{max-width:var(--maxw);margin:0 auto;display:flex;gap:6px;overflow-x:auto;
  padding:12px clamp(20px,5vw,80px);scrollbar-width:none}
.subnav-row::-webkit-scrollbar{display:none}
.subnav-row a{flex:0 0 auto;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);
  padding:9px 15px;border-radius:30px;border:1px solid transparent;transition:color .25s,border-color .25s,background .25s}
.subnav-row a:hover{color:var(--bone)}
.subnav-row a[aria-current="page"]{color:var(--green-2);border-color:var(--line);background:rgba(255,255,255,.03)}

/* =========================================================
   PROSE (content pages)
   ========================================================= */
.prose{max-width:70ch}
.prose>*+*{margin-top:1.15em}
.prose p{color:var(--bone-dim);font-size:clamp(16px,1.15vw,18.5px);line-height:1.72}
.prose h2{font-size:clamp(26px,3.4vw,42px);margin-top:1.6em;color:var(--cream)}
.prose h3{font-size:clamp(20px,2vw,26px);margin-top:1.5em;color:var(--bone)}
.prose strong{color:var(--bone);font-weight:600}
.prose a{color:var(--green-2);border-bottom:1px solid var(--line);transition:border-color .25s}
/* buttons inside prose must keep their own colours (the generic .prose a rule would tint them gold-on-gold) */
.prose a.btn{border-bottom:none}
.prose a.btn-green{color:#fff}
.prose a.btn-ghost{color:var(--bone)}
.prose a:hover{border-color:var(--green-2)}
.prose ul,.prose ol{padding-left:1.2em;color:var(--bone-dim)}
.prose li{margin-top:.5em;font-size:clamp(16px,1.15vw,18.5px)}
.prose li::marker{color:var(--green-2)}
.prose blockquote{border-left:2px solid var(--green);padding-left:22px;font-family:"Fraunces",serif;
  font-style:normal;font-size:clamp(20px,2.4vw,28px);color:var(--bone);line-height:1.4}
.lead{font-size:clamp(19px,1.8vw,24px)!important;color:var(--bone)!important;line-height:1.5!important;
  font-family:"Fraunces",serif;font-weight:400}

/* two-column content + aside */
.split{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(36px,6vw,80px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:44px}}
.aside-card{border:1px solid var(--line);border-radius:12px;padding:26px;background:rgba(255,255,255,.015)}
.aside-card h3{font-size:20px;margin-bottom:14px}
.aside-card .row{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line-2);font-size:14.5px;color:var(--bone-dim)}
.aside-card .row:first-of-type{border-top:none}
.aside-card .row .k{color:var(--green-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  flex:0 0 92px;padding-top:2px}

/* generic media figure */
.figure{border-radius:12px;overflow:hidden;border:1px solid var(--line-2)}
.figure img{width:100%;object-fit:contain;background:var(--panel)}  /* show artwork: never crop */
.figure figcaption{font-size:13px;color:var(--bone-faint);padding:12px 2px;letter-spacing:.02em}

/* feature rows (alternating image / text) */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;margin-top:clamp(48px,7vh,90px)}
.frow:first-of-type{margin-top:0}
.frow .frow-media{border-radius:14px;overflow:hidden;border:1px solid var(--line-2);aspect-ratio:4/3}
.frow .frow-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,.7,.2,1)}
.frow:hover .frow-media img{transform:scale(1.04)}
.frow h2{font-size:clamp(26px,3.4vw,46px);margin-bottom:16px}
.frow.rev .frow-media{order:2}
@media (max-width:820px){.frow,.frow.rev .frow-media{grid-template-columns:1fr;order:0}.frow .frow-media{order:-1}}

/* stat band */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.statband .stat .num{font-family:"Fraunces",serif;font-size:clamp(34px,5vw,66px);color:var(--bone);line-height:1}
.statband .stat .num span{color:var(--green-2)}
.statband .stat .lab{margin-top:12px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
@media (max-width:820px){.statband{grid-template-columns:repeat(2,1fr);gap:34px}}

/* cards grid (subpage tiles) */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:940px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--panel);transition:transform .4s cubic-bezier(.16,.7,.2,1),border-color .4s}
.tile:hover{transform:translateY(-6px);border-color:rgba(168,201,107,.5)}
.tile-img{aspect-ratio:16/10;overflow:hidden}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,.7,.2,1)}
.tile:hover .tile-img img{transform:scale(1.05)}
.tile-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.tile-body h3{font-size:21px;line-height:1.15}
.tile-body p{margin-top:10px;color:var(--bone-dim);font-size:15px;flex:1}
.tile-body .more{margin-top:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-2)}

/* people grid */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:940px){.people{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.people{grid-template-columns:1fr 1fr}}
.person{border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--panel)}
.person .pph{aspect-ratio:1/1;overflow:hidden;background:var(--noir-2)}
.person .pph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.person .pmeta{padding:16px 16px 18px}
.person .pmeta b{display:block;font-family:"Fraunces",serif;font-weight:500;font-size:18px}
.person .pmeta span{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-2);margin-top:5px}

/* definition / info rows */
.inforows{border-top:1px solid var(--line)}
.inforows .ir{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line-2)}
.inforows .ir .ir-k{font-family:"Fraunces",serif;font-size:19px;color:var(--cream)}
.inforows .ir .ir-v{color:var(--bone-dim);font-size:16px}
.inforows .ir .ir-v a{color:var(--green-2)}
@media (max-width:640px){.inforows .ir{grid-template-columns:1fr;gap:6px}}

/* FAQ / accordion */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:20px;
  font-family:"Fraunces",serif;font-size:clamp(18px,2vw,23px);color:var(--bone)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:0 0 auto;color:var(--green-2);transition:transform .3s}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .faq-body{padding:0 0 24px;color:var(--bone-dim);max-width:72ch}

/* =========================================================
   HERO (homepage), shared with index
   ========================================================= */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--noir);display:flex;flex-direction:column;
  --mx:50%;--my:42%;--r:clamp(480px,56vw,920px)}   /* followspot position + radius (JS drives --mx/--my) */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--noir)}
.hero-media img{position:absolute;inset:0;width:100%;height:106%;object-fit:cover;object-position:50% 42%;opacity:0;will-change:opacity}
.hero-media picture:first-child img{opacity:1}

/* ---- theatre followspot: dark + desaturated everywhere EXCEPT a circle at the cursor ----
   .hero-spot is masked so the filter/darkening applies only OUTSIDE the circle.
   The rgba background is the fallback if backdrop-filter is unsupported. */
/* Both layers sit ABOVE .hero-scrim so the lit circle isn't re-darkened by it.
   .hero-spot is masked to the OUTSIDE: dims + drains colour.
   .hero-beam is masked to the INSIDE: brightens + saturates, and adds warm light. */
.hero-spot{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:rgba(4,6,12,.14);
  -webkit-backdrop-filter:grayscale(.45) brightness(.82);
          backdrop-filter:grayscale(.45) brightness(.82);
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),transparent 0%,transparent 40%,#000 82%);
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),transparent 0%,transparent 40%,#000 82%);
  transition:opacity .6s ease}
.hero-beam{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(circle var(--r) at var(--mx) var(--my),
    rgba(255,238,198,.13) 0%,rgba(240,220,175,.06) 45%,transparent 75%);
  -webkit-backdrop-filter:saturate(1.5) brightness(1.3);
          backdrop-filter:saturate(1.5) brightness(1.3);
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0%,#000 36%,transparent 78%);
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 0%,#000 36%,transparent 78%);
  transition:opacity .6s ease}
.hero.spot-off .hero-spot,.hero.spot-off .hero-beam{opacity:0}
/* The followspot is a cursor effect. On touch / mobile there is nothing to follow,
   so switch it off in CSS (not just JS), the hero photo then renders normally,
   full colour, with no dark flash before the deferred script runs. */
@media (hover:none),(pointer:coarse),(max-width:768px){
  .hero-spot,.hero-beam{display:none !important}
}

.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 55% at 50% -8%,var(--green-soft),transparent 60%)}
/* vertical fade sits BELOW the followspot so the lit circle stays bright */
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,19,.42) 0%,transparent 24%,transparent 52%,rgba(7,10,19,.72) 90%,var(--noir) 100%)}
/* left-side text scrim sits ABOVE it, headline stays readable, and the light
   falls on the stage rather than washing out the title */
.hero-scrim-text{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,10,19,.80) 0%,rgba(7,10,19,.46) 34%,rgba(7,10,19,.08) 60%,rgba(7,10,19,.22) 100%)}
#heroDust{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.hero-inner{position:relative;z-index:4;flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--maxw);margin:0 auto;width:100%;padding:120px clamp(20px,5vw,80px) 26px}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.hero-eyebrow .ln{width:42px;height:1px;background:var(--green-2)}
.hero-eyebrow .eyebrow{font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--green-2)}
.hero h1{font-size:clamp(40px,6vw,86px);max-width:15ch;font-weight:500}
/* The chosen headline is longer than the summer one; a step smaller keeps it to two lines and the season in view */
.hero h1.hero-h1--tight{font-size:clamp(34px,4.9vw,68px);max-width:18ch}
.hero-sub{margin-top:24px;max-width:48ch;color:var(--bone-dim);font-size:clamp(16px,1.4vw,19px)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-next{margin-top:34px;display:inline-flex;align-items:center;gap:16px;padding:12px 12px 12px 20px;
  border:1px solid var(--line);border-radius:60px;background:rgba(255,255,255,.03);max-width:100%}
.hero-next .nx-k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--green-2);white-space:nowrap}
.hero-next .nx-t{font-family:"Fraunces",serif;font-size:17px;color:var(--bone)}
.hero-next .nx-d{font-size:12.5px;color:var(--bone-dim);white-space:nowrap}
.hero-next a{margin-left:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  background:var(--gold-btn);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.38);padding:9px 18px;border-radius:40px;white-space:nowrap}
.hero-next a:hover{background:var(--gold-btn-hi)}
@media (max-width:560px){.hero-next{flex-wrap:wrap;border-radius:18px}}
.hero-strip{position:relative;z-index:4;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 clamp(20px,5vw,80px) clamp(26px,4vh,40px)}
.hero-strip .hs-lbl{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:14px}
.hs-row{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;scroll-behavior:smooth}
.hs-row::-webkit-scrollbar{display:none}
/* scroll affordance: right-edge fade + a pulsing arrow button (injected by JS, homepage only) */
.hero-strip.has-more .hs-row{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
.hs-arrow{position:absolute;top:58%;right:clamp(10px,3vw,44px);width:46px;height:46px;border-radius:50%;
  background:var(--gold-btn);color:#fff;border:1px solid rgba(255,255,255,.18);cursor:pointer;
  display:none;align-items:center;justify-content:center;font-size:20px;line-height:1;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.75);z-index:6;animation:hsbob 1.5s ease-in-out infinite}
.hero-strip.has-more .hs-arrow{display:flex}
.hs-arrow:hover{background:var(--gold-btn-hi);animation:none}
@keyframes hsbob{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.hs-arrow{animation:none}}
.hs-item{flex:0 0 auto;width:118px;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel);transition:transform .35s,border-color .35s}
.hs-item:hover{transform:translateY(-4px);border-color:rgba(168,201,107,.5)}
.hs-item picture{display:block;width:100%}
.hs-item img{width:100%;aspect-ratio:1/1;object-fit:contain;background:var(--panel)}
.hs-item .hs-meta{padding:8px 10px}
.hs-item .hs-meta b{display:block;font-family:"Fraunces",serif;font-weight:500;font-size:13px;line-height:1.2}  /* full title, wraps (no ellipsis) */
.hs-item .hs-meta small{display:block;font-size:10.5px;color:var(--bone-dim);margin-top:3px}

/* THIS SEASON grid */
.season{background:radial-gradient(60% 70% at 8% 0%,var(--green-soft),transparent 55%),var(--noir-2)}
.season h2{font-size:clamp(30px,4.6vw,62px);max-width:18ch;margin-top:8px}
/* caps-test: all-caps sans header treatment, one headline, for client evaluation (round-1 item 2) */
.caps-test{font-family:"Inter",sans-serif!important;text-transform:uppercase;letter-spacing:.015em;font-weight:800;line-height:1.06;font-size:clamp(26px,3.9vw,52px)!important;max-width:20ch}
.caps-test em{font-style:normal;font-family:inherit;color:var(--green-2)}
.season .s-sub{margin-top:18px;color:var(--bone-dim);max-width:54ch}
.season-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px}
.scard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--panel);transition:transform .45s cubic-bezier(.16,.7,.2,1),border-color .45s,box-shadow .45s}
.scard:hover{transform:translateY(-7px);border-color:rgba(168,201,107,.5);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.scard-img{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--panel)}  /* clickable poster (anchor to detail); posters are 1:1, show whole, never crop */
.scard-title{color:inherit;transition:color .25s}
.scard-title:hover{color:var(--green-2)}
.scard-img picture{display:block;width:100%;height:100%}
.scard-img img{width:100%;height:100%;object-fit:contain;transition:transform .7s cubic-bezier(.16,.7,.2,1)}
.scard:hover .scard-img img{transform:scale(1.05)}
.scard-cat{position:absolute;top:12px;left:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(7,10,19,.7);backdrop-filter:blur(6px);border:1px solid var(--line);color:var(--green-2);padding:5px 11px;border-radius:30px}
.scard-soon{position:absolute;top:12px;right:12px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  background:var(--green-2);color:var(--ok);padding:5px 11px;border-radius:30px}
.scard-body{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.scard-body h3{font-size:20px;line-height:1.16}
.scard-meta{color:var(--bone);font-size:16px;font-weight:500;margin-top:9px;letter-spacing:.01em}
.scard-row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:18px;gap:10px}
.scard-price{color:var(--green-2);font-size:13.5px}
.scard-links{display:flex;gap:14px;align-items:center}
.scard-links a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);
  border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .3s,border-color .3s;white-space:nowrap}
.scard-links a.tix{color:var(--green-2)}
.scard-links a:hover{color:var(--bone);border-color:var(--green-2)}
.season-foot{margin-top:42px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.season-foot span{color:var(--bone-dim);font-size:14.5px}
.season-empty{margin-top:42px;border:1px dashed var(--line);border-radius:12px;padding:48px;text-align:center;color:var(--bone-dim)}
@media (max-width:1200px){.season-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.season-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.season-grid{grid-template-columns:1fr}}

/* gallery + lightbox */
.gallery{background:linear-gradient(180deg,var(--noir),var(--noir-2))}
.gallery h2{font-size:clamp(30px,4.8vw,64px);max-width:16ch;margin-top:8px}
.gallery .g-sub{margin-top:18px;color:var(--bone-dim);max-width:52ch}
.g-grid{margin-top:42px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.g-cell{position:relative;overflow:hidden;border-radius:12px;cursor:pointer;border:1px solid var(--line-2)}
.g-cell picture{display:block;width:100%;height:100%}
.g-cell img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;transition:transform .8s cubic-bezier(.16,.7,.2,1)}
.g-cell:hover img{transform:scale(1.06)}
.g-cell .g-cap{position:absolute;left:0;bottom:0;right:0;padding:18px;z-index:2;
  background:linear-gradient(0deg,rgba(7,10,19,.85),transparent);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.g-cell:hover .g-cap{opacity:1;transform:none}
.g-cell .g-cap b{font-family:"Fraunces",serif;font-weight:500;font-size:18px}
.g-cell .g-cap span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-2);margin-top:4px}
.g-cell.tall{grid-row:span 2}
.g-cell.wide{grid-column:span 2}
.g-cell.big{grid-column:span 2;grid-row:span 2}
.g-grid--3{grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;margin-top:0}
.sta-strip-sec{padding-top:0}
@media (max-width:760px){.g-grid--3{grid-template-columns:1fr 1fr;grid-auto-rows:170px}}
@media (max-width:900px){.g-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}.g-cell.big,.g-cell.wide{grid-column:span 2}.g-cell.tall{grid-row:span 1}}
@media (max-width:560px){.g-grid{grid-template-columns:1fr;grid-auto-rows:220px}.g-cell.big,.g-cell.wide{grid-column:span 1}}
.lightbox{position:fixed;inset:0;z-index:9700;background:rgba(4,6,12,.94);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:5vw;opacity:0;visibility:hidden;transition:opacity .35s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:88vh;border-radius:8px;box-shadow:0 40px 90px -30px #000}
.lightbox .lb-close{position:absolute;top:24px;right:28px;font-size:30px;color:var(--bone);cursor:pointer;line-height:1;background:none;border:none;padding:6px}

/* manifesto */
.manifesto{background:radial-gradient(70% 90% at 88% 12%,var(--green-soft),transparent 55%),linear-gradient(180deg,var(--noir-2),var(--noir))}
.manifesto .statement{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(28px,4.6vw,60px);max-width:18ch;line-height:1.16}
.manifesto .m-foot{margin-top:42px;display:flex;gap:40px;flex-wrap:wrap;color:var(--bone-dim);font-size:15px;max-width:64ch}
.manifesto .m-foot p{flex:1 1 240px}

/* stats + quotes */
.stats{position:relative;background:linear-gradient(180deg,var(--noir),var(--noir-2));overflow:hidden}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin:10px 0 64px}
.stat .num{font-family:"Fraunces",serif;font-size:clamp(40px,5.4vw,74px);color:var(--bone);line-height:1}
.stat .num span{color:var(--green-2)}
.stat .lab{margin-top:12px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;border-top:1px solid var(--line);padding-top:50px}
.quote{display:flex;flex-direction:column;gap:16px}
.quote p{font-family:"Fraunces",serif;font-style:normal;font-size:clamp(17px,1.7vw,21px);line-height:1.45;color:var(--bone)}
.quote .qby{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-2)}
.quote .stars{color:var(--green-2);letter-spacing:3px;font-size:13px}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:34px}.quotes{grid-template-columns:1fr}}
/* reviews over a full-bleed production photo (homepage) */
.reviews{position:relative;overflow:hidden;padding:clamp(84px,13vh,150px) clamp(20px,5vw,80px);background:var(--noir)}
.reviews-media{position:absolute;inset:0;z-index:0}
.reviews-media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:1}  /* frame on the cast (lower band of the photo), not the empty arch */
.reviews-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,10,19,.46),rgba(7,10,19,.68)),radial-gradient(90% 70% at 50% 32%,rgba(7,10,19,.10),rgba(7,10,19,.55))}
.reviews-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto}
.reviews h2{font-size:clamp(30px,4.6vw,60px)}
.reviews .reviews-sub{margin-top:16px;color:var(--bone-dim);max-width:52ch;font-size:15.5px}
.reviews .quotes{grid-template-columns:repeat(3,1fr);border-top:none;padding-top:0;margin-top:42px}
.reviews .quote{background:rgba(9,12,22,.46);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:26px 24px}
@media (max-width:820px){.reviews .quotes{grid-template-columns:1fr}}

/* immerse band */
.immerse{position:relative;min-height:88svh;overflow:hidden;display:flex;align-items:flex-end}
.immerse-media{position:absolute;inset:0;z-index:0}
.immerse-media picture{display:block;width:100%;height:100%}
.immerse-media img{width:100%;height:108%;object-fit:cover;object-position:50% 42%;opacity:.94}
.immerse-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,10,19,.4) 0%,rgba(7,10,19,.1) 28%,rgba(7,10,19,.62) 70%,rgba(7,10,19,.96) 100%)}
.immerse-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 clamp(20px,5vw,80px) clamp(56px,9vh,104px)}
.immerse-inner h2{font-size:clamp(32px,5.4vw,74px);max-width:16ch}
.immerse-inner .im-sub{margin-top:22px;max-width:54ch;color:var(--bone-dim);font-size:clamp(15px,1.4vw,19px)}
.immerse-inner .im-row{margin-top:32px;display:flex;gap:38px;flex-wrap:wrap;align-items:center}
.im-stat{display:flex;flex-direction:column}
.im-stat b{font-family:"Fraunces",serif;font-size:30px;color:var(--green-2);font-weight:500}
.im-stat small{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);margin-top:4px}

/* box office / forms */
.inquire{position:relative;background:radial-gradient(60% 80% at 88% 100%,var(--green-soft),transparent 55%),linear-gradient(180deg,var(--noir-2),var(--noir))}
.inq-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:start}
.inq-left h2{font-size:clamp(32px,4.8vw,64px);max-width:13ch;margin-top:10px}
.inq-left .inq-lead{margin-top:20px;color:var(--bone-dim);max-width:42ch}
.inq-contact{margin-top:34px;display:flex;flex-direction:column;gap:14px}
.inq-contact a,.inq-contact span{display:flex;align-items:center;gap:12px;font-size:15.5px;color:var(--bone)}
.inq-contact .ic-k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-2);width:78px;flex:0 0 78px}
.inq-actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.form-field{margin-bottom:18px}
.form-field label{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:9px}
.form-field input,.form-field textarea,.form-field select{width:100%;background:transparent;border:1px solid var(--line);border-radius:6px;
  padding:14px 16px;color:var(--bone);font-family:inherit;font-size:15.5px;transition:border-color .3s}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--green-2)}
.form-field textarea{min-height:104px;resize:vertical}
.form-field select option{background:var(--noir-2)}
.form-note{font-size:12.5px;color:var(--bone-faint);margin-top:14px}
.form-done{display:none;border:1px solid var(--green-2);border-radius:8px;padding:40px;text-align:center;font-family:"Fraunces",serif;font-size:22px;color:var(--green-2)}
.inq-form-box{border:1px solid var(--line);border-radius:10px;padding:clamp(24px,3vw,40px);background:rgba(255,255,255,.015)}
.inq-form-box h3{font-size:24px;margin-bottom:8px}
.inq-form-box .ifb-sub{color:var(--bone-dim);font-size:14.5px;margin-bottom:24px}
@media (max-width:880px){.inq-grid{grid-template-columns:1fr;gap:48px}}

/* CTA strip */
.ctastrip{background:linear-gradient(180deg,var(--noir-2),var(--noir));text-align:center}
.ctastrip h2{font-size:clamp(30px,4.4vw,58px);max-width:20ch;margin:0 auto}
.ctastrip p{margin:18px auto 0;color:var(--bone-dim);max-width:74ch}
.ctastrip .row{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* footer */
footer{background:var(--noir-2);border-top:1px solid var(--line);padding:clamp(60px,8vh,90px) clamp(20px,5vw,80px) 40px}
.foot-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-brand p{margin-top:18px;color:var(--bone-dim);max-width:34ch;font-size:14.5px}
.foot-col .foot-h{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--green-2);margin-bottom:18px}
.foot-col a{display:block;color:var(--bone-dim);font-size:15px;margin-bottom:11px;transition:color .3s}
.foot-col a:hover{color:var(--bone)}
.foot-base{max-width:var(--maxw);margin:54px auto 0;padding-top:24px;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--bone-faint);font-size:12.5px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
/* Find Us map + Actors' Equity credit */
.foot-find{max-width:var(--maxw);margin:44px auto 0;padding-top:40px;border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:1fr 1.5fr;gap:30px;align-items:stretch}
.foot-find .foot-h{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--green-2);margin-bottom:14px}
.foot-find-copy address{font-style:normal;color:var(--bone-dim);font-size:15px;line-height:1.65}
.foot-find-copy .ff-dir{display:inline-block;margin-top:14px;color:var(--green-2);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .3s,border-color .3s}
.foot-find-copy .ff-dir:hover{color:var(--bone);border-color:var(--green-2)}
.foot-map{min-height:230px;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:var(--noir)}
.foot-map iframe{display:block;width:100%;height:100%;min-height:230px;border:0;filter:grayscale(.35) contrast(1.05) brightness(.92)}
.foot-equity{display:inline-flex;align-items:center;gap:12px;color:var(--bone-faint)}
/* union logo reads as a soft monochrome mark on dark, not a colored sticker */
/* brightness 1.9 flattened the blue mask and the brown wordmark to the same
   grey and lost 'ASSOCIATION 1913' entirely; a lighter touch keeps the shapes */
.foot-equity img{height:34px;width:auto;filter:grayscale(1) brightness(1.32) contrast(1.1);opacity:.9;transition:opacity .3s,filter .3s}
.foot-equity:hover img{opacity:1;filter:grayscale(0)}
@media (max-width:720px){.foot-find{grid-template-columns:1fr;gap:20px}}

/* ===== Summer Theatre Academy page ===== */
.sess-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.sess-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.sess-img{position:relative;height:230px;display:flex;align-items:center;justify-content:center;padding:22px;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.14))}
.sess-img picture{display:block;height:100%}
.sess-img img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.35)}  /* show artwork: never crop */
.sess-badge{position:absolute;top:14px;left:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;background:rgba(7,10,19,.86);color:var(--green-2);border:1px solid var(--line);padding:5px 11px;border-radius:30px}
.sess-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;min-width:0}
.sess-lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-2)}
.sess-body h3{font-size:24px;margin:6px 0 14px;line-height:1.15}
.sess-body .row{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--line-2);font-size:14px;line-height:1.5}
.sess-body .row .k{color:var(--bone-dim)}
.sess-body .btn{margin-top:auto;align-self:flex-start;font-size:11px;padding:11px 20px}
.sess-body .row + .btn{margin-top:18px}
@media (max-width:1180px){.sess-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.sess-grid{grid-template-columns:1fr}.sess-img{height:200px}}
.sched-split{gap:44px;align-items:start}
.sched{margin-top:26px;border-top:1px solid var(--line)}
.sched-row{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.sched-t{color:var(--green-2);font-size:14px;font-weight:600;flex:0 0 auto;font-variant-numeric:tabular-nums}
.sched-a{color:var(--bone-dim);font-size:14.5px;text-align:right}
.sched-photo{border-radius:14px;overflow:hidden;border:1px solid var(--line-2)}
.sched-photo img{width:100%;height:100%;object-fit:cover;min-height:340px}
@media (max-width:860px){.sched-photo img{min-height:220px}}
.bio-split{gap:44px;align-items:center}
.bio-photo{border-radius:14px;overflow:hidden;border:1px solid var(--line-2);flex:0 0 38%}
.bio-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.sec-kicker{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--green-2);margin-bottom:12px}
.quotesband .quotes{border-top:none;padding-top:0}
.reg-box{border:1px solid var(--line);border-radius:16px;padding:36px clamp(24px,4vw,44px);background:var(--panel)}
.reg-box h2{font-size:clamp(24px,3vw,34px);margin-bottom:22px}
.reg-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.reg-way{display:flex;flex-direction:column;gap:8px}
.rw-k{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-2)}
.reg-way span:last-child{color:var(--bone-dim);font-size:14.5px}
@media (max-width:760px){.reg-ways{grid-template-columns:1fr;gap:16px}}

/* =========================================================
   LIGHT / CHAMPAGNE THEME  (a few select pages)
   Scope by adding class "theme-light" to <body>.
   ========================================================= */
/* The chrome (header, footer, loader) and the hero stay dark & cinematic , 
   only the page CONTENT turns champagne. Matches "dark overall, light on a few pages". */
body.theme-light main{
  --noir:#f4eddf;--noir-2:#efe6d3;--panel:#faf6ec;--card:#faf6ec;
  --bone:#1b1712;--bone-dim:#3a3328;--bone-faint:#544c3e;--cream:#1b1712;
  --green:#9a6b2f;--green-2:#8a5a12;--green-soft:rgba(154,107,47,.12);--bronze:#9a6b2f;--ok:#f7f3e8;--accent-hi:#7a4e10;
  --line:rgba(30,22,10,.15);--line-2:rgba(30,22,10,.08);
  color:var(--bone);                    /* set the property, not just the var, so bare headings inherit ink */
  background:linear-gradient(180deg,#f4eddf,#efe6d3);
}
body.theme-light main .phero{           /* keep the hero dark under a champagne page */
  --noir:#070a13;--noir-2:#0b1020;--panel:#0a0e1a;--card:#0a0e1a;
  --bone:#f3f1ea;--bone-dim:rgba(243,241,234,.82);--bone-faint:rgba(243,241,234,.70);--cream:#f4efe2;
  --green:#c9a86a;--green-2:#e6cf9c;--green-soft:rgba(201,168,106,.15);--bronze:#d3b784;--ok:#0a1207;--accent-hi:#f2e2bb;
  --line:rgba(243,241,234,.13);--line-2:rgba(243,241,234,.07);
  color:var(--bone);
  background:var(--noir);
}
body.theme-light main .subnav{background:rgba(244,237,223,.92)}
body.theme-light main .aside-card,body.theme-light main .tile,body.theme-light main .person,body.theme-light main .inq-form-box{background:var(--card)}
body.theme-light ::selection{background:#8a5a12;color:#fff}
body.theme-light .grain{opacity:.03;mix-blend-mode:multiply}
body.theme-light .vignette{background:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(120,100,60,.10) 100%)}

/* =========================================================
   PER-PHOTO FOCAL POINT
   Production shots put the action low in frame with a lit backdrop/ceiling
   above. These keep the performers in view wherever the photo is cover-cropped
   (hero, page-hero, immerse band, gallery, tiles). Placed after the container
   defaults so they win by source order (equal specificity).
   ========================================================= */
img[src$="stg-chicago.jpg"]{object-position:50% 58%}
img[src$="stg-cast.jpg"]{object-position:50% 42%}
img[src$="stg-scene1.jpg"]{object-position:50% 50%}
img[src$="stg-scene2.jpg"]{object-position:50% 48%}
img[src$="stg-scene3.jpg"]{object-position:50% 45%}
img[src$="stg-scene4.jpg"]{object-position:50% 48%}
img[src$="stg-scene5.jpg"]{object-position:50% 48%}
img[src$="stg-academy.jpg"]{object-position:50% 50%}
img[src$="prod-anastasia.jpg"]{object-position:50% 46%}
img[src$="prod-egypt.jpg"]{object-position:50% 50%}
img[src$="prod-neon.jpg"]{object-position:50% 50%}
img[src$="prod-company.jpg"]{object-position:50% 52%}
img[src$="stage-wide.jpg"]{object-position:50% 48%}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-media img{height:100%}
  .hero-media picture:not(:first-child){display:none}
  .immerse-media img{height:100%}
  #heroDust{display:none}
  .hero-spot,.hero-beam{display:none}
  .hero{min-height:100svh}
}

/* =====================================================================
   ROUND-2 additions (evolution round 2, 2026-07-15 call)
   Show-type badges, gradient hero, cast/video sections, support band,
   editable slots, bullet lists. Uses existing gold/noir tokens.
   ===================================================================== */

/* Show-type badge pill (item 47) */
.type-badge{display:inline-block;align-self:flex-start;margin-bottom:16px;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ok);background:var(--gold-btn);padding:6px 14px;border-radius:999px}
.type-badge--card{margin:0 0 12px}

/* Gradient hero when a show has no production photo (items 41/42) */
.phero--nofoto{background:var(--noir)}
.phero-gradient{position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 90% at 18% 0%,var(--green-soft),transparent 52%),
             radial-gradient(90% 80% at 85% 20%,rgba(201,168,106,.10),transparent 55%),
             linear-gradient(180deg,#0c1120 0%,#070a13 100%)}
.phero--nofoto .phero-scrim{background:linear-gradient(180deg,rgba(7,10,19,.2),rgba(7,10,19,.55) 60%,var(--noir) 100%)}

/* Lighter photo overlays, to test showing more of the image (item 15) */
/* Lighter than before: the client found the old filter too heavy and the
   photographs too dark. Weight is kept low across the picture and concentrated
   in the bottom fifth, which is the only part sitting behind text. */
.phero-scrim{background:
  linear-gradient(180deg,rgba(7,10,19,.30) 0%,rgba(7,10,19,.05) 30%,rgba(7,10,19,.26) 60%,rgba(7,10,19,.74) 88%,var(--noir) 100%),
  linear-gradient(94deg,rgba(7,10,19,.58) 0%,rgba(7,10,19,.30) 34%,rgba(7,10,19,0) 62%)}
/* The picture is now much brighter, so the hero text carries its own shadow
   rather than relying on a heavy overlay to separate it from the photograph. */
.phero-inner .crumbs,.phero .phero-sub,.phero .hero-eyebrow,.phero .eyebrow{
  text-shadow:0 1px 3px rgba(4,6,12,.55),0 2px 18px rgba(4,6,12,.4)}
/* .platinum / .silver headings are a gradient clipped to the glyphs with a
   transparent text fill. text-shadow on those paints straight through the
   letterforms and turns the gold muddy, so they get a drop-shadow filter on the
   rendered result instead. Solid-colour (.pearl) headings take a normal shadow. */
.phero h1.pearl{text-shadow:0 1px 3px rgba(4,6,12,.55),0 2px 18px rgba(4,6,12,.4)}
.phero h1.platinum,.phero h1.silver{text-shadow:none;
  filter:drop-shadow(0 2px 5px rgba(4,6,12,.5)) drop-shadow(0 1px 16px rgba(4,6,12,.35))}

/* Meet-the-cast grid (item 51) */
.meet-cast .cast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}
.cast-cell{margin:0}
.cast-img{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.cast-img img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.cast-ph{font-size:34px;font-weight:700;color:var(--green-2);letter-spacing:.08em}
.cast-cell figcaption{margin-top:12px}
.cast-cell figcaption b{display:block;font-size:16px}
.cast-cell figcaption span{display:block;font-size:12.5px;color:var(--bone-dim);margin-top:2px}
@media (max-width:900px){.meet-cast .cast-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.meet-cast .cast-grid{grid-template-columns:1fr}}

/* Video section (item 49) */
.show-video .video-frame{position:relative;margin-top:30px;aspect-ratio:16/9;
  border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#000}
.show-video .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Homepage support / sponsors band (item 12) */
/* Sponsors as lit discs rather than boxes (client direction): each logo sits in
   a white circle with a soft gold halo, like a followspot on the wall. Three
   tiers, ordered by the client's ranking, sized so the top tier reads first. */
.sponsor-tiers{margin:14px 0 0;display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px)}
.support-band .sponsor-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.8vw,24px)}
.sponsor-cell{display:flex;align-items:center;justify-content:center;text-align:center;
  width:var(--sp,150px);height:var(--sp,150px);flex:0 0 auto;border-radius:50%;background:#fff;
  padding:calc(var(--sp,150px) * .14);border:0;position:relative;
  box-shadow:0 0 0 1px rgba(201,168,106,.30),0 10px 30px -14px rgba(0,0,0,.75),
             0 0 34px -6px rgba(201,168,106,.20);
  transition:transform .3s cubic-bezier(.16,.7,.2,1),box-shadow .3s}
a.sponsor-cell:hover,a.sponsor-cell:focus-visible{transform:translateY(-4px);
  box-shadow:0 0 0 1px rgba(201,168,106,.6),0 16px 40px -14px rgba(0,0,0,.8),
             0 0 48px -4px rgba(201,168,106,.42)}
a.sponsor-cell:focus-visible{outline:2px solid var(--green-2);outline-offset:4px}
.sponsor-cell img{max-width:100%;max-height:100%;width:auto;object-fit:contain}  /* no filter: logos must stay readable */
.sponsor-cell--name span{font:600 11px/1.32 Inter,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:#1a1d26}
/* eight in the top tier: cap the row so it breaks 4 and 4 rather than
   stranding the eighth logo alone on its own line */
.sponsor-row--1{--sp:clamp(124px,11vw,152px);max-width:calc(var(--sp) * 4 + clamp(14px,1.8vw,24px) * 3);margin-inline:auto}
.sponsor-row--2{--sp:clamp(112px,9.5vw,138px)}
.sponsor-row--3{--sp:clamp(100px,8.5vw,120px)}
.sponsor-row--3 .sponsor-cell--name span{font-size:10px;letter-spacing:.04em}
.support-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.sponsor-lead{margin:34px 0 0;font:600 11px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint)}

/* Editable content slot marker (items 29/30/32) */
.editable-slot{border-left:2px solid var(--green);padding:2px 0 2px 20px;margin-bottom:26px}
.editable-slot p{color:var(--bone-dim)}

/* Scannable bullet list for dense copy (item 18) */
ul.check-list{list-style:none;margin:14px 0 0;padding:0}
ul.check-list li{position:relative;padding:7px 0 7px 30px;color:var(--bone);border-bottom:1px solid var(--line-2)}
ul.check-list li::before{content:"";position:absolute;left:2px;top:12px;width:9px;height:9px;
  border-right:2px solid var(--green-2);border-bottom:2px solid var(--green-2);transform:rotate(45deg)}

/* Support "ways to give" cards + Pampered Chef highlight (round-2, Brittany revisions) */
.give-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}
.give-card{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:26px;display:flex;flex-direction:column}
.give-card h3{font-family:Fraunces,serif;font-weight:500;font-size:22px;color:var(--bone);margin-bottom:10px}
.give-card p{color:var(--bone-dim);font-size:15px;line-height:1.6;margin-bottom:16px;flex:1}
.give-card .more{color:var(--green-2);font-weight:600;font-size:14px;text-decoration:none;letter-spacing:.02em}
.give-card .more:hover{color:var(--accent-hi)}
.give-highlight{margin-top:26px;border:1px solid var(--green);border-radius:16px;
  background:linear-gradient(180deg,var(--green-soft),transparent);padding:28px}
.give-highlight .gh-lbl{display:inline-block;font:700 11px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ok);background:var(--gold-btn);padding:6px 12px;border-radius:999px;margin-bottom:14px}
.give-highlight h3{font-family:Fraunces,serif;font-weight:500;font-size:26px;color:var(--bone);margin-bottom:8px}
.give-highlight p{color:var(--bone-dim);font-size:15px;line-height:1.6;margin-bottom:18px;max-width:66ch}
@media (max-width:720px){.give-grid{grid-template-columns:1fr}}

/* Best of Westchester award mark in the reviews band (client direction) */
.reviews-award{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:30px}
.reviews-award img{height:128px;width:auto;object-fit:contain}
.reviews-award span{font:600 11px/1.3 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}

/* headline that must stay on one line where there is room */
.nowrap-head{text-wrap:balance}
@media (min-width:900px){.nowrap-head{white-space:nowrap}}

/* rotating reviews: fade each set in and out */
.quotes[data-rotate] .quote{transition:opacity .5s}
.quotes[data-rotate].swap .quote{opacity:0}
@media (max-width:720px){.reviews-award img{height:78px}}

/* =====================================================================
   ROUND-3: per-production photo galleries on History & Past Productions.
   Style 1 of 3 ("Filmstrip"), the default. Jeremy adds a season by
   appending to PAST_SEASONS in build_content.py.
   ===================================================================== */
.statband--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1000px){.statband--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.statband--5{grid-template-columns:repeat(2,1fr)}}

.pg-season{margin-bottom:46px}
.pg-season-h{font:600 11px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-2);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:24px}
.pg-card{margin-bottom:30px}
.pg-head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.pg-head h3{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(20px,2vw,26px);color:var(--bone)}
.pg-count{font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint)}
.pg-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:12px;
  overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.pg-shot{scroll-snap-align:start;display:block;aspect-ratio:5/4;border-radius:11px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel)}
.pg-shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,.7,.2,1)}
.pg-shot:hover img{transform:scale(1.06)}
@media (max-width:620px){.pg-strip{grid-auto-columns:minmax(76vw,1fr)}}

/* ---- ROUND-3 components ---- */

/* Subscriptions: three show cards that click through (client direction) */
.sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.sub-card{text-decoration:none;display:flex;flex-direction:column;transition:.3s}
.sub-card-img{aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.sub-card-img img{width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.16,.7,.2,1)}
.sub-card:hover .sub-card-img{border-color:var(--green)}
.sub-card:hover .sub-card-img img{transform:scale(1.04)}
.sub-card-body{padding:14px 2px 0}
.sub-card-body h3{font-family:"Fraunces",serif;font-weight:500;font-size:21px;color:var(--bone)}
.sub-card-body span{display:block;color:var(--bone-dim);font-size:13.5px;margin-top:4px}
.sub-card-body .more{color:var(--green-2);font-weight:600;font-size:13px;margin-top:8px}
@media (max-width:820px){.sub-grid{grid-template-columns:1fr;gap:18px}}

/* Gift card artwork */
.giftcard-figure{margin:0 0 30px;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:22px;text-align:center}
.giftcard-figure img{max-width:min(420px,100%);height:auto}

/* Seating chart */
.seating{margin:26px 0 0;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:14px;overflow:hidden}
.seating img{width:100%;height:auto;display:block}

/* Rentals venue gallery */
.rent-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:26px}
.rent-cell{position:relative;display:block;aspect-ratio:1/1;border-radius:11px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);text-decoration:none}
.rent-cell img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,.7,.2,1)}
.rent-cell:hover img{transform:scale(1.07)}
.rent-cell span{position:absolute;left:0;right:0;bottom:0;padding:16px 10px 8px;font-size:11.5px;color:var(--bone);
  background:linear-gradient(180deg,transparent,rgba(7,10,19,.9))}
@media (max-width:1000px){.rent-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.rent-grid{grid-template-columns:repeat(2,1fr)}}

/* Technical packet download (file is swappable by staff) */
.techpacket{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  border:1px solid var(--green);border-radius:16px;background:linear-gradient(180deg,var(--green-soft),transparent);padding:24px 26px}
.techpacket h3{font-family:"Fraunces",serif;font-weight:500;font-size:22px;color:var(--bone);margin-bottom:6px}
.techpacket p{color:var(--bone-dim);font-size:14.5px;max-width:52ch}

/* Show-page performance calendar */
.show-cal .cal-figure{margin:24px 0 0;border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px}
.show-cal .cal-figure img{width:100%;height:auto;display:block}

/* Academy director photo, smaller (client direction) */
.bio-photo--sm{max-width:290px}
.bio-photo--sm img{border-radius:14px}

/* Director lockup: photo and bio sit in one horizontal card so the portrait
   cannot drift away from the text it belongs to. */
.bio-lockup{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(24px,3vw,40px);
  align-items:center;border:1px solid var(--line);border-radius:16px;
  background:var(--panel);padding:clamp(20px,2.6vw,34px)}
.bio-lockup .bio-photo{flex:none;max-width:none;align-self:stretch;min-height:260px}
.bio-lockup .bio-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.bio-lockup .prose p{font-size:15.5px}
.bio-lockup .prose h2{margin-bottom:10px}
@media (max-width:800px){
  .bio-lockup{grid-template-columns:1fr;gap:22px}
  .bio-lockup .bio-photo{min-height:0;max-width:280px;margin-inline:auto}
}

/* Dining partners shown as logos (client direction round 3) */
.dine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.dine-card{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);
  border-radius:14px;background:var(--panel);overflow:hidden;transition:.28s}
.dine-card:hover{border-color:var(--green);transform:translateY(-3px)}
.dine-logo{display:flex;align-items:center;justify-content:center;height:132px;padding:20px;background:#fff}
.dine-logo img{max-width:100%;max-height:100%;object-fit:contain}
.dine-logo--text span{font-family:"Fraunces",serif;font-weight:500;font-size:30px;letter-spacing:.01em;
  color:#12161f;text-align:center;line-height:1.1}
.dine-meta{padding:15px 18px 17px}
.dine-meta b{display:block;font-family:"Fraunces",serif;font-weight:500;font-size:18px;color:var(--bone)}
.dine-meta small{display:block;color:var(--bone-dim);font-size:12.5px;margin-top:3px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:900px){.dine-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.dine-grid{grid-template-columns:1fr}}

/* ---- ROUND-4 ---- */

/* Show-type banner + blurb (matches the current site's presentation) */
/* Programme lockup. The MainStage / Special Events / Education artwork is a
   wide white banner; run full width it swallowed most of a desktop screen, so
   on desktop it sits as a compact column beside its copy instead. */
.show-cat .cat-lockup{display:grid;grid-template-columns:minmax(190px,268px) 1fr;
  gap:clamp(22px,3vw,36px);align-items:center}
.show-cat .cat-banner{border-radius:10px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);align-self:center}
.show-cat .cat-banner img{width:100%;height:auto;display:block}
.show-cat .cat-copy{margin:0;color:var(--bone-dim);font-size:15px;line-height:1.65}
@media (max-width:760px){
  .show-cat .cat-lockup{grid-template-columns:1fr;gap:18px}
  .show-cat .cat-banner{max-width:250px}
}

/* Compact calendar in the show sidebar, not a giant block mid-page */
.cal-mini{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.cal-mini-h{display:block;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-2);margin-bottom:10px}
.cal-mini a{display:block;border-radius:9px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.cal-mini img{width:100%;height:auto;display:block}
.cal-mini-note{display:block;margin-top:8px;font-size:11.5px;color:var(--bone-faint)}

/* Stats that roll/flip into place */
/* The reveal mask sits a little outside the glyphs, so Fraunces' tall digits are
   never sliced while the number rises into view. */
.statband .num{overflow:hidden;padding:.14em 0;margin:-.14em 0}
/* Direct children only: these rules predate the odometer and must not reach the
   reels, cells and separators inside it. */
.statband .num > span{display:inline-block}
html.anim .statband .num > span{opacity:0;transform:translateY(60%) rotateX(-55%);transform-origin:50% 100%}
html.anim .statband.in .num > span{opacity:1;transform:none;transition:transform .9s cubic-bezier(.16,.8,.2,1),opacity .5s}

/* Gift cards: use the empty desktop space beside the artwork (client direction) */
.giftcard-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);align-items:center}
.giftcard-split .giftcard-figure{margin:0}
.giftcard-buy h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(24px,2.6vw,34px);color:var(--bone)}
.giftcard-buy p{margin:12px 0 22px;color:var(--bone-dim);font-size:15.5px;line-height:1.6;max-width:44ch}
.giftcard-buy .btn{margin:0 10px 10px 0}
@media (max-width:820px){.giftcard-split{grid-template-columns:1fr;gap:26px}}

/* Staff bios, full text from the current site */
.staff-bio{margin-top:12px;color:var(--bone-dim)}
.staff-bio p{margin-bottom:12px;line-height:1.68}
.staff-bio p:last-child{margin-bottom:0}

/* Support section heading sized like every other section head (client direction) */
.support-band h2{font-size:clamp(30px,4.6vw,62px);max-width:18ch}
.support-band .s-sub{margin-top:18px;color:var(--bone-dim);max-width:60ch}
/* sponsor ranking now supplied by the client, see .sponsor-tiers above */

/* seating chart caption */
.seating-cap{margin-top:10px;font:500 12px/1.4 Inter,sans-serif;letter-spacing:.04em;color:var(--bone-faint)}

/* ==========================================================================
   Touch targets (WCAG 2.5.5). Scoped to coarse pointers and small screens so
   desktop spacing is untouched: only the tap area grows, not the type.
   ========================================================================== */
@media (hover:none),(pointer:coarse),(max-width:768px){
  .foot-col a{padding:10px 0;margin-bottom:0}
  .subnav-row a{padding:14px 16px}
  .nav-cta{padding:15px 22px}
  /* matches the specificity of the 620px rule above, which sets its own padding */
  .nav-actions .nav-cta.solid{padding:15px 16px}
  .crumbs a{display:inline-block;padding:13px 4px;margin:-13px 0}
  .brand{display:inline-flex;align-items:center;min-height:44px}
  .foot-equity,.dine-logo{min-height:44px;display:inline-flex;align-items:center}
  .ff-dir{min-height:44px;display:inline-flex;align-items:center}
  .lb-close{width:44px;height:44px}
  /* standalone "Learn more" links, not the ones nested inside a card anchor */
  a.more{display:inline-flex;align-items:center;min-height:44px}
  /* show cards: title and the Details / Tickets pair are the primary taps */
  .scard-title{display:inline-flex;align-items:center;min-height:44px}
  .scard-links a{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0}
  .scard-row{padding-top:8px}
  .hs-item .hs-meta{padding:12px 10px}
  .hero-next a{min-height:44px;display:inline-flex;align-items:center}
  .inq-contact a{min-height:44px;display:flex;align-items:center}
  /* Inline links inside running prose are intentionally left alone: WCAG 2.5.8
     exempts them, and padding them would break the line rhythm of a paragraph. */
}

/* ==========================================================================
   Odometer counters. Each digit is a reel of 0-9 that slides up to land on
   its value. Reel cells are 1em tall so the roll tracks the font size.
   ========================================================================== */
/* Every part of a counter (digit cells, comma, K) is the same height box with the
   same line height, so the text inside all of them lands on one baseline. The box
   is taller than the font so the digits are not clipped. */
.od{display:inline-block;vertical-align:top;font-variant-numeric:tabular-nums;--odh:1.25em}
.od-vis{display:inline-flex;align-items:flex-start;height:var(--odh);line-height:var(--odh);user-select:none}
/* real value for screen readers and copy-paste; the reels are aria-hidden */
.od-sr{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
.od-s{display:block;height:var(--odh);line-height:var(--odh)}
.od-d{display:block;height:var(--odh);overflow:hidden;line-height:var(--odh);text-align:center}
.od-r{display:block;transform:translateY(0)}
.od-r i{display:block;height:var(--odh);line-height:var(--odh);font-style:normal;text-align:center}
@media (prefers-reduced-motion:reduce){.od-r{transition:none !important}}

/* Build-time WebP wrapper. display:contents so the wrapper generates no box and
   the image stays a layout child of whatever contained it before. */
.pw{display:contents}

/* ==========================================================================
   Print. Mostly for the seating chart, directions and the staff list, which
   people do actually print. The critical rule is forcing .reveal visible:
   those start at opacity 0 and are revealed on scroll, so an unscrolled page
   would otherwise print with most of its content blank.
   ========================================================================== */
@media print{
  *,*::before,*::after{background:transparent !important;color:#000 !important;
    box-shadow:none !important;text-shadow:none !important}
  /* .platinum / .silver paint a gradient clipped to the glyphs and set the text
     fill transparent. Stripping backgrounds above would leave those headings,
     including every page title, printing as blank space. */
  .platinum,.platinum span,.silver,.silver span{-webkit-text-fill-color:#000 !important;
    color:#000 !important;background:none !important;-webkit-background-clip:border-box !important;
    background-clip:border-box !important}
  body{background:#fff !important}
  .reveal,.lines,.g-cell,.scard,.ga-card{opacity:1 !important;transform:none !important;filter:none !important}
  /* split headings slide up from a clipped wrapper; without this the page
     title itself prints blank */
  html.anim .lines .ln-inner,.lines .ln-inner{transform:none !important;opacity:1 !important}
  .lines .ln-wrap{overflow:visible !important}
  .grain,.vignette,.progress,.skip-link,.nav-actions,.nav-toggle,.nav-drop,
  header.site,.drawer,footer,.cta-strip,.lightbox,.pgv,.hv-bar,
  .hero-media,.phero-media,.hero-strip,.ga-rail,.subnav{display:none !important}
  /* the hero collapses to nothing once its image is gone, so claw back the
     padding it and the sections reserve for full-bleed layout */
  .phero,.hero{min-height:0 !important;padding:0 !important}
  .phero-inner,.hero-inner{padding:0 !important}
  .section{padding:14px 0 !important}
  .wrap{padding-left:0 !important;padding-right:0 !important}
  main{padding-top:0 !important}
  img,picture{max-width:100% !important;page-break-inside:avoid}
  h1,h2,h3{page-break-after:avoid}
  .stat,.ga-card,.pg-card,figure,.aside-card{page-break-inside:avoid}
  /* spell out where a link actually goes, since the reader cannot click it */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;word-break:break-all}
  a[href^="mailto:"]::after{content:" (" attr(href) ")";font-size:10px}
  .od-sr{position:static !important;width:auto !important;height:auto !important;clip-path:none !important}
  .od-vis{display:none !important}
}

/* ==========================================================================
   Trailer + press band on show pages. Video takes the wider column, the press
   quotes stack beside it (client direction, 2026-08-16). Collapses to one
   column below 900px, and when a show has only one of the two.
   ========================================================================== */
.show-vp .vp-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(22px,3vw,40px);margin-top:34px;align-items:start}
.show-vp .vp-grid--solo{grid-template-columns:minmax(0,1fr);max-width:900px}
.show-vp .video-frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:#05070d}
.show-vp .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.show-vp .vp-press{display:flex;flex-direction:column;gap:14px}
.show-vp .vp-quote{margin:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  padding:20px 22px}
.show-vp .vp-quote p{margin:0;color:var(--bone);font-family:"Fraunces",serif;font-weight:400;
  font-size:clamp(15px,1.15vw,17px);line-height:1.5}
.show-vp .vp-quote cite{display:block;margin-top:12px;font:600 10.5px/1.3 Inter,sans-serif;
  font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--green-2)}
@media (max-width:900px){
  .show-vp .vp-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .show-vp .vp-press{gap:12px}
}

/* build credit */
.foot-base .foot-by{color:var(--bone-faint)}
.foot-base .foot-by a{color:var(--bone-dim);border-bottom:1px solid var(--line);transition:color .25s,border-color .25s}
.foot-base .foot-by a:hover{color:var(--green-2);border-color:var(--green)}

/* ==========================================================================
   Performance calendar. Generated from shows-schedule.csv. A real month grid
   marked up as a table, so a screen reader reads it as one and staff can read
   it the same way they read the house calendar.
   ========================================================================== */
/* The calendar is the second row of the show-detail grid: it fills the column
   under the synopsis, beside the details card, instead of opening a new
   full-width band below everything. */
.split--show .show-main{min-width:0}
.split--show .show-cal{margin-top:clamp(34px,4vw,54px)}
@media (max-width:900px){
  .split--show .show-cal{margin-top:38px}
  /* On a phone the artwork and the show facts should land before the essay,
     so the reader sees what the show is before reading about it. */
  .split--show{display:flex;flex-direction:column}
  .split--show > .show-main{order:2}
  .split--show > .aside-card{order:1}
}
.show-cal .cal-h{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(24px,2.4vw,32px);
  color:var(--bone);line-height:1.15}
.show-cal .cal-sub{margin-top:12px;max-width:60ch;color:var(--bone-dim);font-size:14.5px;line-height:1.6}
.cal-wrap{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,26px);margin-top:26px}
.cal-month{flex:1 1 300px;max-width:460px;min-width:0}
.cal-tbl{width:100%;border-collapse:collapse;table-layout:fixed;
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal-tbl caption{caption-side:top;text-align:left;padding:0 0 12px;
  font-family:"Fraunces",serif;font-weight:500;font-size:clamp(19px,1.7vw,23px);color:var(--bone)}
.cal-tbl th{background:var(--noir-2);color:var(--bone-dim);font:600 10px/1 Inter,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;padding:10px 2px;border-bottom:1px solid var(--line)}
.cal-tbl th abbr{text-decoration:none;border:0}
.cal-tbl td{height:62px;vertical-align:top;padding:6px 5px;border:1px solid var(--line-2);
  background:var(--panel);text-align:right}
.cal-tbl td.cal-out{background:transparent;border-color:transparent}
.cal-d{display:block;font:500 13px/1 Inter,sans-serif;color:var(--bone-faint)}
/* performance days: gold like the printed house calendar, but on-brand */
.cal-tbl td.cal-on{background:var(--gold-btn);border-color:transparent}
.cal-tbl td.cal-on .cal-d{color:var(--ok);font-weight:700}
.cal-t{display:block;margin-top:3px;font:700 11.5px/1.25 Inter,sans-serif;color:var(--ok)}
.cal-tag{display:block;margin-top:3px;font:600 8.5px/1.2 Inter,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ok);opacity:.78}
.cal-sr{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
.cal-actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:560px){
  .cal-tbl td{height:54px;padding:5px 3px}
  .cal-d{font-size:12px}
  .cal-t{font-size:10px;letter-spacing:-.01em}
  .cal-month{flex-basis:100%}
}