*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--dark:#000000;--dark-alt:#0a0a0a;--light:#f5f5f7;--light-alt:#fbfbfd;
--ind:#f5f5f7;--ind2:rgba(245,245,247,.6);--ind3:rgba(245,245,247,.35);
--inl:#1d1d1f;--inl2:#6e6e73;--inl3:#a0a0a4;
--rd:rgba(245,245,247,.16);--rds:rgba(245,245,247,.08);
--rl:rgba(29,29,31,.16);--rls:rgba(29,29,31,.06);
--chrome:linear-gradient(180deg,#ffffff 0%,#c8c8cd 60%,#8e8e93 100%);
--sans:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;
--text:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
--mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
--display:"Newsreader",Cambria,Georgia,serif;
--ease:cubic-bezier(.2,.65,.3,1);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--dark);color:var(--ind);font-family:var(--text);
-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}

@keyframes fadeUp-fl{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUpBlur-fl{from{opacity:0;transform:translateY(30px);filter:blur(10px)}
to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes pulse-fl{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.chrome{font-style:italic;font-weight:400;
background:var(--chrome);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent}

.rev{opacity:0;transform:translateY(18px);
transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s ease}
.rev.blur{filter:blur(8px)}
.rev.sc{transform:translateY(18px) scale(.95)}
.rev.in{opacity:1;transform:none;filter:none}

section{position:relative}
.sec-dark{background:var(--dark);color:var(--ind)}
.sec-light{background:var(--light);color:var(--inl)}
.sec-lightalt{background:var(--light-alt);color:var(--inl)}
.pad{padding:70px 22px}

.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
text-transform:uppercase;margin-bottom:28px}
.sec-dark .eyebrow{color:var(--ind2)}
.sec-light .eyebrow,.sec-lightalt .eyebrow{color:var(--inl2)}

/* ── Hero ── */
#hero{background:var(--dark);color:var(--ind);padding:70px 22px;
overflow:hidden;min-height:760px}
#hero .glow{position:absolute;top:-120px;left:-80px;width:460px;height:460px;
background:radial-gradient(circle,rgba(255,255,255,.08),transparent 60%);
pointer-events:none;filter:blur(40px)}
.hero-meta{display:flex;justify-content:space-between;align-items:center;
font-family:var(--mono);font-size:10.5px;color:var(--ind2);
letter-spacing:.22em;text-transform:uppercase;padding-bottom:28px;position:relative;
animation:fadeUp-fl 1s 0ms var(--ease) both}
.hero-meta .live{display:flex;align-items:center;gap:8px}
.hero-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--ind);
animation:pulse-fl 1.8s ease-in-out infinite}
.hero-h{position:relative;transform-origin:left center;
will-change:transform,opacity;transition:opacity .12s linear}
.hero-h h1{font-family:var(--sans);font-weight:600;font-size:84px;
line-height:.92;letter-spacing:-.045em;color:var(--ind);margin:20px 0 0}
.hero-h h1 span{display:block}
.hero-h h1 span+span{margin-top:4px}
.hero-h h1 .w{animation:fadeUpBlur-fl 1.1s var(--ease) both}
.hero-deck{font-family:var(--text);font-size:21px;line-height:1.42;
color:var(--ind2);margin:36px 0 28px;letter-spacing:-.01em;
max-width:360px;text-wrap:pretty;font-weight:400}
.spec-strip{display:grid;grid-template-columns:repeat(3,1fr);padding:24px 0;
border-top:1px solid var(--rd);border-bottom:1px solid var(--rd)}
.spec-strip .cell{padding:0 8px}
.spec-strip .cell:not(:last-child){border-right:1px solid var(--rd)}
.spec-strip .v{font-family:var(--sans);font-size:54px;font-weight:500;
letter-spacing:-.04em;color:var(--ind);line-height:.92;font-variant-numeric:tabular-nums}
.spec-strip .s{font-family:var(--text);font-size:11px;color:var(--ind2);
letter-spacing:.04em;margin-top:10px;line-height:1.3;text-transform:uppercase;font-weight:500}

/* ── Specs spotlights ── */
#specs h2,.h-dark{font-family:var(--sans);font-weight:600;font-size:56px;
line-height:.94;letter-spacing:-.04em;color:var(--ind);margin:0 0 42px}
.spot{padding:32px 0;border-top:1px solid var(--rd)}
.spot .num{font-family:var(--sans);font-weight:500;font-size:100px;
letter-spacing:-.06em;line-height:.9;color:var(--ind);margin:0 0 12px;
font-variant-numeric:tabular-nums}
.spot .lab{font-family:var(--text);font-size:11px;color:var(--ind2);
letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;font-weight:500}
.spot p{font-family:var(--text);font-size:19px;line-height:1.42;color:var(--ind);
margin:0;max-width:340px;font-weight:400;letter-spacing:-.005em}
.cap-rule-d,.cap-rule-l{display:none}

