/* ============================================================
   VOOL — free, open-source personal AI
   paper, ink, one red. hairlines, mono, the mark. that's it.
   ============================================================ */

:root{
  --paper:#F4F1EA;
  --paper-2:#EDE9E0;
  --ink:#1C1A14;
  --char:#454136;
  --mut:#7C7668;
  --line:rgba(28,26,20,.16);
  --line-strong:rgba(28,26,20,.34);
  --red:#C2401C;
  --btn-hover:#0d0c08;
  --req-bg:rgba(28,26,20,.045);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
  --sans:"Archivo",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1180px;
  --pad:clamp(20px,4.5vw,48px);
}

/* dark: deep space black. ink is a clean off-white; red lifts one step
   so small text keeps its bite. */
[data-theme="dark"]{
  --paper:#050505;
  --paper-2:#0D0D0C;
  --ink:#EDEDE9;
  --char:#B4B4AD;
  --mut:#8A8A82;
  --line:rgba(237,237,233,.14);
  --line-strong:rgba(237,237,233,.32);
  --red:#D0502A;
  --btn-hover:#F7F7F3;
  --req-bg:rgba(237,237,233,.055);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  transition:background .25s ease,color .25s ease;
}
/* faint paper grain */
body::after{
  content:"";
  position:fixed;inset:0;z-index:2000;pointer-events:none;
  background-image:var(--grain);
}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
a{color:inherit}
button{font:inherit;color:inherit}
.mono{font-family:var(--mono)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip{
  position:absolute;left:16px;top:-60px;z-index:3000;
  background:var(--ink);color:var(--paper);padding:10px 16px;
  font:500 13px var(--sans);border-radius:2px;text-decoration:none;
  transition:top .2s ease;
}
.skip:focus{top:16px}

/* ---------- the mark ---------- */
.vmark{fill:currentColor;color:var(--ink);display:block;height:auto}
/* the blink lives inside the shared defs as SMIL so every <use> instance
   shares it; script.js strips it under prefers-reduced-motion */

/* ---------- doodles ---------- */
.note{font:400 11px/1.55 var(--mono);color:var(--mut);margin:0}
.note-arr{width:26px;height:11px;flex:none;margin-top:2px;stroke:var(--mut);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.draw{stroke-dasharray:1}
html.js .draw{stroke-dashoffset:1}
html.js .in .draw,html.js .draw.in{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.5,0,.2,1) var(--dd,.15s)}

/* red scribble underline */
.scribble{position:relative;white-space:nowrap}
.scribble svg{position:absolute;left:-2%;bottom:-.06em;width:104%;height:.18em;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--red);stroke-width:3.5px;stroke-linecap:round}

/* ---------- reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease var(--rd,0s),transform .7s cubic-bezier(.2,.6,.2,1) var(--rd,0s)}
html.js .reveal.in{opacity:1;transform:none}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:18px;height:62px}
.brand{text-decoration:none;display:flex;align-items:center;gap:11px}
.brand-mark{width:23px}
.brand-name{font:700 15px var(--sans);letter-spacing:.14em}
.head-chip{font-size:10.5px;color:var(--mut);border:1px solid var(--line);border-radius:2px;padding:4px 8px;letter-spacing:.06em;white-space:nowrap}
.head-nav{margin-left:auto;display:flex;gap:24px}
.head-nav a{
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--char);
}
.head-nav a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px;text-decoration-thickness:2px}
.head-cta{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--ink);border-radius:2px;padding:9px 14px;color:var(--ink);
  transition:background .15s ease,color .15s ease;
}
.head-cta:hover{background:var(--ink);color:var(--paper)}

/* theme toggle — hand-drawn moon in light, sun in dark */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--line-strong);border-radius:2px;
  color:var(--char);transition:color .15s ease,border-color .15s ease;
}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink)}
.theme-toggle svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
html:not([data-theme]) .theme-toggle .icon-moon{display:block}

