/* ANUJ OJHA — v3 redesign (2 Oct 2026)
   One still ground, everything else moves.

   THE RULES THIS FILE OBEYS (from the audit of the current site):
   · only transform and opacity animate. No width/height/left/top/filter per frame.
   · no backdrop-filter anywhere (the capsule's 14px blur re-ran on every scroll frame).
   · no permanent will-change (his crystal-clear rule).
   · pinned moments are position:sticky - the compositor moves them, not JS.
   · one accent family besides cobalt, chosen live (?a=), and it means STATE:
     live, merged, passing. Never decoration. */

@font-face{font-family:G;src:url(/fonts/geist/Geist-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:GM;src:url(/fonts/geist/GeistMono-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:TH;src:url(/fonts/thunder/Thunder-BlackLC.woff2) format('woff2');font-weight:900;font-display:swap}

:root{
  /* grid: his 12 columns on a 5.2vw margin */
  --m:5.2vw; --gap:1.2vw; --col:calc((100vw - 2*var(--m) - 11*var(--gap))/12);
  /* ground + ink */
  --paper:#F4F5F7; --night:#0B0C0E; --ink:#0d0f14; --snow:#F2F3F5;
  --mute-p:#545963; --mute-n:rgba(242,243,245,.64); --hair-p:rgba(13,15,20,.14); --hair-n:rgba(242,243,245,.16);
  /* cobalt family (measured): deep on paper 8.63:1, field, night 6.26:1 */
  --deep:#0a22c8; --cob:#2f6bff; --nite:#5b8cff;
  /* the second accent - set from ?a= by v3.js; phosphor is the default proposal */
  --acc:#3DFF9A; --acc-ink:#0d0f14;
  /* type scale - every size also capped by height, because his screen is 2.10:1 */
  --t-mega:min(15.5vw,29vh); --t-xl:min(8.6vw,15.5vh); --t-l:min(5.6vw,10.2vh); --t-m:clamp(22px,2.5vw,42px);
  --t-b:clamp(14px,1.1vw,18px); --t-s:clamp(12px,.92vw,15px); --t-xs:clamp(9.5px,.72vw,11.5px);
  --ez:cubic-bezier(.19,1,.22,1); --ez2:cubic-bezier(.65,0,.35,1);
}
/* tablets (701–1100 px, 12 Oct): the vw sizes sit on their floors there, so reading text gets a tablet floor of its own */
@media (min-width:701px) and (max-width:1100px){ :root{--t-b:16px;--t-s:14px;--t-xs:10.5px} }
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:G,system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--acc);color:var(--acc-ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── the still ground ───────────────────────────────────────────────── */
#ground{position:fixed;inset:0;z-index:-1;background:var(--paper)}
main{position:relative}

/* ── shared furniture ───────────────────────────────────────────────── */
.sec{position:relative;padding:0 var(--m)}
[data-tone=night]{color:var(--snow)}
[data-tone=accent]{color:var(--acc-ink)}
.mono{font-family:GM,monospace;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.mute{color:var(--mute-p)} [data-tone=night] .mute{color:var(--mute-n)}
.meta{display:flex;justify-content:space-between;align-items:baseline;padding:5.4vh 0 1.6vh;border-bottom:1px solid var(--hair-p)}
[data-tone=night] .meta{border-color:var(--hair-n)} [data-tone=accent] .meta{border-color:rgba(13,15,20,.22)}
.meta b{font-weight:600;margin-right:.9em}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
/* the heavy / light split, locked: one weight pair everywhere it appears */
.split{font-weight:800;letter-spacing:-.05em;line-height:.95}
.split span{font-weight:250}
.dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--acc);vertical-align:.05em;margin-right:.5em;box-shadow:0 0 0 1px rgba(13,15,20,.25)}

/* reveal: one class, transform + opacity only */
[data-in]{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s var(--ez),transform 1.1s var(--ez);transition-delay:var(--d,0ms)}
[data-in].in{opacity:1;transform:none}
/* masked line rise */
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block;transform:translate3d(0,105%,0);transition:transform 1.1s var(--ez);transition-delay:var(--d,0ms)}
.in .ln>span,.ln.in>span{transform:none}

/* crop marks: four squares on a plate's corners (after Fiddle's frames) */
.crop{position:relative}
.crop::before,.crop::after,.crop>.cm::before,.crop>.cm::after{content:"";position:absolute;width:7px;height:7px;background:currentColor;z-index:3}
.crop::before{left:-11px;top:-11px}.crop::after{right:-11px;top:-11px}
.crop>.cm::before{left:-11px;bottom:-11px}.crop>.cm::after{right:-11px;bottom:-11px}
#me-fig>.cm{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/10;pointer-events:none}   /* the lower marks sit on the frame's corners */

html.loading{overflow:hidden}

/* ── HERO: the window ────────────────────────────────────────────────
   A dark plate set into the paper (his saved references: inset plate,
   occluding object, micro-caps anchors). The field lives inside it; the
   name sits in a notch cut out of its corner. Geometry comes from v3.js as
   a clip-path, so on scroll the window opens to the full screen. */
