/* story — this component's own styles, put in the head by the renderer where it is drawn.
   Colours and sizes only through var(--*), so the design drives these too. */

/* narrow — a centred reading column; the calmest way to tell it. */
.story--narrow .story-inner { max-width: 680px; text-align: center; }

/* The photo beside the story, when it has one: left or right; none hides it. */
.story--media-none .story-media { display: none; }
.story--media-left .story-inner:has(.story-media), .story--media-right .story-inner:has(.story-media) { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }


.story--media-left .story-media { order: -1; }


.story-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }

@media (max-width: 860px) {
    .story--media-left .story-inner:has(.story-media), .story--media-right .story-inner:has(.story-media) { grid-template-columns: 1fr; }
    .story--media-left .story-media { order: 0; }
}