/* === Scroll-pinned hero === */
.hero-pin {
  position: relative;
  height: 320vh;
  background: var(--ink-deep);
}
.hero-pin__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  color: var(--paper);
}
.chapter {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s linear;
}
.chapter.is-active { opacity: 1; }
.chapter__bg { position: absolute; inset: 0; }

/* Cinematic gradient backgrounds — placeholders styled to look intentional
   instead of a flat color box with a "PHOTO HERE" label. Each chapter has
   a distinct palette evocative of its scene. Replace with real photos by
   swapping these blocks for `background-image: url(...)`. */
.chapter__bg--wedding {
  background:
    radial-gradient(ellipse at 25% 25%, rgba(245,215,126,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(138,58,31,.50) 0%, transparent 60%),
    linear-gradient(135deg, #2a1430 0%, #6a2952 45%, #421833 100%);
}
.chapter__bg--pope {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(245,215,126,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(138,58,31,.55) 0%, transparent 60%),
    linear-gradient(135deg, #2a0e0e 0%, #5a1a18 45%, #3a1414 100%);
}
.chapter__bg--mayyas {
  background:
    radial-gradient(ellipse at 80% 30%, rgba(245,215,126,.20) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 70%, rgba(64,28,120,.55) 0%, transparent 60%),
    linear-gradient(135deg, #0e1a3a 0%, #2b3f7a 50%, #1b3a72 100%);
}
.chapter__bg--tours {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(245,215,126,.22) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 90%, rgba(138,58,31,.45) 0%, transparent 60%),
    linear-gradient(160deg, #2d1d0a 0%, #6b4a1f 45%, #3d2a14 100%);
}

/* Overlay: stronger gradient so hero text stays readable on ANY background
   image. Top stays soft (20%) so the image is visible; bottom darkens to
   92% behind the copy block, with a 50% mid-stop so the bottom 30% (where
   copy lives) is consistently dark even on bright photos. */
.chapter__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,9,7,.20) 0%, rgba(14,9,7,.55) 50%, rgba(14,9,7,.92) 95%);
}
.chapter__copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block-end: 18vh;
}
/* Hero copy — every text element gets a layered text-shadow so it stays
   legible against any background photo (no matter how light or busy the
   crop). !important on color forces the cream/gold over the editorial.css
   `h2 { color: var(--ink) }` cascade — was rendering as black ink when
   the chapter title was demoted from h1 to h2. */
body.hb-body .chapter__copy h1,
body.hb-body .chapter__copy .chapter__title {
  color: var(--paper) !important;
  font-size: clamp(40px, 7.5vw, 96px);
  line-height: 1.02;
  margin: .25em 0 .35em;
  text-shadow:
    0 1px 2px rgba(0,0,0,.7),
    0 2px 8px rgba(0,0,0,.55),
    0 0 24px rgba(0,0,0,.35);
}
body.hb-body .chapter__copy h1 em,
body.hb-body .chapter__copy .chapter__title em {
  color: var(--gold) !important;
  font-style: italic;
  font-weight: 700;
}
body.hb-body .chapter__copy .eyebrow,
body.hb-body .chapter__copy .eyebrow--gold {
  color: var(--gold) !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.7),
    0 0 12px rgba(0,0,0,.5);
}
body.hb-body .chapter__copy .dek {
  color: rgba(251,247,238,.92) !important;
  max-width: 60ch;
  text-shadow:
    0 1px 2px rgba(0,0,0,.65),
    0 2px 8px rgba(0,0,0,.4);
}
.eyebrow--gold { color: var(--gold); }

.hero-pin__chrome {
  position: absolute;
  bottom: 28px; inset-inline: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding-inline: 32px;
  font-family: "Inter", sans-serif; font-size: 12px;
  color: var(--paper); opacity: .8;
  pointer-events: none;
}
.hero-pin__dots { display: flex; gap: 8px; }
.hero-pin__dots .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(251,247,238,.35); }
.hero-pin__dots .dot.is-on { background: var(--gold); }

@media (max-width: 767px) {
  /* Mobile: same scroll-pinned cross-fade behavior as desktop. Slightly
     shorter runway (260vh vs 320vh) so the user doesn't have to scroll
     through ~5 viewports' worth of pin-time on a small screen, and the
     chapter copy gets a tighter bottom-pad to fit a narrower viewport.
     Horizontal swipe (the previous mobile pattern) was confusing for
     users — reverted to the desktop pin pattern per user feedback. */
  .hero-pin { height: 260vh; }
  .chapter__copy { padding-block-end: 12vh; }
  body.hb-body .chapter__copy h1,
  body.hb-body .chapter__copy .chapter__title { font-size: clamp(34px, 9vw, 56px); }
  /* Hide dots/cue on mobile — visual chrome doesn't carry well at
     narrow widths, and the scroll position makes the active chapter
     self-evident. */
  .hero-pin__chrome { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pin { height: auto; }
  .hero-pin__stage { position: static; height: auto; }
  .chapter { position: relative; opacity: 1; height: 80vh; }
  .chapter__copy { padding-block-end: 8vh; }
  .hero-pin__chrome { display: none; }
}