/* ============================================================
   02-grove.css — The Grove chapter mood: warm / verdant / unhurried
   The first proper rest of the trip. Default warm cinematic palette
   stays; we shift the accent toward sage/olive (gardens, woodlands),
   soften the grain, slow the reveals down. Structural CSS lives in
   cinematic.css; this file only overrides design tokens and adds
   one small day-divider helper.
   ============================================================ */

[data-chapter="02-grove"] {
  /* keep the warm paper, but a hair richer */
  --paper: #0c0a08;
  --paper-soft: #17120c;
  --paper-edge: #221a11;

  /* sage/olive accent — the gardens and woodlands */
  --accent: #b8b178;

  /* gentler atmosphere — the place is calm */
  --grain-opacity: 0.035;
  --vignette-strength: 0.32;

  /* slower, longer reveals — unhurried pacing */
  --reveal-distance: 24px;
  --reveal-duration: 1100ms;
}

/* a touch warmer wash on photos — golden-hour */
[data-chapter="02-grove"] .media-tile img {
  filter: saturate(1.02) contrast(1.02);
}
[data-chapter="02-grove"] .media-tile:hover img {
  filter: saturate(1.06) contrast(1.04);
}

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

/* day divider — a small horizontal label bar between days,
   styled like the chapter-list group headers on the index. */
.day-divider {
  width: var(--container);
  margin: clamp(2rem, 6vh, 5rem) auto clamp(1rem, 3vh, 2rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
}
.day-divider__rule {
  height: 1px;
  background: var(--rule);
}
.day-divider__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.day-divider__label small {
  display: inline-block;
  margin-left: 0.6em;
  color: var(--mute);
  font-weight: 400;
}

/* portrait fullbleed — for tall photos that would otherwise lose
   their top/bottom to object-fit:cover. Shows the whole frame,
   centered, capped at viewport height. */
[data-chapter="02-grove"] .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="02-grove"] .layout-fullbleed .media-tile.media-tile--portrait img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  margin: 0 auto;
}