/* The design layer: the ledger on warm paper.
   Light-first (his call, 2026-08-28): warm paper is the identity, dark is
   the designed alternate. One display face (Bricolage Grotesque, variable
   400-800, self-hosted WOFF2 ~75KB), mono microlabels for the system's
   voice, sans for reading text. Committed color lives in deep-green ink
   containers on the paper, not in a timid grey wash.
   No framework, no build step. craft/WEB.md Parts 16 and 17. */

@font-face{
  font-family:"Bricolage Grotesque";
  src:url(/assets/fonts/bricolage-v2.woff2) format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
}

:root{
  /* paper */
  --bg:#f6f1e7;
  --bg2:#efe8da;
  --panel:rgba(255,255,255,.78);
  --panel2:#ffffff;
  --card:#ffffff;
  --line:rgba(29,34,43,.11);
  --line2:rgba(29,34,43,.22);
  --txt:#1d222b;
  --txt2:#4c545c;
  --txt3:#60666f;
  /* the accent world */
  --green:#1a6b4f;
  --green-bright:#2ea272;
  --green-deep:#144736;
  --green-glow:rgba(26,107,79,.12);
  --amber:#8a5220;
  --amber-big:#b06a35;
  --amber-sheen:#d99a5e;
  --amber-glow:rgba(176,106,53,.13);
  --red:#7a3030;
  --madder:#b23a32;
  /* the ink container: committed color on the paper */
  --ink:#14201a;
  --ink-2:#182720;
  --ink-txt:#f2efe6;
  --ink-txt2:#b9c2b6;
  --ink-txt3:#84907f;
  --ink-line:rgba(242,239,230,.14);
  --ink-panel:rgba(255,255,255,.05);
  --ink-green:#5fd4a2;
  --ink-amber:#d99a5e;
  /* shape */
  --r:26px;
  --r-s:14px;
  --shadow:0 24px 60px rgba(40,36,26,.13), 0 2px 8px rgba(40,36,26,.06);
  --shadow-s:0 10px 30px rgba(40,36,26,.1), 0 1px 4px rgba(40,36,26,.05);
  --rule:rgba(70,110,160,.08);
  --display:"Bricolage Grotesque",-apple-system,"Segoe UI",Arial,sans-serif;
  --serif:var(--display); /* legacy alias; every page reads this */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0e1216;
  --bg2:#131820;
  --panel:rgba(255,255,255,.05);
  --panel2:rgba(255,255,255,.09);
  --card:#1b2027;
  --line:rgba(235,238,245,.12);
  --line2:rgba(235,238,245,.22);
  --txt:#f1efe7;
  --txt2:#b8bec6;
  --txt3:#878e98;
  --green:#4fd39b;
  --green-bright:#5fe4ab;
  --green-deep:#1d5e4a;
  --green-glow:rgba(66,180,130,.17);
  --amber:#d99a5e;
  --amber-big:#d99a5e;
  --amber-sheen:#ecc094;
  --amber-glow:rgba(217,154,94,.12);
  --red:#cf7f74;
  --madder:#c9645a;
  --ink:#152119;
  --ink-2:#1a291f;
  --shadow:0 24px 70px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --shadow-s:0 10px 34px rgba(0,0,0,.42), 0 1px 4px rgba(0,0,0,.3);
  --rule:rgba(140,175,220,.05);
}}

:root[data-theme=dark]{
  --bg:#0e1216;
  --bg2:#131820;
  --panel:rgba(255,255,255,.05);
  --panel2:rgba(255,255,255,.09);
  --card:#1b2027;
  --line:rgba(235,238,245,.12);
  --line2:rgba(235,238,245,.22);
  --txt:#f1efe7;
  --txt2:#b8bec6;
  --txt3:#878e98;
  --green:#4fd39b;
  --green-bright:#5fe4ab;
  --green-deep:#1d5e4a;
  --green-glow:rgba(66,180,130,.17);
  --amber:#d99a5e;
  --amber-big:#d99a5e;
  --amber-sheen:#ecc094;
  --amber-glow:rgba(217,154,94,.12);
  --red:#cf7f74;
  --madder:#c9645a;
  --ink:#152119;
  --ink-2:#1a291f;
  --shadow:0 24px 70px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --shadow-s:0 10px 34px rgba(0,0,0,.42), 0 1px 4px rgba(0,0,0,.3);
  --rule:rgba(140,175,220,.05);
}

*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
html{scroll-behavior:smooth;overflow-x:clip}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--txt);
  font:17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* ruled ledger texture + two quiet glows. Fixed, cheap, no images. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(56rem 34rem at 82% -12%, var(--green-glow), transparent 60%),
    radial-gradient(40rem 26rem at -10% 108%, var(--amber-glow), transparent 60%),
    repeating-linear-gradient(to bottom, transparent 0 71px, var(--rule) 71px 72px);
}

.wrap{max-width:64rem;margin:0 auto;padding:0 1.25rem 6rem}

/* the system's voice */
.micro{
  font:600 .72rem/1 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--txt3);
}
.micro .live{color:var(--green)}

