header.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 20px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.led {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-soft), 0 0 14px var(--accent);
    animation: pulse 3.2s ease-in-out infinite;
    flex: none;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

@media (prefers-reduced-motion: reduce) {
    .led {
        animation: none;
    }
}

nav.links {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 1em;
}

    nav.links a {
        text-decoration: none;
        color: var(--muted);
    }

        nav.links a:hover {
            color: var(--fg);
        }

        nav.links a.button, nav.links a.button:hover {
            color: white;
        }

            nav.links a.button.reverse, nav.links a.button.reverse:hover {
                color: #B45F00;
            }

@media (max-width: 720px) {
    nav.links a.opt {
        display: none;
    }

    nav.links {
        gap: 8px;
        width: 100%;
    }

        nav.links .button {
            flex: 1 1 0;
            min-width: 0;
            padding: 0 12px;
        }
}