/* =========================================================
   KODAMA JOURNAL
   articles.css

   Editorial long-form article system
   Dark / cinematic / slow motion
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --black: #000000;
    --black-soft: #050505;
    --black-editorial: #080808;

    --white: #f2f0ea;
    --white-soft: rgba(242, 240, 234, 0.78);
    --white-muted: rgba(242, 240, 234, 0.52);
    --white-faint: rgba(242, 240, 234, 0.28);

    --line: rgba(255, 255, 255, 0.14);
    --line-soft: rgba(255, 255, 255, 0.075);

    --serif: "Playfair Display", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif;

    --ease:
        cubic-bezier(.16, 1, .3, 1);

    --ease-slow:
        cubic-bezier(.22, 1, .36, 1);

    --page-x:
        clamp(22px, 4vw, 72px);

    --content-max:
        1480px;

}


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

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


html {
    margin: 0;
    padding: 0;

    background:
        #000;

    scroll-behavior:
        auto;
}


body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background:
        #000;

    color:
        var(--white);

    font-family:
        var(--sans);

    overflow-x:
        hidden;

    cursor:
        none;
}


body.is-smooth-scrolling {
    overscroll-behavior:
        none;
}


img {
    display:
        block;

    max-width:
        100%;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


button,
a {
    cursor:
        none;
}


figure,
blockquote {
    margin:
        0;
}


::selection {
    background:
        var(--white);

    color:
        #000;
}


/* =========================================================
   CUSTOM CURSOR
========================================================= */

.custom-cursor {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        68px;

    height:
        68px;

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

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    opacity:
        0;

    transform:
        translate3d(-100px, -100px, 0);

    transition:
        width .65s var(--ease-slow),
        height .65s var(--ease-slow),
        background .65s var(--ease-slow),
        border-color .65s var(--ease-slow),
        opacity .4s ease;

    mix-blend-mode:
        difference;

    will-change:
        transform;

}


.custom-cursor.is-visible {
    opacity:
        1;
}


.custom-cursor.is-active {

    width:
        94px;

    height:
        94px;

    background:
        #fff;

    border-color:
        #fff;

}


.custom-cursor-text {

    font-family:
        var(--sans);

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        .18em;

    color:
        #fff;

    opacity:
        0;

    transform:
        scale(.7);

    transition:
        opacity .5s ease,
        transform .7s var(--ease-slow);

}


.custom-cursor.is-active
.custom-cursor-text {

    opacity:
        1;

    color:
        #000;

    transform:
        scale(1);

}


/* =========================================================
   ARTICLE PROGRESS
========================================================= */

.article-progress {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    z-index:
        9998;

    background:
        rgba(255, 255, 255, .035);

}


.article-progress-bar {

    display:
        block;

    width:
        100%;

    height:
        100%;

    background:
        rgba(255, 255, 255, .92);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    will-change:
        transform;

}


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

.article-header {

    position:
        absolute;

    top:
        0;

    left:
        0;

    z-index:
        100;

    width:
        100%;

    padding:
        30px var(--page-x);

    display:
        grid;

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

    align-items:
        center;

    font-size:
        10px;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


.article-back {

    justify-self:
        start;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    transition:
        transform .7s var(--ease-slow);

}


.article-back-arrow {

    font-size:
        16px;

    transition:
        transform .7s var(--ease-slow);

}


.article-back:hover
.article-back-arrow {

    transform:
        translateX(-6px);

}


.article-wordmark {

    justify-self:
        center;

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        .23em;

    transition:
        transform .7s var(--ease-slow);

}


.article-header-index {

    justify-self:
        end;

    color:
        var(--white-muted);

}


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

.article-hero {

    position:
        relative;

    min-height:
        100svh;

    padding:
        145px
        var(--page-x)
        90px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    background:
        #000;

}


.article-hero-meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    font-size:
        10px;

    letter-spacing:
        .16em;

    color:
        var(--white-muted);

}


