/* The Tartary Atlas: warm vellum, iron-gall ink, brass and oxblood.
   Historical images retain their original colours. The legacy --verdigris token
   is retained as an API for the map code; it now means the brass link accent. */

:root {
  --paper: #f1e5c9;
  --panel: #fbf3e1;
  --sunk: #e8d9b9;
  --frame: #e4d2aa;
  --ink: #30271c;
  --ink-2: #514636;
  --ink-3: #6b5b43;
  --rule: #bcaa87;
  --rule-soft: #d9c7a5;
  --verdigris: #79551f;
  --verdigris-soft: #eee0bd;
  --carmine: #843d36;
  --carmine-soft: #efdbca;
  --gamboge: #7d5508;
  --gamboge-soft: #f4ecd8;
  --mark: #fbe29a;
  --header-bg: rgba(241, 229, 201, 0.96);
  --shadow: 0 1px 2px rgba(19, 27, 30, 0.06), 0 10px 28px -14px rgba(19, 27, 30, 0.22);
  --map-water: #d6d7cc;
  --map-land: #e8dcc0;
  --map-coast: #a89879;
  --map-river: #b1b7aa;
  --map-point: #79551f;
  --map-river-point: #99804c;
  --map-capital: #30271c;
  --map-approx: #843d36;
  --map-halo: #fbf3e1;
  --icon-filter: none;
  --pin: #79551f;
  --pin-sight: #843d36;
  --pin-halo: #fffdf6;
  --pin-tip: #30271c;
  --pin-tip-ink: #f1e5c9;
  --stage-shade: rgba(19, 27, 30, 0.34);
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-heading: "IM Fell English", "Newsreader", Georgia, serif;
  --font-mark: "IM Fell English SC", "Newsreader", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: 1.4375rem;
  --step-3: 1.9375rem;
  --step-4: 2.5rem;
  --step-5: clamp(2.2rem, 1.35rem + 3vw, 3.5rem);
  --radius: 2px;
  --radius-l: 2px;
  --gutter: clamp(16px, 3.5vw, 40px);
  --header-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1c1813;
    --panel: #272119;
    --sunk: #17130f;
    --frame: #32291e;
    --ink: #f1e3c7;
    --ink-2: #d5c4a5;
    --ink-3: #b6a284;
    --rule: #5b4a34;
    --rule-soft: #403425;
    --verdigris: #dbb875;
    --verdigris-soft: #3c301f;
    --carmine: #e2a092;
    --carmine-soft: #422821;
    --gamboge: #e3b861;
    --gamboge-soft: #2e2613;
    --mark: #5c4a14;
    --header-bg: rgba(28, 24, 19, 0.96);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -14px rgba(0, 0, 0, 0.75);
    --map-water: #24231d;
    --map-land: #383123;
    --map-coast: #796b51;
    --map-river: #5d6253;
    --map-point: #dbb875;
    --map-river-point: #ab915f;
    --map-capital: #f1e3c7;
    --map-approx: #e2a092;
    --map-halo: #272119;
    --icon-filter: invert(1) hue-rotate(180deg);
    --paper-wash: #1c1813ef;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1c1813;
  --panel: #272119;
  --sunk: #17130f;
  --frame: #32291e;
  --ink: #f1e3c7;
  --ink-2: #d5c4a5;
  --ink-3: #b6a284;
  --rule: #5b4a34;
  --rule-soft: #403425;
  --verdigris: #dbb875;
  --verdigris-soft: #3c301f;
  --carmine: #e2a092;
  --carmine-soft: #422821;
  --gamboge: #e3b861;
  --gamboge-soft: #2e2613;
  --mark: #5c4a14;
  --header-bg: rgba(28, 24, 19, 0.96);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -14px rgba(0, 0, 0, 0.75);
  --map-water: #24231d;
  --map-land: #383123;
  --map-coast: #796b51;
  --map-river: #5d6253;
  --map-point: #dbb875;
  --map-river-point: #ab915f;
  --map-capital: #f1e3c7;
  --map-approx: #e2a092;
  --map-halo: #272119;
  --icon-filter: invert(1) hue-rotate(180deg);
  --paper-wash: #1c1813ef;
    color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  background-image: linear-gradient(var(--paper-wash, #f4eacfbb), var(--paper-wash, #f4eacfbb)), url("home-parchment.webp");
  background-size: auto, 760px 760px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a { color: var(--verdigris); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--verdigris); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { text-wrap: balance; line-height: 1.15; margin: 0; }
h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-4); letter-spacing: -0.012em; }
h2 { font-family: var(--font-body); font-weight: 650; font-size: var(--step-2); }
h3 { font-family: var(--font-body); font-weight: 650; font-size: var(--step-1); }
p { margin: 0; }
.mono, code { font-family: var(--font-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: var(--step--1); }
.eyebrow {
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-3); font-weight: 650;
}
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 8px; top: 8px; background: var(--panel); padding: 10px 14px; z-index: 50; border-radius: var(--radius); }

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
  padding-inline: var(--gutter);
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 28px; min-height: var(--header-h); flex-wrap: wrap; max-width: 1200px; margin-inline: auto; }
.wordmark {
  font-family: var(--font-mark); font-size: 1.32rem; letter-spacing: 0.2em;
  color: var(--ink); text-decoration: none; white-space: nowrap; padding-block: 8px;
}
.wordmark span { letter-spacing: 0.12em; color: var(--ink-3); }
.site-nav { position: relative; display: flex; gap: 2px; flex-wrap: wrap; font-size: 0.9375rem; font-weight: 550; }
.site-nav a { color: var(--ink-2); text-decoration: none; padding: 9px 13px; border-radius: 999px; line-height: 1.2; }
.site-nav a:hover { color: var(--ink); background: var(--sunk); }
.site-nav a[aria-current="page"] { color: var(--panel); background: var(--ink); }

/* Page frame */
.page { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); padding-block: 36px 72px; }
.page-head { display: grid; gap: 12px; margin-bottom: 32px; max-width: 46rem; }
.page-head h1.long { font-size: var(--step-3); line-height: 1.2; }
.crumbs { font-size: var(--step--1); color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { color: var(--ink-2); }
.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 40rem; line-height: 1.5; }
.prose { max-width: 42rem; display: grid; gap: 16px; }
.prose h2 { margin-top: 18px; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.section { margin-top: 44px; display: grid; gap: 16px; }
.section > h2 { padding-bottom: 8px; border-bottom: 1px solid var(--rule); }

.site-footer {
  border-top: 1px solid var(--rule); background: var(--panel);
  padding-inline: var(--gutter); padding-block: 22px 28px;
  font-size: var(--step--1); color: var(--ink-3);
}
.site-footer .inner { max-width: 1200px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer a { color: var(--ink-2); }

/* Chips and badges */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 2px 10px; border-radius: 999px; border: 1px solid var(--rule);
  color: var(--ink-2); background: var(--panel); white-space: nowrap;
}
.chip.ev-claimed { color: var(--carmine); border-color: var(--carmine); background: var(--carmine-soft); }
.chip.ev-firsthand { color: var(--verdigris); border-color: var(--verdigris); }
.chip.prov { color: var(--gamboge); border-color: var(--gamboge); }
/* A rounded pill with an outline is something to press. A label that only says something is a flat tag. */
span.chip { border-color: transparent; border-radius: 6px; background: var(--rule-soft); }
span.chip.ev-firsthand { background: var(--verdigris-soft); }
span.chip.prov { background: var(--gamboge-soft); }
a span.chip, span.chip.big { border-color: var(--rule); border-radius: 999px; background: var(--panel); }
button.chip { font-family: inherit; cursor: pointer; padding-block: 4px; }
button.chip:hover { border-color: var(--verdigris); color: var(--ink); }
button.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.linkbtn { font: inherit; font-weight: 600; color: var(--verdigris); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.linkbtn:hover { text-decoration-thickness: 2px; }
.px-count .linkbtn, .list-count .linkbtn { margin-left: 14px; }
mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
main:focus { outline: none; }
[data-empty] { padding-block: 20px; }
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
.totop {
  position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 15;
  font: inherit; font-size: 0.875rem; font-weight: 600; min-height: 44px; padding: 8px 16px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
}
.totop:hover { border-color: var(--verdigris); color: var(--verdigris); }
.kind {
  display: inline-grid; place-items: center; width: 1.45em; height: 1.45em;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  border: 1px solid var(--ink-3); color: var(--ink-2); border-radius: 2px;
}
.kind.m { border-radius: 50%; }
.rid { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-3); }
a.rid { color: var(--ink-3); }

/* Record list (used on place, people, label pages and the explorer) */
.rlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rlist li { display: grid; grid-template-columns: 6.6rem 1fr; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.rlist .yr { font-family: var(--font-mono); font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; padding-top: 2px; }
.rlist .yr .prec { display: block; color: var(--ink-3); font-size: 0.75rem; }
.rlist .body { min-width: 0; display: grid; gap: 3px; }
.rlist .t { font-weight: 550; }
.rlist .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: var(--step--1); color: var(--ink-3); }

/* Record page */
.record-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.record-grid > * { min-width: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.facts dt { color: var(--ink-3); font-size: var(--step--1); padding-top: 2px; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-l); padding: 20px 22px; display: grid; gap: 12px; }
.panel.how { border-top: 3px solid var(--verdigris); }
.panel.how.claimed { border-top-color: var(--carmine); }
.panel h2 { font-size: var(--step-1); }
.note-list { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; padding: 0; margin: 0; }
.tags a { text-decoration: none; }
.tags .chip:hover { border-color: var(--verdigris); color: var(--ink); }
.basis-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--map-point); flex: none; }
.basis-dot.river { background: var(--map-river-point); }
.basis-dot.capital { background: var(--map-capital); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--map-capital); width: 7px; height: 7px; }
.basis-dot.approx { background: transparent; border: 1.5px dashed var(--map-approx); }
.basis-dot.anchor { background: transparent; border-radius: 0; width: auto; height: auto; font-family: var(--font-display); font-style: italic; color: var(--carmine); font-size: 0.8rem; line-height: 1; }
.basis-dot.anchor::before { content: "Aa"; }
.basis-dot.none { background: transparent; border: 1px solid var(--ink-3); border-radius: 0; transform: rotate(45deg); width: 7px; height: 7px; }

