/* ==========================================================================
   Ekiti All Stars Concert — design system
   Palette:  adire indigo ground, aso-oke gold, stage-light fuchsia/violet.
   Devices:  aso-oke stripe band, star mark, flyer stack.
   ========================================================================== */

:root{
  /* ground */
  --ink:#08060F;
  --deep:#100A22;
  --indigo:#180E36;
  --raise:#20143F;

  /* ink on ground */
  --chalk:#F4EFE6;
  --muted:rgba(244,239,230,.62);
  /* .58 keeps these small labels above the 4.5:1 contrast minimum */
  --faint:rgba(244,239,230,.58);
  --line:rgba(244,239,230,.13);
  --line-strong:rgba(244,239,230,.26);

  /* accents */
  --gold:#F5C451;
  --brass:#C98A2E;
  --fuchsia:#FF2E86;
  --violet:#7A2BFF;
  --live:#31D391;

  /* type */
  --ff-display:'Unbounded','Arial Black',system-ui,sans-serif;
  --ff-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-hero:clamp(2.1rem,6vw,5.3rem);
  --fs-mega:clamp(2.6rem,8vw,6rem);
  --fs-h2:clamp(2rem,4.6vw,3.5rem);
  --fs-h3:clamp(1.25rem,2vw,1.6rem);
  --fs-lg:1.0625rem;
  --fs-base:1rem;
  --fs-sm:.875rem;
  --fs-xs:.78rem;

  /* space + shape */
  --head-h:74px;
  --pad:clamp(20px,5vw,64px);
  --maxw:1440px;
  --gap:clamp(20px,3vw,36px);
  /* the run between sections; headings are large, so they need the room */
  --sec-y:clamp(104px,11vw,164px);
  /* the whole page is square-cornered */
  --r-sm:0;
  --r-md:0;
  --r-lg:0;

  --grain: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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* a nav jump stops below the sticky header instead of under it */
:target,section[id],div[id]{scroll-margin-top:calc(var(--head-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--ff-body);
  font-size:var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--ff-display);font-weight:800;line-height:.94;letter-spacing:-.02em;margin:0}
p,figure{margin:0}

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

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:12px;z-index:200;background:var(--gold);color:#1A1000;padding:10px 16px;border-radius:var(--r-sm);font-weight:700}

/* --------------------------------------------------------------------------
   Shared devices
   -------------------------------------------------------------------------- */

/* aso-oke stripe: woven gold / fuchsia / chalk bands — our only divider */
.stripe{
  height:7px;
  background:
    repeating-linear-gradient(90deg,
      var(--gold) 0 26px, transparent 26px 34px,
      var(--fuchsia) 34px 44px, transparent 44px 54px,
      var(--chalk) 54px 58px, transparent 58px 78px);
  opacity:.9;
}

/* dotted square: a punched field of dots, fading off along one diagonal. It
   is placed inline per section, the same way the orbs are, because where it
   sits is a per-section decision. --fade turns the direction it fades in. */
.dots{
  position:absolute;z-index:0;pointer-events:none;
  --fade:200deg;
  background-image:radial-gradient(rgba(244,239,230,.30) 1.1px,transparent 1.2px);
  background-size:15px 15px;
  -webkit-mask-image:linear-gradient(var(--fade),#000 6%,transparent 86%);
          mask-image:linear-gradient(var(--fade),#000 6%,transparent 86%);
}
.dots--tight{
  background-image:radial-gradient(rgba(244,239,230,.42) 1.2px,transparent 1.3px);
  background-size:10px 10px;
}
/* punched in ink, for the one band that is bright */
.dots--ink{background-image:radial-gradient(rgba(16,6,23,.30) 1.2px,transparent 1.3px)}
@media (max-width:700px){.dots{opacity:.65;transform:scale(.8);transform-origin:inherit}}

/* image placeholder frame — drop an <img> inside and the label disappears */
.ph{
  position:relative;overflow:hidden;
  border-radius:var(--r-md);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255,46,134,.42), transparent 60%),
    radial-gradient(110% 100% at 100% 100%, rgba(122,43,255,.48), transparent 62%),
    linear-gradient(160deg,#1E1140,#0B0718 70%);
  border:1px solid var(--line);
  display:block;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);opacity:.22;mix-blend-mode:overlay;
}
.ph::after{
  content:attr(data-ph);
  position:absolute;left:14px;bottom:12px;right:14px;
  font-size:var(--fs-xs);letter-spacing:.02em;
  color:rgba(244,239,230,.66);
}
.ph:has(img)::after,.ph:has(img)::before{display:none}
.ph img{width:100%;height:100%;object-fit:cover}

.heading{max-width:22ch}
.lede{color:var(--muted);max-width:62ch;font-size:var(--fs-lg);line-height:1.65}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:0;border:1px solid transparent;
  font-weight:700;font-size:var(--fs-sm);letter-spacing:.01em;
  white-space:nowrap;                    /* a label on two lines is a bug */
  cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn-gold{background:var(--gold);color:#1B1200}
.btn-gold:hover{background:#FFD877}
.btn-line{border-color:var(--line-strong);color:var(--chalk)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:11px 20px}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(8,6,15,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background-color .25s ease;
}
.site-head.is-stuck{border-bottom-color:var(--line);background:rgba(8,6,15,.94)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}

.mark{display:flex;align-items:center;gap:11px;padding-block:6px;font-family:var(--ff-display);font-weight:800;font-size:.95rem;letter-spacing:-.01em}
.mark-logo{
  width:26px;height:auto;flex:none;
  filter:drop-shadow(0 3px 10px rgba(245,196,81,.34));
}

.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:var(--fs-sm);color:var(--muted);transition:color .16s ease}
.nav a:hover{color:var(--chalk)}
.head-cta{display:flex;align-items:center;gap:14px}

.burger{
  display:none;width:44px;height:40px;background:none;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);cursor:pointer;padding:0;place-items:center;
}
.burger i{display:block;width:18px;height:2px;background:var(--chalk);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--chalk)}
.burger i::before{top:-6px}
.burger i::after{top:6px}

/* The drawer hangs off the bottom of the header rather than sitting in the
   flow, so opening it lays the panel over the page instead of pushing the
   hero down. It animates its own height open and closed. */
/* .site-head .drawer, not .drawer: the .glass rule further down sets
   position:relative and would otherwise win on source order, putting the
   panel back in the flow and pushing the hero down as it opens. */
.site-head .drawer{
  position:absolute;top:100%;left:0;right:0;z-index:5;
  /* nearly solid: .glass alone let the hero read straight through the menu */
  background:linear-gradient(180deg,rgba(14,9,30,.985),rgba(9,6,20,.99));
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.drawer{
  border-top:1px solid var(--line);
  box-shadow:0 24px 40px -28px rgba(0,0,0,.95);
  display:grid;grid-template-rows:0fr;
  opacity:0;visibility:hidden;
  transition:grid-template-rows .32s cubic-bezier(.2,.7,.25,1),
             opacity .2s ease,
             visibility 0s linear .32s;
}
.drawer.is-open{
  grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .32s cubic-bezier(.2,.7,.25,1),
             opacity .2s ease,
             visibility 0s;
}
/* the row that actually collapses; it must be allowed to go to zero */
.drawer > .wrap{min-height:0;overflow:hidden}
.drawer a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-family:var(--ff-display);font-weight:600}
.drawer a:last-child{border-bottom:0}
/* The Get Ready button lives in the panel below 1040px and in the bar above
   it. Scoped to .drawer .drawer-ticket so it outranks the .drawer a rule. */
