.chapter--hakone {
  background: #0a0a0a;
  /* Same shrink-wrap issue as .chapter--tokyo: body is `display:flex`, so
     without an explicit width this section shrinks to its content width
     instead of filling the viewport. `100%` (not `100vw`) to avoid
     including classic scrollbar width — see tokyo.css for details. */
  width: 100%;
}

.hakone-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  will-change: opacity, filter;
}

/* Only the first image starts visible — the rest are hidden via inline
   opacity set by hakone.js before the crossfade timeline runs, so there's
   no flash-of-all-five-stacked on load before JS executes. This is a CSS
   fallback for the (rare) case JS hasn't run yet. */
.hakone-bg:not(:first-of-type) {
  opacity: 0;
}

.hakone-mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hakone-story {
  position: absolute;
  top: 0;
  /* Held to the left half instead of centred: unlike Tokyo, where the photos
     travel past horizontally, Hakone's images just dissolve in place — a
     centred column would cover the part of the shot you actually want to
     look at. Inset from the edge rather than flush against it. No translateX
     for positioning, since GSAP drives this element's `transform` for the
     scroll-up tween and would overwrite it. */
  left: clamp(1.25rem, 5vw, 4rem);
  /* Above `.hakone-mist` (no z-index, but painted after the images) and
     above `.hakone-title` (z-index 2) — the brief asks for the text to sit
     over both the photos and the drifting mist. */
  z-index: 3;
  /* The viewport-minus-gutters term only binds on narrow screens, where the
     column needs the full width anyway; on desktop the 460px cap wins and
     leaves the centre and right of the frame clear. */
  width: min(calc(100vw - 2.5rem), 460px);
  padding: 2rem 1.75rem;
  background: linear-gradient(rgba(10,10,10,0.75), rgba(10,10,10,0.55) 70%, rgba(10,10,10,0.75));
  backdrop-filter: blur(2px);
  border-radius: 4px;
}

.hakone-story p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  line-height: 1.7;
  color: rgba(240,235,227,0.92);
  letter-spacing: 0.01em;
}

.hakone-story p + p {
  margin-top: 1.5rem;
}

.hakone-title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(2rem, 6vw, 4.5rem);
  color: #f0ebe3;
}

/* Held back until the chapter module has run — same reasoning as the matching
   rule in tokyo.css. */
.chapter--hakone:not([data-chapter-ready]) .hakone-story {
  visibility: hidden;
}