@media (max-width: 960px) {
    .site-header {
        z-index: 10000;
        overflow: visible;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .site-header .nav {
        overflow: visible;
    }

    .site-header .nav > .brand,
    .site-header .nav > .menu-btn {
        position: relative;
        z-index: 2;
    }

    .site-header #navigation {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding: calc(6.5rem + env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-right, 0px)) max(2rem, env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px));
        box-sizing: border-box;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        border: 0;
        border-radius: 0;
        background: var(--paper, #f6f3ed);
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        transition: opacity 180ms ease, visibility 180ms ease;
    }

    .site-header #navigation.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
    .site-header #navigation ul.nav-links {
        position: static;
        inset: auto;
        z-index: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        margin: 0;
        padding: 0;
        gap: 0;
        list-style: none;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: inherit;
        transform: none;
        transition: none;
        overflow: visible;
    }

    .site-header #navigation li {
        display: block;
        width: 100%;
        margin: 0;
        list-style: none;
    }

    .site-header #navigation li > ul.nav-links {
        padding-inline-start: 1rem;
        box-sizing: border-box;
    }

    .site-header #navigation a {
        display: block;
        box-sizing: border-box;
        min-height: 48px;
        width: 100%;
        padding: 1rem 0;
        overflow-wrap: anywhere;
    }

    body.menu-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    html:has(body.menu-open) {
        overflow: hidden;
    }
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
    .site-header #navigation {
        transition: none;
    }
}