Organic Blobs

Build a personal blog home page styled as a river-stone field guide: every photo, stat, button and card is a soft asymmetric pebble on warm paper, colored in moss, clay, ochre and river slate. Nothing is a plain rectangle and nothing has a hard corner; the page should feel hand-placed rather than gridded.

Define the shapes as tokens and reuse only those. Four percentage blob radii for images and stat stones, for example `--blob-a: 62% 38% 46% 54% / 44% 52% 48% 56%`; three rem pebble radii for text cards, for example `--pebble-a: 2.4rem 1.1rem 2.8rem 1.4rem / 1.8rem 2.6rem 1.2rem 2.2rem`; and one lopsided pill, `--pill: 999px 820px 999px 760px / 760px 999px 820px 999px`, for the nav, search field, inputs and buttons. Cycle cards through the pebble tokens with `nth-child` so no two neighbours share a silhouette.

Lay content in a wrap of about 1180px with uneven splits: the hero is roughly `1.05fr .95fr`, the middle card of every three-up grid drops 2.2rem, and alternate list rows indent. Separate sections with hand-drawn SVG wave edges into full-width tinted bands (moss for the AI writing band) rather than rules or boxes. Below the hero, run a three-card Start-here row, the moss AI band with one large feature card beside a stack of small row cards with blob thumbnails, a two-column Digital Garden block with a ruled list of red mono dates and serif titles, four blob-shaped experiment cards each in a different tint, project rows that alternate a blob-masked screenshot left and right, and a connect row.

Set headings in **Fraunces** with `font-variation-settings` SOFT 100 and WONK 1 at weights 600 to 700, which gives rounded, slightly irregular serifs that match the shapes; the hero headline is about 4rem with one italic moss phrase. Body is **Nunito** at 18 to 19px and labels, eyebrows and dates are **DM Mono** in small uppercase, each eyebrow led by a tiny clay pebble dot.

The light ground is `#f5efe4` with cards on `#fffaf1`, ink `#26241e`, moss `#3e5b3a`, clay `#9a4424`, ochre `#c8913a` and soft tints `#dce5cc`, `#f1d6c2`, `#f2e0b5`. Lay a fixed paper-grain noise over the body at 0.35 opacity with `mix-blend-mode: multiply`. In dark mode the ground becomes deep forest `#141913` with cards at `#1d241b`, and the accents lift to `#a6c790`, `#ec9c76` and `#e6bd6a`, with the grain switching to `soft-light`.

The nav is a frosted cream lopsided pill floating 14px from the top: a moss blob logo with a small ochre leaf and `Aj` set in Fraunces, a stacked eyebrow and name, links where the current one sits on a soft moss-tint blob and the AI link is a solid moss blob, then a pill search field and pebble icon buttons. Move the soft blob to the link for the section in view. Below 900px it collapses to logo, theme and a menu pebble that opens a sheet.

The hero puts the portrait inside a blob mask that slowly morphs between radius tokens, with three solid stones (ochre, moss, clay) drifting behind and beside it; the three stats are pebbles in white, moss tint and ochre tint. Morph the portrait mask over 18 seconds and drift the stones over 14 seconds on `alternate` loops, and keep everything else still except gentle hover lifts. Do not add more stones or more motion; two or three is what keeps it calm.

Under `prefers-reduced-motion`, stop the morph and drift. At 400px wide everything stacks to one column, the stagger offsets are removed, stat pebbles wrap two to a row, and nothing scrolls sideways.