/* ============================================================
   One Long Table 2026 — CANONICAL production stylesheet (Stage 4)
   Approved visual language: white + event magenta/plum, Poppins
   display + Figtree body, curved surfaces, real photos.
   Mobile-first. Base = 375/430px. Breakpoints scale up.
   Paced: contained sections alternate with full-bleed moments.

   Single source of truth for visual tokens (:root below). Component
   styles are grouped by numbered section, matching the HTML section
   order and the JS behaviour owners, so future edits stay local to
   one section and never touch unrelated ones. Ported without visual
   change from the approved Stage 3 V2 composition.
   ============================================================ */

:root{
  --magenta:#911F66;
  --magenta-dark:#8F2165;
  --magenta-deep:#781950;
  --plum-ink:#1b1919;        /* Switch'D deepest near-black */
  --plum-ink-2:#262324;      /* Switch'D charcoal surface */
  --ink:#1a1216;
  --muted:#5c5560;
  --muted-2:#7a7280;
  --white:#ffffff;
  --pink-wash:#fbeef6;
  --pink-wash-2:#f7e2ef;
  --pink-line:#f2d9e8;
  --line:rgba(26,18,22,.12);
  --line-soft:rgba(26,18,22,.08);

  /* Paint Gods radius scale: sharper, quieter surfaces across the site. */
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:14px;
  --pill:999px;

  --shadow-soft:0 22px 55px -30px rgba(26,18,22,.45);
  --shadow-lift:0 14px 40px -22px rgba(138,26,93,.42);
  --shadow-photo:0 30px 70px -34px rgba(26,18,22,.55);

  --wrap:1200px;
  --wrap-wide:1360px;
  --section-y:clamp(3.2rem,9vw,6rem);

  --font-display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* semantic z-scale: rail < nav < to-top < drawer < lightbox < gallery */
  --z-rail:5; --z-nav:50; --z-totop:60; --z-drawer:80; --z-lightbox:100; --z-gallery:120;
}

*,*::before,*::after{box-sizing:border-box}
/* D1: sticky-nav-aware anchor landing so in-page jumps never clip a heading */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:var(--white);line-height:1.55;
  font-size:clamp(1rem,.96rem + .25vw,1.075rem);
  /* `hidden` makes body a vertical scroll container as a side effect, which
     breaks window.scrollY-based menu locking. `clip` prevents horizontal
     spill without taking ownership of vertical scrolling. */
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
ul,ol{margin:0;padding:0;list-style:none}
svg{fill:currentColor}
:focus-visible{outline:3px solid var(--magenta);outline-offset:2px;border-radius:6px}

h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:700;line-height:1.03;
  letter-spacing:-.02em;margin:0;text-wrap:balance;
}
p{margin:0;text-wrap:pretty}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,5vw,2.5rem)}
.wrap-wide{max-width:var(--wrap-wide)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--magenta);color:#fff;padding:.6rem 1rem;border-radius:0 0 var(--r-sm) 0;z-index:var(--z-gallery)}
.skip-link:focus{left:0}

/* ---------- shared primitives ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-body);font-weight:600;
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--magenta);
}
.kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.kicker-light{color:#fff}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:600;font-size:1rem;
  padding:.92rem 1.5rem;border-radius:var(--pill);border:2px solid transparent;
  cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  line-height:1;white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-lg{padding:1.05rem 1.75rem;font-size:1.05rem}
.btn-sm{padding:.62rem 1.15rem;font-size:.92rem}
.btn-block{width:100%}
.btn-primary{background:var(--magenta);color:#fff}
.btn-primary:hover{background:var(--magenta-dark);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--magenta);color:var(--magenta-dark);transform:translateY(-2px)}
.btn-inverse{background:#fff;color:var(--magenta-dark)}
.btn-inverse:hover{background:var(--pink-wash);transform:translateY(-2px)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn-glass{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.6);backdrop-filter:blur(6px)}
.btn-glass:hover{background:rgba(255,255,255,.28);border-color:#fff;transform:translateY(-2px)}
.btn-dark{background:var(--plum-ink);color:#fff}
.btn-dark:hover{background:var(--magenta-dark);transform:translateY(-2px)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-quiet:hover{border-color:var(--magenta);color:var(--magenta-dark)}

.ic{width:1.25rem;height:1.25rem;flex:none;fill:currentColor}
.ph-sprite{position:absolute;width:0;height:0;overflow:hidden}

.section-head{max-width:42rem}
.section-head .kicker{margin-bottom:.9rem}
.section-head h2{font-size:clamp(2rem,5.4vw,3.3rem);font-weight:800;letter-spacing:-.03em}
.section-head p{margin-top:1rem;color:var(--muted);font-size:clamp(1rem,1rem + .3vw,1.15rem);max-width:36rem}


/* ============================================================
   1. Announce banner — name + countdown + calendar (date lives in hero)
   ============================================================ */
