/* Geometrical v5 mockup. One motif: the memory plane (an axonometric sheet). */
:root{
  --night:#0A0B0A; --graphite:#121412; --graphite-2:#1A1D1A; --graphite-3:#242824;
  --ink:#F2F0EC; --mute:#9A9F95; --dim:#5E635A;
  --ember:#E8470A; --ember-hi:#FF6A2B; --amber:#FFB37A; --cool:#8EA3BC;
  --paper:#E8E8E5; --paper-2:#DCDCD8; --paper-ink:#121311; --paper-mute:#55594F;
  --f-display:"Inter Tight",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --m:clamp(16px,2.6vw,40px);
  --gap:clamp(12px,1.6vw,24px);
  --sec:clamp(120px,14vw,220px);
  --skew:14px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
  --t-hover:180ms; --t-ui:260ms;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;text-wrap:pretty;background:var(--night);color:var(--ink);font-family:var(--f-display);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,p{margin:0}
::selection{background:var(--ember);color:var(--night)}
:focus-visible{outline:2px solid var(--ember-hi);outline-offset:4px}

/* grain over everything, like the film in the mood board */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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{padding-inline:var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.mono{font-family:var(--f-mono);font-size:13px;letter-spacing:.02em;color:var(--mute)}
.h2{font-weight:500;font-size:clamp(34px,3.6vw,60px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.h3{font-weight:500;font-size:clamp(22px,1.8vw,30px);line-height:1.1;letter-spacing:-.02em}
.lede{font-size:clamp(18px,1.35vw,21px);line-height:1.5;max-width:44ch}
.mute{color:var(--mute)}
.ember{color:var(--ember-hi)}
section{position:relative}
.sec{padding-block:var(--sec) 0}

/* ---------- the motif: plane-cut button ---------- */
.btn{--bg:var(--ember);--fg:#120804;position:relative;display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 30px 0 26px;
  font-weight:500;font-size:16px;letter-spacing:-.005em;color:var(--fg);isolation:isolate;white-space:nowrap;
  transition:transform var(--t-ui) var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);
  clip-path:polygon(var(--skew) 0,100% 0,calc(100% - var(--skew)) 100%,0 100%);transition:background var(--t-hover) ease,transform var(--t-ui) var(--ease-out)}
.btn .arr{display:inline-block;transition:transform var(--t-ui) var(--ease-out)}
.btn:hover::before{background:var(--ember-hi)}
.btn:hover .arr{transform:translateX(5px)}
.btn:active{transform:scale(.97)}
.btn.ghost{--bg:var(--graphite-3);--fg:var(--ink)}
.btn.ghost:hover::before{background:#30352F}
.btn.ink{--bg:var(--paper-ink);--fg:var(--paper)}
.btn.ink:hover::before{background:#2a2c27}
.btn.sm{height:42px;font-size:15px;padding:0 22px 0 20px;--skew:11px}

.tlink{position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:500}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:currentColor;transform:scaleX(.18);transform-origin:left;transition:transform var(--t-ui) var(--ease-out)}
.tlink:hover::after{transform:scaleX(1)}
.tlink .arr{transition:transform var(--t-ui) var(--ease-out)}
.tlink:hover .arr{transform:translateX(4px)}

/* bullet = a tiny plane */
.pl{display:inline-block;width:.62em;height:.62em;flex:none;background:var(--ember);clip-path:polygon(30% 0,100% 0,70% 100%,0 100%);transform:translateY(-.04em)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:72px;padding-inline:var(--m);transition:background var(--t-ui) ease,height var(--t-ui) var(--ease-out)}
.nav.solid{background:rgba(10,11,10,.92);height:62px}
.wordmark{display:flex;align-items:center;gap:10px;font-weight:600;font-size:19px;letter-spacing:.14em}
.wordmark svg{width:26px;height:26px}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);font-size:15px}
.nav-links a:not(.btn){color:var(--mute);transition:color var(--t-hover) ease}
.nav-links a:not(.btn):hover{color:var(--ink)}
.progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ember);transform-origin:left;transform:scaleX(0)}

