Glass City

Build a single-page personal site whose hero is a translucent isometric model city drawn in SVG, where each glass building is a section of the site. A tall glass intro card sits beside the city, numbered glass label pills float over the roofs, and the same fixed district colours appear on the map, the labels, a directory below it and every section heading, so the city works as both decoration and a legend.

Lay the hero out as a grid of `minmax(0, 430px) minmax(0, 1fr)` with a `clamp(16px, 3vw, 40px)` gap, centred vertically, with a minimum height of `min(820px, 100vh - 120px)`, inside a centred wrap of about 1200px. The intro card is strong glass with `clamp(24px, 3vw, 38px)` padding holding a mono eyebrow, the headline at `clamp(2.6rem, 4.4vw, 4.1rem)` with -0.04em tracking and one Instrument Serif italic word, the lede, three buttons and a three-cell stat strip. Under the city put a one-line centred caption inviting the reader to pick a building.

Use Geist at an 18px base for body and UI, Instrument Serif italic for the accent word, and Geist Mono for eyebrows, label counts and map numbers. The ground is `#e6ecf6` in light and `#060a13` in dark with ink `#0c1626` and `#eef3fb`, under a drifting four-blob mesh with grain. Glass is about 60% white in light and deep navy in dark with `backdrop-filter: blur(18px) saturate(170%)`, a rim highlight and a long soft shadow; buttons use the brand slate `#364f6a`. Fix one hue per district and never vary it: AI violet `#8a74f0`, stories rose `#e07fc2`, writing mint `#37b98c`, patterns cyan `#3fb3d9`, projects amber `#ee9a45`, about coral `#f0826a`, newsletter gold `#d9b544`, contact slate-blue `#5f86c4`. Provide a light/dark toggle that honours the system preference.

Draw the city on a frosted isometric slab with faint grid lines and two wide translucent roads. Build every building from three faces, top, left and right, each filled with `color-mix()` of the district hue into a near-white (light) or near-navy (dark) mix at different shares and alphas (roughly 0.72, 0.60 and 0.70 in dark), with a 1px rim stroke, a 1.6px highlight stroke along the top edges, small window rectangles (a few lit warm `#ffd98a`), and a soft shadow polygon on the slab. Give the buildings character with small additions: a mast and a blinking red beacon on the AI tower (opacity to 0.35 and back over 2.6s), a star on the story tower, a crane with a cable over the workshop, a field of coloured tiles for the patterns block, trees with glossy specular dots, and the portrait placed on the wall of the About house as an SVG image behind a glass glaze.

Float a label over each roof: a pebble-shaped strong-glass pill (the radius `999px 820px 999px 760px / 760px 999px 820px 999px`) positioned by `--x` and `--y` percentages and translated `-50% -100%`, with a 32px numbered disc in the district hue under a white radial highlight, the district name and a mono count, and a 12px fading stem down to the roof. Hovering or focusing a label lifts it 6px and lifts its building 10px with a drop shadow and stronger face opacity; hovering the building lights its label. Below the hero, a city directory of eight glass cards in four columns repeats each district with its coloured building icon, number and one-line description, then come Start-here image cards, two columns of latest writing, an AI experiments grid and a three-panel contact band, each section heading led by its district's building glyph.

Make the nav a floating glass pill with the same lopsided pebble radius, 16px from the top, that bobs 3px on a 7-second loop while a blurred ellipse beneath it shrinks and fades in sync, as if it hovers above the page. Each nav link carries a monochrome isometric glyph of its building, and the active and hover states use asymmetric blob radii; the link for the section in view is marked current. Keep the city legible: don't add more buildings than sections, and keep faces translucent so the mesh shows through. Below 1000px stack the hero with the city capped at 760px; below 700px shrink the labels to just their numbered discs so the map stays clear and rely on the directory for the names. With `prefers-reduced-motion` stop the bob, beacon and drift; with `prefers-reduced-transparency` make panels and pills near-solid.