.drawer .drawer-ticket{display:none;margin:18px 0 26px;justify-content:center}
@media (max-width:1040px){
  .head-cta .head-ticket{display:none}
  .drawer .drawer-ticket{display:flex}
}

/* the bars fold into a cross while the panel is open */
.burger i,
.burger i::before,
.burger i::after{transition:transform .28s cubic-bezier(.2,.7,.25,1),opacity .18s ease}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

@media (prefers-reduced-motion:reduce){
  .drawer,.burger i,.burger i::before,.burger i::after{transition:none}
}

/* six nav items plus two buttons stop fitting well before 1024 */
@media (max-width:1040px){
  .nav{display:none}
  .head-cta .btn-line{display:none}
  .burger{display:grid}
}
@media (max-width:560px){
  :root{--head-h:64px}
  /* the full name is long; it has to give ground to the buttons beside it */
  .head-in .mark{font-size:.86rem;white-space:nowrap;gap:9px}
  .mark-logo{width:22px}
  .head-in{height:64px;gap:10px}
  .head-cta{gap:8px}
  .head-cta .btn-gold{padding:10px 13px}
  /* the footer has the room to set it on two lines */
  .foot-cols .mark{white-space:normal}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* The hero is sized to sit inside one screenful, under the sticky header,
   and its content is centred both ways. */
/* The lockup takes the middle of the screen and the event bar is pushed to
   the very bottom edge, so the bar reads as the floor of the hero. */
.hero{
  position:relative;overflow:hidden;
  /* pulled up under the bar so the film runs behind it — the bar carries no
     ground of its own here, and the padding keeps the type clear of it */
  margin-top:calc(var(--head-h) * -1);
  min-height:100svh;
  display:flex;flex-direction:column;
  padding-block:calc(var(--head-h) + clamp(24px,4vw,40px)) 0;
}
.hero-in{display:flex;flex-direction:column;flex:1}
/* pushed down so the lockup sits a little above the event bar rather than
   floating in the middle of the screen */
.hero-type{margin-top:auto}
.eventbar{margin-top:clamp(28px,5vh,64px)}

/* Everything under the type: the film, and the scrim over it. The scrim is
   its own element so its strength never depends on what the film is doing. */
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* the film. main.js gives it a source, and only where it is worth the bytes */
.hero-film{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1.4s ease;
}
.hero-film.is-on{opacity:.62}
/* the poster frame stands in until there are frames of the film to show, and
   for anyone the film is never fetched for */
.hero-film{opacity:.5}
.hero-film:not(.is-on){transition:opacity .5s ease}

/* one scrim, straight down the page, so the centred lockup stays readable */
.hero-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 50% 45%, rgba(8,6,15,.72), transparent 78%),
    linear-gradient(180deg,rgba(8,6,15,.62),rgba(8,6,15,.30) 42%,var(--ink) 97%);
}
@media (prefers-reduced-motion:reduce){.hero-film{transition:none}}

.hero-glow{
  position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:0;pointer-events:none;
  background:
    radial-gradient(45% 40% at 22% 12%, rgba(255,46,134,.34), transparent 70%),
    radial-gradient(40% 44% at 82% 4%, rgba(122,43,255,.40), transparent 70%),
    radial-gradient(60% 30% at 50% 74%, rgba(245,196,81,.14), transparent 72%);
}
.hero-in{position:relative;z-index:1}

.hero-type{position:relative;z-index:2;text-align:center;max-width:1000px;margin-inline:auto}

.hero-type h1{font-size:var(--fs-hero);letter-spacing:-.045em;text-transform:uppercase}
/* EKITI / ALL STARS / CONCERT — one word to a line, at every width */
.hero-type h1 .l1,
.hero-type h1 .l2,
.hero-type h1 .l3{display:block;white-space:nowrap}
.hero-type h1 .l2{
  color:transparent;
  -webkit-text-stroke:2px var(--gold);
  text-shadow:0 0 44px rgba(245,196,81,.32);
}
.hero-type h1 .l3{color:var(--gold)}
.hero-year{
  display:inline-block;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(.8rem,1.4vw,1rem);color:var(--fuchsia);
  vertical-align:super;letter-spacing:.06em;
}

/* Archivo carries a true italic; the display face would only be slanted */
.host-name,.host-inline{
  font-family:var(--ff-body);font-style:italic;font-weight:600;
  color:var(--gold);letter-spacing:-.005em;
}
.host-name{font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.2;display:block}
.act .host-name{font-size:1.15rem;display:inline}

/* --------------------------------------------------------------------------
   Flyer stack
   Both Chapter 12 flyers, on screen together. One sits forward and lit, the
   other stands behind it at an angle, and every few seconds they trade
   places — the front card drops back as the other swings up past it.
   -------------------------------------------------------------------------- */
.flyers{
  --fw:60%;
  position:relative;width:100%;max-width:520px;margin-inline:auto;
  aspect-ratio:1/1.04;
  perspective:1200px;
}

/* the punched dot field the stack stands on */
.flyers-grid{
  position:absolute;right:-5%;bottom:-3%;left:16%;height:54%;z-index:0;
  background-image:radial-gradient(rgba(244,239,230,.34) 1.1px,transparent 1.2px);
  background-size:15px 15px;
  -webkit-mask-image:linear-gradient(212deg,transparent 42%,#000 100%);
          mask-image:linear-gradient(212deg,transparent 42%,#000 100%);
}

.flyer{
  position:absolute;top:50%;left:50%;width:var(--fw);margin:0;
  border:1px solid var(--line);background:var(--indigo);
  transform-origin:50% 60%;
  /* the swap runs every two seconds, so the move has to land well inside it */
  transition:transform .62s cubic-bezier(.55,.03,.2,1),
             filter .55s ease,box-shadow .55s ease;
  will-change:transform;
}
.flyer img{width:100%;height:auto}
/* the light only falls on whichever card is in front */
.flyer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(148deg,rgba(255,255,255,.22),transparent 36%);
  opacity:0;transition:opacity .8s ease;
}

.flyer.is-front{
  transform:translate3d(-78%,-53%,0) rotate(-3.4deg);
  z-index:3;filter:none;
  box-shadow:0 44px 74px -34px rgba(0,0,0,.95),0 0 0 1px rgba(245,196,81,.20);
  /* the card coming forward waits a beat, so the two do not cross as one */
  transition-delay:.09s;
}
.flyer.is-front::after{opacity:1}

.flyer.is-back{
  transform:translate3d(-18%,-44%,0) rotate(4.2deg) scale(.9);
  z-index:2;cursor:pointer;
  filter:saturate(.88) brightness(.7);
  box-shadow:0 30px 56px -34px rgba(0,0,0,.9);
}
.flyer.is-back:hover{filter:saturate(.95) brightness(.86)}

/* the date seal, stamped where the two cards meet */
.seal{
  position:absolute;right:-3%;top:4%;z-index:4;
  width:clamp(84px,23%,132px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(32,20,63,.96),rgba(8,6,15,.97));
  border:1px solid rgba(245,196,81,.42);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.95);
}
.seal-ring{
  position:absolute;inset:0;width:100%;height:100%;
  animation:sealSpin 26s linear infinite;
}
.seal-ring text{
  font-family:var(--ff-body);font-weight:600;font-size:8.1px;
  letter-spacing:.02em;fill:var(--gold);text-transform:uppercase;
}
.seal-date{
  font-family:var(--ff-display);font-weight:800;
  font-size:clamp(1.1rem,3.6vw,1.5rem);line-height:.92;text-align:center;
}
.seal-date i{
  display:block;font-style:normal;font-family:var(--ff-body);font-weight:600;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-top:5px;
}
@keyframes sealSpin{to{transform:rotate(360deg)}}

