Neumorphism Revisited

Build a personal homepage in neumorphism done accessibly: every surface is either extruded from one tinted ground or pressed into it, but every control also carries a real edge and real contrast, so the page never depends on a soft shadow to say what is clickable. The look is quiet, tactile and monochrome blue-grey, with one slate accent.

Center content in a `1220px` wrap. A raised header bar holds a small mark, pill nav links (the current one pressed in, bold, with an accent dot), an inset search field, a theme knob and a half-moon Depth knob. Sections stack with generous vertical padding and a mono eyebrow with a small LED dot above each Outfit heading.

Use **Outfit** 600 to 700 for display, **Atkinson Hyperlegible** at `17px` to `18px` for body, and **JetBrains Mono** for eyebrows, dates and meta. Define the whole system as tokens: ground `#e2e7ee`, a deeper ground `#d7dde6`, a well `#d5dce5`, highlight `#ffffff`, lowlight `#a3b0c2`, ink `#141c27` (13.8:1), secondary ink `#3a4758`, edge `#6f7d90` (3:1 against the ground), soft edge `#c6cfdb`, accent `#364f6a`. The dark theme keeps the same structure on ground `#232b36` with highlight `#303b49`, lowlight `#12171e`, ink `#eef2f7` and accent `#9dbde0`. Build the shadows from those: **raised** is `7px 7px 16px` lowlight plus `-7px -7px 16px` highlight; **raised-sm** is `3px 3px 7px` and `-3px -3px 7px`; **inset** is `inset 5px 5px 10px` lowlight plus `inset -5px -5px 10px` highlight; **inset-sm** is the `2px / 5px` version. Radii are `28px` for slabs, `18px` for cards, `12px` for small parts, and full pills for buttons and chips.

The hero is one large raised slab: a grid of `.85fr 1.15fr`, padded up to `3rem`. On the left the portrait sits in a circular inset well with `12px` to `22px` padding, the photo itself a raised-sm circle inside it, and a raised pill tag naming the place overlapping its lower right. On the right: mono eyebrow, an Outfit H1, a lede, a row of three stat knobs, and the call-to-action row. Each knob is an `86px` raised circle with a soft-edge border and an `inset-sm` ring inset `9px` inside it, the number in Outfit 700 at `1.45rem`, and a bold label with a muted sub-label beside it. The primary button is a filled accent pill with white text; secondary buttons are raised pills with a `1px` edge-colour border; text links are underlined.

Below the hero, article cards are raised `18px` cards with their banner image set into an inset well; the Digital Garden is a single inset tray holding raised list rows with a mono date and a round raised arrow button; experiments are smaller raised tiles with a raised icon circle. The featured pattern library is a raised panel with chips, three more dial knobs and the blueprint image in an inset well. Close with contact cards, a dark accent Work with me card, a newsletter slab with an inset email field, and a plain footer.

State never relies on shadow alone. Current nav item, selected segments and pressed toggles pair the inset shadow with an accent dot, a `3:1` border and bold weight. The Depth knob switches between Soft and Crisp: Crisp shortens shadows to hard `2px` to `4px` offsets, doubles edge width and gives every card a full-strength border; select Crisp automatically under `prefers-contrast: more`, and persist theme and depth in `localStorage` inside try/catch. Do not stack more than two levels of depth (a well inside a slab is the limit), and do not use colour fills to separate cards; the shared ground is what makes the style work.

Below `860px` the hero slab goes to one column with the portrait well capped at `300px`; under `480px` the knobs shrink to `72px`. Card grids fall to one column and the nav moves to a menu, with no horizontal scroll at `400px`. Motion is limited to `150ms` to `200ms` shadow and colour transitions on press and hover, all switched off under `prefers-reduced-motion`.