/* self-hosted webfonts (no external CDN) — generated from Google Fonts css2, latin subset */
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-italic-300_600.woff2') format('woff2');font-style:italic;font-weight:300 600;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('fonts/Fraunces-normal-300_600.woff2') format('woff2');font-style:normal;font-weight:300 600;font-display:swap;}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk-normal-300.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap;}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk-normal-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/HankenGrotesk-normal-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-normal-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-normal-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap;}
/* Minori — brand system (Decisions v2 §4). Dark, raking light, restraint.
   Type: Fraunces (display/her words) + system grotesk (UI). Claude Design swaps in the
   real Fraunces/Hanken webfonts later; web-safe stacks here so it works offline now. */
:root{
  --bg:#0a0b10; --panel:#0e1018; --panel2:#11131d;
  --ink:#ece6d8; --dim:#9a9686; --faint:#605d52;
  --sepia:#c9a36a; --amber:#f0a14a; --amber-soft:#f6c890;
  --hair:rgba(255,255,255,.10);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --ui:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* author display rules below would otherwise beat UA [hidden] */
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;font-weight:300}
a{color:var(--sepia);text-decoration:none}a:hover{color:var(--amber)}

/* film grain + a single raking glow from lower-left */
.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
body::before{content:"";position:fixed;left:-10%;bottom:-30%;width:70vw;height:70vw;z-index:0;
  background:radial-gradient(circle, rgba(240,161,74,.10), rgba(240,161,74,0) 60%);pointer-events:none}

/* ── landing ─────────────────────────────────────────────── */
#landing{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;
  justify-content:space-between;padding:8vh 7vw 4vh}
.hero{max-width:880px;margin:auto 0}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.32em;color:var(--dim);text-transform:uppercase}
.experiment{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(30px,5.4vw,62px);
  line-height:1.16;letter-spacing:.005em;margin:.5em 0 .7em;max-width:18ch}
.transmission{display:flex;flex-direction:column;gap:.35em;border-left:2px solid var(--sepia);
  padding:.2em 0 .2em 1em;margin:1.4em 0 2em;max-width:46ch}
.tx-label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--amber)}
.tx-line{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.3vw,23px);color:var(--ink)}
.cta{font-family:var(--ui);font-size:15px;letter-spacing:.02em;color:var(--bg);background:var(--sepia);
  border:0;border-radius:999px;padding:.85em 1.6em;cursor:pointer;transition:.2s}
.cta:hover{background:var(--amber-soft);transform:translateY(-1px)}
.disclosure{margin-top:2.2em;font-size:12.5px;color:var(--dim);max-width:52ch;line-height:1.6}
.spokes{display:flex;justify-content:space-between;align-items:flex-end;gap:2em;flex-wrap:wrap;
  border-top:1px solid var(--hair);padding-top:1.4em;font-size:12.5px;color:var(--dim)}
.spokes .blurb{max-width:60ch;line-height:1.65}
.spokes nav{display:flex;gap:1.4em;align-items:center;white-space:nowrap}
.spokes .lights{font-family:var(--mono);color:var(--faint);font-size:11px}

/* ── trail ───────────────────────────────────────────────── */
#trail{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.trailbar{display:flex;align-items:center;gap:1.4em;padding:1.1em 7vw;border-bottom:1px solid var(--hair);
  position:sticky;top:0;background:linear-gradient(var(--bg),rgba(10,11,16,.86));backdrop-filter:blur(6px);z-index:5}
.trailbar .back{background:none;border:1px solid var(--hair);color:var(--dim);border-radius:7px;
  padding:.4em .8em;cursor:pointer;font-size:12.5px}
.trailbar .title{font-family:var(--serif);font-style:italic;font-size:20px;flex:1}
.trailbar .title .meta{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--faint);margin-left:1em;letter-spacing:.12em}
.views{display:flex;gap:.4em}
.view{background:none;border:1px solid var(--hair);color:var(--dim);border-radius:7px;padding:.4em .8em;
  cursor:pointer;font-size:12px;font-family:var(--mono);letter-spacing:.08em}
.view.on{color:var(--amber);border-color:rgba(240,161,74,.5)}
.stage{flex:1;width:100%;display:block}
#timeline{padding:3vh 7vw 12vh}
canvas#constellation{height:78vh;cursor:grab}