#s-hero{height:200vh;padding:0}
.stick{position:sticky;top:0;height:100vh;overflow:hidden}
.field{position:absolute;inset:0;width:100%;height:100%;display:block}
#h-win{position:absolute;inset:0;background:#05070D;clip-path:var(--win,inset(50% 50% 50% 50%))}
.w-tag{position:absolute;left:calc(var(--wl,0px) + 1.6vw);top:calc(var(--wt,0px) + 2.6vh);color:rgba(242,243,245,.6);opacity:calc(1 - var(--e,0)*2.2)}
.w-lab{position:absolute;right:calc(100vw - var(--wr,0px) + 1.6vw);bottom:calc(100vh - var(--wb,0px) + 2.4vh);display:flex;gap:2.2vw;color:rgba(242,243,245,.78);padding:7px 11px;border-radius:999px;background:rgba(5,7,13,.78);opacity:calc(1 - var(--e,0)*2.2)}
.w-cta{position:absolute;z-index:4;right:calc(100vw - var(--wr,0px) + 1.4vw);top:calc(var(--wt,0px) + 2vh);display:inline-flex;align-items:center;gap:.6em;
  padding:12px 18px;border-radius:999px;background:var(--snow);color:var(--ink);font:600 var(--t-xs)/1 GM;letter-spacing:.14em;text-transform:uppercase;
  opacity:calc(1 - var(--e,0)*2.2);transform:translate3d(0,calc(var(--e,0)*-4vh),0)}
#h-rail,#h-lc,#h-nmw{transform:translate3d(0,calc(var(--e,0) * -9vh),0);opacity:calc(1 - var(--e,0)*1.6)}
#h-rail{position:absolute;left:var(--m);top:5.4vh;width:calc(var(--wl0,40vw) - var(--m) - 2.4vw);display:flex;justify-content:space-between;
  padding-bottom:1.6vh;color:var(--mute-p)}
#h-rail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair-p);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.4s var(--ez) .2s}
.live #h-rail::after{transform:none}
#h-lc{position:absolute;left:var(--m);top:15.5vh;width:calc(var(--wl0,40vw) - var(--m) - 2.4vw)}
#h-hl,#h-tag{visibility:hidden}
.live #h-hl,.live #h-tag{visibility:visible}
#h-hl .l1{display:block;font:800 min(4.9vw,9.4vh)/.9 G;letter-spacing:-.055em}
#h-hl .l2{display:block;margin-top:.5vh;font:250 min(4.9vw,9.4vh)/.94 G;letter-spacing:-.05em}
#h-hl em{font-style:normal;color:var(--cob);font-weight:400}
#h-hl .cur{display:inline-block;width:.42em;height:.085em;background:var(--cob);vertical-align:.08em;margin-left:.05em}
#h-note{margin-top:2.6vh;font:400 var(--t-b)/1.45 G;color:var(--mute-p)}
#h-nmw{position:absolute;left:var(--m);bottom:var(--nb,6vh);overflow:hidden;pointer-events:none;line-height:1}
#h-nm{display:inline-block;white-space:nowrap;font:900 200px/1 TH;letter-spacing:.018em;color:var(--ink)}
#h-nm i{display:inline-block;font-style:normal;transform:translate3d(0,108%,0) rotate(5deg)}
.live #h-nm i{transform:none;transition:transform 1.3s var(--ez) var(--nd,0ms)}
.hero-in{opacity:0;transform:translate3d(0,14px,0);transition:opacity .9s var(--ez),transform 1s var(--ez);transition-delay:var(--d,0ms)}
.live .hero-in{opacity:1;transform:none}

/* ── ABOUT: a card that slides over the open window ──────────────────
   The colour print (his original - white border, tilt, tape, caption, dot)
   is pinned OVER the type, so it occludes the end of the lines. */
#s-about{height:100vh;padding:0}
.card{position:relative;height:100vh;overflow:hidden;background:var(--paper);padding:0 var(--m)}
#a-big{position:relative;z-index:1;margin-top:4.6vh;font:400 min(11.4vw,17.6vh)/.84 G;letter-spacing:-.066em;white-space:nowrap}
#a-big .l2{padding-left:calc(2*(var(--col) + var(--gap)))}
#a-big .l3{padding-left:calc(4*(var(--col) + var(--gap)))}
#a-big .l3 span{color:var(--deep);font-weight:500}
/* the print, as it was in about.js: 250u wide, 3.5deg, top-right beside the type */
#s-about{--u:min(calc(100vw / 1440),calc(100vh / 900))}
#a-print{position:absolute;z-index:3;left:var(--apx,70vw);top:var(--apy,14vh);width:calc(250*var(--u));margin:0;transform:rotate(3.5deg)}
#a-print .fr{position:relative;background:#fff;padding:calc(9*var(--u)) calc(9*var(--u)) calc(40*var(--u));opacity:0;
  box-shadow:0 calc(30*var(--u)) calc(60*var(--u)) calc(-20*var(--u)) rgba(10,10,11,.35),0 2px calc(6*var(--u)) rgba(10,10,11,.12)}