@media (max-width:940px){.flyers{margin-top:8px}}
@media (max-width:560px){
  /* the cards spread a little wider and sit tighter, so both still read */
  .flyers{--fw:66%;aspect-ratio:1/1.08}
  .flyer.is-front{transform:translate3d(-74%,-53%,0) rotate(-3.4deg)}
  .flyer.is-back{transform:translate3d(-16%,-44%,0) rotate(4.2deg) scale(.9)}
}
@media (prefers-reduced-motion:reduce){
  .flyer{transition:none;transition-delay:0s}
  .seal-ring{animation:none}
}


.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(20px,2.6vw,28px)}

/* countdown */
.count{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(22px,3vw,32px);max-width:640px;margin-inline:auto}
.count-cell{
  min-width:104px;flex:1 1 104px;padding:16px 18px 14px;
  background:linear-gradient(160deg,rgba(32,20,63,.9),rgba(16,10,34,.9));
  border:1px solid var(--line);border-radius:var(--r-md);
}
/* The hero artwork runs diagonal streaks behind this row. A translucent pane
   lets one read straight across all four cells as a single line, so the cells
   carry their own ground and skip the backdrop filter — the border, the rim
   and the inner light still read as glass. */
.count-cell.glass{
  background:
    linear-gradient(148deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 44%,rgba(255,255,255,.06)),
    linear-gradient(160deg,#241547,#120B28);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.count-num{font-family:var(--ff-display);font-weight:800;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1;font-variant-numeric:tabular-nums}
.count-lab{font-size:var(--fs-xs);color:var(--faint);margin-top:6px}
@media (max-width:560px){
  .count{display:grid;grid-template-columns:1fr 1fr}
  .count-cell{min-width:0}
}
.count.is-done .count-num{color:var(--gold)}

/* event bar */

.eventbar-in{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--deep);border:1px solid var(--line);border-bottom:0;overflow:hidden;
}
.eventbar-cell{padding:22px 24px;border-right:1px solid var(--line)}
.eventbar-cell:last-child{border-right:0}
.eventbar-k{font-size:var(--fs-xs);color:var(--faint);margin-bottom:6px}
.eventbar-v{font-family:var(--ff-display);font-weight:600;font-size:1rem;line-height:1.3}
@media (max-width:820px){
  .eventbar-in{grid-template-columns:1fr 1fr}
  .eventbar-cell:nth-child(2n){border-right:0}
  .eventbar-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .eventbar-cell{padding:18px 18px}
  .eventbar-v{font-size:.92rem}
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */
.sec{padding-block:var(--sec-y);position:relative}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(30px,4vw,52px)}
/* heading on its own line, then the copy with a way through beside it */
.sec-head--stack{display:block}
.sec-head--stack .heading{max-width:none;margin-bottom:18px}
.sec-head-body{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.sec-head-body .lede{flex:1 1 460px}
.sec-head-body .btn{flex:none}
.sec-head h2,
.sec-title{font-size:var(--fs-h2);text-transform:uppercase}
/* headings outside a .sec-head still need the run to their own content */
.sec-title{margin-bottom:clamp(18px,2.4vw,24px)}
.sec-title em{font-style:normal;color:var(--gold)}
.sec-head h2 em{font-style:normal;color:var(--gold)}
.sec--alt{background:var(--deep)}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about-grid{display:grid;grid-template-columns:1.15fr minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center;justify-items:center}
@media (max-width:940px){.about-grid{grid-template-columns:1fr}}
.about-copy p + p{margin-top:18px}
.about-stats{display:flex;flex-wrap:wrap;gap:32px;margin-top:34px}
.about-stat b{display:block;font-family:var(--ff-display);font-weight:800;font-size:1.9rem;color:var(--gold);line-height:1}
.about-stat span{font-size:var(--fs-sm);color:var(--muted)}
/* --------------------------------------------------------------------------
   Line-up
   -------------------------------------------------------------------------- */
/* A rail scrolls on its own and answers a drag or a swipe. It is a real
   scroll container so touch gets the browser's own momentum; the scrollbar is
   hidden because the movement already says it moves. */
.rail{
  overflow-x:auto;overflow-y:hidden;
  /* the page scrolls smoothly, a rail must not: it is nudged a fraction of a
     pixel per frame, and smooth behaviour would restart an animation on every
     write and leave the slower rails standing still */
  scroll-behavior:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  /* not pan-x: that swallows the vertical swipe and the page will not
     scroll when a finger lands on a rail. auto lets the browser pick the
     axis from the gesture, so sideways drags the rail and up scrolls on. */
  touch-action:auto;overscroll-behavior-x:contain;
  padding-bottom:6px;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-live{cursor:grab}
.rail.is-dragging{cursor:grabbing;user-select:none}
.rail.is-dragging *{pointer-events:none}
.rail-track{display:flex;width:max-content}

/* the trailing margin (rather than a gap) keeps the -50% loop exact */
.act{flex:0 0 clamp(210px,24vw,290px);margin-right:18px;scroll-snap-align:start}
.act .ph{aspect-ratio:4/5;margin-bottom:14px}
.act h3{font-size:1.15rem;font-weight:600}
.act p{font-size:var(--fs-sm);color:var(--muted);margin-top:4px}

/* --------------------------------------------------------------------------
   The team, on the Carnival Edition page
   One face — the host — and the rest as names. A name set this large in the
   display face carries as much weight as a photograph would, and it does not
   go stale the way a placeholder portrait does.
   -------------------------------------------------------------------------- */
.team{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);align-items:center;
}
.team-host{max-width:340px;width:100%}
.team-host .ph{aspect-ratio:4/5}

.team-names{list-style:none;margin:0;padding:0;counter-reset:none}
.team-row{
  display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);
  padding:clamp(14px,1.8vw,22px) 0;
  border-bottom:1px dotted rgba(244,239,230,.24);
  transition:padding-left .4s cubic-bezier(.2,.7,.25,1),border-color .3s ease;
}
.team-row:first-child{border-top:1px dotted rgba(244,239,230,.24)}
.team-row:hover{padding-left:clamp(8px,1.4vw,18px);border-color:rgba(245,196,81,.5)}

.team-no{
  flex:none;font-family:var(--ff-display);font-weight:600;
  font-size:var(--fs-xs);letter-spacing:.1em;color:var(--faint);
  transition:color .3s ease;
}
.team-row:hover .team-no{color:var(--gold)}

.team-name{
  font-family:var(--ff-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.25rem,3vw,2.35rem);line-height:1;letter-spacing:-.03em;
  transition:color .3s ease;
}
.team-row:hover .team-name{color:var(--gold)}

/* the button belongs to the names, so it sits under them */
.team-side{display:flex;flex-direction:column;align-items:flex-start}
.team-cta{margin-top:clamp(20px,2.6vw,32px)}

@media (max-width:820px){
  .team{grid-template-columns:1fr;gap:clamp(22px,4vw,32px)}
  .team-host{margin-inline:auto}
  .team-side{align-items:stretch}
  .team-cta{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .team-row{transition:none}
  .team-row:hover{padding-left:0}
}

/* --------------------------------------------------------------------------
   The sponsors panel
   The names carry the section, so they are set in chalk rather than muted,
   and the ask sits underneath the list it is asking to join.
   -------------------------------------------------------------------------- */
.sponsors{
  position:relative;overflow:hidden;
  padding:clamp(24px,3.4vw,54px) clamp(20px,3vw,48px) clamp(28px,3.4vw,46px);
  border-radius:var(--r-md);
}
/* the rail runs on, so its ends are faded rather than chopped */
.sponsors .rail--logos{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}

.sponsors-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,52px);align-items:end;
  margin-bottom:clamp(30px,4vw,52px);
}
.sponsors-title{
  font-size:clamp(2rem,4.4vw,3.4rem);text-transform:uppercase;
  letter-spacing:-.035em;line-height:.96;
}
/* the second line is drawn rather than filled, like the hero lockup */
.sponsors-title span{
  display:block;
  color:transparent;-webkit-text-stroke:2px var(--fuchsia);
  text-shadow:0 0 38px rgba(255,46,134,.34);
}
.sponsors-head .lede{font-size:var(--fs-sm);line-height:1.72;max-width:52ch}

