:root {
    --one-ink: #191919;
    --one-paper: #f5f7f8;
    --one-surface: #fff;
    --one-muted: #58636b;
    --one-line: #dfe5e8;
    --one-font: 'Inter Variable', system-ui, sans-serif;
    --one-heading: 'Montserrat Variable', system-ui, sans-serif;
    --one-control-radius: 10px;
    --one-card-radius: 16px;
    --one-width: 1280px;
}

.brand.one-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: var(--one-logo-width, 176px);
    min-height: 44px;
    max-width: 100%;
    line-height: 1;
    font-style: normal;
    text-decoration: none;
}

.one-brand > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.one-brand > .brand-inverse {
    display: none;
}

.one-family {
    display: flex;
    align-items: center;
    gap: 12px 24px;
    flex-wrap: wrap;
    padding-block: 20px;
    border-top: 1px solid var(--one-line);
    color: var(--one-muted);
    font: 400 12px/1.6 var(--one-font);
}

.one-family > span {
    margin-right: auto;
}

.one-family a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 7px;
    color: var(--one-ink);
    font-weight: 600;
    text-decoration: none;
}

.one-family a::after {
    content: '↗';
    color: var(--one-accent);
}

.one-family a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 700px) {
    .one-family {
        gap: 4px 20px;
        padding-block: 16px;
    }

    .one-family > span {
        flex-basis: 100%;
    }
}