:root {
    --site-header-height: calc(4.45rem + 1px);
}

.header-frame {
    position: relative;
    z-index: 1;
    background: rgb(17 21 27 / 68%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
    border-bottom: 1px solid rgb(52 60 72 / 70%);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: min(100%, var(--content-width));
    margin: 0 auto;
    padding: 1.4rem clamp(1.25rem, 5vw, 4rem);
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    text-decoration: none;
}

.wordmark {
    margin: 0;
    font-family: "DM Serif Display", serif;
    font-size: 1.65rem;
    line-height: 1;
    letter-spacing: -0.04em;
}

.brace {
    color: var(--violet);
}

.wordmark-muted,
.company {
    color: var(--muted);
}

.company,
.site-nav {
    font-family: "Fira Code", monospace;
}

.company {
    font-size: 0.78rem;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.85rem;
}

.site-nav a {
    text-decoration: none;
}

.site-nav a:hover {
    color: var(--violet);
}

@media (min-width: 800px) {
    html {
        scroll-padding-top: calc(var(--site-header-height) - 1px);
    }

    .header-frame {
        position: sticky;
        top: 0;
        z-index: 50;
    }
}

@media (max-width: 560px) {
    .site-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .company {
        display: none;
    }

    .site-nav {
        gap: 1rem;
    }
}