:root {
  --bg: #f3efe6;
  --bg-surface: #faf8f2;
  --bg-raised: #e9e3d4;
  --text-primary: #1f2419;
  --text-secondary: #46503f;
  --text-muted: #5f6858;
  --accent: #7d5a16;
  --accent-strong: #5f430e;
  --border: #d5cdb9;
  --border-strong: #b3a88c;
  --map-bg: #e6e0cf;
  --map-pin: #7d5a16;
  --map-town: #5f6858;
  --line: #4d5a3a;
  --area: rgba(77, 90, 58, 0.18);
  --grid: #cfc7b2;
  --g1: #4d7a3a; --g2: #8a8a2c; --g3: #b3702a; --g4: #9a3f2c;
  --shadow: 0 1px 3px rgba(40, 35, 20, 0.14);
  --focus: #1d5fae;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171a; --bg-surface: #1c1f23; --bg-raised: #24282d;
    --text-primary: #ede8da; --text-secondary: #c9c2ae; --text-muted: #a9a28f;
    --accent: #d9b263; --accent-strong: #e8c67d;
    --border: #363b42; --border-strong: #4d545c;
    --map-bg: #22262b; --map-pin: #d9b263; --map-town: #a9a28f;
    --line: #a8c48c; --area: rgba(168, 196, 140, 0.18); --grid: #363b42;
    --g1: #8fca74; --g2: #d0cf5e; --g3: #e39a52; --g4: #e07360;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --focus: #7ab4ff;
  }
}
:root[data-theme="dark"] {
  --bg: #15171a; --bg-surface: #1c1f23; --bg-raised: #24282d;
  --text-primary: #ede8da; --text-secondary: #c9c2ae; --text-muted: #a9a28f;
  --accent: #d9b263; --accent-strong: #e8c67d;
  --border: #363b42; --border-strong: #4d545c;
  --map-bg: #22262b; --map-pin: #d9b263; --map-town: #a9a28f;
  --line: #a8c48c; --area: rgba(168, 196, 140, 0.18); --grid: #363b42;
  --g1: #8fca74; --g2: #d0cf5e; --g3: #e39a52; --g4: #e07360;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --focus: #7ab4ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; line-height: 1.6; }
a { color: var(--accent-strong); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
section, .site-card, .profile { scroll-margin-top: 3.6rem; }

.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; height: 3.1rem; padding: 0 1rem; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.topbar .home { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.82rem; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.topbar .home:hover { color: var(--accent-strong); }
.topnav { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.85rem; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { text-decoration: none; color: var(--text-secondary); padding: 0.3rem 0; }
.topnav a[aria-current="true"], .topnav a:hover { color: var(--accent-strong); border-bottom: 2px solid var(--accent-strong); }
.spacer { flex: 1; }
.chip { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.78rem; text-decoration: none; color: var(--text-secondary); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap; }
.chip:hover { color: var(--accent-strong); border-color: var(--accent-strong); }
.icon-btn { width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; }
.icon-btn:hover { color: var(--accent-strong); border-color: var(--accent-strong); }
.icon-btn svg { display: block; }
.icon-btn svg[hidden] { display: none; }

main { max-width: 46rem; margin: 0 auto; padding: 0 1.3rem; }
.hero { padding: 3.2rem 0 1.4rem; }
.kicker { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
h1 { font-size: clamp(1.85rem, 4.4vw, 2.75rem); line-height: 1.16; margin: 0.5rem 0 1rem; letter-spacing: -0.01em; }
.deck { font-size: 1.18rem; color: var(--text-secondary); margin: 0 0 1.1rem; }
.byline { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.82rem; color: var(--text-muted); }
h2 { font-size: 1.55rem; line-height: 1.25; margin: 2.8rem 0 0.9rem; }
h3 { font-size: 1.2rem; margin: 2rem 0 0.6rem; }
h4 { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 1.4rem 0 0.35rem; }
p { margin: 0 0 1.05rem; }
.lede { font-size: 1.06rem; }

.callout-section { margin-top: 0.6rem; }
.callout { background: var(--bg-raised); border-left: 3px solid var(--accent); border-radius: 0.3rem; padding: 1rem 1.2rem; font-size: 0.98rem; }
.callout h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.callout p { margin: 0; }

.map-wrap, .alt-wrap { margin: 1.4rem 0 1.8rem; }
.map-svg { width: 100%; height: auto; display: block; }
.map-svg .map-bg { fill: var(--map-bg); }
.map-svg .map-relief { opacity: 0.11; mix-blend-mode: multiply; }
[data-theme="dark"] .map-svg .map-relief { opacity: 0.08; mix-blend-mode: screen; filter: invert(1); }
.map-svg .town circle { fill: var(--map-town); }
.map-svg .town text { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 13px; fill: var(--text-secondary); paint-order: stroke; stroke: var(--map-bg); stroke-width: 3px; stroke-linejoin: round; }
.map-svg .pin { fill: var(--map-pin); stroke: var(--bg-surface); stroke-width: 2; cursor: pointer; }
.map-svg .pin:hover, .map-svg .pin:focus-visible { r: 10; }
.map-svg .pin-label { font-family: Georgia, serif; font-size: 15px; font-weight: bold; fill: var(--text-primary); pointer-events: none; paint-order: stroke; stroke: var(--map-bg); stroke-width: 4px; stroke-linejoin: round; }
.map-svg .label-leader { stroke: var(--text-muted); stroke-width: 1; opacity: 0.72; pointer-events: none; }
.map-svg .scale line { stroke: var(--text-secondary); stroke-width: 1.5; }
.map-svg .scale text { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; fill: var(--text-secondary); }
.map-svg .inset rect:first-child { fill: var(--bg-surface); stroke: var(--border); }
.map-svg .inset-land { fill: var(--bg-raised); stroke: var(--text-muted); stroke-width: 1.2; }
.map-svg .inset-box { fill: none; stroke: var(--accent); stroke-width: 2; }
.map-caption, .table-caption { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.6rem; }

.alt-svg { width: 100%; height: auto; display: block; }
.alt-svg .grid { stroke: var(--grid); stroke-width: 1; }
.alt-svg .tick, .alt-svg .axis, .alt-svg .legend text { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; fill: var(--text-muted); }
.alt-svg .row-label { font-family: Georgia, serif; font-size: 14px; fill: var(--text-primary); }
.alt-svg .bar { stroke: var(--line); stroke-width: 6; stroke-linecap: round; }
.alt-svg .dot-from { fill: var(--bg-surface); stroke: var(--line); stroke-width: 2; }
.alt-svg .dot-summit { fill: var(--accent); }
.alt-svg .val { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 13px; font-weight: 600; fill: var(--text-primary); }

.profiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.6rem; margin: 1.4rem 0; }
.profile { margin: 0; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.8rem 0.9rem 0.5rem; }
.profile figcaption { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.4rem; font-family: -apple-system, "Segoe UI", sans-serif; }
.profile-name { font-family: Georgia, serif; font-size: 1.05rem; font-weight: bold; color: var(--text-primary); text-decoration: none; }
.profile-name:hover { color: var(--accent-strong); }
.profile-stats { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.8rem; color: var(--text-secondary); }
.profile-stats b { color: var(--text-primary); }
.profile-kind { font-size: 0.72rem; color: var(--text-muted); }
.profile-svg { width: 100%; height: auto; display: block; }
.profile-svg .grid { stroke: var(--grid); stroke-width: 1; }
.profile-svg .tick { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 10px; fill: var(--text-muted); }
.profile-svg .area { fill: var(--area); }
.profile-svg .line { fill: none; stroke: var(--line); stroke-width: 2.2; stroke-linejoin: round; }
.profile-svg.schematic .line { stroke-dasharray: 5 4; }
.profile-svg .end { fill: var(--accent); }

.site-card { margin: 2.6rem 0; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.site-card:last-child { border-bottom: none; }
.site-head h3 { font-size: 1.5rem; margin: 0 0 0.2rem; }
.site-sub { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.82rem; color: var(--text-muted); margin: 0 0 0.6rem; }
.site-figs { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.84rem; color: var(--text-secondary); margin: 0 0 1rem; }
.site-figs b { font-size: 1.05rem; color: var(--text-primary); }
.site-figure { margin: 0 0 1rem; }
.site-figure img { width: 100%; height: auto; border-radius: 0.4rem; display: block; box-shadow: var(--shadow); }
.site-figure figcaption { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.45rem; }
.site-sources { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.78rem; color: var(--text-muted); padding-left: 1.1rem; }
.site-sources a { color: var(--text-muted); }

table.visit-table { width: 100%; border-collapse: collapse; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.88rem; margin: 1.2rem 0; }
table.visit-table th, table.visit-table td { text-align: left; padding: 0.55rem 0.6rem 0.55rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
table.visit-table th { color: var(--text-muted); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; width: 7.5rem; padding-right: 0.8rem; }

.table-wrap { overflow-x: auto; }
table.chrono-table, table.state-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.chrono-table th, table.chrono-table td, table.state-table th, table.state-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.6rem 0.6rem 0; border-bottom: 1px solid var(--border); }
table.chrono-table th[scope="row"] { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.8rem; white-space: nowrap; color: var(--text-secondary); font-weight: 600; width: 9rem; }
.cdots { white-space: nowrap; }
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; background: var(--border); margin-right: 3px; }
.cdot.on { background: var(--accent); }
.cdot-legend { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.76rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: 0.6rem; }
.cdot-key .cdot { margin-right: 5px; }
table.state-table thead th { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
table.state-table th[scope="row"] { white-space: nowrap; font-weight: bold; }
table.state-table td { font-size: 0.88rem; }
table.state-table { min-width: 40rem; }
.grade { display: inline-block; min-width: 1.5rem; text-align: center; font-family: -apple-system, "Segoe UI", sans-serif; font-weight: 700; font-size: 0.8rem; color: #fff; border-radius: 0.25rem; padding: 0.1rem 0.35rem; margin-right: 0.3rem; }
.grade.g1 { background: var(--g1); } .grade.g2 { background: var(--g2); } .grade.g3 { background: var(--g3); } .grade.g4 { background: var(--g4); }
:root[data-theme="dark"] .grade, :root:not([data-theme="light"]) .grade { color: #15171a; }
:root[data-theme="light"] .grade { color: #fff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .grade { color: #fff; } }

.sources-list { font-size: 0.9rem; padding-left: 1.2rem; }
.sources-list li { margin-bottom: 0.45rem; }

footer.site-footer { border-top: 1px solid var(--border); margin-top: 3rem; padding: 1.6rem 1.3rem 2.4rem; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.82rem; color: var(--text-muted); max-width: 46rem; margin-left: auto; margin-right: auto; }
footer.site-footer a { color: var(--text-muted); }
footer.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 0.8rem; }

.rail { position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 0.7rem; z-index: 20; }
.rail a { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; position: relative; }
.rail .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--border-strong); transition: transform 0.15s, background 0.15s; }
.rail a[aria-current="true"] .dot { background: var(--accent-strong); transform: scale(1.45); }
.rail .label { position: absolute; right: 100%; margin-right: 0.6rem; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 0.76rem; color: var(--text-secondary); opacity: 0; transform: translateX(4px); transition: opacity 0.15s, transform 0.15s; white-space: nowrap; pointer-events: none; }
.rail a:hover .label, .rail a:focus-visible .label { opacity: 1; transform: translateX(0); }
@media (min-width: 76rem) { .rail { display: flex; } }
@media print { .rail, .topbar { display: none; } }

@media (max-width: 40rem) {
  .profiles { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  main { padding: 0 1rem; }
  .hero { padding-top: 2.2rem; }
  table.visit-table th { width: 5.6rem; }
  .map-svg .pin-label { font-size: 17px; }
  .map-svg .town text { font-size: 14px; }
}