/* ArBloodhound — site styles.
   Palette and texture are taken from Rafael's own drawings: heavy black oil-pastel fields,
   white sketchbook paper, chalk on concrete, and the pastels on top of them — sky, cobalt,
   coral, hot pink, lavender, violet, marigold, orange, green, silver. The hand-drawn
   wordmark (cyan sketchbook + black chalk) is the source of truth.
   Every artwork is legible as static SVG; assets/perspective.js only adds depth. */

@font-face{font-family:"ArBloodhound";src:url("/assets/fonts/ArBloodhound-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"ArBloodhound";src:url("/assets/fonts/ArBloodhound-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ArBloodhound";src:url("/assets/fonts/ArBloodhound-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* drawing palette */
  --ink-black:#111014; --paper:#f6f3ec; --concrete:#b5aa8e;
  --sky:#3fb6f2; --cobalt:#2148cc; --coral:#e8495a; --pink:#ff63a8; --blush:#f6a9c9;
  --lavender:#c7a2e6; --violet:#8a57c9; --marigold:#f5c632; --orange:#f39a3d; --green:#2a9d6c; --silver:#b9bcc4;
  --neon:#b537f2;
  /* dark theme = black pastel ground */
  --bg:#111014; --bg-soft:#19171d; --bg-deep:#0b0a0d;
  --panel:rgba(246,243,236,.035); --panel-2:rgba(246,243,236,.065);
  --text:#f3efe7; --muted:#b0aaa0; --faint:#77726b;
  --border:rgba(246,243,236,.10); --border-strong:rgba(246,243,236,.2);
  --accent:var(--sky); --on-accent:#0b0a0d;
  --accent-text:#6fcaf6; --accent-2-text:#ff86bb; --link:#6fcaf6; --warn-text:#f5c632;
  --glow:0 0 0 3px rgba(63,182,242,.25);
  --header-bg:rgba(17,16,20,.9);
  --art-ink:#f3efe7; --art-dim:rgba(243,239,231,.26); --art-ground:#0b0a0d;
  --fleck:url("/assets/fleck-dark.svg");
  --display:"ArBloodhound","Amatic SC",system-ui,sans-serif;
  --body:"Space Grotesk",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --max:1160px; --cut:14px;
  color-scheme:dark;
}
/* light theme = white sketchbook paper */
[data-theme="light"]{
  --bg:#f6f3ec; --bg-soft:#eeeae0; --bg-deep:#fbfaf6;
  --panel:rgba(17,16,20,.03); --panel-2:rgba(17,16,20,.055);
  --text:#141218; --muted:#5a5650; --faint:#8d887f;
  --border:rgba(17,16,20,.12); --border-strong:rgba(17,16,20,.24);
  --accent:#141218; --on-accent:#f6f3ec;
  --accent-text:#1d3fb8; --accent-2-text:#c21d5a; --link:#1d3fb8; --warn-text:#8a6200;
  --glow:0 0 0 3px rgba(33,72,204,.2);
  --header-bg:rgba(246,243,236,.92);
  --art-ink:#141218; --art-dim:rgba(20,18,24,.24); --art-ground:#fbfaf6;
  --fleck:url("/assets/fleck-light.svg");
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--sky);color:#0b0a0d}
img,svg{max-width:100%}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:.005em}
h1{font-size:clamp(2.3rem,5.2vw,4.1rem);font-weight:700}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:1rem;font-weight:700}
h3{font-size:1.45rem;margin-bottom:.45rem}
p{margin-bottom:1rem;max-width:68ch}
.lede{font-size:1.16rem;color:var(--muted);max-width:62ch}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--text)}
b,strong{font-weight:600;color:var(--text)}
.mono,code{font-family:var(--mono);font-size:.88em}
.muted{color:var(--muted)}
.accent{color:var(--accent-text)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
section.block{padding:5rem 0}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:10px;height:10px;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%)}
.section-head{margin-bottom:2rem}
.section-head .lede{margin-top:.25rem}

