/* =========================================================================
   ZOË ADAMS — THEATRE DIRECTOR
   Contemporary commercial Broadway marketing: marquee bulbs, poster-rack
   key art, saturated per-show brand colour, heavy condensed caps, and a
   real billing block for credits.
   ========================================================================= */

:root{
  --ink:#08070A;
  --ink-2:#111015;
  --ink-3:#191720;
  --paper:#FAF7F2;
  --dim:#928D99;
  --faint:#615C6B;

  --red:#FF3B1F;        /* house red — the marquee */
  --gold:#FFC24A;       /* bulb gold */
  --show:var(--red);    /* per-production accent, set inline */

  --rule:rgba(250,247,242,.14);
  --rule-hi:rgba(250,247,242,.34);

  --marquee:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --text:"Archivo","Helvetica Neue",Helvetica,sans-serif;

  --gutter:clamp(1.15rem,4.5vw,4.5rem);
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--text);font-size:clamp(.95rem,.3vw + .88rem,1.02rem);
  font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::after{ /* print grain */
  content:"";position:fixed;inset:-50%;z-index:9999;pointer-events:none;
  opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--show);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.skip{position:absolute;left:-9999px;z-index:10000;background:var(--gold);color:var(--ink);
  padding:.7rem 1.2rem;font:700 .72rem/1 var(--text);letter-spacing:.16em;text-transform:uppercase}
.skip:focus{left:1rem;top:1rem}

.wrap{max-width:88rem;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--tight{max-width:56rem}

/* ---- the marketing voice: condensed caps ----------------------------- */
.kicker{
  font-family:var(--text);font-size:.66rem;font-weight:700;
  font-stretch:82%;letter-spacing:.3em;text-transform:uppercase;
  color:var(--show);margin:0 0 1.1rem;
}
.kicker--paper{color:var(--paper)}
.kicker--dim{color:var(--faint)}
.kicker__star{color:var(--gold)}

.slab{
  font-family:var(--marquee);font-weight:800;text-transform:uppercase;
  line-height:.86;letter-spacing:.005em;margin:0;text-wrap:balance;
}

/* ---- marquee bulb frame ---------------------------------------------- */
.bulbs{position:relative}
.bulbs::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  padding:9px;
  background-image:radial-gradient(circle at center, var(--gold) 0 2px, rgba(255,194,74,.18) 2.4px, transparent 3.2px);
  background-size:20px 20px;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask-composite:exclude;
  animation:bulbglow 3.4s ease-in-out infinite;
}
@keyframes bulbglow{0%,100%{opacity:.55}50%{opacity:1}}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:clamp(1rem,2.6vw,1.8rem) var(--gutter);
}
.nav--solid{
  position:sticky;background:rgba(8,7,10,.86);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--rule);
}
.nav__home{
  font-family:var(--marquee);font-weight:800;text-transform:uppercase;
  font-size:clamp(1rem,2vw,1.35rem);letter-spacing:.02em;line-height:1;
}
.nav__home span{color:var(--red)}
.nav__links{display:flex;gap:clamp(.9rem,2.6vw,2.2rem);list-style:none;margin:0;padding:0}
.nav__links a{
  font-size:.68rem;font-weight:700;font-stretch:82%;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);position:relative;padding-bottom:.28rem;
  transition:color .3s var(--ease);
}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--red);transition:right .4s var(--ease)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--paper)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{right:0}

/* =========================================================================
   HERO — above-the-title billing
   ========================================================================= */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:9rem var(--gutter) clamp(2.2rem,6vh,4rem);overflow:hidden;isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-3;background:var(--ink)}
/* The lockup never moves; only the photography behind it changes.
   The first still is a permanent base layer - it paints immediately (no
   fade-up delaying LCP) and the others cross-fade over it in turn, so there
   is never a frame with nothing on screen. */
.hero__bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;
}
.hero__bg img + img{
  opacity:0;animation:heroCycle var(--hero-cycle,28s) linear infinite;
}
@keyframes heroCycle{
  0%{opacity:0} 4%{opacity:1} 25%{opacity:1} 29%{opacity:0} 100%{opacity:0}
}
.hero__wash{display:none}
.hero__veil{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(88% 60% at 50% 0%,rgba(255,194,74,.14),transparent 62%),
  linear-gradient(180deg,rgba(8,7,10,.72) 0%,rgba(8,7,10,.30) 34%,rgba(8,7,10,.86) 66%,rgba(8,7,10,.98) 100%)}
