/* ============================================================
   How Networks Agree, INTERACTIVE WEB edition (screen).
   Same brand as the PDF: MIDNIGHT #0F1929 · CREAM #EDE7D9 · OXBLOOD #7B2D2D
   · GOLD #9C7E3C, midnight+cream ~90%, gold/oxblood for genuine emphasis.
   The prose + SVGs come from content.html / diagrams via build_web.py; this
   sheet is the screen render and report.js adds the motion.
   ============================================================ */
:root{
  --midnight:#0F1929; --cream:#EDE7D9; --oxblood:#7B2D2D; --gold:#9C7E3C;
  --paper:#FCFBF8; --card:#F4F0E8; --paper-2:#ECE5D7; --border:#DDD4C2;
  --ink:#0F1929; --muted:#6B6452; --gold-soft:#E7D9B6; --gold-deep:#7A6636;
  --serif:"Didot","Big Caslon","Hoefler Text",Georgia,serif;
  --sans:"Avenir Next","Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"Menlo","SF Mono","Courier New",monospace;
  --col:720px;
}
*{box-sizing:border-box}
html{background:var(--paper); scroll-behavior:smooth}
body{margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-size:17px; line-height:1.66; -webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--serif); color:var(--midnight); font-weight:400; line-height:1.1; letter-spacing:.2px; margin:0}
h3,h4{font-family:var(--sans); color:var(--midnight); margin:0}
p{margin:0 0 1em}
strong{font-weight:700}
sup.ref{font-size:.62em; color:var(--gold); vertical-align:super; margin-left:1px}
.decor{display:none}                       /* cover-web / glyph handled per-context */
.reading{overflow-x:hidden}

/* reading column: most blocks live in a centered measure */
.section, .toc-inner, .cover-inner, .divider{max-width:var(--col); margin-inline:auto; padding-inline:24px}
.section{padding-top:30px; padding-bottom:30px}

/* ---------------- COVER (screen hero) ---------------- */
.cover{position:relative; min-height:100vh; background:var(--midnight); color:var(--cream);
  display:flex; align-items:center; overflow:hidden; max-width:none; padding:0}
