/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --bg: #0d1117;
  --bg-card: #161b22;
  --bg-elevated: #21262d;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --text-dim: #6e7681;
  --border: #30363d;
  --accent: #58a6ff;
  --radius: 8px;
  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Sky / moon colours are intrinsic to the visualisations — they represent
     real sky and moon appearance, not UI chrome — so they don't flip in light
     mode. The timeline's white elevation curve has a black halo, so it stays
     visible against the cream "day" band in both themes. */
  --phase-astronomical: #1a2342;
  --phase-nautical:     #2c3464;
  --phase-civil:        #3a4173;
  --phase-blue:         #4d5d9e;
  --phase-golden:       #e09a3a;
  --phase-day:          #f5e8c4;

  --cloud-tier-clear:    #a8b5c4;
  --cloud-tier-ideal:    #d8a64a;
  --cloud-tier-cloudy:   #7a7d86;
  --cloud-tier-overcast: #3a3d44;
  --cloud-rain:          #5da8e6;
  --cloud-grid: rgba(255, 255, 255, 0.12);
}

/* Light theme — same palette as go-outside for cross-page consistency. */
[data-theme="light"] {
  --bg: #fffef7;
  --bg-card: #f5f0e0;
  --bg-elevated: #ede8d5;
  --text: #2c2416;
  --text-muted: #5c5041;
  --text-dim: #6b5e4c;
  --border: #e8e0c8;
  --accent: #2563a8;

  --cloud-tier-clear:    #94a0b0;
  --cloud-tier-ideal:    #b78638;
  --cloud-tier-cloudy:   #5a5d66;
  --cloud-tier-overcast: #3a3d44;
  --cloud-rain:          #2d6fa8;
  --cloud-grid: rgba(0, 0, 0, 0.15);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
}

.page { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }

/* ---- Header ---- */
.site-header { border-bottom: 1px solid var(--border); margin-bottom: 24px; padding: 20px 0 16px; }
.site-header__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-header__titles { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.site-header__brand-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.page-title { font-size: clamp(1.68rem, 4.2vw, 2.24rem); font-weight: 700; line-height: 1.25; margin: 0; }
.page-subtitle { color: var(--text-muted); font-size: 0.875rem; margin-top: 4px; }
.breadcrumb-link { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Theme toggle (matches go-outside) ---- */
.theme-toggle {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 99px; padding: 3px 5px; cursor: pointer; margin-right: 10px;
  color: var(--text-dim); flex-shrink: 0;
}
.theme-toggle:hover { color: var(--text-muted); }
.theme-toggle__icon { width: 8px; height: 8px; flex-shrink: 0; display: block; }
.theme-toggle__track {
  width: 17px; height: 10px; background: var(--border);
  border-radius: 99px; position: relative; flex-shrink: 0;
}
.theme-toggle__thumb {
  width: 7px; height: 7px; background: var(--text-dim);
  border-radius: 50%; position: absolute; top: 1.5px; left: 1.5px;
  transition: transform 0.15s, background 0.15s;
}
[data-theme="light"] .theme-toggle__track { background: var(--accent); }
[data-theme="light"] .theme-toggle__thumb { transform: translateX(7px); background: white; }

/* ---- Site logo (animated on first session load; static on subsequent loads via .logo-done) ---- */
.site-logo { width: 160px; flex-shrink: 0; }

.logo-spoke {
  stroke: #FAC775; stroke-width: 0.8; stroke-opacity: 0; fill: none;
  animation: logo-fade-in 0.3s ease forwards;
}
.logo-spoke:nth-child(1) { animation-delay: 0.10s; }
.logo-spoke:nth-child(2) { animation-delay: 0.18s; }
.logo-spoke:nth-child(3) { animation-delay: 0.26s; }
.logo-spoke:nth-child(4) { animation-delay: 0.34s; }
.logo-spoke:nth-child(5) { animation-delay: 0.42s; }
.logo-spoke:nth-child(6) { animation-delay: 0.50s; }

.logo-ring {
  fill: none; stroke: #FAC775; stroke-width: 0.9;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: logo-draw 0.6s ease forwards;
}
.logo-ring-1 { animation-delay: 0.55s; stroke-opacity: 0.35; }
.logo-ring-2 { animation-delay: 0.75s; stroke-opacity: 0.45; }
.logo-ring-3 { animation-delay: 0.95s; stroke-opacity: 0.55; }
.logo-ring-4 { animation-delay: 1.15s; stroke-opacity: 0.65; stroke-width: 1; }

.logo-area {
  fill: #EF9F27; fill-opacity: 0; stroke: #854F0B; stroke-width: 1.5;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: logo-draw 0.7s ease forwards, logo-area-fill 0.7s ease forwards;
  animation-delay: 1.55s, 1.75s;
}

.logo-pt {
  fill: #EF9F27; opacity: 0;
  animation: logo-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.logo-pt:nth-child(1) { animation-delay: 2.10s; }
.logo-pt:nth-child(2) { animation-delay: 2.20s; }
.logo-pt:nth-child(3) { animation-delay: 2.30s; }
.logo-pt:nth-child(4) { animation-delay: 2.40s; }
.logo-pt:nth-child(5) { animation-delay: 2.50s; }
.logo-pt:nth-child(6) { animation-delay: 2.60s; }

.logo-word-data {
  fill: #EF9F27; opacity: 0;
  animation: logo-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 1.9s;
}
.logo-word-retold {
  fill: #BA7517; opacity: 0;
  animation: logo-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 2.05s;
}

@keyframes logo-draw       { to { stroke-dashoffset: 0; } }
@keyframes logo-fade-in    { to { stroke-opacity: 0.5; } }
@keyframes logo-area-fill  { to { fill-opacity: 0.3; } }
@keyframes logo-pop {
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes logo-slide-up {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-spoke { animation: none; stroke-opacity: 0.5; }
  .logo-ring  { animation: none; stroke-dashoffset: 0; }
  .logo-area  { animation: none; stroke-dashoffset: 0; fill-opacity: 0.3; }
  .logo-pt    { animation: none; opacity: 1; }
  .logo-word-data,
  .logo-word-retold { animation: none; opacity: 1; }
}

.logo-done .logo-spoke { animation: none; stroke-opacity: 0.5; }
.logo-done .logo-ring  { animation: none; stroke-dashoffset: 0; }
.logo-done .logo-area  { animation: none; stroke-dashoffset: 0; fill-opacity: 0.3; }
.logo-done .logo-pt    { animation: none; opacity: 1; }
.logo-done .logo-word-data,
.logo-done .logo-word-retold { animation: none; opacity: 1; }

/* ---- Location search (root page) ---- */
.location-search { position: relative; margin-bottom: 32px; }
.location-search__row { display: flex; gap: 8px; }
.location-search__input-wrap { position: relative; flex: 1; min-width: 0; }
.location-search__input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
  padding: 10px 36px 10px 14px;
  min-width: 0;
  box-sizing: border-box;
  border-radius: var(--radius);
}
.location-search__input::placeholder { color: var(--text-dim); }
.location-search__input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.location-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none; width: 18px; height: 18px; background: var(--text-dim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor: pointer;
}
.location-search__spinner {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); display: flex; align-items: center;
}
/* `display: flex` above wins over the UA `[hidden] { display: none }` rule, so
   the spinner would otherwise show at idle. This override fixes that. */
.location-search__spinner[hidden] { display: none; }
.location-search__geo-btn {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-muted); cursor: pointer; padding: 8px 12px;
  display: flex; align-items: center; transition: color 0.15s, border-color 0.15s; flex-shrink: 0;
}
.location-search__geo-btn:hover { color: var(--accent); border-color: var(--accent); }
.location-search__suggestions {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); left: 0; list-style: none; margin-top: 4px;
  max-height: 260px; overflow-y: auto; position: absolute; right: 0; top: 100%; z-index: 100;
}
.location-search__suggestions li {
  cursor: pointer; font-size: 0.9rem; padding: 10px 14px; color: var(--text);
}
.location-search__suggestions li:hover,
.location-search__suggestions li.suggestion--active {
  background: rgba(88, 166, 255, 0.12); color: var(--accent);
}