.sponsors-cta{
  display:flex;justify-content:center;
  margin-top:clamp(28px,3.6vw,44px);
}
.btn-arrow{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:860px){
  .sponsors-head{grid-template-columns:1fr;align-items:start;gap:18px}
  .sponsors-head .lede{max-width:none}
}

/* --------------------------------------------------------------------------
   The billboard
   The line-up on the home page: three cards on one side, the pitch on the
   other, both inside a single raised panel. Three is the whole cast — a
   fourth would break the row before the panel ran out of room.
   -------------------------------------------------------------------------- */
.billboard{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:clamp(26px,3.6vw,56px);align-items:center;
  padding:clamp(22px,3vw,46px);
}

.cast-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(9px,1vw,15px)}

/* one portrait rather than a row of them: the picture takes less of the panel,
   and the copy is given a wider measure so it holds the rest of it */
.billboard--host{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
.billboard--host .cast-row{grid-template-columns:minmax(0,1fr)}
.billboard--host .billboard-title{font-size:clamp(2.1rem,4vw,3.6rem)}
.billboard--host .billboard-copy .lede{font-size:var(--fs-base);max-width:56ch}

/* a column, so the plates line up along the bottom however many lines the
   roles happen to run to */
.cast{
  display:flex;flex-direction:column;
  position:relative;margin:0;min-width:0;
  transition:transform .5s cubic-bezier(.2,.7,.25,1);
}
.cast .ph{aspect-ratio:4/5}
/* the frame's own label would sit under the name plate, so it moves to the top */
.cast .ph::after{top:12px;bottom:auto}
/* faces sit high in a portrait crop; the other two crops have their own centre */
.cast .ph img{object-position:center 16%}
.cast .cast-ph--lit img{object-position:center 46%}
.cast .cast-ph--trophy img{object-position:center 30%}
.cast:hover{transform:translateY(-7px)}

/* A breath of stage colour over every picture. They come from different
   places — a crowd shot, a product shot on blue, a portrait — and this is
   what makes them read as one row. */
.cast .ph::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(158deg,rgba(255,46,134,.13),transparent 46%,rgba(122,43,255,.20));
  display:block;opacity:1;mix-blend-mode:normal;
}

/* the name plate, printed over the foot of the picture */
/* The plate sits under the picture rather than over it. Printed on the
   photograph it was legible or not depending on what happened to be behind
   it; sitting below, it always reads, and the picture is never covered. */
.cast-cap{
  display:flex;flex-direction:column;justify-content:center;
  flex:1 1 auto;margin-top:10px;
  padding:clamp(12px,1.3vw,16px) clamp(13px,1.3vw,18px) clamp(13px,1.3vw,17px);
  border-radius:var(--r-sm);
}
.cast-name{
  display:block;font-family:var(--ff-body);font-style:italic;font-weight:600;
  color:var(--gold);letter-spacing:-.005em;line-height:1.15;
  font-size:clamp(.92rem,1.15vw,1.15rem);
}
.cast-role{
  display:block;margin-top:5px;font-size:var(--fs-xs);
  color:var(--muted);line-height:1.35;
}

/* ------------------------------------------------------------------ the pitch */
.billboard-copy{min-width:0}

.kicker{
  display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,1.8vw,20px);
  font-size:var(--fs-xs);letter-spacing:.20em;text-transform:uppercase;color:var(--faint);
}
.kicker::before{content:"";flex:none;width:clamp(28px,3vw,46px);height:1px;background:var(--gold)}

