:root {
  --bg: #f6f1e6;
  --bg-surface: #fffdf8;
  --bg-raised: #ece3cf;
  --text-primary: #1f1911;
  --text-secondary: #463c2c;
  --text-muted: #6a5d48;
  --accent: #8a4a1f;
  --accent-strong: #6b3814;
  --unesco: #1d5fae;
  --danger: #a8321f;
  --border: #d9cdb2;
  --border-strong: #b7a77c;
  --map-land: #e6dcc0;
  --map-region: #cfb881;
  --map-outline: #a08a5e;
  --pin: #8a4a1f;
  --pin-b: #b48a5a;
  --pin-nolmi: #8d8474;
  --shadow: 0 1px 3px rgba(40, 30, 10, 0.12);
  --focus: #1d5fae;
  --on-accent: #ffffff;
  --topbar-h: 46px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17130f; --bg-surface: #1f1a15; --bg-raised: #272016; --text-primary: #f2ebdc; --text-secondary: #cfc2a5;
    --text-muted: #ab9d80; --accent: #e2a35e; --accent-strong: #f1ba78; --unesco: #7ab4ff; --danger: #f08a78;
    --border: #3a3226; --border-strong: #544a38; --map-land: #2b2519; --map-region: #5a4529; --map-outline: #6e5f42; --pin: #e2a35e;
    --pin-b: #a98757; --pin-nolmi: #7d7565; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --focus: #7ab4ff; --on-accent: #1a1408;
  }
}
:root[data-theme="dark"] {
  --bg: #17130f; --bg-surface: #1f1a15; --bg-raised: #272016; --text-primary: #f2ebdc; --text-secondary: #cfc2a5;
  --text-muted: #ab9d80; --accent: #e2a35e; --accent-strong: #f1ba78; --unesco: #7ab4ff; --danger: #f08a78;
  --border: #3a3226; --border-strong: #544a38; --map-land: #2b2519; --map-region: #5a4529; --map-outline: #6e5f42; --pin: #e2a35e;
  --pin-b: #a98757; --pin-nolmi: #7d7565; --shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --focus: #7ab4ff; --on-accent: #1a1408;
}

* { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { color-scheme: light dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text-primary);
  font: 17px/1.55 "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-strong); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
code { white-space: nowrap; font: 0.86em/1.3 ui-monospace, Menlo, Consolas, monospace; background: var(--bg-raised); padding: 1px 5px; border-radius: 4px; }
small { color: var(--text-muted); font-size: 0.85em; }

/* Topbar --------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border); font-size: 14px; white-space: nowrap;
}
.topbar .home { font-weight: 700; text-decoration: none; color: var(--text-primary); }
.topnav { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { text-decoration: none; color: var(--text-secondary); padding: 4px 0; border-bottom: 2px solid transparent; }
.topnav a[aria-current="true"] { color: var(--text-primary); border-bottom-color: var(--accent); }
.topbar .spacer { flex: 1; }
.chip {
  display: inline-block; padding: 4px 11px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--bg-surface); color: var(--text-primary); text-decoration: none; font: inherit; font-size: 14px; cursor: pointer; line-height: 1.3;
}
.icon-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.icon-btn svg { display: block; }
.icon-btn svg[hidden] { display: none; }

/* Rail ----------------------------------------------------------------- */
.rail { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 20; display: none; flex-direction: column; gap: 10px; }
@media (min-width: 1400px) { .rail { display: flex; } }
.rail a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-muted); font-size: 12.5px; }
.rail .dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--bg); flex: none; }
.rail a[aria-current="true"] { color: var(--text-primary); }
.rail a[aria-current="true"] .dot { background: var(--accent); border-color: var(--accent); }

/* Layout --------------------------------------------------------------- */
main { max-width: 720px; margin: 0 auto; padding: 0 18px 60px; }
section { margin: 56px 0; scroll-margin-top: calc(var(--topbar-h) + 12px); }
section.wide { max-width: 1160px; margin-left: calc(50% - 50vw + 18px); margin-right: calc(50% - 50vw + 18px); width: calc(100vw - 36px); }
@media (min-width: 1196px) { section.wide { margin-left: calc((720px - 1160px) / 2); margin-right: 0; width: 1160px; } }
h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.12; letter-spacing: -0.01em; margin: 10px 0 18px; font-weight: 700; }
h2 { font-size: clamp(23px, 3vw, 30px); line-height: 1.2; margin: 0 0 14px; }
h2 .anchor { color: inherit; text-decoration: none; }
h2 .anchor:hover::after { content: " #"; color: var(--accent); font-weight: 400; }
h3 { font-size: 20px; margin: 26px 0 8px; }
h4 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 18px 0 4px; }
.hero { padding-top: 46px; }
.kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12.5px; color: var(--accent); margin: 0; font-weight: 700; }
.deck { font-size: 19.5px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 12px; }
.byline, .caption, .note, .meta { color: var(--text-muted); font-size: 14.5px; line-height: 1.5; }
.meta { margin: 4px 0; }
.src { font-size: 0.85em; color: var(--text-muted); }
.src::before { content: "↗ "; }

