Runway Lookbook — Référence de design web et prompt

# Maison Vell — Runway Depth Lookbook (exact recreation prompt)

Give me a single-file, full-viewport fashion page called **Maison Vell**. Six models stand in one line that recedes from the right of the screen into a blurred distance on the left. Dragging, scrolling or pressing the arrow keys walks the whole line forward: the front model grows and slides out behind the product column, everyone else takes the next place, and a new model arrives out of the haze at the back. The product column on the right scrolls in sync, and a big look number rolls over at bottom left. It loops forever.

Plain HTML, CSS and one vanilla script in one file, with no libraries. The only external resources are the Google Fonts and the two image sheets below. Reproduce every value, string and timing exactly, and use the complete code at the end as the source of truth.

Six rules define it:
1. **One number drives everything.** `p` is the current look position as a float. Each model's depth is `d = wrap(i - p, 6)`, moved into the range -1 to 5. Model, product column and look number are all computed from `p` alone.
2. **Depth is a table, not a formula.** Each model's position, size, blur and opacity are read from seven stops, one per depth from -1 to 5, and interpolated linearly.
3. **Two sprite sheets, cropped with SVG.** All six models come from one transparent image and all twelve products from another. Each is shown through an inline `<svg viewBox>` holding a nested `<svg>` so nothing outside the box can ever show.
4. **Layers scale, they do not resize.** Models are laid out once at 1.2 × stage height and only `transform` changes, so they stay sharp. Blur is divided by the scale so it looks the same on screen at any depth.
5. **Drag is direct, release snaps.** During a drag `target` follows the pointer. On release, or 150 ms after the wheel stops, it rounds to a whole look. `p` always chases `target` with an exponential ease.