/* ════════════════════════════════════════════════════════════════════════════
   JUST CHILL PUB & GRILL — justchillpub.com
   Design system: "THE BOARD"

   Deliberately shares no design DNA with astoriapizzaandpasta.com, the owner's
   other Lynnwood site. That one is warm and Italian: cream #F5F5F5 base, red
   #C62828 with gold #FFB300, Playfair Display serif, rounded 8–16px cards, a
   scrolling red ticker. Two sites from the same studio in the same town must not
   read as one template.

   So this one goes the other way on every axis. The palette is sampled from
   Just Chill's OWN photographs — the blue pool felt, the cyan and violet neon in
   the back room — not from a brand guess. Type is wide and athletic rather than
   serif. Corners are square. Numbers are monospaced, like a scoreboard. The
   signage red survives only as a small brand mark, never as the accent.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
/* Archivo carries a width axis, so one file gives both the wide athletic
   display voice (wdth 125 / wght 800) and a normal reading voice (wdth 100 /
   wght 400). DM Mono handles every numeral, price, time and label. */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-var-latin.woff2') format('woff2-variations');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';src:url('../fonts/dmmono-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';src:url('../fonts/dmmono-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  /* Surfaces — cool blue-black, the room with the lights down.
     (Astoria's base is warm neutral; this reads unmistakably different.) */
  --night:#060b11;
  --deep:#0a121b;
  --raise:#101b27;
  --panel:#15222f;
  --felt:#12414f;          /* sampled: the blue pool-table felt */

  /* Ink */
  --chalk:#eaf2f7;         /* cool off-white */
  --mute:#8fa3b5;
  --faint:#5a6e80;
  --ghost:#3c4b59;

  /* Accents — both sampled from the venue's own neon */
  --ice:#3fd0f0;           /* PRIMARY */
  --ice-deep:#1893b1;
  --volt:#8b5cf6;          /* nightlife / karaoke */
  --live:#3dd68c;          /* open-now */
  /* The signage red. Brand mark only — never a button, never a heading. */
  --mark:#d5323a;

  /* Hairlines — no cards, no fills: structure comes from rules */
  --rule:rgba(154,190,214,.14);
  --rule-2:rgba(154,190,214,.28);
  --wash:rgba(63,208,240,.05);

  /* Type scale */
  --t-mega:clamp(2.9rem,8.5vw,7.5rem);
  --t-d1:clamp(2.1rem,5.4vw,4.4rem);
  --t-d2:clamp(1.7rem,3.6vw,2.9rem);
  --t-d3:clamp(1.3rem,2.2vw,1.8rem);
  --t-body:clamp(.99rem,.3vw + .92rem,1.06rem);
  --t-sm:.875rem;
  --t-xs:.75rem;
  --t-mono:.688rem;

  /* Space */
  --gut:clamp(1.15rem,4vw,2.75rem);
  --sec:clamp(4.25rem,10vh,7.5rem);
  --sec-sm:clamp(2.75rem,6vh,4.5rem);
  --max:88rem;

  /* Square. Everything. */
  --r:0px;

  --ease:cubic-bezier(.2,.65,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.5s;
  --dur-fast:.22s;

  --hdr-h:68px;
  --mbar-h:0px;

  color-scheme:dark;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-variation-settings:'wdth' 100;
  font-size:var(--t-body);font-weight:400;line-height:1.6;
  color:var(--mute);background:var(--night);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:var(--mbar-h);
}

/* Scanlines, not film grain. A CRT above the bar, not a photographic filter —
   and grain is what every dark restaurant template reaches for. */
body::after{
  content:'';position:fixed;inset:0;z-index:9;pointer-events:none;
  opacity:.5;
  background:repeating-linear-gradient(
    180deg,
    rgba(63,208,240,.022) 0px,
    rgba(63,208,240,.022) 1px,
    transparent 1px,
    transparent 3px
  );
}

img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
abbr[title]{text-decoration:none;cursor:help}
address{font-style:normal}
::selection{background:var(--ice);color:var(--night)}

/* ── Voices ──────────────────────────────────────────────────────────────── */
/* Display: WIDE and heavy. The width axis is the whole point — it is the
   opposite of a condensed poster face and of Astoria's serif. */
h1,h2,h3,h4{
  font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 118;
  font-weight:800;
  color:var(--chalk);
  line-height:.94;
  letter-spacing:-.022em;
  text-transform:uppercase;
  text-wrap:balance;
}

/* Mono: every number, label, time and price. The scoreboard voice. */
.mono,.eyebrow,.price,.tag,.flag,.crumbs,code{
  font-family:'DM Mono','SFMono-Regular',Menlo,monospace;
  font-variation-settings:normal;
}

/* ── Focus ───────────────────────────────────────────────────────────────── */
:focus{outline:none}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px}

.skip{
  position:fixed;top:0;left:50%;transform:translate(-50%,-140%);z-index:200;
  padding:.8rem 1.4rem;background:var(--ice);color:var(--night);
  font-family:'DM Mono',monospace;font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  transition:transform .2s var(--ease);
}
.skip:focus{transform:translate(-50%,0)}

/* ── Utilities ───────────────────────────────────────────────────────────── */
.u-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* Eyebrow: a mono index, not a red line-and-caps label */
.eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-size:var(--t-mono);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ice);margin-bottom:1.1rem;
}
.eyebrow::before{
  content:'//';color:var(--ice-deep);letter-spacing:0;
}
.eyebrow--light{color:var(--chalk)}
.eyebrow--light::before{color:var(--ice)}
.eyebrow--c{justify-content:center}

.arrow-link{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'DM Mono',monospace;
  font-size:var(--t-xs);font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--chalk);padding-block:.5rem;min-height:34px;
  border-bottom:1px solid var(--ice-deep);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.arrow-link::after{content:'→';transition:transform var(--dur-fast) var(--ease)}
.arrow-link i{display:none}
.arrow-link:hover{color:var(--ice);border-color:var(--ice)}
.arrow-link:hover::after{transform:translateX(5px)}

/* Chips: square, mono, hairline */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.chip{
  font-family:'DM Mono',monospace;
  font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;
  padding:.45rem .7rem;border:1px solid var(--rule);color:var(--mute);
}
.chip--team{border-color:var(--ice-deep);color:var(--chalk);background:var(--wash)}
.chips--dim .chip{color:var(--faint)}

/* Tags: square brackets in mono. Not a pill, not red. */
.tag{
  display:inline-block;
  font-family:'DM Mono',monospace;
  font-size:var(--t-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:.3rem .55rem;color:var(--ice);
  border:1px solid var(--ice-deep);background:rgba(6,11,17,.75);
}
.tag::before{content:'[ '}
.tag::after{content:' ]'}
.tag--float{position:absolute;top:0;left:0;z-index:2}
.tag--inline{vertical-align:middle;margin-left:.5rem}

.flag{
  display:inline-block;font-size:.563rem;font-weight:500;letter-spacing:.08em;
  padding:.18rem .3rem;margin-left:.3rem;vertical-align:middle;
  border:1px solid var(--rule);color:var(--faint);
}

/* Prices: mono, cyan, tabular. Astoria's are gold. */
.price{
  font-family:'DM Mono',monospace;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--ice);
}
.price--ask{color:var(--ghost);font-weight:400}

.alert{
  padding:.85rem 1rem;margin-bottom:1.4rem;
  background:rgba(213,50,58,.08);border-left:2px solid var(--mark);
  color:var(--chalk);font-size:var(--t-sm);
}

.note-band{padding-block:var(--sec-sm)}
.note-band p{
  max-width:46rem;margin-inline:auto;text-align:center;
  font-size:clamp(1rem,1.7vw,1.22rem);line-height:1.6;color:var(--mute);
  padding-block:1.75rem;border-block:1px solid var(--rule);
}

.ticks{display:grid;gap:.75rem;margin:1.6rem 0}
.ticks li{
  position:relative;padding-left:1.7rem;font-size:var(--t-sm);color:var(--mute);
}
.ticks li::before{
  content:'+';position:absolute;left:0;top:-.05em;
  font-family:'DM Mono',monospace;color:var(--ice);
}

/* ── Buttons: square, hairline, cyan ─────────────────────────────────────── */
.btn{
  --bg:transparent;--bd:var(--rule-2);--fgc:var(--chalk);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.5rem;min-height:46px;
  font-family:'DM Mono',monospace;
  font-size:var(--t-xs);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fgc);background:var(--bg);border:1px solid var(--bd);
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease);
  will-change:transform;
}
/* Wipe from the left, not scale from the bottom */
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--ice);
  transform:translateX(-101%);
  transition:transform var(--dur-fast) var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover,.btn:focus-visible{color:var(--night);border-color:var(--ice)}

.btn--solid{--bg:var(--ice);--bd:var(--ice);--fgc:var(--night)}
.btn--solid::before{background:var(--chalk)}
.btn--ghost{--bd:var(--rule-2)}
.btn--line{--bd:transparent;--fgc:var(--mute);padding-inline:.2rem;border-bottom:1px solid var(--rule-2)}
.btn--line::before{display:none}
.btn--line:hover{color:var(--ice);border-bottom-color:var(--ice)}
.btn--lg{padding:1.1rem 2rem;min-height:54px}
.btn--sm{padding:.55rem .9rem;min-height:38px;font-size:var(--t-mono)}
.btn--block{width:100%}

/* ── Photographs ─────────────────────────────────────────────────────────── */
.ph{
  position:relative;overflow:hidden;
  aspect-ratio:var(--ratio,1.5);
  background-image:var(--lqip);background-size:cover;background-position:var(--focus,50% 50%);
}
.ph picture{display:block;width:100%;height:100%}
.ph img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%)}
/* No opacity fade: a 0->1 transition never advances in a background tab, which
   would paint every photo blank until the tab is focused. The LQIP covers it. */

/* ════════════════════════════════════════════════════════════════════════════
   HEADER — a thin instrument panel, not a floating glass bar
   ══════════════════════════════════════════════════════════════════════════ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(6,11,17,.72);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .35s var(--ease);
}
.hdr__in{
  display:flex;align-items:stretch;gap:clamp(.9rem,2.5vw,2rem);
  max-width:var(--max);margin-inline:auto;padding:0 var(--gut);
  min-height:var(--hdr-h);
}
.hdr.is-stuck{background:var(--night);border-bottom-color:var(--rule)}
.hdr.is-hidden{transform:translateY(-102%)}

/* Wordmark: the red is the BRAND MARK only — a single rule under the name. */
.brand{display:flex;align-items:center;gap:.65rem;flex:none;color:var(--chalk);min-height:40px}
.brand__mark{color:var(--mark);flex:none;transition:color var(--dur) var(--ease)}
.brand:hover .brand__mark{color:var(--ice)}
.brand__txt{display:grid;line-height:1}
.brand__l1{
  font-variation-settings:'wdth' 118;font-weight:800;
  font-size:1.05rem;letter-spacing:-.01em;text-transform:uppercase;
}
.brand__l2{
  font-family:'DM Mono',monospace;
  font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-top:.2rem;
}

