/* Living Atlas — house design system for sub-pages (WO-007).
   Derived from the Harbor Bet flagship. The epistemics ARE the visual
   language: solid = documented fact · dashed = reported/inferred/proposed ·
   magenta = monitored question. */

:root{
  --water:#DFE9E4; --water-deep:#CBDCD6; --ink:#0E2A33; --ink-soft:#3C5560;
  --buff:#EFE8D2; --buff-line:#D8CCA8; --magenta:#B62D6E; --magenta-soft:#F3DCE8;
  --verified:#1E6E5C; --verified-soft:#DCEAE2;
  --rule:1.5px solid var(--ink); --rule-open:1.5px dashed var(--ink-soft);
  --maxw:1060px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--water);color:var(--ink);font-family:"Newsreader",Georgia,serif;
  font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--magenta);color:#fff}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:"IBM Plex Mono",monospace}
main.wrap{padding-top:40px;padding-bottom:70px}

/* nav + legend */
.sitenav{border-bottom:var(--rule);background:var(--buff)}
.sitenav-inner{max-width:var(--maxw);margin:0 auto;padding:10px 24px;display:flex;
  flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.04em}
.sitenav a{text-decoration:none;color:var(--ink-soft)}
.sitenav a:hover,.sitenav a.on{color:var(--magenta)}
.sitenav .brand{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 800;
  font-size:15px;text-transform:uppercase;color:var(--ink);margin-right:6px}
.sitenav .navgroup{color:var(--buff-line);margin-left:8px}
.legend{border-bottom:var(--rule);background:var(--water-deep)}
.legend-inner{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;padding:12px 24px;
  max-width:var(--maxw);margin:0 auto;font-family:"IBM Plex Mono",monospace;font-size:12px}
.legend-inner .lg{display:flex;align-items:center;gap:8px}
.key{display:inline-block;width:30px;height:0}
.key.solid{border-top:2.5px solid var(--verified)}
.key.dash{border-top:2.5px dashed var(--ink-soft)}
.key.mag{border-top:2.5px solid var(--magenta)}
.legend-inner .how{font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* headings */
.pgtitle{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 114,"wght" 850;
  font-size:clamp(34px,5.4vw,58px);line-height:.98;text-transform:uppercase;margin-top:8px}
.pgno{font-size:12.5px;color:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;margin:10px 0 4px}
h2{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 800;
  font-size:clamp(21px,3vw,29px);text-transform:uppercase;margin:44px 0 14px}
h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 750;
  font-size:18px;text-transform:uppercase;line-height:1.15}
.lede-s{font-size:clamp(17px,2vw,19.5px);max-width:66ch;margin:14px 0 6px}
.fine{font-size:13px;color:var(--ink-soft)}
p{max-width:72ch}

/* status banners */
.banner{border:2px solid var(--ink);background:var(--buff);padding:20px 24px;margin:22px 0 8px;
  font-size:16.5px;max-width:none}
.banner-open{border:2px dashed var(--magenta);background:var(--magenta-soft);font-weight:500}
.banner-fact{border-left:8px solid var(--verified)}