.announce{position:sticky;top:0;z-index:calc(var(--z-nav) + 1);color:#fff;background:linear-gradient(105deg,var(--plum-ink),var(--magenta-deep) 58%,var(--magenta));box-shadow:inset 0 -1px rgba(255,255,255,.13)}
.announce .wrap{display:flex;align-items:center;gap:.58rem;padding-block:.52rem;min-height:48px}
.ann-icon{width:20px;height:20px;flex:none;color:#ffc5e7}.ann-mark{display:grid;gap:.08rem;line-height:1}.ann-mark b{font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.025em}.ann-mark>span{font-size:.57rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ann-countdown{display:flex;align-items:center;gap:.28rem;margin-left:auto;font-variant-numeric:tabular-nums}.ann-countdown>span{display:grid;justify-items:center;min-width:30px;gap:.08rem}.ann-countdown strong{font-family:var(--font-display);font-size:1rem;font-weight:800;line-height:1}.ann-countdown small{font-size:.49rem;font-weight:800;letter-spacing:.07em;line-height:1;text-transform:uppercase;color:rgba(255,255,255,.72)}.ann-countdown i{font-style:normal;font-family:var(--font-display);font-weight:700;opacity:.6}
@media(max-width:400px){.ann-mark>span{display:none}.ann-mark b{font-size:.65rem}.ann-countdown{gap:.18rem}.ann-countdown>span{min-width:27px}.ann-countdown strong{font-size:.9rem}}
/* the live countdown needs JS. Hide its numeric surfaces for genuine no-JS visitors so they
   never see a misleading all-zero "0 days" clock (the real date is stated in text throughout).
   <html> is flipped no-js -> js synchronously in <head> before paint, so JS-on users get them
   with no flash. */
.no-js .ann-countdown,.no-js .badge-days,.no-js .count-clock{display:none}

/* ============================================================
   2. Nav
   ============================================================ */
header.nav{position:sticky;top:48px;z-index:var(--z-nav);background:#fff;border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.52rem}.brand>span{display:grid;gap:2px;align-content:center}
.brand img{width:42px;height:42px;border-radius:50%;background:var(--pink-wash)}
/* The still lockup is painted beneath the GIF, so the brand mark never appears
   empty while the animated asset is fetching or decoding. */
.brand img.brand-animation{background:#911F66 url('assets/olt-logo.webp') center/cover no-repeat;object-fit:cover}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:clamp(1.08rem,3.65vw,1.28rem);letter-spacing:.025em;line-height:.94;text-transform:uppercase;display:block;white-space:nowrap}
.brand-sub{font-size:.61rem;color:var(--muted);font-weight:700;letter-spacing:.1em;line-height:1;text-transform:uppercase;margin:0;display:block}
.nav-links{display:none;align-items:center;gap:1.6rem}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:.95rem;color:var(--ink);transition:color .2s}
.nav-links a:hover{color:var(--magenta-dark)}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.nav-cta .btn-primary{display:none}
@media(min-width:560px){.nav-cta .btn-primary{display:inline-flex}}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;touch-action:manipulation}
/* Keep all three bars on the same centre line and move them with transforms only.
   The earlier top-positioned bars were rotating while offset, which can visibly jump on mobile compositors. */
.menu-btn span,.menu-btn span::before,.menu-btn span::after{content:"";display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative;transform-origin:50% 50%;backface-visibility:hidden;transition:transform .24s cubic-bezier(.16,1,.3,1),opacity .14s ease,background .14s ease}
/* Promote ONLY the two bars that actually rotate. Promoting the 20x2px parent
   <span> as well gave mobile compositors a layer far smaller than the arc the
   rotating children sweep, so the arms were re-rastered mid-transition and the
   X snapped into place instead of easing. The middle bar just fades, so it
   stays on the normal paint path. */
.menu-btn span{will-change:auto;transform:none}
.menu-btn span::before,.menu-btn span::after{position:absolute;top:0;left:0;will-change:transform}
.menu-btn span::before{transform:translate3d(0,-6px,0) rotate(0deg)}.menu-btn span::after{transform:translate3d(0,6px,0) rotate(0deg)}
.menu-btn[aria-expanded="true"] span{background:transparent}.menu-btn[aria-expanded="true"] span::before{transform:translate3d(0,0,0) rotate(45deg)}.menu-btn[aria-expanded="true"] span::after{transform:translate3d(0,0,0) rotate(-45deg)}
@media(min-width:1000px){.nav-links{display:flex}.menu-btn{display:none}.nav-cta .btn{padding:.62rem 1.15rem}}

/* Mobile drop-down menu. The stagger is intentional. Keep its own panel motion
   separate from the accelerated hamburger-to-close icon above. */
.mobile-menu{display:flex;position:absolute;top:100%;left:0;right:0;z-index:var(--z-drawer);flex-direction:column;gap:2px;padding:clamp(20px,4vw,28px) clamp(1.1rem,5vw,2rem) clamp(22px,5vw,32px);background:#fff;border-top:1px solid var(--line);box-shadow:0 16px 36px -10px rgba(20,18,14,.20);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scaleY(.985);transform-origin:top;transition:opacity .22s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s linear .3s}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.mobile-menu a{padding:13px 0;font-family:var(--font-display);font-weight:700;font-size:1.18rem;color:var(--ink);border-bottom:1px solid var(--line-soft)}
.mobile-menu .btn{margin-top:18px;color:#fff!important;border-bottom:none}
.mobile-menu-social{display:grid;gap:.55rem;padding-top:1rem;margin-top:.85rem;border-top:1px solid var(--line-soft)}
.mobile-menu-social>span{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.mobile-menu-social-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem}.mobile-menu-social-links{display:flex;gap:.55rem}.mobile-menu .mobile-menu-social-links a{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;color:var(--magenta-dark);background:var(--pink-wash);transition:transform .2s ease,background .2s ease}.mobile-menu .mobile-menu-social-links a:hover{transform:translateY(-2px);background:#fff}.mobile-menu-social svg{width:19px;height:19px}
/* Shared sponsorship-label grammar: deliberately small, lowercase and identical
   wherever a partner credit appears. */
.sponsorship-label{display:block;font-family:var(--font-body);font-size:.64rem;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.15}
/* Sponsor credit sits above a fixed-height navy Zelexis lockup, both flushed
   right so the credit reads as one deliberate block against the follow row. */
.mobile-menu-credit{display:grid;justify-items:end;gap:.3rem;max-width:11rem;margin:0;text-align:right;color:var(--muted-2)}
.mobile-menu .mobile-menu-credit a{display:block;padding:0;border:0;line-height:0;opacity:.92;transition:opacity .2s ease}
.mobile-menu .mobile-menu-credit a:hover{opacity:1}
.mobile-menu-credit img{height:18px;width:auto;display:block}
.mobile-menu>*{opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .2s cubic-bezier(.16,1,.3,1)}
.mobile-menu.open>*{opacity:1;transform:none;transition-duration:.28s}
.mobile-menu.open>*:nth-child(1){transition-delay:.04s}.mobile-menu.open>*:nth-child(2){transition-delay:.07s}.mobile-menu.open>*:nth-child(3){transition-delay:.10s}.mobile-menu.open>*:nth-child(4){transition-delay:.13s}.mobile-menu.open>*:nth-child(5){transition-delay:.16s}.mobile-menu.open>*:nth-child(6){transition-delay:.19s}.mobile-menu.open>*:nth-child(7){transition-delay:.22s}.mobile-menu.open>*:nth-child(8){transition-delay:.25s}.mobile-menu.open>*:nth-child(9){transition-delay:.28s}
@media(prefers-reduced-motion:reduce){.mobile-menu,.mobile-menu>*,.menu-btn span,.menu-btn span::before,.menu-btn span::after{transition:none}}
@media(min-width:1000px){.mobile-menu{display:none!important}}

/* ============================================================
   3. Hero — photo-led first viewport + merged canonical fact register
   ============================================================ */
.hero{position:relative}
.hero-stage{
  position:relative;display:flex;align-items:center;overflow:hidden;
  min-height:clamp(540px,86vh,780px);background:var(--plum-ink) url('assets/photos/hero-long-table-1600.webp') 50% 46%/cover no-repeat;
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(17,7,13,.88) 0%,rgba(17,7,13,.7) 36%,rgba(17,7,13,.48) 100%),rgba(17,7,13,.26);
}
.hero-overlay{position:relative;z-index:3;padding-block:clamp(1.6rem,5vw,3rem);color:#fff;max-width:40rem;text-shadow:0 2px 16px rgba(20,8,15,.4)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.11em;line-height:1;text-transform:uppercase;color:#fff;margin-bottom:.9rem;text-shadow:0 2px 4px rgba(0,0,0,.95)}.hero-eyebrow::before{content:"";width:26px;height:2px;background:var(--magenta)}
.hero h1{font-size:clamp(2.55rem,10.5vw,5rem);font-weight:800;letter-spacing:-.035em;color:#fff;max-width:none}.hero h1 span,.hero h1 em{display:block;font-style:normal;white-space:nowrap}.hero h1 em{color:var(--magenta)}
.hero-lede{margin-top:1.05rem;font-size:clamp(1.02rem,1rem + .45vw,1.22rem);color:rgba(255,255,255,.9);max-width:32rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.hero-actions .btn{flex:1 1 auto}
.hero-partners{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.7rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.32);max-width:27rem}.hero-partner{display:grid;justify-items:center;gap:.48rem;align-content:start;min-width:0;text-align:center}.hero-partner+ .hero-partner{border-left:1px solid rgba(255,255,255,.24)}.hero-partner>span{font-size:.55rem;font-weight:800;letter-spacing:.1em;line-height:1;text-transform:uppercase;color:rgba(255,255,255,.76)}.hero-partner img{display:block;max-width:128px;height:40px;width:auto;object-fit:contain;object-position:center top;filter:brightness(0) invert(1);opacity:.96}.hero-partner:nth-child(2) img{height:48px;max-width:66px}
.hero-play{
  position:absolute;z-index:4;left:clamp(14px,4vw,26px);top:clamp(20px,5vw,34px);
  display:inline-flex;align-items:center;gap:.7rem;background:#fff;border:1px solid rgba(255,255,255,.7);cursor:pointer;
  border-radius:var(--pill);padding:6px 17px 6px 6px;font-family:var(--font-body);color:var(--ink);transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.hero-play:hover{transform:translateY(-2px);background:var(--pink-wash);border-color:rgba(190,42,132,.6);box-shadow:0 10px 30px rgba(0,0,0,.26)}
.hero-play .pp{position:relative;width:40px;height:40px;border-radius:50%;background:var(--magenta);color:#fff;display:grid;place-content:center;flex:none}
.hero-play .pp svg{position:relative;z-index:1;width:17px;height:17px;margin-left:2px}.hero-pulse{position:absolute;inset:-2px;border-radius:50%;background:radial-gradient(circle,transparent 57%,rgba(255,255,255,.16) 60%,rgba(190,42,132,.44) 67%,transparent 75%);opacity:0;pointer-events:none;animation:hero-ring-pulse 4.8s infinite}.hero-pulse:nth-child(2){animation-delay:2.4s}@keyframes hero-ring-pulse{0%{transform:scale(1);opacity:.48}100%{transform:scale(1.72);opacity:0}}
.hero-play-copy{display:grid;gap:3px;line-height:1;text-align:left}.hero-play-copy>span{font-family:var(--font-display);font-size:.83rem;font-weight:700;white-space:nowrap}.hero-play-copy small{font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta)}
.badge-days{
  position:absolute;z-index:4;top:clamp(20px,5vw,34px);right:clamp(14px,4vw,26px);
  width:clamp(88px,22vw,118px);height:clamp(88px,22vw,118px);border-radius:50%;
  background:var(--magenta);color:#fff;display:grid;place-content:center;text-align:center;
  box-shadow:var(--shadow-lift);border:5px solid rgba(255,255,255,.92);line-height:1;
}
.badge-days .n{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,5.5vw,2.2rem)}
.badge-days .t{font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:.28rem;opacity:.92}

/* merged fact register (was the separate snapshot section) */
.hero-facts-wrap{padding-block:clamp(1.55rem,4.25vw,2.2rem)}
/* Decorative multicultural bunting — sits directly on the page (multiply drops the
   white field) so it reads as hung bunting above the fact rail, not a stock card. */
.flags-band{display:block;width:100%;max-width:none;aspect-ratio:32/7;height:auto;object-fit:cover;object-position:center top;margin:0;mix-blend-mode:multiply}
@media(min-width:880px){
  .hero-stage{align-items:center}
  .hero-facts-wrap{max-width:var(--wrap);}
}
.hero-testimonial{width:100%;max-width:none;margin:0;padding:clamp(2.25rem,6vw,4rem) clamp(1.25rem,5vw,2.5rem) clamp(2.6rem,7vw,4.5rem);text-align:center}
.hero-testimonial svg{width:36px;height:36px;color:var(--magenta);margin-inline:auto}
.hero-testimonial{background:var(--plum-ink);color:#fff}.hero-testimonial p{max-width:44rem;margin:.8rem auto 0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.28rem,3.7vw,2.15rem);line-height:1.33;letter-spacing:-.025em}.hero-testimonial footer{display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:1rem;font-size:.84rem;font-weight:700;color:#fff}.hero-testimonial footer span{font-weight:600;color:rgba(255,255,255,.66)}.hero-testimonial footer span::before{content:"·";margin-right:.5rem;color:var(--magenta)}

/* ============================================================
   4. Flavour marquee
   ============================================================ */
.flavour{border-block:1px solid rgba(190,42,132,.46);background:var(--plum-ink);overflow:hidden;padding-block:.85rem}
.flavour-track{display:flex;gap:0;width:max-content;animation:marquee 46s linear infinite}
@media(prefers-reduced-motion:reduce){.hero-pulse,.reel-pulse,.entry-pulse{animation:none}.flavour-track{animation:none}.flavour{overflow-x:auto}}
.flavour-track span{
  font-family:var(--font-display);font-weight:700;font-size:clamp(.78rem,2.7vw,1rem);
  letter-spacing:.1em;text-transform:uppercase;color:#fff;padding-inline:1.1rem;position:relative;
  display:inline-flex;align-items:center;
}
.flavour-track span::after{content:"·";position:absolute;right:-3px;color:#fff;opacity:.45}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   5. Snapshot rail — hairline register, no cards
   ============================================================ */
.snapshot{padding-block:clamp(1.6rem,5vw,2.6rem)}
.snap-rail{display:grid;gap:0;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);overflow:hidden}
.snap-item{display:flex;align-items:center;gap:.85rem;padding:1.1rem clamp(1.1rem,3vw,1.6rem);border-bottom:1px solid var(--line)}
.snap-item:last-child{border-bottom:none}
.snap-ic{width:42px;height:42px;border-radius:50%;background:var(--pink-wash);display:grid;place-content:center;flex:none}
.snap-ic svg{width:20px;height:20px;color:var(--magenta)}
.snap-l{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:block}
.snap-v{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;margin-top:.12rem;display:block}
@media(min-width:760px){
  .snap-rail{grid-template-columns:repeat(4,1fr)}
  .snap-item{border-bottom:none;border-right:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:.7rem}
  .snap-item:last-child{border-right:none}
}

/* ============================================================
   6. How the night works — magenta band, curved top
   ============================================================ */
.night{
  background:var(--magenta);color:#fff;border-radius:24px 24px 0 0;
  /* The giveaway now sits directly above this band, so the former white margin
     is removed and the pale-pink prize surface carries cleanly into the curve. */
  margin-top:0;padding-block:clamp(3rem,8vw,5rem);position:relative;overflow:hidden;
}
.night::after{content:"";position:absolute;right:-8%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 62%);pointer-events:none}
.night .kicker{color:#fff}
.night h2{font-size:clamp(2rem,6vw,3.1rem);font-weight:800;letter-spacing:-.03em;margin-top:.9rem;max-width:16ch}
.night-intro{margin-top:1rem;color:rgba(255,255,255,.86);max-width:36rem;font-size:1.06rem}
.steps{position:relative;display:grid;gap:clamp(1.7rem,4vw,2.2rem);margin-top:clamp(2.4rem,5vw,3rem)}
.steps::before{content:"";position:absolute;z-index:0;left:25px;top:52px;bottom:52px;width:2px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.18))}
.step{position:relative;z-index:1;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:1rem;row-gap:.45rem;align-items:start;min-height:52px;padding:0}
.step-n{
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;width:52px;height:52px;border-radius:50%;
  grid-row:span 2;background:#fff;color:var(--magenta-dark);display:grid;place-items:center;line-height:1;margin:0;
}
.step h3{font-size:1.34rem;font-weight:700;letter-spacing:-.01em;align-self:end}
.step p{margin:0;color:rgba(255,255,255,.85);font-size:.98rem}
.night-aside{margin-top:clamp(2rem,4vw,2.6rem);display:flex;align-items:center;gap:.8rem;max-width:34rem;background:linear-gradient(105deg,rgba(255,255,255,.16),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:.9rem 1rem;box-shadow:0 12px 30px -22px rgba(0,0,0,.75)}
.night-aside svg{width:20px;height:20px;flex:none;margin:0;color:#ffd6ee}
.night-aside-copy{display:grid;gap:.18rem}.night-aside-copy strong{font-family:var(--font-display);font-size:.95rem;line-height:1.2}.night-aside-copy>span{font-size:.82rem;line-height:1.4;color:rgba(255,255,255,.76)}
@media(min-width:760px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps::before{display:none}
  .step{display:block;padding-left:0}
  .step-n{margin-bottom:1rem}
  .step::before{content:"";position:absolute;top:24px;left:64px;width:calc(100% - 24px);height:2px;background:rgba(255,255,255,.28)}
  .step:last-child::before{display:none}
}


/* ============================================================
   7. Cairns prize — light, framed official artefact
   ============================================================ */
.prize{background:var(--pink-wash);overflow:hidden}
.prize-grid{display:grid;gap:clamp(2rem,5vw,3rem);padding-block:var(--section-y);align-items:center}
.prize-eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--magenta-dark)}
.prize h2{font-size:clamp(2.1rem,6vw,3.3rem);font-weight:800;letter-spacing:-.03em;margin-top:.8rem}
.prize h2 em{font-style:normal;color:var(--magenta)}
.prize-lede{margin-top:1.1rem;color:var(--muted);max-width:34rem;font-size:1.05rem}
.prize-steps{margin-top:1.6rem;display:grid;gap:.9rem}
.prize-steps li{display:flex;gap:.9rem;align-items:flex-start}
.prize-num{width:36px;height:36px;box-sizing:border-box;border-radius:50%;background:var(--magenta);color:#fff;font-weight:800;display:grid;place-items:center;line-height:1;flex:0 0 36px;font-size:.95rem}
.prize-steps strong{display:block;font-family:var(--font-display);font-weight:700;font-size:1rem;text-decoration:none}
.prize-steps li>span:not(.prize-num){display:flex;flex-direction:column;gap:.15rem}
.prize-steps li>span>span{color:var(--muted);font-size:.94rem}
.prize-fine{margin-top:1.4rem;font-size:.82rem;color:var(--muted-2)}
.prize-actions{margin-top:1.5rem;display:flex;gap:.7rem;flex-wrap:wrap}.entry-video-btn{display:inline-flex;align-items:center;gap:.7rem;min-height:52px;padding:6px 17px 6px 6px;border:1px solid rgba(255,255,255,.7);border-radius:var(--pill);background:#fff;color:var(--ink);font-family:var(--font-display);font-size:.88rem;font-weight:700;cursor:pointer;transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}.entry-video-btn:disabled{opacity:1;cursor:default}.entry-play{position:relative;display:grid;place-content:center;width:40px;height:40px;border-radius:50%;background:var(--magenta);color:#fff;flex:none}.entry-play svg{position:relative;z-index:1;width:17px;height:17px;margin-left:2px}.entry-pulse{position:absolute;inset:-2px;border-radius:50%;background:radial-gradient(circle,transparent 57%,rgba(255,255,255,.16) 60%,rgba(190,42,132,.44) 67%,transparent 75%);opacity:0;pointer-events:none;animation:entry-ring-pulse 4.8s infinite}.entry-pulse:nth-child(2){animation-delay:2.4s}@keyframes entry-ring-pulse{0%{transform:scale(1);opacity:.48}100%{transform:scale(1.72);opacity:0}}.entry-video-copy{display:grid;gap:3px;line-height:1;text-align:left}.entry-video-copy>span{font-family:var(--font-display);font-size:.88rem;font-weight:700;white-space:nowrap}.entry-video-copy small{font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta)}
.prize-media{position:relative;width:100%;margin:0;background:#fff;border:1px solid var(--pink-line);border-radius:var(--r-lg);padding:clamp(.7rem,2vw,1rem);box-shadow:var(--shadow-soft)}
.prize-thumb{display:block;width:100%;border:none;background:none;padding:0;cursor:pointer;position:relative;border-radius:var(--r-md);overflow:hidden}
.prize-thumb img{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.prize-thumb:hover img,.prize-thumb:focus-visible img{transform:scale(1.03)}
.prize-zoom{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.95);border-radius:var(--pill);padding:.4rem .82rem;font-weight:600;font-size:.8rem;box-shadow:var(--shadow-soft)}
.prize-zoom svg{width:15px;height:15px;color:var(--magenta)}
.prize-media figcaption{margin-top:.8rem;font-size:.8rem;color:var(--muted);text-align:center}
@media(min-width:860px){.prize-grid{grid-template-columns:1.02fr .98fr}}

/* ============================================================
   8. Community story — split header + unequal photo pair
   ============================================================ */
.story{padding-block:var(--section-y)}
.story-grid{display:grid;gap:clamp(1.8rem,4vw,2.6rem)}
.story-head{display:grid;gap:1.1rem;align-content:start}
.story-head h2{font-size:clamp(2.1rem,6vw,3.4rem);font-weight:800;letter-spacing:-.03em}
.story-head p{color:var(--muted);font-size:1.08rem;max-width:38rem}
.story-figure{position:relative;margin:0;overflow:hidden;box-shadow:var(--shadow-soft);border-radius:var(--r-lg);aspect-ratio:4/3}
.story-figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.story-figure:hover img{transform:scale(1.04)}
/* Community & inclusion — restrained editorial point rows, not an icon-card grid */
.story-points{list-style:none;margin:clamp(1.5rem,3.5vw,2.1rem) 0 0;padding:0;display:grid;gap:clamp(1rem,2.4vw,1.35rem)}
.story-points li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start}
.story-points li+li{padding-top:clamp(1rem,2.4vw,1.35rem);border-top:1px solid var(--line)}
.sp-ic{width:44px;height:44px;border-radius:50%;background:var(--pink-wash);display:grid;place-content:center;flex:none}
.sp-ic svg{width:22px;height:22px;color:var(--magenta)}
.sp-body{display:flex;flex-direction:column;gap:.22rem}
.sp-body strong{font-family:var(--font-display);font-weight:700;font-size:1.06rem;letter-spacing:-.01em}
.sp-body>span{color:var(--muted);font-size:.96rem;line-height:1.5}
@media(min-width:820px){
  .story-grid{grid-template-columns:.92fr 1.18fr;align-items:stretch;gap:3rem}
  .story-figure{aspect-ratio:auto}
}

/* ============================================================
   9. Signature — the ONE full-bleed cinematic photo moment
   ============================================================ */
.signature{position:relative;min-height:clamp(470px,66vh,660px);display:flex;align-items:flex-end;overflow:hidden}
.signature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 32%}
.signature-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,8,15,.72),rgba(20,8,15,.1) 60%),linear-gradient(0deg,rgba(20,8,15,.74),transparent 50%)}
.signature-inner{position:relative;padding-block:clamp(2.4rem,7vw,4rem);color:#fff}
.signature-mark{font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:.8rem}
.signature-line{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,7vw,3.7rem);letter-spacing:-.03em;line-height:1.04;max-width:19ch}
.signature-line em{font-style:normal;color:var(--magenta)}

/* ============================================================
   10. Showreel — custom cover, branded play (magenta card)
   ============================================================ */
.showreel{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(100% 120% at 88% 4%,rgba(255,143,208,.34),transparent 46%),linear-gradient(132deg,var(--magenta-deep),var(--plum-ink));padding-block:clamp(3.5rem,9vw,6rem)}
.showreel::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent 75%);pointer-events:none}
.reel-card{background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.55);border-radius:var(--r-2xl);padding:clamp(1.1rem,3vw,1.5rem);box-shadow:0 28px 70px -30px rgba(11,3,9,.8)}
.reel-head{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:end;justify-content:space-between;padding:.5rem .6rem 1.1rem}
.reel-kicker{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta-dark)}
.reel-head h2{font-size:clamp(1.7rem,4.5vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin-top:.2rem}
.reel-head p{color:var(--muted);max-width:34ch;margin-top:.5rem}
.reel-frame{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:#2a1520;cursor:pointer;border:none;width:100%;padding:0}
.reel-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.reel-scrim{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(20,8,15,.04) 30%,rgba(20,8,15,.68) 100%)}
.play{
  position:absolute;z-index:2;inset:0;margin:auto;width:clamp(74px,15vw,104px);height:clamp(74px,15vw,104px);
  border:none;border-radius:50%;background:var(--magenta);color:#fff;
  display:grid;place-content:center;box-shadow:0 16px 40px -12px rgba(0,0,0,.55);
  transition:transform .22s ease,background .22s ease;pointer-events:none;
}
.play svg{position:relative;z-index:1;width:26px;height:26px;margin-left:-3px;flex:none}.reel-pulse{position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(circle,transparent 57%,rgba(255,255,255,.17) 60%,rgba(190,42,132,.46) 67%,transparent 75%);opacity:0;pointer-events:none;animation:reel-ring-pulse 4.8s infinite}.reel-pulse:nth-child(2){animation-delay:2.4s}@keyframes reel-ring-pulse{0%{transform:scale(1);opacity:.48}100%{transform:scale(1.72);opacity:0}}
.reel-frame:hover .play{transform:scale(1.06);background:var(--magenta-dark)}
.reel-label{
  position:absolute;z-index:2;left:16px;bottom:16px;color:#fff;display:flex;align-items:center;gap:.55rem;
  font-weight:600;font-size:.88rem;background:rgba(20,8,15,.42);backdrop-filter:blur(4px);
  border-radius:var(--pill);padding:.45rem .9rem;
}
.reel-label .rt{opacity:.85;font-weight:500}
@media(min-width:760px){.reel-head{padding:.5rem 1rem 1.4rem}}

/* ============================================================
   11. Experience — full-bleed swipe deck (native scroll-snap)
   ============================================================ */
.experience{padding-block:var(--section-y) 0;overflow:hidden}
.exp-head{max-width:42rem}
.exp-head .kicker{margin-bottom:.9rem}
.exp-head h2{font-size:clamp(2rem,5.4vw,3.3rem);font-weight:800;letter-spacing:-.03em}
.exp-head p{margin-top:1rem;color:var(--muted);font-size:clamp(1rem,1rem + .3vw,1.15rem);max-width:34rem}
.exp-deck{position:relative;margin-top:clamp(1.8rem,4vw,2.6rem)}
.exp-track{
  display:flex;gap:clamp(.7rem,2vw,1rem);overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-inline:clamp(1.1rem,5vw,2.5rem);
}
.exp-track::-webkit-scrollbar{display:none}
.exp-slide{
  position:relative;flex:0 0 88%;max-width:560px;scroll-snap-align:center;margin:0;
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-photo);background:var(--plum-ink);
}
.exp-slide img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.exp-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,8,15,.86),rgba(20,8,15,.08) 58%)}
.exp-cap{position:absolute;left:0;bottom:0;padding:1.4rem;color:#fff;display:flex;flex-direction:column}
.exp-cap svg{width:26px;height:26px;color:#ff8fd0;margin-bottom:.55rem}
.exp-cap .exp-t{font-family:var(--font-display);font-weight:700;font-size:1.28rem;letter-spacing:-.01em;line-height:1.1}
.exp-cap .exp-d{margin-top:.5rem;color:rgba(255,255,255,.85);font-size:.94rem;max-width:36ch}
.exp-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--ink);border:none;cursor:pointer;display:none;place-content:center;
  box-shadow:var(--shadow-soft);transition:background .2s,transform .2s;
}
.exp-nav:hover{background:#fff;transform:translateY(-50%) scale(1.05)}
.exp-nav svg{width:22px;height:22px}
.exp-prev{left:clamp(1.1rem,5vw,2.5rem)}
.exp-next{right:clamp(1.1rem,5vw,2.5rem)}
.exp-dots{display:flex;gap:0;justify-content:center;margin-top:1.4rem}
.exp-dots button{position:relative;width:44px;height:44px;padding:0;border:none;background:transparent;cursor:pointer}
.exp-dots button::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:var(--pink-line);transform:translate(-50%,-50%);transition:background .25s,width .25s,border-radius .25s}
.exp-dots button.on::before{background:var(--magenta);width:26px;border-radius:5px}
.exp-extra{margin-top:clamp(1.4rem,3vw,2rem);padding-bottom:var(--section-y);display:flex;gap:.6rem;flex-wrap:wrap}
.exp-chip{display:inline-flex;align-items:center;gap:.55rem;background:var(--pink-wash);border:1px solid var(--pink-line);border-radius:var(--pill);padding:.55rem 1rem;font-weight:600;font-size:.9rem}
.exp-chip svg{width:18px;height:18px;color:var(--magenta);flex:none}
@media(min-width:760px){
  .exp-slide{flex-basis:60%;aspect-ratio:16/10}
  .exp-nav{display:grid}
}
@media(min-width:1100px){.exp-slide{flex-basis:46%;aspect-ratio:16/10}}

