Fluid Type Scale (CSS @function)

A heading/body type scale that resizes smoothly between a phone width and a desktop width — the well-established 'fluid typography' clamp() formula (Smashing Magazine's 'Modern Fluid Typography Using CSS Clamp' technique, in wide production use for years), but instead of hand-copying that same three-line clamp() math into every heading rule, it's written ONCE as a real, reusable CSS function — `@function --fluid-size(--min, --max, --min-vw: 400px, --max-vw: 1200px) returns <length> { result: clamp(...) }` — and every heading just calls `--fluid-size(1.75rem, 3.25rem)`. This is the actual new part for 2025/2026: native custom CSS functions (the `@function` at-rule), not the decades-old clamp() trick itself. **Real, current, cross-checked across independent sources** (not a single blog's guess): Chrome's own engineering blog post 'Delaying shipping of CSS @function from Chrome 136 to 139' (developer.chrome.com/blog/delaying-shipping-of-css-functions) confirms Chrome's Intent-to-Ship was pushed from 136 to 139 for extra spec-stability testing; a second, independent source (root.cz's 'Novinka v Chrome 139: vlastní CSS funkce', August 2025) confirms it actually landed, unflagged, in Chrome 139; a third independent source (a DEV Community write-up on the @function rule) agrees on Chrome 139 (May 2025) and states Firefox and Safari have not shipped it. MDN's own `@function` at-rule reference page (checked via WebSearch snippet, not a direct fetch — see note below) marks the feature 'Experimental' and explicitly NOT Baseline because it doesn't yet work in multiple major engines. The exact function syntax used here (typed/defaulted parameters, a `result:` descriptor, an optional `returns <type>`) was cross-checked against three independent syntax write-ups that all agree on the same shape: the CSS-Tricks Almanac's `@function` entry (`--double(--x)`, a typed `--half(--size <length>)`, and a `--progression(...) returns <percentage>` example), a Verpex engineering blog walkthrough, and a DEV Community ('Custom Functions in CSS') article — not taken from a single source. **Honest access gap, stated plainly:** this run's own direct `WebFetch` calls to developer.chrome.com, developer.mozilla.org, caniuse.com, and verpex.com all failed outright with `ENOTFOUND` from this sandbox's standing egress block (the same block every prior day's log has hit against apexflowlabs.com and MDN) — every citation above came from `WebSearch` result snippets of those pages, cross-checked against each other for agreement, never from reading a primary source directly in this run. **Fit check:** zero JavaScript, zero WebGL, zero scroll-jacking — fits the DIY $999 tier's constraints as cleanly as it fits here (still nothing to add it to there — `docs/diy-website-style-catalog.md` remains missing, see this run's repo-state note). **Fallback, by the same cascade rule this catalog already uses for `if()`:** an unsupporting browser treats the whole `--fluid-size(...)` value as invalid at parse time and drops it with no built-in fallback of its own, so every rule below declares a plain static `font-size` FIRST and the function-based override SECOND — the cascade keeps the static size on any browser that doesn't recognize the function, never a missing or broken heading. (Vanilla example: live iframe preview + HTML/CSS tabs — resize your browser window to see the headline and body copy scale smoothly between the two breakpoints baked into the function call.)

<div class="fts-wrap">
  <h2 class="fts-h1">Fluid Type Scale</h2>
  <h3 class="fts-h2">One @function, every heading</h3>
  <p class="fts-p">Resize this window — the headline above and this paragraph both scale smoothly from the phone-width size to the desktop-width size, computed by one shared CSS function instead of a separate hand-tuned clamp() on every rule.</p>
  <span class="fts-note">Needs Chrome/Edge 139+ for the live scaling — falls back to fixed sizes everywhere else.</span>
</div>