.minimap { width: 100%; height: auto; display: block; background: var(--map-water); border: 1px solid var(--rule); border-radius: var(--radius); }
.minimap .land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 0.6; }
.minimap .pt { fill: var(--map-point); stroke: var(--map-halo); stroke-width: 1.2; }
.minimap .pt.river { fill: var(--map-river-point); }
.minimap .pt.capital { fill: var(--map-capital); }
.minimap .ring { fill: none; stroke: var(--map-capital); stroke-width: 1; }
.minimap .approx { fill: none; stroke: var(--map-approx); stroke-width: 1.6; stroke-dasharray: 3 2.4; }
.minimap .approx-halo { fill: var(--map-approx); opacity: 0.12; }
.minimap .anchor { font-family: var(--font-display); font-style: italic; font-size: 13px; fill: var(--carmine); paint-order: stroke; stroke: var(--map-land); stroke-width: 3px; }
.minimap-cap { font-size: var(--step--1); color: var(--ink-3); margin-top: 6px; }

.thumb { display: block; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.thumb img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; background: var(--rule-soft); }
.thumb .cap { font-size: var(--step--1); color: var(--ink-3); padding: 8px 10px; }
.thumb.broken img { display: none; }
.thumb.broken .cap::before { content: "The image preview could not load here. Open it from the holding library. "; color: var(--ink-2); }

.lineage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lineage-list li { display: grid; gap: 2px; }
.edge-kind { font-size: var(--step--1); color: var(--ink-3); }
.edge-kind.probable { color: var(--gamboge); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); }
table.data { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
table.data th, table.data td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
table.data th { font-weight: 600; color: var(--ink-2); background: var(--paper); position: sticky; top: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
table.data tr:hover td { background: var(--rule-soft); }
.filterbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin-bottom: 14px; }
.filterbar label { display: grid; gap: 6px; font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
input[type="search"], select {
  font: inherit; font-size: var(--step-0); color: var(--ink); background: var(--panel);
  border: 1px solid var(--ink-3); border-radius: var(--radius); padding: 10px 12px; min-width: 0; min-height: 44px;
}
input[type="search"]:hover, select:hover { border-color: var(--ink); }
input[type="search"] { width: min(360px, 100%); }

.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px 28px; }
.cols > section { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.cols li { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; border-bottom: 1px dotted var(--rule); padding-block: 2px; }
.cols li a { min-width: 0; overflow-wrap: anywhere; }
.cols li .n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); }

.banner { border: 1px solid var(--gamboge); background: var(--gamboge-soft); border-radius: var(--radius); padding: 12px 16px; font-size: var(--step--1); color: var(--ink-2); max-width: 78ch; }
.banner strong { color: var(--gamboge); }

/* Figures (timelines, strips, lineage) */
.figure { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-l); padding: 16px 16px 12px; }
.figure .scroll { overflow-x: auto; }
.figure svg { display: block; }
.figure svg.wide { width: 100%; min-width: 820px; height: auto; }
.figure .axis text, .figure .rowlab { fill: var(--ink-2); font-size: 12px; font-family: var(--font-body); }
.figure .axis line, .figure .grid { stroke: var(--rule); stroke-width: 1; }
.figure .axis text.yr { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-3); }
.figure .rowline { stroke: var(--rule-soft); stroke-width: 1; }
.figure .mk { fill: var(--verdigris); stroke: var(--panel); stroke-width: 1.5; }
.figure .mk.w { fill: var(--panel); stroke: var(--verdigris); stroke-width: 1.8; }
.figure a:hover .mk, .figure a:focus .mk { stroke: var(--ink); stroke-width: 2; }
.figure .dim .mk { opacity: 0.22; }
.figure .cursor { stroke: var(--carmine); stroke-width: 1.5; }
.figure .window { fill: var(--carmine); opacity: 0.07; }
.figure .link-v { stroke: var(--rule); stroke-width: 1; }
.fig-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--step--1); color: var(--ink-2); margin-top: 8px; }
.fig-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--verdigris); margin-right: 6px; vertical-align: -1px; }
.fig-legend .sw.w { background: var(--panel); border: 1.8px solid var(--verdigris); }
.fig-legend .ln { display: inline-block; width: 26px; border-top: 2px solid var(--ink-2); margin-right: 6px; vertical-align: 3px; }
.fig-legend .ln.dash { border-top-style: dashed; border-color: var(--gamboge); }

.lin-node circle { fill: var(--panel); stroke: var(--verdigris); stroke-width: 2; }
.lin-node.w circle { stroke: var(--ink-2); }
.lin-node text { fill: var(--ink); font-size: 12px; font-family: var(--font-body); paint-order: stroke; stroke: var(--panel); stroke-width: 3.5px; stroke-linejoin: round; }
.lin-node text.id { fill: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; }
.lin-node:hover circle, .lin-node:focus circle { fill: var(--verdigris-soft); }
.lin-edge { fill: none; stroke: var(--ink-2); stroke-width: 1.4; }
.lin-edge.probable { stroke: var(--gamboge); stroke-dasharray: 5 4; }
.arrowhead { fill: var(--ink-2); }
.arrowhead.probable { fill: var(--gamboge); }

.slider-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-block: 10px 4px; }
.slider-row input[type="range"] { flex: 1 1 260px; accent-color: var(--carmine); }
.slider-row output { font-family: var(--font-mono); font-size: var(--step-1); min-width: 4.5ch; }

/* Explorer */
.explorer { display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px)); min-height: 520px; }
.explorer .mapwrap { position: relative; min-width: 0; background: var(--map-water); }
.explorer #ta-map { position: absolute; inset: 0; }
.explorer .side { border-left: 1px solid var(--rule); background: var(--panel); overflow-y: auto; min-width: 0; }
.side-sec { padding: 16px 20px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; }
.side-sec h2 { font-size: var(--step-0); }
.side .intro h1 { font-size: 1.7rem; }
.side .intro p { color: var(--ink-2); font-size: var(--step--1); }
.stats { display: flex; gap: 18px; font-size: var(--step--1); color: var(--ink-3); flex-wrap: wrap; }
.stats b { display: block; font-family: var(--font-mono); font-size: var(--step-2); color: var(--ink); font-weight: 500; }
.seg { justify-self: start; display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.seg button { font: inherit; font-size: var(--step--1); padding: 9px 14px; border: 0; background: var(--panel); color: var(--ink-2); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.range { display: grid; gap: 4px; }
.range .hist { width: 100%; height: 44px; display: block; }
.range .hist rect { fill: var(--verdigris); opacity: 0.35; }
.range .hist rect.on { opacity: 0.9; }
.range .dual { position: relative; height: 22px; }
.range .dual input[type="range"] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 22px; }
.range .dual input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); border: 2px solid var(--ink); cursor: grab; }
.range .dual input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 13px; height: 13px; border-radius: 50%; background: var(--panel); border: 2px solid var(--ink); cursor: grab; }
.range .dual input[type="range"]::-webkit-slider-runnable-track { height: 22px; background: none; }
.range .dual .track { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--rule); }
.range .dual .fill { position: absolute; top: 10px; height: 2px; background: var(--ink); }
.range .ticks { position: relative; height: 16px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); }
.range .ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.range .readout { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink); }
details.filters summary { cursor: pointer; font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
.checks { display: grid; gap: 3px; margin-top: 8px; font-size: var(--step--1); }
.checks label { display: flex; gap: 8px; align-items: center; justify-content: space-between; cursor: pointer; }
.checks label span.l { display: flex; gap: 8px; align-items: center; }
.checks .n { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); }
.legend { display: grid; gap: 6px; font-size: var(--step--1); color: var(--ink-2); }
.legend div { display: flex; gap: 9px; align-items: center; }
.legend .basis-dot { width: 11px; height: 11px; }
.legend .basis-dot.capital { width: 8px; height: 8px; }
.place-panel h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); }
.place-panel .rlist li { grid-template-columns: 4.6rem 1fr; padding: 8px 0; }
.nopoint { font-size: var(--step--1); color: var(--ink-2); }
.nopoint ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.map-label {
  font-family: var(--font-display); font-style: italic; font-size: 15px; letter-spacing: 0.08em;
  color: var(--carmine); cursor: pointer; white-space: nowrap; background: none; border: 0; padding: 0;
  text-shadow: 0 0 3px var(--map-land), 0 0 3px var(--map-land), 0 0 6px var(--map-land);
}
.map-label.dim { opacity: 0.3; }
.map-label small { font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: 0; color: var(--ink-3); margin-left: 3px; }
.maplibregl-popup-content { background: var(--panel) !important; color: var(--ink); font-family: var(--font-body); font-size: var(--step--1); padding: 7px 10px !important; border: 1px solid var(--rule); box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important; }
.maplibregl-popup-tip { display: none; }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-ctrl-group, .maplibregl-ctrl-attrib.maplibregl-compact { background: var(--panel) !important; border: 1px solid var(--rule); box-shadow: none !important; }
.maplibregl-ctrl-group button + button { border-top-color: var(--rule) !important; }
.maplibregl-ctrl-icon, .maplibregl-ctrl-attrib-button { filter: var(--icon-filter); }
.maplibregl-ctrl-attrib-inner, .maplibregl-ctrl-attrib-inner a { color: var(--ink-2) !important; }
.map-note { position: absolute; left: 10px; bottom: 26px; z-index: 2; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 0.72rem; color: var(--ink-3); padding: 3px 7px; max-width: 70%; }
.map-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--ink-2); }

@media (max-width: 1080px) {
  .site-header { position: static; }
  .site-header .bar { gap: 0 20px; padding-block: 6px 8px; }
  .site-nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; margin-inline: -6px; padding-inline: 0 32px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
  .explorer { height: calc(100vh - 110px); }
}
@media (max-width: 900px) {
  .record-grid { grid-template-columns: minmax(0, 1fr); }
  .explorer { grid-template-columns: minmax(0, 1fr); height: auto; }
  .explorer .mapwrap { height: 62vh; min-height: 360px; }
  .explorer .side { border-left: 0; border-top: 1px solid var(--rule); overflow: visible; }
  h1 { font-size: var(--step-3); }
}
@media (max-width: 560px) {
  .map-note { display: none; }
  .rlist li { grid-template-columns: 1fr; gap: 2px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
  .wordmark { font-size: 1.15rem; letter-spacing: 0.16em; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
/* ------------------------------------------------------------------
   Discovery pages: the front door, the trails, the old maps and the passages. */

.btn, summary.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; min-height: 44px;
  padding: 10px 18px; border: 1px solid var(--ink-3); border-radius: 999px;
  background: var(--panel); color: var(--ink); text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--verdigris); color: var(--verdigris); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.btn.quiet { border-color: transparent; background: none; color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; padding-inline: 10px; }
.btn.primary:hover { background: var(--verdigris); border-color: var(--verdigris); color: var(--panel); }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
details.more { margin-top: 18px; }
details.more[open] > summary { display: none; }
details.more[open] > .psg-list { margin-top: -2px; }
.filterbar > .btn { align-self: end; }

/* Pictures. Every picture sits on a mat the colour of old paper, so a slow image never leaves a hole. */
.hero-fig, .trail-fig, .mapfig { margin: 0; display: grid; gap: 10px; min-width: 0; }
.hero-fig img, .trail-fig img, .mapfig img { display: block; width: 100%; height: auto; background: var(--frame); border-radius: var(--radius-l); }
.hero-fig a, .trail-fig a, .mapfig a { display: block; border-radius: var(--radius-l); }
figcaption { font-size: var(--step--1); color: var(--ink-3); line-height: 1.45; }
figcaption a { color: var(--ink-2); font-weight: 600; }

/* Front door */
.home { padding-block: 40px 80px; }
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "text card" "fig card"; gap: 28px 56px; align-items: start; }
.hero-text { grid-area: text; display: grid; gap: 16px; padding-top: 6px; }
.hero-card { grid-area: card; min-width: 0; display: grid; gap: 14px; }
.hero-fig { grid-area: fig; position: sticky; top: calc(var(--header-h) + 20px); }
.hero-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.hero-card-head h2 { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); }
.hero-card .psg { box-shadow: var(--shadow); }
.hero h1 { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.02em; }
.hero .lede { max-width: 30rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hero-fig img { box-shadow: var(--shadow); }

.band { margin-top: 76px; }
.band-head { display: grid; gap: 6px; margin-bottom: 24px; max-width: 44rem; }
.band-head.row { max-width: none; display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: end; justify-content: space-between; }
.band-head.row > div { display: grid; gap: 6px; max-width: 44rem; min-width: 0; }
.band-head h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); letter-spacing: -0.012em; }
.band-head p { color: var(--ink-2); }

