:root {

    --black:
        #080808;

    --charcoal:
        #11100f;

    --ivory:
        #f3efe7;

    --paper:
        #faf8f3;

    --gold:
        #b78a47;

    --gold-light:
        #dfbd7d;

    --text:
        #25211c;

    --muted:
        #766f65;

    --line:
        rgba(48,38,26,.13);

}


/* =========================================
   RESET
========================================= */

* {
    box-sizing:
        border-box;

    margin: 0;

    padding: 0;
}


html {
    scroll-behavior:
        smooth;
}


body {

    min-width:
        320px;

    color:
        var(--text);

    background:
        var(--paper);

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

    -webkit-font-smoothing:
        antialiased;

}


a {
    color:
        inherit;

    text-decoration:
        none;
}


img {
    display:
        block;

    max-width:
        100%;
}


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

.site-header {

    position:
        relative;

    z-index:
        50;

    min-height:
        84px;

    padding:
        0 5vw;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    color:
        #fff;

    background:
        var(--black);

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.brand-mark {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(223,189,125,.45);

    border-radius:
        50%;

    color:
        var(--gold-light);

    font-family:
        Georgia,
        serif;

    font-size:
        15px;

}


.brand-name {

    color:
        var(--gold-light);

    font-family:
        Georgia,
        serif;

    font-size:
        17px;

    letter-spacing:
        2px;

}


.header-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

}


.header-nav a {

    color:
        rgba(255,255,255,.58);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

    transition:
        color .2s ease;

}


.header-nav a:hover {

    color:
        var(--gold-light);

}


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

.article-header {

    padding:
        105px
        24px
        75px;

    text-align:
        center;

    background:
        var(--ivory);

}


.article-category {

    color:
        var(--gold);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        3px;

}


.article-title {

    width:
        min(
            1050px,
            100%
        );

    margin:
        24px auto 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            42px,
            6vw,
            86px
        );

    font-weight:
        400;

    line-height:
        1.04;

    letter-spacing:
        -.035em;

}


.article-product-name {

    margin-top:
        32px;

    color:
        var(--gold);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            23px,
            3vw,
            36px
        );

    font-style:
        italic;

}


.article-excerpt {

    width:
        min(
            720px,
            100%
        );

    margin:
        29px auto 0;

    color:
        var(--muted);

    font-family:
        Georgia,
        serif;

    font-size:
        18px;

    line-height:
        1.75;

}


.article-meta {

    margin-top:
        35px;

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    align-items:
        center;

    gap:
        10px;

    color:
        #81786d;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


.meta-dot {
    color:
        var(--gold);
}


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

.article-hero {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        min(
            72vw,
            760px
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:

        radial-gradient(
            circle at 50% 40%,
            #33302b 0%,
            #171614 42%,
            #090909 75%
        );

}


.hero-glow {

    position:
        absolute;

    width:
        65%;

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(183,138,71,.19),
            transparent 68%
        );

    filter:
        blur(30px);

}


.article-hero img {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            900px,
            87vw
        );

    filter:
        drop-shadow(
            0 40px 35px
            rgba(0,0,0,.45)
        );

}


.hero-caption {

    position:
        absolute;

    z-index:
        3;

    left:
        5vw;

    bottom:
        38px;

    color:
        #fff;

    font-family:
        Georgia,
        serif;

    font-size:
        17px;

}


.hero-caption span {

    display:
        block;

    margin-top:
        5px;

    color:
        rgba(255,255,255,.45);

    font-family:
        Arial,
        sans-serif;

    font-size:
        8px;

    letter-spacing:
        1.4px;

    text-transform:
        uppercase;

}


/* =========================================
   ARTICLE LAYOUT
========================================= */

