/* Match the existing header heights so anchor targets remain visible below it. */
:root {
    --site-header-height: 220px;
    scroll-padding-top: calc(var(--site-header-height) + 20px);
}

@media (max-width: 1950px) {
    :root { --site-header-height: 175px; }
}

@media (max-width: 1439px) {
    :root { --site-header-height: 163px; }
}

@media (max-width: 1023px) {
    :root { --site-header-height: 109px; }
}

/* The outer header retains its responsive height and reserves space in the page. */
header > .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: inherit;
    z-index: 100;
    background-color: #141414;
    border-bottom: inherit;
}

body.dark-mode header > .header {
    background-color: #eae4d8;
}

/* The mobile panel opens below the header and scrolls within the viewport. */
header > .header .mobile-menu-box {
    max-height: calc(100vh - var(--site-header-height));
    max-height: calc(100dvh - var(--site-header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
}