@media screen and (max-width:1299px){

    body.open{
        height:100vh;
        /* overflow-y:hidden; */
    }

    body.open header, body.open header:before{
        height:100%;
    }

    body.small #navCtl{
        top:3rem
    }

    #mainNav{
        width:calc(100% - 2rem);
        text-align:center;
        transform:translateY(-100%);
        top:0;
        transition:top var(--tt), transform var(--tt);
    }

    body.open #mainNav{
        transform:translateY(-50%);
        top:calc(50% + 6rem);
    }

    body.small.open #mainNav{
        top:calc(50% + 2.5rem);
    }

    #mainNav ul{
        flex-direction:column;
    }

    #navCtl{
        position:absolute;
        transform:translateY(-50%);
        right:1rem;
        top:6rem;
        width:5.265rem;
        height:1.6rem;
        transition:top var(--tt);

    }

    #navCtl button{
        background-color:transparent;
        border:none;
        color:#fff;
        cursor:pointer;
        width:100%;
        height:100%;
    }

    #sign{
        position:absolute;
        transform:translateY(-50%);
        height:1.6rem;
        width:1.4rem;

        top:50%;
        right:0;
    }

    #navCtl button{
        position:absolute;
        inset:0;
        padding:0;
    }

    #navCtl button > span{
        position:absolute;
        transform:translateY(-50%);
        top:50%;
        right:-20vw;
        /* font-size:.8rem; */
        transition:right var(--tt), opacity var(--tt);
        opacity:0;
    }

    body.open #navCtl button > span.close,
    body:not(.open) #navCtl button > span.open{
        right:2rem;
        opacity:1;
    }

}

@media screen and (min-width:1300px){

    #mainNav{
        transition: top var(--tt);
        top:6.5rem;
        right:1rem;
    }

    body.small #mainNav{
        top:3rem;
    }

    #navCtl{
        display:none;
    }

    #mainNav ul :where(a, strong){
        position:relative;
    }

    #mainNav ul :where(a, strong):before{
        content:"";
        display:block;
        position:absolute;
        bottom:-.25rem;
        left:0;
        height:1px;
        width:0;
        background-color:#fff;
        transition:width var(--tt);
    }

    #mainNav ul a:is(:hover, :focus):before{
        width:100%;
    }
}