/* Stats ---------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; margin: 18px 0; }
.stat { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.stat .v { font-size: 34px; line-height: 1; font-weight: 700; color: var(--accent-strong); margin-bottom: 6px; }
.stat .l { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.stat .s { color: var(--text-muted); font-size: 13px; line-height: 1.35; margin-top: 4px; }

/* Filters and map ------------------------------------------------------ */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 10px; font-size: 14.5px; }
.filters .chip[aria-pressed="true"] { background: var(--accent-strong); color: var(--on-accent); border-color: var(--accent-strong); }
.filters .n { opacity: 0.75; font-size: 12.5px; margin-left: 3px; }
.filters .county select { font: inherit; font-size: 14px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); }
.filters .count { margin-left: auto; color: var(--text-muted); }
.filters .reset { background: none; border: 0; color: var(--accent-strong); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 0; }
.map-wrap { position: relative; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; }
.map-svg { display: block; width: 100%; height: auto; max-height: 78vh; cursor: grab; }
.map-svg.is-zoomed { touch-action: none; }
.map-svg.is-dragging { cursor: grabbing; }
.map-zoom { position: absolute; z-index: 2; top: 16px; right: 16px; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-surface); box-shadow: var(--shadow); }
.map-zoom button { display: grid; place-items: center; min-width: 34px; min-height: 34px; padding: 2px 7px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-raised); color: var(--text-primary); font: 700 16px/1 system-ui, sans-serif; cursor: pointer; }
.map-zoom button:last-of-type { font-size: 11px; }
.map-zoom button:disabled { opacity: 0.42; cursor: default; }
.map-svg .land { fill: var(--map-land); stroke: var(--map-outline); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.map-svg .county { fill: transparent; stroke: var(--map-outline); stroke-width: 0.45; opacity: 0.42; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-svg .county-active { fill: var(--map-region); opacity: 0.48; }
.pin { cursor: pointer; }
.pin circle { fill: var(--pin); stroke: var(--bg-surface); stroke-width: 0.9; transition: r 0.15s; vector-effect: non-scaling-stroke; }
.pin .hit { fill: transparent; stroke: none; }
.pin.pin-b circle { fill: var(--pin-b); }
.pin.pin-nolmi circle { fill: var(--pin-nolmi); }
.pin.pin-unesco circle { fill: var(--unesco); stroke-width: 0.9; }
.pin.pin-dmg circle { stroke: var(--danger); stroke-width: 1.1; }
.pin:focus-visible { outline: none; }
.pin:focus-visible circle { stroke: var(--focus); stroke-width: 1.4; }
.pin.off { opacity: 0.12; pointer-events: none; }
.map-svg .town { font: 700 6.2px/1 "Iowan Old Style", Palatino, Georgia, serif; fill: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; paint-order: stroke; stroke: var(--map-land); stroke-width: 1.6px; stroke-linejoin: round; pointer-events: none; }
.map-tooltip { position: absolute; z-index: 3; max-width: min(240px, calc(100% - 20px)); padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg-raised); color: var(--text-primary); box-shadow: var(--shadow); font-size: 13px; font-weight: 700; line-height: 1.25; pointer-events: none; transform: translate(-50%, calc(-100% - 9px)); }
@media (max-width: 600px) { .map-svg .town { display: none; } }
@media (max-width: 600px) { .map-zoom { top: 12px; right: 12px; } .map-zoom button { min-width: 40px; min-height: 40px; } }
.legend { list-style: none; padding: 0; margin: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--text-secondary); }
.legend .lg { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--pin); }
.legend .lg-unesco { background: var(--unesco); }
.legend .lg-b { background: var(--pin-b); }
.legend .lg-nolmi { background: var(--pin-nolmi); }
.legend .lg-dmg { background: var(--bg-surface); border: 2px solid var(--danger); width: 10px; height: 10px; }

