/* hero */
.hero{position:relative;height:100svh;min-height:600px;padding:0;overflow:hidden}
.net{position:absolute;inset:0;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 20% 80%,rgba(3,3,3,.86) 10%,rgba(3,3,3,.2) 60%,rgba(3,3,3,0)),linear-gradient(0deg,var(--ground),rgba(3,3,3,0) 30%)}
.hero-in{position:absolute;left:0;right:0;bottom:clamp(56px,11vh,120px);z-index:1;display:grid;gap:20px}
.hero h1{font:400 clamp(76px,15vw,220px)/.86 var(--serif);letter-spacing:-.045em;animation:rise 1.6s var(--ease) .2s both}
.hero .lede{font:400 clamp(20px,2.4vw,30px)/1.3 var(--serif);color:var(--dim);animation:rise 1.6s var(--ease) .45s both}
.hero .lede em{color:var(--lime);font-style:italic}
.hero .by{font-size:14px;color:var(--faint);animation:rise 1.6s var(--ease) .65s both}
.hero .by b{color:var(--ink);font-weight:500}
.hero .k{animation:rise 1.6s var(--ease) both}
.hero .k .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime);margin:0 8px 2px;vertical-align:middle}
.scroll{position:absolute;z-index:1;right:clamp(16px,4vw,56px);bottom:clamp(56px,11vh,120px);writing-mode:vertical-rl;text-decoration:none}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@media (max-width:640px){.scroll{display:none}}

/* why */
.why{display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:22px clamp(24px,4vw,64px);max-width:940px;color:var(--dim);font-size:clamp(16px,1.35vw,18px)}
.cols b{font-weight:500}
.watts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,3vw,40px);margin-top:20px;max-width:900px}
.watt{display:grid;gap:8px;padding:clamp(14px,3vw,22px);border:1px solid var(--line);border-radius:22px;background:var(--panel)}
.watt canvas{width:100%;height:120px}
.watt b{font:400 clamp(36px,5vw,64px)/1 var(--serif);letter-spacing:-.02em}
.watt:first-child b{color:var(--lime)}

