.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-brand-logo-stack {
    display: inline-grid;
    place-items: center;
}

.site-brand-logo,
.site-brand-logo-stack .site-brand-logo {
    width: auto;
    max-width: 168px;
    height: 48px;
    object-fit: contain;
}

.site-brand-logo-stack .site-brand-logo {
    grid-area: 1 / 1;
}

.site-brand-logo--dark {
    display: none;
}

html[data-site-theme="dark"] .site-brand-logo--light {
    display: none;
}

html[data-site-theme="dark"] .site-brand-logo--dark {
    display: block;
}

.site-footer__brand {
    display: inline-flex;
    align-items: center;
}

.site-footer__logo {
    display: block;
    width: auto;
    max-width: 180px;
    height: 56px;
    object-fit: contain;
}

.site-theme-toggle.site-control-button {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.site-theme-toggle.site-control-button:hover,
.site-theme-toggle.site-control-button:focus-visible {
    border: 0;
    background: var(--site-surface-2);
    box-shadow: none;
}

@media (max-width: 640px) {
    .site-brand-logo,
    .site-brand-logo-stack .site-brand-logo {
        max-width: 124px;
        height: 38px;
    }

    .site-footer__logo {
        max-width: 150px;
        height: 46px;
    }
}