/* ============================================================
   12. Confirmed lineup — dark, two grouped divided registers
   ============================================================ */
.lineup{background:var(--plum-ink);color:#fff;padding-block:var(--section-y)}
.lineup-head{max-width:42rem}
.lineup-eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#ff8fd0}
.lineup-head h2{font-size:clamp(2rem,5.4vw,3.3rem);font-weight:800;letter-spacing:-.03em;color:#fff;margin-top:.6rem}
.lineup-head p{margin-top:1rem;color:rgba(255,255,255,.78);max-width:36rem;font-size:1.05rem}
.lineup-cols{margin-top:clamp(2rem,5vw,3rem);display:grid;gap:clamp(2.4rem,6vw,4rem)}
.lineup-title{display:flex;align-items:center;gap:.6rem;font-size:1.2rem;font-weight:700;color:#ff8fd0;padding-bottom:1rem;border-bottom:2px solid rgba(255,255,255,.18)}
.lineup-title svg{width:20px;height:20px}
.reg-row{padding:1.15rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.reg-main{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.reg-name{font-family:var(--font-display);font-weight:700;font-size:1.28rem;letter-spacing:-.01em}
/* D3: filled magenta pill, white text — clears WCAG AA (5.45:1) on the plum band */
.reg-badge{font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--magenta);border:1px solid var(--magenta);border-radius:var(--pill);padding:.22rem .62rem;white-space:nowrap}
.reg-desc{margin-top:.4rem;color:rgba(255,255,255,.72);font-size:.95rem;max-width:46ch}
.reg-more{margin-top:1.1rem;font-size:.92rem;color:rgba(255,255,255,.6);line-height:1.55}
/* Food vendors — compact two-column name register, two columns at every width */
.reg-names{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(.9rem,4vw,1.6rem)}
.reg-name-row{padding:.62rem 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--font-display);font-weight:700;font-size:clamp(.94rem,2.9vw,1.08rem);line-height:1.3;letter-spacing:-.01em;overflow-wrap:break-word}
@media(min-width:820px){.lineup-cols{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4rem)}}

/* ============================================================
   13. Premium countdown — distinct gradient block (no photo)
   ============================================================ */
.premium{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:var(--plum-ink) url('assets/photos/stage-blue.webp') 50% 50%/cover no-repeat;
}
.premium::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(27,25,25,.88),rgba(27,25,25,.74) 55%,rgba(27,25,25,.82)),radial-gradient(60% 80% at 85% 20%,rgba(190,42,132,.2),transparent 60%);pointer-events:none}.premium::after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(to bottom,transparent,rgba(190,42,132,.54));pointer-events:none}
.premium-inner{position:relative;z-index:1;padding:clamp(3rem,9vw,5rem) 1.2rem;max-width:46rem;margin-inline:auto}
.premium-eyebrow{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--magenta);border-radius:var(--pill);padding:.35rem .95rem}
.premium h2{font-size:clamp(1.9rem,5.5vw,3rem);font-weight:800;letter-spacing:-.03em;margin-top:1.1rem}
.count-clock{display:flex;align-items:flex-start;justify-content:center;gap:clamp(.2rem,1vw,.55rem);margin-top:1.8rem}
.count-unit{display:grid;justify-items:center;gap:.28rem;min-width:0}
.count-unit .cv{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,9vw,3.5rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.count-unit .cl{display:block;font-size:.62rem;font-weight:800;letter-spacing:.09em;line-height:1;text-transform:uppercase;color:rgba(255,255,255,.72)}
.count-sep{display:inline-block;align-self:start;margin-top:.02em;font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,7vw,3rem);line-height:1;color:rgba(255,255,255,.68)}
.premium-actions{margin-top:2rem;display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* ============================================================
   14. Event map — split, official artefact preserved
   ============================================================ */
.map{padding-block:var(--section-y)}
.map-grid{display:grid;gap:clamp(2rem,5vw,3rem);align-items:center}
.map-copy h2{font-size:clamp(2rem,5.4vw,3.1rem);font-weight:800;letter-spacing:-.03em}
.map-copy .kicker{margin-bottom:.9rem}
.map-copy>p{margin-top:1rem;color:var(--muted);font-size:1.05rem;max-width:34rem}
.map-key{margin-top:1.6rem;display:grid;gap:.85rem}
.map-key li{display:flex;gap:.8rem;align-items:flex-start;font-size:.96rem}
.map-key svg{width:22px;height:22px;color:var(--magenta);flex:none;margin-top:.1rem}
.map-actions{margin-top:1.6rem;display:flex;gap:.7rem;flex-wrap:wrap}
.map-media{position:relative;width:100%;margin:0}
.map-thumb{display:block;width:100%;border:none;background:none;padding:0;cursor:pointer;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-photo);position:relative}
.map-thumb img{width:100%;height:auto;display:block}
.map-zoom{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.95);border-radius:var(--pill);padding:.42rem .85rem;font-weight:600;font-size:.82rem;box-shadow:var(--shadow-soft)}
.map-zoom svg{width:15px;height:15px;color:var(--magenta)}
.map-figcap{margin-top:.8rem;font-size:.82rem;color:var(--muted)}
@media(min-width:860px){.map-grid{grid-template-columns:1fr 1fr}}

