/* =========================================================
   SINGLE ARTICLE / MAGAZYN
========================================================= */

.article-page {
    --article-paper: #f2eee7;
    --article-black: #0b0b0b;
    --article-line: rgba(0,0,0,.16);

    width: 100%;

    background: var(--article-paper);

    color: #111;

    overflow: hidden;
}


/* ---------------------------------------------------------
   COMMON
--------------------------------------------------------- */

.article-kicker {
    margin: 0;

    font-size: 9px;
    line-height: 1.4;

    letter-spacing: .18em;
    text-transform: uppercase;
}

.article-kicker--light {
    color: rgba(255,255,255,.62);
}

.article-line {
    display: block;

    width: 30px;
    height: 1px;

    margin: 22px 0;

    background: #111;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.article-hero {
    min-height: 660px;

    box-sizing: border-box;

    padding:
        155px
        var(--pad)
        55px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;

    background: var(--article-paper);
}

.article-hero__meta {
    display: flex;

    align-items: center;

    gap: 18px;

    color: #555;
}

.article-hero__meta > span {
    display: block;

    width: 18px;
    height: 1px;

    background: #777;
}

.article-hero__meta p {
    margin: 0;

    font-size: 8px;

    letter-spacing: .10em;

    text-transform: uppercase;
}

.article-hero__title {
    max-width: 1250px;

    margin-top: 70px;
}

.article-hero h1 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            58px,
            6.3vw,
            112px
        );

    line-height: .9;

    letter-spacing: -.05em;

    font-weight: 400;
}

.article-hero__lead {
    max-width: 620px;

    margin:
        35px
        0
        0;

    font-size: 15px;

    line-height: 1.6;

    color: #4c4c4c;
}

.article-hero__bottom {
    margin-top: 70px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;
}

.article-hero__bottom p {
    margin: 0;

    font-size: 9px;

    line-height: 1.65;

    color: #666;
}

.article-small-label {
    margin-bottom: 4px !important;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: #111 !important;
}

.article-scroll {
    font-size: 24px;

    color: #111;
}


/* ---------------------------------------------------------
   COVER
--------------------------------------------------------- */

.article-cover {
    width: 100%;

    margin: 0;

    background: #34302d;
}

.article-cover img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 850px;

    object-fit: cover;
}

.article-cover--placeholder {
    min-height: 650px;

    background:
        linear-gradient(
            135deg,
            #26231f,
            #777068
        );
}


/* ---------------------------------------------------------
   INTRO
--------------------------------------------------------- */

.article-intro {
    display: grid;

    grid-template-columns:
        28%
        72%;

    padding:
        70px
        var(--pad);

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

.article-intro__side {
    padding-right: 60px;
}

.article-intro__side > p:last-child {
    margin: 0;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.article-intro__main {
    max-width: 900px;
}

.article-intro__main p {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            29px,
            2.8vw,
            48px
        );

    line-height: 1.12;

    letter-spacing: -.025em;
}


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

.article-content {
    width:
        min(
            100% - 44px,
            820px
        );

    margin:
        0
        auto;

    padding:
        80px
        0
        95px;

    font-size: 16px;

    line-height: 1.75;
}

.article-content > *:first-child {
    margin-top: 0;
}

.article-content p {
    margin:
        0
        0
        28px;
}

.article-content h2 {
    margin:
        70px
        0
        25px;

    font-family: var(--serif);

    font-size:
        clamp(
            37px,
            3vw,
            54px
        );

    line-height: 1;

    letter-spacing: -.035em;

    font-weight: 400;
}

.article-content h3 {
    margin:
        50px
        0
        20px;

    font-family: var(--serif);

    font-size: 31px;

    line-height: 1.05;

    font-weight: 400;
}

.article-content h4 {
    margin:
        40px
        0
        18px;

    font-size: 17px;
}

.article-content a {
    border-bottom:
        1px solid
        #111;
}

.article-content ul,
.article-content ol {
    margin:
        25px
        0
        35px;

    padding-left: 24px;
}

.article-content li {
    margin-bottom: 9px;
}


/* WP IMAGES */

.article-content figure {
    width:
        calc(
            100% + 220px
        );

    margin:
        60px
        0
        60px
        -110px;
}

.article-content figure img {
    width: 100%;
    height: auto;
}

.article-content figcaption {
    margin-top: 10px;

    font-size: 9px;

    line-height: 1.5;

    letter-spacing: .06em;

    color: #777;
}


/* FULL WIDTH WP IMAGE */

.article-content .alignwide {
    width:
        calc(
            100% + 360px
        );

    max-width: none;

    margin-left:
        -180px;
}

.article-content .alignfull {
    width: 100vw;

    max-width: none;

    margin-left:
        calc(
            50% - 50vw
        );
}


/* QUOTES */

.article-content blockquote {
    width:
        calc(
            100% + 120px
        );

    margin:
        70px
        0
        70px
        -60px;

    padding:
        20px
        0
        20px
        45px;

    border-left:
        1px solid
        #111;
}

.article-content blockquote p {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            29px,
            2.6vw,
            45px
        );

    line-height: 1.13;

    letter-spacing: -.025em;
}

