Build a fashion lookbook and shop for a fictional womenswear label, HUELINE, collection "Saturation SS27". No framework and no build step: five files next to an assets/ folder that is already on disk.
index.html (the home page), product.html (one product, chosen by ?code=), shared.css (every style both pages use), ui.js (behaviour both pages share), catalog.js (all the data). Page titles: "Hueline Saturation SS27" and "Hueline Product". Language: en.

ASSETS (already in ./assets and ./, reference them by these exact names, never generate or embed them)
Hero film: hero-main.mp4 / hero-main.webm with assets/hero-poster.jpg as its first frame. Hero close-ups: assets/hero-close-1 and hero-close-2 (.mp4 + .webm). Film band: assets/dye-yard (.mp4 + .webm).
Photos (.jpg): look-01 … look-06, mood-street, mood-evening, mood-resort, mood-denim, dye-cobalt, dye-marigold, dye-orchid, dye-lagoon, atelier, p-t-02, p-t-03, p-t-04, p-s-03, p-s-04, p-e-02, p-e-04, p-k-02, p-k-03, p-k-04, p-r-02, p-r-03, p-r-04, p-d-03, p-d-04.
catalog.js keeps an ASSETS list of exactly these names and a VIDEOS list ['hero-close-1','hero-close-2']; nothing outside those lists is ever requested. Any slot without a file falls back to the product's own photo, then to a block filled with the product's dye colour.

STACK
GSAP 3.12.5 with ScrollTrigger and Flip from https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ (gsap.min.js, ScrollTrigger.min.js, Flip.min.js) and Lenis 1.1.13 from https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.min.js. Fonts from Google: Archivo (wdth 62–125, wght 300–900), Bodoni Moda (opsz, 400–800, with italic), IBM Plex Mono 400/500.

TOKENS (shared.css :root)
--paper:#eceef2  --ink:#16141a  --mute:#6a6773  --line:rgba(22,20,26,.16)
--cobalt:#2b3fd6  --marigold:#f0a21a  --orchid:#c2378a  --lagoon:#13807a
--f-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif   (italic display words)
--f-cond:"Archivo","Helvetica Neue",Arial,sans-serif           (condensed uppercase display only, wdth ~62)
--f-sans:Georgia,"Times New Roman",serif                       (reading text)
--f-mono:"IBM Plex Mono",ui-monospace,monospace                (labels, 10–11px, uppercase, tracked)
--gutter:clamp(16px,4vw,56px)  --ease:cubic-bezier(.22,1,.36,1)
Paper ground, ink type, colour only from the dyes and the photos. Prices in rupees, formatted en-IN (₹62,000).