/* how */
.how h2{margin-top:30px}
.process{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);margin-top:48px;align-items:center}
.proc-canvas{width:100%;aspect-ratio:1.15;border-radius:24px;background:#000;border:1px solid var(--line)}
.steps{list-style:none;margin:0;padding:0;display:grid}
.steps li{display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:18px 0;border-top:1px solid var(--line);opacity:.38;transition:opacity .5s}
.steps li.on{opacity:1}
.steps li .num{grid-row:span 2;font:400 20px var(--serif);font-style:italic;color:var(--faint)}
.steps li.on .num{color:var(--lime)}
.steps h3{font:500 17px var(--sans)}
.steps p{color:var(--dim);font-size:15px}
@media (max-width:860px){.process{grid-template-columns:1fr}.proc-canvas{aspect-ratio:1.3}}

/* race */
.race-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:34px}
.replay{border:1px solid var(--line);background:none;border-radius:999px;padding:9px 16px;font:500 12px var(--mono);letter-spacing:.06em;color:var(--dim);cursor:pointer}
.replay:hover{color:var(--lime);border-color:var(--lime)}
.lanes{display:grid;gap:14px;margin-top:26px}
.lane{border:1px solid var(--line);border-radius:22px;background:#000;overflow:hidden}
.lane-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lane-head b{font-weight:500}
.tally{margin-left:auto;font:400 14px var(--mono);color:var(--dim)}
.tally b{font:500 22px var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.lane-m .tally b{color:var(--lime)}
.lane canvas{width:100%;height:clamp(200px,26vw,320px)}
.spend{display:grid;grid-template-columns:auto auto 1fr;gap:14px;align-items:center;padding:4px 4px 0}
.spend b{font:500 18px var(--mono);font-variant-numeric:tabular-nums}
.spend-bar{height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.spend-bar i{display:block;height:100%;width:0;background:var(--ink)}
.film{margin-top:64px;display:grid;gap:14px}
.film-box{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#000;aspect-ratio:16/9}
.film-box video{width:100%;height:100%;object-fit:cover}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:12px 20px 12px 14px;border-radius:999px;border:0;background:rgba(242,242,242,.92);color:#000;font:500 14px var(--sans);cursor:pointer;transition:transform .3s var(--ease),opacity .3s}
.film-play span{width:0;height:0;border-left:10px solid #000;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:6px}
.film-play:hover{transform:translate(-50%,-50%) scale(1.04)}
.film-box.playing .film-play{opacity:0;pointer-events:none}
.film figcaption{color:var(--dim);font-size:15px;max-width:70ch}
.film figcaption b{color:var(--ink);font-weight:500}

/* wall */
.wall-sec h2{max-width:22ch}
.wall{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(88px,9vw,140px),1fr));gap:2px;padding:0 2px}
.wall .t{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0a0a;opacity:0;transform:scale(.92);transition:opacity .6s,transform .6s var(--ease)}
.wall .t.in{opacity:1;transform:none}
.wall .t img,.wall .t video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wall .t video{opacity:0;transition:opacity .3s}
.wall .t.live video{opacity:1}
.wall .t.live{outline:1px solid var(--lime);z-index:1}

/* words */
.quotes{display:grid;gap:clamp(40px,6vw,80px);margin-top:36px}
.q blockquote{margin:0;font:400 clamp(28px,4.2vw,56px)/1.12 var(--serif);letter-spacing:-.015em;max-width:24ch;text-wrap:balance}
.q blockquote::before{content:"\201C";color:var(--lime)}
.q blockquote::after{content:"\201D";color:var(--lime)}
.q p{margin-top:16px}

/* method */
.method{padding-bottom:40px}
.method-list{margin:16px 0 0;padding-left:20px;display:grid;gap:8px;font:400 12.5px/1.55 var(--mono);color:var(--faint);max-width:110ch}
.method-list b{color:var(--dim);font-weight:500}

/* close */
.close{position:relative;margin-top:clamp(80px,10vw,140px);min-height:92svh;display:grid;align-items:center;overflow:hidden;border-top:1px solid var(--line)}
.net-close{opacity:.7}
.close-in{position:relative;z-index:1;width:100%;display:grid;gap:40px;padding-top:80px;padding-bottom:80px}
.close::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 80% at 25% 55%,rgba(3,3,3,.92) 20%,rgba(3,3,3,.5) 60%,rgba(3,3,3,0))}
.close-line{font:400 clamp(44px,7.5vw,112px)/1.02 var(--serif);letter-spacing:-.03em}
.lockups{display:flex;align-items:center;gap:clamp(16px,3vw,34px);flex-wrap:wrap}
.lk-tbc{height:clamp(40px,5vw,64px);width:auto}
.lk-m{height:clamp(14px,1.7vw,22px);width:auto}
.lockups .x{font:400 18px var(--mono)}
.sign{display:flex;gap:16px;align-items:center}
.sign svg{width:34px;height:34px;fill:var(--ink);flex:none}
.sign div{display:grid;font-size:14px;line-height:1.45}
.sign b{font-weight:500}
.sign span,.sign a{color:var(--faint);text-decoration:none}
.sign a:hover{color:var(--lime)}
/* v2 (29 Oct): one-column essay, film, subheads, two horizons, the mischief 1 lockup */
.essay{display:grid;gap:18px;max-width:68ch;color:var(--dim);font-size:clamp(16px,1.35vw,19px)}
.essay b{font-weight:500}
.labday{padding-top:clamp(40px,6vw,90px)}
.labday .film{margin-top:34px}
.film-box.failed::after{content:"This film could not play here. Try Safari or Chrome.";position:absolute;inset:auto 0 18px;text-align:center;color:var(--dim);font-size:14px}
.sub{max-width:62ch;color:var(--dim);font-size:clamp(16px,1.35vw,19px);margin-top:14px}
.horizons.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.horizons.two{grid-template-columns:1fr}}
.lk-m1{height:clamp(22px,2.6vw,34px);width:auto}
.seqs{padding-top:clamp(40px,6vw,90px)}
.seq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:34px}
@media (max-width:760px){.seq-grid{grid-template-columns:1fr}}
.seq{display:grid;gap:10px}
.seq video{width:100%;aspect-ratio:16/9;border-radius:16px;border:1px solid var(--line);background:#000;object-fit:cover}
.seq figcaption{color:var(--dim);font-size:14px}
.seq figcaption b{color:var(--ink);font-weight:500}
.labday .film,.seq{margin:0}
.labday .film{margin-top:34px}
/* wall v2: two labelled sets */
.wall{display:block}
.wall-lab{padding:0 clamp(16px,4vw,56px);margin:26px 0 10px;color:var(--dim)}
.wall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(88px,9vw,140px),1fr));gap:2px;padding:0 2px}
/* v3 (Ana): one weight in headlines, no highlights; the benchmark source sits under the impact headline */
h2 b{font-weight:inherit}
.bench{max-width:78ch;margin-top:16px}
.lk-m1{height:clamp(28px,3.4vw,44px)}