.article-meta-line {

    width:
        30px;

    height:
        1px;

    background:
        var(--line);

}


.article-hero-title-wrap {

    width:
        100%;

    margin:
        auto 0;

    padding:
        55px 0 70px;

    overflow:
        visible;

}


.article-hero-title {

    margin:
        0;

    padding:
        0 0 .12em;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        visible;

    font-family:
        var(--serif);


    font-size:
        clamp(64px, 10.9vw, 200px);

    line-height:
        .91;

    letter-spacing:
        -.065em;

}


.article-title-line {

    position:
        relative;

    display:
        block;

    width:
        fit-content;

    max-width:
        100%;

    padding:
        0 0 .06em;

    overflow:
        visible;

    will-change:
        transform,
        opacity;

}


.article-title-line-offset {

    align-self:
        flex-end;

    padding-right:
        5vw;

}




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

.article-hero-bottom {

    display:
        grid;

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

    align-items:
        end;

    gap:
        40px;

}


.article-hero-number {

    font-family:
        var(--serif);

    font-size:
        clamp(38px, 4.4vw, 70px);

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

}


.article-hero-introduction p {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(20px, 2vw, 31px);

    line-height:
        1.45;

    letter-spacing:
        -.015em;

}


/* =========================================================
   HERO SCROLL HINT
========================================================= */

.article-scroll-hint {

    position:
        absolute;

    right:
        var(--page-x);

    bottom:
        48px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    font-size:
        9px;

    letter-spacing:
        .18em;

    color:
        var(--white-muted);

    transform:
        rotate(90deg);

    transform-origin:
        bottom right;

}


.article-scroll-line {

    width:
        70px;

    height:
        1px;

    background:
        var(--line);

}


/* =========================================================
   GLOBAL CONTENT
========================================================= */

.article-container {

    width:
        min(
            calc(100% - var(--page-x) * 2),
            var(--content-max)
        );

    margin:
        0 auto;

}


/* =========================================================
   OPENING
========================================================= */

.article-opening {

    padding:
        clamp(150px, 18vw, 300px)
        0
        clamp(140px, 17vw, 270px);

    display:
        grid;

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

    gap:
        clamp(30px, 6vw, 120px);

}


.article-side-note {

    padding-top:
        15px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        26px;

    font-size:
        10px;

    letter-spacing:
        .17em;

    color:
        var(--white-muted);

}


.article-side-note span {

    font-family:
        var(--serif);

    font-size:
        39px;

    line-height:
        1;

    letter-spacing:
        0;

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

}


.article-side-note p {

    max-width:
        120px;

    margin:
        0;

    font-size:
        10px;

    line-height:
        1.7;

}


.article-opening-content {

    grid-column:
        2;

    display:
        flex;

    flex-direction:
        column;

    gap:
        34px;

}


.article-opening-content p {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(21px, 2vw, 30px);

    line-height:
        1.72;

    color:
        var(--white-soft);

}


.article-dropcap-text {

    font-size:
        clamp(27px, 2.65vw, 42px) !important;

    line-height:
        1.55 !important;

}


.dropcap {

    float:
        left;

    margin:
        .07em .13em 0 0;

    font-size:
        4.6em;

    line-height:
        .7;

}


/* =========================================================
   FULL BLEED IMAGES
========================================================= */

.article-image-break {

    position:
        relative;

    width:
        100%;

    height:
        clamp(660px, 95vh, 1080px);

    margin:
        0;

    overflow:
        hidden;

}


.article-image-break::before,
.article-image-break::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    z-index:
        4;

    width:
        100%;

    height:
        32%;

    pointer-events:
        none;

}


.article-image-break::before {

    top:
        -1px;

    background:
        linear-gradient(
            to bottom,
            #000 0%,
            rgba(0, 0, 0, 0) 8%,
            rgba(0, 0, 0, 0) 25%,
            rgba(0, 0, 0, 0) 63%,
            transparent 100%
        );

}


