header {
    --animation-duration: .25s;

    grid-area: header;

    position: fixed;

    padding-inline: initial;

    line-height: 1;

    backdrop-filter: brightness(1.05) blur(3px);
    box-shadow: 0px 0px 1rem 0px #0007;

    z-index: 10;
}

@media (prefers-color-scheme: dark) {
	header {
        backdrop-filter: brightness(.8) blur(3px);
        box-shadow: 0px 0px 1rem 0px #000a;
	}
}

@media (min-width: 1000px) {
    header {
        max-width: initial;
        width: 100%;

        font-size: 1.1rem;
    }
}


.header-wrapper {
    --transition-duration: .5s;

    display: grid;
    grid-template-columns: 100%;
    justify-content: space-between;
    
    padding-inline: var(--content-padding);
    max-height: 100vh;
    max-height: 100dvh;
    width: 100%;

    box-sizing: border-box;
    overflow-y: scroll;
}

@media (min-width: 1000px) {
    .header-wrapper {
        grid-template-columns: auto 1fr auto;

        margin-inline: auto;
        max-width: var(--content-width);
        width: min(100%, var(--content-width));

        overflow-y: visible;
    }
}

header+* {
    margin-top: 4rem;
}

@media (min-width: 1000px) {
    header+* {
        margin-top: 4.4rem;
    }
}

nav {
    padding-inline: .67em;

    line-height: 1;
    text-align: center;
}

nav li {
    display: inline-block;
}

nav a {
    display: inline-block;
    
    padding: .67em 1em;
}

header a[href="/"] {
    display: block;
    
    position: relative;

    padding-block: 1.5em;

    font-family: var(--secondary-font);
    text-transform: lowercase;

    opacity: .67;
}

header a[href="/"]::after {
    content: '';

    position: absolute;

    left: 0;
    bottom: calc(1.1em + 1px);

    height: 2px;
    width: 100%;

    background-color: currentColor;

    transition: width var(--animation-duration);
}

@media (prefers-reduced-motion: no-preference) {
    header a[href="/"]:focus::after,
    header a[href="/"]:hover::after {
        right: 0;
        left: unset;

        width: 0;

        transition: width var(--animation-duration), right var(--animation-duration) 0s;
    }
}

header .title {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-content: center;
}

@media (min-width: 1000px) {
    header .title {
        display: initial;
        grid-template-columns: unset;
    }

    .spacer {
        display: none;
    }
}

.hamburger-menu {
    aspect-ratio: 1/1;
    border: none;
    height: 100%;

    background: none;
    font-size: 1.5em;
    text-align: center;

    cursor: pointer;
}

@media (min-width: 1000px) {
    .hamburger-menu {
        display: none;
    }
}

header nav,
header .social-wrapper {
    display: grid;
    grid-template-rows: 0fr;

    opacity: 0;
    transition: grid-template-rows var(--transition-duration), opacity var(--transition-duration);
}

header :has(a:focus) nav,
header .open nav,
header :has(a:focus) .social-wrapper,
header .open .social-wrapper {
    grid-template-rows: 1fr;

    opacity: 1;
    transition: grid-template-rows var(--transition-duration), opacity var(--transition-duration) calc(.5 * var(--transition-duration));
}

header nav>*,
header .social-wrapper>* {
    overflow: hidden;
}

@media (min-width: 1000px) {
    header nav,
    header .social-wrapper {
        display: initial;

        opacity: 1;
        transition: none;
    }

    header :has(a:focus) nav,
    header .open nav,
    header :has(a:focus) .social-wrapper,
    header .open .social-wrapper {
        transition: none;
    }

    header nav>*,
    header .social-wrapper>* {
        overflow: visible;
    }
}

header nav,
header .social-wrapper {
    align-content: center;
}

header nav {
    padding-inline: .75em;
}

@media (min-width: 1000px) {
    header nav {
        padding-left: 2.25em;
        
        text-align: left;
    }
}

header nav li {
    display: block;
}

@media (min-width: 1000px) {
    header nav li {
        display: inline-block;
    }
}

header nav a {
    position: relative;

    padding: 1.5em .75em;
}

header nav a::after {
    content: '';

    position: absolute;

    right: .75em;
    bottom: calc(1.1em + 1px);

    height: 2px;
    width: 0;

    background-color: currentColor;

    transition: width var(--animation-duration), right var(--animation-duration) 0s;
}

header nav a:focus:after,
header nav a:hover:after {
    left: .75em;

    width: calc(100% - 1.5em);

    transition: width var(--animation-duration);
}

header .social {
    transition: padding-block var(--transition-duration);
}

header :has(a:focus) .social,
header .open .social {
    padding-block: 1.5em;
}

@media (min-width: 1000px) {
    header .social {
        height: initial;
        padding-block: 0 !important;

        transition: none;
    }
}

header .social li {
    margin-left: .5em;

    font-size: 1.5em;
}