/* ══════════════════════════════════════════════════════════════
   DEEPANSH SOOD — v3
   Structure + energy: thisisfc88.com  (fixed colour sidebar, huge
   condensed display, marker annotations, hand-drawn doodles,
   grain, diagonal share band)
   Palette: dbanart.com  (acid yellow on warm dark)
   ══════════════════════════════════════════════════════════════ */

/* ── SCHABO slot ────────────────────────────────────────────────
   FC88's real display face. Free for personal + commercial use
   (Tom Robin Karlsson). Drop schabo.woff2 into v3/fonts/ and
   uncomment — nothing else needs to change.

@font-face{
  font-family:"Schabo";
  src:url("fonts/schabo.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
──────────────────────────────────────────────────────────────── */

:root{
  --acid:    #E4FF00;   /* dbanart accent — sidebar ground        */
  --base:    #16150F;   /* page ground, warm near-black           */
  --base-2:  #1E1D14;
  --butter:  #F2FFB8;   /* display type on dark / light sections  */
  --red:     #FF4438;
  --ink:     #12140A;   /* type on acid + butter grounds          */
  --dim:     #7C7F63;

  --rail:    clamp(238px, 22vw, 330px);
  --gut:     clamp(1.15rem, 2.6vw, 3rem);

  --ez:      cubic-bezier(.22,1,.36,1);
  --ez-io:   cubic-bezier(.76,0,.24,1);

  --fd: "Schabo", "Big Shoulders Display", "Arial Narrow", sans-serif;
  --fb: "Outfit", system-ui, sans-serif;
  --fm: "Shantell Sans", "Comic Sans MS", cursive;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ background:var(--base) }
