/* ============================================================================
   Large-display tier — ultra-wide, low-DPI panels (e.g. 32" 1440p) where the
   site otherwise renders small and centered with vast empty side gutters. A 27"
   4K gets the "lush" feel for free because its high DPI scales everything up;
   these panels don't, so we recreate that scaling here.

   Because the design's reading columns (ch), type, and spacing (--space-* are
   all rem) are root-relative, stepping the root font-size up enlarges the whole
   experience proportionally — bigger type, wider columns, more generous spacing
   — filling the canvas without touching a single component. Mobile-first: only
   min-width tiers, no desktop-first overrides (house rule). Standard 1920px
   displays are left untouched.
   ========================================================================== */
@media (min-width: 2000px) { html { font-size: 17.5px; } }
@media (min-width: 2400px) { html { font-size: 19.5px; } }
@media (min-width: 3200px) { html { font-size: 22px; } }

/* Give the px-capped frames headroom so the enlarged content never butts up
   against them, and let the homepage hero ring grow with everything else. */
@media (min-width: 2400px) {
    .home-upgrade { --hu-maxw: 1340px; }
    .lf-hero .score-ring-wrap { width: clamp(280px, 26vw, 520px); }
}