/* ── Practice (light) ── */
.h-light{font-family:var(--sans);font-weight:600;font-size:64px;
line-height:.92;letter-spacing:-.045em;color:var(--inl);margin:0 0 42px}
.h-light em,.h-lightalt em{font-style:italic;font-weight:400;color:var(--inl2)}
/* ── Practice — editorial chapter pages (restrained chapter marker) ── */
.pr-item{padding:44px 0 48px;border-top:1px solid var(--rl);position:relative}
.pr-item:first-child{border-top:none;padding-top:8px}
/* Chapter marker = ONE quiet mono line: "01 — RESEARCH" */
.pr-top{display:flex;align-items:baseline;gap:0;margin-bottom:22px}
.pr-n,.pr-cat{font-family:var(--mono);font-size:10.5px;font-weight:500;
color:var(--inl2);letter-spacing:.22em;text-transform:uppercase;
font-variant-numeric:tabular-nums;line-height:1;
background:none;-webkit-text-fill-color:initial;font-style:normal}
.pr-n::after{content:"—";margin:0 12px;color:var(--inl3);
font-weight:400;letter-spacing:0}
.pr-item h3{font-size:32px;color:var(--inl);margin:0 0 18px;
letter-spacing:-.012em;line-height:1.06}
.pr-item p{color:var(--inl);margin:0 0 22px;text-wrap:pretty;max-width:640px}
.pr-tags{display:flex;flex-wrap:wrap;gap:6px}
.pr-tags span{font-family:var(--text);font-size:12px;padding:6px 13px;
background:transparent;color:var(--inl2);border:1px solid var(--rl);
border-radius:999px;letter-spacing:.005em;font-weight:500}
@media (min-width:760px){
.pr-item{padding:64px 0 72px}
.pr-top{margin-bottom:26px}
.pr-item h3{font-size:42px;margin-bottom:22px;max-width:720px}
.pr-item p{max-width:680px;margin-bottom:26px}}
@media (min-width:1000px){
.pr-item{padding:80px 0 88px}
.pr-item h3{font-size:48px;max-width:760px}}

/* ── Founder (dark) ── */
.fr-frame{position:relative;overflow:hidden;padding:74px 18px;
border:1px solid var(--rd);margin-bottom:36px;background:var(--dark);isolation:isolate}
.fr-frame .scan{position:absolute;inset:0;opacity:.05;
background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 1px,transparent 1px 26px);
pointer-events:none;z-index:0}
.fr-frame .vf{position:absolute;width:22px;height:22px;z-index:2}
.fr-frame .vf.tl{top:14px;left:14px;border-top:1px solid var(--ind2);border-left:1px solid var(--ind2)}
.fr-frame .vf.tr{top:14px;right:14px;border-top:1px solid var(--ind2);border-right:1px solid var(--ind2)}
.fr-frame .vf.bl{bottom:14px;left:14px;border-bottom:1px solid var(--ind2);border-left:1px solid var(--ind2)}
.fr-frame .vf.br{bottom:14px;right:14px;border-bottom:1px solid var(--ind2);border-right:1px solid var(--ind2)}
.fr-frame .mid{position:relative;z-index:3;display:flex;align-items:center;
justify-content:center;min-height:360px}
.fr-mark{font-family:var(--sans);font-weight:600;font-size:clamp(34px,11vw,60px);
letter-spacing:-.04em;text-align:center;line-height:1.05;
background:var(--chrome);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent}
.fr-p{font-family:var(--text);font-size:17.5px;line-height:1.5;color:var(--ind2);
margin:0 0 22px;letter-spacing:-.005em;text-wrap:pretty}
.fr-p.lead{font-size:20px;color:var(--ind);font-weight:500}

/* ── Record / Recognition — items as cards on the light-alt substrate ── */
#rec-list{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
.rc-item{display:block;padding:26px 24px;background:#ffffff;
border:1px solid var(--rl);border-radius:18px;
box-shadow:0 1px 2px rgba(0,0,0,.03);
transition:box-shadow .4s ease,transform .4s cubic-bezier(.28,.11,.32,1)}
.rc-item.in{box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 28px -18px rgba(0,0,0,.14)}
.rc-src{font-family:var(--mono);font-size:10.5px;color:var(--inl2);
letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;font-weight:500}
.rc-item h3{font-size:26px;color:var(--inl);margin:0 0 12px;letter-spacing:-.012em}
.rc-item p{font-family:var(--text);font-size:15.5px;line-height:1.5;
color:var(--inl2);margin:0;text-wrap:pretty}
/* tablet+ : 2-column tile grid */
@media (min-width:760px){
#rec-list{grid-template-columns:repeat(2,1fr);gap:18px}
.rc-item{padding:30px 32px}
.rc-item h3{font-size:30px}}
@media (min-width:1000px){
#rec-list{gap:22px}
.rc-item{padding:36px 34px}
.rc-item h3{font-size:32px}}
/* hover-capable devices: subtle lift on hover */
@media (hover:hover) and (min-width:760px){
.rc-item{will-change:transform}
.rc-item:hover{transform:translateY(-3px);
box-shadow:0 2px 4px rgba(0,0,0,.04),0 18px 44px -22px rgba(0,0,0,.18)}}
.rc-item p{font-family:var(--text);font-size:15.5px;line-height:1.5;
color:var(--inl2);margin:0;text-wrap:pretty}

