Responsive requirements

Reading is mobile-first on Editorial. ~60% of editorial reads happen on phones. Type scale, line length, and image ratios are tuned for the 375-414px viewport range first; the desktop adaptation comes second.

Per-breakpoint behaviors

Mobile (≤640px)

Single-column reading. Body type 0.9375rem / 1.5 leading. Hero compressed via §15 polish layer. Related Signals grid stacks to 1-up with horizontal swipe-scroll.

Tablet (641-1023px)

Listing 2-up. Article reading column stays at `max-w-3xl` (capped). Related Signals 2-up.

Desktop (≥1024px)

Listing 3-up. Article reading column `max-w-3xl` centered. Related Signals 3-up grid.

Reading-specific responsive rules

• Line length is capped at ~70ch on every viewport. Long lines kill mobile readability faster than small text does.
• Images embedded in body honor aspect-ratio CSS, never fixed pixel heights. They scale to the reading column width.
• Block quotes inset `padding-inline-start` (RTL-aware), never `padding-left`.
• Article hero title clamps from 32px mobile to 44px desktop via the `.t-page-h1` token.