# media

Portfolio-wide sizing defaults for inline `<video>`, `<img>`, and `<audio>` elements inside `article` contexts. One CSS file, one place to tune.

## Embed

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

That's it — no JS, no markup attributes. Wrap your content in `<article>…</article>` and inline media picks up the rules.

## Defaults

| Element | Cap | Why |
|---|---|---|
| `<video>` | `min(100%, 460px)` | Half the typical 920px article column; large enough to watch comfortably, small enough not to dominate the page. |
| `<img>` | `100%` | Photos are content; let them fill the column. |
| `<audio>` | `min(100%, 460px)` | Same logic as video — controls don't need full width. |

## Override

Set custom values on the host page (or any ancestor):

```css
:root {
  --media-video-max-width: 600px;  /* larger video on a media-heavy page */
  --media-audio-max-width: 320px;
}
```

## Where it's used

- `pa.gf.cx/evernote/*` — note pages with embedded clips + photos
- (more as portfolio surfaces lift to it)

## Change once, propagate everywhere

The point: when the visual proportion needs to change, you edit `media.css` here, redeploy `assets.gf.cx`, and every portfolio surface picks it up on the next CDN refresh.