/* Side gutter for every page section: the original 24px mobile / 80px desktop margins, growing smoothly in between.
   Max is the value at the 1440px design width, so zoomed large screens keep the same proportion. */
:root { --gutter: clamp(24px, 5.5vw, 80px); }

/* Pages are designed at 1440px. On wider screens, scale the whole page (layout + text)
   proportionally instead of leaving a column with small text in a sea of white.
   Each step starts at 1440 x zoom, so the layout never gets narrower than its 1440px design.
   Steps run up to 32" 4K at 100% scaling (3840px); beyond that the zoom holds and the layout widens. */
:root { --page-zoom: 1; }
@media (min-width: 1512px) { :root { --page-zoom: 1.05; } }
@media (min-width: 1584px) { :root { --page-zoom: 1.1; } }
@media (min-width: 1656px) { :root { --page-zoom: 1.15; } }
@media (min-width: 1728px) { :root { --page-zoom: 1.2; } }
@media (min-width: 1800px) { :root { --page-zoom: 1.25; } }
@media (min-width: 1872px) { :root { --page-zoom: 1.3; } }
@media (min-width: 1944px) { :root { --page-zoom: 1.35; } }
@media (min-width: 2016px) { :root { --page-zoom: 1.4; } }
@media (min-width: 2088px) { :root { --page-zoom: 1.45; } }
@media (min-width: 2160px) { :root { --page-zoom: 1.5; } }
@media (min-width: 2232px) { :root { --page-zoom: 1.55; } }
@media (min-width: 2304px) { :root { --page-zoom: 1.6; } }
@media (min-width: 2376px) { :root { --page-zoom: 1.65; } }
@media (min-width: 2448px) { :root { --page-zoom: 1.7; } }
@media (min-width: 2520px) { :root { --page-zoom: 1.75; } }
@media (min-width: 2592px) { :root { --page-zoom: 1.8; } }
@media (min-width: 2736px) { :root { --page-zoom: 1.9; } }
@media (min-width: 2880px) { :root { --page-zoom: 2; } }
@media (min-width: 3024px) { :root { --page-zoom: 2.1; } }
@media (min-width: 3168px) { :root { --page-zoom: 2.2; } }
@media (min-width: 3312px) { :root { --page-zoom: 2.3; } }
@media (min-width: 3456px) { :root { --page-zoom: 2.4; } }
@media (min-width: 3600px) { :root { --page-zoom: 2.5; } }
@media (min-width: 3744px) { :root { --page-zoom: 2.6; } }

html { zoom: var(--page-zoom); }

/* zoom also scales vh, so full-screen sections divide it back out to stay one screen tall */
@media (min-width: 1512px) {
  body, .hero-sc, .error-hero { min-height: calc(100vh / var(--page-zoom)); }
}

/* Below 900px the hero stacks into a centred column; keep its text on the gutter instead of centring the block */
@media (max-width: 900px) {
  .page-hero-inner > .hero-text { align-self: stretch; }
}

/* Legal links in the footer copyright line */
.footer-copy a { color: inherit; }
.footer-copy a:hover { color: var(--yellow, #FFD103); }