/* ── Systems (dark) ── */
#systems .h-dark{margin:0 0 8px}
.sy-block{padding:34px 0;border-top:1px solid var(--rd)}
.sy-lbl{font-family:var(--mono);font-size:10.5px;color:var(--ind2);
letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px;font-weight:500}
.sy-block h3{font-family:var(--sans);font-size:32px;font-weight:600;
line-height:1.05;letter-spacing:-.035em;color:var(--ind);margin:0 0 16px}
.sy-block p{font-family:var(--text);font-size:17.5px;line-height:1.5;
color:var(--ind2);margin:0 0 22px;letter-spacing:-.005em;text-wrap:pretty}
.sy-block ul{list-style:none}
.sy-block li{display:grid;grid-template-columns:32px 1fr;gap:12px;padding:13px 0;
border-top:1px solid var(--rds);font-family:var(--text);font-size:16px;
line-height:1.45;color:var(--ind)}
.sy-block li .n{font-family:var(--mono);font-size:11px;color:var(--ind2);
padding-top:2px;font-weight:500}

/* ── Timeline (light) — vertical spine with dots + editorial entries ── */
#tl-list{position:relative;margin-top:18px;--prog:0}
#tl-list::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;
width:1px;background:linear-gradient(to bottom,
var(--inl) 0,var(--inl) calc(var(--prog) * 100%),
var(--rl) calc(var(--prog) * 100%),var(--rl) 100%);
transition:background .12s linear}
.tl-item{position:relative;display:block;padding:0 0 36px 36px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:2px;top:5px;
width:13px;height:13px;border-radius:50%;
background:var(--light);border:1.5px solid var(--inl3);
transition:background .45s cubic-bezier(.28,.11,.32,1),
border-color .45s ease,transform .45s ease,box-shadow .45s ease;
z-index:1}
.tl-item.in::before{background:var(--inl);border-color:var(--inl);
transform:scale(1.08);box-shadow:0 0 0 4px rgba(0,0,0,.04)}
.tl-y{display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;
color:var(--inl2);letter-spacing:.2em;text-transform:uppercase;
font-variant-numeric:tabular-nums;line-height:1;margin:0 0 10px}
.tl-p{font-family:var(--display);font-weight:400;
font-size:22px;line-height:1.28;color:var(--inl);
letter-spacing:-.005em;margin:0;text-wrap:pretty;
font-variation-settings:"opsz" 36}
@media (min-width:760px){
#tl-list{margin-top:24px}
#tl-list::before{left:13px}
.tl-item{padding:0 0 46px 50px}
.tl-item::before{left:6px;width:15px;height:15px;top:6px}
.tl-p{font-size:25px}}
@media (min-width:1000px){
.tl-item{padding-bottom:56px}
.tl-p{font-size:28px;line-height:1.26;max-width:680px}}

/* ── Channel (dark) ── */
#channel{background:var(--dark);color:var(--ind);padding:80px 22px 70px;overflow:hidden}
#channel .glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:500px;height:500px;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 60%);
pointer-events:none;filter:blur(20px)}
#channel .inner{position:relative}
.ch-h2{font-family:var(--sans);font-weight:600;font-size:72px;line-height:.9;
letter-spacing:-.05em;color:var(--ind);margin:0 0 28px}
.ch-p{font-family:var(--text);font-size:19px;line-height:1.45;color:var(--ind);
margin:0 0 36px;max-width:360px;font-weight:400;letter-spacing:-.005em;text-wrap:pretty}
.ch-btn{display:flex;width:100%;align-items:center;justify-content:space-between;
padding:22px 28px;background:var(--ind);color:var(--dark);border:none;
border-radius:999px;cursor:pointer;font-family:var(--sans);font-size:18px;
font-weight:600;letter-spacing:-.01em;margin-bottom:36px;
transition:transform .25s var(--ease)}
.ch-btn:active{transform:scale(.98)}
.ch-btn .arr{width:36px;height:36px;border-radius:50%;background:var(--dark);
color:var(--ind);display:flex;align-items:center;justify-content:center;font-size:17px}

