:root {
  --bg: #0f1115;
  --bg-elev: #161922;
  --fg: #f5f1e8;
  --fg-dim: #9aa0aa;
  --accent: #e8c270;
  --published: #e8c270;
  --published-hover: #ffd784;
  --pending: #2a2d36;
  --border: #262932;
  --max: 1180px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Top bar */
.topbar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-mark {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg);
  opacity: 0.85;
}
.brand-mark .brand-zh { color: var(--fg-dim); font-weight: 600; margin-left: 2px; }

.topbar-end { display: flex; align-items: center; gap: 16px; flex: none; }
.topbar-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-dim);
  white-space: nowrap;
}
.topbar-link:hover { color: var(--fg); text-decoration: none; }

/* Language toggle */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-elev);
}
.lang-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-dim);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.lang-btn:hover { color: var(--fg); }
.lang-btn.active { background: var(--accent); color: #1a1a1a; }

/* Topbar search — present on every page */
.site-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
  margin: 0 16px;
}
.site-search input {
  width: 100%;
  appearance: none;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg);
  font: inherit;
  font-size: 0.85rem;
  padding: 7px 14px;
  transition: border-color 0.15s ease;
}
.site-search input::placeholder { color: var(--fg-dim); }
.site-search input:focus {
  outline: none;
  border-color: var(--accent);
}
.site-search input::-webkit-search-cancel-button { filter: invert(0.6); }

.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 900;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 6px;
}
.search-group {
  margin: 6px 8px 4px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  font-weight: 700;
}
.search-hit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--fg);
  font-size: 0.9rem;
}
.search-hit:hover,
.search-hit.is-active {
  background: var(--bg);
  text-decoration: none;
  color: var(--accent);
}
.search-hit mark {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}
.search-hit-meta {
  flex: none;
  font-size: 0.76rem;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.search-empty {
  margin: 0;
  padding: 12px 10px;
  font-size: 0.85rem;
  color: var(--fg-dim);
}
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .site-search { order: 3; flex-basis: 100%; margin: 0; max-width: none; }
}

/* Map — the home page's主視覺, directly under the topbar */
#map-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 24px 24px;
  position: relative;
}
#map {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0c10;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
}
@media (max-width: 640px) {
  /* A fitted world is roughly a 2:1 band; a 4/5 box left it floating in empty
     space at the top and bottom of the phone viewport. */
  #map { aspect-ratio: 3 / 2; }
}
#map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.hint { font-size: 0.88rem; color: var(--fg-dim); margin: 0; }
#map-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--fg-dim);
}
#map-legend > span { display: inline-flex; align-items: center; }
.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.legend-swatch.published { background: var(--published); }
.legend-swatch.pending { background: var(--pending); border: 1px solid var(--border); }

/* Leaflet override: tile-less map */
.leaflet-container { background: #0a0c10 !important; outline: none; }
.leaflet-interactive { cursor: default; }
.leaflet-interactive.country-published { cursor: pointer; }
.leaflet-container .leaflet-tooltip-soundport {
  background: var(--bg-elev);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.leaflet-container .leaflet-tooltip-soundport::before { display: none; }

/* In world (basemap) mode, drop the flat dark backdrop so tiles show. */
#map.world-mode .leaflet-container { background: #0a0c10 !important; }

/* On-map mode toggle (Minimal | World map) */
.map-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 17, 21, 0.86);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.map-mode-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg-dim);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.map-mode-toggle button:hover { color: var(--fg); }
.map-mode-toggle button.active { background: var(--accent); color: #1a1a1a; }

/* "Back to the world" — appears only once the view has left the world view. */
.map-reset {
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15, 17, 21, 0.86);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.map-reset.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
.map-reset button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--fg);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.map-reset button:hover { color: var(--accent); }
.map-reset button svg { opacity: 0.85; }

/* Subtle attribution (only visible in world mode) */
.leaflet-control-attribution {
  background: rgba(15, 17, 21, 0.72) !important;
  color: var(--fg-dim) !important;
  font-size: 0.66rem;
  padding: 2px 6px;
  border-radius: 4px 0 0 0;
}
.leaflet-control-attribution a { color: var(--fg-dim) !important; }