/* ---------- motifs ---------- */
.chamfer{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.hud{position:relative}
.hud::before{content:"";position:absolute;inset:-1px;pointer-events:none;--hc:var(--accent-text);--hl:18px;
  background:
    linear-gradient(var(--hc),var(--hc)) left top/var(--hl) 2px no-repeat,
    linear-gradient(var(--hc),var(--hc)) left top/2px var(--hl) no-repeat,
    linear-gradient(var(--hc),var(--hc)) right top/var(--hl) 2px no-repeat,
    linear-gradient(var(--hc),var(--hc)) right top/2px var(--hl) no-repeat,
    linear-gradient(var(--hc),var(--hc)) left bottom/var(--hl) 2px no-repeat,
    linear-gradient(var(--hc),var(--hc)) left bottom/2px var(--hl) no-repeat,
    linear-gradient(var(--hc),var(--hc)) right bottom/var(--hl) 2px no-repeat,
    linear-gradient(var(--hc),var(--hc)) right bottom/2px var(--hl) no-repeat}
.tri-divider{height:22px;margin:0 auto;max-width:var(--max);display:flex;align-items:center;gap:14px;padding:0 1.25rem;color:var(--border-strong)}
.tri-divider::before,.tri-divider::after{content:"";flex:1;height:1px;background:currentColor}
.tri-divider span{display:block;width:62px;height:12px;background:var(--accent-text);opacity:.8;
  -webkit-mask:url("/assets/caron.svg") center/contain no-repeat;mask:url("/assets/caron.svg") center/contain no-repeat}

/* ---------- header ---------- */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:1rem;top:1rem;background:var(--accent);color:var(--on-accent);padding:.5rem 1rem;z-index:100}
header.site{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:1rem;height:74px;max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.brand{display:flex;align-items:center;margin-right:auto}
.brand img{height:48px;width:auto;display:block}
nav.links{display:flex;gap:1.6rem;font-size:.92rem}
nav.links a{color:var(--muted);text-decoration:none;padding:.3rem 0;border-bottom:1.5px solid transparent}
nav.links a:hover{color:var(--text)}
nav.links a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent-text)}
.icon-btn{background:none;border:1px solid var(--border);color:var(--text);height:38px;min-width:38px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;padding:0 .6rem}
.icon-btn:hover{border-color:var(--accent-text)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}
[data-theme="light"] .theme-toggle .icon-sun{display:none}
.nav-toggle{display:none}
@media(max-width:820px){
  nav.links{display:none;position:absolute;top:74px;left:0;right:0;background:var(--bg);flex-direction:column;gap:.2rem;padding:1rem 1.25rem 1.5rem;border-bottom:1px solid var(--border)}
  nav.links.open{display:flex}
  nav.links a{padding:.55rem 0}
  .nav-toggle{display:inline-flex}
  .brand img{height:40px}
}

/* ---------- hero ---------- */
.hero{padding-top:4.5rem;padding-bottom:3.5rem}
.hero h1{max-width:22ch;margin-bottom:1.25rem}
.hero .lede{margin-bottom:2rem}
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero-split>*{min-width:0}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;gap:2rem}}
.wordmark-hero{width:min(560px,100%);margin:0 0 2rem -10px}
.wordmark-hero img{display:block;width:100%;height:auto}
.status-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.chip{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;padding:.35rem .7rem;border:1px solid var(--border-strong);color:var(--muted)}
.chip.on{color:var(--link);border-color:currentColor}

/* ---------- buttons ---------- */
.cta-row{display:flex;gap:.9rem;flex-wrap:wrap}
.btn{position:relative;display:inline-block;padding:.85rem 1.5rem;font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;text-decoration:none;border:1px solid var(--border-strong);color:var(--text);transition:box-shadow .2s,border-color .2s,color .2s}
.btn::after{content:"";position:absolute;right:-1px;bottom:-1px;border-style:solid;border-width:0 0 11px 11px;border-color:transparent transparent var(--bg) transparent}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn-primary:hover{color:var(--on-accent);box-shadow:var(--glow)}
.btn-ghost:hover{border-color:var(--link);color:var(--link)}

