Frosted Clay

Build a single-page personal site in frosted clay: frosted glass that is also softly extruded, so every panel is blurred and raised at once, photos sit at the bottom of pressed-in wells, and the headline stats become round dial knobs. The backdrop colours and even the shadow tint come from the portrait's own palette, so the whole material feels cast from the photo.

Lay the hero out as a two-column grid at `minmax(0, 1.12fr) minmax(0, .88fr)` with a `clamp(24px, 4vw, 56px)` gap, centred vertically, at a minimum height of `min(760px, 100vh - 140px)`, inside a centred wrap of about 1200px. The copy leads on the left: a mono eyebrow, the headline with one Instrument Serif italic word, a strong clay slab holding the lede and three buttons, and below it a row of three dials. The portrait sits on the right in a deep well with a small tag reading `Boulder, Colorado` led by a glowing LED dot. Follow with Start-here image cards, two columns of latest writing as raised slabs inside pressed trays with each date in a small well, an AI experiments grid, a three-panel contact band with a dark smoke card, and a clay footer.

Use Geist at an 18px base for body and UI, Instrument Serif italic for the one accent word, and Geist Mono for eyebrows, labels and meta. Derive the clay from the portrait: take the dominant swatch's hue and make the clay `hsl(h, 30%, 95.5%)` in light and `hsl(h, 30%, 11.5%)` in dark, then use it at three strengths (72%, 86%, 93% via `color-mix` with transparent) over a 20px backdrop blur. Take the darkest swatch's hue at 28% lightness as the shade colour and build every shadow from it, so the slabs cast a shadow in the image's own darkest colour. Behind everything, drift four blobs from the portrait's swatches, clamped so the smallest text set straight on the backdrop still passes 4.5:1. Ink is `#0c1626` in light and `#eef3fb` in dark; buttons are filled slate `#2a3f54` in light and ice `#a9c8ea` in dark. Provide a light/dark toggle that honours the system preference.

Define the extrusion as tokens: raised is `-8px -8px 20px` of a 55% white highlight plus `12px 14px 30px` of the shade at 30% plus a 1px inner top highlight; a small raised version is `-3px -3px 8px` and `4px 5px 11px`; inset is `inset 7px 7px 16px` shade and `inset -7px -7px 16px` highlight. Panels are raised with a 1px soft white border and a large radius, and a pointer-following sheen sits on the lit top-left shoulder. A well is the same clay pressed in: padded, half-strength clay, a 12px blur and the inset shadow, with the photo at the bottom of it and an extra inset shadow on the photo where the lip of the well casts onto it. Listing cards lift 3px and mix 16% of their own image's most saturated colour into the clay on hover.

Make each dial a 108px circle of strong clay with the raised shadow. On a `::before`, draw a ring of tick marks with `repeating-conic-gradient(var(--ink-3) 0 1.4deg, transparent 1.4deg 12deg)` masked to a thin band near the edge at 70% opacity; on an `::after`, inset 19px, press in the knob's face with half-strength clay and the small inset shadow. Set the number on top at 1.55rem bold with tabular figures, and put a two-line label beside the dial: a 650-weight word over a mono uppercase qualifier.

Soft UI fails when shadows carry all the meaning, so give every control (buttons, linked chips, toggles, inputs, the nav's current item) a 1.5px edge in `#5f6e84` light or `#8797ae` dark, about 4.9:1 and 5.4:1 against the clay, and pair every state change with a weight or dot change, not just a shadow. Static tags are pressed-in trays with no edge so they never look clickable. Don't stack more depth than raised and inset; a third level turns the page to mush. Mark the nav link for the section in view. Below 900px stack the hero with the portrait well under the copy and let the dials wrap. With `prefers-reduced-motion` stop the drift; with `prefers-reduced-transparency` make the clay near-solid; with `prefers-contrast: more` harden the soft shadows into short crisp offsets and draw full-strength 2px panel edges.