/* Detail panel */
#detail {
  max-width: var(--max);
  margin: 16px auto 48px;
  padding: 32px 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  scroll-margin-top: 24px;
}
#detail.hidden { display: none; }
#detail-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: 0;
  color: var(--fg-dim);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
#detail-close:hover { color: var(--fg); }
.detail-header { margin-bottom: 24px; }
.flag-bar {
  width: 52px;
  height: 5px;
  border-radius: 3px;
  margin-bottom: 14px;
  background: var(--accent);
}
.detail-header h2 {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
}
#detail-meta { margin: 0 0 6px; color: var(--fg-dim); font-size: 0.95rem; }
#detail-tagline { margin: 0 0 18px; font-style: italic; opacity: 0.85; }
.detail-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cta {
  display: inline-block;
  padding: 10px 18px;
  background: var(--accent);
  color: #1a1a1a;
  border-radius: 8px;
  font-weight: 600;
  border: 0;
}
.cta:hover { background: var(--published-hover); text-decoration: none; }
.cta.disabled {
  background: var(--pending);
  color: var(--fg-dim);
  pointer-events: none;
  font-weight: 500;
}
.streaming { display: inline-flex; gap: 12px; }
.stream-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg-dim);
  border-bottom: 1px solid transparent;
}
.stream-link:hover { color: var(--fg); text-decoration: none; border-bottom-color: var(--fg-dim); }

/* City grid */
.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
@media (max-width: 480px) {
  .city-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.city-card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.city-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  text-decoration: none;
}
.city-card .photo {
  aspect-ratio: 1 / 1;
  background: #1a1d24 center/cover no-repeat;
  display: block;
}
.city-card .body { padding: 10px 12px 12px; }
.city-card .name { font-weight: 600; font-size: 0.98rem; margin: 0 0 2px; }
.city-card .ts { font-size: 0.78rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; }

.attribution {
  margin-top: 20px;
  font-size: 0.74rem;
  color: var(--fg-dim);
  line-height: 1.6;
}

/* Footer */
footer {
  text-align: center;
  padding: 32px 24px 48px;
  font-size: 0.85rem;
  color: var(--fg-dim);
  border-top: 1px solid var(--border);
}
.footer-credits { margin: 0 0 6px; }
.footer-signoff { margin: 0 0 10px; color: var(--fg); opacity: 0.8; }
.footer-links { margin: 0; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* ========================================================================== */
/* Server-rendered pages (album / city / credits / about)                     */
/* ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #1a1a1a;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  z-index: 1000;
}
.skip-link:focus { left: 0; text-decoration: none; }

.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;
}

a.brand-mark:hover { text-decoration: none; opacity: 1; }
/* The language switch is a link on rendered pages and a button on the map. */
a.lang-btn {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fg-dim);
}
a.lang-btn:hover { color: var(--fg); text-decoration: none; }
span.lang-btn {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 8px 24px 32px;
}

/* Breadcrumbs */
.crumbs {
  font-size: 0.82rem;
  color: var(--fg-dim);
  margin: 12px 0 22px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
}
.crumbs a { color: var(--fg-dim); }
.crumbs a:hover { color: var(--fg); }
.crumbs i { font-style: normal; opacity: 0.4; }
.crumbs span { color: var(--fg); }

/* Page header (shared by album + city + static pages) */
.page-header { margin: 0 0 32px; }
.page-header h1 {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.page-meta {
  margin: 0 0 8px;
  color: var(--fg-dim);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.page-tagline {
  margin: 0 0 18px;
  font-size: 1.05rem;
  opacity: 0.85;
  font-style: italic;
}
.page-header .flag-bar { margin-bottom: 16px; }

/* Album header: text beside the album's cover art */
.album-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: 32px;
  align-items: start;
  margin-bottom: 32px;
}
.album-head .page-header { margin-bottom: 0; }
.album-cover {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--border);
}
/* Below ~980px the text column gets too narrow to hold the CTA on one line
   (the YouTube button wrapped and orphaned its arrow), so stack instead. The
   cover stays after the header: above it, it just repeats the H1. */