body{
  background:var(--base); color:var(--butter);
  font-family:var(--fb); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-loading{ overflow:hidden; height:100vh }
/* NB: no blanket height:100% here. Paired with an aspect-ratio child
   inside a flex row of indefinite height it creates a circular
   height resolution that locks up Chrome's layout. Size images at
   the places where the parent actually has a definite height. */
img{ display:block; max-width:100%; object-fit:cover }
ul{ list-style:none } a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

/* display face — tight, tall, athletic */
.name__n,.name__r,.they__fixed,.roul__s b,.fix__h,.talk__h,.kick__n,.band__s b,.rnav a span{
  font-family:var(--fd); font-weight:900;
  text-transform:uppercase; line-height:.86; letter-spacing:-.005em;
}
.marker{ font-family:var(--fm); font-weight:600; line-height:1.18 }
.acid{ color:var(--acid) }

.doodle{ position:absolute; pointer-events:none; overflow:visible }

/* ── grain ──────────────────────────────────────────────────── */
/* Kept to exactly one viewport. An earlier inset:-150% made this a
   5464x2396 composited layer (~52MB of texture) transform-animated
   every frame, which froze the renderer outright. Shifting the tile
   via background-position at 5 steps/1.4s costs a handful of cheap
   repaints instead. */
.grain{
  position:fixed; inset:0; z-index:600; pointer-events:none; opacity:.2;
  background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gr 1.4s steps(1,end) infinite;
}
@keyframes gr{
  0%  { background-position:0 0 }
  20% { background-position:-34px 12px }
  40% { background-position:22px -28px }
  60% { background-position:-16px 24px }
  80% { background-position:28px 16px }
  100%{ background-position:0 0 }
}

/* ── kick-off ───────────────────────────────────────────────── */
.kick{
  position:fixed; inset:0; z-index:900; background:var(--acid); color:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-end; padding:var(--gut);
}
.kick__l{ font-size:1.1rem }
.kick__n{ font-size:clamp(6rem,26vw,22rem); line-height:.78; margin:.05em 0 .18em }
.kick__b{ height:3px; background:rgba(18,20,10,.22) }
.kick__b i{ display:block; height:100%; width:0; background:var(--ink) }

/* ══ sidebar ═══════════════════════════════════════════════ */
.rail{
  position:fixed; top:0; left:0; bottom:0; z-index:500;
  width:var(--rail); background:var(--acid); color:var(--ink);
  display:flex; flex-direction:column;
  padding:clamp(1rem,2vw,1.6rem) clamp(1rem,1.8vw,1.5rem) clamp(1rem,2vw,1.5rem);
  overflow:hidden auto; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none }

.crest{ display:block; width:clamp(74px,7vw,100px); flex:none }
.crest__svg{ width:100%; height:auto; color:var(--ink) }
.crest__a{ font-family:var(--fb); font-size:13px; font-weight:600; letter-spacing:.02em; fill:currentColor; text-anchor:middle }
.crest__b{ font-family:var(--fd); font-size:34px; font-weight:900; fill:currentColor; text-anchor:middle; letter-spacing:.01em }

.rnav{ margin:clamp(1.5rem,4vh,2.75rem) 0 auto }
.rnav a{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(.5rem,1.4vh,.85rem) 0;
  border-bottom:2px dashed rgba(18,20,10,.45);
}
.rnav a span{
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  transition:transform .5s var(--ez);
}
.rnav a:hover span,.rnav a.on span{ transform:translateX(6px) }
.rnav__go{
  display:grid; place-items:center; flex:none;
  width:clamp(28px,2.6vw,36px); aspect-ratio:1; border-radius:50%;
  background:var(--ink); color:var(--acid);
  transition:transform .5s var(--ez);
}
.rnav__go svg{ width:38%; height:auto }
.rnav a:hover .rnav__go{ transform:translateX(4px) scale(1.06) }
.rnav a.on .rnav__go{ background:var(--red); color:#fff }

.rcta{ display:flex; flex-direction:column; gap:.5rem; padding-top:1.25rem; flex:none }
.pill{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:100px; padding:.72rem 1rem;
  font-family:var(--fm); font-weight:700; font-size:.85rem;
  transition:transform .45s var(--ez), box-shadow .45s var(--ez);
}
.pill__i{ width:13px; height:12px }
.pill--dark{ background:var(--ink); color:var(--acid); box-shadow:0 4px 0 rgba(18,20,10,.35) }
.pill--pale{ background:var(--butter); color:var(--ink); box-shadow:0 4px 0 rgba(18,20,10,.28) }
.pill:hover{ transform:translateY(-2px); box-shadow:0 6px 0 rgba(18,20,10,.35) }

.burger{ display:none; position:fixed; top:12px; right:14px; z-index:700; width:40px; height:40px; border-radius:50%; background:var(--acid) }
.burger span{ position:absolute; left:11px; width:18px; height:2px; background:var(--ink); transition:transform .5s var(--ez) }
.burger span:nth-child(1){ top:17px } .burger span:nth-child(2){ top:22px }
body.nav-open .burger span:nth-child(1){ transform:translateY(2.5px) rotate(45deg) }
body.nav-open .burger span:nth-child(2){ transform:translateY(-2.5px) rotate(-45deg) }

/* scroll progress — a filling bar with a visible track, so you read how
   much is left as well as how far you've come. Thin enough to stay quiet. */
.scrollbar{
  position:fixed; top:0; left:0; right:0; height:4px; z-index:600;
  background:rgba(242,255,184,.09); pointer-events:none;
}
.scrollbar i{
  display:block; height:100%; width:0; background:var(--acid);
  box-shadow:0 0 12px rgba(228,255,0,.55);
}

/* ══ stage ═════════════════════════════════════════════════ */
.stage{ margin-left:var(--rail); position:relative }

/* ══ 01 · HERO ═════════════════════════════════════════════ */
/* top padding carries the breathing room the removed ticker used to give */
.hero{ position:relative; padding:clamp(3rem,8.5vh,6rem) var(--gut) clamp(3rem,8vh,6rem) }

.scrollcue{
  position:absolute; right:.35rem; top:38%;
  writing-mode:vertical-rl; font-size:.68rem; color:var(--dim); letter-spacing:.08em;
}
.scrollcue::before{ content:"↓"; display:block; margin-bottom:.8rem }

.ann{ position:relative }
.ann--kick{
  color:var(--dim); font-size:clamp(.9rem,1.5vw,1.15rem);
  margin-inline:auto; width:max-content;
  margin-bottom:clamp(1.1rem,2.8vh,1.9rem);   /* clear of the eyebrow below */
}
.doodle--note{ left:-2.1em; top:.1em; width:1.5em; height:2.1em; color:var(--dim) }
.doodle--note.sm{ width:1.15em; height:1.6em }

/* line-height .74 pulls the glyph box up past the box top, so the
   annotation above needs real clearance or it collides with the digits */
.eyebrow{
  display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap;
  font-family:var(--fm); font-weight:600;
  font-size:clamp(.78rem,1.25vw,1rem); color:var(--dim);
  margin-bottom:clamp(.9rem,2.2vh,1.5rem);
}
.eyebrow i{ font-style:normal; color:var(--acid) }

/* echoes the old "182 | DAYS TILL THE NEXT SEASON" composition: one huge
   element with a supporting stack beside it, centred so it fills the
   content width instead of hugging the left with dead space at the right */
/* name on one line, role stacked under it */
.name{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.6rem,1.6vh,1.1rem);
}
.name__n{
  font-size:clamp(2.2rem, min(10vw, 16vh), 8.5rem);
  color:var(--butter);
}
.name__r{
  font-size:clamp(.95rem, 2vw, 1.6rem);
  color:var(--dim); text-align:center;
}
.name__r em{ font-style:normal; color:var(--acid) }

.clients{
  display:flex; align-items:center; justify-content:center; gap:clamp(.55rem,1.3vw,1.1rem);
  flex-wrap:wrap; margin-top:clamp(1.1rem,2.8vh,1.9rem);
}
.clients span{
  font-family:var(--fd); font-weight:900; text-transform:uppercase;
  font-size:clamp(.85rem,1.6vw,1.3rem); letter-spacing:.01em;
  color:var(--dim); transition:color .4s;
}
.clients span:hover{ color:var(--butter) }
.clients i{ font-style:normal; color:var(--acid); font-size:.6rem }

.cutouts{
  position:relative; z-index:1;
  display:flex; align-items:flex-end; gap:clamp(.5rem,1.5vw,1.5rem);
  margin-top:clamp(1rem,2.5vh,2rem); justify-content:center;
}
.cutouts figure{
  width:clamp(90px,13vw,190px); aspect-ratio:4/5; overflow:hidden;
  transform:rotate(var(--r)); border:3px solid var(--butter);
  box-shadow:0 18px 40px -18px #000;
  transition:transform .6s var(--ez);
}
.cutouts figure img{ width:100%; height:100% }
.cutouts figure:hover{ transform:rotate(0) translateY(-8px) scale(1.04) }

.ann--after{
  display:flex; align-items:flex-end; gap:clamp(1rem,3vw,2.5rem); flex-wrap:wrap;
  margin-top:clamp(2rem,5vh,3.5rem); justify-content:center;
}
.ann--after .marker{ color:var(--acid); font-size:clamp(.95rem,1.7vw,1.35rem) }
.marker--big{
  font-size:clamp(1.6rem,4vw,3rem) !important; color:var(--butter) !important;
  border-bottom:4px solid var(--acid); line-height:1; padding-bottom:.1em;
}
.doodle--heart{ position:static; width:1.6em; height:1.5em; color:var(--acid); display:inline-block; vertical-align:middle }
.doodle--heart.sm{ width:1.1em; height:1em }
.doodle--arrow{ position:static; width:2.6em; height:5.2em; color:var(--dim); align-self:flex-start }

/* ══ 02 · THEY ARE ═════════════════════════════════════════ */
.they{ position:relative; padding:clamp(4rem,12vh,9rem) var(--gut) clamp(4rem,10vh,7rem) }

.they__q{ font-size:clamp(1.1rem,2.6vw,2rem); color:var(--red) }
.struck{ position:relative; display:inline-block }
.struck::after{
  content:""; position:absolute; left:-2%; right:-2%; top:52%; height:3px;
  background:var(--dim); transform:rotate(-1.6deg);
}
.they__no{ display:flex; align-items:center; gap:1rem; margin-top:.9rem; position:relative; padding-left:2.2em }
.they__whistle{ font-size:clamp(.75rem,1.2vw,.95rem); color:var(--dim) }
.they__nope{ font-size:clamp(1.4rem,3.4vw,2.6rem); color:var(--red) }
.they__no .doodle--note{ left:.4em; top:.2em }

.they__row{
  display:flex; align-items:center; gap:clamp(1rem,3vw,3rem);
  margin-top:clamp(1rem,3vh,2rem); flex-wrap:wrap;
}
/* Schabo is far narrower than the Big Shoulders stand-in, so the shared
   FC88 size clipped "OUR COLOURS". Both halves key off one var — bump
   it back up once the real Schabo file is dropped in. */
.they{ --roul:clamp(1.75rem, 5.5vw, 4.8rem) }
.they__fixed{ font-size:var(--roul); color:var(--butter); flex:none }

/* the vertical roulette — the mechanism FC88 actually uses */
/* ~2.6 lines tall with a hard-bright centre band and soft ends, so the
   word level with "THEY ARE" reads full strength and its neighbours
   fall away — the FC88 effect. */
.roul{
  flex:1 1 0; min-width:0;
  height:calc(var(--roul) * 2.6);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.16) 14%, #000 38%, #000 62%, rgba(0,0,0,.16) 86%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.16) 14%, #000 38%, #000 62%, rgba(0,0,0,.16) 86%, transparent 100%);
}
.roul__t{ will-change:transform }
.roul__s{ display:block }
.roul__s b{
  display:block; font-size:var(--roul);
  color:var(--butter); white-space:nowrap; font-weight:900;
}