.trails { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.trail {
  grid-column: span 2; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-l); overflow: hidden;
  color: var(--ink); text-decoration: none; min-width: 0;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}
.trail:nth-child(-n+2) { grid-column: span 3; }
.trail:hover { border-color: var(--verdigris); box-shadow: var(--shadow); transform: translateY(-2px); }
.trail:hover .trail-q { color: var(--verdigris); }
.trail-img { display: block; aspect-ratio: 16 / 9; background: var(--frame); overflow: hidden; }
.trail:nth-child(-n+2) .trail-img { aspect-ratio: 2 / 1; }
.trail-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.trail-body { display: grid; gap: 8px; align-content: start; padding: 18px 22px 20px; }
.trail-label { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 650; color: var(--verdigris); }
.trail-q { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; text-wrap: balance; }
.trail-blurb { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; }
.trail-n { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-3); margin-top: 2px; }

/* A map as a picture card */
.mapcard { display: grid; gap: 2px; align-content: start; color: var(--ink); text-decoration: none; min-width: 0; }
.mapcard-img { display: block; aspect-ratio: 4 / 3; background: var(--frame); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; border: 1px solid var(--rule); }
.mapcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.mapcard:hover .mapcard-img img { transform: scale(1.04); }
.mapcard:hover .mapcard-t { color: var(--verdigris); text-decoration: underline; text-underline-offset: 3px; }
.mapcard-when { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mapcard-t { font-weight: 650; line-height: 1.25; }
.mapcard-sub { font-size: var(--step--1); color: var(--ink-2); line-height: 1.4; overflow-wrap: anywhere; }
.mapstrip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.mapstrip.small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.mapstrip.small .mapcard-sub { display: none; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 24px; margin-top: 14px; }
.gallery-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.gallery-find { flex: 1 1 260px; max-width: 360px; }
.gallery-find input { width: 100%; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font: inherit; font-size: 0.9375rem; font-weight: 600; min-height: 44px; padding: 8px 16px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); color: var(--ink-2);
}
.pill .n { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.pill:hover { border-color: var(--verdigris); color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.pill[aria-pressed="true"] .n { color: inherit; opacity: 0.75; }
.mapfig { margin-bottom: 40px; }
.mapfig img { max-height: 82vh; object-fit: contain; box-shadow: var(--shadow); }


.place-start { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 40px; align-items: center; }
.place-start-list { display: grid; gap: 16px; }
.place-start .minimap { border-radius: var(--radius-l); }
.chip.big { font-size: 0.9375rem; padding: 8px 14px; }
.tags a:hover .chip { border-color: var(--verdigris); color: var(--ink); }

.witnesses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.witness { display: grid; gap: 8px; align-content: start; padding: 20px 22px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-l); color: var(--ink); text-decoration: none; min-width: 0; transition: box-shadow 0.18s, border-color 0.18s; }
.witness:hover { border-color: var(--verdigris); box-shadow: var(--shadow); }
.witness:hover .witness-t { color: var(--verdigris); }
.witness-when { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-3); }
.witness-t { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.2; text-wrap: balance; }
.witness-one { font-size: var(--step--1); color: var(--ink-2); line-height: 1.5; }
.witness-n { font-size: var(--step--1); color: var(--ink-3); }

.deeper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; max-width: 60rem; }
.deeper li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--rule); align-content: start; }
.deeper li a { font-weight: 650; }
.deeper li span { color: var(--ink-2); font-size: var(--step--1); }
.progress { margin-top: 56px; max-width: 46rem; font-size: var(--step--1); color: var(--ink-2); padding: 14px 18px; background: var(--gamboge-soft); border-radius: var(--radius); line-height: 1.55; }
.progress strong { color: var(--ink); }

/* Trail pages and the passage explorer */
.trail-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 24px 48px; align-items: center; margin-bottom: 32px; }
.trail-head .page-head { margin-bottom: 0; }
.trail-fig img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 18%; }
.trailtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.trailtabs a { font-size: 0.9375rem; font-weight: 600; padding: 9px 16px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2); text-decoration: none; background: var(--panel); line-height: 1.2; }
.trailtabs a:hover { border-color: var(--verdigris); color: var(--ink); }
.trailtabs a .n { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 400; opacity: 0.75; margin-left: 3px; }
.trailtabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.px-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px 48px; align-items: start; }
.px-side { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 20px); display: grid; gap: 20px; min-width: 0; }
.filterbar.stack { display: grid; gap: 14px; margin: 0; }
.filterbar.stack input, .filterbar.stack select { width: 100%; }
.px-filters > summary { display: none; }
.px-filters-body { display: grid; gap: 14px; }
.px-filters-body > .btn { justify-self: start; }
.px-main { min-width: 0; }
.px-count { margin-bottom: 12px; }
.px-more { margin-top: 24px; }
.basis-legend { font-size: var(--step--1); color: var(--ink-2); }
.basis-legend summary { cursor: pointer; font-weight: 600; padding-block: 6px; }
.basis-legend > span { display: grid; gap: 4px; justify-items: start; margin-top: 10px; }

/* A passage: a white card. The headline, a plain summary, then the source's own words set in the serif. */
.psg-list { display: grid; gap: 18px; max-width: 46rem; min-width: 0; }
.psg { display: grid; gap: 12px; padding: 24px 28px 22px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-l); min-width: 0; }
.psg-meta { display: flex; flex-wrap: wrap; gap: 2px 0; align-items: baseline; font-size: var(--step--1); color: var(--ink-3); }
.psg-meta > *:not(:last-child)::after { content: "·"; display: inline-block; margin-inline: 8px; color: var(--ink-3); }
.psg-meta a { color: var(--ink-2); }
.psg-meta .ttag { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 650; color: var(--verdigris); text-decoration: none; }
.psg h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.18; letter-spacing: -0.008em; }
.psg.big h3 { font-size: 1.85rem; }
.psg .gloss { color: var(--ink-2); }
.psg blockquote { margin: 2px 0; padding: 16px 20px; background: var(--paper); border-left: 3px solid var(--verdigris); border-radius: 0 var(--radius) var(--radius) 0; display: grid; gap: 8px; min-width: 0; }
.psg blockquote p { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.psg.big blockquote p { font-size: 1.3rem; }
.psg blockquote .q-tag, .psg.big blockquote .q-tag { font-family: var(--font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 650; color: var(--ink-3); }
.psg blockquote details summary { cursor: pointer; font-size: var(--step--1); color: var(--ink-2); padding-block: 4px; }
.psg blockquote .orig, .psg.big blockquote .orig { font-size: 1.05rem; color: var(--ink-2); margin-top: 6px; }
.psg-people { font-size: var(--step--1); color: var(--ink-2); }
.psg-people span { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 650; font-size: 0.75rem; color: var(--ink-3); margin-right: 6px; }
.psg-foot { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.psg-foot .who { font-size: var(--step--1); color: var(--ink-2); min-width: 0; }
.basis {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--ink-3); color: var(--ink-2); background: var(--panel);
}
.basis.saw { background: var(--verdigris); border-color: var(--verdigris); color: var(--panel); }
.basis.heard { border-color: var(--verdigris); color: var(--verdigris); }
.basis.legend { border-color: var(--carmine); color: var(--carmine); background: var(--carmine-soft); border-style: dashed; }
.basis.mixed { border-color: var(--gamboge); color: var(--gamboge); }
.basis.record { border-color: var(--ink); color: var(--ink); }
.psg-notes { font-size: var(--step--1); color: var(--ink-2); }
.psg-notes summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gamboge); padding-block: 4px; list-style: none; }
.psg-notes summary::-webkit-details-marker { display: none; }
.psg-notes summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1; }
.psg-notes[open] summary::before { content: "\2212"; }
.psg-notes p { margin-top: 6px; padding-left: 14px; border-left: 2px solid var(--gamboge); }
.psg-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; font-size: var(--step--1); font-weight: 600; padding-top: 12px; border-top: 1px solid var(--rule-soft); }

.psg-copy { font: inherit; font-weight: 600; color: var(--ink-2); background: none; border: 0; padding: 0; margin-left: auto; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.psg-copy:hover { color: var(--verdigris); text-decoration-thickness: 2px; }

/* The label that says how the author knew is a button: pressing it spells the label out. */
button.basis { font-family: inherit; line-height: inherit; cursor: pointer; }
button.basis:hover, button.basis[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--verdigris-soft); }
.basis-tip { font-size: var(--step--1); color: var(--ink-2); padding-left: 14px; border-left: 2px solid var(--verdigris); margin-top: -4px; }

/* The way from one passage into the whole source: a door, not a footnote. */
.psg-tale {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; align-items: center;
  padding: 14px 18px; margin-top: 2px; background: var(--verdigris-soft); border: 1px solid transparent; border-radius: var(--radius);
  color: var(--ink); text-decoration: none; transition: border-color 0.18s, box-shadow 0.18s;
}
.psg-tale::after {
  content: "\2192"; grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--verdigris); color: var(--panel); font-size: 1.1rem; transition: transform 0.18s;
}
.psg-tale > span { grid-column: 1; min-width: 0; }
.psg-tale-k { font-size: var(--step-0); font-weight: 700; color: var(--verdigris); }
.psg-tale-t { font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; line-height: 1.22; text-wrap: balance; }
.psg-tale-n { font-size: var(--step--1); color: var(--ink-2); }
.psg-tale:hover { border-color: var(--verdigris); box-shadow: var(--shadow); }
.psg-tale:hover .psg-tale-t { color: var(--verdigris); }
.psg-tale:hover::after { transform: translateX(3px); }

