/* notebook.css: the field-notebook system for hobocode.net (2026-09-02).
   Loaded after each page's own <style>, it owns tokens, type, chrome and the
   shared components. Page-specific layout stays in the page. Structure carries
   the identity: a margin column for stamps and plate numbers, figures framed as
   plates, a row of index tabs for the nav. Palette and type stay quiet. */

@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;0,7..72,700;1,7..72,400;1,7..72,500&family=Archivo+Narrow:ital,wght@0,400;0,500;0,600;1,400&family=Courier+Prime:wght@400;700&display=swap');

:root{
  /* the stock and what is drawn on it */
  --nb-stock:#eeeae0; --nb-stock-2:#e6e1d4; --nb-card:#f4f1e8;
  --nb-ink:#2a2926; --nb-graphite:#6b665d; --nb-faint:#958f83;
  --nb-rule:#cfc8b8; --nb-rule-2:#b9b19f;
  --nb-pencil:#b93a2b;
  --nb-harm:#c47a1c; --nb-charge:#2f6f6a;
  --nb-book:'Literata',Georgia,'Iowan Old Style',serif;
  --nb-sans:'Archivo Narrow','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --nb-stamp:'Courier Prime','Courier New',monospace;

  /* the families' own tokens, redirected. Charts and JS read these. */
  --paper:var(--nb-stock); --card:var(--nb-card); --card2:var(--nb-stock-2);
  --panel:var(--nb-stock-2); --stage:var(--nb-stock);
  --ink:var(--nb-ink); --soft:#3e3b36; --sub:var(--nb-graphite); --muted:var(--nb-graphite); --faint:var(--nb-faint);
  --rule:var(--nb-rule); --line:var(--nb-rule); --line2:var(--nb-rule-2);
  --verm:var(--nb-pencil); --accent:var(--nb-pencil);
  --blue:#2f5f8f; --green:#3f7a4a; --crim:var(--nb-pencil);
  --ochre:var(--nb-harm); --ember:var(--nb-harm); --ember-ink:#8f5712; --ember-bg:rgba(196,122,28,.10);
  --plum:var(--nb-charge); --pol:var(--nb-charge); --hate:#8a2b3d;
  --good:#3f7a4a; --good-bg:rgba(63,122,74,.10); --warning:#b0576e; --serious:#8a2b3d; --critical:#5a1626;
  --sev1:#ead4cf; --sev2:#d9a79e; --sev3:#bf6e64; --sev4:#8a2b3d; --sev5:#5a1626;
  --w1:#1f4f4b; --w2:#2f6f6a; --w3:#7fa9a5; --w4:#cfe0de;
  --ign-cold:#c9c3b4; --ign-warm:var(--nb-harm); --ign-near:#8a2b3d; --ign-fire:#5a1626;
  --disp:var(--nb-book); --body:var(--nb-book); --serif:var(--nb-book);
  --font-display:var(--nb-book); --font-body:var(--nb-book);
  --mono:var(--nb-sans); --font-mono:var(--nb-sans);
  --gold:var(--nb-harm); --next:var(--nb-charge); --shadow:none;
  --brass:var(--nb-harm); --purple:var(--nb-charge); --rust:var(--nb-pencil); --slate:var(--nb-graphite);
  --topbar:var(--nb-stock-2);
}

