/*
  Handsel — shared design system (site.css)
  ------------------------------------------------------------------
  One shared visual language across every page. Self-contained by
  design-system rule: NO external fonts,
  scripts, or images — system font stacks and inline SVG only.

  Page-specific one-offs stay inline in each page's <style>; this file is
  only the shared furniture. Tokens, dark mode, and the named devices
  (kickers, chips, act rail, wire trace, receipt, spec tables, deadform,
  buttons, panels, fork cards, footer) all live here.
*/

/* ============================================================ TOKENS */
:root{
  --ink:#1b2430; --lead:#232d3b; --muted:#5c6672; --faint:#666f7c;
  --paper:#ffffff; --tint:#f6f4ef; --line:#d9d5cc; --line2:#eceae4;
  --open:#0e7568; --try:#2b5fa8; --prove:#6f51a1;
  --commit:#2b7247; --evap:#5c6b7a; --settle:#a97a1f; --settle-ink:#8a6212; --red:#a4432f;
  --open-t:#e7f1ef; --try-t:#e9eff8; --prove-t:#efeaf6;
  --commit-t:#e9f2ec; --evap-t:#edf0f3; --settle-t:#f6efe2;
  --sans:'Avenir Next','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --mono:'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e8e4da; --lead:#d9d4c8; --muted:#9aa2ad; --faint:#8a919c;
    --paper:#16181c; --tint:#20232a; --line:#33373f; --line2:#2a2d34;
    --open:#16a08d; --try:#5a8fd8; --prove:#9b7fd4;
    --commit:#4fa878; --evap:#8b98a6; --settle:#d19a3a; --settle-ink:#d19a3a; --red:#c96a52;
    --open-t:#1a2b29; --try-t:#1d242f; --prove-t:#25222e;
    --commit-t:#1c2a22; --evap-t:#22262b; --settle-t:#2b2620;
  }
}
:root[data-theme="dark"]{
  --ink:#e8e4da; --lead:#d9d4c8; --muted:#9aa2ad; --faint:#8a919c;
  --paper:#16181c; --tint:#20232a; --line:#33373f; --line2:#2a2d34;
  --open:#16a08d; --try:#5a8fd8; --prove:#9b7fd4;
  --commit:#4fa878; --evap:#8b98a6; --settle:#d19a3a; --settle-ink:#d19a3a; --red:#c96a52;
  --open-t:#1a2b29; --try-t:#1d242f; --prove-t:#25222e;
  --commit-t:#1c2a22; --evap-t:#22262b; --settle-t:#2b2620;
}

