# gallery

A credited responsive **image-grid band** plus a **card banner thumbnail** — two related primitives in one shelf. Both inherit the host surface's palette (`--accent`, `--bg-warm`, `--line`, `--ink-soft`, `--serif`) and every proportion is a token.

Promoted from the bespoke "In rooms" band on `abbeyroad.gf.cx/future/lightwell/integral-blinds/`.

## Embed

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

No JS, no markup attributes.

## 1. Gallery band

A section with an optional serif title, a responsive auto-fill grid of aspect-locked figures (gentle hover push-in), and a credit line.

```html
<section class="gallery">
  <h2 class="gallery__title">In <em>rooms</em></h2>
  <div class="gallery__grid">
    <figure class="gallery__fig"><img src="…" alt="…" loading="lazy" width="1200" height="900"></figure>
    <figure class="gallery__fig"><img src="…" alt="…" loading="lazy" width="1200" height="900"></figure>
    <!-- … -->
  </div>
  <p class="gallery__credit">Supplier reference images — shown to picture the options, not as an endorsement.</p>
</section>
```

The grid auto-fills columns at `--gallery-min` (190px default) and locks each figure to `--gallery-ratio` (4/3), so a mixed set of source dimensions tiles cleanly. Hover scales the image inside the fixed frame; respects `prefers-reduced-motion`.

## 2. Card banner thumbnail

A full-bleed reference photo at the top of a padded card. Negative margins cancel the card's padding so the image reaches the card edges; top corners round to match.

```html
<article class="your-card" style="--gallery-thumb-bleed-top:20px; --gallery-thumb-bleed-x:22px;">
  <div class="gallery-thumb"><img src="…" alt="…" loading="lazy" width="1200" height="546"></div>
  <h3>Card title</h3>
  …
</article>
```

Set the three bleed tokens to **your card's own padding** — `--gallery-thumb-bleed-top` / `--gallery-thumb-bleed-x` (the card's top/side padding) and `--gallery-thumb-gap` (space below the image). Defaults (20px / 22px / 16px) suit a card with ~20px/22px padding.

## Tokens

| Token | Default | Controls |
|---|---|---|
| `--gallery-margin` | `30px 0 8px` | band outer margin |
| `--gallery-title-size` | `24px` | title size |
| `--gallery-min` | `190px` | min column width (auto-fill) |
| `--gallery-gap` | `10px` | grid gap |
| `--gallery-ratio` | `4 / 3` | figure aspect ratio |
| `--gallery-radius` | `10px` | figure corner radius |
| `--gallery-hover-scale` | `1.045` | hover push-in |
| `--gallery-hover-dur` | `.45s` | hover transition |
| `--gallery-credit-size` | `12.5px` | credit line size |
| `--gallery-thumb-ratio` | `2.2 / 1` | banner thumb aspect ratio |
| `--gallery-thumb-radius` | `10px 10px 0 0` | banner thumb corners |
| `--gallery-thumb-bleed-top` | `20px` | card top padding to cancel |
| `--gallery-thumb-bleed-x` | `22px` | card side padding to cancel |
| `--gallery-thumb-gap` | `16px` | gap below banner thumb |

Override on the host `:root` (or any ancestor):

```css
:root { --gallery-min: 220px; --gallery-ratio: 3 / 2; }
```

## Where it's used

- `abbeyroad.gf.cx/future/lightwell/integral-blinds/` — supplier card banners + "In rooms" band (origin)
- (more as portfolio surfaces lift to it)

## Change once, propagate everywhere

Retune a proportion here, redeploy `assets.gf.cx`, and every surface on the shelf picks it up on the next CDN refresh.