/* ---------- art frames ---------- */
.art{position:relative;margin:0}
.art-stage{position:relative;background:var(--bg-deep);border:1px solid var(--border);overflow:hidden;perspective:900px}
.art-stage svg{display:block;width:100%;height:auto}
.art figcaption{font-family:var(--mono);font-size:.76rem;color:var(--muted);margin-top:.8rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.art figcaption .title{color:var(--accent-text)}
.art-hint{font-family:var(--mono);font-size:.7rem;color:var(--faint)}
[data-depth]{will-change:transform}
.pz-layer{transform-box:fill-box}
.art-control{display:flex;align-items:center;gap:.8rem;margin-top:.9rem;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.art-control input[type=range]{flex:1;accent-color:var(--sky);max-width:320px}
.no-js .art-control{display:none}
.flow{stroke-dasharray:4 10;animation:flow 2.8s linear infinite}
@keyframes flow{to{stroke-dashoffset:-56}}
.pulse{animation:pulse 4.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.anamorph .resolved{opacity:0;transition:opacity .5s}
.anamorph.aligned .resolved{opacity:1}


/* ---------- tabs ---------- */
.tabs{border:1px solid var(--border);background:var(--panel)}
.tab-bar{display:flex;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tab-bar button{background:none;border:none;color:var(--muted);font-family:var(--mono);font-size:.8rem;letter-spacing:.05em;padding:1rem 1.25rem;cursor:pointer;border-right:1px solid var(--border)}
.tab-bar button[aria-selected="true"]{color:var(--text);background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--accent-text)}
.tab-pane{padding:1.75rem}
.js .tab-pane[hidden]{display:none}
.tab-pane h3{font-size:1.7rem}
.tab-note{font-size:.8rem;color:var(--muted);font-family:var(--mono);margin-top:1rem}
.status-line{font-family:var(--mono);color:var(--warn-text);font-size:.95rem}

/* ---------- lists / grids ---------- */
.aims{list-style:none;margin:1rem 0}
.aims li{position:relative;padding:.7rem 0 .7rem 1.6rem;border-bottom:1px solid var(--border)}
.aims li::before{content:"";position:absolute;left:0;top:1.15rem;width:9px;height:9px;background:var(--accent-text);clip-path:polygon(0 0,100% 0,50% 100%)}
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--border);border:1px solid var(--border)}
.dir-grid article,.dir-grid a{background:var(--bg);padding:1.4rem 1.4rem 1.5rem;display:block;color:var(--text);text-decoration:none;transition:background .2s}
.dir-grid a:hover{background:var(--bg-soft)}
.dir-grid .n{font-family:var(--mono);font-size:.72rem;color:var(--accent-text);letter-spacing:.12em}
.dir-grid h3{font-size:1.35rem;margin:.35rem 0 .4rem}
.dir-grid p{font-size:.92rem;color:var(--muted);margin:0}
.dir-grid .silence{background:var(--bg-soft);grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:baseline}
.dir-grid .silence h3{margin:0;white-space:nowrap}
@media(max-width:640px){.dir-grid .silence{grid-template-columns:1fr;gap:.3rem}}
.dir-grid .silence h3{color:var(--accent-2-text)}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
@media(max-width:820px){.cols-2{grid-template-columns:1fr}}
.panel{border:1px solid var(--border);background:var(--panel);padding:1.6rem}

/* ---------- trust bar ---------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border:1px solid var(--border)}
.trust div{padding:1.1rem 1.25rem;font-family:var(--mono);font-size:.8rem;color:var(--muted);border-right:1px solid var(--border)}
.trust div:last-child{border-right:none}
.trust b{display:block;color:var(--faint);font-weight:400;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.25rem}

/* ---------- founder note ---------- */
.founder{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:start}
.founder .mark{width:72px;height:72px;display:block}
.founder blockquote{font-size:1.15rem;line-height:1.6;max-width:62ch}
.founder blockquote p{margin-bottom:.9rem}
.founder .sig{font-family:var(--display);font-size:1.7rem;color:var(--accent-text);margin-top:.4rem}
.founder .who{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
@media(max-width:640px){.founder{grid-template-columns:1fr}}

/* ---------- research directions page ---------- */
.direction{display:grid;grid-template-columns:110px 1fr;gap:1.5rem;padding:2.2rem 0;border-top:1px solid var(--border);scroll-margin-top:90px}
.direction .num{font-family:var(--display);font-size:3.2rem;line-height:1;color:var(--accent-text)}
.direction h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.7rem}
.direction p{color:var(--muted)}
.direction .pull{border-left:2px solid var(--accent-2-text);padding:.2rem 0 .2rem 1.1rem;color:var(--text);font-size:1.06rem;margin:1.2rem 0}
@media(max-width:640px){.direction{grid-template-columns:1fr;gap:.4rem}}

/* ---------- roadmap ---------- */
.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.roadmap>div{background:var(--bg);padding:1.5rem}
.roadmap h3{font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem}
.roadmap .met h3{color:var(--link)} .roadmap .now h3{color:var(--warn-text)} .roadmap .next h3{color:var(--accent-text)}
.roadmap ul{list-style:none}
.roadmap li{padding:.6rem 0;border-top:1px solid var(--border);font-size:.95rem}
.roadmap li:first-child{border-top:none}
.roadmap .when{display:block;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
@media(max-width:820px){.roadmap{grid-template-columns:1fr}}

/* ---------- tables, notes, details ---------- */
table{width:100%;border-collapse:collapse;font-size:.95rem;margin:1.25rem 0}
th{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.8rem;border-bottom:1px solid var(--border-strong)}
td{padding:.9rem .8rem;border-bottom:1px solid var(--border);vertical-align:top}
td.num{font-family:var(--mono);color:var(--link);white-space:nowrap}
td.term{font-family:var(--display);font-size:1.3rem;color:var(--accent-text);white-space:nowrap}
.note{border:1px solid var(--border);border-left:3px solid var(--marigold);background:rgba(245,198,50,.05);padding:1.1rem 1.25rem;margin:1.5rem 0;font-size:.95rem}
.note.ip{border-left-color:var(--coral);background:rgba(232,73,90,.06)}
.note .t{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--warn-text);display:block;margin-bottom:.35rem}
.note.ip .t{color:var(--accent-text)}
.note p:last-child{margin-bottom:0}
details{border:1px solid var(--border);margin-bottom:.6rem;background:var(--panel)}
summary{cursor:pointer;padding:1rem 1.25rem;font-weight:600;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";display:inline-block;width:1.2rem;color:var(--accent-text);font-family:var(--mono)}
details[open] summary::before{content:"−"}
details .body{padding:0 1.25rem 1.25rem 2.45rem;color:var(--muted)}
details .body p:last-child{margin-bottom:0}

/* ---------- docs ---------- */
.doc-layout{display:grid;grid-template-columns:200px 1fr;gap:3rem}
.toc{position:sticky;top:90px;align-self:start;font-family:var(--mono);font-size:.78rem}
.toc ol{list-style:none;border-left:1px solid var(--border)}
.toc a{display:block;padding:.35rem 0 .35rem 1rem;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--text)}
.doc-sec{padding:2.5rem 0;border-top:1px solid var(--border);scroll-margin-top:90px}
.doc-sec:first-child{border-top:none;padding-top:0}
@media(max-width:900px){.doc-layout{grid-template-columns:1fr}.toc{position:static}}

/* ---------- log / changelog ---------- */
.log-entry{border:1px solid var(--border);background:var(--panel);padding:1.5rem;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
.log-entry .hash{font-family:var(--mono);font-size:.82rem;color:var(--link);word-break:break-all}
.log-entry .meta{font-family:var(--mono);font-size:.75rem;color:var(--muted);margin-bottom:.5rem}
.log-entry h3{font-size:1.5rem}
.log-entry svg{width:132px;height:132px;display:block}
@media(max-width:640px){.log-entry{grid-template-columns:1fr}}

/* ---------- legal ---------- */
.legal{max-width:760px}
.legal h2{font-size:1.6rem;margin:2.2rem 0 .6rem}
.legal p,.legal li{color:var(--muted)}
.legal ul{margin:0 0 1rem 1.2rem}
.quiet-mark{display:flex;align-items:center;gap:1rem;color:var(--faint);font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.2rem}
.quiet-mark::after{content:"";flex:1;height:1px;background:var(--border)}

/* ---------- 404 ---------- */
.void{min-height:62vh;display:grid;place-items:center;text-align:center;padding-top:4rem;padding-bottom:4rem}
.void .face{font-family:var(--display);font-size:clamp(5rem,16vw,10rem);line-height:.5;padding-top:1.5rem;color:var(--accent-text);letter-spacing:.3em;margin-bottom:1rem;}
.void h1{margin:0 auto 1rem;max-width:18ch}
.void .lede{margin:0 auto 2rem}
.void .cta-row{justify-content:center}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--border);padding:3.5rem 0 2rem;margin-top:3rem;background:var(--bg-deep)}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem}
.foot-top img{height:64px;width:auto;margin-bottom:1rem}
.foot-top p{font-size:.88rem;color:var(--muted)}
.foot-top h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:.9rem;font-weight:400}
.foot-top ul{list-style:none}
.foot-top li{margin-bottom:.5rem;font-size:.9rem}
.foot-top a{color:var(--muted);text-decoration:none}
.foot-top a:hover{color:var(--text);text-decoration:underline}
.entity{font-family:var(--mono);font-size:.74rem;color:var(--faint);border-top:1px solid var(--border);padding-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-top{grid-template-columns:1fr}}

