/* YSM Digital — site.css
   Tokens → base → layout → components → motion → utilities.
   Dark (Graphite + Signal Amber) is the default; light (Ink + Cobalt) via [data-theme="light"]. */

/* ---------- Fonts (self-hosted, Latin subsets) ---------- */
@font-face{font-family:"Space Grotesk";src:url(../fonts/SpaceGrotesk-var.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/IBMPlexSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/IBMPlexSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/IBMPlexMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/IBMPlexMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --bg:#141517;--bg-2:#1a1c1f;--bg-3:#212429;--bg-a:rgba(20,21,23,.84);
  --ink:#e8e6e1;--ink-2:#a3a6aa;--ink-3:#6d7175;
  --line:rgba(232,230,225,.10);--line-2:rgba(232,230,225,.2);
  --accent:#f5a524;--accent-2:#ffc247;--on-accent:#141517;
  --node:rgba(232,230,225,.16);--node-2:rgba(232,230,225,.32);
  --sel:rgba(245,165,36,.28);
  --f-display:"Space Grotesk",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-hero:clamp(3rem,7vw,7.5rem);
  --t-1:clamp(2.4rem,5.4vw,5.25rem);
  --t-2:clamp(1.75rem,3vw,2.75rem);
  --t-3:clamp(1.25rem,1.7vw,1.5rem);
  --t-body:1.0625rem;--t-small:.9375rem;--t-mono:.8125rem;
  --gutter:clamp(20px,4vw,64px);--gap:clamp(16px,2vw,28px);
  --max:1440px;--r:3px;
  --ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f3f4f2;--bg-2:#ffffff;--bg-3:#e7e9e6;--bg-a:rgba(243,244,242,.86);
  --ink:#12151a;--ink-2:#4f555c;--ink-3:#868c93;
  --line:rgba(18,21,26,.12);--line-2:rgba(18,21,26,.24);
  --accent:#1e4dd8;--accent-2:#1540b8;--on-accent:#ffffff;
  --node:rgba(18,21,26,.14);--node-2:rgba(18,21,26,.3);
  --sel:rgba(30,77,216,.22);
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.6 var(--f-body);font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:var(--sel)}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.1em;max-width:62ch}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;letter-spacing:-.02em;line-height:1.05;margin:0 0 .5em;text-wrap:balance}
h1{font-size:var(--t-1)}h2{font-size:var(--t-2)}h3{font-size:var(--t-3);letter-spacing:-.01em;line-height:1.2}
ul,ol{margin:0;padding:0;list-style:none}
strong{font-weight:500}
code{font-family:var(--f-mono);font-size:.9em;background:var(--bg-3);padding:.1em .35em;border-radius:var(--r)}
pre{font-family:var(--f-mono);font-size:var(--t-mono);line-height:1.55;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.25rem;overflow-x:auto;margin:1.5rem 0;max-width:none}
pre code{background:none;padding:0;font-size:inherit}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:var(--gutter);top:-3rem;background:var(--accent);color:var(--on-accent);padding:.5rem .8rem;font-family:var(--f-mono);font-size:var(--t-mono);z-index:100;transition:top .2s}
.skip:focus{top:1rem}

/* mono / system text */
.mono,.meta{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:0;color:var(--ink-2);font-feature-settings:"tnum"}
.meta{display:flex;gap:1.5rem;flex-wrap:wrap}
.meta span{white-space:nowrap}

/* ---------- Layout ---------- */
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--gap)}
.c-7{grid-column:span 7}.c-8{grid-column:span 8}.c-5{grid-column:span 5}.c-4{grid-column:span 4}.c-6{grid-column:span 6}.c-3{grid-column:span 3}
.c-12{grid-column:1 / -1}
.rail{grid-column:10 / -1}
.lead{grid-column:1 / span 8}
section{padding-block:clamp(4rem,9vw,8.5rem)}
.section-head{margin-bottom:clamp(2rem,4vw,3.5rem)}
.section-head h2{max-width:14ch}
.section-head .meta{margin-bottom:1rem}
.actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.cta .actions,.rail .actions{margin-top:1.25rem}
@media (max-width:900px){
  .c-7,.c-8,.c-5,.c-4,.c-6,.c-3,.rail,.lead{grid-column:1 / -1}
}

