Soft Cottagecore

Build a single-page developer home styled as a soft cottagecore craft table: cream paper, serif type, handwritten notes, and every kind of content shaped like a handmade object. Articles are arched-window cards with a dashed stitch outline, experiments are seed packets, stats are embroidery hoops, and the logo is an `Aj` monogram stitched inside a wooden hoop. The page should feel warm and slow, never twee.

Lay it out on a centred `.wrap` of about 1200px with 1.5rem gutters. The header is a single row: brand on the left, a pill nav in the middle, search, theme toggle and menu button on the right. The hero is a two-column grid (roughly `1.1fr 0.9fr`) with copy on the left and the portrait on the right. Below it, sections alternate between the plain paper ground and a sage-tinted band whose top and bottom edges are scalloped hems drawn with repeating `radial-gradient` half-circles. Card rows use three columns, the experiment packets four.

Set display headings in **Young Serif** (the hero `h1` around `clamp(2.6rem, 6vw, 4.6rem)` with tight leading), body in **Lora** at 18 to 19px, handwritten kickers above every heading in **Caveat** at no less than 1.2rem in a dusty rose ink, and code in IBM Plex Mono. Put one phrase of the hero headline in green italic Lora so the line reads like a hand-lettered card.

The light ground is cream `#f5eee0` with ink `#33291f`, card paper `#fbf7ef`, sage `#4b6142` for primary buttons, rose `#97463f` for kickers, butter `#f0dc9f` and lavender `#c2b4d6` as washes. Give the body two layers of generated paper grain: encode an SVG `feTurbulence` fractal-noise filter as a data-URI background, one fine and one slow mottle, multiplied faintly over the cream. Dark mode is a candlelit walnut interior (`#1f1a16` ground, `#2c2520` cards, `#f3e8d4` ink) with every accent re-solved for AA contrast; do not simply invert. Store the theme choice in `localStorage` inside a try/catch so the toggle still works where storage is blocked.

Draw the monogram as one inline SVG `<symbol>` reused with `<use>`: a filled card-colour circle with a 4px tan hoop stroke, an inner dashed stitch ring, a small tab at the top for the hoop screw, a serif `A` with a rose italic `j`, a sage thread curl and a rose knot. Show it at 52px beside a handwritten `full stack` and the serif name in the header, and again at about 88px in the footer as a sign-off mark.

The hero opens with a Caveat kicker, the headline, a lede and three stat hoops: 7rem circles with a dashed inner ring, each tinted with a different wash, holding a serif number and a small label. Primary, secondary and a dashed-underline tertiary link follow. The portrait sits in an arched window: a frame with a `border-radius` of about `48% 48% 10px 10px / 30% 30% 10px 10px`, a cream mat, a soft drop shadow, a light sepia filter on the photo, two leafy sprig SVGs breaking out of the top and bottom corners, and a slightly rotated butter-coloured tag reading `that's me` pinned to the lower edge.

Below the hero, a divider of two mirrored sprigs around a daisy separates sections. Post cards have an arched image top with the same sepia filter that lifts on hover, a dashed stitch outline inset 6px from the edge, small meta text, a serif title and rounded tag chips; the first row carries a rose `No. 1` ribbon. The garden list is a ruled column of date and title rows. Experiment cards are seed packets tinted sage, rose, butter and lavender with a line-drawn glyph. Close with three cards (connect links, projects, and a darker candlelit `Work with me` card) and a footer with a scalloped top hem, link columns and a newsletter form.

Keep motion to hover lifts (cards rise 3px, images lose their sepia) over about 200ms, and drop them under `prefers-reduced-motion`. Below 960px the hero stacks with the window above the copy shrunk to about 320px, card grids drop to two columns and then one, the nav collapses into a stacked menu with search inside it, and the handwritten `full stack` beside the logo hides at 700px. The one thing that makes this work is restraint with the craft motifs: one object metaphor per content type, a single stitch weight everywhere, and no florals on top of florals.