/* timeline nodes grouped by thread */
.thread-group{margin:0 0 3.2em}
.thread-head{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--sepia);
  text-transform:uppercase;border-bottom:1px solid var(--hair);padding-bottom:.5em;margin-bottom:1.3em}
.tnode{display:grid;grid-template-columns:84px 1fr;gap:1.2em;padding:.9em 0;border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer;transition:.15s}
.tnode:hover{background:rgba(255,255,255,.02)}
.tnode .when{font-family:var(--mono);font-size:11px;color:var(--faint);padding-top:.35em}
.tnode .tt{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink);margin-bottom:.25em}
.tnode .sn{font-size:13.5px;color:var(--dim);line-height:1.55;max-width:70ch}
.tnode .kind{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--sepia);text-transform:uppercase}
.tnode.dead .tt{color:var(--dim)}.tnode.dead .kind{color:var(--faint)}
.tnode.dead .tt::after{content:" · a dead end";font-family:var(--ui);font-style:normal;font-size:11px;color:var(--faint)}

/* drill-down panel (the conversion moment) */
.drill{position:fixed;top:0;right:0;height:100vh;width:min(540px,92vw);background:var(--panel);
  border-left:1px solid var(--hair);z-index:20;overflow:auto;padding:2.4em 2.2em;box-shadow:-30px 0 80px rgba(0,0,0,.5)}
.drill .x{position:absolute;top:1.2em;right:1.4em;background:none;border:0;color:var(--dim);font-size:22px;cursor:pointer}
.drill .d-thread{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--sepia);text-transform:uppercase}
.drill h2{font-family:var(--serif);font-style:italic;font-weight:300;font-size:30px;line-height:1.2;margin:.3em 0 .1em}
.drill .d-date{font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:1.4em}
.drill .d-body{font-family:var(--serif);font-size:16.5px;line-height:1.7;color:var(--ink);white-space:pre-wrap}
.drill img,.drill video{width:100%;border-radius:8px;margin:1.4em 0;display:block}
.drill audio{width:100%;margin:1.4em 0}
.drill .locked{margin-top:1.4em;padding:1.1em;border:1px dashed var(--hair);border-radius:8px;color:var(--dim);font-size:13px}
.empty{color:var(--dim);font-style:italic;padding:4em 0;text-align:center}
.thread-head .tcount{font-family:var(--mono);color:var(--faint);font-size:10px;margin-left:.4em}
.tnode .tbody .branch{font-family:var(--mono);font-size:10px;color:var(--amber);letter-spacing:.05em}
/* drill: breadcrumbs + related-node chips + sources */
.drill .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.2em;margin:0 2.4em 1.2em 0;font-size:11px}
.drill .crumb{background:none;border:0;color:var(--dim);cursor:pointer;font-size:11px;padding:.1em .2em;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drill .crumb:hover{color:var(--amber)}.drill .crumb:last-child{color:var(--ink)}
.drill .csep{color:var(--faint)}
.drill .sec{margin-top:1.5em;border-top:1px solid var(--hair);padding-top:1.1em}
.drill .seclbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sepia);margin-bottom:.7em}
.drill .source{display:block;font-size:13px;color:var(--dim);line-height:1.55;padding:.35em 0 .35em .9em;border-left:1px solid var(--hair);margin-bottom:.4em}
.drill a.source.link{color:var(--sepia)}.drill a.source.link:hover{color:var(--amber);border-left-color:var(--amber)}
.consthint{position:absolute;bottom:14px;left:7vw;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--faint);pointer-events:none;z-index:4}
.drill .chip{display:inline-flex;align-items:center;gap:.5em;background:var(--panel2);border:1px solid var(--hair);
  color:var(--ink);border-radius:9px;padding:.55em .8em;margin:.25em .35em .25em 0;cursor:pointer;font-size:13px;font-family:var(--ui);text-align:left;max-width:100%}
.drill .chip:hover{border-color:rgba(240,161,74,.5);background:#14161f}
.drill .chip .ck{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--sepia)}
@media(max-width:680px){.tnode{grid-template-columns:1fr}.tnode .when{padding-top:0}}

