/* NavMenu owns state, active routes, the responsive drawer, and keyboard behavior. */
.topbar,
.topbar.is-scrolled,
.topbar.nav-is-open {
    background: var(--motif-nav-background);
    border-bottom: 1px solid var(--motif-nav-border);
    box-shadow: none;
}

.topbar__brand {
    font-family: var(--motif-font-special);
    font-weight: 500;
    font-size: calc(var(--motif-nav-type) * 1.65);
    letter-spacing: var(--motif-nav-brand-tracking);
    column-gap: 0.05em;
}

.topbar__brand::after {
    content: ".";
    color: var(--motif-color-accent-primary);
}

.topbar nav a {
    font-size: var(--motif-nav-type);
    letter-spacing: var(--motif-nav-tracking);
}

.topbar.is-scrolled .topbar__brand,
.topbar.nav-is-open .topbar__brand,
.topbar.is-scrolled .topbar__toggle,
.topbar.nav-is-open .topbar__toggle {
    color: var(--motif-nav-wordmark);
}

/* The selected border already marks language state; dimming the other label loses contrast on paper. */
.topbar .topbar__locale-option {
    opacity: 1;
}