.chapter--kyoto {
  background: #0a0a0a;
  /* Scroll budget for the whole chapter: the frame sequence plus three shoji
     wipes between the stills. The sticky stage below is 100vh, so actual
     scroll travel is this minus one viewport. */
  height: 600vh;
  /* Same shrink-wrap issue as .chapter--tokyo/.chapter--hakone: 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%;
  /* Exempted from the shared `.chapter { overflow: hidden }` base rule
     (css/experience.css) — that rule made this tall section establish its own
     clipping/scroll context, which defeats `position: sticky` on the stage
     below (sticky needs an ancestor that's an actual scrolling context — the
     viewport/document — not a clipped block). */
  overflow: visible;
}

.kyoto-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  /* Clipping lives here rather than on the section, which has to stay
     unclipped for sticky to work at all. */
  overflow: hidden;
}

/* Same motif as the sequence, blurred and dimmed, filling the frame behind
   the sharp portrait footage. This is what lets the portrait frames keep
   their true proportions without either stretching them across a landscape
   viewport or falling back to dead black bars. */
.kyoto-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Scaled up slightly so the blur doesn't reveal soft transparent edges
     where the filter samples past the image bounds. */
  transform: scale(1.08);
  /* Kept clearly readable rather than dimmed to near-black: the motif is
     meant to be recognised, so the sharp sequence reads as a picture within
     the same scene. Just enough blur and shading to separate the two planes. */
  filter: blur(3px) brightness(0.85);
  z-index: 0;
}

/* Width is set by JS from the frames' real aspect ratio and the canvas's own
   width attribute governs, so `width: auto` here must not override it. */
.kyoto-sequence {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100vh;
  width: auto;
  display: block;
  z-index: 1;
}

/* The stills that follow the sequence. Each starts closed to a centre seam
   and opens outward like a sliding shoji screen — driven from
   js/chapters/kyoto.js. Stacked so a later still wipes over the one before. */
.kyoto-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 50% 0 50%);
  will-change: clip-path;
}

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

.kyoto-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* Held to the right of the frame so the sharp portrait sequence in the centre
   stays clear — the column sits over the blurred backdrop instead. Like
   Nara's, this block does not travel with the scroll: the stage is sticky, so
   it simply stays put while the pictures change beneath it. */
/* Only a position and a width — no box of its own. `height: 0` makes this a
   centre line for the paragraphs to hang from, which matters twice over: the
   panel is drawn per paragraph below, so it can size itself to the text it
   actually holds (the three differ a lot in length), and nothing is painted
   at all while every paragraph is still transparent — during the torii walk,
   which should stay clear. */
.kyoto-story {
  position: absolute;
  top: 50%;
  right: clamp(1.25rem, 5vw, 4rem);
  transform: translateY(-50%);
  z-index: 6;
  width: min(calc(100vw - 2.5rem), 440px);
  height: 0;
}

/* Each paragraph carries its own panel and is centred on that line, so the
   three cross-fade in place without any of them being cropped or leaving a
   half-empty box behind. */
.kyoto-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: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 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;
  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;
}

.kyoto-title {
  position: absolute;
  top: 2rem;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 7;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.5rem, 4vw, 3rem);
  color: #f0ebe3;
}