nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(.7rem + env(safe-area-inset-top, 0px)) clamp(1rem, 4vw, 3rem) .7rem;
    background: linear-gradient(var(--deep), transparent)
}

nav b {
    font: 800 1.4rem var(--d);
    color: var(--gold)
}

nav div {
    display: flex;
    gap: 1.4rem
}

nav a {
    text-decoration: none;
    font-size: .9rem;
    color: var(--silver)
}

nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    transition: background .3s, box-shadow .3s
}

nav.sc {
    background: rgba(251, 248, 241, .95);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px #0007
}

.lg {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    justify-self: start
}

nav b {
    color: #fff;
    font: 800 1.05rem var(--d)
}

.mn {
    justify-self: center;
    display: flex;
    gap: 1.7rem
}

.mn a {
    font-weight: 500;
    font-size: .95rem
}

.mn a:hover {
    color: var(--gold)
}

.nc {
    justify-self: end;
    padding: .6rem 1.2rem
}

.mb {
    display: none
}

@media(max-width:900px) {
    nav {
        grid-template-columns: 1fr auto auto
    }

    .mb {
        display: block;
        background: none;
        border: 2px solid var(--ice);
        color: #fff;
        border-radius: 10px;
        font-size: 1.3rem;
        padding: .1rem .7rem;
        cursor: pointer
    }

    .mn {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--deep);
        padding: .4rem 1.2rem 1rem;
        display: none
    }

    .mn a {
        padding: .8rem 0;
        border-bottom: 1px solid #ffffff1f
    }

    nav.open .mn {
        display: flex
    }

    nav.open {
        background: var(--deep)
    }
}

@media(max-width:480px) {
    nav b {
        display: none
    }
}

nav {
    background: linear-gradient(#fbf8f1, #fbf8f100)
}

nav.sc {
    background: rgba(251, 248, 241, .96);
    box-shadow: 0 6px 24px #1f334522
}

nav b,
.mb {
    color: var(--ink)
}

.mn a {
    position: relative;
    transition: color .2s ease
}

.mn a:not(.btn)::after {
    position: absolute;
    right: 0;
    bottom: -.15rem;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease
}

.mn a:not(.btn):hover::after,
.mn a[aria-current="location"]::after {
    transform: scaleX(1)
}

.mn a[aria-current="location"] {
    color: var(--deep);
    font-weight: 800
}

@media(max-width:900px) {
    .mn a:not(.btn)::after {
        right: auto;
        bottom: .35rem;
        width: 36px
    }
}