Responsive rules

Mobile-first by default. 14 global CSS guards + the §15 mobile polish layer + the §17 margin tightening v2 patch handle every common responsive issue without per-page authoring.

Breakpoints

≥1440px · Desktop

Full grid: 3-up or 4-up cards, sticky sidebars, full chrome.

1024px · Laptop

Sticky sidebars activate (e.g. Docs sidebar). 3-up listing grids.

768px · Tablet portrait

2-up listing grids. Mobile menu still in effect on header.

640px · Mobile large

Polish layer §15 kicks in below this. All `py-*`, `gap-*`, and `mb-*` utilities compress.

375px · Mobile small

Section §16 tighter compression. Card padding 0.75rem. Cap on swipe-scroll card count.

14 global CSS guards (§14 in styles.scss)

1. `html, body { max-width: 100%; overflow-x: hidden }` — eliminates accidental horizontal scroll.
2. `body { word-wrap: break-word }` — long URLs / hashtags wrap instead of overflowing.
3. `img, svg, video, iframe { max-width: 100%; height: auto }` — media never bleeds.
4. iOS auto-zoom prevention: form inputs forced to `font-size: 16px` below 640px.
5. 44px touch targets via `@media (hover: none) and (pointer: coarse)`.
6. Hero line-height tightens to 1.1 on mobile.
7. `.no-mobile` utility hides decorative content below 640px.
8. Smooth momentum scroll on iOS for horizontal scrollers.
9. Sticky sidebars release to `position: static` below 1024px.
10. RTL `.icon-flip` mirrors chevrons / arrows automatically.
11. Hover transforms disabled on touch devices.
12. Footer link text wraps cleanly via `overflow-wrap: anywhere`.
13. `.btn-mobile-full` utility stretches buttons to 100% below 480px.
14. Universal `.grid > * { min-width: 0 }` — prevents grid track overflow from long content.