# Editorial Longform

## Overview
A magazine feature article translated to the web. One narrow serif text column (680px, a 60–68 character measure) on warm paper white, oversized Playfair Display headlines, a drop cap opening the piece, and pull-quotes and images that deliberately break out of the column. There are no cards, no grids, no shadows — only the rhythm of reading. The test of success: scrolling through a long text feels pleasurable.

## Colors & Roles
Warm paper `background` (oklch 0.985/0.004/91) with near-black ink `foreground`. `muted-foreground` is a warm greige reserved for bylines, captions, and dates. Exactly one chromatic `accent`: a brick red (oklch 0.47/0.14/31) used only for links, the drop cap, and section-divider glyphs — keep it under 5% of the page area. Hairline `border` (oklch 0.882/0.016/90) draws every rule. No gradients, ever. Light mode is canonical (measured from the source pack's tokens); dark mode is a warm dark-paper adaptation that keeps the same hues and reading-first spirit.

## Typography Rules
Three families, strict roles:
- **Body — Source Serif 4** (`font-serif`): 1.25rem (20px, deliberately large), weight 400, line-height 1.75. Body is *always* serif.
- **Display — Playfair Display** (`font-display`): H1 `clamp(2.5rem, 5vw, 4rem)`, weight 700, line-height 1.1, letter-spacing −0.01em; H2 1.75rem. Pull-quotes are Playfair 1.6rem weight-400 *italic*.
- **Meta — Inter** (`font-sans`): captions, bylines, category labels only — 0.8125rem, uppercase, letter-spacing 0.04em.

The drop cap is the article's opening gesture: first letter of the first paragraph, floated left, 4.2rem, line-height 0.85, accent color, spanning three lines of body text.

## Layout Principles
No grid. A single centered text column fixed at **680px** — never widen past 760px or the measure breaks readability. Page max-width is 1100px; only images and pull-quotes may use it, breaking out of the text column to **1000px or full-bleed**. Below 720px the column becomes 100% width with 20px side padding. Vertical rhythm is airy: 64px between sections/paragraph groups, 1.5em between paragraphs. Everything outside the column stays empty — that emptiness is the design.

## Depth & Elevation
None. No shadows of any kind; the page is flat like a printed sheet. Separation is done with 1px hairline rules or a centered accent glyph (`✦` or `—`) as a section divider.

## Shapes
Border-radius 0 everywhere — images, rules, buttons, inputs. Images are preferably black-and-white or desaturated, always sharp-cornered.

## Component Stylings
- **Hero**: paper background; small uppercase category label (Inter, accent) → left-aligned oversized Playfair H1 → byline/date meta in muted Inter → full-bleed lead image below.
- **Drop cap**: floated first letter, 4.2rem / line-height 0.85, accent color, 3-line height.
- **Pull-quote**: Playfair italic 1.6rem, pulled wider than the 680px column via negative margins; optional hairlines above/below.
- **Figure**: breaks the column to 1000px or full-bleed; small uppercase Inter caption beneath.
- **Link**: accent color with underline; on hover the underline thickens 1px → 2px over 150ms.
- **Footer**: no color inversion — hairline top rule, centered glyph divider, uppercase Inter meta, a "next article" link.

## Motion
Subtle and reading-safe. Text blocks fade in on scroll entry (`opacity 0→1` + `translateY(12px)`, 500ms ease-out). Link underline thickening at 150ms. An optional thin accent reading-progress bar at the top. No parallax, no scroll-jacking, nothing that interrupts reading.

## Do's and Don'ts
**Do:** keep body copy serif at 1.25rem/1.75 within the 680px measure; open with a drop cap; let only images and pull-quotes break the column; build hierarchy purely from serif type and vertical space.
**Don't:** widen the text column past 760px; set body in sans-serif (Inter is meta-only); use card grids or repeated 3-column boxes; introduce a second accent color; use rounded corners, shadows, gradients, emoji, or blob shapes; build a centered SaaS hero with two giant buttons.

## Responsive Behavior
Under 720px the text column goes full-width with 20px padding; breakout images become full-bleed naturally. The Playfair display headline scales via `clamp()`. Pull-quote negative margins collapse to the column width on small screens. Reading rhythm (large serif body, 1.75 leading) is preserved at every size.

## Agent Prompt Guide
> Build this in the 'Editorial Longform' style: a magazine feature article on warm paper white with near-black ink and a single brick-red accent under 5% of the page. Body copy is Source Serif 4 at 1.25rem / 1.75 line-height in a centered 680px column; headlines are oversized Playfair Display; Inter appears only in uppercase meta labels. Open with a floated accent-colored drop cap, break the column with italic pull-quotes and 1000px/full-bleed images, divide sections with hairlines or a centered glyph, and use zero radius, zero shadows, no cards, no grids.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-editorial-longform` (an authored curated spec, not measured from a live site) — all confidence fields are `manual`. Light-mode colors trace directly to the pack's tokens.json; the card/secondary/muted tonal steps and the entire dark mode are derived adaptations (warm dark paper, same hues). All three fonts are Google Fonts, so no commercial-font substitution is needed.