body #main .sv-article-with-backdrop {
    isolation: isolate;
    background-color: #090909;
}

body #main .sv-article-backdrop {
    position: fixed;
    inset: 0 0 auto auto;
    z-index: -1;
    width: min(84vw, 1100px);
    height: min(82vh, 800px);
    overflow: hidden;
    pointer-events: none;
    opacity: .49;
    mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 0%, rgba(0, 0, 0, .65) 34%, transparent 100%);
}

body #main .sv-article-backdrop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top right;
    filter: blur(85px) brightness(.82) saturate(.95);
    transform: scale(1.35);
    transform-origin: top right;
}

@media (max-width: 760px) {
    body #main .sv-article-backdrop {
        width: 100vw;
        height: 58vh;
    }

    body #main .sv-article-backdrop img {
        filter: blur(62px) brightness(.82) saturate(.95);
    }
}

@media (min-width: 761px) {
    body #main .sv-article {
        --article-row-max: 760px;
    }

    body #main main.sv-article > :is(.sv-article-lead, .sv-reading-layout) {
        box-sizing: border-box;
        width: 100% !important;
        max-width: var(--article-row-max) !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }

    body #main main.sv-article .sv-article-lead > .sv-article-introduction {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }
}

@media (min-width: 901px) {
    body #main .sv-article {
        --article-row-max: 1400px;
    }
}

@media (min-width: 761px) {
    body #main main.sv-article > .sv-reading-layout {
        grid-template-columns: 240px minmax(0, 740px) minmax(0, 1fr) !important;
        column-gap: clamp(44px, 7vw, 110px) !important;
    }

    body #main main.sv-article .sv-reading-aside {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        margin-inline: 0 !important;
        padding-inline: 0 24px !important;
        justify-self: start !important;
        overflow-wrap: anywhere;
    }

    body #main main.sv-article .sv-reading-body {
        width: 100% !important;
        min-width: 0;
    }
}

@media (min-width: 761px) {
    body #main main.sv-article > .sv-article-lead {
        padding-top: 22px !important;
    }

    body #main .sv-article-meta-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: center;
        gap: 16px;
    }

    body #main .sv-article-meta-row > .adhder-breadcrumbs {
        margin-bottom: 0;
    }

    body #main .sv-article-desktop-byline,
    body #main .sv-article-desktop-byline > .adhder-posted-details {
        display: flex;
        align-items: baseline;
        gap: 12px;
        white-space: nowrap;
        font-size: 13px;
        line-height: 1.4;
    }

    body #main .sv-article-desktop-byline {
        color: #aaa;
    }
}

@media (max-width: 760px) {
    body #main .sv-article-desktop-byline {
        display: none;
    }
}

/* Use the Knowledge Hub typeface throughout the article. */
body #main main.sv-article,
body #main main.sv-article :where(h1, h2, h3, h4, p, a, li, span, time, blockquote) {
    font-family: Switzer, Arial, sans-serif;
}

body #main main.sv-article .sv-article-introduction > h1 {
    font-weight: 600 !important;
    letter-spacing: -.065em !important;
}