.billboard-title{
  font-size:clamp(2rem,3.5vw,3.2rem);text-transform:uppercase;
  letter-spacing:-.03em;margin-bottom:clamp(14px,1.8vw,20px);
}
/* the second line takes the stage-light gradient rather than flat gold */
.billboard-title span{
  display:block;
  background:linear-gradient(96deg,var(--fuchsia),#FF7A3C 48%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.billboard-copy .lede{font-size:var(--fs-sm);line-height:1.72;max-width:46ch}
.billboard-copy .lede + .lede{margin-top:14px}

.more{
  display:inline-flex;align-items:center;gap:16px;
  margin-top:clamp(20px,2.6vw,30px);
  font-weight:700;font-size:var(--fs-sm);letter-spacing:.01em;
}
.more-arrow{
  display:grid;place-items:center;flex:none;
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--chalk);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,
             transform .35s cubic-bezier(.2,.7,.25,1);
}
.more-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.more:hover{color:var(--gold)}
.more:hover .more-arrow{background:var(--gold);border-color:var(--gold);color:#1B1200;transform:translate(3px,-3px)}

@media (max-width:1040px){
  /* the pitch leads, the cast follows underneath */
  .billboard{grid-template-columns:1fr;gap:clamp(24px,4vw,34px)}
  .billboard-copy{order:-1}
  .billboard-copy .lede{max-width:none}
}
@media (max-width:560px){
  /* a phone gets the plate bigger, not smaller: it is the one place the
     names have to carry on their own */
  .cast-row{gap:8px}
  .cast .ph{aspect-ratio:4/5}
  .cast .ph::after{display:none}
  .cast-cap{padding:12px 13px 13px}
  .cast-name{font-size:1rem;line-height:1.25}
  .cast-role{font-size:.8rem;margin-top:5px}
  .more-arrow{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .cast,.more-arrow{transition:none}
  .cast:hover{transform:none}
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee{
  padding-block:clamp(26px,4vw,44px);
  border-block:1px solid var(--line);background:var(--ink);
}
.marquee-word{
  font-family:var(--ff-display);font-weight:800;text-transform:uppercase;
  font-size:var(--fs-mega);letter-spacing:-.03em;
  padding-inline:28px;white-space:nowrap;flex:none;
}
.marquee-word:nth-child(even){color:transparent;-webkit-text-stroke:1.4px var(--fuchsia)}
@media (max-width:600px){.marquee-word{padding-inline:16px}}

/* --------------------------------------------------------------------------
   Highlights
   -------------------------------------------------------------------------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.cards3{grid-template-columns:1fr}}

/* music · comedy · awards · and lots more */
.cards4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1150px){.cards4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards4{grid-template-columns:1fr}}
.cards4 .card{min-height:250px}
.card{
  padding:28px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--deep);
  min-height:230px;display:flex;flex-direction:column;justify-content:space-between;
}
.sec--alt .card{background:var(--indigo)}
.card--lit{background:linear-gradient(150deg,var(--fuchsia),var(--violet));border-color:transparent}
.sec--alt .card--lit{background:linear-gradient(150deg,var(--fuchsia),var(--violet))}
.card--lit p{color:rgba(255,255,255,.86)}
.card h3{font-size:var(--fs-h3);margin-bottom:12px}
.card p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.card-glyph{width:34px;height:34px;margin-bottom:20px;stroke:var(--gold);fill:none;stroke-width:1.5}
.card--lit .card-glyph{stroke:#fff}

/* --------------------------------------------------------------------------
   Schedule
   -------------------------------------------------------------------------- */
.sched{display:grid;grid-template-columns:.85fr 1.4fr;gap:clamp(28px,5vw,60px);align-items:start}
@media (max-width:940px){.sched{grid-template-columns:1fr}}

/* one night, so one chip instead of day tabs */
.day-chip{
  display:inline-block;margin-bottom:26px;
  padding:11px 20px;border-radius:999px;
  background:var(--gold);color:#1B1200;
  font-size:var(--fs-sm);font-weight:700;
}
.slot{display:grid;grid-template-columns:104px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.slot:first-child{border-top:1px solid var(--line)}
.slot-time{font-family:var(--ff-display);font-weight:600;font-size:.95rem;color:var(--gold);font-variant-numeric:tabular-nums}
.slot-title{font-weight:600;font-size:1.05rem}
.slot-desc{font-size:var(--fs-sm);color:var(--muted);margin-top:4px}
@media (max-width:560px){.slot{grid-template-columns:1fr;gap:6px}}

/* --------------------------------------------------------------------------
   Partners
   -------------------------------------------------------------------------- */
.tier-label{
  font-family:var(--ff-display);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  margin:0 0 14px;
}
.tier-label + .logos{margin-bottom:clamp(30px,4vw,46px)}

.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);overflow:hidden}
@media (max-width:900px){
  .logos{grid-template-columns:repeat(2,1fr)}
  /* Three names across two columns leaves the last one alone with a hole
     beside it. When the last cell lands in an odd position it is on its own
     row, so it takes the whole width and the block closes. */
  .logos > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:640px){.logos{grid-template-columns:1fr}}

/* the sponsor row is a rail, so its cells carry their own borders */
.rail--logos .rail-track{align-items:stretch}
.rail--logos .logo-cell{
  flex:0 0 clamp(200px,21vw,250px);
  margin-right:12px;border:1px solid var(--line);
}

.logo-cell{
  background:var(--deep);display:grid;place-items:center;padding:30px 18px;min-height:118px;
  font-family:var(--ff-display);font-weight:600;font-size:.86rem;line-height:1.35;
  color:var(--chalk);text-align:center;letter-spacing:-.005em;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.logo-cell:hover{color:var(--gold)}
.sec--alt .logo-cell{background:var(--indigo)}
.sponsors .logo-cell{background:rgba(8,6,15,.42);border:1px solid var(--line)}
.sponsors .logo-cell:hover{border-color:rgba(245,196,81,.4)}

.logo-cell--head{
  min-height:168px;padding:36px 26px;
  font-size:clamp(1rem,1.8vw,1.45rem);font-weight:800;color:var(--chalk);
  text-transform:uppercase;line-height:1.2;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(255,46,134,.20), transparent 62%),
    radial-gradient(120% 130% at 100% 100%, rgba(122,43,255,.26), transparent 64%),
    var(--indigo);
}
.sec--alt .logo-cell--head{
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(255,46,134,.20), transparent 62%),
    radial-gradient(120% 130% at 100% 100%, rgba(122,43,255,.26), transparent 64%),
    var(--raise);
}
.logo-cell--head:hover{color:#fff}
.logo-cell--more{color:var(--faint);font-style:italic;font-weight:400;font-family:var(--ff-body)}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
/* four tiles across, all the same shape, so the row closes cleanly */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gallery .ph{aspect-ratio:4/5;min-width:0}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.gallery .ph{aspect-ratio:1}}
.gallery-more{margin-top:clamp(22px,3vw,32px)}

/* the gallery page runs the same tiles, just more of them */
.gallery--page{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.gallery--page{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.gallery--page{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* --------------------------------------------------------------------------
   The photo wall, on the gallery page
   One tile a photograph, shuffled on every load. A landscape shot takes a
   double-wide tile and the grid packs the gaps behind it, so the wall reads
   as a wall rather than a spreadsheet.
   -------------------------------------------------------------------------- */
.mosaic{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-flow:dense;gap:10px;
}
@media (max-width:1100px){.mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

.shot{
  position:relative;padding:0;margin:0;overflow:hidden;min-width:0;
  aspect-ratio:4/5;cursor:zoom-in;
  background:var(--indigo);border:1px solid var(--line);border-radius:var(--r-md);
}
.shot--wide{grid-column:span 2;aspect-ratio:13/8}
@media (max-width:700px){.shot--wide{aspect-ratio:16/10}}

.shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.25,1),filter .5s ease;
}
.shot:hover img,.shot:focus-visible img{transform:scale(1.07);filter:brightness(1.12) saturate(1.1)}

.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,15,.62),transparent 36%);
  opacity:0;transition:opacity .4s ease;
}
.shot:hover::after,.shot:focus-visible::after{opacity:1}

