/* ============================================================
   Verdronken Stad: Reimerswaal — companion site
   Design language: antique woodcut / parchment, after the
   podcast cover (parchment, deep navy ink, ochre gold).
   Era palette validated for CVD-safety against #f5ecd7.
   ============================================================ */

:root {
  --parchment: #f5ecd7;
  --parchment-light: #faf4e4;
  --parchment-dark: #eadfc2;
  --parchment-deep: #e0d2ae;
  --ink: #1c2b4a;
  --ink-deep: #12203a;
  --ink-soft: #3a4a6b;
  --gold: #c8a24b;
  --gold-dark: #8a6a15;
  --khaki: #b3a878;
  --sepia: #6b5233;
  --rust: #9c3a20;

  /* validated era palette (categorical) */
  --era-1: #8a6a15;  /* opkomst / rise        */
  --era-2: #2f5fae;  /* bloei / golden age    */
  --era-3: #078a63;  /* stormvloeden / floods */
  --era-4: #9c3a20;  /* oorlog / war          */
  --era-5: #7048a8;  /* ondergang / the end   */
  --era-6: #96551a;  /* herinnering / memory  */

  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "EB Garamond", "Georgia", serif;

  --maxw: 1100px;
  --radius: 6px;
  --shadow: 0 2px 0 rgba(28, 43, 74, 0.35), 0 10px 24px rgba(28, 43, 74, 0.12);
  --border-ink: 2px solid var(--ink);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  /* faint parchment mottling */
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(200, 162, 75, 0.07), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 90%, rgba(107, 82, 51, 0.06), transparent 60%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-color: var(--gold-dark); text-underline-offset: 3px; }
a:hover { color: var(--gold-dark); }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-deep); line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--parchment);
  padding: 0.6em 1em; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; color: var(--parchment); }

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

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--parchment-light);
  border-bottom: 3px solid var(--ink);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.5rem 1rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand-mark svg { width: 46px; height: 46px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.15rem; color: var(--ink-deep); letter-spacing: 0.02em;
}
.brand-sub {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.95rem; color: var(--gold-dark); letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav { margin-left: auto; }
.nav-list { list-style: none; display: flex; gap: 0.15rem; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-list a {
  display: block; padding: 0.45em 0.7em;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  text-decoration: none; color: var(--ink);
  border-bottom: 3px solid transparent;
}
.nav-list a:hover { border-bottom-color: var(--gold); color: var(--ink-deep); }
.nav-list a[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink-deep); }

.nav-toggle { display: none; }

.lang-switch {
  display: flex; align-items: center; gap: 0.2rem;
  border: var(--border-ink); border-radius: 999px;
  padding: 0.15rem 0.5rem; background: var(--parchment);
}
.lang-btn {
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  color: var(--ink-soft); padding: 0.2em 0.35em; border-radius: 4px;
}
.lang-btn[aria-pressed="true"] { color: var(--parchment); background: var(--ink); }
.lang-sep { color: var(--khaki); }

.header-wave { height: 14px; overflow: hidden; background: var(--ink); }
.header-wave svg { display: block; width: 100%; height: 14px; }

/* mobile nav */
@media (max-width: 940px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 4px;
    background: none; border: var(--border-ink); border-radius: var(--radius);
    padding: 8px 9px; cursor: pointer;
  }
  .nav-toggle-bar { width: 20px; height: 2.5px; background: var(--ink); }
  .nav-list {
    display: none; position: absolute; right: 0.75rem; top: 100%;
    background: var(--parchment-light); border: var(--border-ink);
    border-radius: var(--radius); box-shadow: var(--shadow);
    flex-direction: column; min-width: 220px; padding: 0.4rem; z-index: 60;
  }
  .nav-list.open { display: flex; }
  .site-nav { position: relative; }
}

/* ---------- shared page scaffolding ---------- */

.page { max-width: var(--maxw); margin: 0 auto; padding: 2rem 1rem 4rem; }
.page-intro { max-width: 46rem; font-size: 1.2rem; }

.eyebrow {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; font-size: 0.8rem; color: var(--gold-dark);
  margin: 0 0 0.4rem;
}

.rule-orn { display: flex; align-items: center; gap: 0.75rem; margin: 1.2rem 0; color: var(--gold-dark); }
.rule-orn::before, .rule-orn::after { content: ""; flex: 1; border-top: 2px solid var(--khaki); }
.rule-orn svg { width: 26px; height: 26px; flex: none; }