.hero__inner{width:100%;max-width:88rem;margin-inline:auto}
.hero__name{font-size:clamp(4rem,17vw,16rem);font-weight:900;letter-spacing:-.005em}
.hero__name span{display:block}
.hero__name .b{color:var(--red);-webkit-text-stroke:0}
.hero__rule{height:3px;background:var(--paper);margin:clamp(1.1rem,2.6vh,1.8rem) 0;max-width:100%}
.hero__tag{
  font-size:clamp(.78rem,1.5vw,1.02rem);font-weight:700;font-stretch:80%;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.5;
  max-width:42rem;margin:0;color:var(--paper);
}
.hero__tag b{color:var(--gold);font-weight:700}
.hero__strip{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:clamp(1.4rem,3vh,2.2rem) 0 0;
  font-size:.63rem;font-weight:700;font-stretch:78%;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);
}
.hero__strip i{font-style:normal;color:var(--gold)}

.rise{opacity:0;transform:translateY(1.5rem);animation:rise .9s var(--ease) forwards}
.rise--1{animation-delay:.1s}.rise--2{animation-delay:.22s}
.rise--3{animation-delay:.36s}.rise--4{animation-delay:.5s}
@keyframes rise{to{opacity:1;transform:none}}

/* =========================================================================
   SECTION HEAD
   ========================================================================= */
.section{padding:clamp(3.5rem,9vh,7rem) 0}
.section__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  border-bottom:3px solid var(--paper);padding-bottom:.7rem;
  margin-bottom:clamp(2rem,5vh,3.4rem);
}
.section__title{font-size:clamp(1.9rem,5vw,3.6rem);font-weight:900}
.section__count{
  font-size:.66rem;font-weight:700;font-stretch:78%;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;padding-bottom:.42rem;
}

/* =========================================================================
   KEY ART — the poster rack
   ========================================================================= */
.rack{
  display:grid;gap:clamp(1rem,2.4vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));
}
.card{display:flex;flex-direction:column;position:relative}
.card__art{
  position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--ink-2);
  border:1px solid var(--rule);
  transition:border-color .4s var(--ease),transform .5s var(--ease);
}
.card:hover .card__art{border-color:var(--show);transform:translateY(-5px);box-shadow:0 12px 34px rgba(0,0,0,.5)}
.card__art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:filter .6s var(--ease),transform 1.1s var(--ease);
}
.card:hover .card__art img{filter:brightness(1.06);transform:scale(1.05)}
.card__wash{display:none}
.card__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,10,0) 34%,rgba(8,7,10,.5) 58%,rgba(8,7,10,.93) 84%,rgba(8,7,10,.97))}

.card__plate{position:absolute;left:0;right:0;bottom:0;padding:1rem .95rem 1.1rem;z-index:2}
.card__year{
  font-size:.6rem;font-weight:700;font-stretch:76%;letter-spacing:.26em;
  text-transform:uppercase;color:var(--show);margin:0 0 .42rem;
  filter:brightness(1.35);
}
.card:hover .card__year{color:var(--gold)}
.card__title{
  font-family:var(--marquee);text-transform:uppercase;
  font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:800;line-height:.88;
  letter-spacing:.005em;margin:0;color:var(--paper);
}
.card__venue{
  font-size:.6rem;font-weight:600;font-stretch:76%;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:.5rem 0 0;line-height:1.45;
}
.card__badge{
  position:absolute;top:0;left:0;z-index:3;
  background:var(--gold);color:var(--ink);
  font-size:.56rem;font-weight:700;font-stretch:76%;letter-spacing:.18em;
  text-transform:uppercase;padding:.36rem .6rem;
}

/* --- teaser card: show announced, key art not shot yet ---------------- */
.card--teaser .card__art{
  display:grid;place-items:center;text-align:center;
  border:1px solid color-mix(in srgb,var(--show) 55%,transparent);
  background:
    radial-gradient(76% 54% at 50% 8%,color-mix(in srgb,var(--show) 34%,transparent),transparent 70%),
    linear-gradient(170deg,var(--ink-3),var(--ink) 68%);
}
.teaser{position:relative;z-index:2;padding:1.6rem 1.15rem;width:100%}
.teaser__tag{
  font-size:.58rem;font-weight:700;font-stretch:76%;letter-spacing:.28em;
  text-transform:uppercase;color:var(--show);margin:0 0 1rem;filter:brightness(1.4);
}
.teaser__title{font-family:var(--marquee);text-transform:uppercase;
  font-size:clamp(1.55rem,2.7vw,2.15rem);font-weight:800;line-height:.9;margin:0;color:var(--paper)}