.shot-no{
  position:absolute;left:12px;top:10px;z-index:2;
  font-family:var(--ff-display);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.06em;color:var(--chalk);
  opacity:0;transform:translateY(-6px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.25,1);
}
.shot:hover .shot-no,.shot:focus-visible .shot-no{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   The viewer
   -------------------------------------------------------------------------- */
[hidden]{display:none!important}
body.is-locked{overflow:hidden}

.lightbox{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;padding:clamp(16px,4vw,54px);
  opacity:0;transition:opacity .26s ease;
}
.lightbox.is-open{opacity:1}
.lb-shade{
  position:absolute;inset:0;cursor:zoom-out;
  background:rgba(4,3,9,.94);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.lb-img{
  position:relative;max-width:min(100%,1080px);max-height:80vh;
  border:1px solid var(--line-strong);
  box-shadow:0 44px 90px -40px #000;
  transform:scale(.97);transition:transform .32s cubic-bezier(.2,.7,.25,1);
}
.lightbox.is-open .lb-img{transform:none}

.lb-count{
  position:absolute;left:0;right:0;bottom:clamp(14px,3vw,26px);
  text-align:center;font-size:var(--fs-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
.lb-btn{
  position:absolute;display:grid;place-items:center;
  width:52px;height:52px;padding:0;
  background:rgba(244,239,230,.07);border:1px solid var(--line-strong);
  color:var(--chalk);font-size:1.6rem;line-height:1;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.lb-btn:hover{background:var(--gold);border-color:var(--gold);color:#1B1200}
.lb-close{top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);font-size:1.05rem}
.lb-prev{left:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%)}
/* the two side buttons keep their own centring under .glass */
.lb-btn.lb-prev,.lb-btn.lb-next{transform:translateY(-50%)}
.lb-next{right:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%)}
@media (max-width:620px){
  .lb-btn{width:44px;height:44px;font-size:1.3rem}
  .lb-img{max-height:70vh}
}
@media (prefers-reduced-motion:reduce){
  .lightbox,.lb-img,.shot img,.shot::after,.shot-no{transition:none}
  .shot:hover img{transform:none}
}

/* the bill, laid out rather than railed, on the Carnival Edition page */
.bill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.bill-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.bill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bill-grid .act{flex:none;margin-right:0}


/* --------------------------------------------------------------------------
   The film
   Sits under the title on the Chapter 12 page. Nothing of YouTube is loaded
   until it is pressed: until then it is a still, a gold ring of type turning
   round a play disc. There are two cuts of it — a landscape one for a desktop
   and a vertical one for a phone — and only the one that suits the screen is
   ever fetched.
   -------------------------------------------------------------------------- */
.film{
  position:relative;overflow:hidden;isolation:isolate;
  width:100%;max-width:760px;aspect-ratio:16/9;
  margin-top:clamp(26px,3.4vw,40px);
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--indigo),var(--deep));
  box-shadow:0 34px 70px -40px rgba(0,0,0,.95);
}
.film-shot{
  position:absolute;inset:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:0;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.25,1);
}
.film-shot.is-on{opacity:.62}
.film:hover .film-shot.is-on{opacity:.74;transform:scale(1.03)}
/* a wash, so the ring of type reads whatever the frame happens to be */
.film::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%,rgba(8,6,15,.62),rgba(8,6,15,.30) 70%,rgba(8,6,15,.66));
}

.film-go{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  width:100%;height:100%;padding:0;
  background:none;border:0;cursor:pointer;
}
.film-ring{
  position:absolute;width:clamp(112px,17vw,150px);height:clamp(112px,17vw,150px);
  animation:sealSpin 24s linear infinite;
}
.film-ring text{
  font-family:var(--ff-body);font-weight:600;font-size:9.4px;
  letter-spacing:.085em;fill:var(--gold);text-transform:uppercase;
}
.film-disc{
  position:relative;display:grid;place-items:center;
  width:clamp(52px,7vw,66px);aspect-ratio:1;border-radius:50%;
  background:rgba(244,239,230,.10);
  border:1px solid rgba(245,196,81,.5);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  transition:background-color .25s ease,transform .35s cubic-bezier(.2,.7,.25,1);
}
.film-disc svg{width:38%;fill:var(--gold);margin-left:8%}
.film-go:hover .film-disc,.film-go:focus-visible .film-disc{background:var(--gold);transform:scale(1.07)}
.film-go:hover .film-disc svg,.film-go:focus-visible .film-disc svg{fill:#1B1200}

/* once it is playing the frame is the player and nothing else */
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.film.is-live::after,.film.is-live .film-shot{display:none}

/* the phone gets the vertical cut, so the frame stands up with it */
@media (max-width:699px){
  .film{aspect-ratio:9/16;max-width:min(320px,78vw);margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  .film-ring{animation:none}
  .film-shot,.film-disc{transition:none}
  .film:hover .film-shot.is-on{transform:none}
}

/* --------------------------------------------------------------------------
   Chapters page
   -------------------------------------------------------------------------- */
.nav a.is-here{color:var(--gold)}
.nav a.is-here::after{transform:scaleX(1)}

.page-hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,100px) clamp(52px,7vw,92px)}
.crumb{font-size:var(--fs-sm);color:var(--faint);margin-bottom:clamp(16px,2.4vw,26px)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--gold)}
.crumb span{margin-inline:8px}

.page-title{font-size:var(--fs-mega);letter-spacing:-.045em;text-transform:uppercase}
.page-title .l1{display:block}
.page-title .l3{display:block;color:var(--gold)}
.chapter-stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:clamp(30px,4vw,44px)}

.chapters{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:none}
.chapter{
  display:grid;grid-template-columns:132px 1fr;gap:clamp(18px,3vw,34px);align-items:start;
  padding:26px 28px;background:var(--deep);
  border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color .25s ease,transform .35s cubic-bezier(.2,.7,.25,1);
}
.chapter:hover{border-color:var(--line-strong);transform:translateX(4px)}
.chapter--next{
  border-color:rgba(245,196,81,.44);
  background:
    radial-gradient(90% 160% at 0% 0%, rgba(245,196,81,.10), transparent 60%),
    linear-gradient(150deg,var(--indigo),var(--deep));
}

.chapter-no{
  display:flex;flex-direction:column;gap:2px;
  padding-right:clamp(14px,2vw,26px);border-right:1px solid var(--line);min-height:100%;
}
.chapter-no span{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.chapter-no b{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.1rem,4vw,3rem);line-height:1;color:var(--gold)}
.chapter--next .chapter-no b{color:var(--gold)}

/* nothing filled in yet — keep it to one quiet line */
.chapter--blank{padding:16px 28px;align-items:center;gap:clamp(14px,2.4vw,26px)}
.chapter--blank .chapter-no{align-items:baseline;flex-direction:row;gap:10px;min-height:0}
.chapter--blank .chapter-no b{font-size:1.5rem;color:var(--muted)}
.chapter--blank .chapter-body h3{margin-bottom:0}

.chapter-body h3{font-size:var(--fs-h3);font-weight:600;line-height:1.2;margin-bottom:10px}
.chapter-soon{font-family:var(--ff-body);font-weight:400;font-style:italic;font-size:1rem;color:var(--faint);letter-spacing:0}
.chapter-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--muted)}
.chapter-note{font-size:var(--fs-sm);color:var(--muted);margin-top:10px;max-width:62ch}

