# Kessel — adapting this template
> An eight-person motion design studio: title sequences, brand systems in motion, product film and 3D.

**Category:** Motion design studio · **Mode:** `experience` · **Scheme:** `dark` · **No build step.**

## The design
Near-black ground (`#08090a`), two surfaces a hair above it, and one acid lime
(`#c9f24d`) that is the only hue on the page — it carries the primary button, the
eyebrow dots, the focus ring, the hero wash, the phase nodes and one full-bleed
marquee band. Where lime is a *background* the ink on top of it is near-black,
never white.

The voice is Anton: one weight, all caps, and nothing else. It runs the wordmark,
the two-line `<h1>` at `clamp(3rem, 1rem + 11vw, 9rem)` on a `.88` line-height,
every section title, the marquee and the oversized footer wordmark. Inter Tight
does every job that involves reading — body, navigation, labels, figures, form.

The hero's visual is a **CSS contact sheet**: six 16:9 cells, each a flat colour
field, one of them the accent itself, with a frame number and a project name in
micro type. Nothing on this page is photographed; the six project visuals in the
bento are gradients too (see `IMAGES.md`). Below the marquee, hairline rules do
all the separating — a bento of six projects, four numbered capabilities, three
phases on a horizontal rail, twelve clients on a hairline grid, and a ruled
awards list with tabular years. The page closes loud: a display-size invitation
over a real form, then the wordmark bleeding across the footer.

## Files
| file | what it holds |
|---|---|
| `index.html` | the whole page: header, hero and contact sheet, marquee, selected work, capabilities, process, clients, awards, contact form, footer |
| `styles.css` | every style — tokens in `:root`, then components in page order, then three breakpoints and the reduced-motion block |
| `motion.js` | mobile nav with a focus trap, the header hairline, the UTC clock, scroll entrance, and brief-form validation |
| `icons.svg.html` | the tabler sprite (already pasted into `index.html`) |
| `fonts/` | Anton and Inter Tight, self-hosted, with `fonts.css` and `OFL.txt` |
| `img/` | empty on purpose — see `IMAGES.md` |
| `template.json` | manifest: slug, palette, fonts, sections |

## How to adapt it
1. **Rename the studio.** "Kessel" appears in the header `.brand`, the `<title>`,
   the meta description, the footer blurb, the `.wordmark` and the invented
   contact block. That block — `studio@kessel.example`, Kessel Motion Ltd, Unit 12
   Cundy Wharf, Sheffield S3 8QN, the registration number in `.footer-bar` — and
   the two invented staff names in `.aside-people` are all fictional. Replace
   every one of them before you publish.
2. **Retune the palette** in `:root`. `--accent` is the only hue; move it and the
   buttons, eyebrow dots, phase nodes, focus ring, marquee band, hero `.wash` and
   the `.f-4` / `.f-lime` fields all follow. If you change it, re-derive
   `--accent-hi` (a lighter hover), `--accent-dim` (the icon and active tone) and
   the `rgba(201, 242, 77, …)` stops inside `.wash`, `.f-rings`, `.f-band`,
   `.f-split` and `.f-arc`, which are the accent written out at low alpha. Keep
   `--muted` at 4.5:1 on `--ground` (`#969890` is 6.8:1) and remember that a lime
   background needs `--on-accent`, not `--ink`.
3. **Swap the work.** Each bento cell is one `<li class="cell …">` carrying an
   `<article class="work">`: a `.work-field` (the visual), then `.work-meta` with
   the project name, client, discipline and year. The layout comes from three
   span classes — `.cell-wide` (4 of 6 columns), `.cell-half` (3) and
   `.cell-third` (2) — laid out as 4+2, 2+4, 3+3. Change a span and the row
   re-flows; all of them collapse to two columns at 900px and one at 640px. The
   whole card is clickable because `.work-name a::after` stretches over it, so
   the `<a>` is the only thing that needs a real `href`.
4. **Replace the drawn fields with real frames.** `.f-rings`, `.f-blocks`,
   `.f-band`, `.f-lime`, `.f-split` and `.f-arc` are pure `background-image`
   gradients. If you have a reel, swap each `<span class="work-field">` for an
   `<img>` with `object-fit: cover` and keep the `min-height` — see `IMAGES.md`.
   The hero's `.strip` cells work the same way through the `--field` custom
   property on `.f-1`–`.f-6`.
5. **Rewrite the lists.** Capabilities (`.caps`), phases (`.phases`), clients
   (`.clients`) and awards (`.awards`) are plain lists — add or delete an item and
   the grids re-flow. Keep the eyebrow numbering (`01`–`06`) in order, and keep
   `.num` on the years and figures: that is what sets `tabular-nums`.
6. **Point the form somewhere.** `motion.js` calls `preventDefault()` and fakes an
   850 ms wait, so nothing is ever sent. Give the `<form>` an `action`, or post it
   yourself in the submit handler, and keep `setError()` — it is what sets
   `aria-invalid` and writes a message naming both the problem and the fix. The
   "Play showreel" button in the hero points at `#work`; give it your video.

## Before you call it done
```bash
node scripts/lint-templates.mjs motion-studio   # no errors, no warnings
node scripts/shoot.mjs motion-studio            # `clean` for desktop and mobile
node scripts/audit-uniqueness.mjs               # no shared pairing or palette
```

Rules that survive an edit: `@import url('fonts/fonts.css')` stays the first line
of `styles.css`; exactly one `<h1>`; every `<use href="#i-…">` must name a symbol
the inline sprite actually defines, or it renders as nothing at all; the page must
still be complete with `motion.js` deleted (nav links in the header, nothing
hidden waiting to be revealed, the clock reading "UTC"); the marquee must stop
under `prefers-reduced-motion` and stay reachable by scrolling; and the
`<!-- ai-generated -->` block stays in `<head>` — the linter fails without it.

Full contract: [`../../TEMPLATE-SPEC.md`](../../TEMPLATE-SPEC.md)