/* ==========================================================
   BOXXHEAD GAMING
   FINAL PUBLIC MOBILE + HEADER CONSISTENCY
   ========================================================== */

:root {
    --bxm-red: #e31616;
    --bxm-red-hot: #ff2929;
    --bxm-bg: #080808;
    --bxm-panel: #101010;
    --bxm-line: rgba(255,255,255,.10);
    --bxm-muted: rgba(255,255,255,.64);
}


/* ==========================================================
   GLOBAL PUBLIC SAFETY
========================================================== */

html {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

main {
    min-width: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ==========================================================
   SHARED HEADER
========================================================== */

.bxv7-header,
.bx-public-header,
.boxx-public-header,
.site-header {
    position: relative;
    z-index: 100;
}

.bxv7-header a,
.bx-public-header a,
.boxx-public-header a {
    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   NAVIGATION
========================================================== */

.bxv7-nav,
.bx-public-nav,
.boxx-public-nav {
    min-width: 0;
}

.bxv7-nav a,
.bx-public-nav a,
.boxx-public-nav a {
    white-space: nowrap;
}

.bxv7-topicbar,
.bx-topic-bar,
.boxx-topic-bar {
    scrollbar-width: none;
}

.bxv7-topicbar::-webkit-scrollbar,
.bx-topic-bar::-webkit-scrollbar,
.boxx-topic-bar::-webkit-scrollbar {
    display: none;
}


/* ==========================================================
   GENERAL CONTENT WIDTH
========================================================== */

.article-shell,
.archive-shell,
.page-shell,
.search-shell,
.category-shell,
.news-shell,
.game-shell {
    min-width: 0;
}


/* ==========================================================
   CARDS
========================================================== */

.card,
.news-card,
.video-card,
.game-card,
.result-card,
.search-result,
.bxhub-news-card,
.bxhub-video-card,
.bx-related-card {
    min-width: 0;
}

.card h2,
.card h3,
.news-card h2,
.news-card h3,
.video-card h2,
.video-card h3,
.game-card h2,
.game-card h3,
.result-card h2,
.result-card h3,
.search-result h2,
.search-result h3,
.bxhub-news-card h3,
.bxhub-video-card h3 {
    overflow-wrap: anywhere;
}


/* ==========================================================
   FORMS
========================================================== */

input,
textarea,
select,
button {
    max-width: 100%;
}

input,
textarea,
select {
    font-size: 16px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .bxv7-header-inner,
    .bx-public-header-inner,
    .boxx-public-header-inner {
        width: min(100% - 24px, 1240px);
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    body {
        -webkit-text-size-adjust: 100%;
    }

    /* ------------------------------------------
       Header
    ------------------------------------------ */

    .bxv7-header,
    .bx-public-header,
    .boxx-public-header {
        width: 100%;
    }

    .bxv7-header-inner,
    .bx-public-header-inner,
    .boxx-public-header-inner {
        width: calc(100% - 22px);
        margin-left: auto;
        margin-right: auto;
    }

    .bxv7-nav,
    .bx-public-nav,
    .boxx-public-nav {
        max-width: 100%;
    }

    .bxv7-topicbar,
    .bx-topic-bar,
    .boxx-topic-bar {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* ------------------------------------------
       Main spacing
    ------------------------------------------ */

    main {
        max-width: 100%;
    }

    .article-shell,
    .archive-shell,
    .page-shell,
    .search-shell,
    .category-shell,
    .news-shell,
    .game-shell {
        width: calc(100% - 22px);
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ------------------------------------------
       Headings
    ------------------------------------------ */

    h1 {
        overflow-wrap: anywhere;
    }

    h2,
    h3 {
        overflow-wrap: anywhere;
    }

    /* ------------------------------------------
       Cards
    ------------------------------------------ */

    .card,
    .news-card,
    .video-card,
    .game-card,
    .result-card,
    .search-result,
    .bxhub-news-card,
    .bxhub-video-card,
    .bx-related-card {
        max-width: 100%;
    }

    /* ------------------------------------------
       Media
    ------------------------------------------ */

    iframe {
        width: 100%;
    }

    /* ------------------------------------------
       Buttons
    ------------------------------------------ */

    button,
    .button,
    .btn {
        min-height: 42px;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 430px) {

    .article-shell,
    .archive-shell,
    .page-shell,
    .search-shell,
    .category-shell,
    .news-shell,
    .game-shell {
        width: calc(100% - 18px);
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* ==========================================================
   BOXXHEAD MOBILE HERO — SHOW ENTIRE IMAGE
   ========================================================== */

@media (max-width: 768px) {

    /* Homepage main hero/banner */
    .hero img,
    .home-hero img,
    .homepage-hero img,
    .bx-hero img,
    .bx-home-hero img,
    .hero-banner img,
    .masthead img,
    .site-hero img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;
    }

    /* Prevent parent container from cutting the picture off */
    .hero,
    .home-hero,
    .homepage-hero,
    .bx-hero,
    .bx-home-hero,
    .hero-banner,
    .masthead,
    .site-hero {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* Common Boxxhead homepage hero image classes */
    .bx-home-hero-media,
    .bx-home-hero-media img,
    .bx-hero-media,
    .bx-hero-media img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        overflow: visible !important;
    }

}

/* Extra narrow phones */
@media (max-width: 480px) {

    .hero img,
    .home-hero img,
    .homepage-hero img,
    .bx-hero img,
    .bx-home-hero img,
    .hero-banner img,
    .masthead img,
    .site-hero img,
    .bx-home-hero-media img,
    .bx-hero-media img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

}



/* ==========================================================
   BOXXHEAD — MOBILE TOP STORIES FEATURE CARD
   Desktop already works.
   This only forces the large lead story to stay visible
   on phones.
   ========================================================== */

@media (max-width: 768px) {

    /* Main feature story wrapper */
    .bx-top-feature,
    .bx-home-top-feature,
    .bx-top-stories-feature,
    .bx-top-story-feature,
    .bx-feature-story,
    .bx-featured-story {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        position: relative !important;

        margin: 20px 0 24px !important;

        transform: none !important;
    }


    /* Feature story link */
    .bx-top-feature a,
    .bx-home-top-feature a,
    .bx-top-stories-feature a,
    .bx-top-story-feature a,
    .bx-feature-story a,
    .bx-featured-story a {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /* Image/media container */
    .bx-top-feature-image,
    .bx-top-feature-media,
    .bx-home-top-feature-image,
    .bx-home-top-feature-media,
    .bx-top-stories-feature-image,
    .bx-top-stories-feature-media {
        display: block !important;

        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 16 / 10 !important;

        overflow: hidden !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /* Actual story image */
    .bx-top-feature img,
    .bx-home-top-feature img,
    .bx-top-stories-feature img,
    .bx-top-story-feature img,
    .bx-feature-story img,
    .bx-featured-story img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
        max-height: none !important;

        object-fit: cover !important;
        object-position: center center !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /* Feature copy/headline */
    .bx-top-feature-copy,
    .bx-top-feature-content,
    .bx-home-top-feature-copy,
    .bx-top-stories-feature-copy {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    /* Make sure first Top Stories item isn't hidden */
    .bx-top-stories article:first-of-type,
    .bx-home-top-stories article:first-of-type,
    .top-stories article:first-of-type {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    /* Undo common mobile rules that hide lead cards */
    .bx-top-stories [class*="feature"],
    .bx-home-top-stories [class*="feature"] {
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
    }

}


/* Extra-small iPhones */
@media (max-width: 480px) {

    .bx-top-feature,
    .bx-home-top-feature,
    .bx-top-stories-feature,
    .bx-top-story-feature,
    .bx-feature-story,
    .bx-featured-story {
        display: block !important;
        width: 100% !important;
    }

    .bx-top-feature-image,
    .bx-top-feature-media,
    .bx-home-top-feature-image,
    .bx-home-top-feature-media {
        aspect-ratio: 16 / 10 !important;
    }

}



/* ==========================================================
   BOXXHEAD — REAL TOP STORIES MOBILE FIX
   Uses the ORIGINAL bxhome classes.
   ========================================================== */

@media (max-width: 768px) {

    /*
     * Main Top Stories area
     */
    .bxhome-top {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;

        height: auto !important;
        max-height: none !important;

        overflow: visible !important;
    }


    /*
     * Heading
     */
    .bxhome-top-heading {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    /*
     * Main story + secondary stories wrapper
     */
    .bxhome-lead-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        visibility: visible !important;
        opacity: 1 !important;

        overflow: visible !important;

        gap: 18px !important;
    }


    /*
     * THIS IS THE LARGE GTA ONLINE CARD
     */
    .bxhome-lead {
        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        visibility: visible !important;
        opacity: 1 !important;

        overflow: visible !important;

        position: relative !important;

        margin: 0 0 18px !important;

        transform: none !important;
    }


    /*
     * Clickable image area
     */
    .bxhome-lead-media {
        display: block !important;

        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 16 / 10 !important;

        visibility: visible !important;
        opacity: 1 !important;

        overflow: hidden !important;

        border-radius: 18px !important;
    }


    /*
     * Actual GTA Online thumbnail
     */
    .bxhome-lead-media > img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 0 !important;
        max-height: none !important;

        object-fit: cover !important;
        object-position: center center !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /*
     * Dark fade over thumbnail
     */
    .bxhome-lead-shade {
        display: block !important;

        position: absolute !important;
        inset: 0 !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: none !important;
    }


    /*
     * Story title/category/read button
     */
    .bxhome-lead-copy {
        display: block !important;

        position: absolute !important;

        left: 20px !important;
        right: 20px !important;
        bottom: 18px !important;

        visibility: visible !important;
        opacity: 1 !important;

        z-index: 3 !important;
    }


    .bxhome-lead-copy h2 {
        display: block !important;

        margin: 6px 0 0 !important;

        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
        line-height: 1 !important;

        visibility: visible !important;
        opacity: 1 !important;
    }


    /*
     * Hide description on phone to keep card clean,
     * but KEEP headline/category/read story.
     */
    .bxhome-lead-copy p {
        display: none !important;
    }


    .bxhome-story-category,
    .bxhome-read {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    /*
     * Smaller cards stay BELOW large story
     */
    .bxhome-secondary {
        display: grid !important;

        grid-template-columns: 1fr !important;

        width: 100% !important;

        visibility: visible !important;
        opacity: 1 !important;

        gap: 14px !important;
    }


    .bxhome-secondary-card {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

}


/* Small iPhones */
@media (max-width: 430px) {

    .bxhome-lead-media {
        aspect-ratio: 16 / 10 !important;
    }

    .bxhome-lead-copy {
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
    }

    .bxhome-lead-copy h2 {
        font-size: 1.85rem !important;
    }

}



/* ==========================================================
   BOXXHEAD MOBILE CLEANUP 2026-09-15
   Final controlled responsive layer.
   ========================================================== */



    .bxhome-top,
    .bxhome-lead-grid,
    .bxhome-lead,
    .bxhome-secondary {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .bxhome-lead-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .bxhome-secondary {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .bxhome-lead-copy {
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
    }

    .bxhome-lead-copy h2 {
        font-size: clamp(1.65rem, 7.5vw, 2.35rem) !important;
        line-height: 1.04 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .v7-footer-top {
        gap: 24px;
    }

    .v7-footer-nav {
        row-gap: 12px;
    }

    .boxx-site-links {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .boxx-site-links-nav {
        gap: 12px 18px !important;
    }
}

@media (max-width: 430px) {

    .v7-shell {
        width: min(100% - 20px, 1240px);
    }

    .bxhome-lead-copy h2 {
        font-size: clamp(1.5rem, 7.6vw, 1.9rem) !important;
    }

    .boxx-site-links-nav {
        gap: 12px 14px !important;
    }
}


/* ==========================================================
   BOXXHEAD REAL V7 MOBILE FIX 2026-09-15
   Targets the CURRENT V7 homepage.
   ========================================================== */

@media (max-width: 760px) {

    /* ---------- HEADER ---------- */

    .v7-header-row {
        min-height: 58px !important;
        height: 58px !important;
        gap: 8px !important;
    }

    .v7-logo img {
        width: 92px !important;
        max-height: 54px !important;
        object-fit: contain !important;
    }

    .v7-menu-button {
        width: 44px !important;
        height: 44px !important;
        padding: 9px !important;
    }

    .bxpub-search-button {
        width: 44px !important;
        height: 44px !important;
    }


    /* ---------- FEATURED GAME STRIP ---------- */

    .v7-topic-inner {
        min-height: 36px !important;
        height: 36px !important;
        gap: 2px !important;
    }

    .v7-topic-label {
        display: none !important;
    }

    .v7-topic-inner a {
        padding: 6px 9px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }


    /* ---------- CURRENT V7 BRAND HERO ---------- */

    .v7-brand-hero {
        margin: 0 !important;
    }

    .v7-brand-overlay {
        pointer-events: none !important;
    }


    /* ---------- MAIN CONTENT ---------- */

    .v7-main {
        padding-top: 0 !important;
    }

    .bxhome-top {
        width: 100% !important;
        margin: 22px 0 42px !important;
    }


    /* ---------- TOP STORIES HEADING ---------- */

    .bxhome-top-heading {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 8px !important;

        margin-bottom: 16px !important;
        padding-bottom: 13px !important;

        border-bottom: 3px solid #e31616 !important;
    }

    .bxhome-eyebrow {
        margin-bottom: 5px !important;
        font-size: 10px !important;
        letter-spacing: .18em !important;
    }

    .bxhome-top-heading h1 {
        font-size: 32px !important;
        line-height: .95 !important;
        letter-spacing: -.04em !important;
    }

    .bxhome-all-news {
        display: inline-block !important;
        width: fit-content !important;
        margin-top: 3px !important;
        padding: 0 !important;
        font-size: 10px !important;
    }


    /* ======================================================
       LEAD STORY

       MOBILE DESIGN:
       image first
       headline/content underneath

       Do NOT cover the artwork with a giant headline.
       ====================================================== */

    .bxhome-lead {
        overflow: hidden !important;
        border-radius: 12px !important;
        background: #111 !important;
        border: 1px solid rgba(255,255,255,.08) !important;
    }

    .bxhome-lead-media {
        display: flex !important;
        flex-direction: column !important;

        position: relative !important;

        width: 100% !important;
        height: auto !important;

        aspect-ratio: auto !important;

        overflow: hidden !important;

        color: #fff !important;
        text-decoration: none !important;
    }

    .bxhome-lead-media > img {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        height: auto !important;

        aspect-ratio: 16 / 9 !important;

        object-fit: cover !important;
        object-position: center !important;

        border-radius: 0 !important;
    }

    .bxhome-lead-shade {
        display: none !important;
    }

    .bxhome-lead-copy {
        display: block !important;

        position: relative !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;

        width: 100% !important;

        padding: 16px 16px 18px !important;

        background:
            linear-gradient(
                180deg,
                #151515 0%,
                #0d0d0d 100%
            ) !important;
    }

    .bxhome-story-category {
        margin: 0 0 7px !important;

        color: #ef3038 !important;

        font-size: 9px !important;
        font-weight: 950 !important;
        letter-spacing: .14em !important;
    }

    .bxhome-lead-copy h2 {
        margin: 0 !important;

        max-width: 100% !important;

        color: #fff !important;

        font-size: clamp(1.35rem, 6vw, 1.7rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -.025em !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .bxhome-lead-copy p {
        display: none !important;
    }

    .bxhome-read {
        display: inline-flex !important;
        align-items: center !important;

        margin-top: 14px !important;
        padding: 10px 14px !important;

        border-radius: 6px !important;

        background: #e31616 !important;
        color: #fff !important;

        font-size: 10px !important;
        font-weight: 950 !important;
        letter-spacing: .08em !important;
    }


    /* ---------- SECONDARY STORIES ---------- */

    .bxhome-secondary {
        margin-top: 14px !important;
        gap: 14px !important;
    }

    .bxhome-secondary-card {
        overflow: hidden !important;
        border-radius: 10px !important;
    }
}


@media (max-width: 430px) {

    .v7-shell {
        width: calc(100% - 28px) !important;
    }

    .v7-header-row {
        min-height: 56px !important;
        height: 56px !important;
    }

    .v7-logo img {
        width: 86px !important;
        max-height: 52px !important;
    }

    .v7-topic-inner {
        min-height: 34px !important;
        height: 34px !important;
    }

    .bxhome-top {
        margin-top: 20px !important;
    }

    .bxhome-top-heading h1 {
        font-size: 30px !important;
    }

    .bxhome-lead-copy {
        padding: 14px 14px 16px !important;
    }

    .bxhome-lead-copy h2 {
        font-size: 1.38rem !important;
        line-height: 1.08 !important;
    }
}

/* BOXXHEAD MOBILE EDITORIAL REPAIR 2026-09-15
   Consolidated mobile repair.
   Header + topic nav + homepage Top Stories + article reading layout.
   IMPORTANT: homepage promotional banner image sizing is intentionally
   not overridden here.
*/

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* -------------------------------------------------
   PHONE / TABLET
-------------------------------------------------- */

@media (max-width: 760px) {

    /*
       HEADER
       Reduce the oversized black header area without changing branding.
    */

    .v7-header {
        min-height: 0 !important;
        height: auto !important;
    }

    .v7-header-main,
    .v7-header-row {
        min-height: 72px !important;
        height: 72px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .v7-header-row {
        display: flex !important;
        align-items: center !important;
    }

    .v7-logo,
    .v7-logo img,
    .v7-brand,
    .v7-brand img {
        max-height: 46px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .v7-menu-button,
    .v7-search-button,
    .v7-search-toggle {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    /*
       TOPIC NAV
    */

    .v7-topic-bar {
        min-height: 54px !important;
        height: auto !important;
    }

    .v7-topic-inner {
        min-height: 54px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 28px !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    .v7-topic-inner::-webkit-scrollbar {
        display: none;
    }

    .v7-topic-inner a {
        font-size: 15px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /*
       HOMEPAGE TOP STORIES
    */

    .bxhome-top {
        padding-top: 30px !important;
        padding-bottom: 42px !important;
        margin-top: 0 !important;
    }

    .bxhome-top-head,
    .bxhome-top-header {
        margin-top: 0 !important;
        margin-bottom: 26px !important;
        padding-top: 0 !important;
    }

    .bxhome-top .eyebrow,
    .bxhome-top-eyebrow {
        margin-bottom: 7px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        letter-spacing: .17em !important;
    }

    .bxhome-top h2,
    .bxhome-top-title {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
        font-size: clamp(36px, 10vw, 46px) !important;
        line-height: .95 !important;
        letter-spacing: -.035em !important;
    }

    .bxhome-top-more,
    .bxhome-all-news {
        margin-top: 0 !important;
        margin-bottom: 22px !important;
        font-size: 14px !important;
    }

    .bxhome-top::after,
    .bxhome-top-head::after,
    .bxhome-top-header::after {
        margin-top: 18px !important;
    }

    /*
       LEAD STORY CARD

       Mobile becomes a normal editorial card:
       16:9 image on top and text below it.
       No huge image/text overlay.
    */

    .bxhome-lead {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }

    .bxhome-lead-media {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
    }

    .bxhome-lead-media img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .bxhome-lead::before,
    .bxhome-lead-media::after {
        display: none !important;
    }

    .bxhome-lead-copy {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 20px 20px 24px !important;
        background: #101010 !important;
    }

    .bxhome-lead-copy .eyebrow,
    .bxhome-lead-category,
    .bxhome-lead-kicker {
        margin: 0 0 9px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        letter-spacing: .15em !important;
    }

    .bxhome-lead h3,
    .bxhome-lead-title,
    .bxhome-lead-copy h3 {
        display: block !important;
        margin: 0 0 14px !important;
        max-width: none !important;
        font-size: clamp(25px, 7.2vw, 31px) !important;
        line-height: 1.04 !important;
        letter-spacing: -.025em !important;
        overflow: visible !important;
        text-overflow: clip !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: initial !important;
    }

    .bxhome-lead-copy p {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .bxhome-lead .btn,
    .bxhome-lead a[class*="button"],
    .bxhome-lead a[class*="read"] {
        margin-top: 8px !important;
    }

    /*
       SECONDARY STORIES
    */

    .bxhome-secondary {
        gap: 18px !important;
        margin-top: 22px !important;
    }

    /*
       GENERAL ARTICLE / NEWS READING PAGE

       These selectors intentionally cover the different generations
       of Boxxhead article templates.
    */

    article,
    .article,
    .news-article,
    .bx-article,
    .bxarticle,
    .article-page,
    .article-body,
    .news-body,
    .bx-article-body,
    .bxarticle-body {
        box-sizing: border-box !important;
    }

    .article-page,
    .news-article,
    .bx-article,
    .bxarticle {
        width: 100% !important;
        max-width: 100% !important;
    }

    .article-body,
    .news-body,
    .bx-article-body,
    .bxarticle-body,
    article .article-content,
    article .content,
    .bx-article-content,
    .bxarticle-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
       ARTICLE BODY TEXT
       Kill giant inherited homepage typography.
    */

    .article-body p,
    .news-body p,
    .bx-article-body p,
    .bxarticle-body p,
    article .article-content p,
    article .content p,
    .bx-article-content p,
    .bxarticle-content p {
        margin: 0 0 22px !important;
        font-size: 18px !important;
        line-height: 1.72 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        font-weight: 400 !important;
        overflow-wrap: break-word !important;
    }

    /*
       SECTION HEADINGS
    */

    .article-body h2,
    .news-body h2,
    .bx-article-body h2,
    .bxarticle-body h2,
    article .article-content h2,
    article .content h2,
    .bx-article-content h2,
    .bxarticle-content h2 {
        margin: 42px 0 16px !important;
        font-size: 29px !important;
        line-height: 1.05 !important;
        letter-spacing: -.025em !important;
        font-weight: 900 !important;
        text-transform: none !important;
    }

    .article-body h3,
    .news-body h3,
    .bx-article-body h3,
    .bxarticle-body h3,
    article .article-content h3,
    article .content h3,
    .bx-article-content h3,
    .bxarticle-content h3 {
        margin: 34px 0 13px !important;
        font-size: 23px !important;
        line-height: 1.12 !important;
        font-weight: 800 !important;
        text-transform: none !important;
    }

    /*
       LISTS
    */

    .article-body ul,
    .article-body ol,
    .news-body ul,
    .news-body ol,
    .bx-article-body ul,
    .bx-article-body ol,
    .bxarticle-body ul,
    .bxarticle-body ol,
    article .article-content ul,
    article .article-content ol {
        margin: 0 0 25px !important;
        padding-left: 25px !important;
    }

    .article-body li,
    .news-body li,
    .bx-article-body li,
    .bxarticle-body li,
    article .article-content li {
        margin-bottom: 10px !important;
        font-size: 18px !important;
        line-height: 1.62 !important;
    }

    /*
       INLINE ARTICLE IMAGES
    */

    .article-body figure,
    .news-body figure,
    .bx-article-body figure,
    .bxarticle-body figure,
    article .article-content figure,
    .bx-article-content figure {
        width: 100% !important;
        max-width: 100% !important;
        margin: 32px 0 !important;
    }

    .article-body figure img,
    .news-body figure img,
    .bx-article-body figure img,
    .bxarticle-body figure img,
    article .article-content figure img,
    .bx-article-content figure img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 14px !important;
    }

    .article-body figcaption,
    .news-body figcaption,
    .bx-article-body figcaption,
    .bxarticle-body figcaption,
    article .article-content figcaption {
        margin-top: 9px !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        opacity: .72 !important;
    }

    /*
       CONCEPT NOTICE / BLOCKQUOTES
       Gives the Buddy disclaimer a publication-style callout
       whenever it is represented as a blockquote/callout.
    */

    .article-body blockquote,
    .news-body blockquote,
    .bx-article-body blockquote,
    .bxarticle-body blockquote,
    article .article-content blockquote,
    .article-notice,
    .concept-notice,
    .bx-concept-notice {
        margin: 28px 0 34px !important;
        padding: 20px 20px 20px 22px !important;
        border-left: 4px solid #e21b23 !important;
        background: rgba(255,255,255,.045) !important;
        border-radius: 0 12px 12px 0 !important;
    }

    .article-body blockquote p,
    .news-body blockquote p,
    .bx-article-body blockquote p,
    .bxarticle-body blockquote p,
    article .article-content blockquote p,
    .article-notice p,
    .concept-notice p,
    .bx-concept-notice p {
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /*
       Prevent raw body text from inheriting uppercase transforms.
    */

    .article-body,
    .news-body,
    .bx-article-body,
    .bxarticle-body,
    .article-content,
    .bx-article-content,
    .bxarticle-content {
        text-transform: none !important;
    }

    /*
       Bottom clearance for iPhone/Safari browser chrome.
    */

    article,
    .article-page,
    .news-article,
    .bx-article,
    .bxarticle {
        padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }
}


/* -------------------------------------------------
   VERY SMALL PHONES
-------------------------------------------------- */

@media (max-width: 390px) {

    .v7-header-main,
    .v7-header-row {
        height: 68px !important;
        min-height: 68px !important;
    }

    .v7-topic-inner {
        gap: 22px !important;
    }

    .bxhome-top h2,
    .bxhome-top-title {
        font-size: 35px !important;
    }

    .bxhome-lead h3,
    .bxhome-lead-title,
    .bxhome-lead-copy h3 {
        font-size: 25px !important;
    }

    .article-body p,
    .news-body p,
    .bx-article-body p,
    .bxarticle-body p,
    article .article-content p,
    article .content p {
        font-size: 17px !important;
    }
}


/* -------------------------------------------------
   DESKTOP ARTICLE READING WIDTH
-------------------------------------------------- */

@media (min-width: 761px) {

    .article-body,
    .news-body,
    .bx-article-body,
    .bxarticle-body,
    article .article-content,
    article .content,
    .bx-article-content,
    .bxarticle-content {
        width: min(100% - 48px, 820px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .article-body p,
    .news-body p,
    .bx-article-body p,
    .bxarticle-body p,
    article .article-content p,
    article .content p,
    .bx-article-content p,
    .bxarticle-content p {
        font-size: 19px !important;
        line-height: 1.75 !important;
    }
}

/* END BOXXHEAD MOBILE EDITORIAL REPAIR 2026-09-15 */


/* BOXXHEAD ARTICLE READING BODY FINAL 2026-09-15 */

.bx-article-reading-body {
    box-sizing: border-box;
}

.bx-article-reading-body > :first-child {
    margin-top: 0 !important;
}

.bx-article-reading-body > :last-child {
    margin-bottom: 0 !important;
}

@media (max-width:760px) {

    .bx-article-reading-body {
        width:100% !important;
        max-width:100% !important;
        padding:24px 20px 80px !important;
        margin:0 auto !important;
    }

    .bx-article-reading-body p {
        margin:0 0 22px !important;
        font-size:18px !important;
        line-height:1.72 !important;
        font-weight:400 !important;
        letter-spacing:0 !important;
        text-transform:none !important;
    }

    .bx-article-reading-body h2 {
        margin:44px 0 16px !important;
        font-size:29px !important;
        line-height:1.04 !important;
        font-weight:900 !important;
        letter-spacing:-.025em !important;
        text-transform:none !important;
    }

    .bx-article-reading-body h3 {
        margin:34px 0 14px !important;
        font-size:23px !important;
        line-height:1.1 !important;
        font-weight:850 !important;
        text-transform:none !important;
    }

    .bx-article-reading-body figure {
        margin:32px 0 !important;
    }

    .bx-article-reading-body figure img {
        width:100% !important;
        height:auto !important;
        display:block !important;
        border-radius:14px !important;
    }
}

@media (min-width:761px) {

    .bx-article-reading-body {
        width:min(820px, calc(100% - 48px)) !important;
        margin:0 auto !important;
        padding-bottom:80px !important;
    }

    .bx-article-reading-body p {
        font-size:19px !important;
        line-height:1.75 !important;
    }
}

/* END BOXXHEAD ARTICLE READING BODY FINAL 2026-09-15 */

/* BOXXHEAD TOP STORIES FINAL 2026-09-15 */

@media (max-width:760px) {

    /*
       TOP STORIES SECTION
    */

    .bxhome-top {
        padding-top: 28px !important;
        padding-bottom: 38px !important;
    }

    .bxhome-top-heading {
        display: block !important;
        margin: 0 0 26px !important;
        padding: 0 0 18px !important;
    }

    .bxhome-eyebrow {
        display: block !important;
        margin: 0 0 8px !important;

        font-size: 12px !important;
        line-height: 1.2 !important;
        letter-spacing: .18em !important;
    }

    .bxhome-top-heading h1 {
        margin: 0 0 18px !important;

        font-size: 38px !important;
        line-height: .96 !important;
        letter-spacing: -.035em !important;
    }

    .bxhome-all-news {
        display: inline-block !important;
        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.2 !important;
    }


    /*
       GRID
    */

    .bxhome-lead-grid {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /*
       MAIN CARD
    */

    .bxhome-lead {
        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        overflow: hidden !important;

        border-radius: 18px !important;
        border: 1px solid rgba(255,255,255,.10) !important;

        background: #101010 !important;
    }


    /*
       IMPORTANT:
       .bxhome-lead-media is the WHOLE clickable card.
       It contains:
       image
       shade
       copy

       Therefore it must NOT itself be forced to 16:9.
    */

    .bxhome-lead-media {
        display: flex !important;
        flex-direction: column !important;

        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: auto !important;

        overflow: visible !important;

        color: #fff !important;
        text-decoration: none !important;

        background: #101010 !important;
    }


    /*
       IMAGE
       Only the image gets the 16:9 treatment.
    */

    .bxhome-lead-media > img {
        display: block !important;

        position: relative !important;
        inset: auto !important;

        order: 1 !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 16 / 9 !important;

        object-fit: cover !important;
        object-position: center center !important;

        flex: 0 0 auto !important;

        opacity: 1 !important;
        visibility: visible !important;

        z-index: 1 !important;
    }


    /*
       If there is no article image.
    */

    .bxhome-image-placeholder {
        order: 1 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        aspect-ratio: 16 / 9 !important;

        background: #181818 !important;

        font-size: 30px !important;
        font-weight: 900 !important;
    }


    /*
       Remove desktop gradient overlay.
    */

    .bxhome-lead-shade {
        display: none !important;
    }


    /*
       COPY BELOW IMAGE
    */

    .bxhome-lead-copy {
        display: block !important;

        position: relative !important;

        order: 2 !important;

        inset: auto !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        padding: 20px 20px 23px !important;

        background: #101010 !important;

        z-index: 2 !important;
    }


    /*
       CATEGORY
    */

    .bxhome-story-category {
        display: block !important;

        margin: 0 0 9px !important;

        color: #ff3131 !important;

        font-size: 12px !important;
        line-height: 1.25 !important;

        font-weight: 900 !important;
        letter-spacing: .15em !important;

        text-transform: uppercase !important;
    }


    /*
       ACTUAL TEMPLATE USES H2.
    */

    .bxhome-lead-copy h2 {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        color: #fff !important;

        font-size: 29px !important;
        line-height: 1.04 !important;

        font-weight: 900 !important;
        letter-spacing: -.025em !important;

        text-transform: none !important;

        overflow: visible !important;
        overflow-wrap: normal !important;
        word-break: normal !important;

        white-space: normal !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /*
       SUMMARY
    */

    .bxhome-lead-copy p {
        display: block !important;

        margin: 13px 0 0 !important;

        color: rgba(255,255,255,.72) !important;

        font-size: 14px !important;
        line-height: 1.5 !important;

        font-weight: 400 !important;

        text-transform: none !important;
    }


    /*
       READ STORY BUTTON
    */

    .bxhome-read {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: auto !important;

        margin: 17px 0 0 !important;

        padding: 11px 15px !important;

        border-radius: 7px !important;

        background: #d71920 !important;
        color: #fff !important;

        font-size: 12px !important;
        line-height: 1 !important;

        font-weight: 900 !important;
        letter-spacing: .10em !important;

        text-transform: uppercase !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /*
       SECONDARY STORIES
    */

    .bxhome-secondary {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 18px !important;

        margin-top: 20px !important;
    }
}


/*
   SMALL IPHONES
*/

@media (max-width:390px) {

    .bxhome-top-heading h1 {
        font-size: 35px !important;
    }

    .bxhome-lead-copy {
        padding: 18px 17px 21px !important;
    }

    .bxhome-lead-copy h2 {
        font-size: 26px !important;
    }

    .bxhome-lead-copy p {
        font-size: 13px !important;
    }
}

/* END BOXXHEAD TOP STORIES FINAL 2026-09-15 */




/* ==========================================================
   BOXXHEAD SEMANTIC ARTICLE BODY 2026-09-15
   ========================================================== */

.bx-article-reading-body {
    width: 100%;
    max-width: 780px;
}

.bx-article-reading-body p {
    margin: 0 0 22px !important;
    font-size: 18px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.bx-article-reading-body .bx-article-section-heading {
    margin: 48px 0 18px !important;
    padding-top: 6px;

    color: #fff;

    font-size: clamp(27px, 5vw, 38px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
    font-weight: 950 !important;

    text-transform: uppercase !important;
}

.bx-article-reading-body .bx-article-subheading {
    margin: 30px 0 8px !important;

    color: #fff;

    font-size: 21px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

.bx-article-reading-body .bx-article-emphasis {
    margin: 28px 0 !important;

    color: #fff;

    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
}

.bx-concept-notice {
    display: block;

    margin: 28px 0 40px;
    padding: 18px 20px;

    border-left: 4px solid #d71920;
    border-radius: 0 10px 10px 0;

    background: rgba(255,255,255,.055);
}

.bx-concept-notice strong {
    display: block;

    margin-bottom: 8px;

    color: #ff3038;

    font-size: 12px;
    font-weight: 950;
    letter-spacing: .14em;
}

.bx-concept-notice p {
    margin: 0 !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
}

.bx-article-reading-body .bx-article-inline-image {
    display: block;

    width: 100%;

    margin: 32px 0 38px !important;
}

.bx-article-reading-body .bx-article-inline-image img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 12px;
}

.bx-article-reading-body .bx-article-inline-image figcaption {
    margin-top: 9px;

    font-size: 13px;
    line-height: 1.45;

    opacity: .68;
}

@media (max-width: 760px) {

    .bx-article-reading-body {
        max-width: 100%;

        padding-left: 18px !important;
        padding-right: 18px !important;
        padding-bottom: 90px !important;
    }

    .bx-article-reading-body p {
        font-size: 17px !important;
        line-height: 1.7 !important;
    }

    .bx-article-reading-body .bx-article-section-heading {
        margin-top: 40px !important;

        font-size: 27px !important;
        line-height: 1.06 !important;
    }

    .bx-article-reading-body .bx-article-subheading {
        font-size: 20px !important;
    }
}

/* END BOXXHEAD SEMANTIC ARTICLE BODY */


/* BOXXHEAD CLEAN ARTICLE PRESENTATION START */

.bx-article-reading-body {
    width: 100% !important;
    max-width: 780px !important;
    margin: 0 auto !important;
}

.bx-article-reading-body > p {
    margin: 0 0 24px !important;
    padding: 0 !important;

    font-size: 18px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;

    text-transform: none !important;
}

.bx-article-reading-body .bx-article-section-heading {
    margin: 52px 0 18px !important;
    padding: 0 !important;

    font-size: 34px !important;
    line-height: 1.04 !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;

    text-transform: uppercase !important;
}

.bx-article-reading-body .bx-article-subheading {
    margin: 32px 0 10px !important;

    font-size: 22px !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
}

.bx-article-reading-body .bx-article-emphasis {
    margin: 30px 0 !important;

    font-size: 21px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
}

.bx-concept-notice {
    margin: 30px 0 42px !important;
    padding: 20px !important;

    border-left: 4px solid #e31616 !important;
    border-radius: 0 10px 10px 0 !important;

    background: rgba(255,255,255,.055) !important;
}

.bx-concept-notice strong {
    display: block !important;
    margin-bottom: 9px !important;

    color: #ff3038 !important;

    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: .14em !important;
}

.bx-concept-notice p {
    margin: 0 !important;

    font-size: 15px !important;
    line-height: 1.6 !important;
}

.bx-article-reading-body .bx-article-inline-image {
    display: block !important;

    width: 100% !important;

    margin: 34px 0 40px !important;
}

.bx-article-reading-body .bx-article-inline-image img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    border-radius: 12px !important;
}

.bx-article-reading-body .bx-article-inline-image figcaption {
    margin-top: 9px !important;

    font-size: 13px !important;
    line-height: 1.5 !important;

    opacity: .7 !important;
}

@media (max-width:760px) {

    .bx-article-reading-body {
        width: 100% !important;
        max-width: 100% !important;

        padding: 24px 18px 90px !important;
    }

    .bx-article-reading-body > p {
        margin-bottom: 21px !important;

        font-size: 17px !important;
        line-height: 1.68 !important;
    }

    .bx-article-reading-body .bx-article-section-heading {
        margin: 42px 0 15px !important;

        font-size: 27px !important;
        line-height: 1.06 !important;
    }

    .bx-article-reading-body .bx-article-subheading {
        font-size: 20px !important;
    }

    .bx-article-reading-body .bx-article-inline-image {
        margin: 28px 0 34px !important;
    }
}

/* BOXXHEAD CLEAN ARTICLE PRESENTATION END */

/* ==========================================================
   BOXXHEAD ACTUAL MOBILE FIX — 2026-09-15
   ========================================================== */

@media screen and (max-width: 760px) {

    /* REAL HOMEPAGE HERO */
    body.bx-homepage section.v7-brand-hero {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
        padding: 0 !important;
        margin: 0 !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        overflow: hidden !important;
    }

    body.bx-homepage section.v7-brand-hero .v7-brand-overlay {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }


    /* ARTICLE READING COLUMN */
    .bx-article-layout,
    .bx-article-body {
        width: 100% !important;
        max-width: 100% !important;
    }

    .bx-article-reading-body {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 20px !important;
        padding-right: 20px !important;

        font-size: 17px !important;
        line-height: 1.65 !important;
    }

    .bx-article-reading-body > p {
        display: block !important;
        margin: 0 0 22px !important;

        font-size: 17px !important;
        line-height: 1.65 !important;
    }

    .bx-article-reading-body h2,
    .bx-article-reading-body .bx-article-section-heading {
        display: block !important;

        margin: 42px 0 16px !important;

        font-size: 27px !important;
        line-height: 1.08 !important;
        font-weight: 900 !important;
    }

    .bx-concept-notice {
        display: block !important;

        margin: 24px 0 36px !important;
        padding: 18px !important;

        border-left: 4px solid #e31616 !important;
        background: #111 !important;
    }

    .bx-concept-notice p {
        margin: 8px 0 0 !important;

        font-size: 16px !important;
        line-height: 1.55 !important;
    }
}

/* BOXXHEAD ACTUAL MOBILE FIX END */