/* display type */
.display{
  font-family:var(--display);font-weight:640;
  letter-spacing:-.03em;line-height:1;margin:0;
  font-variation-settings:"opsz" 96;
}
.serifnum{font-family:var(--display);font-weight:620;
  font-variant-numeric:lining-nums;letter-spacing:-.03em;
  font-variation-settings:"opsz" 96}
.ital{font-family:var(--display);font-weight:520;letter-spacing:-.015em}


/* shared page furniture (used by /, /system, /book) */
section,[id]{scroll-margin-top:6.5rem}
/* capsule nav */
.nav{position:sticky;top:1rem;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;margin-top:1.1rem;
  padding:.55rem .6rem .55rem 1.4rem;border-radius:999px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav.hid{transform:translateY(calc(-100% - 1.4rem))}
.nav .wordmark{font-family:var(--display);font-weight:680;font-size:1.3rem;
  letter-spacing:-.03em;color:var(--txt);text-decoration:none}
.nav .links{display:flex;gap:1.6rem}
.nav .links a{font:600 .72rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt3);text-decoration:none;
  transition:color .25s}
.nav .links a:hover{color:var(--txt)}
.nav .right{display:flex;align-items:center;gap:.5rem}
.nav .btn{min-height:42px;padding:.7rem 1.25rem;font-size:.88rem}
.tbtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);
  background:transparent;color:var(--txt2);cursor:pointer;font-size:1rem;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .25s,border-color .25s,transform .25s}
.tbtn:hover{color:var(--txt);border-color:var(--txt3);transform:rotate(15deg)}
@media(max-width:720px){.nav .links{display:none}}
.rec{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  padding:.68rem 1rem;border-bottom:1px solid var(--line)}
.rec:last-child{border-bottom:0}
.rec .t{font-weight:650;font-size:.92rem}
.rec .t small{display:block;font-weight:400;color:var(--txt3);font-size:.78rem;margin-top:.1rem}
.rec .a{font:600 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt3);white-space:nowrap}
.rec.green .t,.rec.green .a{color:var(--green)}
.frag{border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--bg2);padding:.95rem 1rem}
.frag .fslots{display:flex;gap:.45rem;flex-wrap:wrap}
.frag .fslot{font:600 .8rem/1 var(--sans);padding:.5rem .75rem;background:var(--panel2);
  border-radius:999px;border:1px solid var(--line2);color:var(--txt2);cursor:pointer;
  transition:color .2s,background .2s,border-color .2s}
.frag .fslot:hover{border-color:var(--txt3);color:var(--txt)}
.frag .fslot.on{background:var(--txt);color:var(--bg);border-color:var(--txt);font-weight:700}
.frag .fline{display:flex;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;
  font:500 .78rem/2.1 var(--mono);color:var(--txt3)}
.frag .fline b{color:var(--green);font-weight:600;min-width:0;text-align:right}
.frag .ftaps{display:grid;gap:.45rem}
.frag .ftap{font:600 .82rem/1 var(--sans);padding:.55rem .8rem;text-align:center;
  background:var(--panel2);border-radius:999px;border:1px solid var(--line2);color:var(--txt2);
  cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.frag .ftap:hover{border-color:var(--txt3);color:var(--txt)}
.frag .ftap.on{border-color:var(--green);color:var(--green)}
.mhead{display:flex;justify-content:space-between;align-items:center;
  padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.mbody{padding:.9rem 1rem 1rem}

/* masthead */
.mast{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem 1rem;
  padding:1.6rem 0 0;flex-wrap:wrap;
}
.mast>.micro{white-space:nowrap}
.dot{
  display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--green);vertical-align:1px;margin-right:.45rem;
  box-shadow:0 0 0 0 var(--green-glow);
}
@media (prefers-reduced-motion:no-preference){
  .dot{animation:pulse 2.6s ease-out infinite}
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(46,162,114,.45)}
    70%{box-shadow:0 0 0 .6rem rgba(46,162,114,0)}
    100%{box-shadow:0 0 0 0 rgba(46,162,114,0)}
  }
}

/* panels */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.panel--tint{
  background:linear-gradient(160deg, var(--green-glow), transparent 55%), var(--panel);
}
.panel--amber{
  background:linear-gradient(160deg, var(--amber-glow), transparent 55%), var(--panel);
}
/* the committed-color container: deep green ink on the paper */
.panel--ink{
  background:
    repeating-linear-gradient(to bottom, transparent 0 47px, rgba(150,180,220,.06) 47px 48px),
    radial-gradient(46rem 30rem at 85% -20%, rgba(95,212,162,.13), transparent 60%),
    radial-gradient(36rem 26rem at -8% 112%, rgba(217,154,94,.1), transparent 60%),
    linear-gradient(170deg, var(--ink-2), var(--ink));
  border:1px solid var(--ink-line);
  color:var(--ink-txt);
}
.panel--ink .micro{color:var(--ink-txt3)}
.panel--ink .micro .live{color:var(--ink-green)}

