/*
 * Brand lockup — the logo mark left of the text wordmark, linked home.
 * Markup comes from templates/_brand.html (brand.lockup); linked by
 * brand.head_links(). Mark: 28px desktop / 24px phone; 48px (both) on the
 * compliance sign-in pages (--lg).
 */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ec-text, #111111);
    text-decoration: none;
    white-space: nowrap;
}
.brand-lockup:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.brand-mark { display: block; height: 28px; width: auto; flex-shrink: 0; }
.brand-name {
    font-family: var(--ec-font-serif, Georgia, 'Times New Roman', serif);
    font-size: 20px;
    line-height: 1.2;
    color: inherit;
}
.brand-lockup--lg { gap: 14px; }
.brand-lockup--lg .brand-mark { height: 48px; }
.brand-lockup--lg .brand-name { font-size: 26px; }
.brand-lockup--on-dark { color: #ffffff; }

@media (max-width: 599px) {
    .brand-lockup { gap: 8px; }
    .brand-mark { height: 24px; }
    .brand-lockup--lg { gap: 12px; }
    .brand-lockup--lg .brand-name { font-size: 22px; }
}