@media (max-width:760px){
  .chapter{grid-template-columns:1fr;gap:14px;padding:22px}
  .chapter-no{
    flex-direction:row;align-items:baseline;gap:10px;
    border-right:0;border-bottom:1px solid var(--line);padding:0 0 12px;min-height:0;
  }
  .chapter-no b{font-size:1.9rem}
  .chapter:hover{transform:none}
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-grid{display:grid;grid-template-columns:.8fr 1.3fr;gap:clamp(28px,5vw,60px);align-items:start}
@media (max-width:940px){.faq-grid{grid-template-columns:1fr}}
.qa{border-bottom:1px solid var(--line)}
.qa:first-child{border-top:1px solid var(--line)}
.qa-q{
  width:100%;display:flex;gap:20px;align-items:center;justify-content:space-between;
  padding:22px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-weight:600;font-size:1.02rem;transition:color .16s ease;
}
.qa-q:hover{color:var(--gold)}
.qa-sign{flex:none;width:26px;height:26px;position:relative}
.qa-sign::before,.qa-sign::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform .22s ease}
.qa-sign::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.qa-sign::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.qa.is-open .qa-sign::after{transform:translate(-50%,-50%) scaleY(0)}
.qa-a{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .36s cubic-bezier(.2,.7,.25,1)}
.qa.is-open .qa-a{grid-template-rows:1fr}
.qa-a p{min-height:0;padding:0 46px 24px 0;color:var(--muted);font-size:var(--fs-sm);line-height:1.68;max-width:66ch;
  opacity:0;transition:opacity .3s ease .04s}
.qa.is-open .qa-a p{opacity:1}
@media (prefers-reduced-motion:reduce){.qa-a,.qa-a p{transition:none}}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--fuchsia),#FF7A3C 52%,var(--gold))}
.cta > .wrap{position:relative;z-index:1}
.cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px;padding-block:clamp(48px,7vw,84px)}
.cta h2{font-size:var(--fs-h2);text-transform:uppercase;color:#100617;max-width:16ch}
.cta p{color:rgba(16,6,23,.80);margin-top:14px;max-width:44ch;font-weight:500}
.cta .btn{background:#0B0518;color:var(--chalk)}
.cta .btn:hover{background:#1B0D2E}

/* --------------------------------------------------------------------------
   Venue
   -------------------------------------------------------------------------- */
.venue-map{
  position:relative;aspect-ratio:21/9;margin-bottom:18px;
  border:1px solid var(--line);overflow:hidden;background:var(--indigo);
}
.venue-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.venue-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.venue-row p{font-size:var(--fs-sm);color:var(--muted)}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-foot{background:var(--deep);border-top:1px solid var(--line);padding-block:clamp(46px,6vw,72px) 30px}
.foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:44px}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr 1fr}}
.foot-cols h3{font-size:var(--fs-sm);font-weight:600;margin-bottom:16px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
/* padded out to a real tap target rather than a 15px line of text */
.foot-cols a{display:inline-block;padding-block:7px;font-size:var(--fs-sm);color:var(--muted)}
.foot-cols a:hover{color:var(--gold)}
/* the wordmark is a mark, not one of the links beneath it: it keeps the chalk
   rather than the muted grey, and does not answer a hover with the gold */
.foot-cols .mark,
.foot-cols .mark:hover{color:var(--chalk)}
.foot-blurb{font-size:var(--fs-sm);color:var(--muted);max-width:38ch;margin-top:16px}
/* one line, in the middle */
.foot-base{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;text-align:center;padding-top:26px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--faint)}

/* --------------------------------------------------------------------------
   Hero load — one orchestrated sequence; nothing else animates on scroll
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(22px);animation:rise .8s cubic-bezier(.2,.7,.25,1) forwards}
  .rise-1{animation-delay:.05s}
  .rise-2{animation-delay:.16s}
  .rise-3{animation-delay:.27s}
  .rise-4{animation-delay:.38s}
  .rise-5{animation-delay:.5s}
  @keyframes rise{to{opacity:1;transform:none}}
}


/* ==========================================================================
   Liquid glass
   One material, used only on surfaces that float above the page: the header,
   the countdown, the highlight cards and the mobile drawer. One span is
   injected into each by main.js: the rim that catches the bent light. Nothing
   on the page follows the pointer.
   ========================================================================== */

.glass{
  position:relative;
  background:linear-gradient(148deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 42%,rgba(255,255,255,.09));
  backdrop-filter:blur(20px) saturate(184%) brightness(1.04);
  -webkit-backdrop-filter:blur(20px) saturate(184%) brightness(1.04);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    /* the lit top edge, then the light that pools just under it */
    inset 1px 1px 0 rgba(255,255,255,.34),
    inset 0 2px 26px -10px rgba(255,255,255,.20),
    inset -1px -1px 2px rgba(255,255,255,.07),
    /* stage colour gathering in the bottom of the pane */
    inset 0 -26px 40px -28px rgba(122,43,255,.70),
    inset 0 -1px 0 rgba(245,196,81,.10),
    0 28px 58px -32px rgba(0,0,0,.94);
}
.sec--alt .card.glass{background:linear-gradient(148deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 44%,rgba(255,255,255,.06))}

/* the lead card keeps its stage colour, seen through the same material */
.card--lit.glass,
.sec--alt .card--lit.glass{
  background:linear-gradient(150deg,rgba(255,46,134,.62),rgba(122,43,255,.58));
  border-color:rgba(255,255,255,.22);
}

/* the light that slides across the surface */
/* the bent light caught on the edge */
.glass-rim{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;padding:1px;
  background:linear-gradient(125deg,
    rgba(255,255,255,.82),rgba(255,255,255,.10) 30%,
    transparent 52%,rgba(245,196,81,.28) 74%,rgba(245,196,81,.62));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.72;
}
.glass > *:not(.glass-rim):not(.dots){position:relative;z-index:1}

