/* ============ tokens ============ */
:root{
  --ink:#07071A; --ink2:#0C0C2A;
  --flare:#FF2E7E; --volt:#FFD166; --vio:#7B3CFF; --cyan:#2EE6FF; --mint:#4DF0C8;
  --peach:#F7D9CB; --cream:#F2ECDD;
  --paper:#F7F5EF; --mute:#CFCBE0;

  --ff-disp:'Bungee', system-ui, sans-serif;
  --ff-body:'Space Grotesk', system-ui, sans-serif;
  --ff-mono:'JetBrains Mono', ui-monospace, monospace;
  --pad: clamp(20px, 5vw, 72px);
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-font-smoothing:antialiased }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--ff-body); font-size:clamp(15px,1.1vw,17px); line-height:1.55;
  overflow-x:clip;
  overscroll-behavior-y:none;
}
html{ overflow-x:clip; overscroll-behavior-y:none }
::selection{ background:var(--volt); color:var(--ink) }
a{ color:inherit; text-decoration:none }

/* ============ type ============ */
.disp{
  font-family:var(--ff-disp); font-weight:400; line-height:.92;
  letter-spacing:-.01em; margin:0; text-transform:uppercase;
  font-size:clamp(32px,5.6vw,80px);
  text-shadow:0 2px 18px rgba(7,7,26,.6);
}
.disp--xl{ font-size:clamp(40px,8.4vw,124px) }
.disp--center{ text-align:center }
.kicker{
  font-family:var(--ff-mono); font-size:clamp(11px,1vw,13px); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--volt); margin:0 0 18px;
  text-shadow:0 1px 8px rgba(7,7,26,.8);
}
.lead{
  font-size:clamp(15.5px,1.32vw,19px); line-height:1.62; color:var(--mute);
  max-width:54ch; margin:20px 0 0;
  text-shadow:0 1px 10px rgba(7,7,26,.85), 0 0 2px rgba(7,7,26,.7);
}
.lead--center{ margin-left:auto; margin-right:auto; text-align:center }
.fine{ font-family:var(--ff-mono); font-size:13px; color:#CFCBE0; margin-top:22px; letter-spacing:.06em }

.btn{
  display:inline-block; font-family:var(--ff-mono); font-weight:700;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 30px; border-radius:999px;
  background:var(--volt); color:var(--ink); border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .18s, box-shadow .18s, background .2s;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); background:var(--flare); color:var(--paper) }
.btn--ghost{ background:var(--cyan); color:var(--ink) }
.btn--ghost:hover{ background:var(--mint); color:var(--ink) }
.btn--big{ font-size:15px; padding:22px 46px; margin-top:34px }
.btn--sm{ font-size:12px; padding:13px 24px }
.row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:34px }

/* ============ nav ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
}
.nav__mark{
  font-family:var(--ff-disp); font-size:15px; letter-spacing:.04em;
  background:var(--flare); color:var(--paper);
  padding:8px 14px; border-radius:10px; border:3px solid var(--ink);
}
.nav__links{ display:flex; gap:10px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase }
.nav__links a{ background:var(--ink); color:var(--paper); padding:8px 14px; border-radius:999px; border:2px solid #ffffff26 }
.nav__links a:hover{ background:var(--volt); color:var(--ink); border-color:var(--ink) }
.nav__stat{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em;
  background:var(--volt); color:var(--ink);
  padding:8px 14px; border-radius:999px; border:3px solid var(--ink);
}
@media (max-width:820px){ .nav__links{ display:none } }

/* ============ art layer ============ */
.sc, .lineup{ position:relative; overflow:hidden }
.sc{ min-height:100svh; padding:0 var(--pad) }
.art{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  backface-visibility:hidden;
}
.art::after{ content:''; position:absolute; inset:0 }