.nav{margin-left:auto;min-width:0;display:flex}
.nav__list{display:flex;flex-wrap:nowrap}
.nav__link{
  position:relative;display:flex;align-items:center;min-height:100%;
  padding-inline:clamp(.5rem,1.2vw,.95rem);
  font-family:'DM Mono',monospace;
  font-size:var(--t-mono);font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);white-space:nowrap;
  transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.nav__clip{display:block;height:1.5em;line-height:1.5;overflow:hidden}
.nav__t{display:block;position:relative;line-height:1.5;transition:transform var(--dur-fast) var(--ease-out)}
.nav__t::after{content:attr(data-txt);position:absolute;left:0;top:100%;color:var(--ice);white-space:nowrap}
.nav__link:hover{color:var(--chalk);background:var(--wash)}
.nav__link:hover .nav__t,.nav__link:focus-visible .nav__t{transform:translateY(-100%)}
.nav__link.is-current{color:var(--chalk)}
/* Current page reads as a lit cell, not an underline */
.nav__link.is-current::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ice);
}

.hdr__act{display:flex;align-items:center;gap:.8rem;flex:none}

/* Live status: mono, green dot, no pill */
.status{
  display:flex;align-items:center;gap:.4rem;
  font-family:'DM Mono',monospace;
  font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;
}
.status__dot{width:5px;height:5px;background:var(--ghost);flex:none}
.status.is-open .status__dot{background:var(--live);box-shadow:0 0 8px var(--live)}
.status.is-open .status__txt{color:var(--live)}
.status__hrs{color:var(--ghost)}

.burger{display:none;width:44px;height:44px;flex:none;margin-left:auto;align-items:center;justify-content:center}
.burger__box{display:block;width:20px;height:11px;position:relative}
.burger__box i{
  position:absolute;left:0;width:100%;height:1.5px;background:var(--chalk);
  transition:transform .28s var(--ease);
}
.burger__box i:first-child{top:0}
.burger__box i:last-child{bottom:0}
.burger[aria-expanded=true] .burger__box i:first-child{transform:translateY(4.75px) rotate(45deg)}
.burger[aria-expanded=true] .burger__box i:last-child{transform:translateY(-4.75px) rotate(-45deg)}

/* ── Drawer ──────────────────────────────────────────────────────────────── */
.drawer{
  position:fixed;inset:0;z-index:99;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--hdr-h) + env(safe-area-inset-top,0px) + 1.5rem) var(--gut)
          calc(1.5rem + env(safe-area-inset-bottom,0px));
  background:var(--night);overflow-y:auto;overscroll-behavior:contain;
}
.drawer[hidden]{display:none}
.drawer__nav li{border-bottom:1px solid var(--rule)}
.drawer__nav a{
  display:flex;align-items:center;gap:1rem;padding:1rem 0;
  font-variation-settings:'wdth' 115;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,7vw,2.1rem);line-height:1;color:var(--chalk);
  transition:color var(--dur-fast),padding-left var(--dur-fast) var(--ease);
}
.drawer__nav a:hover,.drawer__nav a[aria-current]{color:var(--ice);padding-left:.4rem}
.drawer__i{
  font-family:'DM Mono',monospace;font-size:.625rem;letter-spacing:.12em;
  color:var(--ice-deep);flex:none;
}
.drawer__foot{display:grid;gap:.6rem;margin-top:2rem}
.drawer__addr,.drawer__hrs{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);
  color:var(--faint);text-align:center;margin-top:.3rem;letter-spacing:.04em;
}

@media (max-width:1120px){
  .nav,.hdr__call,.hdr__act .btn--solid{display:none}
  .burger{display:flex}
  .hdr__act{margin-left:auto;gap:.5rem}
}
@media (max-width:560px){.status__hrs{display:none}}

/* ════════════════════════════════════════════════════════════════════════════
   HERO — full height, with a slow slideshow of the room.

   The type still lives on its own panel rather than floating over the photo:
   that panel is what keeps this from collapsing back into the full-bleed
   photo-with-headline-on-top hero that Astoria (and every restaurant template)
   uses. What changed is the right-hand side — it is now the full height of the
   viewport and it drifts slowly through the venue's own photographs.

   The nostalgia is in the treatment, not in fake vintage props: a gentle warm
   grade, a vignette, and a Ken Burns drift slow enough (18s) that you notice the
   room rather than the motion.
   ══════════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  padding-top:var(--hdr-h);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
.hero__in{
  display:grid;grid-template-columns:.92fr 1.08fr;
  max-width:var(--max);margin-inline:auto;
  min-height:calc(100svh - var(--hdr-h));
}
.hero__copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,5vh,4rem) clamp(1.15rem,3vw,3.25rem) clamp(2rem,5vh,4rem) var(--gut);
  border-right:1px solid var(--rule);
  background:
    radial-gradient(120% 90% at 0% 100%,rgba(18,65,79,.5) 0%,transparent 62%),
    var(--deep);
  position:relative;z-index:2;
}

/* ── The slideshow ───────────────────────────────────────────────────────── */
.hero__bg{position:relative;overflow:hidden;background:var(--night)}
.slides{position:absolute;inset:0}
.slide{
  position:absolute;inset:0;margin:0;
  opacity:0;visibility:hidden;
  transition:opacity 1.5s var(--ease),visibility 1.5s;
}
.slide.is-active{opacity:1;visibility:visible}
.slide .ph{
  width:100%;height:100%;aspect-ratio:auto;
  /* Nostalgia grade: warm, slightly desaturated, and pulled down a little so the
     additive disco light has somewhere to land — a bright overcast frame eats
     screen-blended colour entirely. */
  filter:sepia(.15) saturate(.88) contrast(1.06) brightness(.86);
}
/* Ken Burns — each slide drifts and scales for as long as it is on screen */
.slide.is-active .ph{animation:kb 18s var(--ease) forwards}
.slide:nth-child(even).is-active .ph{animation-name:kb-alt}
@keyframes kb{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.13) translate3d(-1.5%,-1.2%,0)}
}
@keyframes kb-alt{
  from{transform:scale(1.12) translate3d(1.2%,-1%,0)}
  to{transform:scale(1.02) translate3d(0,0,0)}
}
/* Vignette + the scrim that keeps the panel edge readable */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,18,27,.9) 0%,rgba(10,18,27,.25) 22%,transparent 52%),
    radial-gradient(120% 110% at 60% 45%,transparent 38%,rgba(6,11,17,.55) 100%);
}
/* A faint warm bloom at the top edge — bar light spilling in */
.hero__bg::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 45% at 72% 0%,rgba(255,194,75,.12) 0%,transparent 62%);
  mix-blend-mode:screen;
}

/* ── Slide controls ──────────────────────────────────────────────────────── */
.hero__ctl{
  position:absolute;z-index:3;right:clamp(1.15rem,2.5vw,2rem);bottom:clamp(1.15rem,2.5vw,2rem);
  display:flex;align-items:center;gap:.85rem;
  /* A backing panel so the readout stays legible over a bright slide — the
     photographs run from an overcast storefront to a dark back room. */
  padding:.5rem .7rem;
  background:rgba(6,11,17,.6);
  backdrop-filter:blur(8px);
  border:1px solid rgba(234,242,247,.12);
}
.hero__count{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.14em;color:var(--chalk);
}
.hero__count b{font-weight:500;color:var(--ice)}
.hero__dots{display:flex;gap:.3rem}
.hero__dot{
  width:26px;height:3px;padding:0;position:relative;overflow:hidden;
  background:rgba(234,242,247,.28);
  transition:background-color var(--dur-fast) var(--ease);
}
.hero__dot::after{
  content:'';position:absolute;inset:0;
  background:var(--iri-lin);background-size:200% 100%;
  transform:scaleX(0);transform-origin:left;
}
.hero__dot[aria-selected=true]::after{transform:scaleX(1)}
.hero__dot:hover{background:rgba(234,242,247,.5)}
/* WCAG 2.2.2: anything that auto-advances needs a way to stop it. */
.hero__pause{
  display:grid;place-items:center;width:30px;height:30px;
  border:1px solid rgba(234,242,247,.3);color:var(--chalk);
  font-family:'DM Mono',monospace;font-size:.6rem;
  background:rgba(6,11,17,.5);
  transition:border-color var(--dur-fast),color var(--dur-fast),background-color var(--dur-fast);
}
.hero__pause:hover{border-color:var(--ice);color:var(--ice)}

.hero__kick{
  display:flex;align-items:center;gap:.55rem;margin-bottom:clamp(1.1rem,2.5vw,1.75rem);
  font-family:'DM Mono',monospace;
  font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ice);
}
.hero__pin{width:5px;height:5px;background:var(--ice);flex:none;box-shadow:0 0 10px var(--ice)}

.hero__h{
  font-size:var(--t-mega);line-height:.86;letter-spacing:-.03em;
  font-variation-settings:'wdth' 122;
  margin-bottom:clamp(1.25rem,2.5vw,1.9rem);
  display:grid;
}
.mask{display:block;overflow:hidden}
.mask>span{display:block}
.mask--dot>span::after{content:''}
.hero__h .mask:nth-child(3)>span{color:transparent;-webkit-text-stroke:1.5px var(--ice-deep)}

.hero__sub{
  max-width:26rem;font-size:clamp(.99rem,1.2vw,1.12rem);line-height:1.6;
  color:var(--mute);margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:.6rem}

.hero__facts{
  grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule);background:var(--night);position:relative;z-index:2;
}
.hero__facts li{
  display:grid;gap:.15rem;padding:1.1rem clamp(1.15rem,3vw,2rem);
  border-right:1px solid var(--rule);
}
.hero__facts li:last-child{border-right:0}
.hero__facts strong{
  font-family:'DM Mono',monospace;font-weight:500;
  font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1;color:var(--chalk);
  font-variant-numeric:tabular-nums;
}
.hero__facts strong abbr{font-size:.5em;letter-spacing:.04em;color:var(--faint)}
.hero__facts span{
  font-family:'DM Mono',monospace;
  font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}
