Dot grid

# Build the "Dot grid" background effect (`dot-grid`)

Family: Pattern · pure CSS. A precise grid of small dots that fades out toward the edges.

## Look
A precise grid of small dots covers the background and fades out toward the edges, like engineering paper seen through a soft spotlight centred a little above the middle. Quiet and technical: it reads as texture, not decoration, and never competes with text.

## Parameters (current values)
- Spacing `--fx-gap`: 24 (range 12–48) — grid spacing in px
- Dot radius `--fx-dot`: 1.2 (range 0.5–3) — in px
- Strength `--fx-opacity`: 0.5 (range 0.1–1)
- Edge fade `--fx-fade`: 0.6 (range 0–1) — 0 = even everywhere
- Dots `--fx-color-dot`: the `text-muted` colour token, `var(--c-text-muted)`
- Background `--fx-color-bg`: the `bg` colour token, `var(--c-bg)`

## Recipe
- The element: `background-color: var(--fx-color-bg)`.
- Its `::before` (`content: ''; position: absolute; inset: 0`) draws the dots: `background-image: radial-gradient(circle, color-mix(in srgb, var(--fx-color-dot) calc(var(--fx-opacity) * 100%), transparent) calc(var(--fx-dot) * 1px), transparent calc(var(--fx-dot) * 1px + 0.75px))`, `background-size: calc(var(--fx-gap) * 1px) calc(var(--fx-gap) * 1px)`, `background-position: center`.
- Fade the dots, not the background: on `::before`, `mask-image` (and `-webkit-mask-image`) `radial-gradient(ellipse 75% 70% at 50% 40%, #000 calc((1 - var(--fx-fade)) * 100%), transparent 100%)`.

## CSS fallback
It is pure CSS: the result above is the whole effect.

## Runtime rules
- Mount it in one element that fills a fixed, `pointer-events: none`, `aria-hidden` layer behind the page content; every parameter above is a CSS custom property on that element.
- Colours come only from the colour-token variables above (mix them with `color-mix()` or alpha), never hard-coded hex, so the effect follows any palette and light or dark mode.
- CSS only: gradients, `mask`, pseudo-elements and inline `data:image/svg+xml` (no `<script>` or `<image>` inside it). No images, remote URLs, `@import` or JavaScript. Keep it under ~8 KB.
- It is static: no animation.

## Avoid
- Dots larger than 3px or spacing under 12px (moiré on screens)
- Any animation
- Dots at full text colour and strength behind body text
- Lines or crosses instead of dots — that is a different pattern