/* ---------- hero + thesis (one held stage) ---------- */
.hero{height:260vh}
.stage{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-copy{position:absolute;left:var(--m);right:var(--m);bottom:clamp(28px,5vh,56px);z-index:2}
.hero h1{font-weight:500;font-size:clamp(34px,4.15vw,80px);line-height:1.0;letter-spacing:-.04em;max-width:100%}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .l>span{display:inline-block}
.hero h1 .l2{color:var(--mute)}
.hero-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(22px,3.4vh,40px);align-items:end}
.hero-sub{grid-column:1/7;font-size:clamp(17px,1.3vw,20px);line-height:1.5;max-width:52ch}
.hero-ctas{grid-column:7/13;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.routes{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(18px,3vh,30px);font-size:15px;color:var(--mute)}
.routes a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);transition:color var(--t-hover) ease}
.routes a:hover{color:var(--ember-hi)}
.routes a .pl{width:.5em;height:.5em}
.hud{position:absolute;z-index:2;font-family:var(--f-mono);font-size:13px;color:var(--mute);letter-spacing:.04em;pointer-events:none}
.hud.tl{top:96px;left:var(--m);line-height:1.7}
.hud.tl b{color:var(--ink);font-weight:500}
.hud .live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ember-hi);margin-right:8px}
@keyframes blink{50%{opacity:.25}}
.thesis{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:1fr 1fr;align-items:center;pointer-events:none;opacity:0}
.thesis .side{font-weight:500;font-size:clamp(40px,5.6vw,108px);letter-spacing:-.045em;line-height:.95;padding-inline:var(--m)}
.thesis .left{text-align:right;padding-right:clamp(40px,5vw,90px);color:var(--mute)}
.thesis .right{padding-left:clamp(40px,5vw,90px)}
.thesis .foot{position:absolute;left:0;right:0;bottom:clamp(26px,5vh,54px);text-align:center;font-size:clamp(16px,1.2vw,19px);color:var(--mute);padding-inline:var(--m)}
.thesis .foot b{color:var(--ink);font-weight:500}

/* ---------- why: sticky picture, active list ---------- */
.why .grid{align-items:start}
.why-vis{grid-column:1/7;grid-row:1/3;position:sticky;top:12vh;height:76vh;min-height:480px}
.why-head{grid-column:8/13;grid-row:1;padding-top:4vh}
.why-vis canvas{width:100%;height:100%;background:var(--graphite);clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}
.why-vis .cap{position:absolute;left:9%;bottom:22px;font-family:var(--f-mono);font-size:13px;color:var(--mute)}
.why-list{grid-column:8/13;grid-row:2}
.why-list .h2{margin-bottom:12px}
.why-list .sub{font-size:clamp(19px,1.5vw,23px);color:var(--mute);margin-bottom:9vh;max-width:30ch}
.why-item{padding-block:5vh;min-height:44vh;display:flex;flex-direction:column;justify-content:center;transition:color var(--t-ui) ease}
.why-item h3{display:flex;gap:14px;align-items:baseline;font-weight:500;font-size:clamp(26px,2.3vw,38px);line-height:1.08;letter-spacing:-.03em;color:var(--mute);transition:color 400ms ease}
.why-item h3 .pl{background:var(--dim);transition:background 400ms ease, transform 400ms var(--ease-out)}
.why-item p{margin-top:14px;max-width:36ch;font-size:18px;color:var(--mute);padding-left:calc(.62em + 14px)}
.why-item.on h3{color:var(--ink)}
.why-item.on h3 .pl{background:var(--ember);transform:translateY(-.04em) scale(1.25)}
.why-item.on p{color:var(--ink)}
.why-cta{padding:3vh 0 0 calc(.62em + 14px)}