.hero__scroll{display:none}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;min-height:0}
  .hero__copy{
    order:2;border-right:0;border-top:1px solid var(--rule);
    padding:clamp(1.5rem,4vh,2.5rem) var(--gut);
  }
  /* The slideshow keeps real presence on a phone but stops short of pushing the
     headline and CTAs under the fold. */
  .hero__bg{order:1;height:33svh;min-height:14rem;max-height:20rem}
  .hero__scrim{background:
    linear-gradient(0deg,rgba(10,18,27,.9) 0%,transparent 58%),
    radial-gradient(130% 120% at 50% 40%,transparent 40%,rgba(6,11,17,.5) 100%)}
  .hero__facts{order:3}
  .hero__h{font-size:clamp(2.6rem,13vw,4.2rem)}
  .hero__sub{margin-bottom:1.25rem}
}
@media (max-width:560px){
  .hero__facts{grid-template-columns:1fr}
  .hero__facts li{border-right:0;border-bottom:1px solid var(--rule)}
  .hero__facts li:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .slide.is-active .ph{animation:none;transform:none}
  .slide{transition:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   THE BOARD — replaces the scrolling ticker entirely.
   A static fixture list, like the card taped up behind the bar. Nothing moves,
   which is both calmer and a different device from Astoria's marquee.
   ══════════════════════════════════════════════════════════════════════════ */
.board{
  border-bottom:1px solid var(--rule);
  background:var(--deep);
}
.board__in{
  display:grid;grid-template-columns:repeat(7,1fr);
  max-width:var(--max);margin-inline:auto;
}
.board__cell{
  padding:1.05rem clamp(.7rem,1.4vw,1.1rem) 1.2rem;
  border-right:1px solid var(--rule);
  display:grid;gap:.4rem;align-content:start;
  transition:background-color var(--dur-fast) var(--ease);
}
.board__cell:last-child{border-right:0}
.board__cell:hover{background:var(--wash)}
.board__cell.is-today{background:rgba(63,208,240,.08)}
.board__d{
  font-family:'DM Mono',monospace;
  font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ice-deep);
}
.board__cell.is-today .board__d{color:var(--ice)}
.board__e{
  font-variation-settings:'wdth' 108;font-weight:700;
  font-size:.82rem;line-height:1.2;text-transform:uppercase;
  letter-spacing:-.005em;color:var(--chalk);
}
.board__n{font-family:'DM Mono',monospace;font-size:.625rem;color:var(--faint);letter-spacing:.04em}
@media (max-width:1000px){
  .board__in{grid-template-columns:repeat(4,1fr)}
  .board__cell:nth-child(4){border-right:0}
  .board__cell:nth-child(-n+4){border-bottom:1px solid var(--rule)}
}
@media (max-width:620px){
  .board__in{grid-template-columns:repeat(2,1fr)}
  .board__cell:nth-child(even){border-right:0}
  .board__cell{border-bottom:1px solid var(--rule)}
}

/* ── Section heading: mono index + wide display ──────────────────────────── */
.shead{max-width:48rem;margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}
.shead--center{margin-inline:auto;text-align:center}
.shead--center .eyebrow{justify-content:center}
.shead__t{font-size:var(--t-d2);margin-bottom:1rem}
.shead__l{max-width:36rem;font-size:1.02rem;color:var(--faint)}
.shead--center .shead__l{margin-inline:auto}
.shead .arrow-link{margin-top:1.5rem}

.crumbs{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.3rem;
  font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ghost);
}
.crumbs a{color:var(--faint);min-height:26px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--ice)}
.crumbs [aria-current]{color:var(--mute)}

/* ════════════════════════════════════════════════════════════════════════════
   QUICK ACTIONS — numbered cells in a hairline grid
   ══════════════════════════════════════════════════════════════════════════ */
.quick{border-bottom:1px solid var(--rule)}
.quick__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.qa{
  position:relative;display:grid;align-content:start;gap:.35rem;
  padding:clamp(1.5rem,3vw,2.4rem) clamp(1.1rem,2vw,1.8rem);
  border-right:1px solid var(--rule);overflow:hidden;
  transition:background-color var(--dur-fast) var(--ease);
}
.qa:last-child{border-right:0}
.qa::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ice);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease-out);
}
.qa:hover{background:var(--wash)}
.qa:hover::before{transform:scaleX(1)}
.qa__n{font-family:'DM Mono',monospace;font-size:var(--t-mono);letter-spacing:.14em;color:var(--ice-deep)}
.qa__t{
  font-variation-settings:'wdth' 115;font-weight:800;text-transform:uppercase;
  font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.05;color:var(--chalk);
}
.qa__d{font-family:'DM Mono',monospace;font-size:.625rem;color:var(--faint);line-height:1.5;letter-spacing:.02em}
.qa__go{
  position:absolute;top:clamp(1.5rem,3vw,2.4rem);right:clamp(1.1rem,2vw,1.8rem);
  font-family:'DM Mono',monospace;color:var(--ghost);
  transition:transform var(--dur-fast) var(--ease),color var(--dur-fast);
}
.qa__go::after{content:'→'}
.qa:hover .qa__go{transform:translateX(3px);color:var(--ice)}
@media (max-width:900px){.quick__grid{grid-template-columns:1fr 1fr}.qa:nth-child(even){border-right:0}.qa:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media (max-width:480px){.quick__grid{grid-template-columns:1fr}.qa{border-right:0;border-bottom:1px solid var(--rule)}.qa:last-child{border-bottom:0}}

/* ════════════════════════════════════════════════════════════════════════════
   STATEMENT
   ══════════════════════════════════════════════════════════════════════════ */
.stmt{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.stmt__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.25rem,5vw,5rem);align-items:center}
.stmt__h{font-size:var(--t-d1);margin-bottom:1.5rem}
.stmt__h em{font-style:normal;color:var(--ice)}
.stmt__body{display:grid;gap:1rem;max-width:31rem;margin-bottom:1.75rem}
.stmt__media{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.stmt__m1,.stmt__m2{position:static;width:auto;border:0;box-shadow:none;overflow:hidden}
.stmt__m1{grid-column:1/-1}
.stmt__m2{grid-column:1/2}
/* A felt-blue readout block fills the empty cell. Its text lives in the markup,
   not in a CSS `content` string: content belongs in the data layer where it can
   be checked and changed, not buried in a stylesheet. */
.stmt__read{
  grid-column:2/3;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;
  padding:1.1rem;background:var(--felt);
}
.stmt__read li{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ice);
}
@media (max-width:900px){
  .stmt__grid{grid-template-columns:1fr;gap:2.25rem}
  .stmt__media{order:-1}
}

/* ════════════════════════════════════════════════════════════════════════════
   FAN FAVOURITES — a numbered board of plates, not a stack of cards
   ══════════════════════════════════════════════════════════════════════════ */
.favs{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.favs__list{display:grid;border-top:1px solid var(--rule)}
.feat{
  display:grid;grid-template-columns:5rem 1.1fr 1fr;
  gap:clamp(1.25rem,3vw,2.5rem);align-items:center;
  padding:clamp(1.5rem,3vw,2.25rem) 0;
  border-bottom:1px solid var(--rule);
  transition:background-color var(--dur-fast) var(--ease);
}
.feat:hover{background:var(--wash)}
.feat--flip{grid-template-columns:5rem 1.1fr 1fr}
.feat--flip .feat__media{order:0}
.feat::before{
  content:counter(feat,decimal-leading-zero);counter-increment:feat;
  font-family:'DM Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.14em;color:var(--ice-deep);align-self:start;padding-top:.35rem;
}
.favs__list{counter-reset:feat}
.feat__media{position:relative;overflow:hidden;order:3}
.feat__img{transition:transform .9s var(--ease-out)}
.feat:hover .feat__img{transform:scale(1.04)}
.feat__body{order:2}
.feat__name{font-size:var(--t-d3);margin-bottom:.6rem}
.feat__desc{font-size:var(--t-sm);color:var(--faint);margin-bottom:.9rem;max-width:30rem}
.feat__price{font-size:clamp(1.1rem,1.8vw,1.4rem)}
.feat__ask{
  font-family:'DM Mono',monospace;font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ghost);
}
@media (max-width:860px){
  .feat,.feat--flip{grid-template-columns:2.5rem 1fr;gap:1rem 1rem}
  .feat__media{order:0;grid-column:2}
  .feat__body{order:1;grid-column:2}
}

/* ════════════════════════════════════════════════════════════════════════════
   GAME DAY — photo on one side, type on the other. No overlay type.
   ══════════════════════════════════════════════════════════════════════════ */
.game{position:relative;border-bottom:1px solid var(--rule);overflow:hidden}
.game .wrap{max-width:none;padding:0}
.game__in{
  display:grid;grid-template-columns:1fr 1.1fr;
  max-width:var(--max);margin-inline:auto;
}
.game__copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,7vh,5.5rem) clamp(1.5rem,3vw,3rem) clamp(3rem,7vh,5.5rem) var(--gut);
  border-right:1px solid var(--rule);
  background:
    radial-gradient(110% 100% at 0% 0%,rgba(18,65,79,.42) 0%,transparent 60%),
    var(--deep);
}
.game__bg{position:relative;overflow:hidden;min-height:22rem}
.game__bg .ph{width:100%;height:100%;aspect-ratio:auto}
.game__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,18,27,.7) 0%,transparent 42%);
}
.game__h{font-size:var(--t-d1);margin-bottom:1rem}
.game__sub{font-size:1.02rem;color:var(--mute);max-width:28rem;margin-bottom:1.6rem}
.game__acts{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.4rem}
@media (max-width:900px){
  .game__in{grid-template-columns:1fr}
  .game__copy{border-right:0;border-bottom:1px solid var(--rule)}
  .game__bg{min-height:16rem}
  .game__scrim{background:linear-gradient(0deg,rgba(10,18,27,.55) 0%,transparent 60%)}
}

/* ════════════════════════════════════════════════════════════════════════════
   PLAY — a spec sheet
   ══════════════════════════════════════════════════════════════════════════ */
