.chapter--map {
  background: #0a0a0a;
  /* Two columns: the message on the left, the route on the right. `wrap`
     lets them stack again on a phone, where side-by-side would leave the
     map barely legible. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  perspective: 1000px;
  /* Same shrink-wrap issue as the other chapters (body is `display:flex`).
     `100%` (not `100vw`) to avoid including classic scrollbar width — see
     tokyo.css for details. */
  width: 100%;
}

/* The same rising sun as the landing page, closing the loop the site opened
   with. Values match .sun-circle in css/base.css. */
.map-sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 500px);
  height: min(70vw, 500px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(188,0,45,0.5) 0%, rgba(188,0,45,0.17) 60%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* The narrower of the two columns — roughly a third of the row against the
   message's two thirds. The basis values are what the ratio actually rests
   on; the basis is also where wrapping to a stacked layout kicks in.
   `position: relative` + `z-index` lift both columns clear of the sun: a
   positioned element would otherwise paint over its in-flow siblings. */
.map-card {
  position: relative;
  z-index: 1;
  flex: 1 1 240px;
  max-width: 340px;
  transform-style: preserve-3d;
}

.map-svg { width: 100%; height: auto; }

/* Stylized Honshu backdrop — a faint outline suggesting "a path through a
   country", clearly secondary to the bright red .map-route line drawn on
   top of it. Matches the low-opacity rgba(240,235,227,…) treatment used
   elsewhere for dim/backdrop elements (see .map-outro, .osaka-ticker). */
.map-outline {
  fill: none;
  stroke: rgba(240,235,227,0.15);
  stroke-width: 1.5;
}

.map-pin {
  fill: #BC002D;
  transform-origin: center;
}

.map-label {
  fill: rgba(240,235,227,0.7);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}

/* The closing message, laid over the map and centred on the section.
   `width: fit-content` so the block is only as wide as its widest line — the
   greeting — which is what the note underneath then wraps against. */
/* The wider column: two shares against the map's one. No longer laid over the
   map, so it needs neither absolute positioning nor a text shadow to stay
   legible. */
.map-outro {
  position: relative;
  z-index: 1;
  flex: 2 1 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The occasion, set as a backdrop rather than a headline. Positioned exactly
   like .map-sun so it lands in the middle of the circle, and given the same
   `z-index: 0` — with both at the same level, the later one in the markup
   paints on top, which puts the numeral over the sun while the message and
   the route (both z-index 1) still sit above it. Fill only, no outline: a
   stroke draws the eye along its edges and competes with the greeting, which
   is exactly what this shouldn't do. Sized so the digits stand roughly four
   fifths as tall as the circle — the multiplier accounts for glyph height
   being about 70% of the font size, so the value here is larger than the
   height it actually produces. */
.map-thirty {
  position: absolute;
  top: 50%;
  left: 50%;
  /* The extra -0.08em lifts the digits onto the circle's centre. Centring the
     box is not the same as centring what you see: Noto Serif JP reserves a
     deep descender area (measured font ascent 506 / descent 126 per 440px)
     that digits never reach, so their ink sits about 8% of the font size
     below the box's middle. Expressed in em, the correction holds at every
     size the clamp below produces. */
  transform: translate(-50%, calc(-50% - 0.08em));
  z-index: 0;
  font-family: 'Noto Serif JP', serif;
  font-size: min(49vw, 352px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(240,235,227,0.11);
  /* Roughly 30 bpm — one beat every two seconds. Only `opacity` breathes, not
     `scale`: the transform above carries the optical centring, and a keyframe
     animating `transform` would replace it outright and drop the numeral off
     centre. `opacity` multiplies the fill alpha above, so the swing stays
     within the same restrained range the static value was chosen for. */
  animation: map-thirty-pulse 2s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}

@keyframes map-thirty-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* The rest of the site gates motion through js/reduced-motion.js, but this one
   is pure CSS, so it needs the media query to be reachable by the same
   preference. Left at full opacity rather than the dimmed low end, so the
   numeral simply sits there as a static backdrop. */
@media (prefers-reduced-motion: reduce) {
  .map-thirty {
    animation: none;
    opacity: 1;
  }
}

.map-outro-jp {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(2rem, 7vw, 4rem);
  color: #f0ebe3;
  line-height: 1.2;
}

.map-outro-en {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.1rem, 3.2vw, 1.75rem);
  color: rgba(240,235,227,0.8);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 0.75rem;
}

/* Between the greeting and the closing lines: a touch larger and brighter than
   the sign-off below, so it reads as the sentence that carries the thought
   rather than as part of the farewell. Same `width: 0` / `min-width: 100%`
   trick as .map-outro-note — see the note there. */
.map-outro-line {
  width: 0;
  min-width: 100%;
  margin-top: 1.75rem;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.65;
  color: rgba(240,235,227,0.88);
  letter-spacing: 0.015em;
}

/* `width: 0` keeps this line out of the parent's intrinsic width calculation,
   so the block stays as wide as the greeting above rather than being stretched
   by one long sentence; `min-width: 100%` then lets it fill — and wrap within
   — exactly that width. */
.map-outro-note {
  width: 0;
  min-width: 100%;
  margin-top: 1.5rem;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 2.1vw, 1.05rem);
  line-height: 1.7;
  color: rgba(240,235,227,0.7);
  letter-spacing: 0.02em;
}