.they__love{
  color:var(--acid); font-size:clamp(.95rem,1.7vw,1.35rem);
  text-align:right; margin-top:clamp(1.5rem,4vh,2.5rem);
}

/* ══ 03 · FIXTURES ═════════════════════════════════════════ */
.fix{ position:relative; padding:clamp(3rem,9vh,7rem) var(--gut) clamp(4rem,10vh,7rem) }
.fix__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap }
.fix__h{ position:relative; font-size:clamp(2.2rem,7.4vw,6.4rem); color:var(--butter) }
.circled{ position:relative; z-index:1 }
.doodle--scribble{
  position:absolute; left:-3%; top:-14%; width:auto; height:1.32em;
  color:var(--acid); z-index:0;
}
.fix__note{ color:var(--acid); font-size:clamp(.85rem,1.4vw,1.1rem) }

/* featured strip — bigger plates, dim-the-others hover, click to open */
.strip{ overflow:hidden; margin:clamp(2rem,5vh,3.5rem) calc(var(--gut) * -1) clamp(2.25rem,5.5vh,3.5rem); padding-block:clamp(1rem,2.5vh,2rem) }
.strip__t{ display:flex; width:max-content; will-change:transform }
.strip__s{ display:flex; align-items:center; gap:clamp(.8rem,1.8vw,1.6rem); flex:none; padding-right:clamp(.8rem,1.8vw,1.6rem) }

