TITLE: Nocturne 41 — an obsidian-and-gold automatic built entirely from divs

PROMPT: Build a single self-contained HTML product page for a fictional luxury automatic watch, with no images of any kind. Palette: obsidian #0a0a0b, gold #c9a227, ivory #e9e6df, slate #1d1d20, bronze shadow #6f6a5f. Type: display Georgia 400 uppercase with .14em tracking at clamp(2.6rem,6.6vw,5.6rem); specs in ui-monospace .56–.62rem uppercase with .28em tracking; CTA in system-ui 500 .66rem with .34em tracking. Structure: a fixed 2px scroll rail at the very top whose gold gradient fill is scaleX-ed by scroll progress; a fixed top bar (brand in mono .68rem/.52em, three mono nav links, a gold "Acquire" label) that gains a translucent backdrop-filter background and a gold hairline after 40px of scroll; then a split hero on a 1fr/1.05fr grid, min-height 100dvh, max-width 1680px: left column holds an eyebrow with a gold rule, the gradient-clipped display name, a mono subline, a lede, a ruled price block ($14,800) and three spec rows (Reference / Movement / Case) that reveal a hidden micro-note on hover via transform translateX(-10px) → 0 plus clip-path inset(0 100% 0 0) → inset(0) and rotate their "+" mark 90deg; the right column is the watch. The watch is pure CSS: a clamp(200px,30vw,352px) square with a conic-gradient gold case (nine stops from #2c2820 through #f7ecc6), a bezel inset 3.5% that layers repeating-conic-gradient tick marks every 6deg over a second gold conic sweep and rotates on a --bezel custom property, a dial inset 11.5% with a radial-gradient obsidian face, a repeating-conic sunburst at 3.5% alpha, 12 hour indices made from repeating-conic-gradient at 30deg masked with radial-gradient(closest-side,transparent 82%,#000 82.6%), tiny mono brand/model/date text, and three hands: hour and minute as clip-path tapered dauphine blades rotated by a --deg custom property with a .9s cubic-bezier transition, and a gold second hand that sweeps 360deg over 60s with animation-timing-function steps(60) and a negative animation-delay aligned to the real second, plus a counterweight tail and a radial-gradient centre cap. A screen-blend sheen overlay rotates with drag on a --sheen property. Behind it a radial-gradient spotlight breathes on a 7.5s scale animation. Below, a three-column detail band (Dial / Movement / Case) on a hairline top rule, revealed by IntersectionObserver adding an .in class that starts a transform-only rise animation; each column's h2 carries a mono numbered eyebrow in gold. JS is one IIFE: live hand angles from Date (h + m/60)*30 and (m + s/60)*6, dial date, pointer drag on the stage rotating bezel by dx*0.55 and sheen by dx*0.22 with pointer capture, a CTA click that replays a 1.05s gold sheen sweep, and a dirty-gated passive scroll handler writing the rail scaleX, the .is-stuck class and a --p custom property that translates the watch -26px, scales it 1.07 and rotates it 2.2deg. Respect prefers-reduced-motion by disabling the spotlight, the second-hand animation, the reveals, the scroll transform and the sheen. One inline style block, one inline script, zero external references, and the substring "http" must never appear.

DESCRIPTION: A product page that treats the watch as the only object in the room. The left column is almost entirely whitespace and hairline rules: a wide-tracked Georgia name clipped to a gold gradient, a mono subline, a single paragraph, a price sitting on a rule, and three spec rows that stay quiet until you hover them, at which point a micro-note slides in from behind its own edge and the plus sign turns on its axis. The right column is a soft pool of gold light on obsidian, and inside it the watch is drawn entirely with gradients — a conic-gradient case that reads as brushed and polished gold in the same circumference, sixty tick marks around the bezel produced by a repeating conic gradient, twelve hour indices masked into a ring, and dauphine hands that move to the actual time. Dragging sideways turns the bezel against its reflection; scrolling lifts and tilts the whole object while a gold rail fills across the top of the window.

TECHNIQUES:
- Watch rendered from divs only: conic-gradient case, repeating-conic-gradient bezel ticks, radial-gradient dial, radial-gradient centre cap
- clip-path polygons for the tapered dauphine hands and the lug stubs
- CSS mask (radial-gradient closest-side) to cut the hour-index ring out of a repeating conic gradient
- animation-timing-function steps(60) on the second hand with a JS-set negative animation-delay so the steps align to the real clock second
- Custom properties (--deg, --bezel, --sheen, --p) written from JS to drive transforms
- background-clip:text gold gradient on the display name, guarded by @supports
- IntersectionObserver adding an .in class to start a transform-only rise reveal
- Dirty-gated passive scroll listener writing a scroll rail scaleX, a sticky-bar state class and a scroll-progress custom property
- backdrop-filter blur on the sticky top bar, gold sheen sweep pseudo-element on the CTA

INTERACTION:
- Drag horizontally on the watch stage: the bezel rotates by 0.55deg per pixel and the screen-blend reflection by 0.22deg per pixel, with pointer capture so the drag survives leaving the element
- Hover or focus a spec row: its hidden micro-note slides in from the left edge via transform plus clip-path and the "+" mark rotates 90 degrees
- Click "Reserve yours": a gold sheen sweeps across the button once, re-triggered on every click
- Scroll: the top rail fills with a gold gradient, the top bar turns translucent with a backdrop blur and a gold hairline, the watch lifts 26px, scales to 1.07 and rotates 2.2 degrees as the hero leaves
- Scroll to the detail band: each of the three columns rises into place, staggered 0.05/0.15/0.25s
- The hour and minute hands follow the real clock with a .9s eased transition, the gold second hand steps once per second, and the dial date shows the current day and month
- prefers-reduced-motion: reduce: spotlight, second-hand sweep, reveals, scroll transform and sheen are all disabled