/* ── Footer ── */
.foot{background:var(--dark);color:var(--ind);padding:32px 22px 140px;
border-top:1px solid var(--rd)}
.foot .wm{font-family:var(--sans);font-weight:600;font-size:56px;
letter-spacing:-.045em;color:var(--ind);line-height:.92;margin-bottom:26px}
.foot .fmeta{font-family:var(--mono);font-size:10.5px;color:var(--ind3);
letter-spacing:.1em;text-transform:uppercase;line-height:1.9}
.foot .fmeta b{color:var(--ind2);font-weight:400}
.foot .fmeta .cp{margin-top:18px;display:block}

/* ── Bottom pill ── */
.pill-wrap{position:fixed;left:0;right:0;bottom:22px;z-index:60;display:flex;
justify-content:center;pointer-events:none;padding-bottom:env(safe-area-inset-bottom,0px)}
.pill{pointer-events:auto;background:rgba(28,28,30,.72);
backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
border:1px solid rgba(255,255,255,.12);border-radius:24px;overflow:hidden;
width:240px;max-width:376px;color:var(--ind);
transition:width .5s var(--ease);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.pill.expanded{width:calc(100% - 28px)}
.pill .col{width:100%;display:flex;align-items:center;gap:12px;padding:13px 18px;
border:none;background:transparent;color:var(--ind);cursor:pointer}
.pill .col .pd{width:6px;height:6px;border-radius:50%;background:var(--ind);
animation:pulse-fl 1.8s ease-in-out infinite;flex:none}
.pill .col .pn{font-family:var(--mono);font-size:10.5px;color:var(--ind2);
letter-spacing:.14em;text-transform:uppercase}
.pill .col .pl{font-family:var(--sans);font-size:17px;font-weight:600;
color:var(--ind);letter-spacing:-.01em;flex:1;text-align:left}
.pill .exp{padding:14px 12px 12px}
.pill .exp-hd{display:flex;justify-content:space-between;align-items:center;
padding:0 6px 10px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.12)}
.pill .exp-hd .t{font-family:var(--mono);font-size:10px;color:var(--ind2);
letter-spacing:.18em;text-transform:uppercase}
.pill .exp-hd button{background:transparent;border:none;cursor:pointer;
color:var(--ind2);padding:4px;display:flex}
.pill .nav-b{display:flex;width:100%;align-items:baseline;gap:14px;padding:10px 8px;
border:none;background:transparent;cursor:pointer;text-align:left;
color:var(--ind2);transition:color .2s}
.pill .nav-b.on{color:var(--ind)}
.pill .nav-b .nn{font-family:var(--mono);font-size:11px;color:var(--ind3);
letter-spacing:.08em;width:26px;flex:none}
.pill .nav-b .nl{font-family:var(--sans);font-size:20px;font-weight:500;
letter-spacing:-.015em;flex:1}
.pill .nav-b .nd{width:6px;height:6px;border-radius:50%;background:var(--ind);flex:none}
.pill .compose{display:flex;width:100%;align-items:center;
justify-content:space-between;gap:10px;padding:14px 18px;margin-top:8px;
background:var(--ind);color:var(--dark);border:none;border-radius:16px;cursor:pointer;
font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.005em}