/* claims — the epistemic system */
.claim{background:#fff;padding:16px 20px;margin:14px 0;border:1px solid var(--water-deep)}
.claim p{font-size:16px;max-width:76ch}
.claim-meta{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.st-verified{border-left:6px solid var(--verified)}
.st-reported{border-left:6px dashed var(--ink-soft);background:#fdfdfb}
.st-inferred{border-left:6px dashed var(--ink-soft);background:transparent;border-top:1px dashed var(--water-deep);border-bottom:1px dashed var(--water-deep);border-right:1px dashed var(--water-deep)}
.st-proposed{border-left:6px dashed var(--ink-soft);background:transparent;border-top:1px dashed var(--water-deep);border-bottom:1px dashed var(--water-deep);border-right:1px dashed var(--water-deep)}
.st-monitored{border-left:6px dashed var(--magenta);border-top:1px dashed var(--magenta);border-bottom:1px dashed var(--magenta);border-right:1px dashed var(--magenta);background:var(--magenta-soft)}
.stlabel{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 8px;border-radius:2px}
.st-verified-t{border:1.5px solid var(--verified);color:var(--verified)}
.st-reported-t,.st-inferred-t,.st-proposed-t{border:1.5px dashed var(--ink-soft);color:var(--ink-soft)}
.st-monitored-t{border:1.5px dashed var(--magenta);color:var(--magenta)}
.promo{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;background:var(--ink);color:var(--buff);padding:2px 8px;border-radius:2px}
.prov{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--buff-line);margin-left:auto}
.src{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.05em;
  border:1px solid var(--ink-soft);border-radius:2px;padding:1px 6px;color:var(--ink-soft);
  text-decoration:none;white-space:nowrap}
.src:hover{border-color:var(--magenta);color:var(--magenta)}

/* relationships */
.edges{list-style:none;margin-top:6px}
.edges .edge{background:#fff;border:1px solid var(--water-deep);padding:10px 14px;margin:8px 0;font-size:15px}
.edges .rel{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-soft)}
.claimedby{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--magenta)}
.srclist{list-style:none}
.srclist li{margin:6px 0;font-size:15px}

/* docket + sources tables */
.docket{border-collapse:collapse;width:100%;background:#fff;border:var(--rule);margin-top:20px;font-size:15px}
.docket thead th{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;text-align:left;padding:12px 14px;background:var(--ink);color:var(--water)}
.docket td{padding:13px 14px;border-top:1px solid var(--water-deep);vertical-align:top;line-height:1.5}
.docket tbody tr:nth-child(even){background:var(--water)}
.pill{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 8px;border-radius:2px;white-space:nowrap}
.pill-fact{border:1.5px solid var(--verified);color:var(--verified)}
.pill-open{border:1.5px dashed var(--magenta);color:var(--magenta)}
.srctable td:first-child{font-weight:600}
tr:target{outline:3px solid var(--magenta);outline-offset:-3px}

/* wanted */
.wantgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.wq{border:2px dashed var(--magenta);padding:20px 22px;background:transparent}
.wq .wt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);font-weight:600}
.wq h3{margin:8px 0;font-size:15.5px;text-transform:none;font-family:"Newsreader",Georgia,serif;font-weight:600}
.wq .why{font-size:14px;color:var(--ink-soft)}
.wq .cust{margin-top:10px;font-size:13.5px}
.wq details{margin-top:10px}
.wq summary{font-family:"IBM Plex Mono",monospace;font-size:11.5px;cursor:pointer;color:var(--magenta)}
.ch119{background:#fff;border:1px solid var(--water-deep);padding:14px;font-size:12px;
  font-family:"IBM Plex Mono",monospace;white-space:pre-wrap;margin-top:8px}

/* thesis scrubber */
.scrubber{margin-top:50px;border:var(--rule);background:var(--buff);padding:26px 28px}
.scrub-controls{display:flex;align-items:center;gap:14px;margin:18px 0 6px}
.scrub-controls input[type=range]{flex:1;accent-color:var(--magenta)}
.sbtn{font-family:"IBM Plex Mono",monospace;font-size:14px;border:1.5px solid var(--ink);
  background:#fff;padding:4px 12px;cursor:pointer}
.sbtn:hover{border-color:var(--magenta);color:var(--magenta)}
.scrub-pos{font-size:12px;color:var(--ink-soft)}
.timeline{list-style:none;margin-top:14px}
.tstate{position:relative}
.tstate .tdate{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--magenta);font-weight:600}
.tstate .tinstr{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-soft);margin:2px 0 8px}
.scrubber.js-on .tstate{display:none}
.scrubber.js-on .tstate.current{display:block}

/* footer */
.sitefoot{border-top:6px solid var(--magenta);background:var(--ink);color:var(--water);margin-top:40px}
.foot-inner{padding:26px 24px;display:flex;flex-direction:column;gap:8px;
  font-family:"IBM Plex Mono",monospace;font-size:12px}
.sitefoot a{color:var(--magenta-soft)}

@media (max-width:760px){
  .wantgrid{grid-template-columns:1fr}
  .docket{display:block;overflow-x:auto}
  .prov{display:none}
}
:focus-visible{outline:3px solid var(--magenta);outline-offset:2px}

/* ── WO-008: takeaways-first layer + explorer + readability pass ── */

/* readability: comfortable measure + hierarchy */
main.wrap{max-width:880px}
.claim p{font-size:16.5px;line-height:1.68}
.lede-s.intro{font-size:clamp(18px,2.3vw,21px);max-width:60ch}