/* ============================================================
   15. Memory wall — Paint Gods behaviour, One Long Table skin
   ============================================================ */
.memory{padding-top:var(--section-y);padding-bottom:clamp(1.6rem,3vw,2rem)}
.memory-head{max-width:42rem;margin-bottom:clamp(1.6rem,4vw,2.4rem)}
.memory-head .kicker{margin-bottom:.9rem}
.memory-head h2{font-size:clamp(2rem,5.4vw,3.3rem);font-weight:800;letter-spacing:-.03em}
.memory-head p{margin-top:1rem;color:var(--muted);font-size:clamp(1rem,1rem + .3vw,1.15rem);max-width:34rem}

/* Mobile: full-width horizontal swipe rail of strong imagery */
/* Paged bento gallery — Paint Gods interaction, One Long Table skin.
   The one true gallery: a composed bento PAGE slides as a whole unit;
   gallery.js owns paging + the fullscreen lightbox. */
.mw-show{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg)}
/* The translated track owns the page movement, but never the control layer. */
.mw-track{position:relative;z-index:0;display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform;touch-action:pan-y}
.mw-page{flex:0 0 100%;min-width:100%;display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr)}
.mw-item{
  position:relative;overflow:hidden;cursor:pointer;outline:none;
  background:var(--plum-ink);border-radius:var(--r-md);aspect-ratio:4/3;
}
.mw-page>.mw-item:first-child{grid-column:span 2;aspect-ratio:16/10}
/* Six-photo mobile bento: first and final moments bookend the two paired rows,
   so every page closes deliberately instead of leaving an empty grid cell. */
@media(max-width:760px){.mw-page>.mw-item:last-child{grid-column:span 2;aspect-ratio:16/10}}
.mw-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.mw-item:hover img,.mw-item:focus-visible img{transform:scale(1.06)}
.mw-item:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--magenta)}
.mw-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,8,15,0);transition:background .3s;pointer-events:none}
.mw-ov svg{width:30px;height:30px;color:#fff;opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s}
.mw-item:hover .mw-ov,.mw-item:focus-visible .mw-ov{background:rgba(20,8,15,.32)}
.mw-item:hover .mw-ov svg,.mw-item:focus-visible .mw-ov svg{opacity:1;transform:scale(1)}
/* Arrows + dots */
.mw-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:none;border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;cursor:pointer;z-index:2;box-shadow:var(--shadow-soft);transition:background .2s,transform .2s,opacity .2s}
.mw-arrow svg{width:22px;height:22px}
.mw-arrow:hover{background:#fff}
.mw-arrow:active{transform:translateY(-50%) scale(.94)}
/* Boundary state stays clearly PRESENT. The control system must never look
   like it vanished: dimmed and muted, not faded into the photo behind it. */
.mw-arrow[disabled]{opacity:.62;background:rgba(255,255,255,.9);color:var(--muted);cursor:default;pointer-events:none}
.mw-prev{left:12px}.mw-next{right:12px}
.mw-dots{display:flex;gap:.55rem;justify-content:center;margin-top:1.2rem}
.mw-dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:var(--pink-line);cursor:pointer;transition:background .25s,width .25s}
.mw-dot.is-active{background:var(--magenta);width:26px;border-radius:5px}
/* Deliberate desktop bento compositions — never a row of equal cards */
@media(min-width:761px){
  .mw-page{grid-template-columns:repeat(8,1fr);gap:.8rem}
  .mw-page>.mw-item,.mw-page>.mw-item:first-child{grid-column:auto;aspect-ratio:4/3}
  .mw-page--a>.mw-item:nth-child(1){grid-column:1/5;grid-row:1;aspect-ratio:16/9}
  .mw-page--a>.mw-item:nth-child(2){grid-column:5/9;grid-row:1;aspect-ratio:16/9}
  .mw-page--a>.mw-item:nth-child(3){grid-column:1/3;grid-row:2}
  .mw-page--a>.mw-item:nth-child(4){grid-column:3/5;grid-row:2}
  .mw-page--a>.mw-item:nth-child(5){grid-column:5/7;grid-row:2}
  .mw-page--a>.mw-item:nth-child(6){grid-column:7/9;grid-row:2}
  .mw-page--b>.mw-item:nth-child(1){grid-column:1/3;grid-row:1}
  .mw-page--b>.mw-item:nth-child(2){grid-column:3/5;grid-row:1}
  .mw-page--b>.mw-item:nth-child(3){grid-column:5/7;grid-row:1}
  .mw-page--b>.mw-item:nth-child(5){grid-column:7/9;grid-row:1}
  /* cultural dancer takes the wide cell so the spear, boomerang and arm span read */
  .mw-page--b>.mw-item:nth-child(4){grid-column:1/5;grid-row:2;aspect-ratio:16/9}
  .mw-page--b>.mw-item:nth-child(6){grid-column:5/9;grid-row:2;aspect-ratio:16/9}
  .mw-page--c>.mw-item:nth-child(1){grid-column:1/4;grid-row:1;aspect-ratio:3/2}
  .mw-page--c>.mw-item:nth-child(2){grid-column:4/9;grid-row:1;aspect-ratio:12/5}
  .mw-page--c>.mw-item:nth-child(3){grid-column:1/3;grid-row:2}
  .mw-page--c>.mw-item:nth-child(4){grid-column:3/5;grid-row:2}
  .mw-page--c>.mw-item:nth-child(5){grid-column:5/7;grid-row:2}
  .mw-page--c>.mw-item:nth-child(6){grid-column:7/9;grid-row:2}
  .mw-arrow{width:50px;height:50px}
}
@media(prefers-reduced-motion:reduce){.mw-track{transition:none}}
.mw-media-credit{display:grid;justify-items:center;gap:.38rem;width:fit-content;margin:clamp(1.6rem,3vw,2rem) auto 0;color:var(--muted);text-align:center}
.mw-media-credit a{display:block;line-height:0}.mw-media-credit img{display:block;width:94px;height:28px;max-width:34vw;object-fit:contain;object-position:center top}
.mw-cue{margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;background:var(--pink-wash);border:1px solid var(--pink-line);border-radius:var(--pill);padding:.4rem .9rem;font-weight:600;font-size:.82rem;color:var(--magenta-dark)}
.mw-cue svg{width:16px;height:16px;flex:none}

/* Desktop: asymmetric editorial memory wall */
@media(min-width:820px){
  .mw-grid{
    display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:200px;gap:clamp(.8rem,1.6vw,1.1rem);
    overflow:visible;margin-inline:0;padding-inline:0;
  }
  .mw-item{flex:none;aspect-ratio:auto;scroll-snap-align:none}
  .mw-i0{grid-column:1/4;grid-row:1/3}
  .mw-i1{grid-column:4/7;grid-row:1/2}
  .mw-i2{grid-column:6/7;grid-row:2/5}
  .mw-i3{grid-column:4/6;grid-row:2/3}
  .mw-i4{grid-column:1/2;grid-row:3/5}
  .mw-i5{grid-column:2/4;grid-row:3/4}
  .mw-i6{grid-column:4/6;grid-row:3/5}
  .mw-i7{grid-column:2/4;grid-row:4/5}
  /* focus dark night frames on their lit subject in tall/cropped slots */
  .mw-i2 img{object-position:50% 42%}
  .mw-i4 img{object-position:50% 35%}
}

/* Gallery lightbox — Paint Gods engine, OLT skin */
.olt-lb{
  position:fixed;inset:0;z-index:var(--z-gallery);flex-direction:column;
  background:rgba(42,15,30,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease;
}
.olt-lb--vis{opacity:1}
.olt-lb-top{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1rem clamp(1rem,3vw,1.6rem);flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.1)}
.olt-lb-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.olt-lb-label{font-family:var(--font-display);font-weight:700;font-size:1rem;color:#fff;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.olt-lb-desc{font-size:.82rem;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.olt-lb-topright{display:flex;align-items:center;gap:1.1rem;flex-shrink:0}
.olt-lb-count{font-family:var(--font-body);font-size:.82rem;color:rgba(255,255,255,.6);font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.olt-lb-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);cursor:pointer;color:rgba(255,255,255,.8);border-radius:50%;transition:color .18s,background .18s}
.olt-lb-close:hover{color:#fff;background:var(--magenta)}
.olt-lb-close svg{width:20px;height:20px}
.olt-lb-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:10px clamp(44px,8vw,64px);min-height:0}
.olt-lb-imgwrap{position:relative;z-index:1;width:100%;height:100%;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}
/* Fill the stage in BOTH directions; object-fit:contain keeps the native ratio,
   so nothing is stretched and nothing is cropped. The old width/height:auto +
   max-*:100% pair could only ever shrink a photo, never grow one, so any file
   smaller than the stage sat at its intrinsic size surrounded by dead canvas —
   aerial-street is 2048w and overflowed the window, kids-swing-ride is 1200w and
   stopped at 1200px inside a 1312px window. Radius and shadow are deliberately
   off the <img>: with object-fit the element box is the whole stage, not the
   photo, so they would draw around empty space instead of hugging the picture. */
