/* Inter (SIL OFL 1.1, rsms/inter), self-hosted variable font: one file per subset covers every weight.
   latin-ext carries the Hausa hooked letters (ɓ ɗ ƙ ƴ) and is fetched only when they appear. */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(vendor/inter/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(vendor/inter/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* CloudKlass e-Tour: map-and-story tour engine.
   CloudKlass neutrals and Inter (BRAND.md), with the e-Tour accent: a laterite/terracotta taken from the
   earth walls and dye pits the first pack is about. Teacher AI features keep the Teacher AI blue. */
:root {
  color-scheme: light;
  --ground: #eef1f5;
  --panel: #ffffff;
  --panel-2: #f5f7fa;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --rule: #e2e8f0;
  --accent: #b4432a;
  --accent-strong: #8a2f1b;
  --accent-50: #fbeee9;
  --on-accent: #ffffff;
  --ta: #2563eb;
  --ta-50: #eff6ff;
  --ok: #047857;
  --focus: #b4432a;
  --shadow: 0 1px 2px rgb(15 23 42 / .06), 0 8px 24px rgb(15 23 42 / .10);

  --m-bg: #e6e3dc;
  --m-neigh: #e4e1d8;
  --m-land: #f3eee2;
  --m-core: #f6e6d9;
  --m-state: #b59c80;
  --m-lga: #d6c6b1;
  --m-water: #6ea7c9;
  --m-road: #c98d62;
  --m-rail: #8a8175;
  --m-label: #3f3a33;
  --m-label-halo: rgb(243 238 226 / .92);

  --k-town: #1e3a5f;
  --k-history: #b4432a;
  --k-palace: #8d4a8f;
  --k-faith: #4f46a5;
  --k-museum: #8a5a2b;
  --k-market: #b7791f;
  --k-craft: #c2410c;
  --k-origins: #6b4f2a;
  --k-nature: #2f6b4f;
  --k-water: #1f6f99;
  --k-colonial: #475569;
  --k-story: #7c2d12;

  --f: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --panel-w: clamp(320px, 36vw, 470px);
  --top-h: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0b111c; --panel: #111827; --panel-2: #162033; --ink: #f1f5f9; --ink-2: #cbd5e1; --muted: #94a3b8; --rule: #243049;
    --accent: #e2805f; --accent-strong: #f3a88e; --accent-50: #2d1a14; --on-accent: #1a0d08; --ta: #93c5fd; --ta-50: #12213d; --ok: #6ee7b7; --focus: #f3a88e;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .35);
    --m-bg: #141a24; --m-neigh: #161d28; --m-land: #1d2432; --m-core: #2a211f; --m-state: #7a6450; --m-lga: #3a3530; --m-water: #3b7fa8;
    --m-road: #a7704c; --m-rail: #7b756c; --m-label: #e2e8f0; --m-label-halo: rgb(17 24 39 / .9);
    --k-town: #93c5fd; --k-history: #f0906d; --k-palace: #d8a1da; --k-faith: #a5a1f0; --k-museum: #d4a373; --k-market: #f2c14e;
    --k-craft: #fb923c; --k-origins: #c9a574; --k-nature: #74c393; --k-water: #6ec3ea; --k-colonial: #a8b4c4; --k-story: #fca98b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b111c; --panel: #111827; --panel-2: #162033; --ink: #f1f5f9; --ink-2: #cbd5e1; --muted: #94a3b8; --rule: #243049;
  --accent: #e2805f; --accent-strong: #f3a88e; --accent-50: #2d1a14; --on-accent: #1a0d08; --ta: #93c5fd; --ta-50: #12213d; --ok: #6ee7b7; --focus: #f3a88e;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .35);
  --m-bg: #141a24; --m-neigh: #161d28; --m-land: #1d2432; --m-core: #2a211f; --m-state: #7a6450; --m-lga: #3a3530; --m-water: #3b7fa8;
  --m-road: #a7704c; --m-rail: #7b756c; --m-label: #e2e8f0; --m-label-halo: rgb(17 24 39 / .9);
  --k-town: #93c5fd; --k-history: #f0906d; --k-palace: #d8a1da; --k-faith: #a5a1f0; --k-museum: #d4a373; --k-market: #f2c14e;
  --k-craft: #fb923c; --k-origins: #c9a574; --k-nature: #74c393; --k-water: #6ec3ea; --k-colonial: #a8b4c4; --k-story: #fca98b;
}

html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15.5px/1.55 var(--f); -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
a { color: var(--accent-strong); text-underline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 3000; background: var(--ink); color: var(--panel); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- top bar ---------- */
.topbar { height: var(--top-h); flex: none; display: flex; align-items: center; gap: 16px; padding-inline: 16px; background: var(--panel); border-bottom: 1px solid var(--rule); position: relative; z-index: 1100; }
.brand { display: flex; align-items: baseline; gap: 6px; background: none; border: 0; padding: 0; color: var(--ink); white-space: nowrap; }
.brand-et { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.brand-pack { font-weight: 600; font-size: 14px; color: var(--muted); padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--rule); }
/* "by CloudKlass" endorsement, as on the Teacher AI nav (BRAND.md §1: endorsement, not unification) */
.ck-sub { display: flex; align-items: center; gap: 6px; flex: none; padding-left: 10px; border-left: 1px solid var(--rule); color: var(--muted); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.ck-sub img { height: 16px; width: auto; opacity: .7; }
.ck-sub:hover { color: var(--ta); }
/* the CloudKlass logo PNG has an opaque off-white ground: on dark surfaces show it as a small light tile */
:root[data-theme="dark"] .ck-sub img { background: #f8fafa; border-radius: 4px; padding: 1px; opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ck-sub img { background: #f8fafa; border-radius: 4px; padding: 1px; opacity: 1; } }
/* Back to Teacher AI, shown only when the tour was opened from the dashboard card (app.js, "back link") */
.ck-back { display: flex; align-items: center; gap: 6px; flex: none; padding: 5px 11px 5px 9px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ta); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ck-back[hidden] { display: none; }
.ck-back:hover, .ck-back:focus-visible { background: var(--panel-2); }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-left: 4px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { border: 0; background: none; padding: 8px 11px; border-radius: 8px; white-space: nowrap; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.tabs button:hover { background: var(--panel-2); }
.tabs button[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); border-radius: 8px 8px 0 0; }
.tabs .tab-teach { color: var(--ta); }
.alltours { margin-left: auto; flex: none; font-weight: 600; font-size: 13px; color: var(--muted); text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.alltours:hover { color: var(--ink); border-color: var(--ink-2); }
.tabs .tab-teach[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ta); }

/* ---------- stage: panel and map each own a column ---------- */
.stage { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: var(--panel-w) minmax(0, 1fr); }
.mapwrap { position: relative; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--m-bg); }
.leaflet-container { font-family: var(--f); background: var(--m-bg); }
.leaflet-control-zoom a { background: var(--panel) !important; color: var(--ink) !important; border-color: var(--rule) !important; }
.leaflet-control-scale-line { background: rgb(255 255 255 / .8); border-color: var(--ink-2); color: var(--ink); font: 600 11px var(--f); }
.leaflet-control-attribution { background: rgb(255 255 255 / .8) !important; color: var(--muted) !important; font: 11px var(--f); }
.leaflet-control-attribution a { color: var(--muted); }
:root[data-theme="dark"] .leaflet-control-scale-line, :root[data-theme="dark"] .leaflet-control-attribution { background: rgb(17 24 39 / .8) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-control-scale-line, :root:not([data-theme="light"]) .leaflet-control-attribution { background: rgb(17 24 39 / .8) !important; } }

.panel { position: relative; z-index: 1000; min-width: 0; min-height: 0; background: var(--panel); border-right: 1px solid var(--rule); display: flex; flex-direction: column; overflow: hidden; }
.panel-scroll { overflow-y: auto; overflow-x: hidden; padding: 20px 22px 28px; scroll-behavior: smooth; overscroll-behavior: contain; outline: none; }
.sheet-handle { display: none; }

.crumbs { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; }
.back { border: 1px solid var(--rule); background: var(--panel-2); border-radius: 999px; padding: 4px 12px 4px 9px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.back:hover { border-color: var(--ink-2); }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.kicker .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; display: inline-block; }
h1, h2, h3 { text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-weight: 800; font-size: 30px; line-height: 1.08; letter-spacing: -.02em; margin: 6px 0 4px; }
h2 { font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; margin: 24px 0 8px; }
h3 { font-weight: 700; font-size: 16px; line-height: 1.25; margin: 16px 0 6px; }
.ha { font-weight: 600; font-size: 14px; color: var(--muted); }
.ha b { color: var(--ink-2); }
.tag { font-size: 17px; line-height: 1.4; color: var(--ink-2); margin: 8px 0 12px; }
p { margin: 0 0 12px; max-width: 68ch; }
.lede { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.small { font-size: 13.5px; color: var(--muted); }
.fnote { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-top: 6px; }
.fixit { font-size: 13px; margin: 18px 0 4px; padding-top: 10px; border-top: 1px dashed var(--rule); }
.fixit a { color: var(--muted); }
.fixit a:hover, .fixit a:focus-visible { color: var(--ink); }
.panel-scroll > :last-child { margin-bottom: 0; }

.hero-title { font-weight: 800; font-size: 38px; line-height: 1; letter-spacing: -.025em; margin: 6px 0 10px; }
.hero-title em { font-style: normal; color: var(--accent); }
.series { font-size: 13px; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 10px; margin: 8px 0 14px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 6px; }
.stat { border-top: 2px solid var(--ink); padding-top: 6px; }
.stat b { display: block; font-weight: 800; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--muted); line-height: 1.25; display: block; }
.review { font-size: 13px; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px; margin: 12px 0; }

.btn { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); border-radius: 9px; padding: 8px 13px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--ink-2); background: var(--panel-2); }
.btn.ta { background: var(--ta); border-color: var(--ta); color: #fff; }
.btn.ta:hover { filter: brightness(.92); }
.btn .ic { width: 13px; height: 13px; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.chip { border: 1px solid var(--rule); background: var(--panel-2); border-radius: 999px; padding: 4px 11px 4px 9px; font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; text-align: left; }
.chip:hover { border-color: var(--ink-2); }
.chip .sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chip small { font-weight: 500; color: var(--muted); }
.chip.on, .chip[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.chip.on small { color: inherit; opacity: .75; }

.pill { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.pill.nm { background: var(--accent-50); color: var(--accent-strong); }
.pill.tl { background: var(--ta-50); color: var(--ta); }
.pill.whs { background: var(--ta); color: var(--on-accent); }
.badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }

.photo { margin: -20px -22px 14px; position: relative; background: var(--panel-2); }
.photo img { display: block; width: 100%; height: 240px; object-fit: cover; }
.photo figcaption, .mapcard figcaption { position: absolute; right: 8px; bottom: 6px; font-size: 11px; line-height: 1.2; color: #fff; background: rgb(0 0 0 / .5); padding: 3px 7px; border-radius: 4px; max-width: 85%; }
.photo figcaption a { color: #fff; }
.photo.hero img { height: 170px; }
.mapcard { margin: -20px -22px 14px; position: relative; background: var(--m-bg); height: 200px; }
.mapcard svg { display: block; width: 100%; height: 100%; }
.mapcard .st { fill: var(--m-land); stroke: var(--m-state); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mapcard .st.on { fill: var(--m-core); stroke: var(--accent); stroke-width: 1.6; }
.mapcard .rv { fill: none; stroke: var(--m-water); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.mapcard .pt { fill: var(--accent); stroke: var(--panel); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.mapcard figcaption { background: rgb(15 23 42 / .72); }
.thumb { float: right; width: 112px; margin: 3px 0 6px 12px; }
.thumb img { width: 112px; height: 84px; object-fit: cover; border-radius: 6px; display: block; }
.thumb figcaption { font-size: 10px; line-height: 1.2; color: var(--muted); margin-top: 2px; }
.thumb figcaption a { color: var(--muted); }
.panel-scroll p { display: flow-root; }

.section-rule { border: 0; border-top: 1px solid var(--rule); margin: 22px 0; }
.box { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; margin: 12px 0; background: var(--panel-2); }
.box h3 { margin-top: 0; }
.box.note { border-left: 4px solid var(--accent); }
.box.caution { border-left: 4px solid #b45309; }
.badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; vertical-align: middle; }
.badge.verified { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.badge.computed { background: color-mix(in srgb, var(--ta) 14%, transparent); color: var(--ta); }
.badge.tradition { background: color-mix(in srgb, #b45309 16%, transparent); color: #b45309; }

.facts { list-style: none; padding: 0; margin: 8px 0 0; }
.facts li { padding: 7px 0 7px 22px; border-top: 1px dotted var(--rule); position: relative; font-size: 15px; }
.facts li::before { content: "✓"; position: absolute; left: 2px; top: 7px; color: var(--ok); font-weight: 700; font-size: 13px; }
sup.ref a { font-weight: 700; font-size: 11px; text-decoration: none; padding: 0 2px; }
.srclist { padding-left: 22px; margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.srclist li { margin: 4px 0; overflow-wrap: anywhere; }
.srclist .by { color: var(--muted); }
.srclist .t { color: var(--ink); }

.list { list-style: none; padding: 0; margin: 6px 0; }
.list > li { border-top: 1px solid var(--rule); }
.list > li:last-child { border-bottom: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 10px 2px; color: var(--ink); }
.row:hover { background: var(--panel-2); }
.row .sw { width: 11px; height: 11px; border-radius: 50%; }
.row .t { font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.row .s { grid-column: 2; font-size: 13px; color: var(--muted); line-height: 1.35; }
.row .n { font-weight: 600; font-size: 13px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- classroom (Teacher AI) ---------- */
.teach { border: 1px solid color-mix(in srgb, var(--ta) 25%, var(--rule)); background: var(--ta-50); border-radius: 12px; padding: 12px 14px; margin: 14px 0; }
.teach h3 { margin: 0 0 6px; color: var(--ta); font-size: 15px; }
.teach p { font-size: 14px; margin: 0 0 8px; }
.teach .subj { font-weight: 600; color: var(--ink); }
.topics { margin: 6px 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.topics li { background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; }
.topics li.hit { border-color: var(--ta); box-shadow: 0 0 0 1px var(--ta); }
.topics .lv { display: block; font-size: 11.5px; font-weight: 700; color: var(--ta); }
.topics .tp { color: var(--ink); font-weight: 600; }
.topics .why { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.topics details { margin-top: 3px; font-size: 12.5px; }
.topics summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.topics .obj { white-space: pre-wrap; margin-top: 4px; color: var(--ink-2); }
.teachbar { display: grid; gap: 8px; margin: 10px 0 14px; }
.teachbar select { width: 100%; border: 1px solid var(--rule); background: var(--panel); border-radius: 8px; padding: 7px 9px; font-size: 14px; }

/* ---------- journeys ---------- */
.player { display: flex; gap: 6px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.progress { font-weight: 600; font-size: 13px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.stops { list-style: none; padding: 0; margin: 10px 0; counter-reset: s; }
.stops li { position: relative; padding: 0 0 0 34px; }
.stops li::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--rule); }
.stops li:first-child::before { top: 14px; }
.stops li:last-child::before { bottom: calc(100% - 14px); }
.stops .leg { font-size: 12px; color: var(--muted); padding: 2px 0 6px; font-variant-numeric: tabular-nums; }
.stops .stop { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 6px 8px; border-radius: 8px; color: var(--ink); }
.stops .stop::before { counter-increment: s; content: counter(s); position: absolute; left: 1px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 2px solid var(--route, var(--ink)); font-weight: 700; font-size: 11px; line-height: 18px; text-align: center; color: var(--ink); }
.stops .stop:hover { background: var(--panel-2); }
.stops li.cur .stop { background: var(--panel-2); }
.stops li.cur .stop::before { background: var(--route, var(--ink)); color: #fff; }
.stops .stop b { font-weight: 700; font-size: 15px; display: block; }
.stops .stop span { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; display: block; }

/* ---------- story ---------- */
.ic { width: 14px; height: 14px; flex: none; display: inline-block; vertical-align: -2px; }
.strand { display: grid; grid-template-columns: 1fr 1fr; margin: 10px 0 4px; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.strand button { border: 0; background: var(--panel-2); padding: 9px 12px 8px; text-align: left; font-weight: 700; font-size: 15px; line-height: 1.15; color: var(--ink-2); display: flex; flex-direction: column; gap: 3px; }
.strand button + button { border-left: 1px solid var(--rule); }
.strand button small { font-weight: 500; font-size: 12px; color: var(--muted); }
.strand button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.strand button[aria-pressed="true"] small { color: inherit; opacity: .75; }
.narrator { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: 13px; color: var(--muted); }
.nar-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); background: transparent; border-radius: 999px; padding: 5px 11px 5px 9px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.nar-toggle[aria-pressed="true"] { border-color: var(--ok); color: var(--ok); }
.narrator select { border: 1px solid var(--rule); background: var(--panel-2); border-radius: 6px; padding: 4px 6px; font-weight: 600; font-size: 13px; color: var(--ink); max-width: 100%; }
.narrator select:disabled { opacity: .5; }
.nar-state, .nar-disc { flex-basis: 100%; }
.nar-state { color: var(--accent-strong); }
.listen { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink-2); border-radius: 999px; padding: 3px 10px 3px 8px; font-weight: 700; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; vertical-align: 1px; }
.listen .ic { width: 11px; height: 11px; }
.listen:hover { border-color: var(--ink-2); color: var(--ink); }
.listen.block { margin-top: 4px; }
.listen.on { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.bars i { width: 2px; height: 100%; background: currentColor; border-radius: 1px; animation: bar .9s ease-in-out infinite; transform-origin: bottom; }
.bars i:nth-child(2) { animation-delay: -.3s; }
.bars i:nth-child(3) { animation-delay: -.6s; }
@keyframes bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.era { margin: 22px 0 6px; padding-top: 10px; border-top: 3px solid var(--era, var(--ink)); }
.era h2 { margin: 2px 0 4px; }
.era.on > h2 { text-decoration: underline; text-decoration-color: var(--era); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.era .span { font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.era-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.event { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 10px 4px; border-top: 1px dotted var(--rule); cursor: pointer; border-radius: 6px; }
.event:hover, .event.on { background: var(--panel-2); }
.event .y { font-weight: 700; font-size: 13.5px; line-height: 1.25; color: var(--era, var(--ink)); }
.event h3 { margin: 0 0 3px; font-size: 15px; }
.event p { font-size: 14.5px; margin: 0 0 4px; }
.kind { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--era, var(--ink)); }
.moment.dia .kind { background: color-mix(in srgb, var(--era) 18%, transparent); border: 1.5px solid var(--era); color: var(--ink); padding: 3px 6px 2px 4px; border-radius: 4px; }
.ex { margin: 8px 0 6px; overflow-x: auto; }
.ex table { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ex th { text-align: left; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--era, var(--rule)); padding: 3px 8px 4px 0; }
.ex td { border-bottom: 1px solid var(--rule); padding: 5px 8px 5px 0; color: var(--ink); vertical-align: top; }
.ex .fnote { margin-top: 4px; }
.maphint { font-size: 12.5px; color: var(--muted); margin: 4px 0; }

/* ---------- culture ---------- */
.theme-card { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; margin: 12px 0; background: var(--panel); }
.theme-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.theme-card .in { padding: 12px 14px; }
.theme-card h3 { margin: 0 0 6px; font-size: 18px; }
.theme-card dl { margin: 0; }
.theme-card dt { font-weight: 700; font-size: 15px; margin-top: 10px; }
.theme-card dd { margin: 2px 0 0; font-size: 14.5px; display: flow-root; }
.credit { font-size: 11px; line-height: 1.3; color: var(--muted); padding: 4px 14px 0; }

/* ---------- map tools, markers, labels ---------- */
.map-tools { position: absolute; z-index: 1000; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tool { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 7px 11px; font-weight: 600; font-size: 13px; box-shadow: var(--shadow); }
.tool svg { width: 17px; height: 17px; }
.tool[aria-expanded="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.layers-box { width: 240px; background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); padding: 10px 12px; font-size: 13.5px; }
.layers-box label { display: flex; gap: 8px; align-items: center; padding: 4px 0; cursor: pointer; }
.layers-box input { accent-color: var(--accent); }
.layers-box h4 { margin: 6px 0 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.map-note { position: absolute; z-index: 1000; left: 50%; transform: translateX(-50%); top: 12px; background: var(--ink); color: var(--panel); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13px; box-shadow: var(--shadow); max-width: calc(100% - 40px); }

.pm { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 2px solid var(--m-land); box-shadow: 0 0 0 1px rgb(0 0 0 / .25), 0 2px 4px rgb(0 0 0 / .25); display: grid; place-items: center; transition: transform .15s; }
.pm svg { width: 11px; height: 11px; color: #fff; }
.pm.t2 { width: 15px; height: 15px; } .pm.t2 svg { width: 9px; height: 9px; }
.pm.t3 { width: 12px; height: 12px; } .pm.t3 svg { display: none; }
.pm.sel { transform: scale(1.35); box-shadow: 0 0 0 3px var(--accent), 0 2px 6px rgb(0 0 0 / .35); }
.pm.hl { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent), 0 2px 6px rgb(0 0 0 / .3); }
.pm.dim { opacity: .3; }
.lbl { font-weight: 600; font-size: 12.5px; line-height: 1; color: var(--m-label); white-space: nowrap; text-shadow: 0 0 2px var(--m-label-halo), 0 0 3px var(--m-label-halo), 0 0 5px var(--m-label-halo); pointer-events: none; }
.lbl.town { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.lbl.place { font-weight: 700; font-size: 13px; color: var(--ink); }
.lbl.state { font-weight: 800; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--m-state); }
.lbl.country { font-weight: 700; font-size: 13px; letter-spacing: .45em; text-transform: uppercase; color: var(--muted); text-shadow: none; opacity: .7; }
.lbl.river { font-style: italic; font-weight: 500; font-size: 12px; color: var(--m-water); letter-spacing: .08em; }
.lbl.area { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.lbl.area i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); flex: none; }
.pin-x { position: relative; width: 12px; height: 12px; }
.pin-x i { position: absolute; inset: 2px; transform: rotate(45deg); border: 2px solid var(--ink); background: var(--panel); }
.pin-x span { position: absolute; left: 15px; top: -2px; font-weight: 600; font-size: 12px; color: var(--ink-2); white-space: nowrap; text-shadow: 0 0 2px var(--m-label-halo), 0 0 3px var(--m-label-halo), 0 0 5px var(--m-label-halo); }
.traveller { width: 16px; height: 16px; border-radius: 50%; background: var(--panel); border: 4px solid var(--route, var(--accent)); box-shadow: 0 0 0 4px rgb(255 255 255 / .35), 0 2px 8px rgb(0 0 0 / .35); }
.leaflet-tooltip.tt { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow); font-weight: 600; font-size: 13px; line-height: 1.25; padding: 5px 8px; border-radius: 6px; }
.leaflet-tooltip.tt small { display: block; font-weight: 500; color: var(--muted); }
.leaflet-tooltip.tt::before { display: none; }

@media (max-width: 1120px) {
  .topbar { gap: 10px; }
  .tabs button { padding: 8px 8px; font-size: 13.5px; }
  .brand-pack { display: none; }
  .ck-sub span { display: none; }
  .ck-back { padding: 5px 9px; }
  .ck-back-t { display: none; }
}

/* ---------- narrow windows (phones, or a desktop zoomed in): map above, panel below ---------- */
@media (max-width: 820px) {
  :root { --top-h: 92px; --map-h: 40%; }
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--map-h) minmax(0, 1fr); }
  .stage.map-big { --map-h: 68%; }
  .stage.panel-big { --map-h: 22%; }
  .mapwrap { order: -1; }
  .panel { border-right: 0; border-top: 1px solid var(--rule); box-shadow: 0 -6px 18px rgb(15 23 42 / .08); }
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--top-h); align-content: center; gap: 4px 12px; padding-block: 8px; }
  .brand { min-width: 0; overflow: hidden; }
  .brand-pack { display: inline; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
  .brand-et { font-size: 17px; }
  .tabs { order: 3; width: 100%; margin: 0 -16px; padding: 0 12px; }
  .alltours { padding: 4px 9px; font-size: 12px; }
  .sheet-handle { display: grid; place-items: center; flex: none; height: 22px; border: 0; background: none; padding: 0; }
  .sheet-handle span { width: 44px; height: 5px; border-radius: 3px; background: var(--rule); }
  .panel-scroll { padding: 4px 16px 24px; }
  .photo, .mapcard { margin: -4px -16px 12px; }
  .photo img { height: 190px; }
  .mapcard { height: 170px; }
  h1 { font-size: 26px; }
  .hero-title { font-size: 32px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .map-tools { top: 8px; right: 8px; }
  .tool span { display: none; }
  .tool { padding: 8px; }
  .event { grid-template-columns: 70px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .bars i { animation: none; transform: scaleY(.8); }
}