/* ============================================================ RESET */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id], article[id]{scroll-margin-top:58px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 1.12rem/1.6 var(--serif);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* focus ring — visible only for keyboard users (quality bar) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible{
  outline:2px solid var(--settle); outline-offset:2px; border-radius:3px;
}

/* ============================================== TYPOGRAPHIC FURNITURE */
h1{font:700 clamp(2.35rem,5vw,3.5rem)/1.08 var(--sans); letter-spacing:-.02em; margin:.5rem 0 1.4rem}
h2{font:600 1.6rem/1.2 var(--sans); letter-spacing:-.012em; margin:.4rem 0 1rem}
h3{font:600 1.05rem/1.3 var(--sans); margin:1.2rem 0 .4rem}
p{margin:0 0 1rem}
a{color:inherit; text-decoration-color:var(--faint); text-underline-offset:3px}
a:hover{text-decoration-color:var(--settle)}
em{font-style:italic}
code{font:.86em var(--mono); background:var(--tint); padding:.08em .3em; border-radius:3px; white-space:nowrap}
.kicker{font:600 .72rem var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); display:flex; gap:.9em; align-items:baseline; margin-bottom:1.1rem; position:relative}
.mnote{color:var(--faint); font:600 .68rem var(--sans); letter-spacing:.14em}
.lead{font-size:1.24rem; line-height:1.62; color:var(--lead)}
.small{font-size:.95rem; color:var(--muted)}
.caps{font:600 .72rem var(--sans); letter-spacing:.16em; text-transform:uppercase}
.chip{display:inline-block; padding:.26em .8em .2em; border-radius:3px; background:var(--c,var(--open));
  color:#fff; letter-spacing:.16em; font:600 .72rem var(--sans); text-transform:uppercase}
.cap{font:400 .82rem/1.5 var(--sans); color:var(--muted); margin-top:.6rem}
.callout{border-left:3px solid var(--c,var(--open)); background:var(--tint);
  padding:1rem 1.3rem; margin:1.4rem 0; border-radius:0 6px 6px 0}
.callout p{margin:0}

/* "shipping — not yet on npm" gate marker. Shared class used on CLI arcs.
   PUBLISH-TIME EDIT: delete the `.gated` class from the markup (one line each)
   the moment the packages are live on npm; the styling then simply no-ops. */
.gated{display:inline-block; margin-left:.6em; padding:.14em .5em .1em; border-radius:3px;
  border:1px solid var(--line); background:var(--tint);
  font:600 .58rem var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  white-space:nowrap; vertical-align:middle}

/* ============================================================ LAYOUT */
.band{padding:4.5rem 1.4rem; border-top:1px solid var(--line2)}
.band.flush{border-top:none}
.col{max-width:680px; margin:0 auto; position:relative}
.wide{max-width:960px; margin-left:auto; margin-right:auto}
.center{text-align:center}
.scrollx{overflow-x:auto; -webkit-overflow-scrolling:touch}
@media (min-width:1240px){
  .kicker .mnote{position:absolute; left:calc(50% + 372px); top:.1em; width:200px;
    text-align:left; border-left:2px solid var(--line); padding-left:.8em; white-space:normal; line-height:1.5}
  .kicker{overflow:visible}
}

/* ========================================================= MASTHEAD */
.mast{border-bottom:1px solid var(--line); background:var(--paper); padding:0 1.4rem}
.mast-in{max-width:960px; margin:0 auto; display:flex; align-items:center; gap:1.2rem;
  padding:.85rem 0; flex-wrap:wrap}
.wordmark{font:700 1.25rem var(--sans); letter-spacing:-.015em; text-decoration:none}
.wordmark b{font-weight:700}
.dot{color:var(--settle)}
.mast .tag{font:600 .66rem var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.mast nav{margin-left:auto; display:flex; gap:1.4em; align-items:center}
.mast nav a{font:600 .7rem var(--sans); letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); white-space:nowrap}
.mast nav a:hover{color:var(--ink)}
.mast nav a[aria-current="page"]{color:var(--ink); border-bottom:2px solid var(--settle)}
#themeBtn{font:600 .7rem var(--sans); letter-spacing:.14em; text-transform:uppercase;
  background:none; border:1px solid var(--line); border-radius:4px; color:var(--muted);
  padding:.35em .7em; cursor:pointer; display:none}
#themeBtn:hover{color:var(--ink); border-color:var(--faint)}
.js #themeBtn{display:inline-block}
.mast-strip{max-width:960px; margin:0 auto; border-top:1px solid var(--line2);
  padding:.5rem 0 .55rem; font:600 .64rem var(--sans); letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint)}
@media (max-width:720px){ .mast .tag{display:none} }

/* ====================================================== HERO HELPERS */
.eyebrow{font:600 .72rem var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); margin-bottom:1.6rem}
.tagline{font:italic 400 1.18rem/1.5 var(--serif); color:var(--muted); margin:1.3rem 0 2rem}
.ribbon{font:600 .66rem var(--sans); letter-spacing:.17em; text-transform:uppercase;
  color:var(--faint); margin-bottom:2.8rem}
.stat{font:600 .95rem var(--sans); letter-spacing:.02em; color:var(--lead); margin:0 0 1.4rem}
.stat b{color:var(--settle-ink)}
.fig{margin:0}
.fig svg{display:block; width:100%; height:auto}

/* ========================================================== BUTTONS */
.ctas{display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:1.5rem}
.btn{font:600 .78rem var(--sans); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; padding:.85em 1.5em; border-radius:5px; white-space:nowrap;
  display:inline-block; border:1px solid transparent; cursor:pointer}
