fluid-designlisted

# Fluid design ## Mission and boundary A method for turning a fixed design (a desktop artboard, usually 1440×900, and a 390 phone artboard) into a site whose composition **scales as one drawing**. There is one measured unit, `--fluid`: 1px at the artboard, moving with whichever viewport axis is tighter on desktop and with the width on phones. Type roles derive from it and shrink more gently. Each device band (phone, tablet, landscape phone, desktop) scales its own design; authors write each drawn number once. This skill is extracted from a production marketing site. Most of its rules were paid for by a real bug, and the reference files say which one. When a rule seems fussy, read its why before bending it; the cheap-looking alternative has usually already been tried and removed. This skill contains no animation: it makes the page the right size. Motion code in the project reads three things from it, all owned here ([contract.md](references/contract.md) §7): - **The desktop breakpoint.** `bands.desktop.minWidth`, emitted as `DESKTOP_QUERY` in the generated `fluid.ts`. Motion code imports it rather than keeping its own number. - **`--fluid-header-h`.** The fixed header's resting height (header settings). Anchor offsets, sticky tops and header-ink probes read it (`--header-h` is its v1 name, emitted only with `aliases: true`). - **The `translate` property.** `fluid-translate-*` writes `translate`, so Motion's per-frame `transform` composes with it. GSAP folds `transla