Glass Museum

Build a single-page personal site staged as a small glass museum. The page opens on one exhibit: wall text on the left and the portrait hung on the right in a thick frosted-glass frame under a picture light, labelled by a glass placard. Everything after it borrows the same vocabulary of mats, lamps, wing letters and accession numbers, so the conceit holds without becoming a costume.

Lay the hero out as a two-column grid at `minmax(0, 1.2fr) minmax(0, .8fr)` with a gap of `clamp(28px, 5vw, 76px)`, centred vertically, inside a centred wrap of about 1200px with a `clamp(16px, 4vw, 40px)` gutter. The left column is wall text set directly on the backdrop with no panel: a mono wall sign holding a small glass wing tag (a 24px filled circle with the letter `L`, then `Lobby`) and the byline, the headline at `clamp(2.8rem, 6.2vw, 5.6rem)` with -0.04em tracking and one Instrument Serif italic word, a lede, three buttons, and a facts strip of three stat cells joined by 1px gaps over a line-coloured container so the gaps read as hairlines.

Use Geist at an 18px base for body and UI, Instrument Serif italic for accent words and the large room letters, and Geist Mono at 0.875rem for wall signs and accession numbers. The wall is `#e6ecf6` in light and `#060a13` in dark with ink `#0c1626` and `#eef3fb`, washed by four drifting blurred blobs whose hues come from the portrait and whose lightness stays between 0.70 and 0.82 in light and 0.20 to 0.32 in dark, so wall text with no panel still passes AA. Glass is `rgba(255,255,255,.60)` in light and deep navy at a similar alpha in dark, `backdrop-filter: blur(18px) saturate(170%)`, with a rim highlight, a long soft shadow and a pointer-following specular sheen. The picture-light glow is tungsten, `#ffd98f` in light and `#ffe2b0` in dark. Buttons use the brand slate `#364f6a`. Provide a light/dark toggle that honours the system preference.

Build the centrepiece as a figure with 54px of top padding. The frame is a vitrine: `clamp(12px, 1.8vw, 22px)` of glass around a recessed mat (`rgba(255,255,255,.55)` with an inset shadow in light, `rgba(255,255,255,.06)` with a deeper inset in dark), the portrait inside at 4:5 with a 10px radius, a 5px inner white ring at 10% and the usual rim and shadow. Above it hang the lamp: a smoked-glass pill `min(46%, 280px)` wide and 18px tall, held off the frame by two 2px glass arms, with a 4px lit underside that glows in the tungsten colour. Behind the frame, a `::before` cone of light runs from the lamp down the wall: two stacked radial ellipses in the glow colour, masked to fade at the top, bottom and sides. Let the light also land on the top of the frame with a screen-blended radial on the vitrine. Pin the placard over the bottom edge of the frame, offset to the right with `margin: -44px 4% 0 auto` and `width: min(90%, 27rem)`: strong glass, a 650-weight title with a serif accent, a meta line, a hairline rule and a mono accession number like `AJ.2012.0001`, plus two small dots in the top-right corner as fixing pins.

Under the hero, place the floor plan as the front door: a three-column grid with areas `"a b c" "p lobby d"`, 8px gaps over a 14% ink background so the walls show between rooms. Each room is a 190px glass pane tinted 30% toward its wing's image colour, with a serif letter at 3.4rem, a mono gallery label, a title, a sentence and a `Go` link, and a ceiling-light pool in its own colour that brightens, plus a 3px light strip along its top edge, on hover or focus. The lobby is hatched, carries a pulsing `You are here` beacon and an entrance cut in the outer wall. Follow with Start-here cards whose thumbnails sit in recessed mats and whose dates become accession numbers, two columns of latest writing, a grid of AI experiment tiles and a three-panel contact band.

Motion is small and deliberate. On load the picture light flickers on over 1.6s with a 0.2s delay (opacity 0, 0.8, 0.15, 0.9, then 1), the lobby beacon pulses every 2.4s, the backdrop drifts slowly, rooms lift 2px on hover over 200ms, and a small lamp switches on over a listing card on hover with a warm cone falling on its image. The dock marks the link for the section in view. Don't add more lamps or frames than the one centrepiece and the hover lamps; the single lit object is what makes the room feel like a gallery.

Below 900px stack the hero to one column with the centrepiece centred at up to 460px wide. The plan reflows to two columns under 1000px and to a single list under 600px. With `prefers-reduced-motion` stop the flicker, the beacon and the drift and show the light fully on; with `prefers-reduced-transparency` make panels, frames and rooms near-solid.