/* The front page passage: held back for a moment on the static site so the random draw is the first one seen. */
.feature-slot { min-width: 0; }
.js .feature-slot:not([data-ready]) { visibility: hidden; animation: ta-reveal 0s 2.5s forwards; }
@keyframes ta-reveal { to { visibility: visible; } }
.psg.dealt { animation: ta-deal 0.32s ease-out; }
@keyframes ta-deal { from { opacity: 0; transform: translateY(8px); } }

/* Where to go next from a source or a map. */
.onward { border-top: 2px solid var(--ink); padding-top: 28px; }
.onward-slot { display: grid; gap: 10px; align-content: start; grid-template-rows: auto 1fr; min-width: 0; }
button.witness { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.witness.lucky { background: var(--gamboge-soft); border-style: dashed; border-color: var(--gamboge); }
.witness.lucky:hover { border-style: solid; border-color: var(--gamboge); }
.witness.lucky:hover .witness-t { color: var(--gamboge); }

/* A closer look at a map picture. */
.mapfig a[data-zoom] { position: relative; cursor: zoom-in; }
.zoom-hint {
  position: absolute; right: 14px; top: 14px; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--panel);
  font-size: var(--step--1); font-weight: 600; box-shadow: var(--shadow); pointer-events: none;
}
dialog.zoom {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #10171a; color: #f2f4f1; display: none; grid-template-rows: auto minmax(0, 1fr);
}
dialog.zoom[open] { display: grid; }
dialog.zoom::backdrop { background: #10171a; }
.zoom-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px var(--gutter); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.zoom-title { font-family: var(--font-display); font-size: var(--step-1); min-width: 0; }
.zoom-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--step--1); }
.zoom-tools button, .zoom-tools a {
  font: inherit; font-weight: 600; color: inherit; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px; padding: 7px 14px; min-width: 2.5rem; cursor: pointer; text-decoration: none;
}
.zoom-tools button:hover:not(:disabled), .zoom-tools a:hover { background: rgba(255, 255, 255, 0.18); }
.zoom-tools button:disabled { opacity: 0.4; cursor: default; }
.zoom-tools button:focus-visible, .zoom-tools a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.zoom-pan { overflow: auto; display: grid; place-items: safe center; min-height: 0; overscroll-behavior: contain; }
.zoom-pan img { display: block; max-width: none; height: auto; cursor: zoom-in; user-select: none; -webkit-user-drag: none; touch-action: pan-x pan-y; }
.zoom-pan.zoomed img { cursor: grab; }
.zoom-pan.zoomed img:active { cursor: grabbing; }

/* A set of passages on a source or place page: pills to pick a trail, a switch for the order. */
.pset { display: grid; gap: 16px; min-width: 0; }
.pset-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; max-width: 46rem; }
.pset-bar .pill { min-height: 40px; padding: 6px 14px; }
.pset .px-more { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pset details.more { margin-top: 0; }

/* Source pages and the source list */
.cat-title { font-size: var(--step--1); color: var(--ink-2); }
.cat-title span { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 650; font-size: 0.75rem; color: var(--ink-3); margin-right: 6px; }
.prose-p { max-width: 44rem; }
.readcard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 6px 0 0; }
.readcard > div { display: grid; gap: 5px; align-content: start; padding: 14px 0; border-top: 1px solid var(--rule); }
.readcard dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 650; color: var(--ink-3); }
.readcard dd { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
h2.divider { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 650; margin-top: 28px; padding-top: 16px; border-top: 2px solid var(--ink); }
.slist .one { font-size: var(--step--1); color: var(--ink-2); max-width: 44rem; }
.slist li { grid-template-columns: 8.5rem 1fr; }

@media (max-width: 1080px) {
  .mapstrip { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(200px, 30%); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; }
  .mapstrip > * { scroll-snap-align: start; }
  .mapstrip.small { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; padding-bottom: 0; }
  .px-side { position: static; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "text" "card" "fig"; gap: 22px; }
  .hero-fig { position: static; }
  .trails { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trail, .trail:nth-child(-n+2) { grid-column: span 1; }
  .trail:last-child { grid-column: span 2; }
  .trail:nth-child(-n+2) .trail-img { aspect-ratio: 16 / 9; }
  .witnesses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .place-start { grid-template-columns: minmax(0, 1fr); }
  .trail-head { grid-template-columns: minmax(0, 1fr); }
  .trail-fig { max-width: 30rem; }
  .px-layout { grid-template-columns: minmax(0, 1fr); }
  .px-filters > summary {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; min-height: 44px; padding: 8px 16px;
    font-size: 0.9375rem; font-weight: 600; color: var(--ink); border: 1px solid var(--ink-3); border-radius: 999px; background: var(--panel);
  }
  .px-filters > summary::-webkit-details-marker { display: none; }
  .px-filters > summary::after { content: "+"; font-family: var(--font-mono); }
  .px-filters[open] > summary::after { content: "\2212"; }
  .px-filters > summary .n { font-weight: 600; color: var(--verdigris); }
  .px-filters-body { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; margin-top: 14px; }
}
@media (max-width: 620px) {
  .home { padding-block: 24px 56px; }
  .band { margin-top: 56px; }
  .trails { grid-template-columns: minmax(0, 1fr); }
  .trail:last-child { grid-column: span 1; }
  .witnesses { grid-template-columns: minmax(0, 1fr); }
  .deeper { grid-template-columns: minmax(0, 1fr); }
  .readcard { grid-template-columns: minmax(0, 1fr); }
  .psg { padding: 20px 18px 18px; }
  .psg-tale { padding: 12px 14px; }
  .psg-tale-t { font-size: 1.1rem; }
  .zoom-title { font-size: var(--step-0); }
  .zoom-hint { right: 10px; top: 10px; }
  .psg blockquote { padding: 14px 16px; }
  .psg h3, .psg.big h3 { font-size: 1.4rem; }
  .psg blockquote p, .psg.big blockquote p { font-size: 1.14rem; }
  .slist li { grid-template-columns: 1fr; }
  .mapstrip { grid-auto-columns: 64%; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
}

#what-it-says { scroll-margin-top: calc(var(--header-h) + 16px); }
#what-it-says:focus { outline: none; }


/* ------------------------------------------------------------------
   Inked in its own sources: lettering and ornaments cut from the maps (generator/fetch_cuts.py).
   A cut is a picture of ink alone; the page paints it in the colour of the text around it. */
.cut {
  display: inline-block; height: 1em; max-width: 100%; vertical-align: middle; flex: none;
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.orn { display: inline-flex; color: var(--ink-2); }

/* The name in the header */
.wm { display: grid; gap: 0; min-width: 0; justify-items: start; padding-block: 6px; }
.wm .wordmark { padding-block: 2px 0; }
.wordmark { display: inline-flex; align-items: center; gap: 0.6em; }
.wordmark > span { letter-spacing: 0.12em; color: var(--ink-3); }
.wordmark .wm-name { display: inline-flex; color: var(--ink); min-width: 0; }
.wordmark .wm-name .cut { height: 27px; max-width: 46vw; }
.js .wm-name:not([data-set]) { visibility: hidden; animation: ta-reveal 0s 2s forwards; }
.wm-credit { font-family: var(--font-display); font-style: italic; font-size: 0.8125rem; line-height: 1.2; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.wm-credit:hover { color: var(--verdigris); text-decoration: underline; }

/* A rule with one ornament set into it */
.orn-rule { display: flex; align-items: center; gap: 28px; margin-top: 72px; }
.orn-rule::before, .orn-rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.orn-rule .cut { height: 92px; }
.orn-rule + .band { margin-top: 40px; }
.page-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: 32px; }
.page-top .page-head { margin-bottom: 0; }
.orn.head .cut { height: 168px; max-width: 300px; }
.orn.foot { display: flex; justify-content: center; margin-bottom: 16px; color: var(--ink-3); }
.orn.foot .cut { height: 58px; }
.orn.gust { color: var(--gamboge); }
.orn.gust .cut { height: 66px; }
.page.lost { text-align: center; display: grid; gap: 18px; justify-items: center; padding-block: 72px; }
.page.lost .cut { height: 130px; }
.page.lost > * { margin: 0; }
.kit { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: end; }
.kit a, .hand-list a { display: grid; gap: 8px; justify-items: start; text-decoration: none; color: var(--ink); }
.kit .cut { height: 120px; max-width: 240px; }
.kit a:hover, .hand-list a:hover { color: var(--verdigris); }
.hand-by { font-size: 0.8125rem; color: var(--ink-3); }

/* One name, many hands */
.band.hands { margin-top: 56px; }
.hand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 30px 46px; align-items: end; }
.hand-list .cut { height: 40px; }
.hand-list .cut.tall { height: 104px; }

/* The front door: Ortelius's map across the whole page, the question set on it like a cartouche,
   and the passage rising out of its lower edge. */
.front { position: relative; }
.front-stage { position: relative; height: clamp(380px, 64vh, 680px); background: var(--frame); overflow: hidden; border-bottom: 1px solid var(--rule); }
.front-still, .front-osd { position: absolute; inset: 0; }
.front-still { z-index: 2; transition: opacity 0.7s ease; }
.front-still img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 32% 30%; }
.front-still.gone { opacity: 0; pointer-events: none; }
.front-osd { z-index: 1; }
.front-osd > div { position: relative; width: 100%; height: 100%; }
.front-stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 140px; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, var(--stage-shade), transparent); }
.front-stage.roam::after { display: none; }
.front-tools { position: absolute; z-index: 4; top: 14px; right: var(--gutter); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.front-tools .btn { box-shadow: var(--shadow); }
.front-zoom { display: inline-flex; gap: 4px; }
.btn.icon { min-width: 44px; padding-inline: 0; justify-content: center; font-size: 1.25rem; line-height: 1; }
.front-body { position: relative; z-index: 5; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 56px; align-items: start; margin-top: -132px; pointer-events: none; }
.front-body > * { pointer-events: auto; }
.front-plate { background: var(--panel); border: 3px double var(--ink); padding: 26px 28px 22px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.front-plate h1 { font-size: var(--step-5); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.front-how, .front-credit { font-size: var(--step--1); color: var(--ink-3); }
.front-how { padding-top: 12px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 6px 22px; }
.front-how span { display: inline-flex; align-items: center; gap: 8px; }
.key { width: 11px; height: 11px; flex: none; background: var(--pin); border-radius: 50%; box-shadow: 0 0 0 2px var(--pin-halo), 0 0 0 3px var(--rule); }
.key.dia { background: var(--pin-sight); border-radius: 1px; transform: rotate(45deg) scale(0.85); }
.front-osd .openseadragon-canvas { cursor: grab; }
.front-osd .openseadragon-canvas:active { cursor: grabbing; }
.front-credit a { color: var(--ink-2); }
.front .hero-card { grid-area: auto; background: var(--paper); padding: 14px 16px 0; margin-inline: -16px; border-radius: var(--radius-l) var(--radius-l) 0 0; }
.front-at { font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink-2); }
.front-at em { color: var(--ink); }

/* Marks on the map. A dot is a town the sources wrote about, a ring is a wider name, a diamond is a note the
   mapmaker wrote on the sheet. */
.fpin { position: relative; width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.fpin::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--pin); box-shadow: 0 0 0 2.5px var(--pin-halo), 0 1px 5px rgba(0, 0, 0, 0.55); transition: transform 0.15s ease; }
.fpin.name::before { background: var(--pin-halo); box-shadow: 0 0 0 2.5px var(--pin), 0 1px 5px rgba(0, 0, 0, 0.55); inset: 12px; }
.fpin.sight::before { border-radius: 1px; transform: rotate(45deg); background: var(--pin-sight); inset: 11.5px; }
.fpin:hover::before, .fpin:focus-visible::before { transform: scale(1.35); }
.fpin.sight:hover::before, .fpin.sight:focus-visible::before { transform: rotate(45deg) scale(1.35); }
.fpin:focus-visible { outline: 3px solid var(--pin-halo); outline-offset: -4px; }
.fpin span { position: absolute; left: 50%; bottom: calc(100% - 4px); transform: translateX(-50%); white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis;
  background: var(--pin-tip); color: var(--pin-tip-ink); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 550; padding: 4px 9px; border-radius: 6px; opacity: 0; pointer-events: none; }
.fpin:hover span, .fpin:focus-visible span, .fpin.on span { opacity: 1; }
.fpin:hover, .fpin:focus-visible, .fpin.on { z-index: 3; }
.fpin.on::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2.5px solid var(--pin-halo); box-shadow: 0 0 0 1.5px var(--pin); animation: ta-ping 2.2s ease-out infinite; }
@keyframes ta-ping { 0% { transform: scale(0.6); opacity: 1; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

/* A note that opens on the map */
.front-slip { position: absolute; z-index: 6; left: var(--gutter); top: 14px; width: min(400px, calc(100% - 2 * var(--gutter)));
  background: var(--panel); color: var(--ink); border: 3px double var(--ink); padding: 18px 20px; display: grid; gap: 10px; box-shadow: var(--shadow); max-height: calc(100% - 28px); overflow: auto; }
.front-slip h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; line-height: 1.15; padding-right: 36px; }
.slip-k { font-size: 0.8125rem; font-weight: 650; color: var(--carmine); }
.front-slip .orig { font-family: var(--font-display); font-style: italic; color: var(--ink-2); }
.slip-note { font-size: 0.8125rem; color: var(--ink-3); }
.slip-go { display: flex; flex-wrap: wrap; gap: 8px; }
.slip-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none; color: var(--ink-2); font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.slip-x:hover { background: var(--sunk); color: var(--ink); }

/* Roaming: the map takes the whole window */
.front-stage.roam { position: fixed; inset: 0; height: auto; z-index: 60; border: 0; }
.front-stage.roam .front-tools { top: calc(14px + env(safe-area-inset-top, 0px)); }
.roaming, .roaming body { overflow: hidden; }

@media (max-width: 900px) {
  .front-stage { height: clamp(300px, 48vh, 460px); }
  .front-body { grid-template-columns: minmax(0, 1fr); margin-top: -44px; gap: 22px; }
  .front-plate { padding: 18px 20px 16px; gap: 10px; }
  .front-plate h1 { font-size: 1.75rem; }
  .front .hero-card { margin-inline: 0; padding: 0; background: none; }
  .page-top { grid-template-columns: minmax(0, 1fr); }
  .orn.head { display: none; }
  .orn-rule { margin-top: 52px; gap: 18px; }
  .orn-rule .cut { height: 70px; }
  .hand-list { gap: 24px 30px; }
  .hand-list .cut { height: 30px; }
  .hand-list .cut.tall { height: 80px; }
  .front-stage::after { height: 70px; }
}
@media (max-width: 700px) {
  .wm-credit { display: none; }
  .wordmark .wm-name .cut { height: 22px; max-width: 52vw; }
}

/* ------------------------------------------------------------------
   Ride with a traveler: a route that draws itself across a sheet in the atlas's own colours,
   with the traveler's passages set down at the stops where they belong. */
.ridecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ridecard { display: grid; grid-template-rows: auto 1fr; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-l); overflow: hidden; color: var(--ink); text-decoration: none; min-width: 0; transition: box-shadow 0.18s, border-color 0.18s; }
.ridecard:hover { border-color: var(--carmine); box-shadow: var(--shadow); }
.ridecard:hover .ridecard-t { color: var(--carmine); }
.ride-thumb { display: block; width: 100%; aspect-ratio: 2 / 1; background: var(--map-water); border-bottom: 1px solid var(--rule); }
.ride-thumb .land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 0.4; }
.ride-thumb .line { fill: none; stroke: var(--carmine); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.5 5.5; }
.ride-thumb .end { fill: var(--pin-halo); stroke: var(--carmine); stroke-width: 0.5; }
.ride-thumb .end.far { fill: var(--carmine); }
.ridecard-body { display: grid; gap: 8px; align-content: start; padding: 18px 22px 20px; }
.ridecard-when { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-3); }
.ridecard-t { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.18; text-wrap: balance; }
.ridecard-one { font-size: var(--step--1); color: var(--ink-2); line-height: 1.5; }
.ridecard-n { font-size: var(--step--1); color: var(--ink-3); }

