.nav-menu {
    position: relative;

    .nav-menu-toggle-shell {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-xs) var(--space-sm);
        background: transparent;
        color: inherit;
        border-radius: var(--space-xxs) var(--space-xxs) 0 0;

        &:hover {
            background: var(--jet-black);
            color: var(--super-white);
            border-radius: var(--space-xxs);
        }
    }

    .nav-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        border-radius: 0;
    }

    .nav-menu-panel {
        position: absolute;
        inset: 100% auto auto 0;
        z-index: 1200;
        width: max(100%, 38rem);
        max-width: calc(100vw - 2 * var(--space-md));
        box-sizing: border-box;
        padding: var(--space-md);
        border-radius: 0 var(--space-xs) var(--space-xs) var(--space-xs);
        background: var(--jet-black);
        color: var(--the-white);
        text-transform: none;
        color-scheme: dark;
    }

    .nav-menu-panel__content {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        gap: var(--space-md);
    }

    .nav-menu-section {
        width: auto;
        min-width: 0;
        min-height: 0;
    }

    .nav-menu-label {
        margin: 0 0 1.5rem;
        color: var(--grey);
        font-size: var(--fs-sm);
        line-height: 1.4;
    }

    .nav-menu-list,
    .nav-menu-sublist {
        display: grid;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav-menu-list--fabrics {
        gap: 1.5rem;
    }

    .nav-menu-item,
    .nav-menu-list li {
        min-width: 0;
    }

    .nav-menu-sublist {
        display: flex;
        flex-flow: row wrap;
        align-items: baseline;
        column-gap: 1rem;
    }

    .nav-menu-link {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        min-height: 2rem;
        padding-block: 0.25rem;
        box-sizing: border-box;
        color: var(--the-white);
        font-size: var(--fs-md);
        line-height: 1.3;
        text-decoration: none;
        overflow-wrap: anywhere;
        transition: color 300ms var(--out), background-size 300ms var(--out);

        &:hover,
        &:focus-visible {
            color: var(--super-white);
        }

        &:focus-visible {
            outline: 2px solid var(--the-white);
            outline-offset: 3px;
            box-shadow: none;
        }

        &[aria-current="page"] {
            color: var(--yellow);
            background-size: 100% 0.075em;
        }
    }

    .nav-menu-link--fabric {
        color: var(--grey);
        font-size: var(--fs-xs);
        line-height: 1.4;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .nav-menu-link--kitchen {
        font-size: clamp(1.4rem, 1.2rem + 0.4vw, 1.65rem);
        letter-spacing: -0.025em;
    }

    .nav-menu-list--pages {
        gap: 0.5rem;
    }

    .nav-menu-list--pages .nav-menu-link {
        font-size: 1.2rem;
    }

    .nav-menu-meta {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.5rem 1rem;
        margin: 0;
        padding-top: 1rem;
        border-top: 1px solid var(--opaque-white);
        color: var(--grey);
        font-size: var(--fs-sm);
        line-height: 1.4;

        a:hover,
        a:focus-visible {
            color: var(--super-white);
        }
    }

    &.is-open {
        .nav-menu-toggle-shell {
            background: var(--jet-black);
            color: var(--super-white);
            border-radius: var(--space-xxs) var(--space-xxs) 0 0;
        }

        .nav-menu-toggle {
            background-size: 100% 1px;
        }

        /* Keyframes replay when the panel leaves display:none. */
        .nav-menu-panel {
            animation: nav-menu-enter 240ms var(--out) both;
        }

        .nav-menu-label,
        .nav-menu-link--fabric,
        .nav-menu-sublist > li,
        .nav-menu-list--pages > li,
        .nav-menu-meta {
            animation: nav-menu-enter 440ms var(--out) both;
            animation-delay: calc(50ms + min(var(--menu-stagger-index, 0), 8) * 55ms + min(var(--kitchen-stagger-index, 0), 5) * 30ms);
        }

        /* Keyboard focus must be visible even during the entrance sequence. */
        .nav-menu-link--fabric:focus-visible,
        .nav-menu-sublist > li:focus-within,
        .nav-menu-list--pages > li:focus-within,
        .nav-menu-meta:focus-within {
            animation: none;
        }
    }
}

@keyframes nav-menu-enter {
    from {
        opacity: 0;
        transform: translateY(0.6rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 64rem) {
    .nav-menu .nav-menu-panel {
        width: 40rem;
        padding: 1.5rem;
    }
}

@media (max-width: 48rem) {
    .nav-menu {
        .nav-menu-toggle-shell {
            position: relative;
            z-index: 1300;
            justify-content: flex-start;
            padding: 0;
        }

        .nav-menu-panel {
            position: fixed;
            inset: 0;
            width: 100%;
            max-width: none;
            height: 100dvh;
            padding: calc(var(--space-sm) * 2 + var(--tap-target-size)) max(1.5rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
            border-radius: 0;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .nav-menu-panel__content {
            grid-template-columns: minmax(0, 1fr);
            gap: 2rem;
        }

        .nav-menu-label {
            margin-bottom: 1rem;
        }

        .nav-menu-list--fabrics {
            gap: 1.25rem;
        }

        .nav-menu-link {
            min-height: var(--tap-target-size);
        }

        .nav-menu-list--pages {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.25rem 1rem;
        }

        .nav-menu-list--pages .nav-menu-link {
            font-size: var(--fs-sm);
        }

        .nav-menu-list--pages > li:last-child:nth-child(odd) {
            grid-column: 1 / -1;
        }

        &.is-open .nav-menu-toggle-shell {
            background: transparent;
            color: inherit;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-menu.is-open {
        .nav-menu-panel,
        .nav-menu-label,
        .nav-menu-link--fabric,
        .nav-menu-sublist > li,
        .nav-menu-list--pages > li,
        .nav-menu-meta {
            animation: none;
        }
    }

    .nav-menu .nav-menu-link,
    .nav-menu .nav-menu-meta a {
        transition: none;
    }
}