.article-layout {

    width:
        min(
            1220px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        110px 0 130px;

    display:
        grid;

    grid-template-columns:
        190px
        minmax(0,760px);

    justify-content:
        center;

    gap:
        80px;

}


/* =========================================
   SIDE INFORMATION
========================================= */

.article-side-info {

    padding-top:
        9px;

}


.side-line {

    width:
        40px;

    height:
        1px;

    margin-bottom:
        30px;

    background:
        var(--gold);

}


.side-info-block {

    margin-bottom:
        27px;

}


.side-info-block span {

    display:
        block;

    color:
        var(--gold);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        1.4px;

}


.side-info-block strong {

    display:
        block;

    margin-top:
        6px;

    color:
        #575046;

    font-family:
        Georgia,
        serif;

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.45;

}


/* =========================================
   ARTICLE TYPOGRAPHY
========================================= */

.article-content {

    min-width:
        0;

}


.article-content p {

    margin:
        0 0 27px;

    color:
        #484239;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        18px;

    line-height:
        1.9;

}


.article-content .article-lead {

    color:
        var(--text);

    font-size:
        27px;

    line-height:
        1.55;

}


.article-content h2 {

    margin:
        74px 0 27px;

    color:
        var(--text);

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            32px,
            4vw,
            48px
        );

    font-weight:
        400;

    line-height:
        1.15;

    letter-spacing:
        -.02em;

}


.article-content h3 {

    margin:
        45px 0 20px;

    color:
        var(--text);

    font-family:
        Georgia,
        serif;

    font-size:
        26px;

    font-weight:
        400;

}


.article-content strong {

    color:
        #211d18;

}


.article-content a {

    color:
        var(--gold);

    border-bottom:
        1px solid
        rgba(183,138,71,.4);

}


.article-content ul,
.article-content ol {

    margin:
        10px 0 35px 25px;

    color:
        #484239;

    font-family:
        Georgia,
        serif;

    font-size:
        18px;

    line-height:
        1.9;

}


.article-content li {

    padding-left:
        8px;

    margin-bottom:
        8px;

}


.article-content blockquote {

    margin:
        65px
        -70px;

    padding:
        12px 0
        12px 42px;

    border-left:
        2px solid
        var(--gold);

    color:
        #2c2822;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            28px,
            4vw,
            43px
        );

    font-style:
        italic;

    line-height:
        1.4;

}


/* =========================================
   HIGHLIGHT NUMBER
========================================= */

.article-highlight {

    margin:
        60px 0;

    padding:
        45px;

    text-align:
        center;

    color:
        #fff;

    background:
        var(--black);

    border-radius:
        2px;

}


.article-highlight span {

    display:
        block;

    color:
        var(--gold-light);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.article-highlight strong {

    display:
        block;

    margin-top:
        12px;

    color:
        #fff;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            62px,
            9vw,
            104px
        );

    font-weight:
        400;

    line-height:
        1;

}


