.story-header { padding-block: var(--space-12) var(--space-8); background: var(--color-sky); }
.story-header h1, .story-header .lead { max-width: 850px; }
.story-header .lead { margin-block-start: var(--space-6); color: var(--color-muted); }
.story-cover { padding-block: var(--space-8) var(--space-12); }
.story-cover img { width: 100%; max-height: 650px; object-fit: contain; background: var(--color-sky); }
.story-cover figcaption, .story-photo figcaption { font-size: .875rem; color: var(--color-muted); margin-block-start: var(--space-3); }
.story-body { max-width: 760px; padding-block-end: var(--space-12); }
.story-body h2 { font-size: 1.75rem; margin-block: var(--space-8) var(--space-4); }
.story-body p { margin-block-start: var(--space-4); }
.story-photo { margin-block: var(--space-8); }
.story-photo img { width: 100%; height: auto; }
.story-body > a, .story-body p a { overflow-wrap: anywhere; }
.related-stories { padding-block: var(--space-12) var(--space-16); border-top: 1px solid var(--color-border); }
.related-stories h2 { font-size: 1.5rem; }
.related-stories nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-block-start: var(--space-6); }
.related-stories a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 600px) {
  .story-header { padding-block-start: var(--space-8); }
  .story-cover { padding-block: var(--space-6); }
  .story-body h2 { font-size: 1.5rem; }
}
