#header {
    background:linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0.9));
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    display:flex;
    justify-content: center;
    width:100vw;
    position:fixed;
    top:0;
    left:0;
    box-shadow:var(--shadow-2);
    z-index:999;
}

#header .skip-to-content {
    position:absolute;
    top:0.5rem;
    color:var(--grey);
    background:var(--gold);
    padding:0.5rem 1rem;
    box-shadow: var(--shadow);
    border-radius: 1rem;
    z-index:1000;
    transform:translateY(calc(-100% - 0.5rem));
    transition:transform 0.3s ease-out;
}

#header .skip-to-content:focus {
    transform:translateY(0%);
}

#header .header-cont {
    display:flex;
    padding:1rem;
    align-items: center;
    width:min(100vw, var(--max-width));
    padding-inline:2rem;
}

#header .logo {
    margin-right:auto;
}

#header .logo svg {
    height:3rem;
    filter: drop-shadow( var(--shadow) );
    -webkit-filter: drop-shadow( var(--shadow) );
    transition:filter 0.3s ease-out;
}

#header .logo:hover svg,
#header .logo:focus svg {
    filter: drop-shadow( var(--gold-glow) );
    -webkit-filter: drop-shadow( var(--gold-glow) );
}

#header .link {
    color:white;
    text-shadow: var(--shadow);
    transition:text-shadow 0.3s ease-out;
    text-decoration: none;
}

#header .link:hover,
#header .link:focus {
    cursor:pointer;
}

#header .link.cta {
    background-image:var(--gold);
    padding:.25rem .5rem;
    border-radius:0.25rem;
    color:#232428;
    font-weight:500;
    box-shadow: var(--shadow);
    text-shadow: none;
    transition:box-shadow 0.3s ease-out;
}

#header .link:not(.cta):hover,
#header .link:not(.cta):focus {
    text-shadow: var(--gold-glow-2);
}

#header .link.cta:hover,
#header .link.cta:focus {
    box-shadow: var(--gold-glow);
}

#header #nav {
    display:flex;
    align-items: center;
    gap:1rem;
}

#header .contact {
    margin-left:auto;
    display:flex;
    gap:1rem;
}


#header .ham-menu {
    display:none;
}

@media screen and (width < 50rem) {
    #header .ham-menu {
        display:block;
        z-index:1;
    }
    #header .ham-menu label:hover,
    #header .ham-menu label:focus {
        cursor: pointer;
    }
    #header .ham-menu #ham-menu {
        appearance: none;
        position:absolute;
        top:-10vh;
    }
    #header .ham-menu label {
        display:grid;
        align-items: center;
        gap:0.5rem;
    }
    #header .ham-menu .ham-tile {
        width:2rem;
        height:0.25rem;
        background:white;
        border-radius: 0.1rem;
    }
    #header .ham-menu .ham-tile:nth-child(2),
    #header .ham-menu .ham-tile:nth-child(3) {
        grid-area: 2 / 1;
    }
    #header .ham-menu .ham-tile {
        transition:transform 0.3s cubic-bezier(.2,.49,.59,.94);
    }

    #header #ham-menu:checked ~ label .ham-tile:nth-child(1),
    #header #ham-menu:checked ~ label .ham-tile:nth-child(4) {
        transform: scale(0%);
    }
    #header #ham-menu:checked ~ label .ham-tile:nth-child(2) {
        transform: rotate(45deg);
    }
    #header #ham-menu:checked ~ label .ham-tile:nth-child(3) {
        transform: rotate(-45deg);
    }



    #header nav:has(~.ham-menu #ham-menu:checked),
    #header .ham-menu:has(#ham-menu:checked) ~ .contact {
        left:0;
    }

    #header .contact {
        position: absolute;
        top: calc(100svh - 3rem);
        left: 100vw;
        transition: left 0.5s cubic-bezier(.2,.49,.59,.94);
        display: flex;
        margin: 0 0 1rem 0;
        align-items: center;
        gap: 0.5rem;
        width: 100vw;
        justify-content: center;
    }
    #header nav {
        position:absolute;
        top:0;
        left:100vw;
        transition: left 0.5s cubic-bezier(.2,.49,.59,.94);
        width:100vw;
        height:100svh;

        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background:rgba(0,0,0,0.85);
        backdrop-filter: blur(1rem);
        -webkit-backdrop-filter: blur(1rem);
    }
}