.cover .decor-cover-web{display:block; position:absolute; inset:0; z-index:0; opacity:.32}
.cover .decor-cover-web svg{width:100%; height:100%; object-fit:cover}
.cover-inner{position:relative; z-index:1; padding:64px 24px}
.cover-kicker{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-soft)}
.cover-title{font-size:clamp(48px,9vw,92px); margin:22px 0 0; color:#fff; line-height:1}
.cover-title .accent{color:var(--gold-soft); font-style:italic}
.cover-sub{font-size:18px; line-height:1.6; color:#cfd4c9; max-width:44ch; margin:22px 0 0}
.cover-spacer{height:40px}
.cover-networks{display:flex; gap:10px; flex-wrap:wrap}
.cover-networks .net{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream);
  border:1px solid rgba(237,231,217,.28); border-radius:20px; padding:6px 14px}
.cover-foot{margin-top:44px; font-size:13px; color:#9aa196}
.cover-foot .brand{font-family:var(--serif); font-size:17px; color:var(--gold-soft)}
.bleed-foot{position:absolute; bottom:20px; left:0; right:0; text-align:center; z-index:1;
  font-size:11px; color:#8a9186; line-height:1.6}
.bleed-foot .bf-brand{color:#9aa196}
.runfoot{display:none}                     /* PDF running footer, not needed on screen */

/* ---------------- TOC ---------------- */
.toc{background:var(--paper-2); padding:56px 0; position:relative}
.toc .decor-cover-web{display:none}
.toc-eyebrow{font-size:11px; letter-spacing:.22em; color:var(--gold); font-weight:700}
.toc-title{font-size:38px; margin:8px 0 22px}
.toc-list{list-style:none; margin:0; padding:0}
.toc-list li{display:flex; align-items:baseline; gap:14px; padding:10px 0; border-bottom:1px solid var(--border)}
.toc-list li:last-child{border-bottom:0}
.toc-num{font-family:var(--serif); color:var(--gold); font-size:15px; min-width:26px}
.toc-text{flex:1; font-size:16px}
.toc-pg{color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums}
.toc-sub{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); border-bottom:0 !important; padding-bottom:2px !important}
.toc .bleed-foot{display:none}

/* ---------------- section heads ---------------- */
.section-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.section-head .decor{display:inline-block; width:30px}
.section-head .decor svg{width:30px; height:auto; display:block}
.section-num{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:700}
.section-title{font-size:clamp(30px,5vw,42px); margin:2px 0 0}
.section-rule{height:2px; width:64px; background:var(--gold); margin:18px 0 24px; opacity:.7}
.lede{font-size:20px; line-height:1.55; color:var(--midnight)}
.lede + p, p + p{color:#2b3440}
.section p{color:#2b3440}
.sub{font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; margin:26px 0 8px}
.term{color:var(--oxblood); font-weight:600; border-bottom:1px dotted rgba(123,45,45,.4); cursor:help}

/* clarity / pullquote / plain */
.clarity{background:var(--card); border:1px solid var(--border); border-left:3px solid var(--gold);
  border-radius:12px; padding:18px 20px; margin:24px 0}
.clarity .label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:6px}
.clarity p{margin:0 0 .6em} .clarity p:last-child{margin:0}
.clarity .plain{margin:.4em 0 0}
.pullquote{margin:30px 0; padding:6px 0 6px 22px; border-left:3px solid var(--oxblood)}
.pullquote p{font-family:var(--serif); font-size:26px; line-height:1.3; color:var(--midnight); margin:0}
ul.plain{margin:.5em 0; padding-left:20px}
ul.plain li{margin:.4em 0; color:#2b3440}
ul.plain li strong{color:var(--midnight)}

/* ---------------- dividers between networks ---------------- */
.divider{max-width:none; margin:0; padding:0; position:relative; background:var(--midnight);
  color:var(--cream); min-height:34vh; display:flex; align-items:center; overflow:hidden}
.divider .decor-cover-web{display:block; position:absolute; inset:0; opacity:.24}
.divider .decor-cover-web svg{width:100%; height:100%; object-fit:cover}
.divider-name{position:relative; z-index:1; max-width:var(--col); margin-inline:auto; padding:0 24px;
  width:100%; font-family:var(--serif); font-size:clamp(40px,8vw,72px); color:#fff; font-weight:400}
.divider .dive-mark, .divider .decor-glyph{display:none}
.divider .bleed-foot{display:none}

/* ---------------- network deep dives ---------------- */
.dive{max-width:var(--col); margin-inline:auto; padding:36px 24px}
.dive-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.dive-head .decor-glyph{display:inline-block; width:30px; align-self:center}
.dive-head .decor-glyph svg{width:30px; height:auto; display:block}
.dive-head .name{font-size:clamp(34px,6vw,52px)}
.dive-head .ticker{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700}
.dive-rule{height:1px; background:var(--border); margin:16px 0 14px}
.dive-mech{font-size:19px; font-style:italic; color:var(--midnight); font-family:var(--serif); margin-bottom:18px}
.dive p{color:#2b3440}

/* tradeoffs */
.tradeoffs{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0}
.tradeoffs .col{border-radius:12px; padding:16px 18px; border:1px solid var(--border)}
.tradeoffs .col.good{background:rgba(156,126,60,.07)}
.tradeoffs .col.cost{background:var(--card)}
.tradeoffs h4{font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px}
.tradeoffs .good h4{color:var(--gold-deep)} .tradeoffs .cost h4{color:var(--muted)}
.tradeoffs ul{margin:0; padding-left:18px} .tradeoffs li{margin:.4em 0; font-size:15px; color:#2b3440}
@media(max-width:640px){.tradeoffs{grid-template-columns:1fr}}

/* unlocks */
.unlocks{margin:22px 0}
.unlocks .row{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border)}
.unlocks .row:last-child{border-bottom:0}
.unlocks .tag{flex:0 0 auto; font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  padding:4px 10px; border-radius:20px; margin-top:2px}
.unlocks .tag.yes{background:rgba(156,126,60,.14); color:var(--gold-deep)}
.unlocks .tag.no{background:rgba(123,45,45,.1); color:var(--oxblood)}
.unlocks p{margin:0; font-size:15px}

/* resources */
.resources{background:var(--paper-2); border-radius:12px; padding:16px 20px; margin:22px 0}
.resources .label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:8px}
.resources ul{margin:0; padding-left:18px} .resources li{margin:.4em 0; font-size:14px; color:var(--midnight)}
.resources li span{color:var(--muted)}

/* ---------------- INTERACTIVE DIAGRAM ---------------- */
.figure{margin:28px 0}
.figure .caption{font-size:14px; line-height:1.55; color:var(--muted); margin-top:12px; padding:0 2px}
.figure .caption b{color:var(--midnight)}
.diagram{position:relative; background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:18px; box-shadow:0 1px 3px rgba(15,25,41,.05)}
.dg-stage{position:relative}
.dg-stage svg{width:100%; height:auto; display:block}
.dg-controls{display:flex; gap:14px; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap}
.dg-play{background:var(--gold); color:#20160a; border:0; border-radius:9px; padding:9px 16px;
  font-family:var(--sans); font-weight:700; font-size:13.5px; cursor:pointer; flex:0 0 auto}
.dg-play:hover{background:var(--gold-deep); color:#fff}
.dg-play.playing{opacity:.6}
.dg-step{font-size:14px; color:var(--midnight); line-height:1.4; min-height:1.4em}
.dg-step .n{color:var(--gold-deep); font-weight:700}
.dg-comet{position:absolute; width:15px; height:15px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 12px 3px rgba(156,126,60,.7); opacity:0; pointer-events:none; z-index:3;
  transform:translate(-50%,-50%)}
.dg-ring{position:absolute; width:34px; height:34px; border-radius:50%; border:2px solid var(--gold);
  opacity:0; pointer-events:none; z-index:2; transform:translate(-50%,-50%)}

/* trilemma nodes + legend */
.tri-node{cursor:pointer; transition:r .15s}
.diagram[data-diagram="trilemma"] .dg-stage{max-width:560px; margin:0 auto}
.tri-legend{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border)}
.tri-chip{font-size:12.5px; font-weight:600; border:1px solid var(--border); background:var(--paper);
  border-radius:20px; padding:6px 13px; cursor:pointer; color:var(--midnight); transition:.15s}
.tri-chip:hover,.tri-chip.on{border-color:var(--gold); background:rgba(156,126,60,.1)}
.tri-callout{margin-top:12px; font-size:14.5px; line-height:1.5; color:var(--midnight); min-height:2.6em}
.tri-callout b{color:var(--gold-deep)}
.tri-halo{position:absolute; width:30px; height:30px; border-radius:50%; border:2px solid var(--oxblood);
  background:rgba(123,45,45,.08); opacity:0; pointer-events:none; z-index:2; transform:translate(-50%,-50%); transition:opacity .2s}

/* ---------------- scorecard ---------------- */
.scorecard{max-width:940px}
.scorecard .lede{margin-bottom:20px}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:12px}
table.compare{width:100%; min-width:720px; border-collapse:collapse; font-size:13.5px; background:var(--paper)}
table.compare th, table.compare td{padding:11px 13px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top}
table.compare thead th{background:var(--midnight); color:var(--cream); font-family:var(--sans); font-weight:700;
  position:sticky; top:0; font-size:13px}
table.compare thead th .ticker{display:block; font-size:10px; letter-spacing:.08em; color:var(--gold-soft); font-weight:400; margin-top:2px}
table.compare tbody th{font-weight:700; color:var(--midnight); background:var(--card); white-space:nowrap}
table.compare tbody tr:nth-child(even) td{background:var(--card)}
table.compare td{color:#2b3440}
table.compare col.hl, table.compare .colhl{background:rgba(156,126,60,.1)}

/* ---------------- reveal motion ---------------- */
.reveal{opacity:0; transform:translateY(16px)}
.reveal.in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.in{opacity:1 !important; transform:none !important; transition:none}
  .dg-comet,.dg-ring,.tri-halo{transition:none}
}

/* closing PDF-download band (web edition ships the printable PDF alongside) */
.closing-band{background:var(--midnight); color:var(--cream); margin-top:44px; padding:60px 24px}
.cb-inner{max-width:var(--col); margin:0 auto; text-align:center}
.cb-eyebrow{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft); font-weight:700}
.cb-title{font-family:var(--serif); font-weight:400; font-size:clamp(26px,4vw,34px); color:#fff; margin:12px 0 8px}
.closing-band p{color:#cfd4c9; max-width:48ch; margin:0 auto 22px; font-size:16px}
.cb-btn{display:inline-block; background:var(--gold); color:#20160a; font-weight:700; font-size:14px; padding:13px 26px; border-radius:10px; text-decoration:none}
.cb-btn:hover{background:var(--gold-soft); text-decoration:none}

/* footnotes/ref list if present */
.footnotes{max-width:var(--col); margin:0 auto; padding:24px; font-size:13px; color:var(--muted); border-top:1px solid var(--border)}