.teaser__rule{width:2.2rem;height:2px;background:var(--show);margin:1.1rem auto;filter:brightness(1.3)}
.teaser__note{
  font-size:.6rem;font-weight:600;font-stretch:78%;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin:0;line-height:1.7;
}

/* =========================================================================
   PRODUCTION PAGE
   ========================================================================= */
.phero{position:relative;min-height:76svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.phero--teaser{min-height:auto;padding-top:clamp(6rem,14vh,9rem)}
.phero__bg{position:absolute;inset:0;z-index:-3;background:var(--ink)}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero__wash{display:none}
.phero__veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(8,7,10,.78) 0%,rgba(8,7,10,.26) 34%,rgba(8,7,10,.88) 70%,rgba(8,7,10,.98) 100%)}
.phero__inner{width:100%;max-width:88rem;margin-inline:auto;padding:clamp(2.2rem,6vh,4.5rem) var(--gutter)}
.ptitle{font-size:clamp(2.4rem,9vw,7.5rem);font-weight:900;letter-spacing:-.004em}
.pbar{
  display:flex;flex-wrap:wrap;gap:.45rem 1.2rem;margin:1.3rem 0 0;
  font-size:.66rem;font-weight:700;font-stretch:78%;letter-spacing:.22em;
  text-transform:uppercase;color:var(--paper);
}
.pbar i{font-style:normal;color:var(--gold)}
.pbyline{
  font-size:.82rem;font-weight:600;font-stretch:82%;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin:1rem 0 0;max-width:46rem;line-height:1.65;
}
.pawards{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 0;padding:0;list-style:none}
.pawards li{
  background:var(--gold);color:var(--ink);padding:.4rem .75rem;
  font-size:.6rem;font-weight:700;font-stretch:78%;letter-spacing:.16em;text-transform:uppercase;
}

/* gallery ---------------------------------------------------------------- */
/* Masonry columns, not a grid. Photographs keep their true proportions and
   are never cropped, and a short frame beside a tall one leaves no empty
   cell - a grid row is as tall as its tallest item, which left dark holes. */
.gallery{
  column-count:2;column-gap:clamp(.6rem,1.5vw,1.3rem);
  padding:clamp(2.5rem,7vh,5rem) 0;
}
.gallery figure{
  margin:0 0 clamp(.6rem,1.5vw,1.3rem);
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  overflow:hidden;position:relative;
}
.gallery img{width:100%;height:auto;display:block;
  transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.gallery figure:hover img{transform:scale(1.03);filter:brightness(1.05)}
@media (max-width:44rem){.gallery{column-count:1}}

/* --- BILLING BLOCK — the real thing ------------------------------------ */
.billing{padding:clamp(2.5rem,7vh,5rem) 0 clamp(3rem,8vh,6rem);border-top:1px solid var(--rule)}
.billing__head{text-align:center;margin-bottom:clamp(1.6rem,4vh,2.6rem)}
.billing__head .kicker{color:var(--gold)}
.billing__presents{
  font-family:var(--marquee);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:.94;margin:0;
}
.block{
  max-width:46rem;margin-inline:auto;text-align:center;
  font-family:var(--text);font-stretch:64%;font-weight:600;
  font-size:clamp(.7rem,1.1vw,.8rem);line-height:1.85;letter-spacing:.09em;
  text-transform:uppercase;color:var(--paper);
}
.block dl{margin:0;display:block}
.block .role{color:var(--faint);font-weight:500}
.block .pair{display:inline;white-space:normal}
.block .pair::after{content:"  \00B7  ";color:var(--faint)}
.block .pair:last-child::after{content:""}
.block__lead{display:block;color:var(--gold);margin-bottom:.7rem;letter-spacing:.16em}
.block__dir{
  display:block;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--rule);
  font-stretch:70%;font-size:clamp(.8rem,1.4vw,1rem);letter-spacing:.14em;color:var(--paper);
}
.block__dir b{color:var(--gold);font-weight:700}
.block__photo{display:block;margin-top:1.1rem;color:var(--faint);font-size:.66rem;letter-spacing:.14em}

