/* =========================================================
   Wide-screen scaling: the fixed-width layout was built for
   ~1440px. On larger monitors everything below the hero (and
   the nav) zooms up in steps so it fills the screen and lines
   up with the hero instead of sitting small in the middle.
   ========================================================= */
:root { --z: 1; }
@media (min-width: 1700px) { :root { --z: 1.12; } }
@media (min-width: 1900px) { :root { --z: 1.25; } }
@media (min-width: 2150px) { :root { --z: 1.42; } }
@media (min-width: 2400px) { :root { --z: 1.58; } }
@media (min-width: 2650px) { :root { --z: 1.75; } }
@media (min-width: 3000px) { :root { --z: 2; } }

.nav, .mobile-menu, main > section:not(.hx), main > hr, .footer { zoom: var(--z); }
:root { --wrap: 1320px; }

/* short laptop screens: corner labels would collide with the headline */
@media (max-height: 820px) { .hud { display: none; } }

/* hero clears the taller nav */
.hx__main { padding-top: calc(76px * var(--z) + 5vh); }
.hud--tl, .hud--tr { top: calc(76px * var(--z) + 22px); }
/* home nav matches hero edges (lengths inside a zoomed box are multiplied by --z) */
.hx-page .nav .wrap { max-width: calc(min(1800px, 92vw) / var(--z)); }
@media (max-width: 1100px) { .hx-page .nav .wrap { max-width: none; } }

/* one set of edges for nav, hero and every section */
.hx__main, .hx__foot { max-width: min(92vw, calc(1240px * var(--z))); }
.hx-page .nav .wrap { max-width: var(--wrap); padding-inline: var(--gutter); }
.hx__art { max-width: min(48vw, calc(640px * var(--z))); }
@media (max-width: 1100px) { .hx__main, .hx__foot { max-width: none; } .hx__art { max-width: 560px; } }