/* The reference site: what a source says in the serif, what the publication
   says about it in the sans; the hub's colours. No fonts are fetched. A bar,
   a map and a neighbourhood are inline SVG coloured from here. */

:root {
  --ground: #f3f5ee;
  --paper: #fbfcf8;
  --ink: #17332b;
  --ink-2: #44594f;
  --ink-3: #5f736b;
  --act: #1f6b55;
  --line: #dce2d6;
  --wash: #e9ede4;
  --marker: #fbf2b4;
  --madder: #b3261e;
  --agree: #2f7d5b;
  --apart: #c0632b;
  --alone: #c9d1c4;
  --k-analysis: #2c5d8f;
  --k-video: #b3261e;
  --k-paper: #1f6b55;
  --k-thread: #6a4fa3;
  --k-article: #8a6d1f;
  --k-topic: #5f736b;
  --k-other: #8c8c8c;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Helvetica Neue", Arial, system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 46rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #121a17;
    --paper: #18221e;
    --ink: #e4ebe5;
    --ink-2: #b8c6bd;
    --ink-3: #8fa198;
    --act: #7fc8ad;
    --line: #2c3a34;
    --wash: #1f2b26;
    --marker: #4a4317;
    --madder: #f08a80;
    --agree: #6fc39b;
    --apart: #e8995f;
    --alone: #3a4a43;
    --k-analysis: #7fa8d6;
    --k-video: #f08a80;
    --k-paper: #7fc8ad;
    --k-thread: #b19ce0;
    --k-article: #d6b566;
    --k-topic: #9fb1a8;
    --k-other: #a0a0a0;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
}

a { color: var(--act); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--act); outline-offset: 3px; }
code { font-size: 0.85em; user-select: all; }
[hidden] { display: none !important; }

.masthead, main, .colophon {
  max-width: 76rem;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.masthead { padding-top: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); display: flex;
  flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; }
.masthead > a { color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: 0.02em; }
.masthead .tools { font-size: 0.9rem; color: var(--ink-3); }

main { padding-top: 28px; padding-bottom: 48px; }
main > header, .front, .issue, .item > header, .item > .fallback, .terms, .notice, .charter, .item > .lead,
.item > .correction, .item > .ai, .item > .placed, .relations, .aliases, .original, .item > .compare > .looked {
  max-width: var(--measure);
}

h1 { font-family: var(--serif); font-size: clamp(1.75rem, 5vw, 2.4rem); line-height: 1.15; margin: 0 0 12px; }
h2 { font-size: 1.15rem; margin: 32px 0 10px; }
h3 { font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; margin: 8px 0 6px; }
h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 14px 0 6px; }

.dek { font-size: 1.1rem; color: var(--ink-2); margin: 0 0 16px; }
.meta { color: var(--ink-3); font-size: 0.875rem; margin: 0 0 4px; }

/* --- the front, its browse bar and its sections */

.browse { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 0.9rem;
  padding: 10px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.browse a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.browse a:hover { color: var(--act); border-color: var(--act); }
.find { display: flex; gap: 6px; flex: 1 1 18rem; max-width: 28rem; }
.find input { flex: 1; min-width: 0; font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); }
.find button, button.play, .kinds button, .tabbar button { font: inherit; font-size: 0.875rem; padding: 6px 12px;
  border-radius: 8px; border: 1px solid var(--act); background: var(--paper); color: var(--act); cursor: pointer; }
.find button { background: var(--act); color: var(--paper); }