/* ---------- path ---------- */
.path-head{grid-column:1/9}
.path-lede{grid-column:9/13;align-self:end}
.diagram{margin-top:clamp(40px,5vw,72px);position:relative}
.drag{display:none;margin-bottom:10px}
.diagram .scroll{overflow-x:auto;scrollbar-width:none}
.diagram .scroll::-webkit-scrollbar{display:none}
.diagram svg{width:100%;min-width:1060px;height:auto}
.diagram .caption{font-family:var(--f-mono);font-size:13px;color:var(--mute);min-height:3.2em;margin-top:14px;max-width:90ch}
.diagram .caption b{color:var(--ink);font-weight:500}
.diagram .part{transition:opacity .25s}
.diagram svg.focus .part:not(.on){opacity:.22}
.accordion{display:flex;height:520px;margin-top:24px}
.acc{position:relative;flex:0 0 11%;overflow:hidden;text-align:left;transition:flex-basis 520ms var(--ease-in-out);color:var(--ink)}
.acc.open{flex:1 1 auto}
.acc:nth-child(1){background:#1C110C}
.acc:nth-child(2){background:#3B1A0C}
.acc:nth-child(3){background:#86300D}
.acc:nth-child(4){background:var(--ember);color:#160903}
.acc .rot{position:absolute;left:22px;bottom:24px;transform-origin:left bottom;transform:rotate(-90deg) translateY(100%);font-weight:600;font-size:21px;white-space:nowrap;transition:opacity 300ms ease}
.acc.open .rot{opacity:0}
.acc .body{position:absolute;inset:0;padding:34px 36px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;transform:translateY(14px);transition:opacity 300ms ease,transform 500ms var(--ease-out);pointer-events:none;width:min(100%,720px)}
.acc.open .body{opacity:1;transform:none;transition-delay:220ms}
.acc .body h3{font-weight:500;font-size:clamp(34px,3vw,52px);letter-spacing:-.035em;line-height:1}
.acc .body p{font-size:19px;max-width:36ch}
.acc .glyph{position:absolute;right:-6%;top:50%;width:46%;transform:translateY(-50%);opacity:.9;pointer-events:none}
.acc.open .glyph{opacity:1}
.acc:not(.open) .glyph{opacity:0}
.moment{grid-column:1/13;margin-top:clamp(72px,8vw,120px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.moment .big{grid-column:1/9;font-weight:500;font-size:clamp(30px,3.1vw,52px);letter-spacing:-.035em;line-height:1.04}
.moment p{grid-column:9/13;font-size:18px}
.moment .tlink{margin-top:20px}

/* ---------- four questions: the paper checklist ---------- */
.paper{background:var(--paper);color:var(--paper-ink);margin-top:var(--sec);padding-block:clamp(90px,10vw,160px)}
.paper .mono{color:var(--paper-mute)}
.q-head{grid-column:1/10}
.q-act{grid-column:10/13;align-self:end;justify-self:end}
.qtable{margin-top:clamp(48px,5vw,80px)}
.qrow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-block:30px;position:relative;align-items:start}
.qrow+.qrow{margin-top:6px}
.qrow::before{content:"";position:absolute;inset:0;background:var(--paper-2);z-index:0;transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease-expo)}
.qrow:hover::before,.qrow.lit::before{transform:scaleX(1)}
.qrow>*{position:relative;z-index:1}
.qrow .q{grid-column:1/6;font-weight:500;font-size:clamp(28px,2.6vw,44px);letter-spacing:-.035em;line-height:1.02;padding-left:18px}
.qrow .most{grid-column:6/9;font-size:18px;color:var(--paper-mute)}
.qrow .geo{grid-column:9/13;font-size:18px;padding-right:18px}
.qrow .lbl{display:block;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:var(--paper-mute);margin-bottom:6px}
.qrow .geo .lbl{color:#A83200}
.qhead-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:0 0 12px}
.qhead-row span{font-family:var(--f-mono);font-size:13px;color:var(--paper-mute)}
.qhead-row .c1{grid-column:1/6;padding-left:18px}.qhead-row .c2{grid-column:6/9}.qhead-row .c3{grid-column:9/13;color:#A83200}
.more{margin-top:clamp(64px,6vw,100px)}
.more h3{font-weight:500;font-size:clamp(24px,2vw,32px);letter-spacing:-.025em}
.more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:22px}
.more-grid div{background:var(--paper-2);padding:24px 22px 26px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.more-grid b{font-weight:500;font-size:21px;letter-spacing:-.02em;line-height:1.15}
.more-grid p{font-size:16px;color:var(--paper-ink)}

/* ---------- levels: the live thing ---------- */
.levels-head{grid-column:1/11}
.console{margin-top:clamp(40px,4vw,64px);background:var(--graphite);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.console .left{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:28px;background:var(--graphite-2)}
.ask{font-size:clamp(24px,2vw,32px);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.ask .mono{display:block;margin-bottom:10px}
.seg{display:flex;flex-direction:column;gap:6px}
.seg button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:16px 18px;background:var(--graphite-3);font-size:17px;font-weight:500;color:var(--mute);transition:color var(--t-hover) ease,background var(--t-hover) ease}
.seg button:hover{color:var(--ink)}
.seg button .k{font-family:var(--f-mono);font-size:13px;color:var(--mute)}
.seg button[aria-pressed=true]{background:var(--ember);color:#150803}
.seg button[aria-pressed=true] .k{color:#150803}
.console .right{position:relative;padding:clamp(24px,3vw,44px);min-height:520px;display:flex;flex-direction:column;gap:22px}
.answer .mono{display:block;margin-bottom:10px}
.answer p{font-size:clamp(22px,1.9vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.15;min-height:2.4em}
.answer p .cursor{display:inline-block;width:.5em;height:.9em;background:var(--ember);vertical-align:-.08em;margin-left:4px;animation:blink 1s steps(1) infinite}
.leaves{flex:1;display:flex;flex-direction:column;gap:10px}
.leaves .mono{display:flex;justify-content:space-between}
.leave-box{position:relative;flex:1;min-height:230px;background:var(--night)}
.leave-box canvas{position:absolute;inset:0;width:100%;height:100%}
.ltable{margin-top:clamp(40px,4vw,64px);width:100%;border-collapse:collapse;font-size:16px}
.ltable th,.ltable td{text-align:left;padding:16px 16px;vertical-align:top}
.ltable thead th{font-family:var(--f-mono);font-weight:400;font-size:13px;color:var(--mute)}
.ltable tbody th{font-weight:500;color:var(--ink);width:16%}
.ltable td{color:var(--mute);width:28%;transition:color 300ms ease,background 300ms ease}
.ltable tbody tr+tr th,.ltable tbody tr+tr td{border-top:1px solid #1f221f}
.ltable td.hl{color:var(--ink);background:rgba(232,71,10,.08)}
.ltable td.hl.geo{color:var(--ink);background:rgba(232,71,10,.14)}
.ltable thead th.hl{color:var(--ember-hi)}
.today{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:clamp(40px,4vw,64px)}
.today div{font-size:clamp(20px,1.6vw,26px);letter-spacing:-.02em;line-height:1.32;font-weight:500}
.today b{color:var(--ember-hi);font-weight:500}
.tablewrap{overflow-x:auto}

/* ---------- MVE ---------- */
.mve{background:var(--graphite);margin-top:var(--sec);padding-block:clamp(90px,10vw,160px)}
.mve-head{grid-column:1/10}
.mve-body{margin-top:clamp(40px,4vw,64px)}
.mvetable{grid-column:1/6;width:100%;border-collapse:collapse;font-size:16px;align-self:start}
.mvetable th,.mvetable td{text-align:left;padding:14px 12px;vertical-align:top}
.mvetable thead th{font-weight:500;font-size:17px;color:var(--ink);line-height:1.2}
.mvetable thead th:last-child{color:var(--ember-hi)}
.mvetable tbody th{font-family:var(--f-mono);font-weight:400;font-size:13px;color:var(--mute);width:24%;padding-top:17px}
.mvetable td{color:var(--ink)}
.mvetable tbody tr th,.mvetable tbody tr td{border-top:1px solid #2a2e29}
.worked{grid-column:7/13;background:var(--night);padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;gap:22px}
.worked .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.steps{display:flex;gap:6px;flex-wrap:wrap}
.steps button{font-size:14px;padding:9px 14px;background:var(--graphite-3);color:var(--mute);transition:background var(--t-hover) ease,color var(--t-hover) ease}
.steps button[aria-pressed=true]{background:var(--ink);color:var(--night)}
.meter .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.meter .row b{font-weight:500;font-size:16px}
.meter .row .val{font-family:var(--f-mono);font-size:13px;color:var(--mute)}
.tokbar{height:34px;background:var(--graphite-2);position:relative;overflow:hidden}
.tokbar i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--cool);transform-origin:left;transition:width 1100ms var(--ease-in-out),background 600ms ease}
.cells{display:grid;grid-template-columns:repeat(29,1fr);gap:3px}
.cells i{aspect-ratio:1;background:var(--graphite-3);transition:background 300ms ease,transform 300ms var(--ease-out)}
.cells i.on{background:var(--ember)}
.cells i.need{background:var(--amber)}
.worked .big{font-weight:500;font-size:clamp(40px,4.4vw,76px);letter-spacing:-.045em;line-height:.9;font-variant-numeric:tabular-nums}
.worked .note{font-size:15px;color:var(--mute)}
.mve-foot{margin-top:clamp(48px,5vw,80px)}
.mve-foot .s1{grid-column:1/7;font-size:clamp(20px,1.6vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.32}
.mve-foot .s1 span{display:block;color:var(--mute);font-weight:400;font-size:18px;letter-spacing:0;margin-top:10px;line-height:1.5}
.mve-foot .s2{grid-column:7/13;font-size:clamp(20px,1.6vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.32}
.mve-foot .s2 span{display:block;color:var(--mute);font-weight:400;font-size:18px;letter-spacing:0;margin-top:10px;line-height:1.5}
.mve-foot .ctas{grid-column:7/13;display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------- no new interface ---------- */
.nni .copy{grid-column:1/6}
.nni .copy ul{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-direction:column;gap:22px}
.nni .copy li{display:flex;gap:16px;font-size:19px;line-height:1.45}
.nni .copy li .pl{margin-top:.45em}
.mail{grid-column:7/13;background:#F4F2EE;color:#1a1b19;font-size:15px;line-height:1.5;align-self:start}
.mail .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#E6E3DD;border-bottom:1px solid #d6d2ca}
.mail .bar i{width:11px;height:11px;border-radius:50%;background:#cbc6bd}
.mail .bar span{margin-left:10px;font-size:13px;color:#4f524b}
.mail .fields{padding:6px 22px}
.mail .fields div{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid #e2ded7;font-size:14px}
.mail .fields div span:first-child{color:#5e6159;width:60px}
.mail .bodytext{padding:20px 22px 8px;min-height:150px;font-size:16px}
.mail .bodytext .typed::after{content:"";display:inline-block;width:2px;height:1em;background:#1a1b19;vertical-align:-.12em;margin-left:2px;animation:blink 1s steps(1) infinite}
.chip{margin:6px 22px 22px;background:#121311;color:var(--ink);padding:16px 18px;font-size:14px;transform-origin:top left}
.chip .t{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:13px;color:var(--mute);margin-bottom:10px}
.chip .t b{color:var(--ember-hi);font-weight:500;display:flex;align-items:center;gap:8px}
.chip ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.chip li{display:flex;gap:10px;font-size:15px}
.chip li .pl{margin-top:.42em;width:.5em;height:.5em}
.chip .foot{margin-top:12px;font-family:var(--f-mono);font-size:13px;color:var(--mute)}
.chip .actions{display:flex;gap:8px;margin-top:12px}
.chip .actions span{font-size:13px;padding:6px 12px;background:#24272;background:var(--graphite-3)}
.chip .actions span:first-child{background:var(--ember);color:#150803}

/* ---------- surfaces ---------- */
.surf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;margin-top:clamp(24px,3vw,48px)}
.surf-head{grid-column:1/11}
.surf-list{grid-column:1/6;align-self:center}
.surf-list button{display:flex;align-items:baseline;gap:18px;width:100%;text-align:left;padding:10px 0;font-weight:500;font-size:clamp(40px,4.4vw,76px);letter-spacing:-.045em;line-height:1;color:var(--mute);transition:color 300ms ease}
.surf-list button:hover{color:var(--ink)}
.surf-list button[aria-selected=true]{color:var(--ink)}
.surf-list button .pl{width:.32em;height:.32em;background:var(--dim);transition:background 300ms ease}
.surf-list button[aria-selected=true] .pl{background:var(--ember)}
.surf-vis{grid-column:6/13;position:relative;height:min(72vh,680px)}
.surf-vis canvas{width:100%;height:100%}
.surf-fact{position:absolute;right:0;bottom:0;max-width:30ch;font-size:19px;text-align:right}
.surf-fact b{display:block;font-weight:500;font-size:clamp(22px,1.8vw,28px);letter-spacing:-.02em;margin-bottom:4px}

/* ---------- measured ---------- */
.board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;margin-top:clamp(40px,4vw,64px)}
.tile{background:var(--graphite);padding:clamp(20px,2vw,30px);display:flex;flex-direction:column;justify-content:space-between;min-height:250px;position:relative;overflow:hidden}
.tile .num{font-weight:500;font-size:clamp(56px,7vw,128px);letter-spacing:-.055em;line-height:.85;font-variant-numeric:tabular-nums}
.tile .what{font-size:18px;font-weight:500}
.tile .cond{font-family:var(--f-mono);font-size:13px;color:var(--mute);margin-top:4px}
.t-a{grid-column:span 6;min-height:340px;background:var(--ember);color:#160903}
.t-a .cond{color:#240b02}
.t-b{grid-column:span 6;min-height:340px}
.t-c{grid-column:span 3}.t-d{grid-column:span 3}
.t-e{grid-column:span 6}
.lat{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.lat .r{display:grid;grid-template-columns:120px 1fr 120px;gap:14px;align-items:center;font-size:15px}
.lat .r span:first-child{color:var(--mute)}
.lat .bar{height:12px;background:var(--graphite-3);position:relative}
.lat .bar i{position:absolute;inset:0 auto 0 0;background:var(--ember);transform-origin:left}
.lat .bar i.p95{background:#7a2a0c}
.lat .r span:last-child{font-family:var(--f-mono);font-size:13px;text-align:right}
.unproven{margin-top:8px;background:var(--graphite-2);padding:clamp(26px,3vw,44px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.unproven h3{grid-column:1/5;font-weight:500;font-size:clamp(26px,2.3vw,38px);letter-spacing:-.03em;line-height:1.05}
.unproven ul{grid-column:6/13;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;font-size:19px}
.unproven li{display:flex;gap:14px}
.unproven li .pl{background:var(--mute);margin-top:.45em}

/* ---------- start here ---------- */
.routes-list{margin-top:clamp(40px,4vw,64px)}
.route{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:30px 0;isolation:isolate}
.route+.route{margin-top:4px}
.route::before{content:"";position:absolute;inset:0 calc(var(--m) * -1);background:var(--ember);z-index:-1;clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path 620ms var(--ease-expo)}
.route:hover::before,.route:focus-visible::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.route .who{grid-column:1/6;font-weight:500;font-size:clamp(32px,3.4vw,58px);letter-spacing:-.04em;line-height:1;transition:color 300ms ease}
.route .start{grid-column:6/12;font-size:19px;color:var(--mute);transition:color 300ms ease}
.route .go{grid-column:12/13;justify-self:end;font-size:30px;transition:transform 400ms var(--ease-out)}
.route:hover .who,.route:hover .start,.route:hover .go{color:#150803}
.route:hover .go{transform:translateX(8px)}
.route:nth-child(odd){background:var(--graphite)}
.route:nth-child(odd)::before{inset:0}
.route{padding-inline:clamp(14px,1.6vw,24px)}

/* ---------- close ---------- */
.close{padding-block:var(--sec) clamp(60px,6vw,100px);text-align:left}
.close h2{font-weight:500;font-size:clamp(46px,7.2vw,138px);letter-spacing:-.055em;line-height:.92}
.close h2 .l{display:block}
.close h2 .l2{color:var(--ember-hi)}
.close-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(36px,4vw,60px);align-items:end}
.close-row .btn{grid-column:1/5;justify-self:start}
.tags{grid-column:5/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tag{background:var(--ember);color:#150803;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;min-height:150px;justify-content:space-between}
.tag:nth-child(2){background:var(--ink)}
.tag:nth-child(3){background:var(--graphite-3);color:var(--ink)}
.tag .k{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em}
.tag .v{font-weight:600;font-size:clamp(22px,2vw,32px);letter-spacing:-.03em;line-height:1}
.tag svg{height:30px;width:100%}

/* ---------- footer ---------- */
footer{padding:0 var(--m) 28px}
.bigmark{position:relative;width:100%;overflow:hidden}
.bigmark svg{width:100%;height:auto}
.foot-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:48px;font-size:15px}
.foot-cols div{grid-column:span 2;display:flex;flex-direction:column;gap:8px}
.foot-cols div b{font-weight:500;margin-bottom:4px}
.foot-cols a{color:var(--mute);transition:color var(--t-hover) ease}
.foot-cols a:hover{color:var(--ink)}
.foot-cols .addr{grid-column:9/13;color:var(--mute)}
.foot-last{display:flex;justify-content:space-between;align-items:center;margin-top:48px;font-size:14px;color:var(--mute)}

/* ---------- reveal defaults (only hidden when JS runs) ---------- */
.js [data-r]{opacity:0;transform:translateY(26px)}
.js .lines .l>span{transform:translateY(105%)}

/* ---------- print: the checklist ---------- */
@media print{
  body.print-checklist>*:not(#questions){display:none!important}
  body.print-checklist::after{display:none}
  body.print-checklist #questions{margin:0;padding:24px}
  body.print-checklist .q-act{display:none}
  body.print-checklist [data-r]{opacity:1!important;transform:none!important}
}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .hero-sub{grid-column:1/13}
  .hero-ctas{grid-column:1/13;justify-content:flex-start;margin-top:18px}
  .why-head{grid-column:1/13;grid-row:1;padding-top:0}
  .why-vis{grid-column:1/13;grid-row:2;position:sticky;top:62px;height:36svh;min-height:250px;z-index:2;margin-top:28px}
  .why-list{grid-column:1/13;grid-row:3;padding-top:3vh}
  .why-vis canvas{clip-path:none}
  .why-vis .cap{display:none}
  .drag{display:block}
  .why-item{min-height:34vh}
  .path-head,.path-lede{grid-column:1/13}
  .path-lede{margin-top:20px}
  .moment .big,.moment p{grid-column:1/13}
  .moment p{margin-top:18px}
  .q-head{grid-column:1/13}.q-act{grid-column:1/13;justify-self:start;margin-top:24px}
  .more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .console{grid-template-columns:1fr}
  .mvetable,.worked{grid-column:1/13}
  .worked{margin-top:28px}
  .mve-foot .s1,.mve-foot .s2,.mve-foot .ctas{grid-column:1/13}
  .mve-foot .s2{margin-top:28px}
  .nni .copy,.mail{grid-column:1/13}
  .mail{margin-top:40px}
  .surf-list,.surf-vis{grid-column:1/13}
  .surf{min-height:auto}
  .surf-vis{height:56vh;margin-top:10px}
  .t-a,.t-b,.t-e{grid-column:span 12}.t-c,.t-d{grid-column:span 6}
  .unproven h3,.unproven ul{grid-column:1/13}.unproven ul{margin-top:20px}
  .close-row .btn,.tags{grid-column:1/13}.tags{margin-top:28px}
  .foot-cols div{grid-column:span 4;margin-bottom:24px}.foot-cols .addr{grid-column:1/13}
}

/* ---------- phone ---------- */
@media (max-width:700px){
  body{font-size:17px}
  .nav-links a:not(.btn){display:none}
  .hero{height:250vh}
  .hero h1{font-size:clamp(30px,8.6vw,44px);line-height:1.02}
  .hero-sub{font-size:16px}
  .hero-ctas .btn.ghost{display:none}
  .hud.tl{display:none}
  .routes{font-size:14px;gap:6px 16px}
  .thesis{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .thesis .side{font-size:11vw;text-align:center!important;padding:0 var(--m)!important}
  .thesis .left{align-self:end;padding-bottom:9vh!important}
  .thesis .right{align-self:start;padding-top:9vh!important}
  .accordion{flex-direction:column;height:auto}
  .acc{flex:none!important;min-height:66px}
  .acc .rot{transform:none;left:20px;top:20px;bottom:auto;font-size:18px}
  .acc .body{position:relative;display:none;padding:22px 20px 26px;gap:16px}
  .acc.open .body{display:flex;opacity:1;transform:none}
  .acc.open .rot{display:none}
  .acc .glyph{display:none}
  .qrow{row-gap:14px}
  .qrow .q,.qrow .most,.qrow .geo{grid-column:1/13;padding-inline:14px}
  .qhead-row{display:none}
  .more-grid{grid-template-columns:1fr}
  .more-grid div{min-height:0}
  .ltable{font-size:14px;min-width:640px}
  .h2{font-size:30px;line-height:1.05}
  .moment .big{font-size:24px}
  .leaves .mono{flex-direction:column;gap:4px}
  .surf-list{display:flex;gap:22px;overflow-x:auto;padding-bottom:6px}
  .surf-list button{width:auto;font-size:34px}
  .surf-vis{height:46svh}
  .surf-fact{position:relative;text-align:left;margin-top:12px;max-width:none}
  .today{grid-template-columns:1fr}
  .cells{grid-template-columns:repeat(29,1fr);gap:2px}
  .lat .r{grid-template-columns:90px 1fr 96px;font-size:14px}
  .t-c,.t-d{grid-column:span 12}
  .tile{min-height:200px}
  .route .who{grid-column:1/12}.route .start{grid-column:1/12;margin-top:10px;font-size:16px}.route .go{grid-column:12/13;grid-row:1}
  .tags{grid-template-columns:1fr}
  .tag{min-height:110px}
  .foot-cols div{grid-column:span 6}
}

@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:100svh}
  .thesis{position:relative;opacity:1;height:70svh;background:var(--night)}
  .js [data-r]{opacity:1;transform:none}
  .js .lines .l>span{transform:none}
  *{transition-duration:1ms!important;animation:none!important}
}

/* ---------- held stages ---------- */
.pin-track{position:relative}
.pins .pin-track::after{content:"";display:block;height:var(--span)}
.pins .pin-stage{position:sticky}
#accTrack{--span:220vh}
#mveTrack{--span:240vh}
#msTrack{--span:150vh}
.acc-meta{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:clamp(56px,6vw,96px)}
.pins .acc-stage{top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:40px}
.pins .acc-meta{margin-top:0}
.ticks{display:flex;gap:6px;flex:none}
.ticks i{width:34px;height:4px;background:var(--graphite-3);transition:background .35s ease}
.ticks i.on{background:var(--ember)}
.pins .mve-stage{top:64px;padding-top:20px;background:var(--graphite)}
.phone-table{display:none}
.pins #msTrack::after{height:0}
.pins .ms-stage{position:static}
.pins-wide #msTrack::after{height:var(--span)}
.pins-wide .ms-stage{position:sticky;top:64px;padding-top:20px;background:var(--night)}
.pins-wide .ms-stage .board{margin-top:32px}
.pins-wide .ms-stage .t-a,.pins-wide .ms-stage .t-b{min-height:270px}
.pins-wide .ms-stage .tile{min-height:210px}
.lat .bar i{transform-origin:left}
@media (max-width:700px){
  .pins .acc-stage{padding-top:64px}
  .pins .acc-meta .h3{font-size:20px}
  .pins .phone-table{display:table;margin:28px 0 8px}
  .pins .phone-head{display:block}
  .pins .mve-stage .mvetable{display:none}
  .pins .mve-stage .mve-head{font-size:22px}
  .pins .mve-stage .mve-body{margin-top:16px}
  .pins .mve-stage .worked{margin-top:0;gap:14px}
}