.play{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.play__grid{display:grid;grid-template-columns:1fr .62fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.play__list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)}
.amen{
  display:grid;grid-template-columns:2.2rem 1fr;gap:.2rem .5rem;
  padding:1.1rem 1rem 1.1rem 0;border-bottom:1px solid var(--rule);
  transition:background-color var(--dur-fast) var(--ease);
}
.amen:hover{background:var(--wash)}
.amen__n{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.1em;color:var(--ice-deep);grid-row:1/3;padding-top:.2rem;
}
.amen__l{
  font-variation-settings:'wdth' 112;font-weight:700;text-transform:uppercase;
  font-size:.95rem;line-height:1.15;color:var(--chalk);
}
.amen__d{font-family:'DM Mono',monospace;font-size:.625rem;color:var(--faint);letter-spacing:.03em}
.play__media{overflow:hidden}
@media (max-width:900px){.play__grid{grid-template-columns:1fr}.play__media{order:-1;max-width:26rem}}
@media (max-width:520px){.play__list{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════════════════
   WHAT'S ON — vertical rows (the rail was too close to a card carousel)
   ══════════════════════════════════════════════════════════════════════════ */
.whats{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.whats__rail{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.wcard{
  --ac:var(--ice);
  display:grid;align-content:start;gap:.4rem;
  padding:1.5rem 1.25rem 1.9rem;background:var(--night);
  transition:background-color var(--dur-fast) var(--ease);
}
.wcard--violet{--ac:var(--volt)}
.wcard--cyan{--ac:var(--ice)}
.wcard--red{--ac:var(--ice)}
.wcard:hover{background:var(--deep)}
.wcard__day{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ac);
  padding-bottom:.6rem;border-bottom:1px solid var(--rule);margin-bottom:.5rem;
}
.wcard__t{
  font-size:1.05rem;line-height:1.1;font-variation-settings:'wdth' 112;
}
.wcard__k{font-family:'DM Mono',monospace;font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ac)}
.wcard__d{font-size:var(--t-sm);color:var(--faint);line-height:1.55;margin-top:.3rem}
.rail__hint{display:none}
@media (max-width:1000px){.whats__rail{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.whats__rail{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════════════════
   COLLAGE — a contact sheet. Even grid, mono captions always visible.
   (The overlapping-collage-with-hover-caption is the template move.)
   ══════════════════════════════════════════════════════════════════════════ */
.coll{padding-block:var(--sec) 0;border-bottom:1px solid var(--rule)}
.coll__stage{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);
  max-width:var(--max);margin:0 auto var(--sec);
  border-block:1px solid var(--rule);
}
.coll__it{position:relative;overflow:hidden;background:var(--night)}
.coll__it .ph{transition:transform 1s var(--ease-out)}
.coll__it:hover .ph{transform:scale(1.04)}
.coll__it figcaption{
  position:static;padding:.7rem .9rem;
  font-family:'DM Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  background:var(--night);opacity:1;transform:none;
}
.coll__it:hover figcaption{color:var(--ice)}
.coll__it--1,.coll__it--2,.coll__it--3,.coll__it--4,.coll__it--5,.coll__it--6{grid-column:auto;margin-top:0}
@media (max-width:860px){.coll__stage{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.coll__stage{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════════════════
   REVIEWS — a ledger. No serif italics, no gold stars.
   ══════════════════════════════════════════════════════════════════════════ */
.revs{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.rate{font-family:'DM Mono',monospace;font-weight:500;color:var(--ice);font-variant-numeric:tabular-nums}
.revs__grid{display:grid;border-top:1px solid var(--rule)}
.rev{
  display:grid;grid-template-columns:8rem 1fr;gap:1rem clamp(1.25rem,3vw,2.5rem);
  align-items:baseline;padding:clamp(1.25rem,2.5vw,1.75rem) 0;
  border-bottom:1px solid var(--rule);
  transition:background-color var(--dur-fast) var(--ease);
}
.rev:hover{background:var(--wash)}
.rev__stars{
  /* NOT the mono stack: DM Mono has no U+2605 star, so the glyph fell back to
     dots. System fonts carry it. */
  font-family:system-ui,-apple-system,'Segoe UI Symbol',sans-serif;
  font-size:.72rem;letter-spacing:.16em;color:var(--ice);
}
.rev__q{
  font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.5;color:var(--chalk);
  max-width:46rem;grid-column:2;
}
.rev__by{grid-column:1;grid-row:2;display:grid;gap:.15rem}
.rev__name{font-family:'DM Mono',monospace;font-size:var(--t-xs);color:var(--mute)}
.rev__src{font-family:'DM Mono',monospace;font-size:.563rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ghost)}
@media (max-width:700px){
  .rev{grid-template-columns:1fr;gap:.6rem}
  .rev__q,.rev__by{grid-column:1}
  .rev__by{grid-row:auto}
}

/* ════════════════════════════════════════════════════════════════════════════
   LOCATION
   ══════════════════════════════════════════════════════════════════════════ */
.locs,.vis{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.loc{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
.loc__dl{display:grid;border-top:1px solid var(--rule)}
.loc__dl>div{padding:1rem 0;border-bottom:1px solid var(--rule)}
.loc__dl dt{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ice-deep);margin-bottom:.35rem;
}
.loc__dl dd{color:var(--chalk);font-size:var(--t-sm);line-height:1.55}
.loc__dl dd a{border-bottom:1px solid var(--rule-2);min-height:26px;display:inline-flex;align-items:center}
.loc__dl dd a:hover{color:var(--ice);border-color:var(--ice)}
.loc__hr{display:flex;justify-content:space-between;gap:1.25rem;padding:.1rem 0;font-family:'DM Mono',monospace;font-size:var(--t-xs)}
.loc__hr em{font-style:normal;color:var(--faint)}
.loc__acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.loc__map{position:relative}
.map{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--rule);background:var(--deep)}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.55) invert(.92) hue-rotate(175deg) contrast(.92) brightness(.95)}
.map__load{
  position:absolute;inset:0;display:grid;place-content:center;gap:.35rem;text-align:center;
  background:var(--deep);color:var(--chalk);
}
.map__load span{font-family:'DM Mono',monospace;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase}
.map__load small{font-family:'DM Mono',monospace;font-size:var(--t-mono);color:var(--faint)}
.map__load:hover{background:var(--raise)}
.map.is-loaded .map__load{display:none}
@media (max-width:860px){.loc{grid-template-columns:1fr}.map{aspect-ratio:4/3}}

/* ════════════════════════════════════════════════════════════════════════════
   CTA — left-anchored, hairline framed. Astoria's is a centred red block.
   ══════════════════════════════════════════════════════════════════════════ */
.cta{
  padding-block:clamp(3.5rem,9vh,6.5rem);
  background:
    radial-gradient(80% 120% at 0% 50%,rgba(18,65,79,.4) 0%,transparent 60%),
    var(--deep);
  border-bottom:1px solid var(--rule);
}
.cta__in{display:grid;justify-items:start;text-align:left;max-width:var(--max)}
.cta__t{font-size:var(--t-d1);margin-bottom:1.25rem}
.cta__b{max-width:32rem;color:var(--faint);margin-bottom:.35rem}
.cta__acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.cta__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:2rem;
  padding-top:1.1rem;border-top:1px solid var(--rule);width:100%;
  font-family:'DM Mono',monospace;font-size:var(--t-mono);letter-spacing:.06em;color:var(--ghost);
}
.cta__meta a{color:var(--mute);min-height:26px;display:inline-flex;align-items:center}
.cta__meta a:hover{color:var(--ice)}

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER — a spec panel
   ══════════════════════════════════════════════════════════════════════════ */
.ftr{background:var(--night)}
.ftr__top{padding-block:clamp(2.5rem,6vh,4rem)}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr .8fr;gap:clamp(1.75rem,3.5vw,3rem)}
.ftr__wordmark{
  font-variation-settings:'wdth' 118;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:.95;color:var(--chalk);
}
.ftr__wordmark span{
  display:block;font-family:'DM Mono',monospace;font-weight:400;
  font-size:.46em;letter-spacing:.16em;color:var(--faint);margin-top:.3rem;
}
.ftr__tag{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ice);margin-top:.9rem;
}
.ftr__blurb{font-size:var(--t-sm);color:var(--faint);max-width:23rem;margin-top:.9rem;line-height:1.6}
.ftr__social{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.3rem}
.ftr__social a{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--rule-2);
  min-height:26px;display:inline-flex;align-items:center;
}
.ftr__social a:hover{color:var(--ice);border-color:var(--ice)}
.ftr__h{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ice-deep);
  margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule);
}
.ftr__addr{font-family:'DM Mono',monospace;font-size:var(--t-xs);color:var(--chalk);line-height:1.7;margin-bottom:.9rem}
.ftr__links{display:grid;gap:.3rem}
.ftr__links a{
  font-family:'DM Mono',monospace;font-size:var(--t-xs);color:var(--faint);
  min-height:26px;display:inline-flex;align-items:center;
  transition:color var(--dur-fast),padding-left var(--dur-fast) var(--ease);
}
.ftr__links a:hover{color:var(--ice);padding-left:.2rem}
.ftr__links a[aria-current]{color:var(--chalk)}
.ftr__hrs{display:grid;gap:.4rem}
.ftr__hrs>div{display:flex;justify-content:space-between;gap:1rem;font-family:'DM Mono',monospace;font-size:var(--t-xs)}
.ftr__hrs dt{color:var(--faint)}
.ftr__hrs dd{color:var(--chalk);font-variant-numeric:tabular-nums;white-space:nowrap}
.ftr__note{font-family:'DM Mono',monospace;font-size:.625rem;color:var(--ghost);margin-top:.8rem;line-height:1.6}
.ftr__bar{border-top:1px solid var(--rule);padding-block:1.2rem}
.ftr__bar-in{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;
  font-family:'DM Mono',monospace;font-size:.625rem;color:var(--ghost);letter-spacing:.04em;
}
.ftr__meta{display:flex;flex-wrap:wrap;gap:.5rem}
@media (max-width:980px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}.ftr__bar-in{flex-direction:column}}

/* ── Mobile action bar ───────────────────────────────────────────────────── */
.mbar{display:none}
@media (max-width:860px){
  :root{--mbar-h:calc(58px + env(safe-area-inset-bottom,0px))}
  .mbar{
    position:fixed;bottom:0;left:0;right:0;z-index:98;
    display:grid;grid-template-columns:repeat(4,1fr);
    background:var(--night);border-top:1px solid var(--rule-2);
    padding-bottom:env(safe-area-inset-bottom,0px);
    transition:transform .3s var(--ease);
  }
  .mbar.is-hidden{transform:translateY(100%)}
  .mbar__a{
    display:grid;place-items:center;gap:.2rem;padding:.6rem .25rem;min-height:58px;
    color:var(--faint);border-right:1px solid var(--rule);
    font-family:'DM Mono',monospace;font-size:.563rem;letter-spacing:.08em;text-transform:uppercase;
  }
  .mbar__a:last-child{border-right:0}
  .mbar__a:active{background:var(--deep);color:var(--chalk)}
  .mbar__a.is-current{color:var(--ice)}
  .drawer{padding-bottom:calc(var(--mbar-h) + 1.5rem)}
  .hero__in{min-height:0}
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGE HEADERS
   ══════════════════════════════════════════════════════════════════════════ */
.phead{
  position:relative;
  padding-top:calc(var(--hdr-h) + clamp(2.25rem,6vh,3.75rem));
  padding-bottom:clamp(1.75rem,4vh,3rem);
  border-bottom:1px solid var(--rule);
  background:
    radial-gradient(70% 100% at 0% 0%,rgba(18,65,79,.38) 0%,transparent 62%),
    var(--deep);
  overflow:hidden;
}
.phead__in{position:relative;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.phead__h{font-size:var(--t-d1);margin-bottom:1rem}
.phead__l{max-width:34rem;font-size:1.02rem;color:var(--mute)}
.phead__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:1.3rem;
  font-family:'DM Mono',monospace;font-size:var(--t-mono);letter-spacing:.08em;color:var(--ghost);
}
.phead__meta a{color:var(--mute);border-bottom:1px solid var(--rule-2);min-height:26px;display:inline-flex;align-items:center}
.phead__meta a:hover{color:var(--ice)}
.phead__acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}
.phead__h--doc{font-size:var(--t-d2)}
/* Photo-backed variant: photo as a band beneath the type, not behind it */
.phead--pe{padding-bottom:0;background:var(--deep)}
.phead__bg{position:relative;margin-top:clamp(1.75rem,4vh,3rem);overflow:hidden;max-height:22rem}
.phead__bg .ph{width:100%}
.phead__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,11,17,.55) 0%,transparent 50%);
}