DATA (catalog.js, one source of truth for both pages; put a comment above each structure explaining how to re-skin it)
PALETTE: Orchid #c2378a, Cobalt #2b3fd6, Marigold #f0a21a, Lagoon #13807a, Plum #3b1f3a, Poppy #e46d2f, Indigo #3a4a7a, Chalk #d9d6cf, Ink #16141a.
STYLES, six categories, each { code, label, tint, items: [name, fabric, price, colour, [images, main first]] }. Product codes are HL-<code>-<two-digit index>, e.g. HL-T-01.
Tailoring (T, #2b3fd6): Cobalt wrap overcoat · Double-faced cashmere · 62000 · Cobalt · look-01 | Cobalt trouser suit · Super 120s wool · 54000 · Cobalt · p-t-02 | Marigold soft blazer · Linen-silk, 210 g/m² · 33500 · Marigold · p-t-03 | Chalk belted trench · Cotton gabardine · 41000 · Chalk · p-t-04
Streetwear (S, #13807a): Dyed loop-back hoodie · Organic cotton, 420 g/m² · 9800 · Lagoon · mood-street | Lagoon fleece set · Brushed fleece · 10500 · Lagoon · look-04 | Orchid boxy tee · Combed cotton, 240 g/m² · 4200 · Orchid · p-s-03 | Poppy cargo trouser · Ripstop cotton · 12800 · Poppy · p-s-04
Evening (E, #c2378a): Bias-cut slip dress · Mulberry silk, 19 momme · 29000 · Orchid · look-02 | Cobalt column gown · Silk crepe de chine · 48000 · Cobalt · p-e-02 | Orchid halter dress · Silk satin · 36500 · Orchid · mood-evening | Plum draped midi · Silk georgette · 31500 · Plum · p-e-04
Knitwear (K, #f0a21a): Marigold cardigan set · Lambswool · 16800 · Marigold · look-03 | Orchid ribbed crewneck · Merino, 12 gauge · 14500 · Orchid · p-k-02 | Lagoon fine-knit polo · Cotton-silk · 11200 · Lagoon · p-k-03 | Chalk cable vest · Undyed alpaca · 13900 · Chalk · p-k-04
Resort (R, #e46d2f): Block-print shirt dress · Hand-block cotton voile · 18500 · Poppy · look-05, mood-resort | Marigold tiered sundress · Cotton mulmul · 15500 · Marigold · p-r-02 | Lagoon tiered maxi · Cotton voile · 17200 · Lagoon · p-r-03 | Chalk wide-leg set · Linen, 180 g/m² · 21000 · Chalk · p-r-04
Denim (D, #3a4a7a): Indigo trucker jacket · Indigo + cobalt overdye · 17900 · Indigo · look-06 | Straight selvedge jean · 14 oz selvedge · 14900 · Indigo · mood-denim | Rinse wide-leg jean · 12 oz organic denim · 13500 · Indigo · p-d-03 | Overdyed shirt dress · Indigo chambray · 16200 · Cobalt · p-d-04
Views per product: every full frame first, then an upper and a lower detail cropped from the main frame (object-position), so every product has a small gallery.
Expose window.HL with ALL, byCode(code), the lists above, a src(name) helper and LOCAL.has / LOCAL.hasVideo.

INDEX.HTML, top to bottom

1. Loader. Five full-height dye bands (cobalt, marigold, orchid, lagoon, ink) rise with scaleY from the bottom (expo.inOut, stagger .08) while a mono counter counts 000 → 100 over 1.8s. Then the counter fades and the bands lift away from the centre outwards (yPercent -100, stagger .07 from centre), and the hero intro overlaps the last .85s. Lenis is stopped until it finishes.

2. Hero (100svh, pinned). The film fills the screen (autoplay, muted, loop, playsinline; webm source first, mp4 second; poster still removed once 'playing' fires). Three-line headline over it: "WEAR THE" and "OUT LOUD" in the condensed face, uppercase, white, and "colour" between them in Bodoni Moda italic, marigold. Every character sits in its own span. Above it a mono eyebrow: SS27 · COLLECTION 04 · SATURATION. Bottom left in Georgia: "Six silhouettes. Twelve dyes. Mixed by hand in Bagru and cut in Jaipur, in runs of 48 pieces per colourway." Bottom right a white pill "Shop the drop →" and a vertical "Scroll" cue.
Intro: the film opens from clip-path inset(18% 26% round 6px) at scale 1.08 to full (1.6s expo.out), characters rise from yPercent 115 with rotate 6 (stagger .025), the copy and the nav slide in.
On scroll (pinned, end +=130%, scrub 1): the film narrows into an arch, clip-path inset(13% 34% 9% 34% round 600px 600px 18px 18px) on wide screens and inset(16% 18% 14% 18% …) under 700px, while the video settles from scale 1.12 to 1; the hero ground turns paper; line 1 slides out left, line 3 out right, "colour" shrinks and fades; then two close-up panes (hero-close-1 and -2 videos) rise in on either side of the arch, rotated -5° and +5°, and a short line of text fades in under the arch.

3. Ticker. One line of condensed uppercase that scrolls sideways forever: the styles and dyes separated by small dye dots.

4. Six styles, arched gallery ("Every style, mo…" heading with italic word). Six tall arch frames (border-radius 200px 200px 6px 6px), one per style, using look/mood photos, each with a caption (style name + piece count). They reveal from clip-path inset(100% 0 0 0) (stagger, expo.inOut), the image settles from scale 1.4, and on scroll each arch drifts at its own speed (y: -50, 40, -80, 30, -40, 60, scrubbed).

5. 3D concave wardrobe ("The wardrobe, in the round"). The viewer stands inside a cylinder of 14 garment cards. Radius R = (card width / 2) / tan(π/14) × 1.12; the ring is translateZ(R × .55) rotateY(rot), each card rotateY(i × 360/14) translateZ(-R). Cards fade by angle from the front (fully visible within ±58°, gone by ±84°) and darken towards the sides. The ring drifts on its own (target -= .035 per frame, eased .085), scroll velocity nudges it, and it drags with the pointer (pointer capture, dx × .14). The front-most card's style · colour, name, fabric and price show in a caption that re-animates on change. Tabs above it (one per style, each with its dye tint) refill the ring with that style's pieces.

6. Style rails. One horizontal rail of product cards per style. Each rail drifts on its own, pauses on hover, drags with mouse or touch, flings on release with momentum, and loops forever.

7. Lookbook ("Six looks, one dye bath"). A pinned section that scrolls sideways through six full-height looks (look-01 … look-06). Each panel: a big look number, a title, a line of copy and the photo in a frame that wipes in from the right; reveals use containerAnimation on the horizontal tween.

8. Colour story ("One dye pot."). Four dyes, each a swatch block: Cobalt (bg #2b3fd6, white text, ref HL-04/01, "Indigo vat, 3 dips"), Marigold (#f0a21a, ink text, HL-04/02, "Tagetes petals, alum"), Orchid (#c2378a, white, HL-04/03, "Lac + madder"), Lagoon (#13807a, white, HL-04/04, "Indigo over pomegranate"). Each swatch shows its dye photo (dye-cobalt etc.), a featured product with price, and a small list of notes (Base, Fix, Fastness). As each swatch crosses the middle of the screen the whole section's background and text colour change to that dye (--sbg / --sfg), and a large sticky dye name rolls out and the new one rolls in (direction follows the scroll), with the dye ref and recipe beneath it.

9. Shop ("Shop the drop"). Tabs for All + the six styles, a sort select (Featured, Price low–high, Price high–low, A–Z), a "Showing 12 of 24 pieces" count and a "Show all 24 pieces" toggle (12 shown by default). Every change re-orders the real DOM nodes and animates them with GSAP Flip (.8s expo.inOut, stagger .02, absolute, scale; entering cards fade and scale up from .85, leaving cards fade down). Product cards: photo (hover swaps to the second view), name, fabric, price, a dye dot. Clicking any [data-product] opens the quick view.

10. Film band. The dye-yard walk film in a frame that widens from clip-path inset(0 6% round 28px) to inset(0 0 round 18px) and settles from scale 1.18 to 1 as it scrolls through; it only plays while on screen.

11. Atelier ("Slow colour, made by people who have done it for four generations."). The atelier photo revealing from the bottom, and three numbers that count up when they enter: 19 "Momme weight of our mulberry silk", 48 "Pieces cut per colourway, then the dye lot closes", 6 "Days for one hand-block print run".

12. Footer, built by ui.js and shared with product.html: big condensed wordmark, link columns, a newsletter field, small print.

Section headings everywhere reveal as masked lines (each line's inner span rises from yPercent 110); paragraphs marked data-lines reveal word by word; images marked data-reveal="img" wipe up and settle from scale 1.35.

PRODUCT.HTML
Reads ?code= (default HL-T-01). Left: the gallery (every view, sticky thumbnails, click-to-zoom with pan that follows the pointer). Right: style · colour label, name, fabric, price, colour swatches (each sets --accent on the page), size chips XS, S, M, L, XL with a size chart (bust / waist / hip in cm, e.g. XS 80 / 62 / 88, S 84 / 66 / 92), "Add to bag" (button confirms, then a toast and the bag drawer opens at 650ms) and "Save", a pincode delivery check (6 digits; 2 working days for Rajasthan pincodes starting 30–34, 3 for the metros starting 11, 12, 40, 41, 50, 56, 60, 70, longer elsewhere; Sundays skipped; shows "Arrives by Tue, 28 Oct", notes free shipping over ₹25,000 and remembers the pincode in localStorage), and fabric/care/fit details. Below, "You might also like" from the same style.

UI.JS (both pages)
Lenis smooth scroll driving ScrollTrigger. A custom cursor: a small ring and dot that grow over links, take the item's dye colour (--cc) over [data-cursor="color"] elements and show a label from data-cursor-label; hidden on touch. Magnetic pull on primary buttons. A bag badge in the nav plus a toast for confirmations. A right-hand drawer with two tabs, Bag and Saved, kept in localStorage. A search overlay that filters the catalogue as you type. A mobile menu. A quick-view modal (gallery + buy box) that any [data-product] opens. All overlays share one open/close with focus return and Escape to close, and lock page scroll while open.

NAV
HUE/line wordmark ("HUE" condensed, "line" Bodoni italic) left; mono links Wardrobe · Lookbook · Colour · Shop; Search, Saved (count), Bag (count) right. Transparent over the hero, paper with a hairline once scrolled.

RESPONSIVE AND ACCESS
Below 700px: hero arch uses the narrow inset, the ring cards shrink, rails stay swipeable, the lookbook pin turns into a vertical stack, the shop grid goes to two columns, the drawer becomes full width. No horizontal page scroll. prefers-reduced-motion: no loader, no pinning or scrub, videos paused on their posters, counters show final values, Flip at duration 0. Real buttons, alt text on every photo, visible focus states.

DONE WHEN
The loader hands over to the hero in one motion, scrolling turns the film into an arch with the close-ups rising beside it, the ring can be dragged and its caption follows the front card, the colour story repaints the section dye by dye, shop filters and sorts with Flip, quick view and the product page add to the bag, and nothing requests a file that is not in ASSETS.

## 1. Lookbook (6 looks) — aspect ratio 9:16, 2 columns × 3 rows

```
A single image laid out as a fashion contact sheet: exactly six separate photographs arranged in a grid of 2 columns and 3 rows, all panels the same size, separated by thin straight pure-white borders of equal width, with a thin white outer margin. Each panel is its own complete photo; nothing crosses the borders. No text, no numbers, no logos, no watermark.

The same model appears in every panel: a woman in her late twenties with dark hair in a low sculpted chignon, small gold earrings, natural makeup. Every panel is shot in the same outdoor dye yard in Rajasthan, India, with lengths of hand-dyed fabric hanging on drying lines, at golden hour with warm haze and dust in the air. In each panel her entire outfit is one single saturated colour, and the fabric hanging behind her is that same colour.

Top left: cobalt blue. A double-faced wool wrap overcoat worn open over cobalt trousers, standing between hanging cobalt cloths.
Top right: orchid pink. A floor-length bias-cut silk slip dress, walking past drying lines of orchid silk.
Middle left: marigold yellow. A chunky lambswool cardigan with matching marigold wide trousers, seated on a stone ledge beside dye vats.
Middle right: deep lagoon teal. A brushed-fleece zip hoodie with matching cargo trousers, mid-stride.
Bottom left: poppy orange. A hand-block-printed cotton shirt dress with a small repeating motif, under orange cloths.
Bottom right: deep indigo. A denim jacket overdyed with cobalt and straight indigo jeans, standing beside an indigo vat.

Full-length or three-quarter framing with space above the head. Editorial fashion photography, 35mm film look, soft grain, rich true-to-colour tones.
```
Files: `look-01` cobalt · `look-02` orchid · `look-03` marigold · `look-04` lagoon · `look-05` poppy · `look-06` indigo

---

## 2. Six styles arches (section 2) — aspect ratio 1:1, 3 columns × 2 rows

```
A single image laid out as a grid of exactly six separate fashion photographs: 3 columns and 2 rows, all panels the same tall portrait size, separated by thin straight pure-white borders of equal width, with a thin white outer margin. Each panel is its own complete photo; nothing crosses the borders. No text, no logos, no watermark.

Each panel: one model standing full length, centred, in front of a smooth painted plaster wall in a single flat colour, with a soft shadow. Leave generous empty space above the head, because the top of each photo will be cropped into a rounded arch.

Top left: a man in a cobalt blue two-piece wool suit, against a marigold yellow wall.
Top middle: a woman in a deep teal fleece zip hoodie and matching cargo trousers, against a pale blush pink wall.
Top right: a woman in a floor-length orchid pink silk slip dress, against a deep teal wall.
Bottom left: a man in a marigold yellow knitted cardigan and cream trousers, against a cobalt blue wall.
Bottom middle: a woman in a poppy orange block-printed cotton shirt dress, against a pale aqua wall.
Bottom right: a woman in an indigo denim jacket and straight indigo jeans, against an orchid pink wall.

Bright, clean editorial fashion photography, soft daylight from one side, crisp colour, 50mm lens.
```
Files: `mood-tailoring` · `mood-street` · `mood-evening` · `mood-knit` · `mood-resort` · `mood-denim`

---

## 3. Colour story (4 dyes) — aspect ratio 3:4, 2 columns × 2 rows

```
A single image laid out as a grid of exactly four separate photographs: 2 columns and 2 rows, all panels the same size, separated by thin straight pure-white borders of equal width, with a thin white outer margin. Each panel is its own complete photo; nothing crosses the borders. No text, no logos, no watermark.

Each panel is a still-life of one garment beside the natural dye that coloured it, on a worn stone surface in a Rajasthan dye workshop, with warm side light.
Top left: a cobalt blue wool suit jacket on a wooden hanger above an indigo dye vat with blue foam.
Top right: a marigold yellow lambswool cardigan, folded, surrounded by heaps of dried marigold petals.
Bottom left: an orchid pink silk satin dress draped over a stool, beside chunks of lac resin and madder root in a brass bowl.
Bottom right: a deep lagoon teal fleece hoodie, folded, next to split pomegranate rinds and an indigo-stained cloth.

Each garment is the dominant colour in its panel. Editorial still-life photography, shallow depth of field, rich true-to-colour tones.
```
Files: `dye-cobalt` · `dye-marigold` · `dye-orchid` · `dye-lagoon`

---

## 4. Product shots, one grid per category — aspect ratio 1:1, 3 columns × 2 rows

Use this opening for every category, then paste that category's six panel lines underneath:

```
A single image laid out as an e-commerce contact sheet: exactly six separate product photographs in a grid of 3 columns and 2 rows, all panels the same tall portrait size, separated by thin straight pure-white borders of equal width, with a thin white outer margin. Each panel is its own complete photo; nothing crosses the borders. No text, no logos, no watermark.

Every panel: one model, full length, standing centred on a plain cool light-grey seamless studio backdrop, soft diffused light, gentle floor shadow, with space above the head and below the feet. Photorealistic catalogue photography, 85mm lens, true-to-colour garments.
```

**Evening**
```
Top left: orchid pink floor-length bias-cut silk slip dress with a cowl neck.
Top middle: cobalt blue high-neck sleeveless silk crepe column gown with a side slit.
Top right: orchid pink silk satin halter dress, floor length.
Bottom left: plum-black draped viscose georgette midi dress.
Bottom middle: poppy orange one-shoulder draped silk georgette dress.
Bottom right: plum-black lined silk georgette gown, floor length.
```
Files: HL-E-01 to HL-E-06

**Tailoring**
```
Top left: man in a cobalt blue double-breasted wool-mohair blazer and matching trousers.
Top middle: man in a cobalt blue two-piece wool suit.
Top right: woman in a deep indigo double-faced cashmere wrap overcoat.
Bottom left: woman in a chalk white cotton gabardine belted trench coat.
Bottom middle: man in a plum-black soft-shoulder linen-silk jacket.
Bottom right: back view of the man in the cobalt two-piece suit.
```
Files: HL-T-01 to HL-T-05 (the sixth panel is a spare)

**Streetwear**
```
Top left: man in a deep lagoon teal loop-back cotton hoodie and matching joggers.
Top middle: man in a plum-black boxy garment-dyed canvas work jacket.
Top right: woman in an oversized chalk white heavy cotton tee and wide trousers.
Bottom left: woman in a lagoon teal brushed-fleece zip hoodie.
Bottom middle: man in plum-black ripstop cargo trousers and a black tee.
Bottom right: close-up of the lagoon hoodie's ribbed cuff and zip pull.
```
Files: HL-S-01 to HL-S-05

**Knitwear**
```
Top left: woman in a chalk white ribbed merino crewneck jumper.
Top middle: man in a plum-black fine-knit cotton-silk polo.
Top right: woman in a marigold yellow lambswool cardigan.
Bottom left: man in an undyed cream alpaca cable-knit vest over a white shirt.
Bottom middle: close-up of the marigold cardigan's buttons and knit texture.
Bottom right: back view of the woman in the marigold cardigan.
```
Files: HL-K-01 to HL-K-04

**Resort**
```
Top left: woman in a poppy orange hand-block-printed cotton voile shirt dress.
Top middle: woman in a marigold yellow tiered cotton sundress.
Top right: woman in a chalk white linen wide-leg trouser and shirt set.
Bottom left: man in a lagoon teal silk camp-collar shirt and cream trousers.
Bottom middle: woman in a lagoon teal tiered cotton voile maxi dress.
Bottom right: close-up of the poppy block-print fabric repeat.
```
Files: HL-R-01 to HL-R-05

**Denim**
```
Top left: man in straight-leg deep indigo selvedge jeans and a white tee.
Top middle: woman in rinse-wash indigo wide-leg jeans and a white tee.
Top right: man in an indigo denim jacket overdyed with cobalt.
Bottom left: back view of the straight indigo jeans.
Bottom middle: back view of the wide-leg jeans.
Bottom right: close-up of the overdyed jacket's collar and copper buttons.
```
Files: HL-D-01 to HL-D-03

---

## 5. Atelier (single image) — aspect ratio 4:5

```
A craftsman's hands pressing a carved wooden printing block onto orchid pink cotton on a long padded printing table in a Rajasthan block-printing workshop. Trays of dye, stacked carved blocks and finished fabric in cobalt and marigold nearby. Warm window light, dust in the air. Editorial documentary photography, shallow depth of field. No text, no logos.
```
File: `atelier`