/* Geometry is available in the head before the logo can paint. */
.twoip-brand-logo {
    display: block;
    width: clamp(200px, 15.3vw, 220px);
    max-width: 100%;
    height: auto;
    aspect-ratio: 1530 / 496;
}
.twoip-brand-logo__dark {
    display: none;
}
:root[data-theme="dark"] .twoip-brand-logo__light {
    display: none;
}
:root[data-theme="dark"] .twoip-brand-logo__dark {
    display: block;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .twoip-brand-logo__light {
        display: none;
    }
    :root:not([data-theme]) .twoip-brand-logo__dark {
        display: block;
    }
}
.twoip-error__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
@media (max-width: 1099px) {
    .twoip-brand-logo {
        width: 150px;
    }
}

@media (min-width: 1100px) {
    /* The shared header contract owns its slot; branding owns the artwork size. */
    .t3-header .twoip-brand-logo {
        width: var(--twoip-header-logo-width);
    }

}

@media (max-width: 767px) {
    .t3-header .logo-image {
        container-type: inline-size;
    }
    .t3-header .twoip-brand-logo {
        /* Reference artwork occupies about 26% of the mobile header width. */
        width: clamp(104px, 28vw, 120px);
    }
}

/* A direct logo link shares the same gutter-free slot as the normal logo wrapper. */
@media (min-width: 1100px) { body .t3-header .twoip-header-row > .logo-image { padding: 0; } }