:root {

    --bg: #04070c;
    --bg2: #090d14;

    --surface: #0d121a;
    --surface2: #121923;

    --line: rgba(255,255,255,.11);

    --text: #f5f6f7;
    --muted: #a2aab4;

    --red: #e31c3d;
    --red-dark: #ba1630;

    --max: 1480px;

}


/* ======================================================
   BASE
====================================================== */

* {
    box-sizing: border-box;
}


html {
    background: var(--bg);
}


body {

    margin: 0;

    background:
        #04070c;

    color:
        var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        17px;

    line-height:
        1.55;

}


img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
}


.v7-shell {

    width:
        min(
            var(--max),
            calc(100% - 56px)
        );

    margin:
        0 auto;

}



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

.v7-header {

    position: sticky;

    top: 0;

    z-index: 1000;

}


.v7-header-main {

    background:
        #05080d;

    border-bottom:
        1px solid
        var(--line);

}


.v7-header-row {

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    gap:
        34px;

}


.v7-logo {

    width:
        145px;

    flex:
        0 0 auto;

}


.v7-logo img {

    width:
        100%;

    max-height:
        70px;

    object-fit:
        contain;

}


.v7-nav {

    flex: 1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        30px;

}


.v7-nav a {

    color:
        #e5e8eb;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

}


.v7-nav a:hover {

    color:
        var(--red);

}


.v7-menu-button {

    display:
        none;

}


.v7-topic-bar {

    background:
        #11151b;

    border-bottom:
        1px solid
        var(--line);

}


.v7-topic-inner {

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    gap:
        26px;

}


.v7-topic-label {

    color:
        #858d97;

    font-size:
        13px;

    font-weight:
        700;

}


.v7-topic-inner a {

    color:
        white;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

}


.v7-topic-inner a:hover {

    color:
        var(--red);

}



/* ======================================================
   HERO
====================================================== */

.v7-brand-hero {

    position:
        relative;

    min-height:
        470px;

    background-image:
        url("/static/img/boxxhead-hero-approved.png");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center;

}


.v7-brand-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            to bottom,
            rgba(0,0,0,.02) 55%,
            #04070c 100%
        );

}



/* ======================================================
   MAIN
====================================================== */

.v7-main {

    padding:
        42px 0 80px;

}



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

.v7-lead-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(320px, .8fr);

    gap:
        36px;

    padding-bottom:
        48px;

    border-bottom:
        1px solid
        var(--line);

}


.v7-lead-image {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 8.3;

    overflow:
        hidden;

    background:
        #0b1017;

}


.v7-lead-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.v7-lead-copy {

    padding-top:
        18px;

}


.v7-section-tag {

    color:
        var(--red);

    font-size:
        14px;

    font-weight:
        700;

}


.v7-lead-copy h1 {

    max-width:
        980px;

    margin:
        8px 0 12px;

    font-size:
        clamp(
            36px,
            4.5vw,
            64px
        );

    line-height:
        1.03;

    letter-spacing:
        -.025em;

}


.v7-lead-copy h1 a {

    text-decoration:
        none;

}


.v7-lead-copy p {

    max-width:
        850px;

    margin:
        0 0 16px;

    color:
        var(--muted);

    font-size:
        18px;

}


.v7-text-link,
.v7-more-link {

    color:
        var(--red);

    font-size:
        15px;

    font-weight:
        700;

    text-decoration:
        none;

}


.v7-latest-column {

    border-left:
        1px solid
        var(--line);

    padding-left:
        26px;

}


.v7-heading-row {

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        18px;

    border-bottom:
        3px solid
        white;

}


.v7-heading-row h2 {

    margin:
        0;

    padding-bottom:
        9px;

    font-size:
        27px;

    line-height:
        1;

}


.v7-heading-row > a {

    color:
        var(--red);

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

}


.v7-heading-row.compact {

    margin-bottom:
        6px;

}


.v7-heading-row.compact h2 {

    font-size:
        22px;

}


.v7-latest-row {

    display:
        block;

    padding:
        18px 0;

    border-bottom:
        1px solid
        var(--line);

    text-decoration:
        none;

}


.v7-latest-row span {

    color:
        var(--red);

    font-size:
        13px;

    font-weight:
        700;

}


.v7-latest-row strong {

    display:
        block;

    margin-top:
        5px;

    font-size:
        18px;

    line-height:
        1.28;

}



/* ======================================================
   GENERAL SECTION
====================================================== */

.v7-section {

    padding:
        48px 0;

    border-bottom:
        1px solid
        var(--line);

}



/* ======================================================
   VIDEO STORIES
====================================================== */

.v7-video-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        24px;

}


.v7-story-image {

    display:
        block;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        #0c1118;

}


.v7-story-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.v7-story-copy {

    padding-top:
        12px;

}


.v7-story-copy h3 {

    margin:
        5px 0 0;

    font-size:
        20px;

    line-height:
        1.25;

}


