/* =====================================================================
   Blog post lead image (2026-09-09)

   Its own file, like lang-switch.css and reels.css, because style.css is
   held byte-for-byte identical to website/css/style.css by
   tests/parity/test_page_parity.py::test_the_served_stylesheet_is_the_original_byte_for_byte.
   Anything the static v1 design did not have belongs outside that file.
   ===================================================================== */

.article-cover { margin-bottom: clamp(32px, 5vh, 56px); overflow: hidden; }

/* Matches `.article-body img` in style.css (width:100%, saturate(.8)) so a
   cover and an in-body image read as the same treatment rather than two
   different ones stacked on top of each other. The aspect-ratio crop is the
   one addition: covers are chosen as thumbnails on the index, where
   `.post-thumb img` forces height:100px — uncropped here, a tall portrait
   asset would push the article text far below the fold. */
.article-cover img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  filter: saturate(.8);
}

@media (max-width: 480px) { .article-cover img { aspect-ratio: 4 / 3; } }