/* Recurring node/line seam — the texture that extends the mark */
.seam{height:72px;position:relative;background:url(../img/texture-nodes.svg) center/640px 72px repeat-x;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.seam.tall{height:160px;background-size:640px 160px}

/* ---------- Header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;height:72px;display:flex;align-items:center;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.top.scrolled{background:var(--bg-a);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:2rem}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--f-display);font-weight:500;letter-spacing:-.01em;font-size:1.05rem}
.brand svg{width:30px;height:30px}
.brand .mark-line{stroke:var(--ink)}.brand .mark-node{stroke:var(--ink);fill:var(--bg)}.brand .mark-junction{fill:var(--accent)}
.nav{display:flex;gap:1.6rem;margin-left:auto}
.nav a{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-2);position:relative;padding:.35rem 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current]{color:var(--ink)}
.top-tools{display:flex;align-items:center;gap:1.1rem;margin-left:1rem}
.clock{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-3);font-feature-settings:"tnum";min-width:9.5ch;text-align:right}
.theme{appearance:none;background:none;border:1px solid var(--line-2);color:var(--ink-2);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s}
.theme:hover{border-color:var(--accent);color:var(--accent)}
.theme svg{width:16px;height:16px}
.theme .sun{display:none}[data-theme="light"] .theme .sun{display:block}[data-theme="light"] .theme .moon{display:none}
.menu-btn{display:none;appearance:none;background:none;border:1px solid var(--line-2);color:var(--ink);border-radius:var(--r);font-family:var(--f-mono);font-size:var(--t-mono);padding:.45rem .7rem;cursor:pointer}
@media (max-width:900px){
  .nav{display:none;position:fixed;inset:72px 0 0 0;background:var(--bg);flex-direction:column;gap:0;padding:1rem var(--gutter);z-index:49;border-top:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{font-family:var(--f-display);font-size:2rem;padding:.6rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .nav a::after{display:none}
  .menu-btn{display:block;margin-left:auto}
  .top-tools{margin-left:0}.clock{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;padding-top:calc(72px + clamp(3rem,10vh,7rem));padding-bottom:clamp(3rem,6vw,5rem);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-field{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-field canvas{width:100%;height:100%}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:var(--t-hero);font-weight:500;letter-spacing:-.035em;line-height:.95;margin:0 0 clamp(1.5rem,3vw,2.5rem);max-width:15ch}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .l span{display:block}
.js .hero h1 .l span{transform:translateY(110%);opacity:0}
.hero h1 .thin{font-weight:300}
.hero .sub{font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--ink-2);max-width:44ch;margin:0}
.hero-grid{align-items:end}
.readout{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-3);display:grid;grid-template-columns:auto 1fr;column-gap:1.25rem;row-gap:.25rem;border-top:1px solid var(--line);padding-top:1rem;font-feature-settings:"tnum"}
.readout dt{color:var(--ink-3);margin:0}.readout dd{margin:0;color:var(--ink-2)}
.readout dd b{color:var(--accent);font-weight:500}
.hero .actions{margin-top:clamp(1.75rem,3vw,2.75rem)}
.scroll-cue{position:absolute;right:var(--gutter);bottom:1.5rem;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);writing-mode:vertical-rl;letter-spacing:.08em}
@media (max-width:900px){.scroll-cue{display:none}.hero{min-height:88svh}}

/* ---------- Buttons ---------- */
.btn{--pad:.8rem 1.35rem;display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink);border:1px solid var(--line-2);padding:var(--pad);border-radius:var(--r);position:relative;overflow:hidden;isolation:isolate;transition:color .3s var(--ease),border-color .3s;cursor:pointer;background:none;line-height:1.2}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-101%);transition:transform .45s var(--ease-out);z-index:-1}
.btn:hover{color:var(--on-accent);border-color:var(--accent)}
.btn:hover::before{transform:translateX(0)}
.btn .pip{width:6px;height:6px;border-radius:50%;background:var(--accent);transition:background .3s}
.btn:hover .pip{background:var(--on-accent)}
.btn.solid{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.solid::before{background:var(--accent-2)}
.btn.solid .pip{background:var(--on-accent)}
.link{position:relative;font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink);background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100%/100% 1px;transition:background-size .35s var(--ease),color .2s;padding-bottom:2px}
.link:hover{background-size:0 1px;color:var(--accent)}