.article-image-break::after {

    bottom:
        -1px;

    background:
        linear-gradient(
            to top,
            #000 0%,
            rgba(0, 0, 0, 0) 8%,
            rgba(0, 0, 0, 0) 25%,
            rgba(0, 0, 0, 0) 63%,
            transparent 100%
        );

}


.article-image-parallax {

    position:
        absolute;

    inset:
        -12% 0;

    height:
        124%;

    will-change:
        transform;

}


.article-image-parallax img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;


    transform:
        scale(1.035);

    transition:
        filter 1.8s var(--ease-slow),
        transform 2s var(--ease-slow);

}


[data-image-reveal] {

    opacity:
        0;

    transform:
        scale(.985);

    transition:
        opacity 1.6s var(--ease-slow),
        transform 2s var(--ease-slow);

}


[data-image-reveal].is-visible {

    opacity:
        1;

    transform:
        scale(1);

}


[data-image-reveal].is-visible
.article-image-parallax img {

    transform:
        scale(1);

}


.article-image-darken {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.44),
            rgba(0,0,0,.08) 45%,
            rgba(0,0,0,.22)
        );

}


.article-image-break figcaption {

    position:
        absolute;

    left:
        var(--page-x);

    right:
        var(--page-x);

    bottom:
        11%;

    z-index:
        6;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        30px;

}


.article-image-break figcaption span {

    font-size:
        10px;

    letter-spacing:
        .18em;

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

}


.article-image-break figcaption p {

    max-width:
        450px;

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(19px, 1.6vw, 27px);

    line-height:
        1.35;

}


.article-image-break-tall {

    height:
        110vh;

}


.article-image-floating-text {

    position:
        absolute;

    z-index:
        6;

    left:
        var(--page-x);

    top:
        50%;

    transform:
        translateY(-50%);

    display:
        flex;

    flex-direction:
        column;

    font-family:
        var(--serif);

    font-size:
        clamp(57px, 10vw, 180px);

    line-height:
        .77;

    letter-spacing:
        -.055em;

    mix-blend-mode:
        difference;

    will-change:
        transform;

}


.article-image-floating-text span:nth-child(2),
.article-image-floating-text span:nth-child(4) {

    font-style:
        italic;

    padding-left:
        12vw;

}


/* =========================================================
   ARTICLE SECTIONS
========================================================= */

.article-section {

    padding:
        clamp(150px, 18vw, 290px)
        0;

    display:
        grid;

    grid-template-columns:
        minmax(150px, .75fr)
        minmax(0, 3fr);

    gap:
        clamp(40px, 8vw, 160px);

}


.article-section-index {

    display:
        flex;

    flex-direction:
        column;

    gap:
        22px;

    padding-top:
        12px;

    font-size:
        10px;

    letter-spacing:
        .17em;

    line-height:
        1.65;

    color:
        var(--white-muted);

}


.article-section-index span:first-child {

    font-family:
        var(--serif);

    font-size:
        42px;

    line-height:
        1;

    letter-spacing:
        0;

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

}


.article-section-index span:last-child {

    max-width:
        150px;

    font-size:
        10px;

    line-height:
        1.65;

}


.article-section-main {

    max-width:
        1050px;

}


.article-kicker {

    margin:
        0 0 58px;

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        .21em;

    line-height:
        1.65;

    color:
        var(--white-muted);

}


.article-section-title {

    max-width:
        890px;

    margin:
        0 0
        clamp(80px, 9vw, 145px);

    font-family:
        var(--serif);


    font-size:
        clamp(48px, 6vw, 103px);

    line-height:
        1.01;

    letter-spacing:
        -.045em;

    will-change:
        transform;

}




.article-section-title-wide {

    max-width:
        1000px;

}


/* =========================================================
   TWO COLUMN TEXT
========================================================= */

.article-text-columns {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        clamp(50px, 8vw, 120px);

}


