:root {
    --brand-magenta: #b477b3;
}

.hero h1 em {
    color: var(--brand-magenta);
}

.site-menu > a {
    white-space: nowrap;
}

@media (min-width: 801px) {
    .site-nav {
        justify-content: flex-start;
        gap: 0;
    }

    .site-nav > .site-brand {
        flex-shrink: 0;
    }

    .site-nav > .site-menu {
        margin-left: 32px;
    }
}