.btn.primary{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn.primary:hover{opacity:.88}
.btn.ghost{border-color:var(--ink); color:var(--ink); background:none}
.btn.ghost:hover{background:var(--tint)}
.btn.text{padding:.85em .2em; color:var(--muted); border-bottom:1px solid transparent; border-radius:0}
.btn.text:hover{color:var(--ink); border-bottom-color:var(--faint)}
.btn[aria-disabled="true"], .btn:disabled{opacity:.5; cursor:not-allowed; pointer-events:auto}
.btn[aria-disabled="true"]:hover{opacity:.5; background:none}

/* ================================================ ACT RAIL (STICKY TOC) */
.actrail{position:sticky; top:0; z-index:10; background:var(--paper);
  border-bottom:1px solid var(--line); border-top:1px solid var(--line2)}
.actrail-in{max-width:960px; margin:0 auto; display:flex; gap:.2rem; padding:0 1.4rem}
.actrail a{font:600 .7rem var(--sans); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); padding:.8em .9em .7em;
  border-bottom:2px solid transparent; white-space:nowrap}
.actrail a i{font-style:normal; color:var(--faint); margin-right:.5em; font-weight:600}
.actrail a:hover{color:var(--c)}
.actrail a.on{color:var(--c); border-bottom-color:var(--c)}
.actrail .more{margin-left:auto}
@media (max-width:719px){
  .actrail{position:static; overflow-x:auto}
  .actrail .more{margin-left:0}
}

/* ==================================================== SIX-ACT DEVICE */
.act{display:grid; grid-template-columns:60px minmax(0,1fr); gap:0 1.6rem; margin-top:3.2rem}
.act-rail{display:flex; flex-direction:column; align-items:center}
.act-num{width:46px; height:46px; border-radius:50%; flex:none;
  border:2px solid var(--c); background:var(--ct); color:var(--c);
  font:600 .82rem var(--sans); display:flex; align-items:center; justify-content:center}
.act-line{flex:1; width:2px; background:linear-gradient(var(--c),var(--c2,var(--line))); margin-top:.6rem; min-height:2rem}
.act:last-of-type .act-line{background:linear-gradient(var(--c),transparent)}
.act h3{margin:.1rem 0 .6rem; font-size:1.22rem}
.act .chip{margin-bottom:.7rem}
.act .detail{font-style:italic; color:var(--muted); font-size:1.02rem}
.act .scope{font:400 .85rem/1.5 var(--sans); color:var(--muted); margin-top:.6rem}
@media (max-width:600px){ .act{grid-template-columns:44px minmax(0,1fr); gap:0 1rem}
  .act-num{width:38px; height:38px; font-size:.72rem} }

/* compact horizontal act strip (index): six single-line chips in a row */
.actstrip{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.7rem; margin:1.6rem 0 .4rem}
.actstrip a{display:block; text-decoration:none; border:1px solid var(--line); border-top:3px solid var(--c,var(--open));
  border-radius:6px; padding:.85rem .9rem; background:var(--paper)}