.issue-block { padding: 14px 0 8px; border-top: 1px solid var(--line); }
.issue-block h2 { margin: 0 0 2px; font-family: var(--serif); font-size: 1.4rem; }
.issue-block h2 a { color: var(--ink); }
.section { margin: 18px 0 8px; }
.section > h2, .section > h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3); margin: 0 0 10px; }
.section.breaking .card { border-color: var(--madder); }
.section.prime .cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.section.prime .card h3, .section.prime .card h4 { font-size: 1.5rem; }
@media (min-width: 48rem) {
  /* a lead alone: its picture beside its words */
  .section.prime .card:only-child { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 24px; align-content: start; }
  .section.prime .card:only-child > a { display: contents; }
  .section.prime .card:only-child > a > figure { grid-column: 1; grid-row: 1 / span 8; margin: 0; }
  .section.prime .card:only-child > :not(a), .section.prime .card:only-child > a > :not(figure) { grid-column: 2; }
  .section.prime .card:only-child h3, .section.prime .card:only-child h4 { font-size: 1.9rem; }
}
.headlines { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.headlines li { padding: 6px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); }
.headlines .dek { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-3); }
.headlines .kind .chip { margin-left: 4px; }
.popular { padding-left: 1.4em; max-width: var(--measure); font-family: var(--serif); }
.popular li { padding: 4px 0; }
.popular .count { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-3); }

.charter { margin-top: 40px; padding: 18px 20px; background: var(--wash); border-radius: 12px; }
.charter h2 { margin-top: 0; }

/* --- cards */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 16px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; }
.card a { color: inherit; text-decoration: none; }
.card a:hover h3, .card a:hover h4 { text-decoration: underline; }
.card h3, .card h4 { margin: 6px 0 2px; }
.card h4 { font-family: var(--serif); font-size: 1.15rem; line-height: 1.25; text-transform: none; letter-spacing: 0;
  color: var(--ink); }
.card .dek { font-size: 0.95rem; margin: 0; }
.card.node .meta { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.06em; margin: 0; }
.card .standing { margin-top: auto; }

.strip { list-style: none; padding: 0; margin: 2px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.strip li { position: relative; }
.strip figure { margin: 0; }
.strip img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.strip .at { position: absolute; right: 4px; bottom: 4px; font-size: 0.7rem; font-weight: 600; padding: 0 4px;
  border-radius: 4px; background: rgb(0 0 0 / 0.7); color: #fff; }
.strip .figure .at { background: var(--act); }

.chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0; }
.chip { font-family: var(--sans); font-size: 0.72rem; line-height: 1.5; padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--paper); white-space: nowrap; }
.chip.kind { color: var(--paper); border-color: transparent; background: var(--k-other); font-weight: 600; }
.chip.kind-analysis { background: var(--k-analysis); }
.chip.kind-video { background: var(--k-video); }
.chip.kind-paper { background: var(--k-paper); }
.chip.kind-thread { background: var(--k-thread); }
.chip.kind-article { background: var(--k-article); }
.chip.kind-topic { background: var(--k-topic); }
.chip.witnesses { border-color: var(--agree); color: var(--agree); }
.chip.tensions { border-color: var(--apart); color: var(--apart); }
.chip.surprising { border-color: var(--madder); color: var(--madder); }
.chip.blindspot { border-style: dashed; border-color: var(--ink-3); }

button.play { font-weight: 600; margin: 6px 0; }
button.play::before { content: "▶ "; }

/* --- bars: how claims stand, where the evidence comes from */

figure.bar { margin: 8px 0; max-width: 28rem; }
figure.bar figcaption { font-size: 0.75rem; color: var(--ink-3); margin: 0 0 3px; text-transform: uppercase;
  letter-spacing: 0.05em; }
figure.bar svg { display: block; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; }
figure.bar .agreed { fill: var(--agree); }
figure.bar .contested { fill: var(--apart); }
figure.bar .alone { fill: var(--alone); }
.kind-analysis { fill: var(--k-analysis); }
.kind-video { fill: var(--k-video); }
.kind-paper { fill: var(--k-paper); }
.kind-thread { fill: var(--k-thread); }
.kind-article { fill: var(--k-article); }
.kind-topic { fill: var(--k-topic); }
.kind-other { fill: var(--k-other); }
.legend { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 12px;
  font-size: 0.75rem; color: var(--ink-3); }