/* ---------- hero ---------- */
.hero{padding-top:clamp(40px,7vh,72px);padding-bottom:clamp(80px,10vw,130px)}
.hero-id{position:relative;margin-bottom:clamp(30px,4vw,44px)}
.hero-mark{width:clamp(140px,19vw,216px)}
.hero-id-note{
  position:absolute;left:calc(clamp(140px,19vw,216px) + 34px);bottom:16px;
  display:flex;align-items:flex-end;gap:8px;
}
h1{
  margin:0;
  font-size:clamp(36px,5.4vw,68px);
  line-height:1.05;letter-spacing:-.025em;font-weight:600;
  max-width:880px;
}
.h1-quiet{display:block;color:var(--char)}
.h1-loud{display:block}
.hero-grid{
  margin-top:clamp(36px,5vw,60px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.95fr);
  gap:clamp(44px,6vw,96px);align-items:start;
}
.hero-sub{
  margin:0;max-width:520px;
  font-size:17.5px;line-height:1.65;color:var(--char);
}
.hero-cta{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.hero-meta{margin:26px 0 0;font-size:11.5px;letter-spacing:.08em;color:var(--mut)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--paper);text-decoration:none;
  border:1px solid var(--ink);border-radius:2px;
  padding:15px 24px;font:500 15px/1 var(--sans);
  transition:background .15s ease;
}
.btn:hover{background:var(--btn-hover)}
.btn-arr{display:inline-block;transition:transform .2s ease}
.btn:hover .btn-arr{transform:translateX(3px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line-strong);border-radius:2px;
  padding:14px 18px;font-size:12.5px;letter-spacing:.06em;text-decoration:none;
  color:var(--ink);transition:border-color .15s ease;
}
.btn-ghost:hover{border-color:var(--ink)}

/* run panel (hero diagram) */
.run-panel{position:relative;border:1px solid var(--ink);border-radius:2px;padding:22px 24px 18px;background:var(--paper)}
.run-title{margin:0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.run-req{
  margin:14px 0 0;padding:13px 15px;
  background:var(--req-bg);border:1px solid var(--line);border-radius:2px;
  font-size:12.5px;line-height:1.6;color:var(--ink);
}
.run-arrow{display:block;width:16px;margin:8px auto 4px;stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.run-flow{margin:4px 0 14px;text-align:center;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.run-answers{border-top:1px solid var(--line-strong)}
.d-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 2px;border-bottom:1px dashed var(--line);
}
.d-name{font-size:12.5px;color:var(--ink)}
.chip{
  display:inline-block;white-space:nowrap;
  border:1px solid var(--ink);border-radius:2px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;
}
.chip-ok{border-color:var(--line-strong);color:var(--char)}
.chip-refuse{border-color:var(--red);color:var(--red)}
.chip-fail{border-style:dashed;border-color:var(--line-strong);color:var(--mut)}
.chip-open{border-style:dotted;border-color:var(--line-strong);color:var(--mut)}
.d-hot{border-left:2px solid var(--red);padding-left:10px;margin-left:-2px}
/* sits inside the panel, under the rows it refers to — never overflows at any width */
.run-note{display:flex;gap:9px;align-items:flex-start;justify-content:flex-end;margin-top:14px}
html.js .run-note{transform:none} /* no entry slide: its arrow line-draw is the entrance */
.note-arr-up{width:11px;height:26px}
.run-foot{margin:14px 0 0;font-size:10.5px;letter-spacing:.06em;color:var(--mut)}

/* ---------- sections ---------- */
.sec{padding-block:clamp(90px,13vw,160px)}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:clamp(36px,5vw,58px)}
.sec-no{font-size:12px;color:var(--red)}
.sec-kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.sec-rule{flex:1;border-top:1px solid var(--line)}
h2{
  margin:0;max-width:760px;
  font-size:clamp(32px,4.4vw,54px);
  line-height:1.07;letter-spacing:-.02em;font-weight:600;
}
.sec-sub{margin:26px 0 0;max-width:540px;font-size:16.5px;line-height:1.65;color:var(--char)}
.strong{font-weight:600;color:var(--ink)}
.red{color:var(--red)}

/* ---------- 01 demands ---------- */
.demand-grid{
  margin-top:clamp(44px,6vw,72px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(44px,7vw,110px);align-items:start;
}
.demand-line{
  margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line);
  font-size:clamp(19px,2.2vw,24px);font-weight:500;letter-spacing:-.01em;line-height:1.35;
}
.states{border:1px solid var(--line-strong);border-radius:2px;padding:22px 24px}
.states-t{margin:0 0 16px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.states-l{margin:0}
.states-l>div{
  display:grid;grid-template-columns:172px 1fr;gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px dashed var(--line);
}
.states-l>div:last-child{border-bottom:0}
.states-l dd{margin:0;font-size:12.5px;color:var(--char)}
.states-note{margin-top:16px}

/* ---------- 02 proof ---------- */
.proof-grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(48px,7vw,110px);align-items:start;
}
.proof-note{margin-top:44px;display:flex;gap:8px;align-items:flex-start}
.receipt{
  border:1px solid var(--ink);border-radius:2px;background:var(--paper);
  padding:26px 30px 22px;rotate:-.4deg;
}
.receipt-head{
  display:flex;align-items:center;gap:12px;
  padding-bottom:16px;border-bottom:1px solid var(--line-strong);
  font:500 11.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;
}
.receipt-head .r-no{margin-left:auto;color:var(--mut);letter-spacing:.04em;text-transform:none}
.r-body{margin:0}
.r-row{
  display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px dashed var(--line);font-size:12.5px;
}
html.js .r-row{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;transition-delay:var(--rd,0s)}
html.js .receipt.in .r-row{opacity:1;transform:none}
.r-row dt{color:var(--mut)}
.r-row dd{margin:0;overflow-wrap:anywhere}
.receipt-foot{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-strong);
  font-size:11px;color:var(--char);
}