.olt-lb-img{width:100%;height:100%;object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none;display:block}
/* The original photo-change motion: the incoming frame lifts from 98.5% to
   full size as it fades in. Do not reduce this to a plain opacity fade — the
   scale IS the gallery's established transition (it came across with the rest
   of the Paint Gods paging grammar).
   The compositing worry that once justified stripping the transform is handled
   structurally instead of by deleting the motion: .olt-lb-imgwrap is its own
   positioned layer at z-index 1 and .olt-lb-nav sits at z-index 10 with its own
   promoted layer, so the controls never depend on the photo's layer repainting.
   Single owner: gallery.js sets this one animation on the <img> and restarts it
   by resetting `animation` — no CSS transition and no timer runs alongside it. */
@keyframes oltLbFadeIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
/* Own layer, own z-index, above the photo at all times — the controls must not
   depend on the image's layer being repainted for them to stay on screen. */
.olt-lb-nav{position:absolute;top:50%;transform:translate3d(0,-50%,0);will-change:transform;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;color:#fff;transition:background .2s,border-color .2s;z-index:10}
.olt-lb-nav:hover{background:var(--magenta);border-color:var(--magenta)}
.olt-lb-nav:active{transform:translate3d(0,-50%,0) scale(.94)}
.olt-lb-nav svg{width:22px;height:22px}
.olt-lb-prev{left:clamp(8px,2vw,18px)}
.olt-lb-next{right:clamp(8px,2vw,18px)}
.olt-lb-film-wrap{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.35)}
.olt-lb-film{display:flex;gap:6px;padding:10px clamp(10px,3vw,18px);overflow-x:auto;justify-content:safe center;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;-webkit-overflow-scrolling:touch}
.olt-lb-thumb{flex-shrink:0;width:78px;height:54px;overflow:hidden;border:2px solid transparent;border-radius:10px;opacity:.45;cursor:pointer;padding:0;background:rgba(255,255,255,.06);transition:opacity .2s,border-color .2s}
.olt-lb-thumb:hover{opacity:.8}
.olt-lb-thumb--on{border-color:var(--magenta);opacity:1}
.olt-lb-thumb img{width:100%;height:100%;object-fit:cover;display:block;user-select:none}
@media(max-width:760px){
  .olt-lb-thumb{width:60px;height:42px}
  .olt-lb-desc{display:none}
  /* On a phone the desktop gutter was eating 88px of 390px. Swipe is the
     primary gesture here, so the pills overlay the photo instead of reserving
     a lane beside it, and get a scrim so they stay readable over any frame. */
  .olt-lb-stage{padding:8px 6px}
  .olt-lb-prev{left:6px}
  .olt-lb-next{right:6px}
  .olt-lb-nav{background:rgba(20,8,15,.6);border-color:rgba(255,255,255,.34)}
}

/* ============================================================
   16. Community / Facebook — active-event feed (represented)
   ============================================================ */
