/* Shared look of every walk page (generated pages link this). */
:root {
  --bg: #0E1821;
  --surface: #13202B;
  --surface-2: #182836;
  --fg: #F4EFE6;
  --fg-2: rgba(244,239,230,0.78);
  --muted: rgba(244,239,230,0.52);
  --faint: rgba(244,239,230,0.12);
  --hair: rgba(244,239,230,0.07);
  --gold: #E3B964;
  --gold-soft: rgba(227,185,100,0.16);
  --water: #6EAADC;
  --on-gold: #0E1821;
  --pill: rgba(244,239,230,0.62);
  --overlay: rgba(14,24,33,0.88);
  --panel: rgba(19,32,43,0.97);
  --sunk: #0A121A;
  --shadow: rgba(0,0,0,0.7);
  --halo: rgba(0,0,0,0.9);
  --street: rgba(244,239,230,0.6);
  --tile-filter: invert(1) grayscale(1) sepia(1) hue-rotate(175deg) saturate(1.3) brightness(0.62) contrast(1.15);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --dock-h: 0px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F4EFE6;
  --surface: #FBF8F2;
  --surface-2: #EEE7DA;
  --fg: #14212C;
  --fg-2: rgba(20,33,44,0.82);
  --muted: rgba(20,33,44,0.60);
  --faint: rgba(20,33,44,0.15);
  --hair: rgba(20,33,44,0.10);
  --gold: #8A5D0E;
  --gold-soft: rgba(176,124,32,0.14);
  --water: #2F6FA3;
  --on-gold: #FFFDF8;
  --pill: rgba(20,33,44,0.66);
  --overlay: rgba(251,248,242,0.92);
  --panel: rgba(251,248,242,0.97);
  --sunk: #E4DCCD;
  --shadow: rgba(70,52,20,0.25);
  --halo: rgba(244,239,230,0.95);
  --street: rgba(20,33,44,0.62);
  --tile-filter: grayscale(0.85) sepia(0.3) saturate(0.9) brightness(1.04) contrast(0.92);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; margin: 0 }
[hidden] { display: none !important }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); text-decoration: none }
a:hover { text-decoration: underline; text-underline-offset: 3px }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px }
button { font: inherit; color: inherit; cursor: pointer }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) }
.map-col { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--hair) }
#map { width: 100%; height: 100%; background: var(--bg) }
.text-col {
  min-width: 0;
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
  padding-block: 0 calc(140px + var(--dock-h));
}
.inner { max-width: 660px }

/* ---- Header ---- */
.topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px }
.back { display: inline-block; font-size: 14px; color: var(--fg-2) }
.kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold) }
.kicker::after { content: ''; display: block; width: 44px; height: 2px; background: var(--gold); margin-top: 10px }
header.intro { padding-block: 40px 8px; display: grid; gap: 16px }
header.intro h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 58px);
  letter-spacing: 0.08em; line-height: 1.1; text-wrap: balance;
}
.sub { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--fg-2); margin-top: -6px }
.lede { color: var(--fg-2) }
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; margin-top: 4px;
}
.fact { background: var(--surface); padding: 12px 14px; display: grid; gap: 2px }
.fact b { font-family: var(--serif); font-weight: 400; font-size: 20px }
.fact span { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted) }

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 16px; color: var(--on-gold); background: var(--gold);
  border: 0; padding: 12px 20px; border-radius: 6px; min-height: 46px;
}
.btn:hover { filter: brightness(1.08) }
.btn.ghost { background: none; color: var(--fg); border: 1px solid var(--faint) }
.btn.ghost:hover { border-color: rgba(227,185,100,0.5); filter: none }
.btn svg { width: 16px; height: 16px; flex: none }
.btn.done { color: var(--water); border-color: rgba(110,170,220,0.4) }
.voice-note { font-size: 13.5px; color: var(--muted) }