.v7-story-copy h3 a {

    text-decoration:
        none;

}



/* ======================================================
   FEATURED GAMES
====================================================== */

.v7-feature-game-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        24px;

}


.v7-feature-game {

    min-height:
        235px;

    padding:
        32px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    border:
        1px solid
        var(--line);

    text-decoration:
        none;

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.92),
            rgba(0,0,0,.22)
        ),

        linear-gradient(
            135deg,
            #182839,
            #121720
        );

}


.v7-gta {

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.92),
            rgba(0,0,0,.20)
        ),

        linear-gradient(
            135deg,
            #1c303f,
            #102236
        );

}


.v7-vice {

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.90),
            rgba(0,0,0,.18)
        ),

        linear-gradient(
            135deg,
            #501849,
            #173e52
        );

}


.v7-feature-game span {

    color:
        var(--red);

    font-size:
        14px;

    font-weight:
        700;

}


.v7-feature-game strong {

    margin-top:
        5px;

    color:
        white;

    font-size:
        38px;

    line-height:
        1;

}


.v7-feature-game small {

    margin-top:
        9px;

    color:
        #bcc3ca;

    font-size:
        15px;

}



/* ======================================================
   GAME LIST
====================================================== */

.v7-game-list {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        2px 28px;

}


.v7-game-row {

    min-height:
        125px;

    padding:
        18px 0;

    display:
        grid;

    grid-template-columns:
        115px minmax(0,1fr);

    gap:
        17px;

    align-items:
        center;

    border-bottom:
        1px solid
        var(--line);

    text-decoration:
        none;

}


.v7-game-art {

    width:
        115px;

    height:
        90px;

    overflow:
        hidden;

    background:
        #0c1118;

}


.v7-game-art img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.v7-game-copy span {

    color:
        var(--red);

    font-size:
        13px;

    font-weight:
        700;

}


.v7-game-copy strong {

    display:
        block;

    margin-top:
        3px;

    font-size:
        20px;

}


.v7-game-copy small {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        14px;

}



/* ======================================================
   NEWS
====================================================== */

.v7-news-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0,1.65fr)
        minmax(300px,.65fr);

    gap:
        50px;

}


.v7-news-story {

    display:
        grid;

    grid-template-columns:
        260px minmax(0,1fr);

    gap:
        24px;

    padding:
        22px 0;

    border-bottom:
        1px solid
        var(--line);

}


.v7-news-thumb {

    display:
        block;

    width:
        260px;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        #0c1118;

}


.v7-news-thumb img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.v7-news-story h3 {

    margin:
        5px 0 8px;

    font-size:
        27px;

    line-height:
        1.15;

}


.v7-news-story h3 a {

    text-decoration:
        none;

}


.v7-news-story p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        16px;

}


.v7-side-column {

    border-left:
        1px solid
        var(--line);

    padding-left:
        28px;

}


.v7-review-row {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr) auto;

    gap:
        18px;

    padding:
        18px 0;

    border-bottom:
        1px solid
        var(--line);

    text-decoration:
        none;

}


.v7-review-text span {

    color:
        var(--red);

    font-size:
        13px;

    font-weight:
        700;

}


.v7-review-text strong {

    display:
        block;

    margin-top:
        4px;

    font-size:
        18px;

    line-height:
        1.25;

}


.v7-score {

    min-width:
        58px;

    color:
        white;

    font-size:
        21px;

    font-weight:
        800;

    text-align:
        right;

}



/* ======================================================
   BOTTOM FEATURES
====================================================== */

.v7-bottom-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        28px;

    padding:
        48px 0;

}


.v7-bottom-feature {

    padding:
        32px;

    border-top:
        4px solid
        var(--red);

    background:
        var(--surface);

}


.v7-bottom-feature span {

    color:
        var(--red);

    font-size:
        14px;

    font-weight:
        700;

}


.v7-bottom-feature h2 {

    margin:
        7px 0 9px;

    font-size:
        30px;

}


.v7-bottom-feature p {

    color:
        var(--muted);

    font-size:
        16px;

}


.v7-bottom-feature a {

    color:
        white;

    font-weight:
        700;

}



/* ======================================================
   FOOTER
====================================================== */

.v7-footer {

    margin-top:
        25px;

    border-top:
        1px solid
        var(--line);

    background:
        #020407;

}


.v7-footer-top {

    min-height:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

}


.v7-footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

}


.v7-footer-brand img {

    width:
        120px;

}


.v7-footer-brand strong {

    font-size:
        20px;

}


.v7-footer-brand p {

    max-width:
        400px;

    margin:
        5px 0 0;

    color:
        var(--muted);

    font-size:
        14px;

}


.v7-footer-nav {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        20px;

}


.v7-footer-nav a {

    color:
        #d8dce0;

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

}


