/* An editorial sequence first; the pinned preview is a desktop enhancement. */
.devotional-experience { scroll-margin-top: 6rem; }
.devotional-experience .section-heading { max-width: 44rem; }
.experience-index {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  margin: 0 0 4rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.experience-index a { padding: .4rem 0; color: var(--muted); font-size: .8rem; text-decoration: none; }
.experience-index a span { margin-right: .4rem; color: var(--quiet); font-size: .65rem; }
.experience-index a:hover, .experience-index a[aria-current="step"] { color: var(--ink); }
.experience-index a[aria-current="step"] { text-decoration: underline; text-underline-offset: .4rem; }
.devotional-story .story-row { scroll-margin-top: 7rem; }
.experience-quote {
  margin: 1.7rem 0 0;
  padding: .2rem 0 .2rem 1.2rem;
  border-left: 2px solid var(--line);
  font-family: "Noto Serif", Georgia, serif;
  font-size: clamp(1.1rem, 1.65vw, 1.45rem);
  font-style: italic;
  line-height: 1.65;
}
.experience-quote cite {
  display: block;
  margin-top: .75rem;
  font: .7rem/1.6 "Manrope", sans-serif;
  color: var(--quiet);
}
.devotional-story .story-copy strong { font-weight: 600; color: var(--ink); }
.devotional-story .story-visual::before { max-width: 100%; }
.devotional-story .story-visual .device-shot { max-width: 100%; }
.story-stage { display: none; }

@media (min-width: 1000px) and (min-height: 650px) {
  .devotional-story.is-enhanced {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(4rem, 8vw, 8rem);
    align-items: start;
  }
  .devotional-story.is-enhanced .story-stage {
    display: grid;
    position: sticky;
    top: max(7rem, calc((100svh - 39rem) / 2));
    height: min(74svh, 39rem);
    align-self: start;
    place-items: center;
    margin: 2.5rem 0;
  }
  .story-frame {
    grid-area: 1 / 1;
    width: min(100%, 17.9rem, 34svh);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .45s ease, visibility .35s;
  }
  .story-frame.is-current { opacity: 1; visibility: visible; transform: none; }
  .story-frame .device-shot { width: 100%; }
  .devotional-story.is-enhanced .story-stack { gap: 0; }
  .devotional-story.is-enhanced .story-row {
    display: flex;
    min-height: 85svh;
    align-items: center;
    padding: 4rem 0;
    border-bottom: 1px solid var(--line);
  }
  .devotional-story.is-enhanced .story-row:last-child { border: 0; }
  .devotional-story.is-enhanced .story-row > .story-visual { display: none; }
  .devotional-story.is-enhanced .story-copy { max-width: 31rem; }
}
@media (max-width: 999px) {
  .marketing-motion .devotional-story .story-row .story-visual.reveal,
  .marketing-motion .devotional-story .story-row:nth-child(even) .story-visual.reveal { transform: translateY(12px); }
  .marketing-motion .devotional-story .story-row .story-visual.reveal.visible,
  .marketing-motion .devotional-story .story-row:nth-child(even) .story-visual.reveal.visible { transform: none; }
}
@media (max-width: 680px) {
  .experience-index { gap: .5rem 1.1rem; margin-bottom: 3rem; }
  .experience-index a { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .devotional-story .story-stack { gap: 5rem; }
  .experience-quote { margin-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .story-frame { transition: none; transform: none; }
}