Longform Weekly

# Longform Weekly — Digital Magazine

## Goal
Build a production-ready digital magazine called "Longform Weekly". Overall vibe: print-quality reading on screen — the design disappears behind the writing. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: warm paper #FBFAF7, near-black #1A1A18 text, single terracotta #C2543A for links and category labels
- **Typography**: serif body (18-19px, 1.75 line-height, 68ch measure), sharp sans for UI labels in 12px caps
- **Grid & spacing**: 12-col grid, 8px base unit. Desktop sections 112-128px vertical padding, mobile 56-64px.
- **Corners & borders**: cards 16px radius, buttons 10px, inputs 10px. 1px borders at 8-12% white (dark) or 8% black (light).
- **Shadows**: layered, soft (0 1px 2px + 0 8px 24px), never harsh.

## Page Structure
1. **Masthead** — centered wordmark in serif, date line under it, thin double rule below (classic newspaper detail).
2. **Nav strip** — category text links (Culture, Tech, Essays, Interviews) with terracotta active underline.
3. **Featured story** — huge headline (56-80px serif) + dek + byline with avatar; right side a tall 3:4 image; whole block clickable.
4. **Story river** — 6 stories in a single column: category label, headline, 2-line dek, byline+read-time; separated by hairlines. No images in the river — typography carries it.
5. **Pull-quote break** — full-width terracotta-tinted band with one oversized italic quote from a featured piece.
6. **Grid section** — 'From the archive': 3-col compact cards with small images.
7. **Newsletter plate** — bordered box styled like a print ad: one great read, every Sunday + email input.
8. **Footer** — colophon-style: tiny caps, 'Set in [font] · Built with care', minimal links.

## Motion
- Almost none — this design earns trust through stillness. Only: link underlines thicken on hover, images fade in on load.
- Featured headline gets a subtle 1.01 scale on hover of the whole block, 300ms.
- All entrances use IntersectionObserver-triggered reveals; never animate on every scroll tick.
- Respect `prefers-reduced-motion`: disable transforms, keep opacity fades under 150ms.

## Details That Matter
- Reading-time computed style '7 min read'. Drop cap on the featured story dek is a nice touch.
- Dark mode: paper flips to #171614, terracotta warms slightly — keep contrast AA.

## Tech & Quality Bar
- Next.js App Router + TypeScript + Tailwind CSS. No UI kit — style from scratch.
- Fully responsive at 375 / 768 / 1024 / 1440px. Mobile nav becomes a full-screen overlay with staggered link reveal.
- Semantic landmarks (header/main/section/footer), WCAG AA contrast, focus-visible rings on all interactive elements.
- Optimize LCP: hero media preloaded, fonts `display: swap`, zero layout shift.