:root {
  color-scheme: light;
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", sans-serif;
  color: #2e302d;
  background: #fff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { overflow: hidden; }
[hidden] { display: none !important; }

.home {
  width: 100%;
  height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background: #fff;
}

.map-viewport {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 800ms ease;
  scrollbar-width: thin;
  scrollbar-color: #c6ccc7 transparent;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.is-ready .map-viewport { opacity: 1; }
.map-viewport:focus-visible { outline: 1px solid #858e85; outline-offset: -3px; }

.map-canvas {
  position: relative;
  width: min(100vw, calc(100svh * 2048 / 1156));
  aspect-ratio: 2048 / 1156;
  flex-shrink: 0;
  margin-inline: auto;
  isolation: isolate;
}

.map { width: 100%; height: 100%; display: block; overflow: hidden; }
.draw-route { stroke-dasharray: 1; stroke-dashoffset: 1; visibility: hidden; }
.map-labels { position: absolute; inset: 0; pointer-events: none; }
.map-point {
  position: absolute;
  width: 1.7%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  visibility: hidden;
}
.is-complete .map-point { pointer-events: auto; visibility: visible; }
.map-point:focus-visible { outline: 2px solid #42825c; outline-offset: 5px; }
.point-caption {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  padding: 8px 12px;
  border: 1px solid #e3e5e0;
  background: rgba(255, 255, 255, .96);
  color: #34372e;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  white-space: nowrap;
  transform: translate(-50%, 4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.map-point:last-child .point-caption { left: auto; right: -10px; transform: translate(0, 4px); }
/* Hover owns the single visible caption; keyboard focus is the fallback.
   Returning from a story restores focus without pinning a second label. */
.map-point:hover .point-caption,
.map-labels:not(:has(.map-point:hover)) .map-point:focus-visible .point-caption { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.map-point:last-child:hover .point-caption,
.map-labels:not(:has(.map-point:hover)) .map-point:last-child:focus-visible .point-caption { transform: translate(0, 0); }

.load-error { position: fixed; top: 45%; inset-inline: 24px; text-align: center; font-size: 14px; }

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

/* Keep the geography together on phones. Pan the map instead of cropping points. */
@media (max-width: 700px) and (orientation: portrait) {
  .map-canvas { width: max(100vw, min(calc(100vw * 3), calc(100svh * 2048 / 1156))); margin-inline: 0; }
  .map-point { min-width: 32px; }
  .point-caption { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .map-viewport, .point-caption { transition: none; }
}