/* Curious Creature: keep the approved artwork and adapt the wordmark to each theme. */
.brand_lockup {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 196px;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 1;
    color: var(--textHeading);
    line-height: 1;
}

.brand_creature {
    display: block;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    object-fit: contain;
    transition: transform var(--transition-smooth);
}

.brand_wordmark {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.brand_wordmark img {
    display: block;
    width: 100%;
    height: auto;
}

[data-theme="dark"] .brand_wordmark img {
    filter: brightness(0) invert(1);
}

/* The image remains a fallback when CSS masks are unavailable. Its natural
   dimensions also reserve the exact aspect ratio for the masked wordmark. */
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
    .brand_wordmark {
        background-color: currentColor;
        -webkit-mask-image: url("../images/brand/curious-creature-wordmark.b6b63b19fa49.png");
        mask-image: url("../images/brand/curious-creature-wordmark.b6b63b19fa49.png");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .brand_wordmark img {
        opacity: 0;
    }
}

.brand_lockup:hover .brand_creature {
    transform: rotate(-5deg);
}

.brand_lockup:focus-visible {
    outline: 2px solid var(--colorAccent);
    outline-offset: 6px;
    border-radius: 4px;
}

.footer_brand_logo.brand_lockup {
    width: 224px;
    gap: 10px;
}

.footer_brand_logo .brand_creature {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
}

.side_navigation_header {
    gap: 12px;
}

.drawer_logo.brand_lockup {
    width: 190px;
}

.side_navigation_header .drawer_close_btn {
    flex-shrink: 0;
}

@media screen and (max-width: 640px) {
    .toolbar .brand_lockup {
        width: 176px;
        gap: 6px;
    }

    .toolbar .brand_creature {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand_creature {
        transition: none;
    }

    .brand_lockup:hover .brand_creature {
        transform: none;
    }
}