.article-highlight small {

    display:
        block;

    margin-top:
        9px;

    color:
        rgba(255,255,255,.5);

    font-size:
        9px;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


/* =========================================
   TABLE
========================================= */

.article-table-wrap {

    overflow-x:
        auto;

    margin:
        48px 0 60px;

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

}


.article-content table {

    width:
        100%;

    border-collapse:
        collapse;

}


.article-content th,
.article-content td {

    padding:
        20px 8px;

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

    text-align:
        left;

}


.article-content th {

    color:
        var(--gold);

    font-size:
        8px;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


.article-content td {

    color:
        #4c453c;

    font-family:
        Georgia,
        serif;

    font-size:
        16px;

}


.article-content td:last-child {

    color:
        var(--text);

    font-weight:
        700;

}


/* =========================================
   ARTICLE IMAGE
========================================= */

.article-image {

    margin:
        62px
        -70px;

}


.image-placeholder {

    min-height:
        500px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    color:
        #fff;

    background:

        radial-gradient(
            circle at 40% 30%,
            #393630,
            #121212 70%
        );

}


.image-placeholder span {

    color:
        var(--gold-light);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.image-placeholder strong {

    margin-top:
        10px;

    color:
        #fff;

    font-family:
        Georgia,
        serif;

    font-size:
        28px;

    font-weight:
        400;

}


.article-image figcaption {

    margin-top:
        10px;

    color:
        #948b80;

    font-size:
        9px;

    line-height:
        1.5;

}


/* =========================================
   VERDICT
========================================= */

.article-verdict {

    margin-top:
        85px;

    padding:
        50px;

    color:
        #fff;

    background:
        var(--black);

}


.article-verdict > span {

    color:
        var(--gold-light);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.article-verdict h2 {

    margin:
        16px 0 22px;

    color:
        #fff;

}


.article-verdict p {

    margin:
        0;

    color:
        rgba(255,255,255,.66);

}


/* =========================================
   TAGS
========================================= */

.article-tags {

    margin-top:
        48px;

    padding-top:
        25px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

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

}


.article-tags a {

    padding:
        8px 11px;

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

    border-radius:
        999px;

    color:
        #6c6358;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .6px;

    text-transform:
        uppercase;

}


/* =========================================
   NEXT ARTICLE
========================================= */

.next-article {

    padding:
        90px 24px;

    text-align:
        center;

    color:
        #fff;

    background:
        #11100f;

}


.next-article > span {

    color:
        var(--gold-light);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.next-article h2 {

    margin:
        14px auto 25px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            30px,
            5vw,
            55px
        );

    font-weight:
        400;

}


.next-article a {

    color:
        var(--gold-light);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


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

.site-footer {

    min-height:
        190px;

    padding:
        40px 5vw;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    color:
        rgba(255,255,255,.5);

    background:
        #080808;

    border-top:
        1px solid
        rgba(255,255,255,.07);

}


.site-footer strong {

    display:
        block;

    color:
        var(--gold-light);

    font-family:
        Georgia,
        serif;

    font-size:
        21px;

    letter-spacing:
        2px;

}


.site-footer span {

    display:
        block;

    margin-top:
        6px;

    font-size:
        7px;

    letter-spacing:
        2px;

}


.site-footer p {

    font-size:
        9px;

}


/* =========================================
   RESPONSIVE
========================================= */

@media
(max-width: 950px) {

    .article-layout {

        grid-template-columns:
            1fr;

        gap:
            40px;

        max-width:
            760px;

    }


    .article-side-info {

        display:
            flex;

        flex-wrap:
            wrap;

        gap:
            25px 40px;

        padding-bottom:
            25px;

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

    }


    .side-line {
        display:
            none;
    }


    .side-info-block {
        margin:
            0;
    }


    .article-content blockquote,
    .article-image {

        margin-left:
            0;

        margin-right:
            0;

    }

}


@media
(max-width: 700px) {

    .site-header {

        min-height:
            72px;

    }


    .header-nav {

        display:
            none;

    }


    .article-header {

        padding:
            72px
            20px
            55px;

    }


    .article-title {

        font-size:
            44px;

    }


    .article-excerpt {

        font-size:
            16px;

    }


    .article-hero {

        min-height:
            480px;

    }


    .article-layout {

        width:
            calc(100% - 36px);

        padding:
            70px 0 90px;

    }


    .article-content p,
    .article-content ul,
    .article-content ol {

        font-size:
            17px;

    }


    .article-content .article-lead {

        font-size:
            23px;

    }


    .article-content h2 {

        margin-top:
            58px;

        font-size:
            36px;

    }


    .article-content blockquote {

        margin:
            50px 0;

        padding-left:
            25px;

        font-size:
            30px;

    }


    .article-highlight {

        padding:
            35px 22px;

    }


    .article-verdict {

        padding:
            35px 25px;

    }


    .image-placeholder {

        min-height:
            360px;

    }


    .site-footer {

        display:
            block;

        text-align:
            center;

    }


    .site-footer p {

        margin-top:
            30px;

    }

}


@media
(max-width: 450px) {

    .article-title {

        font-size:
            38px;

    }


    .article-product-name {

        font-size:
            23px;

    }


    .article-meta {

        gap:
            7px;

    }


    .article-hero {

        min-height:
            400px;

    }


    .hero-caption {

        left:
            20px;

        bottom:
            24px;

    }

}