:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: an exhibit plate (the poster) with a marginal gloss beside it, then a scroll of time, then a reading room. */
:root {
  color-scheme: dark;
  --bg: #0b0c12;
  --surface: #14151d;
  --surface-2: #1c1d28;
  --ink: #ece6d9;
  --ink-2: #c5bfb2;
  --muted: #918e9c;
  --hair: rgba(236, 230, 217, 0.12);
  --hair-2: rgba(236, 230, 217, 0.24);
  --gold: #d8b25a;
  --gold-ink: #e6c67a;
  --logos: #9fbbe0;
  --eros: #e6a3a2;
  --depth: #b7aaf0;
  --underworld: #ec8f52;
  --path: #d8b25a;
  /* evidence lens: echoed, reframed, contested (one hue, more ink = more support) */
  --evi-e: #83e8c3;
  --evi-r: #47bc96;
  --evi-c: #2e8d6f;
  /* chart (validated categorical slots 1-3, dark steps) */
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --sj: #ece6d9;
  --grid: #23242e;
  --axis: #3a3b48;
  --band: rgba(236, 230, 217, 0.025);
  --jband: rgba(216, 178, 90, 0.085);
  /* overlay on the poster: the poster is dark in every theme, so these never change */
  --ov-gold: #f6d995;
  --ov-glow: 246 217 149;
  --ov-scrim: rgba(3, 4, 8, 0.68);
  --ov-ink: #f3ecdd;
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-body: "Spectral", Georgia, "Times New Roman", serif;
  --font-ui: "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #eceef2;
    --surface: #f7f8fa;
    --surface-2: #e6e9ef;
    --ink: #15161d;
    --ink-2: #3c3e4b;
    --muted: #5d5f6c;
    --hair: rgba(21, 22, 29, 0.12);
    --hair-2: rgba(21, 22, 29, 0.26);
    --gold: #a47718;
    --gold-ink: #7f5c10;
    --logos: #2f5d96;
    --eros: #a34651;
    --depth: #5a4bb0;
    --underworld: #a64b14;
    --path: #8a6414;
    --evi-e: #02553f;
    --evi-r: #057558;
    --evi-c: #199d78;
    --s1: #2a78d6;
    --s2: #eb6834;
    --s3: #1baf7a;
    --sj: #15161d;
    --grid: #e1e4ea;
    --axis: #c6cad3;
    --band: rgba(21, 22, 29, 0.025);
    --jband: rgba(164, 119, 24, 0.09);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eceef2;
  --surface: #f7f8fa;
  --surface-2: #e6e9ef;
  --ink: #15161d;
  --ink-2: #3c3e4b;
  --muted: #5d5f6c;
  --hair: rgba(21, 22, 29, 0.12);
  --hair-2: rgba(21, 22, 29, 0.26);
  --gold: #a47718;
  --gold-ink: #7f5c10;
  --logos: #2f5d96;
  --eros: #a34651;
  --depth: #5a4bb0;
  --underworld: #a64b14;
  --path: #8a6414;
  --evi-e: #02553f;
  --evi-r: #057558;
  --evi-c: #199d78;
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --sj: #15161d;
  --grid: #e1e4ea;
  --axis: #c6cad3;
  --band: rgba(21, 22, 29, 0.025);
  --jband: rgba(164, 119, 24, 0.09);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wrap { max-width: 1380px; margin: 0 auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Masthead ── */
.mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 40px;
  align-items: end;
  padding-block: 22px 16px;
}
.eyebrow {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0;
}
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  letter-spacing: 0.035em;
  line-height: 1.02;
  margin: 0.14em 0 0.22em;
  text-wrap: balance;
}
h1 .yoke { color: var(--gold); font-weight: 500; letter-spacing: 0; padding: 0 0.08em; }
.lede {
  margin: 0;
  max-width: 66ch;
  font-size: 1.06rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-2);
  text-wrap: pretty;
}
.facts {
  margin: 10px 0 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.facts b { color: var(--ink); font-weight: 600; }
.secnav { display: flex; flex-wrap: wrap; gap: 2px 18px; justify-content: flex-end; }
.secnav a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
@media (hover: hover) { .secnav a:hover { color: var(--gold-ink); border-bottom-color: var(--gold); } }
/* page tools beside the section links: search, the theme switch, and Install when the browser offers it */
.mast-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 18px; }
.mast-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; padding-left: 18px; border-left: 1px solid var(--hair-2); }
.navbtn {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 6px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.navbtn svg { flex: none; }
@media (hover: hover) { .navbtn:hover { color: var(--gold-ink); border-bottom-color: var(--gold); } }
.kbd { font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 16px; padding: 0 5px; border: 1px solid var(--hair-2); border-radius: 3px; color: var(--muted); }
@media (pointer: coarse) { .kbd { display: none; } }
.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--logos), var(--gold) 50%, var(--eros));
  opacity: 0.55;
  margin-bottom: 22px;
}

/* ── Section heads ── */
section { scroll-margin-top: 16px; }
.sec { padding-block: 10px 56px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 18px; max-width: 78ch; }
.sec-kicker {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.sec-head p { margin: 4px 0 0; color: var(--ink-2); max-width: 70ch; text-wrap: pretty; }

/* ── Buttons & chips (UI) ── */
.btn, .chip, .seg button, .tbtn {
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.2;
  border: 1px solid var(--hair-2);
  background: transparent;
  color: var(--ink);
  border-radius: 3px;
  padding: 7px 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
/* hover styles apply only where the pointer can hover, so on a phone a tapped button never stays lit */
@media (hover: hover) { .btn:hover, .chip:hover, .seg button:hover, .tbtn:hover { border-color: var(--gold); background: var(--surface-2); } }
.tbtn[aria-pressed="true"], .seg button[aria-pressed="true"], .chip[aria-pressed="true"] {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--ink);
}
.btn.primary { border-color: var(--gold); color: var(--gold-ink); }
.btn.icon { padding: 6px 8px; }
.btn[aria-pressed="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
/* Listen: a faint wash on the sentence being read and a stronger one on the word. Browsers without the Highlight API tint
   the whole passage instead (.speaking). */
::highlight(say-line) { background-color: color-mix(in srgb, var(--depth) 13%, transparent); }
::highlight(say-word) { background-color: color-mix(in srgb, var(--depth) 36%, transparent); }
.speaking { border-radius: 3px; background: color-mix(in srgb, var(--depth) 15%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--depth) 15%, transparent); transition: background-color 0.3s, box-shadow 0.3s; }
.linkbtn {
  font-family: var(--font-ui);
  font-size: 13.5px;
  background: none;
  border: 0;
  padding: 2px 0;
  color: var(--gold-ink);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent);
  text-underline-offset: 3px;
}
@media (hover: hover) { .linkbtn:hover { text-decoration-color: var(--gold); } }
.xref {
  font: inherit;
  color: var(--gold-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--gold) 70%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
@media (hover: hover) { .xref:hover { text-decoration-style: solid; text-decoration-color: var(--gold); } }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--muted); }
.g-center .dot, .dot.g-center { background: var(--gold); }
.dot.g-logos { background: var(--logos); }
.dot.g-eros { background: var(--eros); }
.dot.g-depth { background: var(--depth); }
.dot.g-underworld { background: var(--underworld); }
.dot.g-path { background: var(--path); }
.dot.g-hidden { background: transparent; border: 1.5px solid var(--gold); }
.dot.g-key { background: var(--muted); }