/* ---------- 03 models — mermaid-style flow ---------- */
.pipeline{margin-top:clamp(48px,6vw,76px)}
.mnode-row,.mout-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.5vw,28px)}
.mnode{
  border:1px solid var(--line-strong);border-radius:2px;background:var(--paper);
  padding:16px 18px 14px;
}
.mnode-t{margin:0;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.mnode-b{margin:9px 0 0;font-size:11px;line-height:1.6;color:var(--mut)}
.mnode-out{display:flex;align-items:center;justify-content:center;text-align:center;padding:15px 10px}
.mnode-out .mnode-t{font-size:11px}
.mmob-arrow{display:none}
.mjoin{position:relative;height:96px}
.mjoin-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mjoin-svg path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.medge{
  position:absolute;left:50%;top:36px;transform:translateX(-50%);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  padding:3px 9px;white-space:nowrap;
}
.pipe-bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  border:1.5px solid var(--ink);border-radius:2px;padding:20px 26px;background:var(--paper);
}
.pipe-label{font:500 13px var(--mono);letter-spacing:.18em;text-transform:uppercase}
.pipe-mark{width:19px}
.pipe-arrow{display:block;margin:26px auto;width:16px;stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.mfan{position:relative;height:118px}
.mfan-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mfan-svg path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.mfan .medge{top:14px}
.msplit-mob{display:none;flex-direction:column;align-items:center;gap:4px}
.msplit-mob .f-arrow{width:16px;height:auto;stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.msplit-mob .medge{position:static;transform:none}
.mnode-out{display:flex;align-items:center;justify-content:center;text-align:center;padding:15px 10px}
.mnode-out .mnode-t{font-size:11px}
.models-foot{
  margin:clamp(44px,6vw,64px) 0 0;padding-top:26px;border-top:1px solid var(--line);
  max-width:660px;font-size:clamp(19px,2.2vw,24px);font-weight:500;letter-spacing:-.01em;
}

/* ---------- 04 controlled power ---------- */
.gate{
  margin-top:clamp(44px,6vw,72px);max-width:860px;
  border-top:1px solid var(--line-strong);
}
.gate-row{
  display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;
  padding:15px 2px;border-bottom:1px dashed var(--line);
}
.gate-who{
  font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:2px;padding:6px 11px;
}
.gate-act{font:400 12px var(--mono);color:var(--mut)}
.gate-step{font:500 13px var(--mono);letter-spacing:.12em;text-transform:uppercase;min-width:190px}
.gate-d{font:400 12.5px var(--mono);color:var(--mut)}
.gate-out{border-bottom:1px solid var(--line-strong)}
.gate-out .gate-step{color:var(--red)}
.control-foot{
  margin-top:clamp(44px,6vw,64px);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(36px,6vw,90px);align-items:start;
}
.control-foot p{margin:0;max-width:460px;font-size:16.5px;line-height:1.65;color:var(--char)}
.council{border-left:2px solid var(--ink);padding-left:22px}
.council-t{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.council-b{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--char)}

/* ---------- 05 recovery ---------- */
.recovery-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(48px,7vw,110px);align-items:start;
}
.recovery-line{
  margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line);
  font-size:clamp(19px,2.2vw,24px);font-weight:500;letter-spacing:-.01em;line-height:1.35;
}
.journey{position:relative;border:1px solid var(--line-strong);border-radius:2px;padding:26px 28px}
.j-row{
  position:relative;display:grid;grid-template-columns:34px 1fr;gap:16px;
  padding:12px 0;
}
.j-row:not(:last-child)::before{
  content:"";position:absolute;left:15px;top:44px;bottom:-6px;
  border-left:1px solid var(--line);
}
.j-n{
  width:30px;height:30px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);border-radius:50%;
  font:500 12px var(--mono);background:var(--paper);position:relative;z-index:1;
}
.j-t{margin:2px 0 0;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.j-d{margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--mut)}
.j-last .j-n{border-color:var(--red);color:var(--red)}