#a-print img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
#a-print .cap{position:absolute;left:calc(12*var(--u));bottom:calc(14*var(--u));font:500 max(11px,calc(11*var(--u)))/1 GM;letter-spacing:.08em;color:var(--ink)}
#a-print .pdot{position:absolute;right:calc(12*var(--u));bottom:calc(14*var(--u));width:calc(8*var(--u));height:calc(8*var(--u));border-radius:50%;background:var(--acc);box-shadow:0 0 0 1px rgba(13,15,20,.2)}
#a-print .tape{position:absolute;top:calc(-13*var(--u));left:36%;width:calc(84*var(--u));height:calc(26*var(--u));background:rgba(238,237,232,.82);transform:rotate(-7deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
#a-print.in .fr{animation:drop 1.15s cubic-bezier(.22,1.35,.4,1) .35s both}
@keyframes drop{from{opacity:0;transform:translate3d(0,-6vh,0) rotate(6deg)}to{opacity:1;transform:none}}
#a-low{position:absolute;left:var(--m);right:var(--m);bottom:6vh;align-items:end}
#a-say{grid-column:1/span 4}
#a-say p{font:400 clamp(18px,1.75vw,28px)/1.18 G;letter-spacing:-.022em;max-width:20ch}
#a-say p b{font-weight:600;background:linear-gradient(transparent 62%,var(--acc) 62%,var(--acc) 92%,transparent 92%)}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:2.8vh;padding:13px 18px;border-radius:999px;background:var(--ink);color:var(--snow);font:600 var(--t-s)/1 G}
.btn:active{transform:scale(.97)}
#a-det{grid-column:5/span 4}
#a-det .r{display:grid;grid-template-columns:8.6em 1fr;gap:1em;padding:1.25vh 0;border-top:1px solid var(--hair-p)}
#a-det .r:first-child{border-top-color:var(--ink)}
#a-det .r:last-child{border-bottom:1px solid var(--hair-p)}
#a-det dd{font:450 var(--t-s)/1.35 G;text-align:right}
#a-stats{grid-column:9/span 4;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
#a-stats div{padding:1.4vh 0 1.6vh;border-bottom:1px solid var(--hair-p)}
#a-stats div:nth-child(odd){border-right:1px solid var(--hair-p);padding-right:1vw}
#a-stats div:nth-child(even){padding-left:1.2vw}
#a-stats b{display:block;font:500 min(4.4vw,8vh)/.85 G;letter-spacing:-.06em}
#a-stats span{display:block;margin-top:1vh}
.card-top{border-radius:2.2vw 2.2vw 0 0;box-shadow:0 -40px 90px -30px rgba(0,0,0,.6)}
#s-do{background:var(--night)}

/* ── 01.2 WHAT I DO ─────────────────────────────────────────────────── */
#s-do{padding-bottom:18vh}
#d-body{margin-top:6vh;align-items:start}
#d-l{grid-column:1/span 4;position:sticky;top:12vh}
#d-l h2{font:400 var(--t-xl)/.86 G;letter-spacing:-.055em}
#d-l .ix{display:block;margin:2.4vh 0 3vh;color:var(--nite)}
#d-l p{font:400 var(--t-s)/1.55 G;color:var(--mute-n);max-width:34ch;text-indent:3em}
#d-cts{display:grid;grid-template-columns:1fr 1fr;gap:1.4vw;margin-top:4vh;padding-top:2.2vh;border-top:1px solid var(--hair-n)}
#d-cts b{display:block;font:500 min(4.2vw,7.6vh)/.85 G;letter-spacing:-.06em}
#d-cts b.a{color:var(--acc)}
#d-cts span{display:block;margin-top:1.2vh;font:400 var(--t-xs)/1.45 G;color:var(--mute-n);max-width:20ch}
#d-r{grid-column:6/span 7}
.dg{margin-bottom:9vh}
.dg .hd{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:1.8vh;border-bottom:1px solid var(--snow)}
.dg h3{font:450 var(--t-m)/1 G;letter-spacing:-.03em}
.dg .hd .mono{color:var(--nite)}
/* text with progress: a row is dim until it crosses the reading line */
.dr{display:grid;grid-template-columns:3.6em 1fr auto;align-items:baseline;padding:1.9vh 0;border-bottom:1px solid var(--hair-n);
  opacity:calc(.22 + .78 * var(--r,0));transform:translate3d(calc((1 - var(--r,0)) * 1.4vw),0,0)}
.dr i{font-style:normal;font:500 var(--t-xs)/1 GM;color:var(--mute-n)}
.dr span{font:400 var(--t-b)/1.3 G}
.dr u{text-decoration:none;color:var(--mute-n)}

/* ── HOW IT GETS MADE ───────────────────────────────────────────────── */
#s-made{min-height:118vh;padding-bottom:10vh;display:flex;flex-direction:column}
#s-made .meta{border-color:rgba(13,15,20,.22)}
#m-top{display:flex;flex-wrap:wrap;gap:1.4vh 2vw;align-items:baseline;padding:3vh 0 0}
#m-top .s{font:400 var(--t-s)/1.4 G}
#m-top .s b{font-weight:600}
#m-mf{margin:auto 0;padding:10vh 0;font:500 min(6vw,11vh)/1.08 G;letter-spacing:-.04em;max-width:22ch}
#m-mf .w{display:inline-block;opacity:calc(.16 + .84 * var(--w,0));transition:opacity .2s linear}
#m-mf mark{background:var(--ink);color:var(--acc);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#m-mf mark .w{opacity:1}
#m-nx{display:flex;justify-content:space-between;align-items:center;padding-top:2vh;border-top:1px solid rgba(13,15,20,.22)}
#m-nx .g{font:500 var(--t-m)/1 G;letter-spacing:-.03em}