.section { margin-top: 3rem; }

/* woodcut frame for figures & cards */
.frame {
  background: var(--parchment-light);
  border: var(--border-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
}
.frame::after {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid var(--khaki); border-radius: 3px; pointer-events: none;
}
.frame-pad { padding: 1.25rem 1.4rem; }

figure.frame { margin: 0; padding: 0.6rem; }
figure.frame img { border: 1px solid var(--sepia); width: 100%; }
figcaption {
  font-size: 0.92rem; color: var(--ink-soft);
  padding: 0.6rem 0.4rem 0.2rem; font-style: italic;
}

/* AI / historical source badges */
.badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--font-display); font-style: normal; font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25em 0.6em; border-radius: 3px; vertical-align: middle;
}
.badge-ai { background: var(--ink); color: var(--parchment); }
.badge-hist { background: var(--gold); color: var(--ink-deep); }
.badge-photo { background: var(--sepia); color: var(--parchment-light); }

/* buttons */
.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  text-decoration: none; text-align: center;
  background: var(--ink); color: var(--parchment);
  border: 2px solid var(--ink-deep); border-radius: var(--radius);
  padding: 0.6em 1.3em;
  box-shadow: 0 3px 0 var(--ink-deep);
}
.btn:hover { background: var(--ink-deep); color: var(--gold); }
.btn-outline {
  background: transparent; color: var(--ink);
  box-shadow: 0 3px 0 var(--khaki);
}
.btn-outline:hover { background: var(--parchment-dark); color: var(--ink-deep); }
.btn-small { font-size: 0.85rem; padding: 0.45em 0.95em; }

/* episode chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  color: var(--ink-deep); text-decoration: none;
  background: var(--parchment-dark); border: 1.5px solid var(--sepia);
  border-radius: 999px; padding: 0.3em 0.85em;
}
.chip:hover { background: var(--gold); border-color: var(--ink); color: var(--ink-deep); }
.chip svg { width: 13px; height: 13px; }

/* ---------- home / hero ---------- */

.hero {
  background: var(--ink);
  color: var(--parchment);
  position: relative; overflow: hidden;
}
.hero-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 3.2rem 1rem 0;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2rem;
  align-items: center; position: relative; z-index: 2;
}
.hero h1 { color: var(--parchment); margin: 0.2rem 0 0.6rem; }
.hero h1 .hero-accent { color: var(--gold); display: block; }
.hero .eyebrow { color: var(--gold); }
.hero-tagline { font-size: 1.25rem; max-width: 34rem; color: #e8dfc8; }
.hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1.4rem 0 2.6rem; }
.hero .btn { background: var(--gold); color: var(--ink-deep); border-color: var(--gold-dark); box-shadow: 0 3px 0 var(--gold-dark); }
.hero .btn:hover { background: var(--parchment); }
.hero .btn-outline { background: transparent; color: var(--parchment); border-color: var(--parchment); box-shadow: 0 3px 0 rgba(245, 236, 215, 0.4); }
.hero .btn-outline:hover { background: rgba(245, 236, 215, 0.12); color: var(--gold); }
.hero-art { position: relative; z-index: 2; padding-bottom: 1rem; }
.hero-art svg { width: 100%; max-width: 430px; height: auto; display: block; margin: 0 auto; }
.hero-waves { position: relative; z-index: 1; margin-top: -1px; }
.hero-waves svg { display: block; width: 100%; height: 90px; }
.hero-note { font-size: 0.8rem; color: #b9c2d8; text-align: center; padding: 0 1rem 0.6rem; position: relative; z-index: 2; }

@media (max-width: 800px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 2.2rem; }
  .hero-art svg { max-width: 300px; }
}

/* stat tiles */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-top: -2.6rem; position: relative; z-index: 5;
}
.stat {
  background: var(--parchment-light);
  border: var(--border-ink); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.1rem; text-align: center;
}
.stat-num { font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; color: var(--ink-deep); display: block; }
.stat-label { font-size: 0.95rem; color: var(--ink-soft); }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* teaser cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--parchment-light); border: var(--border-ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem;
  text-decoration: none;
}
.card:hover { transform: translateY(-3px); border-color: var(--gold-dark); }
.card h3 { margin: 0.2rem 0 0; }
.card p { margin: 0; color: var(--ink-soft); }
.card .card-icon svg { width: 44px; height: 44px; }.card .card-more { margin-top: auto; font-family: var(--font-display); font-weight: 700; color: var(--gold-dark); }
.card-icon svg { width: 44px; height: 44px; }