.article-text-columns div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        29px;

}


.article-text-columns p,
.article-reading-column p,
.article-text-asymmetric p {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(19px, 1.45vw, 24px);

    line-height:
        1.75;

    color:
        var(--white-soft);

}


/* =========================================================
   READING COLUMN
========================================================= */

.article-reading-column {

    width:
        min(100%, 720px);

    display:
        flex;

    flex-direction:
        column;

    gap:
        34px;

}


/* =========================================================
   STATEMENT
========================================================= */

.article-statement {

    width:
        min(
            calc(100% - var(--page-x) * 2),
            1540px
        );

    margin:
        0 auto;

    padding:
        clamp(130px, 15vw, 230px)
        0;

}


.article-statement-line {

    width:
        100%;

    height:
        1px;

    background:
        var(--line);

}


.article-statement p {

    max-width:
        1150px;

    margin:
        clamp(70px, 8vw, 120px) auto;

    font-family:
        var(--serif);

    font-size:
        clamp(48px, 6.6vw, 115px);

    line-height:
        1;

    letter-spacing:
        -.045em;

    text-align:
        center;

    will-change:
        transform;

}


.article-statement em {

    display:
        block;


}


/* =========================================================
   PULL QUOTE
========================================================= */

.article-pull-quote {

    position:
        relative;

    width:
        min(100%, 920px);

    margin:
        clamp(110px, 12vw, 190px) 0;

    padding:
        clamp(55px, 7vw, 100px)
        clamp(30px, 6vw, 85px);

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

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

}


.article-pull-mark {

    position:
        absolute;

    top:
        18px;

    left:
        0;

    font-family:
        var(--serif);

    font-size:
        100px;

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

}


.article-pull-quote blockquote {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(37px, 4.6vw, 78px);

    line-height:
        1.08;

    letter-spacing:
        -.035em;

}


.article-pull-caption {

    display:
        block;

    margin-top:
        43px;

    font-size:
        9px;

    letter-spacing:
        .18em;

    color:
        var(--white-muted);

}


/* =========================================================
   ASYMMETRIC TEXT
========================================================= */

.article-text-asymmetric {

    display:
        grid;

    grid-template-columns:
        1.35fr .75fr;

    gap:
        clamp(50px, 10vw, 160px);

}


.article-text-asymmetric-large p {

    font-size:
        clamp(31px, 3vw, 52px);

    line-height:
        1.45;

}


.article-text-asymmetric-small {

    display:
        flex;

    flex-direction:
        column;

    gap:
        30px;

}


/* =========================================================
   INTERLUDE
========================================================= */

.article-interlude {

    position:
        relative;

    min-height:
        100vh;

    padding:
        15vh var(--page-x);

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

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

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

}


.article-interlude-word {

    position:
        absolute;

    left:
        -2vw;

    top:
        50%;

    font-family:
        var(--serif);

    font-size:
        clamp(130px, 27vw, 500px);

    line-height:
        .7;

    letter-spacing:
        -.065em;

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

    transform:
        translateY(-50%);

    white-space:
        nowrap;

    pointer-events:
        none;

    will-change:
        transform;

}


.article-interlude-content {

    position:
        relative;

    z-index:
        2;

    width:
        min(700px, 100%);

    margin-left:
        auto;

}


.article-interlude-content span {

    display:
        block;

    margin-bottom:
        32px;

    font-size:
        10px;

    letter-spacing:
        .18em;

    color:
        var(--white-muted);

}


.article-interlude-content p {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(36px, 4.6vw, 72px);

    line-height:
        1.15;

    letter-spacing:
        -.03em;

}


/* =========================================================
   FACT GRID
========================================================= */

.article-fact-grid {

    margin-top:
        clamp(100px, 12vw, 190px);

    display:
        grid;

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

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

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

}


.article-fact {

    min-height:
        340px;

    padding:
        42px 34px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    gap:
        60px;

}


.article-fact +
.article-fact {

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

}