.article-content blockquote cite {
    display: block;

    margin-top: 20px;

    font-family: var(--sans);

    font-size: 8px;

    letter-spacing: .12em;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   META
--------------------------------------------------------- */

.article-meta {
    display: grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr;

    gap: 45px;

    padding:
        40px
        var(--pad);

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

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

.article-meta > div {
    min-width: 0;
}

.article-meta > div:not(:first-child) {
    padding-left: 35px;

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

.article-meta p {
    margin:
        13px
        0
        0;

    font-size: 11px;
}

.article-meta__categories {
    display: flex;

    flex-wrap: wrap;

    gap:
        8px
        16px;

    margin-top: 13px;
}

.article-meta__categories a {
    font-size: 11px;

    border-bottom:
        1px solid
        #111;
}


/* ---------------------------------------------------------
   PREV / NEXT
--------------------------------------------------------- */

.article-navigation {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    background: var(--article-paper);
}

.article-navigation__item {
    min-height: 180px;

    box-sizing: border-box;

    padding:
        45px
        var(--pad);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.article-navigation__item + .article-navigation__item {
    border-left:
        1px solid
        var(--article-line);
}

.article-navigation__item a {
    max-width: 500px;

    display: flex;

    align-items: center;

    gap: 24px;

    color: #111;
}

.article-navigation__item strong {
    font-family: var(--serif);

    font-size:
        clamp(
            23px,
            2vw,
            34px
        );

    line-height: 1;

    font-weight: 400;
}

.article-navigation__item a > span {
    font-size: 21px;
}

.article-navigation__item--next {
    align-items: flex-end;

    text-align: right;
}

.article-navigation__item--next a {
    justify-content: flex-end;
}

.article-navigation__empty {
    font-family: var(--serif);

    font-size: 28px;
}


/* ---------------------------------------------------------
   RELATED
--------------------------------------------------------- */

.article-related {
    padding:
        70px
        var(--pad);

    background: #e8e2da;

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

.article-related__header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;

    margin-bottom: 35px;
}

.article-related__header h2 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            40px,
            4vw,
            68px
        );

    line-height: .95;

    font-weight: 400;
}

.article-related__grid {
    display: grid;

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

    gap: 18px;
}

.article-related-card__image {
    width: 100%;

    aspect-ratio:
        1.4;

    margin-bottom: 17px;

    background:
        linear-gradient(
            135deg,
            #a59c92,
            #4a4540
        );

    background-size: cover;

    background-position: center;
}

.article-related-card__meta {
    margin:
        0
        0
        10px;

    font-size: 8px;

    letter-spacing: .10em;

    text-transform: uppercase;

    color: #666;
}

.article-related-card__meta span {
    margin:
        0
        6px;

    color: #aaa;
}

.article-related-card h3 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(
            25px,
            2vw,
            35px
        );

    line-height: .96;

    font-weight: 400;
}


/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */

.article-cta {
    min-height: 250px;

    display: grid;

    grid-template-columns:
        1fr
        auto;

    align-items: center;

    gap: 60px;

    padding:
        55px
        var(--pad);

    background: #0b0b0b;

    color: #fff;
}

.article-cta h2 {
    max-width: 850px;

    margin:
        13px
        0
        0;

    font-family: var(--serif);

    font-size:
        clamp(
            39px,
            4vw,
            70px
        );

    line-height: .94;

    font-weight: 400;
}

.article-cta > a {
    min-width: 180px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding:
        16px
        18px;

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

    color: #fff;

    font-size: 9px;

    letter-spacing: .10em;

    text-transform: uppercase;
}

.article-cta > a span {
    font-size: 18px;
}



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

@media (max-width: 1100px) {

    .article-intro {
        grid-template-columns:
            32%
            68%;
    }

    .article-content figure {
        width:
            calc(
                100% + 100px
            );

        margin-left:
            -50px;
    }

    .article-content .alignwide {
        width:
            calc(
                100% + 140px
            );

        margin-left:
            -70px;
    }

}


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

@media (max-width: 760px) {

    .article-hero {
        min-height: 620px;

        padding:
            135px
            22px
            50px;
    }

    .article-hero__meta {
        flex-wrap: wrap;

        gap: 10px;
    }

    .article-hero__title {
        margin-top: 50px;
    }

    .article-hero h1 {
        font-size: 14.5vw;
    }

    .article-hero__bottom {
        margin-top: 50px;
    }


    .article-cover--placeholder {
        min-height: 80vw;
    }


    .article-intro {
        display: block;

        padding:
            50px
            22px;
    }

    .article-intro__side {
        margin-bottom: 40px;

        padding: 0;
    }

    .article-intro__main p {
        font-size: 8.5vw;
    }


    .article-content {
        width:
            calc(
                100% - 44px
            );

        padding:
            60px
            0;
    }

    .article-content h2 {
        font-size: 10vw;
    }

    .article-content figure,
    .article-content .alignwide {
        width: 100%;

        margin:
            45px
            0;
    }

    .article-content blockquote {
        width: 100%;

        box-sizing: border-box;

        margin:
            55px
            0;

        padding-left: 25px;
    }


    .article-meta {
        display: block;

        padding:
            40px
            22px;
    }

    .article-meta > div {
        padding:
            25px
            0 !important;

        border-left:
            0 !important;

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

    .article-meta > div:first-child {
        border-top: 0;
    }


    .article-navigation {
        display: block;
    }

    .article-navigation__item {
        min-height: 160px;

        padding:
            40px
            22px;
    }

    .article-navigation__item + .article-navigation__item {
        border-left: 0;

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


    .article-related {
        padding:
            55px
            22px;
    }

    .article-related__header {
        display: block;
    }

    .article-related__header h2 {
        margin-top: 12px;
    }

    .article-related__grid {
        display: block;
    }

    .article-related-card {
        margin-bottom: 40px;
    }

    .article-related-card h3 {
        font-size: 8vw;
    }


    .article-cta {
        display: block;

        padding:
            55px
            22px;
    }

    .article-cta h2 {
        font-size: 11vw;
    }

    .article-cta > a {
        width: 100%;

        box-sizing: border-box;

        margin-top: 35px;
    }

}

/* =========================================================
   SINGLE ARTICLE — TOP SPACING FIX
========================================================= */

@media (min-width: 761px) {

    .article-hero {
        min-height: 700px !important;
        padding-top: 205px !important;
    }

}


/* Header on light article hero: dark at top, white after scroll */
body.single-post .site-header:not(.is-scrolled) {
    color: #111;
}
body.single-post .site-header:not(.is-scrolled) .site-nav--desktop a,
body.single-post .site-header:not(.is-scrolled) .site-contact-link,
body.single-post .site-header:not(.is-scrolled) .site-lang {
    color: #111;
}
body.single-post .site-header:not(.is-scrolled) .site-brand img {
    filter: none;
}
body.single-post .site-header.is-scrolled {
    color: #fff;
}
body.single-post .site-header.is-scrolled .site-nav--desktop a,
body.single-post .site-header.is-scrolled .site-contact-link,
body.single-post .site-header.is-scrolled .site-lang {
    color: #fff;
}
body.single-post .site-header.is-scrolled .site-brand img {
    filter: invert(1);
}