/* =====================================================================
   unchanged — design system
   Restraint first (after resend.com and linear.app): one idea per screen,
   type does the work, hairlines instead of boxes, one object per section.
   Palette (base): 03071E 370617 6A040F 9D0208 D00000 DC2F02 E85D04 F48C06 FAA307 FFBA08
   The page starts black and each section steps one shade along the ramp.
   ===================================================================== */
:root{
  --p0:#03071E; --p1:#370617; --p2:#6A040F; --p3:#9D0208; --p4:#D00000;
  --p5:#DC2F02; --p6:#E85D04; --p7:#F48C06; --p8:#FAA307; --p9:#FFBA08;
  --ink:#03071E;
  --fg:#F2EFEE; --fg-2:#D9D2D0; --mute:#9A8F8D; --mute-2:#6E6462;
  --line:rgba(255,240,232,.09); --line-2:rgba(255,240,232,.16);
  --gold:linear-gradient(180deg,#FFFFFF 0%,#FFE9C2 45%,#F8C77A 100%);
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,0,1);
  --gut:clamp(20px,5vw,72px);
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000;color:var(--fg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color-scheme:dark;scroll-behavior:smooth}
body{font-family:var(--sans);font-size:16px;line-height:1.6;background:#000;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol,ul{list-style:none}
::selection{background:rgba(255,186,8,.28)}
:focus-visible{outline:1px solid var(--fg);outline-offset:3px;border-radius:6px}
code,.mono{font-family:var(--mono)}
.mono{font-size:12px;letter-spacing:.01em}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ---------- bands: one step along the ramp per section, lit like metal ---------- */
.band{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--from),var(--to))}
.band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 38% at 50% 0%,var(--sheen,rgba(255,255,255,.05)),transparent 72%),
             linear-gradient(110deg,transparent 35%,rgba(255,255,255,.025) 50%,transparent 65%)}
.band+.band::after{content:"";position:absolute;left:50%;top:0;width:min(720px,70%);height:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--edge,rgba(255,255,255,.18)),transparent)}
.b0{--from:#000;--to:var(--p0);--sheen:rgba(140,150,255,.07)}
.b1{--from:var(--p0);--to:#12040E;--sheen:rgba(255,200,210,.05);--edge:rgba(255,220,225,.16)}
.b2{--from:#12040E;--to:#1F050F;--sheen:rgba(255,170,120,.06);--edge:rgba(255,210,200,.14)}
.b3{--from:#1F050F;--to:var(--p1);--sheen:rgba(255,190,190,.06);--edge:rgba(255,210,210,.18)}
.b4{--from:var(--p1);--to:#4A0511;--sheen:rgba(255,180,170,.07);--edge:rgba(255,210,200,.2)}
.b5{--from:#4A0511;--to:var(--p2);--sheen:rgba(255,170,150,.08);--edge:rgba(255,205,190,.22)}
.b6{--from:var(--p2);--to:var(--p3);--sheen:rgba(255,170,130,.1);--edge:rgba(255,210,180,.26)}
.bc{background:linear-gradient(180deg,var(--p3) 0%,var(--p4) 30%,var(--p5) 55%,var(--p6) 78%,var(--p7) 100%);--sheen:rgba(255,230,190,.22);--edge:rgba(255,225,200,.35)}
.b5,.b6{--mute:rgba(255,232,224,.66);--mute-2:rgba(255,226,216,.46);--line:rgba(255,236,226,.14);--line-2:rgba(255,236,226,.24)}

/* ---------- type ---------- */
.display{font-weight:500;font-size:clamp(46px,6vw,92px);line-height:1;letter-spacing:-.048em;color:var(--fg);text-wrap:balance}
.display .gold{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.title{font-weight:500;font-size:clamp(32px,3.8vw,54px);line-height:1.06;letter-spacing:-.035em;color:var(--fg);text-wrap:balance}
.title .mute{color:var(--mute)}
.sub{color:var(--mute);font-size:clamp(16px,1.3vw,18px);line-height:1.6;letter-spacing:-.005em;max-width:560px;text-wrap:pretty}
.head.center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.head.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,96px);align-items:end}
.mute{color:var(--mute)}
.tag{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:11px;font-size:14.5px;font-weight:500;white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s,border-color .25s}
.btn.sm{height:34px;padding:0 14px;font-size:13.5px;border-radius:9px}
.btn.solid{background:linear-gradient(180deg,#FFFFFF,#ECE6E3);color:var(--ink);box-shadow:inset 0 -1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.3)}
.btn.solid:hover{box-shadow:inset 0 -1px 0 rgba(0,0,0,.1),0 0 0 4px rgba(255,255,255,.08)}
.btn.ghost{border:1px solid var(--line-2);background:rgba(255,255,255,.035);color:var(--fg)}
.btn.ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26)}
.btn.text{color:var(--mute);padding:0 6px}
.btn.text:hover{color:var(--fg)}
.btn.ink{background:var(--ink);color:#FFF3E2;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 30px -10px rgba(3,7,30,.6)}
.btn.ink:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 4px rgba(3,7,30,.14)}
.btn.ink-t{color:rgba(3,7,30,.72)}
.btn.ink-t:hover{color:var(--ink)}
.cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:36px}
.cta.center{justify-content:center}
.pill{position:relative;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;font-size:12.5px;color:var(--fg-2);background:rgba(255,255,255,.03)}
.pill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(248,199,122,.45),rgba(255,255,255,.14));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pill .mono{color:#F8C77A;font-size:11.5px}
.pill i{font-style:normal;color:var(--mute)}
.rd{display:inline-block;height:.85em;vertical-align:-.06em;border-radius:3px;background:repeating-linear-gradient(135deg,rgba(0,0,0,.38) 0 6px,rgba(0,0,0,.24) 6px 12px);box-shadow:inset 0 0 0 1px rgba(255,236,220,.07)}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px;padding:0 var(--gut);transition:background .35s,box-shadow .35s}
.top.solid{background:rgba(0,0,0,.55);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.brand{font-size:17px;font-weight:600;letter-spacing:-.035em;line-height:1}
.nav{display:flex;gap:28px;font-size:14px;color:var(--mute)}
.nav a{transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--fg)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- sections ---------- */
.sec{padding:clamp(110px,16vh,170px) var(--gut)}

/* hero */
.hero{min-height:min(100vh,940px);display:flex;align-items:center}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,64px);align-items:center;width:100%;padding-top:96px;padding-bottom:64px}
.hero-copy .pill{margin-bottom:34px}
.hero-sub{margin-top:28px;color:var(--mute);font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;max-width:500px}
.hero-art{position:relative;aspect-ratio:1/1;min-width:0}
.dome{display:block;width:100%;height:100%}

/* method */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:80px}
.feats article{display:flex;flex-direction:column;align-items:flex-start}
.ico{width:40px;height:40px;padding:9px;border-radius:11px;fill:none;stroke:var(--fg-2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.06),0 8px 20px -10px rgba(0,0,0,.8)}
.feats h3{margin-top:22px;font-size:17px;font-weight:500;letter-spacing:-.015em}
.feats p{margin-top:8px;color:var(--mute);font-size:15px;line-height:1.6;max-width:320px}
.spec{margin:96px auto 0;max-width:820px}
.spec-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:18px}
.spec-tabs button{height:32px;padding:0 12px;border-radius:9px;font-size:13px;color:var(--mute);border:1px solid transparent;transition:color .25s,background .25s,border-color .25s}
.spec-tabs button:hover{color:var(--fg-2)}
.spec-tabs button[aria-selected="true"]{color:var(--fg);background:rgba(255,255,255,.05);border-color:var(--line-2)}