.actstrip a:hover{background:var(--tint); border-color:var(--faint); border-top-color:var(--c,var(--open))}
.actstrip .n{font:600 .6rem var(--sans); letter-spacing:.14em; color:var(--faint)}
.actstrip b{display:block; font:600 .92rem var(--sans); color:var(--c,var(--open)); margin:.2rem 0 .25rem; text-transform:uppercase; letter-spacing:.04em}
.actstrip span{display:block; font:400 .82rem/1.4 var(--serif); color:var(--muted)}
@media (max-width:820px){ .actstrip{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:520px){ .actstrip{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ===================================================== SPEC TABLES */
table.spec{width:100%; border-collapse:collapse; font:400 .92rem/1.45 var(--sans); margin:1.2rem 0}
table.spec th{font:600 .68rem var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:.5em .7em; border-bottom:2px solid var(--ink)}
table.spec td{padding:.65em .7em; border-bottom:1px solid var(--line2); vertical-align:top}
table.spec td:first-child{color:var(--lead)}
.rung{display:inline-block; font:600 .66rem var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--c); border:1.4px solid var(--c); border-radius:3px; padding:.15em .5em; background:var(--ct)}
tr.struck td{color:var(--faint)}
tr.struck td:first-child, tr.struck td:nth-child(2){text-decoration:line-through; text-decoration-color:var(--red)}
tr.struck .never{color:var(--red); font-weight:600; text-decoration:none}

/* ========================================================= WIRE TRACE */
.wire{background:var(--tint); border:1px solid var(--line2); border-radius:6px;
  padding:.9rem 0; margin:1.4rem 0 .3rem; font:.8rem/1.9 var(--mono)}
.wire .wrow{display:grid; grid-template-columns:2.6ch 4.8em minmax(22em,1fr) auto;
  gap:0 1.2em; padding:0 1.1rem 0 .9rem; white-space:nowrap; align-items:baseline}
.wire .wrow.tick{box-shadow:inset 3px 0 var(--open)}
.wire .wn{color:var(--faint)}
.wire .wpill{font:600 .62rem var(--sans); letter-spacing:.12em; text-transform:uppercase;
  justify-self:start; align-self:center; padding:.1em .55em; border-radius:3px; border:1px solid var(--line)}
.wire .wpill.core{color:var(--open); border-color:var(--open)}
.wire .wpill.vendor{color:var(--muted)}
.wire .wp{color:var(--ink)}
.wire .wg{color:var(--muted)}
.payoff{font-size:1.05rem; margin:.7rem 0 0}
.payoff code{white-space:normal}

/* ==================================================== RECEIPT DEVICE */
.receipt{margin:1.3rem 0 .2rem; font:.8rem var(--mono)}
.receipt .segs{display:inline-flex; align-items:center; gap:.5em; flex-wrap:wrap}
.receipt .seg{padding:.45em .9em; border-radius:4px; border:1.4px solid}
.receipt .seg.pay{color:var(--open); border-color:var(--open); background:var(--open-t)}
.receipt .seg.sig{color:var(--settle-ink); border-color:var(--settle); background:var(--settle-t)}
.receipt .middot{color:var(--faint)}
.receipt .cosign{display:block; margin-top:.55em; font:600 .64rem var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:var(--settle-ink)}

/* ======================================================= MONEY CARDS */
.rails{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; margin:1.6rem 0}
.rail-card{border:1px solid var(--line); border-top:3px solid var(--settle);
  border-radius:6px; padding:1.1rem 1.2rem; background:var(--paper)}
.rail-card h3{margin:0 0 .5rem; font-size:.98rem}
.rail-card p{font-size:.98rem; margin:0; color:var(--lead)}
.rail-card .n{color:var(--settle-ink); margin-right:.4em}
@media (max-width:820px){ .rails{grid-template-columns:minmax(0,1fr)} }
.nonneg{border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1rem 0; margin:1.8rem 0 1.2rem; text-align:center;
  font:600 .7rem/2 var(--sans); letter-spacing:.15em; text-transform:uppercase; color:var(--settle-ink)}

/* =================================================== INTEGRATE PANELS */
.panels{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; margin-top:1.8rem}
@media (max-width:960px){ .panels{grid-template-columns:minmax(0,1fr)} }
.panel h3{margin-top:0}
.panel .plead{font-size:1rem; color:var(--lead)}
pre.code{font:.75rem/1.65 var(--mono); background:var(--tint); border:1px solid var(--line2);
  border-radius:6px; padding:1rem 1.2rem; overflow-x:auto; margin:.9rem 0 0}
pre.code code{background:none; padding:0; border-radius:0; white-space:pre}
pre.code .c{color:var(--muted); font-style:italic}
pre.code .s{color:var(--commit)}
pre.code .k{color:var(--try)}

/* ========================================================= THE LAW */
.law{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.9rem; margin-top:1.6rem}
@media (max-width:680px){ .law{grid-template-columns:minmax(0,1fr)} }
.inv{border:1px solid var(--line2); border-left:3px solid var(--c,var(--evap));
  border-radius:0 5px 5px 0; padding:.75rem 1rem; background:var(--paper)}
.inv b{display:block; font:600 .7rem var(--sans); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); margin-bottom:.25rem}
.inv b i{font-style:normal; color:var(--faint); margin-right:.5em}
.inv span{font:400 .92rem/1.5 var(--serif); color:var(--lead)}

/* ========================================================== STATUS */
.status{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.4rem; margin-top:1.4rem}
@media (max-width:820px){ .status{grid-template-columns:minmax(0,1fr)} }
.status h3{margin-top:0}
.status ul{margin:.4rem 0 0; padding-left:1.15em}
.status li{margin-bottom:.7em; font-size:1.02rem}
.status .dim li{color:var(--muted)}

/* =================================================== WHY-NOW COLUMNS */
.three{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.2rem; margin-top:1.6rem}
.three h3{margin-top:0}
@media (max-width:820px){ .three{grid-template-columns:minmax(0,1fr)} }

/* ======================================================== APHORISMS */
.aphorisms{background:var(--tint)}
.aphorisms .row{padding:1.3rem 0; text-align:center; font-size:1.22rem; color:var(--lead)}
.aphorisms .row + .row{border-top:1px solid var(--line)}
.aphorisms .row em{color:var(--ink)}

/* ===================================================== AUDIENCE FORK */
.fork{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.2rem; max-width:960px; margin:0 auto}
@media (max-width:820px){ .fork{grid-template-columns:minmax(0,1fr)} }
.fork a{display:block; text-decoration:none; border:1px solid var(--line); border-radius:6px;
  padding:1.2rem 1.4rem; background:var(--paper)}
.fork a:hover{border-color:var(--faint); background:var(--tint)}
.fork b{display:block; font:600 1.02rem var(--sans); margin-bottom:.3rem}
.fork .fbody{font:400 .95rem/1.5 var(--serif); color:var(--muted)}
.fork .go{display:block; margin-top:.6rem; font:600 .7rem var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--settle-ink)}

