/* The Eight Rivers — site shell styles. Paper/ink system: Newsreader display, Spline Sans UI, Spline Sans Mono meta. */
:root {
  --ink-rgb: 43, 35, 23;
  --card-rgb: 250, 246, 236;
  --chip-rgb: 255, 252, 244;
  --paper2-rgb: 243, 238, 225;
  --btn-hover: #efe8d8;
  --paper-ink: #f6f2e7;
  --paper: #f3eee1;
  --card: rgba(var(--card-rgb), .95);
  --card-solid: #faf7ee;
  --ink: #2b2317;
  --ink-60: rgba(var(--ink-rgb), .6);
  --ink-45: rgba(var(--ink-rgb), .45);
  --line: rgba(var(--ink-rgb), .16);
  --line-soft: rgba(var(--ink-rgb), .1);
  --gold: #a8842e;
  --gold-ink: #8a6b1e;
  --focal: #ffcf6b;
  /* identity-as-ink (Commission #4, Output B): CANON value-shifted to ≥3:1 on card+paper,
     hue held — derived by theme-derive.js, gated by theme-lint assertion 3. Swatch DOTS keep
     raw CANON; only ink (chip border/text, segment name) uses these. Dark block = raw CANON. */
  --river-ink-0: #2b8cea; --river-ink-1: #9065d2; --river-ink-2: #9c76d8; --river-ink-3: #0096b1;
  --river-ink-4: #c16500; --river-ink-5: #df56a9; --river-ink-6: #eb5a25; --river-ink-7: #c9526c;
  --seg-ink-vdw: #009e52;
  --shadow-card: 0 2px 14px rgba(30, 24, 12, .1);
  --shadow-float: 0 12px 34px rgba(30, 24, 12, .2);
  --shadow-sheet: 0 16px 48px rgba(30, 24, 12, .22);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Spline Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Spline Sans Mono', 'SF Mono', Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--sans); }
body.app { overflow: hidden; }
button { font-family: var(--sans); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- map stage ---- */
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; cursor: grab; }

/* ---- top bar ---- */
.topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 20px; pointer-events: none; gap: 16px; z-index: 10; }
.title-card { pointer-events: auto; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 11px 16px 12px; box-shadow: var(--shadow-card); backdrop-filter: blur(6px); }
.title-row { display: flex; align-items: baseline; gap: 8px; }
.title { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 26px; line-height: 1; white-space: nowrap; }
.specimen-tag { font: 600 8.5px var(--mono); letter-spacing: .1em; color: var(--gold-ink); border: 1px solid rgba(168, 132, 46, .45); border-radius: 5px; padding: 2px 5px; }
.subtitle { font: 400 11px var(--mono); letter-spacing: .05em; color: var(--ink-60); margin-top: 7px; max-width: 320px; }
.top-actions { pointer-events: auto; display: flex; gap: 8px; align-items: flex-start; }
.btn { height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font: 600 12px var(--sans); color: var(--ink); box-shadow: var(--shadow-card); white-space: nowrap; }
.btn:hover { background: var(--btn-hover); }
.btn.small { height: 32px; padding: 0 12px; border-radius: 9px; font-size: 12px; }
.btn.on { background: var(--ink); color: var(--paper-ink); border-color: var(--ink); }