.article-fact-number {

    font-family:
        var(--serif);

    font-size:
        clamp(44px, 4.7vw, 76px);

    line-height:
        .95;

    letter-spacing:
        -.04em;

}


.article-fact p {

    max-width:
        250px;

    margin:
        0;

    font-size:
        12px;

    line-height:
        1.7;

    color:
        var(--white-muted);

}


/* =========================================================
   ENDING
========================================================= */

.article-ending {

    padding:
        clamp(170px, 22vw, 360px)
        var(--page-x);

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

}


.article-ending-inner {

    width:
        min(100%, 1450px);

    margin:
        auto;

}


.article-ending-index {

    margin-bottom:
        80px;

    font-size:
        10px;

    letter-spacing:
        .2em;

    color:
        var(--white-muted);

}


.article-ending-title {

    width:
        min(100%, 1250px);

    margin:
        0;

    padding-bottom:
        .08em;

    font-family:
        var(--serif);

    font-size:
        clamp(62px, 8.2vw, 145px);


    line-height:
        .93;

    letter-spacing:
        -.055em;

    will-change:
        transform;

}


.article-ending-title em {

    display:
        block;

    margin-left:
        8vw;


}


.article-ending-copy {

    width:
        min(620px, 100%);

    margin:
        clamp(110px, 13vw, 210px)
        7vw
        0 auto;

    display:
        flex;

    flex-direction:
        column;

    gap:
        31px;

}


.article-ending-copy p {

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(19px, 1.55vw, 25px);

    line-height:
        1.75;

    color:
        var(--white-soft);

}


.article-ending-statement {

    margin-top:
        clamp(140px, 16vw, 260px);

    padding-top:
        38px;

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

    display:
        flex;

    justify-content:
        space-between;

    gap:
        40px;

    font-family:
        var(--serif);

    font-size:
        clamp(22px, 2vw, 32px);

}


.article-ending-statement strong {


    font-style:
        italic;

}


/* =========================================================
   SOURCES
========================================================= */

.article-sources {

    padding:
        clamp(120px, 15vw, 220px)
        var(--page-x);

    background:
        #050505;

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

}


.article-sources-inner {

    width:
        min(100%, 1450px);

    margin:
        auto;

}


.article-sources-heading {

    padding-bottom:
        28px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

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

    font-size:
        10px;

    letter-spacing:
        .18em;

    color:
        var(--white-muted);

}


.article-sources-grid {

    margin-top:
        10px;
}


.article-source {

    padding:
        35px 0;

    display:
        grid;

    grid-template-columns:
        80px minmax(0, 700px);

    gap:
        40px;

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

}


.article-source > span {

    font-family:
        var(--serif);

    font-size:
        22px;

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

}


.article-source strong {

    display:
        block;

    margin-bottom:
        10px;

    font-family:
        var(--serif);

    font-size:
        21px;

        font-weight:
        500;
}


.article-source p {

    margin:
        0;

    font-size:
        15px;

    line-height:
        1.7;

    color:
        var(--white-soft);

}


/* =========================================================
   NEXT STORY
========================================================= */

.article-next {

    padding:
        0 var(--page-x);

    background:
        #000;

}


.article-next-link {

    position:
        relative;

    width:
        min(100%, 1500px);

    min-height:
        85vh;

    margin:
        auto;

    padding:
        13vh 0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

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

}


.article-next-label {

    margin-bottom:
        70px;

    font-size:
        10px;

    letter-spacing:
        .2em;

    color:
        var(--white-muted);

}


.article-next-title {

    max-width:
        1100px;

    font-family:
        var(--serif);

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

    line-height:
        .9;

    letter-spacing:
        -.055em;

    transition:
        transform 1s var(--ease-slow);

}


.article-next-title em {

    display:
        block;


    margin-left:
        9vw;

}


