/* ============================================================
   05-obscura-potions.css — Illusions & Potions mood: kaleidoscopes,
   spinning tunnels, dry-ice smoke, neon-mirror reflections.
   The chapter shifts from chapter 04's warm clay/leather to a
   cooler, otherworldly amethyst — the color of dim violet
   exhibition lighting and potion-bottle glow. Structural CSS
   lives in cinematic.css; this file only overrides design tokens.
   ============================================================ */

[data-chapter="05-obscura-potions"] {
  /* cooler, slightly deeper paper — interiors, after-dark mood */
  --paper: #07070d;
  --paper-soft: #100e1c;
  --paper-edge: #181428;

  /* soft amethyst accent — kaleidoscope / potion-bottle glow */
  --accent: #a691d6;

  /* a touch more atmosphere — mirrored rooms, smoke */
  --grain-opacity: 0.05;
  --vignette-strength: 0.44;

  /* slightly snappier — there's a lot of small wonder to take in */
  --reveal-distance: 22px;
  --reveal-duration: 950ms;
}

/* cooler wash on photos — exhibition lighting, neon reflections */
[data-chapter="05-obscura-potions"] .media-tile img {
  filter: saturate(1.05) contrast(1.04);
}
[data-chapter="05-obscura-potions"] .media-tile:hover img {
  filter: saturate(1.1) contrast(1.06);
}

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

/* portrait fullbleed — same helper as ch04, for tall photos that
   would otherwise lose their top/bottom to object-fit:cover. */
[data-chapter="05-obscura-potions"] .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="05-obscura-potions"] .layout-fullbleed .media-tile.media-tile--portrait img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  margin: 0 auto;
}