/* ---------- Statement blocks & oversized type ---------- */
.stmt{font-family:var(--f-display);font-size:var(--t-1);font-weight:400;letter-spacing:-.03em;line-height:1.02;max-width:20ch;text-wrap:balance}
.stmt em{font-style:normal;color:var(--ink-3)}
.stmt.sm{font-size:var(--t-2)}
.big-num{font-family:var(--f-display);font-weight:500;font-size:clamp(4rem,11vw,11rem);line-height:.85;letter-spacing:-.045em;font-feature-settings:"tnum";color:var(--ink)}
.big-num small{display:block;font:400 var(--t-mono)/1.5 var(--f-mono);letter-spacing:0;color:var(--ink-2);margin-top:1rem;max-width:26ch}
.watermark{position:absolute;right:-2vw;top:-6vw;font-family:var(--f-display);font-weight:600;font-size:38vw;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--line);pointer-events:none;user-select:none;z-index:0}

/* ---------- Capability index ---------- */
.caps{border-top:1px solid var(--line)}
.cap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,3fr);gap:var(--gap);padding:1.75rem 0;border-bottom:1px solid var(--line);align-items:baseline;position:relative}
.cap h3{margin:0;font-size:var(--t-3)}
.cap p{margin:0;color:var(--ink-2);font-size:var(--t-small);max-width:none}
.cap .tags{display:flex;flex-wrap:wrap;gap:.4rem .5rem;justify-content:flex-end}
.tag{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2);border:1px solid var(--line-2);padding:.15rem .5rem;border-radius:999px;white-space:nowrap}
.cap::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);transition:width .6s var(--ease)}
.cap:hover::before{width:100%}
@media (max-width:900px){.cap{grid-template-columns:1fr;gap:.6rem}.cap .tags{justify-content:flex-start}}

/* ---------- Proof strip ---------- */
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof > div{padding:2rem 0}
.proof > div + div{border-left:1px solid var(--line);padding-left:var(--gap)}
.proof .big-num{font-size:clamp(3rem,6.5vw,6rem)}
@media (max-width:900px){.proof{grid-template-columns:1fr}.proof > div + div{border-left:0;padding-left:0;border-top:1px solid var(--line)}}

/* ---------- Steps (services) — a real sequence, so numbered ---------- */
.steps{counter-reset:step;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr) minmax(0,5fr);gap:var(--gap);padding:clamp(2rem,4vw,3.5rem) 0;border-bottom:1px solid var(--line);position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--f-display);font-size:clamp(3rem,7vw,6.5rem);font-weight:500;line-height:.8;letter-spacing:-.04em;color:var(--ink-3);transition:color .3s}
.step:hover::before{color:var(--accent)}
.step h3{margin:.25rem 0 .75rem}
.step .out{color:var(--ink-2);font-size:var(--t-small)}
.step .out ul{display:grid;gap:.4rem}
.step .out li{padding-left:1.1rem;position:relative}
.step .out li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.step .out .lbl{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-3);margin-bottom:.6rem}
@media (max-width:900px){.step{grid-template-columns:1fr}.step::before{font-size:3rem}}

/* ---------- Case studies ---------- */
.case{padding:clamp(3rem,7vw,6rem) 0;border-top:1px solid var(--line)}
.case:first-of-type{border-top:0}
.case .grid{align-items:start}
.case .kicker{display:flex;justify-content:space-between;gap:1rem;font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-3);margin-bottom:1.25rem;font-feature-settings:"tnum"}
.case h2{font-size:var(--t-1);max-width:12ch;margin-bottom:1rem}
.case .sum{font-size:clamp(1.05rem,1.3vw,1.2rem);color:var(--ink-2);max-width:48ch}
.case .facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.25rem;font-family:var(--f-mono);font-size:var(--t-mono);border-top:1px solid var(--line);padding-top:1rem;margin-top:1.5rem;color:var(--ink-2)}
.case .facts dt{color:var(--ink-3);margin:0}.case .facts dd{margin:0}
.case .body p{max-width:58ch}
.case .body h3{margin-top:2rem}
.fig{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1rem,2vw,1.75rem);position:relative;overflow:hidden;margin:0}
.fig svg{width:100%;height:auto}
.fig .cap-line{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);margin-top:.9rem;display:flex;justify-content:space-between;gap:1rem}
.fig text{font-family:var(--f-mono);font-size:11px;fill:var(--ink-2)}
.fig .k{stroke:var(--ink-2);fill:none;stroke-width:1.25}
.fig .k2{stroke:var(--line-2);fill:none;stroke-width:1}
.fig .a{stroke:var(--accent);fill:none;stroke-width:1.5}
.fig .af{fill:var(--accent)}
.fig .nf{fill:var(--bg-3);stroke:var(--ink-2);stroke-width:1.25}
.fig .warn{stroke:var(--accent);stroke-dasharray:3 3}
.fig .hi{fill:var(--ink)}
.fig text.af{fill:var(--accent)}
.js .fig .draw,.js .tree .draw{stroke-dasharray:1000;stroke-dashoffset:1000}
.in .draw{animation:draw 1.6s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.outcome{margin-top:2rem;padding:1.5rem;border-left:2px solid var(--accent);background:var(--bg-2)}
.outcome .lbl{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-3);margin-bottom:.5rem}
.outcome p{margin:0;max-width:none}

