/* ===== Site zoom ===========================================================
   Renders the site at 90% by default on desktop.

   `zoom` on the root is not the same as transform:scale(). It scales rendered
   output AND enlarges the layout viewport in CSS pixels - so a 1440px window
   lays out as if it were 1600px. That is what gives the container room to
   reach its max-width and produce real side margins, which is the effect you
   get from setting the browser to 90% manually.

   Desktop only. Phones and tablets are already fluid and shrinking text there
   would only hurt.

   Tune with one number: --site-zoom.
   ========================================================================== */

@media (min-width: 1025px) {
  html {
    --site-zoom: 0.9;
    zoom: var(--site-zoom);
  }
}

/* A viewer who sets their own browser zoom compounds with this, which is the
   intended behaviour: our 90% is a starting point, not a ceiling. */