.v7-footer-bottom {

    min-height:
        64px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-top:
        1px solid
        var(--line);

    color:
        #7f8790;

    font-size:
        13px;

}


.v7-footer-bottom strong {

    color:
        var(--red);

}



/* ======================================================
   FALLBACK
====================================================== */

.v7-logo-fallback {

    object-fit:
        contain !important;

    padding:
        30px;

    background:
        #101720;

}



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

@media
(max-width: 1100px) {

    .v7-nav {
        gap:
            18px;
    }


    .v7-nav a {
        font-size:
            13px;
    }


    .v7-video-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }


    .v7-game-list {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}



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

@media
(max-width: 820px) {

    body {

        font-size:
            16px;

    }


    .v7-shell {

        width:
            calc(100% - 28px);

    }


    .v7-header-row {

        min-height:
            66px;

    }


    .v7-logo {

        width:
            112px;

    }


    .v7-menu-button {

        width:
            48px;

        height:
            48px;

        margin-left:
            auto;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            5px;

        border:
            1px solid
            rgba(255,255,255,.20);

        background:
            transparent;

    }


    .v7-menu-button span {

        width:
            22px;

        height:
            2px;

        background:
            white;

    }


    .v7-nav {

        position:
            fixed;

        left:
            14px;

        right:
            14px;

        top:
            72px;

        display:
            none;

        padding:
            10px;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        border:
            1px solid
            var(--line);

        background:
            #080c12;

    }


    .v7-nav.open {

        display:
            flex;

    }


    .v7-nav a {

        min-height:
            50px;

        display:
            flex;

        align-items:
            center;

        padding:
            0 14px;

        border-bottom:
            1px solid
            var(--line);

        font-size:
            16px;

    }


    .v7-topic-inner {

        overflow-x:
            auto;

        white-space:
            nowrap;

    }


    .v7-topic-label {

        display:
            none;

    }


    .v7-brand-hero {

        min-height:
            300px;

        background-position:
            center;

    }


    .v7-main {

        padding-top:
            24px;

    }


    .v7-lead-layout {

        display:
            block;

    }


    .v7-latest-column {

        margin-top:
            34px;

        padding-left:
            0;

        border-left:
            0;

    }


    .v7-lead-copy h1 {

        font-size:
            38px;

    }


    .v7-lead-copy p {

        font-size:
            16px;

    }


    .v7-heading-row h2 {

        font-size:
            24px;

    }


    .v7-video-grid {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    .v7-story-copy h3 {

        font-size:
            22px;

    }


    .v7-feature-game-row {

        grid-template-columns:
            1fr;

    }


    .v7-feature-game {

        min-height:
            190px;

    }


    .v7-feature-game strong {

        font-size:
            34px;

    }


    .v7-game-list {

        grid-template-columns:
            1fr;

    }


    .v7-game-row {

        grid-template-columns:
            120px minmax(0,1fr);

    }


    .v7-news-layout {

        display:
            block;

    }


    .v7-news-story {

        grid-template-columns:
            140px minmax(0,1fr);

        gap:
            16px;

    }


    .v7-news-thumb {

        width:
            140px;

    }


    .v7-news-story h3 {

        font-size:
            20px;

    }


    .v7-news-story p {

        display:
            none;

    }


    .v7-side-column {

        margin-top:
            42px;

        padding-left:
            0;

        border-left:
            0;

    }


    .v7-bottom-grid {

        grid-template-columns:
            1fr;

    }


    .v7-footer-top {

        padding:
            32px 0;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .v7-footer-nav {

        justify-content:
            flex-start;

    }


    .v7-footer-bottom {

        padding:
            18px 0;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            7px;

    }

}



/* ======================================================
   SMALL PHONE
====================================================== */

@media
(max-width: 480px) {

    .v7-brand-hero {

        min-height:
            245px;

    }


    .v7-lead-copy h1 {

        font-size:
            32px;

    }


    .v7-news-story {

        grid-template-columns:
            105px minmax(0,1fr);

    }


    .v7-news-thumb {

        width:
            105px;

    }


    .v7-news-story h3 {

        font-size:
            18px;

    }


    .v7-game-row {

        grid-template-columns:
            100px minmax(0,1fr);

    }


    .v7-game-art {

        width:
            100px;

        height:
            82px;

    }

}



/* =====================================================
   BOXXHEAD INLINE ARTICLE IMAGE STYLE
   ===================================================== */

.bx-article-inline-image {
    width: 100%;
    display: block;
    margin: 34px 0 38px;
}

.bx-article-inline-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 760px;
    object-fit: contain;
    background: #080808;
    border-radius: 6px;
}

.bx-article-inline-image figcaption {
    margin-top: 10px;
    color: #949494;
    font-size: 12px;
    line-height: 1.5;
    font-style: italic;
}

@media (max-width: 700px) {

    .bx-article-inline-image {
        margin: 25px 0 30px;
    }

}