# Chiaroscuro Motorsport

## Overview
Pure-black and pure-white planes split every section edge-to-edge — dramatic chiaroscuro with no muddy gray in between. Over that high-contrast field sit an oversized display-serif headline and narrow, dense magazine columns, like a motorsport print spread. Racing red appears exactly once on the whole page and nails the eye. Corners are sharp, shadows are absent, images are grayscale, and motion snaps in 100–150ms. Hierarchy is built from the light/dark split and typography — never from color.

## Colors & Roles
Two absolutes anchor everything: black field `#0A0A0A` and white field `#FFFFFF`. On white, body ink is `#1A1A1A`; on black, text is `#FFFFFF`. Meta/caption gray is `#C4C4C4` on black, `#6A6A6A` on white. The single chromatic mark is racing red (oklch 0.546 0.224 29.2 = `#D40000`) — used **once per page** as one keyword highlight or one 1px rule, never twice. `dark` is the canonical mode (black-dominant framing), but because the style splits black/white edge-to-edge, `light` (white-dominant) is kept equally faithful: one mode's background is the other's foreground. Mid neutrals for `card`/`secondary`/`muted`/`border` are derived from the pack's brightness rhythm (#141414/#2A2A2A/#404040/#F0F0F0/#EDEDED). Both fields hit ≈16:1 body contrast (WCAG AAA).

## Typography Rules
Two families. Display and giant index numbers are set in **Newsreader** serif (weight 600) — H1 `clamp(2.6rem, 5vw, 4.6rem)`, line-height 1.05, letter-spacing −0.015em; index numbers `clamp(3rem, 8vw, 7rem)`. Body, kicker, and caption are **Inter**: body 0.95rem / line-height 1.55, measure 48–58 characters (narrow, dense); kicker 0.7rem weight 700 uppercase with 0.18em tracking; caption 0.72rem. Never set a headline in sans-serif.

## Layout Principles
Full-bleed — no content_max. Each section splits the viewport asymmetrically between a black plane and a white plane (e.g. left 58% black + right 42% white, then a 50/50 the next section); vary the ratio section to section. Text lives inside each plane on an internal padding axis of `clamp(24px, 5vw, 80px)`. Density is high (compact) — kicker↔headline 12px, headline↔body 20px, column gutter 32px, caption 8px on an 8px base. Every plane is a finished magazine plane: fill an empty black plane with a giant index number + dense text; fill an empty white plane with a full-bleed grayscale image or dense columns. No flat dead void.

## Depth & Elevation
Flat by rule. No shadows, gradients, glass, or noise. Depth is expressed only through the black/white plane split.

## Shapes
Zero border-radius everywhere — buttons, cards, images, tables. Borders are nearly absent; the field boundary itself is the divider. When a line is needed, use a single 1px rule (#C4C4C4 on black, #1A1A1A on white).

## Component Stylings
- **Button**: radius 0, padding 12px 28px, Inter uppercase 0.1em tracking. On black → white solid + black text; on white → black solid + white text. Hover inverts black↔white instantly (110ms).
- **Nav**: 60px black field, wordmark left (Newsreader 600), uppercase Inter menu right (0.7rem/700/0.18em), 1px `#C4C4C4` bottom rule, fixes instantly on scroll.
- **Gallery card**: grayscale image + opposite-value caption bar (model name Newsreader, year Inter tabular). Radius 0, 2px gap so planes nearly touch. Hover releases grayscale (130ms).
- **Record table**: 1px row rules, Inter tabular-nums, inverted header row. One winning row carries a red 1px marker at its left edge — the page's single red use.
- **Index number**: Newsreader 600 `clamp(3rem, 8vw, 7rem)`, faint `#C4C4C4` on black — the device that fills an otherwise empty plane.
- **Icon**: 1px stroke lines only, minimal, motorsport motifs (checkered flag, lap time, gauge). No filled icons, emoji, or generic icon sets.

## Motion
Decisive snap — 100–150ms, `cubic-bezier(0.3, 0, 0.2, 1)`. Black/white planes wipe in via clip-path/width (140ms); text fades opacity 0→1 (120ms); buttons invert instantly (110ms); gallery images release grayscale (130ms). No parallax, bounce, or fade over 200ms. `prefers-reduced-motion` drops the wipes and filter transitions, keeping opacity only.

## Do's and Don'ts
**Do:** split sections edge-to-edge into pure-black/pure-white planes at varying asymmetric ratios; set headlines in display serif over narrow 48–58ch grotesque columns; fill every plane to magazine density with an index number and dense text; use racing red exactly once; keep motion a 100–150ms snap.
**Don't:** use red more than once; weaken the split with muddy gray; add rounded cards, gradients, shadows, or emoji; box content in a content_max; widen columns past 60 characters; set a headline in sans-serif; use color photos; leave a flat dead void; use slow fades or parallax.

## Responsive Behavior
Breakpoints 768px and 1120px. Split planes stack vertically on mobile (black over white) rather than side-by-side; display type scales via `clamp()`; the 3-column gallery collapses to 1; nav collapses to a 1px-line hamburger.

## Agent Prompt Guide
> Build this in the 'Chiaroscuro Motorsport' style: split every section edge-to-edge into pure-black (#0A0A0A) and pure-white (#FFFFFF) planes at asymmetric, varying ratios — no blurry grays, no content_max box. Set headlines in a display serif (Newsreader), body in narrow dense grotesque columns of 48–58 characters (Inter). Fill each plane to full magazine density with an oversized index number, kicker, and body column — never a flat dead void. Use one racing-red accent exactly once. Zero border-radius, no shadows, grayscale images only, decisive 100–150ms snap motion.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-chiaroscuro-motorsport-editorial` (an authored spec, not extracted from a live URL), so all tokens are `manual` confidence. Fonts are public web fonts (Newsreader, Inter — OFL); the pack references Ferrari editorial only as brand inspiration and ships no logo or proprietary font. Racing red is the pack's own designated value. Mid-gray neutrals are derived from the pack's stated brightness rhythm.