/* ---------- 06 developers ---------- */
.sec-dev .sec-sub{margin-top:22px}
.dev-grid{
  list-style:none;margin:clamp(40px,5vw,60px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,80px);
}
.dev-grid li{
  border-top:1px dashed var(--line);
  padding:13px 0;font-size:12.5px;line-height:1.6;color:var(--char);
}
.dev-cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 07 manifesto ---------- */
.sec-manifesto{padding-block:clamp(110px,16vw,200px)}
.creed{list-style:none;margin:clamp(48px,6vw,72px) 0 0;padding:0}
.creed li{
  display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:baseline;
}
.creed li + li{margin-top:clamp(34px,5vw,58px)}
.creed-no{font-size:12px;color:var(--mut)}
.creed p{
  margin:0;max-width:880px;
  font-size:clamp(21px,3.8vw,46px);line-height:1.16;letter-spacing:-.02em;font-weight:500;
}
.creed-foot{margin-top:clamp(56px,8vw,92px);max-width:600px}
.creed-foot p{margin:0;font-size:17.5px;line-height:1.65;color:var(--char)}
.creed-sig{margin:22px 0 0;font-size:12px;color:var(--mut)}

/* ---------- cta ---------- */
.sec-cta{border-top:1px solid var(--line);padding-block:clamp(110px,15vw,190px)}
.cta-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.cta-mark{width:64px;margin-bottom:34px}
.cta-in h2{font-size:clamp(34px,5vw,60px);max-width:none}
.cta-row{margin-top:44px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
.cta-foot{margin:34px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:clamp(56px,8vw,84px) 0 40px}
.foot-grid{display:grid;grid-template-columns:1fr auto auto;gap:clamp(40px,7vw,110px)}
.foot-word{font:700 20px var(--sans);letter-spacing:.14em}
.foot-brand .note{margin-top:16px}
.foot-social{display:flex;align-items:center;gap:10px;margin-top:24px}
.soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:2px;
  color:var(--mut);text-decoration:none;
  transition:color .15s ease,border-color .15s ease;
}
.soc:hover{color:var(--ink);border-color:var(--ink)}
.soc svg{width:16px;height:16px;display:block}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-h{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:5px}
.foot-col a{font-size:13px;color:var(--char);text-decoration:none}
.foot-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.foot-base{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(48px,7vw,72px);padding-top:22px;border-top:1px solid var(--line);
  font-size:11px;color:var(--mut);
}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .hero-grid{grid-template-columns:1fr}
  .run-panel{max-width:520px}
  .demand-grid,.proof-grid,.recovery-grid{grid-template-columns:1fr;gap:52px}
  .control-foot{grid-template-columns:1fr;gap:36px}
}
@media (max-width:900px){
  .head-nav,.head-chip{display:none}
  .theme-toggle{margin-left:auto}
  .head-cta{margin-left:0}
}
@media (max-width:640px){
  html{scroll-padding-top:72px}
  h2 br{display:none}
  .scribble{white-space:normal}
  .hero-id-note{position:static;margin-top:16px}
  .src-row{grid-template-columns:1fr;gap:22px}
  .dev-grid{grid-template-columns:1fr}
  .states-l>div{grid-template-columns:1fr;gap:8px}
  .gate-step{min-width:0}
  .r-row{grid-template-columns:88px 1fr;gap:10px;font-size:11.5px}
  .receipt{padding:20px 18px 16px}
  .creed li{grid-template-columns:48px 1fr}
  .foot-grid{grid-template-columns:1fr;gap:40px}
  .d-row{flex-direction:column;align-items:flex-start;gap:7px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .reveal{opacity:1;transform:none}
  .draw{stroke-dashoffset:0}
  html.js .r-row{opacity:1;transform:none}
}

/* ============================================================
   CONCEPT LAYER — my own push: monumental hero, replay strip,
   rail, said-vs-happened, hover receipts, print. everything
   above stays the READY system.
   ============================================================ */

/* ---- monumental hero ---- */
.hero{padding-top:clamp(36px,6vh,64px)}
.hero-id{margin-bottom:clamp(26px,3.5vw,40px)}
.hero-mark{width:clamp(170px,26vw,300px)}
h1{font-size:clamp(42px,7vw,96px);max-width:1020px}
.hero-sub{max-width:640px;margin-top:clamp(26px,3.5vw,38px);font-size:19px}
.hero-cta{margin-top:34px}
.hero-grid{display:block}
.run-panel{margin-top:clamp(48px,6vw,76px)}

/* wide run strip: request left, ledger right */
.run-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.run-replay{
  background:none;border:1px solid var(--line-strong);border-radius:2px;
  padding:5px 10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);cursor:pointer;transition:color .15s ease,border-color .15s ease;
}
.run-replay:hover{color:var(--ink);border-color:var(--ink)}
.run-cols{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.4fr);gap:clamp(24px,3.5vw,56px);margin-top:16px}
.run-left{display:flex;flex-direction:column}
.run-arrow{margin:10px 0 6px}
.run-flow{text-align:left}
.run-answers{border-top:1px solid var(--line-strong)}
.d-row{position:relative}
.d-row::after{
  content:attr(data-receipt);
  position:absolute;left:2px;bottom:-4px;
  font:400 9.5px var(--mono);letter-spacing:.02em;color:var(--mut);
  opacity:0;transform:translateY(2px);transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;background:var(--paper);padding:0 4px;
}
@media (hover:hover){
  .d-row:hover::after{opacity:1;transform:none}
  .d-row:hover .chip{border-color:var(--ink)}
}

