:root {
  --void: #F6F3EC;
  --ink: #1B2838;
  --panel: #FFFDF8;
  --panel-strong: #FFFDF8;
  --line: #D3CBBC;
  --paper: #1B2838;
  --paper-dim: #5C6570;
  --sodium: #2C5874;
  --tide: #2C5874;
  --flare: #B85A2A;
  --mist: #5C6570;
  --ok: #2C5874;
  --danger: #8B2E1F;
  --shadow: 0 8px 24px rgba(27, 40, 56, 0.12);
  --sans: Georgia, "Times New Roman", serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, Consolas, monospace;
  --bg: #F6F3EC;
  --focus: #2C5874;
}

html { color-scheme: light; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow: auto;
  font-size: 1.125rem;
  line-height: 1.55;
}
h1, h2, h3, .mark, .eyebrow, .hud-kicker {
  font-family: Georgia, "Times New Roman", serif;
}
a { color: #2C5874; }
a:hover { color: #B85A2A; }

.skip {
  position: absolute;
  left: -999px;
  top: 0;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 80;
  background: #1B2838;
  color: #F6F3EC;
  padding: 12px 16px;
  min-height: 44px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

#map { background: #dce6ee; }
.map-veil {
  background:
    linear-gradient(180deg, rgba(246, 243, 236, 0.92) 0%, rgba(246, 243, 236, 0.35) 18%, transparent 42%, rgba(246, 243, 236, 0.75) 100%);
}
body.route-text .map-veil { background: rgba(246, 243, 236, 0.92); }
body.route-city .map-veil {
  background: linear-gradient(180deg, rgba(246, 243, 236, 0.7) 0%, transparent 22%, rgba(246, 243, 236, 0.65) 100%);
}

.hud-top {
  background: #F6F3EC;
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
}
.mark { color: var(--ink); letter-spacing: 0.08em; font-size: 0.95rem; }
.mark svg { color: var(--ink); }
.nav { text-transform: none; letter-spacing: 0; font-size: 1rem; gap: 8px; }
.nav a {
  color: var(--ink);
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
}
.nav a:hover, .nav a[aria-current="page"] { color: #B85A2A; }
.nav-toggle {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;
  background: #1B2838;
  color: #F6F3EC;
  border: 0;
}
.chip, .inspector-close, .btn, .hud-search input, #search-hits button {
  min-height: 44px;
}
.chip {
  background: #FFFDF8;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 10px 14px;
}
.chip.on {
  background: #2C5874;
  color: #fff;
  border-color: #2C5874;
}
.hud-layers {
  background: #FFFDF8;
  border: 1px solid var(--line);
  color: var(--ink);
}
.hud-ticker {
  background: #FFFDF8;
  color: var(--ink);
  border: 1px solid var(--line);
}
.inspector {
  background: #FFFDF8;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.stage { color: var(--ink); }
.hero h1, .panel h2 { color: var(--ink); }
.lede, .lead, .prose, p { color: var(--ink); }
.eyebrow, .hud-kicker { color: #B85A2A; }
.card {
  background: #FFFDF8;
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 44px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  background: #1B2838;
  color: #F6F3EC;
  text-decoration: none;
  border: 0;
}
.btn.ghost {
  background: transparent;
  color: #1B2838;
  border: 1px solid var(--line);
}
.hud-search input {
  background: #FFFDF8;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 10px 12px;
}
#search-hits {
  background: #FFFDF8;
  border: 1px solid var(--line);
  color: var(--ink);
}
#search-hits button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 12px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}