/* ---- Ad-hoc city-view (root page, client-rendered) ---- */
#city-view { margin-top: 8px; }
.ad-hoc-heading {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ---- Hero ---- */
/* Tightened from 24px so the cards sit visually close to the chart they describe. */
.hero { margin-bottom: 12px; }
.hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
/* Four photo-windows in chronological order. Desktop: single row; mobile: 2x2. */
.hero-row--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .hero-row--four { grid-template-columns: 1fr 1fr; }
}
.hero-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 16px;
  /* Left accent bar in the phase colour ties each card to its band on the chart. */
  border-left: 4px solid var(--border);
  /* Pin the time row to the card's bottom edge so it aligns across all cards
     in a row even when some labels wrap to a second line (and the grid has
     made all cards equal-height). */
  display: flex;
  flex-direction: column;
}
.hero-card--golden { border-left-color: var(--phase-golden); }
.hero-card--blue   { border-left-color: var(--phase-blue);   }
.hero-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.hero-time { font-size: 1.4rem; font-weight: 600; margin-top: auto; }

.section-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; }

/* ---- Light timeline (full-width, standalone) ---- */
.vis-timeline {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px 14px 16px;
  margin-bottom: 20px;
}
.light-timeline {
  width: 100%;
  height: auto;
  display: block;
  color: var(--text);
  margin-top: 8px;
  border-radius: 4px;
}
.light-timeline .axis-label { fill: var(--text-muted); }
.light-timeline .now-line { stroke: #fff; }
.light-timeline .now-label { fill: var(--accent); }
.light-timeline .elevation-curve { color: var(--text); }
.light-timeline .horizon { stroke: var(--text-muted); }
.light-timeline .peak-label { fill: #1a1a1a; }

/* ---- Cloud-cover chart (stacked below light timeline) ---- */
.cloud-timeline {
  width: 100%;
  height: auto;
  display: block;
  color: var(--text);
  margin-top: 4px;
  border-radius: 4px;
}
.cloud-timeline .cloud-bar--clear    { fill: var(--cloud-tier-clear);    }
.cloud-timeline .cloud-bar--ideal    { fill: var(--cloud-tier-ideal);    }
.cloud-timeline .cloud-bar--cloudy   { fill: var(--cloud-tier-cloudy);   }
.cloud-timeline .cloud-bar--overcast { fill: var(--cloud-tier-overcast); }
.cloud-timeline .cloud-grid { stroke: var(--cloud-grid); }
.cloud-timeline .rain-line { stroke: var(--cloud-rain); }
.cloud-timeline .cloud-now-line { stroke: #fff; }
.cloud-timeline .axis-label { fill: var(--text-muted); }
.cloud-timeline .cloud-caption { fill: var(--text-muted); }

.vis-timeline__caption {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
}
.vis-timeline__caption span { color: var(--text); font-weight: 600; }

.timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  justify-content: center;
}
.timeline-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.timeline-legend__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.timeline-legend__swatch.phase--astronomical { background: var(--phase-astronomical); }
.timeline-legend__swatch.phase--nautical     { background: var(--phase-nautical);     }
.timeline-legend__swatch.phase--civil        { background: var(--phase-civil);        }
.timeline-legend__swatch.phase--blue         { background: var(--phase-blue);         }
.timeline-legend__swatch.phase--golden       { background: var(--phase-golden);       }
.timeline-legend__swatch.phase--day          { background: var(--phase-day);          }
.timeline-legend__swatch.cloud-tier--clear    { background: var(--cloud-tier-clear);    }
.timeline-legend__swatch.cloud-tier--ideal    { background: var(--cloud-tier-ideal);    }
.timeline-legend__swatch.cloud-tier--cloudy   { background: var(--cloud-tier-cloudy);   }
.timeline-legend__swatch.cloud-tier--overcast { background: var(--cloud-tier-overcast); }
/* Line-style swatch for the sun-elevation curve key: white stripe with a black
   border, matching the actual line on the chart (white inside, black halo). */
.timeline-legend__swatch--line {
  background: #fff;
  border: 1px solid #000;
  height: 4px;
  width: 16px;
  align-self: center;
  border-radius: 1px;
}
/* Line-style swatch for the rain-probability line on the cloud chart. */
.timeline-legend__swatch--rain-line {
  background: var(--cloud-rain);
  height: 4px;
  width: 16px;
  align-self: center;
  border-radius: 1px;
}

/* ---- Visualisations (sun + moon row, below the full-width timeline) ---- */
.visualisations { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }
@media (min-width: 720px) { .visualisations { grid-template-columns: 1fr 1fr; } }

.vis-block {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 14px;
  /* Cards in the visualisations row stretch to equal heights (grid default).
     Inside each card, the SVG sits at the top and text rows are pushed to the
     bottom so they align across cards even when the cards have a different
     number of text rows. */
  display: flex;
  flex-direction: column;
}
/* Anchor the bottom rows of each card to the card's bottom edge.
   - Sun: caption + readout are at the bottom, so the caption itself gets the
     auto-margin and the readout follows naturally.
   - Moon: we WANT the moon caption to sit close to the SVG above (the "X days
     to full moon" line is conceptually part of the moon graphic, not part of
     the data readouts). So the auto-margin goes on the FIRST readout instead;
     that pushes the readouts to the bottom while the caption stays up by the
     graphic. */
.vis-block .compass-caption { margin-top: auto; }
.vis-block .moon-caption + .vis-readout { margin-top: auto; }
.vis-readout { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; }
.vis-readout span { color: var(--text); font-weight: 600; }

.phase--astronomical { fill: var(--phase-astronomical); }
.phase--nautical     { fill: var(--phase-nautical);     }
.phase--civil        { fill: var(--phase-civil);        }
.phase--blue         { fill: var(--phase-blue);         }
.phase--golden       { fill: var(--phase-golden);       }
.phase--day          { fill: var(--phase-day);          }

.sun-compass { width: 100%; max-width: 320px; height: auto; color: var(--text); display: block; margin: 0 auto; }
.sun-compass .compass-cardinal { fill: var(--text); }
.sun-compass .compass-horizon { stroke: var(--text-muted); }
.sun-compass .compass-elev-ring { stroke: var(--text-muted); }
.sun-compass .compass-elev-label { fill: var(--text-muted); }
.sun-compass .compass-marker text { fill: var(--text); }
.sun-compass .compass-shadow { stroke: var(--text-muted); }
.compass-caption {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
}
.compass-caption span { color: var(--text); font-weight: 600; }
.moon-phase {
  width: 100%;
  /* Matches .sun-compass — alignment of bottom text rows is handled by the
     flex layout on .vis-block (text pushed to the bottom of the stretched
     card). The SVG itself stays a square of equal size to the compass. */
  max-width: 320px;
  height: auto;
  display: block;
  margin: 8px auto 0;
  color: var(--text);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
.moon-caption {
  font-size: 0.85rem;
  color: var(--text-muted);
  /* The moon SVG has ~32px of empty viewBox padding below the visible disc.
     -23px lifts the caption past most of that padding while leaving a small
     gap between the disc edge and the caption text. */
  margin-top: -23px;
  margin-bottom: 10px;
  text-align: center;
}
.moon-caption span { color: var(--text); font-weight: 600; }

/* ---- Control row: location search + date picker ---- */
.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  /* Stretch so .date-control matches .location-search's height automatically
     (the location field's intrinsic height varies by OS/font rendering, so
     hard-coding a padding to match drifts). */
  align-items: stretch;
  margin-bottom: 16px;
}
.control-row .location-search {
  /* 200px base (not 280px) so the location field can shrink enough on narrow
     phones to keep the date icon-button on the same row instead of wrapping. */
  flex: 1 1 200px;
  min-width: 0;
  margin-bottom: 0; /* the .control-row spaces things; per-child margins are zero */
}
/* Date control: icon-only button styled like the geolocate button. The real
   <input type="date"> is hidden but kept in the DOM so showPicker() opens
   the native calendar and the 'change' handler still fires. */
.date-control {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}
/* Wrapper for the calendar button + hidden native input. Positioned so the
   absolute `<input type=date>` (inset:0) overlays only this part, not the
   prev/next chevron buttons. Flex so the calendar button inside stretches
   vertically to match the row height (the .control-row uses
   align-items: stretch, which propagates to .date-control's children, but
   only stops here unless this wrapper is also a flex container). */
.date-control__picker {
  position: relative;
  flex: 0 0 auto;
  display: flex;
}
.date-control__btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  /* Padding matches the geolocate button. Height comes from the parent flex
     row's stretch, which auto-matches the location field. */
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  width: 100%;
}
.date-control__picker:hover .date-control__btn,
.date-control__picker:focus-within .date-control__btn { color: var(--accent); border-color: var(--accent); }
/* The native <input type="date"> sits invisibly over the calendar icon for
   clickability. We surface its keyboard focus on the visible button via
   :focus-within above, plus an outline for stronger keyboard-only signal. */
.date-control__picker:focus-within .date-control__btn { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Prev/next chevron buttons. Stretch vertically to match the calendar button
   (the parent .control-row uses align-items: stretch). min-width keeps the
   tap target comfortably above the iOS 44pt / Android 48dp guideline. */
.date-control__step {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 14px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.date-control__step:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.date-control__step:disabled { opacity: 0.35; cursor: not-allowed; }
.date-control__input-hidden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  background: transparent;
}
/* Stretch Chrome's native calendar-picker indicator to fill the entire
   input area. In Chrome the indicator is the actual click target that
   opens the native picker — hiding it kills the picker, leaving only
   its tiny default region open clicks unreliably. Stretching it to
   inset: 0 makes any click over the calendar icon open the picker. */
.date-control__input-hidden::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}

/* Brief toast shown when a past date is clamped back to today. The
   iOS Safari date picker UI lets users scroll/tap past dates even
   with min set; the change handler snaps them back, and this toast
   explains why their selection didn't stick.
   Lives at document.body level with position: fixed + JS-positioned
   coords so it sits at the top of the document's stacking context and
   can't be obscured by surrounding content's stacking contexts. */
.date-clamp-toast {
  position: fixed;
  /* top + right set by JS to anchor below the date-control */
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
}
.date-clamp-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Editorial sections ---- */
.editorial-wrap {
  max-width: 760px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.editorial h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; color: var(--text); }
.editorial p { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.65; }
.editorial a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.editorial a:hover { color: var(--text); }
.editorial strong { color: var(--text); }
.editorial__detail { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 8px; }
.editorial__detail summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--text); padding: 12px 14px; min-height: 44px; display: flex; align-items: center; }
.editorial__detail[open] summary { border-bottom: 1px solid var(--border); }
.editorial__detail-body { padding: 12px 14px; }
.editorial__detail-body p { margin-bottom: 10px; font-size: 0.9rem; }
.editorial__detail-body p:last-child { margin-bottom: 0; }

