.site-brand-mark {
    display: block;
    width: auto;
    height: 41.08px;
    margin-top: -3.08px;
    flex: 0 0 auto;
    border-radius: 22%;
    object-fit: contain;
    object-position: center;
}

.site-brand-mark--sidebar {
    width: auto;
    height: 47.56px;
    margin-top: -3.56px;
}

.site-brand-mark--auth {
    width: auto;
    height: 60.53px;
    margin-top: -4.53px;
}

/* Canonical written lockup. The official S + star replaces only the initial
 * glyph; the remaining letters keep each surface's established typography. */
.studiverse-wordmark {
    position: relative;
    white-space: nowrap;
}

.studiverse-wordmark::before {
    content: "S";
    visibility: hidden;
}

.studiverse-wordmark__mark {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: auto;
    height: 1.384em;
    margin: 0;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    /* The taller SVG only reserves room for the detached star. These values
     * preserve the approved S size and position; the text never moves. */
    transform: translate(-0.30em, -65.8%);
}

.site-brand-mark--responsive {
    display: none;
}

body.tw-dashboard .site-brand-mark {
    margin-left: -4px;
}

body.tw-dashboard .dashboard-sidebar-logo .site-brand-mark {
    margin-left: -.65rem;
}

body.external-page .navbar .site-brand-mark {
    height: 47.56px;
    margin-top: -3.56px;
}

@media (max-width: 1200px) {
    body.external-page .navbar .site-brand-mark {
        height: 41.08px;
        margin-top: -3.08px;
    }
}

@media (max-width: 480px) {
    .site-brand-mark {
        width: auto;
        height: 36.75px;
        margin-top: -2.75px;
    }

    .site-brand-mark--auth {
        width: auto;
        height: 56.21px;
        margin-top: -4.21px;
    }

    body.external-page .navbar .site-brand-mark {
        height: 36.75px;
        margin-top: -2.75px;
    }
}

/* Duolingo-style responsive lockup: use the full wordmark while there is
 * enough room, then switch to the recognisable brand mark on compact headers. */
@media (max-width: 600px) {
    body.tw-dashboard .main-header a.logo > .logo-icon,
    body.tw-dashboard .main-header a.logo > .logo-text,
    body.tw-dashboard .mobile-menu a.logo > .logo-icon,
    body.tw-dashboard .mobile-menu a.logo > .logo-text {
        display: none !important;
    }

    body.tw-dashboard .main-header a.logo > .site-brand-mark--responsive,
    body.tw-dashboard .mobile-menu a.logo > .site-brand-mark--responsive {
        display: block !important;
        width: auto;
        height: 36.75px;
        margin: -2.75px 0 0;
    }
}

/* Public headers always use the written wordmark, including on phones. */
body.external-page .navbar a.logo > .site-brand-mark--responsive {
    display: none !important;
}