/* ============================================================
   04-the-great-train-ride.css — Train-day mood: leather, brass,
   slow countryside. The day is a 4-hour journey from London to
   Edinburgh by LNER, and a comically large hotel suite at the
   other end. Palette shifts from The Grove's olive and Harry
   Potter's amber to a warm clay/leather — first-class seats,
   tea-tray brass, the buttery light of a long train ride.
   ============================================================ */

[data-chapter="04-the-great-train-ride"] {
  /* slightly warmer paper — a daytime, in-motion chapter */
  --paper: #0b0907;
  --paper-soft: #16110b;
  --paper-edge: #221810;

  /* warm clay / train-leather accent */
  --accent: #c89479;

  /* a calm, in-motion atmosphere */
  --grain-opacity: 0.04;
  --vignette-strength: 0.36;

  /* unhurried reveals — the day is long and slow */
  --reveal-distance: 22px;
  --reveal-duration: 1000ms;
}

/* warmer wash on photos — first-class lounge, late afternoon light */
[data-chapter="04-the-great-train-ride"] .media-tile img {
  filter: saturate(1.03) contrast(1.03);
}
[data-chapter="04-the-great-train-ride"] .media-tile:hover img {
  filter: saturate(1.07) contrast(1.05);
}

/* hero: tighter dek width to balance the longer subtitle */
[data-chapter="04-the-great-train-ride"] .hero__sub .dek {
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  max-width: 36ch;
}

/* portrait fullbleed — same helper as ch02, for tall photos that
   would otherwise lose their top/bottom to object-fit:cover. */
[data-chapter="04-the-great-train-ride"] .layout-fullbleed .media-tile.media-tile--portrait {
  height: auto;
  max-height: 92vh;
  background: var(--paper-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-chapter="04-the-great-train-ride"] .layout-fullbleed .media-tile.media-tile--portrait img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  margin: 0 auto;
}