/* ── Map ── */
/* Phones: how to read the map, above the toolbar (the reading panel that carries it on wide screens is hidden there) */
.map-intro { display: none; color: var(--ink-2); }
.map-intro > * + * { margin-top: 10px; }
.howto { background: var(--surface); border: 1px solid var(--hair); border-radius: 5px; }
.howto summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-family: var(--font-ui); font-size: 14px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink); }
.howto summary::-webkit-details-marker { display: none; }
.howto summary::after { content: "▾"; color: var(--muted); transition: transform 0.2s ease; }
.howto[open] summary::after { transform: rotate(180deg); }
.howto-body { padding: 0 14px 14px; }
.howto ol { margin: 0 0 12px; padding-left: 1.2em; font-size: 15.5px; line-height: 1.5; }
.howto li { margin-bottom: 0.4em; }
.howto li b { font-weight: 500; color: var(--ink); }
.map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
  gap: 28px;
  align-items: start;
}
.plate { min-width: 0; display: grid; gap: 14px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.tgroup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tlabel { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.ak { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0; }
/* The Layers menu. It opens in the browser's top layer, under its button (script.js places it); closed, the browser hides it.
   Where there are no popovers, the toggles sit in the toolbar as before (.inline). */
.caret { font-size: 11px; color: var(--muted); }
.layers {
  position: fixed;
  inset: auto;
  margin: 0;
  max-width: min(calc(100vw - 16px), 460px);
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 12px 14px 14px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hair-2);
  border-radius: 6px;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.55);
}
.layers > * + * { margin-top: 10px; }
.layers-h { margin: 0; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.layers.inline { display: contents; }
.poster {
  position: relative;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #07080c;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--hair);
  aspect-ratio: 1 / 1;
  max-width: 100%;
  touch-action: manipulation;
}
/* zooming: the image and both overlays move as one layer, anchored at its top left; the controls sit in the corner */
.zoom { position: absolute; inset: 0; transform-origin: 0 0; }
.zoom.gliding { transition: transform 0.6s cubic-bezier(.3,.7,.2,1); }
.poster.zoomed .zoom { cursor: grab; }
.poster.panning .zoom, .poster.panning #ov .hit { cursor: grabbing; }
.zoom-ctl { position: absolute; z-index: 4; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 5px; opacity: 0.85; transition: opacity 0.3s; }
.zoom-ctl:hover, .zoom-ctl:focus-within { opacity: 1; }
.zoom-ctl button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(246, 217, 149, 0.45); border-radius: 4px; background: rgba(9, 10, 16, 0.88); color: var(--ov-ink); cursor: pointer; transition: border-color 0.15s, opacity 0.15s; }
@media (hover: hover) { .zoom-ctl button:hover:not(:disabled) { border-color: var(--ov-gold); } }
.zoom-ctl button:disabled { opacity: 0.4; cursor: default; }
/* on a phone the controls take a row and show only what works now, so the whole poster has a single + over it */
@media (max-width: 899px) {
  .zoom-ctl { flex-direction: row; top: 8px; right: 8px; gap: 4px; }
  .zoom-ctl button { width: 30px; height: 30px; }
  .zoom-ctl button:disabled, .zoom-ctl [data-zoom="region"] { display: none; }
}
.poster.morphing .zoom-ctl { opacity: 0; pointer-events: none; }
html.presenting.idle .zoom-ctl { opacity: 0; pointer-events: none; }
/* the poster a little muted (8% less saturated); the blur(0) keeps the fade-in from its loading state smooth */
.poster img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(0) saturate(0.92); }
.poster img.loading { filter: blur(6px) saturate(0.6); transform: scale(1.01); }
.poster img { transition: filter 0.9s ease, transform 0.9s ease; }
#ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#ov .dim { fill: var(--ov-scrim); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
#ov.active .dim { opacity: 1; }
/* the half-color copy of the poster outside the lit regions, fading with the dimming */
#ov .desat { opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
#ov.active .desat { opacity: 1; }
#ov .hit { cursor: pointer; outline: none; }
#ov .hit path { fill: rgba(0, 0, 0, 0); stroke: none; pointer-events: all; }
#ov .hit.off { pointer-events: none; }
#ov .regions path { fill: none; stroke: var(--ov-gold); stroke-width: 2; opacity: 0.5; stroke-dasharray: 2 7; stroke-linecap: round; pointer-events: none; }
#ov .regions { opacity: 0; transition: opacity 0.3s; }
#ov .regions.on { opacity: 1; }
#ov .shimmer path { fill: none; stroke: var(--ov-gold); stroke-width: 3; opacity: 0; pointer-events: none; animation: shimmer 1.6s ease forwards; }
@keyframes shimmer { 0% { opacity: 0; } 35% { opacity: 0.85; } 100% { opacity: 0; } }
#ov .ol { fill: none; stroke: var(--ov-gold); stroke-width: 3.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.65s cubic-bezier(.4,.1,.2,1) forwards; pointer-events: none; }
#ov .ol.minor { stroke-width: 2; opacity: 0.6; }
#ov .halo { fill: none; stroke: rgb(var(--ov-glow)); stroke-width: 16; opacity: 0; filter: url(#soft); animation: halo 0.6s ease forwards; pointer-events: none; }
@keyframes halo { to { opacity: 0.5; } }
#ov .edge { fill: none; stroke: var(--ov-gold); stroke-width: 3.2; stroke-linecap: round; pointer-events: none; }
#ov .edge.p, #ov .edge.m { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.75s cubic-bezier(.4,.1,.2,1) forwards; }
#ov .edge.s { stroke-dasharray: 0 13; stroke-width: 5; opacity: 0; animation: fadein 0.45s ease forwards, march 1.3s linear infinite; }
#ov .edge-bed { fill: none; stroke: rgba(3, 4, 8, 0.6); stroke-width: 9; stroke-linecap: round; pointer-events: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.75s cubic-bezier(.4,.1,.2,1) forwards; }
#ov .port { fill: var(--ov-gold); stroke: rgba(3, 4, 8, 0.7); stroke-width: 2; pointer-events: none; opacity: 0; animation: fadein 0.3s ease forwards; }
#ov .all-edges .edge-bed { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
#ov .all-edges .port { animation: none; opacity: 1; }
#ov .ahead { fill: var(--ov-gold); opacity: 0; animation: fadein 0.25s ease 0.6s forwards; pointer-events: none; }
#ov .pin { fill: var(--ov-gold); pointer-events: none; }
#ov .pin-halo { fill: rgb(var(--ov-glow)); opacity: 0.35; filter: url(#soft); pointer-events: none; }
#ov .particle { fill: #fff8e6; opacity: 0; animation: fadein 0.4s ease 0.7s forwards; pointer-events: none; }
#ov .all-edges { opacity: 0; transition: opacity 0.3s; pointer-events: none; }
#ov .all-edges.on { opacity: 0.7; }
#ov.active .all-edges.on { opacity: 0.22; }
#ov .all-edges .edge { animation: none; stroke-dashoffset: 0; opacity: 1; }
#ov .all-edges .edge.p, #ov .all-edges .edge.m { stroke-dasharray: none; }
#ov .all-edges .ahead { animation: none; opacity: 1; }
#ov .spark { fill: var(--ov-gold); pointer-events: none; transform-box: fill-box; transform-origin: center; animation: twinkle 2.8s ease-in-out infinite; }
#ov .sparks { transition: opacity 0.3s; }
/* the arrow key the page draws in the poster's lower right corner, in the poster's colors whatever the page's theme */
#ov .pkey { pointer-events: none; }
#ov .pkey-box { fill: rgba(8, 8, 12, 0.84); stroke: rgba(216, 178, 90, 0.85); stroke-width: 1.3; }
#ov .pkey-line { fill: none; stroke: var(--ov-gold); stroke-width: 2.4; stroke-linecap: round; }
#ov .pkey-line.s { stroke-width: 3.4; stroke-dasharray: 0 6.4; }
#ov .pkey-head { fill: var(--ov-gold); }
#ov .pkey-text { font-family: var(--font-body); font-size: 12.5px; fill: var(--ov-ink); }
#ov .sparks.off { opacity: 0; }
@keyframes twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes march { to { stroke-dashoffset: -26; } }
@keyframes fadein { to { opacity: 1; } }

.tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  max-width: 260px;
  padding: 9px 12px 10px;
  border-radius: 4px;
  background: rgba(9, 10, 16, 0.92);
  border: 1px solid rgba(246, 217, 149, 0.4);
  color: var(--ov-ink);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
}
.tip b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; color: var(--ov-gold); }
.tip span { display: block; color: #d9d2c3; }
.tip i { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #a39d90; }

/* Region index under the poster */
.index { display: grid; gap: 10px; }
.idx-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.idx-row h3 { margin: 0; font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.idx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.idx-chips .chip { padding: 5px 9px; font-size: 13px; }
/* what's been read: a tick on each region's chip, a count over the index, and a way back in */
.chip .tick { margin-left: -2px; font-size: 12px; color: var(--gold); }
.idx-progress { margin: 0; font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.g-resume, .map-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
}
.g-resume { margin: 0 0 18px; }
.resume-lbl { flex-basis: 100%; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
.g-resume .count, .map-resume .count { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }

/* Gloss (marginal reading panel) */
.gloss {
  position: sticky;
  top: max(14px, env(safe-area-inset-top, 0px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 5px;
  padding: 22px 22px 18px;
  scrollbar-width: thin;
}
.g-anim { animation: glossIn 0.32s ease; }
@keyframes glossIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.g-eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* the eyebrow shares its row with the reading's share link */
.g-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 14px; }
.g-top .g-eyebrow { min-width: 0; }
.g-share { flex: none; white-space: nowrap; }
/* Listen's player, pinned to the top of the reading panel while Listen is on, where it stays in view even when the panel
   runs below the fold; the voice settings open under its controls. On a phone it is a row under the open reading, with
   the settings opening above. */
.listen-bar {
  position: sticky;
  top: -22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin: -22px -22px 18px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
}
.lb-row { display: flex; align-items: center; gap: 6px; }
.lb-row .btn:disabled { opacity: 0.4; cursor: default; }
.lb-track { flex: 1; min-width: 32px; height: 3px; margin: 0 4px; border-radius: 2px; background: var(--hair-2); overflow: hidden; }
.lb-fill { display: block; width: 0; height: 100%; background: var(--depth); transition: width 0.35s linear; }
.lb-hint { flex: 1; min-width: 0; font-family: var(--font-ui); font-size: 13px; line-height: 1.3; color: var(--muted); }
.listen-bar:not([data-state="idle"]) .lb-hint, .listen-bar[data-state="idle"] .lb-track { display: none; }
.lb-settings { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; margin: 10px 0 2px; padding: 12px 0 0; border-top: 1px solid var(--hair); }
.lb-settings select { width: 100%; }
.lb-lbl { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lb-rates { justify-self: start; }
.lb-rates button { padding: 6px 9px; font-variant-numeric: tabular-nums; }
.lb-rates button + button { margin-left: -1px; }
.lb-note { grid-column: 1 / -1; margin: 0; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.g-title { font-family: var(--font-display); font-weight: 600; font-size: 1.62rem; letter-spacing: 0.035em; line-height: 1.15; margin: 6px 0 14px; text-wrap: balance; }
.plaque {
  position: relative;
  margin: 0 0 16px;
  padding: 13px 16px 12px;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  --cut: 10px;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.plaque::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  clip-path: inherit;
}
.plaque .lbl { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 4px; }
.plaque p { margin: 0.25em 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.plaque p.ph { font-family: var(--font-display); font-size: 13.5px; letter-spacing: 0.06em; color: var(--ink-2); }
.plaque .note { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.g-body p { margin: 0 0 0.85em; font-size: 16.5px; text-wrap: pretty; }
.g-sec { border-top: 1px solid var(--hair); padding-top: 12px; margin-top: 14px; }
.g-sec h4 { margin: 0 0 8px; font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.g-jung { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.g-jung li { font-size: 15px; line-height: 1.45; }
.g-jung b { font-weight: 500; color: var(--ink); }
.g-jung span { color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { font-size: 12.5px; padding: 5px 8px; gap: 6px; text-align: left; }
.chip .yr { color: var(--muted); font-variant-numeric: tabular-nums; }
.hint { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); margin: 7px 0 0; }
.g-reads { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.g-reads li { font-size: 15px; line-height: 1.4; }
.g-reads a { color: var(--ink); text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
@media (hover: hover) { .g-reads a:hover { text-decoration-color: var(--gold); } }
.g-reads .by { display: block; font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }
.g-try p { margin: 0; font-style: italic; color: var(--ink-2); font-size: 15.5px; }
.g-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--hair); }
.g-nav .count { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-intro p { margin: 0 0 0.8em; font-size: 16.5px; }
.g-intro ol { margin: 0 0 1em; padding-left: 1.2em; font-size: 15.5px; color: var(--ink-2); }
.g-intro li { margin-bottom: 0.35em; }
.arrowkeys { display: grid; gap: 6px; margin: 4px 0 14px; font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-2); }
.arrowkeys svg { vertical-align: middle; margin-right: 8px; }

/* Mobile reading sheet */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); animation: fadein 0.2s ease; opacity: 0; animation-fill-mode: forwards; }
.sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--hair-2);
  border-radius: 12px 12px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  animation: sheetUp 0.28s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.sheet-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 6px 18px; border-bottom: 1px solid var(--hair); }
.sheet-bar .grip { width: 38px; height: 4px; border-radius: 4px; background: var(--hair-2); }
.sheet-actions { display: flex; align-items: center; gap: 8px; }
.sheet-body { overflow: auto; padding: 14px 18px 22px; overscroll-behavior: contain; }
.sheet-panel > .listen-bar { flex: none; position: static; margin: 0; padding: 9px 14px 10px; border-top: 1px solid var(--hair); border-bottom: 0; }
.sheet-panel > .listen-bar .lb-settings { order: -1; margin: 0 0 10px; padding: 2px 0 12px; border-top: 0; border-bottom: 1px solid var(--hair); }

/* Phones: the summary sheet. The first tap on a region lights it and slides this up from the bottom, with the map still in
   view above it; it never blocks the page. Swiping it up, or tapping the region again, opens the full reading. While it
   shows, the lit region's glow pulses a few times (.await). */
.peek {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  max-height: 46vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--hair-2);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -14px 34px -16px rgba(0, 0, 0, 0.6);
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  animation: sheetUp 0.28s cubic-bezier(.2,.8,.2,1);
}
.peek-grip { flex: none; width: 38px; height: 4px; margin: 8px auto 6px; border-radius: 4px; background: var(--hair-2); }
.peek-body { min-height: 0; overflow: auto; }
.peek-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.peek-top .g-eyebrow { min-width: 0; }
.peek-x { flex: none; padding: 2px 4px 2px 8px; background: none; border: 0; font-size: 17px; color: var(--muted); cursor: pointer; }
.peek-acts { flex: none; display: flex; align-items: center; gap: 4px; }
/* Listen's play and pause, while it is on */
.peek-say { display: inline-flex; padding: 5px 7px; background: none; border: 1px solid var(--hair-2); border-radius: 3px; color: var(--ink); cursor: pointer; }
.peek-say:disabled { opacity: 0.4; cursor: default; }
.peek-title { margin: 2px 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.035em; line-height: 1.15; }
.peek-title button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.peek-line { margin: 0 0 10px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.peek-links { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; scrollbar-width: none; }
.peek-links .chip { flex: none; }
.peek-open { width: 100%; justify-content: center; }
/* held sideways, the summary keeps to the title and the button */
@media (max-height: 500px) { .peek-line, .peek-links { display: none; } }
@media (min-width: 900px) { .peek { display: none !important; } }
@keyframes awaitPulse { 0%, 100% { opacity: var(--p0); } 50% { opacity: var(--p1); } }
#ov.await .halo { --p0: 0.5; --p1: 0.95; animation: halo 0.6s ease forwards, awaitPulse 1.5s ease-in-out 0.6s 3; }
#depth.await .dn.on .glow { --p0: 0.6; --p1: 1; animation: awaitPulse 1.5s ease-in-out 3; }
#depth.await .selfring.on .glow, #depth.await .other.on .glow { --p0: 0.4; --p1: 0.85; }
#depth.await .band.on .bhi { --p0: 1; --p1: 0.35; animation: awaitPulse 1.5s ease-in-out 3; }

/* ── Lineage chart ── */
.controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; }
.seg button:first-child { border-radius: 3px 0 0 3px; }
.seg button:last-child { border-radius: 0 3px 3px 0; margin-left: -1px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.legend .chip { font-size: 13px; }
.legend .chip[aria-pressed="false"] { opacity: 0.5; }
.legend .chip[aria-pressed="false"] .lg-label { text-decoration: line-through; text-decoration-color: var(--muted); }
.legend .chip[aria-pressed="true"] { background: transparent; border-color: var(--hair-2); }
.sel { font-family: var(--font-ui); font-size: 13px; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
select, input[type="search"] {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hair-2);
  border-radius: 3px;
  padding: 7px 9px;
  min-width: 0;
}
@media (hover: hover) { select:hover, input[type="search"]:hover { border-color: var(--gold); } }
.chart-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 5px;
  overflow: hidden;
}
.chart-scroll { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
#chart { display: block; }
#chart text { font-family: var(--font-ui); }
#chart .lane-label { font-size: 13px; fill: var(--ink-2); }
#chart .lane-label.focus { fill: var(--ink); font-weight: 600; }
#chart .era-label { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--muted); }
#chart .era-label.j { fill: var(--gold-ink); font-weight: 600; }
#chart .tick { font-size: 11.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
#chart .band { fill: var(--band); }
#chart .jband { fill: var(--jband); }
#chart .gridline { stroke: var(--grid); stroke-width: 1; }
#chart .axisline { stroke: var(--axis); stroke-width: 1; }
#chart .lane-bg { fill: transparent; }
#chart .lane.dimmed { opacity: 0.22; }
#chart .th { fill: none; stroke-width: 1.4; opacity: 0.26; transition: opacity 0.2s, stroke-width 0.2s; }
#chart .th.in { stroke: var(--s1); }
#chart .th.out { stroke: var(--s3); }
#chart .th.br { stroke: var(--s2); stroke-dasharray: 4 4; }
#chart.nothreads .th { opacity: 0; }
#chart.focusing .th { opacity: 0.06; }
#chart .th.hl, #chart.nothreads .th.hl { opacity: 0.95; stroke-width: 2.2; }
#chart .mk { cursor: pointer; outline: none; }
#chart .mk .glyph { transition: transform 0.15s ease; transform-box: fill-box; transform-origin: center; }
@media (hover: hover) { #chart .mk:hover .glyph { transform: scale(1.35); } }
#chart .mk.hl .glyph, #chart .mk:focus-visible .glyph { transform: scale(1.35); }
#chart .mk .ring { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; }
#chart .mk.sel .ring { opacity: 1; }
#chart .mk:focus-visible .ring { opacity: 1; stroke-dasharray: 3 2; }
#chart.focusing .mk { opacity: 0.35; }
#chart.focusing .mk.hl, #chart.focusing .mk.sel { opacity: 1; }
#chart .mk .hitc { fill: transparent; }
#chart .mk .ring { transform-box: fill-box; transform-origin: center; }
#chart .mk.pulse .ring { animation: ringPulse 0.9s ease-in-out 3; }
@keyframes ringPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.55); } }
.gl-surface { fill: var(--surface); }
.f-s1 { fill: var(--s1); } .st-s1 { stroke: var(--s1); }
.f-s2 { fill: var(--s2); } .st-s2 { stroke: var(--s2); }
.f-s3 { fill: var(--s3); } .st-s3 { stroke: var(--s3); }
.f-sj { fill: var(--sj); }
.st-surface { stroke: var(--surface); }
.ctip {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  max-width: 280px;
  padding: 8px 11px 9px;
  background: var(--surface-2);
  border: 1px solid var(--hair-2);
  border-radius: 4px;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.5);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}
.ctip .t { font-weight: 600; font-size: 14px; display: block; }
.ctip .w { color: var(--ink-2); display: block; }
.ctip .s { color: var(--muted); display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; }
.chart-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 9px 14px; border-top: 1px solid var(--hair); font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }
.scroll-hint { display: none; }

.lin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.detail {
  position: sticky;
  top: max(14px, env(safe-area-inset-top, 0px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  scrollbar-width: thin;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 32px;
  padding: 18px 20px;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--gold);
  border-radius: 0 5px 5px 0;
  background: var(--surface);
}
.detail .d-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); }
.detail .d-date { font-variant-numeric: tabular-nums; color: var(--muted); }
.detail h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; letter-spacing: 0.03em; line-height: 1.2; margin: 6px 0 2px; text-wrap: balance; }
.detail .d-who { font-family: var(--font-ui); font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.detail p { margin: 0 0 0.7em; font-size: 16px; }
.detail .d-side { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.detail .d-side h4 { margin: 0 0 4px; font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.detail .d-link { font-family: var(--font-ui); font-size: 14px; color: var(--gold-ink); }
.stpill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13px; color: var(--ink); }

.list { display: grid; gap: 22px; }
.list section h3 { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.04em; margin: 0 0 8px; font-weight: 600; }
.ltable { width: 100%; border-collapse: collapse; font-size: 15px; }
.ltable th { text-align: left; font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--hair-2); }
.ltable td { vertical-align: top; padding: 10px; border-bottom: 1px solid var(--hair); }
.ltable td.dt { font-family: var(--font-ui); font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; width: 9.5em; }
.ltable td.src a { font-weight: 500; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
@media (hover: hover) { .ltable td.src a:hover { text-decoration-color: var(--gold); } }
.ltable .w { font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); }
.ltable .x { color: var(--ink-2); margin-top: 3px; font-size: 14.5px; }
.ltable td.lk { width: 34%; font-size: 14.5px; color: var(--ink-2); }
.ltable td.lk .stpill { margin-bottom: 3px; }
.ltable tr.flash td { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { background: color-mix(in srgb, var(--gold) 18%, transparent); } 100% { background: transparent; } }

/* ── Library ── */
.lib-controls { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 0.8fr) auto; gap: 10px 14px; align-items: center; margin-bottom: 10px; }
.lib-controls input[type="search"] { width: 100%; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; align-items: center; }
.count { font-family: var(--font-ui); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 15px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 5px;
  transition: border-color 0.15s, transform 0.15s;
  min-width: 0;
}
@media (hover: hover) { .card:hover { border-color: var(--hair-2); transform: translateY(-2px); } }
.card .c-kind { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
.card h3 { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 1.12rem; line-height: 1.3; text-wrap: balance; }
.card h3 a { text-decoration: none; }
@media (hover: hover) { .card h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } }
.card h3 .ext { font-family: var(--font-ui); font-size: 0.8em; color: var(--muted); }
.card .c-by { font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); }
.card p { margin: 2px 0 4px; font-size: 15px; line-height: 1.5; color: var(--ink-2); flex: 1; }
.card .c-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.card .c-tags button { font-family: var(--font-ui); font-size: 12px; padding: 3px 7px; border: 1px solid var(--hair); border-radius: 3px; background: transparent; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
@media (hover: hover) { .card .c-tags button:hover { border-color: var(--gold); color: var(--ink); } }
.empty { color: var(--muted); font-style: italic; }
.lib-group { display: grid; gap: 12px; margin-bottom: 30px; }
.lib-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; border-bottom: 1px solid var(--hair); padding-bottom: 6px; }
.lib-group-head h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: 0.05em; }
.lib-group-head .count { font-size: 12.5px; }
.lib-more { justify-self: start; }
.card.flash { animation: cardFlash 1.8s ease; }
@keyframes cardFlash { 0%, 45% { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent); } }

