# article-hero

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.

- **Live:** https://assets.gf.cx/article-hero/
- **CSS:** https://assets.gf.cx/article-hero/article-hero.css

## Use

```html
<link rel="stylesheet" href="https://assets.gf.cx/article-hero/article-hero.css">

<figure class="article-hero">
  <img src="https://media.gf.cx/<surface>/hero/<slug>.jpg"
       alt="Joachim Beuckelaer, Fish Market (1568)" loading="lazy" decoding="async">
  <figcaption>Joachim Beuckelaer, <em>Fish Market</em>, 1568 ·
    <a href="https://www.metmuseum.org/art/collection/search/679844">The Met</a> · public domain</figcaption>
</figure>
```

Place it after the byline, before the article body.

## Classes

| Class                | Role                                                          |
| -------------------- | ------------------------------------------------------------ |
| `.article-hero`      | the figure — **natural aspect ratio**, framed + rounded       |
| `.article-hero.band` | crop to a wide 16:7 banner (`object-fit: cover`) for a uniform hero height across mixed source ratios |
| `figcaption`         | mono attribution line — artist · source link · public domain |

## Self-hosting is not optional

Never hotlink a museum or NASA server. Images are downloaded, resized, and
pushed to R2 (`media.gf.cx/<surface>/hero/<slug>.jpg`) — the same doctrine as
og-cards: we ship bytes we control. The toolkit script does this for you:

```bash
# browse candidates
classical_art_fetch.py --source met  --query "still life fish oysters" --list
classical_art_fetch.py --source nasa --query "Earth from orbit"        --list

# fetch a specific object, self-host to R2, print this figure's markup
classical_art_fetch.py --source met --object-id 679844 \
    --surface happiness.gf.cx --slug omega-3-iron-and-zinc
```

## Sources (both keyless, public domain)

| Source | API                                   | Register           |
| ------ | ------------------------------------- | ------------------ |
| `met`  | `collectionapi.metmuseum.org` (CC0)   | classical painting / still-life |
| `nasa` | `images-api.nasa.gov` (public domain) | cosmic / awe register |

Other public-domain APIs worth adding later: Art Institute of Chicago
(`api.artic.edu`, keyless), Cleveland Museum of Art (keyless), Rijksmuseum (free
key — Dutch masters).

## Theming

Frame, caption, and link colour theme from `--line`, `--ink-soft`, `--accent`,
`--mono`, `--serif`, `--bg-warm` — each with a hex fallback, so it renders on
bare HTML and recolours to any surface palette.