@media (max-width: 980px) {
  .album-head { grid-template-columns: 1fr; gap: 22px; }
  .album-cover { max-width: 520px; }
}
.album-essay { margin-bottom: 36px; }

/* About page — carries the wordmark and tagline the home page no longer shows */
.about-header h1 { margin-bottom: 10px; }
.about-tagline {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--accent);
  margin: 0 0 10px;
  font-weight: 500;
}
.about-subline {
  font-size: 1.02rem;
  max-width: 62ch;
  margin: 0 0 10px;
  opacity: 0.85;
}

/* Landmarks (city pages that carry a reviewed Feature essay) */
.landmarks { margin: 0 0 36px; max-width: 58ch; }
.landmarks ul { margin: 0; padding: 0; list-style: none; }
.landmarks li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.94rem;
  color: var(--fg-dim);
}
.landmarks li strong { color: var(--fg); font-weight: 600; }

/* Tracklist (album page) */
.tracklist-section h2,
.credits-block h2,
.prose h2,
.video-block h2,
.landmarks h2,
.index-section h2 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  font-weight: 700;
  margin: 0 0 14px;
}
.tracklist { list-style: none; margin: 0 0 40px; padding: 0; }
.track {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}
.track:first-child { border-top: 1px solid var(--border); }
.track-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 10px 4px;
  color: inherit;
}
.track-main:hover { text-decoration: none; background: var(--bg-elev); }
.track-num {
  font-variant-numeric: tabular-nums;
  color: var(--fg-dim);
  font-size: 0.82rem;
  width: 22px;
  flex: none;
}
.track-photo {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 6px;
  background: #1a1d24 center/cover no-repeat;
}
.track-text { min-width: 0; flex: 1; }
.track-name { display: block; font-weight: 600; }
.track-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-time {
  flex: none;
  font-size: 0.8rem;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  padding-left: 10px;
}
.track-yt {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--fg-dim);
  font-size: 0.9rem;
}
.track-yt:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 520px) {
  .track-time { display: none; }
  /* Let the descriptor wrap instead of clipping it mid-word at ~40%. */
  .track-sub {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* City page */
.city-hero { margin: 0 0 32px; }
.city-hero img {
  width: 100%;
  display: block;
  /* Heroes arrive in mixed aspect ratios; crop to a consistent band so the page
     below the fold isn't pushed off-screen by a portrait shot. */
  aspect-ratio: 3 / 2;
  max-height: 62vh;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.city-hero figcaption {
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--fg-dim);
}

.prose { margin: 0 0 36px; max-width: 58ch; }
.prose p { margin: 0 0 14px; opacity: 0.9; }

.video-block { margin: 0 0 36px; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pager-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 32px 0 16px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.pager {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: var(--fg);
  max-width: 45%;
}
.pager.next { text-align: right; margin-left: auto; }
.pager span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  font-weight: 700;
}
.pager:hover { text-decoration: none; color: var(--accent); }
.back-link { font-size: 0.88rem; margin: 0; }

/* Credits */
.credits-block { margin: 0 0 28px; }
.credits-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--fg-dim);
  line-height: 1.9;
  columns: 2;
  column-gap: 32px;
}
@media (max-width: 640px) {
  .credits-block ul { columns: 1; }
}

/* Text index on the home page — the crawlable path to every city page. */
.index-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 24px 48px;
  border-top: 1px solid var(--border);
}
/* Section-level total. Distinct from .index-count, which is the per-country
   badge inside each row — reusing that class dragged every badge up by 8px. */
.index-total {
  margin: -8px 0 14px;
  font-size: 0.82rem;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.index-list { list-style: none; margin: 0; padding: 0; }
.index-row { padding: 14px 0; border-bottom: 1px solid var(--border); }
.index-country {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fg);
}
.index-country:hover { color: var(--accent); text-decoration: none; }
.index-flag {
  width: 22px;
  height: 5px;
  border-radius: 3px;
  flex: none;
}
.index-count {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}
.index-cities {
  margin: 6px 0 0 32px;
  font-size: 0.86rem;
  color: var(--fg-dim);
  line-height: 1.9;
}
.index-cities a { color: var(--fg-dim); }
.index-cities a:hover { color: var(--accent); }