/* real refraction where the browser supports a backdrop displacement map */
@supports (backdrop-filter:url(#liquid)) or (-webkit-backdrop-filter:url(#liquid)){
  .glass{
    backdrop-filter:blur(14px) saturate(175%) url(#liquid);
    -webkit-backdrop-filter:blur(14px) saturate(175%) url(#liquid);
  }
}
.glass-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Surfaces that carry the material. Each is over a settled ground — never
   over the hero artwork, which is what used to set the countdown flickering. */
.billboard.glass{border-radius:var(--r-md)}

.cast-cap.glass{
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(6,4,12,.30) 44%,rgba(6,4,12,.44));
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  border-color:rgba(255,255,255,.20);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.28),
    inset 0 -14px 22px -18px rgba(122,43,255,.6),
    0 14px 26px -20px rgba(0,0,0,.9);
}

/* the arrow on See more, and the four buttons in the photo viewer */
.more-arrow.glass{border-color:rgba(255,255,255,.22)}
.more:hover .more-arrow.glass,
.more:focus-visible .more-arrow.glass{
  background:var(--gold);border-color:var(--gold);color:#1B1200;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.lb-btn.glass{position:absolute;background:linear-gradient(148deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 42%,rgba(255,255,255,.09))}
.lb-btn.glass:hover{
  background:var(--gold);border-color:var(--gold);color:#1B1200;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* The header is glass everywhere except over the hero, where it is nothing
   at all — the film runs behind the nav, and the scrim already keeps the
   links readable. It takes its ground the moment the hero is behind you. */
.site-head{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  backdrop-filter:blur(16px) saturate(165%);
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.site-head.is-clear{
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;border-bottom-color:transparent;
}
.site-head.is-stuck{
  background:linear-gradient(180deg,rgba(12,8,24,.82),rgba(8,6,15,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 40px -30px rgba(0,0,0,.95);
}

/* colour behind the glass, so there is something for it to bend */
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.42;pointer-events:none;z-index:0}
/* the orbs and the dot fields are the only things at z-index 0 */
.sec > .wrap{position:relative;z-index:1}
.orb--fuchsia{background:var(--fuchsia)}
.orb--violet{background:var(--violet)}
.orb--gold{background:var(--brass)}
.sec{overflow:hidden}
.sec > .wrap{position:relative;z-index:1}

/* ==========================================================================
   Motion
   ========================================================================== */

/* entrances: one short lift, staggered inside each group, run once */
/* Content lifts in as it reaches the fold and settles back out as it leaves,
   so arriving from the nav lands on movement rather than a finished page. */
.js .reveal{opacity:0;transform:translateY(16px)}
.reveal{
  transition:opacity .62s cubic-bezier(.2,.7,.25,1),transform .62s cubic-bezier(.2,.7,.25,1);
  transition-delay:calc(var(--i,0) * 65ms);
}
.reveal.is-in{opacity:1;transform:none}
/* going out is quicker and undelayed, or leaving a section feels sticky */
.js .reveal:not(.is-in){transition-duration:.34s;transition-delay:0s}

/* hover answers: nav, gallery, the gold button */
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.25,1);
}
.nav a{position:relative}
.nav a:hover::after{transform:scaleX(1)}

.gallery .ph{transition:transform .55s cubic-bezier(.2,.7,.25,1),filter .55s ease}
.gallery .ph:hover{transform:scale(1.035);filter:brightness(1.14) saturate(1.12);z-index:2}


.btn{position:relative;overflow:hidden;clip-path:inset(0)}
.btn-gold::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);
  transform:translateX(-125%);transition:transform .75s cubic-bezier(.3,.7,.2,1);
}
.btn-gold:hover::after{transform:translateX(125%)}

.act .ph{transition:transform .5s cubic-bezier(.2,.7,.25,1)}
.act:hover .ph{transform:translateY(-6px)}


/* ==========================================================================
   Reduced motion: keep the material, drop everything that moves on its own
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .reveal{transition:none}
  .gallery .ph,.act .ph,.chapter,.btn-gold::after{transition:none}
  .gallery .ph:hover,.act:hover .ph,.chapter:hover{transform:none}
}


/* ==========================================================================
   Tablet and phone
   The type scale is redefined at the root rather than component by component,
   so every heading, lede and label steps down together and the rhythm holds.
   ========================================================================== */

@media (max-width:1024px){
  :root{
    --fs-hero:clamp(1.95rem,7vw,3.7rem);
    --fs-mega:clamp(2rem,7vw,4rem);
    --fs-h2:clamp(1.7rem,4.6vw,2.7rem);
    --sec-y:clamp(92px,10vw,132px);
  }

}

@media (max-width:600px){
  :root{
    --fs-hero:clamp(1.5rem,7.6vw,2.2rem);
    --fs-mega:1.7rem;
    --fs-h2:clamp(1.5rem,6.6vw,2rem);
    --fs-h3:1.08rem;
    --fs-lg:.98rem;
    --fs-base:.95rem;
    --fs-sm:.84rem;
    --fs-xs:.72rem;
    --sec-y:100px;
    --gap:20px;
  }

  .btn{padding:13px 22px}
  .btn-sm{padding:10px 16px}

  /* hero */
  .hero{padding-block:calc(var(--head-h) + 20px) 0}
  .count{gap:8px}
  .count-cell{padding:13px 14px 11px}
  .count-num{font-size:1.7rem}
  .hero-actions{gap:10px}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .eventbar-cell{padding:15px 14px}
  .eventbar-v{font-size:.86rem}

  /* sections */
  .sec-head{margin-bottom:26px;gap:14px}
  .lede{max-width:none}

  /* about */
  .about-stats{gap:20px 26px;margin-top:26px}
  .about-stat b{font-size:1.5rem}

  /* the rails */
  .act{flex:0 0 62vw;margin-right:12px}
  .act h3{font-size:1.05rem}

  /* timeline */
  .day-chip{padding:9px 16px;margin-bottom:18px}
  .slot{padding:16px 0}

  /* partners */
  .logo-cell{padding:22px 12px;min-height:88px;font-size:.78rem}
  .logo-cell--head{min-height:112px;padding:26px 18px}

  /* gallery, questions, footer */
  .gallery{gap:8px}
  .qa-q{padding:18px 0;font-size:.96rem;gap:12px}
  .qa-a p{padding-right:24px}
  .foot-cols{gap:26px;margin-bottom:32px}
  .venue-row{gap:14px}
  .venue-row .btn{width:100%;justify-content:center}

  /* chapters page */
  .chapter-stats{gap:20px 26px}
  .chapter{padding:18px}
  .chapter--blank{padding:14px 18px}
}

/* the narrowest phones */
@media (max-width:380px){
  :root{--pad:14px}
  .act{flex:0 0 74vw}
  .count{grid-template-columns:1fr 1fr}
  /* the wordmark, the button and the burger all have to share ~290px here */
  .head-in{gap:8px}
  .head-in .mark{font-size:.78rem;gap:8px}
  .mark-logo{width:20px}
  .head-cta{gap:6px}
  .head-cta .btn-gold{font-size:.70rem;padding:9px 10px}
  .burger{width:38px}
}

/* --------------------------------------------------------------------------
   Short screens
   A landscape phone or a small laptop has the width for the hero but not the
   height, so the lockup and the countdown step down rather than push the
   event bar off the bottom.
   -------------------------------------------------------------------------- */
@media (max-height:760px) and (min-width:601px){
  :root{--fs-hero:clamp(1.9rem,4.6vw,3.4rem)}
  .hero{padding-block:calc(var(--head-h) + 20px) 0}
  .count{margin-top:18px}
  .count-cell{padding:12px 16px 10px}
  .count-num{font-size:clamp(1.6rem,3vw,2.2rem)}
  .hero-actions{margin-top:18px}
  .eventbar{margin-top:22px}
  .eventbar-cell{padding:14px 16px}
}
@media (max-height:640px) and (max-width:600px){
  :root{--fs-hero:clamp(1.4rem,6.4vw,1.9rem)}
  .count-num{font-size:1.4rem}
  .eventbar-cell{padding:12px 12px}
}
@media (max-width:700px){.venue-map{aspect-ratio:4/3}}