@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Sky colors, bottom to top. app.js moves them as the chosen city's sun climbs.
   Registering them lets the browser tween each step instead of snapping. */
@property --ground { syntax: "<color>"; inherits: true; initial-value: #060e24; }
@property --low    { syntax: "<color>"; inherits: true; initial-value: #131b45; }
@property --band   { syntax: "<color>"; inherits: true; initial-value: #6e3a4a; }
@property --glow   { syntax: "<color>"; inherits: true; initial-value: #b0603c; }
@property --mid    { syntax: "<color>"; inherits: true; initial-value: #4a3f6a; }
@property --top    { syntax: "<color>"; inherits: true; initial-value: #0a1330; }

:root {
  --horizon: 60%;      /* where the sky meets the ground, from the top */
  --horizon-y: 60dvh;  /* the same line, for layout math */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ink: #fff2e0;
  --ink-soft: rgba(255, 242, 224, 0.72);
  --ink-faint: rgba(255, 242, 224, 0.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  font-family: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.scene {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 28% at 38% var(--horizon), var(--glow) 0%, transparent 70%),
    linear-gradient(to bottom,
      var(--top) 0%,
      var(--mid) calc(var(--horizon) - 14%),
      var(--glow) var(--horizon),
      var(--band) calc(var(--horizon) + 4%),
      var(--low) 72%,
      var(--ground) 100%);
  transition:
    --ground 1.6s linear, --low 1.6s linear, --band 1.6s linear,
    --glow 1.6s linear, --mid 1.6s linear, --top 1.6s linear;
}

.stage {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(100dvh - var(--horizon-y) + 1.25rem);
  max-width: 60rem;
}

.stage > * { margin: 0; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--ink-soft);
  margin-bottom: 0.35em;
}

.city {
  font-family: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 72;
  font-size: clamp(3rem, 15vw, 10.5rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  white-space: nowrap;
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
}

.country {
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  margin-top: 0.3em;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1.5em;
  margin-top: 0.8em;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.stage.swap { animation: settle 0.6s ease-out; }
@keyframes settle {
  from { opacity: 0; transform: translateY(0.35rem); }
  to   { opacity: 1; transform: none; }
}

.map {
  position: absolute;
  left: 50%;
  top: calc(var(--horizon-y) + 2.5rem);
  width: min(100% - 2 * var(--gutter), 2 * (100dvh - var(--horizon-y) - 2.5rem - 6.5rem));
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}

.map .coast { fill: none; stroke: var(--ink); stroke-width: 0.45; stroke-opacity: 0.22; stroke-linejoin: round; }
.map .night { fill: #000; fill-opacity: 0.16; }
.map .terminator { fill: none; stroke: var(--ink); stroke-width: 0.35; stroke-opacity: 0.32; }
.map .dot { fill: var(--ink); }
.map .halo { fill: none; stroke: var(--ink); stroke-width: 0.35; stroke-opacity: 0.55; }

.foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(1rem, env(safe-area-inset-bottom));
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
}

.foot p { margin: 0; }
.next { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.credit { color: var(--ink-faint); margin-top: 0.3em; }
.credit a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-color: rgba(255, 242, 224, 0.3); }
.credit a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

@media (max-height: 640px) {
  :root { --horizon: 64%; --horizon-y: 64dvh; }
  .map { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scene { transition: none; }
  .stage.swap { animation: none; }
}