/* Story covers (front matter `cover:`). Linked only from pages that show one; see README "Story covers". */
.story-cover { margin: 0 0 2.4rem; }
.story-cover img,
.featured-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #141210;
  border: 1px solid rgba(221, 211, 192, .12);
  border-radius: 3px;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .95);
}
.story-cover picture, .featured-cover picture { display: block; }

.featured-cover { display: block; margin: 0 0 1.5rem; }
.featured-cover img { aspect-ratio: 2 / 1; object-position: 50% 45%; transition: filter .3s ease; filter: brightness(.92); }
.featured-cover:hover img, .featured-cover:focus-visible img { filter: brightness(1.05); }

/* Side by side only when the featured box itself is wide (container query), else stacked. */
.featured.has-cover { container-type: inline-size; }
.featured.has-cover > .fc-grid { display: block; }
@container (min-width: 60rem) {
  .featured.has-cover > .fc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    column-gap: 2.4rem;
    align-items: start;
  }
  .fc-grid > * { grid-column: 1; }
  .fc-grid > .featured-cover { grid-column: 2; grid-row: 1 / span 6; margin: .3rem 0 0; }
  .fc-grid > .featured-cover img { aspect-ratio: 16 / 9; }
}
@media (max-width: 47.99em) {
  .story-cover { margin-left: -.25rem; margin-right: -.25rem; }
}

/* Cover first (Oct 30, 2026): the hero carries the typeset title, so the <h1> header under it is
   compact (still the real heading for screen readers and search) instead of a second big title. */
.story > .story-cover:first-child { margin: 2.2rem 0 0; }
.story-cover + .story-header { padding: 1.5rem 0 1.6rem; margin-bottom: 2rem; }
.story-cover + .story-header h1 { font-size: clamp(1.75rem, 4.6vw, 2.35rem); line-height: 1.1; }
.story-cover + .story-header .meta { margin-top: .55rem; }
@media (max-width: 47.99em) {
  .story > .story-cover:first-child { margin-top: 1.2rem; }
  .story-cover + .story-header { padding: 1.1rem 0 1.3rem; }
}