.ride-head { display: grid; gap: 12px; max-width: 46rem; margin-bottom: 36px; }
.ride-head .eyebrow a { color: inherit; }
.ride-who { font-family: var(--font-mono); font-size: 0.875rem; color: var(--ink-3); }
.ride-body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px 48px; align-items: start; }
.ride-stage { position: sticky; top: calc(var(--ride-top, var(--header-h)) + 20px); display: grid; gap: 12px; z-index: 5; }
.ride-sheet { position: relative; background: var(--map-water); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--ink-3), 0 0 0 5px var(--panel), 0 0 0 6px var(--rule), var(--shadow); margin: 6px; }
.ride-svg { display: block; width: 100%; height: 100%; border-radius: var(--radius); }
.ride-svg .sea { fill: var(--map-water); }
.ride-svg .grat { fill: none; stroke: var(--map-coast); stroke-opacity: 0.22; stroke-width: 1; }
.ride-svg .shore { fill: none; stroke: var(--map-coast); stroke-linejoin: round; }
.ride-svg .shore.s3 { stroke-width: 11; stroke-opacity: 0.09; }
.ride-svg .shore.s2 { stroke-width: 7; stroke-opacity: 0.13; }
.ride-svg .shore.s1 { stroke-width: 3.5; stroke-opacity: 0.2; }
.ride-svg .land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 1; }
.ride-svg .lake { fill: var(--map-water); stroke: var(--map-coast); stroke-width: 0.8; }
.ride-svg .river { fill: none; stroke: var(--map-river); stroke-width: 0.9; }
.ride-svg .leg { fill: none; stroke: var(--carmine); stroke-width: 2.6; stroke-linecap: round; }
.ride.live .ride-svg .leg { visibility: hidden; }
.ride.live .ride-svg .leg.on { visibility: visible; }
.ride-dots { position: absolute; inset: 0; }
.rdot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--pin-halo); border: 2px solid var(--ink-2); transition: transform 0.2s, background-color 0.2s, border-color 0.2s; }
.rdot::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.rdot.rough { border-style: dotted; border-color: var(--carmine); }
.rdot.has { background: var(--ink-2); }
.rdot.rough.has { background: var(--carmine); border-style: solid; box-shadow: 0 0 0 2px var(--pin-halo), 0 0 0 3px var(--carmine); width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.ride.live .rdot:not(.done):not(.on) { opacity: 0.55; }
.rdot.on { transform: scale(1.45); z-index: 3; border-color: var(--carmine); }
.rdot.on.has { background: var(--carmine); }
.rdot:hover, .rdot:focus-visible { z-index: 4; opacity: 1; }
.rdot span { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); white-space: nowrap; background: var(--pin-tip); color: var(--pin-tip-ink); font-size: 0.75rem; font-weight: 600; line-height: 1.2; padding: 4px 8px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.rdot.al span { left: -4px; transform: none; }
.rdot.ar span { left: auto; right: -4px; transform: none; }
.rdot.lo span { bottom: auto; top: calc(100% + 9px); }
.rdot.on span, .rdot:hover span, .rdot:focus-visible span { opacity: 1; }
/* the current stop wears its name underneath, so the rider above it stays in view */
.rdot.on span { bottom: auto; top: calc(100% + 7px); transform: translateX(-50%) scale(0.69); transform-origin: 50% 0; }
.rdot.on.al span { transform: scale(0.69); transform-origin: 0 0; }
.rdot.on.ar span { transform: scale(0.69); transform-origin: 100% 0; }
.rdot.on.hi span { top: auto; bottom: calc(100% + 9px); transform-origin: 50% 100%; }
.ride-rider { position: absolute; left: 0; top: 0; z-index: 2; color: var(--ink); pointer-events: none; transform: translate(-50%, -112%); filter: drop-shadow(0 0 1.5px var(--map-land)) drop-shadow(0 0 1.5px var(--map-land)); }
.ride-rider .cut { display: block; height: 46px; }
.ride-rider.plain { width: 10px; height: 10px; border-radius: 50%; background: var(--carmine); transform: translate(-50%, -50%); }
.ride-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 6px; }
.ride-pos { font-size: var(--step--1); color: var(--ink-2); text-align: center; min-width: 0; }
.ride-pos b { font-weight: 650; color: var(--ink); }
.ride-bar .btn[disabled] { opacity: 0.4; cursor: default; }
.ride-stops { list-style: none; margin: 0 0 0 14px; padding: 0; min-width: 0; }
.ride-stop { position: relative; display: grid; gap: 10px; padding: 0 0 44px 34px; border-left: 2px dotted var(--rule); min-width: 0; }
.ride-stop:last-child { border-left-color: transparent; padding-bottom: 8px; }
.ride-stop:focus { outline: none; }
.ride-k { display: flex; align-items: center; min-height: 30px; }
.ride-num { position: absolute; left: -16px; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink-3); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-2); transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.ride-stop.on .ride-num { background: var(--carmine); border-color: var(--carmine); color: var(--panel); }
.ride-when { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-3); }
.ride-stop h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); letter-spacing: -0.012em; }
.ride-stop.way h2 { font-size: var(--step-2); }
.ride-modern { font-size: var(--step--1); color: var(--ink-3); margin-top: -6px; }
.ride-say { font-size: var(--step-1); line-height: 1.5; color: var(--ink); max-width: 38rem; }
.ride-stop.way .ride-say { font-size: var(--step-0); color: var(--ink-2); }
.ride-stop .pset { margin-top: 8px; }
.ride-more { font-size: var(--step--1); }
.ride-end { display: grid; gap: 14px; max-width: 46rem; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--rule); }
.ride-end h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); }
.ride-note { color: var(--ink-2); }
.ride-doubts { font-size: var(--step--1); color: var(--ink-2); }
.ride-doubts summary { cursor: pointer; font-weight: 600; padding-block: 6px; }
.ride-doubts ul { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
@media (max-width: 1080px) { .ridecards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ride-body { grid-template-columns: minmax(0, 1fr); }
  .ride-stage { top: var(--ride-top, var(--header-h)); margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter) 8px; background: var(--paper); border-bottom: 1px solid var(--rule); gap: 6px; }
  .ride-sheet { max-height: 34vh; margin-inline: auto; width: 100%; }
  .ride-bar .btn.icon { min-height: 38px; min-width: 38px; }
  .ride-rider .cut { height: 34px; }
  .ride-stops { margin-top: 20px; }
}
@media (max-width: 620px) {
  .ridecards { grid-template-columns: minmax(0, 1fr); }
  .ride-stop { padding-left: 26px; }
}