/* pills */
.pill{
  font:600 .85rem/1 var(--sans);
  padding:.62rem 1.05rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line2);background:transparent;color:var(--txt2);
  min-height:44px;
  transition:color .18s,background .18s,border-color .18s;
}
.pill:hover{color:var(--txt);border-color:var(--txt3)}
.pill[aria-pressed=true]{
  background:var(--txt);color:var(--bg);border-color:var(--txt);font-weight:700;
}
.btn{
  font:650 .95rem/1 var(--sans);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.5rem;border-radius:999px;border:0;cursor:pointer;
  background:var(--txt);color:var(--bg);min-height:48px;
  text-decoration:none;
  transition:transform .18s ease,opacity .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.green{background:var(--green);color:#fff}
.btn.ghost{
  background:var(--bg);color:var(--txt2);border:1px solid var(--line2);
}
.btn.ghost:hover{color:var(--txt)}

/* inputs */
.field{
  width:100%;padding:.85rem 1rem;font:inherit;color:var(--txt);
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-s);
  outline:none;transition:border-color .18s;
}
.field:focus{border-color:var(--green)}
label.lab{display:block;margin:1.1rem 0 .4rem}

/* entrance: quiet, staggered, honored off */
.rise{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);
    animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}
  .rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.32s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* skeleton shimmer that reserves its box */
.skel{
  color:transparent!important;background:var(--bg2);
  border-radius:10px;user-select:none;
}
@media (prefers-reduced-motion:no-preference){
  .skel{animation:sk 1.5s ease-in-out infinite}
  @keyframes sk{50%{opacity:.5}}
}


/* shared components (both product surfaces) */

/* the path: the funnel as a flow, not a boxed strip */
.path{padding:1.7rem 1.6rem;display:flex;align-items:baseline;
  flex-wrap:wrap;gap:1.1rem 0}
.step{display:flex;align-items:baseline;gap:1.1rem}
.step .n{font-family:var(--display);font-weight:620;font-size:2.1rem;line-height:1;
  letter-spacing:-.02em}
.step .l{font:600 .68rem/1.25 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt3);max-width:7.5rem}
.step .arrow{color:var(--txt3);font-size:1.1rem;padding:0 1.2rem}
.step:last-child .n{color:var(--green)}

/* section heads */
section{margin-top:4.6rem}
.shead{display:flex;align-items:baseline;justify-content:space-between;
  gap:.4rem 1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.shead h2{font-family:var(--display);font-weight:640;
  font-size:clamp(1.9rem,5vw,2.6rem);
  letter-spacing:-.03em;margin:0;line-height:1.02;
  font-variation-settings:"opsz" 96}
.shead .micro{white-space:nowrap}

/* the running table as a product panel */
.runpanel{overflow:hidden}
.runwrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.runwrap::-webkit-scrollbar{height:8px}
.runwrap::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.runwrap::-webkit-scrollbar-track{background:transparent}
.runhead,.runrow{display:grid;gap:.8rem;align-items:center;padding:.95rem 1.5rem}
.runhead{border-bottom:1px solid var(--line)}
.runhead span{font:600 .66rem/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt3)}
.runrow{border-bottom:1px solid var(--line)}
.runrow:last-child{border-bottom:0}
.chip{font:650 .72rem/1 var(--mono);letter-spacing:.06em;
  padding:.38rem .6rem;border-radius:8px;background:var(--panel2);
  border:1px solid var(--line);display:inline-block}
.chip.bad{color:var(--red);border-color:var(--red)}
.chip.green{color:var(--green);border-color:var(--green)}
.runrow .num{font-family:var(--display);font-weight:620;font-size:1.35rem;
  text-align:right;letter-spacing:-.02em}
.runrow .cost{color:var(--amber-big);font-size:1.55rem}
.runfoot{padding:1rem 1.5rem;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--txt3)}

/* statement panels: empty states as designed moments */
.statement{padding:2.6rem 2rem 2.4rem;text-align:center}
.statement .big{font-family:var(--display);font-weight:560;
  font-size:clamp(1.6rem,4.6vw,2.2rem);line-height:1.12;margin:0;
  letter-spacing:-.02em}
.statement .sub{color:var(--txt3);font-size:.95rem;max-width:44ch;
  margin:.9rem auto 0}

/* error panel */
.errpanel{padding:3rem 2rem;text-align:center;margin-top:4rem}
.errpanel .big{font-family:var(--display);font-weight:620;
  font-size:clamp(1.9rem,6vw,2.8rem);
  line-height:1.05;margin:0 0 1rem;letter-spacing:-.03em}
.errpanel p{color:var(--txt2);max-width:46ch;margin:.4rem auto}

footer{margin-top:5.5rem;color:var(--txt3);font-size:.85rem;
  border-top:1px solid var(--line);padding-top:1.5rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

[hidden]{display:none!important}
::selection{background:var(--green-deep);color:#fff}

/* narrow screens: the system's voice wraps instead of pushing the page */
@media(max-width:520px){
  .shead .micro,.mast>.micro,.vhead .micro{white-space:normal;line-height:1.6}
}