/* ── METHOD — three stages, one sticky stage ───────────────────────── */
#s-method{height:auto;padding:0}
#s-method .stick{position:relative;height:auto;min-height:100vh;padding:0 var(--m) 12vh;display:flex;flex-direction:column;overflow:visible}
#me-body{flex:1;align-items:center;margin-top:2vh}
#me-l{grid-column:1/span 5}
#me-l h2{font-size:var(--t-l)}
#me-l h2 .row{display:block;transition:opacity .5s var(--ez),font-weight .4s}
#me-l .lost{margin-top:3vh;font:400 var(--t-b)/1.4 G;color:var(--mute-p)}
#me-l .lost b{color:var(--ink);font-weight:600}
#me-steps{display:flex;gap:1.6vw;margin-top:5vh}
#me-steps span{padding-top:1.2vh;border-top:2px solid var(--hair-p);flex:1;transition:border-color .4s,color .4s;color:var(--mute-p)}
#me-steps span.on{border-color:var(--ink);color:var(--ink)}
#me-fig{grid-column:7/span 6;color:var(--ink)}
#me-fig .fr{position:relative;aspect-ratio:16/10;background:#FBFBFC;box-shadow:0 0 0 1px var(--hair-p);overflow:hidden}
.stg{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ez)}
.stg.on{opacity:1}
#stg-sk svg{width:100%;height:100%}
#stg-sk path,#stg-sk rect{fill:none;stroke:#2a2d33;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:var(--len,600);stroke-dashoffset:calc(var(--len,600) * (1 - var(--s,0)));transition:stroke-dashoffset 1.5s cubic-bezier(.19,1,.22,1)}
#stg-sk :nth-child(2){transition-delay:.12s}#stg-sk :nth-child(3){transition-delay:.24s}#stg-sk :nth-child(4){transition-delay:.36s}#stg-sk :nth-child(5){transition-delay:.48s}#stg-sk :nth-child(6){transition-delay:.6s}#stg-sk :nth-child(7){transition-delay:.72s}#stg-sk :nth-child(8){transition-delay:.84s}
#stg-bd .cl{transition:opacity .25s}
#stg-bd{background:#0d0f14;color:#C9CDD6;padding:4%;font:400 clamp(9px,.78vw,12.5px)/1.65 GM}
#stg-bd .cl{display:block;white-space:pre;opacity:0}
#stg-bd .cl.on{opacity:1}
#stg-bd .k{color:#7aa2ff}#stg-bd .s{color:#9fe8c4}#stg-bd .c{color:#5b606b}
/* Ship = the landing as it is live now (layout D, centred), drawn to the frame's own width (14 Oct) */
#stg-sh{background:var(--paper);container-type:size;text-align:center}
#stg-sh .gl{position:absolute;left:0;right:0;bottom:0;height:60%;margin:0;overflow:hidden;font:400 1.9cqw/1.7cqw GM;color:var(--cob);opacity:.42;white-space:pre;text-align:center}
#stg-sh .mc{position:absolute;right:5%;top:4.5%;font:600 1.05cqw/1 GM;letter-spacing:.14em}
#stg-sh .tg{position:absolute;left:0;right:0;top:23%;font:600 .95cqw/1 GM;letter-spacing:.2em;opacity:.72}
#stg-sh .nm{position:absolute;left:0;right:0;top:28.5%;font:900 9.6cqw/.86 TH;letter-spacing:.018em}
#stg-sh .hl{position:absolute;left:0;right:0;top:53%;font:300 2.45cqw/1 G;letter-spacing:-.04em;text-shadow:0 0 1.2cqw var(--paper),0 0 .4cqw var(--paper)}
#stg-sh .hl b{font-weight:800}
#stg-sh .hl em{font-style:normal;color:var(--cob);font-weight:400}
#stg-sh .sb{position:absolute;left:0;right:0;top:60.5%;font:400 1.15cqw/1 G;opacity:.75;text-shadow:0 0 .8cqw var(--paper)}
#me-fig .cap{display:flex;justify-content:space-between;padding-top:12px}
#me-fig .big{margin-top:2.6vh;font:300 var(--t-m)/1 G;letter-spacing:-.03em;min-height:1.2em}

/* ── RECORD — three exhibits, staggered ────────────────────────────── */
#s-record{padding-bottom:16vh}
#r-head{margin-top:6vh;align-items:end}
#r-head h2{grid-column:1/span 6;font-size:var(--t-xl)}
#r-head p{grid-column:8/span 5;font:400 var(--t-s)/1.55 G;color:var(--mute-p)}
#r-ex{margin-top:9vh;align-items:start}
.rx{grid-column:span 4;padding-top:1.4vh;border-top:1px solid var(--ink)}   /* its drift is set per card by v3.js (translate), never via a section-wide variable */
.rx:nth-child(1){--par:6vh}.rx:nth-child(2){--par:16vh;margin-top:10vh}.rx:nth-child(3){--par:26vh;margin-top:20vh}
.rx .tp{display:flex;justify-content:space-between}
.rx .fig{margin:3vh 0 1.2vh;font:800 min(9vw,16vh)/.82 G;letter-spacing:-.07em}
.rx .sub{font:500 var(--t-s)/1 G}
.rx h3{margin-top:3vh;font:600 var(--t-b)/1.3 G}
.rx p{margin-top:1vh;font:400 var(--t-s)/1.5 G;color:var(--mute-p);max-width:36ch}
.rx .lk{display:inline-block;margin-top:1.6vh;font:600 var(--t-xs)/1 GM;letter-spacing:.08em}
/* 04 · hackathons — the board, in the system's own terms (11 Oct): a flat deep-cobalt block (the cobalt family
   carries this site: the water, the glyph field, "code."), square like every ground here, snow type, mono labels,
   white doodles; the phosphor accent only where it already means something on this site — "live".
   The passes are paper with the Work cards' hard navy edge. Motion: hack.js (pointer depth, hover lift, scroll drift).
   Everything else arrives once (data-in) and then idles quietly (the star twinkles, the arrow bobs). */
