Letterhead

Build a personal résumé website built with Next.js and SQLite using the "Letterhead" theme — A résumé that reads like it was typeset, not templated.

## Art direction
Flat, paper-white light with no gradients, no shadows heavier than a hairline, and nothing that glows. Depth comes entirely from spacing and a single 1px border colour, never from elevation tricks. The page should feel quiet and confident: wide margins, a strict left-aligned grid, and generous line-height that lets each section breathe. Density is low up top (name, title, one line of context) and increases gradually as the reader scrolls into experience and work. The overall feeling is of a printed CV that happens to be interactive — restrained, legible, slightly formal, never flashy.

## Colour palette (use these exact values)
- Background: #faf9f6
- Surface / cards: #ffffff
- Primary text: #1a1a1a
- Secondary text: #6b6b63
- Accent (buttons, links, active state): #b3452c
- Text on accent: #ffffff
- Borders / dividers: #e5e2d9
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

## Typography
- Headings: 'Source Serif 4', Georgia, 'Times New Roman', serif
- Body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif
- Large serif display name at 48-56px with negative tracking (-0.02em), section labels in 11px uppercase sans with wide tracking (+0.08em), body copy at 16px/1.6 with normal tracking throughout

## Page structure
1. Header — name set large in serif on the left (one line), role/title directly beneath in muted sans; on the right, a stacked contact block (email, location, one social link) right-aligned in small caps, all inside a container with a single bottom border
2. Summary — one paragraph of prose capped at 560px width, left-aligned under the header, no card or background, just ink on background
3. Now/Focus strip — a thin single-row band showing current role and one current focus statement, separated from summary by a hairline top border, text in two columns (label left in muted caps, statement right in ink)
4. Experience — vertical list with a fixed 100px date column on the left (e.g. '2022—Now') and role/company/description in the wider right column; each entry separated by a 1px border, no cards, no icons
5. Skills — three-column grid of plain text groups (e.g. 'Languages', 'Tools', 'Focus'), each group a small caps label followed by a comma-separated line of items, no pill or chip styling
6. Selected work — two-column grid of project entries, each showing project name in serif, one-line description in muted, and a small tech-stack line; entries link out with a simple underline-on-hover, no thumbnails
7. Education — simple two-column rows: institution and degree on the left, years right-aligned, separated by hairlines matching the experience section
8. Writing — a plain list of article or talk titles with publication date right-aligned, each row a link with no visual chrome beyond an underline on hover
9. References — two pull-quote blocks side by side, quote in serif italic, attribution in small caps beneath, separated by a vertical hairline on desktop and stacked on mobile
10. Contact footer — centered single line inviting email contact with the email address itself as the CTA link, small social row beneath, copyright line in 12px muted text

## Components and detailing
Buttons are text links with a 1px underline that thickens to 2px on hover, no filled buttons except the single email CTA which is a 44px-tall rectangle with 4px radius, 1px border, and inverts to accent fill on hover; cards do not exist — content sits directly on background separated by 1px solid border lines (#e5e2d9); inputs (if a contact form is added) are 44px tall with 1px border, 4px radius, no fill change on focus beyond a 2px accent outline offset by 2px; icons are custom-drawn SVG line icons at 1.5px stroke, 18px box, monochrome ink or muted, no filled icons; the only imagery is a small geometric monogram (initials in a thin-bordered circle, 40px) used as a favicon-style mark in the header, no photography anywhere.

## Motion
Motion is nearly imperceptible: section content fades in and rises 8-12px over 250ms ease-out on first scroll into view, staggered by 40ms per row within lists; links underline via a 150ms width transition rather than colour change; the email CTA background fill transitions over 180ms ease; no parallax, no scale transforms, no looping animation.

## Copy and imagery
Voice is first-person, plain and factual — short declarative sentences, no marketing adjectives, no buzzwords, dates and outcomes stated directly ('Led the migration' not 'Spearheaded a transformative initiative'); all imagery is CSS/SVG-drawn — hairline dividers, a monogram mark, and simple geometric bullets — never photographs or icon-service assets, keeping the page feeling entirely self-built.

## Non-negotiables
- Responsive from 360px through desktop — no horizontal scrolling at any width.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.