/* Owner-supplied transparent Joker artwork, 1448 x 1086.
   The separate emblem and existing wordmark use unchanged owner PNGs. */
body .de-header .de-logo-mark,
body[data-de-theme] .de-header .de-logo-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}
.de-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("branding/joker-emblem.png");
    background-repeat: no-repeat;
    /* Complete transparent 1339 x 1174 emblem, with its original proportions. */
    background-size: contain;
    background-position: center;
}
body .de-header .de-brand,
body[data-de-theme] .de-header .de-brand {
    position: relative;
    flex: 0 0 176px;
    width: 176px;
    height: 43.795px;
    min-width: 0;
    margin-right: auto;
    background-color: transparent;
    background-blend-mode: normal;
    background-image: url("branding/devilish-logo-splash.png");
    background-repeat: no-repeat;
    /* Wordmark + subtitle viewport: x=95, y=674, width=1290, height=321. */
    background-size: 112.248062% 338.317757%;
    background-position: 60.126582% 88.104575%;
}
body .de-header .de-brand-name,
body .de-header .de-brand-tagline,
body[data-de-theme] .de-header .de-brand-name,
body[data-de-theme] .de-header .de-brand-tagline {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 630px) {
    body .de-header .de-logo-mark,
    body[data-de-theme] .de-header .de-logo-mark {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }
    body .de-header .de-brand,
    body[data-de-theme] .de-header .de-brand {
        flex-basis: 140px;
        width: 140px;
        height: 34.837px;
    }
}
@media (forced-colors: active) {
    body .de-header .de-brand,
    body[data-de-theme] .de-header .de-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-image: none;
    }
    body .de-header .de-brand-name,
    body .de-header .de-brand-tagline,
    body[data-de-theme] .de-header .de-brand-name,
    body[data-de-theme] .de-header .de-brand-tagline {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        color: CanvasText;
    }
    body .de-header .de-brand-name { font-size: 23px; line-height: 1; }
    body .de-header .de-brand-tagline { font-size: 6px; letter-spacing: .8px; margin-top: 4px; }
}