/* ---------- a11y / motion ---------- */
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
[data-theme="light"] :focus-visible{outline-color:#1d4ed8}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.art-stage .glyph-hero{display:block;width:min(360px,80%);margin:2rem auto}

/* ---------- hand-made texture: pastel flecks where the paper shows through ---------- */
h1,h2,.direction .num,.founder .sig,td.term{
  background:var(--fleck),linear-gradient(var(--text),var(--text));background-size:260px 260px,auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.direction .num,.founder .sig,td.term{background-image:var(--fleck),linear-gradient(var(--accent-text),var(--accent-text))}

.art-stage{background:var(--art-ground)}
.swatches{display:flex;gap:6px;margin:1.25rem 0 0}
.swatches i{width:22px;height:10px;display:block;border-radius:2px}

.void-art{max-width:620px;margin:0 auto 2.5rem}
svg a{text-decoration:none}

/* =====================================================================
   PAPER ON A GROUND — the site laid out like the photos it comes from:
   sketchbook and journal pages on black granite (dark) or concrete (light),
   crayon fields behind headings, sticky notes, tape and spiral binding.
   ===================================================================== */
:root{
  --ground:url("/assets/granite.jpg"); --ground-size:360px;
  --paper-ink:#141218;
  --tape:rgba(236,226,196,.62);
  /* per-page pair, overridden below */
  --c1:var(--sky); --c2:var(--pink); --pg-ink:#1d5fb3; --pg-light:#6fcaf6;
}
[data-theme="light"]{--ground:url("/assets/concrete.jpg");--tape:rgba(255,250,232,.7)}
body[data-page="home"]{--c1:var(--sky);--c2:var(--pink);--pg-ink:#1b5fae;--pg-light:#79cff6}
body[data-page="research"]{--c1:var(--coral);--c2:var(--cobalt);--pg-ink:#b3263a;--pg-light:#ff8590}
body[data-page="approach"]{--c1:var(--pink);--c2:var(--coral);--pg-ink:#c21d5a;--pg-light:#ff8cc0}
body[data-page="docs"]{--c1:var(--violet);--c2:#a9d8f2;--pg-ink:#6a3fb0;--pg-light:#cbaaf0}
body[data-page="log"]{--c1:var(--marigold);--c2:var(--green);--pg-ink:#1f7a52;--pg-light:#f5c632}
body[data-page="changelog"]{--c1:var(--cobalt);--c2:var(--lavender);--pg-ink:#2148cc;--pg-light:#93a9ff}
body[data-page="legal"]{--c1:var(--silver);--c2:var(--blush);--pg-ink:#141218;--pg-light:#ddd8cd}
body[data-page="404"]{--c1:var(--pink);--c2:var(--sky);--pg-ink:#c21d5a;--pg-light:#ff8cc0}
body{background:var(--bg) var(--ground) repeat;background-size:var(--ground-size)}
:root{--accent-text:var(--pg-light);--link:var(--pg-light)}
[data-theme="light"]{--accent-text:var(--pg-ink);--link:var(--pg-ink)}
header.site{background:var(--header-bg);border-bottom:none;box-shadow:0 1px 0 var(--border)}
footer.site{background:rgba(0,0,0,.28);border-top:none}
[data-theme="light"] footer.site{background:rgba(255,255,255,.25)}

/* hand-lettered labels instead of code-style caps */
.eyebrow,.note .t,th,.roadmap h3,.foot-top h4,.trust b,.dir-grid .n,.stage-kicker,.quiet-mark{
  font-family:var(--display);font-weight:700;letter-spacing:.02em;text-transform:none}
.eyebrow{font-size:1.3rem;color:var(--accent-text)}
.eyebrow::before{width:14px;height:12px}
.note .t,.roadmap h3,.trust b{font-size:1.15rem}
th{font-size:1.1rem}
.foot-top h4{font-size:1.15rem;color:var(--muted)}
.dir-grid .n{font-size:1.25rem}

/* crayon underline under the big headline */
.hero h1{position:relative;isolation:isolate}
.hero h1::after{content:"";position:absolute;z-index:-1;left:-.2em;bottom:-.08em;width:min(78%,15em);height:.5em;
  background:var(--c1);opacity:.85;transform:rotate(-1.2deg);
  -webkit-mask:url("/assets/wash-b.png") center/100% 100% no-repeat;mask:url("/assets/wash-b.png") center/100% 100% no-repeat}

/* artwork: a drawing taped down on a crayon field */
.chamfer{clip-path:none}
.art{isolation:isolate}
.art::before{content:"";position:absolute;z-index:-1;inset:-26px -22px -10px -30px;background:var(--c1);opacity:.9;transform:rotate(-2.2deg);
  -webkit-mask:url("/assets/wash-a.png") center/100% 100% no-repeat;mask:url("/assets/wash-a.png") center/100% 100% no-repeat}
.art-stage{border:none;box-shadow:0 14px 30px rgba(0,0,0,.45);transform:rotate(.6deg);border-radius:2px 5px 3px 6px}
.art-stage::after{content:"";position:absolute;top:-9px;left:50%;width:110px;height:26px;margin-left:-55px;background:var(--tape);transform:rotate(-3deg);z-index:3;pointer-events:none}
.art figcaption{margin-top:1.2rem}
.art figcaption .title{font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--accent-text)}

/* buttons: crayon-filled blocks */
.btn{font-family:var(--display);font-size:1.25rem;font-weight:700;letter-spacing:.02em;padding:.55rem 1.4rem .6rem;border:2px solid currentColor;
  border-radius:6px 14px 8px 12px/12px 6px 14px 8px}
.btn::after{display:none}
.btn-primary{background:var(--c1) url("/assets/streaks.png");color:#141218;border-color:transparent;transform:rotate(-1deg)}
.btn-primary:hover{color:#141218;box-shadow:4px 5px 0 var(--c2)}
.btn-ghost{color:var(--text)}
.btn-ghost:hover{color:var(--text);border-color:var(--c2);box-shadow:4px 5px 0 var(--c2)}

/* status chips as paper scraps */
.chip{font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:0;background:var(--paper);color:#141218;border:none;padding:.15rem .7rem;box-shadow:2px 3px 0 rgba(0,0,0,.35)}
.chip:nth-child(1){transform:rotate(-2deg)} .chip:nth-child(2){transform:rotate(1.5deg)} .chip:nth-child(3){transform:rotate(-1deg)}
.chip.on{background:var(--c1);color:#141218}

/* ---------- sheets: sketchbook pages on the ground ---------- */
.sheet,section.block>.wrap{
  --text:#141218;--muted:#4f4a44;--faint:#837d74;--border:rgba(20,18,24,.14);--border-strong:rgba(20,18,24,.3);
  --panel:rgba(20,18,24,.035);--panel-2:rgba(20,18,24,.065);--bg:#f6f3ec;--bg-soft:#ece7da;
  --accent-text:var(--pg-ink);--accent-2-text:#c21d5a;--link:var(--pg-ink);--warn-text:#8a6200;
  --fleck:url("/assets/fleck-light.svg");--art-ink:#141218;--art-dim:rgba(20,18,24,.24);--art-ground:#fbfaf6;
  position:relative;color:var(--text);background:#f6f3ec;
  width:calc(100% - 2.5rem);max-width:calc(var(--max) - 2.5rem);margin-left:auto;margin-right:auto;
  padding:3.2rem clamp(1.2rem,4vw,3rem) 2.8rem;box-shadow:0 22px 44px rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.25);
  border-radius:3px 6px 4px 8px;transform:rotate(-.35deg)}
section.block:nth-of-type(even)>.wrap{transform:rotate(.3deg)}
[data-theme="light"] .sheet,[data-theme="light"] section.block>.wrap{box-shadow:0 16px 30px rgba(60,50,30,.28),0 2px 0 rgba(60,50,30,.18)}
/* spiral binding along the top edge */
.sheet::before,section.block>.wrap::before{content:"";position:absolute;left:28px;right:28px;top:-12px;height:30px;pointer-events:none;
  background:
    radial-gradient(circle at 50% 78%,rgba(20,18,24,.85) 3.6px,transparent 4.2px) 0 0/28px 30px repeat-x,
    linear-gradient(90deg,transparent 11px,#c9cad1 11px,#f2f2f5 13px,#9fa1aa 15px,transparent 15px) 0 0/28px 22px repeat-x}
/* journal pages: ruled planner lines */
.sheet.ruled{background:#f6f3ec repeating-linear-gradient(transparent 0 33px,rgba(20,18,24,.075) 33px 34px)}
.sheet.ruled::before,.sheet.taped::before{
  background:none;left:50%;width:120px;margin-left:-60px;right:auto;height:28px;top:-12px;background:var(--tape);transform:rotate(2deg)}
section.block{padding:4.5rem 0}
.sheet h1,.sheet h2,section.block>.wrap h2{color:#141218}
.sheet .lede,section.block>.wrap .lede{color:#4f4a44}

/* crayon field behind each section heading on paper */
.section-head,.doc-sec>h2,.direction h2{position:relative;isolation:isolate}
.section-head h2,.doc-sec>h2,.direction h2,.legal h2{position:relative;isolation:isolate;display:inline-block}
.section-head h2::after,.doc-sec>h2::after,.direction h2::after,.legal h2::after{content:"";position:absolute;z-index:-1;left:-.25em;right:-.4em;bottom:.02em;height:.55em;
  background:var(--c1);opacity:.55;transform:rotate(-1deg);
  -webkit-mask:url("/assets/wash-b.png") center/100% 100% no-repeat;mask:url("/assets/wash-b.png") center/100% 100% no-repeat}
section.block:nth-of-type(even) .section-head h2::after,.direction:nth-child(even) h2::after,.doc-sec:nth-child(even)>h2::after{background:var(--c2)}

/* sticky notes */
.note{background:#fbe48a;border:none;color:#141218;box-shadow:3px 6px 14px rgba(0,0,0,.28);transform:rotate(-.6deg);border-radius:2px;padding:1.3rem 1.4rem 1.2rem}
.note.ip{background:#ffc4dc}
.note .t,.note.ip .t{color:#141218}
.note p{color:#141218}
.hero .note{max-width:520px}

/* tabs: notebook index tabs with crayon tops */
.tabs{background:transparent;border:none}
.tab-bar{border-bottom:2px solid #141218;gap:.4rem}
.tab-bar button{font-family:var(--display);font-size:1.25rem;font-weight:700;color:#4f4a44;border:2px solid #141218;border-bottom:none;border-radius:8px 12px 0 0;background:#ece7da;margin-bottom:-2px;padding:.55rem 1.1rem}
.tab-bar button[aria-selected="true"]{background:var(--c1);color:#141218;box-shadow:none}
.tab-pane{padding:1.8rem .2rem 0}

/* direction cards: each its own crayon colour */
.dir-grid{gap:1.1rem;background:none;border:none}
.dir-grid>a,.dir-grid article{position:relative;background:#fbfaf6;border:2px solid #141218;border-radius:6px 12px 8px 10px/10px 6px 12px 8px;padding:1.3rem 1.3rem 1.4rem;box-shadow:3px 4px 0 #141218;isolation:isolate}
.dir-grid>a:hover{background:#fffdf7;transform:rotate(-.6deg)}
.dir-grid>a::before{content:"";position:absolute;z-index:-1;left:10px;top:10px;width:60px;height:46px;background:var(--k,var(--c1));opacity:.85;
  -webkit-mask:url("/assets/wash-c.png") center/100% 100% no-repeat;mask:url("/assets/wash-c.png") center/100% 100% no-repeat}
.dir-grid>a:nth-child(8n+1){--k:var(--sky)} .dir-grid>a:nth-child(8n+2){--k:var(--lavender)} .dir-grid>a:nth-child(8n+3){--k:var(--coral)}
.dir-grid>a:nth-child(8n+4){--k:var(--marigold)} .dir-grid>a:nth-child(8n+5){--k:var(--pink)} .dir-grid>a:nth-child(8n+6){--k:var(--violet)}
.dir-grid>a:nth-child(8n+7){--k:var(--green)} .dir-grid>a:nth-child(8n+8){--k:var(--orange)}
.dir-grid .n{color:#141218}
.dir-grid .silence{background:#141218;color:#f3efe7;--text:#f3efe7;--muted:#c9c3b8}
.dir-grid .silence h3{color:#ff86bb}
.dir-grid .silence a{color:#79cff6}

/* roadmap, trust bar, founder, log */
.roadmap{gap:1rem;background:none;border:none}
.roadmap>div{background:#fbfaf6;border:2px solid #141218;border-radius:8px 4px 10px 6px;box-shadow:3px 4px 0 #141218}
.roadmap .met h3{color:#1f7a52} .roadmap .now h3{color:#8a6200} .roadmap .next h3{color:#c21d5a}
.trust{border:none;gap:.8rem}
.trust div{background:#fbfaf6;border:2px solid #141218 !important;border-radius:6px 10px 6px 10px;font-family:var(--body);font-size:.92rem;color:#141218}
.panel{background:#fbfaf6;border:2px solid #141218;border-radius:6px 14px 8px 12px;box-shadow:4px 5px 0 var(--c2)}
.hud::before{display:none}
.founder blockquote{font-size:1.12rem}
.log-entry{background:#fbfaf6;border:2px solid #141218;border-radius:6px 12px 8px 10px;box-shadow:4px 5px 0 var(--c1)}
.log-entry .hash{color:#1f7a52}
details{background:#fbfaf6;border:2px solid #141218;border-radius:6px 10px 8px 10px}
summary::before{color:var(--pg-ink);font-weight:700}
td.num{color:var(--pg-ink)}
td.term{-webkit-text-fill-color:var(--pg-ink);background:none}
.toc a{font-family:var(--display);font-size:1.2rem;font-weight:700;color:#4f4a44}
.toc ol{border-left:3px solid var(--c1)}

/* dividers between sheets: a chalk notation mark on the ground */
.tri-divider{height:46px;color:transparent}
.tri-divider::before,.tri-divider::after{display:none}
.tri-divider span{width:110px;height:22px;background:var(--text);opacity:.55}

/* splatter dots on the ground, like the paint flecks around the drawings */
main{position:relative}
main::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle,var(--c1) 3px,transparent 3.5px) 7% 18%/1px 1px no-repeat,
    radial-gradient(circle,var(--c2) 2px,transparent 2.5px) 93% 9%/1px 1px no-repeat}
.splat{position:absolute;pointer-events:none;width:9px;height:9px;border-radius:50%}

/* legal pages: one journal page */
.legal.sheet{max-width:820px;margin-top:3rem;margin-bottom:3rem}
.legal.sheet h1{margin-bottom:1rem}
.quiet-mark{font-size:1.25rem;color:#837d74}
.quiet-mark::after{background:rgba(20,18,24,.15)}

/* 404 sits on the ground, like chalk on the sidewalk */
.void h1{color:var(--text)}

@media(max-width:640px){
  .sheet,section.block>.wrap{width:calc(100% - 1.2rem);transform:none;padding-top:2.6rem}
  section.block:nth-of-type(even)>.wrap{transform:none}
  .art::before{inset:-14px -10px -6px -14px}
}

.eyebrow{display:flex;width:max-content;max-width:100%}
.tri-divider{justify-content:center}
.hero .lede{color:var(--text);opacity:.86}
:root:not([data-theme="light"]) .hero .lede,:root:not([data-theme="light"]) .void .lede{text-shadow:0 1px 2px #000}
[data-theme="light"] .hero .lede{opacity:1}

/* drawings live on white sketchbook paper, in both themes */
.art-stage{--art-ground:#fbfaf6;--art-ink:#141218;--art-dim:rgba(20,18,24,.24);--muted:#4f4a44;--accent-text:var(--pg-ink);background:#fbfaf6}
.art figcaption>span{background:rgba(17,16,20,.78);padding:.15rem .55rem;border-radius:3px}
[data-theme="light"] .art figcaption>span{background:rgba(246,243,236,.9)}
.art-hint{color:var(--muted)}
.hero .lede{font-weight:500}
[data-theme="light"] .hero .lede{color:#2b2722}

/* thin weights, like the hand-drawn examples: marker-thin for headings, chalk-thin for the big moments */
.hero h1,.void h1{font-weight:300;font-size:clamp(2.6rem,5.8vw,4.6rem);letter-spacing:.01em;
  background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
.hero h1::after{bottom:-.02em}
:root:not([data-theme="light"]) .hero h1,:root:not([data-theme="light"]) .void h1{text-shadow:0 0 1px rgba(243,239,231,.6),0 2px 3px #000}
[data-theme="light"] .hero h1,[data-theme="light"] .void h1{font-weight:400;text-shadow:0 0 2px rgba(246,243,236,.9)}

.founder h3{font-size:1.7rem;margin-bottom:.6rem}
.founder p{font-size:1.05rem}