.legend li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 4px; background: var(--alone); vertical-align: 0; }
.legend .agreed::before { background: var(--agree); }
.legend .contested::before { background: var(--apart); }
.legend .kind-analysis::before { background: var(--k-analysis); }
.legend .kind-video::before { background: var(--k-video); }
.legend .kind-paper::before { background: var(--k-paper); }
.legend .kind-thread::before { background: var(--k-thread); }
.legend .kind-article::before { background: var(--k-article); }
.legend .kind-topic::before { background: var(--k-topic); }
.legend .kind-other::before { background: var(--k-other); }
.item > header .standing { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: flex-start; }
.item > header .standing .chips { flex-basis: 100%; }
.item > header figure.bar { flex: 1 1 14rem; }

figure { margin: 20px 0; }
figure img { display: block; width: 100%; height: auto; border-radius: 10px; }
figure.thumb { margin: 0 0 4px; }
figure.thumb img { aspect-ratio: 16 / 9; object-fit: cover; }
figure.lead { max-width: var(--measure); }
figure.anchor { margin: 8px 0; max-width: 18rem; }
figcaption { color: var(--ink-3); font-size: 0.875rem; margin-top: 6px; }

/* --- a source's reader: what it says, and the source itself */

.reader { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 40px; margin-top: 12px; }
@media (min-width: 60rem) {
  .reader { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .reader > .text { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
    padding-right: 6px; }
}
.reader h2 { margin-top: 0; }
.statements { padding-left: 1.4em; margin: 0; }
.statements > li { margin: 0 0 14px; font-family: var(--serif); font-size: 1.05rem; padding: 4px 8px;
  border-radius: 8px; cursor: pointer; }
.statements > li.on { background: var(--wash); }
.statements .label { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.04em; }
.statements .note, .ledger .note { display: block; font-family: var(--sans); font-size: 0.85rem; color: var(--ink-3); }
.statements .pics, .source-entry .pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 8px; }
.statements .pics figure, .source-entry .pics figure { margin: 6px 0; }
.passage { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-3); white-space: nowrap; }
a.passage { margin-left: 4px; text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
.beside { font-family: var(--sans); font-size: 0.85rem; margin: 4px 0 0; }
.beside ul { list-style: none; padding: 0; margin: 0; }
.beside li { margin: 4px 0; }
.beside blockquote { margin: 4px 0 2px; padding-left: 10px; border-left: 3px solid var(--apart);
  font-family: var(--serif); color: var(--ink-2); }
.free { font-size: 0.75rem; color: var(--agree); }
.conflict { font-size: 0.9rem; color: var(--ink-2); margin: 4px 0; }
.both { font-size: 0.9rem; color: var(--ink-2); margin: 4px 0; }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.kinds button.on, .tabbar button[aria-selected="true"] { background: var(--act); color: var(--paper); }
.argument { margin-top: 20px; font-size: 0.95rem; }
.argument summary { cursor: pointer; font-weight: 600; }
.argument ol { padding-left: 1.2em; }
.argument .role { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }

.player { position: relative; margin: 0 0 12px; }
.player figure.lead { margin: 0; }
.player button.play { position: absolute; left: 12px; bottom: 12px; background: var(--act); color: var(--paper); }
.player.playing figure.lead, .player.playing button.play { display: none; }
.screen { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.units { list-style: none; padding: 0; margin: 0; font-family: var(--serif); }
.unit { padding: 4px 8px; border-left: 3px solid transparent; scroll-margin-top: 40vh; }
.unit.lit { background: var(--marker); border-left-color: var(--act); }
.unit .n { font-family: var(--sans); font-size: 0.72rem; color: var(--ink-3); text-decoration: none; margin-right: 4px; }
.unit time { font-family: var(--sans); font-size: 0.75rem; color: var(--act); margin-right: 4px; }
.unit .speaker { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.unit.kind-h .t { font-family: var(--sans); }
.unit figure { margin: 8px 0; max-width: 22rem; }

/* --- a document: its parts, each with what it rests on beside it */

.body { font-family: var(--serif); font-size: 1.125rem; line-height: 1.65; }
.prose, .rail, .reader > *, .item > header { min-width: 0; overflow-wrap: anywhere; }
.prose pre { max-width: 100%; overflow-x: auto; padding: 12px; background: var(--wash);
  border-radius: 8px; overflow-wrap: normal; overscroll-behavior-x: contain; }
.prose pre code { user-select: text; }
.part { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 32px; }
@media (min-width: 60rem) {
  .part { grid-template-columns: minmax(0, var(--measure)) minmax(14rem, 1fr); align-items: start; }
}
.prose h2, .prose h3 { font-family: var(--sans); }
.prose blockquote { margin: 20px 0; padding-left: 16px; border-left: 3px solid var(--line); color: var(--ink-2); }
.prose table { border-collapse: collapse; font-family: var(--sans); font-size: 0.95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.prose img { max-width: 100%; height: auto; }
.rail { font-family: var(--sans); font-size: 0.85rem; border-left: 2px solid var(--line); padding: 4px 0 4px 14px;
  margin: 18px 0; display: flex; flex-direction: column; gap: 8px; }
.rail .xray { margin: 0; color: var(--ink-3); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.rail figure { margin: 0; }
.rail .papers { list-style: none; padding: 0; margin: 0; }
.rail a.open { text-decoration: none; color: inherit; }
figure.clip { margin: 18px 0; font-family: var(--sans); background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; }
figure.clip figure.poster { margin: 0; }
figure.clip.small { margin: 0; padding: 8px; }
figure.clip figcaption { font-size: 0.85rem; }
figure.clip .at { color: var(--act); font-weight: 600; }

a.cite { font-family: var(--sans); font-size: 0.72em; font-weight: 700; text-decoration: none; padding: 2px 6px;
  display: inline-flex; min-width: 32px; min-height: 32px; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--wash); color: var(--act); border: 1px solid var(--line);
  vertical-align: 0.15em; white-space: nowrap; }
a.cite:hover, a.cite.on { background: var(--act); color: var(--paper); border-color: var(--act); }
a.cite.kind-video { color: var(--k-video); }
a.cite.kind-video:hover, a.cite.kind-video.on { background: var(--k-video); color: var(--paper); }
.mark { font-family: var(--sans); font-size: 0.8em; color: var(--act); white-space: nowrap; }
span.mark { color: var(--ink-3); }

section.sources { font-size: 0.925rem; margin-top: 36px; border-top: 1px solid var(--line); max-width: var(--measure); }
section.sources ol { list-style: none; padding: 0; }
.source-entry { margin: 12px 0; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; overflow-wrap: anywhere; scroll-margin-top: 20vh; }
.source-entry:target { border-color: var(--act); }
.source-entry header { font-family: var(--sans); }
.source-entry blockquote.passage { margin: 8px 0; padding: 0; white-space: normal; font-family: var(--serif);
  font-size: 0.95rem; color: var(--ink-2); }
.source-entry .passage p { margin: 2px 0; padding: 2px 6px; border-radius: 4px; }
.source-entry .passage .cited { background: var(--marker); color: var(--ink); }
.source-entry .passage .around { opacity: 0.75; }
.source-entry .passage .n { font-family: var(--sans); font-size: 0.7rem; color: var(--ink-3); }
.source-entry .passage time { font-family: var(--sans); font-size: 0.75rem; color: var(--act); }
.claims { padding-left: 1.2em; font-family: var(--serif); }

.inspector { position: fixed; z-index: 50; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 6px 30px rgb(0 0 0 / 0.18);
  padding: 0; margin: 0; inset: auto 0 0; width: 100%; max-width: none;
  max-height: 85dvh; border-radius: 14px 14px 0 0; overflow: hidden; }
.inspector[open] { display: flex; flex-direction: column; }
.inspector::backdrop { background: rgb(0 0 0 / 0.35); }
.inspector-head { display: flex; flex: 0 0 auto; gap: 12px; align-items: center; justify-content: space-between;
  padding: 8px 16px; border-bottom: 1px solid var(--line); }
.inspector-head h2 { margin: 0; font-size: 1rem; }
.inspector [data-body] { overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom)); min-height: 0; }
.inspector .close { min-height: 44px; min-width: 44px; padding: 8px; font: inherit;
  border: 0; border-radius: 6px; background: var(--wash); color: var(--ink); cursor: pointer; }
@media (max-width: 59.999rem) { body.inspecting { overflow: hidden; } }
@media (min-width: 60rem) {
  .inspector { left: auto; top: 0; bottom: 0; width: min(30rem, 40vw); height: 100dvh;
    max-height: none; border-radius: 0; }
  body.inspecting main { margin-right: min(30rem, 40vw); }
  body.inspecting .part { grid-template-columns: minmax(0, 1fr); }
}
dialog.watch .close { float: right; font-size: 1.4rem; line-height: 1; border: 0; min-width: 44px; min-height: 44px;
  background: transparent; color: var(--ink-3); cursor: pointer; }
.inspector .source-entry { display: block; border: 0; padding: 0; background: transparent; }
.pop { position: absolute; z-index: 30; max-width: min(330px, calc(100vw - 16px)); background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; box-shadow: 0 4px 16px rgb(0 0 0 / 0.15); font-size: 0.85rem; }
.pop p { margin: 2px 0; }
.pop-head { font-weight: 600; }
.pop-quote { font-family: var(--serif); background: var(--marker); padding: 2px 4px; border-radius: 4px; }

dialog.watch { width: min(60rem, 92vw); padding: 12px; border: 0; border-radius: 12px; background: var(--paper);
  color: var(--ink); }
dialog.watch::backdrop { background: rgb(0 0 0 / 0.6); }

/* --- a topic: its sources side by side */

.compare { margin-top: 20px; }
.tabbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tab h2.in-tab { display: none; }
.tab .n { font-size: 0.8rem; color: var(--ink-3); font-weight: 400; }
.pair { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  margin: 0 0 14px; }
.pair h3 { margin-top: 0; font-size: 1.05rem; }
.versus { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: stretch; }
@media (min-width: 46rem) { .versus { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.versus .vs { align-self: center; font-size: 0.75rem; text-transform: uppercase; color: var(--apart);
  letter-spacing: 0.06em; }
.pair.changed .versus { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 46rem) { .pair.changed .versus { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
blockquote.said { margin: 0; padding: 8px 10px; border-left: 3px solid var(--line); background: var(--ground);
  border-radius: 0 8px 8px 0; }
blockquote.said p { margin: 0 0 4px; font-family: var(--serif); }
blockquote.said footer { font-size: 0.8rem; color: var(--ink-3); }
blockquote.said.kind-paper { border-left-color: var(--k-paper); }
blockquote.said.kind-video { border-left-color: var(--k-video); }
blockquote.said.kind-thread { border-left-color: var(--k-thread); }
blockquote.said.kind-article { border-left-color: var(--k-article); }
.groups { padding-left: 1.2em; }
.groups .group { margin: 0 0 14px; }
.take-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 14px; }
.take { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.take h3 { font-size: 1.05rem; }
.take p { font-family: var(--serif); margin: 6px 0; }
dl.stance { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 0.75rem; color: var(--ink-3);
  margin: 6px 0; align-items: center; }
dl.stance dd { margin: 0; }
svg.stance { width: 80px; height: 8px; display: block; }
svg.stance .track { fill: var(--line); }
svg.stance .up { fill: var(--agree); }
svg.stance .down { fill: var(--apart); }

.correction { font-family: var(--sans); font-size: 0.95rem; border-left: 3px solid var(--madder); padding: 6px 12px; margin: 20px 0; }
.fallback { font-size: 0.9rem; color: var(--ink-2); background: var(--wash); border-radius: 8px; padding: 6px 12px; }
.ai { color: var(--ink-3); font-size: 0.85rem; margin-top: 28px; }
.aliases { color: var(--ink-2); }
.original a { font-weight: 600; }
.evidence { background: var(--marker); padding: 2px 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* --- the neighbourhood and the atlas */

.context { margin-top: 36px; border-top: 1px solid var(--line); }
svg.ego { display: block; width: 100%; max-width: 40rem; height: auto; margin: 0 0 12px; }
.names { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-2); }
.ties line { stroke: var(--line); stroke-width: 1.2; }
.ties .tie-cites { stroke: var(--k-analysis); stroke-opacity: 0.45; }
.ties .tie-about { stroke-dasharray: 3 3; }
.node circle { stroke: var(--paper); stroke-width: 1.5; }
.node text { font-size: 11px; fill: var(--ink-2); font-family: var(--sans); paint-order: stroke;
  stroke: var(--ground); stroke-width: 3px; }
.node a { cursor: pointer; }
.node a:hover circle, .node a:focus circle { stroke: var(--ink); stroke-width: 2; }
.atlas { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
svg.atlas-map { display: block; width: 100%; height: min(78vh, 52rem); touch-action: none; cursor: grab; }
svg.atlas-map .node.ring-1 text, svg.atlas-map .node.ring-2 text { display: none; }
svg.atlas-map .node:hover text, svg.atlas-map .node.found text { display: inline; }
svg.atlas-map .off { display: none; }
svg.atlas-map.finding .node:not(.found) { opacity: 0.25; }
svg.atlas-map .node.found circle { stroke: var(--madder); stroke-width: 3; }
.atlas-tools { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 0 0 10px; font-size: 0.875rem; }
.atlas-tools input[type=search] { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); min-width: 16rem; }
.atlas-card { position: absolute; right: 12px; top: 12px; max-width: 20rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 0.875rem;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.12); }
.atlas-card li { list-style: none; }
.atlas-index { columns: 18rem; column-gap: 32px; margin-top: 24px; }
.atlas-group { break-inside: avoid; }
.atlas-group ul { padding-left: 1.1em; margin: 0; }
.atlas-group .dek { display: block; font-size: 0.8rem; color: var(--ink-3); }

/* --- the search */

.search { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; }
@media (min-width: 52rem) { .search { grid-template-columns: 14rem minmax(0, 1fr); } }
.facets { font-size: 0.875rem; }
.facet h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 12px 0 4px; }
.facet ul { list-style: none; padding: 0; margin: 0; }
.facet a { text-decoration: none; color: var(--ink-2); }
.facet .on a { font-weight: 700; color: var(--act); }
.facet .n { color: var(--ink-3); font-size: 0.8rem; }
.hits { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.hit { padding: 10px 0; border-bottom: 1px solid var(--line); }
.hit a { text-decoration: none; color: inherit; }
.hit h3 { margin: 0 0 2px; }
.snippet { font-family: var(--serif); color: var(--ink-2); margin: 4px 0; }
.snippet mark { background: var(--marker); color: var(--ink); border-radius: 3px; padding: 0 2px; }

.ledger { list-style: none; padding: 0; max-width: var(--measure); }
.ledger li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.ledger time { color: var(--ink-3); font-size: 0.875rem; margin-right: 6px; }
.ledger li[data-kind="withdrawal"] strong, .ledger li[data-kind="correction"] strong { color: var(--madder); }
.notice { padding-top: 10vh; }
.relations ul { padding-left: 1.2em; }
.placed { color: var(--ink-3); font-size: 0.875rem; margin-top: 28px; }

.colophon { color: var(--ink-3); font-size: 0.8rem; padding-top: 16px; padding-bottom: 32px; border-top: 1px solid var(--line); }
.colophon p { margin: 0; overflow-wrap: anywhere; }

.plain { max-width: 34rem; padding-top: 18vh; }

.consent { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 1px solid var(--line);
  padding: 10px var(--gutter); font-size: 0.9rem; box-shadow: 0 -2px 10px rgb(0 0 0 / 0.08); }
.consent p { max-width: 46rem; margin: 4px auto; }
.consent button, .terms button { font: inherit; font-size: 0.9rem; padding: 6px 14px; border-radius: 8px;
  border: 1px solid var(--act); background: var(--act); color: var(--paper); cursor: pointer; }
.consent button[data-pith-choice="no"], .terms button { background: transparent; color: var(--act); }
.terms p { max-width: 38rem; }

.playback-settings { position: relative; z-index: 2; width: fit-content; margin: 6px 0;
  font: 0.8rem var(--sans); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; max-width: 100%; }
.playback-settings summary { cursor: pointer; padding: 7px 10px; }
.playback-settings label { display: flex; align-items: center; gap: 7px; padding: 7px 10px; }
.playback-settings small { display: block; padding: 4px 10px 10px; }