/* ------------------------------------------------------------------
   The deck: passages as cards on a walnut writing desk. The cards are things, so they keep their own paper and ink
   in both themes. The back is a mapmaker's lettering over a compass; each trail is a suit with its own drawing. */
:root { --table: #58402b; --table-2: #33261c; --table-ink: #f2e4c8; --card: #fbf6e6; --card-ink: #30271c; --card-ink-2: #695b45; --card-back: #783e32; --card-line: #f3e7c9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --table: #35271c; --table-2: #211910; } }
:root[data-theme="dark"] { --table: #35271c; --table-2: #211910; }
.pc { display: block; aspect-ratio: 5 / 7; border-radius: 10px; position: relative; }
.pc-back, .pc-face { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 18px -8px rgba(0, 0, 0, 0.5); }
.pc-back { background: var(--card-back); padding: 6.5%; display: grid; }
.pc-back-in { display: grid; place-items: center; align-content: center; gap: 9%; border: 1.5px solid var(--card-line); border-radius: 5px; box-shadow: inset 0 0 0 3px var(--card-back), inset 0 0 0 4px rgba(243, 231, 201, 0.55); color: var(--card-line); min-height: 0;
  background-image: repeating-linear-gradient(45deg, rgba(243, 231, 201, 0.08) 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, rgba(243, 231, 201, 0.08) 0 1px, transparent 1px 7px); }
.pc-back .cut.pc-back-name { width: 68%; height: auto; }
.pc-back .cut.pc-back-orn { height: auto; width: 40%; }
.deck-table { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px 44px; align-items: center; padding: clamp(18px, 3.4vw, 40px); border-radius: var(--radius-l); color: var(--table-ink);
  background: radial-gradient(120% 90% at 50% 0%, var(--table), var(--table-2)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 7px var(--table-2), inset 0 0 0 8px rgba(230, 239, 233, 0.22), var(--shadow); }
.deck-stack { position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; margin-bottom: 30px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
.deck-stack .pc { position: absolute; inset: 0; transition: transform 0.2s; }
.deck-stack .pc-s0 { transform: translate(-5px, 6px) rotate(-4deg); }
.deck-stack .pc-s1 { transform: translate(-2px, 3px) rotate(-1.5deg); }
.deck-stack:hover .pc-s2 { transform: translate(3px, -5px) rotate(2deg); }
.deck-stack[disabled] { cursor: progress; opacity: 0.7; }
.deck-stack-k { position: absolute; left: 0; right: 0; top: calc(100% + 12px); text-align: center; font-size: 0.8125rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.1em; }
.spread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 24px); }
.spread-slot { display: grid; gap: 10px; min-width: 0; }
.spread-k { text-align: center; font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; }
.spread-card { aspect-ratio: 5 / 7; border-radius: 10px; border: 1.5px dashed rgba(230, 239, 233, 0.3); container-type: inline-size; }
.spread-card:has(.pcard) { border-color: transparent; }
.pcard { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1100px; border-radius: 10px; font: inherit; text-align: left; transition: transform 0.2s; }
.pcard.dealt { animation: ta-dealcard 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
@keyframes ta-dealcard { from { opacity: 0; transform: translate(-60%, 8%) rotate(-9deg); } }
.pcard:hover { transform: translateY(-4px); }
.pcard.sel { transform: translateY(-8px); }
.pcard.sel .pc-face { box-shadow: 0 0 0 3px var(--card-line), 0 14px 26px -10px rgba(0, 0, 0, 0.7); }
.pcard:focus-visible { outline: 3px solid var(--card-line); outline-offset: 4px; }
.pcard-in { display: block; position: relative; width: 100%; height: 100%; border-radius: inherit; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pcard.up .pcard-in { transform: rotateY(180deg); }
.pcard .pc-back, .pcard .pc-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pc-face { transform: rotateY(180deg); background: var(--card); color: var(--card-ink); display: grid; grid-template-rows: auto auto 1fr auto; gap: 4cqw; padding: 7cqw 7.5cqw 6.5cqw; overflow: hidden; }
.pc-face::before { content: ""; position: absolute; inset: 3cqw; border: 1px solid rgba(26, 33, 36, 0.35); border-radius: 6px; pointer-events: none; }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-year { font-family: var(--font-mono); font-size: max(0.75rem, 5.2cqw); font-weight: 500; letter-spacing: 0.02em; }
.pc-face .cut.suit { height: max(26px, 17cqw); max-width: 34cqw; color: var(--card-back); }
.pc-trail { font-size: max(0.625rem, 3.4cqw); font-weight: 650; text-transform: uppercase; letter-spacing: 0.1em; color: var(--card-back); }
.pc-h { font-family: var(--font-display); font-weight: 500; font-size: max(0.875rem, 7.4cqw); line-height: 1.14; letter-spacing: -0.008em; text-wrap: balance; align-self: start; }
.pc-q { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; line-clamp: 9; overflow: hidden; font-family: var(--font-display); font-style: italic; font-size: max(0.8125rem, 4.7cqw); line-height: 1.38; color: var(--card-ink-2); margin-top: 3cqw; }
.pc-who { font-size: max(0.6875rem, 3.7cqw); font-weight: 600; color: var(--card-ink-2); border-top: 1px solid rgba(26, 33, 36, 0.25); padding-top: 3cqw; }
.pc-body { display: grid; align-content: start; min-height: 0; overflow: hidden; }
@container (max-width: 190px) {
  .pc-q, .pc-who { display: none; }
  .pc-face { grid-template-rows: auto auto 1fr; }
  .pc-h { font-size: 0.75rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; text-wrap: wrap; }
  .pc-year { font-size: 0.6875rem; }
  .pc-trail { font-size: 0.5625rem; letter-spacing: 0.06em; }
  .pc-face .cut.suit { height: 20px; }
}
.deck-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.deck-read { margin-top: 28px; display: grid; gap: 14px; max-width: 46rem; min-height: 4rem; }
.deck-read .deck-hint { color: var(--ink-2); font-size: var(--step-1); }
.deck-read-k { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 650; color: var(--carmine); }
.deck-save { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
dialog.cardshot { border: 0; padding: 0; background: var(--panel); color: var(--ink); border-radius: var(--radius-l); max-width: min(92vw, 460px); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); }
dialog.cardshot::backdrop { background: rgba(8, 12, 13, 0.72); }
.cardshot-in { display: grid; gap: 14px; padding: 18px; }
.cardshot img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.cardshot-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.cardshot p { font-size: var(--step--1); color: var(--ink-2); }
/* The door to the deck on the front page */
.band.deck-door { margin-top: 56px; }
.deck-door-a { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px 48px; align-items: center; padding: 34px clamp(22px, 5vw, 64px); border-radius: var(--radius-l); color: var(--table-ink); text-decoration: none;
  background: radial-gradient(120% 120% at 20% 0%, var(--table), var(--table-2)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 7px var(--table-2), inset 0 0 0 8px rgba(230, 239, 233, 0.22), var(--shadow); }
.deck-door-stack { position: relative; display: block; width: 104px; aspect-ratio: 5 / 7; margin: 10px auto; }
.deck-door-stack .pc { position: absolute; inset: 0; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); transform-origin: 50% 110%; }
.deck-door-stack .pc-s0 { transform: rotate(-16deg) translateX(-18px); }
.deck-door-stack .pc-s2 { transform: rotate(16deg) translateX(18px); }
.deck-door-a:hover .pc-s0 { transform: rotate(-24deg) translateX(-30px); }
.deck-door-a:hover .pc-s1 { transform: translateY(-8px); }
.deck-door-a:hover .pc-s2 { transform: rotate(24deg) translateX(30px); }
.deck-door-body { display: grid; gap: 10px; justify-items: start; }
.deck-door-t { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); line-height: 1.15; letter-spacing: -0.012em; }
.deck-door-p { opacity: 0.88; max-width: 34rem; }
.deck-door-a .btn.primary { background: var(--card); border-color: var(--card); color: var(--card-ink); margin-top: 6px; }
.deck-door-a:hover .btn.primary { background: var(--card-line); border-color: var(--card-line); color: var(--card-ink); }
@media (max-width: 760px) {
  .deck-table { grid-template-columns: minmax(0, 1fr); }
  .deck-stack { display: none; }
  .deck-door-a { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .deck-door-body { justify-items: center; }
}

/* ------------------------------------------------------------ the time dial
   Old maps bent onto one sheet of the real earth, one after another. The wheel on the ruled scale is the dial:
   drag it and the sheets fade into each other, with the lettering of Tartary outlined in carmine on each. */
.dial-page .page-top { margin-bottom: 28px; }
.dial { display: grid; gap: 14px; min-width: 0; overflow-x: clip; }
.dial-scroll { min-width: 0; }
.dial-stage { position: relative; overflow: hidden; background: var(--map-water); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--ink-3), 0 0 0 5px var(--panel), 0 0 0 6px var(--rule), var(--shadow); margin: 6px; isolation: isolate; }
.dial-earth, .dial-over, .dial-sheets, .dial-sheet { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dial-earth .sea { fill: var(--map-water); }
.dial-earth .grat { fill: none; stroke: var(--map-coast); stroke-opacity: 0.25; stroke-width: 1; }
.dial-earth .shore { fill: none; stroke: var(--map-coast); stroke-linejoin: round; }
.dial-earth .shore.s3 { stroke-width: 12; stroke-opacity: 0.09; }
.dial-earth .shore.s2 { stroke-width: 7; stroke-opacity: 0.13; }
.dial-earth .shore.s1 { stroke-width: 3.5; stroke-opacity: 0.2; }
.dial-earth .land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 1.2; }
.dial-earth .lake { fill: var(--map-water); stroke: var(--map-coast); stroke-width: 0.9; }
.dial-earth .river { fill: none; stroke: var(--map-river); stroke-width: 1; }
.dial-sheets { transition: opacity 0.45s; }
.dial-sheet { object-fit: cover; opacity: 0; filter: drop-shadow(0 2px 5px rgba(19, 27, 30, 0.35)); will-change: opacity; }
.dial-sheet.on { opacity: 1; }
.dial-stage.lifted .dial-sheets { opacity: 0.07; }
/* today's borders and country names, for the bare earth under a lifted sheet */
.dial-earth .today { opacity: 0; transition: opacity 0.45s; }
.dial-stage.lifted .dial-earth .today { opacity: 1; }
.dial-earth .today path { fill: none; stroke: var(--ink-3); stroke-width: 1.3; stroke-opacity: 0.6; stroke-dasharray: 1 3.5; stroke-linecap: round; stroke-linejoin: round; }
.dial-earth .today text { font-family: var(--font-body); font-size: 17px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink-3); text-anchor: middle; paint-order: stroke; stroke: var(--map-land); stroke-width: 5px; stroke-linejoin: round; }
.dial-g { opacity: 0; pointer-events: none; }
.dial-g.on { opacity: 1; pointer-events: auto; }
/* one colour for each kind of Tartary, the same on every sheet */
.f-t { --c: var(--dial-t); } .f-m { --c: var(--dial-m); } .f-i { --c: var(--dial-i); } .f-c { --c: var(--dial-c); } .f-l { --c: var(--dial-l); } .f-o { --c: var(--dial-o); } .f-p { --c: var(--dial-p); }
.dial-over .also { --c: var(--dial-a); }
/* the lettering: a clear box round it, cased in paper so it reads on any colour, and nothing laid over the letters */
.dial-over .dn-c, .dial-over .dland-c { fill: none; stroke: var(--dial-case); stroke-width: 7; stroke-linejoin: round; pointer-events: none; }
.dial-over .dn-c.also { stroke-width: 4.5; stroke-opacity: 0.85; }
.dial-over .dn { fill: var(--c); fill-opacity: 0; stroke: var(--c); stroke-width: 3; stroke-linejoin: round; cursor: pointer; transition: fill-opacity 0.2s, opacity 0.2s; }
.dial-over .dn.f-p { stroke-dasharray: 8 4; }
.dial-over .dn.also { stroke-width: 1.8; }
.dial-over .dn:hover { fill-opacity: 0.2; }
/* a flag on each Tartary name, saying it in plain English */
.dial-over .dtag { cursor: pointer; }
.dial-over .dtag rect { fill: var(--c); stroke: var(--dial-case); stroke-width: 2; }
.dial-over .dtag text { font-family: var(--font-body); font-size: 19px; font-weight: 650; fill: var(--dial-on); }
/* the ground the sheet gives the name */
.dial-over .dland-c { stroke-width: 6.5; }
.dial-over .dland { fill: var(--c); fill-opacity: 0; stroke: var(--c); stroke-width: 3.2; stroke-linejoin: round; cursor: pointer; transition: fill-opacity 0.3s, opacity 0.2s; }
.dial-over .dland.loose { stroke-dasharray: 12 7; }
.dial-over .dland.in { stroke-width: 2.2; }
.dial-stage.lifted .dland { fill-opacity: 0.2; }
.dial-stage.lifted .dland.in { fill-opacity: 0.06; }
.dial-stage.lifted .dland-c { stroke-opacity: 0.5; }
/* the same words set in plain type, shown when the sheet is lifted */
.dial-over .dlt { display: none; font-family: var(--font-display); font-weight: 600; fill: var(--c); paint-order: stroke; stroke: var(--map-land); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.dial-over .dlt.also { font-weight: 500; }
.dial-stage.lifted .dlt { display: block; }
.dial-stage.lifted .dn, .dial-stage.lifted .dn-c { display: none; }
.dial-g.pick [data-n] { opacity: 0.2; }
.dial-g.pick .hot { opacity: 1; }
.dial-g.pick .dn.hot { stroke-width: 4.5; }
.dial-g.pick .dland.hot { stroke-width: 5; fill-opacity: 0.16; }
.dial-stage.lifted .dial-g.pick .dland.hot { fill-opacity: 0.32; }
.dial-g.ghost { opacity: 1; pointer-events: none; }
.dial-g.ghost > :not(.dland) { display: none !important; }
.dial-g.ghost > .dland { fill-opacity: 0 !important; stroke-opacity: 0.55; stroke-width: 1.7; }
.dial-road { fill: none; stroke: var(--carmine); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 9; }
.dial-town { fill: var(--pin-halo); stroke: var(--carmine); stroke-width: 3; }
.dial-town-t { font-family: var(--font-body); font-size: 26px; font-weight: 650; fill: var(--ink); paint-order: stroke; stroke: var(--map-land); stroke-width: 6px; }
:root { --dial-t: #a3213f; --dial-m: #1f5a9c; --dial-i: #2c6e2e; --dial-c: #b0500c; --dial-l: #6f3a9a; --dial-o: #5d5246; --dial-p: #7a5200; --dial-a: #514636; --dial-case: #fffdf6; --dial-on: #fbf3e1; }
.dial-year { position: absolute; left: 14px; bottom: 6px; margin: 0; font-family: var(--font-mark); font-size: clamp(2.2rem, 7vw, 5rem); line-height: 1; color: #fffdf6; text-shadow: 0 1px 0 rgba(19, 27, 30, 0.9), 0 0 14px rgba(19, 27, 30, 0.75), 0 0 3px rgba(19, 27, 30, 0.9); letter-spacing: 0.02em; pointer-events: none; font-variant-numeric: tabular-nums; }
.dial-tip { position: absolute; z-index: 3; margin: 0; transform: translate(-50%, calc(-100% - 12px)); background: var(--pin-tip); color: var(--pin-tip-ink); font-size: 0.8125rem; font-weight: 600; line-height: 1.25; padding: 5px 9px; border-radius: 4px; pointer-events: none; white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis; }

.dial-scale { display: grid; gap: 12px; padding-inline: 6px; }
.dial:not(.live) .dial-scale, .dial:not(.live) .dial-legend .muted { display: none; }
.dial-track { position: relative; height: 76px; margin-inline: 22px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.dial-rule { position: absolute; left: -22px; right: -22px; top: 30px; height: 36px; background: var(--panel); border: 1px solid var(--ink-3); border-radius: 4px; box-shadow: inset 0 -10px 14px -12px rgba(19, 27, 30, 0.25); }
.dial-rule i { position: absolute; top: 0; width: 1px; height: 8px; background: var(--ink-3); margin-left: 22px; }
.dial-rule i.mid { height: 12px; }
.dial-rule i.big { height: 16px; background: var(--ink); }
.dial-rule i b { position: absolute; top: 17px; left: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; font-style: normal; color: var(--ink-2); }
.dial-stop { position: absolute; top: 2px; width: 26px; height: 30px; margin-left: -13px; padding: 0; border: 0; background: none; cursor: pointer; }
.dial-stop::before { content: ""; position: absolute; left: 50%; top: 7px; width: 11px; height: 11px; margin-left: -5.5px; transform: rotate(45deg); background: var(--panel); border: 1.5px solid var(--ink-2); transition: background-color 0.2s, border-color 0.2s, transform 0.2s; }
.dial-stop::after { content: ""; position: absolute; left: 50%; top: 21px; width: 1px; height: 9px; background: var(--ink-3); }
.dial-stop.early::before { border-radius: 50%; }
.dial-stop:hover::before, .dial-stop:focus-visible::before { border-color: var(--carmine); }
.dial-stop.on::before { background: var(--carmine); border-color: var(--carmine); transform: rotate(45deg) scale(1.25); }
.dial-stop span { position: absolute; left: 50%; bottom: calc(100% - 2px); transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.6875rem; background: var(--pin-tip); color: var(--pin-tip-ink); padding: 2px 6px; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 4; }
.dial-stop:hover span, .dial-stop:focus-visible span { opacity: 1; }
.dial-knob { position: absolute; top: 20px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; background: var(--panel); border: 1.5px solid var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 3px 10px -2px rgba(19, 27, 30, 0.5); display: grid; place-items: center; cursor: grab; touch-action: none; z-index: 5; color: var(--ink); }
.dial-knob:active, .dial.dragging .dial-knob { cursor: grabbing; border-color: var(--carmine); }
.dial-knob:focus-visible { outline: 2px solid var(--verdigris); outline-offset: 4px; }
.dial-knob .cut { display: block; width: 46px; height: 46px; transform: rotate(var(--turn, 0deg)); }
.dial-knob::after { content: ""; position: absolute; left: 50%; top: -9px; margin-left: -5px; border: 5px solid transparent; border-top: 8px solid var(--carmine); }
.dial-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dial-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.dial-bar .btn[disabled] { opacity: 0.4; cursor: default; }
.dial-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--step--1); color: var(--ink-2); padding-inline: 6px; }
.dial-legend span { display: inline-flex; align-items: center; gap: 7px; }
.dial-legend .sw { width: 26px; height: 12px; border-radius: 2px; border: 2px solid var(--dial-t); background: none; flex: none; }
.dial-legend .sw.l { height: 16px; border-width: 3px; border-radius: 6px 3px 7px 4px; background: color-mix(in srgb, var(--dial-t) 20%, transparent); }
.dial-legend .sw.l.loose { border-style: dashed; }
.dial-legend .sw.p { border: 2px dashed var(--dial-p); }
.dial-legend .sw.a { border: 2px solid var(--dial-a); }

.dial-cards { min-width: 0; }
.dial-card { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px 48px; align-items: start; padding: 26px 6px 34px; border-top: 1px solid var(--rule); }
.dial.live .dial-card { display: none; border-top: 0; padding-top: 14px; }
.dial.live .dial-card.on { display: grid; }
.dial-card-main { display: grid; gap: 12px; min-width: 0; }
.dial-card h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); letter-spacing: -0.012em; line-height: 1.15; }
.dial-title { font-family: var(--font-display); font-style: italic; color: var(--ink-3); font-size: var(--step-0); }
.dial-says { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.5; color: var(--ink); max-width: 40rem; }
.dial-links { display: flex; flex-wrap: wrap; gap: 10px; }
.dial-fit { font-size: var(--step--1); color: var(--ink-3); max-width: 40rem; }
.dial-doubts { font-size: var(--step--1); color: var(--ink-2); max-width: 40rem; }
.dial-doubts summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.dial-doubts ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.dial-card-side { display: grid; gap: 10px; min-width: 0; align-content: start; }
.dial-card-side h3 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--carmine); }
.dial-card-side h3.quiet { color: var(--ink-3); margin-top: 10px; }
.dial-names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dial-name { display: grid; gap: 1px; text-align: left; font: inherit; padding: 7px 12px; border-radius: 8px; border: 1.5px solid var(--c, var(--dial-t)); background: var(--panel); color: var(--ink); cursor: pointer; transition: background-color 0.15s, box-shadow 0.15s; }
.dial-name b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; }
.dial-name span { font-size: 0.8125rem; color: var(--ink-3); }
.dial-name.k-people, .dial-name.k-sea { border: 1.5px dashed var(--dial-p); }
.dial-names.lands { display: grid; gap: 8px; }
.dial-name.land { width: 100%; gap: 3px; border-left-width: 7px; padding: 9px 12px 10px; }
.dial-name.land.loose { border-left-style: dashed; }
.dial-name.land .dl-size { color: var(--ink); font-weight: 600; }
.dial-name.land[aria-pressed="true"] .dl-size { color: inherit; }
.dial-name.also { border: 1.5px solid var(--rule); }
.dial-name.also b { font-weight: 500; }
.dial-name:hover { box-shadow: 0 0 0 2px var(--rule); }
.dial-name[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); border-style: solid; color: var(--panel); }
.dial-name[aria-pressed="true"] span { color: inherit; opacity: 0.75; }
.dial:not(.live) .dial-name { cursor: default; }
.dial-how { max-width: 46rem; margin-top: 40px; display: grid; gap: 14px; }
.dial-how h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); }
.dial-how p { color: var(--ink-2); }

