/* Map rendering shared by every map on the page */
.map-stage { position: relative; }
.map { width: 100%; height: 100%; overflow: visible; }

.map-wards path {
  stroke: var(--map-edge);
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  transition: fill .5s var(--ease), opacity .5s var(--ease), stroke .2s;
}
.map-outline {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  opacity: .9;
}
.map-glow { fill: none; stroke: var(--brand); stroke-width: 4; opacity: .22; }

/* hovered / read-out ward */
.map-wards path.is-hot { stroke: var(--fg); stroke-width: 1.6; }

/* entrance (hero): outline draws, then wards fill north -> south */
.js .map-intro .map-wards path { opacity: 0; }
.js .map-intro .map-outline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .map-intro .map-glow { opacity: 0; transition: opacity 1.4s var(--ease) 1.2s; }
.js .map-intro.is-drawn .map-outline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-io); }
.js .map-intro.is-drawn .map-wards path {
  opacity: 1;
  transition: opacity .7s var(--ease), fill .5s var(--ease), stroke .2s;
  transition-delay: calc(0.6s + var(--i, 0) * 1.1s), 0s, 0s;
}
.js .map-intro.is-drawn .map-glow { opacity: .22; }

@media (prefers-reduced-motion: reduce) {
  .js .map-intro .map-wards path { opacity: 1; }
  .js .map-intro .map-outline { stroke-dashoffset: 0; }
  .js .map-intro .map-glow { opacity: .22; }
}

/* caption with a small ramp swatch */
.map-cap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: 0; font: 400 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--fg-muted);
}
.map-cap-dim { color: var(--fg-faint); }
.map-scale { display: inline-block; width: 56px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--map-lo), var(--map-hi)); }