/* pager ------------------------------------------------------------------ */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border-top:1px solid var(--rule)}
.pager__item{background:var(--ink);padding:clamp(1.6rem,4vh,2.8rem) var(--gutter);transition:background .4s var(--ease)}
.pager__item:hover{background:var(--ink-2)}
.pager__item--next{text-align:right}
.pager__dir{font-size:.6rem;font-weight:700;font-stretch:78%;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);margin:0 0 .55rem}
.pager__name{font-family:var(--marquee);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.05rem,2.6vw,1.8rem);line-height:.95;margin:0;transition:color .3s var(--ease)}
.pager__item:hover .pager__name{color:var(--gold)}
.pager__item--empty{pointer-events:none;background:var(--ink)}
@media (max-width:34rem){.pager{grid-template-columns:1fr}.pager__item--next{text-align:left}
  .pager__item--empty{display:none}}

/* =========================================================================
   ABOUT
   ========================================================================= */
.about{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:start;grid-template-columns:1fr;
  padding-top:clamp(6rem,14vh,9rem);padding-bottom:clamp(3rem,8vh,6rem)}
@media (min-width:56rem){.about{grid-template-columns:.78fr 1.22fr}}
.about__portrait{margin:0;position:relative}
.about__portrait img{width:100%}
.about__portrait figcaption{margin-top:.8rem;font-size:.58rem;font-weight:700;font-stretch:76%;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.quote{
  font-family:var(--marquee);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,4.4vw,3.2rem);line-height:.95;margin:0 0 clamp(1.6rem,4vh,2.6rem);
  text-wrap:balance;
}
.quote em{font-style:normal;color:var(--red)}
.prose{max-width:44rem}
.prose p{margin:0 0 1.25rem;color:var(--dim)}
.prose p.lead{color:var(--paper)}
.hr{height:1px;background:var(--rule);border:0;margin:2.2rem 0}

.btn{
  display:inline-flex;align-items:center;gap:.65rem;margin-top:1.3rem;
  background:var(--red);color:var(--paper);padding:.9rem 1.8rem;
  font-size:.68rem;font-weight:700;font-stretch:80%;letter-spacing:.22em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),gap .3s var(--ease);
}
.btn:hover{background:var(--gold);color:var(--ink);gap:1.1rem}
.btn::after{content:"\2197"}

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact{min-height:100svh;display:flex;align-items:center;padding:7rem 0 4rem}
.contact__mail{
  font-family:var(--marquee);font-weight:900;text-transform:uppercase;line-height:.9;
  font-size:clamp(1.7rem,7.4vw,6rem);display:inline-block;position:relative;
  word-break:break-word;padding-bottom:.1em;transition:color .35s var(--ease);
}
.contact__mail::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:4px;
  background:var(--red);transition:right .55s var(--ease)}
.contact__mail:hover{color:var(--gold)}
.contact__mail:hover::after{right:0;background:var(--gold)}
.contact__grid{display:grid;gap:clamp(1.5rem,3.5vw,3rem);margin-top:clamp(2.5rem,7vh,4.5rem);
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.contact__item h3{font-size:.62rem;font-weight:700;font-stretch:78%;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);margin:0 0 .6rem}
.contact__item p,.contact__item a{margin:0;color:var(--dim);font-size:.92rem}
.contact__item a:hover{color:var(--gold)}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{border-top:3px solid var(--paper);padding:clamp(2rem,5vh,3.2rem) 0 clamp(1.6rem,4vh,2.4rem)}
.foot__grid{display:flex;flex-wrap:wrap;gap:1.2rem 2.5rem;align-items:center;justify-content:space-between}
.foot__name{font-family:var(--marquee);font-weight:800;text-transform:uppercase;font-size:1.25rem;margin:0}
.foot__name span{color:var(--red)}
.foot__links{display:flex;flex-wrap:wrap;gap:1.3rem;list-style:none;margin:0;padding:0}
.foot__links a{font-size:.62rem;font-weight:700;font-stretch:78%;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);transition:color .3s var(--ease)}
.foot__links a:hover{color:var(--gold)}
.foot__fine{margin:clamp(1.4rem,3.5vh,2.2rem) 0 0;font-size:.58rem;font-weight:600;font-stretch:76%;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);opacity:.75}

