/* ArkDossier — exhibit system */
@property --p{syntax:"<number>";inherits:true;initial-value:0}
:root{interpolate-size:allow-keywords;
  --lime:#c6ff1a;--lime-deep:#86d400;--violet:#5b1fff;--violet-deep:#3a0fb8;--ink:#12063a;
  --magenta:#ff1f9c;--orange:#ff4a1c;--cyan:#19e0ff;--bone:#f4f0e6;--white:#fff;
  --mono:"Martian Mono",ui-monospace,"SF Mono","Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
  --sans:"Instrument Sans",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gut:clamp(16px,4vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--ink);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:500}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font:500 11px/1.35 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.hatch{height:9px;background:repeating-linear-gradient(115deg,currentColor 0 1.5px,transparent 1.5px 6px)}
.plus{position:absolute;width:11px;height:11px;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat}
.grain{position:absolute;inset:0;background:url(art/grain.png);background-size:220px;mix-blend-mode:multiply;opacity:.5;pointer-events:none;z-index:8}

/* display lettering */
.glyphs{display:block;width:100%;height:auto;overflow:visible}
.gl{fill:none;stroke:currentColor;stroke-width:var(--sw,6);stroke-linejoin:round;stroke-linecap:round}
.js [data-glyph] .gl{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.2,1) calc(var(--i)*80ms)}
.js [data-glyph].in .gl{stroke-dashoffset:0}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font:600 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;padding:16px 18px;background:var(--ink);color:var(--lime);border:2px solid var(--ink);cursor:pointer;transition:transform .15s,background .15s,color .15s}
.btn:hover{transform:translate(-3px,-3px);box-shadow:3px 3px 0 var(--magenta)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn svg{width:12px;height:12px;fill:currentColor}

/* bar */
.bar{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:stretch;color:#fff;mix-blend-mode:difference;border-bottom:1px solid #fff6;pointer-events:none}
.bar>*{pointer-events:auto;padding:15px var(--gut);display:flex;align-items:center;gap:10px;text-decoration:none}
.bar .brand{font:600 13px/1 var(--mono);letter-spacing:.16em;margin-right:auto}
.bar .brand small{font:500 10px/1 var(--mono);letter-spacing:.1em;opacity:.7}
.bar .brand svg{height:19px;width:auto;display:block}
.gl.gf{fill:currentColor;stroke-dasharray:none!important;stroke-dashoffset:0!important}
.bar .by{font:500 10px/1 var(--mono);letter-spacing:.1em;opacity:.8;padding-left:0;margin-left:calc(var(--gut)*-1 + 12px);margin-right:auto;text-decoration:none}
.bar .by:hover{opacity:1;text-decoration:underline}
.bar .brand{margin-right:0}
.f-sub{display:block;margin:clamp(44px,6vw,80px) 0 18px}
.f-title.sm{width:min(520px,80vw);color:var(--violet)}
.mt{margin-top:10px}
.faq.about{background:var(--bone)}
.acc-a a{font-weight:600;text-underline-offset:3px}
.foot-ch{display:inline-flex;gap:10px;align-items:center;margin-top:12px;font:600 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;background:var(--lime);color:var(--ink)!important;padding:13px 15px}
.foot-ch:hover{background:#fff}
.foot-end{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;margin-top:34px;padding-top:20px;border-top:1.5px solid #f4f0e655}
.foot-end .legal{margin-top:0;padding-top:0;border-top:0;flex:1 1 36ch;min-width:0}
.foot-dc{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;margin:0 0 2px auto;color:#fff;font:600 11.5px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;text-decoration:none}
.foot-dc svg{display:block;width:20px;height:20px;max-width:20px;max-height:20px;flex:0 0 20px;fill:#fff}
.foot-dc:hover{color:var(--lime)}
.foot-dc:hover svg{fill:var(--lime)}
.bar .cell{border-left:1px solid #fff6;padding-inline:22px}
.bar .cell b{font-weight:500;opacity:.6}

/* ================= EXHIBIT 01 — THE GIGA ================= */
.hero{position:relative;background:var(--lime);color:var(--ink)}
.hero-pin{position:relative;height:100vh;min-height:560px;overflow:hidden}
.h-half{position:absolute;inset:-6%;background:url(art/land-halftone.webp) center/cover no-repeat;opacity:.55;transform:translateY(calc(var(--p)*-5vh)) scale(calc(1.04 + var(--p)*.08))}
.h-type{position:absolute;left:var(--gut);top:11vh;width:min(94vw,142vh);color:#fff;mix-blend-mode:difference;pointer-events:none;z-index:4;--sw:calc(4.5 + var(--p)*9);transform:translateY(calc(var(--p)*-3vh))}
.h-type .g-the{width:19%;margin-left:.6%;--sw:calc(11 + var(--p)*12)}
.h-type .g-giga{margin-top:1.2%}
.h-creature,.h-over{position:absolute;z-index:3;right:-3vw;bottom:-13vh;width:min(120vh,84vw);aspect-ratio:1746/1518;transform-origin:80% 50%;transform:translate(calc(var(--p)*2vw),calc(var(--p)*3vh)) scale(calc(1 + var(--p)*.16))}
.h-over{z-index:5;pointer-events:none}
.h-over>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.h-creature>img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(-14px 18px 0 #12063a2e)}
.h-creature>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.h-back{z-index:-1}
.h-back .disc{fill:var(--orange);transform-origin:1190px 520px;transform:scale(calc(.82 + var(--p)*.5))}
.h-back .ring{fill:none;stroke:var(--ink);stroke-width:2.5}
.h-back .ring.dash{stroke-dasharray:3 13;stroke-width:9}
.h-back .wave{fill:none;stroke:var(--magenta);stroke-width:3.5;transform-origin:1263px 750px;transform:rotate(calc(var(--p)*50deg))}
.h-back .bar-k{fill:var(--ink)}
.h-back .bar-c{fill:var(--cyan)}
.h-lines{z-index:2;pointer-events:none}
.h-lines path{fill:none;stroke:var(--ink);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:0}
.note{position:absolute;inset:0;z-index:4;pointer-events:none}
.spot{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:var(--lime);font:600 11px/1 var(--mono);cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s}
.spot:after{content:"";position:absolute;inset:-9px;border:1.5px solid var(--ink);border-radius:50%;opacity:.5;animation:ping 2.4s ease-out infinite}
.spot:hover,.note.open .spot{background:var(--magenta);color:#fff}
@keyframes ping{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.note-body{position:absolute;pointer-events:auto}
.note-body b{display:block;font:600 12px/1.25 var(--mono);letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px}
.note-body span{display:block;font-size:14px;line-height:1.35;font-weight:500}
.note-body{background:var(--lime);padding:10px 12px;border:2px solid var(--ink)}
.note.open .note-body{background:var(--ink);color:var(--lime)}
.n1 .spot{left:73.3%;top:12.6%}.n1 .note-body{left:35%;top:1.2%;width:22.5%}
.n2 .spot{left:86%;top:32%}.n2 .note-body{left:71.5%;top:40.3%;width:19.5%}
.n3 .spot{left:37.3%;top:46%}.n3 .note-body{left:1%;top:35%;width:21%}

.h-offer{position:absolute;z-index:4;left:31vw;top:10.5vh;display:flex;align-items:center;gap:16px;text-decoration:none}
.h-offer .o-ring{position:relative;width:clamp(84px,14vh,132px);aspect-ratio:1;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:none}
.h-offer .o-ring:before,.h-offer .o-ring:after{content:"";position:absolute;border-radius:50%;border:1.5px solid var(--ink)}
.h-offer .o-ring:before{inset:-9px}
.h-offer .o-ring:after{inset:-20px;border-style:dashed;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.h-offer img{width:74%;height:auto;transition:transform .3s}
.h-offer:hover img{transform:scale(1.12) rotate(-6deg)}
.h-offer .mono b{display:block;font-weight:600;font-size:12.5px;margin-top:3px}

.h-copy,.h-beat{position:absolute;z-index:5;left:var(--gut);bottom:6.5vh}
.h-copy{width:min(430px,34vw)}
.h-copy .mono{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.h-copy .mono i{width:34px;height:2px;background:var(--ink)}
.h-copy p{font-size:clamp(16px,1.35vw,20px);line-height:1.5;font-weight:500;margin-bottom:20px}
.h-copy p span,.h-beat p span{background:var(--lime);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.14em .35em;margin-left:-.35em}
.h-copy .row{display:flex;gap:10px;flex-wrap:wrap}
.h-beat{width:min(560px,40vw);visibility:hidden}
.h-beat h2{font:500 clamp(30px,4.3vw,66px)/.98 var(--mono);letter-spacing:-.03em;text-transform:uppercase}
.h-beat h2{line-height:1.12}
.h-beat h2 span{background:var(--ink);color:var(--lime);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.02em .16em}
.h-beat h2 em{font-style:normal;color:var(--magenta)}
.h-beat p{margin-top:18px;font-size:clamp(15px,1.25vw,19px);line-height:1.5;font-weight:500;max-width:36ch}
.h-side{position:absolute;z-index:5;left:14px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
.h-scroll{position:absolute;z-index:5;right:var(--gut);bottom:26px;display:flex;align-items:center;gap:12px;color:var(--ink)}
.h-scroll .hatch{width:120px}
.hero .p1{left:var(--gut);top:46%}.hero .p2{left:52%;top:9vh}.hero .p3{right:22%;bottom:5vh}

/* ================= HERO: scroll-driven (CSS only) ================= */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
  .hero{height:240vh;view-timeline:--hero block;animation:hero-p linear both;animation-timeline:--hero;animation-range:contain 0% contain 100%}
  .hero-pin{position:sticky;top:0}
  .hero .note-body{animation:note-in linear both;animation-timeline:--hero}
  .hero .n1 .note-body{animation-range:contain 4% contain 10%}
  .hero .n2 .note-body{animation-range:contain 14% contain 20%}
  .hero .n3 .note-body{animation-range:contain 24% contain 30%}
  .hero .note.open .note-body{animation:none}
  .h-lines path{animation:line-in linear both;animation-timeline:--hero}
  .h-lines .l1{animation-range:contain 2% contain 9%}
  .h-lines .l2{animation-range:contain 12% contain 19%}
  .h-lines .l3{animation-range:contain 22% contain 29%}
  .h-copy{animation:copy-out linear both;animation-timeline:--hero;animation-range:contain 32% contain 39%}
  .h-beat{animation:beat-in linear both;animation-timeline:--hero;animation-range:contain 38% contain 46%}
}}
@keyframes hero-p{from{--p:0}to{--p:1}}
@keyframes note-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes line-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes copy-out{from{opacity:1;visibility:visible}to{opacity:0;transform:translateY(-24px);visibility:hidden}}
@keyframes beat-in{from{opacity:0;transform:translateY(24px);visibility:hidden}to{opacity:1;transform:none;visibility:visible}}

/* ================= THE METHOD ================= */
.method{position:relative;overflow-x:clip;background:var(--bone);padding:clamp(70px,11vw,150px) var(--gut) clamp(90px,13vw,190px)}
.m-head{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:clamp(36px,5vw,70px)}
.m-head .g{width:min(760px,82vw);color:var(--violet);--sw:7}
.m-art{position:absolute;right:-5vw;top:30px;width:min(48vw,700px);height:auto;z-index:0;pointer-events:none}
.m-head,.m-grid{position:relative;z-index:1}
.m-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,25vw,340px);gap:clamp(30px,6vw,100px);align-items:start}
.m-list{list-style:none;margin:0;padding:0}
.m-list li{position:relative;display:grid;grid-template-columns:clamp(86px,11vw,170px) minmax(0,1fr);gap:clamp(16px,3vw,44px);align-items:center;padding:clamp(18px,2.2vw,30px) 0;border-top:1.5px solid var(--ink)}
.m-list li:last-child{border-bottom:1.5px solid var(--ink)}
.m-n{color:var(--magenta);--sw:9}
.m-list h3{font:500 clamp(19px,2.3vw,34px)/1.05 var(--mono);letter-spacing:-.02em;text-transform:uppercase}
.m-list p{margin-top:8px;max-width:52ch;font-size:clamp(15px,1.15vw,18px)}
.m-list li.key{z-index:0}
.m-list li.key:before{content:"";position:absolute;z-index:-1;top:-1.5px;bottom:0;left:calc(var(--gut)*-1);right:-18px;background:var(--lime)}
.m-list li.key .m-n{color:var(--violet)}
.m-list .tag{display:inline-block;margin-top:12px;background:var(--ink);color:var(--lime);padding:6px 9px}
.m-video{position:sticky;top:84px;transform:rotate(2.2deg)}
.m-video:before{content:"";position:absolute;inset:-26px 34px 54px -34px;background:var(--orange);z-index:-2}
.m-video:after{content:"";position:absolute;right:-22px;bottom:-34px;width:62%;height:90px;background:var(--ink);z-index:-1}
.m-frame{position:relative;aspect-ratio:9/16;background:#000;border:2px solid var(--ink);overflow:hidden}
.m-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.facade{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#000 url(giga-poster.webp) center/cover no-repeat;color:#fff}
.facade i{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px;border-radius:50%;background:var(--lime);display:grid;place-items:center;transition:transform .2s}
.facade:hover i{transform:scale(1.1)}
.facade i svg{width:28px;height:28px;fill:var(--ink);margin-left:5px}
.m-video .mono{display:flex;justify-content:space-between;gap:12px;position:relative;z-index:1;background:var(--ink);color:var(--lime);padding:12px 14px}
.m-video .mono a{color:var(--lime)}

/* ================= EXHIBIT 06 — THE TORPOR ================= */
.torpor{--bg:var(--violet);--fg:#fff;--acc:var(--lime);position:relative;background:var(--bg);color:var(--fg);transition:background .55s,color .4s;padding:0 var(--gut) clamp(60px,8vw,110px)}
.torpor[data-state=capped]{--bg:#2a0a96}
.torpor[data-state=rage]{--bg:#ff3516;--fg:var(--ink);--acc:#ffe94a}
.torpor[data-state=ko]{--bg:var(--lime);--fg:var(--ink);--acc:var(--violet)}
.t-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) min(58vh,42vw);column-gap:clamp(20px,4vw,70px);align-items:center}
.t-left{padding-top:clamp(48px,7.5vh,84px);min-width:0}
.t-title{width:min(520px,100%);color:var(--acc);--sw:8;margin:12px 0 14px;transition:color .4s}
.t-intro{max-width:50ch;font-size:15.5px;font-weight:500;opacity:.92}
.t-pct{height:clamp(96px,19vh,230px);margin-top:3vh;color:var(--acc);--sw:10;transition:color .4s}
.t-pct .glyphs{width:auto;height:100%}
.t-cap{margin-top:2.6vh;max-width:50ch;min-height:8.4em}
.t-cap h3{font:500 clamp(20px,2.3vw,34px)/1.02 var(--mono);letter-spacing:-.03em;text-transform:uppercase;margin:10px 0 12px}
.t-cap p{font-size:clamp(15px,1.2vw,18px);font-weight:500}
.t-gauge{position:relative;margin-top:clamp(40px,7vh,80px);z-index:2}
.t-gauge svg{width:100%;height:auto;overflow:visible}
.torpor[data-state=rage] .t-gauge{animation:shake .16s linear infinite}
@keyframes shake{0%{transform:translate(2px,-2px) rotate(.3deg)}50%{transform:translate(-3px,2px) rotate(-.4deg)}100%{transform:translate(2px,1px)}}
.g-plate{fill:var(--ink)}
.tooth{fill:none;stroke:var(--fg);stroke-width:1.6;opacity:.45;transition:fill .25s,opacity .25s,stroke .25s}
.tooth.lit{fill:var(--acc);stroke:var(--acc);opacity:1}
.tick{stroke:var(--fg);stroke-width:1.2;opacity:.5}
.tick.major{stroke-width:3;opacity:1}
.g-num{font:500 15px var(--mono);fill:var(--fg);letter-spacing:.06em}
#g-rage{fill:none;stroke:var(--orange);stroke-width:3.5}
.torpor[data-state=rage] #g-rage{stroke:var(--ink);stroke-width:5}
.torpor[data-state=ko] #g-rage{stroke:var(--ink)}
#g-pulse{fill:none;stroke:var(--acc);stroke-width:10;opacity:0;transform-origin:center;transform-box:fill-box}
#g-pulse.go{animation:pulse .7s ease-out}
@keyframes pulse{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.28)}}
#g-cap{transition:transform .9s cubic-bezier(.5,0,.3,1.4),opacity .7s .3s;transform-origin:0 214px;transform-box:view-box}
#g-cap rect{fill:var(--fg)}
#g-cap text{font:600 15px var(--mono);fill:var(--fg);letter-spacing:.08em}
.torpor.unlocked #g-cap{transform:translate(60px,90px) rotate(48deg);opacity:0}
.g-note{position:absolute;font:500 10.5px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;max-width:150px}
.g-note:before{content:"";position:absolute;height:1.5px;background:currentColor;width:46px;top:.6em}
.g-note.a{left:0;top:5%;text-align:right;transform:translateX(-64%);padding-right:56px}.g-note.a:before{right:0}
.g-note.b{left:0;bottom:7%;text-align:right;transform:translateX(-60%);padding-right:56px}.g-note.b:before{right:0}
#t-fx{position:absolute;inset:0;pointer-events:none}
.pop{position:absolute;font:600 clamp(18px,2vw,30px)/1 var(--mono);color:var(--ink);background:var(--acc);padding:6px 9px;animation:pop 1.25s cubic-bezier(.2,.7,.2,1) forwards;white-space:nowrap}
.pop.capped{background:#fff;color:var(--ink);text-decoration:line-through}
@keyframes pop{0%{opacity:0;transform:translateY(20px) scale(.7) rotate(-6deg)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-70px)}}

.t-chartwrap{margin-top:2.4vh}
.t-chart-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.t-chart{position:relative;height:clamp(150px,20vh,250px);border-left:1.5px solid var(--fg)}
.t-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.t-chart svg *{vector-effect:non-scaling-stroke}
.c-base{stroke:var(--fg);stroke-width:1.5}
.c-capline{stroke:var(--fg);stroke-width:1.5;stroke-dasharray:7 7}
#c-future{fill:none;stroke:var(--fg);stroke-width:2;stroke-dasharray:3 7;opacity:.6}
#c-past{fill:none;stroke:var(--acc);stroke-width:5;stroke-linejoin:round}
#c-area{fill:var(--acc);opacity:.16}
#c-rage{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linejoin:bevel}
.torpor[data-state=rage] #c-rage{stroke:var(--ink);stroke-width:3.5}
.c-lock{position:absolute;left:0;width:72%;top:12%;height:40%;color:var(--fg);background:repeating-linear-gradient(115deg,currentColor 0 1.2px,transparent 1.2px 9px);opacity:.34;transition:opacity .6s}
.torpor.unlocked .c-lock{opacity:.08}
.c-lbl{position:absolute;left:10px;transform:translateY(-135%);white-space:nowrap}
.c-lbl.top{top:12%}
.c-lbl.mid{top:52%}
.c-lbl.rage{left:53%;top:12%;transform:translateY(-140%);color:var(--orange)}
.torpor[data-state=rage] .c-lbl.rage{color:var(--ink)}
.bite{position:absolute;width:11px;height:11px;margin:-5.5px;border-radius:50%;background:var(--bg);border:2px solid var(--fg);transition:background .5s}
.bite.capped{border-style:dotted;opacity:.8}
.c-head{position:absolute;top:-10px;bottom:-10px;width:2px;margin-left:-1px;background:var(--fg);pointer-events:none}
.c-head:before{content:"";position:absolute;top:-7px;left:-6px;border:7px solid transparent;border-top-color:var(--fg);border-bottom:0}
#t-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
#t-range:focus-visible+.c-focus{outline:3px solid var(--magenta);outline-offset:6px}
.c-focus{position:absolute;inset:0;pointer-events:none}
.t-nodes{position:relative;height:74px;margin-top:14px}
.t-node{position:absolute;top:0;background:none;border:0;padding:0;text-align:left;cursor:pointer;opacity:.6;transition:opacity .2s}
.t-node:hover,.t-node.on,.t-node.done{opacity:1}
.t-node b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--fg);font:600 11px/1 var(--mono);margin:0 0 8px -17px;transition:background .25s,color .25s}
.t-node.on b{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.torpor[data-state=ko] .t-node.on b{color:var(--lime)}
.t-node.done b{background:var(--fg);color:var(--bg)}
.t-node span{display:block;margin-left:-17px}
.t-node.end b{margin-left:auto;margin-right:-17px}.t-node.end{transform:translateX(-100%);text-align:right}.t-node.end span{margin:0 -17px 0 0}
.t-ctrl{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:12px}
.t-ctrl .btn{background:var(--fg);border-color:var(--fg);color:var(--bg);min-width:128px;justify-content:center;transition:background .4s,color .4s,border-color .4s,transform .15s}
.t-ctrl .btn .ic{width:12px;height:12px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.t-ctrl .btn[aria-pressed=true] .ic{clip-path:polygon(0 0,36% 0,36% 100%,64% 100%,64% 0,100% 0,100% 100%,0 100%)}
.t-ctrl p{opacity:.8;max-width:60ch}

/* ================= THE OFFERING ================= */
.offer{position:relative;background:var(--ink);color:var(--bone);padding:clamp(70px,10vw,150px) var(--gut);overflow:hidden}
.o-title{width:min(980px,92vw);color:var(--orange);--sw:6;margin:16px 0 clamp(40px,6vw,90px)}
.o-craft{display:flex;align-items:center;gap:clamp(14px,3vw,44px);flex-wrap:wrap}
.o-in{display:flex;gap:10px}
.o-in span{width:clamp(70px,9vw,124px);aspect-ratio:1;border-radius:50%;border:1.5px dashed var(--bone);display:grid;place-items:center;text-align:center;padding:10px}
.o-arrow{flex:1 1 60px;min-width:50px;height:1.5px;background:var(--bone);position:relative}
.o-arrow:after{content:"";position:absolute;right:0;top:-6px;border:6.5px solid transparent;border-left-color:var(--bone);border-right:0}
.o-out{position:relative;width:clamp(190px,26vw,360px);aspect-ratio:1;border-radius:50%;background:var(--orange);display:grid;place-items:center;flex:none}
.o-out:before,.o-out:after{content:"";position:absolute;border-radius:50%;border:1.5px solid var(--bone)}
.o-out:before{inset:-14px}.o-out:after{inset:-34px;border-style:dashed;opacity:.6;animation:spin 60s linear infinite}
.o-out img{width:78%;filter:drop-shadow(0 14px 0 #12063a55)}
.o-specs{margin:clamp(40px,6vw,80px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 30px;max-width:980px}
.o-specs div{display:flex;gap:12px;align-items:baseline}
.o-specs dt{background:var(--bone);color:var(--ink);padding:4px 7px;white-space:nowrap}
.o-specs dd{margin:0;font-weight:600}
.o-note{margin-top:28px;max-width:70ch;font-size:14px;opacity:.72}

/* ================= QUESTIONS ================= */
.faq{background:var(--lime);padding:clamp(70px,10vw,150px) var(--gut);display:grid;grid-template-columns:minmax(0,1100px);justify-content:center}
.f-title{width:min(820px,90vw);color:var(--ink);--sw:7;margin:16px 0 clamp(30px,5vw,60px)}
.acc{border-top:2px solid var(--ink);max-width:1100px}
.acc-item{border-bottom:2px solid var(--ink)}
.acc-q h3{margin:0;font:inherit;letter-spacing:inherit}
.acc-q{list-style:none}
.acc-q::-webkit-details-marker{display:none}
.acc-q{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;padding:clamp(16px,2vw,26px) 0;font:500 clamp(17px,2vw,28px)/1.15 var(--mono);letter-spacing:-.02em;text-transform:uppercase}
.acc-q i{position:relative;flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);transition:background .25s,transform .35s}
.acc-q i:before,.acc-q i:after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px -8px;background:var(--ink);transition:transform .35s,background .25s}
.acc-q i:after{transform:rotate(90deg)}
.acc-item[open] .acc-q i{background:var(--ink);transform:rotate(180deg)}
.acc-item[open] .acc-q i:before,.acc-item[open] .acc-q i:after{background:var(--lime)}
.acc-item[open] .acc-q i:after{transform:rotate(0)}
.acc-item::details-content{block-size:0;overflow:clip;transition:block-size .4s cubic-bezier(.3,.7,.2,1),content-visibility .4s allow-discrete}
.acc-item[open]::details-content{block-size:auto}
.acc-a p{padding:0 60px clamp(18px,2vw,28px) 0;max-width:64ch;font-size:clamp(15px,1.2vw,18px);font-weight:500}

/* ================= FOOT ================= */
/* ================= THE SHORT ANSWER ================= */
.answer{background:var(--ink);color:var(--bone);padding:clamp(60px,8vw,120px) var(--gut)}
.answer h2{font:500 clamp(24px,3.6vw,54px)/1.02 var(--mono);letter-spacing:-.035em;text-transform:uppercase;color:var(--lime);max-width:22ch;margin:16px 0 clamp(20px,3vw,36px)}
.a-lead{font-size:clamp(18px,1.9vw,27px);line-height:1.38;font-weight:500;max-width:46ch}
.a-lead b{color:var(--lime);font-weight:600}
.a-facts{margin:clamp(34px,5vw,64px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px 34px;max-width:1180px;border-top:1.5px solid #f4f0e655;padding-top:26px}
.a-facts div{display:flex;gap:12px;align-items:baseline}
.a-facts dt{background:var(--lime);color:var(--ink);padding:4px 7px;white-space:nowrap}
.a-facts dd{margin:0;font-weight:600}
.legal{margin-top:34px;padding-top:20px;border-top:1.5px solid #f4f0e655;font-size:12.5px;line-height:1.55;opacity:.75;max-width:110ch}
.legal b{font-weight:600;opacity:1}
.foot{background:var(--ink);color:var(--bone);padding:clamp(60px,8vw,110px) var(--gut) 40px}
.foot-cta{display:block;text-decoration:none;color:var(--lime);font:500 clamp(34px,7.4vw,118px)/.94 var(--mono);letter-spacing:-.045em;text-transform:uppercase}
.foot-cta span{color:var(--magenta)}
.foot-cta:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px 50px;margin-top:clamp(40px,6vw,80px);padding-top:26px;border-top:1.5px solid #f4f0e655;font-size:14.5px}
.foot-grid .mono{opacity:.6;margin-bottom:12px;display:block}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:9px}
.foot-grid a{color:var(--lime)}
.foot-grid p{opacity:.72}

/* ================= HOME: THE ARCHIVE (hero) ================= */
.arc{--char:#0b0a0e;--line:#f4f0e62e;position:relative;display:flex;flex-direction:column;min-height:100svh;background:var(--char);color:var(--bone);overflow:clip;isolation:isolate}
.arc .grain.lt,.ix .grain.lt{mix-blend-mode:screen;opacity:.09}
.arc-stage{position:relative;flex:1 1 auto;min-height:52svh}
.arc-tex{position:absolute;inset:0;background:url(art/land-halftone.webp) center 35%/cover no-repeat;opacity:.07;-webkit-mask:linear-gradient(#000 30%,transparent 92%);mask:linear-gradient(#000 30%,transparent 92%)}
.arc-num{position:absolute;left:var(--gut);top:27svh;height:34svh;color:var(--lime);opacity:.42;--sw:1.4;z-index:1}
.arc-num .glyphs{height:100%;width:auto}
.arc-creature{position:absolute;z-index:2;top:3svh;right:-1vw;height:96svh;aspect-ratio:1746/1518}
.arc-fig{position:relative;width:100%;height:100%}
.arc-fig>img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(-18px 0 60px #5b1fff40)}
.arc-ann{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.arc-ann path{fill:none;stroke:var(--bone);stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:0;opacity:.75}
.arc-ann circle{fill:var(--lime)}
.arc-note{position:absolute;margin:0;font:500 10.5px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--bone)}
.arc-note b{display:block;font-weight:600;color:var(--lime);margin-bottom:3px}
.arc-note.a{right:59%;top:7.4%;text-align:right;width:26%}
.arc-note.b{left:85.5%;top:46.4%;width:12%}
.arc-note.b b{font:500 clamp(18px,1.6vw,26px)/1 var(--mono);letter-spacing:-.02em;margin-bottom:5px}
.arc-intro{position:absolute;z-index:3;left:var(--gut);top:max(84px,12svh);width:min(330px,30vw)}
.arc-intro .mono{display:block;color:#f4f0e699;margin-bottom:14px}
.arc-intro p{font:500 clamp(17px,1.45vw,22px)/1.38 var(--sans);text-wrap:balance}
.arc .plus{color:#f4f0e680;z-index:3}
.arc .p1{left:calc(var(--gut) - 5px);top:calc(max(84px,12svh) - 26px)}
.arc .p2{left:calc(var(--gut) - 5px);top:calc(27svh - 22px)}
.arc-plinth{position:relative;z-index:4;background:var(--char);border-top:1px solid var(--line);padding:16px var(--gut) clamp(22px,4svh,40px)}
.arc-plinth:before{content:"";position:absolute;left:var(--gut);top:-1px;width:min(220px,22vw);height:2px;background:var(--lime)}
.arc-meta{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.arc-label{font:inherit;color:var(--lime)}
.arc-down{color:#f4f0e6b3;text-decoration:none}
.arc-down:hover{color:var(--lime)}
.arc-name{margin:clamp(8px,1.6svh,16px) 0 clamp(14px,2.6svh,26px) -.35vw;color:var(--bone);--sw:5.5}
.arc-name .glyphs{width:auto;height:min(8.6vw,12svh);max-width:100%}
.arc-cap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) auto;gap:clamp(18px,4vw,64px);align-items:end}
.arc-cap h3{font:500 clamp(18px,1.9vw,28px)/1.05 var(--mono);letter-spacing:-.025em;text-transform:uppercase;max-width:20ch}
.arc-cap p{color:#f4f0e6c4;font-size:clamp(15px,1.15vw,17px);max-width:44ch}
.arc-cta{display:inline-flex;align-items:center;gap:22px;background:var(--lime);color:var(--ink);text-decoration:none;font:600 clamp(12px,.95vw,14px)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:clamp(16px,2.2svh,22px) clamp(18px,1.8vw,28px);white-space:nowrap;transition:background .2s,color .2s}
.arc-cta span{transition:transform .25s cubic-bezier(.3,.7,.2,1)}
.arc-cta:hover{background:var(--violet);color:#fff}
.arc-cta:hover span{transform:translateX(6px)}
.arc-cta:focus-visible,.arc-down:focus-visible{outline-color:var(--lime)}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .arc-fig>img{animation:arc-in 1.5s cubic-bezier(.2,.7,.15,1) both}
  .arc-ann path{animation:arc-line .9s cubic-bezier(.6,0,.2,1) both}
  .arc-ann path:nth-child(1){animation-delay:.9s}.arc-ann path:nth-child(2){animation-delay:1.15s}
  .arc-ann circle,.arc-note{animation:arc-fade .5s ease both}
  .arc-ann circle{animation-delay:.8s}.arc-note.a{animation-delay:1.5s}.arc-note.b{animation-delay:1.75s}
  .arc-intro{animation:arc-fade .8s .2s ease both}
  .arc-plinth:before{transform-origin:left;animation:arc-rule 1.1s .3s cubic-bezier(.6,0,.2,1) both}
}
@keyframes arc-in{from{opacity:0;transform:translateX(4%) scale(1.05);filter:drop-shadow(-18px 0 60px #5b1fff00) blur(6px)}}
@keyframes arc-line{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes arc-fade{from{opacity:0;transform:translateY(8px)}}
@keyframes arc-rule{from{transform:scaleX(0)}}

/* hero → index: scroll-driven */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
  .arc{view-timeline:--arc block}
  .arc-creature{animation:arc-exit linear both;animation-timeline:--arc;animation-range:exit 0% exit 100%}
  .arc-num{animation:arc-num-exit linear both;animation-timeline:--arc;animation-range:exit 0% exit 100%}
  .ix:before{animation:ix-drop linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .ix-head{animation:ix-rule linear both;animation-timeline:view();animation-range:entry 20% entry 90%}
}}
@keyframes arc-exit{to{transform:translateY(-14svh) scale(.93);opacity:.15}}
@keyframes arc-num-exit{to{transform:translateY(-34svh);opacity:0}}
@keyframes ix-drop{from{transform:scaleY(0)}}
@keyframes ix-rule{from{background-size:0% 1px}}

/* ================= HOME: THE INDEX ================= */
.ix{--char:#0b0a0e;--line:#f4f0e62e;position:relative;background:var(--char);color:var(--bone);padding:clamp(70px,10svh,120px) var(--gut) clamp(80px,12vw,150px)}
.ix:before{content:"";position:absolute;right:calc(var(--gut) + 6px);top:0;width:1px;height:clamp(56px,8svh,96px);background:var(--lime);transform-origin:top}
.ix-head{display:flex;justify-content:space-between;gap:20px;padding-bottom:12px;background:linear-gradient(var(--line),var(--line)) left bottom/100% 1px no-repeat;color:#f4f0e6b3}
.ix-count{color:var(--lime)}
.ix-title{width:min(470px,62vw);color:var(--bone);--sw:3;margin:clamp(30px,5vw,60px) 0 clamp(24px,4vw,48px)}
.ix-list{list-style:none;margin:0;padding:0}
.hub-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);align-items:center;text-decoration:none;color:var(--bone);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;position:relative;transition:background .2s,padding .2s,color .2s}
.hub-row:hover{background:var(--lime);color:var(--ink);padding-inline:18px}
.hub-tag{display:inline-block;background:var(--lime);color:var(--ink);padding:5px 8px;margin-bottom:12px}
.hub-row:hover .hub-tag{background:var(--ink);color:var(--lime)}
.hub-row .go{background:var(--lime);color:var(--ink);padding:9px 11px}
.hub-row:hover .go{background:var(--ink);color:var(--lime)}
.hub-row .n{width:clamp(70px,9vw,130px);color:var(--magenta);--sw:6}
.hub-row:hover .n{color:var(--violet)}
.hub-row h3{font:500 clamp(22px,3.4vw,52px)/1 var(--mono);letter-spacing:-.03em;text-transform:uppercase}
.hub-row p{margin-top:10px;font-weight:500;opacity:.8;max-width:60ch}

/* ================= SMALL SCREENS ================= */
@media(max-width:860px){
  .arc{min-height:0}
  .arc-stage{min-height:0;padding:calc(64px + 4vw) var(--gut) 0;height:calc(64px + 122vw)}
  .arc-intro{position:relative;left:auto;top:auto;width:auto;max-width:30ch}
  .arc .plus{display:none}
  .arc-num{top:calc(64px + 40vw);height:27vw;--sw:2.2}
  .arc-creature{top:auto;bottom:-30vw;right:-26vw;height:auto;width:136vw}
  .arc-note,.arc-ann{display:none}
  .arc-name .glyphs{height:auto;width:100%}
  .arc-name{--sw:8}
  .arc-cap{grid-template-columns:minmax(0,1fr);gap:14px}
  .arc-cta{justify-content:space-between;margin-top:6px}
  .ix-head{flex-wrap:wrap}
  .bar .cell.wide{display:none}
  .hero{height:auto}
  .hero-pin{position:relative;height:auto;min-height:0;padding:84px 0 44px;display:flex;flex-direction:column}
  .h-type{order:1}.h-offer{order:2;align-self:flex-start}.h-creature{order:3}.h-copy{order:4}.h-beat{order:5}
  .bar>*{padding:14px 14px}.bar .cell{padding-inline:14px}.bar .brand small{display:none}
  .h-type{position:relative;left:auto;top:auto;width:92vw;margin-inline:auto;--sw:5.5}
  .h-offer{position:relative;left:auto;top:auto;margin:22px var(--gut) 0;z-index:6}
  .h-creature{position:relative;right:auto;bottom:auto;width:132vw;margin:-34vw 0 0 -22vw;transform:none}
  .h-over{display:none}
  .h-offer .mono{background:var(--lime);padding:6px 8px}
  .h-type{mix-blend-mode:normal;color:var(--violet)}
  .h-lines,.h-side,.h-scroll,.hero .plus{display:none}
  .m-art{width:86vw;right:-22vw;top:10px;opacity:.5}
  .note-body{left:6%!important;right:6%;width:auto!important;top:auto!important;bottom:4%;text-align:left!important;display:none;background:var(--ink);color:var(--lime);padding:12px 14px;margin:0!important}
  .note.open .note-body{display:block}
  .n1 .note-body,.n2 .note-body,.n3 .note-body{left:22%!important}
  .h-copy,.h-beat{position:relative;left:auto;bottom:auto;width:auto;margin:0 var(--gut);visibility:visible}
  .h-copy{margin-top:-6vw}
  .h-beat{margin-top:44px}
  .m-grid{grid-template-columns:minmax(0,1fr)}
  .m-video{position:relative;top:auto;max-width:300px;margin:30px auto 20px;order:-1}
  .t-stage{grid-template-columns:minmax(0,1fr)}
  .t-gauge{order:-1;width:min(78vw,420px);margin:-70px auto 0}
  .t-left{padding-top:30px}
  .g-note{display:none}
  .t-node span{display:none}
  .t-nodes{height:auto;display:flex;justify-content:space-between}
  .t-node,.t-node.end{position:static;transform:none}
  .t-node b,.t-node.end b{margin:0}
  .c-lbl .x{display:none}
  .c-lbl{font-size:9.5px}
  .o-arrow{flex-basis:100%;width:1.5px;height:40px;min-width:0;flex:none;margin-left:40px}
  .o-arrow:after{right:-6px;top:auto;bottom:0;border:6.5px solid transparent;border-top-color:var(--bone);border-bottom:0}
  .acc-a p{padding-right:0}
  .hub-row{grid-template-columns:auto minmax(0,1fr)}
  .hub-row .go{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .js [data-glyph] .gl{stroke-dashoffset:0}
  .js .rv{opacity:1;transform:none}
}