/* The hub. No build step, no framework, no JavaScript — this page has to be up
   when the map or the API is not, and the surest way to manage that is for it
   to have nothing that can fail.

   It also follows the reader's light or dark preference, which the map does not:
   the map is dark because it sits under a pale basemap, and prose has no such
   excuse. */

:root {
  color-scheme: dark light;
  --bg: #0b1016;
  --panel: #131c26;
  --text: #e8eef5;
  --muted: #8b9bad;
  --line: rgba(255, 255, 255, 0.1);
  --link: #4cc2ff;
  --accent: #3ba7d9;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f8fa;
    --panel: #ffffff;
    --text: #16202b;
    --muted: #5a6a7a;
    --line: rgba(0, 0, 0, 0.12);
    --link: #0d6ea8;
    --accent: #0d6ea8;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 48px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); }
a:hover { color: var(--text); }

/* One measure for the whole page, so nothing has to set its own width. */
header, main, footer { max-width: 68ch; margin-inline: auto; }

.hero { padding: 56px 0 8px; }

.wordmark {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 650;
}

.lede { margin: 0 0 16px; font-size: 17px; color: var(--muted); }
.hero .lede:last-of-type { color: var(--text); }

h2 {
  margin: 44px 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

p { margin: 0 0 14px; }

.links { margin-top: 18px; font-weight: 600; }

/* ── City list ───────────────────────────────────────────────────────────── */

.cities { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.city {
  display: block;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.city a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* A live city is a destination; one that is not yet is a statement. Making the
   difference structural — clickable versus not — rather than only a label
   means nobody taps Edinburgh and wonders why nothing happened. */
.city.live { border-color: rgba(59, 167, 217, 0.5); }
.city.live:hover { border-color: var(--accent); }
.city.soon { opacity: 0.72; }

.city-name {
  display: block;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.city-state {
  display: inline-block;
  margin: 4px 0 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.city.live .city-state { background: rgba(50, 215, 75, 0.16); color: #2fae4a; }
.city.soon .city-state { background: rgba(139, 155, 173, 0.16); color: var(--muted); }

@media (prefers-color-scheme: dark) {
  .city.live .city-state { color: #4ade6b; }
}

.city-blurb { display: block; font-size: 15px; color: var(--muted); }

/* ── Terms page ──────────────────────────────────────────────────────────── */

.page-head { padding: 40px 0 0; }
.crumb { margin: 0 0 18px; font-size: 14px; }

.prose section { margin-bottom: 8px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 10px; }

footer {
  margin-top: 52px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.fine { font-size: 12.5px; line-height: 1.5; }

.build { margin: 10px 0 0; font-size: 12px; }
.build code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
}