/* ---- Fluid root (Finsweet-style cascade, same system as NSA) ----

   Every rem-based size on this site scales from the browser root with viewport
   width. Root: 16px@479 → 16px@1440 → 18px@1920, then FLAT above 1920 — an
   un-capped top segment keeps growing with vw (about 20.7px at 2560, 26px at 4K),
   which made everything oversized on 27-32 inch screens. That was the NSA lesson.

   Regenerate with the fluid-type skill (fluid.mjs root) if the anchors change.

   ------------------------------------------------------------------------------
   NOT IN A CASCADE LAYER, DELIBERATELY.

   Bricks ships `html { font-size: 62.5% }` (1rem = 10px, its own convention) inside
   `@layer bricks` in frontend-layer.min.css. Cascade layers sort by first
   declaration, and this file loads first, so an `@layer base` here would be ordered
   BEFORE `bricks` and would lose — which is exactly what happened: the root
   computed to a flat 10px and every token rendered at 62.5% of its intended size,
   with no fluid scaling at all.

   Unlayered styles beat every layered style regardless of order, so leaving these
   rules unlayered is what makes the fluid root authoritative. No !important, no
   load-order trickery — just the cascade working as designed.

   Consequences worth knowing:
   - 1rem is ~16px here, NOT Bricks' documented 10px. A value typed as "2rem" in the
     Bricks builder renders 32px, not 20px. Use px in the builder for one-off
     spacing, or a token.
   - Bricks' theme style "HTML: font-size" must be left EMPTY. Setting it emits a
     flat value in Bricks' own CSS that would kill the fluid scaling.
   - Bricks' own stylesheet contains 6 rem declarations against 588 px ones, so
     overriding its root barely touches Bricks' own styling.
*/

html { font-size: 1.125rem; }

@media screen and (max-width: 1920px) {
  html { font-size: calc(0.625rem + 0.4166666666666667vw); }
}

/* FLAT 16px from 480 to 1440.

   This segment previously read
     calc(0.8126951092611863rem + 0.20811654526534862vw)
   which solves to 14.002px at 480 and 16.000px at 1440 — NOT the 16 to 16 this
   file has always claimed, and not what the studio system specifies. The effect
   was that every rem-based size across the whole tablet and laptop band rendered
   4 to 12 percent smaller than the px value commented beside it (root 14.60 at
   768, 15.00 at 960), and the root jumped 16.000 to 14.002 across the single
   pixel between 479 and 480.

   A 16-to-16 line has zero slope, so it is simply 1rem. The 479 segment below
   already ends at exactly 16.000px, so the two now meet without a step. */
@media screen and (max-width: 1440px) {
  html { font-size: 1rem; }
}

@media screen and (max-width: 479px) {
  html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); }
}