/* =========================================================================
   REVEAL
   ========================================================================= */
.js .reveal{opacity:0;transform:translateY(1.6rem);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rise,.js .reveal{opacity:1;transform:none}
  /* hold the first still rather than cycling */
  .hero__bg img + img{opacity:0!important;animation:none!important}
}

/* billing block internals — dt/dd flow inline like real poster billing */
.block dl,.block dt,.block dd{display:inline;margin:0}
.block .pair{display:inline}

/* =========================================================================
   NOW PLAYING — the marquee band
   ========================================================================= */
.now{
  position:relative;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:
    radial-gradient(70% 200% at 50% 0%,color-mix(in srgb,var(--show) 26%,transparent),transparent 72%),
    linear-gradient(180deg,var(--ink-3),var(--ink));
}
.now__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(1.2rem,3vw,2.5rem);padding:clamp(1.6rem,4vh,2.6rem) 0;
}
.now__text{min-width:min(100%,20rem);flex:1 1 22rem}
.now__tag{
  display:flex;align-items:center;gap:.55rem;margin:0 0 .75rem;
  font-size:.64rem;font-weight:700;font-stretch:78%;letter-spacing:.28em;
  text-transform:uppercase;color:var(--show);filter:brightness(1.35);
}
.now__pulse{
  width:.5rem;height:.5rem;border-radius:50%;background:var(--show);
  filter:brightness(1.4);animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.now__title{
  font-family:var(--marquee);font-weight:900;text-transform:uppercase;line-height:.9;
  font-size:clamp(1.6rem,4.2vw,3rem);margin:0;letter-spacing:-.004em;
}
.now__meta{
  margin:.8rem 0 0;font-size:.66rem;font-weight:700;font-stretch:78%;
  letter-spacing:.19em;text-transform:uppercase;color:var(--dim);line-height:1.7;
}
.now__meta b{color:var(--paper);font-weight:700}
.now__cta{flex:0 0 auto}
.btn--ticket{margin-top:0;background:var(--show);color:var(--ink);border:0}
.btn--ticket:hover{background:var(--gold);color:var(--ink)}

/* =========================================================================
   PRESS — the critic pull-quote
   ========================================================================= */
.press{padding:clamp(2.5rem,7vh,5rem) 0;border-top:1px solid var(--rule)}
.press__item{max-width:52rem;margin-inline:auto;text-align:center}
.press__item + .press__item{
  margin-top:clamp(2rem,5vh,3.2rem);padding-top:clamp(2rem,5vh,3.2rem);
  border-top:1px solid var(--rule);
}
.press__stars{color:var(--gold);font-size:.9rem;letter-spacing:.35em;margin:0 0 1.2rem}
.press__quote{
  font-family:var(--marquee);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.4rem,3.6vw,2.6rem);line-height:1.02;letter-spacing:-.004em;
  margin:0;color:var(--paper);text-wrap:balance;
}
.press__attr{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem .9rem;
  margin:1.4rem 0 0;font-size:.64rem;font-weight:700;font-stretch:78%;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
}
.press__attr b{color:var(--gold);font-weight:700}
.press__attr a{color:var(--dim);border-bottom:1px solid var(--rule-hi);transition:color .3s var(--ease)}
.press__attr a:hover{color:var(--gold)}

/* cast sits above the creative team in the billing block */
.block__cast{display:block;margin-bottom:1.1rem;padding-bottom:1rem;border-bottom:1px solid var(--rule)}
.block__cast .name{color:var(--paper)}
.block__cast .role{color:var(--faint)}

/* teaser panel on a production page — grows with its text, never clipped */
.teaser-band{
  display:grid;place-items:center;text-align:center;
  min-height:clamp(10rem,26vh,16rem);padding:clamp(1.6rem,4vh,2.6rem) 0;
  margin-bottom:clamp(1.5rem,4vh,3rem);
  border:1px solid color-mix(in srgb,var(--show) 60%,transparent);
  background:
    radial-gradient(70% 120% at 50% 0%,color-mix(in srgb,var(--show) 28%,transparent),transparent 70%),
    linear-gradient(170deg,var(--ink-3),var(--ink) 70%);
}

/* a nomination is never dressed as a win */
.card__badge--nominee{
  background:transparent;color:var(--gold);
  border:1px solid var(--gold);padding:.3rem .55rem;
}
.pawards li{display:flex;flex-wrap:wrap;gap:.3rem .55rem;align-items:baseline}
.pawards li.is-nominee{background:transparent;color:var(--gold);border:1px solid var(--gold)}
.pawards .cat{opacity:.78;font-weight:600}

