#site-nav {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: var(--z-index-highest);
    isolation: isolate;
    --_line-h: 1.5rem;
}

#site-nav::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    background: var(--red);
    height: var(--_line-h);
}

#site-nav .menu {
    display: flex;
    align-items: center;
    justify-content: end;
    position: relative;
    z-index: 1;
    padding-top: var(--_line-h);
    margin-inline: auto;
    
}

#site-nav .menu li {
    display: flex;
}

#site-nav .menu a {
    text-decoration: none;
    color: var(--white);
    font-size: 1rem;
    font-family: var(--font-adobe);
    text-transform: uppercase;
    font-weight: var(--fw-600);
    line-height: 130%;
    letter-spacing: 0.2em;
    background: var(--red);

}

@media only screen and (min-width : 0) and (max-width : 960px) {
    #site-nav .menu {
        width: calc(min(100%, 440px) - 3rem);
    }
    #site-nav .menu a {
        padding: 1.3rem 1.1rem;
    }
}

@media only screen and (min-width : 961px) {
    #site-nav .menu a {
        padding: 1.1rem .8rem 1rem .8rem;
    }

    #site-nav .menu {
        width: calc(min(100%, 1280px) - 2rem);
    }
}