/* ─────────────────────────────────────────────
   Wedding story — one wedding as a magazine spread.
   Varied rhythm, real negative space. Not a grid.
   ───────────────────────────────────────────── */

.story__header {
  padding-block: var(--space-6) var(--space-5);
  text-align: center;
}
.story__meta {
  margin-bottom: var(--space-2);
}
.story__couple {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}
.story__intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 auto;
  color: var(--ink);
  opacity: 0.92;
}

/* Lead — full-bleed, named for the cross-document morph. */
.story__lead {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: var(--space-5);
}
.story__lead-image {
  view-transition-name: story-lead;
  width: 100%;
}

/* Sequence — clusters with breathing room. */
.story__sequence > * {
  margin-block: var(--space-6);
}
.story__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.story__pair--uneven {
  grid-template-columns: 6fr 5fr;
  align-items: end;
}
.story__bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.story__center {
  margin-inline: auto;
  max-width: 880px;
}
.story__center--portrait {
  max-width: 540px;
}
.story__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.4;
  text-align: center;
  max-width: 32ch;
  margin: var(--space-6) auto;
  color: var(--ink);
}

.story__close {
  text-align: center;
  padding-block: var(--space-7);
}
.story__close-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-3);
  color: var(--ink);
  opacity: 0.85;
}

/* Signature transition — gallery-to-story morph timing.
   ::view-transition-* pseudos belong to the active document during
   a cross-document transition (here: story.html as destination).
   The portfolio entry's image inherits the same shared name via JS. */
::view-transition-group(story-lead) {
  animation-duration: 540ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
::view-transition-old(story-lead),
::view-transition-new(story-lead) {
  animation-duration: 540ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  object-fit: cover;
}

@media (max-width: 760px) {
  .story__pair,
  .story__pair--uneven { grid-template-columns: 1fr; gap: var(--space-3); }
  .story__couple { font-size: var(--fs-h1); }
  .story__intro { font-size: var(--fs-body); }

  /* A1 — Inset gutters on mobile: match wrap-equivalent padding on bleed images */
  .story__bleed,
  .story__lead {
    width: auto;
    margin-inline: 0;
    padding-inline: clamp(1.25rem, 5vw, 3rem);
  }

  /* A2 — Tighten closing rhythm and sequence spacing */
  .story__close { padding-block: clamp(var(--space-4), 8vw, var(--space-5)); }
  .story__sequence > * { margin-block: var(--space-4); }
}

/* Reduced motion — drop the morph name so the foundation's
   `@view-transition { navigation: none }` produces a plain nav. */
@media (prefers-reduced-motion: reduce) {
  .story__lead-image { view-transition-name: none; }
}

/* Header entrance — hides the post-load hydration repaint, adds premium reveal.
   Gated behind .reveal-enabled so text is never hidden if JS is off. */
.reveal-enabled .story__header > * {
  opacity: 0;
  transform: translateY(10px);
  animation: storyHeaderIn 900ms cubic-bezier(.22, .61, .36, 1) forwards;
}
.reveal-enabled .story__header > *:nth-child(1) { animation-delay: 140ms; }
.reveal-enabled .story__header > *:nth-child(2) { animation-delay: 260ms; }
.reveal-enabled .story__header > *:nth-child(3) { animation-delay: 420ms; }

@keyframes storyHeaderIn {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-enabled .story__header > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
}