# News Journal Grid

## Overview
A broadsheet newspaper front page translated to the web. Ink-black type on newsprint off-white, a dense 12-column grid packing six or more article blocks into one viewport, bold serif headlines whose size encodes story importance, and thin black rules doing all the dividing. Density is authority: whitespace is spent sparingly, and breathing room comes from rule lines, not gaps. One red — and only one — punctuates kickers and the breaking badge.

## Colors & Roles
Canonical mode is **light**: `background` newsprint off-white (oklch 0.990/0.004/106.5, from `#fcfcf9`), `foreground` ink (0.200, from `#161616`), `muted-foreground` meta gray (0.468, from `#5a5a5a`). `border` equals the ink foreground — rules ARE the medium, so they are full-strength black, not softened gray. `card` equals `background`: article blocks have no fill, no shadow; they exist only between rules. The single chromatic role is `accent` red (oklch 0.530/0.207/22.3, from `#c8102e`), used for category kickers, a "Breaking" badge, and key links — under 5% of page area. `destructive` reuses the same red. Dark mode is an authored "evening edition" inversion: warm charcoal paper, light ink and rules, the same red hue lifted in lightness (no neon).

## Typography Rules
Three families, three jobs:
- **Headlines** — Playfair Display (`font-display`), weight 700–900, line-height 1.12, letter-spacing −0.015em. Four sizes carry the hierarchy: lead `clamp(2rem, 4.5vw, 3.4rem)`, major `1.6rem`, standard `1.2rem`, brief `1rem`. Headlines are serif-only, always.
- **Body** — Source Serif 4 (`font-serif`), `1rem`/400, line-height 1.55, measure 60–72ch.
- **Kickers/meta** — Archivo (`font-sans`): kicker `0.68rem`/700, uppercase, +0.12em tracking, in accent red; bylines/meta `0.75rem`/500 in meta gray; datelines uppercase.

## Layout Principles
Max width 1280px, 12 columns, 24px gutters. The signature split: lead story spans 7 columns, sidebar takes 5 with vertically stacked briefs divided by 1px rules. Breakpoints: 600px (1 col), 900px (2–3 col), 1200px (4–5 col). Body copy may flow in CSS multi-columns (`column-count`). Vertical rhythm is tight — 32px between blocks. A masthead tops the page: large serif site name, date left, section menu right, closed by a 3px rule (a double rule — 0.5px hairline above the 3px bar — is idiomatic).

## Depth & Elevation
None. Zero shadows, zero gradients, zero blur or glass. The page is as flat as newsprint. All separation is a rule line in a strict weight hierarchy: **0.5px** inside an article, **1px** between article blocks, **3px** for masthead and section breaks. Never invent intermediate weights.

## Shapes
Border-radius 0 everywhere — blocks, buttons, inputs, badges, images. Right angles only. Images carry no border; render them grayscale or desaturated (−40%) with a small meta-font caption below.

## Component Stylings
- **Masthead**: oversized Playfair site name, Archivo meta for date/menu, 3px bottom rule.
- **Article block (card)**: kicker (red, uppercase) → serif headline → two-line excerpt → byline. No background, no shadow; the surrounding rules define it.
- **Button**: radius 0, 1px solid `foreground`, transparent fill, uppercase Archivo 0.75rem, padding 10px 20px; hover inverts to ink fill instantly. Primary variant = ink fill.
- **Input**: 1px full border (`input`), radius 0; focus keeps the border and adds a 2px `ring` outline. Underline-only variant acceptable.
- **Badge ("Breaking")**: `accent` fill, kicker typography, radius 0 — about one per page.
- **Pull quote**: 3px red left rule + large serif quotation.
- **Nav**: section links row under the masthead rule, uppercase Archivo, not sticky; hover turns red in 100ms.

## Motion
`motion: none` — a newspaper is static. The only permitted effects are hover states: an instant (0ms) underline on headline links, or an ink→red color change at 100ms linear. Scroll-triggered animation, fades, and parallax are banned outright.

## Do's and Don'ts
**Do:** divide only with rules in the 0.5/1/3px hierarchy; encode importance through the four headline sizes; keep red under 5% and only on kickers/badges/key links; pack six-plus blocks per viewport; set kickers and datelines in uppercase Archivo.
**Don't:** use any gradient; round any corner or cast any shadow; give cards a background fill; add a second accent color; animate on scroll; loosen the layout with big whitespace; set headlines in sans-serif; use emoji, illustrations, or blob shapes.

## Responsive Behavior
The grid collapses by breakpoint: 4–5 columns above 1200px, 2–3 between 900–1200px, one column under 600px. The 7+5 lead/sidebar split stacks on mobile with the lead first. The lead headline scales via `clamp()`. Rules keep dividing in every layout — vertical rules between columns become horizontal rules between stacked blocks.

## Agent Prompt Guide
> Build this in the 'News Journal Grid' style: a dense newspaper front page on newsprint off-white with near-black ink, a 12-column grid splitting a 7-column lead story from a 5-column stacked sidebar, six or more article blocks divided only by black rules (0.5px/1px/3px hierarchy), bold Playfair Display serif headlines in four sizes, Source Serif 4 body, uppercase Archivo kickers and bylines, one red accent under 5% of the page, zero radius, zero shadows, grayscale images, and no motion beyond instant hover underlines.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-news-journal-grid` — an authored spec, not measured from a live site, so all confidence fields are `manual`. Light mode is canonical (traced to the pack's hex tokens via culori); dark mode is our faithful "evening edition" adaptation and has no pack source. Sub-pixel rules (0.5px) render as 1px on 1x displays; treat the hierarchy as relative weight, not literal pixels, where needed.