#r-hack{position:relative;margin-top:14vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);
  padding:8vh 4.2vw 9vh;background:var(--deep);color:var(--snow);overflow:hidden}
#r-hack::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(60% 80% at 78% 40%,rgba(91,140,255,.35),transparent 70%)}   /* a soft light behind the passes, nite on deep */
#r-hack .hk-l{grid-column:1/span 5;position:relative;align-self:center}
#r-hack .hk-tp{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,243,245,.7)}
#r-hack .hk-tp b{color:var(--snow);margin-right:.5em}
#r-hack .hk-t{position:relative;display:inline-block;margin-top:2.4vh;font:800 var(--t-l)/.9 G;letter-spacing:-.06em}
#r-hack .hk-t span{color:var(--acc)}
#r-hack .hk-s{margin-top:3.4vh;max-width:28ch;font:400 clamp(15px,1.25vw,20px)/1.4 G;letter-spacing:-.015em;color:rgba(242,243,245,.82)}
/* doodles: white hand-drawn strokes that draw themselves on, then idle */
#r-hack .dd{position:absolute;fill:none;stroke:var(--snow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#r-hack .dd path{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.1s var(--ez2) .9s}
#r-hack.in .dd path{stroke-dashoffset:0}
#r-hack .dd-line{left:-1%;bottom:-.34em;width:102%;height:.3em;opacity:.9}
#r-hack .dd-star{right:-.62em;top:-.32em;width:.36em;height:.36em;fill:var(--snow);stroke:none;transform:scale(0) rotate(-30deg);transition:transform .6s cubic-bezier(.3,1.7,.5,1) 1.5s}
#r-hack.in .dd-star{transform:scale(1) rotate(0)}
#r-hack.in.live .dd-star{animation:hk-tw 3.4s ease-in-out 2.4s infinite}
#r-hack .dd-arrow{right:-5.5vw;bottom:-6vh;width:9.5vw;height:5.4vw;opacity:.9}
#r-hack.in.live .dd-arrow{animation:hk-bob 2.8s ease-in-out 3s infinite}
#r-hack .dd-arrow path:nth-child(2){transition-delay:1.7s;stroke-dasharray:60;stroke-dashoffset:60}
#r-hack.in .dd-arrow path:nth-child(2){stroke-dashoffset:0}
@keyframes hk-tw{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.62) rotate(45deg)}}
@keyframes hk-bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(.5vw,-.6vh,0)}}
/* stickers: snow and ink by default; the accent only on "still live" */
#r-hack .stk{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font:600 var(--t-xs)/1.05 GM;letter-spacing:.1em;text-transform:uppercase;
  color:var(--deep);background:var(--snow);transform:scale(0) rotate(var(--r,0deg));rotate:0deg;
  transition:transform .65s cubic-bezier(.3,1.65,.5,1) var(--sd,1.2s),rotate .6s var(--ez)}
#r-hack.in .stk{transform:scale(1) rotate(var(--r,0deg))}
#r-hack .stk-pill{position:relative;display:inline-flex;margin-top:3.2vh;padding:9px 14px;border-radius:999px;--r:-5deg;--sd:1.3s}
#r-hack .stk-dot{right:-16px;bottom:-22px;width:78px;height:78px;border-radius:50%;background:var(--acc);color:var(--acc-ink);--r:14deg;--sd:1.15s}
#r-hack .stk-burst{right:-18px;bottom:-26px;width:92px;height:92px;--r:-12deg;--sd:1.35s;
  clip-path:polygon(50% 0,59% 14%,75% 7%,78% 24%,95% 25%,88% 41%,100% 50%,88% 59%,95% 75%,78% 76%,75% 93%,59% 86%,50% 100%,41% 86%,25% 93%,22% 76%,5% 75%,12% 59%,0 50%,12% 41%,5% 25%,22% 24%,25% 7%,41% 14%)}
#r-hack .tkw.on .stk{rotate:-16deg}                                   /* the sticker on the held pass turns */
/* the passes */
#r-hack .hk-r{grid-column:6/span 7;position:relative;min-height:76vh}
#r-hack .tkw{position:absolute;width:47%;opacity:0;transform:translate3d(0,9vh,0) rotate(0deg);
  filter:drop-shadow(0 7px 0 #06168a) drop-shadow(0 22px 26px rgba(2,8,60,.32));
  transition:opacity .8s var(--ez),transform 1.2s cubic-bezier(.2,1.25,.4,1)}