/* ── Search: one box over the page for regions, sources and readings ── */
.finder {
  width: min(680px, calc(100vw - 24px));
  max-height: min(78vh, 720px);
  margin: 10vh auto auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}
.finder[open] { display: flex; flex-direction: column; }
.finder::backdrop { background: rgba(3, 4, 8, 0.6); }
.finder-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--hair); }
.finder-bar svg { flex: none; color: var(--muted); }
.finder-bar input { flex: 1; min-width: 0; padding: 6px 2px; border: 0; background: transparent; font-family: var(--font-body); font-size: 18px; outline: none; }
/* the box's own clear button would sit beside Close and read as a second one */
.finder-bar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.finder-list { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 0 10px; }
.fgroup + .fgroup { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hair); }
.fhead { margin: 8px 16px 4px; font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fhead .count { margin-left: 4px; }
.fopt { display: grid; gap: 1px; padding: 7px 16px 7px 14px; border-left: 2px solid transparent; cursor: pointer; }
.fopt[aria-selected="true"] { background: var(--surface-2); border-left-color: var(--gold); }
.fopt .ft { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 1.35; color: var(--ink); }
.fopt .ft svg, .fopt .ft .dot { flex: none; }
.fopt .fs { overflow: hidden; font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.fopt mark { border-radius: 2px; background: color-mix(in srgb, var(--gold) 32%, transparent); color: inherit; }
.fmore, .fnone { margin: 4px 16px; font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
.finder-foot { margin: 0; padding: 8px 16px; border-top: 1px solid var(--hair); font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
@media (pointer: coarse) { .finder-foot { display: none; } }
@media (max-width: 899px) { .finder { margin-top: 12px; max-height: calc(100vh - 24px); } }

/* ── Notes ── */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px 36px; }
.notes-grid h3 { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.05em; margin: 0 0 8px; font-weight: 600; }
.notes-grid p, .notes-grid li { font-size: 15.5px; color: var(--ink-2); }
.notes-grid ul { padding-left: 0; list-style: none; margin: 0; display: grid; gap: 8px; }
.notes-grid li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; align-items: start; }
footer { padding-block: 26px 40px; border-top: 1px solid var(--hair); font-family: var(--font-ui); font-size: 13px; color: var(--muted); }

/* ── Map views: the poster and the depth view; the mythic current ── */
:root { --ov-violet: #c9bdf7; --ov-violet-glow: 201 189 247; }
.vseg button { gap: 7px; }
.vseg .newdot { width: 7px; height: 7px; border-radius: 50%; background: var(--depth); flex: none; }
.plate[data-view="depth"] .poster-only { display: none !important; }
.poster[data-view="depth"] img, .poster[data-view="depth"] #ov { display: none; }
#depth { position: absolute; inset: 0; width: 100%; height: 100%; display: none; overflow: hidden; }
.poster[data-view="depth"] #depth { display: block; }
#depth text { pointer-events: none; }
#depth .d-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; fill: var(--ov-ink); }
#depth .d-sub { font-family: var(--font-body); font-style: italic; fill: #cfc7b6; }
#depth .d-ui { font-family: var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; fill: #a39d90; }
#depth .d-self { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.3em; fill: var(--ov-gold); }
#depth .d-arch { font-family: var(--font-body); font-style: italic; fill: var(--ov-violet); opacity: 0.42; }
#depth .divider { stroke: rgba(236, 230, 217, 0.2); stroke-width: 1.2; stroke-dasharray: 3 8; }
#depth .deco, #depth .dcol, #depth .dedges, #depth .outer, #depth .cur, #depth .spiral, #depth .kroots, #depth .quat, #depth .spec { pointer-events: none; }
#depth .dn { cursor: pointer; outline: none; transition: opacity 0.3s ease; }
#depth .dn .sh { fill: rgba(9, 10, 17, 0.86); stroke: rgba(246, 217, 149, 0.55); stroke-width: 1.6; transition: stroke 0.25s, stroke-width 0.25s; }
#depth .dn.deep .sh { stroke: rgba(201, 189, 247, 0.62); }
#depth .dn .glow { fill: none; stroke: rgb(var(--ov-glow)); stroke-width: 12; opacity: 0; filter: url(#dsoft); transition: opacity 0.3s; }
#depth .dn.deep .glow { stroke: rgb(var(--ov-violet-glow)); }
#depth .dn.on .glow { opacity: 0.6; }
#depth .dn.on .sh, #depth .dn:focus-visible .sh { stroke: var(--ov-gold); stroke-width: 2.8; }
#depth .dn.rel .sh { stroke: var(--ov-gold); }
#depth .dn.deep.rel .sh { stroke: var(--ov-violet); }
#depth.active .dn.dim { opacity: 0.3; }
#depth .band .bhi { fill: rgba(201, 189, 247, 0.13); opacity: 0; transition: opacity 0.3s; }
#depth .band.on .bhi, #depth .band:focus-visible .bhi { opacity: 1; }
#depth .band.rel .bhi { opacity: 0.5; }
#depth .band .bt { transition: opacity 0.3s; }
#depth.active .band.dim { opacity: 1; }
#depth.active .band.dim .bt { opacity: 0.35; }
#depth .selfring .ring { fill: none; stroke: var(--ov-gold); stroke-width: 2.2; opacity: 0.85; }
#depth .selfring .ring2 { fill: none; stroke: var(--ov-gold); stroke-width: 0.9; opacity: 0.35; }
#depth .selfring .glow { stroke-width: 16; }
#depth .selfring.on .glow { opacity: 0.4; }
#depth .selfring.on .ring, #depth .selfring:focus-visible .ring { stroke-width: 3.6; opacity: 1; }
#depth .selfhit { fill: none; stroke: transparent; stroke-width: 34; pointer-events: stroke; }
#depth .col-bed { fill: none; stroke: url(#dcolg); stroke-width: 16; opacity: 0.22; filter: url(#dsoft); }
#depth .col-core { fill: none; stroke: url(#dcolg); stroke-width: 3; opacity: 0.9; stroke-linecap: round; }
#depth .col-head.lo { fill: var(--ov-violet); }
#depth .col-head.hi { fill: var(--ov-gold); }
#depth .dcol { transition: opacity 0.3s; }
#depth .dcol.dim { opacity: 0.3; }
#depth .dcol.on .col-core { stroke-width: 4.4; }
#depth .dcol.on .col-bed { opacity: 0.42; }
#depth .d-edge { fill: none; stroke: var(--ov-gold); stroke-width: 2.4; opacity: 0.55; stroke-linecap: round; transition: opacity 0.3s, stroke-width 0.3s; }
#depth .d-edge.s { stroke-dasharray: 0 10; stroke-width: 4.2; }
#depth .d-head { fill: var(--ov-gold); opacity: 0.65; transition: opacity 0.3s; }
#depth.active .d-edge, #depth.active .d-head { opacity: 0.12; }
#depth.active .d-edge.on, #depth.active .d-head.on { opacity: 1; }
#depth.active .d-edge.on:not(.s) { stroke-width: 3.2; }
#depth .d-outer { fill: none; stroke: var(--ov-violet); stroke-width: 3.6; stroke-dasharray: 0 10; stroke-linecap: round; opacity: 0.6; }
#depth .d-spark { fill: var(--ov-violet); }
#depth .outer { transition: opacity 0.3s; }
#depth.active .outer:not(.on) { opacity: 0.25; }
#depth .outer.on .d-outer { opacity: 1; }
#ov .flash, #depth .flash { fill: none; stroke-width: 10; pointer-events: none; }
#ov .flash, #ov .orb-halo { filter: url(#soft); }
#depth .flash, #depth .orb-halo { filter: url(#dsoft); }
.orb-halo { opacity: 0.9; }
.orb-core { fill: #fff8e6; }
#ov .current { transition: opacity 0.4s ease; pointer-events: none; }
#ov.active .current { opacity: 0; }
#ov .current.off, #depth .cur.off { display: none; }
#ov .cur-static { fill: none; stroke: var(--ov-violet); stroke-width: 3; stroke-dasharray: 0 10; stroke-linecap: round; opacity: 0.5; }
@media (max-width: 560px) {
  #depth .sub { display: none; }
  #depth .nt, .morph .nt { font-size: calc(var(--fs) * var(--ms, 1.1)); transform: translateY(var(--dy)); }
}
/* the morph between the views: both stay visible while the names travel, drawn as the depth view draws them */
.poster.morphing img, .poster.morphing #ov, .poster.morphing #depth { display: block; }
.poster.morphing > * { pointer-events: none; }
.morph { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.morph text { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; fill: var(--ov-ink); paint-order: stroke; stroke: rgba(7, 8, 12, 0.8); stroke-width: 6px; stroke-linejoin: round; }
.morph .m-self { letter-spacing: 0.3em; fill: var(--ov-gold); }
.morph .m-ring { fill: none; stroke: var(--ov-gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.g-def { margin: 0 0 16px; padding: 10px 14px; border-left: 2px solid var(--depth); background: color-mix(in srgb, var(--depth) 9%, transparent); }
.g-def .lbl { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--depth); margin-bottom: 3px; }
.g-def p { margin: 0; font-size: 16px; line-height: 1.5; }
.chip .vtag { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--depth); }
.card .c-tags button.th { border-color: color-mix(in srgb, var(--depth) 55%, transparent); color: var(--depth); }
.dot.g-relation { background: var(--ink-2); }

/* ── Depth view additions: the cultural layer, dreams, another person ── */
.plate:not([data-view="depth"]) .depth-only { display: none !important; }
#depth .darr { fill: none; stroke: var(--ov-violet); stroke-width: 2.2; stroke-linecap: round; opacity: 0.85; }
#depth .darr-h { fill: var(--ov-violet); opacity: 0.85; }
#depth .other { cursor: pointer; outline: none; transition: opacity 0.3s ease; }
#depth .other .ofill { fill: rgba(246, 217, 149, 0.03); }
#depth .other .ring { fill: none; stroke: var(--ov-gold); stroke-width: 1.8; opacity: 0.6; transition: stroke-width 0.25s, opacity 0.25s; }
#depth .other .ring2 { fill: none; stroke: var(--ov-gold); stroke-width: 0.8; opacity: 0.25; }
#depth .other .glow { fill: none; stroke: rgb(var(--ov-glow)); stroke-width: 14; opacity: 0; filter: url(#dsoft); transition: opacity 0.3s; }
#depth .other.on .glow { opacity: 0.4; }
#depth .other.on .ring, #depth .other:focus-visible .ring { stroke-width: 3.2; opacity: 1; }
#depth .other.rel .ring { opacity: 0.95; }
#depth .d-oth { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.3em; fill: var(--ov-gold); }
@media (max-width: 560px) {
  #depth .d-oth { font-size: 27px; letter-spacing: 0.14em; }
}

/* ── Depth view, third round: the Self's center and axis, complexes, the unus mundus, the relationship square, the
   spectrum and the individuation spiral ── */
/* the layers' titles get a dark edge, so the complexes' threads can pass behind them */
#depth .band .d-title { paint-order: stroke; stroke: rgba(12, 13, 21, 0.85); stroke-width: 5px; stroke-linejoin: round; }
#depth .center .c-halo { fill: rgba(246, 217, 149, 0.07); stroke: var(--ov-gold); stroke-width: 1; opacity: 0.55; transition: opacity 0.3s, stroke-width 0.3s; }
#depth .center .c-star { fill: var(--ov-gold); }
#depth .center .c-hit { fill: transparent; pointer-events: all; }
#depth .selfring.on .c-halo, #depth .selfring:focus-visible .c-halo { opacity: 1; stroke-width: 2.2; }
/* the center's name shows while the Self is chosen; the rest of the time the spiral's last loop runs where it stands */
#depth .center .c-lbl { opacity: 0; transition: opacity 0.3s; }
#depth .selfring.on .c-lbl { opacity: 1; }
#depth .d-edge.axis.on, #depth .d-head.axis.on { opacity: 1; }
#depth .d-edge.axis.on { stroke-width: 3.2; }
#depth .cplx .chit { fill: transparent; }
#depth .cplx .knot { fill: none; stroke: var(--ov-violet); stroke-width: 2.1; opacity: 0.85; transition: stroke 0.25s, stroke-width 0.25s; }
#depth .cplx.on .knot, #depth .cplx:focus-visible .knot { stroke: var(--ov-gold); stroke-width: 2.8; opacity: 1; }
#depth .cplx.rel .knot { stroke: var(--ov-gold); }
#depth .kroots { transition: opacity 0.3s; }
#depth .k-thread { fill: none; stroke: var(--ov-violet); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; opacity: 0.32; transition: opacity 0.3s, stroke-width 0.3s; }
#depth .k-core { fill: var(--ov-violet); opacity: 0.45; transition: opacity 0.3s; }
#depth .kroots.on .k-thread { opacity: 0.95; stroke-width: 2.2; }
#depth .kroots.on .k-core { opacity: 1; }
#depth.active .kroots:not(.on) { opacity: 0.35; }
#depth .um { cursor: pointer; outline: none; }
#depth .um .umhit { fill: transparent; }
#depth .um.on .d-title, #depth .um:focus-visible .d-title { fill: var(--ov-gold); }
#depth .theirs { opacity: 0; transition: opacity 0.35s; }
#depth.quat .theirs { opacity: 1; }
#depth .theirs .t-sh { fill: rgba(9, 10, 17, 0.86); stroke: var(--ov-gold); stroke-width: 1.4; }
#depth .quat { opacity: 0; transition: opacity 0.35s; }
#depth .quat.on { opacity: 1; }
#depth .q-line { fill: none; stroke: var(--ov-gold); stroke-width: 2; stroke-linecap: round; opacity: 0.9; }
#depth .q-head { fill: var(--ov-gold); }
#depth .spec, #depth .spiral { display: none; }
#depth .spec.on, #depth .spiral.on { display: inline; }
#depth .spec-arc { fill: none; stroke: url(#dspec); stroke-width: 6; stroke-linecap: round; opacity: 0.85; }
#depth .spec-end { fill: none; stroke-width: 4; stroke-dasharray: 0 9; stroke-linecap: round; opacity: 0.5; }
#depth .spec-end.lo { stroke: #c0392b; }
#depth .spec-end.hi { stroke: #a77be6; }
#depth .spec-lbl { fill: #cfc7b6; }
#depth .spec-lbl.dim { opacity: 0.7; }
/* the spiral is drawn in the depth view's violet, so it stands apart from the gold threads it winds among */
#depth .sp-line { fill: none; stroke: var(--ov-violet); stroke-width: 3.2; stroke-dasharray: 0 9; stroke-linecap: round; opacity: 0.8; }
#depth .spiral.walking .sp-line { opacity: 0.35; }
#depth .sp-lit { fill: none; stroke: var(--ov-violet); stroke-width: 3.2; stroke-linecap: round; opacity: 0.95; }
.quat-fig svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 2px 0 8px; }
.quat-fig .qf-box { fill: color-mix(in srgb, var(--gold-ink) 7%, transparent); stroke: var(--gold-ink); stroke-width: 1.2; }
.quat-fig .qf-l { stroke: var(--gold-ink); stroke-width: 1.4; opacity: 0.75; }
.quat-fig .qf-t { font-family: var(--font-ui); font-size: 11.5px; fill: var(--ink-2); text-anchor: middle; }
.quat-fig .qf-c { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--gold-ink); text-anchor: middle; }
.walk-banner { margin: 0 0 14px; padding: 10px 14px; border-left: 2px solid var(--gold-ink); background: color-mix(in srgb, var(--gold-ink) 8%, transparent); }
.walk-banner .wb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.walk-banner .wb-k { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.walk-banner .wb-t { margin: 4px 0 2px; font-family: var(--font-display); font-size: 18px; }
.walk-banner .wb-l { margin: 0; font-size: 15.5px; line-height: 1.45; }

/* ── Evidence lens: each depth region tinted by how current research treats it ── */
#depth .evt { fill: var(--evc); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
#depth.ev .evt { opacity: var(--eva); }
#depth .evb { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
#depth.ev .evb { opacity: 1; }
#depth .evb-halo { fill: rgba(7, 8, 12, 0.94); stroke: rgba(236, 230, 217, 0.2); stroke-width: 1; }
#depth.ev .dn[data-ev] .sh { stroke: var(--evc); stroke-width: 2; }
#depth.ev .dn.on .sh, #depth.ev .dn:focus-visible .sh { stroke: var(--ov-gold); stroke-width: 2.8; }
#depth.ev .selfring .ring, #depth.ev .other .ring { stroke: var(--evc); }
#depth.ev .selfring.on .ring, #depth.ev .other.on .ring { stroke: var(--ov-gold); }
#depth.ev:not(.active) .d-edge, #depth.ev:not(.active) .d-head { opacity: 0.2; }
#depth.ev:not(.active) .dcol { opacity: 0.5; }
.evkey { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); margin-top: -4px; }
.evkey[hidden] { display: none; }
.evkey .evk { display: inline-flex; align-items: center; gap: 6px; }
.evkey .evhint { color: var(--muted); }
.glyph-e { flex: none; }
.g-ev .evline { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--font-ui); font-size: 14px; }
.g-ev .evline b { font-weight: 500; color: var(--ink); }
.g-ev p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.g-ev ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.g-ev li { font-family: var(--font-ui); font-size: 13px; }
.g-ev li a { color: var(--ink-2); text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
@media (hover: hover) { .g-ev li a:hover { color: var(--ink); text-decoration-color: var(--evi-r); } }
.g-ev.top { border-top: 0; margin: 0 0 16px; padding: 10px 14px 12px; border-left: 2px solid var(--evi-r); background: color-mix(in srgb, var(--evi-r) 9%, transparent); }
.tip .tev { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: #d9d2c3; }

/* ── Presentation mode: the map and the reading fill the screen, in large type ── */
html.presenting, html.presenting body { overflow: hidden; }
html.presenting body { padding: 0; }
.presenting .mast, .presenting .rule, .presenting #lineage, .presenting #library, .presenting #notes, .presenting footer,
.presenting .map-intro, .presenting .toolbar, .presenting .evkey, .presenting .index { display: none !important; }
.presenting .wrap { max-width: none; }
.presenting #map { padding: 0; }
.presenting .map-grid { height: 100vh; padding: 3vh 3vw; gap: 3vw; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.presenting .plate { display: block; }
.presenting .poster { width: min(94vh, 58vw); }
.presenting .gloss { position: static; max-height: 94vh; padding: 2vh 1vw 2vh 0; border: 0; background: transparent; }
/* the reading, trimmed to what a room can take in: the title, the poster's words, a revised definition, the opening, the practice */
.presenting .gloss .g-sec:not(.g-try), .presenting .gloss .g-nav, .presenting .gloss .g-share, .presenting .gloss .g-body p:nth-child(n+3) { display: none; }
/* the presentation bar carries Listen's Pause instead of the player */
.presenting .listen-bar { display: none; }
.presenting .gloss .g-eyebrow { font-size: clamp(13px, 1vw, 17px); }
.presenting .gloss .g-title { font-size: clamp(2rem, 3.4vw, 3.6rem); margin-bottom: 0.45em; }
.presenting .gloss .plaque p { font-size: clamp(18px, 1.5vw, 26px); }
.presenting .gloss .plaque p.ph { font-size: clamp(14px, 1.15vw, 19px); }
.presenting .gloss .g-def p, .presenting .gloss .g-body p { font-size: clamp(19px, 1.55vw, 28px); line-height: 1.55; }
.presenting .gloss .g-try h4 { font-size: clamp(12px, 0.9vw, 15px); }
.presenting .gloss .g-try p { font-size: clamp(18px, 1.4vw, 25px); }
/* under the poster, clear of the reading */
.present-bar {
  position: fixed;
  left: 3vw;
  bottom: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.6);
  transition: opacity 0.4s ease;
}
.present-bar .pcount { min-width: 5.5em; font-family: var(--font-ui); font-size: 14px; font-variant-numeric: tabular-nums; text-align: center; color: var(--ink-2); }
html.idle .present-bar { opacity: 0; pointer-events: none; }
html.presenting.idle, html.presenting.idle * { cursor: none !important; }
.present-blank { position: fixed; inset: 0; z-index: 70; background: #000; cursor: none; }

/* ── Responsive ── */
@media (max-width: 1180px) {
  .map-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 22px; }
  .lin-grid { grid-template-columns: minmax(0, 1fr); }
  .detail { position: static; max-height: none; overflow: visible; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  body { font-size: 16.5px; }
  .mast { grid-template-columns: minmax(0, 1fr); }
  .secnav, .mast-side { justify-content: flex-start; }
  .mast-tools { padding-left: 0; border-left: 0; }
  .map-grid { grid-template-columns: minmax(0, 1fr); }
  .gloss { display: none; }
  .map-intro { display: block; }
  #presentBtn { display: none; }
  .idx-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .detail { grid-template-columns: minmax(0, 1fr); }
  .lib-controls { grid-template-columns: minmax(0, 1fr); }
  .scroll-hint { display: inline; }
  .ltable thead { display: none; }
  .ltable, .ltable tbody, .ltable tr, .ltable td { display: block; width: auto; }
  .ltable tr { border-bottom: 1px solid var(--hair); padding: 10px 0; }
  .ltable td { border: 0; padding: 2px 0; }
  .ltable td.lk { width: auto; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; }
  #ov .edge.s { opacity: 1; }
}
@media (forced-colors: active) {
  #ov .ol, #ov .edge { stroke: Highlight; }
}