.shot{
  position:relative; display:block; padding:0; border:0; background:none;
  cursor:pointer; flex:none; line-height:0;
  overflow:hidden;   /* clips the VIEW bar parked at translateY(101%) */
  transform:rotate(var(--r));
  transition:transform .6s var(--ez), filter .5s var(--ez);
  will-change:transform;
}
.shot img{
  width:clamp(180px,21vw,340px); height:auto; aspect-ratio:4/3; object-fit:cover;
  border:3px solid var(--butter); display:block;
}
.shot__v{
  position:absolute; left:3px; right:3px; bottom:3px;
  background:var(--acid); color:var(--ink);
  font-family:var(--fm); font-weight:700; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.12em; line-height:1;
  padding:.5rem 0; text-align:center;
  transform:translateY(101%);
  transition:transform .45s var(--ez);
}
/* :has is progressive — without it siblings simply don't dim */
.strip:has(.shot:hover) .shot{ filter:brightness(.5) saturate(.65) }
.shot:hover,.shot:focus-visible{
  transform:rotate(0deg) scale(1.06) translateY(-10px);
  filter:none;
  z-index:2;
}
.shot:hover .shot__v,.shot:focus-visible .shot__v{ transform:translateY(0) }

/* ── poster lightbox ────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:800;
  display:grid; place-items:center;
  padding:clamp(3rem,7vw,5rem) clamp(1rem,4vw,3rem);
  background:rgba(10,10,8,.93); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden;
}
body.lb-open .lb{ visibility:visible }
.lb__fig{
  max-width:min(1080px,90vw); border:4px solid var(--butter);
  box-shadow:0 40px 90px -30px #000; line-height:0;
}
.lb__fig img{ width:100%; height:auto; max-height:78vh; object-fit:contain; display:block }
.lb__close{
  position:absolute; top:clamp(.8rem,2vw,1.6rem); right:clamp(.8rem,2vw,1.6rem);
  width:46px; height:46px; border-radius:50%;
  background:var(--acid); color:var(--ink);
  font-size:1.5rem; line-height:1; display:grid; place-items:center;
  transition:transform .45s var(--ez);
}
.lb__close:hover{ transform:rotate(90deg) scale(1.07) }
.lb__cap{
  position:absolute; left:0; right:0; bottom:clamp(1rem,3vw,2rem);
  text-align:center; color:var(--dim);
  font-family:var(--fm); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}

.table{ border-top:2px dashed rgba(242,255,184,.22) }
/* isolate is load-bearing: ::before below carries z-index:-1, and without
   a stacking context here it escapes the row and paints behind the page
   background — the acid fill was invisible. */