#r-hack.live .tkw{will-change:translate}
#r-hack .tk{position:relative;padding:2.4vh 1.6vw 2.6vh;border-radius:14px;background:var(--paper);color:var(--ink);transition:opacity .45s var(--ez);
  -webkit-mask:radial-gradient(circle at 0 var(--cut,47%),transparent 11px,#000 11.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% var(--cut,47%),transparent 11px,#000 11.5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 var(--cut,47%),transparent 11px,#000 11.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% var(--cut,47%),transparent 11px,#000 11.5px) right/51% 100% no-repeat}
#r-hack.hov .tkw:not(.on) .tk{opacity:.8}                              /* the other pass steps back */
#r-hack .tk1{left:0;top:2vh;transition-delay:.25s}
#r-hack .tk2{right:0;top:11vh;transition-delay:.45s}
#r-hack .tk3{left:22%;top:41vh;transition-delay:.65s}
#r-hack .stk-3{right:-14px;bottom:-20px;--r:-9deg;--sd:1.55s}
#r-hack.in .tk1{opacity:1;transform:rotate(-4deg)}
#r-hack.in .tk2{opacity:1;transform:rotate(3.5deg)}
#r-hack.in .tk3{opacity:1;transform:rotate(-1.5deg)}
#r-hack .tk-top{display:flex;justify-content:space-between;gap:1em;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--mute-p)}
#r-hack .tk-ev{margin-top:1.4vh;font:600 clamp(17px,1.45vw,22px)/1.15 G;letter-spacing:-.02em}
#r-hack .tk-cut{margin:2.4vh -1.6vw;border-top:2px dashed rgba(13,15,20,.2)}
#r-hack .tk-k{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--deep)}
#r-hack .tk-p{margin-top:.8vh;font:800 min(3.3vw,6vh)/.95 G;letter-spacing:-.055em}
#r-hack .tk-d{margin-top:1.2vh;font:400 var(--t-s)/1.45 G;color:var(--mute-p)}
#r-hack .lk{display:inline-block;margin-top:1.6vh;font:600 var(--t-xs)/1 GM;letter-spacing:.08em}
.rx a.lk,#r-hack a.lk{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .3s}   /* proof links (13 Oct) */
.rx a.lk:hover,#r-hack a.lk:hover,.rx a.lk:focus-visible,#r-hack a.lk:focus-visible{text-decoration-color:currentColor}
@media (max-width:900px){
  #r-hack{grid-template-columns:1fr;margin-top:11vh;padding:5vh 6vw 7vh}
  #r-hack .hk-l,#r-hack .hk-r{grid-column:1/-1}
  #r-hack .hk-t{font-size:13vw}
  #r-hack .hk-r{min-height:0;margin-top:5vh;display:flex;flex-direction:column;gap:5vh}
  #r-hack .tkw{position:relative;width:auto;left:auto;right:auto;top:auto}
  #r-hack.in .tk1{transform:rotate(-2deg)} #r-hack.in .tk2{transform:rotate(2deg)} #r-hack.in .tk3{transform:rotate(-1deg)}
  #r-hack .tk{padding:2.4vh 5vw 2.6vh} #r-hack .tk-cut{margin:2.4vh -5vw}
  #r-hack .tk-p{font-size:11vw}
  #r-hack .dd-arrow{display:none}
}
@media (prefers-reduced-motion:reduce){ #r-hack .dd-star,#r-hack .dd-arrow{animation:none!important} }
#r-study{margin-top:10vh;padding-top:1.6vh;border-top:1px solid var(--hair-p);font:400 var(--t-s)/1 G}
#r-study b{font-weight:600;margin-right:.6em}

/* ── CONTACT ────────────────────────────────────────────────────────── */
#s-contact{padding:0}
#s-contact .stick{position:sticky;top:0;height:100vh;margin-bottom:-100vh}
#c-ui{position:relative;z-index:2;padding:0 var(--m) 3vh;min-height:150vh;display:flex;flex-direction:column}
#c-ui .meta{border-color:var(--hair-n)}
#c-hl{margin-top:14vh;font:250 var(--t-mega)/.84 G;letter-spacing:-.065em}
#c-sub{margin-top:2.4vh;font:450 var(--t-m)/1.1 G;letter-spacing:-.025em}
#c-sub span{opacity:.55}
#c-low{margin-top:auto;padding-top:14vh;align-items:end}
#c-em{grid-column:1/span 5}
#c-em button{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.3em .8em;margin-top:1.4vh;font:600 var(--t-l)/1 G;letter-spacing:-.04em;border-bottom:2px solid var(--snow);padding-bottom:.08em;
  font-size:min(var(--t-l),calc((100vw - 2*var(--m))*5/12/12.6))}   /* the address fits its own column (13 Oct: the real one is 21 characters) */
#c-em button i{font:500 var(--t-xs)/1 GM;letter-spacing:.1em;font-style:normal;opacity:.7}
#c-em .ok{margin-left:1em;opacity:0;transition:opacity .3s}#c-em .ok.on{opacity:1}
#c-ls{grid-column:7/span 6;list-style:none}
#c-em,#c-ls,#c-nav,#c-foot{text-shadow:0 0 14px var(--night),0 0 4px var(--night),0 0 1px var(--night)}   /* the words stay clear of the glyph sea under them (11 Oct) */
#c-ls li{display:grid;grid-template-columns:9em 1fr auto;padding:1.6vh 0;border-top:1px solid var(--hair-n);font:450 var(--t-s)/1 G}
#c-ls li:last-child{border-bottom:1px solid var(--hair-n)}
#c-ls .k{font:500 var(--t-xs)/1 GM;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-n)}
#c-nav{display:flex;justify-content:space-between;margin-top:12vh;font:300 min(7vw,12.6vh)/.9 G;letter-spacing:-.055em}
#c-nav a{transition:opacity .3s}
#c-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10vh;margin-bottom:88px;padding-top:1.6vh;border-top:1px solid var(--hair-n)}

/* ── capsule: shows while scrolling, tucks away 1.2s after ─────────── */
#cap{position:fixed;left:50%;bottom:20px;max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;z-index:50;display:flex;gap:2px;padding:5px;border-radius:999px;background:var(--ink);
  transform:translate3d(-50%,160%,0);transition:transform .7s var(--ez),background .5s}