.article-next-arrow {

    position:
        absolute;

    right:
        0;

    bottom:
        13vh;

    font-family:
        var(--serif);

    font-size:
        clamp(40px, 5vw, 80px);

    transition:
        transform 1s var(--ease-slow);

}


.article-next-link:hover
.article-next-title {

    transform:
        translateX(12px);

}


.article-next-link:hover
.article-next-arrow {

    transform:
        translate(10px, -10px);

}


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

.article-footer {

    padding:
        80px var(--page-x) 30px;

    background:
        #000;

}


.article-footer-top {

    width:
        min(100%, 1500px);

    margin:
        0 auto 120px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        40px;

}


.article-footer-wordmark {

    font-size:
        clamp(55px, 9vw, 150px);

    font-weight:
        600;

    letter-spacing:
        -.06em;

}


.article-footer-top p {

    margin:
        0;

    max-width:
        250px;

    font-family:
        var(--serif);

    font-size:
        18px;

    line-height:
        1.35;

}


.article-footer-bottom {

    width:
        min(100%, 1500px);

    margin:
        auto;

    padding-top:
        22px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

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

    font-size:
        9px;

    letter-spacing:
        .15em;

    color:
        var(--white-muted);

}


/* =========================================================
   REVEAL
========================================================= */

[data-reveal] {

    opacity:
        0;

    transform:
        translate3d(0, 48px, 0);

    transition:
        opacity 1.15s var(--ease-slow),
        transform 1.25s var(--ease-slow);

    will-change:
        opacity,
        transform;

}


[data-reveal].is-revealed {

    opacity:
        1;

    transform:
        translate3d(0, 0, 0);

}


/* =========================================================
   HERO TITLE ENTRANCE
========================================================= */

/*
   IMPORTANT FIX:

   The old clip-path started from the exact bottom edge
   of the line box.

   With a serif font this could visually cut letters such
   as g / p / y / j.

   The negative top/bottom inset gives the glyphs room.
*/

.article-title-line {

    opacity:
        0;

    transform:
        translate3d(0, 105px, 0);

    clip-path:
        inset(-.15em 0 110% 0);

}


body.article-loaded
.article-title-line {

    opacity:
        1;

    transform:
        translate3d(0, 0, 0);

    clip-path:
        inset(-.15em 0 -.15em 0);

    transition:
        opacity 1.25s var(--ease-slow),
        transform 1.55s var(--ease-slow),
        clip-path 1.55s var(--ease-slow);

}


body.article-loaded
.article-title-line:nth-child(2) {

    transition-delay:
        .17s;

}


body.article-loaded
.article-hero-meta {

    opacity:
        1;

    transform:
        translate3d(0, 0, 0);

    transition:
        opacity 1.25s var(--ease-slow) .2s,
        transform 1.35s var(--ease-slow) .2s;

}


body.article-loaded
.article-hero-number,
body.article-loaded
.article-hero-introduction {

    opacity:
        1;

    transform:
        translate3d(0, 0, 0);

    transition:
        opacity 1.25s var(--ease-slow) .5s,
        transform 1.45s var(--ease-slow) .5s;

}


body.article-loaded
.article-scroll-hint {

    opacity:
        1;

    transform:
        translate3d(0, 0, 0);

    transition:
        opacity 1.25s var(--ease-slow) .8s,
        transform 1.35s var(--ease-slow) .8s;

}


/* =========================================================
   SMOOTH SCROLL SUPPORT
========================================================= */

body.is-smooth-scrolling main,
body.is-smooth-scrolling footer,
body.is-smooth-scrolling header {

    will-change:
        transform;

}


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