.row{
  position:relative; isolation:isolate; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
  align-items:center; gap:clamp(.75rem,2.2vw,2rem);
  padding:clamp(.7rem,1.7vw,1.15rem) clamp(.5rem,1.2vw,1rem);
  border-bottom:2px dashed rgba(242,255,184,.22);
  cursor:pointer; overflow:hidden;
  transition:color .35s var(--ez);
}
.row::before{
  content:""; position:absolute; inset:0; background:var(--acid);
  transform:scaleX(0); transform-origin:left; z-index:-1;
  transition:transform .55s var(--ez);
}
.row.on{ color:var(--ink) }
.row.on::before{ transform:scaleX(1) }
.row i{ font-style:normal; font-family:var(--fm); font-weight:700; font-size:.8rem; opacity:.65 }
.row b{
  font-family:var(--fd); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.05rem,2.9vw,2.35rem); line-height:1; letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row s{ text-decoration:none; font-size:.8rem; color:var(--dim); white-space:nowrap }
.row.on s{ color:rgba(18,20,10,.7) }
.row u{
  text-decoration:none; font-family:var(--fm); font-weight:700; font-size:.72rem;
  border:2px solid currentColor; border-radius:100px; padding:.15rem .6rem; white-space:nowrap;
}
.row__go{ width:16px; height:15px; opacity:0; transform:translateX(-8px); transition:opacity .4s, transform .5s var(--ez) }
.row.on .row__go{ opacity:1; transform:translateX(0) }

.peek{
  position:fixed; top:0; left:0; z-index:400; pointer-events:none;
  width:clamp(170px,15vw,250px); aspect-ratio:4/3;
  border:3px solid var(--butter); box-shadow:0 26px 60px -24px #000;
  opacity:0; overflow:hidden;
}

.peek img{ width:100%; height:100% }

/* ══ 04 · SHARE band ═══════════════════════════════════════ */
.share{ position:relative; padding:clamp(2rem,7vh,5rem) 0; overflow:hidden }
.band{
  background:var(--butter); color:var(--ink);
  transform:rotate(-2.6deg) scale(1.06);
  padding:clamp(.7rem,1.8vh,1.2rem) 0; overflow:hidden;
  box-shadow:0 20px 50px -26px #000;
}
.band__t{ display:flex; width:max-content; will-change:transform }
.band__s{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2rem); flex:none; padding-right:clamp(1rem,2.5vw,2rem) }
.band__s b{ font-size:clamp(1.8rem,5vw,4rem) }
.band__sub{ font-family:var(--fm); font-weight:700; font-size:clamp(.72rem,1.15vw,.95rem); line-height:1.15 }
.band__go{
  display:grid; place-items:center; font-style:normal;
  width:clamp(30px,2.8vw,44px); aspect-ratio:1; border-radius:50%;
  background:var(--ink); color:var(--butter); font-size:1rem;
}