/* project index list */
.plist{border-top:1px solid var(--line)}
.plist a{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:var(--gap);padding:1.4rem 0;border-bottom:1px solid var(--line);align-items:baseline;transition:padding-left .35s var(--ease)}
.plist a:hover{padding-left:.6rem}
.plist .t{font-family:var(--f-display);font-size:var(--t-3);font-weight:500;letter-spacing:-.01em}
.plist .d{color:var(--ink-2);font-size:var(--t-small)}
.plist .m{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-3);text-align:right;transition:color .3s}
.plist a:hover .m{color:var(--accent)}
@media (max-width:900px){.plist a{grid-template-columns:1fr;gap:.3rem}.plist .m{text-align:left}}

/* ---------- Brand family ---------- */
.family{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.bcard{--b-accent:var(--accent);--b-bg:var(--bg-2);--b-ink:var(--ink);--b-font:var(--f-display);border:1px solid var(--line);border-radius:6px;padding:clamp(1.5rem,3vw,2.5rem);background:var(--b-bg);color:var(--b-ink);display:flex;flex-direction:column;gap:1.25rem;position:relative;overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.bcard:hover{border-color:var(--b-accent);transform:translateY(-3px)}
.bcard::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--b-accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.bcard:hover::after{transform:scaleX(1)}
.bcard .name{font-family:var(--b-font);font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.bcard .name small{display:block;font:400 var(--t-mono)/1.5 var(--f-mono);letter-spacing:0;opacity:.7;margin-top:.35rem}
.bcard p{margin:0;opacity:.85;max-width:none}
.bcard .mono{color:inherit;opacity:.7}
.bcard .swatch{display:flex;gap:.4rem}
.bcard .swatch i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.bcard .link{color:var(--b-ink);background-image:linear-gradient(var(--b-accent),var(--b-accent));margin-top:auto;align-self:flex-start}
.bcard .link:hover{color:var(--b-accent)}
.bcard.gmp{--b-accent:#f0a83a;--b-bg:#0f3d3a;--b-ink:#f2f5f2}
.bcard.dsm{--b-accent:#6ee7ff;--b-bg:#0c1220;--b-ink:#e8edf7}
[data-theme="light"] .bcard.gmp{--b-bg:#e6f2ee;--b-ink:#0f3d3a;--b-accent:#0f8b7a}
[data-theme="light"] .bcard.dsm{--b-bg:#eaf0fb;--b-ink:#0c1220;--b-accent:#1e4dd8}
.bcard .swatch i.g1{background:#0f3d3a}.bcard .swatch i.g2{background:#5cb85c}.bcard .swatch i.g3{background:#f0a83a}
.bcard .swatch i.d1{background:#0c1220}.bcard .swatch i.d2{background:#6ee7ff}.bcard .swatch i.d3{background:#e8edf7}
@media (max-width:900px){.family{grid-template-columns:1fr}}

/* family tree (brands page + footer) */
.tree{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gap);align-items:center}
.tree svg{width:100%;height:auto}
.tree .t-line{stroke:var(--line-2);fill:none;stroke-width:1.25}
.tree .t-arm{stroke:var(--ink);fill:none}
.tree .t-node{fill:var(--bg);stroke:var(--ink);stroke-width:1.5}
.tree .t-j{fill:var(--accent)}
.tree text{font-family:var(--f-mono);font-size:11px;fill:var(--ink-2)}
.tree .t-parent{font-family:var(--f-display);font-size:16px;fill:var(--ink);font-weight:500}
.tree .t-lbl{font-size:12px}
@media (max-width:900px){.tree{grid-template-columns:1fr}}

/* ---------- Blog ---------- */
.posts{border-top:1px solid var(--line)}
.post-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,6fr) minmax(0,4fr);gap:var(--gap);padding:1.75rem 0;border-bottom:1px solid var(--line);align-items:baseline;transition:padding-left .35s var(--ease)}
.post-row:hover{padding-left:.6rem}
.post-row .when{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-3);font-feature-settings:"tnum"}
.post-row h3{margin:0 0 .35rem;font-size:var(--t-3)}
.post-row p{margin:0;color:var(--ink-2);font-size:var(--t-small);max-width:none}
.post-row .tags{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:900px){.post-row{grid-template-columns:1fr;gap:.4rem}.post-row .tags{justify-content:flex-start}}
.article{padding-top:calc(72px + clamp(3rem,8vw,6rem))}
.article header{margin-bottom:clamp(2rem,4vw,3.5rem)}
.article header h1{font-size:var(--t-1);max-width:18ch}
.article header .sub{font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:52ch}
.article .body{grid-column:1 / span 7}
.article .side{grid-column:9 / -1;position:sticky;top:100px;align-self:start}
.article .body h2{font-size:var(--t-2);margin-top:2.5rem}
.article .body h3{margin-top:2rem}
.article .body p,.article .body li{max-width:62ch}
.article .body ul,.article .body ol{margin:0 0 1.2em 1.2em;list-style:disc}
.article .body ol{list-style:decimal}
.article .body li{margin-bottom:.35em}
.article .body blockquote{margin:1.5rem 0;padding:1rem 1.25rem;border-left:2px solid var(--accent);background:var(--bg-2);font-family:var(--f-display);font-size:1.15rem;line-height:1.4}
.article .body blockquote p{margin:0}
.article .body table{width:100%;border-collapse:collapse;font-size:var(--t-small);margin:1.5rem 0;font-feature-settings:"tnum"}
.article .body th,.article .body td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.article .body th{font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;color:var(--ink-2)}
.side .mono{margin-top:2rem;display:block}
.side .link{margin-top:.75rem;display:inline-block}
.toc{font-family:var(--f-mono);font-size:var(--t-mono);border-top:1px solid var(--line);padding-top:1rem}
.toc li{margin:.35rem 0}.toc a{color:var(--ink-2)}.toc a:hover{color:var(--accent)}
.toc .lbl{color:var(--ink-3);margin-bottom:.6rem}
@media (max-width:900px){.article .body,.article .side{grid-column:1 / -1}.article .side{position:static}}

/* ---------- About ---------- */
.timeline{border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:var(--gap);padding:1.25rem 0;border-bottom:1px solid var(--line)}
.timeline .y{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-3);font-feature-settings:"tnum"}
.timeline p{margin:0;max-width:none}
.stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.stack div{border-top:1px solid var(--line);padding-top:1rem}
.stack .lbl{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-3);margin-bottom:.5rem}
.stack ul{color:var(--ink-2);font-size:var(--t-small)}
.stack li{padding:.2rem 0}
.portrait{aspect-ratio:4/5;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden;margin:0}
.portrait svg{position:absolute;inset:0;width:100%;height:100%}
.portrait .pl{stroke:var(--line-2);fill:none;stroke-width:1.2}
.portrait .pn{fill:var(--bg);stroke:var(--ink);stroke-width:1.5}
.portrait .pj{fill:var(--accent)}
.portrait .pd{fill:var(--node)}
.portrait .cap-line{position:absolute;left:1rem;bottom:.9rem;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3)}
.about-body h2{margin-top:2rem}
.about-body h2:first-child{margin-top:0}

/* ---------- Contact ---------- */
.contact-grid{align-items:start}
.c-form{grid-column:7 / -1}
@media (max-width:900px){.c-form{grid-column:1 / -1}}
.channels{display:grid;gap:0;border-top:1px solid var(--line)}
.channels a,.channels div{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--gap);padding:1.25rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.channels .lbl{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-3)}
.channels .val{font-family:var(--f-display);font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:500;letter-spacing:-.01em;transition:color .25s;overflow-wrap:anywhere}
.channels a:hover .val{color:var(--accent)}
.channels .val small{display:block;font:400 var(--t-mono)/1.5 var(--f-mono);letter-spacing:0;color:var(--ink-3);margin-top:.3rem}
.channels .soon{color:var(--ink-3);font-family:var(--f-mono);font-size:var(--t-mono)}
.form{display:grid;gap:1.25rem}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-2)}
.field input,.field textarea,.field select{font:400 var(--t-body)/1.5 var(--f-body);color:var(--ink);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);padding:.8rem .9rem;width:100%;transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:160px;resize:vertical}
.field .hint{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden;opacity:0}
.form .note{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);max-width:40ch}
@media (max-width:600px){.two{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta .stmt{max-width:16ch}
.cta .grid{align-items:end}

/* ---------- Footer ---------- */
.foot{padding:clamp(3rem,6vw,5rem) 0 2rem;border-top:1px solid var(--line);position:relative}
.foot .grid{row-gap:2.5rem}
.foot .fam{grid-column:1 / span 6}
.foot .fam .tree{display:block}
.foot .fam svg{max-width:420px}
.foot .col{grid-column:span 2}
.foot .col .lbl{font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink-3);margin-bottom:.75rem}
.foot .col li{margin:.3rem 0}
.foot .col a{font-size:var(--t-small);color:var(--ink-2);transition:color .2s}
.foot .col a:hover{color:var(--accent)}
.foot .legal{grid-column:1 / -1;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:1.25rem;margin-top:1rem}
.foot .fam p{color:var(--ink-2);font-size:var(--t-small);max-width:44ch;margin-top:1rem}
@media (max-width:900px){.foot .fam,.foot .col{grid-column:1 / -1}}

/* ---------- Motion ---------- */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal="count"]{opacity:1;transform:none}
.loaded .hero h1 .l span{animation:rise 1s var(--ease-out) forwards}
.loaded .hero h1 .l:nth-child(2) span{animation-delay:.1s}
.loaded .hero h1 .l:nth-child(3) span{animation-delay:.2s}
@keyframes rise{to{transform:none;opacity:1}}
.js .hero .sub,.js .hero .actions,.js .hero .readout{opacity:0;transition:opacity 1s var(--ease) .55s}
.loaded .hero .sub,.loaded .hero .actions,.loaded .hero .readout{opacity:1}

