TITLE: Maison Vernier — a tasting menu that unfolds under the finger

PROMPT: Build a single self-contained HTML page for a fine-dining tasting menu, black-tie elegance on a dark table. Palette: ink #0f0e0c, gold #d4af37, cream #f5efe0, taupe #6b5d4a, card #1c1a17. Structure: a fixed .table background layer (radial gold wash at the top, two repeating-linear-gradient cloth weaves at 1-2% white, and a radial vignette from #17150f to #080705), a fixed .candle-wrap containing two huge radial-gradient candle glows (min(130vw,1500px) and min(64vw,760px), gold at 20% and warm amber at 16%) that flicker on a 6.5s/4.2s ease-in-out scale-and-opacity keyframe, and a centred .menu card (min(100%,940px), linear-gradient #1c1a17 to #181613, 1px rgba(212,175,55,.34) border, a deep 90px black shadow plus a 120px gold bloom, inner hairline rules via ::before/::after at the top and bottom edges). The masthead centres a 78px gold double-ring monogram holding MV in small caps, then MAISON VERNIER at small-caps with 0.62em tracking, then a ui-monospace 0.42em uppercase subtitle. A gold gradient rule draws in with transform:scaleX(0) to 1 over 1.5s, with staggered delays on each of the four rules. Seven courses live in an ordered list; each .course-inner is a three-track grid (number column clamp(38px,4vw,54px), name column minmax(0,1fr), and a pairing column that animates from 0px to clamp(120px,17vw,190px) when .menu.wine is set). Each course row carries a ui-monospace gold-on-hover number, a Georgia 700 small-caps dish name at clamp(16px,2.05vw,23px) with 0.16em tracking that widens to 0.2em on hover, a flex-1 dotted gold leader (border-bottom dotted, nudged up .34em) ending in a 7px rotated gold diamond that swaps to a gold SVG tick when the course is ordered, and an italic Georgia description. Ingredients sit in a grid-template-rows 0fr to 1fr reveal — a gold left-bordered italic line listing components plus a monospace allergen note — triggered on :hover and :focus-within so it also works from the keyboard. Below the list, a second gold rule and an italic service note in which SERVICE COMPRIS is set in gold small caps, then a toolbar with a Wine pairing toggle (aria-pressed, gold fill when on) and a Clear order button, and a live line reading Selected N of 7 courses. Typography: display is Georgia small-caps letterspaced .62em; course names Georgia 700; descriptions and notes italic serif; numbers, labels and buttons ui-monospace. Motion: courses slide up from translate3d(0,1.1em,0) to 0 with per-row transition-delays (never opacity), rules draw left to right, the candle glows flicker and drift with the pointer via a transform on the wrapper, the wine column expands its grid track. Interaction: hover a course to expand its ingredients; click or press Enter/Space on a dish to toggle a gold tick and increment the order count; toggle the wine pairing column; click Clear order to reset every tick; move the pointer and the candle light leans toward it. Responsive from 360px to 1920px with a mobile layout that stacks the pairing under the dish, and a reduced-motion block that removes the transitions, the flicker and the pointer drift. All CSS inline in one <style>, all JS in one IIFE in one inline <script> at the end of body, system fonts only, zero external references, no createElementNS.

DESCRIPTION: A tasting menu printed on a black card and set on a dark table, lit by two candle flames that lean toward your hand. The card is quiet and ceremonial: a gold monogram, a drawn gold hairline, seven courses in small caps with dotted leaders running out to a gold diamond. Hover a course and it opens like a folded napkin to list its ingredients and allergens; click it and the diamond becomes a gold tick while a counter at the foot of the menu tallies your order. Toggle the wine pairing and a third column unfurls on the right, each glass lined up against its course. Every margin is generous, every rule is gold, and nothing rushes.

TECHNIQUES: Layered CSS table surface from radial and repeating-linear gradients; two flickering radial-gradient candle glows with a pointer-following transform on the wrapper; transform-based gold rule draw-ins with staggered delays; CSS grid with an animated grid-template-columns track for the wine pairing column; grid-template-rows 0fr to 1fr hover/focus expansion for the ingredient block; dotted flex leader with a rotated-square diamond and an SVG symbol tick that cross-scale; small-caps display type with wide tracking; staggered transform-only entrance for course rows; aria-pressed toggles and keyboard handlers on role=button dish rows; reduced-motion media query that disables all transitions and the flicker.

INTERACTION: Hover any course and its ingredients and allergen line expand beneath the dish name; the same works with keyboard focus. Click a dish row, or focus it and press Enter or Space, to toggle a gold tick and update the Selected N of 7 courses counter at the bottom of the card. Click Wine pairing to unfurl a right-hand column of glass names, one per course, animated by a grid-track transition; click again to fold it away. Click Clear order to remove every tick at once. Move the pointer across the page and the candle glow behind the card drifts up to 44px horizontally and 30px vertically toward it. With reduced motion requested, the flicker, the pointer drift and all reveal transitions are disabled and the complete menu is shown immediately.