/* ══ TALK ══════════════════════════════════════════════════ */
.talk{ background:var(--butter); color:var(--ink); padding:clamp(3rem,9vh,7rem) var(--gut) clamp(1.5rem,4vh,2.5rem) }
.talk__k{ color:var(--red); font-size:clamp(1rem,1.8vw,1.35rem) }
.talk__h{ font-size:clamp(2.4rem,9vw,8rem); margin:.15em 0 .5em }
.talk__grid{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem 3rem; flex-wrap:wrap;
  border-top:2px dashed rgba(18,20,10,.3); padding-top:1.6rem;
}
.talk__mail{
  display:inline-block; font-size:clamp(1.1rem,3vw,2.3rem); font-weight:600; letter-spacing:-.02em;
  border-bottom:4px solid var(--red); transition:transform .5s var(--ez);
}
.talk__mail:hover{ transform:translateX(6px) }
.talk__meta{ font-size:.82rem; color:rgba(18,20,10,.62); margin-top:.9rem }
#clock{ font-variant-numeric:tabular-nums }
.talk__links{ display:flex; gap:.5rem; flex-wrap:wrap }
.chip{
  display:flex; align-items:center; gap:.45rem;
  border:2px solid var(--ink); border-radius:100px; padding:.5rem .95rem;
  font-family:var(--fm); font-weight:700; font-size:.82rem;
  transition:background-color .4s var(--ez), color .4s var(--ez);
}
.chip em{ font-style:normal }
.chip:hover{ background:var(--ink); color:var(--butter) }
.chip.done{ background:var(--red); border-color:var(--red); color:#fff }

.talk__sign{ font-size:clamp(1.4rem,3.6vw,2.6rem); color:var(--red); margin:clamp(2.5rem,7vh,5rem) 0 0 }
.foot{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap;
  font-size:.72rem; color:rgba(18,20,10,.5);
  border-top:2px dashed rgba(18,20,10,.3); margin-top:2rem; padding-top:1.2rem;
}
.foot__by{
  display:inline-flex; align-items:center; gap:.3rem;
  color:rgba(18,20,10,.62);
  transition:color .35s var(--ez);
}
.foot__by b{
  font-family:var(--fm); font-weight:700;
  border-bottom:2px solid var(--red);
}
.foot__by i{ font-style:normal; transition:transform .4s var(--ez) }
.foot__by:hover{ color:var(--ink) }
.foot__by:hover i{ transform:translate(2px,-2px) }

[data-rise]{ opacity:0; transform:translateY(24px) }

/* ══ responsive ════════════════════════════════════════════ */
@media (max-width:900px){
  :root{ --rail:0px }
  .burger{ display:block }
  .rail{
    width:min(86vw,340px); transform:translateX(-101%);
    transition:transform .55s var(--ez); box-shadow:14px 0 50px -20px #000;
  }
  body.nav-open .rail{ transform:translateX(0) }
  .stage{ margin-left:0 }
  .scrollcue{ display:none }
  .they__row{ flex-direction:column; align-items:flex-start }
  .roul{ width:100% }
  .row{ grid-template-columns:auto minmax(0,1fr) auto; }
  .row s{ display:none }
  .peek{ display:none }
  .cutouts{ padding-left:0 }
  .ann--after{ padding-left:0 }
}
@media (max-width:560px){
  .row u{ display:none }
  .row{ grid-template-columns:auto minmax(0,1fr) auto }
  .count{ gap:.4rem }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .grain{ animation:none }
  [data-rise]{ opacity:1; transform:none }
}