/* ---- search ---- */
.search-wrap { position: relative; }
#search { width: 190px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); padding: 0 12px; font: 500 13px var(--sans); color: var(--ink); outline: none; box-shadow: var(--shadow-card); }
#search::placeholder { color: rgba(var(--ink-rgb), .38); }
.search-results { position: absolute; top: 44px; left: 0; width: 306px; background: var(--card-solid); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-float); overflow: hidden; }
.search-row { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid rgba(var(--ink-rgb), .06); width: 100%; background: transparent; border-left: 0; border-right: 0; border-top: 0; text-align: left; }
.search-row:hover { background: rgba(var(--ink-rgb), .06); }
.search-row .name { font: 500 13px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-row .meta { margin-left: auto; font: 400 10.5px var(--mono); color: rgba(var(--ink-rgb), .55); flex: none; white-space: nowrap; }
.search-more { padding: 7px 12px; font: 400 10.5px var(--mono); color: rgba(var(--ink-rgb), .5); }

/* ---- bottom bar ---- */
.bottombar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 14px 20px; pointer-events: none; z-index: 10; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; max-width: 56vw; pointer-events: auto; }
.chip { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font: 600 12px var(--sans); color: var(--ink); box-shadow: 0 2px 10px rgba(30, 24, 12, .08); }
.chip .count { font: 500 10.5px var(--mono); opacity: .6; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.controls-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: auto; flex: none; }
.legend { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 6px 12px; font: 500 11px var(--sans); color: rgba(var(--ink-rgb), .75); box-shadow: 0 2px 10px rgba(30, 24, 12, .08); flex-wrap: wrap; }
.legend .item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.controls { display: flex; gap: 8px; }
#gen-select { height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); font: 600 12px var(--sans); color: var(--ink); padding: 0 8px; cursor: pointer; box-shadow: 0 2px 10px rgba(30, 24, 12, .08); }
.hint { display: flex; align-items: center; gap: 6px; font: 500 10.5px var(--mono); color: rgba(var(--ink-rgb), .48); letter-spacing: .04em; background: rgba(var(--paper2-rgb), .7); padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.hint a { color: var(--ink-60); }

/* ---- tooltip ---- */
#tooltip { position: fixed; display: none; z-index: 50; pointer-events: none; background: var(--ink); color: var(--paper-ink); border-radius: 8px; padding: 7px 11px; box-shadow: 0 6px 20px rgba(0, 0, 0, .28); max-width: 260px; }
#tooltip .t-name { font: 600 12.5px var(--sans); white-space: nowrap; display: flex; align-items: center; gap: 7px; }
#tooltip .t-meta { font: 400 11px var(--mono); opacity: .75; margin-top: 3px; }

/* ---- person card (module output, both modes) ---- */
.pc { color: var(--ink); }
.pc a { color: inherit; }
.pc-band-strip { height: 5px; }
.pc-body { padding: 16px 18px 20px; }
.pc-masthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pc-monogram { width: 58px; height: 58px; border-radius: 50%; color: #faf6ec; display: flex; align-items: center; justify-content: center; font: 600 22px var(--serif); flex: none; }
.pc-idline { font: 600 10.5px var(--mono); color: rgba(var(--ink-rgb), .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-name { font: 600 23px/1.15 var(--serif); margin-top: 11px; }
.pc.page .pc-name { font-size: 31px; font-weight: 700; margin-top: 5px; }
.pc-vitals { font: 500 12px var(--mono); color: rgba(var(--ink-rgb), .68); margin-top: 6px; line-height: 1.6; }
.pc-role { font: 500 11.5px var(--sans); color: rgba(var(--ink-rgb), .75); margin-top: 3px; }
.pc-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); color: rgba(var(--ink-rgb), .7); border-radius: 12px; padding: 3px 10px; font: 600 11px var(--sans); white-space: nowrap; background: transparent; text-decoration: none; }
.pill .dot { width: 8px; height: 8px; }
.pill.badge { border-color: rgba(168, 132, 46, .5); color: var(--gold-ink); background: rgba(168, 132, 46, .1); }
.pc.panel .conf-pill { white-space: normal; line-height: 1.35; max-width: 100%; }
.pc-notice { margin-top: 12px; font: 500 13px var(--sans); color: rgba(var(--ink-rgb), .75); background: rgba(var(--ink-rgb), .05); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.pc-note { margin-top: 12px; font: 400 13px/1.55 var(--sans); color: rgba(var(--ink-rgb), .85); text-wrap: pretty; }
.pc-h { font: 600 19px var(--serif); border-bottom: 1px solid rgba(var(--ink-rgb), .18); padding-bottom: 5px; margin: 22px 0 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pc.panel .pc-h { font-size: 10px; font-family: var(--mono); letter-spacing: .11em; color: rgba(var(--ink-rgb), .5); border-bottom: 0; padding-bottom: 0; margin-top: 15px; font-weight: 600; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pc-chips.centered { justify-content: center; }
.rel-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(var(--chip-rgb), .8); cursor: pointer; font: 500 12.5px var(--sans); color: var(--ink); text-decoration: none; max-width: 100%; }
.rel-chip:hover { border-color: rgba(var(--ink-rgb), .45); }
.rel-chip .years { font: 400 10px var(--mono); opacity: .6; }
.rel-chip .tag { font: 600 10px var(--sans); color: var(--gold); }
.rel-chip.hl { color: #faf6ec; }
.rel-inert { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 9px; border: 1px dashed rgba(var(--ink-rgb), .25); font: 500 12.5px var(--sans); color: var(--ink-45); }
.rel-living { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--line-soft); font: 500 12.5px var(--sans); color: var(--ink-45); background: rgba(var(--ink-rgb), .03); }
.mini-tree-join { width: 13px; height: 5px; border-top: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); flex: none; align-self: center; }
.mini-tree-drop { width: 1px; height: 12px; background: rgba(var(--ink-rgb), .3); margin: 3px auto; }
.mini-tree-label { text-align: center; font: 600 9px var(--mono); letter-spacing: .1em; color: rgba(var(--ink-rgb), .5); margin-top: 2px; }
/* the marriage as a first-class event (07-07): one block per union; the line-union wears the gold */
.union-block { border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px 12px; margin-top: 10px; }
.union-block.line { border-color: rgba(168, 132, 46, .55); background: rgba(168, 132, 46, .07); }
.union-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.union-ord { font: 600 9px var(--mono); letter-spacing: .12em; color: var(--ink-45); }
.union-head .union-seq { font: 500 11px var(--mono); color: var(--ink-60); }
.union-line-tag { margin-top: 9px; font: 600 10.5px var(--sans); color: var(--gold-ink); text-align: center; }
.path-row { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line-soft); background: rgba(var(--chip-rgb), .7); cursor: pointer; text-align: left; font-family: var(--sans); width: 100%; text-decoration: none; color: var(--ink); }
.path-row:hover { background: rgba(var(--ink-rgb), .06); }
.path-row .g { font: 600 9.5px var(--mono); color: var(--ink-45); width: 30px; flex: none; }
.path-row .nm { font: 500 12.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.path-row .yrs { font: 400 10px var(--mono); color: rgba(var(--ink-rgb), .5); flex: none; }
.path-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.path-living { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 9px; border: 1px dashed var(--line-soft); font: 500 12px var(--sans); color: var(--ink-45); }
.side-panel { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 10px 13px; margin-top: 14px; }
.side-panel .sp-title { font: 600 12px var(--sans); }
.side-panel .sp-body { font: 400 12.5px/1.55 var(--sans); color: rgba(var(--ink-rgb), .8); margin-top: 4px; }
.loop-arms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 9px; }
.loop-arm { border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; }
.loop-arm .arm-label { font: 600 10px var(--mono); letter-spacing: .07em; }
.loop-arm .arm-node { font: 400 11.5px/1.5 var(--sans); color: rgba(var(--ink-rgb), .78); }
.pc-story { font: 400 14px/1.7 var(--sans); color: rgba(var(--ink-rgb), .9); margin: 10px 0 0; text-wrap: pretty; }
.pc-story a { text-decoration-color: rgba(var(--ink-rgb), .4); }
.pc-fallback-tag { font: 500 10px var(--mono); color: var(--ink-45); margin-top: 8px; }
/* D2: the dim invitation line — direct life, no authored shadow yet (fx-0009). No section, no apology. */
.pc-invite { font: italic 400 13px/1.65 var(--serif); color: rgba(var(--ink-rgb), .42); margin-top: 16px; }
/* D2 ruling (2026-07-08): collateral silence = quiet — the quietest ending; silence stays silent */
.shadow-block { margin-top: 18px; background: rgba(var(--ink-rgb), .045); border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; opacity: .55; }
.shadow-block .sh-tag { font: 600 9.5px var(--mono); letter-spacing: .12em; color: rgba(var(--ink-rgb), .5); }
.shadow-block .sh-text { font: italic 400 14px/1.65 var(--serif); color: rgba(var(--ink-rgb), .85); margin-top: 6px; }
.src-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(var(--chip-rgb), .7); margin-top: 6px; }
.src-row .cls { font: 600 9px var(--mono); letter-spacing: .05em; color: var(--ink-60); background: rgba(var(--ink-rgb), .07); border-radius: 5px; padding: 2px 6px; flex: none; }
.src-row .ref { font: 500 12px var(--sans); flex: none; }
.src-row .att { font: 400 11.5px/1.4 var(--sans); color: rgba(var(--ink-rgb), .65); }
.fs-pointer { margin-top: 8px; font: 500 11px var(--mono); color: var(--ink-60); }
.open-threads { margin-top: 18px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: rgba(var(--chip-rgb), .6); }
.open-threads summary { font: 600 12px var(--sans); color: rgba(var(--ink-rgb), .75); cursor: pointer; }
.open-threads .thread { font: 400 12.5px/1.5 var(--sans); color: rgba(var(--ink-rgb), .75); margin-top: 7px; padding-left: 12px; border-left: 2px solid rgba(var(--ink-rgb), .18); }
.pc-grid { display: grid; grid-template-columns: 1fr 224px; gap: 28px; margin-top: 20px; }
.pc-rail .portrait { aspect-ratio: 3 / 4; border: 1.5px dashed rgba(var(--ink-rgb), .25); border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 500 11px var(--sans); color: var(--ink-45); }
/* P2: long free-text defence — CSS-only collapse, works on prerendered pages with no JS */
.clamp { position: relative; }
.clamp input { position: absolute; opacity: 0; pointer-events: none; }
.clamp .clamp-body { max-height: 300px; overflow: hidden; position: relative; }
.clamp .clamp-body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 84px; background: linear-gradient(to bottom, rgba(var(--card-rgb, 250, 247, 238), 0), var(--card-solid)); pointer-events: none; }
.clamp input:checked ~ .clamp-body { max-height: none; }
.clamp input:checked ~ .clamp-body::after { display: none; }
.clamp label { display: inline-block; margin-top: 8px; font: 600 12px var(--sans); color: var(--ink-60); border: 1px solid var(--line); border-radius: 9px; padding: 5px 12px; cursor: pointer; }
.clamp label:hover { background: rgba(var(--ink-rgb), .06); }
.clamp input:checked ~ label { display: none; }
.clamp input:focus-visible ~ label { outline: 2px solid var(--ink); outline-offset: 2px; }
.pc-rail .info-row { border-bottom: 1px solid var(--line-soft); padding: 8px 0 7px; }
.pc-rail .info-k { font: 600 9px var(--mono); letter-spacing: .1em; color: rgba(var(--ink-rgb), .48); }
.pc-rail .info-v { font: 500 12.5px/1.4 var(--sans); margin-top: 3px; }
.pc-footer { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; background: rgba(var(--ink-rgb), .05); border-top: 1px solid var(--line-soft); padding: 10px 30px; font: 400 11px var(--mono); color: rgba(var(--ink-rgb), .55); }
.pc-footer .an { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cta { margin-top: 13px; width: 100%; height: 36px; border-radius: 9px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-ink); font: 600 12.5px var(--sans); cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.pc-cta:hover { background: #46392a; }
/* cross-links between the map and the reading surfaces (calendar / full page). Higher specificity than `.pc a { color: inherit }` so the gold + ink read through. */
.pc a.pc-sameday { display: inline-block; margin-top: 5px; font: 500 11.5px var(--mono); color: var(--gold-ink); text-decoration: none; border-bottom: 1px dashed rgba(168, 132, 46, .5); padding-bottom: 1px; }
.pc a.pc-sameday:hover { color: var(--ink); border-bottom-style: solid; }
.pc-cross { margin-top: 10px; }
.pc a.pc-cross-link { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px var(--sans); color: var(--ink); text-decoration: none; padding: 8px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.pc a.pc-cross-link:hover { border-color: var(--ink); background: var(--btn-hover); }
/* the map's today chip (link C) — a gold-ringed presence echoing the calendar's today-mark */
.today-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; font: 600 11px var(--mono); letter-spacing: .04em; color: var(--ink-60); text-decoration: none; }
.today-chip:hover { color: var(--ink); }
.today-chip .tc-ring { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--gold-ink); flex: none; box-shadow: 0 0 0 3px rgba(168, 132, 46, .18); }
.photo-slot { margin-top: 14px; border: 1.5px dashed rgba(var(--ink-rgb), .22); border-radius: 10px; padding: 12px; text-align: center; font: 500 11px var(--sans); color: var(--ink-45); }

/* ---- panel (desktop dock / mobile sheet) ---- */
#panel { position: absolute; top: 76px; right: 16px; bottom: 92px; width: 340px; background: rgba(var(--card-rgb), .97); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sheet); overflow-y: auto; z-index: 20; animation: panel-in .22s ease; }
#panel .notch { display: none; width: 44px; height: 5px; border-radius: 3px; background: rgba(var(--ink-rgb), .25); margin: 8px auto 0; }
#panel .panel-close { position: absolute; top: 14px; right: 12px; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: rgba(var(--card-rgb), .9); cursor: pointer; font: 500 13px var(--sans); color: var(--ink-60); z-index: 2; }
@keyframes panel-in { from { transform: translateX(18px); } to { transform: none; } }
@keyframes sheet-in { from { transform: translateY(36px); } to { transform: none; } }

/* ---- overlay page ---- */
#overlay { position: fixed; inset: 0; background: rgba(28, 22, 10, .52); z-index: 60; overflow-y: auto; padding: 4vh 16px; }
#overlay .sheet { max-width: 820px; margin: 0 auto; background: var(--card-solid); border-radius: 16px; border: 1px solid rgba(var(--ink-rgb), .25); box-shadow: 0 30px 80px rgba(18, 13, 4, .45); overflow: hidden; }
#overlay .sheet .pc-body { padding: 24px 30px 26px; }
.overlay-actions { display: flex; gap: 8px; flex: none; }
.overlay-actions .btn { height: 34px; box-shadow: none; }

/* ---- walking pill ---- */
#walk-pill { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 55; background: var(--ink); color: var(--paper-ink); border-radius: 18px; padding: 8px 16px; font: 600 12px var(--sans); box-shadow: 0 8px 26px rgba(0, 0, 0, .3); white-space: nowrap; }

/* ---- static pages (about, people/*) ---- */
body.doc { overflow: auto; }
.doc-wrap { max-width: 760px; margin: 0 auto; padding: 40px 22px 80px; }
.doc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.doc-head .doc-title { font: 700 32px/1.1 var(--serif); }
.doc-head a { font: 600 12px var(--sans); color: var(--ink); }
.doc h2 { font: 600 20px var(--serif); border-bottom: 1px solid rgba(var(--ink-rgb), .18); padding-bottom: 5px; margin: 28px 0 10px; }
.doc p { font: 400 14px/1.7 var(--sans); color: rgba(var(--ink-rgb), .9); text-wrap: pretty; }
.doc .row { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.doc .row .k { flex: none; width: 128px; font: 600 12.5px var(--sans); }
.doc .row .w { font: 400 13px/1.55 var(--sans); color: rgba(var(--ink-rgb), .8); }
.doc .colophon { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--line-soft); font: 400 11px var(--mono); color: rgba(var(--ink-rgb), .55); }
.doc .quiet-line { font: italic 400 14px/1.65 var(--serif); color: rgba(var(--ink-rgb), .75); border-top: 1px solid rgba(var(--ink-rgb), .18); margin-top: 22px; padding-top: 14px; }

/* ---- mobile: phones are the primary device ---- */
@media (max-width: 700px) {
  .legend, .hint, .subtitle { display: none; }
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .title-card { padding: 8px 12px 9px; }
  .title { font-size: 19px; }
  #search { width: 132px; }
  .bottombar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
  .controls { justify-content: flex-end; flex-wrap: wrap; }
  .btn, .btn.small { min-height: 40px; }
  #panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62vh; border-radius: 16px 16px 0 0; animation: sheet-in .25s ease; }
  #panel .notch { display: block; }
  #overlay { padding: 0; }
  #overlay .sheet { border-radius: 0; min-height: 100vh; }
  #overlay .sheet .pc-body { padding: 20px 16px 24px; }
  .pc-grid { grid-template-columns: 1fr; }
  .loop-arms { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #panel, #overlay .sheet { animation: none !important; }
}

/* ==== E1: the CTA is an <a>; .pc a{color:inherit} was overpainting its cream text (ink-on-ink) ==== */
.pc a.pc-cta { color: var(--paper-ink); }

/* ==== unions (issue 0002): sequence line is fact, set quietly ==== */
.union-seq { font: 500 10.5px var(--mono); color: var(--ink-60); letter-spacing: .02em; white-space: nowrap; }

/* ==== the night self (Commission #3 §2) — value retuned, hue identity held ==== */
html[data-theme="dark"] {
  --paper: #0a0e12;
  --card: rgba(17, 22, 28, .95);
  --card-solid: #11161c;
  --ink: #e6e0d2;
  --ink-60: rgba(230, 224, 210, .62);
  --ink-45: rgba(230, 224, 210, .45);
  --line: rgba(230, 224, 210, .17);
  --line-soft: rgba(230, 224, 210, .1);
  --gold-ink: #d9b45f;
  --river-ink-0: #3e9cfc; --river-ink-1: #9065d2; --river-ink-2: #b38ef2; --river-ink-3: #00b5d0;
  --river-ink-4: #c16500; --river-ink-5: #f56bbd; --river-ink-6: #fe6b39; --river-ink-7: #c9526c;
  --seg-ink-vdw: #00c172;
  --ink-rgb: 230, 224, 210;
  --card-rgb: 17, 22, 28;
  --chip-rgb: 22, 29, 37;
  --paper2-rgb: 13, 18, 23;
  --btn-hover: #1a222b;
  --paper-ink: #10141a;
  --err-bg: #2a1512;
  --shadow-card: 0 2px 14px rgba(0, 0, 0, .5);
  --shadow-float: 0 12px 34px rgba(0, 0, 0, .6);
  --shadow-sheet: 0 16px 48px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .specimen-tag { color: var(--gold-ink); border-color: rgba(217, 180, 95, .45); }
html[data-theme="dark"] #tooltip { background: #1c242e; color: #e6e0d2; }
html[data-theme="dark"] #walk-pill { background: #e6e0d2; color: #10141a; }

/* ==== the Story surface ==== */
.story-wrap { max-width: 680px; margin: 0 auto; padding: 34px 20px 90px; }
.story-kicker { font: 600 11px var(--mono); letter-spacing: .14em; color: var(--gold-ink); text-transform: uppercase; }
.story-title { font: 700 36px/1.12 var(--serif); margin: 8px 0 0; }
.story-summary { font: italic 400 17px/1.55 var(--serif); color: var(--ink-60); margin: 10px 0 0; text-wrap: pretty; }
.story-riverline { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 600 12px var(--sans); }
.story-rule { border: 0; border-top: 2px solid var(--ink); margin: 20px 0 26px; }
.story-body p { font: 400 16.5px/1.85 var(--serif); color: rgba(var(--ink-rgb), .92); margin: 0 0 19px; text-wrap: pretty; }
.story-body p.opening::first-letter { font-size: 3.1em; line-height: .86; float: left; padding: 4px 8px 0 0; font-weight: 600; }
.story-body strong { font-weight: 600; }
a.person-ref { color: inherit; text-decoration: none; border-bottom: 2px solid var(--ref-c, rgba(var(--ink-rgb), .22)); padding-bottom: 1px; transition: background .12s; }
a.person-ref:hover { background: rgba(var(--ink-rgb), .06); }
span.person-ref.living { color: var(--ink-45); font-style: italic; border-bottom: 1px dashed rgba(var(--ink-rgb), .22); padding-bottom: 1px; }
.story-figure { margin: 28px 0; }
.story-figure .fig-frame { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--paper); position: relative; }
.story-figure canvas, .story-figure img { display: block; width: 100%; pointer-events: none; }
.story-figure figcaption { font: italic 400 13.5px/1.6 var(--serif); color: var(--ink-60); margin-top: 9px; display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.story-figure .fig-link { font: 600 11px var(--sans); color: var(--ink); white-space: nowrap; flex: none; }
.story-turns { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line-soft); margin-top: 34px; padding-top: 16px; }
.story-turns a { font: 600 13px var(--sans); color: var(--ink); text-decoration: none; max-width: 46%; }
.story-turns a .dir { font: 600 10px var(--mono); color: var(--ink-60); display: block; margin-bottom: 3px; letter-spacing: .08em; }
#story-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--gold); width: 0; z-index: 90; }
.toc-row { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); }
.toc-row:hover .toc-title { text-decoration: underline; text-decoration-color: rgba(var(--ink-rgb), .3); }
.toc-num { font: 600 12px var(--mono); color: var(--ink-45); width: 26px; flex: none; }
.toc-main { min-width: 0; flex: 1; }
.toc-kicker { font: 600 10px var(--mono); letter-spacing: .12em; color: var(--gold-ink); text-transform: uppercase; }
.toc-title { font: 600 22px/1.2 var(--serif); margin-top: 3px; }
.toc-summary { font: 400 13.5px/1.55 var(--sans); color: var(--ink-60); margin-top: 5px; text-wrap: pretty; }
.toc-meta { font: 500 10.5px var(--mono); color: var(--ink-45); flex: none; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.mini-card { position: fixed; z-index: 95; width: 230px; background: var(--card-solid); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-float); padding: 11px 13px; pointer-events: none; }
.mini-card .mc-strip { height: 4px; border-radius: 3px 3px 0 0; margin: -11px -13px 9px; }
.mini-card .mc-name { font: 600 14px var(--serif); }
.mini-card .mc-meta { font: 400 10.5px var(--mono); color: var(--ink-60); margin-top: 4px; }
@media (max-width: 700px) {
  .story-title { font-size: 29px; }
  .story-wrap { padding: 22px 16px 70px; }
}


/* ===== Commission #7: place-entity person page ===== */
.pc-subtitle { font: italic 500 14px/1.45 var(--serif); color: rgba(var(--ink-rgb), .72); margin: 7px 0 0; text-wrap: pretty; }
.pc.page .pc-subtitle { font-size: 16px; }
.pc-register { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ped-reg { display: inline-flex; align-items: center; gap: 7px; font: 600 10.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line); }
.ped-reg .pr-tick { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; }
.ped-reg.direct { color: #1f6f3a; background: rgba(31,111,58,.08); border-color: rgba(31,111,58,.3); }
.ped-reg.coll { color: rgba(var(--ink-rgb), .6); background: rgba(var(--ink-rgb), .04); }
.ped-reg.target { color: var(--gold-ink); background: rgba(168,132,46,.1); border-color: rgba(168,132,46,.4); }
.plate-link { display: inline-flex; align-items: center; gap: 5px; font: 600 11px var(--sans); color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid transparent; }
.plate-link:hover { border-bottom-color: var(--gold-ink); }
.plate-link.foot { margin-left: auto; }
/* the provenance ladder meter (render-spec, folded in) */
.ladder { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--ink-rgb), .03); margin-top: 6px; }
.ladder-pips { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.ladder-pips .pip { width: 4px; border-radius: 1px; border: 1px solid var(--line); background: transparent; }
.ladder-pips .pip:nth-child(1){ height: 5px; } .ladder-pips .pip:nth-child(2){ height: 7px; } .ladder-pips .pip:nth-child(3){ height: 9px; } .ladder-pips .pip:nth-child(4){ height: 12px; } .ladder-pips .pip:nth-child(5){ height: 14px; }
.ladder-pips .pip.on { border-color: transparent; }
.ladder-lbl { font: 600 11px var(--mono); color: var(--ink); }
.ladder-gloss { font: 400 11px var(--sans); color: rgba(var(--ink-rgb), .55); }
.pc.panel .ladder-gloss { display: none; }
/* journey panel */
.journey { margin-top: 4px; }
.journey-key { display: inline-flex; align-items: center; gap: 4px; font: 600 9px var(--mono); letter-spacing: .04em; color: rgba(var(--ink-rgb), .5); text-transform: none; margin-left: auto; }
.journey-key i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; }
.journey-key .k-rec { background: #c79a3a; }
.journey-key .k-story { background: var(--card-solid); border: 1.4px dashed #c79a3a; }
.journey-body { display: flex; gap: 16px; margin-top: 12px; align-items: flex-start; }
.cst-wrap { flex: none; }
.cst { display: block; border-radius: 10px; background: rgba(var(--ink-rgb), .02); }
.cst-cloud circle { fill: rgba(var(--ink-rgb), .22); }
.cst-lbl { font: 500 6px var(--mono); fill: rgba(var(--ink-rgb), .5); }
.cst-edge { font: 700 9px var(--sans); fill: #c79a3a; text-anchor: middle; }
.cst-beyond { font: 500 10px var(--mono); color: rgba(var(--ink-rgb), .55); margin-top: 6px; text-align: center; }
.legs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.leg { display: flex; gap: 10px; padding: 2px 0; }
.leg-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; margin-top: 3px; position: relative; }
.leg-rec .leg-dot { background: #c79a3a; box-shadow: 0 0 0 3px rgba(199,154,58,.16); }
.leg-story .leg-dot { background: var(--card-solid); border: 1.6px dashed #c79a3a; }
.leg-none .leg-dot { background: rgba(var(--ink-rgb), .2); }
.leg:not(:last-child) .leg-dot::after { content: ""; position: absolute; left: 50%; top: 13px; transform: translateX(-50%); width: 1.5px; height: calc(100% + 8px); background: rgba(199,154,58,.35); }
.leg-none:not(:last-child) .leg-dot::after { background: rgba(var(--ink-rgb), .14); }
.leg-main { min-width: 0; flex: 1; }
.leg-role { font: 600 10px var(--mono); letter-spacing: .06em; color: rgba(var(--ink-rgb), .55); text-transform: uppercase; }
.leg-note { font: 400 12px/1.5 var(--sans); color: rgba(var(--ink-rgb), .72); margin-top: 3px; text-wrap: pretty; }
.leg-story-tag { font: 600 9px var(--mono); letter-spacing: .05em; color: #b07f3a; text-transform: uppercase; border: 1px solid rgba(176,127,58,.4); border-radius: 5px; padding: 1px 5px; white-space: nowrap; }
/* place chip with gravity */
.place-chip { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-top: 6px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(var(--chip-rgb), .7); }
.place-chip .pl-name { font: 600 12px var(--sans); color: var(--ink); }
.place-chip .pl-co { font: 400 10px var(--mono); color: rgba(var(--ink-rgb), .5); }
.place-chip .pl-lives { flex-basis: 100%; font: 500 10px var(--mono); color: var(--gold-ink); margin-top: 1px; }
/* namespace chips (render-spec grammar) */
.src-ns { display: inline-flex; align-items: center; font: 600 10px var(--mono); letter-spacing: .02em; padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex: none; }
.ns-doc { color: #1f6f3a; background: rgba(31,111,58,.1); border: 1px solid rgba(31,111,58,.3); }
.ns-ext { color: rgba(var(--ink-rgb), .6); background: rgba(var(--ink-rgb), .04); border: 1px dashed rgba(var(--ink-rgb), .3); }
.ns-test { color: #8a5a2b; background: rgba(138,90,43,.09); border: 1px solid rgba(138,90,43,.3); }
.ns-art { color: #6a4d86; background: rgba(106,77,134,.09); border: 1px solid rgba(106,77,134,.3); }
.ns-ref { color: rgba(var(--ink-rgb), .5); border: 1px solid var(--line); }
.ns-ai { color: #8a3a24; background: rgba(138,58,36,.08); border: 1px solid rgba(138,58,36,.35); }
.src-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dotted var(--line-soft); }
.src-row .ref { font: 500 11.5px var(--mono); color: rgba(var(--ink-rgb), .72); }
.src-row .att { font: 400 12px var(--sans); color: rgba(var(--ink-rgb), .58); margin-left: auto; text-align: right; }
/* receipts */
.receipts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.receipt { margin: 0; width: 120px; display: flex; flex-direction: column; gap: 7px; }
.receipt img { width: 120px; height: 150px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(18,13,4,.12); background: #efe7d4; }
.receipt figcaption { display: flex; flex-direction: column; gap: 4px; }
.receipt .rc-title { font: 600 11px var(--sans); color: var(--ink); }
.receipt .rc-att { font: 400 10.5px/1.4 var(--sans); color: rgba(var(--ink-rgb), .6); }
/* marked conflict */
.conflict { margin-top: 14px; border: 1px solid rgba(138,58,36,.3); border-left: 3px solid #a03b2c; border-radius: 0 10px 10px 0; background: rgba(160,59,44,.05); padding: 12px 14px; }
.cf-tag { font: 600 9.5px var(--mono); letter-spacing: .1em; color: #8a3a24; text-transform: uppercase; }
.cf-claim { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.cf-claim-text { font: 400 13px/1.5 var(--sans); color: rgba(var(--ink-rgb), .7); text-decoration: line-through; text-decoration-color: rgba(160,59,44,.5); }
.cf-verdict { display: flex; gap: 8px; align-items: baseline; margin-top: 9px; font: 500 13px/1.5 var(--sans); color: var(--ink); }
.cf-x { font: 700 10px var(--mono); letter-spacing: .06em; color: #a03b2c; text-transform: uppercase; flex: none; border: 1px solid rgba(160,59,44,.4); border-radius: 5px; padding: 1px 6px; }
.cf-foot { font: italic 400 11.5px/1.5 var(--serif); color: rgba(var(--ink-rgb), .55); margin-top: 9px; }
/* panel mode: stack the journey (narrow) */
.pc.panel .journey-body { flex-direction: column; }
.pc.panel .cst-wrap { align-self: center; }
.pc.panel .receipt, .pc.panel .receipt img { width: 96px; }
.pc.panel .receipt img { height: 120px; }

/* ===== the connection block (D3, ruled 2026-07-08): the line to the focal, after the person ===== */
.connection { margin-top: 22px; }
.conn-lede { font: 400 12.5px/1.55 var(--sans); color: rgba(var(--ink-rgb), .62); margin: 8px 0 2px; text-wrap: pretty; }
.pc.panel .conn-lede { display: none; }
.conn-part { margin-top: 14px; }
.conn-lbl { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--ink-rgb), .45); margin-bottom: 4px; }
/* compact journey (1b): header label + key row */
.journey-head { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.journey-lbl { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--ink-rgb), .45); }
.journey-head .journey-key { margin-left: auto; }
/* the expandable family band (2a) — one gesture, JS-off via a checkbox */
.jb-expand { margin-top: 12px; }
.jb-toggle { position: absolute; opacity: 0; width: 0; height: 0; }
.jb-cta { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 600 12px var(--sans); color: var(--gold-ink); border: 1px solid rgba(199,154,58,.4); background: rgba(199,154,58,.07); border-radius: 9px; padding: 7px 13px; user-select: none; -webkit-tap-highlight-color: transparent; }
.jb-cta:hover { background: rgba(199,154,58,.13); }
.jb-caret { font: 600 13px var(--mono); line-height: 1; transition: transform .18s ease; }
.jb-toggle:focus-visible + .jb-cta { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.jb-close { display: none; }
.jb-toggle:checked + .jb-cta .jb-open { display: none; }
.jb-toggle:checked + .jb-cta .jb-close { display: inline; }
.jb-toggle:checked + .jb-cta .jb-caret { transform: rotate(45deg); }
.jb-band-wrap { display: none; margin-top: 12px; }
.jb-toggle:checked ~ .jb-band-wrap { display: block; }
/* the band SVG scales to its column; the compact cst keeps its intrinsic size */
.cst.band { width: 100%; height: auto; max-width: 624px; border-radius: 10px; }
.fam-lbl { font: 600 8px var(--mono); letter-spacing: .03em; fill: rgba(var(--ink-rgb), .62); }
.fam-lbl.emil { fill: #7a4fc0; font-weight: 700; }
.fam-lbl.xing { fill: #a86b1e; }
.fam-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px; font: 500 10.5px var(--sans); color: rgba(var(--ink-rgb), .62); }
.fam-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fam-legend i { width: 16px; height: 0; display: inline-block; }
.fam-legend .lg-line { border-top: 2px solid #c79a3a; }
.fam-legend .lg-emil { width: 9px; height: 9px; border-top: 0; background: #9065d2; transform: rotate(45deg); }
.fam-legend .lg-fog { width: 6px; height: 6px; border-top: 0; border-radius: 50%; background: rgba(var(--ink-rgb), .22); }
.fam-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font: 400 12px/1.5 var(--sans); color: rgba(var(--ink-rgb), .74); text-wrap: pretty; border-left: 2px solid rgba(168,107,30,.5); padding-left: 10px; }
.fam-note-dot { flex: none; width: 9px; height: 9px; margin-top: 3px; border-radius: 50%; border: 1.4px dashed #a86b1e; }
/* journey nodes: hover reveals place · when via a floating tip (SVG <title> is the JS-off fallback) */
.cst-node { cursor: default; transition: stroke-width .12s ease; }
.cst-node:hover { stroke-width: 2; }
/* family-band ancestor nodes: hover reveals name · year · generation (informational, not links) */
.cst .fam-node-mk { cursor: default; transition: stroke .12s ease, stroke-width .12s ease; }
.cst .fam-node-mk:hover { stroke: #7a4fc0; stroke-width: 2.2; }
/* floating hover tip (tip.js) — inverts cleanly across day/night via the ink/card tokens */
.er-tip { position: fixed; z-index: 9999; pointer-events: none; max-width: 240px; padding: 5px 9px; border-radius: 7px; font: 600 11.5px/1.35 var(--sans); text-align: center; color: var(--card-solid); background: var(--ink); box-shadow: 0 8px 22px rgba(18,13,4,.30); transition: opacity .1s ease; }