/* ════════════════════════════════════════════════════════════════════════════
   MENU PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.mnav{
  position:sticky;top:calc(var(--hdr-h) + env(safe-area-inset-top,0px));z-index:40;
  background:var(--night);border-bottom:1px solid var(--rule);
}
.mnav__rail{
  display:flex;overflow-x:auto;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 3rem),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 3rem),transparent 100%);
}
.mnav__rail::-webkit-scrollbar{display:none}
.mnav__a{
  position:relative;flex:none;padding:.9rem .85rem;
  font-family:'DM Mono',monospace;font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;transition:color var(--dur-fast) var(--ease);
}
.mnav__a::after{
  content:'';position:absolute;top:0;left:.85rem;right:.85rem;height:2px;
  background:var(--ice);transform:scaleX(0);transition:transform var(--dur-fast) var(--ease-out);
}
.mnav__a:hover{color:var(--mute)}
.mnav__a.is-active{color:var(--ice)}
.mnav__a.is-active::after{transform:scaleX(1)}

.menu{padding-block:var(--sec-sm) var(--sec)}
.mcat{padding-block:clamp(2rem,4vw,3.25rem);border-bottom:1px solid var(--rule)}
.mcat:first-child{padding-top:clamp(1.25rem,2.5vw,2rem)}
.mcat__h{display:grid;grid-template-columns:1fr auto;gap:clamp(1.25rem,3vw,2.5rem);align-items:end;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.mcat__t{font-size:var(--t-d2)}
.mcat__n{max-width:31rem;font-size:var(--t-sm);color:var(--faint);margin-top:.75rem}
.mcat__media{width:clamp(10rem,24vw,18rem);overflow:hidden}
.mlist{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.75rem,4.5vw,4rem)}
.mitem{display:flex;align-items:baseline;gap:.7rem;padding:.95rem 0;border-bottom:1px solid var(--rule)}
.mitem__l{flex:1;min-width:0}
.mitem__n{
  display:block;font-variation-settings:'wdth' 108;font-weight:700;
  font-size:.95rem;line-height:1.25;letter-spacing:-.005em;text-transform:none;color:var(--chalk);
}
.mitem__d{font-size:.82rem;color:var(--faint);line-height:1.5;margin-top:.25rem}
.mitem__p{flex:none;font-size:.95rem}
.mitem--terse{padding-block:.7rem}
@media (max-width:820px){.mlist{grid-template-columns:1fr}.mcat__h{grid-template-columns:1fr}.mcat__media{width:100%;max-width:20rem}}

.mfoot{margin-top:clamp(2rem,4vw,3.25rem);padding:clamp(1.25rem,2.5vw,2rem);border:1px solid var(--rule);background:var(--deep)}
.mfoot__h{font-size:1rem;margin-bottom:.9rem}
.mfoot__l{display:grid;gap:.6rem;font-family:'DM Mono',monospace;font-size:var(--t-xs);color:var(--faint);line-height:1.6}
.mfoot__l .flag{margin-left:0;margin-right:.1rem}

/* ════════════════════════════════════════════════════════════════════════════
   EVENTS PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.wk{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.wk__list{display:grid;border-top:1px solid var(--rule)}
.ev{
  --ac:var(--ice);
  display:grid;grid-template-columns:7rem 1fr auto;gap:clamp(.9rem,2.5vw,2.25rem);
  align-items:center;padding:clamp(1.15rem,2.5vw,1.85rem) 0;border-bottom:1px solid var(--rule);
  transition:background-color var(--dur-fast) var(--ease);
}
.ev--violet{--ac:var(--volt)}
.ev--cyan{--ac:var(--ice)}
.ev--red{--ac:var(--ice)}
.ev:hover{background:var(--wash)}
.ev__day{display:grid;gap:.1rem}
.ev__day-s{
  font-family:'DM Mono',monospace;font-weight:500;
  font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ac);
}
.ev__day-l{font-family:'DM Mono',monospace;font-size:.563rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ghost)}
.ev__t{font-size:clamp(1.1rem,2vw,1.5rem);margin-bottom:.3rem}
.ev__k{font-family:'DM Mono',monospace;font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ac);margin-bottom:.45rem}
.ev__d{font-size:var(--t-sm);color:var(--faint);max-width:40rem}
.ev__media{width:clamp(6rem,14vw,10rem);flex:none;overflow:hidden}
.ev__time{font-family:'DM Mono',monospace;font-size:var(--t-xs);color:var(--faint)}
.ev--feature{background:rgba(63,208,240,.055)}
@media (max-width:760px){
  .ev{grid-template-columns:4rem 1fr;gap:.8rem 1rem}
  .ev__media{grid-column:1/-1;width:100%;max-width:16rem}
}

.always{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.always__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.acard{padding:1.6rem 1.4rem;background:var(--night);transition:background-color var(--dur-fast)}
.acard:hover{background:var(--deep)}
.acard__t{font-size:1.05rem;line-height:1.12;margin-bottom:.6rem}
.acard__d{font-size:var(--t-sm);color:var(--faint);line-height:1.6}

.up{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.empty{padding:clamp(1.75rem,4vw,3rem);border:1px solid var(--rule);max-width:46rem;background:var(--deep)}
.empty__t{font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.15;margin-bottom:.85rem}
.empty__d{font-size:var(--t-sm);color:var(--faint);max-width:34rem}
.empty__acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.up__list{display:grid;border-top:1px solid var(--rule)}
.upev{display:grid;grid-template-columns:5rem 1fr auto;gap:clamp(.9rem,2.5vw,2.25rem);align-items:center;padding:1.4rem 0;border-bottom:1px solid var(--rule)}
.upev__date{display:grid;text-align:center;border:1px solid var(--rule-2);padding:.5rem .25rem;font-family:'DM Mono',monospace}
.upev__m{font-size:.563rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
.upev__d{font-size:1.5rem;line-height:1;font-weight:500;color:var(--chalk)}
.upev__y{font-size:.5rem;letter-spacing:.1em;color:var(--ghost)}
.upev__t{font-size:1.2rem;margin-bottom:.35rem}
.upev__d2{font-size:var(--t-sm);color:var(--faint);max-width:38rem}
.upev__meta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.5rem;font-family:'DM Mono',monospace;font-size:var(--t-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ghost)}
@media (max-width:700px){.upev{grid-template-columns:4rem 1fr}.upev .btn{grid-column:2}}

/* ════════════════════════════════════════════════════════════════════════════
   PRIVATE EVENTS / VISIT / ABOUT
   ══════════════════════════════════════════════════════════════════════════ */