details.panel { margin-top: 14px; background: var(--surface); border: 1px solid var(--hair); border-radius: 8px }
details.panel:first-of-type { margin-top: 28px }
details.panel summary {
  cursor: pointer; padding: 15px 20px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
details.panel summary::-webkit-details-marker { display: none }
details.panel summary::after { content: '+'; font-size: 22px; color: var(--gold); line-height: 1 }
details.panel[open] summary::after { content: '\2212' }
.panel-body { padding: 0 20px 18px; display: grid; gap: 12px; font-size: 15.5px; color: var(--fg-2) }
.panel-body h3 { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 2px }

/* ---- Stops ---- */
.stops { list-style: none; padding: 0; margin-top: 40px }
.stop { position: relative; padding: 0 0 8px 58px; scroll-margin-top: 24px }
.stop::before { content: ''; position: absolute; left: 19px; top: 44px; bottom: 0; border-left: 2px dotted rgba(227,185,100,0.35) }
.stop:last-child::before { display: none }
.num {
  position: absolute; left: 0; top: 2px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  font-family: var(--serif); font-size: 17px; color: var(--gold);
  background: var(--bg); border: 1.5px solid var(--gold); transition: background .25s, color .25s;
}
.stop.active .num, .stop.visited .num { background: var(--gold); color: var(--on-gold) }
.stop.visited .num::after {
  content: ''; position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--water); border: 2px solid var(--bg);
}
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; transition: border-color .3s, box-shadow .3s }
.stop.active .card { border-color: rgba(227,185,100,0.55); box-shadow: 0 16px 40px -24px rgba(227,185,100,0.35) }
.card-head { padding: 20px 22px 0; display: flex; gap: 14px; align-items: flex-start }
.card-head .titles { flex: 1; min-width: 0 }
.card h2 { font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.25; text-wrap: balance }
.card .when { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 3px }
.play {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-soft); border: 1px solid rgba(227,185,100,0.45); color: var(--gold);
  border-radius: 999px; padding: 7px 14px 7px 10px; font-size: 14px; font-weight: 600; min-height: 40px;
}
.play svg { width: 18px; height: 18px }
.play.playing { background: var(--gold); color: var(--on-gold) }

.gallery {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 16px 22px 4px; scrollbar-width: thin;
}
.gallery figure { flex: none; width: min(78%, 360px); scroll-snap-align: start; display: grid; gap: 6px }
.gallery figure:only-child { width: 100% }
.gallery button.ph {
  display: block; padding: 0; border: 0; background: var(--sunk); border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 3; width: 100%;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block }
.gallery figcaption { font-size: 13px; color: var(--muted); line-height: 1.4 }
.gallery .then { color: var(--gold); font-weight: 600; letter-spacing: 0.06em }

.card-body { padding: 14px 22px 22px }
.look { padding: 10px 14px; border-left: 2px solid var(--gold); background: var(--gold-soft); border-radius: 0 4px 4px 0; font-size: 15.5px }
.look b { color: var(--gold); font-weight: 600 }
.story { margin-top: 14px; display: grid; gap: 12px; color: var(--fg-2) }
.story em { color: var(--fg) }
.aside { font-size: 14.5px; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 10px }
.spot {
  margin-top: 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between;
  border: 1px dashed rgba(110,170,220,0.45); border-radius: 6px; padding: 10px 12px; font-size: 15px;
}
.spot b { color: var(--water); font-weight: 600 }
.spot button {
  flex: none; border: 1px solid rgba(110,170,220,0.5); background: none; color: var(--water);
  border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 600; min-height: 34px;
}
.spot.got button { background: var(--water); color: var(--bg) }
.walk-on { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 34px; font-size: 15.5px; color: var(--fg-2) }
.walk-on .dist {
  flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--bg);
  background: var(--pill); border-radius: 3px; padding: 2px 7px; margin-top: 3px; white-space: nowrap;
}
.walk-on.home .dist { background: var(--water) }

.finale { margin-top: 10px; background: var(--surface); border: 1px solid rgba(110,170,220,0.3); border-radius: 8px; padding: 22px; display: grid; gap: 12px }
.finale h2 { font-family: var(--serif); font-weight: 400; font-size: 24px }
.finale ul { padding-left: 18px; display: grid; gap: 6px; color: var(--fg-2) }
.score { font-family: var(--serif); font-size: 19px; color: var(--water) }

.sources { margin-top: 36px; font-size: 14px; color: var(--muted); display: grid; gap: 10px }
.sources h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--fg) }
.sources ul { padding-left: 18px; display: grid; gap: 4px }
.sources a { color: var(--fg-2) }

