/* Story cover and picture gallery. 2026-10-29. Printed on story pages only, after story.css.
 *
 * The cover is the same picture the story's card shows, in a modest 2:1 band the width of the reading column: it sits under the
 * headline, so the headline and the first lines of the story are still on screen. (A full-width hero would push the text off the first
 * screen, most of all on a phone.) Pictures under the story keep their own proportions: nothing is cropped and no face is cut.
 */
.story-page .story-cover{margin:28px 0 0;aspect-ratio:2 / 1;overflow:hidden;border-radius:10px;background:#f1efeb;box-shadow:0 14px 32px rgba(23,21,20,.08)}
.story-page .story-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.story-page .story-cover--featured img{object-position:var(--cover-pos,50% 35%)}
@media(max-width:760px){.story-page .story-cover{margin-top:22px;border-radius:8px}}

/* Pictures: justified rows (one height per row, every picture keeps its own shape), spread through the story text. */
.story-page .sg-row{display:flex;gap:10px;align-items:flex-start;margin:34px 0;width:min(100%,var(--sg-max,900px))}
.story-page .sg-row--1{margin-left:auto;margin-right:auto}
@media(min-width:1000px){.story-page .sg-row{width:min(112%,var(--sg-max,900px));margin-left:calc((100% - min(112%,var(--sg-max,900px)))/2)}}
@media(max-width:999px){.story-page .sg-row{margin-left:auto;margin-right:auto}}
.story-page .sg-row figure{margin:0;flex:var(--sg-r,1.5) 1 0;min-width:0}
.story-page .sg-row a{display:block;overflow:hidden;border-radius:8px;background:#f1efeb;cursor:zoom-in}
.story-page .sg-row img{display:block;width:100%;height:auto;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.story-page .sg-row a:hover img{transform:scale(1.03)}
.story-page .sg-row figcaption{margin:8px 0 0;font-size:13px;line-height:1.45;color:#625d56}
.story-page .story-gallery{margin-top:10px}
@media(max-width:600px){
 .story-page .sg-row{flex-wrap:wrap;gap:8px;margin:26px 0}
 .story-page .sg-row--2 figure,.story-page .sg-row--3 figure{flex:1 1 calc(50% - 4px)}
 .story-page .sg-row--3 figure:last-child:nth-child(odd){flex-basis:100%}
 .story-page .sg-row--2 img,.story-page .sg-row--3 img{aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
 .story-page .sg-row--3 figure:last-child:nth-child(odd) img{aspect-ratio:16/10}
}
/* Viewer */
.sg-viewer{border:0;padding:0;background:rgba(10,10,10,.94);width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0;display:flex;align-items:center;justify-content:center}
.sg-viewer::backdrop{background:rgba(10,10,10,.94)}
.sg-viewer img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:6px}
.sg-viewer button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:30px;line-height:1;cursor:pointer}
.sg-viewer button:hover,.sg-viewer button:focus-visible{background:rgba(255,255,255,.28)}
.sg-viewer .sg-close{top:16px;right:16px}.sg-viewer .sg-prev{left:14px;top:50%;margin-top:-24px}.sg-viewer .sg-next{right:14px;top:50%;margin-top:-24px}
.sg-viewer .sg-count{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#d9d6d0;font:13px/1 system-ui,sans-serif;margin:0}

/* ---- Load-in on every story page. 2026-10-29 ----
 * What a reader sees first (the date, the headline, the opening paragraphs) slides up and fades in, one after another, in about half a
 * second in all. The cover picture never fades from nothing, so it is never kept waiting: it only settles from a very slight zoom.
 * Pure CSS (no script), so nothing can stay hidden; it all ends visible. Switched off for anyone who has asked for less motion.
 * Only the first eight blocks of text move: everything further down is below the screen and simply appears. */
@media (prefers-reduced-motion:no-preference){
	@keyframes storyIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
	@keyframes storyCoverSettle{from{transform:scale(1.045)}to{transform:none}}
	.story-page .story-banner .eyebrow{animation:storyIn .6s cubic-bezier(.16,1,.3,1) both}
	.story-page .story-banner h1{animation:storyIn .7s cubic-bezier(.16,1,.3,1) .05s both}
	.story-page .story-rfp-urgent{animation:storyIn .7s cubic-bezier(.16,1,.3,1) .12s both}
	.story-page .story-cover img{animation:storyCoverSettle 1.2s cubic-bezier(.16,1,.3,1) both}
	.story-page .story-body>*:nth-child(-n+8){animation:storyIn .7s cubic-bezier(.16,1,.3,1) both}
	.story-page .story-body>*:nth-child(1){animation-delay:.14s}
	.story-page .story-body>*:nth-child(2){animation-delay:.2s}
	.story-page .story-body>*:nth-child(3){animation-delay:.26s}
	.story-page .story-body>*:nth-child(4){animation-delay:.32s}
	.story-page .story-body>*:nth-child(5){animation-delay:.38s}
	.story-page .story-body>*:nth-child(6){animation-delay:.44s}
	.story-page .story-body>*:nth-child(7){animation-delay:.5s}
	.story-page .story-body>*:nth-child(8){animation-delay:.56s}
}

/* Stories start closer to the header (about 110px of empty space under it before; the header is sticky, so no clearance is needed). */
html .story-page .story-banner,.story-page .story-banner{padding-top:clamp(26px,3.6vw,52px)!important}
.story-page .story-banner .story-banner-inner,.story-page .story-banner-inner{margin-top:0!important}