/* ===========================================================================
   LARGE-SCREEN SCALING  (4K monitors, TVs)
   ---------------------------------------------------------------------------
   The page is capped at 1260-1320px, so on a 3840px screen the content sits in
   a third of the width with 17px text — readable at a desk, not from a sofa.
   Widening the container alone would not help: the type would still be 17px.

   So the whole page is scaled instead. Everything here is sized in px (the
   project's five-size type scale), which is exactly what `zoom` multiplies, so
   one declaration per step does the work of a full XXXL redesign. The effective
   layout width always lands back in normal desktop territory:

       2560 / 1.35 = 1896      2800 / 1.75 = 1600      3840 / 2 = 1920

   Screens of 1920px and below are deliberately left alone — the laptop and
   desktop experience must not change.

   --gf-zoom mirrors the factor for the handful of rules that use viewport
   units: vh/vw are measured against the real viewport and do NOT scale with
   zoom, so `100vh` under zoom:2 would be twice the screen height. Those rules
   divide by this variable to stay screen-relative. Grep for `--gf-zoom` to
   find them.
   =========================================================================== */

@media (min-width: 2100px) {
  :root { --gf-zoom: 1.35; }
  body { zoom: 1.35; }
}

@media (min-width: 2800px) {
  :root { --gf-zoom: 1.75; }
  body { zoom: 1.75; }
}

@media (min-width: 3400px) {
  :root { --gf-zoom: 2; }
  body { zoom: 2; }
}