/* spotify embed */
.embed-wrap { border: var(--border-ink); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: var(--ink); }
.embed-wrap iframe { display: block; width: 100%; height: 352px; border: 0; }
.embed-fallback { display: none; }
.embed-wrap.embed-failed iframe { display: none; }
.embed-wrap.embed-failed .embed-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.45rem; min-height: 352px; padding: 1.6rem; text-align: center;
}
.embed-fallback h3 { color: var(--gold); margin: 0; }
.embed-fallback p { margin: 0 0 0.6rem; font-size: 0.98rem; color: #cfd6e6; max-width: 30rem; }
.embed-fallback-icon svg { width: 42px; height: 42px; color: var(--gold); }
.embed-wrap .btn { background: var(--gold); color: var(--ink-deep); border-color: var(--gold-dark); box-shadow: 0 3px 0 var(--gold-dark); }
.embed-wrap .btn:hover { background: var(--parchment); }

/* ---------- interactive map ---------- */

.map-layout {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  gap: 1.4rem; align-items: start; margin-top: 1.6rem;
}
@media (max-width: 980px) { .map-layout { grid-template-columns: 1fr; } }

.map-stage { padding: 0.8rem; }
.map-stage svg { width: 100%; height: auto; display: block; }

/* svg map styling */
.m-sea { fill: #dfd3b2; }
.m-sea-hatch { stroke: #b9a97e; stroke-width: 1.2; fill: none; opacity: 0.75; }
.m-shore { fill: #cdbf98; stroke: var(--sepia); stroke-width: 1.5; }
.m-town { fill: #f0e5c8; stroke: var(--sepia); stroke-width: 2; }
.m-field { fill: #e4d7ae; stroke: none; }
.m-wall { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.m-wall-inner { fill: none; stroke: var(--parchment-light); stroke-width: 1.4; stroke-dasharray: 3 4; }
.m-tower { fill: var(--ink); stroke: var(--parchment-light); stroke-width: 1; }
.m-water { fill: #c5ceb9; stroke: var(--sepia); stroke-width: 1.5; }
.m-house { fill: #caa66b; stroke: var(--sepia); stroke-width: 1.1; }
.m-house-dark { fill: #a97f47; stroke: var(--sepia); stroke-width: 1.1; }
.m-roof { fill: var(--rust); opacity: 0.85; }
.m-street { stroke: #f7efd9; stroke-width: 4; fill: none; stroke-linecap: round; }
.m-label {
  font-family: var(--font-body); font-style: italic; font-size: 17px;
  fill: var(--sepia); letter-spacing: 0.06em;
}
.m-label-big { font-size: 26px; font-family: var(--font-display); font-style: normal; font-weight: 700; fill: var(--ink); letter-spacing: 0.2em; }
.m-ink { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.m-ink-fill { fill: var(--ink); }
.m-dam { stroke: var(--sepia); stroke-width: 7; stroke-dasharray: 10 6; fill: none; }

/* city map v2: land, tide, walls, mills (geometry in scan pixels, scaled 0.85) */
.city-map .m-street { stroke-width: 9; }
.city-map .m-earth-trail { stroke: #c3a36b; stroke-width: 6; }
.m-garden { fill: #c2c58c; }
.m-hedge { fill: none; stroke: #7d8848; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.m-hedge.m-hedge-thin { stroke-width: 2.5; }
.m-shoreline { fill: none; stroke: var(--sepia); stroke-width: 2.5; }
.m-landband { stroke: var(--sepia); stroke-width: 2.5; stroke-linejoin: round; }
.m-dike { fill: none; stroke: #8a8a52; stroke-width: 7; stroke-linecap: round; }
.m-tree line { stroke: var(--sepia); stroke-width: 1.6; }
.m-tree circle { fill: #9da35f; stroke: var(--sepia); stroke-width: 1.4; }
.m-canal-dike { fill: none; stroke: #9a9d62; stroke-width: 46; stroke-linejoin: round; stroke-linecap: butt; }
.m-canal { fill: none; stroke: #a9bab3; stroke-width: 22; stroke-linejoin: round; stroke-linecap: butt; }
.m-canal-bank { fill: none; stroke: var(--sepia); stroke-width: 27; stroke-linejoin: round; }
.m-moat { fill: none; stroke: #a9bab3; stroke-width: 14; stroke-linejoin: round; }
.m-release-wave { fill: none; stroke: #e8f1eb; stroke-width: 4; stroke-dasharray: 3 15; stroke-linecap: round; opacity: 0; pointer-events: none; }
.m-block { fill: url(#m-roofs); stroke: #6b3a24; stroke-width: 1.4; }
.m-courtyard { fill: #aab27a; stroke: var(--sepia); stroke-width: 1.1; }
.m-square { fill: #ece7c8; stroke: var(--sepia); stroke-width: 1.6; }
.m-square-paving { fill: none; stroke: #b9ac8a; stroke-width: 1.1; stroke-dasharray: 3 4; }
.m-hall { fill: var(--parchment-light); stroke: var(--ink); stroke-width: 2; }
.m-hall-roof { fill: var(--ink); }
.m-hall-door { fill: var(--rust); stroke: var(--ink); stroke-width: 1; }
.m-hall-window { fill: var(--gold); stroke: var(--ink); stroke-width: 0.8; }
.m-bridge { stroke: #8b6a43; stroke-width: 7; fill: none; }
.m-hut rect { fill: var(--parchment-light); stroke: var(--ink); stroke-width: 1.3; }
.m-hut polygon { fill: var(--rust); stroke: var(--ink); stroke-width: 1; }
.m-salt rect { fill: var(--parchment-light); stroke: var(--ink); stroke-width: 1.6; }
.m-salt polygon { fill: var(--sepia); stroke: var(--ink); stroke-width: 1.2; }
.m-smoke { fill: none; stroke: var(--sepia); stroke-width: 1.6; opacity: 0.8; }
.m-saltheap { fill: #fbf6e6; stroke: var(--sepia); stroke-width: 1.4; }
.m-basin-bed, .m-basin-edge { stroke: none; }
.m-basin-edge { fill: none; stroke: var(--sepia); stroke-width: 2; stroke-linejoin: round; }
.m-tidemill rect { fill: var(--parchment-light); stroke: var(--ink); stroke-width: 2; }
.m-tidemill-roof { fill: var(--rust); stroke: var(--ink); stroke-width: 1.5; }
.m-wheel { fill: #f7efd9; stroke: var(--ink); stroke-width: 2; }
.m-wheel-spokes { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.m-wheel-hub { fill: var(--ink); }
.m-boat { fill: var(--parchment-light); stroke: var(--ink); stroke-width: 1.6; }
.m-ripple { fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: 0.75; stroke-linecap: round; }
.m-mound { fill: #b9b27a; stroke: var(--sepia); stroke-width: 1.2; }
.m-mill-post { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.m-mill-body { fill: #e9dcb7; stroke: var(--ink); stroke-width: 2; }
.m-sails path { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.m-sails path.m-sail-cloth { fill: rgba(251, 246, 230, 0.9); stroke-width: 1.2; }
/* the two kinds of wall: intact stone (north) vs. makeshift earth-and-rubble */
.m-stonewall { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linejoin: round; stroke-linecap: square; }
.m-stonewall-crenel { fill: none; stroke: #b9b2a0; stroke-width: 3.5; stroke-dasharray: 5 4; stroke-linejoin: round; }
.m-stone-tower { fill: var(--ink); stroke: #b9b2a0; stroke-width: 1.2; }
.m-gate rect { fill: var(--ink); stroke: #b9b2a0; stroke-width: 1.2; }
.m-gate-roof { fill: var(--rust) !important; stroke: var(--ink); stroke-width: 1.2; }
.m-gate-arch { fill: var(--gold); stroke: none; }
.m-moat-bridge { stroke: #8b6a43; stroke-width: 5; }
.m-rampart { fill: none; stroke: #8f7a4a; stroke-width: 13; stroke-linejoin: round; stroke-linecap: round; }
.m-rampart-rubble { fill: none; stroke: #5e4b2a; stroke-width: 4; stroke-dasharray: 2 5 6 4; stroke-linecap: round; opacity: 0.8; }
.m-ruin { fill: #a39a86; stroke: var(--ink); stroke-width: 1.4; }
.m-sluice { fill: var(--sepia); stroke: var(--ink); stroke-width: 1.4; }
.m-ferry-route { fill: none; stroke: var(--sepia); stroke-width: 3; stroke-dasharray: 9 6; }
.m-legend-box { fill: rgba(251, 246, 230, 0.94); stroke: var(--ink); stroke-width: 2; }
.m-legend text { font-family: var(--font-body); font-size: 14px; fill: var(--ink); }
.m-legend text.m-legend-sub { font-size: 12px; font-style: italic; fill: var(--sepia); }
.city-map .tide-lo, .city-map .tide-hi { transition: opacity 0.6s ease; }
.city-map .tide-hi { opacity: 0; }
.city-map.is-high .tide-hi { opacity: 1; }
.city-map.is-high .tide-lo { opacity: 0; }

.tide-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0 0 0.7rem; }
.tide-label { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-right: 0.2rem; }
.tide-toggle button {
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  background: var(--parchment-light); color: var(--ink);
  border: 1.5px solid var(--sepia); border-radius: 999px; padding: 0.35em 1em; cursor: pointer;
}
.tide-toggle button:hover { background: var(--gold); }
.tide-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.tide-note { font-size: 0.92rem; font-style: italic; color: var(--ink-soft); flex-basis: 100%; }
.deventer-figure { max-width: 640px; margin: 1.4rem auto 0; }

.hotspot { cursor: pointer; }
.hotspot circle.hs-ring {
  fill: var(--gold); stroke: var(--ink); stroke-width: 2.5;
  transition: r 0.15s ease, fill 0.15s ease;
}
.hotspot text {
  font-family: var(--font-display); font-weight: 900; font-size: 17px;
  fill: var(--ink-deep); text-anchor: middle; dominant-baseline: central;
  pointer-events: none;
}
.hotspot:hover circle.hs-ring, .hotspot:focus circle.hs-ring { fill: var(--parchment-light); }
.hotspot.active circle.hs-ring { fill: var(--ink); stroke: var(--gold); }
.hotspot.active text { fill: var(--parchment); }
.hotspot circle.hs-halo { fill: rgba(200, 162, 75, 0.28); }
@media (prefers-reduced-motion: no-preference) {
  .hotspot circle.hs-halo { animation: halo 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
  .city-map.is-releasing .m-release-wave { opacity: 0.95; animation: canal-release 0.7s linear infinite; }
  .city-map.is-releasing .m-tidemill { animation: mill-active 0.45s ease-in-out infinite; transform-box: view-box; transform-origin: 740px 1220px; }
  .city-map.is-releasing .m-wheel-spokes { animation: wheel-turn 0.8s linear infinite; transform-box: view-box; transform-origin: 755px 1226px; }
  @keyframes halo { 0% { opacity: 0.9; transform: scale(0.55); } 70% { opacity: 0; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.25); } }
  @keyframes canal-release { to { stroke-dashoffset: -36; } }
  @keyframes mill-active { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(0.6px, -0.5px) rotate(0.4deg); } }
  @keyframes wheel-turn { to { transform: rotate(360deg); } }
}

.map-panel { position: sticky; top: 92px; }
.map-panel-inner { padding: 1.2rem 1.35rem 1.4rem; }
.map-panel h3 { margin: 0.1rem 0 0.1rem; font-size: 1.45rem; }
.map-panel .panel-sub { color: var(--gold-dark); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; margin: 0 0 0.6rem; }
.map-panel .panel-vignette { margin: 0.6rem 0; text-align: center; }
.map-panel .panel-vignette svg { width: 100%; max-width: 300px; height: auto; }
.map-panel .panel-facts { margin: 0.8rem 0 0; padding-left: 1.1rem; }
.map-panel .panel-facts li { margin-bottom: 0.3rem; }
.map-hint { font-size: 0.95rem; color: var(--ink-soft); font-style: italic; }

/* accessible list alternative under the map */
.spot-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.spot-list button {
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
  background: var(--parchment-light); color: var(--ink);
  border: 1.5px solid var(--sepia); border-radius: 999px;
  padding: 0.35em 0.9em; cursor: pointer;
}
.spot-list button:hover { background: var(--gold); }
.spot-list button[aria-pressed="true"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.spot-num {
  display: inline-flex; width: 1.5em; height: 1.5em; margin-right: 0.4em;
  border-radius: 50%; background: var(--gold); color: var(--ink-deep);
  align-items: center; justify-content: center; font-weight: 900; font-size: 0.85em;
}

/* ---------- timeline ---------- */

.tl-filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.4rem 0 0.4rem; }
.tl-filter {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
  background: var(--parchment-light); color: var(--ink);
  border: 1.5px solid var(--sepia); border-radius: 999px;
  padding: 0.35em 0.95em; cursor: pointer;
}
.tl-filter .dot { width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--dot, var(--ink)); border: 1px solid rgba(18, 32, 58, 0.35); }
.tl-filter[aria-pressed="true"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.tl-filter:hover { border-color: var(--ink); }

.timeline { position: relative; margin: 2rem 0 0; padding: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 4px; margin-left: -2px;
  background: linear-gradient(180deg,
    var(--era-1) 0%, var(--era-1) 16%,
    var(--era-2) 22%, var(--era-2) 34%,
    var(--era-3) 40%, var(--era-3) 60%,
    var(--era-4) 66%, var(--era-4) 72%,
    var(--era-5) 78%, var(--era-5) 86%,
    var(--era-6) 92%, var(--era-6) 100%);
  border-radius: 2px;
}
.tl-item { position: relative; width: 50%; padding: 0 2.4rem 2.2rem 0; }
.tl-item:nth-child(even) { left: 50%; padding: 0 0 2.2rem 2.4rem; }
.tl-item.hidden { display: none; }

.tl-node {
  position: absolute; top: 0.35rem; right: -21px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--parchment-light);
  border: 3px solid var(--era, var(--ink));
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.tl-item:nth-child(even) .tl-node { right: auto; left: -21px; }
.tl-node svg { width: 22px; height: 22px; }

.tl-card {
  background: var(--parchment-light); border: var(--border-ink);
  border-left: 6px solid var(--era, var(--ink));
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.2rem;
}
.tl-item:nth-child(odd) .tl-card { border-left: var(--border-ink); border-right: 6px solid var(--era, var(--ink)); }
.tl-year {
  font-family: var(--font-display); font-weight: 900; font-size: 1.3rem;
  color: var(--ink-deep);
}
.tl-era-tag {
  font-family: var(--font-display); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--parchment-light); background: var(--era, var(--ink));
  border-radius: 3px; padding: 0.2em 0.55em; margin-left: 0.55em;
  position: relative; top: -2px;
}
.tl-card h3 { margin: 0.25rem 0 0.3rem; font-size: 1.15rem; }
.tl-card p { margin: 0; font-size: 1.02rem; }

.tl-item { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.tl-item.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tl-item { opacity: 1; transform: none; } }

@media (max-width: 800px) {
  .timeline::before { left: 20px; }
  .tl-item, .tl-item:nth-child(even) { width: 100%; left: 0; padding: 0 0 2rem 3.6rem; }
  .tl-node, .tl-item:nth-child(even) .tl-node { left: 0; right: auto; }
  .tl-item:nth-child(odd) .tl-card { border-right: var(--border-ink); border-left: 6px solid var(--era, var(--ink)); }
}

/* ---------- finds / artefacts ---------- */

.find-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.6rem; }
@media (max-width: 980px) { .find-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .find-grid { grid-template-columns: 1fr; } }
.find-card { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.find-card .find-art { text-align: center; padding: 0.4rem 0; }
.find-card .find-art svg { width: 120px; height: 120px; }
.find-card h3 { margin: 0; }
.find-card p { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.find-card .badge { align-self: flex-start; }

.notice {
  border-left: 6px solid var(--rust);
  background: var(--parchment-dark);
  padding: 1rem 1.2rem; border-radius: 4px; margin-top: 2rem;
}
.notice h3 { margin: 0 0 0.3rem; color: var(--rust); }
.notice p { margin: 0; }

/* ---------- people ---------- */

.person { display: grid; grid-template-columns: 190px 1fr; gap: 1.4rem; align-items: start; padding: 1.3rem 1.4rem; margin-top: 1.4rem; }
@media (max-width: 640px) { .person { grid-template-columns: 1fr; } .person-figure { max-width: 240px; } }
.person-art svg { width: 150px; height: 150px; }
.person-figure { margin: 0; }
.person-figure img { width: 100%; border: 2px solid var(--ink); background: var(--parchment-light); }
.person-figure figcaption { padding: 0.45rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink-soft); font-style: italic; }
.person-figure .person-cap { display: block; margin-top: 0.3rem; }
.person h3 { margin: 0; font-size: 1.4rem; }
.person .person-dates { color: var(--gold-dark); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; margin: 0.1rem 0 0.6rem; }
.person p { margin: 0 0 0.6rem; }

/* ---------- episodes ---------- */

.ep-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.ep-item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; align-items: center;
  background: var(--parchment-light); border: var(--border-ink); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.9rem 1.1rem; margin-bottom: 0.9rem;
}
@media (max-width: 640px) { .ep-item { grid-template-columns: 48px 1fr; } .ep-item .ep-play { grid-column: 1 / -1; justify-self: start; } }
.ep-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--gold);
  font-family: var(--font-display); font-weight: 900; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 640px) { .ep-num { width: 44px; height: 44px; font-size: 1.05rem; } }
.ep-item h3 { margin: 0 0 0.15rem; font-size: 1.1rem; }
.ep-meta { font-size: 0.88rem; color: var(--gold-dark); font-family: var(--font-display); font-weight: 600; }
.ep-item p { margin: 0.25rem 0 0; font-size: 1rem; color: var(--ink-soft); }

/* ---------- visit ---------- */

.visit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 1.6rem; }
@media (max-width: 800px) { .visit-grid { grid-template-columns: 1fr; } }
.visit-card { padding: 1.2rem 1.3rem; }
.visit-img { margin: -1.2rem -1.3rem 0.9rem; }
.visit-img img { display: block; width: 100%; height: 185px; object-fit: cover; border-bottom: 2px solid var(--ink); border-radius: 5px 5px 0 0; }
.visit-img figcaption { font-size: 0.72rem; color: var(--ink-soft); font-style: italic; text-align: right; padding: 0.25rem 1.3rem 0; }
.visit-card h3 { margin: 0 0 0.2rem; }
.visit-card .visit-sub { color: var(--gold-dark); font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; }
.visit-card p { margin: 0 0 0.7rem; font-size: 1.02rem; }

/* ---------- about / sources ---------- */

.sources { margin: 0.8rem 0 0; padding-left: 1.2rem; }
.sources li { margin-bottom: 0.45rem; font-size: 1rem; }

.credits-list { list-style: none; margin: 0.8rem 0 0; padding: 0; columns: 2; column-gap: 2.4rem; }
.credits-list li { font-size: 0.92rem; margin-bottom: 0.55rem; break-inside: avoid; color: var(--ink-soft); }
.credits-list strong { color: var(--ink); font-weight: 600; }
@media (max-width: 800px) { .credits-list { columns: 1; } }

.finds-feature { max-width: 440px; margin: 1.6rem 0 0; padding: 0.6rem; }
.finds-feature img { background: #fff; }

.pan-figure { margin-top: 1.2rem; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* image pair on city page */
.img-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.4rem; }
@media (max-width: 860px) { .img-duo { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */

.site-footer {
  margin-top: 3rem; background: var(--ink); color: #d8dceb;
  border-top: 6px solid var(--gold);
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 0.8fr 1.2fr; gap: 2rem;
  padding: 2.2rem 1rem 1rem;
}
@media (max-width: 800px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-title { font-family: var(--font-display); font-weight: 900; color: var(--parchment); font-size: 1.15rem; margin: 0 0 0.3rem; }
.footer-heading { font-family: var(--font-display); font-weight: 700; color: var(--gold); margin: 0 0 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { color: #d8dceb; text-decoration: none; line-height: 1.9; }
.footer-links a:hover { color: var(--gold); }
.footer-fine { font-size: 0.85rem; line-height: 1.55; }
.footer-copy { text-align: center; font-size: 0.85rem; padding: 0.8rem 1rem 1.2rem; margin: 0; color: #9aa4c0; }
.site-footer .btn-spotify { background: var(--gold); color: var(--ink-deep); border-color: var(--gold-dark); box-shadow: 0 3px 0 var(--gold-dark); }
.site-footer .btn-spotify:hover { background: var(--parchment); }

/* reveal animation for cards/sections */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }