/*
 * /preview/world page-specific styles.
 *
 * Most of the page rides on classes the home and start pages already
 * supply via site.css (.page-hero, .wrap, .section-head, .card-grid,
 * .world-map, .villages-grid, .prose, .eyebrow). This file only adds
 * what's new on the world page:
 *
 *   - .world-lore / .world-map-section / .world-villages /
 *     .world-places / .world-pull / .world-events / .world-cta
 *     are section-scoped vertical-rhythm wrappers.
 *   - .world-pull__quote is the cosmos pull-quote treatment.
 *   - .world-cta__inner / .world-cta__buttons handle the closing
 *     two-button CTA row.
 *
 * If site.css later defines any of these classes, this file becomes
 * redundant and should be folded in. For now it's additive only.
 */

/* ---------- vertical rhythm ---------- */

.world-lore,
.world-map-section,
.world-villages,
.world-places,
.world-pull,
.world-events,
.world-cta {
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* Subtle alternating panel for visual sectioning. Uses the layout's
   ink-deep ramp without introducing new tokens. */
.world-lore,
.world-places,
.world-events {
  background: color-mix(in oklab, var(--ink-deep, #11151a) 92%, transparent);
}

/* ---------- prose blocks (lore + events copy) ---------- */

.world-lore .prose,
.world-events .prose {
  max-width: 56ch;
  margin-inline: auto;
  color: var(--text, #ebe9e4);
}

.world-lore .prose p + p,
.world-events .prose p + p {
  margin-top: 1.1em;
}

/* ---------- villages grid (6 cards) ---------- */

/* .villages-grid removed. world.pug now uses .villages (shared in
 * site.css under "Village picker"), so both pages render the same
 * 1/2/3-column responsive grid with consistent glyph color modifiers.
 * Top spacing kept here so the grid still has rhythm in the
 * world-villages section context. */
.world-villages .villages {
  margin-top: 2rem;
}

/* ---------- cosmos pull-quote ---------- */

.world-pull {
  text-align: center;
}

.world-pull .section-head {
  margin-bottom: 1.5rem;
}

.world-pull__quote {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  border-left: 3px solid var(--accent, #F16C0A);
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-style: italic;
  line-height: 1.55;
  text-align: left;
  color: var(--text, #ebe9e4);
}

.world-pull__quote em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent, #F16C0A);
}

/* ---------- closing CTA ---------- */

.world-cta__inner {
  text-align: center;
}

.world-cta__inner .section-head h2 {
  max-width: 38ch;
  margin-inline: auto;
}

.world-cta__buttons {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ---------- reduced-motion: no transitions added here, nothing to disable ---------- */