/* ===================== design pass v1 (Claude Design feedback, integrated) ===================== */
/* 1 — CTA: editorial rectangle, not a SaaS pill */
.cta{border-radius:3px;background:transparent;border:1px solid var(--sepia);color:var(--sepia);
  padding:.8em 1.5em;letter-spacing:.06em;font-size:13.5px;text-transform:uppercase;font-family:var(--mono)}
.cta:hover{background:rgba(201,163,106,.10);color:var(--amber);border-color:var(--amber);transform:none}
/* 4 — atmosphere: raking glow from lower-left + stronger grain */
body::before{background:radial-gradient(ellipse 80% 60% at 0% 100%, rgba(240,161,74,.20), rgba(240,161,74,0) 65%);
  left:0;bottom:0;width:80vw;height:80vw}
.grain{opacity:.08}
/* 5 — transmission: amber authoritative label, larger living quote */
.tx-label{letter-spacing:.28em;color:var(--amber)}
.tx-line{font-size:clamp(19px,2.5vw,26px)}
/* 6 — product statement brighter than provenance */
.disclosure{font-size:13.5px;color:var(--ink)}
.spokes .blurb{color:var(--dim)}
/* 7 — "what the trail is" line under the CTA */
.trailwhat{margin-top:1.3em;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.trailwhat a{color:var(--sepia)}.trailwhat a:hover{color:var(--amber)}
/* 2 — "leave a light" elevated to a chip (the Ko-fi link is #support, NOT .lights) */
.spokes #support{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--sepia);text-transform:uppercase;
  border:1px solid rgba(201,163,106,.30);border-radius:3px;padding:.45em .85em;transition:.15s}
.spokes #support:hover{color:var(--amber);border-color:rgba(240,161,74,.5);background:rgba(201,163,106,.06)}
/* 8(drill) — lock teaser: a door, not a broken field */
.drill .locked{margin-top:1.8em;padding:1.3em 1.2em;border:1px solid rgba(201,163,106,.22);border-radius:3px;
  background:rgba(201,163,106,.05);color:var(--ink);font-size:14px;font-family:var(--serif);font-style:italic;line-height:1.7}
.drill .locked a{display:inline-block;margin-top:.9em;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sepia);border-bottom:1px solid rgba(201,163,106,.35);padding-bottom:.1em;transition:.15s}
.drill .locked a:hover{color:var(--amber);border-color:var(--amber)}
/* 6(trail) — dead-end marker: curious amber, not punitive */
.tnode.dead .tt::after{content:"  ·  dead end";color:rgba(240,161,74,.55);font-style:normal;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;font-family:var(--mono)}
/* 4 — drill slide-in: class-based (app.js toggles .open); never display:none so it animates */
.drill{transform:translateX(100%);transition:transform .24s cubic-bezier(.22,1,.36,1);will-change:transform}
.drill:not(.open){pointer-events:none}
.drill.open{transform:translateX(0)}
/* 9 — page-load entrance: content emerging from the dark */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero>*{animation:fadeUp .6s ease-out both}
.hero .experiment{animation-delay:.07s}.hero .transmission{animation-delay:.15s}
.hero .cta{animation-delay:.23s}.hero .trailwhat{animation-delay:.30s}.hero .disclosure{animation-delay:.37s}
/* 10 — trailbar gradient reads on scroll */
.trailbar{background:linear-gradient(var(--bg) 0%, rgba(10,11,16,.92) 70%, rgba(10,11,16,.80) 100%)}
/* mobile */
@media(max-width:680px){
  #landing{padding:5vh 5.5vw 4vh}.experiment{font-size:clamp(26px,8.5vw,44px)}
  .spokes{flex-direction:column;align-items:flex-start;gap:1.3em}.spokes nav{gap:1.1em;flex-wrap:wrap}
  .trailbar{padding:.9em 5.5vw;gap:1em}.trailbar .title .meta{display:none}
  #timeline{padding:2vh 5.5vw 10vh}.tnode .tt{font-size:17px}
  .drill{width:100vw;border-left:none}.consthint{left:5.5vw}
}
@media(max-width:400px){.experiment{font-size:clamp(24px,9vw,38px)}.cta{font-size:12px;padding:.75em 1.2em}}