/* A story: the kicker + h1 + lede head, the wide photograph, the prose in a
   reading column (the legal pages' typography), then three more stories. */

.story-head { padding-top: clamp(2rem, 6vw, 4rem); padding-bottom: 0; }
.story-head h1 { margin-bottom: 1rem; }
.story-photo { padding: var(--xl) 0 0; }
.story-prose { padding-top: var(--xl); padding-bottom: 0; }
.story-more h2 { text-align: center; }

/* The prose reads in the narrow column, but its wrap is the wide one so a
   .breakout figure (the 360° player in Safety First) can span it: every child
   is capped at the narrow content width and centered, a .breakout is not. */
.story-prose .wrap { max-width: var(--wide); }
.story-prose .wrap > * { max-width: calc(var(--narrow) - 2 * var(--page-inset)); margin-inline: auto; }
.story-prose .wrap > .breakout { max-width: none; }

.story-prose h2 { font-size: var(--h3); font-weight: var(--regular); margin: var(--xl) 0 0.6rem; }
.story-prose h2:first-child { margin-top: 0; }
.story-prose p { margin: 0 0 var(--sm); }
.story-prose ul, .story-prose ol { margin: 0 0 var(--sm); padding-left: 1.25rem; }
.story-prose li { margin-bottom: 0.4rem; }
.story-prose figure { margin: var(--lg) 0; }
.story-prose figure img { width: 100%; }
.story-prose figcaption { display: block; margin-top: 0.6rem; text-align: center; }