.chapter--nara {
  background: #0a0a0a;
  position: relative;
  /* Same shrink-wrap issue as .chapter--tokyo/.chapter--hakone/.chapter--kyoto:
     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%;
}

/* Stacked in place. Each image after the first is revealed on scroll by an
   iris opening out from the centre — see js/chapters/nara.js. Later images
   paint over earlier ones, so the circle appears to cut through to the next
   picture rather than fading between them. */
.nara-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  will-change: clip-path;
}

/* Also the fallback for the moment before JS runs, so the three don't briefly
   appear stacked on top of one another. */
.nara-bg:not(:first-of-type) {
  clip-path: circle(0% at 50% 50%);
}

.nara-bg:nth-of-type(1) { z-index: 1; }
.nara-bg:nth-of-type(2) { z-index: 2; }
.nara-bg:nth-of-type(3) { z-index: 3; }
.nara-bg:nth-of-type(4) { z-index: 4; }

/* Held to the right half and vertically centred. Unlike Tokyo's and Hakone's
   story columns this one does not travel with the scroll — the section is
   pinned, so an absolutely positioned block simply stays put while the iris
   transitions play underneath it. */
.nara-story {
  position: absolute;
  top: 50%;
  right: clamp(1.25rem, 5vw, 4rem);
  transform: translateY(-50%);
  z-index: 6;
  width: min(calc(100vw - 2.5rem), 440px);
  /* Reserves the block's footprint even though the paragraphs inside are
     absolutely positioned (and so contribute no height of their own). Sized
     for the longest of the three. */
  height: min(62vh, 460px);
  padding: 2rem 1.75rem;
  background: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.6) 70%, rgba(10,10,10,0.78));
  backdrop-filter: blur(2px);
  border-radius: 4px;
}

/* All three occupy the same spot and cross-fade in place, so the block never
   changes size or shifts as the text advances. */
.nara-story p {
  /* Transparent until JS reveals the active one. The chapter module loads
     lazily, so without this all paragraphs would briefly paint stacked on
     top of each other in the gap before `init()` runs. */
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 1.75rem;
  right: 1.75rem;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  line-height: 1.7;
  color: rgba(240,235,227,0.92);
  letter-spacing: 0.01em;
}

.nara-title {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 7;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.5rem, 4vw, 3rem);
  color: #f0ebe3;
}