/* =============================================== THE DEAD WAITLIST FORM */
/* The struck-through waitlist device: the proof of absence. This is NOT a
   real form — it has no <form>, no <input>, no submit. It is a picture of the
   thing Handsel refuses to build. Email is the whole flow. */
.deadform{position:relative; max-width:420px; margin:1.8rem 0 .4rem; border:1px solid var(--line);
  border-radius:8px; padding:1.2rem 1.4rem 1.4rem; background:var(--tint); opacity:.8}
.deadform .dlabel{font:600 .62rem var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:0 0 .35rem}
.deadform .dfield{height:2.1em; border:1px solid var(--line); border-radius:4px;
  background:var(--paper); margin-bottom:.9rem}
.deadform .dbtn{height:2.3em; border-radius:4px; background:var(--faint); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font:600 .72rem var(--sans); letter-spacing:.18em; text-transform:uppercase}
.deadform .dstrike{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.deadform .dstrike line{stroke:var(--red); stroke-width:2.4; stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.deadform .dno{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-6deg);
  font:700 .8rem var(--sans); letter-spacing:.3em; color:var(--red); background:var(--paper);
  border:1.6px solid var(--red); padding:.3em .6em .3em .9em}

/* ============================================================ CODA */
.coda{font:400 1.5rem/1.55 var(--serif); text-align:center; max-width:620px;
  margin:3rem auto 2.5rem; color:var(--lead)}
.coda .acts b{font-family:var(--sans); font-size:1.15rem; letter-spacing:.06em}
.coda .acts .sep{color:var(--faint)}

/* ========================================================== FOOTER */
footer{border-top:1px solid var(--line); background:var(--tint); padding:3rem 1.4rem 2.2rem}
.foot-in{max-width:960px; margin:0 auto}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2.4rem}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} }
footer .wordmark{font-size:1.3rem}
footer .ftag{font:italic 400 1rem var(--serif); color:var(--muted); margin-top:.5rem}
.fcol b{display:block; font:600 .68rem var(--sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin-bottom:.7em}
.fcol a, .fcol span{display:block; font:400 .92rem/2 var(--sans); color:var(--muted); text-decoration:none}
.fcol a:hover{color:var(--ink)}
.foot-rule{border-top:1px solid var(--line); padding-top:1.1rem;
  font:600 .64rem var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}

/* =========================================================== PRINT */
@media print{
  :root, :root[data-theme="dark"]{
    --ink:#1b2430; --lead:#232d3b; --muted:#5c6672; --faint:#666f7c;
    --paper:#ffffff; --tint:#f6f4ef; --line:#d9d5cc; --line2:#eceae4;
    --open:#0e7568; --try:#2b5fa8; --prove:#6f51a1;
    --commit:#2b7247; --evap:#5c6b7a; --settle:#a97a1f; --settle-ink:#8a6212; --red:#a4432f;
    --open-t:#e7f1ef; --try-t:#e9eff8; --prove-t:#efeaf6;
    --commit-t:#e9f2ec; --evap-t:#edf0f3; --settle-t:#f6efe2;
  }
  .actrail, #themeBtn, .mast nav{display:none !important}
  .band{padding:2rem 1rem}
}