.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(17, 16, 25, 0.84);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar {
    max-width: var(--max);
    height: 76px;
    margin: auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: BGaramond, 'Times New Roman', Times, sans-serif;
    font-size: 20px;
}

.brand-mark,
.footer-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #171522;
    font-weight: 900;
}

.brand-dot {
    color: var(--primary);
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: var(--muted);
    font-size: 15px;
    transition: 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text);
}