/* bottom line — the 30-second layer */
.bottomline{border:2px solid var(--ink);background:#fff;margin:26px 0 10px;
  box-shadow:5px 5px 0 rgba(14,42,51,.14)}
.bl-head{background:var(--ink);color:var(--water);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 16px}
.bl-row{display:grid;grid-template-columns:130px 1fr;border-top:1px solid var(--water-deep)}
.bl-row:first-of-type{border-top:0}
.bl-key{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:16px;background:var(--buff);border-right:1px solid var(--water-deep);color:var(--ink-soft)}
.bl-text{padding:14px 18px}
.bl-text p{font-size:16.5px;line-height:1.6;max-width:66ch}
.bl-row.bl-open .bl-key{color:var(--magenta)}
.bl-row.bl-open .bl-text{background:var(--magenta-soft)}

/* collapsible record layer */
.rec-note{margin-top:34px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft)}
details.rec{border:1px solid var(--water-deep);background:var(--buff);margin:10px 0}
details.rec>summary{cursor:pointer;padding:12px 18px;list-style:none;display:flex;
  align-items:center;gap:12px}
details.rec>summary::-webkit-details-marker{display:none}
details.rec>summary::before{content:"▸";font-family:"IBM Plex Mono",monospace;
  color:var(--magenta);font-size:14px}
details.rec[open]>summary::before{content:"▾"}
details.rec>summary h2{margin:0;font-size:clamp(17px,2.2vw,21px)}
details.rec>*:not(summary){margin-left:18px;margin-right:18px}
details.rec>*:last-child{margin-bottom:16px}
details.rec .scrubber{margin-top:8px}

/* front-door cards */
.fd-links{display:grid;gap:12px;margin:24px 0 8px}
.fd-story,.fd-explore{display:block;border:2px solid var(--ink);background:var(--buff);
  padding:16px 20px;text-decoration:none;font-size:16px}
.fd-story{box-shadow:5px 5px 0 rgba(14,42,51,.14)}
.fd-story:hover b,.fd-explore:hover{color:var(--magenta)}
.fd-explore{border-style:dashed;border-color:var(--ink-soft);background:transparent}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.dcard{display:block;background:#fff;border:1.5px solid var(--ink);padding:18px 20px;
  text-decoration:none}
.dcard:hover{outline:3px solid var(--magenta);outline-offset:-1px}
.dcard-name{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 780;
  font-size:19px;text-transform:uppercase;line-height:1.1}
.dcard-ref{font-size:11px;color:var(--ink-soft);margin:3px 0 8px}
.dcard-take{font-size:15px;line-height:1.55;color:var(--ink);margin-bottom:10px}
.card-open{border-style:dashed;border-color:var(--magenta)}

/* explorer */
.explorer{display:grid;grid-template-columns:1fr 300px;gap:0;border:var(--rule);
  background:#fff;margin-top:22px}
#graph-svg{width:100%;height:640px;display:block;background:
  repeating-linear-gradient(0deg,transparent,transparent 39px,var(--water) 39px,var(--water) 40px),
  repeating-linear-gradient(90deg,transparent,transparent 39px,var(--water) 39px,var(--water) 40px)}
.graph-detail{border-left:var(--rule);padding:18px;background:var(--buff);font-size:14.5px;
  overflow-y:auto;max-height:640px}
.graph-detail h3{font-size:15px;text-transform:none;font-family:"Newsreader",Georgia,serif;
  font-weight:600;line-height:1.35}
.graph-detail .rel{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft)}
.gedge{cursor:pointer}
.gedge:hover,.gedge.gpicked{stroke-width:4px}
.gnode{cursor:pointer}
.gnode:hover circle{stroke-width:3.5px}
.glabel{font-family:"IBM Plex Mono",monospace;font-size:9.5px;fill:var(--ink-soft);
  text-anchor:middle;pointer-events:none}
.glabel-q{fill:var(--magenta)}
.gclaimed{font-family:"IBM Plex Mono",monospace;font-size:9px;fill:var(--magenta);
  text-anchor:middle;pointer-events:none}

@media (max-width:820px){
  .dgrid{grid-template-columns:1fr}
  .bl-row{grid-template-columns:1fr}
  .bl-key{border-right:0;border-bottom:1px solid var(--water-deep);padding:8px 16px}
  .explorer{grid-template-columns:1fr}
  .graph-detail{border-left:0;border-top:var(--rule);max-height:none}
  #graph-svg{height:460px}
}