/* story — the text and the photo. No outer padding, no width, no colours of its own: the section's. */

.story-inner { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); align-items: center; }
.story-media img { width: 100%; border-radius: var(--radius); }
/* The passage reads as the hero's lead does; the link stands as far under it as the hero's button. */
.story-text p { font-size: 1.16rem; color: var(--body-text); max-width: 620px; }
.story-text p:last-child { margin-bottom: 2.4rem; }

/* side: the photo beside the text */
.story--side.has-photo .story-inner { grid-template-columns: 1.1fr .9fr; }

/* cover: the photo behind the text, as the hero's — edge to edge, a scrim over it, the words light whatever the
   design's ground (its colours set again here, so the heading, the lead and the outlined link follow) */
.story--cover.has-photo               { position: relative; isolation: isolate; color: #fff; padding-block: var(--space);
                                        --ink: #fff; --body-text: rgba(255, 255, 255, .88); --muted: rgba(255, 255, 255, .72);
                                        --mark: #fff; --line: rgba(255, 255, 255, .4); }
.story--cover.has-photo .story-copy   { max-width: 40rem; }
.story--cover .story-media            { position: absolute; inset: 0; z-index: -1; }
.story--cover .story-media img        { height: 100%; object-fit: cover; border-radius: 0; }
.story--cover.has-photo::after        { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .55); }
/* …the whole band: the section's space is taken inside the story, under the photo (the drawer's «space» still sets it) */
.section:has(> .story--cover.has-photo) { padding-block: 0; }
/* …in the page's column (a band of normal or narrow width): a card — its corners rounded, the words a margin inside */
.container .story--cover.has-photo    { border-radius: var(--radius); overflow: hidden; padding-inline: clamp(24px, 5vw, 64px); }

@media (max-width: 900px) {
  .story--side.has-photo .story-inner { grid-template-columns: 1fr; }
}