Section spacing

Rhythm-driven, not arbitrary. Section padding comes from named tokens. The mobile polish layer (§15) halves all major paddings below 640px so phones never feel like stretched desktops.

Section rhythm tokens

.cal-section

Standard section vertical rhythm. Mobile 0.875rem padding-block, desktop 2rem.

.cal-section--tight

Tighter rhythm for header strips, signal blocks, dense sections. Mobile 0.625rem, desktop 1.25rem.

.cal-section--flush

Zero padding-block. Used for full-bleed media sections that own their own internal padding.

Grid + container widths

• max-w-7xl — Standard editorial container. ~1280px max. Used on every main content section.
• max-w-3xl — Reading column for long-form prose (editorial articles, coverage). ~720px.
• px-4 sm:px-6 lg:px-8 — Standard inner padding pattern. Required on every container.

Mobile compression policy (§15 polish layer)

On viewports below 640px, the polish layer overrides Tailwind’s default Tailwind py-* utilities to halve vertical rhythm: py-12 → 1.5rem, py-10 → 1.25rem, py-8 → 1rem, py-6 → 0.75rem. Same compression applies to gap-* and mb-* utilities. This compression is automatic — do not author per-page mobile overrides.