/* Brand mark, header, navigation. */
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand__mark { width: 34px; height: 34px; }
.brand__halo { stroke: var(--halo, var(--paper)); }
.brand__word { font-family: "Inter", system-ui, sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.brand__ram { font-weight: 400; }
.brand__x { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

.site-header {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
    border-block-end: 1px solid var(--line);
}
.site-header__bar { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }

.site-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.site-nav > a:not(.button) {
    padding: 8px 14px; border-radius: 10px; font-size: .95rem; font-weight: 500; color: var(--ink-2);
    transition: background-color .18s var(--ease), color .18s var(--ease);
}
.site-nav > a:not(.button):hover { background: var(--surface-2); color: var(--ink); }
.site-nav > a[aria-current="page"] { color: var(--ink); font-weight: 650; background: var(--surface-2); }
.site-nav__cta { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 4px; }
.header-chip {
    padding: 7px 12px; border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--ink-2);
    transition: background-color .18s var(--ease);
}
.header-chip:hover { background: var(--surface-2); color: var(--ink); }
.site-header__cta { margin-inline-start: 6px; }

/* theme toggle shows the icon of the theme you will switch to */
.icon-moon, .icon-sun, .icon-open, .icon-close { display: inline-flex; }
.icon-sun { display: none; }
html[data-theme="dark"] .icon-moon { display: none; }
html[data-theme="dark"] .icon-sun { display: inline-flex; }

.nav-toggle { display: none; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: inline-flex; }

@media (max-width: 1100px) {
    .site-header__cta { display: none; }
}

@media (max-width: 960px) {
    .site-header__bar { gap: 8px; }
    .site-header__actions { margin-inline-start: auto; }
    .nav-toggle { display: inline-grid; }

    .site-nav {
        position: absolute; inset-inline: 0; top: 100%; margin: 0;
        display: none; flex-direction: column; align-items: stretch; gap: 2px;
        padding: 12px var(--gutter) 22px;
        background: var(--paper); border-block-end: 1px solid var(--line);
        box-shadow: 0 24px 40px -24px rgba(11, 18, 48, .35);
    }
    .site-nav.is-open { display: flex; }
    .site-nav > a:not(.button) { padding: 14px 12px; font-size: 1.05rem; border-radius: 10px; }
    .site-nav__cta { display: inline-flex; margin-block-start: 10px; }
}

@media (max-width: 380px) {
    .brand__word { font-size: 1.25rem; }
    .brand__mark { width: 30px; height: 30px; }
    .icon-btn { width: 38px; height: 38px; }
}