/* ---- Country grid ---- */
.country-grid-section { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }
.country-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.country-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.country-chip:hover { color: var(--text); background: var(--bg-elevated); }

/* ---- Hub city grid (country hub pages) ---- */
.hub-city-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hub-city-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.hub-city-chip:hover { color: var(--text); background: var(--bg-elevated); }

/* ---- Cross-promo ---- */
.cross-promo { margin-top: 24px; text-align: center; font-size: 0.85rem; }
.cross-promo a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.cross-promo a:hover { color: var(--text); }

/* ---- Site nav footer ---- */
.site-nav-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; gap: 16px; font-size: 0.78rem; }
.site-nav-footer a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.site-nav-footer a:hover { color: var(--text); }

/* ---- Mobile polish (≤600px) ---- */
@media (max-width: 600px) {
  .page { padding: 12px 14px 48px; }
  .site-header { padding: 14px 0 12px; margin-bottom: 18px; }
  /* The timeline SVG uses preserveAspectRatio="none", so axis text is scaled
     down to ~5px on narrow screens — unreadable. Hide ticks on mobile; the
     caption and legend below already convey the same info. */
  .light-timeline .axis-label,
  .light-timeline .peak-label,
  .light-timeline .now-label { display: none; }
  .vis-timeline { padding: 12px; }
  .vis-timeline__caption { font-size: 0.9rem; line-height: 1.55; margin-top: 12px; }
  /* Stack the date control onto its own line so the location field gets
     full width for typing, and the calendar button stretches to fill the
     space between the two chevrons. */
  .date-control { width: 100%; }
  .date-control__picker { flex: 1; }
}

/* ---- Logo: match go-outside's breakpoint exactly (≤540px → 110px) ---- */
@media (max-width: 540px) {
  .site-logo { width: 110px; }
}

/* ---- Mobile polish: small phones (≤480px) ---- */
@media (max-width: 480px) {
  /* The 4-card hero strip becomes 2x2 here; the default 1.4rem time wraps
     awkwardly inside the narrow cards. */
  .hero-card { padding: 12px; }
  .hero-time { font-size: 1.15rem; }
  .hero-label { font-size: 0.7rem; }
}