/* graphs.sgit.ai — shared stylesheet. Same design language as sgit.ai, nhi.sgit.ai and
   pki.sgit.ai (light theme), ported with its rules intact, plus the components this
   site needs: the altitude doors, the proof strip, the agent block that closes every
   concept page, and the semantic edge palette the Risk Graph Explorer already
   establishes — amber = exposure, green = assurance, ghosted = unanswered. */
:root{
  --bg:#faf9f5; --panel:#ffffff; --panel2:#f2f0e9; --line:#e5e1d5; --line2:#d5d0c2;
  --fg:#1c1d21; --dim:#5c5f66; --dim2:#8a8d94;
  --accent:#0f766e; --accent-dk:#115e59; --yellow:#a16207; --warm:#b45309; --red:#b91c1c;
  --term-bg:#0d1117; --term-green:#3fb950; --term-red:#f85149; --term-cyan:#58a6ff;
  --term-yellow:#d29922; --term-dim:#8b949e;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:ui-serif,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --measure:960px; --wide:1360px;
  --shadow:0 1px 2px rgba(28,29,33,.05),0 4px 14px rgba(28,29,33,.04);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.65}
a{color:var(--accent-dk);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em}
code,pre,kbd{font-family:var(--mono)}
p code,li code,td code,.note code{overflow-wrap:anywhere;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:.08em .35em;font-size:.84em;color:#24343f}
.inner{max-width:var(--measure);margin:0 auto;padding:0 1.1rem}
.dim{color:var(--dim)} .small{font-size:.85rem}

/* ---------- top nav ---------- */
nav.site{position:sticky;top:0;z-index:50;background:rgba(250,249,245,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav.site .row{max-width:var(--wide);margin:0 auto;display:flex;align-items:center;gap:1.1rem;padding:.7rem 1.1rem;flex-wrap:wrap}
nav.site .brand{font-weight:800;font-size:1.05rem;color:var(--fg);letter-spacing:-.02em;white-space:nowrap}
nav.site .brand span{color:var(--accent)}
nav.site a.nl{color:var(--dim);font-size:.85rem}
nav.site a.nl.here{color:var(--fg);font-weight:600}
nav.site a.nl:hover{color:var(--fg);text-decoration:none}
nav.site .parent{border:1px solid var(--accent);border-radius:6px;padding:.28rem .7rem;
  color:var(--accent-dk);font-size:.78rem;white-space:nowrap;background:var(--panel);font-weight:500}
nav.site .parent b{font-weight:800}
nav.site .parent:hover{background:var(--accent);color:#fff;border-color:var(--accent);text-decoration:none}
nav.site .gh{border:1px solid var(--line2);border-radius:6px;padding:.28rem .7rem;color:var(--fg);font-size:.78rem;white-space:nowrap;background:var(--panel)}
nav.site .gh:hover{border-color:var(--accent);text-decoration:none}
/* Two-level nav, the same component sgit.ai runs. The flat one here reached twelve
   items and wrapped to two rows on a laptop and four on a phone. Opening is :hover for
   a mouse and :focus-within for a keyboard — no JS needed for either — plus a click
   toggle (nav.js) for touch, where hover does not exist. Every group label is itself a
   link to that section's own page, so nothing is reachable only by opening a menu: the
   submenu is a shortcut, never the only door. */
nav.site .ni{position:relative}
nav.site .ni-has > .nl{display:inline-flex;align-items:center;gap:.25rem}
nav.site .caret{font-size:.55em;opacity:.55;transition:transform .15s ease}
nav.site .sub{position:absolute;left:-.7rem;top:100%;min-width:12rem;z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 6px 24px rgba(28,29,33,.13);padding:.4rem;
  display:none;flex-direction:column;gap:.05rem}
nav.site .ni-has:hover > .sub,
nav.site .ni-has:focus-within > .sub,
nav.site .ni-has.open > .sub{display:flex}
nav.site .ni-has:hover .caret,
nav.site .ni-has.open .caret{transform:rotate(180deg)}
nav.site .sub a.sl{display:block;padding:.36rem .6rem;border-radius:6px;
  font-size:.83rem;color:var(--dim);white-space:nowrap}
nav.site .sub a.sl:hover{background:var(--panel2);color:var(--fg);text-decoration:none}
nav.site .sub a.sl.here{color:var(--accent-dk);font-weight:600}
/* Phone: the whole thing collapses behind one button, so the bar stays a single row and
   opening it gives a vertical list with each group's children indented under it. */
.nav-items{display:contents}
.nav-toggle{display:none}
@media (max-width:820px){
  nav.site .row{position:relative;gap:.6rem}
  .nav-toggle{display:block;margin-left:auto;order:3;background:var(--panel);
    border:1px solid var(--line2);border-radius:6px;padding:.3rem .7rem;
    font:600 .78rem/1 var(--sans);color:var(--fg);cursor:pointer}
  .nav-toggle:hover{border-color:var(--accent)}
  nav.site .parent{order:2}
  nav.site .gh{order:4;margin-left:0}
  .nav-items{display:none;order:5;width:100%;flex-direction:column;gap:.1rem;
    padding:.5rem 0 .3rem;border-top:1px solid var(--line);margin-top:.4rem}
  nav.site.open .nav-items{display:flex}
  nav.site .ni{width:100%}
  nav.site .ni > .nl{display:block;padding:.42rem .2rem;font-size:.95rem}
  nav.site .caret{display:none}
  nav.site .sub{position:static;display:flex;flex-direction:column;border:0;
    box-shadow:none;background:none;padding:0 0 .3rem .9rem;min-width:0;gap:0}
  nav.site .sub a.sl{padding:.3rem .2rem;font-size:.86rem}
}
.stage-pill{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--warm);
  border:1px solid rgba(180,83,9,.35);background:rgba(180,83,9,.07);border-radius:99px;padding:.15rem .55rem;white-space:nowrap}
a.ver{font-family:var(--mono);font-size:.68rem;color:var(--dim2);border:1px solid var(--line);border-radius:99px;padding:.14rem .55rem;white-space:nowrap}
a.ver:hover{color:var(--accent-dk);border-color:var(--accent);text-decoration:none}

/* ---------- hero ---------- */
header.hero{text-align:center;padding:4.2rem 1.2rem 2.6rem;max-width:1000px;margin:0 auto}
.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
header.hero h1{font-family:var(--serif);font-size:clamp(2rem,5vw,3.1rem);margin:.9rem 0;color:#101114}
header.hero .sub{color:var(--dim);font-size:1.05rem;max-width:680px;margin:0 auto 1.7rem;line-height:1.6}
.ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;align-items:center}
.cta1{background:var(--accent-dk);color:#fff;border-radius:8px;padding:.6rem 1.2rem;font-size:.9rem;font-weight:600}
.cta1:hover{background:var(--accent);text-decoration:none}
.cta2{color:var(--accent-dk);font-size:.9rem;font-weight:600}

/* ---------- sections ---------- */
section.band{padding:3rem 0;scroll-margin-top:64px}
section.band.alt{background:var(--panel2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.band h2{font-family:var(--serif);font-size:1.9rem;color:#101114;text-align:center;margin:0 0 .6rem}
section.band .blurb{color:var(--dim);text-align:center;max-width:660px;margin:0 auto 1.8rem;font-size:.95rem}

/* ---------- cards ---------- */
.cards{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:1160px;margin:0 auto;padding:0 1.1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.05rem 1.15rem;display:block;color:var(--fg);box-shadow:var(--shadow)}
a.card:hover{border-color:var(--accent);text-decoration:none}
.card .tag{font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--warm)}
.card h3,.card h4{margin:.25rem 0 .45rem;font-size:.95rem;color:#101114;font-family:var(--sans)}
.card p{margin:0;font-size:.8rem;color:var(--dim);line-height:1.55}
.card .go{display:inline-block;margin-top:.55rem;font-size:.75rem;color:var(--accent-dk);font-weight:600}

/* ---------- two-populations split table ---------- */
.split{max-width:1000px;margin:0 auto;padding:0 1.1rem}
.split table{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.split th{background:var(--panel2);text-align:left;padding:.6rem .9rem;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.split th.run{color:var(--accent-dk)} .split th.rent{color:var(--warm)}
.split td{padding:.6rem .9rem;border-top:1px solid var(--line);vertical-align:top;line-height:1.5;color:#34363c}
.split td b.no{color:var(--red)} .split td b.yes{color:var(--accent-dk)}
.split .cap{font-size:.78rem;color:var(--dim);text-align:center;margin-top:.9rem;line-height:1.6}

/* ---------- terminal-style figure ---------- */
pre.shell{background:var(--term-bg);border-radius:10px;padding:.9rem 1.1rem;
  font-size:.79rem;line-height:1.65;overflow-x:auto;margin:1.1rem 0;color:#c9d1d9;box-shadow:var(--shadow)}
pre.shell .g{color:var(--term-green)} pre.shell .r{color:var(--term-red)} pre.shell .cy{color:var(--term-cyan)}
pre.shell .y{color:var(--term-yellow)} pre.shell .d{color:var(--term-dim)}

/* ---------- docs & content pages ---------- */
main.doc{max-width:var(--measure);margin:0 auto;padding:2.4rem 1.4rem 3.5rem}
main.doc .crumb{font-size:.75rem;color:var(--dim2);margin-bottom:1rem}
main.doc .crumb a{color:var(--dim)}
main.doc h1{font-family:var(--serif);font-size:2.1rem;color:#101114;margin:.2rem 0 .9rem}
main.doc h2{font-family:var(--serif);font-size:1.4rem;color:#101114;margin:2.2rem 0 .7rem;scroll-margin-top:70px}
main.doc h3{font-size:1.02rem;color:#101114;margin:1.7rem 0 .5rem}
main.doc .lead{color:#34363c;font-size:1.12rem}
main.doc p, main.doc li{color:#34363c;font-size:.98rem}
main.doc ul,main.doc ol{padding-left:1.3rem}
main.doc li{margin:.3rem 0}
main.doc table{width:100%;border-collapse:collapse;font-size:.88rem;margin:1.1rem 0;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
main.doc th{background:var(--panel2);text-align:left;padding:.55rem .8rem;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
main.doc td{padding:.55rem .8rem;border-top:1px solid var(--line);vertical-align:top;line-height:1.5;color:#34363c}
.tablewrap{overflow-x:auto}
.note{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);border-radius:0 10px 10px 0;
  padding:.8rem 1rem;font-size:.85rem;color:#34363c;margin:1.2rem 0;box-shadow:var(--shadow)}
.warnbox{border:1px solid var(--line);border-left:3px solid var(--yellow);background:var(--panel);border-radius:0 10px 10px 0;
  padding:.8rem 1rem;font-size:.85rem;color:#34363c;margin:1.2rem 0;box-shadow:var(--shadow)}
.note b,.warnbox b{color:#101114}
blockquote.challenge{margin:1.6rem 0;padding:1.1rem 1.3rem;border-left:4px solid var(--warm);
  background:var(--panel);border-radius:0 10px 10px 0;font-size:1rem;font-style:italic;color:#34363c;
  box-shadow:var(--shadow);line-height:1.7}
.pagenav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.8rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.85rem}

/* evidence status boxes */
.evbox{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;
  background:var(--panel);padding:1rem 1.15rem;box-shadow:var(--shadow);margin:.9rem 0 1.4rem}
.evbox.ev-warn{border-left-color:var(--warm)}
.evbox p:first-of-type{margin-top:.5rem}
.evbox p:last-child{margin-bottom:0}
.evtag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--accent);border-radius:99px;padding:.16rem .6rem}
.evbox.ev-warn .evtag{background:var(--warm)}

/* option assessment pages */
.opt-verdict{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  border-radius:99px;padding:.14rem .6rem;white-space:nowrap;vertical-align:middle}
.opt-yes{color:#0f766e;border:1px solid rgba(15,118,110,.35);background:rgba(15,118,110,.08)}
.opt-no{color:#b91c1c;border:1px solid rgba(185,28,28,.35);background:rgba(185,28,28,.08)}
.opt-part{color:#b45309;border:1px solid rgba(180,83,9,.35);background:rgba(180,83,9,.08)}

/* task board */
.tstat{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;border-radius:99px;padding:.1rem .5rem;white-space:nowrap}
.t-done{color:#0f766e;border:1px solid rgba(15,118,110,.35);background:rgba(15,118,110,.08)}
.t-doing{color:#1d4ed8;border:1px solid rgba(29,78,216,.3);background:rgba(29,78,216,.07)}
.t-open{color:#b45309;border:1px solid rgba(180,83,9,.35);background:rgba(180,83,9,.08)}
.t-need{color:#b91c1c;border:1px solid rgba(185,28,28,.35);background:rgba(185,28,28,.08)}

/* versions table */
table.vers td.vnum{font-family:var(--mono);font-weight:700;color:var(--accent-dk);white-space:nowrap}

/* the hope ladder */
.hopeladder{display:flex;flex-direction:column;gap:.9rem;margin:1.4rem 0 2rem}
.hopeladder .cap{position:relative;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:10px;padding:1.1rem 1.3rem 1.1rem 3.4rem;box-shadow:var(--shadow)}
.hopeladder .capnum{position:absolute;left:1.15rem;top:1.15rem;font-family:var(--mono);font-size:.78rem;
  font-weight:700;color:var(--accent);letter-spacing:-.03em}
.hopeladder .cap h3{margin:0 0 .5rem;font-size:1.05rem;color:#101114;letter-spacing:-.015em}
.hopeladder .cap p{margin:.5rem 0;font-size:.92rem;line-height:1.65;color:#34363c}
@media (max-width:560px){.hopeladder .cap{padding:2.4rem 1rem 1rem}.hopeladder .capnum{top:.85rem;left:1rem}}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);margin-top:3.5rem;padding:2.2rem 0 3rem;background:var(--panel2)}
footer.site .cols{max-width:var(--wide);margin:0 auto;padding:0 1.1rem;display:grid;gap:1.6rem;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr}
@media (max-width:1080px){footer.site .cols{grid-template-columns:2fr 1fr 1fr 1fr}}
@media (max-width:940px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site h4{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin:0 0 .6rem}
footer.site a{display:block;color:var(--dim);font-size:.82rem;padding:.15rem 0}
footer.site .brandline{font-weight:800;color:var(--fg)}
footer.site .brandline span{color:var(--accent)}
footer.site p{color:var(--dim);font-size:.76rem;line-height:1.65;max-width:420px}
footer.site .netline{color:var(--dim);font-size:.78rem;line-height:1.8;max-width:420px;
  border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:.55rem 0;margin:.9rem 0}
footer.site .netline a{display:inline;padding:0;color:var(--accent-dk)}
footer.site .netline a b{font-weight:800}
footer.site .partnote{color:var(--warm);opacity:.95}
footer.site .verline{font-family:var(--mono);font-size:.72rem;color:var(--dim2);margin-top:.6rem}
footer.site .verline a{display:inline;color:var(--accent-dk);padding:0}
@media (max-width:700px){footer.site .cols{grid-template-columns:1fr}}

/* print */
@page{margin:14mm}
@media print{
  html{print-color-adjust:exact;-webkit-print-color-adjust:exact;background:#fff}
  body{background:#fff;font-size:10pt;line-height:1.5}
  nav.site{position:static;background:none;backdrop-filter:none}
  nav.site a.nl,nav.site .gh,nav.site .parent,.nav-items,.nav-toggle{display:none}
  .note,pre,table,blockquote{break-inside:avoid}
  h1,h2,h3,h4{break-after:avoid}
  p,li{orphans:3;widows:3}
}

/* ---------- in-page markdown reader (documents/*) ---------- */
.mdread-label{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:var(--panel2);
  border:1px solid var(--line2);border-bottom:1px dashed var(--line2);border-radius:10px 10px 0 0;
  padding:.5rem 1rem;margin:1.4rem 0 0;font-family:var(--mono);font-size:.7rem;color:var(--dim);letter-spacing:.03em}
.mdread-label a{color:var(--accent-dk)}
.mdread{border:1px solid var(--line2);border-top:none;border-radius:0 0 10px 10px;background:#fff;
  padding:2rem 2.4rem;margin:0 0 1.6rem;
  box-shadow:0 2px 6px rgba(28,29,33,.08),0 14px 32px rgba(28,29,33,.08)}
@media (max-width:560px){.mdread{padding:1.3rem 1rem}}
.mdread h1{font-family:var(--serif);font-size:1.7rem;color:#101114;margin:.2rem 0 .8rem}
.mdread h2{font-family:var(--serif);font-size:1.25rem;color:#101114;margin:1.8rem 0 .6rem}
.mdread h3{font-size:1rem;color:#101114;margin:1.4rem 0 .4rem}
.mdread p,.mdread li{color:#34363c;font-size:.94rem;line-height:1.65}
.mdread table{display:block;overflow-x:auto;border-collapse:collapse;font-size:.85rem;margin:1rem 0}
.mdread th{background:var(--panel2);text-align:left;padding:.5rem .7rem;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line)}
.mdread td{padding:.5rem .7rem;border:1px solid var(--line);color:#34363c;vertical-align:top}
.mdread blockquote{margin:1.2rem 0;padding:.8rem 1.1rem;border-left:4px solid var(--warm);
  background:var(--panel2);border-radius:0 8px 8px 0;color:#34363c}
.mdread pre{background:var(--term-bg);color:#c9d1d9;border-radius:8px;padding:.8rem 1rem;
  font-size:.78rem;overflow-x:auto;line-height:1.6}
.mdread hr{border:none;border-top:1px solid var(--line);margin:1.6rem 0}
.mdread a{overflow-wrap:anywhere}
.docmeta{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;box-shadow:var(--shadow);
  font-size:.86rem;margin:1rem 0 1.4rem}
.docmeta .k{color:var(--dim);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;padding-top:.15rem}
.docmeta .v{color:#34363c}

/* mermaid diagrams (concept pages + rendered inside .mdread) */
pre.mermaid{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;
  margin:1.2rem 0;box-shadow:var(--shadow);text-align:center;overflow-x:auto;font-size:.8rem}

/* ---------- graphs additions ---------- */
/* the rules ladder — same component as nhi.sgit.ai's .hopeladder, named for what
   it holds here. Both selectors are kept so the stylesheet stays portable. */
.ladder{display:flex;flex-direction:column;gap:.9rem;margin:1.4rem 0 2rem}
.ladder .cap{position:relative;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:10px;padding:1.1rem 1.3rem 1.1rem 3.4rem;box-shadow:var(--shadow)}
.ladder .capnum{position:absolute;left:1.15rem;top:1.15rem;font-family:var(--mono);font-size:.78rem;
  font-weight:700;color:var(--accent);letter-spacing:-.03em}
.ladder .cap h3{margin:0 0 .5rem;font-size:1.05rem;color:#101114;letter-spacing:-.015em}
.ladder .cap p{margin:.5rem 0;font-size:.92rem;line-height:1.65;color:#34363c}
.ladder .cap .from{display:block;margin-top:.6rem;font-size:.76rem;color:var(--dim);
  border-top:1px dashed var(--line);padding-top:.5rem}
.ladder .cap .from b{color:var(--warm)}
@media (max-width:560px){.ladder .cap{padding:2.4rem 1rem 1rem}.ladder .capnum{top:.85rem;left:1rem}}

/* the split table's two verdict columns, in this site's terms */
.split th.safe{color:var(--accent-dk)} .split th.fatal{color:var(--red)}

/* dated timeline — the 2019 failure, in order */
.timeline{list-style:none;margin:1.4rem 0 2rem;padding:0 0 0 1.1rem;border-left:2px solid var(--line2)}
.timeline li{position:relative;padding:0 0 1.1rem 1.2rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-1.62rem;top:.42rem;width:.62rem;height:.62rem;
  border-radius:99px;background:var(--panel);border:2px solid var(--accent)}
.timeline li.bad::before{border-color:var(--red)}
.timeline .when{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim2)}
.timeline .what{color:#34363c;font-size:.95rem;line-height:1.6}

/* a stated rule, quoted as a claim the reader may check */
.claim{font-family:var(--serif);font-size:1.12rem;line-height:1.6;color:#101114;
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:0 10px 10px 0;padding:1rem 1.2rem;margin:1.3rem 0;box-shadow:var(--shadow)}

/* mermaid on hand-written concept pages (the reader styles pre.mermaid already) */
.mermaid{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;
  margin:1.2rem 0;box-shadow:var(--shadow);text-align:center;overflow-x:auto}

/* the pack download — a real affordance rather than a link in a paragraph */
.dl{display:flex;gap:1.4rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:12px;padding:1.1rem 1.3rem;margin:1.6rem 0;box-shadow:var(--shadow)}
.dl > div{flex:1 1 22rem}
.dl p{margin:.45rem 0 0;font-size:.88rem;color:#34363c;line-height:1.6}
.dlbtn{display:flex;flex-direction:column;align-items:center;gap:.15rem;white-space:nowrap;
  background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:10px;
  padding:.75rem 1.3rem;font-weight:700;font-size:.9rem}
.dlbtn span{font-family:var(--mono);font-size:.68rem;font-weight:400;opacity:.85;letter-spacing:.04em}
.dlbtn:hover{background:var(--accent-dk);border-color:var(--accent-dk);text-decoration:none}


/* ---------- the three altitudes: the front page's doors, and the site's spine ----------
   The IA is the thesis: "this is just a question of altitude — from a very high altitude
   you see the city walls, and as you zoom in, roads and buildings, and eventually people
   and cars." Each door states the altitude, not just the section name. */
.altitudes{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  max-width:1160px;margin:0 auto;padding:0 1.1rem}
.alt{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:12px;padding:1.15rem 1.25rem;display:block;color:var(--fg);box-shadow:var(--shadow)}
a.alt:hover{border-color:var(--accent);text-decoration:none}
.alt .num{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.alt h3{margin:.3rem 0 .5rem;font-size:1.05rem;color:#101114;font-family:var(--sans)}
.alt p{margin:0;font-size:.85rem;color:var(--dim);line-height:1.6}
.alt .go{display:inline-block;margin-top:.6rem;font-size:.75rem;color:var(--accent-dk);font-weight:600}
.alt.a2{border-top-color:var(--warm)} .alt.a2 .num{color:var(--warm)} .alt.a2 .go{color:var(--warm)}
.alt.a3{border-top-color:var(--yellow)} .alt.a3 .num{color:var(--yellow)} .alt.a3 .go{color:var(--yellow)}

/* ---------- proof strip: real numbers, each one sourced ---------- */
.proof{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  max-width:1100px;margin:1.6rem auto 0;padding:0 1.1rem}
.proof .n{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:.8rem .9rem;text-align:center;box-shadow:var(--shadow)}
.proof .n b{display:block;font-size:1.15rem;color:var(--accent-dk);letter-spacing:-.02em}
.proof .n span{display:block;font-size:.72rem;color:var(--dim);line-height:1.45;margin-top:.2rem}
.proof .n em{display:block;font-style:normal;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim2);margin-top:.3rem}

/* ---------- the "for an agent" block ----------
   Every section serves three readers, and the third is the one everyone omits: an agent
   that will carry the rule into another session. One sentence, pasteable, no chrome. */
.agent{border:1px solid var(--line2);border-left:3px solid var(--fg);background:var(--panel2);
  border-radius:0 10px 10px 0;padding:.85rem 1.1rem;margin:1.6rem 0;box-shadow:var(--shadow)}
.agent h4{margin:0 0 .4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.agent p{margin:0;font-size:.9rem;color:#101114;line-height:1.6}
.agent code{background:var(--panel);border:1px solid var(--line)}

/* ---------- a path rendered as a sentence ----------
   "If your path doesn't read as a sentence in the reader's own words, your edges are
   wrong." So the site renders paths as sentences, not as arrows in a box. */
.pathline{font-family:var(--mono);font-size:.82rem;line-height:2.1;color:#34363c;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:.9rem 1.1rem;margin:1.1rem 0;overflow-x:auto;box-shadow:var(--shadow)}
.pathline .nd{background:var(--panel2);border:1px solid var(--line2);border-radius:5px;
  padding:.1em .4em;color:#101114;font-weight:600;white-space:nowrap}
.pathline .ed{color:var(--accent-dk);padding:0 .25em;white-space:nowrap}
.pathline .ed::before{content:"—"} .pathline .ed::after{content:"→"}
.pathline .ed.back::before{content:"←"} .pathline .ed.back::after{content:"—"}
.pathline .say{display:block;font-family:var(--sans);font-size:.86rem;color:var(--dim);
  line-height:1.6;margin-top:.5rem;border-top:1px dashed var(--line);padding-top:.5rem}

/* ---------- semantic edge palette ----------
   From the live Risk Graph Explorer: amber = exposure, green = assurance,
   ghosted = unanswered. Ghosted-for-unanswered is a direct visual expression of
   "absence of evidence is evidence" — the same colour rule on every rendered graph. */
.epal{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;font-size:.8rem;
  color:var(--dim);margin:1rem 0}
.epal span{display:inline-flex;align-items:center;gap:.4rem}
.epal i{width:1.6rem;height:0;border-top:3px solid var(--dim2);display:inline-block}
.epal i.exposure{border-color:var(--warm)}
.epal i.assurance{border-color:var(--accent)}
.epal i.unanswered{border-top-style:dashed;border-color:var(--dim2);opacity:.55}
.g-exposure{color:var(--warm);font-weight:600}
.g-assurance{color:var(--accent-dk);font-weight:600}
.g-unanswered{color:var(--dim2);font-style:italic}

/* ---------- glossary ---------- */
table.gloss td:first-child{white-space:nowrap;font-weight:600;color:#101114}
table.gloss td.plain{color:var(--accent-dk)}
.gloss-note{font-size:.8rem;color:var(--dim);margin-top:-.6rem}

/* ---------- status pills reused for maturity / publish state ---------- */
.pill{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
  border-radius:99px;padding:.1rem .5rem;white-space:nowrap}
.p-ships{color:#0f766e;border:1px solid rgba(15,118,110,.35);background:rgba(15,118,110,.08)}
.p-argued{color:#b45309;border:1px solid rgba(180,83,9,.35);background:rgba(180,83,9,.08)}
.p-absent{color:#b91c1c;border:1px solid rgba(185,28,28,.35);background:rgba(185,28,28,.08)}
.p-live{color:#1d4ed8;border:1px solid rgba(29,78,216,.3);background:rgba(29,78,216,.07)}

/* ---------- the book ----------
   Three reading modes of one artefact: chapter pages with a persistent left TOC,
   a single page holding everything, and a PDF printed from that single page.
   The book is generated from the site's own pages (admin/build/gen_book.py) — a
   projection, in the site's own sense — so nothing here styles new content, only
   new arrangement. */
.bookwrap{max-width:1360px;margin:0 auto;padding:0 1.1rem;display:grid;
  grid-template-columns:280px minmax(0,1fr);gap:2.2rem;align-items:start}
aside.booktoc{position:sticky;top:74px;max-height:calc(100vh - 95px);overflow-y:auto;
  margin-top:1.7rem;padding:1.1rem 1rem;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);font-size:.82rem}
.booktoc .tocpart{font-size:.63rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--warm);margin:1rem 0 .25rem}
.booktoc .tocpart:first-child{margin-top:0}
.booktoc a{display:block;padding:.24rem .5rem;border-radius:6px;color:var(--dim);line-height:1.45}
.booktoc a:hover{background:var(--panel2);color:var(--fg);text-decoration:none}
.booktoc a.here{color:var(--accent-dk);font-weight:600;background:rgba(15,118,110,.07)}
.booktoc .tocmodes{border-top:1px dashed var(--line);margin-top:.9rem;padding-top:.7rem}
.booktoc .tocmodes a{color:var(--accent-dk);font-size:.76rem}
.bookmain{min-width:0}
.bookbar{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;font-size:.78rem;color:var(--dim2);
  border:1px solid var(--line);background:var(--panel2);border-radius:99px;padding:.35rem 1.05rem;
  margin:1.7rem 0 0;width:max-content;max-width:100%}
.bookbar a{color:var(--accent-dk);white-space:nowrap}
.chkick{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--warm)}
.chnum{font-family:var(--serif);font-size:.95rem;color:var(--dim2);margin:.4rem 0 0}
main.doc.bookch{padding-top:1.5rem}
main.doc.bookch h1{margin-top:.25rem}
@media (max-width:960px){.bookwrap{display:block}aside.booktoc{display:none}}

/* cover, and the part divider pages */
.bookcover{text-align:center;max-width:780px;margin:0 auto;padding:4.6rem 1.2rem 2.6rem}
.bookcover .eyebrow{margin-bottom:.4rem}
.bookcover h1{font-family:var(--serif);font-size:clamp(2.4rem,6vw,3.7rem);letter-spacing:-.02em;
  margin:.7rem 0 .8rem;color:#101114}
.bookcover .bsub{color:var(--dim);font-size:1.06rem;line-height:1.65;max-width:600px;margin:0 auto 1.9rem}
.bookcover blockquote{margin:0 auto 1.9rem;max-width:560px;font-family:var(--serif);font-style:italic;
  font-size:1.02rem;line-height:1.7;color:#34363c;border:none;padding:0}
.bookcover .byline{font-size:1.02rem;color:#101114;font-weight:600;margin:0 0 .25rem}
.bookcover .ed{font-family:var(--mono);font-size:.72rem;color:var(--dim2);margin:0}
.parthead{text-align:center;max-width:720px;margin:0 auto;padding:4.2rem 1.2rem .6rem}
.parthead .pk{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--warm)}
.parthead h2{font-family:var(--serif);font-size:2rem;color:#101114;margin:.7rem 0 .5rem}
.parthead p{color:var(--dim);font-size:.98rem;line-height:1.65;max-width:560px;margin:0 auto}

/* the single page's table of contents */
.singletoc{max-width:var(--measure);margin:0 auto;padding:0 1.4rem 1rem}
.singletoc .tocpart{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--warm);margin:1.2rem 0 .25rem}
.singletoc a{display:block;padding:.14rem 0;color:var(--dim);font-size:.92rem}
.singletoc a:hover{color:var(--fg)}

/* print: the PDF is Chromium's print of single.html */
@media print{
  body.bookpage nav.site,body.bookpage footer.site,.bookbar,aside.booktoc,.singletoc,
  body.bookpage .noprint{display:none!important}
  .bookwrap{display:block}
  body.bookpage a{color:inherit;text-decoration:none}
  /* shadows rasterise to embedded JPEGs in Chromium's print pipeline and quintuple
     the PDF size for zero benefit on paper */
  body.bookpage *{box-shadow:none!important;backdrop-filter:none!important}
  .bookcover{padding-top:34vh;page-break-after:always}
  .parthead{padding-top:32vh;page-break-after:always}
  main.doc.chap{page-break-before:always;padding-top:0}
  .agent,.docmeta,.pathline{break-inside:avoid}
}

/* the book cover, shown on /book/ and reusable anywhere on the site */
img.coverimg{width:300px;max-width:86%;border-radius:8px;border:1px solid var(--line);
  box-shadow:0 16px 44px rgba(16,17,20,.28)}