/* The banner scrolls away; the navigation stops at the top of the viewport. */
:root{--site-banner-height:min(21.41vw,240px);--site-header-height:70px;--site-header-bottom:calc(var(--site-banner-height) + var(--site-header-height))}
html{scroll-padding-top:calc(var(--site-header-height) + 16px)}
.site-header{position:sticky;top:calc(0px - var(--site-banner-height));z-index:150;background:#000;box-shadow:0 8px 24px #0005}
@media(max-width:1150px){
 .navigation-bar .mobile-nav>nav{position:absolute;top:100%;left:0;right:0;margin-top:10px;width:100%;max-height:calc(100vh - var(--site-header-bottom) - 20px);max-height:calc(100dvh - var(--site-header-bottom) - 20px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;box-shadow:0 14px 28px #0008}
}
/* Leave reading space on a phone held sideways or a short browser window. */
@media(max-height:600px){
 :root{--site-banner-height:min(21.41vw,24vh);--site-banner-height:min(21.41vw,24dvh)}
 .site-header .brand-banner{max-height:24vh;max-height:24dvh}
}