/* Editorial story layout (Daniel 2026-10-22: "several thoughout- think of a newspaper editorial"). Pictures sit beside the text,
   alternating sides, with a 3-across strip near the end; full width on phones. Prototype behind ?preview=editorial. */
.part::after{content:'';display:block;clear:both}
figure.story-inline{width:46%;margin:6px 0 16px;border-radius:6px;overflow:hidden;aspect-ratio:4/3;background:#e8eff3}
figure.story-inline.right{float:right;margin-left:28px}
figure.story-inline.left{float:left;margin-right:28px}
figure.story-inline img,figure.story-inline video,figure.story-strip-item img,figure.story-strip-item video{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.story-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0}
figure.story-strip-item{margin:0;border-radius:6px;overflow:hidden;aspect-ratio:4/3;background:#e8eff3}
@media(max-width:700px){figure.story-inline,figure.story-inline.left,figure.story-inline.right{float:none;width:100%;margin:8px 0 16px}.story-strip{grid-template-columns:1fr}}
/* 2026-11-11 audit: a quote beside a photo is its own block, so its rule and indent stay with it and no line wraps back under the photo */
@media(min-width:701px){#story .part blockquote{display:flow-root}}
/* Story head in the navy band (2026-10-22): headline sized for long quotes, meta in the band's light text, clip on the right */
section.story-band{padding:44px 0 44px}
section.story-band .eyebrow{color:#c9d6dd}
section.story-band h1{color:#fff;font-size:clamp(28px,3vw,42px);line-height:1.12;margin:0 0 14px;max-width:none}
section.story-band .meta,section.story-band .meta span{color:#c9d6dd}
.story-band-grid{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
section.story-band figure.story-media{margin:0;width:100%;max-width:520px;justify-self:end;box-shadow:0 22px 44px -24px rgba(0,0,0,.6)}
@media(max-width:820px){.story-band-grid{grid-template-columns:1fr}section.story-band figure.story-media{justify-self:center;max-width:none}}
/* Same as Answer: the page's own pale-orange note strip is hidden so the top matches the other pages (not removed) */
body:has(section.story-band) > .note{display:none}
/* Answer header band: question as the headline; figure placeholder uses the story placeholder look */
section.answer-band h1{font-size:clamp(26px,2.6vw,38px)}
section.story-band figure.story-media.media-needed{aspect-ratio:4/3;border:3px dashed #ed873c;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;background:repeating-linear-gradient(135deg,#fff3e8 0 16px,#ffe4cc 16px 32px);color:#8a3d0c}
section.story-band figure.story-media.media-needed strong{font-size:15px;letter-spacing:.12em}
/* Answer header (Daniel 2026-10-22: light arch wave). The pale field and wave come from brand-fields.css (dio-blue-field--light). */
section.answer-band{position:relative;isolation:isolate;overflow:hidden;background:#e8eff3;color:#1c3341;padding:40px 0 40px}
section.answer-band .eyebrow{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#A8521A}
section.answer-band h1{color:#1c3341;font-size:clamp(26px,2.6vw,38px);line-height:1.15;margin:0 0 12px}
section.answer-band .meta,section.answer-band .meta span{color:#526773}
.answer-band-grid{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
section.answer-band figure.story-media{margin:0;width:100%;max-width:520px;justify-self:end;aspect-ratio:4/3;border-radius:8px;overflow:hidden;box-shadow:0 22px 44px -26px rgba(16,32,42,.45)}
section.answer-band figure.story-media video,section.answer-band figure.story-media img{width:100%;height:100%;object-fit:cover;display:block}
section.answer-band figure.story-media.media-needed{border:3px dashed #ed873c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;background:repeating-linear-gradient(135deg,#fff3e8 0 16px,#ffe4cc 16px 32px);color:#8a3d0c;box-shadow:none}
section.answer-band figure.story-media.media-needed strong{font-size:15px;letter-spacing:.12em}
@media(max-width:820px){.answer-band-grid{grid-template-columns:1fr}section.answer-band figure.story-media{justify-self:center;max-width:none}}