.social{padding-block:var(--section-y);background:var(--pink-wash)}
.social-grid{display:grid;gap:clamp(2rem,5vw,3rem);align-items:center}
.social-copy h2{font-size:clamp(2rem,5.4vw,3rem);font-weight:800;letter-spacing:-.03em}
.social-copy p{margin-top:1rem;color:var(--muted);font-size:1.05rem;max-width:34rem}
.social-actions{margin-top:1.6rem;display:flex;gap:.7rem;flex-wrap:wrap}
.social-handles{margin-top:1.5rem;display:flex;gap:1.3rem;flex-wrap:wrap;font-weight:600;font-size:.9rem;color:var(--magenta-dark)}
.social-handles a{display:inline-flex;align-items:center;gap:.4rem}
.feed-frame{background:#fff;border:1px solid var(--pink-line);border-radius:var(--r-lg);padding:1rem;box-shadow:var(--shadow-soft)}
.feed-top{display:flex;align-items:center;gap:.7rem;padding:.4rem .5rem 1rem;border-bottom:1px solid var(--line-soft)}
.feed-avatar{width:44px;height:44px;border-radius:50%;background:var(--magenta);color:#fff;display:grid;place-content:center;flex:none;font-family:var(--font-display);font-weight:800}
.feed-top strong{display:block;font-family:var(--font-display);font-weight:700;font-size:.98rem}
.feed-top span{font-size:.8rem;color:var(--muted)}
.feed-posts{display:grid;gap:.9rem;margin-top:1rem}
.feed-post{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem;border-radius:var(--r-sm);background:var(--pink-wash)}
.feed-post .fp-ic{width:44px;height:44px;border-radius:12px;background:var(--magenta);color:#fff;display:grid;place-content:center;flex:none}
.feed-post .fp-ic svg{width:22px;height:22px}
.feed-post p{font-size:.9rem;line-height:1.45}
.feed-post .fp-date{display:block;font-size:.74rem;color:var(--muted);font-weight:600;margin-bottom:.15rem}
.feed-ghost{margin-top:.9rem;font-size:.76rem;color:var(--muted-2);text-align:center;font-style:italic}
@media(min-width:860px){.social-grid{grid-template-columns:1fr 1.05fr}}

/* ============================================================
   17. Testimonials — real named, quote-led
   ============================================================ */
.testimonials{padding-block:var(--section-y)}
.quote-grid{margin-top:clamp(2rem,5vw,3rem);display:grid;gap:1.1rem}
.quote{position:relative;background:var(--pink-wash);border:1px solid var(--pink-line);border-radius:var(--r-lg);padding:1.8rem 1.6rem;margin:0}
.quote svg{width:34px;height:34px;color:var(--magenta);opacity:.4;margin-bottom:.6rem}
.quote p{font-family:var(--font-display);font-weight:600;font-size:1.12rem;line-height:1.32;letter-spacing:-.01em}
.quote footer{margin-top:1.1rem;font-weight:600;font-size:.9rem;color:var(--magenta-dark)}
/* lead quote carries more weight than the two supporting quotes (no three-equal cards) */
.quote-lead{background:linear-gradient(135deg,var(--magenta) 0%,var(--magenta-deep) 100%);color:#fff;border-color:transparent;padding:clamp(1.9rem,5vw,2.6rem)}
.quote-lead svg{color:#fff;opacity:.6}
.quote-lead p{font-size:clamp(1.3rem,4vw,1.7rem);line-height:1.28}
.quote-lead footer{color:#ffd0ea}
@media(min-width:820px){
  .quote-grid{grid-template-columns:1fr 1fr}
  .quote-lead{grid-column:1/3}
}

/* ============================================================
   18. Sponsors — branded major card + preserved official board
   ============================================================ */
.sponsors{padding-block:var(--section-y)}
.major-wrap{margin-bottom:clamp(2rem,5vw,3rem)}
.major-card{
  background:linear-gradient(135deg,var(--magenta) 0%,var(--magenta-deep) 100%);color:#fff;
  border-radius:var(--r-2xl);padding:clamp(2rem,5vw,3rem);text-align:center;position:relative;overflow:hidden;
  box-shadow:var(--shadow-lift);
}
.major-card::after{content:"";position:absolute;right:-10%;top:-40%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%)}
.major-label{position:relative;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.major-logo{position:relative;height:clamp(84px,20vw,112px);width:auto;margin:1rem auto 0;background:#fff;border-radius:16px;padding:.75rem 1.35rem;box-shadow:var(--shadow-soft)}
.major-note{position:relative;margin:1.1rem auto 0;color:rgba(255,255,255,.9);max-width:42ch;font-size:1rem}
.board-wrap .section-head{margin-inline:auto;text-align:center}
.board-wrap .section-head .kicker{justify-content:center}
.board-wrap .section-head p{margin-inline:auto}
.sponsor-board{margin:clamp(1.8rem,4vw,2.6rem) auto 0;max-width:420px;text-align:center}
.board-thumb{display:block;width:100%;border:none;background:none;padding:0;cursor:pointer;position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-soft);border:1px solid var(--line)}
/* compact framed preview — cap the height so the dense poster reads as a tap-to-open artefact, not a wall */
.board-thumb img{width:100%;height:clamp(300px,52vw,380px);object-fit:cover;object-position:50% 0;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.board-thumb:hover img,.board-thumb:focus-visible img{transform:scale(1.03)}
.board-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,8,15,.5),transparent 42%)}
.board-zoom{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.96);border-radius:var(--pill);padding:.5rem 1rem;font-weight:600;font-size:.85rem;box-shadow:var(--shadow-soft);white-space:nowrap}
.board-zoom svg{width:16px;height:16px;color:var(--magenta)}
.board-actions{margin-top:1rem;display:flex;justify-content:center}
.board-actions svg{width:15px;height:15px}
.sponsor-board figcaption{margin-top:.9rem;font-size:.82rem;color:var(--muted)}

/* ============================================================
   19. Become a sponsor
   ============================================================ */
.become{padding-block:var(--section-y);background:var(--pink-wash)}
.become-grid{display:grid;gap:clamp(2rem,5vw,3rem);align-items:start}
.become h2{font-size:clamp(2rem,5.4vw,3rem);font-weight:800;letter-spacing:-.03em}
.become-lede{margin-top:1rem;color:var(--muted);font-size:1.05rem;max-width:34rem}
.become-benefits{margin-top:1.5rem;display:grid;gap:1rem}
.become-benefits li{display:flex;gap:.8rem;align-items:flex-start;font-size:.98rem}
.become-benefits svg{width:22px;height:22px;color:var(--magenta);flex:none;margin-top:.1rem}
.tier-panel{background:#fff;border:1px solid var(--pink-line);border-radius:var(--r-lg);padding:clamp(1.4rem,4vw,2rem);box-shadow:var(--shadow-soft)}
.tier-head{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin-bottom:1rem}
.tier-list li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.2rem 1rem;padding:.9rem 0;border-bottom:1px solid var(--line-soft)}
.tier-list li em{grid-column:1;font-style:normal;font-size:.82rem;color:var(--muted)}
.tier-list li span{grid-column:1;grid-row:1;font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.tier-list li strong{grid-column:2;grid-row:1/3;align-self:center;font-family:var(--font-display);font-weight:800;color:var(--magenta-dark);font-size:1.1rem}
.tier-fine{margin-top:1rem;font-size:.78rem;color:var(--muted)}
.tier-panel .btn{margin-top:1.2rem}
.tier-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:600;font-size:.9rem;color:var(--magenta-dark)}
.tier-link svg{width:15px;height:15px}
@media(min-width:860px){.become-grid{grid-template-columns:1.1fr .9fr}}

/* ============================================================
   20. FAQ — sticky rail + accordion
   ============================================================ */
.faq{padding-block:var(--section-y)}
.faq-grid{display:grid;gap:clamp(2rem,5vw,3rem)}
.faq-head h2{font-size:clamp(2rem,5.4vw,3rem);font-weight:800;letter-spacing:-.03em}
.faq-head p{margin-top:.9rem;color:var(--muted)}
.faq-contact{margin-top:1.3rem;display:grid;gap:.6rem}
.faq-contact li{display:flex;align-items:center;gap:.6rem;font-weight:600}
.faq-contact svg{width:20px;height:20px;color:var(--magenta)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:none;border:none;cursor:pointer;padding:1.15rem 0;text-align:left;font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--ink)}
.faq-icon{position:relative;width:22px;height:22px;flex:none;color:var(--magenta)}
.faq-icon svg{position:absolute;inset:0;width:22px;height:22px;transition:opacity .2s,transform .2s}
.faq-icon .ic-minus{opacity:0}
.faq-q[aria-expanded="true"] .ic-plus{opacity:0;transform:rotate(90deg)}
.faq-q[aria-expanded="true"] .ic-minus{opacity:1}
.faq-a{overflow:hidden;max-height:0;transition:max-height .3s ease}
.faq-a>div{padding-bottom:1.15rem;color:var(--muted);max-width:60ch}
.faq-a a{color:var(--magenta-dark);font-weight:600}
@media(min-width:860px){.faq-grid{grid-template-columns:.8fr 1.2fr;align-items:start}.faq-head{position:sticky;top:96px}}

/* ============================================================
   21. Final CTA — photographic editorial close (bookends the hero)
   ============================================================ */
.final{position:relative;overflow:hidden;color:#fff;display:flex;align-items:flex-end;min-height:clamp(500px,72vh,700px)}
.final-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.final-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(23,7,16,.92) 4%,rgba(23,7,16,.55) 40%,rgba(138,26,93,.28) 100%)}
.final-inner{position:relative;z-index:2;padding-block:clamp(2.6rem,8vw,4.5rem);max-width:40rem}
.final-mark{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.86rem;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);border-radius:var(--pill);padding:.3rem .8rem .3rem .35rem;margin-bottom:1.1rem}
.final-mark img{width:26px;height:26px;border-radius:50%;background:#fff;padding:2px}
.final h2{font-size:clamp(2.5rem,9vw,4.2rem);font-weight:800;letter-spacing:-.035em;line-height:1}
.final-inner>p{margin-top:1.1rem;color:rgba(255,255,255,.9);font-size:1.08rem;max-width:32rem}
.final-actions{margin-top:1.8rem;display:flex;gap:.7rem;flex-wrap:wrap}
.final-actions .btn{flex:1 1 auto}
.final-mini{margin-top:1.5rem;display:flex;gap:1.1rem 1.4rem;flex-wrap:wrap;font-size:.85rem;font-weight:600}
.final-mini a{display:inline-flex;align-items:center;gap:.4rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:1px}
.final-mini svg{width:15px;height:15px}
@media(min-width:560px){.final-actions .btn{flex:0 0 auto}}

/* ============================================================
   22. Footer
   ============================================================ */
.site-footer{background:var(--plum-ink);color:rgba(255,255,255,.8)}
.footer-grid{display:grid;gap:2.2rem;padding-block:clamp(2.8rem,6vw,4rem)}
.footer-brand img{width:52px;height:52px;border-radius:50%;background:#fff}
.footer-tagline{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:#fff;margin-top:1rem}
.footer-note{margin-top:.7rem;font-size:.86rem;max-width:32ch}
.footer-social{margin-top:1.2rem;display:flex;gap:.6rem}
.footer-social a{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-content:center;transition:background .2s}
.footer-social a:hover{background:var(--magenta)}
.footer-social svg{width:19px;height:19px;color:#fff}
.footer-col h3{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:1rem;font-family:var(--font-body);font-weight:700}
.footer-col ul{display:grid;gap:.6rem}
.footer-col a{font-size:.94rem;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-marks img{height:34px;width:auto;background:#fff;border-radius:10px;padding:.4rem .6rem;margin-top:.3rem}
.footer-marks .fm-base{height:44px;margin-top:.8rem}
.footer-major{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;margin-top:1rem;color:rgba(255,255,255,.55);font-weight:700}
.footer-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;justify-content:space-between;padding-block:1.3rem;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem}
.footer-bar a{border-bottom:1px solid rgba(255,255,255,.3)}
/* Quiet sponsor credit in the bottom bar — a horizontal lockup between the copyright
   and the legal link, deliberately smaller than the four footer columns above. */
.footer-credit{display:inline-flex;align-items:center;gap:.45rem;margin:0;font-size:.74rem;line-height:1;color:rgba(255,255,255,.55);white-space:nowrap}
.footer-bar .footer-credit a{display:block;line-height:0;border-bottom:none;opacity:.82;transition:opacity .2s ease}
.footer-bar .footer-credit a:hover,.footer-bar .footer-credit a:focus-visible{opacity:1}
.footer-credit img{height:16px;width:auto;display:block}
@media(min-width:760px){
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .footer-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:1.4rem}
  .footer-credit{justify-self:center}
  .footer-legal{justify-self:end}
}

/* ============================================================
   Lightbox (map + showreel)
   ============================================================ */
.lightbox{position:fixed;inset:0;z-index:var(--z-lightbox);background:rgba(20,6,14,.9);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1.2rem;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox-inner{position:relative;max-width:min(920px,94vw);max-height:90vh}
.lightbox-inner img{max-width:100%;max-height:90vh;width:auto;border-radius:var(--r-md);box-shadow:var(--shadow-photo)}
.lb-video{width:min(920px,94vw);aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#000}
.lb-video iframe{width:100%;height:100%;border:0}
.lb-video video{width:100%;height:100%;display:block;border:0;background:#000}
.lightbox-close{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:50%;background:#fff;border:none;cursor:pointer;display:grid;place-content:center;box-shadow:var(--shadow-soft)}
.lightbox-close svg{width:22px;height:22px;color:var(--ink)}
/* Video close control gets its own row above the frame, never over the footage. */
.lightbox.media-video .lightbox-inner{padding-top:56px}
.lightbox.media-video .lightbox-close{top:0;right:0}

/* Menu scroll lock: pin the body at its current offset (JS sets top:-scrollY)
   instead of toggling overflow on this scroll-container body, which used to
   shift the resolved scroll origin and jump the viewport. No reflow of the
   sticky announce/nav, exact scroll position restored on close. */
body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* back to top */
.to-top{position:fixed;right:16px;bottom:16px;z-index:var(--z-totop);width:46px;height:46px;border-radius:50%;background:var(--magenta);color:#fff;border:none;cursor:pointer;display:grid;place-content:center;box-shadow:var(--shadow-lift);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,visibility .25s,transform .25s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top svg{width:22px;height:22px}
/* Keep the back-to-top button clear of mobile safe-area chrome. */
@media(max-width:879px){
  .to-top{bottom:calc(16px + env(safe-area-inset-bottom))}
}
/* ============================================================
   Motion — content visible by default; reveals enhance only
   ============================================================ */
/* One grammar: every content unit rises ~16px and fades, staggered by group.
   Hidden states are gated behind .motion-ready (added by JS only once motion is
   confirmed), so no-JS and reduced-motion leave every unit fully visible. */
.motion-ready .motion-item{opacity:0;transform:translate3d(0,16px,0);transition:opacity .58s cubic-bezier(.22,1,.36,1) var(--motion-delay,0ms),transform .58s cubic-bezier(.16,1,.3,1) var(--motion-delay,0ms);will-change:opacity,transform}
.motion-ready .motion-item.is-motion-in{opacity:1;transform:translate3d(0,0,0);will-change:auto}
/* Media reveal — a quiet image wipe for standalone photos. Uses clip-path only
   (never transform) so it never collides with the hover scale on the same img.
   The figure still rises as a .motion-item; only the photo inside wipes up. */
.motion-ready .motion-media img{clip-path:inset(0 0 100% 0);transition:clip-path .85s cubic-bezier(.16,1,.3,1) var(--motion-delay,0ms),transform .5s cubic-bezier(.2,.7,.2,1)}
.motion-ready .motion-media.is-motion-in img{clip-path:inset(0)}
.js .hero-overlay>*{opacity:0;animation:olt-hero-enter .65s cubic-bezier(.16,1,.3,1) forwards}.js .hero-overlay>:nth-child(1){animation-delay:80ms}.js .hero-overlay>:nth-child(2){animation-delay:150ms}.js .hero-overlay>:nth-child(3){animation-delay:220ms}.js .hero-overlay>:nth-child(4){animation-delay:290ms}.js .hero-overlay>:nth-child(5){animation-delay:360ms}@keyframes olt-hero-enter{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
/* How-the-night-works — connected step progression. The rail (::after) draws
   toward the last step while the three steps enter in sequence. Default is the
   complete, static progression (no-JS / reduced-motion); .motion-ready collapses
   it so it can draw once .steps.is-live is set as the block is approached. */
.steps::after{content:"";position:absolute;z-index:0;left:25px;top:52px;bottom:52px;width:2px;border-radius:2px;transform-origin:top;transform:scaleY(1);background:linear-gradient(180deg,#fff,rgba(255,255,255,.55));pointer-events:none}
.motion-ready .steps::after{transform:scaleY(0);transition:transform .95s cubic-bezier(.22,1,.36,1) .12s}
.motion-ready .steps.is-live::after{transform:scaleY(1)}
.motion-ready .steps .step{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.16,1,.3,1)}
.motion-ready .steps.is-live .step{opacity:1;transform:none}
.motion-ready .steps.is-live .step:nth-child(2){transition-delay:.18s}
.motion-ready .steps.is-live .step:nth-child(3){transition-delay:.36s}
@media(min-width:760px){
  .steps::after{left:64px;right:16px;top:24px;bottom:auto;width:auto;height:2px;transform-origin:left;transform:scaleX(1);background:linear-gradient(90deg,#fff,rgba(255,255,255,.5))}
  .motion-ready .steps::after{transform:scaleX(0)}
  .motion-ready .steps.is-live::after{transform:scaleX(1)}
}
/* Countdown digit roll — each changing numeral is a column of stacked cells that
   slides up one line on update (Apple-stopwatch feel, restrained). Built only
   with JS + motion wanted; the containers keep tabular figures so nothing shifts. */
.roller{display:inline-flex;line-height:1;font-variant-numeric:tabular-nums}
.roll{display:inline-block;overflow:hidden;height:1em;line-height:1;text-align:center}
.roll-track{display:flex;flex-direction:column;transform:translateY(0);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.roll-cell{display:block;height:1em;line-height:1}
/* Hero testimonial — a composed lockup entrance: the quote icon drops in, the
   intentional phrase spans cascade (opacity only, so nothing splits or shifts
   across responsive widths and the SR text stays one coherent quote), then the
   attribution settles. One owner (the blockquote); no double fade. */
.motion-ready .hero-testimonial>svg{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.motion-ready .hero-testimonial.is-motion-in>svg{opacity:1;transform:none}
.motion-ready .hero-testimonial .ht-line{opacity:0;transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.motion-ready .hero-testimonial.is-motion-in .ht-line{opacity:1}
.motion-ready .hero-testimonial.is-motion-in .ht-line:nth-child(1){transition-delay:.14s}
.motion-ready .hero-testimonial.is-motion-in .ht-line:nth-child(2){transition-delay:.30s}
.motion-ready .hero-testimonial.is-motion-in .ht-line:nth-child(3){transition-delay:.46s}
.motion-ready .hero-testimonial>footer{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.motion-ready .hero-testimonial.is-motion-in>footer{opacity:1;transform:none;transition-delay:.5s}
/* Venue route — the figure rises/fades as a normal motion-item; on the same flip
   its illustrative line draws left-to-right and the precinct stops pop in sequence. */
.motion-ready .venue-route .vr-street{stroke-dasharray:540;stroke-dashoffset:540;transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1) .12s}
.motion-ready .venue-route.is-motion-in .vr-street{stroke-dashoffset:0}
.motion-ready .venue-route .vr-stop{opacity:0;transition:opacity .5s ease .18s}
.motion-ready .venue-route.is-motion-in .vr-stop{opacity:1}
.motion-ready .venue-route.is-motion-in .vr-stop:nth-of-type(2){transition-delay:.34s}
.motion-ready .venue-route.is-motion-in .vr-stop:nth-of-type(3){transition-delay:.5s}
.motion-ready .venue-route.is-motion-in .vr-stop:nth-of-type(4){transition-delay:.66s}
.motion-ready .venue-route.is-motion-in .vr-stop:nth-of-type(5){transition-delay:.82s}
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .mobile-menu.open,.mobile-menu.open>*{animation:none}
  .motion-ready .motion-item,.motion-ready .motion-item.is-motion-in{opacity:1;transform:none;transition:none}
  .motion-ready .motion-media img{clip-path:none;transform:none;transition:none}
  .motion-ready .steps .step{opacity:1;transform:none;transition:none}
  .motion-ready .steps::after,.motion-ready .steps.is-live::after{transform:none;transition:none}
  .js .hero-overlay>*{opacity:1;animation:none;transform:none}
  .roll-track{transition:none}
  .motion-ready .hero-testimonial>svg,.motion-ready .hero-testimonial>footer,.motion-ready .hero-testimonial .ht-line{opacity:1;transform:none;transition:none}
  .motion-ready .venue-route .vr-street{stroke-dashoffset:0;transition:none}
  .motion-ready .venue-route .vr-stop{opacity:1;transition:none}
  .tile img,.story-figure img,.mw-item img,.btn,.exp-slide{transition:none}
  .olt-lb{transition:none}
  .olt-lb-img{animation:none !important}
}

/* ============================================================
   23. Footer legal row + deferred privacy route (Stage 6 copy pending)
   ============================================================ */
.footer-legal{display:inline-flex;align-items:center;gap:.5rem 1.1rem;flex-wrap:wrap}
.footer-legal a{display:inline-flex;align-items:center;min-height:44px}

/* deferred privacy stub page (privacy.html) — no invented legal content */
.legal-page{min-height:100vh;display:flex;flex-direction:column;background:var(--white)}
.legal-main{flex:1;width:100%;max-width:44rem;margin-inline:auto;padding:clamp(2.5rem,8vw,5rem) clamp(1.1rem,5vw,2.5rem)}
.legal-main .kicker{margin-bottom:1rem}
.legal-main h1{font-size:clamp(2rem,6vw,3rem);font-weight:800;letter-spacing:-.03em}
.legal-note{margin-top:1.3rem;color:var(--muted);font-size:1.05rem;max-width:38rem}
.legal-deferred{margin-top:1.6rem;display:inline-flex;align-items:center;gap:.55rem;background:var(--pink-wash);border:1px solid var(--pink-line);border-radius:var(--pill);padding:.6rem 1.1rem;font-weight:600;font-size:.9rem;color:var(--magenta-dark)}
.legal-deferred svg{width:18px;height:18px;flex:none}
.legal-contact{margin-top:1.8rem;display:grid;gap:.55rem;font-weight:600}
.legal-contact li{display:flex;align-items:center;gap:.6rem}
.legal-contact svg{width:20px;height:20px;color:var(--magenta);flex:none}
.legal-back{margin-top:2.2rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--magenta-dark)}
.legal-back svg{width:18px;height:18px}

/* ============================================================
   24. Facebook Page Plugin — real timeline iframe + honest fallback
   ============================================================ */
.social-embed{display:grid;gap:.9rem}
.fb-frame{background:#fff;border:1px solid var(--pink-line);border-radius:var(--r-lg);padding:1rem;box-shadow:var(--shadow-soft)}
.fb-top{display:flex;align-items:center;gap:.7rem;padding:.3rem .4rem 1rem;border-bottom:1px solid var(--line-soft)}
.fb-avatar{width:44px;height:44px;border-radius:50%;background:#1877f2;color:#fff;display:grid;place-content:center;flex:none}
.fb-avatar svg{width:27px;height:27px}
.fb-top strong{display:block;font-family:var(--font-display);font-weight:700;font-size:.98rem;line-height:1.15}
.fb-top>span>span{font-size:.8rem;color:var(--muted)}
.fb-embed{position:relative;margin-top:1rem;border-radius:var(--r-sm);overflow:hidden;min-height:560px;max-width:500px;background:var(--pink-wash)}
.fb-embed iframe{display:block;width:100%;min-height:560px;border:0}
.fb-fallback{font-size:.82rem;color:var(--muted);text-align:center}
.fb-fallback a{color:var(--magenta-dark);font-weight:600;display:inline-flex;align-items:center;gap:.3rem}
.fb-fallback svg{width:13px;height:13px}

/* ============================================================
   25. Venue / getting there — custom location lockup above the footer
   ============================================================ */
.venue{padding-block:var(--section-y);background:var(--pink-wash)}
.venue-grid{display:grid;gap:clamp(2rem,5vw,3.2rem);align-items:center}
.venue-copy h2{font-size:clamp(2rem,5.4vw,3.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.06}
.venue-copy h2 em{font-style:normal;color:var(--magenta)}
.venue-copy .kicker{margin-bottom:.9rem}
.venue-lede{margin-top:1rem;color:var(--muted);font-size:1.05rem;max-width:34rem}
.venue-facts{margin-top:1.7rem;display:grid;gap:.9rem}
.venue-facts li{display:flex;gap:.85rem;align-items:flex-start}
.vf-ic{width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--pink-line);display:grid;place-content:center;flex:none;box-shadow:var(--shadow-soft)}
.vf-ic svg{width:22px;height:22px;color:var(--magenta)}
.vf-copy{display:grid;gap:.15rem}
.vf-copy strong{font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.2}
.vf-copy span{font-size:.9rem;color:var(--muted)}
.venue-actions{margin-top:1.8rem;display:flex;gap:.7rem;flex-wrap:wrap}
.venue-actions .btn svg{width:18px;height:18px}

.venue-map-wrap{display:grid;gap:1rem}
.venue-map{position:relative;width:100%;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-photo);background:#e7e0e4;aspect-ratio:1/1;max-height:460px}
.venue-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.venue-mapcard{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.96);border-radius:var(--pill);padding:.45rem .9rem .45rem .45rem;box-shadow:var(--shadow-soft);max-width:calc(100% - 28px)}
.vm-pin{width:34px;height:34px;border-radius:50%;background:var(--magenta);color:#fff;display:grid;place-content:center;flex:none}
.vm-pin svg{width:19px;height:19px}
.venue-mapcard strong{display:block;font-family:var(--font-display);font-weight:700;font-size:.88rem;line-height:1.1}
.venue-mapcard>span>span{font-size:.76rem;color:var(--muted)}

.venue-route{margin:0;background:#fff;border:1px solid var(--pink-line);border-radius:var(--r-lg);padding:1.1rem 1.15rem .9rem;box-shadow:var(--shadow-soft)}
.venue-route>svg{display:block;width:100%;height:auto;overflow:visible}
.vr-street{fill:none;stroke:var(--magenta);stroke-width:3;stroke-linecap:round;opacity:.6}
.vr-stop circle{fill:#fff;stroke:var(--magenta);stroke-width:3}
.vr-stop.vr-hero circle{fill:var(--magenta)}
.vr-stop text{font-family:var(--font-display);font-weight:700;font-size:15px;fill:var(--ink);text-anchor:middle}
.vr-stop.vr-hero text{fill:var(--magenta-dark)}
.venue-route figcaption{margin-top:.55rem;font-size:.78rem;color:var(--muted-2);text-align:center}

.venue-fallback{font-size:.82rem;color:var(--muted);text-align:center}
.venue-fallback a{color:var(--magenta-dark);font-weight:600;display:inline-flex;align-items:center;gap:.3rem}
.venue-fallback svg{width:13px;height:13px}

@media(min-width:860px){.venue-grid{grid-template-columns:1.02fr .98fr}.venue-map{aspect-ratio:4/3;max-height:none}}

/* ============================================================
   Photography integration — new lockups (Stage 6)
   ============================================================ */
/* How-the-night documentary photo + Switch'D-style proof overlay */
.night-photo{position:relative;margin:clamp(2.2rem,5vw,3rem) 0 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 26px 64px -32px rgba(0,0,0,.72);background:var(--magenta-deep)}
.night-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:60% 42%;aspect-ratio:4/5}
.night-photo-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,8,15,.98) 0%,rgba(20,8,15,.86) 36%,rgba(20,8,15,.42) 64%,rgba(20,8,15,.06) 84%);pointer-events:none}
/* How the night works — same designed-surface grammar as an .exp-slide */
.night-photo-cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.2rem,3.6vw,1.9rem);color:#fff;display:flex;flex-direction:column;align-items:flex-start}
.night-photo-cap>svg{width:28px;height:28px;color:#ff8fd0;margin-bottom:.6rem}
.night-photo-cap .np-t{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,3.6vw,1.75rem);letter-spacing:-.015em;line-height:1.08;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.night-photo-cap .np-d{margin-top:.55rem;color:#fff;font-size:clamp(.92rem,2.4vw,1.02rem);line-height:1.45;max-width:42ch;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.night-photo-cap .proof-row{position:static;padding:0;margin-top:1rem}
.proof-row{position:absolute;left:0;bottom:0;display:flex;flex-wrap:wrap;gap:.5rem;padding:clamp(.9rem,3vw,1.35rem)}
.proof-pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(20,8,15,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);border-radius:var(--pill);padding:.44rem .86rem;color:#fff;font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;line-height:1}
.proof-dot{width:6px;height:6px;border-radius:50%;background:#ffd6ee;box-shadow:0 0 9px rgba(255,214,238,.9);flex:none}
@media(min-width:760px){.night-photo img{aspect-ratio:21/9}}

/* Community story overlay (primary figure) */
.story-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,8,15,.28),transparent 46%);pointer-events:none}
.story-proof{position:absolute;left:14px;right:auto;bottom:14px;max-width:calc(100% - 28px);display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.94);color:var(--ink);border:1px solid rgba(255,255,255,.75);border-radius:var(--pill);padding:.5rem .9rem;font-family:var(--font-body);font-weight:700;font-size:clamp(.76rem,2.2vw,.88rem);letter-spacing:0;line-height:1.2;box-shadow:var(--shadow-soft);text-shadow:none}
.story-proof::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--magenta);flex:none}
.story-primary img{object-position:50% 42%}
.story-secondary img{object-position:50% 35%}

/* Lineup visual peak */
.lineup-peak{position:relative;margin:clamp(1.9rem,4vw,2.7rem) 0 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-photo)}
.lineup-peak img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:16/9}
.lineup-peak-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,8,15,.72),transparent 52%);pointer-events:none}
.lineup-peak-cap{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:.55rem;padding:clamp(.9rem,3vw,1.35rem);color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,2.2vw,1.26rem)}
.lineup-peak-cap svg{width:22px;height:22px;color:#ff8fd0;flex:none}
@media(min-width:760px){.lineup-peak img{aspect-ratio:2.4/1}}

/* Venue aerial proof band */
.venue-aerials{margin-top:clamp(1.6rem,4vw,2.4rem);display:grid;gap:1rem}
.venue-aerial{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft);background:#e7e0e4}
.venue-aerial img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:16/9;transition:transform .6s ease}
.venue-aerial:hover img{transform:scale(1.04)}
.venue-aerial-cap{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.94);border-radius:var(--pill);padding:.4rem .82rem;font-weight:600;font-size:.78rem;box-shadow:var(--shadow-soft)}
.venue-aerial-cap .d{width:8px;height:8px;border-radius:50%;background:var(--magenta);flex:none}
@media(min-width:640px){.venue-aerials{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.venue-aerial img,.lineup-peak img,.story-figure img,.night-photo img{transition:none}}

/* ============================================================
   D. Desktop-native composition (min-width only)

   Mobile stays the primary experience and is untouched. These rules only
   correct elements that were visibly stretched out of their mobile layout
   once the viewport passes ~880-1000px. No new sections, no equal-card grids.
   ============================================================ */

/* D1 · Bunting band.
   The artwork is intrinsically 640x140. Full-bleed at 1440 upscales it 2.25x and
   softens it into a blurry strip. Contain it to a centred run just above its
   intrinsic width so it stays crisp and reads as bunting hung over the fact rail. */
@media(min-width:880px){
  .flags-band{width:min(100%,var(--wrap));margin-inline:auto;margin-top:0}
  .hero-facts-wrap{padding-top:clamp(.9rem,2vw,1.5rem)}
}

/* D2 · Major sponsor band.
   Centred mobile stack left a near-empty magenta slab at desktop width. Re-set it
   as a horizontal lockup: logo anchoring the left, label and note reading beside it. */
@media(min-width:1000px){
  .major-wrap{max-width:62rem;margin-inline:auto}
  .major-card{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:clamp(2rem,4vw,3rem);row-gap:.5rem;align-items:center;text-align:left;
    padding:clamp(2.1rem,3.2vw,2.7rem) clamp(2.4rem,4vw,3.2rem);
  }
  .major-logo{grid-column:1;grid-row:1/3;margin:0;height:clamp(96px,8vw,112px)}
  .major-label{grid-column:2;grid-row:1;align-self:end}
  .major-note{grid-column:2;grid-row:2;align-self:start;margin:0;max-width:44ch}
}

/* D3 · Lead testimonial.
   At 1440 the display quote ran to ~95 characters a line. Keep the card full width,
   hold the quote to a readable measure, and set the mark and attribution either side
   so the extra width is composed rather than left as dead space. */
@media(min-width:1000px){
  .quote-lead{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:clamp(1.5rem,2.6vw,2.4rem);align-items:start;
    padding:clamp(2.4rem,3.6vw,3.1rem) clamp(2.4rem,4vw,3.2rem);
  }
  .quote-lead svg{grid-column:1;grid-row:1;margin:0;width:42px;height:42px}
  .quote-lead p{grid-column:2;grid-row:1;max-width:34ch}
  .quote-lead footer{grid-column:3;grid-row:1;align-self:end;margin:0;text-align:right;white-space:nowrap}
}

/* ============================================================
   E. Zach's final alignment pass
   ============================================================ */
/* The closing CTA is an intentional, centred final invitation at every width. */
.final{justify-content:center;align-items:center}
.final-inner{max-width:46rem;margin-inline:auto;text-align:center}
.final-mark{justify-content:center}
.final-inner>p{margin-inline:auto}
.final-actions,.final-mini{justify-content:center}

/* Keep the experience copy unmistakably left-led, while the image rail follows
   the same desktop content edge instead of feeling clipped against the viewport. */
.exp-head{text-align:left}
.exp-deck{--exp-edge:max(clamp(1.1rem,5vw,2.5rem),calc((100vw - var(--wrap))/2 + clamp(1.1rem,5vw,2.5rem)))}
.exp-track{padding-inline:var(--exp-edge)}
.exp-prev{left:var(--exp-edge)}
.exp-next{right:var(--exp-edge)}

/* On desktop, anchor the hero copy explicitly to the left and move the video
   control into the quiet lower-right corner of the image. */
/* A deeper mauve sits cleanly between the former light accent and event magenta. */
.hero h1 em{position:relative;color:#b866a0;width:fit-content;border:0;border-radius:0;padding:0;margin-left:0;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#b866a0;font-style:italic;text-shadow:0 2px 16px rgba(20,8,15,.5)}

@media(min-width:760px){
  /* Slider controls sit under the image rail, aligned to its right edge. */
  .exp-nav{top:auto;bottom:0;transform:none;background:var(--magenta);color:#fff}
  .exp-nav:hover{background:var(--magenta-dark);transform:scale(1.05)}
  .exp-prev{left:auto;right:calc(var(--exp-edge) + 58px)}
  .exp-next{right:var(--exp-edge)}
}

@media(min-width:880px){
  .hero-overlay{margin-left:max(clamp(1.1rem,5vw,2.5rem),calc((100vw - var(--wrap))/2 + clamp(1.1rem,5vw,2.5rem)));margin-right:auto;text-align:left}
  .hero-play{top:auto;left:auto;right:max(clamp(1.1rem,5vw,2.5rem),calc((100vw - var(--wrap))/2 + clamp(1.1rem,5vw,2.5rem)));bottom:clamp(1.4rem,3vw,2.6rem)}
  /* Countdown stays top-right but shares the Watch button's right alignment. */
  .badge-days{top:clamp(70px,7.5vw,110px);right:max(clamp(1.1rem,5vw,2.5rem),calc((100vw - var(--wrap))/2 + clamp(1.1rem,5vw,2.5rem)));bottom:auto}
  .exp-head{margin-left:max(0px,calc((100vw - var(--wrap))/2));margin-right:0}
  /* Desktop becomes a contained two-up slider. It still scrolls, but no partial
     third card leaks from the right edge of the section. */
  .exp-deck{margin-left:var(--exp-edge);margin-right:var(--exp-edge);overflow:hidden}
  .exp-track{padding-inline:0}
  .exp-slide{flex-basis:calc((100% - clamp(.7rem,2vw,1rem))/2);max-width:none}
  .exp-prev{right:58px}
  .exp-next{right:0}
}

/* Full-resolution bunting sits behind the event facts on desktop. */
@media(min-width:880px){
  .hero-facts-stage{position:relative;isolation:isolate;height:min(548px,calc(50vw - 2.5rem));}
  .hero-facts-stage .flags-band{position:absolute;z-index:0;top:0;left:50%;transform:translateX(-50%);width:min(calc(100% - 5rem),1120px);max-width:none;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center top;margin:0;}
  .hero-facts-stage .hero-facts-wrap{position:relative;z-index:1;}
}

/* Keep the Zelexis credit above the copyright on mobile. */
@media(max-width:759px){
  .footer-credit{order:-1;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:.28rem;white-space:normal;}
}

/* Preserve the original fact-rail position while letting the high-res bunting sit behind it. */
.hero-facts-stage{position:relative;isolation:isolate;padding-top:21.875vw;}
.hero-facts-stage .flags-band{position:absolute;z-index:0;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:none;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center top;margin:0;}
.hero-facts-stage .hero-facts-wrap{position:relative;z-index:1;}
@media(min-width:880px){
  .hero-facts-stage{padding-top:min(245px,calc(21.875vw - 17.5px));}
  .hero-facts-stage .flags-band{width:min(calc(100% - 5rem),1120px);height:100%;object-fit:cover;object-position:center top;}
}

/* Tablet uses the desktop-style lower-right video control; mobile stays unchanged. */
@media(min-width:560px) and (max-width:879px){
  .hero-play{top:auto;left:auto;right:clamp(1.1rem,5vw,2.5rem);bottom:clamp(1.4rem,3vw,2.6rem);}
}

/* The desktop bunting ends exactly with the fact-card block. */
@media(min-width:880px){.hero-facts-stage{height:auto;}}
@media(min-width:880px){.hero-facts-stage .hero-facts-wrap{padding-bottom:0;}}
@media(min-width:880px){.night-aside{margin-inline:auto;}.night-aside-copy{text-align:center;}.night-aside{justify-content:center;}}
@media(min-width:880px){.night-aside-copy{text-align:left;}}
@media(min-width:880px){.night-aside{justify-content:flex-start;}}
/* Proven three-bar hamburger animation, shared with the Switch'd navigation. */
.menu-btn .menu-icon{position:relative;width:22px;height:16px;display:inline-block;flex:none}.menu-btn .menu-bar{position:absolute;left:0;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:transform .24s cubic-bezier(.16,1,.3,1),opacity .24s cubic-bezier(.16,1,.3,1),top .24s cubic-bezier(.16,1,.3,1)}.menu-btn .menu-bar:nth-child(1){top:0}.menu-btn .menu-bar:nth-child(2){top:7px}.menu-btn .menu-bar:nth-child(3){top:14px}.menu-btn[aria-expanded="true"] .menu-bar:nth-child(1){top:7px;transform:rotate(45deg)}.menu-btn[aria-expanded="true"] .menu-bar:nth-child(2){opacity:0}.menu-btn[aria-expanded="true"] .menu-bar:nth-child(3){top:7px;transform:rotate(-45deg)}
/* Keep a canonical clear gap beneath the mobile film control on short screens. */
@media(max-width:559px){.hero-stage{align-items:flex-start;}.hero-overlay{padding-top:clamp(7.25rem,20vw,8.5rem);}}
@media(min-width:560px) and (max-width:879px){.hero-overlay{margin-left:clamp(1.1rem,5vw,2.5rem);margin-right:auto;text-align:left;}}
@media(min-width:560px) and (max-width:879px){.exp-head{margin-left:0;margin-right:0;text-align:left;}.exp-deck{margin-left:var(--exp-edge);margin-right:var(--exp-edge);overflow:hidden;}.exp-track{padding-inline:0;}.exp-slide{flex-basis:calc((100% - clamp(.7rem,2vw,1rem))/2);max-width:none;}.exp-prev{right:58px;}.exp-next{right:0;}}
/* No mobile-only hamburger override. An earlier @media(max-width:559px) block
   re-stated the same transforms but forced translateZ(0) on the parent <span>
   and dropped will-change, which is exactly what made the icon jump on real
   mobile browsers. The base rules above are resolution-independent. */
@media(max-width:759px){.footer-bar{display:flex;flex-direction:row;align-items:flex-start;}.footer-credit{order:0;flex:0 0 100%;}.footer-bar>p:first-child{order:1;}.footer-legal{order:2;margin-left:auto;}}
.footer-credit{flex-direction:column;align-items:center;text-align:center;gap:.28rem;}
.footer-credit{gap:.38rem;}
@media(max-width:759px){.footer-bar{flex-direction:column;align-items:center;}.footer-credit,.footer-bar>p:first-child,.footer-legal{width:100%;text-align:center;}.footer-legal{margin-left:0;}}
@media(max-width:759px){.footer-bar>p:first-child,.footer-legal{text-align:left;}.footer-legal{align-self:flex-start;}}
/* Footer refinement: quiet, even hierarchy across sizes. */
.footer-credit{padding:.2rem 0;gap:.42rem;}.footer-credit .sponsorship-label{line-height:1.2;}.footer-bar{row-gap:.85rem;}
.mobile-menu-credit{justify-items:end;text-align:right;gap:.42rem;}.mobile-menu-credit .sponsorship-label{line-height:1.2;}
/* Final lower-footer layout. */
@media(max-width:759px){.footer-bar{display:flex;flex-direction:column;align-items:center;gap:.85rem;text-align:center;}.footer-credit,.footer-bar>p:first-child,.footer-legal{order:initial;width:auto;text-align:center;align-self:center;}.footer-credit{flex-basis:auto;}.footer-bar>p:first-child{line-height:1.45;}.footer-bar>p:first-child span{display:block;}.footer-legal{margin:0;}}
@media(min-width:760px){.footer-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;row-gap:.35rem;}.footer-credit{grid-column:1;grid-row:1;justify-self:start;flex-direction:row;align-items:center;text-align:left;padding:0;}.footer-credit .sponsorship-label{display:inline;}.footer-bar>p:first-child{grid-column:1;grid-row:2;}.footer-legal{grid-column:3;grid-row:2;justify-self:end;}}
@media(max-width:759px){.footer-credit{order:0;}.footer-bar>p:first-child{order:1;}.footer-legal{order:2;}}
@media(min-width:760px){.footer-credit br,.footer-bar>p:first-child br{display:none;}.footer-bar>p:first-child span{display:inline;}}
.mobile-menu-social-row{align-items:flex-end;}
.mobile-menu-social{position:relative;}.mobile-menu-credit{position:absolute;top:0;right:0;}.mobile-menu-social-row{align-items:center;}
.mobile-menu-credit{top:0;right:0;align-content:start;}.mobile-menu-credit .sponsorship-label{margin:0;}
.mobile-menu-social{position:static;}.mobile-menu-credit{position:static;transform:none;justify-items:end;text-align:right;gap:.3rem;}.mobile-menu-social-row{align-items:center;}
.mobile-menu-credit{justify-items:center;text-align:center;gap:.38rem;}
.mobile-menu-social-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;}.mobile-menu-social-links{justify-self:center;}.mobile-menu-credit{justify-self:center;}
.mobile-menu-social-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;}.mobile-menu-social-links{justify-self:auto;}.mobile-menu-credit{position:static;justify-self:auto;justify-items:end;text-align:right;gap:.3rem;}.mobile-menu-social{position:static;}
.mobile-menu-social-row{align-items:center;}.mobile-menu-credit{align-self:center;}
/* Privacy-page rhythm and contact treatment. */
.legal-main h2{margin-top:2rem;font-size:1.22rem;letter-spacing:-.015em;}.legal-main h2+.legal-note{margin-top:.5rem;}.legal-contact li{gap:.7rem;}.legal-contact li::before{display:grid;place-items:center;width:20px;height:20px;color:var(--magenta);font-size:1rem;line-height:1;flex:none;}.legal-contact li:first-child::before{content:"✉";}.legal-contact li:nth-child(2)::before{content:"☎";}
.legal-contact li::before{content:none!important;display:none;}