/* ---- Dock: live status + player ---- */
.dock {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 1000;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  width: min(600px, calc(100% - 20px));
  display: grid; gap: 6px;
}
.bar {
  background: var(--panel); border: 1px solid var(--faint); border-radius: 12px;
  box-shadow: 0 20px 50px -10px var(--shadow); backdrop-filter: blur(6px);
}
.live { padding: 10px 12px 10px 14px; display: flex; align-items: center; gap: 12px; border-color: rgba(110,170,220,0.45) }
.live.warn { border-color: rgba(227,185,100,0.7) }
.pulse { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--water); animation: pulse 2s infinite }
.live.warn .pulse { background: var(--gold) }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(110,170,220,0.6) } 70% { box-shadow: 0 0 0 10px rgba(110,170,220,0) } 100% { box-shadow: 0 0 0 0 rgba(110,170,220,0) } }
.live .msg { flex: 1; min-width: 0; line-height: 1.3 }
.live .msg b { font-family: var(--serif); font-weight: 400; font-size: 16.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.live .msg span { color: var(--muted); font-size: 13.5px }
.small-btn { flex: none; background: none; border: 1px solid var(--faint); color: var(--fg-2); border-radius: 6px; padding: 6px 10px; font-size: 13px; min-height: 34px }

.player { padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center }
.pp {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--gold); color: var(--on-gold);
  display: grid; place-items: center; padding: 0; grid-row: span 2;
}
.pp svg { width: 20px; height: 20px }
.now { min-width: 0; font-size: 14.5px; line-height: 1.25 }
.now b { display: block; font-family: var(--serif); font-weight: 400; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.now span { color: var(--muted); font-size: 12.5px }
.ctrls { display: flex; gap: 4px; grid-row: span 2; align-self: center }
.ctrls button { background: none; border: 0; color: var(--fg-2); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding: 0 }
.ctrls button:hover { background: var(--hair) }
.ctrls svg { width: 18px; height: 18px }
.seek { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums }
.seek input { flex: 1; min-width: 0; accent-color: var(--gold); height: 18px }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; background: rgba(6,10,14,0.94);
  --fg: #F4EFE6; --fg-2: rgba(244,239,230,0.78); --muted: rgba(244,239,230,0.52); --faint: rgba(244,239,230,0.12); --gold: #E3B964;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; border-radius: 4px }
.lb-cap { max-width: 760px; margin: 12px auto 0; font-size: 14.5px; color: var(--fg-2); text-align: center; display: grid; gap: 4px }
.lb-cap small { color: var(--muted); font-size: 12.5px }
.lb-cap small a { color: var(--fg-2) }
.lb-close { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: 14px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--faint); background: rgba(14,24,33,0.7); color: var(--fg); font-size: 20px }
.lb-prev { left: 12px } .lb-next { right: 12px }

/* ---- Leaflet ---- */
.leaflet-container { font-family: var(--sans); background: var(--bg) }
.leaflet-tile-pane { opacity: 0.3 }
.leaflet-tile-pane img { filter: var(--tile-filter) }
.leaflet-control-attribution { background: var(--overlay) !important; color: var(--muted) !important; font-size: 11px }
.leaflet-control-attribution a { color: var(--fg-2) !important }
.leaflet-bar { border: 0 !important; box-shadow: none !important }
.leaflet-bar a { background: var(--overlay) !important; color: var(--fg) !important; border: 1px solid var(--faint) !important; width: 34px !important; height: 34px !important; line-height: 32px !important }
.leaflet-bar a:first-child { border-bottom: 0 !important }
.pin {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 15px var(--serif); color: var(--gold); background: var(--bg); border: 1.5px solid var(--gold);
  box-shadow: 0 2px 10px var(--shadow); transition: transform .2s, background .2s, color .2s;
}
.pin.active { background: var(--gold); color: var(--on-gold); transform: scale(1.22) }
.pin.visited { background: var(--gold); color: var(--on-gold) }
.pin-start { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font: 600 10px var(--sans); letter-spacing: 0.14em; color: var(--gold); white-space: nowrap; text-shadow: 0 1px 4px var(--halo) }
.street {
  white-space: nowrap; font: italic 12.5px var(--serif); letter-spacing: 0.04em; color: var(--street);
  text-shadow: 0 0 4px var(--bg), 0 0 8px var(--bg); transform-origin: center; pointer-events: none;
}
.me { width: 16px; height: 16px; border-radius: 50%; background: var(--water); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(110,170,220,0.3) }
.locate { position: absolute; z-index: 800; right: 10px; top: 10px; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--faint); background: var(--overlay); color: var(--fg); display: grid; place-items: center; padding: 0 }
.locate svg { width: 18px; height: 18px }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr }
  .map-col { height: 40vh; height: 40svh; z-index: 500; border-right: 0; border-bottom: 1px solid var(--faint) }
  .text-col { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
  header.intro { padding-top: 20px }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .stop { padding-left: 46px; scroll-margin-top: calc(40svh + 10px) }
  .num { width: 34px; height: 34px; font-size: 15px }
  .stop::before { left: 16px; top: 38px }
  .card-head { padding: 16px 14px 0; flex-wrap: wrap }
  .gallery { padding: 14px 14px 4px }
  .card-body { padding: 12px 14px 18px }
  .card h2 { font-size: 22px }
  body { font-size: 16.5px }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none } html { scroll-behavior: auto } }