/* UNESCO cards ---------------------------------------------------------- */
.unesco-list { display: grid; gap: 28px; margin-top: 18px; }
.unesco-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); scroll-margin-top: calc(var(--topbar-h) + 12px); }
.unesco-card figure { margin: 0; }
.unesco-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.unesco-card figcaption { font-size: 12.5px; color: var(--text-muted); padding: 6px 16px 0; }
.unesco-body { padding: 8px 16px 18px; }
.unesco-body h3 { margin: 6px 0 4px; font-size: 24px; }
.unesco-body h3 small { display: block; font-weight: 400; font-size: 14px; }
.unesco-body p { margin: 8px 0; }
.cls { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--bg-raised); color: var(--text-secondary); white-space: nowrap; }
.cls-A { background: color-mix(in srgb, var(--accent) 18%, var(--bg-raised)); color: var(--accent-strong); }
.nolmi { color: var(--text-muted); font-style: italic; }

/* Four editorial stops ------------------------------------------------- */
.featured-list { display: grid; gap: 22px; margin-top: 22px; }
.featured-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); scroll-margin-top: calc(var(--topbar-h) + 12px); }
.featured-card:nth-child(even) { grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr); }
.featured-card:nth-child(even) figure { order: 2; }
.featured-card figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; margin: 0; background: var(--bg-raised); }
.featured-card img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.featured-card figcaption { padding: 7px 14px 10px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.featured-body { align-self: center; padding: 24px 26px 26px; }
.featured-body h3 { margin: 3px 0 5px; font-size: 28px; }
.featured-body h3 small { display: block; font-size: 14px; font-weight: 400; }
.featured-body p { margin: 9px 0; }
.featured-label { margin: 0; color: var(--accent); font: 700 11.5px/1.3 system-ui, sans-serif; letter-spacing: 0.09em; text-transform: uppercase; }

/* Events --------------------------------------------------------------- */
.events { padding-left: 20px; }
.events li { margin: 10px 0; line-height: 1.5; }
.ev-date { font-variant-numeric: tabular-nums; color: var(--danger); font-weight: 700; }
.ev-status { display: block; color: var(--text-secondary); font-size: 0.93em; }

/* Table ---------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); box-shadow: var(--shadow); }
table.all { border-collapse: collapse; width: 100%; min-width: 900px; font-size: 14.5px; }
table.all th, table.all td { text-align: left; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--border); }
table.all thead th { border-top: 0; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: var(--bg-raised); position: sticky; top: 0; }
table.all tbody th { font-weight: 400; min-width: 180px; }
table.all tbody th .nm { font-weight: 700; font-size: 15.5px; }
table.all tbody th small { display: block; }
table.all td.contact { min-width: 190px; }
table.all td.notes { min-width: 220px; color: var(--text-secondary); font-size: 13.5px; }
table.all tr:target, .unesco-card:target { outline: 2px solid var(--accent); outline-offset: -2px; }
tr.row { scroll-margin-top: calc(var(--topbar-h) + 52px); }
html.js tr.row.more, tr.row.off { display: none; }
.badge { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 4px; margin-left: 4px; vertical-align: 2px; font-weight: 700; }
.b-unesco { background: var(--unesco); color: #fff; }
.b-event { background: var(--danger); color: #fff; }
.b-prog { border: 1px solid var(--danger); color: var(--danger); }
.b-hours { background: var(--bg-raised); color: var(--text-secondary); }
.pager { display: flex; align-items: center; gap: 14px; margin-top: 12px; color: var(--text-muted); font-size: 14.5px; }
html:not(.js) .pager { display: none; }

/* Sources, footer, 404 ------------------------------------------------- */
.sources { padding-left: 20px; font-size: 15px; }
.sources li { margin: 6px 0; overflow-wrap: anywhere; }
.site-footer { border-top: 1px solid var(--border); padding: 24px 18px 40px; text-align: center; color: var(--text-muted); font-size: 14px; }
.nf { max-width: 620px; margin: 80px auto; padding: 0 18px; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .stat .v { font-size: 28px; }
  .filters .count { margin-left: 0; width: 100%; }
  .unesco-body h3 { font-size: 21px; }
  .featured-card, .featured-card:nth-child(even) { display: block; }
  .featured-card:nth-child(even) figure { display: block; order: initial; }
  .featured-card img { min-height: 0; aspect-ratio: 3 / 2; }
  .featured-body { padding: 16px 17px 20px; }
  .featured-body h3 { font-size: 22px; }
}