/* ---- replay choreography (armed only when JS + motion allowed) ---- */
.caret{display:none}
html.js .replay-armed .caret{
  display:inline-block;width:.55em;height:1em;background:var(--ink);
  vertical-align:-.15em;margin-left:2px;
  animation:caret 1s steps(1) infinite;
}
html.js .replay-armed .caret.done{display:none}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
html.js .replay-armed .run-flow,
html.js .replay-armed .d-row,
html.js .replay-armed .run-note,
html.js .replay-armed .run-foot{opacity:0;transition:opacity .5s ease,transform .5s ease;transform:translateY(8px)}
html.js .replay-armed .in-el{opacity:1;transform:none}
/* chips show a pending "…" until their demand resolves */
html.js .replay-armed .chip::before{content:"…"}
html.js .replay-armed .chip-text{display:none}
html.js .replay-armed .chip.resolved::before{content:none}
html.js .replay-armed .chip.resolved .chip-text{display:inline}

/* ---- side rail ---- */
.rail{
  position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:90;
  display:none;flex-direction:column;gap:13px;
}
.rail a{font-size:10px;letter-spacing:.08em;text-decoration:none;color:var(--mut);transition:color .15s ease}
.rail a:hover{color:var(--ink)}
.rail a.on{color:var(--red)}
@media (min-width:1300px){.rail{display:flex}}