/* =========================================================================
   PHONES
   ========================================================================= */
@media (max-width:34rem){
  /* nav links need a real tap target, not a 15px sliver */
  .nav__links{gap:1rem}
  .nav__links a{padding:1.05rem 0 .95rem;font-size:.66rem;letter-spacing:.16em}
  .nav__links a::after{bottom:.7rem}
  .nav{padding-block:.35rem}
  .nav__home{display:inline-block;padding:.9rem 0}

  /* the star separators dangle at the end of wrapped lines */
  .hero__strip{gap:.25rem 0;flex-direction:column;align-items:flex-start}
  .hero__strip i{display:none}

  /* two-up cards: scale the plate down so titles still fit */
  .card__title{font-size:1.02rem;line-height:.92}
  .card__plate{padding:.7rem .6rem .8rem}
  .card__year{font-size:.54rem;letter-spacing:.2em;margin-bottom:.3rem}
  .card__venue{font-size:.53rem;letter-spacing:.1em;margin-top:.35rem}
  .card__badge{font-size:.5rem;letter-spacing:.12em;padding:.28rem .42rem}
  .teaser{padding:.9rem .55rem}
  .teaser__tag{font-size:.5rem;letter-spacing:.18em;margin-bottom:.6rem}
  .teaser__title{font-size:1.05rem}
  .teaser__rule{margin:.7rem auto;width:1.6rem}
  .teaser__note{font-size:.5rem;letter-spacing:.1em;line-height:1.55}

  /* footer links are navigation too */
  .foot__links{gap:.9rem 1.1rem}
  .foot__links a{padding:1rem 0}

  /* the billing block is set tight; give it a touch more air to read */
  .block{font-size:.72rem;line-height:1.95;letter-spacing:.07em}
}

/* award source note + link */
.pawards__note{
  margin:.8rem 0 0;max-width:44rem;
  font-size:.66rem;font-weight:600;font-stretch:80%;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);line-height:1.7;
}
.pawards__note a{color:var(--gold);border-bottom:1px solid rgba(255,194,74,.4)}
.pawards__note a:hover{border-bottom-color:var(--gold)}

/* =========================================================================
   LIGHTBOX
   Each gallery shot is a real link to the full-size file, so without JS a
   click still opens the photograph. JS upgrades that into a viewer.
   ========================================================================= */
.gallery .shot{display:block;cursor:zoom-in;position:relative}
.gallery .shot::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .35s var(--ease);
}
.gallery .shot:hover::after{box-shadow:inset 0 0 0 1px var(--show)}

.lb{
  border:0;padding:0;margin:0;max-width:100vw;max-height:100vh;
  width:100vw;height:100svh;background:transparent;color:var(--paper);
  overflow:hidden;
}
.lb::backdrop{background:rgba(6,5,8,.94)}
.lb__stage{
  width:100%;height:100%;display:grid;place-items:center;
  padding:clamp(3rem,7vh,4.5rem) clamp(1rem,6vw,5rem);
}
.lb__img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.lb.is-loading .lb__img{opacity:.35}
.lb__img{transition:opacity .25s var(--ease)}

.lb__btn{
  position:absolute;z-index:2;background:transparent;border:0;color:var(--paper);
  font-family:var(--marquee);cursor:pointer;line-height:1;
  padding:.5rem .7rem;transition:color .25s var(--ease),opacity .25s var(--ease);
}
.lb__btn:hover{color:var(--gold)}
.lb__btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lb__close{top:.7rem;right:.9rem;font-size:2rem;font-weight:400}
.lb__nav{top:50%;transform:translateY(-50%);font-size:2.6rem;font-weight:600;opacity:.75}
.lb__nav:hover{opacity:1}
.lb__prev{left:.2rem}
.lb__next{right:.2rem}
.lb__count{
  position:absolute;left:0;right:0;bottom:1.1rem;text-align:center;margin:0;
  font-size:.66rem;font-weight:700;font-stretch:78%;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums;
}
.lb__count b{color:var(--gold);font-weight:700}
@media (max-width:34rem){
  .lb__nav{font-size:2rem}
  .lb__stage{padding:3.2rem .5rem 3rem}
}