.pe{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.pe__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.pecard{padding:1.6rem 1.4rem;background:var(--night);transition:background-color var(--dur-fast) var(--ease)}
.pecard:hover{background:var(--deep)}
.pecard__t{font-size:1.08rem;line-height:1.12;margin-bottom:.6rem}
.pecard__d{font-size:var(--t-sm);color:var(--faint);line-height:1.6}
.pe2{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.pe2__grid{display:grid;grid-template-columns:1fr .7fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
.pe2__note{font-family:'DM Mono',monospace;font-size:var(--t-xs);color:var(--faint);max-width:28rem;padding-top:1.1rem;border-top:1px solid var(--rule);line-height:1.7}
.pe2__media{overflow:hidden}
@media (max-width:900px){.pe2__grid{grid-template-columns:1fr}.pe2__media{max-width:24rem}}
.pe3{padding-block:clamp(3.5rem,8vh,6rem);background:var(--deep);border-bottom:1px solid var(--rule)}
.pe3__in{display:grid;justify-items:start}
.pe3__h{font-size:var(--t-d2);margin-bottom:.9rem}
.pe3__d{max-width:33rem;color:var(--faint)}
.pe3__acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}

.vis2{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.vis2__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.vcard{padding:1.6rem 1.5rem;background:var(--night);display:grid;align-content:start;gap:.75rem}
.vcard__t{font-size:1.05rem;line-height:1.12}
.vcard p{font-size:var(--t-sm);color:var(--faint);line-height:1.62}
.vcard strong{color:var(--chalk);font-weight:700}
.vcard__m{font-family:'DM Mono',monospace;font-size:var(--t-mono)!important;color:var(--ghost)!important;letter-spacing:.06em}
.vis3{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.vis3__p{max-width:38rem;font-size:var(--t-sm);color:var(--faint);margin-top:1.3rem}

.ab{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.ab__grid{display:grid;grid-template-columns:1fr .65fr;gap:clamp(2.25rem,5vw,4.5rem);align-items:start}
.ab__lead{
  font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.4;color:var(--chalk);
  margin-bottom:1.6rem;padding-bottom:1.4rem;border-bottom:1px solid var(--rule);
  font-variation-settings:'wdth' 104;font-weight:500;
}
.ab__body{display:grid;gap:1rem;max-width:33rem}
.ab__body em{font-style:normal;color:var(--ice)}
.ab__media{overflow:hidden;margin-bottom:1.5rem}
.ab__facts{display:grid;border-top:1px solid var(--rule)}
.ab__facts>div{display:grid;grid-template-columns:5rem 1fr;gap:.9rem;padding:.8rem 0;border-bottom:1px solid var(--rule)}
.ab__facts dt{font-family:'DM Mono',monospace;font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ice-deep)}
.ab__facts dd{font-family:'DM Mono',monospace;font-size:var(--t-xs);color:var(--chalk);line-height:1.6}
.ab3{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.ab3__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.ab3__i{padding:1.3rem 1.2rem;background:var(--night)}
.ab3__l{font-variation-settings:'wdth' 112;font-weight:700;text-transform:uppercase;font-size:.92rem;line-height:1.12;color:var(--chalk)}
.ab3__n{font-family:'DM Mono',monospace;font-size:.625rem;color:var(--faint);margin-top:.25rem}
@media (max-width:900px){.ab__grid{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════════════════ */
.ct{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.ct__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2.25rem,5vw,4.5rem);align-items:start}
.frm{display:grid;gap:1.35rem}
.fld{display:grid;gap:.45rem}
.fld__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.fld label,.lbl{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.req{color:var(--ice);margin-left:.15rem}
.opt{color:var(--ghost);letter-spacing:.06em;text-transform:none;margin-left:.3rem}
.fld input,.fld textarea{
  width:100%;padding:.85rem .95rem;
  background:var(--deep);color:var(--chalk);
  border:1px solid var(--rule-2);
  font-family:'DM Mono',monospace;font-size:.92rem;line-height:1.5;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.fld textarea{resize:vertical;min-height:7.5rem}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ghost)}
.fld input:hover,.fld textarea:hover{border-color:var(--rule-2)}
.fld input:focus,.fld textarea:focus{border-color:var(--ice);background:var(--raise)}
.has-err input,.has-err textarea{border-color:var(--mark)}
.err{font-family:'DM Mono',monospace;font-size:var(--t-mono);color:var(--mark);letter-spacing:.02em}
.radios{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:.2rem}
.radio{position:relative;cursor:pointer;flex:1 1 auto}
.radio input{position:absolute;opacity:0;width:1px;height:1px}
.radio span{
  display:flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem .9rem;
  font-family:'DM Mono',monospace;font-size:var(--t-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);background:var(--night);text-align:center;
  transition:all var(--dur-fast) var(--ease);
}
.radio:hover span{color:var(--chalk);background:var(--deep)}
.radio input:checked+span{background:var(--ice);color:var(--night)}
.radio input:focus-visible+span{outline:2px solid var(--ice);outline-offset:-2px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.frm__note{font-family:'DM Mono',monospace;font-size:var(--t-mono);color:var(--ghost);line-height:1.7}
.frm__note a{color:var(--mute);border-bottom:1px solid var(--rule-2)}
.frm__note a:hover{color:var(--ice)}
.sent{padding:clamp(1.75rem,4vw,2.75rem);border:1px solid var(--ice-deep);background:var(--wash)}
.sent__i{color:var(--ice);margin-bottom:1rem}
.sent__t{font-size:var(--t-d3);margin-bottom:.7rem}
.sent__d{font-size:var(--t-sm);color:var(--faint);max-width:28rem}
.sent__acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.ct__aside{padding:clamp(1.25rem,2.5vw,1.9rem);border:1px solid var(--rule);background:var(--deep)}
.ct__h{font-size:1.05rem;margin-bottom:1.3rem;padding-bottom:.7rem;border-bottom:1px solid var(--rule)}
.ct__dl{display:grid}
.ct__dl>div{padding:.9rem 0;border-bottom:1px solid var(--rule)}
.ct__dl>div:first-child{padding-top:0}
.ct__dl dt{font-family:'DM Mono',monospace;font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ice-deep);margin-bottom:.35rem}
.ct__dl dd{font-family:'DM Mono',monospace;font-size:var(--t-xs);color:var(--chalk);line-height:1.6}
.ct__dl dd a{border-bottom:1px solid var(--rule-2);min-height:26px;display:inline-flex;align-items:center}
.ct__dl dd a:hover{color:var(--ice);border-color:var(--ice)}
.ct__m{font-size:var(--t-mono)!important;color:var(--ghost)!important;margin-top:.25rem}
.ct__m a{border:0!important}
.ct__sla{font-family:'DM Mono',monospace;font-size:var(--t-mono);color:var(--ghost);margin-top:1.1rem;line-height:1.7}
@media (max-width:880px){.ct__grid{grid-template-columns:1fr}.fld__row{grid-template-columns:1fr}}

/* ── Long-form doc ──────────────────────────────────────────────────────── */
.doc{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.doc__in{max-width:40rem}
.doc__lead{font-size:1.05rem;color:var(--chalk);margin-bottom:2.25rem;padding-bottom:1.75rem;border-bottom:1px solid var(--rule)}
.doc h2{font-size:1.05rem;margin:2.25rem 0 .8rem}
.doc h2:first-of-type{margin-top:0}
.doc p{margin-bottom:.9rem;color:var(--mute)}
.doc p strong{color:var(--chalk)}
.doc a{color:var(--chalk);border-bottom:1px solid var(--ice-deep);min-height:26px;display:inline-flex;align-items:center}
.doc a:hover{color:var(--ice)}
.doc__addr{
  margin-top:.9rem;padding:1.1rem 1.25rem;background:var(--deep);border-left:2px solid var(--ice);
  font-family:'DM Mono',monospace;font-size:var(--t-xs);line-height:1.8;color:var(--chalk);
}

/* ── 404 ────────────────────────────────────────────────────────────────── */
.nf{
  position:relative;min-height:min(84svh,40rem);
  display:grid;align-content:center;
  padding:calc(var(--hdr-h) + 3.5rem) var(--gut) 3.5rem;
  max-width:var(--max);margin-inline:auto;
  border-bottom:1px solid var(--rule);
}
.nf__bg{position:absolute;inset:0;z-index:-2;opacity:.16}
.nf__bg .ph{width:100%;height:100%;aspect-ratio:auto}
.nf__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--night) 0%,rgba(6,11,17,.7) 100%)}
.nf__in{position:relative;display:grid;justify-items:start;max-width:44rem}
.nf__code{
  font-family:'DM Mono',monospace;font-weight:500;
  font-size:clamp(2.5rem,9vw,6rem);line-height:1;letter-spacing:.06em;
  color:var(--ice);margin-bottom:.9rem;
}
.nf__h{font-size:var(--t-d2);margin-bottom:.9rem}
.nf__d{max-width:31rem;color:var(--faint);margin-bottom:1.75rem}
.nf__acts{display:flex;flex-wrap:wrap;gap:.6rem}
.nf__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:2.25rem;padding-top:1.1rem;
  border-top:1px solid var(--rule);width:100%;
  font-family:'DM Mono',monospace;font-size:var(--t-mono);color:var(--ghost);
}
.nf__meta a{color:var(--mute);min-height:26px;display:inline-flex;align-items:center}
.nf__meta a:hover{color:var(--ice)}

/* ── Consent ────────────────────────────────────────────────────────────── */
.consent{
  position:fixed;left:var(--gut);right:var(--gut);z-index:120;bottom:calc(var(--mbar-h) + 1rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
  max-width:44rem;margin-inline:auto;padding:1rem 1.15rem;
  background:var(--deep);border:1px solid var(--rule-2);
}
.consent p{flex:1;min-width:14rem;font-size:var(--t-sm);color:var(--mute)}
.consent div{display:flex;gap:.5rem;flex:none}

/* ── Motion ─────────────────────────────────────────────────────────────── */
.js [data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease-out) var(--d,0ms),transform .6s var(--ease-out) var(--d,0ms);
}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal-mask]>span{transform:translateY(105%);transition:transform .8s var(--ease-out) var(--d,0ms)}
.js [data-reveal-mask].is-in>span{transform:none}
[data-parallax]{transform:translate3d(0,0,0)}
[data-parallax-inner]{overflow:hidden}
[data-parallax-inner] .ph{transform:translate3d(0,0,0);scale:1.12;will-change:transform}

/* Stagger */
.play__list .amen:nth-child(1),.whats__rail .wcard:nth-child(1),.always__grid .acard:nth-child(1),.pe__grid .pecard:nth-child(1),.ab3__grid .ab3__i:nth-child(1){--d:0ms}
.play__list .amen:nth-child(2),.whats__rail .wcard:nth-child(2),.always__grid .acard:nth-child(2),.pe__grid .pecard:nth-child(2),.ab3__grid .ab3__i:nth-child(2){--d:55ms}
.play__list .amen:nth-child(3),.whats__rail .wcard:nth-child(3),.always__grid .acard:nth-child(3),.pe__grid .pecard:nth-child(3),.ab3__grid .ab3__i:nth-child(3){--d:110ms}
.play__list .amen:nth-child(4),.whats__rail .wcard:nth-child(4),.always__grid .acard:nth-child(4),.pe__grid .pecard:nth-child(4),.ab3__grid .ab3__i:nth-child(4){--d:165ms}
.play__list .amen:nth-child(5),.whats__rail .wcard:nth-child(5),.always__grid .acard:nth-child(5),.pe__grid .pecard:nth-child(5),.ab3__grid .ab3__i:nth-child(5){--d:220ms}
.play__list .amen:nth-child(6),.whats__rail .wcard:nth-child(6),.always__grid .acard:nth-child(6),.pe__grid .pecard:nth-child(6),.ab3__grid .ab3__i:nth-child(6){--d:275ms}
.play__list .amen:nth-child(n+7),.whats__rail .wcard:nth-child(n+7),.ab3__grid .ab3__i:nth-child(n+7){--d:330ms}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal].is-in{opacity:1;transform:none;transition:none}
  .js [data-reveal-mask]>span{transform:none;transition:none}
  [data-parallax-inner] .ph{scale:1;transform:none}
  body::after{display:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── Target size ────────────────────────────────────────────────────────── */
.arrow-link{min-height:34px}
@media (hover:none),(pointer:coarse),(max-width:860px){
  .ftr__links a,.ftr__social a,.loc__dl dd a,.ct__dl dd a,.cta__meta a,.nf__meta a,.phead__meta a{min-height:32px}
  .arrow-link{min-height:44px}
  .brand{min-height:44px}
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print{
  .hdr,.drawer,.mbar,.board,.map,.cta,body::after{display:none!important}
  body{background:#fff;color:#000;padding:0}
  h1,h2,h3{color:#000}
  .ph{display:none}
  a{color:#000;text-decoration:underline}
  .mitem{break-inside:avoid;border-color:#ccc}
}

/* The eighth cell in the What's On grid: a link, not a filler tile. */
.wcard--go{
  position:relative;background:var(--deep);
  transition:background-color var(--dur-fast) var(--ease);
}
.wcard--go:hover{background:var(--felt)}
.wcard--go .wcard__day{color:var(--ice)}
.wcard__go{
  position:absolute;right:1.25rem;bottom:1.4rem;
  font-family:'DM Mono',monospace;color:var(--ice);
  transition:transform var(--dur-fast) var(--ease);
}
.wcard--go:hover .wcard__go{transform:translateX(4px)}

/* ════════════════════════════════════════════════════════════════════════════
   LIQUID LAYER
   Gen-5 motion: iridescent hover, a liquid cursor, gradient sweeps, scroll skew.

   The "rainbow" here is deliberately NOT a flat spectrum — that reads cheap. It
   is an iridescent ramp anchored at both ends on the venue's own cyan, running
   out through violet, magenta and amber and back. It behaves like light
   refracting off neon, which is what the room actually looks like.

   Everything in this layer is additive: remove it and the site still works. All
   of it is transform/opacity/filter only, all of it is gated behind
   `hover: hover` + `pointer: fine`, and all of it collapses under
   prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* The iridescent ramp. Starts and ends on brand cyan so it never reads as
     a novelty rainbow. */
  --iri: conic-gradient(from var(--iri-a, 0deg),
    #3fd0f0 0%,
    #4f8df5 13%,
    #8b5cf6 27%,
    #d95cd0 41%,
    #ff7a6b 55%,
    #ffc24b 68%,
    #6be3a8 82%,
    #3fd0f0 100%);
  --iri-lin: linear-gradient(100deg,
    rgba(63,208,240,0) 0%,
    rgba(63,208,240,.55) 18%,
    rgba(139,92,246,.6) 34%,
    rgba(217,92,208,.5) 48%,
    rgba(255,194,75,.45) 62%,
    rgba(107,227,168,.5) 76%,
    rgba(63,208,240,0) 100%);
}

/* Animating a conic gradient's angle needs the angle to be a typed property. */
@property --iri-a{syntax:'<angle>';inherits:true;initial-value:0deg}

/* ── Iridescent pointer glow ─────────────────────────────────────────────── */
/* The gradient sits under a radial mask that follows the pointer, so the colour
   appears to pool where your hand is rather than washing the whole panel. */
@media (hover:hover) and (pointer:fine){
  [data-iri]{position:relative;isolation:isolate}
  [data-iri]::after{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:var(--iri-lin);
    background-size:220% 100%;
    background-position:calc(var(--mx,50%) * -0.4 + 60%) 50%;
    opacity:0;
    mix-blend-mode:screen;
    -webkit-mask-image:radial-gradient(18rem 18rem at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);
            mask-image:radial-gradient(18rem 18rem at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);
    transition:opacity .35s var(--ease);
  }
  [data-iri]:hover::after,[data-iri]:focus-within::after{opacity:.5}

  /* A hairline that lights up in the same spectrum */
  [data-iri]::before{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    border:1px solid transparent;
    background:var(--iri-lin) border-box;
    background-size:220% 100%;
    background-position:calc(var(--mx,50%) * -0.4 + 60%) 50%;
    -webkit-mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    opacity:0;transition:opacity .35s var(--ease);
  }
  [data-iri]:hover::before{opacity:.7}
}

/* ── Iridescent sweep on photographs ────────────────────────────────────── */
/* A holo-foil shine that crosses the frame once on hover. */
.ph--holo::after{
  content:'';position:absolute;inset:-20%;pointer-events:none;
  background:linear-gradient(72deg,
    transparent 38%,
    rgba(63,208,240,.3) 45%,
    rgba(139,92,246,.34) 50%,
    rgba(217,92,208,.28) 55%,
    rgba(255,194,75,.22) 60%,
    transparent 67%);
  transform:translateX(-120%);
  mix-blend-mode:screen;opacity:0;
}
@media (hover:hover) and (pointer:fine){
  .coll__it:hover .ph--holo::after,
  .gcard:hover .ph--holo::after,
  .feat:hover .ph--holo::after,
  .mcat__media:hover .ph--holo::after{
    opacity:1;transform:translateX(120%);
    transition:transform 1.1s var(--ease-out),opacity .2s linear;
  }
}

/* ── Liquid button fill ──────────────────────────────────────────────────── */
/* The fill rises as a blob: a wide ellipse that swells and flattens into the
   button, instead of a flat panel sliding across. */
.btn::before{
  transform:translateX(0) translateY(101%) scale(1.6,1);
  border-radius:50% 50% 0 0 / 60% 60% 0 0;
  transition:transform .5s var(--ease-out),border-radius .5s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{
  transform:translateY(0) scale(1.6,1);
  border-radius:0;
}
/* Iridescent edge-light on the primary button while hovered */
@media (hover:hover) and (pointer:fine){
  .btn--solid{position:relative}
  .btn--solid::after{
    content:'';position:absolute;inset:-1px;z-index:-2;pointer-events:none;
    background:var(--iri);
    animation:iri-spin 6s linear infinite paused;
    opacity:0;transition:opacity .3s var(--ease);
    filter:blur(7px);
  }
  .btn--solid:hover::after{opacity:.75;animation-play-state:running}
}
@keyframes iri-spin{to{--iri-a:360deg}}

/* ── Gradient sweep on the hero lockup ──────────────────────────────────── */
/* The middle word carries a slow iridescent drift — the one place on the page
   that gets full spectrum, so it stays an event rather than a texture. */
.hero__h .mask:nth-child(2)>span{
  background:linear-gradient(96deg,#3fd0f0 0%,#6ba8f7 22%,#8b5cf6 40%,#d95cd0 58%,#ffc24b 76%,#3fd0f0 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:iri-drift 14s linear infinite;
}
@keyframes iri-drift{to{background-position:280% 50%}}

/* The outlined word picks up the spectrum on hover of the hero */
.hero__h .mask:nth-child(3)>span{transition:-webkit-text-stroke-color .6s var(--ease)}
.hero:hover .hero__h .mask:nth-child(3)>span{-webkit-text-stroke-color:var(--volt)}

/* ── Liquid reveal ───────────────────────────────────────────────────────── */
/* Photographs wipe open on a soft clip rather than fading. */
.js [data-liquid]{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-out) var(--d,0ms)}
.js [data-liquid].is-in{clip-path:inset(0 0 0 0)}

/* ── Scroll-velocity skew ────────────────────────────────────────────────── */
/* Fast scrolling leans the content very slightly, then it settles. Capped hard
   in JS so it reads as weight, not as a broken page. */
[data-skew]{transform:skewY(var(--skew,0deg));transition:transform .18s linear}

/* ── Liquid cursor ───────────────────────────────────────────────────────── */
/* Two parts: an instant dot for precision, and a lagging iridescent ring that
   stretches along the direction of travel. The ring is a conic gradient behind a
   radial mask, so it is a true gradient ring, not a bordered box. */
.cur,.cur-dot{
  position:fixed;top:0;left:0;pointer-events:none;z-index:150;
  opacity:0;transition:opacity .3s var(--ease);
  will-change:transform;
}
.cur{
  width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  background:var(--iri);
  animation:iri-spin 5s linear infinite;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s var(--ease);
}
.cur-dot{
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:var(--chalk);
}
.cur.is-on,.cur-dot.is-on{opacity:1}
/* Over something clickable the ring swells and fills faintly */
.cur.is-hot{
  width:66px;height:66px;margin:-33px 0 0 -33px;
  -webkit-mask:radial-gradient(farthest-side,rgba(0,0,0,.14) calc(100% - 1.5px),#000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side,rgba(0,0,0,.14) calc(100% - 1.5px),#000 calc(100% - 1.5px));
}
.cur-dot.is-hot{opacity:0}
/* Over text input it becomes a caret bar */
.cur.is-text{
  width:2px;height:26px;margin:-13px 0 0 -1px;border-radius:0;
  -webkit-mask:none;mask:none;background:var(--ice);animation:none;
}
@media (hover:none),(pointer:coarse){.cur,.cur-dot{display:none!important}}

/* ── Reduced motion: stand everything down ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  [data-iri]::after,[data-iri]::before,.ph--holo::after,.btn--solid::after{display:none}
  .hero__h .mask:nth-child(2)>span{
    animation:none;background:none;-webkit-text-fill-color:var(--ice);color:var(--ice);
  }
  .js [data-liquid],.js [data-liquid].is-in{clip-path:none;transition:none}
  [data-skew]{transform:none}
  .cur,.cur-dot{display:none!important}
  .btn::before{transform:translateY(101%);border-radius:0;transition:transform .01ms}
  .btn:hover::before{transform:none}
}

/* Contact-sheet frames wipe open in sequence rather than all at once. */
.coll__stage .coll__it:nth-child(1){--d:0ms}
.coll__stage .coll__it:nth-child(2){--d:80ms}
.coll__stage .coll__it:nth-child(3){--d:160ms}
.coll__stage .coll__it:nth-child(4){--d:120ms}
.coll__stage .coll__it:nth-child(5){--d:200ms}
.coll__stage .coll__it:nth-child(6){--d:280ms}

/* ════════════════════════════════════════════════════════════════════════════
   DISCO — ambient club lighting across the whole hero.

   Built from four stacked layers, the way a real rig works:
     1. wash    — two big colour fields drifting past each other
     2. beams   — a conic fan rotating from a point above, like a moving head
     3. scatter — three dot fields at different scales and speeds; the moiré
                  between them gives the irregular speckle of a mirror ball
                  (a single grid reads as a texture, not as light)
     4. sweep   — one bright bar crossing the frame every so often

   FLASH SAFETY: every animation here is a slow rotation or translation, 18s to
   96s, and the only opacity change is a 14s breathe with a small luminance
   delta. Nothing flashes. WCAG 2.3.1 caps flashing at three per second, and a
   strobing disco effect is a genuine seizure risk — so there is no strobe, and
   the whole layer is off under prefers-reduced-motion and behind a Lights toggle.

   All four layers are transform-only and composited; none uses filter: blur on
   an animated element, which would repaint every frame.
   ══════════════════════════════════════════════════════════════════════════ */
.disco{
  position:absolute;inset:0;z-index:2;
  pointer-events:none;overflow:hidden;
  contain:layout size;
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.disco.is-lit{opacity:1}
.disco>span{position:absolute;display:block;will-change:transform}

/* ── 1. Ambient wash ─────────────────────────────────────────────────────── */
.disco__wash{
  inset:-30%;
  background:
    radial-gradient(38% 42% at 28% 28%, rgba(217,92,208,.42) 0%, transparent 70%),
    radial-gradient(34% 38% at 74% 62%, rgba(63,208,240,.5) 0%, transparent 70%),
    radial-gradient(30% 34% at 52% 86%, rgba(139,92,246,.48) 0%, transparent 72%),
    radial-gradient(26% 30% at 86% 16%, rgba(255,194,75,.34) 0%, transparent 74%);
  animation:disco-wash 52s ease-in-out infinite alternate;
}
@keyframes disco-wash{
  0%  {transform:translate3d(-3%,-2%,0) scale(1.04) rotate(0deg)}
  50% {transform:translate3d(4%,3%,0) scale(1.12) rotate(6deg)}
  100%{transform:translate3d(-2%,4%,0) scale(1.06) rotate(-5deg)}
}

/* ── 2. Beam rig ─────────────────────────────────────────────────────────── */
/* Anchored above the frame and rotating, so the wedges rake across like a
   moving-head fixture rather than spinning in the middle of the picture. */
.disco__beams{
  width:180%;aspect-ratio:1;left:-40%;top:-105%;
  transform-origin:50% 50%;
  /* Each wedge feathers in and out over ~5deg instead of switching at a hard
     edge — a 1deg transition reads as a flat coloured triangle, not a beam. */
  background:conic-gradient(from 0deg,
    transparent 8deg,
    rgba(63,208,240,.42) 17deg,
    transparent 26deg,
    transparent 40deg,
    rgba(217,92,208,.38) 50deg,
    transparent 60deg,
    transparent 88deg,
    rgba(139,92,246,.38) 99deg,
    transparent 110deg,
    transparent 146deg,
    rgba(107,227,168,.3) 155deg,
    transparent 164deg,
    transparent 198deg,
    rgba(255,194,75,.34) 209deg,
    transparent 220deg,
    transparent 256deg,
    rgba(63,208,240,.34) 265deg,
    transparent 274deg,
    transparent 312deg,
    rgba(217,92,208,.3) 321deg,
    transparent 330deg,
    transparent 360deg);
  /* Beams are strongest near the rig and fall off with distance. */
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.85) 34%,rgba(0,0,0,.35) 66%,transparent 92%);
          mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.85) 34%,rgba(0,0,0,.35) 66%,transparent 92%);
  animation:disco-spin 96s linear infinite;
}
@keyframes disco-spin{to{transform:rotate(360deg)}}

/* ── 3. Mirror-ball scatter ──────────────────────────────────────────────── */
.disco__scatter{inset:0}
.disco__scatter i{
  position:absolute;inset:-45%;display:block;
  will-change:transform;
  /* A soft radial mask so density falls off — light scatters unevenly. */
  -webkit-mask-image:radial-gradient(78% 70% at 46% 34%,#000 0%,rgba(0,0,0,.6) 52%,transparent 88%);
          mask-image:radial-gradient(78% 70% at 46% 34%,#000 0%,rgba(0,0,0,.6) 52%,transparent 88%);
}
/* Sparse, small and bright: a mirror ball throws a few dozen distinct
   highlights, not a halftone screen. Big tiles keep them far apart; small radii
   keep each one a point of light you can see the room through. */
.disco__scatter i:nth-child(1){
  background-image:radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0 3.2%, transparent 7.5%);
  background-size:88px 88px;
  animation:disco-spin 44s linear infinite;
}
.disco__scatter i:nth-child(2){
  background-image:radial-gradient(circle at 50% 50%, rgba(63,208,240,.8) 0 2.8%, transparent 7%);
  background-size:127px 127px;
  background-position:31px 17px;
  animation:disco-spin 62s linear infinite reverse;
}
.disco__scatter i:nth-child(3){
  background-image:radial-gradient(circle at 50% 50%, rgba(217,92,208,.7) 0 2.4%, transparent 6.5%);
  background-size:163px 163px;
  background-position:71px 53px;
  animation:disco-spin 78s linear infinite;
}
/* The breathe: slow, small, and the only opacity movement in the whole layer. */
.disco__scatter{animation:disco-breathe 14s ease-in-out infinite alternate}
@keyframes disco-breathe{from{opacity:.5}to{opacity:.85}}

/* ── 4. Sweep ────────────────────────────────────────────────────────────── */
.disco__sweep{
  inset:-20% -60%;
  background:linear-gradient(74deg,
    transparent 42%,
    rgba(255,255,255,.22) 47%,
    rgba(63,208,240,.45) 50%,
    rgba(255,255,255,.22) 53%,
    transparent 58%);
  animation:disco-sweep 18s ease-in-out infinite;
}
@keyframes disco-sweep{
  0%,72%{transform:translate3d(-60%,0,0)}
  100%  {transform:translate3d(60%,0,0)}
}

/* Light spilling onto the type panel, kept well under the text. */
.hero__copy{isolation:isolate}
.hero__copy::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 44% at 12% 88%, rgba(139,92,246,.55) 0%, transparent 72%),
    radial-gradient(44% 38% at 88% 12%, rgba(63,208,240,.4) 0%, transparent 74%);
  mix-blend-mode:screen;
  opacity:0;transition:opacity 1.2s var(--ease);
  animation:disco-wash 52s ease-in-out infinite alternate;
}
body.is-lit .hero__copy::before{opacity:1}

/* Lights toggle sits with the slideshow controls */
.hero__lights{
  display:grid;place-items:center;height:30px;padding-inline:.5rem;
  border:1px solid rgba(234,242,247,.3);color:var(--chalk);
  font-family:'DM Mono',monospace;font-size:.563rem;letter-spacing:.12em;
  background:rgba(6,11,17,.5);
  transition:border-color var(--dur-fast),color var(--dur-fast);
}
.hero__lights:hover{border-color:var(--ice);color:var(--ice)}
.hero__lights[aria-pressed=true]{border-color:var(--volt);color:var(--volt)}

/* Paused while the hero is off screen — no point burning frames on lighting
   nobody can see. */
.disco.is-idle>span,.disco.is-idle .disco__scatter i{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .disco,.hero__copy::before{display:none}
  .hero__lights{display:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   EXPERIENCE — chaptered walkthrough

   Replaces a category gallery whose groups held 1, 2 and 11 photographs: in an
   auto-fill grid that produced two near-empty rows and one ragged one. Here the
   scale varies BETWEEN chapters and stays fixed WITHIN each row, so nothing can
   go ragged and every composition is deliberate.
   ══════════════════════════════════════════════════════════════════════════ */
.ch{padding-block:var(--sec);border-bottom:1px solid var(--rule)}
.ch--open{padding-bottom:0}
.ch--kitchen{background:var(--deep)}
.ch--last{background:var(--deep)}

.ch__head{
  display:grid;grid-template-columns:5.5rem 1fr;gap:clamp(1rem,2.5vw,2rem);
  align-items:start;margin-bottom:clamp(1.75rem,4vw,3rem);
}
.ch__n{
  font-family:'DM Mono',monospace;font-size:clamp(1.6rem,3.5vw,2.6rem);
  font-weight:500;line-height:1;color:var(--ice-deep);letter-spacing:.02em;
}
.ch__t{font-size:var(--t-d2);margin-bottom:.8rem}
.ch__d{max-width:36rem;font-size:1.02rem;color:var(--faint)}
@media (max-width:620px){
  .ch__head{grid-template-columns:1fr;gap:.5rem}
  .ch__n{font-size:1.2rem}
}

/* Full-bleed establishing shot */
.ch__bleed{position:relative;margin-top:clamp(1.5rem,3vw,2.5rem);overflow:hidden}
.ch__bleed figcaption,
.ch__fig figcaption{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  padding:.7rem var(--gut) 0;
}
.ch__fig figcaption{padding-inline:0}

/* Asymmetric pair: one wide, one tall, sharing a hairline */
.ch__duo{display:grid;grid-template-columns:1.75fr 1fr;gap:clamp(1rem,2vw,1.75rem);align-items:start}
.ch__fig{overflow:hidden}
.ch__fig .ph{overflow:hidden}
@media (max-width:860px){.ch__duo{grid-template-columns:1fr}}

/* Spec sheet for the games */
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.spec__i{
  display:grid;gap:.25rem;padding:1.4rem 1.2rem 1.6rem;background:var(--night);
  transition:background-color var(--dur-fast) var(--ease);
}
.spec__i:hover{background:var(--deep)}
.spec__n{font-family:'DM Mono',monospace;font-size:var(--t-mono);letter-spacing:.14em;color:var(--ice-deep)}
.spec__l{
  font-variation-settings:'wdth' 112;font-weight:700;text-transform:uppercase;
  font-size:1rem;line-height:1.12;color:var(--chalk);
}
.spec__d{font-family:'DM Mono',monospace;font-size:.625rem;color:var(--faint)}
@media (max-width:900px){.spec{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.spec{grid-template-columns:1fr}}

/* Kitchen: one hero plate, then rows of three at a fixed ratio each */
.ch__hero{position:relative;overflow:hidden;margin-bottom:clamp(1rem,2vw,1.75rem)}
.ch__hero figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;padding-top:.8rem;
}
.ch__cap-n{
  font-variation-settings:'wdth' 114;font-weight:800;text-transform:uppercase;
  font-size:1.15rem;color:var(--chalk);
}
.ch__cap-d{font-family:'DM Mono',monospace;font-size:var(--t-mono);color:var(--faint);letter-spacing:.04em}

.plate-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.75rem);margin-bottom:clamp(1rem,2vw,1.75rem);
}
.plate{overflow:hidden}
.plate .ph{overflow:hidden}
.plate__m{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-top:.6rem;border-top:1px solid var(--rule);margin-top:.6rem;
}
.plate__n{
  font-variation-settings:'wdth' 108;font-weight:700;
  font-size:.92rem;color:var(--chalk);text-transform:uppercase;letter-spacing:-.005em;
}
.plate__p{font-size:.92rem}
@media (max-width:860px){
  .plate-row{grid-template-columns:1fr 1fr}
  .plate-row--tall{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.plate-row,.plate-row--tall{grid-template-columns:1fr}}

.ch__note{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);color:var(--ghost);
  line-height:1.8;margin-top:.5rem;
}
.ch__note a{color:var(--mute);border-bottom:1px solid var(--rule-2)}
.ch__note a:hover{color:var(--ice)}

/* Pull quote: a full-width typographic beat between chapters */
.pq{
  padding-block:clamp(3rem,7vh,5.5rem);border-bottom:1px solid var(--rule);
  background:
    radial-gradient(70% 120% at 12% 50%,rgba(18,65,79,.4) 0%,transparent 62%),
    var(--night);
}
.pq--alt{background:
  radial-gradient(70% 120% at 88% 50%,rgba(139,92,246,.18) 0%,transparent 62%),
  var(--night);}
.pq__in{position:relative;max-width:52rem}
.pq__mark{
  position:absolute;left:-.1em;top:-.42em;
  font-variation-settings:'wdth' 120;font-weight:800;
  font-size:clamp(5rem,12vw,9rem);line-height:1;color:var(--ice);opacity:.16;
  pointer-events:none;
}
.pq__q{
  position:relative;
  font-variation-settings:'wdth' 104;font-weight:500;
  font-size:clamp(1.3rem,3vw,2.15rem);line-height:1.3;letter-spacing:-.015em;
  color:var(--chalk);
}
.pq__by{
  font-family:'DM Mono',monospace;font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:1.4rem;
}
.pq__by span{color:var(--ghost);margin-left:.6rem}

/* Closing readout */
.lastline{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.lastline li{display:grid;gap:.3rem;padding:1.3rem 1.2rem;background:var(--deep)}
.lastline span{font-family:'DM Mono',monospace;font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.lastline strong{
  font-family:'DM Mono',monospace;font-weight:500;font-size:clamp(1.2rem,2.4vw,1.8rem);
  line-height:1;color:var(--ice);font-variant-numeric:tabular-nums;
}
@media (max-width:700px){.lastline{grid-template-columns:1fr 1fr}}