/* ---- proof: said vs happened ---- */
.said-happened{margin-top:34px;border-top:1px solid var(--line)}
.sh-row{
  display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px dashed var(--line);font-size:12.5px;
}
.sh-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.sh-text{color:var(--char)}
.sh-text .red{color:var(--red)}

/* ---- honesty strip ---- */
.wont{margin-top:40px}
.wont-t{margin:0 0 12px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.wont ul{list-style:none;margin:0;padding:0}
.wont li{
  padding:8px 0 8px 22px;border-bottom:1px dashed var(--line);
  font-size:12.5px;color:var(--char);position:relative;
}
.wont li::before{content:"—";position:absolute;left:0;color:var(--red)}

/* ---- manifesto scale + grid break ---- */
.creed p{font-size:clamp(26px,5vw,68px)}
.creed-mid p{margin-left:clamp(0px,18vw,240px);max-width:none}

/* ---- print: it's a technical publication, let it print like one ---- */
@media print{
  .site-head,.rail,.theme-toggle,.run-replay,.foot-social,.hero-id-note,.run-note{display:none!important}
  body{background:#fff;color:#000;overflow:visible}
  body::after{display:none}
  .sec{padding-block:22px;page-break-inside:avoid}
  .sec + .sec{border-top-color:#ccc}
  .receipt{rotate:none;border-color:#000}
  .reveal,.d-row,.r-row{opacity:1!important;transform:none!important}
  .run-req-text{display:inline!important}
  a{color:#000;text-decoration:none}
}

/* ---- concept responsive ---- */
@media (max-width:1060px){
  .run-cols{grid-template-columns:1fr}
  .run-arrow{transform:rotate(90deg);margin:12px auto 8px;width:14px}
  .run-flow{text-align:center}
  .mnode-row,.mout-row{grid-template-columns:1fr}
  .mnode-row .mnode + .mnode{margin-top:10px}
  .mjoin{display:none}
  .mfan{display:none}
  .msplit-mob{display:flex}
  .mmob-arrow{display:block;margin:14px auto 10px;width:16px;stroke:var(--ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
}
@media (max-width:640px){
  h1{font-size:clamp(38px,10.5vw,52px)}
  .hero-mark{width:clamp(140px,38vw,200px)}
  .sh-row{grid-template-columns:1fr;gap:4px}
}

/* ---- language globe + menu ---- */
.lang-wrap{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  background:none;border:1px solid var(--line-strong);border-radius:2px;
  padding:8px 10px;color:var(--char);cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.lang-btn:hover{color:var(--ink);border-color:var(--ink)}
.lang-btn svg{width:17px;height:17px;flex:none}
.lang-btn svg path{stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lang-code{font:500 10px var(--mono);letter-spacing:.12em}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:80;
  background:var(--paper);border:1px solid var(--ink);border-radius:2px;
  min-width:176px;padding:4px 0;max-height:70vh;overflow-y:auto;
  box-shadow:5px 5px 0 rgba(28,26,20,.14);
}
.lang-menu button{
  display:block;width:100%;text-align:left;background:none;border:0;
  padding:8px 14px;font:400 12px var(--mono);color:var(--char);cursor:pointer;
}
.lang-menu button:hover{color:var(--ink);background:rgba(28,26,20,.05)}
.lang-menu button.on{color:var(--red)}
[data-theme="dark"] .lang-menu{background:#0b0b0b}
[data-theme="dark"] .lang-menu button:hover{background:rgba(237,237,233,.06)}


/* ---- deploy fixes (tools/stage_site.py) --------------------------------
   The inline <svg class="defs"> sprite that holds the #vm mark is a direct
   child of <body> and no stylesheet ever hid it, so it rendered as a ~150px
   inline box above the header and pushed the whole page down. Collapse it
   without display:none, which can break <use> references to its symbols. */
svg.defs {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden;
  pointer-events: none;
}

/* ---- downloads not yet public -----------------------------------------
   The anchors keep their classes so the design is unchanged, but an <a>
   with no href is not a link: no pointer, no focus, no crawlable target. */
a[data-soon] {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}
.cta-soon {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .62;
}
.cta-soon::before { content: "—"; margin-right: .55em; opacity: .5; }

/* ---- hero: logo left, headline right (desktop only) -----------------
   Stacked, the headline sat at full width and pushed the CTA 83px below a
   900px fold. Side by side the whole hero fits one screen. Below 1061px the
   original stacked layout is kept untouched. The 0.6/1.4 split matters: at a
   narrower right column the headline wraps so the em dash is stranded on a
   line of its own. */
@media (min-width: 1061px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1.4fr);
    column-gap: clamp(40px, 4.5vw, 76px);
    align-content: start;
  }
  .hero-id   { grid-column: 1; grid-row: 1 / 5; align-self: center; margin-bottom: 0; }
  .hero h1   { grid-column: 2; grid-row: 1; margin-top: 0;
               font-size: clamp(40px, 4.6vw, 66px); }
  .hero-sub  { grid-column: 2; grid-row: 2; max-width: 560px; }
  .hero-cta  { grid-column: 2; grid-row: 3; }
  .hero-meta { grid-column: 2; grid-row: 4; }
  .run-panel { grid-column: 1 / -1; grid-row: 5; }
  .hero-mark { width: clamp(150px, 15vw, 200px); }
  /* the note is absolutely positioned right of the mark; in a narrow left
     column it has to flow underneath instead */
  .hero-id-note { position: static; margin-top: 18px; justify-content: flex-start; }
}

/* ---- hero note arrow must point at the mark -------------------------
   641-1060px the note is absolutely positioned to the RIGHT of the mark, so
   the horizontal left-pointing arrow is correct. Everywhere else the note sits
   BELOW the mark, so the vertical up-pointing arrow is the correct one. */
.hero-id-note .note-arr-up { display: none; }
.proof-note .note-arr-up { display: block; }
@media (min-width: 1061px), (max-width: 640px) {
  .hero-id-note { align-items: flex-start; }
  .hero-id-note .note-arr:not(.note-arr-up) { display: none; }
  .hero-id-note .note-arr-up { display: block; margin-top: -6px; }
}

/* ---- footer: balance the grid --------------------------------------
   Was `729px | 67px | 86px` with a 101px gap and 48px of dead space to the
   right of the last column: a very wide brand cell holding one word and two
   short lines, then two narrow link columns crammed against the edge. Give
   the columns real width and distribute the space instead. */
.site-foot .foot-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
  align-items: start;
}
.site-foot { padding-top: clamp(48px, 5.5vw, 68px); }
.site-foot .foot-brand .note { margin-bottom: 18px; }

@media (max-width: 860px) {
  .site-foot .foot-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 34px;
  }
  .site-foot .foot-brand { grid-column: 1 / -1; }
}

/* No stray gap at the very top or bottom of the document. */
html, body { margin: 0; padding: 0; }
body > svg.defs:first-of-type { display: block; }