/* ── Contact modal ── */
.modal{position:fixed;inset:0;z-index:80;pointer-events:none}
.modal.open{pointer-events:auto}
.modal .scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);
opacity:0;transition:opacity .4s ease,backdrop-filter .4s ease}
.modal.open .scrim{opacity:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal .sheet{position:absolute;left:0;right:0;bottom:0;background:var(--dark-alt);
color:var(--ind);border-top:1px solid var(--rd);max-height:94%;overflow-y:auto;
transform:translateY(100%);transition:transform .55s cubic-bezier(.16,1.1,.3,1);
padding-bottom:32px;border-top-left-radius:24px;border-top-right-radius:24px}
.modal.open .sheet{transform:translateY(0)}
.modal .grip{display:flex;justify-content:center;padding-top:14px}
.modal .grip i{width:44px;height:4px;border-radius:2px;
background:rgba(255,255,255,.2);display:block}
.modal .m-hd{display:flex;justify-content:space-between;align-items:center;padding:22px 22px 8px}
.modal .m-hd .t{font-family:var(--mono);font-size:10.5px;color:var(--ind2);
letter-spacing:.22em;text-transform:uppercase}
.modal .m-hd button{width:36px;height:36px;border:1px solid var(--rd);
background:transparent;cursor:pointer;color:var(--ind);display:flex;
align-items:center;justify-content:center;border-radius:50%}
.m-form{padding:8px 22px 32px}
.m-form h2{font-family:var(--sans);font-size:40px;font-weight:600;line-height:.98;
letter-spacing:-.04em;color:var(--ind);margin:0 0 24px}
.mfield{padding-top:24px;padding-bottom:8px;margin-bottom:6px;
border-bottom:1px solid var(--rd);transition:border-color .2s;position:relative}
.mfield.foc{border-bottom-color:var(--ind)}
.mfield.err{border-bottom-color:#ff453a}
.mfield label{position:absolute;left:0;top:32px;font-family:var(--text);
font-size:18px;letter-spacing:-.005em;color:var(--ind2);font-weight:500;
transition:all .3s var(--ease);pointer-events:none}
.mfield.fl label,.mfield.foc label{top:0;font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ind)}
.mfield.err label{color:#ff453a}
.mfield input,.mfield textarea{width:100%;border:none;background:transparent;
padding:10px 0;outline:none;font-family:var(--sans);font-size:22px;
color:var(--ind);font-weight:500;letter-spacing:-.015em;resize:none}
.mfield textarea{resize:vertical}
.m-submit{width:100%;margin-top:28px;padding:20px 24px;background:transparent;
color:var(--ind3);border:1px solid var(--rd);border-radius:999px;cursor:not-allowed;
font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.005em;
display:flex;justify-content:space-between;align-items:center;transition:all .25s}
.m-submit.ok{background:var(--ind);color:var(--dark);border-color:var(--ind);cursor:pointer}
.m-sent{padding:40px 22px 32px;display:none}
.m-sent .big{font-family:var(--sans);font-size:52px;font-weight:600;
letter-spacing:-.04em;line-height:.96;margin-bottom:18px}
.m-sent p{font-family:var(--text);font-size:17px;line-height:1.5;color:var(--ind2);margin:0}

@media (min-width:760px){
.hero-h h1{font-size:120px}
#specs h2,.h-dark,.h-light,.ch-h2{font-size:84px}
.spot .num{font-size:140px}
}

/* ===== Laptop / desktop margins (≥1000px) — layout only ===== */
@media (min-width:1000px){
  :root{--gut:max(48px,calc((100% - 1080px) / 2))}
  #hero{padding:128px var(--gut) 112px;min-height:90vh}
  .pad{padding:112px var(--gut)}
  #channel{padding:0}
  .foot{padding:60px var(--gut) 120px}

  /* readable measure on wide screens (display heads stay wide) */
  .hero-deck{max-width:460px}
  .pr-item p,.rc-item p,.sy-block p,.sy-block li,.tl-p,.fr-p,.ch-p,.spot p{max-width:680px}
  .hero-h h1{font-size:104px}
  #specs h2,.h-dark,.h-light,.ch-h2{font-size:74px}
  .spot .num{font-size:118px}
  .fr-frame{max-width:760px}

  /* centered modal sheet instead of full-bleed */
  .modal .sheet{left:50%;right:auto;width:600px;max-width:calc(100% - 64px);
    transform:translate(-50%,100%);
    border-radius:24px 24px 0 0}
  .modal.open .sheet{transform:translate(-50%,0)}
}
@media (min-width:1500px){
  :root{--gut:max(48px,calc((100% - 1120px) / 2))}
}

/* (WS.COMPUTER mark lives only in the Founder frame — see .fr-mark-img) */

/* Founder frame — original WS.COMPUTER lockup + low modern signature */
.fr-brand{position:relative;z-index:3;display:flex;flex-direction:column;
align-items:center;text-align:center}
.fr-lockup{width:86%;max-width:480px;height:auto;display:block}
.fr-by{position:absolute;left:0;right:0;bottom:34px;z-index:3;
text-align:center;font-family:var(--text);font-size:13px;font-weight:400;
letter-spacing:.005em;text-transform:none;color:var(--ind2)}
@media (min-width:1000px){
.fr-lockup{max-width:560px}
.fr-by{font-size:15px;bottom:46px}
}

/* ===== R&D variant — subtle scientific signals only ===== */
/* cooler, clinical chrome (less luxury gloss, more instrument steel) */
:root{--chrome:linear-gradient(180deg,#e9eaec 0%,#bcbfc4 56%,#8f9298 100%)}
/* faint precision grid — like graph paper / lab plotting */
.sec-dark,#hero,#channel,.foot{
background-image:
repeating-linear-gradient(0deg,rgba(245,245,247,.022) 0 1px,transparent 1px 44px),
repeating-linear-gradient(90deg,rgba(245,245,247,.022) 0 1px,transparent 1px 44px)}
.sec-light,.sec-lightalt{
background-image:
repeating-linear-gradient(0deg,rgba(29,29,31,.028) 0 1px,transparent 1px 44px),
repeating-linear-gradient(90deg,rgba(29,29,31,.028) 0 1px,transparent 1px 44px)}
/* eyebrow as a research designator: monospace, tighter, ticked */
.eyebrow{font-feature-settings:"tnum" 1;letter-spacing:.26em}
.eyebrow::before{content:"§ ";opacity:.55}
/* tabular, instrument-like big stats */
.spec-strip .v,.spot .num,.rc-n,.tl-y{font-feature-settings:"tnum" 1}

/* ===== Motion language — dramatic, visible across every element ===== */
/* long, soft easing — calm, deliberate, research-grade */
.rev{opacity:0;transform:translateY(56px);filter:blur(4px);
transition:opacity 1.1s cubic-bezier(.28,.11,.32,1),
transform 1.3s cubic-bezier(.28,.11,.32,1),
filter .8s ease}
.rev.sc{transform:translateY(56px) scale(.965)}
.rev.blur{filter:blur(10px)}
/* Respect users who prefer reduced motion — keep subtle fade only */
@media (prefers-reduced-motion:reduce){
.rev{transform:none;filter:none;transition:opacity .4s ease}
.rev.sc,.rev.blur{transform:none;filter:none}}
/* two-beat: the card heading/number rides the reveal; the smaller
   body copy follows a clear beat later (keyed to each card's own
   scroll-in) — exactly the production progressive-disclosure feel */
.pr-item p,.pr-item .pr-tags,.spot p,.rc-item p,
.sy-block p,.sy-block li,.tl-item .tl-p{
opacity:0;transform:translateY(14px);
transition:opacity .85s cubic-bezier(.28,.11,.32,1),
transform .9s cubic-bezier(.28,.11,.32,1)}
.pr-item.in p,.pr-item.in .pr-tags,.spot.in p,.rc-item.in p,
.sy-block.in p,.sy-block.in li,.tl-item.in .tl-p{
opacity:1;transform:none;transition-delay:.42s}

/* Founder: breathing room between the frame and the bio paragraphs */
#found-list{margin-top:54px}
@media (min-width:1000px){#found-list{margin-top:76px}}

/* fix: ensure revealed elements fully reset transform (so .sc scale
   does not linger and inset the founder frame ~18px from the column) */
.rev.in{transform:none;filter:none}

/* order-independent reset: 3-class selector always beats .rev.sc */
.rev.sc.in,.rev.blur.in,.rev.in{transform:none!important;filter:none!important}

/* (register-rule motif removed at request — section headings keep
   their original spacing; list items keep their own top dividers) */

/* 5 — engineered headline: a hair tighter tracking */
.hero-h h1{letter-spacing:-.052em}
.h-dark,.h-light,.ch-h2{letter-spacing:-.045em}

/* 2 — eyebrow as a quiet section marker (numbers + coords removed) */
.eyebrow{position:relative;padding-right:0;font-size:13px;letter-spacing:.18em}
.eyebrow::after{content:none}
@media (min-width:760px){.eyebrow{font-size:13.5px;letter-spacing:.2em}}

/* 3 — micro data footnote above each spotlight number */
.spot .fig{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:var(--ind3);margin:0 0 10px}

/* 4 — single registration corner tick (echo of Founder frame) */
.spot{position:relative}
.spot::before{content:"";position:absolute;left:0;top:20px;width:9px;height:9px;
border-top:1px solid var(--ind);border-left:1px solid var(--ind);opacity:.45}

/* 1 — scroll-progress hairline inside the bottom pill */
.pill{position:relative}
.pill .pill-prog{position:absolute;left:0;bottom:0;height:2px;width:0;
background:var(--ind);opacity:.85;pointer-events:none;transition:width .12s linear}

/* ===== Top sticky nav (classic, replaces bottom pill on mobile too) ===== */
html{scroll-padding-top:78px}
.site-hdr{position:sticky;top:0;z-index:90;
background:rgba(0,0,0,.78);
backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
border-bottom:1px solid rgba(245,245,247,.08)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;
padding:14px max(20px,calc((100% - 1080px)/2));
height:60px;padding-top:calc(env(safe-area-inset-top,0px) + 14px);
height:calc(60px + env(safe-area-inset-top,0px))}
.site-hdr .brand{font-family:var(--sans);font-size:17px;font-weight:600;
letter-spacing:-.01em;color:var(--ind)}
.top-nav{display:flex;gap:24px;font-family:var(--mono);font-size:10.5px;
letter-spacing:.16em;text-transform:uppercase}
.top-nav a{position:relative;color:var(--ind2);padding-bottom:3px;
transition:color .2s}
.top-nav a:hover,.top-nav a.on{color:var(--ind)}
.top-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
background:var(--ind);transition:width .3s cubic-bezier(.28,.11,.32,1)}
.top-nav a.on::after{width:100%}

.nav-toggle{display:none;background:transparent;border:none;cursor:pointer;
width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;
gap:5px;z-index:100;position:relative;padding:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ind);
border-radius:1px;transition:transform .3s var(--ease),opacity .25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu-ov{position:fixed;inset:0;z-index:95;background:var(--dark);
display:none;flex-direction:column;justify-content:center;overflow-y:auto;
padding:calc(env(safe-area-inset-top,0px) + 96px) 28px calc(env(safe-area-inset-bottom,0px) + 40px)}
.menu-ov.open{display:flex;animation:menuFade .35s cubic-bezier(.28,.11,.32,1)}
@keyframes menuFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu-ov a{display:flex;align-items:baseline;gap:14px;padding:14px 0;
font-family:var(--sans);font-size:38px;font-weight:600;letter-spacing:-.025em;
color:var(--ind);border-bottom:1px solid var(--rd)}
.menu-ov a:last-of-type{border-bottom:none}
.menu-ov a .n{font-family:var(--mono);font-size:11px;color:var(--ind3);
letter-spacing:.18em;text-transform:uppercase;width:28px;flex:none}
.menu-ov .foot{margin-top:36px;font-family:var(--mono);font-size:11px;color:var(--ind2);
letter-spacing:.14em;text-transform:uppercase}

/* hide the bottom pill — top nav replaces it */
.pill-wrap{display:none!important}

@media (max-width:760px){
.top-nav{display:none}
.nav-toggle{display:flex}
}

/* Top-nav: brand morphs from "GRUENCY" to "NN · Section" on scroll */
.site-hdr .brand{position:relative;display:block;height:24px;min-width:170px}
.site-hdr .brand .bd-logo,.site-hdr .brand .bd-sec{position:absolute;left:0;top:50%;
white-space:nowrap;transition:opacity .35s ease,transform .45s cubic-bezier(.28,.11,.32,1)}
.site-hdr .brand .bd-logo{transform:translateY(-50%);
font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ind)}
.site-hdr .brand .bd-sec{transform:translateY(calc(-50% - 8px));opacity:0;
pointer-events:none;display:flex;align-items:baseline;gap:10px}
.site-hdr .brand .bd-n{font-family:var(--mono);font-size:11px;color:var(--ind3);letter-spacing:.16em}
.site-hdr .brand .bd-l{font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:-.005em;color:var(--ind)}
.site-hdr.scrolled .brand .bd-logo{opacity:0;transform:translateY(calc(-50% + 8px));pointer-events:none}
.site-hdr.scrolled .brand .bd-sec{opacity:1;transform:translateY(-50%)}

/* Hero headline — slightly smaller so long words don't clip */
.hero-h h1{font-size:66px}
@media (min-width:760px){.hero-h h1{font-size:88px}}
@media (min-width:1000px){.hero-h h1{font-size:100px}}

/* ===== Reading text — port of production "Apple-like" mobile rule:
   Raleway 600 · 18px · line-height 1.4 · full contrast · .003em ===== */
.fr-p,.pr-item p,.rc-item p,.sy-block p,.sy-block li,
.spot p,.ch-p,.hero-deck{
font-family:"Raleway",system-ui,-apple-system,"Segoe UI",sans-serif;
font-weight:600;letter-spacing:.003em;font-size:18px;line-height:1.4}
.fr-p.lead,.hero-deck{font-size:19px;line-height:1.42}
/* full-contrast color per background */
.sec-dark .fr-p,.sec-dark .spot p,.sec-dark .sy-block p,
.sec-dark .sy-block li,.sec-dark .ch-p,#hero .hero-deck{color:var(--ind)}
.sec-light .pr-item p,.sec-light .tl-p,
.sec-lightalt .rc-item p{color:var(--inl)}

/* sticky header — show only the section label (drop the chapter number) */
.site-hdr .brand .bd-n{display:none}
.site-hdr .brand .bd-sec{gap:0}

/* Section headings — match the hero size reduction (proportional scale) */
.h-dark,.h-light,.ch-h2,#specs h2{font-size:50px}
@media (min-width:760px){
.h-dark,.h-light,.ch-h2,#specs h2{font-size:64px}}
@media (min-width:1000px){
.h-dark,.h-light,.ch-h2,#specs h2{font-size:72px}}

/* (Timeline year sizes are now defined in the card layout block above.) */

/* Mobile only: tone down the loud spotlight numerals (11 / ∞ / A→Z) */
@media (max-width:759.98px){
.spot .num{font-size:76px;line-height:.95;letter-spacing:-.05em}
.spot .lab{margin-bottom:10px}
}

/* Mobile only: drop the framing rules of the hero spec strip — the
   numbers stand on their own; vertical dividers between cells stay */
@media (max-width:759.98px){
.spec-strip{border-top:none;border-bottom:none;padding:14px 0 0}
}

/* Mobile only: tiny line-height tighten on the reading copy
   (1.40 → 1.36, lead 1.42 → 1.38) for a slightly more compact feel */
@media (max-width:759.98px){
.fr-p,.pr-item p,.rc-item p,.sy-block p,.sy-block li,
.spot p,.ch-p,.hero-deck{line-height:1.36}
.fr-p.lead,.hero-deck{line-height:1.38}
}

/* Mobile menu overlay — Apple-style spacing/typography, no dividers,
   explicit close X always visible top-right (the morphed nav-toggle) */
@media (max-width:759.98px){
.menu-ov{justify-content:flex-start;
padding:calc(env(safe-area-inset-top,0px) + 92px) 28px calc(env(safe-area-inset-bottom,0px) + 32px)}
.menu-ov a{border-bottom:none;padding:18px 0;font-size:42px;font-weight:500;
letter-spacing:-.025em;line-height:1.05}
.menu-ov a .n{font-size:11px;color:var(--ind3);letter-spacing:.18em;
margin-right:18px;width:32px}
.menu-ov .foot{margin-top:auto;padding-top:24px}
/* ensure the close (morphed hamburger) sits above the overlay */
.nav-toggle{z-index:120}
.nav-toggle.open span{background:var(--ind)}
}

/* Mobile menu — smaller items, tighter spacing */
@media (max-width:759.98px){
.menu-ov a{padding:9px 0;font-size:28px;font-weight:500;
letter-spacing:-.02em;line-height:1.1}
.menu-ov a .n{font-size:10px;margin-right:14px;width:26px}
}

/* In-overlay close X (always visible top-right of opened menu) */
.menu-close{position:absolute;
top:calc(env(safe-area-inset-top,0px) + 18px);right:22px;
width:44px;height:44px;background:transparent;border:none;cursor:pointer;
z-index:5;display:flex;align-items:center;justify-content:center;padding:0}
.menu-close::before,.menu-close::after{content:"";position:absolute;
width:22px;height:2px;background:var(--ind);border-radius:1px}
.menu-close::before{transform:rotate(45deg)}
.menu-close::after{transform:rotate(-45deg)}

/* Mobile only: one more notch tighter on the reading copy (1.36 → 1.32) */
@media (max-width:759.98px){
.fr-p,.pr-item p,.rc-item p,.sy-block p,.sy-block li,
.spot p,.ch-p,.hero-deck{line-height:1.32}
.fr-p.lead,.hero-deck{line-height:1.34}
}

/* Remove the leading "§" before section numbers in eyebrows */
.eyebrow::before{content:none}

/* Editorial serif unified across ALL headings (Newsreader, like the old site) */
.hero-h h1,.h-dark,.h-light,.ch-h2,#specs h2,
.pr-item h3,.rc-item h3,.sy-block h3,
.fr-mark,.m-form h2,.m-sent .big{
font-family:var(--display);font-weight:500;letter-spacing:-.012em}
/* display tier: hero + section headings — tight line, large opsz */
.hero-h h1,.h-dark,.h-light,.ch-h2,#specs h2{
line-height:.98;font-variation-settings:"opsz" 72}
/* sub-heading tier: item titles — breathing line, smaller opsz */
.pr-item h3,.rc-item h3,.sy-block h3,
.fr-mark,.m-form h2,.m-sent .big{
line-height:1.1;font-variation-settings:"opsz" 36}
.hero-h h1 .chrome,.h-dark em,.h-light em,.ch-h2 .chrome,.fr-mark em{
font-style:italic;font-weight:500;letter-spacing:-.005em}

/* Adaptive sticky header — swap theme to match section underneath */
.site-hdr{transition:background .25s ease,border-color .25s ease}
.site-hdr.on-light{background:rgba(245,245,247,.82);border-bottom-color:rgba(0,0,0,.08)}
.site-hdr.on-light .brand,
.site-hdr.on-light .brand .bd-l{color:var(--inl)}
.site-hdr.on-light .top-nav a{color:var(--inl2)}
.site-hdr.on-light .top-nav a:hover,
.site-hdr.on-light .top-nav a.on{color:var(--inl)}
.site-hdr.on-light .top-nav a::after{background:var(--inl)}
.site-hdr.on-light .brand .bd-n{color:var(--inl3)}
.site-hdr.on-light .nav-toggle span{background:var(--inl)}
/* keep X bars visible on dark menu overlay when toggle is open */
.site-hdr.on-light .nav-toggle.open span{background:var(--ind)}