/* the stock: one texture, quiet */
html{background:var(--nb-stock)}
body{background:var(--nb-stock);color:var(--nb-ink);font-family:var(--nb-book);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E")}
::selection{background:var(--nb-pencil);color:#fff}
a{color:var(--nb-ink);text-decoration-color:var(--nb-pencil);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--nb-pencil)}
:focus-visible{outline:2px solid var(--nb-pencil);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* type: one book face, sized by role */
h1,h2,h3,h4,.hero-title,.doc-title,.journal-title,.post-title,.fname,.qtitle,.arname{font-family:var(--nb-book);font-weight:600;letter-spacing:-.012em;color:var(--nb-ink);text-wrap:pretty}
h1,.hero-title,.doc-title,.journal-title{font-weight:700;font-variation-settings:'opsz' 72;line-height:1.08}
h2{line-height:1.18} h3,h4{line-height:1.28}
p,li,dd,td,th,.dek,.lede,.sub{font-family:var(--nb-book)}
em,i,.dek,.lede,.sub,figcaption,.cap,.note,.dltnote,.sharehint,.diagram-hint,.contents-dek{font-style:italic}
.dek,.lede,.sub,.journal-dek,.post-dek,.hero-tag,.hero-tagline{color:#3e3b36;font-weight:400}
.dek em,.lede em,.sub em{font-style:normal}
strong,b{font-weight:600}
code,pre,kbd{font-family:var(--nb-sans);font-size:.92em;background:var(--nb-stock-2);padding:.05em .3em;border-radius:2px}

/* labels: the working sans, sentence case, no tracking, no caps */
.kick,.eyebrow,.doc-eyebrow,.journal-label,.what-label,.contact-label,.hg-label,.elabel,.wlabel,.sharelab,.dd-grp,.tsrc,.ttar,.tdom,.hh,.fk,.qsub,.qhead,.qhead2,.sstab,.facet,.tdate,.wdate,.byline,.dmeta,.fmeta,.post-meta,.cat,.arflag,.chip,.pill,.defchip,.rchip,.wchip,.vchip,.ichip,.tact,.tile .l,.tiles .l,.stat .l,.glance .l,.big .l,.ssnote,.docmeta,.lbl,.lab,.flab,.k,.nglab,.gk,.hstrip,.hseg,.tsrc{
  font-family:var(--nb-sans);text-transform:none;letter-spacing:0;font-weight:500}
.kick,.eyebrow,.doc-eyebrow,.journal-label,.dd-grp,.sharelab,.hg-label,.elabel,.wlabel,.hh,.fk,.qsub,.lbl,.lab,.flab,.k,.nglab,.gk{color:var(--nb-graphite);font-size:.86rem}
.doc-eyebrow::before,.eyebrow::before,.kick::before{content:none}

/* numbers read as a ledger */
.n,.v,.big,.hval,.fv,.qval,.cnum,.feps,.agg-v,.stat .n,.tile .n,.tiles .n,.glance .n,.metric,.dial text{font-family:var(--nb-book);font-variant-numeric:tabular-nums lining-nums;font-weight:600;letter-spacing:-.01em}

/* chrome: the index-tab row */
.srow{font-family:var(--nb-sans);font-size:.92rem;letter-spacing:0;text-transform:none;padding:14px 0 0;border-bottom:0}
.srow>a{color:var(--nb-graphite);text-decoration:none;padding:.3rem .6rem;border:1px solid transparent;border-bottom:0;border-radius:2px 2px 0 0}
.srow>a:hover{color:var(--nb-ink);border-color:var(--nb-rule)}
.navdd summary{font-family:var(--nb-sans);letter-spacing:0;text-transform:none;color:var(--nb-graphite);padding:.3rem .6rem}
.navdd summary::after{content:" \25BE";font-size:.6rem}
.navdd-m{background:var(--nb-card);border:1px solid var(--nb-rule-2);border-radius:2px;box-shadow:3px 3px 0 var(--nb-rule);padding:8px;min-width:300px}
.navdd-m a{font-family:var(--nb-sans);font-size:.9rem;letter-spacing:0;text-transform:none;border-radius:2px;color:var(--nb-ink)}
.navdd-m a:hover{background:var(--nb-stock-2)}
.navdd-m a.dd-hl{background:var(--nb-ink);color:var(--nb-stock);font-weight:600}
.navdd-m a.dd-hl2{background:var(--nb-charge);color:var(--nb-stock);font-weight:600}
.navdd-m .dd-grp{font-family:var(--nb-sans);font-size:.72rem;font-weight:600;letter-spacing:0;text-transform:none;opacity:.7;padding:.5rem .7rem .15rem}

/* masthead: a pencil rule, a stamp */
.mast{border-bottom:1.5px solid var(--nb-ink);padding:22px 0 12px}
.mast .brand,.brand{font-family:var(--nb-book);font-weight:700;letter-spacing:-.01em;text-transform:none;font-size:1.05rem;color:var(--nb-ink)}
.mast .issue,.issue{font-family:var(--nb-sans);letter-spacing:0;text-transform:none;color:var(--nb-graphite);font-size:.9rem}
.nb-stamp{display:inline-block;font-family:var(--nb-stamp);font-size:.78rem;line-height:1.25;letter-spacing:.02em;color:var(--nb-pencil);border:1.5px solid var(--nb-pencil);padding:4px 7px;transform:rotate(-2deg);text-transform:uppercase;border-radius:2px;background:transparent}

/* plates: figures framed with a double rule and a caption */
.nb-plate,.wcard,.fcard,.card,.tile,.tiles>*,.diagram-card,.gate-box,.post-card,.chartcard,.panel,.dtwrap,.cdetail,.arena,.board,.stat,.glance>*,.fanitem{
  background:var(--nb-card);border:1px solid var(--nb-rule-2);border-radius:2px;box-shadow:none;outline:1px solid var(--nb-rule);outline-offset:2px}
.nb-plate-cap,figcaption,.cap,.diagram-hint{font-family:var(--nb-book);font-style:italic;color:var(--nb-graphite);font-size:.9rem}
.chip,.pill,.defchip,.rchip,.wchip,.vchip,.ichip,.tact,.fbtn,.fopt,.tbtn,.defbtn,.sharebtn,.cta-btn,.hero-cta,.menu-btn,.fab,.closebtn{border-radius:2px;box-shadow:none;text-transform:none;letter-spacing:0;font-family:var(--nb-sans)}
.sharebtn,.tbtn,.defbtn,.fbtn,.fopt{border:1px solid var(--nb-rule-2);background:var(--nb-card);color:var(--nb-ink);font-weight:500}
.sharebtn:hover,.tbtn:hover,.defbtn:hover,.fbtn:hover,.fopt:hover{border-color:var(--nb-ink);background:var(--nb-stock-2)}
.fab{background:var(--nb-ink);color:var(--nb-stock);animation:none;box-shadow:2px 2px 0 var(--nb-rule-2);border-radius:2px;font-family:var(--nb-sans);text-transform:none;letter-spacing:0}

/* ledgers: dotted pencil rules, right-aligned figures */
table{border-collapse:collapse}
th{font-family:var(--nb-sans);font-weight:600;text-transform:none;letter-spacing:0;color:var(--nb-graphite);border-bottom:1.5px solid var(--nb-ink)}
td{border-bottom:1px dotted var(--nb-rule-2)}
td.mono,.mono,.dmono{font-family:var(--nb-sans);letter-spacing:0}
.dltrow,.dbrow,.detailrow,.qrow,.statrow,.hrow,.fxrow{border-bottom:1px dotted var(--nb-rule-2)}

/* remove what the old look leaned on */
.hero-overlay,.photo-break-overlay{background:none}
[class*="glow"],.hero-title,.hero-tag,.hero-tagline,.hero-guide{text-shadow:none}
.tip,.scrim{border-radius:2px}

/* margin column, when a page opts in */
.nb-spread{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 34px}
.nb-margin{border-right:1.5px solid var(--nb-ink);padding:6px 16px 6px 0;display:flex;flex-direction:column;gap:14px;color:var(--nb-graphite);font-family:var(--nb-stamp);font-size:.78rem;line-height:1.35}
.nb-margin .nb-stamp{align-self:flex-start}
@media (max-width:720px){.nb-spread{grid-template-columns:1fr}.nb-margin{border-right:0;border-bottom:1.5px solid var(--nb-ink);flex-direction:row;flex-wrap:wrap;gap:10px 18px;padding:0 0 10px;margin-bottom:16px}}

/* footer */
.brandfoot{max-width:1040px;margin:34px auto 0;padding:14px 20px 34px;font-family:var(--nb-sans);font-size:.85rem;line-height:1.5;color:var(--nb-graphite);text-align:left;border-top:1.5px solid var(--nb-ink)}
.footer{font-family:var(--nb-sans);color:var(--nb-graphite);border-top:1.5px solid var(--nb-ink);background:transparent}
.footer-brand,.footer-motto,.footer-copy{font-family:var(--nb-book)}

/* every label the families set in tracked caps, back to sentence case */
.eyebrow,.doc-eyebrow,.menu-btn,.scene-caption .sn,.ngroup .nglab,.reader-back,.reader-nav .lbl,.panel-note .tag,.grid-cards .card .k,.reject-card .rk,
.ember-detail-inner .col .lab,.flow-feature-row .fcol .lab,.lane-col .lt,.amatrix .arow.ahead,.cta-btn,.topbar .srow,.topbar .srow a,.mast .issue,.byline,.kick,
.trig .tdom,.trig .tact,.wcard .wdate,.mnav .in,.arena .arname,.rchip b,.qhead2,.fcard .fk,.hh .t,.bhead .t,.qrow.qhead,.drill .dk,.drill .povl,
.journal-label,.post-meta,.post-link,.sharelab,.navdd-m .dd-grp,header.site .site-nav a,header.site details.navdd summary,.receipt .rlabel,.fanitem,.fab{
  text-transform:none!important;letter-spacing:0!important;font-family:var(--nb-sans)}
.topbar .srow a,.topbar .brand,.mast .brand a{color:var(--nb-ink)}
.topbar .brand::before,.brand::before{display:none}
.eyebrow,.doc-eyebrow,.kick,.journal-label{font-size:.92rem;color:var(--nb-graphite);font-weight:500}
th,table.dt th,.deltas th,.staticsum th{text-transform:none;letter-spacing:0;font-family:var(--nb-sans);font-weight:600;color:var(--nb-graphite)}
.glance h2,.staticsum h2,.staticsum h3,.drill h4,.fdetail h4,.diagram-title{text-transform:none;letter-spacing:-.01em;font-family:var(--nb-book);font-weight:600;color:var(--nb-ink)}
summary{list-style:none} summary::-webkit-details-marker{display:none} summary::marker{content:""}

/* chips carried their own hex; the notebook ramps replace them */
.p1{background:#5a1626;color:#f4f1e8} .p2{background:#bf6e64;color:#fff} .p3{background:#ead4cf;color:#5a1626} .p4{background:var(--nb-stock-2);color:var(--nb-graphite)}
.wc-W1{background:#1f4f4b;color:#f4f1e8} .wc-W2{background:#2f6f6a;color:#f4f1e8} .wc-W3{background:#cfe0de;color:#1f4f4b} .wc-W4{background:var(--nb-stock-2);color:var(--nb-graphite)}
.i-cold{background:var(--nb-stock-2);color:var(--nb-graphite)} .i-warming{background:#f1e2cc;color:#8f5712} .i-near_ignition{background:#ead4cf;color:#5a1626} .i-ignited{background:#5a1626;color:#f4f1e8}
.v-supported_by_checks{background:#dbe6dc;color:#2f5a38} .v-mixed_evidence{background:#f1e2cc;color:#8f5712} .v-contradicted_by_checks{background:#ead4cf;color:#5a1626} .v-not_testable{background:var(--nb-stock-2);color:var(--nb-graphite)}
.wchip,.vchip,.ichip,.rchip,.chip,.pill,.defchip{border-radius:2px;font-family:var(--nb-sans);font-size:.72rem;font-weight:600;letter-spacing:0;text-transform:none}
.btrack{border-radius:1px;background:var(--nb-stock-2)} .bfill{border-radius:0}

/* the report spread: margin column beside the hero */
.nb-spread{margin-top:22px}
.nb-spread .hero{margin:0;padding-top:0}
.nb-margin span{display:block}
.nb-margin .nb-k{font-family:var(--nb-sans);color:var(--nb-faint);font-size:.8rem;margin-bottom:1px}

/* the notebook is a light artifact: the families' dark-mode blocks stand down */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){
  :root{--paper:var(--nb-stock);--card:var(--nb-card);--card2:var(--nb-stock-2);--ink:var(--nb-ink);--sub:var(--nb-graphite);--faint:var(--nb-faint);--rule:var(--nb-rule);--line:var(--nb-rule);--verm:var(--nb-pencil);--panel:var(--nb-stock-2);--stage:var(--nb-stock);--soft:#3e3b36;--muted:var(--nb-graphite);--line2:var(--nb-rule-2)}
  html,body,.page{background:var(--nb-stock);color:var(--nb-ink)}
  h1,h2,h3,h4{color:var(--nb-ink)}
}
/* fade-in classes: content is visible from the first paint */
.reveal,.an-fadeup,.an-popin,.an-draw{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}

/* pages that carry a data-theme switch: the notebook is light either way */
:root[data-theme="dark"],:root[data-theme="light"]{--paper:var(--nb-stock);--card:var(--nb-card);--card2:var(--nb-stock-2);--ink:var(--nb-ink);--sub:var(--nb-graphite);--faint:var(--nb-faint);--line:var(--nb-rule);--rule:var(--nb-rule);--hate:#8a2b3d;--pol:var(--nb-charge);--gold:var(--nb-harm);--gold-soft:var(--nb-stock-2);--next:var(--nb-stock-2);--shadow:none}
:root[data-theme="dark"] body,:root[data-theme="dark"] .page{background:var(--nb-stock);color:var(--nb-ink)}

/* the section button: a small tab on phones, off the headline */
.fab{width:64px;height:64px;font-size:.72rem}
@media (max-width:720px){.fab{top:auto;bottom:16px;right:14px;transform:none;width:auto;height:auto;padding:9px 12px;border-radius:2px}}

/* accessibility floor (2026-09-02, after a spot check found 8-11px chrome):
   nothing a reader has to read renders under 14px, and the light gray used
   for secondary text meets 4.5:1 on the stock. The floor is deliberate and
   marked !important because the families set these sizes in compound
   selectors of their own. */
:root{--nb-faint:#6b665d}
.dmeta,.dmeta b,.xl,.xv,.xt,.xf,.dtag,.dmono,.fmeta,.tdate,.tdom,.tact,.arname,.arflag,.arsr,.fk,.fm,.fv,.cap,.modfoot,.dd-sub,.fanitem,.sharebtn,.sharelab,.sharehint,.rchip,.defchip,.chip,.wchip,.vchip,.ichip,.dltnil,.dltnote,.dlt,.sn,.wdate,.wlanes,.ttar,.nb-k,.nb-margin,.byline,.byline span,.dd-grp,.stat,.stat .l,.tile .l,.tiles .l,.glance .l,.glance .n,.big .l,.gn,.ht,.hval,.t,.k,.lbl,.lab,.flab,.elabel,.wlabel,.tsrc,.hh .t,.arrow,.kick,.eyebrow,.doc-eyebrow,.journal-label,.post-meta,.issue,.mast .issue,.srow,.srow>a,.navdd summary,.navdd-m a,
.drill .dk,.drill .povl,.drill h4,.fdetail h4,.qsub,.qhead,.qhead2,.qrow.qhead,table.dt th,.deltas th,.staticsum th,th,td,sup.cite,.cite,abbr.ac,.tip,.scrim p{
  font-size:max(.875rem,1em)!important;line-height:1.45}
.dmeta,.dmeta b,.xl,.dtag,.dmono,.fmeta,.tdate,.tdom,.tact,.arname,.fk,.fm,.cap,.modfoot,.stat .l,.tile .l,.tiles .l,.glance .l,.big .l,.t,.k,.lbl,.lab,.flab,.sn,.wdate,.nb-k,.sharehint,th,table.dt th,.deltas th,.staticsum th,.hh .t,.arrow{font-size:.875rem!important}
td,.dlt,.dltnil,.fv,.ht,.arsr,.sn,.ttar,.wlanes,.dltnote,.byline,.byline span,.navdd-m a,.dd-sub,.fanitem,.sharebtn,.rchip,.defchip,.chip,.wchip,.vchip,.ichip,.srow>a,.navdd summary,.issue,.mast .issue{font-size:.8125rem!important}
.v,.hval,.feps,.gn,.glance .n,.stat .n,.tile .n,.tiles .n{font-size:1rem!important}
.drill h4,.fdetail h4,.glance h2,.staticsum h2,.staticsum h3,h3.cchart-h,.glance h3{font-size:.97rem!important}
sup,sub,.cite,sup.cite{font-size:.8rem!important}
.nb-stamp{font-size:.8125rem}
.arflag{font-size:1rem!important}
/* the emoji flags are decoration beside a named arena; the name must carry alone */
.arname{font-size:.8125rem!important}
/* the rest of the small print the spot check turned up */
.qtitle,.qval,.seg,button.seg,.colophon,.colophon.col,.w,.acc,.tag,.panel-note .tag,.rk,.reject-card .rk,.wt,.fval,.diagram-title,.scene-caption .sn,.ember-lab,.ember-labels,.flow-out,.flow-gate,.biblio,.biblio-note,.docmeta,.contents a,.menu-note,.reader-nav .lbl,.access-badge,.cta-line,.lane-col .lt,.amatrix .arow,.agg-k,.agg-v,.eps-factor,.eps-formula,.dname,.ladder-line,.gk,.nglab,.protected,.fund,.support,.mnav .in,.dlt{font-size:max(.8125rem,1em)!important;line-height:1.45}
.qval,.agg-v,.fval,.eps-factor{font-size:1rem!important}
.diagram-title,.wt{font-size:1rem!important}
svg text{font-size:max(12px,1em)}
.l,.fmenu .l,.fopt .l,.fmenu,.fopt,summary,details summary,.colophon a,.colophon,h4,.fdetail h4,.drill h4,.ssnote,.sep,.glance li,.staticsum li,.fbtn,code,.tip,.tip *,.hero-guide,.wa-d,.ssfacts li{font-size:max(.8125rem,1em)!important;line-height:1.45}
h4,.fdetail h4,.drill h4{font-size:.97rem!important}