.art--hero{ background-image:url('./assets/web/01-hero-city.jpg');background-image:image-set(url('./assets/web/01-hero-city.webp') type('image/webp'), url('./assets/web/01-hero-city.jpg') type('image/jpeg')); background-position:center bottom }
.art--hero::after{ background:linear-gradient(to bottom,#07071AE6 0%,#07071AC4 45%,#07071AF7 100%) }
.art--eyes{ background-image:url('./assets/web/02-eyes.jpg');background-image:image-set(url('./assets/web/02-eyes.webp') type('image/webp'), url('./assets/web/02-eyes.jpg') type('image/jpeg')); background-position:center 30% }
.art--eyes::after{ background:linear-gradient(to right,#F7D9CBF7 0%,#F7D9CBCC 42%,#F7D9CB33 70%,transparent 100%) }
.art--thermal{ background-image:url('./assets/web/03-thermal.jpg');background-image:image-set(url('./assets/web/03-thermal.webp') type('image/webp'), url('./assets/web/03-thermal.jpg') type('image/jpeg')) }
.art--thermal::after{ background:linear-gradient(to bottom,#07071AE6 0%,#07071AB8 45%,#07071AF7 100%) }
.art--format{ background-image:url('./assets/web/04-format.jpg');background-image:image-set(url('./assets/web/04-format.webp') type('image/webp'), url('./assets/web/04-format.jpg') type('image/jpeg')) }
.art--format::after{ background:linear-gradient(to right,#F2ECDDF7 0%,#F2ECDDD9 46%,#F2ECDD40 74%,transparent 100%) }
.art--topics{ background-image:url('./assets/web/05-topics.jpg');background-image:image-set(url('./assets/web/05-topics.webp') type('image/webp'), url('./assets/web/05-topics.jpg') type('image/jpeg')) }
.art--topics::after{ background:linear-gradient(to bottom,#07071AE6 0%,#07071AC4 45%,#07071AF7 100%) }
.art--tunnel{ background-image:url('./assets/web/06-tunnel.jpg');background-image:image-set(url('./assets/web/06-tunnel.webp') type('image/webp'), url('./assets/web/06-tunnel.jpg') type('image/jpeg')) }
.art--tunnel::after{ background:radial-gradient(66% 66% at 50% 50%,#07071AF7 0%,#07071AE0 45%,#07071A8C 100%) }
.art--launch{ background-image:url('./assets/web/07-launch.jpg');background-image:image-set(url('./assets/web/07-launch.webp') type('image/webp'), url('./assets/web/07-launch.jpg') type('image/jpeg')) }
.art--launch::after{ background:linear-gradient(to right,#07071AF7 0%,#07071AE0 46%,#07071A80 76%,transparent 100%) }
.art--arcade{ background-image:url('./assets/web/08-arcade.jpg');background-image:image-set(url('./assets/web/08-arcade.webp') type('image/webp'), url('./assets/web/08-arcade.jpg') type('image/jpeg')); background-position:center 70% }
.art--arcade::after{ background:linear-gradient(to bottom,#07071AE6 0%,#07071AC4 42%,#07071AF7 100%) }
.art--lineup{ background-image:url('./assets/web/09-lineup.jpg');background-image:image-set(url('./assets/web/09-lineup.webp') type('image/webp'), url('./assets/web/09-lineup.jpg') type('image/jpeg')) }
.art--lineup::after{ background:linear-gradient(to bottom,#07071AE6 0%,#07071AD9 50%,#07071AF7 100%) }

/* everything above the art */
.hero__inner,.eyes__copy,.thermal__copy,.format__card,.tunnel__copy,.launch__copy,
.arcade__inner,.lineup__head,.lineup__grid,.scrollcue,.pills,.sc-topics h2{
  position:relative; z-index:2;
}

/* ============ 01 hero ============ */
.sc-hero{ display:grid; place-items:center }
.curtain__panel{
  position:absolute; top:0; bottom:0; width:50.3%; z-index:6;
  background-size:cover; background-repeat:no-repeat;
  will-change:transform;
}
/* halves are split at the exact black seam of the drape, so the red and
   yellow bands stay pinned to the inner edge as the panels pull apart */
.curtain__panel--l{ left:0;  background-image:url('./assets/web/curtain-l.jpg');background-image:image-set(url('./assets/web/curtain-l.webp') type('image/webp'), url('./assets/web/curtain-l.jpg') type('image/jpeg')); background-position:right center }
.curtain__panel--r{ right:0; background-image:url('./assets/web/curtain-r.jpg');background-image:image-set(url('./assets/web/curtain-r.webp') type('image/webp'), url('./assets/web/curtain-r.jpg') type('image/jpeg')); background-position:left center }
.hero__inner{ max-width:1100px; width:100%; opacity:0 }
.ln{ display:block; overflow:hidden }
.ln > span{ display:block }
.scrollcue{ text-shadow:0 1px 10px rgba(7,7,26,.9);
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); display:flex; align-items:center; gap:10px;
}
.scrollcue span{ width:34px; height:2px; background:var(--volt) }

/* ============ 02 eyes ============ */
.sc-eyes{ display:grid; align-content:center; background:var(--peach) }
.sc-eyes .kicker{ color:#9B1F55; text-shadow:none }
.eyes__copy{ max-width:600px }
.eyes__copy .disp{ color:#140B26; text-shadow:none }
.eyes__copy .lead{ color:#2E2038; text-shadow:0 1px 6px rgba(247,217,203,.9) }

/* ============ 03 thermal ============ */
.sc-thermal{ display:grid; place-items:center }
.thermal__copy{ max-width:900px; text-align:center }
.stats{ display:flex; gap:clamp(22px,5vw,70px); justify-content:center; flex-wrap:wrap; margin:44px 0 0 }
.stats b{ display:block; font-family:var(--ff-disp); font-size:clamp(32px,5vw,68px); line-height:1; color:var(--volt) }
.stats em{ display:block; font-family:var(--ff-mono); font-style:normal; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#CFCBE0; margin-top:10px }

/* ============ 04 format ============ */
.sc-format{ display:grid; align-content:center; background:var(--cream) }
.sc-format .art::after{
  background:linear-gradient(to right,#F2ECDDFA 0%,#F2ECDDF2 38%,#F2ECDD8C 62%,#F2ECDD1A 82%,transparent 100%);
}
.format__card{ max-width:620px }
.format__card .kicker{ color:#9B1F55; text-shadow:none }
.format__card .disp{ color:#140B26; text-shadow:none }
.format__card .lead{ color:#2E2038; text-shadow:0 1px 6px rgba(242,236,221,.9) }
.steps{ list-style:none; padding:0; margin:30px 0 0; display:grid; gap:10px; max-width:520px }
.steps li{
  display:flex; align-items:center; gap:14px;
  background:#1B1033; color:var(--paper); border:3px solid #1B1033;
  border-radius:999px; padding:11px 20px; font-size:14px;
}
.steps span{ font-family:var(--ff-mono); font-size:11px; color:var(--volt); letter-spacing:.1em }

/* ============ 05 topics ============ */
.sc-topics{ display:grid; align-content:center; justify-items:center; gap:clamp(30px,5vh,56px); padding-block:clamp(80px,12vh,140px) }
.pills{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:980px }
.pill{
  font-family:var(--ff-mono); font-size:clamp(12px,1.05vw,14px); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:12px 22px; border-radius:999px;
  border:3px solid var(--ink); color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}

/* ============ 06 tunnel ============ */
.sc-tunnel{ display:grid; place-items:center }
.tunnel__copy{ max-width:780px; text-align:center }

/* ============ 07 launch ============ */
.sc-launch{ display:grid; align-content:center }
.launch__copy{ max-width:640px }

/* ============ 08 lineup ============ */
.lineup{ padding:clamp(90px,14vh,170px) var(--pad) }
.lineup__head{ margin-bottom:clamp(36px,6vh,64px) }
.lineup__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:clamp(14px,1.6vw,20px) }
.act{
  position:relative; border-radius:18px; padding:24px; min-height:215px;
  background:var(--ink2); border:3px solid var(--ink); overflow:hidden;
  box-shadow:5px 5px 0 var(--ink);
  display:flex; flex-direction:column; gap:9px;
}
.act__i{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; color:#CFCBE0 }
.act__t{ font-family:var(--ff-disp); font-size:clamp(16px,1.6vw,21px); text-transform:uppercase; line-height:1.05; margin:0 }
.act__d{ margin:0; font-size:14px; color:var(--mute) }
.act__m{ margin-top:auto; font-family:var(--ff-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase }

/* ============ 09 arcade ============ */
.sc-arcade{ display:grid; place-items:center }
.arcade__inner{ text-align:center; max-width:860px }

/* ============ footer ============ */
.foot{ padding:clamp(46px,8vh,84px) var(--pad) 38px; border-top:3px solid #ffffff14; overflow:clip }
.foot__big{ font-family:var(--ff-disp); font-size:clamp(42px,12.5vw,184px); line-height:1; color:#ffffff10 }
.foot__meta{ display:flex; gap:24px; flex-wrap:wrap; margin-top:24px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:#CFCBE0 }
.foot__meta a:hover{ color:var(--volt) }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .hero__inner{ opacity:1 }
  .curtain__panel{ display:none }
}

/* ============ social icon buttons ============ */
.social{ display:flex; gap:12px; margin-top:26px; position:relative; z-index:2 }
.social--center{ justify-content:center }
.social__btn{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  border:2px solid currentColor; color:#E4E1F0;
  transition:color .2s, background .2s, transform .2s;
}
.social__btn svg{ width:19px; height:19px; fill:currentColor }
.social__btn:hover{ color:var(--ink); background:var(--volt); transform:translateY(-3px) }
.sc-eyes .social__btn, .sc-format .social__btn{ color:#1B103366 }
.sc-eyes .social__btn:hover, .sc-format .social__btn:hover{ color:var(--ink) }

/* ============ stacking project cards ============ */
.stack{ position:relative; padding:clamp(80px,12vh,150px) var(--pad) clamp(60px,10vh,120px); overflow:clip }
.stack__head{ position:relative; z-index:2; margin-bottom:clamp(30px,5vh,56px) }
.stack__list{ position:relative; z-index:2; display:flex; flex-direction:column; gap:26px }

.stack__card{
  position:sticky;
  top:calc(104px + var(--i) * 16px);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,44px);
  align-items:stretch;
  min-height:clamp(232px,25vw,296px);
  border:3px solid var(--ink); border-radius:22px;
  background:var(--ink2); box-shadow:0 -6px 0 rgba(0,0,0,.4), 7px 7px 0 var(--ink);
  padding:clamp(26px,3.2vw,46px);
  will-change:transform;
  transform:translateZ(0);
  isolation:isolate;
}
.stack__scrim{
  position:absolute; inset:0; border-radius:19px;
  background:var(--ink); opacity:0; pointer-events:none;
  will-change:opacity;
}
.stack__num{
  align-self:start;
  font-family:var(--ff-disp); font-size:clamp(30px,4.6vw,66px); line-height:.9;
  color:#ffffff2e; letter-spacing:-.02em;
}
.stack__body{ display:flex; flex-direction:column; gap:11px; min-width:0 }
.stack__desc{ margin-bottom:4px }
.stack__label{
  align-self:flex-start; font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; padding:7px 13px; border-radius:999px; border:2px solid currentColor;
}
.stack__name{ font-family:var(--ff-disp); font-size:clamp(22px,3.1vw,44px); text-transform:uppercase; line-height:1; margin:2px 0 0 }
.stack__desc{ margin:0; color:#DAD7E8; font-size:16px; line-height:1.62; max-width:60ch }
.stack__links{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:auto; padding-top:18px;
  border-top:2px solid #FFFFFF14;
}
.stack__link{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:11px 19px; border-radius:999px; border:2px solid currentColor;
  transition:background .2s, transform .2s;
}
.stack__link:hover{ background:currentColor; transform:translateY(-2px) }
.stack__link:hover span{ color:var(--ink) }

@media (max-width:860px){
  .stack__card{ grid-template-columns:1fr; gap:10px }
  .stack__num{ font-size:26px }
}

/* ============ progress + transition ============ */
.prog{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:950; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--flare),var(--volt),var(--cyan)); }
.warp{ position:fixed; inset:0; z-index:940; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,209,102,.28) 0%, rgba(255,46,126,.18) 35%, transparent 70%); }

/* kinetic headings */
.disp .ch{ display:inline-block; will-change:transform,opacity }

/* ============ scene transition ============ */
.wipe{
  position:fixed; inset:0; z-index:945; pointer-events:none;
  transform:scaleY(0); transform-origin:top center;
  background:linear-gradient(180deg,var(--flare) 0%,var(--vio) 55%,var(--ink) 100%);
}
.wipe__mark{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--ff-disp); font-size:clamp(28px,6vw,86px); text-transform:uppercase;
  color:#ffffff1f; letter-spacing:-.02em; opacity:0;
}

/* ============ mobile art: 900px WebP, 74% lighter than the desktop JPEGs ============ */
@media (max-width:900px){
  .art--hero{ background-image:image-set(url('./assets/m/01-hero-city.webp') type('image/webp'), url('./assets/web/01-hero-city.jpg') type('image/jpeg')) }
  .art--eyes{ background-image:image-set(url('./assets/m/02-eyes.webp') type('image/webp'), url('./assets/web/02-eyes.jpg') type('image/jpeg')) }
  .art--thermal{ background-image:image-set(url('./assets/m/03-thermal.webp') type('image/webp'), url('./assets/web/03-thermal.jpg') type('image/jpeg')) }
  .art--format{ background-image:image-set(url('./assets/m/04-format.webp') type('image/webp'), url('./assets/web/04-format.jpg') type('image/jpeg')) }
  .art--topics{ background-image:image-set(url('./assets/m/05-topics.webp') type('image/webp'), url('./assets/web/05-topics.jpg') type('image/jpeg')) }
  .art--tunnel{ background-image:image-set(url('./assets/m/06-tunnel.webp') type('image/webp'), url('./assets/web/06-tunnel.jpg') type('image/jpeg')) }
  .art--launch{ background-image:image-set(url('./assets/m/07-launch.webp') type('image/webp'), url('./assets/web/07-launch.jpg') type('image/jpeg')) }
  .art--arcade{ background-image:image-set(url('./assets/m/08-arcade.webp') type('image/webp'), url('./assets/web/08-arcade.jpg') type('image/jpeg')) }
  .art--lineup{ background-image:image-set(url('./assets/m/09-lineup.webp') type('image/webp'), url('./assets/web/09-lineup.jpg') type('image/jpeg')) }
  .curtain__panel--l{ background-image:image-set(url('./assets/m/curtain-l.webp') type('image/webp'), url('./assets/web/curtain-l.jpg') type('image/jpeg')) }
  .curtain__panel--r{ background-image:image-set(url('./assets/m/curtain-r.webp') type('image/webp'), url('./assets/web/curtain-r.jpg') type('image/jpeg')) }
}

/* mobile: stop promoting nine full-viewport layers, phones do not have the GPU memory */
@media (max-width:900px){
  .art{ will-change:auto }
  .stack__card{ will-change:auto; transform:none !important }
  .prog{ height:2px }
  .btn{ padding:15px 26px }
  .social__btn{ width:52px; height:52px }
  .tuner__ch{ padding:14px 18px }
  .rail{ display:none }
}

/* ============ accessibility ============ */
.skip{
  position:absolute; left:12px; top:-60px; z-index:1000;
  background:var(--volt); color:var(--ink);
  font-family:var(--ff-mono); font-size:13px; font-weight:700;
  padding:12px 20px; border-radius:999px; border:3px solid var(--ink);
  transition:top .18s;
}
.skip:focus{ top:12px }

/* one visible focus style everywhere, not just the two places I'd styled */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--volt);
  outline-offset:3px;
  border-radius:6px;
}
.sc-eyes a:focus-visible, .sc-eyes button:focus-visible,
.sc-format a:focus-visible, .sc-format button:focus-visible{
  outline-color:#9B1F55;
}
main:focus{ outline:none }

/* honour reduced motion for the new layers too */
@media (prefers-reduced-motion:reduce){
  .glow, .wipe, .crt__static{ display:none !important }
  .prog{ transition:none }
  html{ scroll-behavior:auto }
}

/* ============ method: editorial list, illustration stays visible ============
   Replaced a full-width dark panel that covered the artwork and was mostly
   empty. Content now holds a column; the drawing gets the rest of the frame. */
.sc-format{ align-content:center }
.format__card{ max-width:min(560px, 52vw) }

.method{ position:relative; margin-top:30px; padding-left:14px }

/* the active numeral, set huge and hollow behind the list */
.method__ghost{ display:none }

/* playhead: one mark that tracks the open item */
.method__list::before{
  content:''; position:absolute; left:-14px; top:0; width:3px; height:var(--ph-h,0px);
  transform:translateY(var(--ph-y,0px));
  background:var(--flare); border-radius:2px;
  transition:transform .45s cubic-bezier(.16,1,.3,1), height .45s cubic-bezier(.16,1,.3,1);
}

.method__list{ list-style:none; margin:0; padding:0; position:relative; z-index:1 }
.method__item{ border-top:2px solid #140B2626 }
.method__item:last-child{ border-bottom:2px solid #140B2626 }

.method__head{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:16px; padding:17px 2px; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--ff-body); color:#140B26;
}
.method__n{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; color:#140B2680;
  transition:color .25s;
}
.method__label{
  font-family:var(--ff-disp); font-size:clamp(15px,1.7vw,22px);
  text-transform:uppercase; letter-spacing:-.01em; line-height:1;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.method__rule{
  width:clamp(26px,4vw,54px); height:2px; background:#140B2633; justify-self:end;
  transform-origin:right center; transition:transform .35s cubic-bezier(.16,1,.3,1), background .25s;
}
.method__head:hover .method__label{ transform:translateX(6px) }
.method__head:hover .method__rule{ transform:scaleX(1.5); background:var(--flare) }

.method__item.is-on .method__n{ color:var(--flare) }
.method__item.is-on .method__label{ transform:translateX(10px) }
.method__item.is-on .method__rule{ background:var(--flare); transform:scaleX(1.8) }

.method__detail{ overflow:hidden; height:0 }
.method__detail p{
  margin:0; padding:0 0 20px 40px; max-width:44ch;
  font-size:clamp(14.5px,1.2vw,17px); line-height:1.6; color:#3A2C46;
}

@media (max-width:900px){
  .format__card{ max-width:none }
  .method__ghost{ right:-2%; font-size:clamp(110px,30vw,170px) }
  .method__detail p{ padding-left:0 }
}

/* ============ detection reticle cursor ============
   The site's own subject matter, pointed back at the visitor: a detector that
   boxes whatever you hover, labels its class and scores it. Fine pointers only,
   and it stands down entirely for reduced motion. */
@media (hover:hover) and (pointer:fine){
  html.det, html.det *{ cursor:none }
  html.det input, html.det textarea{ cursor:text }
}
.det-wrap{ position:fixed; inset:0; z-index:960; pointer-events:none; contain:layout style }
.det-box{
  position:absolute; left:0; top:0; width:26px; height:26px;
  transform:translate3d(-50%,-50%,0);
  will-change:transform,width,height;
}
.det-box i{
  position:absolute; width:9px; height:9px;
  border:2px solid var(--cyan); border-radius:1px;
}
.det-box i:nth-child(1){ left:0;  top:0;    border-right:0; border-bottom:0 }
.det-box i:nth-child(2){ right:0; top:0;    border-left:0;  border-bottom:0 }
.det-box i:nth-child(3){ left:0;  bottom:0; border-right:0; border-top:0 }
.det-box i:nth-child(4){ right:0; bottom:0; border-left:0;  border-top:0 }
.det-box.is-locked i{ border-color:var(--volt) }

/* crosshair, only while nothing is locked */
.det-cross{ position:absolute; inset:0; opacity:1; transition:opacity .18s }
.det-cross::before, .det-cross::after{
  content:''; position:absolute; background:var(--cyan);
}
.det-cross::before{ left:50%; top:-7px; width:2px; height:7px; transform:translateX(-50%) }
.det-cross::after{ left:50%; bottom:-7px; width:2px; height:7px; transform:translateX(-50%) }
.det-box.is-locked .det-cross{ opacity:0 }

/* the readout rides the top-left corner, like a detector overlay */
.det-tag{
  position:absolute; left:0; top:-10px; transform:translateY(-100%);
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--ff-mono); font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); background:var(--cyan);
  padding:4px 8px; border-radius:3px;
  opacity:0; transform-origin:left bottom;
}
.det-box.is-locked .det-tag{ background:var(--volt) }
.det-tag b{ font-weight:700; opacity:.62 }

@media (prefers-reduced-motion:reduce){ .det-wrap{ display:none } }

/* ============ card title as the primary target ============
   Cards stack from the top, so a card's lower edge is the first thing the next
   one covers. Buttons parked down there vanish almost immediately. The title
   sits in the region that stays visible for the whole stack, and it is a much
   bigger thing to hit. */
.stack__title{
  display:inline-flex; align-items:center; gap:.32em;
  color:inherit; text-decoration:none;
}
.stack__title svg{
  width:.52em; height:.52em; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:translate(-5px,5px);
  transition:opacity .22s, transform .22s cubic-bezier(.16,1,.3,1);
}
.stack__title::after{
  content:''; position:absolute; left:0; right:0; top:0; bottom:0;
  border-radius:19px; z-index:1;
}
.stack__card{ position:sticky }
.stack__body{ position:relative }
.stack__links{ position:relative; z-index:2 }
.stack__title:hover svg,
.stack__title:focus-visible svg{ opacity:1; transform:translate(0,0) }
.stack__card:hover .stack__title svg{ opacity:.55; transform:translate(0,0) }
.stack__title:focus-visible{ outline:3px solid var(--volt); outline-offset:6px; border-radius:6px }

/* ============ works without JS ============
   These elements start hidden and are only revealed once GSAP runs. Without a
   fallback, a blocked or failed script leaves a blank page and no error. */
.no-js .hero__inner,
.js-failed .hero__inner{ opacity:1 }
.no-js .curtain__panel,
.js-failed .curtain__panel{ display:none }
.no-js .method__detail,
.js-failed .method__detail{ height:auto }
.no-js .det-wrap,
.js-failed .det-wrap{ display:none }
.no-js.det, .no-js.det *,
.js-failed.det, .js-failed.det *{ cursor:auto }

/* words stay whole; only the letters inside them animate */
.disp .wd{ display:inline-block; white-space:nowrap }

/* words stay whole; only the letters inside them animate */
.disp .wd{ display:inline-block; white-space:nowrap }

/* ============ rail: chapter index with a progress spine ============
   Opens itself when the scroll pattern says someone is hunting rather than
   reading — repeated direction reversals inside a short window. */
.rail{ padding-right:2px }
.rail__spine{
  position:absolute; right:5px; top:-14px; bottom:-14px; width:2px;
  background:#FFFFFF1F; border-radius:2px; pointer-events:none;
}
.rail__fill{
  position:absolute; left:0; top:0; width:100%; height:0;
  background:linear-gradient(180deg,var(--flare),var(--volt));
  border-radius:2px; transform-origin:top;
}
.rail__dot{ z-index:1 }

/* labels: always on while open, otherwise on hover only */
.rail.is-open .rail__dot::after{ opacity:1; transform:translateY(-50%) translateX(0) }
.rail.is-open .rail__dot{ border-color:#FFFFFF66 }

.rail__jump{
  margin-top:6px; align-self:flex-end;
  display:flex; align-items:center; gap:6px;
  font-family:var(--ff-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); background:var(--volt);
  border:2px solid var(--ink); border-radius:999px;
  padding:6px 10px; cursor:pointer;
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity .24s, transform .24s cubic-bezier(.16,1,.3,1);
}
.rail.is-open .rail__jump{ opacity:1; transform:translateX(0); pointer-events:auto }
.rail__jump:hover{ background:var(--flare); color:var(--paper) }
.rail__jump:focus-visible{ outline:3px solid var(--volt); outline-offset:3px; opacity:1; pointer-events:auto }
@media (prefers-reduced-motion:reduce){ .rail__jump{ transition:none } }