/* Split header: headline left, the steps photo right, baseline-locked per
   docs/design/photo-language.md. The grid, the align-items:end baseline lock and the
   1440px tightening all come from the shared .frame-split component; this file only
   carries the story-specific spacing and the near-miss clearance on the headline, plus
   the story's own stack point (700px, tighter than the shared 900px default). */
.story-head.frame-split {
  padding: 76px 0 56px;
}
.story-head-copy {
  max-width: 640px;
}
.story-head-copy h1 {
  font-size: clamp(2.75rem, 4.4vw, 4rem);
  max-width: 624px;
}

/* Short intro + illustrative disclosure, read before the filmstrip per
   docs/design/astra-recommendations.md section 3 ("Put the Story photos where the reader
   learns the sequence"). Plain flow, no card. */
.story-open {
  max-width: 640px;
  padding: 48px 0 0;
}
.story-open p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  margin-top: 16px;
}
.story-open .example-disclosure {
  font-size: 13px;
  margin-top: 12px;
}

/* Three-frame timeline strip: Monday, Tuesday, Later, the same woman throughout. The grid,
   the 4:5 aspect ratio, the below-left day/tool caption and the mobile snap-scroll row all
   come from the shared .frame-filmstrip component and the caption grammar's outside
   position; this file only carries the section's own vertical rhythm. Photo clipping was
   removed on 7 September 2026 at the owner's request; each frame now shows the full
   photograph. */
.timeline-section {
  padding-block: 40px 90px;
}
/* Plain narrow-screen affordance for the snap row (docs/design/astra-recommendations.md
   section 3): no icon, no animation, hidden once the strip lays out as a grid at 700px+. */
.filmstrip-swipe-hint {
  display: none;
}

/* One filmstrip slide: the existing outside-caption figure (photo + figcaption, untouched)
   plus its unboxed memoryMark() sample. This div, not the inner <figure>, is
   .frame-filmstrip's data-reveal-group child, so the whole slide fades in together at
   700px+ and snap-scrolls together as one 78vw slide below it - the sample never detaches
   from its scene. */
.story-frame-sample {
  margin-top: 24px;
}
.story-frame-sample p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

/* The conversation reads best at a measure narrower than the full 1248px wrap, per
   docs/design/astra-recommendations.md section 3 ("a readable measure"); .conversation's
   own card padding and type sizes are unchanged. */
.story-conversation-wrap {
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .story-head.frame-split {
    grid-template-columns: 1.1fr 1fr;
    gap: 36px;
  }
  .story-head-copy h1 {
    font-size: clamp(2.1rem, 4vw, 2.3rem);
  }
}

@media (max-width: 700px) {
  .story-head.frame-split {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
    padding: 56px 0 32px;
  }
  .story-head-copy {
    max-width: none;
  }
  .story-head-copy h1 {
    max-width: none;
  }
  .story-open {
    max-width: none;
    padding-top: 32px;
  }
  .timeline-section {
    padding-block: 28px 56px;
  }
  .filmstrip-swipe-hint {
    display: block;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--muted);
  }
}