:root {
    --navmenu-img-h: 42px;
}

.topbar {
    background: color-mix(in oklch, white 80%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--motif-color-text-ink) 10%, transparent);
    backdrop-filter: blur(16px) saturate(1.08);
    transition:
        background-color var(--motif-motion-duration-medium) var(--motif-motion-ease-standard),
        box-shadow var(--motif-motion-duration-medium) var(--motif-motion-ease-standard);
}

/* The bar stays clean over the hero and only gains a hairline lift on scroll. */
.topbar.is-scrolled,
.topbar.nav-is-open {
    background: color-mix(in oklch, white 93%, transparent);
    box-shadow: 0 10px 30px color-mix(in oklch, var(--motif-color-text-ink) 8%, transparent);
}

.topbar__brand {
    overflow: visible;
}

/* Logo PNG is already transparent; it sits directly on the light top bar with
   no plate so the wordmark reads as part of the bar, not a pasted-on box. */
.topbar__brand img {
    width: auto;
    max-width: min(220px, 58vw);
    height: 42px;
    object-fit: contain;
}

.topbar__brand span {
    display: none;
    color: var(--motif-color-text-ink);
    font-weight: 900;
    letter-spacing: 0;
}

.topbar nav a {
    border-radius: var(--motif-radius-control);
    font-family: var(--motif-font-ui);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--motif-color-text-secondary);
    transition:
        color var(--motif-motion-duration-fast) var(--motif-motion-ease-standard),
        background-color var(--motif-motion-duration-fast) var(--motif-motion-ease-standard);
}

.topbar nav a:hover {
    color: var(--motif-color-text-ink);
    background: color-mix(in oklch, var(--motif-color-accent-primary) 9%, transparent);
}

.topbar nav a.active {
    color: var(--motif-color-accent-primary);
    background: color-mix(in oklch, var(--motif-color-accent-primary) 11%, transparent);
}

@media (max-width: 640px) {
    :root {
        --navmenu-img-h: 34px;
    }

    .topbar__brand img {
        max-width: min(174px, 48vw);
        height: 34px;
    }
}