#cap.on{transform:translate3d(-50%,0,0)}
#cap button{padding:9px 12px 8px;border-radius:999px;font:500 12px/1 G;color:rgba(242,243,245,.6);transition:color .3s,background .3s}
#cap button.cur{background:var(--snow);color:var(--ink)}
#cap[data-tone=night],#cap[data-tone=accent]{background:var(--snow)}
#cap[data-tone=night] button,#cap[data-tone=accent] button{color:rgba(13,15,20,.62)}
#cap[data-tone=night] button.cur,#cap[data-tone=accent] button.cur{background:var(--ink);color:var(--snow)}

/* ── accent lab (review only; ?clean=1 hides it) ───────────────────── */
/* review-only accent switch: three dots in the top-right corner, names on hover/focus */
html.clean 
@media (prefers-reduced-motion:reduce){
  [data-in],.ln>span,.hero-in,#h-nm i{transition:none!important;opacity:1!important;transform:none!important}
}
@media (max-width:900px){
  /* open source on a phone or tablet: the story on top, the notes as a grid, the read-out off (no hover here) */
  #os .story{left:5vw!important;width:90vw!important;top:11vh!important;text-align:left!important;font-size:20px!important}
  #os .pt{width:21vw!important}
  #os .pt .cd{padding:.9vh 2vw .9vh!important}
  #os .pt .no{font-size:8px!important;margin-bottom:.35vh!important}
  #os .pt .tx{font-size:10px!important;line-height:1.15!important}
  #os .w1{top:24vh!important;font-size:31vw!important}
  #os .w2{top:78vh!important;left:4vw!important;font-size:10vw!important}
  #os .w3{top:78vh!important;left:51vw!important;font-size:10vw!important}
  #os .r1{top:76.2vh!important} #os .r2{top:92vh!important;left:4vw!important} #os .r3{top:92vh!important;left:51vw!important}
  #os .ro{display:none!important}
}
@media (max-width:900px){
  .grid{grid-template-columns:1fr} .grid>*{grid-column:1/-1!important}
  #d-l,#o-l{position:relative;top:0} #d-l{margin-bottom:7vh} .wp{grid-template-columns:1fr;width:84vw}
  .rx{--par:0vh!important;margin-top:4vh!important} #c-nav{font-size:9vw}
}

/* the window's furniture arrives with the hero, not during the load */
#s-hero:not(.live) .w-cta,#s-hero:not(.live) .w-lab,#s-hero:not(.live) #h-rail{opacity:0!important}
/* a one-time entrance; 'backwards' hands opacity back to the scroll afterwards */
#s-hero.live .w-cta,#s-hero.live .w-lab,#s-hero.live #h-rail{animation:fadeIn .9s var(--ez) .5s backwards}
@keyframes fadeIn{from{opacity:0}}
/* the original calm sea under the contact, at the original strength */
#f-contact{opacity:.42}

/* portrait: headline on top, the window under it, the name in its notch */
@media (max-aspect-ratio:4/5){
  #h-rail{top:3.2vh}
  #h-lc{top:9vh}
  #h-hl .l1,#h-hl .l2{font-size:min(9.6vw,6.2vh)}
  #h-note{margin-top:1.4vh}
  .w-tag{display:none}
  .w-lab span:first-child{display:none}
  .w-cta{padding:10px 14px}
  #cap button{padding:8px 9px 7px;font-size:11px}
    #c-nav{flex-wrap:wrap;gap:.1em .35em;font-size:11vw}
  #a-big{font-size:10.4vw;margin-top:3vh}
  #a-big .l2{padding-left:7vw} #a-big .l3{padding-left:20vw}
  #a-print{width:28vw}
  #a-print .fr{padding:1.8vw 1.8vw 7.4vw}
  #a-print .cap{left:2.6vw;bottom:2.6vw;font-size:8.5px} #a-print .pdot{right:2.6vw;bottom:2.8vw;width:1.8vw;height:1.8vw}
  #a-print .tape{width:16vw;height:5vw;top:-2.6vw}
}

/* ═══ ONE CONTINUOUS FLOW (6 Oct, from the buttermax study) ═══════════
   No sheet stacking: every section scrolls through at scroll speed and owns its ground.
   Holds live only inside the stories that need time (Tide's flood, Interlude, Work, Method). */
main>section{position:relative!important}
main>section[data-tone=paper]{background:var(--paper)}
main>section[data-tone=night]{background:var(--night)}
main>section[data-tone=accent]{background:var(--acc)}
#s-work{background:transparent!important}
/* main is its own layer ABOVE Tide's fixed canvases (z 1-3), moving or not; the hero section is a
   transparent scroll length, so it must not take the pointer from Tide's words underneath */
main{position:relative;z-index:5;transform-origin:50% 50%}
#s-hero{pointer-events:none}