/* windows (code) */
.win{border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px var(--line),0 40px 80px -40px rgba(0,0,0,.9)}
.win-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);color:var(--mute)}
.win-bar .ok{display:inline-flex;align-items:center;gap:8px}
.win-bar .ok::before{content:"";width:6px;height:6px;border-radius:50%;background:#7FD8B0;box-shadow:0 0 8px #7FD8B0}
.code{counter-reset:cl;padding:18px 0;font-family:var(--mono);font-size:13px;line-height:1.85;color:#E3D8D4;white-space:pre;overflow-x:auto}
.code .l{display:block;position:relative;padding:0 24px 0 54px}
.code .l::before{counter-increment:cl;content:counter(cl);position:absolute;left:0;width:34px;text-align:right;color:rgba(255,255,255,.18)}
.code .kw{color:#B7A8A4}.code .k{color:#F8C77A}.code .p{color:#7D716F}.code .n,.code .val{color:#FFB46A}.code .c{color:#7D716F;font-style:italic}
.code .l.hot{background:linear-gradient(90deg,rgba(248,199,122,.09),transparent 75%)}
.code .l.hot::after{content:"";position:absolute;left:42px;top:5px;bottom:5px;width:2px;border-radius:2px;background:#F8C77A;box-shadow:0 0 10px rgba(248,199,122,.7)}
.code .caret{display:inline-block;width:7px;height:1.05em;background:var(--fg);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* dome story */
.dome-track{height:420vh}
.dome-stick{position:sticky;top:0;height:100vh;display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;padding:96px var(--gut) 48px;overflow:hidden}
.dome-head .sub{max-width:600px}
.dome.big{width:min(760px,92vw);height:100%;min-height:0}
.beats{position:relative;width:min(560px,100%);height:120px;text-align:center}
.beat{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.beat.on{opacity:1;transform:none}
.beat h3{font-size:18px;font-weight:500;letter-spacing:-.015em}
.beat p{margin-top:8px;color:var(--mute);font-size:15px;line-height:1.55}

/* proof */
.exhibit{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);margin-top:80px;align-items:center}
.exhibit>*{min-width:0}
.verdict>div{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.verdict>div:last-child{border-bottom:1px solid var(--line)}
.verdict dt{font-family:var(--mono);font-size:11.5px;color:var(--mute-2);text-transform:uppercase;letter-spacing:.06em}
.verdict dd{color:var(--fg-2);font-size:15px;line-height:1.5}
.verdict code{font-size:13px;color:#F8C77A}
.verdict .st{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.st.ok{color:#7FD8B0}.st.bad{color:#FF8F70}
.exhibit figcaption{grid-column:1/-1;font-size:13px;color:var(--mute-2)}
.exhibit figcaption a{color:var(--mute);border-bottom:1px solid var(--line-2)}
.exhibit figcaption a:hover{color:var(--fg)}
.points{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:88px}
.points li{padding-top:20px;border-top:1px solid var(--line-2)}
.points h3{font-size:16px;font-weight:500;letter-spacing:-.012em}
.points p{margin-top:8px;color:var(--mute);font-size:14.5px;line-height:1.55}
.points code{font-size:13px;color:#F8C77A}

/* bench figure: anatomy kit, retoned to the ember ramp */
.bench{max-width:780px;margin:72px auto 0}
.bench.iso{
  --anatomy-page:transparent;--anatomy-card:rgba(10,3,6,.42);--anatomy-text:var(--mute);--anatomy-strong:var(--fg);--anatomy-muted:var(--mute-2);
  --anatomy-paper:#1A0A0D;--anatomy-face:#24100F;--anatomy-top:#2A1214;
  --anatomy-shade-0:#120607;--anatomy-shade-1:#170809;--anatomy-shade-2:#1C0A0C;--anatomy-shade-3:#220C0E;
  --anatomy-lit-top:#3A1A14;--anatomy-lit-shade:#2A120F;
  --anatomy-hi:#EAD7CF;--anatomy-mid:#8E716B;--anatomy-lo:#553C38;--anatomy-faint:#3A2725;--anatomy-lit:#FFC56B;
  --anatomy-halo:#050102;--anatomy-dot:#EAD7CF;
}
.bench .iso-plate{border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,240,230,.08),inset 0 0 0 1px var(--line),0 50px 100px -50px rgba(0,0,0,.9)!important;background:var(--anatomy-card)}
.bench .iso-legend{color:var(--mute)}
.bench .iso-caption{color:var(--mute);max-width:640px}

/* atlas: hairline rows that open */
.atlas{margin-top:72px;border-bottom:1px solid var(--line)}
.atlas details{border-top:1px solid var(--line)}
.atlas summary{display:grid;grid-template-columns:minmax(220px,1fr) 1.5fr 20px;gap:24px;align-items:center;padding:22px 0;cursor:pointer;list-style:none}
.atlas summary::-webkit-details-marker{display:none}
.atlas .dn{font-size:18px;font-weight:500;letter-spacing:-.018em}
.atlas .dt{color:var(--mute);font-size:14.5px}
.atlas summary i{position:relative;width:12px;height:12px;justify-self:end}
.atlas summary i::before,.atlas summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--mute);transition:transform .35s var(--ease)}
.atlas summary i::after{transform:rotate(90deg)}
.atlas details[open] summary i::after{transform:rotate(0)}
.atlas summary:hover .dn{color:#fff}
.atlas .dd{display:grid;grid-template-columns:minmax(220px,1fr) 1.5fr 20px;gap:24px;padding:0 0 24px}
.atlas .dd p{grid-column:2;font-size:15px;color:var(--fg-2);line-height:1.55}
.atlas .dd p+p{color:var(--mute);margin-top:-14px}
.atlas .dd b{font-weight:500;color:var(--fg);margin-right:6px}

/* software */
.products{margin-top:72px;border-bottom:1px solid var(--line)}
.prod{display:grid;grid-template-columns:56px minmax(180px,.9fr) 2fr 200px;gap:clamp(16px,2.5vw,40px);align-items:baseline;padding:30px 0;border-top:1px solid var(--line)}
.prod .n{color:var(--mute-2)}
.pn{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pn h3{font-weight:500;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.04em;line-height:1}
.pn [lang="ar"]{font-size:20px;color:var(--fg-2)}
.pn .mute{font-size:14px}
.pd{color:var(--fg-2);font-size:16px;line-height:1.6;max-width:620px}
.ps{justify-self:end;font-size:13.5px;color:var(--mute);display:inline-flex;align-items:center;gap:8px}
.ps .dot{width:6px;height:6px;border-radius:50%;background:#FFC56B;box-shadow:0 0 10px #FFC56B}
.prod.next .pd,.prod.next .pn{opacity:.9}

/* close */
.close-in{padding:clamp(150px,22vh,230px) var(--gut);text-align:center}
.close .display{font-size:clamp(46px,6.4vw,96px)}
.close .display .light{color:rgba(255,246,236,.72)}
.close .cta{margin-top:44px}

/* footer */
.foot{background:linear-gradient(180deg,var(--p8),var(--p9));color:rgba(3,7,30,.72);font-size:13.5px}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px}
.foot-in>span:first-child{font-weight:600;letter-spacing:-.035em;font-size:16px;color:var(--ink)}
.foot nav{display:flex;gap:22px}
.foot a:hover{color:var(--ink)}

/* ---------- long-form (philosophy) ---------- */
body.philo{background:linear-gradient(180deg,#000 0,var(--p0) 16%,#12040E 40%,var(--p1) 75%,#4A0511 100%)}
.page{max-width:var(--max);margin:0 auto;padding:clamp(150px,20vh,200px) var(--gut) 0}
.page-head{max-width:900px}
.page-head .display{margin-top:24px;font-size:clamp(48px,6.4vw,92px)}
.page-head .sub{margin-top:28px;font-size:clamp(17px,1.5vw,20px);max-width:620px}
.essay{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,6vw,110px);margin-top:120px}
.toc{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column}
.toc a{position:relative;padding:7px 0 7px 16px;font-size:13.5px;color:var(--mute-2);transition:color .25s}
.toc a::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:1px;background:var(--line-2)}
.toc a.on{color:var(--fg)}
.toc a.on::before{width:2px;background:#F8C77A;box-shadow:0 0 10px rgba(248,199,122,.7)}
.essay-body section{max-width:680px;padding:0 0 88px;scroll-margin-top:110px}
.essay-body section+section{padding-top:64px;border-top:1px solid var(--line)}
.essay-body .tag{margin-bottom:18px}
.essay-body h2{font-weight:500;font-size:clamp(26px,2.4vw,34px);line-height:1.15;letter-spacing:-.035em;margin-bottom:24px;text-wrap:balance}
.essay-body p{font-size:17.5px;line-height:1.75;color:var(--fg-2)}
.essay-body p+p{margin-top:18px}
.essay-body p.mute{color:var(--mute)}
.essay-body code{font-size:15px;color:#F8C77A}
.essay-body a.u{color:var(--fg);border-bottom:1px solid var(--line-2);transition:border-color .25s}
.essay-body a.u:hover{border-color:var(--fg)}
.essay-body .win{margin:32px 0 6px}
.ledger{margin-top:28px;border-bottom:1px solid var(--line)}
.ledger li{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--fg-2)}
.ledger li>span:last-child{font-size:13.5px;color:var(--mute);text-align:right}
.ledger li.hot>span{color:#FFD99A}
body.philo .foot{margin-top:80px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav{display:none}
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero-art{max-width:520px;width:100%;margin:0 auto}
  .head.split{grid-template-columns:minmax(0,1fr)}
  .exhibit{grid-template-columns:minmax(0,1fr)}
  .points{grid-template-columns:1fr 1fr}
  .essay{grid-template-columns:minmax(0,1fr);margin-top:72px}.toc{display:none}
  .prod{grid-template-columns:48px minmax(0,1fr)}.prod .pd,.prod .ps{grid-column:2}.ps{justify-self:start}
}
@media (max-width:680px){
  .feats{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:56px}
  .points{grid-template-columns:minmax(0,1fr)}
  .atlas summary,.atlas .dd{grid-template-columns:minmax(0,1fr) 20px;gap:6px 16px}
  .atlas .dt{grid-row:2;grid-column:1}.atlas summary i{grid-row:1/span 2;grid-column:2}
  .atlas .dd p{grid-column:1}
  .verdict>div{grid-template-columns:64px minmax(0,1fr)}.verdict .st{grid-column:2}
  .dome-track{height:360vh}
  .beats{height:150px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}.rv{opacity:1;transform:none}}

/* =====================================================================
   PINNED SECTIONS: every section holds a fixed view; scrolling walks its steps.
   JS sets the section height from data-steps and toggles .on on [data-only]
   (the current step) and [data-at] (this step and after).
   ===================================================================== */
.pin{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.stage>.wrap{width:100%}
.split-stage{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,88px);align-items:center;padding-top:64px}
.col-stage{display:flex;flex-direction:column;gap:clamp(28px,5vh,56px);padding-top:64px}
.split-stage>*,.col-stage>*{min-width:0}
.lead .sub{margin-top:18px}
[data-only],[data-at]{transition:opacity .55s var(--ease),transform .55s var(--ease),color .45s,max-height .6s var(--ease)}

/* step index (left column) */
.index{margin-top:clamp(28px,5vh,48px);border-top:1px solid var(--line)}
.index li{display:grid;grid-template-columns:36px 1fr;padding:16px 0;border-bottom:1px solid var(--line);color:var(--mute-2);cursor:default}
.index .mono{padding-top:4px;color:inherit}
.index h3{font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--mute)}
.index p{max-height:0;overflow:hidden;opacity:0;margin-top:0;color:var(--mute);font-size:15px;line-height:1.55;transition:max-height .6s var(--ease),opacity .5s,margin .5s}
.index li.on{color:#F8C77A}
.index li.on h3{color:var(--fg)}
.index li.on p{max-height:120px;opacity:1;margin-top:8px}

/* panes that swap in place */
.panes{display:grid}
.win-bar [data-only]{display:none}.win-bar [data-only].on{display:inline}
.panes .pane{grid-area:2/1;opacity:0;transform:translateY(6px);pointer-events:none}
.panes .pane.on{opacity:1;transform:none;pointer-events:auto}
.panes .win-bar{grid-area:1/1}
.code .ok-t{color:#7FD8B0}
.swap{display:grid}
.swap>*{grid-area:1/1;opacity:0;transform:translateY(6px)}
.swap>.on{opacity:1;transform:none}

/* hero scene */
.hero{min-height:0;display:block}
.hero .stage{align-items:center}
.lattice{position:absolute;inset:0;width:100%;height:100%;display:block}
.frags{position:absolute;inset:0;pointer-events:none}
.frag{position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--mono);font-size:11.5px;color:var(--fg-2);padding:5px 9px;border-radius:7px;background:rgba(3,7,30,.45);box-shadow:inset 0 0 0 1px rgba(255,236,220,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);will-change:transform,opacity;opacity:0}
.frag b{font-weight:500;color:#F8C77A;margin-right:6px}
.hero-in{position:relative;z-index:2;pointer-events:none;padding-top:40px}
.hero-in a,.hero-in .cta{pointer-events:auto}
.hero-copy{max-width:600px}
.hero .hero-sub{margin-top:26px}
.scroll-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);color:var(--mute-2);letter-spacing:.12em;text-transform:uppercase;font-size:10.5px;opacity:0}
.scroll-hint.on{opacity:1}

/* dome: bigger, centred between its title and its beats */
.dome-sec .stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;align-items:stretch;padding:88px var(--gut) 36px}
.dome-sec .dome{width:min(1180px,100%);height:100%}
.dome-sec .dome-head{gap:14px}
.dome-sec .dome-head .title{font-size:clamp(30px,3.4vw,48px)}
.dome-sec .dome-head .sub{font-size:15.5px;max-width:620px}
.beats{position:relative;width:min(600px,100%);height:116px;text-align:center}
.beat{position:absolute;inset:0;opacity:0;transform:translateY(10px)}
.beat.on{opacity:1;transform:none}

/* proof exhibit */
.exhibit{margin-top:0}
.exhibit-r{display:flex;flex-direction:column;gap:28px}
.verdict>div[data-at]{opacity:.12}
.verdict>div[data-at].on{opacity:1}
.points[data-at]{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;margin-top:0;opacity:0;transform:translateY(8px)}
.points[data-at].on{opacity:1;transform:none}
.points li{padding-top:12px}
.points h3{font-size:14.5px}
.points p{font-size:13.5px;margin-top:4px}
.credit{font-size:12.5px;color:var(--mute-2)}
.credit a{color:var(--mute);border-bottom:1px solid var(--line-2)}

/* bench in a pinned split */
.bench-stage .bench{margin:0;max-width:none}
.bench-stage .iso-legend,.bench-stage .iso-caption{display:none}

/* atlas rows: the current row opens */
.atlas{margin-top:0;border-bottom:1px solid var(--line)}
.atlas .row{display:grid;grid-template-columns:minmax(220px,1fr) 1.5fr;gap:4px 24px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line)}
.atlas .dn{font-size:16.5px;font-weight:500;letter-spacing:-.018em;color:var(--mute)}
.atlas .dt{color:var(--mute-2);font-size:14px}
.atlas .dd{grid-column:2;max-height:0;overflow:hidden;opacity:0;display:block;padding:0;transition:max-height .6s var(--ease),opacity .45s,margin .45s}
.atlas .dd p{font-size:14.5px;color:var(--fg-2);line-height:1.5}
.atlas .dd p+p{color:var(--mute);margin-top:2px}
.atlas .dd b{font-weight:500;color:var(--fg);margin-right:6px}
.atlas .row.on .dn{color:var(--fg)}
.atlas .row.on .dt{color:var(--mute)}
.atlas .row.on .dd{max-height:90px;opacity:1;margin-top:8px}

/* software */
#software .products{margin-top:0}

/* ---------- no pinning on small or short screens: everything in order ---------- */
@media (max-height:560px){
  .pin{height:auto!important}
  .stage{position:relative;height:auto;min-height:0;display:block;padding:96px 0 72px}
  .split-stage{grid-template-columns:minmax(0,1fr)}
  .index li p{max-height:none;opacity:1;margin-top:8px}.index li h3{color:var(--fg)}
  .panes .pane{grid-area:auto;opacity:1;transform:none}.panes .pane+.pane{border-top:1px solid var(--line)}
  .win-bar [data-only]{display:none}.win-bar [data-only]:first-child{display:inline}
  .swap>*:not(:first-child){display:none}.swap>*:first-child{opacity:1;transform:none}
  .hero .stage{min-height:100vh;display:flex;align-items:flex-end;padding-bottom:64px}
  .dome-sec .stage{display:flex;flex-direction:column;min-height:auto}
  .dome-sec .dome{height:60vh}
  .beats{height:auto}.beat{position:relative;opacity:1;transform:none;margin-top:22px}
  .verdict>div[data-at],.points[data-at]{opacity:1;transform:none}
  .points[data-at]{grid-template-columns:minmax(0,1fr)}
  .atlas .row{grid-template-columns:minmax(0,1fr)}.atlas .dd{grid-column:1;max-height:none;opacity:1;margin-top:6px}.atlas .dn{color:var(--fg)}
  .scroll-hint{display:none}
}

/* =====================================================================
   REVERSED RAMP (?ramp=reverse): start at amber, descend to black.
   The bright top bands carry dark ink; the dark bottom bands carry light text.
   ===================================================================== */
html[data-ramp="reverse"],html[data-ramp="reverse"] body{background:var(--p9)}
html[data-ramp="reverse"] .b0{--from:var(--p9);--to:var(--p8);--sheen:rgba(255,255,255,.35)}
html[data-ramp="reverse"] .b1{--from:var(--p8);--to:var(--p7);--sheen:rgba(255,255,255,.25);--edge:rgba(255,255,255,.5)}
html[data-ramp="reverse"] .b2{--from:var(--p7);--to:var(--p6);--sheen:rgba(255,240,220,.2);--edge:rgba(255,245,230,.45)}
html[data-ramp="reverse"] .b3{--from:var(--p6);--to:var(--p5);--sheen:rgba(255,230,210,.16);--edge:rgba(255,240,225,.4)}
html[data-ramp="reverse"] .b4{--from:var(--p5);--to:var(--p4);--sheen:rgba(255,220,200,.12);--edge:rgba(255,230,215,.35)}
html[data-ramp="reverse"] .b5{--from:var(--p4);--to:var(--p3);--sheen:rgba(255,200,180,.1);--edge:rgba(255,220,205,.3)}
html[data-ramp="reverse"] .b6{--from:var(--p3);--to:var(--p2);--sheen:rgba(255,190,170,.08);--edge:rgba(255,215,200,.26)}
html[data-ramp="reverse"] .bc{background:linear-gradient(180deg,var(--p2) 0%,var(--p1) 35%,var(--p0) 75%,#000 100%);--sheen:rgba(255,160,120,.08)}
html[data-ramp="reverse"] .foot{background:#000;color:rgba(242,239,238,.55)}
html[data-ramp="reverse"] .foot-in>span:first-child,html[data-ramp="reverse"] .foot a:hover{color:var(--fg)}
/* ink on the amber and orange bands */
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3){--fg:#03071E;--fg-2:rgba(3,7,30,.82);--mute:rgba(3,7,30,.6);--mute-2:rgba(3,7,30,.45);--line:rgba(3,7,30,.13);--line-2:rgba(3,7,30,.22);color:var(--fg)}
html[data-ramp="reverse"] :is(.b4,.b5,.b6){--fg:#FFF6EE;--fg-2:rgba(255,244,236,.86);--mute:rgba(255,236,226,.7);--mute-2:rgba(255,230,218,.5);--line:rgba(255,236,226,.16);--line-2:rgba(255,236,226,.26)}
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .display .gold{background:linear-gradient(180deg,#6A040F 0%,#370617 100%);-webkit-background-clip:text;background-clip:text}
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .btn.solid{background:var(--ink);color:#FFF3E2;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .pill{background:rgba(3,7,30,.06)}
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .pill::before{background:linear-gradient(90deg,rgba(3,7,30,.3),rgba(106,4,15,.5),rgba(3,7,30,.2))}
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .pill .mono,html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .index li.on{color:#6A040F}
html[data-ramp="reverse"] .frag{color:#03071E;background:rgba(255,246,230,.55);box-shadow:inset 0 0 0 1px rgba(3,7,30,.12)}
html[data-ramp="reverse"] .frag b{color:#9D0208}
/* code windows stay dark glass on any band, with their own light text */
html[data-ramp="reverse"] .win{background:linear-gradient(180deg,rgba(3,7,30,.92),rgba(3,7,30,.86));--line:rgba(255,240,232,.1);--mute:#9A8F8D}
html[data-ramp="reverse"] .close .display{color:var(--fg)}
html[data-ramp="reverse"] .close .display .light{color:rgba(242,239,238,.55)}
html[data-ramp="reverse"] .close .btn.ink{background:linear-gradient(180deg,#FFFFFF,#ECE6E3);color:var(--ink)}
html[data-ramp="reverse"] .close .btn.ink-t{color:var(--mute)}
/* header ink follows the band beneath it (main.js sets data-ink) */
html[data-ramp="reverse"] .top.solid{background:rgba(255,255,255,.08)}
html[data-ramp="reverse"] .top[data-ink="dark"]{--fg:#03071E;--mute:rgba(3,7,30,.62);--line:rgba(3,7,30,.12);--line-2:rgba(3,7,30,.24);color:#03071E}
html[data-ramp="reverse"] .top[data-ink="dark"].solid{background:rgba(255,200,80,.35)}
html[data-ramp="reverse"] .top[data-ink="light"].solid{background:rgba(20,2,6,.45)}
html[data-ramp="reverse"] .top[data-ink="dark"] .btn.ghost{background:rgba(3,7,30,.04)}
/* accents that read on amber and orange */
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .verdict code,html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .points code{color:#6A040F}
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .st.ok{color:#0B5E36}
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .st.bad{color:#6A040F}

/* =====================================================================
   LANDING TYPE COLOURS on the reversed ramp (amber → black).
   Light bands (b0–b3, FFBA08 → DC2F02): ink text, oxblood accents.
   Dark bands (b4–b6, close, DC2F02 → black): warm white text, amber accents.
   ===================================================================== */
html[data-ramp="reverse"] :is(.b0,.b1,.b2){--fg:#03071E;--fg-2:rgba(3,7,30,.84);--mute:rgba(3,7,30,.64);--mute-2:rgba(3,7,30,.5);--line:rgba(3,7,30,.14);--line-2:rgba(3,7,30,.24);--acc:#6A040F}
html[data-ramp="reverse"] .b3{--fg:#03071E;--fg-2:rgba(3,7,30,.88);--mute:rgba(3,7,30,.74);--mute-2:rgba(3,7,30,.6);--line:rgba(3,7,30,.16);--line-2:rgba(3,7,30,.28);--acc:#370617}
html[data-ramp="reverse"] :is(.b4,.b5,.b6,.bc){--fg:#FFF6EE;--fg-2:rgba(255,244,236,.88);--mute:rgba(255,236,226,.74);--mute-2:rgba(255,230,218,.56);--line:rgba(255,236,226,.16);--line-2:rgba(255,236,226,.28);--acc:#FFBA08}
html[data-ramp="reverse"] .band{color:var(--fg)}
/* titles: the second phrase is the band's mute; accents come from --acc */
html[data-ramp="reverse"] .band .title .mute{color:var(--mute)}
html[data-ramp="reverse"] .band .pill .mono,
html[data-ramp="reverse"] .band .index li.on,
html[data-ramp="reverse"] .band .index li.on .mono{color:var(--acc)}
html[data-ramp="reverse"] .band .index li.on h3{color:var(--fg)}
html[data-ramp="reverse"] .band .credit a,html[data-ramp="reverse"] .band .exhibit figcaption a{color:var(--fg-2);border-color:var(--line-2)}
html[data-ramp="reverse"] .band .ps .dot{background:var(--acc);box-shadow:0 0 10px var(--acc)}
html[data-ramp="reverse"] .band .atlas .row.on .dn,html[data-ramp="reverse"] .band .atlas .dd b{color:var(--fg)}
html[data-ramp="reverse"] .band .rd{background:repeating-linear-gradient(135deg,rgba(0,0,0,.34) 0 6px,rgba(0,0,0,.2) 6px 12px)}
/* hero headline: ink, then oxblood for the claim */
html[data-ramp="reverse"] .b0 .display{color:#03071E}
html[data-ramp="reverse"] .b0 .display .gold{background:linear-gradient(180deg,#9D0208 0%,#6A040F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-ramp="reverse"] .b0 .scroll-hint{color:rgba(3,7,30,.5)}
/* buttons per side */
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .btn.solid{background:var(--ink);color:#FFF3E2}
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .btn.text{color:rgba(3,7,30,.66)}
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3) .btn.text:hover{color:var(--ink)}
/* close on black: white headline, the second line in amber */
html[data-ramp="reverse"] .close .display{color:#FFF6EE}
html[data-ramp="reverse"] .close .display .light{background:linear-gradient(180deg,#FFD27A 0%,#F48C06 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-ramp="reverse"] .close .btn.ink{background:linear-gradient(180deg,#FFFFFF,#ECE6E3);color:var(--ink)}
html[data-ramp="reverse"] .close .btn.ink-t{color:rgba(255,236,226,.7)}
html[data-ramp="reverse"] .close .btn.ink-t:hover{color:#fff}
/* header on dark bands: amber accent on hover */
html[data-ramp="reverse"] .top[data-ink="light"]{--fg:#FFF6EE;--mute:rgba(255,236,226,.7);color:#FFF6EE}
html[data-ramp="reverse"] .b3 .verdict dt{color:var(--mute)}
html[data-ramp="reverse"] .b3 .st.ok{color:#03401F}
html[data-ramp="reverse"] .b3 .st.bad{color:#370617}
html[data-ramp="reverse"] .b3 .verdict code{color:#370617;font-weight:500}
/* layers figure */
.bench .hole-wall{fill:var(--anatomy-shade-3)}
.bench .hole-through{fill:#0a0204}
.bench .bug{fill:#FFC56B}
.bench .bug-glow{fill:rgba(255,197,107,.22)}
.bench .bug-ring{fill:none;stroke:#FFE7B0;stroke-width:.8;opacity:0;transition:opacity .3s,r .4s}
.bench [data-bug][data-state="caught"] .bug{fill:#FF6B4A}
.bench [data-bug][data-state="caught"] .bug-glow{fill:rgba(255,107,74,.3)}
.bench [data-bug][data-state="caught"] .bug-ring{opacity:1;stroke:#FF9B7A}
.bench .bug-trail{stroke:#FFC56B;stroke-width:.9;stroke-dasharray:2 3;opacity:.7}
.bench .bug-trail[data-state="caught"]{stroke:#FF8F70}

/* =====================================================================
   PAPER PAGES (philosophy, and anything long-form): white fading to yellow, ink text
   ===================================================================== */
body.philo{--fg:#03071E;--fg-2:rgba(3,7,30,.82);--mute:rgba(3,7,30,.58);--mute-2:rgba(3,7,30,.44);--line:rgba(3,7,30,.1);--line-2:rgba(3,7,30,.18);
  color:var(--fg);background:linear-gradient(180deg,#FFFFFF 0%,#FFFDF7 30%,#FFF6DD 62%,#FFE8A8 88%,#FFD66B 100%) fixed}
html:has(body.philo){background:#FFFFFF;color-scheme:light}
body.philo .grain{opacity:.035;mix-blend-mode:multiply}
body.philo .top{color:#03071E}
body.philo .top.solid{background:rgba(255,255,255,.72);box-shadow:0 1px 0 rgba(3,7,30,.08)}
body.philo .top .btn.ghost{border-color:rgba(3,7,30,.18);background:rgba(3,7,30,.03);color:#03071E}
body.philo .display{color:#03071E}
body.philo .display em,body.philo .display .gold{background:linear-gradient(180deg,#9D0208,#6A040F);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
body.philo .essay-body code{color:#9D0208}
body.philo .toc a.on::before{background:#E85D04;box-shadow:none}
body.philo .ledger li.hot>span{color:#9D0208}
body.philo .win{background:#0B0610;color:#E3D8D4;--line:rgba(255,240,232,.1);--mute:#9A8F8D;box-shadow:0 30px 60px -30px rgba(60,20,0,.35)}
body.philo .foot{background:transparent;color:rgba(3,7,30,.6);border-top:1px solid rgba(3,7,30,.1)}
body.philo .rd{background:repeating-linear-gradient(135deg,#2a2226 0 6px,#1d171a 6px 12px)}

/* =====================================================================
   SECTION HEADERS AND ACTIVE STEPS (Linear/Resend clarity)
   ===================================================================== */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.eyebrow span{display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 6px;border-radius:6px;font-size:11px;letter-spacing:.02em;background:var(--chip-bg);color:var(--chip-fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.head.split .eyebrow{grid-column:1/-1;margin-bottom:-4px}
.title{font-weight:600;font-size:clamp(36px,4.4vw,64px);letter-spacing:-.045em;line-height:1.02}
.band .title .mute{color:var(--acc-title)}
.band .sub{color:var(--fg-2)}

/* light bands: ink type, oxblood second phrase, ink chips */
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3){--chip-bg:#03071E;--chip-fg:#FFD27A;--acc-title:#9D0208;--card:rgba(255,255,255,.62);--card-line:rgba(3,7,30,.12);--card-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 30px -14px rgba(90,30,0,.45),0 2px 6px -2px rgba(90,30,0,.18);--bar:#9D0208;--dim:.5}
html[data-ramp="reverse"] .b3{--acc-title:#370617;--card:rgba(255,255,255,.5)}
/* dark bands: white type, amber second phrase, amber chips */
html[data-ramp="reverse"] :is(.b4,.b5,.b6){--chip-bg:#FFBA08;--chip-fg:#03071E;--acc-title:#FFC94D;--card:rgba(255,255,255,.09);--card-line:rgba(255,236,226,.2);--card-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -18px rgba(0,0,0,.6);--bar:#FFBA08;--dim:.55}

/* step index: inactive rows recede, the active one lifts into a card */
.index{border-top:0;display:flex;flex-direction:column;gap:6px}
.index li{position:relative;padding:14px 18px 14px 16px;border:1px solid transparent;border-bottom:1px solid transparent;border-radius:12px;opacity:var(--dim,.5);transition:opacity .45s var(--ease),background .45s var(--ease),border-color .45s,box-shadow .45s,transform .45s var(--ease)}
.index li:hover{opacity:.8}
.index li h3{color:var(--fg)}
.index li .mono{color:var(--fg)}
.index li.on{opacity:1;background:var(--card);border-color:var(--card-line);box-shadow:var(--card-shadow);transform:translateX(4px)}
.index li.on::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--bar)}
html[data-ramp="reverse"] .band .index li.on .mono{color:var(--bar)}
.index li.on p{color:var(--fg-2)}

/* atlas rows and proof verdict rows get the same lift */
.atlas .row{padding:12px 14px;border-radius:10px;border:1px solid transparent;margin:0 -14px;transition:background .45s,border-color .45s,box-shadow .45s}
.atlas .row+.row{border-top-color:var(--line)}
.atlas .row.on{background:var(--card);border-color:var(--card-line);box-shadow:var(--card-shadow)}
.atlas .row.on .dn{font-weight:600}
.verdict>div[data-at]{padding-left:12px;padding-right:12px;border-radius:10px}
.verdict>div[data-at].on:last-child{background:var(--card);box-shadow:var(--card-shadow);border-color:transparent}
/* products: the live one is a card */
.prod:not(.next){background:var(--card);border-radius:14px;box-shadow:var(--card-shadow);padding:28px 22px;margin:0 -22px;border-top-color:transparent}
.prod:not(.next) + .prod{border-top-color:transparent}

/* =====================================================================
   LANDING RAMP (final): FFBA08 at the top, getting lighter to FFFAE5.
   https://coolors.co/palette/fffae5-fff6cc-fff2b2-ffee99-ffe97f-ffe566-ffe14c-ffdd32-ffd819-ffd400
   Every band is light, so every band carries ink.
   ===================================================================== */
:root{--y0:#FFBA08;--y1:#FFD400;--y2:#FFD819;--y3:#FFDD32;--y4:#FFE14C;--y5:#FFE566;--y6:#FFE97F;--y7:#FFEE99;--y8:#FFF2B2;--y9:#FFF6CC;--y10:#FFFAE5}
html[data-ramp="reverse"],html[data-ramp="reverse"] body{background:var(--y10)}
html[data-ramp="reverse"] .b0{--from:var(--y0);--to:var(--y1);--sheen:rgba(255,255,255,.35)}
html[data-ramp="reverse"] .b1{--from:var(--y1);--to:var(--y3);--sheen:rgba(255,255,255,.3);--edge:rgba(255,255,255,.7)}
html[data-ramp="reverse"] .b2{--from:var(--y3);--to:var(--y5);--sheen:rgba(255,255,255,.3);--edge:rgba(255,255,255,.7)}
html[data-ramp="reverse"] .b3{--from:var(--y5);--to:var(--y6);--sheen:rgba(255,255,255,.3);--edge:rgba(255,255,255,.7)}
html[data-ramp="reverse"] .b4{--from:var(--y6);--to:var(--y7);--sheen:rgba(255,255,255,.35);--edge:rgba(255,255,255,.75)}
html[data-ramp="reverse"] .b5{--from:var(--y7);--to:var(--y8);--sheen:rgba(255,255,255,.4);--edge:rgba(255,255,255,.8)}
html[data-ramp="reverse"] .b6{--from:var(--y8);--to:var(--y9);--sheen:rgba(255,255,255,.45);--edge:rgba(255,255,255,.85)}
html[data-ramp="reverse"] .bc{background:linear-gradient(180deg,var(--y9) 0%,var(--y10) 60%,#FFFFFF 100%);--sheen:rgba(255,255,255,.5);--edge:rgba(255,255,255,.9)}
html[data-ramp="reverse"] :is(.b0,.b1,.b2,.b3,.b4,.b5,.b6,.bc){
  --fg:#03071E;--fg-2:rgba(3,7,30,.8);--mute:rgba(3,7,30,.6);--mute-2:rgba(3,7,30,.46);--line:rgba(3,7,30,.12);--line-2:rgba(3,7,30,.2);
  --acc:#9D0208;--acc-title:#9D0208;--chip-bg:#03071E;--chip-fg:#FFD27A;--bar:#9D0208;--dim:.5;
  --card:rgba(255,255,255,.66);--card-line:rgba(3,7,30,.1);--card-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 14px 34px -16px rgba(120,70,0,.4),0 2px 6px -2px rgba(120,70,0,.14);
  color:var(--fg)}
/* the second phrase of each title steps along the warm ramp as the page lightens */
html[data-ramp="reverse"] .b1{--acc-title:#9D0208}
html[data-ramp="reverse"] .b2{--acc-title:#B8340A}
html[data-ramp="reverse"] .b3{--acc-title:#C2410C}
html[data-ramp="reverse"] .b4{--acc-title:#B8340A}
html[data-ramp="reverse"] .b5{--acc-title:#9D0208}
html[data-ramp="reverse"] .b6{--acc-title:#6A040F}
html[data-ramp="reverse"] .band .btn.solid{background:var(--ink);color:#FFF3E2}
html[data-ramp="reverse"] .band .btn.text{color:rgba(3,7,30,.66)}
html[data-ramp="reverse"] .band .rd{background:repeating-linear-gradient(135deg,rgba(3,7,30,.2) 0 6px,rgba(3,7,30,.1) 6px 12px)}
html[data-ramp="reverse"] .band .verdict code,html[data-ramp="reverse"] .band .points code{color:#9D0208}
html[data-ramp="reverse"] .band .st.ok{color:#0B5E36}
html[data-ramp="reverse"] .band .st.bad{color:#9D0208}
html[data-ramp="reverse"] .close .display{color:#03071E}
html[data-ramp="reverse"] .close .display .light{background:linear-gradient(180deg,#E85D04,#9D0208);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-ramp="reverse"] .close .btn.ink{background:var(--ink);color:#FFF3E2}
html[data-ramp="reverse"] .close .btn.ink-t{color:rgba(3,7,30,.66)}
html[data-ramp="reverse"] .foot{background:#FFFFFF;color:rgba(3,7,30,.6);border-top:1px solid rgba(3,7,30,.08)}
html[data-ramp="reverse"] .foot-in>span:first-child,html[data-ramp="reverse"] .foot a:hover{color:#03071E}
html[data-ramp="reverse"] .top{color:#03071E;--fg:#03071E;--mute:rgba(3,7,30,.62);--line:rgba(3,7,30,.1);--line-2:rgba(3,7,30,.2)}
html[data-ramp="reverse"] .top.solid{background:rgba(255,250,229,.7)}
html[data-ramp="reverse"] .top .btn.ghost{background:rgba(3,7,30,.04);color:#03071E}
html[data-ramp="reverse"] .frag{color:#03071E;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(3,7,30,.1),0 6px 16px -8px rgba(120,70,0,.4)}
/* final overrides for the light ramp */
html[data-ramp="reverse"] body .band .title .mute{color:var(--acc-title)}
html[data-ramp="reverse"] body .top.solid{background:rgba(255,250,229,.86)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(3,7,30,.08)}
/* figures on paper: the kit's light theme, warmed to the ramp */
.bench.iso[data-theme="light"]{
  --anatomy-page:transparent;--anatomy-card:#FFFDF6;--anatomy-text:rgba(3,7,30,.62);--anatomy-strong:#03071E;--anatomy-muted:rgba(3,7,30,.45);
  --anatomy-paper:#FFFDF6;--anatomy-face:#FFFFFF;--anatomy-top:#FFFFFF;
  --anatomy-shade-0:#E9DFC8;--anatomy-shade-1:#F0E7D2;--anatomy-shade-2:#F5EEDD;--anatomy-shade-3:#FAF5E8;
  --anatomy-lit-top:#FFF4D6;--anatomy-lit-shade:#FBE7B8;
  --anatomy-hi:#2A1A12;--anatomy-mid:#8C7A66;--anatomy-lo:#BBAA92;--anatomy-faint:#DDD0BA;--anatomy-lit:#C2410C;
  --anatomy-halo:#9A7A30;--anatomy-halo-opacity:.28;--anatomy-dot:#4A382A;
}
.bench.iso[data-theme="light"] .iso-plate{background:#FFFDF6!important;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(3,7,30,.08),0 30px 60px -30px rgba(120,70,0,.4)!important}
.bench.iso[data-theme="light"] .hole-through{fill:#3A2A1E}
.bench.iso[data-theme="light"] .hole-wall{fill:#E4D6BA}
.bench.iso[data-theme="light"] .bug{fill:#E85D04}
.bench.iso[data-theme="light"] .bug-glow{fill:rgba(232,93,4,.18)}
.bench.iso[data-theme="light"] [data-bug][data-state="caught"] .bug{fill:#9D0208}
.bench.iso[data-theme="light"] .bug-trail{stroke:#E85D04}
/* ramp, gentler: the yellow stays vivid all the way down, one small step per section */
html[data-ramp="reverse"] .b0{--from:#FFBA08;--to:#FFBE12}
html[data-ramp="reverse"] .b1{--from:#FFBE12;--to:#FFC21C}
html[data-ramp="reverse"] .b2{--from:#FFC21C;--to:#FFC626}
html[data-ramp="reverse"] .b3{--from:#FFC626;--to:#FFCA30}
html[data-ramp="reverse"] .b4{--from:#FFCA30;--to:#FFCD3A}
html[data-ramp="reverse"] .b5{--from:#FFCD3A;--to:#FFD044}
html[data-ramp="reverse"] .b6{--from:#FFD044;--to:#FFD34E}
html[data-ramp="reverse"] .bc{background:linear-gradient(180deg,#FFD34E,#FFD758)}
html[data-ramp="reverse"] .foot{background:#FFD758;border-top-color:rgba(3,7,30,.1)}
html[data-ramp="reverse"],html[data-ramp="reverse"] body{background:#FFBA08}
/* proofs pinned on the globe: a hairline leader from the pin to the label */
.frag{transform-origin:left center}
.frag::before{content:"";position:absolute;top:50%;width:12px;height:1px;background:rgba(3,7,30,.35)}
.frag[data-side="r"]::before{left:-13px}
.frag[data-side="l"]::before{right:-13px}
html[data-ramp="reverse"] body .top.solid{background:rgba(255,196,30,.82)!important}
.essay-body p.tag{font-size:11.5px;line-height:1.5;letter-spacing:.08em;color:var(--mute)}

/* =====================================================================
   HERO STAGE (after the crustdata redesign): dark, gold, the globe.
   ===================================================================== */
.scrolly{position:relative;height:520vh;background:radial-gradient(70% 60% at 50% 45%,#140A06 0%,#060403 60%,#030202 100%);z-index:1}
.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:#F4EFE8}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.warm{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;background:radial-gradient(60% 60% at 50% 50%,#FFE7A0 0%,#FFC72A 45%,#FFBA08 100%)}
.form-cap{position:absolute;left:0;right:0;bottom:7vh;z-index:4;text-align:center;font-size:clamp(20px,1.8vw,27px);font-weight:500;letter-spacing:-.025em;color:#D9CDBB;opacity:0}
.form-cap b{font-weight:500}
.form-cap b,.sticky .sheen{background:linear-gradient(100deg,#FFF6DF 0%,#FFD88A 22%,#F5B23A 40%,#FFE9B8 52%,#E89A2C 70%,#FFE4A6 88%,#FFF6DF 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
.skip{position:absolute;right:var(--gut);bottom:30px;z-index:4;padding:6px 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8C8173;border-bottom:1px solid #3A332C}
body:not(.intro) .skip{display:none}
.hero-c{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut);pointer-events:none;opacity:0}
.hero-c.live a{pointer-events:auto}
.hero-c::before{content:"";position:absolute;left:50%;top:50%;width:min(980px,94vw);height:min(500px,64vh);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(5,3,2,.88),rgba(5,3,2,.55) 62%,rgba(5,3,2,0));z-index:-1}
.hero-c .pill{margin-bottom:30px;color:#D9CDBB;background:rgba(12,8,5,.8)}
.hero-c .pill .mono{color:#FFC94D}
.h1{font-weight:500;font-size:clamp(44px,5.6vw,84px);line-height:1;letter-spacing:-.04em;color:#F7F3EC}
.h1 .ln{display:block;padding-bottom:.05em}
.h1 .ln:first-child{background:linear-gradient(180deg,#FFFFFF 40%,#BDB4A8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-c .hero-sub{margin-top:24px;max-width:600px;color:#A69C8E;font-size:18px;line-height:1.55}
.hero-c .cta{justify-content:center;margin-top:32px}
.hero-c .btn.solid{background:linear-gradient(180deg,#FFFFFF,#EDE4D8);color:#0A0604}
.hero-c .btn.solid:hover{box-shadow:0 0 0 4px rgba(255,201,77,.18),0 0 30px rgba(255,201,77,.3)}
.hero-c .btn.ghost{border:1px solid rgba(255,240,220,.18);background:rgba(255,240,220,.04);color:#F4EFE8}
.hud{position:absolute;bottom:28px;z-index:4;display:flex;flex-direction:column;gap:3px;font-size:11px;color:#D9CDBB;opacity:0}
.hud span{display:inline-block;min-width:84px;color:#7C7265;letter-spacing:.08em;text-transform:uppercase;margin-right:10px}
.hud b{font-weight:500;color:#FFC94D}
.hud-l{left:var(--gut)}.hud-r{right:var(--gut);text-align:right}
.hud .hint{margin-top:6px;color:#7C7265;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.probe{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .25s}
.probe .ring{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border:1.5px solid #FFC94D;border-radius:50%;box-shadow:0 0 16px rgba(255,201,77,.6)}
.probe-card{position:absolute;left:20px;top:-14px;width:250px;padding:12px 14px;background:rgba(14,10,7,.92);border:1px solid rgba(255,240,220,.14);border-radius:10px;backdrop-filter:blur(8px)}
.probe.flip .probe-card{left:auto;right:20px}
.probe-k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#FFC94D}
.probe-name{font-size:18px;font-weight:500;letter-spacing:-.015em;margin-top:4px;color:#F7F3EC}
.probe-sig{font-size:13px;margin-top:4px;color:#A69C8E}
.dive{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;opacity:0;padding:0 var(--gut);pointer-events:none}
.eyebrow-d{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#A69C8E}
.h2d{font-weight:500;font-size:clamp(42px,5.2vw,80px);line-height:1.02;letter-spacing:-.04em;color:#F7F3EC;text-shadow:0 0 40px #050302}

/* =====================================================================
   TYPE SYSTEM, matched to crustdata: Geist 500 throughout, tight tracking,
   mono 11px uppercase labels, 19px ledes, one metallic phrase per title.
   ===================================================================== */
.title{font-weight:500;font-size:clamp(34px,3.8vw,56px);line-height:1.03;letter-spacing:-.036em}
.sub,.lead .sub{font-size:clamp(17px,1.35vw,19px);line-height:1.5;letter-spacing:-.012em}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.08em}
.index h3{font-size:19px;font-weight:500;letter-spacing:-.02em}
.index p{font-size:15px}
/* on the yellow pages the metallic phrase is burnished oxblood, with a moving highlight */
html[data-ramp="reverse"] body .band .title .mute,
html[data-ramp="reverse"] .close .display .light{background:linear-gradient(100deg,#4A0410 0%,#9D0208 28%,#C8351A 42%,#9D0208 56%,#5C0412 78%,#8A0A0E 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s linear infinite}
/* header over the dark stage */
.top[data-ink="light"]{color:#F4EFE8}
html[data-ramp="reverse"] .top[data-ink="light"]{--fg:#F4EFE8;--mute:rgba(244,239,232,.62);--line:rgba(255,240,220,.1);--line-2:rgba(255,240,220,.2);color:#F4EFE8}
html[data-ramp="reverse"] body .top[data-ink="light"].solid{background:rgba(6,4,3,.6)!important}
html[data-ramp="reverse"] .top[data-ink="light"] .btn.ghost{color:#F4EFE8;background:rgba(255,240,220,.05)}
@media (max-width:700px){.hud-r{display:none}.probe{display:none}.hud{font-size:10px;bottom:20px}}

/* anatomy figures, back to the kit's own rules: square plate, 1px outline, JetBrains Mono corners,
   monochrome inks warmed to the page, one lit accent (oxblood) */
.bench.iso{--anatomy-mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
.bench.iso[data-theme="light"]{
  --anatomy-card:#FFFCF3;--anatomy-paper:#FFFCF3;--anatomy-face:#FFFFFF;--anatomy-top:#FFFFFF;
  --anatomy-shade-0:#E3DCCD;--anatomy-shade-1:#EAE4D7;--anatomy-shade-2:#F1ECE1;--anatomy-shade-3:#F7F3EA;
  --anatomy-lit-top:#FFFFFF;--anatomy-lit-shade:#F3E9E6;
  --anatomy-hi:#1C1712;--anatomy-mid:#8A8174;--anatomy-lo:#B9B0A2;--anatomy-faint:#DAD3C6;--anatomy-lit:#9D0208;
  --anatomy-text:#4A4239;--anatomy-muted:#8A8174;--anatomy-strong:#1C1712;--anatomy-halo:#6B5A3A;--anatomy-halo-opacity:.22;--anatomy-dot:#3A332B}
.bench.iso[data-theme="light"] .iso-plate{border-radius:0!important;background:var(--anatomy-card)!important;box-shadow:0 0 0 1px var(--anatomy-mid)!important}
.bench .iso-plate-corner{font-size:10.5px}
.bench.iso[data-theme="light"] .hole-wall{fill:var(--anatomy-shade-1)}
.bench.iso[data-theme="light"] .hole-through{fill:#2A231C}
.bench.iso[data-theme="light"] .bug{fill:#1C1712}
.bench.iso[data-theme="light"] .bug-glow{fill:rgba(28,23,18,.12)}
.bench.iso[data-theme="light"] [data-bug][data-state="caught"] .bug{fill:#9D0208}
.bench.iso[data-theme="light"] [data-bug][data-state="caught"] .bug-ring{stroke:#9D0208}
.bench.iso[data-theme="light"] .bug-trail{stroke:#1C1712;opacity:.45}
.bench.iso[data-theme="light"] .bug-trail[data-state="caught"]{stroke:#9D0208;opacity:.7}
.dive-sub{max-width:520px;color:#A69C8E;font-size:17px;line-height:1.55;letter-spacing:-.01em}

/* box headers carry a gradient; the gradient warms section by section down the page */
.band{--hg:linear-gradient(100deg,#03071E 0%,#370617 55%,#6A040F 100%)}
html[data-ramp="reverse"] .b1{--hg:linear-gradient(100deg,#03071E 0%,#370617 50%,#9D0208 100%)}
html[data-ramp="reverse"] .b2{--hg:linear-gradient(100deg,#370617 0%,#6A040F 50%,#B8340A 100%)}
html[data-ramp="reverse"] .b3{--hg:linear-gradient(100deg,#6A040F 0%,#9D0208 50%,#C2410C 100%)}
html[data-ramp="reverse"] .b4{--hg:linear-gradient(100deg,#9D0208 0%,#B8340A 50%,#D9480F 100%)}
html[data-ramp="reverse"] .b5{--hg:linear-gradient(100deg,#6A040F 0%,#B8340A 55%,#E85D04 100%)}
html[data-ramp="reverse"] .b6{--hg:linear-gradient(100deg,#370617 0%,#9D0208 55%,#DC2F02 100%)}
html[data-ramp="reverse"] .band :is(.index li h3,.atlas .dn,.points h3,.pn h3,.verdict dt,.feats h3){background:var(--hg);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-ramp="reverse"] .band .atlas .dn{display:inline-block}

/* atlas: the list scrolls inside its pinned stage so the open row stays in view */
#atlas .atlas{position:relative;max-height:calc(100vh - 330px);overflow:hidden;border-bottom:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 calc(100% - 48px),transparent)}
#atlas .atlas-track{transition:transform .7s var(--ease);padding:20px 14px 60px}
@media (max-height:560px){#atlas .atlas{max-height:none;-webkit-mask-image:none;mask-image:none}#atlas .atlas-track{transform:none!important;padding:0}}
html[data-ramp="reverse"] .band :is(.index li h3,.atlas .dn,.points h3,.pn h3,.feats h3){display:inline-block;width:auto}
html[data-ramp="reverse"] .b1{--hg:linear-gradient(95deg,#370617 0%,#9D0208 45%,#D9480F 100%)}
html[data-ramp="reverse"] .b2{--hg:linear-gradient(95deg,#370617 0%,#9D0208 50%,#DC2F02 100%)}
html[data-ramp="reverse"] .b3{--hg:linear-gradient(95deg,#6A040F 0%,#B8340A 55%,#E85D04 100%)}
html[data-ramp="reverse"] .b4{--hg:linear-gradient(95deg,#6A040F 0%,#C2410C 55%,#E85D04 100%)}
html[data-ramp="reverse"] .b5{--hg:linear-gradient(95deg,#370617 0%,#9D0208 45%,#E85D04 100%)}
html[data-ramp="reverse"] .b6{--hg:linear-gradient(95deg,#03071E 0%,#6A040F 45%,#DC2F02 100%)}
html[data-ramp="reverse"] body .band .index li.on h3,html[data-ramp="reverse"] body .band .atlas .row.on .dn{color:transparent;background:var(--hg);-webkit-background-clip:text;background-clip:text}
/* products menu */
.nav{align-items:center}
.menu{position:relative}
.menu-b{font:inherit;color:inherit;display:inline-flex;align-items:center;gap:6px}
.menu-b::after{content:"";width:6px;height:6px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
.menu-p{position:absolute;left:50%;top:calc(100% + 14px);transform:translate(-50%,6px);min-width:300px;padding:8px;border-radius:14px;background:#0E0A07;color:#F4EFE8;box-shadow:0 0 0 1px rgba(255,240,220,.1),0 30px 60px -20px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.menu-p::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.menu:hover .menu-p,.menu:focus-within .menu-p,.menu.open .menu-p{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.menu-p a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:9px;color:#F4EFE8}
.menu-p a:hover{background:rgba(255,240,220,.06)}
.menu-p b{font-weight:500;font-size:14.5px;letter-spacing:-.01em}
.menu-p span{font-size:12.5px;color:#A69C8E}
.menu-p a:first-child b{background:linear-gradient(100deg,#FFF6DF,#F5B23A 50%,#FFE4A6);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Fig 2 · layers (swiss cheese) */
.lay-fig{background:#FFFCF3;box-shadow:0 0 0 1px rgba(3,7,30,.14),0 30px 60px -34px rgba(120,70,0,.45)}
.lay-bar{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#6E6458}
.lay-bar [data-readout]{color:#1C1712;text-transform:none;letter-spacing:.01em;font-size:11.5px}
.lay{display:block;width:100%;height:auto}
.lay-end rect{fill:#F2ECE0;stroke:#CFC5B4}
.lay-end .lay-prod{fill:#F7F1E6}
.lay-codeline{fill:#CFC5B4!important;stroke:none!important}
.lay-cap,.lay-name{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.1em;fill:#6E6458}
.lay-name{fill:#1C1712;transition:opacity .5s}
.lay-breach{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;fill:#9D0208;opacity:0;transition:opacity .4s}
.lay-slice{transition:opacity .6s}
.lay-face{fill:#FFD34E;stroke:#8A5A00;stroke-width:1.4}
.lay-hole{fill:none;stroke:#8A5A00;stroke-width:1.2}
.lay-path{stroke:#1C1712;stroke-width:1.6;stroke-dasharray:4 4}
.lay-path.bad{stroke:#9D0208;stroke-width:2;stroke-dasharray:none}
.lay-bug{fill:#1C1712}
.lay-bug.bad{fill:#9D0208}
.lay-stop circle{fill:#9D0208}
.lay-stop path{stroke:#FFF6E0;stroke-width:2;stroke-linecap:round}
/* close, after crustdata's: a smaller headline than the hero, a lede, actions, three cells */
.close-in{padding:clamp(120px,17vh,170px) var(--gut) clamp(80px,11vh,110px);text-align:center}
.close-h{font-weight:500;font-size:clamp(36px,4vw,58px);line-height:1.04;letter-spacing:-.038em;color:#03071E;text-wrap:balance}
.close-sub{margin:22px auto 0;max-width:540px;font-size:clamp(17px,1.35vw,19px);line-height:1.5;letter-spacing:-.012em;color:rgba(3,7,30,.7)}
.close .cta{margin-top:34px}
.close-cells{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(3,7,30,.12);padding-top:0;padding-bottom:0}
.close-cells>a{display:block;padding:28px 28px 34px 0;font-size:15px;line-height:1.55;color:rgba(3,7,30,.68);border-right:1px solid rgba(3,7,30,.12);background:none!important}
.close-cells>a+a{padding-left:28px}
.close-cells>a:last-child{border-right:0}
.close-cells .eyebrow{margin-bottom:10px}
.close-cells>a:hover p:last-child{color:#03071E}
@media (max-width:900px){.close-cells{grid-template-columns:1fr}.close-cells>a,.close-cells>a+a{padding:22px 0;border-right:0;border-bottom:1px solid rgba(3,7,30,.12)}}
.close-h .light{background:linear-gradient(100deg,#4A0410 0%,#9D0208 28%,#C8351A 42%,#9D0208 56%,#5C0412 78%,#8A0A0E 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s linear infinite}
.bench [data-probe][data-on="1"] .iso-edge{stroke:var(--anatomy-lit)}
.bench .iso-legend{color:rgba(3,7,30,.66);font-size:12.5px}
.bench-stage .bench{max-width:none;width:100%}
/* seamless ramp: no seam lines, no top sheens; each band starts where the last one ended */
html[data-ramp="reverse"] .band::after{display:none}
html[data-ramp="reverse"] .band::before{background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.05) 50%,transparent 65%)}
.warm{background:linear-gradient(180deg,#FFBA08 0%,#FFBE12 100%)}
html[data-ramp="reverse"] .band::before{display:none}
/* sun experiment: the dive line sits on the burning surface, in ink */
.dive.on-sun .h2d{color:#03071E;text-shadow:0 0 50px rgba(255,230,160,.6)}
.dive.on-sun .h2d .sheen{background:linear-gradient(100deg,#370617,#9D0208 50%,#370617);-webkit-background-clip:text;background-clip:text;color:transparent;animation:none}
.dive.on-sun .eyebrow-d{color:rgba(3,7,30,.7)}
.dive.on-sun .dive-sub{color:rgba(3,7,30,.78)}
.hero-c.on-sun::before{background:radial-gradient(closest-side,rgba(5,3,2,.6),rgba(5,3,2,.25) 62%,rgba(5,3,2,0))}
.hero-c.on-sun .h1 .ln:first-child{text-shadow:0 2px 30px rgba(0,0,0,.55)}
html[data-ramp="reverse"] body .top.over-sun{color:#03071E;--fg:#03071E;--mute:rgba(3,7,30,.65);background:rgba(255,200,60,.35)!important}
html[data-ramp="reverse"] .top.over-sun .btn.ghost{color:#03071E;border-color:rgba(3,7,30,.2);background:rgba(3,7,30,.04)}
/* white scene experiment (?scene=white) */
html[data-scene="white"] .scrolly{background:radial-gradient(70% 60% at 50% 45%,#FFFFFF 0%,#FFFBF2 60%,#FFF4DE 100%)}
html[data-scene="white"] .sticky{color:#03071E}
html[data-scene="white"] .form-cap{color:rgba(3,7,30,.72)}
html[data-scene="white"] .form-cap b,html[data-scene="white"] .sticky .sheen{background:linear-gradient(100deg,#4A0410 0%,#9D0208 28%,#E85D04 42%,#9D0208 56%,#5C0412 78%,#8A0A0E 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-scene="white"] .hero-c::before{background:radial-gradient(closest-side,rgba(255,252,245,.9),rgba(255,252,245,.6) 62%,rgba(255,252,245,0))}
html[data-scene="white"] .h1,html[data-scene="white"] .h2d{color:#03071E;text-shadow:none}
html[data-scene="white"] .h1 .ln:first-child{background:linear-gradient(180deg,#03071E 40%,#3A3326 100%);-webkit-background-clip:text;background-clip:text}
html[data-scene="white"] .hero-c .hero-sub,html[data-scene="white"] .dive-sub,html[data-scene="white"] .eyebrow-d{color:rgba(3,7,30,.64)}
html[data-scene="white"] .hero-c .pill{color:rgba(3,7,30,.8);background:rgba(3,7,30,.04)}
html[data-scene="white"] .hero-c .pill .mono{color:#9D0208}
html[data-scene="white"] .hero-c .btn.solid{background:#03071E;color:#FFF3E2}
html[data-scene="white"] .hero-c .btn.ghost{color:#03071E;border-color:rgba(3,7,30,.18);background:rgba(3,7,30,.03)}
html[data-scene="white"] .hud{color:rgba(3,7,30,.75)}
html[data-scene="white"] .hud span,html[data-scene="white"] .hud .hint,html[data-scene="white"] .skip{color:rgba(3,7,30,.45)}
html[data-scene="white"] .hud b{color:#9D0208}
html[data-scene="white"] .probe .ring{border-color:#9D0208;box-shadow:0 0 12px rgba(157,2,8,.35)}
html[data-scene="white"] .probe-card{background:rgba(255,255,255,.94);border-color:rgba(3,7,30,.1);box-shadow:0 12px 30px -12px rgba(60,30,0,.3)}
html[data-scene="white"] .probe-k{color:#9D0208}html[data-scene="white"] .probe-name{color:#03071E}html[data-scene="white"] .probe-sig{color:rgba(3,7,30,.6)}
html[data-scene="white"] body .top[data-ink="dark"].solid{background:rgba(255,252,245,.8)!important}
html[data-scene="white"] .top{color:#03071E;--fg:#03071E;--mute:rgba(3,7,30,.62)}html[data-scene="white"] .top .btn.ghost{color:#03071E;border-color:rgba(3,7,30,.18);background:rgba(3,7,30,.03)}
/* white hero → yellow page, eased through a cream midpoint */
html[data-scene="white"] .warm{background:#FFF4D6}
html[data-ramp="reverse"] .band.b1{background:linear-gradient(180deg,#FFF4D6 0%,#FFE39A 34%,#FFCC3E 68%,#FFC21C 100%)}
html[data-scene="white"] .top[data-ink="dark"]{color:#03071E}
html[data-scene="white"] .hero-c::before{background:radial-gradient(closest-side,rgba(255,252,245,.7),rgba(255,252,245,.25) 60%,rgba(255,252,245,0))}
/* white → yellow spread over three sections: method, inspection, proof */
html[data-ramp="reverse"] .band.b1{background:linear-gradient(180deg,#FFF4D6,#FFEDC0)}
html[data-ramp="reverse"] .band.b2{background:linear-gradient(180deg,#FFEDC0,#FFDE88)}
html[data-ramp="reverse"] .band.b3{background:linear-gradient(180deg,#FFDE88,#FFCA30)}

/* =====================================================================
   PHONE
   ===================================================================== */
/* the dive line always sits on a soft haze so the fibres never cross the words */
.dive::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,120vw);height:min(460px,70vh);transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(255,252,245,.92),rgba(255,252,245,.6) 60%,rgba(255,252,245,0))}
html[data-scene="black"] .dive::before{background:radial-gradient(closest-side,rgba(5,3,2,.85),rgba(5,3,2,.5) 60%,rgba(5,3,2,0))}
.dive{isolation:isolate}
@media (max-width:900px){
  .top{height:56px}
  .top>.btn.ghost{display:none}
  .nav{display:flex!important;gap:18px;font-size:14px}
  .menu{position:static}
  .menu-p{position:fixed;left:12px;right:12px;top:58px;min-width:0;transform:translateY(6px)}
  .menu:hover .menu-p,.menu:focus-within .menu-p,.menu.open .menu-p{transform:none}
  .scrolly{height:400vh}
  .stage{padding:72px 0 48px}
  .code{font-size:11.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
  .code .l{padding:0 14px 0 38px}
  .code .l::before{width:24px}
  .bench .iso-plate{padding:40px 8px 44px!important}
  .bench .iso-plate-corners{inset:12px 12px}
  .bench .iso-plate-corner[data-corner="hint"]{display:none}
  .h1{font-size:clamp(38px,10.5vw,56px)}
  .hero-c .hero-sub{font-size:16px}
  .hero-c .pill{font-size:11.5px;margin-bottom:22px}
  .h2d{font-size:clamp(34px,9.5vw,52px)}
  .dive-sub{font-size:15px;padding:0 8px}
  .title{font-size:clamp(32px,8.6vw,44px)}
  .close-in{padding:96px var(--gut) 64px}
  .close-h{font-size:clamp(30px,8vw,40px)}
  .hud-l{display:none}
}

/* metal over the yellow (after resend): soft white glows and a diagonal beam, one continuous
   layer so there are no seams, drifting slowly so the surface shifts like brushed metal */
main{position:relative}
.metal{position:absolute;left:0;right:0;bottom:0;top:0;z-index:20;pointer-events:none;mix-blend-mode:soft-light;
  background:
    radial-gradient(38% 420px at 12% 320px,rgba(255,255,255,.95),transparent 70%),
    radial-gradient(42% 520px at 88% 1150px,rgba(255,255,255,.85),transparent 70%),
    linear-gradient(112deg,transparent 0,transparent 36%,rgba(255,255,255,.6) 46%,rgba(255,255,255,.15) 52%,transparent 60%,transparent 100%),
    radial-gradient(48% 460px at 58% 760px,rgba(150,40,0,.45),transparent 70%);
  background-size:100% 1700px;background-repeat:repeat-y;animation:metal 22s ease-in-out infinite alternate}
@keyframes metal{to{background-position:10% 120px,-10% -80px,40% 0,-8% 60px}}
@media (prefers-reduced-motion:reduce){.metal{animation:none}}

/* phone, pinned: each section holds one screen and steps through its points */
@media (max-width:900px) and (min-height:561px){
  .stage{padding:64px 0 18px;align-items:flex-start}
  .split-stage,.col-stage{padding-top:8px;gap:16px;grid-template-columns:minmax(0,1fr)}
  .split-stage .lead .sub,.col-stage .head .sub,.credit{display:none}
  .head.split{gap:8px}
  .eyebrow{margin-bottom:12px}
  .index{margin-top:14px}
  .index li:not(.on){display:none}
  .index li.on{transform:none}
  .index li.on p{max-height:200px}
  .panes .pane{font-size:11px}
  .exhibit{gap:14px}
  .exhibit .code{max-height:150px;overflow:hidden}
  .points[data-at]{display:none}
  .verdict>div[data-at]{padding:8px 10px}
  .verdict>div[data-at]:not(.on){display:none}
  #atlas .atlas{max-height:calc(100svh - 300px)}
  .atlas .row{grid-template-columns:minmax(0,1fr)}
  .atlas .dd{grid-column:1}
  #software.pin{height:auto!important}
  #software .stage{position:relative;height:auto;padding:80px 0 60px}
  #software .head .sub{display:block}
  .bench-stage .bench{max-width:440px;margin:0 auto;width:100%}
  .bench .iso-legend{display:none}
}
.metal{animation:none!important}
@media (max-width:900px){.scrolly{height:340vh}}

/* metal light lives on each pinned screen, so it holds still with the content (no sliding glows) */
.metal{display:none!important}
html[data-ramp="reverse"] .band .stage{isolation:isolate}
html[data-ramp="reverse"] .band .stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:soft-light;
  background:
    radial-gradient(40% 55% at 10% 18%,rgba(255,255,255,.95),transparent 70%),
    radial-gradient(42% 60% at 92% 88%,rgba(255,255,255,.75),transparent 70%),
    linear-gradient(112deg,transparent 30%,rgba(255,255,255,.55) 44%,rgba(255,255,255,.12) 52%,transparent 62%),
    radial-gradient(50% 50% at 62% 55%,rgba(150,40,0,.35),transparent 70%)}
html[data-ramp="reverse"] .band.close::before{display:block;mix-blend-mode:soft-light;
  background:radial-gradient(45% 55% at 15% 20%,rgba(255,255,255,.9),transparent 70%),linear-gradient(112deg,transparent 30%,rgba(255,255,255,.5) 44%,transparent 60%)}
html[data-ramp="reverse"] .band .stage::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}