/* cursor (fine pointers only) */
.cur{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:200;transform:translate(-50%,-50%);transition:width .25s,height .25s,opacity .3s;opacity:0}
.cur-ring{position:fixed;left:0;top:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--accent);pointer-events:none;z-index:199;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),opacity .3s,border-color .3s;opacity:0}
.cur-ring .hint{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);font-family:var(--f-mono);font-size:.62rem;color:var(--accent);white-space:nowrap;opacity:0;transition:opacity .2s}
body.has-cursor .cur,body.has-cursor .cur-ring{opacity:1}
body.cur-active .cur{width:6px;height:6px}
body.cur-active .cur-ring{width:52px;height:52px}
body.cur-active .cur-ring .hint{opacity:1}
@media (hover:none),(pointer:coarse){.cur,.cur-ring{display:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .hero h1 .l span{transform:none;opacity:1}
  .js .hero .sub,.js .hero .actions,.js .hero .readout{opacity:1}
  .js .fig .draw,.js .tree .draw{stroke-dashoffset:0}
  .cur,.cur-ring{display:none}
}

/* ---------- Page-level ---------- */
.page{padding-top:calc(72px + clamp(3rem,8vw,6rem))}
.page-head{margin-bottom:clamp(2.5rem,5vw,4.5rem);position:relative}
.page-head h1{max-width:12ch}
.page-head .sub{font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--ink-2);max-width:46ch;margin:1rem 0 0}
.page-head .meta{margin-bottom:1.25rem}
.notfound{min-height:100svh;display:grid;place-items:center;text-align:left;position:relative;overflow:hidden}
.notfound .big-num{font-size:clamp(6rem,24vw,22rem)}
.notfound .actions{margin-top:2rem}
.thanks{min-height:70svh;padding-top:calc(72px + 6rem)}
.thanks .actions{margin-top:1.5rem}
.err{border:1px solid var(--accent);padding:.8rem 1rem;font-family:var(--f-mono);font-size:var(--t-mono);color:var(--ink);margin-bottom:1rem;border-radius:var(--r)}
.err:empty{display:none}
.muted{color:var(--ink-2)}
.tight{max-width:38ch}