/* article-hero.css — gf.cx portfolio article-hero primitive
 *
 * A lead image for an article — house rule: classical / public-domain art or a
 * NASA plate, never stock. A framed <figure> with the image and a mono
 * figcaption carrying attribution (artist · source · public domain), in the
 * same provenance spirit as the made-with footer.
 *
 * Self-host the image to R2 (media.gf.cx) — never hotlink a museum/NASA server.
 * The `classical_art_fetch.py` toolkit script fetches, self-hosts, and emits
 * exactly this markup.
 *
 * Markup:
 *   <figure class="article-hero">
 *     <img src="https://media.gf.cx/<surface>/hero/<slug>.jpg"
 *          alt="Artist, Title (year)" loading="lazy" decoding="async">
 *     <figcaption>Artist, <em>Title</em>, year ·
 *       <a href="…">The Met</a> · public domain</figcaption>
 *   </figure>
 *
 *   .article-hero          the figure — natural aspect ratio, framed
 *   .article-hero.band     crop to a wide banner (object-fit: cover) for a
 *                          consistent hero height regardless of source ratio
 *   figcaption             mono attribution line
 *
 * ── Design-system tokens referenced (each with a hex fallback) ──────────
 *   --line / --line-strong  frame + divider
 *   --ink-soft              caption text
 *   --accent                caption link
 *   --mono                  caption font
 *   --bg-warm               matte behind letterboxed art
 */

.article-hero {
  margin: 0 0 30px;
}

.article-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--line, rgba(26, 24, 22, 0.12));
  background: var(--bg-warm, #ebe3d5);
}

/* Optional cropped banner — for a uniform hero height across mixed art ratios. */
.article-hero.band img {
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center;
}

.article-hero figcaption {
  margin-top: 9px;
  font-family: var(--mono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--ink-soft, #5a544d);
  padding-left: 2px;
}

.article-hero figcaption em {
  font-style: italic;
  /* honour the surface's serif emphasis if it themes em; harmless otherwise */
  font-family: var(--serif, 'Newsreader', Georgia, serif);
  color: inherit;
}

.article-hero figcaption a {
  color: var(--accent, #6b4226);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--accent, #6b4226) 35%, transparent);
}

.article-hero figcaption a:hover {
  border-bottom-color: var(--accent, #6b4226);
}