@font-face{font-family:"Instrument Serif";src:url(assets/fonts/InstrumentSerif-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Instrument Serif";font-style:italic;src:url(assets/fonts/InstrumentSerif-400-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-weight:400;src:url(assets/fonts/IBMPlexMono-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-weight:500;src:url(assets/fonts/IBMPlexMono-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";font-weight:600;src:url(assets/fonts/IBMPlexMono-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Courier Prime";font-weight:400;src:url(assets/fonts/CourierPrime-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Courier Prime";font-weight:700;src:url(assets/fonts/CourierPrime-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Rock Salt";src:url(assets/fonts/RockSalt-400-normal.woff2) format("woff2");font-display:swap}

/* Layout: a filed dossier. One sheet, ink-ruled sections numbered like drawing sheets. */
:root{
  /* brand constants (fixed in both themes; used on objects like cards and tiles) */
  --paper:#F3EEE3;--paper-2:#ECE5D6;--white:#FBFAF6;--ink:#151515;--night:#111;--grey:#8A877F;
  --klein:#2442E4;--sky:#BCD3EE;--stitch:#C9DAF8;--yellow:#F6D04D;--red:#E2442F;--orange:#EE7B1E;
  --pink:#F2B4AA;--mustard:#F3C84B;--forest:#1F3A2B;--plum:#3B2B3C;--slate:#49707F;--sage:#9EC4A9;
  --drawer:#E4E4E1;--stamp-ink:#4A3C8E;
  /* theme tokens */
  --bg:#F3EEE3;--bg-2:#ECE5D6;--sheet:#FBFAF6;--fg:#151515;--muted:#6E6B63;--rule:#15151526;
  --accent:#2442E4;--annot:#E2442F;--stamp:#4A3C8E;--grid:#2442E412;--shadow:#151515;--grain:.07;
  --serif:"Instrument Serif",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --type:"Courier Prime","Courier New",monospace;--hand:"Rock Salt","Comic Sans MS",cursive;
  --ease:cubic-bezier(.2,.8,.2,1);--beat:375ms;
  --wrap:1120px;--gut:24px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#111111;--bg-2:#181817;--sheet:#1C1C1B;--fg:#FBFAF6;--muted:#A9A69E;--rule:#FBFAF62B;
  --accent:#8EA2FF;--annot:#F6D04D;--stamp:#B9ACF0;--grid:#8EA2FF14;--shadow:#000;--grain:.05;color-scheme:dark}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{background:var(--bg);color:var(--fg);font-family:var(--serif);font-size:19px;line-height:1.45;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-weight:400;text-wrap:balance}
em{font-style:italic}

/* grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@media (prefers-color-scheme:dark){body::after{mix-blend-mode:screen}}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.muted{color:var(--muted)}
.hand{font-family:var(--hand);color:var(--annot);font-size:18px;line-height:1.3}
.it{font-style:italic}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{position:relative}

.pill{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:14px 26px;font-family:var(--mono);font-weight:500;font-size:15px;text-decoration:none;transition:transform var(--beat) var(--ease)}
.pill:hover{transform:translateY(-2px)}
.pill.black{background:var(--fg);color:var(--bg)}

/* ---------- TOP BAR ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--bg)}
.nav .wrap>div{display:flex;justify-content:space-between;align-items:center;gap:16px;height:64px;border-bottom:1.5px solid var(--fg)}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--fg)}
.brand svg{height:30px;width:auto;display:block}
.navlink{text-decoration:none}
.navlink:hover{color:var(--accent)}

/* ---------- SECTION FRAME ---------- */
.sec{padding-block:56px 72px;border-top:1.5px solid var(--fg)}
.sh{display:grid;grid-template-columns:150px 1fr;gap:24px;margin-bottom:44px}
.sh .no{font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding-top:12px}
.sh h2{font-size:clamp(40px,5.4vw,72px);line-height:.95;letter-spacing:-.02em}
.sh h2 em,.closing h2 em{color:var(--accent)}
.sh p{margin-top:14px;max-width:56ch;font-size:20px}

/* how it works: three turns of the conversation */
.turns{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.turn{padding:22px 24px;min-height:230px;display:flex;flex-direction:column;gap:14px;box-shadow:0 14px 30px rgba(40,25,5,.16)}
.turn .who{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.turn p{font-family:var(--type);font-size:21px;line-height:1.3;flex:1}
.turn .step{font-size:11px;opacity:.75}
.turns .turn:nth-child(1){transform:rotate(-1deg)}.turns .turn:nth-child(3){transform:rotate(.8deg)}
.turns .turn.rv:not(.in){transform:translateY(28px)}

/* why */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.points>div{border-top:1.5px solid var(--fg);padding-top:14px}
.points h3{font-size:30px;line-height:1.05;margin-bottom:8px}
.points p{font-size:18px;color:var(--muted)}
.specs{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.specs li{border:1.5px solid var(--fg);border-radius:999px;padding:8px 16px;font-size:12px}
.specs .muted{margin-right:6px}

/* closing */
.closing{text-align:left}
.closing h2{font-size:clamp(48px,7vw,96px);line-height:.92;letter-spacing:-.02em;margin-bottom:36px}

/* ---------- HERO (book cover) ---------- */
.hero{padding-block:72px 88px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.kicker{margin-bottom:24px;display:flex;gap:12px;align-items:center}
.kicker i{width:9px;height:9px;border-radius:50%;background:var(--annot);display:inline-block;animation:blink 1.5s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
h1{font-size:clamp(52px,7.4vw,104px);line-height:.92;letter-spacing:-.02em}
h1 .under{position:relative;display:inline-block;color:var(--accent)}
h1 .under svg{position:absolute;left:-4%;bottom:-.12em;width:108%;height:.3em;overflow:visible}
.ink path{fill:none;stroke:var(--annot);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease) .3s}
.in .ink path,.ink.in path{stroke-dashoffset:0}
.lede{font-size:22px;max-width:36ch;margin:28px 0 32px;line-height:1.35}
/* waitlist */
.join{position:relative;max-width:520px}
.join label{display:block;margin-bottom:10px}
.field{display:flex;gap:8px;flex-wrap:wrap}
.field input{flex:1 1 240px;min-width:0;font-family:var(--mono);font-size:15px;color:var(--fg);background:var(--sheet);border:1.5px solid var(--fg);border-radius:999px;padding:13px 20px}
.field input::placeholder{color:var(--muted)}
.join button[disabled]{opacity:.6;cursor:progress}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.status{min-height:1.6em;margin-top:12px;font-size:11.5px}
.status.err{color:var(--annot)}
.join .stamp{position:absolute;right:8px;top:-6px;font-family:var(--mono);font-size:14px;letter-spacing:.1em;border:2.5px solid var(--stamp);color:var(--stamp);background:var(--bg);padding:4px 12px;transform:rotate(-8deg) scale(1.4);opacity:0;pointer-events:none;transition:.25s var(--ease)}
.join.done .stamp{opacity:1;transform:rotate(-8deg) scale(1)}
.join.done .field{opacity:.35;pointer-events:none}

/* hero drawing */
.dwg-wrap{position:relative;max-width:600px;justify-self:center;width:100%;padding-bottom:40px}
.dwg{position:relative;background:var(--sheet);border:1.5px solid var(--fg);padding:18px;box-shadow:10px 12px 0 var(--shadow);transform:rotate(1.2deg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:20px 20px}
.dwg>svg{width:100%;height:auto;display:block;overflow:visible;color:var(--accent)}
.ink-lines .d{fill:none;stroke:var(--fg);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease)}
.ink-lines .hid{stroke-dasharray:.012 .008}
.ink-lines .cl{stroke:var(--annot);stroke-width:1;stroke-dasharray:.03 .01 .005 .01}
.ink-lines .dim .d{stroke:var(--accent);stroke-width:1.2}
.ink-lines text{font-family:var(--mono);font-size:13px;fill:var(--accent);opacity:0;transition:opacity .4s}
.ink-lines .view{fill:var(--muted);font-size:11px;letter-spacing:.1em}
.ink-lines .tb rect,.ink-lines .tb line{fill:none;stroke:var(--fg);stroke-width:1.5}
.ink-lines .tb text{fill:var(--fg);font-size:11px;opacity:1}
.ink-lines .tb .big{font-family:var(--serif);font-size:22px;font-style:italic}
.ink-lines .tb text.nobody-t{font-family:var(--hand);font-size:15px;fill:var(--annot);opacity:0;transition:opacity .4s 2.6s}
.dwg.in .d{stroke-dashoffset:0}
.dwg.in .hid{stroke-dashoffset:0;stroke-dasharray:.012 .008}
.dwg.in text,.dwg.in .tb text.nobody-t{opacity:1}
.bubble{position:absolute;left:-30px;bottom:0;max-width:330px;background:var(--pink);color:var(--ink);padding:14px 18px 16px;transform:rotate(-2.5deg);box-shadow:0 12px 28px rgba(40,25,5,.22);z-index:2}
.bubble .mono{font-size:11px;opacity:.7}
.bubble p{font-family:var(--type);font-size:18px;line-height:1.3;min-height:2.6em}
.bubble p::after{content:"▍";animation:blink .8s steps(2) infinite}

/* ---------- RENDERS ---------- */
.colours{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.colours figure{background:var(--white);color:var(--ink);transition:transform .4s var(--ease)}
.colours figure:hover{transform:translateY(-4px)}
.colours img.iso{width:100%;aspect-ratio:1;object-fit:contain;padding:6%}
.colours figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:0 12px 12px}
.colours figcaption span{display:block;color:#6E6B63;font-size:10.5px;margin-top:3px}
/* ---------- FOOTER ---------- */
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:20px 32px;border-top:1.5px solid var(--fg);flex-wrap:wrap}
.foot img{display:block}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .bubble{left:0}
  .colours{grid-template-columns:repeat(2,1fr)}
  .turns,.points{grid-template-columns:1fr}
  .turn{min-height:0}
}
@media (max-width:760px){
  .sh{grid-template-columns:1fr;gap:8px}.sh .no{padding-top:0}
}
@media (max-width:560px){
  :root{--gut:16px}
  body{font-size:17px}
  .sec{padding-block:40px 56px}
  .hero{padding-block:48px 64px}
  .join .stamp{top:-30px}
  .lede{font-size:20px}
  .brand svg{height:26px}
  .dwg{box-shadow:6px 8px 0 var(--shadow);margin-right:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .ink path{stroke-dashoffset:0}
}