/* KIT on narrow screens: the absolute desktop layout becomes one stacked flow */
@media (max-width:700px){
  #s-kit{height:auto!important}
  #s-kit>.o,#kt{position:relative!important;height:auto!important;padding:64px 5vw 56px!important}
  #kt .a{position:static!important;width:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
  #kt .hdr{margin-top:6px!important;font-size:10px!important}
  #kt .hd{margin-top:22px!important;white-space:normal!important;font-size:12.5vw!important}
  #kt .lede{margin-top:14px!important;font-size:15px!important}
  #kt .pl{margin-top:18px!important;gap:6px!important}
  #kt .pl button{padding:9px 12px!important;gap:6px!important}
  #kt .rd{height:auto!important;text-align:left!important;margin-top:12px!important}
  #kt .wall{margin-top:18px!important;grid-template-columns:repeat(6,1fr)!important;grid-template-rows:none!important;grid-auto-rows:66px!important}
  #kt .tile .nm{left:5px!important;bottom:5px!important;font-size:8px!important;max-width:calc(100% - 10px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #kt .tile[style*="span 1;"] .nm{display:none!important}
  #kt .tile .ct{right:5px!important;top:5px!important;font-size:8px!important}
  #kt .ft2{position:static!important;margin-top:14px!important;font-size:9px!important}
}

/* WORK on narrow screens: smaller cards, so the ring sits above the read-out instead of on it */
@media (max-width:700px){
  #wk .pc{width:27vw!important;padding:4px 4px 0!important;border-radius:10px!important}
  #wk .pc .ft{padding:6px 3px 7px!important;font-size:9px!important}
}

/* the journey thread: a cobalt hairline across the top that fills as you go */
#prog{position:fixed;left:0;right:0;top:0;height:2px;z-index:70;pointer-events:none}
#prog i{display:block;height:100%;background:#2F6BFF;transform-origin:0 50%;transform:scaleX(0)}

/* sound toggle (sound.js, 13 Oct) — a glass pill top right: a live wave line (the music's spectrum while it plays, a still
   line when off; cobalt / ice when on) and the word. Past the landing it folds to the wave alone (the size of the old round
   button, so pinned section labels stay clear) and opens on hover, focus, or for a moment after a toggle. Ink on paper,
   snow on night. The old round button with five dots read as a menu. */
#snd{--h:40px;position:fixed;top:16px;right:16px;z-index:60;display:flex;align-items:center;height:var(--h);padding:0 14px 0 11px;gap:9px;border:0;border-radius:999px;
  color:var(--ink);cursor:pointer;background:rgba(244,245,247,.62);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(13,15,20,.13),0 10px 28px -16px rgba(13,15,20,.45);
  transition:padding .5s var(--ez),gap .5s var(--ez),color .5s var(--ez),background .5s var(--ez),box-shadow .5s var(--ez),scale .35s cubic-bezier(.3,1.6,.5,1)}
#snd[hidden]{display:none}
#snd[data-tone=night]{color:var(--snow);background:rgba(16,17,20,.5);box-shadow:inset 0 0 0 1px rgba(242,243,245,.16),0 10px 28px -16px rgba(0,0,0,.7)}
#snd .wv{display:block;width:30px;height:18px;flex:none}
#snd .wv canvas{display:block;width:100%;height:100%}
#snd .lb{display:flex;gap:.5em;overflow:hidden;max-width:110px;font:600 10px/1 GM,monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:max-width .5s var(--ez),opacity .35s var(--ez)}
#snd .st{position:relative;display:inline-grid;min-width:3.1em}
#snd .st i{grid-area:1/1;font-style:normal;opacity:0;transform:translate3d(0,70%,0);transition:opacity .3s var(--ez),transform .45s var(--ez)}
#snd .st .s-off{opacity:.5;transform:none}
#snd.on .st .s-off,#snd.ld .st .s-off{opacity:0;transform:translate3d(0,-70%,0)}
#snd.on:not(.ld) .st .s-on{opacity:1;transform:none;color:#2F6BFF}
#snd.on:not(.ld)[data-tone=night] .st .s-on{color:#9DB8FF}
#snd.ld .st .s-ld{opacity:.7;transform:none}
#snd.fold{padding:0 5px;gap:0}
#snd.fold .lb{max-width:0;opacity:0}
#snd:hover{box-shadow:inset 0 0 0 1px rgba(13,15,20,.3),0 12px 30px -16px rgba(13,15,20,.5)}
#snd[data-tone=night]:hover{box-shadow:inset 0 0 0 1px rgba(242,243,245,.34),0 12px 30px -16px rgba(0,0,0,.7)}
#snd:active{scale:.95}
#snd:focus-visible{outline:2px solid #2F6BFF;outline-offset:3px}
@media (max-width:700px){ #snd{--h:36px;padding:0 12px 0 9px;gap:8px} #snd .wv{width:26px;height:16px} #snd.fold{padding:0 5px}
  html .words .rail{justify-content:flex-start} }   /* the landing's link stays left, clear of the button */
@media (prefers-reduced-motion:reduce){ #snd,#snd .lb,#snd .st i{transition:none} }

/* the sound button (top right) never sits on a section's top-right label: the label steps left exactly as much as the
   button needs when the page margin is narrower than the button's corner (phones, tablets); desktop is untouched */
.meta>span:last-child{margin-right:max(0px,calc(66px - var(--m)))}
#wk .hdr,#os .hdr,#kt .hdr,#oc .hdr{right:max(5vw,66px)!important}

/* phones: the patch notes stop floating (25 endless animations are a lot for a phone's compositor); the scroll moves them instead */
@media (hover:none),(pointer:coarse){ #os .pt .fl{animation:none!important} }