fluid-clamp-calculatorlisted

# Fluid Clamp Calculator Static pixel sizes are guesses that are right at exactly one viewport width. Stacking media queries to patch them produces jumps at each breakpoint and leaves every width in between untuned. A fluid token instead describes the *range* a value should live in and lets the browser interpolate: `clamp(MIN, PREFERRED, MAX)`, where `PREFERRED` is a viewport-relative expression. The result scales continuously, never drops below the mobile floor, and never balloons on ultra-wide screens. Treat every heading size, section margin, page padding, and component gap as a fluid token. Reserve media queries for things that genuinely change *structure* (column count, showing/hiding), not for resizing. ## Boundaries - Mobile floor: **320px** (20rem) - Desktop ceiling: **1200–1440px** (75–90rem). Pick 1200 for content-dense product UI, 1440 for marketing/editorial pages. Between those two widths the value moves linearly; outside them it's pinned to MIN or MAX. ## Baseline tokens Start from these unless the design calls for a different scale. They're tuned so the min reads comfortably on a phone and the max doesn't dominate a 27" monitor. ```css :root { /* Typography */ --fs-display: clamp(2.5rem, 6vw, 5.5rem); /* H1 / hero */ --fs-h2: clamp(1.75rem, 4vw, 3rem); /* section headings */ --fs-h3: clamp(1.25rem, 2.5vw, 1.75rem);/* sub-headings */ /* Space */ --pad-page: clamp(2rem, 5vw, 5rem); /* vertical page padding; pair with