@media (max-width: 900px) {

    body {
        cursor:
            auto;
    }


    a,
    button {
        cursor:
            pointer;
    }


    .custom-cursor {
        display:
            none;
    }


    .article-header {

        grid-template-columns:
            1fr auto;

    }


    .article-header-index {
        display:
            none;
    }


    .article-wordmark {

        justify-self:
            end;

    }


    .article-hero {

        min-height:
            100svh;

        padding-top:
            130px;

        padding-bottom:
            70px;

    }


    .article-hero-title-wrap {

        padding-top:
            70px;

        padding-bottom:
            90px;

    }


    .article-hero-title {

        font-size:
            clamp(65px, 16vw, 125px);

        line-height:
            .94;

    }


    .article-title-line-offset {

        align-self:
            flex-start;

        padding-right:
            0;

    }


    .article-hero-bottom {

        grid-template-columns:
            1fr;

        margin-top:
            50px;

    }


    .article-scroll-hint {
        display:
            none;
    }


    .article-opening {

        grid-template-columns:
            1fr;

        gap:
            70px;

    }


    .article-side-note {

        grid-column:
            auto;

        flex-direction:
            row;

        align-items:
            center;

    }


    .article-opening-content {

        grid-column:
            auto;

    }


    .article-section {

        grid-template-columns:
            1fr;

        gap:
            65px;

    }


    .article-section-index {

        flex-direction:
            row;

        align-items:
            center;

    }


    .article-section-index span:first-child {

        font-size:
            39px;

    }


    .article-text-columns,
    .article-text-asymmetric {

        grid-template-columns:
            1fr;

    }


    .article-fact-grid {

        grid-template-columns:
            1fr;

    }


    .article-fact +
    .article-fact {

        border-left:
            0;

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

    }


    .article-fact {

        min-height:
            270px;

    }


    .article-image-floating-text {

        font-size:
            clamp(55px, 16vw, 100px);

    }


    .article-ending-title em {

        margin-left:
            0;

    }


    .article-ending-copy {

        margin-left:
            0;

    }

}


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

@media (max-width: 600px) {

    :root {

        --page-x:
            20px;

    }


    .article-header {

        padding-top:
            22px;

    }


    .article-hero {

        min-height:
            96svh;

        padding-bottom:
            42px;

    }


    .article-hero-meta {

        gap:
            10px;

    }


    .article-hero-title-wrap {

        padding-top:
            65px;

        padding-bottom:
            95px;

    }


    .article-hero-title {

        font-size:
            clamp(57px, 17vw, 87px);

        line-height:
            .96;

    }


    .article-title-line {

        padding-bottom:
            .09em;

    }


    .article-hero-introduction p {

        font-size:
            19px;

    }


    .article-side-note span {

        font-size:
            36px;

    }


    .article-image-break,
    .article-image-break-tall {

        height:
            78vh;

    }


    .article-image-break figcaption {

        bottom:
            14%;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .article-image-floating-text span:nth-child(2),
    .article-image-floating-text span:nth-child(4) {

        padding-left:
            6vw;

    }


    .article-section-title {

        font-size:
            clamp(45px, 14vw, 70px);

    }


    .article-statement p {

        font-size:
            clamp(42px, 13vw, 68px);

    }


    .article-pull-quote {

        padding-left:
            0;

        padding-right:
            0;

    }


    .article-pull-quote blockquote {

        font-size:
            clamp(36px, 11vw, 55px);

    }


    .article-interlude {

        min-height:
            80vh;

    }


    .article-interlude-content p {

        font-size:
            39px;

    }


    .article-ending-title {

        font-size:
            clamp(54px, 15vw, 84px);

    }


    .article-ending-statement {

        flex-direction:
            column;

    }


    .article-source {

        grid-template-columns:
            40px 1fr;

        gap:
            20px;

    }


    .article-next-link {

        min-height:
            75vh;

    }


    .article-next-title {

        font-size:
            clamp(55px, 15vw, 90px);

    }


    .article-footer-top,
    .article-footer-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


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

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

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }


    [data-reveal],
    [data-image-reveal],
    .article-title-line,
    .article-hero-meta,
    .article-hero-number,
    .article-hero-introduction,
    .article-scroll-hint {

        opacity:
            1 !important;

        transform:
            none !important;

        clip-path:
            none !important;

    }

}