/* the door to the dial */
.dial-door-a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 40px; align-items: center; padding: 22px; border-radius: var(--radius-l); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow); color: inherit; text-decoration: none; }
.dial-door-a:hover { border-color: var(--carmine); }
.dial-door-pic { position: relative; display: block; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--ink-3); }
.dial-thumb { display: block; width: 100%; height: auto; }
.dial-thumb .sea { fill: var(--map-water); }
.dial-thumb .land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 2; }
.dial-thumb .dland, .dial-cell .dland { fill: var(--c); fill-opacity: 0.3; stroke: var(--c); stroke-width: 7; stroke-linejoin: round; }
.dial-thumb .dland.loose, .dial-cell .dland.loose { stroke-dasharray: 24 15; }
.dial-thumb .dland.in, .dial-cell .dland.in { fill-opacity: 0; stroke-width: 4; }

/* every outline, side by side */
.dial-all { margin-top: 30px; padding: 30px 6px 0; border-top: 1px solid var(--rule); display: grid; gap: 14px; min-width: 0; }
.dial-all h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); }
.dial-all p { color: var(--ink-2); max-width: 46rem; }
.dial-grid { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px 16px; }
.dial-cell { display: grid; gap: 1px; color: inherit; text-decoration: none; font-size: var(--step--1); line-height: 1.35; }
.dial-cell svg { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--rule); margin-bottom: 7px; transition: box-shadow 0.15s; }
.dial-cell svg .sea { fill: var(--map-water); }
.dial-cell svg .land { fill: var(--map-land); stroke: var(--map-coast); stroke-width: 2; }
.dial-cell:hover svg, .dial-cell:focus-visible svg { box-shadow: 0 0 0 2px var(--carmine); }
.dial-cell.on svg { box-shadow: 0 0 0 2px var(--ink); }
.dial-cell-y { font-weight: 600; color: var(--ink); }
.dial-cell-w { color: var(--ink-2); }
.dial-cell-c { color: var(--ink-3); }
.dial-cell.none .dial-cell-c { font-style: italic; }
.dial-door-wheel { position: absolute; right: 4%; bottom: 6%; width: 22%; height: auto; aspect-ratio: 1; color: var(--ink); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.dial-door-a:hover .dial-door-wheel { transform: rotate(120deg); }
.dial-door-body { display: grid; gap: 10px; justify-items: start; }
.dial-door-t { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); letter-spacing: -0.012em; }
.dial-door-p { color: var(--ink-2); max-width: 34rem; }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dial-t: #ff8fa8; --dial-m: #8fc4ff; --dial-i: #93d98b; --dial-c: #ffb170; --dial-l: #d6aaf7; --dial-o: #cfc3b2; --dial-p: #f1c45a; --dial-a: #c3cfcc; --dial-case: #10171a; --dial-on: #10171a; } }
:root[data-theme="dark"] { --dial-t: #ff8fa8; --dial-m: #8fc4ff; --dial-i: #93d98b; --dial-c: #ffb170; --dial-l: #d6aaf7; --dial-o: #cfc3b2; --dial-p: #f1c45a; --dial-a: #c3cfcc; --dial-case: #10171a; --dial-on: #10171a; }
@media (max-width: 900px) {
  .dial-card { grid-template-columns: minmax(0, 1fr); }
  .dial-door-a { grid-template-columns: minmax(0, 1fr); }
  .dial-toggles { margin-left: 0; }
}
@media (max-width: 640px) {
  .dial-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .dial-scroll .dial-stage { width: 680px; }
  .dial-over .dtag-in { transform: scale(1.5); }
  .dial-earth .today text { font-size: 25px; }
  .dial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dial-rule i.e b { display: none; }
  .dial-stop { width: 14px; margin-left: -7px; }
  .dial-stop::before { width: 9px; height: 9px; margin-left: -4.5px; }
  .dial-track { margin-inline: 18px; }
  .dial-rule i:not(.big):not(.mid) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dial-sheets, .dial-door-wheel { transition: none; } }

/* Step 2: the shared reading room. Fine rules and paper, rather than UI pills. */
h1 { font-family: var(--font-heading); font-weight: 400; }
h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.65rem; }
h3 { font-family: var(--font-display); }
.site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-nav { font-family: var(--font-display); font-size: 1.05rem; }
.site-nav a { border-radius: 1px; }
.site-nav a[aria-current="page"] { color: var(--ink); background: transparent; box-shadow: inset 0 -2px var(--gamboge); }
.page-head h1 { font-size: clamp(2.4rem, 4vw, 3.3rem); }
.page-head { gap: 16px; }
.eyebrow, .psg-meta .ttag { letter-spacing: .14em; }
.btn, summary.btn, .pill, .trailtabs a, button.basis { border-radius: 2px; }
.btn, summary.btn { font-family: var(--font-display); font-size: 1.06rem; font-weight: 500; box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--rule-soft); }
.btn.primary { box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--rule); }
.btn.quiet { box-shadow: none; }
.trailtabs { gap: 0; border-block: 3px double var(--rule); padding-block: 8px; }
.trailtabs a { background: transparent; border-color: transparent; font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; }
.trailtabs a[aria-current="page"] { background: var(--ink); }
.filterbar input, .filterbar select { border-color: var(--rule); border-radius: 2px; background-color: var(--panel); }
.px-side { padding: 18px; border: 1px solid var(--rule); background: var(--panel); box-shadow: 3px 3px 0 -1px var(--paper), 3px 3px 0 var(--rule-soft); }
.px-layout { gap: 28px 42px; }
.psg-list { gap: 32px; }
.psg { position: relative; gap: 16px; padding: 28px 32px; border: 1px solid var(--rule); border-top: 3px double var(--rule); background: var(--panel); box-shadow: 3px 4px 0 -1px var(--paper), 3px 4px 0 var(--rule-soft), 0 14px 24px -24px #30271c99; }
.psg-meta { font-size: .79rem; }
.psg-meta .ttag { font-size: .7rem; }
.psg h3 { font-size: 1.8rem; line-height: 1.16; font-weight: 500; max-width: 34ch; }
.psg .gloss { font-size: .94rem; line-height: 1.65; }
.psg-label { display: block; font-family: var(--font-body); font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 8px; }
.psg blockquote { position: relative; margin: 2px 0 0; padding: 22px 0 6px 24px; border: 0; border-top: 1px solid var(--rule-soft); border-left: 2px solid var(--gamboge); border-radius: 0; background: transparent; }
.psg blockquote p, .psg.big blockquote p { font-size: 1.34rem; line-height: 1.55; }
.psg blockquote::before { content: "“"; position: absolute; top: -2px; left: 20px; font: 2.7rem var(--font-display); color: var(--gamboge); }
.psg-foot { padding-left: 24px; gap: 9px 12px; }
.psg-foot .who { flex-basis: 100%; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.4; }
.basis { font-size: .68rem; }
button.basis { min-height: 32px; }
.psg-links { padding: 0 0 16px 24px; border-top: 0; border-bottom: 1px solid var(--rule-soft); gap: 10px 16px; font-size: .8rem; }
.psg-copy { min-height: 34px; padding: 5px 10px; border: 1px solid var(--rule); text-decoration: none; border-radius: 2px; }
.psg-copy:hover { background: var(--sunk); text-decoration: none; }
.psg-notes { padding: 12px 15px; border-left: 2px solid var(--carmine); background: var(--carmine-soft); color: var(--ink-2); }
.psg-notes summary { color: var(--carmine); }
.psg-notes summary::before { border: 0; border-radius: 0; }
.psg-notes p { padding-left: 0; border: 0; line-height: 1.65; }
.psg-tale { border: 0; border-top: 3px double var(--rule); border-radius: 0; background: transparent; padding: 16px 0 0; }
.psg-tale-k { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.psg-tale-t { font-size: 1.2rem; }
.psg-tale-n { font-size: .75rem; }
.psg-tale::after { border-radius: 0; background: transparent; border: 1px solid var(--rule); color: var(--verdigris); }
.psg-tale:hover { box-shadow: none; }
.psg-people { font-size: .8rem; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn, .psg-copy { transition: box-shadow .2s, background-color .2s, transform .2s; }
  .btn:hover, .psg-copy:hover { transform: translateY(-1px); }
  .btn:active, .psg-copy:active { transform: translateY(0); }
  .psg { transition: box-shadow .25s; }
  .psg:focus-within { box-shadow: 3px 4px 0 -1px var(--paper), 3px 4px 0 var(--rule), 0 16px 28px -22px #30271c66; }
}
@media (max-width: 700px) {
  .psg { padding: 22px 18px; gap: 14px; }
  .psg h3, .psg.big h3 { font-size: 1.55rem; }
  .psg blockquote { padding-left: 16px; }
  .psg blockquote p, .psg.big blockquote p { font-size: 1.22rem; }
  .psg-foot, .psg-links { padding-left: 0; }
  .psg-copy { margin-left: 0; }
  .trailtabs a { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}