/* ==========================================================================
   BAD INFLUENCE PREMIUM
   ABOUT PAGE

   Consolidated release stylesheet.

   CONTENT ORDER
   01. About Core
   02. Incident Report
   03. The Alibi
   04. End of File

   Source modules were consolidated in their original browser load order.
   ========================================================================== */


/* ==========================================================================
   01. SOURCE MODULE: premium-about.css
   ========================================================================== */
/* BAD INFLUENCE PREMIUM ABOUT MANIFESTO V2 START */


/* ==========================================================================
   PAGE
   ========================================================================== */

.about-page {
    background:
        var(--porcelain);

    color:
        var(--brown-black);
}


.about-main {
    width:
        100%;

    overflow:
        hidden;
}


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

.about-manifesto {
    position:
        relative;

    display:
        grid;

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

    min-height:
        calc(100svh - 5rem);

    overflow:
        hidden;

    background:
        var(--porcelain);

    color:
        var(--brown-black);
}


.about-manifesto__shell {
    display:
        flex;

    flex-direction:
        column;

    width:
        min(
            calc(100% - clamp(4rem, 10vw, 12rem)),
            1760px
        );

    margin-inline:
        auto;

    padding-top:
        clamp(3rem, 6vh, 5rem);

    padding-bottom:
        clamp(3rem, 5vh, 4.5rem);
}


/* ==========================================================================
   META
   ========================================================================== */

.about-manifesto__meta {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    width:
        min(100%, 42rem);

    padding-bottom:
        0.75rem;

    border-bottom:
        1px solid
        rgba(20, 18, 16, 0.26);

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.about-manifesto__meta span:first-child {
    color:
        var(--cobalt);
}


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

.about-manifesto__stage {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(17rem, 0.3fr);

    gap:
        clamp(4rem, 9vw, 10rem);

    align-items:
        end;

    flex:
        1;

    padding-top:
        clamp(3rem, 6vh, 5rem);
}


/* ==========================================================================
   HEADLINE
   ========================================================================== */

.about-manifesto__eyebrow {
    margin:
        0
        0
        clamp(1.5rem, 3vh, 2.2rem);

    color:
        var(--cobalt);

    font-family:
        var(--font-mono);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.about-manifesto h1 {
    margin:
        0;

    font-family:
        var(--font-sans);

    font-size:
        clamp(5.7rem, 11.2vw, 13.5rem);

    font-weight:
        700;

    line-height:
        0.69;

    letter-spacing:
        -0.085em;

    text-transform:
        uppercase;
}


.about-manifesto__line {
    display:
        block;

    overflow:
        hidden;

    /*
     * Give the reveal mask extra vertical room so the
     * oversized letterforms are not clipped at the cap line.
     *
     * Negative margins cancel the added padding so the
     * surrounding hero geometry does not change.
     */

    padding:
        0.10em
        0.08em
        0.05em
        0;

    margin:
        -0.10em
        0
        -0.05em
        0;
}


.about-manifesto__line i {
    display:
        block;

    font-style:
        normal;

    transform:
        translateY(110%);

    animation:
        about-title-reveal
        900ms
        cubic-bezier(.16,.8,.25,1)
        forwards;
}


.about-manifesto__line:nth-child(2) i {
    color:
        var(--cobalt);

    animation-delay:
        110ms;
}


/* ==========================================================================
   SERIF ASIDE
   ========================================================================== */

.about-manifesto__aside {
    width:
        fit-content;

    margin:
        clamp(1.2rem, 2vh, 1.8rem)
        0
        0
        clamp(10rem, 24vw, 28rem);

    font-family:
        var(--font-serif);

    font-size:
        clamp(1.8rem, 2.9vw, 3.4rem);

    font-style:
        italic;

    line-height:
        1;

    letter-spacing:
        -0.04em;

    opacity:
        0;

    transform:
        translateX(-20px);

    animation:
        about-aside-in
        700ms
        520ms
        cubic-bezier(.2,.7,.2,1)
        forwards;
}


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

.about-manifesto__statement {
    align-self:
        end;

    padding-bottom:
        0.6rem;
}


.about-manifesto__statement > span {
    display:
        block;

    padding-bottom:
        0.8rem;

    border-bottom:
        1px solid
        rgba(20, 18, 16, 0.22);

    color:
        var(--cobalt);

    font-family:
        var(--font-mono);

    font-size:
        0.57rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.about-manifesto__statement p {
    max-width:
        22rem;

    margin:
        1.4rem
        0
        0;

    font-size:
        clamp(1.15rem, 1.45vw, 1.55rem);

    font-weight:
        500;

    line-height:
        1.25;

    letter-spacing:
        -0.025em;
}


.about-manifesto__statement small {
    display:
        block;

    max-width:
        18rem;

    margin-top:
        1.5rem;

    color:
        rgba(20, 18, 16, 0.52);

    font-family:
        var(--font-mono);

    font-size:
        0.57rem;

    line-height:
        1.55;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


/* ==========================================================================
   MANIFESTO BAND
   ========================================================================== */

.about-manifesto__band {
    position:
        relative;

    display:
        grid;

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

    min-height:
        clamp(10rem, 16vh, 13rem);

    overflow:
        hidden;

    background:
        #101010;

    color:
        var(--porcelain);
}


.about-manifesto__scan {
    position:
        absolute;

    z-index:
        4;

    top:
        0;

    left:
        0;

    width:
        0;

    height:
        3px;

    background:
        var(--cobalt);

    box-shadow:
        0 0 24px
        rgba(47, 94, 255, 0.7);

    animation:
        about-band-scan
        1100ms
        720ms
        cubic-bezier(.2,.7,.2,1)
        forwards;
}


/* ==========================================================================
   BAND ITEMS
   ========================================================================== */

.about-manifesto__item {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    min-width:
        0;

    overflow:
        hidden;

    padding:
        clamp(1.5rem, 2.5vw, 2.4rem);

    border-right:
        1px solid
        rgba(242, 240, 233, 0.13);

    opacity:
        0;

    transform:
        translateY(22px);

    animation:
        about-band-item-in
        600ms
        cubic-bezier(.2,.7,.2,1)
        forwards;
}


.about-manifesto__item:nth-of-type(2) {
    animation-delay:
        820ms;
}


.about-manifesto__item:nth-of-type(3) {
    animation-delay:
        930ms;
}


.about-manifesto__item:nth-of-type(4) {
    animation-delay:
        1040ms;
}


.about-manifesto__item:nth-of-type(5) {
    animation-delay:
        1150ms;
}


.about-manifesto__item:last-child {
    border-right:
        0;
}


.about-manifesto__item strong {
    position:
        absolute;

    top:
        -0.08em;

    right:
        -0.03em;

    pointer-events:
        none;

    color:
        rgba(255, 255, 255, 0.045);

    font-family:
        var(--font-sans);

    font-size:
        clamp(6rem, 10vw, 10rem);

    font-weight:
        700;

    line-height:
        0.8;

    letter-spacing:
        -0.08em;
}


.about-manifesto__item small {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-bottom:
        0.7rem;

    color:
        #4f73ff;

    font-family:
        var(--font-mono);

    font-size:
        0.53rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.about-manifesto__item span {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    max-width:
        13rem;

    font-family:
        var(--font-sans);

    font-size:
        clamp(1rem, 1.4vw, 1.45rem);

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        -0.035em;

    text-transform:
        uppercase;
}


/* ==========================================================================
   HOVER
   ========================================================================== */

@media (hover: hover) {

    .about-manifesto__item {
        transition:
            background-color 220ms ease;
    }


    .about-manifesto__item:hover {
        background:
            var(--cobalt);
    }


    .about-manifesto__item:hover small {
        color:
            #ffffff;
    }


    .about-manifesto__item:hover strong {
        color:
            rgba(255, 255, 255, 0.1);
    }

}


/* ==========================================================================
   ANIMATION
   ========================================================================== */

@keyframes about-title-reveal {

    to {
        transform:
            translateY(0);
    }

}


@keyframes about-aside-in {

    to {
        opacity:
            1;

        transform:
            translateX(0);
    }

}


@keyframes about-band-scan {

    to {
        width:
            100%;
    }

}


@keyframes about-band-item-in {

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


/* ==========================================================================
   ULTRAWIDE
   ========================================================================== */

@media (min-width: 1800px) {

    .about-manifesto {
        min-height:
            800px;

        height:
            min(
                calc(100svh - 5rem),
                980px
            );

        max-height:
            980px;
    }


    .about-manifesto__shell {
        min-height:
            0;
    }


    .about-manifesto h1 {
        font-size:
            clamp(
                7.7rem,
                8.6vw,
                12rem
            );
    }

}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .about-manifesto {
        min-height:
            0;
    }


    .about-manifesto__shell {
        width:
            calc(100% - 4rem);

        padding-block:
            4rem;
    }


    .about-manifesto__stage {
        grid-template-columns:
            1fr;

        gap:
            4rem;
    }


    .about-manifesto h1 {
        font-size:
            clamp(
                6rem,
                13vw,
                9rem
            );
    }


    .about-manifesto__aside {
        margin-left:
            clamp(5rem, 20vw, 13rem);
    }


    .about-manifesto__statement {
        max-width:
            34rem;
    }


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


    .about-manifesto__item {
        min-height:
            10rem;

        border-bottom:
            1px solid
            rgba(242, 240, 233, 0.13);
    }


    .about-manifesto__item:nth-child(2) {
        border-right:
            0;
    }

}


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

@media (max-width: 700px) {

    .about-manifesto {
        min-height:
            0;
    }


    .about-manifesto__shell {
        width:
            100%;

        box-sizing:
            border-box;

        padding:
            6.5rem
            1rem
            4rem;
    }


    .about-manifesto__meta {
        width:
            100%;

        font-size:
            0.54rem;
    }


    .about-manifesto__stage {
        grid-template-columns:
            1fr;

        gap:
            3.5rem;

        padding-top:
            4rem;
    }


    .about-manifesto__eyebrow {
        font-size:
            0.59rem;
    }


    .about-manifesto h1 {
        font-size:
            clamp(
                4.3rem,
                19vw,
                6rem
            );

        line-height:
            0.72;
    }


    .about-manifesto__aside {
        max-width:
            82%;

        margin:
            1.2rem
            0
            0
            10%;

        font-size:
            clamp(
                1.6rem,
                7vw,
                2.3rem
            );
    }


    .about-manifesto__statement p {
        max-width:
            26rem;
    }


    .about-manifesto__band {
        grid-template-columns:
            1fr
            1fr;

        min-height:
            0;
    }


    .about-manifesto__item {
        min-height:
            9rem;

        box-sizing:
            border-box;

        padding:
            1.25rem;

        border-bottom:
            1px solid
            rgba(242, 240, 233, 0.13);
    }


    .about-manifesto__item:nth-child(2n) {
        border-right:
            0;
    }


    .about-manifesto__item span {
        font-size:
            clamp(
                0.9rem,
                4.5vw,
                1.15rem
            );
    }

}


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

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

    .about-manifesto__line i,
    .about-manifesto__aside,
    .about-manifesto__scan,
    .about-manifesto__item {
        animation:
            none;

        opacity:
            1;

        transform:
            none;
    }


    .about-manifesto__scan {
        width:
            100%;
    }

}


/* BAD INFLUENCE PREMIUM ABOUT MANIFESTO V2 END */



/* BAD INFLUENCE ABOUT HERO BACKGROUND ART V1 */


/* ==========================================================================
   ABOUT HERO IMAGE
   ========================================================================== */

.about-manifesto {
    isolation:
        isolate;
}


/*
 * Image layer.
 *
 * Full bleed.
 * Kept behind the existing hero content.
 */

.about-manifesto::before {
    content:
        "";

    position:
        absolute;

    z-index:
        -2;

    inset:
        0;

    background-image:
        url("../images/about-hero-origin-background.webp");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center right;

    opacity:
        0;

    filter:
        saturate(0.78)
        contrast(0.92);

    transform:
        scale(1.025);

    transform-origin:
        center right;

    animation:
        aboutHeroImageIn
        1200ms
        120ms
        cubic-bezier(.2,.75,.2,1)
        forwards;

    pointer-events:
        none;
}


/*
 * Porcelain editorial wash.
 *
 * Heavy enough on the left for BAD COMPANY.
 * Much lighter on the right so the design table remains visible.
 */

.about-manifesto::after {
    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(242, 240, 233, 0.93) 0%,
            rgba(242, 240, 233, 0.88) 28%,
            rgba(242, 240, 233, 0.72) 48%,
            rgba(242, 240, 233, 0.42) 68%,
            rgba(242, 240, 233, 0.18) 100%
        );

    pointer-events:
        none;
}


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

@keyframes aboutHeroImageIn {

    from {
        opacity:
            0;

        transform:
            scale(1.025);
    }

    to {
        opacity:
            0.82;

        transform:
            scale(1);
    }

}


/* ==========================================================================
   WIDE
   ========================================================================== */

@media (min-width: 1600px) {

    .about-manifesto::before {
        background-position:
            center right;
    }


    .about-manifesto::after {
        background:
            linear-gradient(
                90deg,
                rgba(242, 240, 233, 0.92) 0%,
                rgba(242, 240, 233, 0.86) 27%,
                rgba(242, 240, 233, 0.67) 46%,
                rgba(242, 240, 233, 0.36) 66%,
                rgba(242, 240, 233, 0.14) 100%
            );
    }

}


/* ==========================================================================
   ULTRAWIDE
   ========================================================================== */

@media (min-width: 2200px) {

    .about-manifesto::before {
        background-position:
            center right;
    }


    .about-manifesto::after {
        background:
            linear-gradient(
                90deg,
                rgba(242, 240, 233, 0.92) 0%,
                rgba(242, 240, 233, 0.84) 25%,
                rgba(242, 240, 233, 0.62) 43%,
                rgba(242, 240, 233, 0.30) 63%,
                rgba(242, 240, 233, 0.10) 100%
            );
    }

}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .about-manifesto::before {
        background-position:
            66% center;
    }


    .about-manifesto::after {
        background:
            linear-gradient(
                90deg,
                rgba(242, 240, 233, 0.92) 0%,
                rgba(242, 240, 233, 0.80) 45%,
                rgba(242, 240, 233, 0.48) 72%,
                rgba(242, 240, 233, 0.22) 100%
            );
    }

}


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

@media (max-width: 700px) {

    .about-manifesto::before {
        background-position:
            70% center;
    }


    .about-manifesto::after {
        background:
            linear-gradient(
                180deg,
                rgba(242, 240, 233, 0.88) 0%,
                rgba(242, 240, 233, 0.72) 48%,
                rgba(242, 240, 233, 0.82) 100%
            );
    }

}


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

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

    .about-manifesto::before {
        opacity:
            0.82;

        transform:
            none;

        animation:
            none;
    }

}


/* BAD INFLUENCE ABOUT HERO BACKGROUND ART V1 END */


/* ==========================================================================
   02. SOURCE MODULE: premium-about-story.css
   ========================================================================== */
/* BAD INFLUENCE PREMIUM ABOUT STORY V1 START */


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

.about-story {
    position:
        relative;

    /*
     * Sticky descendants need the page viewport to remain
     * their scrolling reference.
     *
     * overflow: clip was interfering with that relationship.
     */

    overflow:
        visible;

    background:
        #101010;

    color:
        var(--porcelain);
}


.about-story__shell {
    display:
        grid;

    grid-template-columns:
        minmax(20rem, 0.68fr)
        minmax(0, 1.32fr);

    gap:
        clamp(4rem, 9vw, 10rem);

    width:
        min(
            calc(100% - clamp(4rem, 10vw, 12rem)),
            1760px
        );

    margin-inline:
        auto;

    padding-block:
        clamp(7rem, 11vw, 12rem);
}


/* ==========================================================================
   STICKY INTRO
   ========================================================================== */

.about-story__intro {
    position:
        sticky;

    top:
        clamp(7rem, 10vh, 9rem);

    align-self:
        start;
}


.about-story__meta {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    padding-bottom:
        0.75rem;

    border-bottom:
        1px solid
        rgba(242, 240, 233, 0.18);

    color:
        rgba(242, 240, 233, 0.46);

    font-family:
        var(--font-mono);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.about-story__meta span:first-child {
    color:
        #4f73ff;
}


.about-story__intro-copy {
    padding-top:
        clamp(4rem, 8vh, 7rem);
}


.about-story__eyebrow {
    margin:
        0
        0
        1.5rem;

    color:
        #4f73ff;

    font-family:
        var(--font-mono);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.about-story h2 {
    margin:
        0;

    font-family:
        var(--font-sans);

    font-size:
        clamp(4.4rem, 7vw, 8rem);

    font-weight:
        700;

    line-height:
        0.75;

    letter-spacing:
        -0.075em;

    text-transform:
        uppercase;
}


.about-story h2 span,
.about-story h2 em {
    display:
        block;
}


.about-story h2 em {
    margin-left:
        clamp(2rem, 5vw, 5rem);

    color:
        #4f73ff;

    font-family:
        var(--font-serif);

    font-size:
        0.7em;

    font-weight:
        400;

    font-style:
        italic;

    letter-spacing:
        -0.04em;

    text-transform:
        none;
}


.about-story__question {
    margin:
        clamp(2rem, 4vh, 3rem)
        0
        0;

    color:
        rgba(242, 240, 233, 0.68);

    font-family:
        var(--font-serif);

    font-size:
        clamp(1.2rem, 1.6vw, 1.65rem);

    font-style:
        italic;
}


.about-story__status {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    margin-top:
        clamp(5rem, 10vh, 9rem);

    padding-top:
        1rem;

    border-top:
        1px solid
        rgba(242, 240, 233, 0.16);

    font-family:
        var(--font-mono);

    font-size:
        0.55rem;

    letter-spacing:
        0.08em;
}


.about-story__status span {
    color:
        rgba(242, 240, 233, 0.4);
}


.about-story__status strong {
    color:
        #4f73ff;
}


/* ==========================================================================
   STORY ENTRIES
   ========================================================================== */

.about-story__entries {
    min-width:
        0;
}


.about-story__entry {
    position:
        relative;

    min-height:
        clamp(28rem, 45vw, 40rem);

    overflow:
        hidden;

    padding:
        clamp(2rem, 4vw, 4rem);

    border-top:
        1px solid
        rgba(242, 240, 233, 0.16);

    opacity:
        0;

    transform:
        translateY(42px);

    transition:
        opacity 700ms
        cubic-bezier(.2,.7,.2,1),

        transform 700ms
        cubic-bezier(.2,.7,.2,1),

        background-color 260ms ease;
}


.about-story__entry:last-child {
    border-bottom:
        1px solid
        rgba(242, 240, 233, 0.16);
}


.about-story__entry.is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


.about-story__entry-meta {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    color:
        rgba(242, 240, 233, 0.4);

    font-family:
        var(--font-mono);

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.about-story__entry-meta span:first-child {
    color:
        #4f73ff;
}


/* ==========================================================================
   GHOST NUMBER
   ========================================================================== */

.about-story__number {
    position:
        absolute;

    top:
        0.1em;

    right:
        -0.04em;

    pointer-events:
        none;

    color:
        rgba(255, 255, 255, 0.035);

    font-family:
        var(--font-sans);

    font-size:
        clamp(11rem, 20vw, 22rem);

    font-weight:
        700;

    line-height:
        0.75;

    letter-spacing:
        -0.09em;

    transition:
        color 300ms ease,
        transform 500ms
        cubic-bezier(.2,.7,.2,1);
}


/* ==========================================================================
   ENTRY COPY
   ========================================================================== */

.about-story__entry h3 {
    position:
        relative;

    z-index:
        2;

    max-width:
        8ch;

    margin:
        clamp(8rem, 15vh, 13rem)
        0
        0;

    font-family:
        var(--font-sans);

    font-size:
        clamp(3.6rem, 6vw, 6.5rem);

    font-weight:
        700;

    line-height:
        0.8;

    letter-spacing:
        -0.065em;

    text-transform:
        uppercase;
}


.about-story__entry > p {
    position:
        relative;

    z-index:
        2;

    max-width:
        34rem;

    margin:
        clamp(2rem, 4vh, 3rem)
        0
        0;

    color:
        rgba(242, 240, 233, 0.7);

    font-size:
        clamp(1rem, 1.15vw, 1.2rem);

    line-height:
        1.5;
}


.about-story__entry > em {
    position:
        relative;

    z-index:
        2;

    display:
        block;

    max-width:
        31rem;

    margin-top:
        0.8rem;

    color:
        rgba(242, 240, 233, 0.38);

    font-family:
        var(--font-serif);

    font-size:
        clamp(0.9rem, 1vw, 1.05rem);

    font-style:
        italic;

    line-height:
        1.4;

    transition:
        color 260ms ease;
}


/* ==========================================================================
   COBALT RAIL
   ========================================================================== */

.about-story__rail {
    position:
        absolute;

    z-index:
        3;

    top:
        0;

    left:
        0;

    width:
        3px;

    height:
        0;

    background:
        #2f5eff;

    box-shadow:
        0 0 22px
        rgba(47, 94, 255, 0.55);

    transition:
        height 700ms
        180ms
        cubic-bezier(.2,.7,.2,1);
}


.about-story__entry.is-visible
.about-story__rail {
    height:
        100%;
}


/* ==========================================================================
   FINAL ENTRY
   ========================================================================== */

.about-story__entry--final {
    background:
        linear-gradient(
            135deg,
            rgba(47, 94, 255, 0.12),
            transparent 58%
        );
}


/* ==========================================================================
   HOVER
   ========================================================================== */

@media (hover: hover) {

    .about-story__entry:hover {
        background-color:
            rgba(255, 255, 255, 0.025);
    }


    .about-story__entry:hover
    .about-story__number {
        color:
            rgba(79, 115, 255, 0.11);

        transform:
            translateX(-0.03em)
            scale(1.025);
    }


    .about-story__entry:hover > em {
        color:
            rgba(242, 240, 233, 0.7);
    }

}


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

.about-story__footer {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    align-items:
        baseline;

    padding:
        1.5rem
        max(
            clamp(2rem, 5vw, 6rem),
            calc((100vw - 1760px) / 2)
        );

    border-top:
        1px solid
        rgba(242, 240, 233, 0.14);

    background:
        #0b0b0b;

    color:
        rgba(242, 240, 233, 0.38);

    font-family:
        var(--font-mono);

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.about-story__footer em {
    color:
        #4f73ff;

    font-family:
        var(--font-serif);

    font-size:
        clamp(1rem, 1.3vw, 1.3rem);

    font-weight:
        400;

    font-style:
        italic;

    letter-spacing:
        -0.02em;
}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .about-story__shell {
        grid-template-columns:
            1fr;

        width:
            calc(100% - 4rem);

        gap:
            5rem;

        padding-block:
            7rem;
    }


    .about-story__intro {
        position:
            relative;

        top:
            auto;
    }


    .about-story__intro-copy {
        padding-top:
            4rem;
    }


    .about-story__status {
        margin-top:
            4rem;
    }


    .about-story__entry {
        min-height:
            30rem;
    }


    .about-story__entry h3 {
        margin-top:
            9rem;
    }

}


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

@media (max-width: 700px) {

    .about-story__shell {
        display:
            flex;

        flex-direction:
            column;

        width:
            100%;

        box-sizing:
            border-box;

        gap:
            4rem;

        padding:
            5rem
            1rem;
    }


    .about-story__intro {
        position:
            relative;

        top:
            auto;
    }


    .about-story__intro-copy {
        padding-top:
            3rem;
    }


    .about-story h2 {
        font-size:
            clamp(
                3.8rem,
                15vw,
                5rem
            );
    }


    .about-story__status {
        margin-top:
            3rem;
    }


    .about-story__entry {
        min-height:
            27rem;

        padding:
            1.5rem;
    }


    .about-story__entry h3 {
        margin-top:
            8rem;

        font-size:
            clamp(
                3rem,
                13vw,
                4.5rem
            );
    }


    .about-story__number {
        font-size:
            clamp(
                8rem,
                40vw,
                13rem
            );
    }


    .about-story__footer {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            0.6rem;

        padding:
            1.5rem
            1rem;
    }

}


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

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

    .about-story__entry,
    .about-story__rail,
    .about-story__number,
    .about-story__entry > em {
        transition:
            none;
    }


    .about-story__entry {
        opacity:
            1;

        transform:
            none;
    }


    .about-story__rail {
        height:
            100%;
    }

}


/* BAD INFLUENCE PREMIUM ABOUT STORY V1 END */


/* BAD INFLUENCE ABOUT STORY STICKY V3 */

/*
 * IMPORTANT:
 *
 * premium-about.css gives .about-main overflow:hidden.
 * That ancestor prevents position:sticky from using the
 * viewport as its scrolling reference.
 *
 * The hero already controls its own overflow, so About Main
 * does not need to trap the entire page.
 */

.about-page .about-main {
    overflow:
        visible;
}


/*
 * Section itself must also remain vertically transparent
 * to sticky positioning.
 */

.about-story {
    overflow:
        visible;
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 1101px) {

    .about-story__shell {
        align-items:
            start;
    }


    /*
     * THIS is the stationary left side.
     *
     * It stays pinned while 01–04 travel upward beside it,
     * then releases naturally when Section 02 ends.
     */

    .about-story__intro {
        position:
            sticky;

        top:
            7rem;

        align-self:
            start;

        height:
            max-content;

        max-height:
            calc(100vh - 9rem);

        z-index:
            5;
    }


    /*
     * Right side remains ordinary document flow.
     * No internal scrolling container.
     */

    .about-story__entries {
        position:
            relative;

        min-width:
            0;

        overflow:
            visible;
    }

}


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

@media (max-width: 1100px) {

    .about-story__intro {
        position:
            relative;

        top:
            auto;

        height:
            auto;

        max-height:
            none;
    }

}

/* BAD INFLUENCE ABOUT STORY STICKY V3 END */


/* BAD INFLUENCE ABOUT STORY INCIDENT OFFSET V1 */

/* Bring the sticky left column down a bit on desktop only. */
@media (min-width: 1101px) {

    .about-story__intro {
        top:
            9rem;

        max-height:
            calc(100vh - 11rem);
    }

}

/* BAD INFLUENCE ABOUT STORY INCIDENT OFFSET V1 END */


/* ==========================================================================
   03. SOURCE MODULE: premium-about-alibi.css
   ========================================================================== */
/* BAD INFLUENCE PREMIUM ABOUT ALIBI V1 START */


.about-alibi {
    position:
        relative;

    overflow:
        hidden;

    background:
        var(--porcelain);

    color:
        #101010;
}


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

.about-alibi__header {
    width:
        min(
            calc(100% - clamp(4rem, 10vw, 12rem)),
            1760px
        );

    margin-inline:
        auto;

    padding-top:
        clamp(7rem, 11vw, 12rem);

    padding-bottom:
        clamp(6rem, 9vw, 10rem);
}


.about-alibi__meta {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    padding-bottom:
        0.8rem;

    border-bottom:
        1px solid
        rgba(16, 16, 16, 0.22);

    font-family:
        var(--font-mono);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.about-alibi__meta span:first-child {
    color:
        #2f5eff;
}


.about-alibi__heading {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(16rem, 0.42fr);

    column-gap:
        clamp(4rem, 10vw, 12rem);

    align-items:
        end;

    padding-top:
        clamp(4rem, 8vw, 8rem);
}


.about-alibi__eyebrow {
    grid-column:
        1 / -1;

    margin:
        0 0 1.5rem;

    color:
        #2f5eff;

    font-family:
        var(--font-mono);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.about-alibi h2 {
    margin:
        0;

    font-family:
        var(--font-sans);

    font-size:
        clamp(5.5rem, 10vw, 12rem);

    font-weight:
        700;

    line-height:
        0.76;

    letter-spacing:
        -0.075em;

    text-transform:
        uppercase;
}


.about-alibi h2 span,
.about-alibi h2 em {
    display:
        block;
}


.about-alibi h2 em {
    margin-left:
        clamp(4rem, 9vw, 10rem);

    color:
        #2f5eff;

    font-family:
        var(--font-serif);

    font-size:
        0.64em;

    font-weight:
        400;

    font-style:
        italic;

    letter-spacing:
        -0.045em;

    text-transform:
        none;
}


.about-alibi__dek {
    max-width:
        27rem;

    margin:
        0 0 0.5rem;

    font-size:
        clamp(1.05rem, 1.3vw, 1.25rem);

    line-height:
        1.5;
}


/* ==========================================================
   PRINCIPLES
   ========================================================== */

.about-alibi__principles {
    border-top:
        1px solid
        rgba(16, 16, 16, 0.2);
}


.about-alibi__principle {
    position:
        relative;

    min-height:
        clamp(31rem, 52vw, 44rem);

    overflow:
        hidden;

    border-bottom:
        1px solid
        rgba(16, 16, 16, 0.2);

    opacity:
        0;

    transform:
        translateY(38px);

    transition:
        opacity 700ms
        cubic-bezier(.2,.75,.2,1),

        transform 700ms
        cubic-bezier(.2,.75,.2,1);
}


.about-alibi__principle.is-visible {
    opacity:
        1;

    transform:
        none;
}


/* ==========================================================
   BLUE FIRING RULE
   ========================================================== */

.about-alibi__rule {
    position:
        absolute;

    z-index:
        4;

    top:
        0;

    left:
        0;

    width:
        0;

    height:
        3px;

    background:
        #2f5eff;

    box-shadow:
        0 0 18px
        rgba(47, 94, 255, 0.45);

    transition:
        width 850ms
        cubic-bezier(.2,.75,.2,1);
}


.about-alibi__principle.is-visible
.about-alibi__rule {
    width:
        100%;
}


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

.about-alibi__number {
    position:
        absolute;

    top:
        -0.1em;

    right:
        0;

    color:
        rgba(16, 16, 16, 0.045);

    font-family:
        var(--font-sans);

    font-size:
        clamp(13rem, 27vw, 31rem);

    font-weight:
        700;

    line-height:
        0.8;

    letter-spacing:
        -0.09em;

    pointer-events:
        none;

    transform:
        translateX(4%);

    transition:
        color 300ms ease,
        transform 500ms
        cubic-bezier(.2,.75,.2,1);
}


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

.about-alibi__content {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(18rem, 0.42fr);

    column-gap:
        clamp(4rem, 10vw, 12rem);

    align-items:
        end;

    width:
        min(
            calc(100% - clamp(4rem, 10vw, 12rem)),
            1760px
        );

    min-height:
        inherit;

    margin-inline:
        auto;

    padding-block:
        clamp(4rem, 7vw, 7rem);
}


.about-alibi__label {
    grid-column:
        1 / -1;

    align-self:
        start;

    margin:
        0;

    color:
        #2f5eff;

    font-family:
        var(--font-mono);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.about-alibi h3 {
    align-self:
        end;

    margin:
        clamp(7rem, 15vh, 12rem)
        0
        0;

    font-family:
        var(--font-sans);

    font-size:
        clamp(4.5rem, 8.5vw, 10rem);

    font-weight:
        700;

    line-height:
        0.76;

    letter-spacing:
        -0.075em;

    text-transform:
        uppercase;

    transition:
        transform 350ms
        cubic-bezier(.2,.75,.2,1);
}


.about-alibi__copy {
    align-self:
        end;

    padding-bottom:
        0.6rem;
}


.about-alibi__copy p {
    max-width:
        30rem;

    margin:
        0;

    font-size:
        clamp(1.05rem, 1.3vw, 1.25rem);

    line-height:
        1.55;
}


.about-alibi__copy em {
    display:
        block;

    max-width:
        27rem;

    margin-top:
        1rem;

    color:
        rgba(16, 16, 16, 0.48);

    font-family:
        var(--font-serif);

    font-size:
        clamp(1rem, 1.2vw, 1.2rem);

    font-style:
        italic;

    line-height:
        1.4;
}


/* ==========================================================
   HOVER
   ========================================================== */

@media (hover: hover) {

    .about-alibi__principle:hover
    .about-alibi__number {
        color:
            rgba(47, 94, 255, 0.09);

        transform:
            translateX(1%);
    }


    .about-alibi__principle:hover h3 {
        transform:
            translateX(0.035em);
    }

}


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

.about-alibi__footer {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    align-items:
        baseline;

    padding:
        1.5rem
        max(
            clamp(2rem, 5vw, 6rem),
            calc((100vw - 1760px) / 2)
        );

    background:
        #101010;

    color:
        rgba(242, 240, 233, 0.48);

    font-family:
        var(--font-mono);

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.about-alibi__footer em {
    color:
        #4f73ff;

    font-family:
        var(--font-serif);

    font-size:
        clamp(1rem, 1.25vw, 1.25rem);

    font-weight:
        400;

    font-style:
        italic;

    letter-spacing:
        -0.02em;
}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .about-alibi__header,
    .about-alibi__content {
        width:
            calc(100% - 4rem);
    }


    .about-alibi__heading,
    .about-alibi__content {
        grid-template-columns:
            1fr;
    }


    .about-alibi__dek {
        margin-top:
            3rem;
    }


    .about-alibi__copy {
        margin-top:
            3rem;
    }


    .about-alibi__principle {
        min-height:
            36rem;
    }

}


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

@media (max-width: 700px) {

    .about-alibi__header {
        width:
            auto;

        margin-inline:
            1rem;

        padding-block:
            5rem;
    }


    .about-alibi__heading {
        display:
            block;

        padding-top:
            3rem;
    }


    .about-alibi h2 {
        font-size:
            clamp(
                4rem,
                17vw,
                6rem
            );
    }


    .about-alibi h2 em {
        margin-left:
            2rem;
    }


    .about-alibi__dek {
        margin-top:
            2.5rem;
    }


    .about-alibi__principle {
        min-height:
            32rem;
    }


    .about-alibi__content {
        display:
            flex;

        flex-direction:
            column;

        justify-content:
            space-between;

        width:
            auto;

        min-height:
            inherit;

        margin-inline:
            1rem;

        padding-block:
            2rem;
    }


    .about-alibi h3 {
        align-self:
            stretch;

        margin-top:
            auto;

        padding-top:
            7rem;

        font-size:
            clamp(
                3.6rem,
                16vw,
                5.5rem
            );
    }


    .about-alibi__copy {
        margin-top:
            2rem;

        padding-bottom:
            0;
    }


    .about-alibi__number {
        font-size:
            clamp(
                11rem,
                48vw,
                17rem
            );
    }


    .about-alibi__footer {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            0.5rem;

        padding:
            1.5rem
            1rem;
    }

}


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

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

    .about-alibi__principle,
    .about-alibi__rule,
    .about-alibi__number,
    .about-alibi h3 {
        transition:
            none;
    }


    .about-alibi__principle {
        opacity:
            1;

        transform:
            none;
    }


    .about-alibi__rule {
        width:
            100%;
    }

}


/* BAD INFLUENCE PREMIUM ABOUT ALIBI V1 END */



/* BAD INFLUENCE ABOUT ALIBI FULL BLEED ART V2 */


/* ==========================================================================
   TRUE FULL-BLEED IMAGE LAYER
   ========================================================================== */

.about-alibi__principle::before {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center center;

    opacity:
        0;

    filter:
        blur(5px)
        saturate(0.82)
        brightness(0.88);

    transform:
        scale(1.035);

    transform-origin:
        center;

    transition:
        opacity 900ms
        80ms
        cubic-bezier(.2,.75,.2,1),

        transform 1200ms
        80ms
        cubic-bezier(.2,.75,.2,1),

        filter 900ms
        80ms
        cubic-bezier(.2,.75,.2,1);

    pointer-events:
        none;
}


/* ==========================================================================
   READABILITY OVERLAY
   ========================================================================== */

.about-alibi__principle::after {
    content:
        "";

    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    pointer-events:
        none;
}


/* ==========================================================================
   01 / DESIGN IT ON PURPOSE
   ========================================================================== */

.about-alibi__principle:nth-child(1)::before {
    background-image:
        url("../images/about-alibi-design-blueprint.webp");

    background-position:
        center right;
}


/*
 * Blueprint remains visible across the entire frame.
 * Cream veil only gives the real HTML type enough contrast.
 */

.about-alibi__principle:nth-child(1)::after {
    background:
        linear-gradient(
            90deg,
            rgba(242, 240, 233, 0.96) 0%,
            rgba(242, 240, 233, 0.88) 26%,
            rgba(242, 240, 233, 0.58) 46%,
            rgba(242, 240, 233, 0.18) 67%,
            rgba(242, 240, 233, 0.03) 100%
        );
}


/* ==========================================================================
   02 / MAKE IT FEEL EXPENSIVE
   ========================================================================== */

.about-alibi__principle:nth-child(2)::before {
    background-image:
        url("../images/about-alibi-expensive-concept.webp");

    background-position:
        center center;
}


.about-alibi__principle:nth-child(2)::after {
    background:
        linear-gradient(
            90deg,
            rgba(5, 7, 9, 0.82) 0%,
            rgba(5, 7, 9, 0.70) 34%,
            rgba(5, 7, 9, 0.38) 58%,
            rgba(5, 7, 9, 0.12) 78%,
            rgba(5, 7, 9, 0.05) 100%
        );
}


.about-alibi__principle:nth-child(2) {
    color:
        var(--porcelain);
}


.about-alibi__principle:nth-child(2)
.about-alibi__copy em {
    color:
        rgba(242, 240, 233, 0.68);
}


.about-alibi__principle:nth-child(2)
.about-alibi__number {
    color:
        rgba(242, 240, 233, 0.055);
}


/* ==========================================================================
   03 / DON'T BE BORING
   ========================================================================== */

.about-alibi__principle:nth-child(3)::before {
    background-image:
        url("../images/about-alibi-dont-be-boring.webp");

    background-position:
        center center;
}


.about-alibi__principle:nth-child(3)::after {
    background:
        linear-gradient(
            90deg,
            rgba(4, 5, 6, 0.86) 0%,
            rgba(4, 5, 6, 0.72) 34%,
            rgba(4, 5, 6, 0.38) 58%,
            rgba(4, 5, 6, 0.12) 78%,
            rgba(4, 5, 6, 0.04) 100%
        );
}


.about-alibi__principle:nth-child(3) {
    color:
        var(--porcelain);
}


.about-alibi__principle:nth-child(3)
.about-alibi__copy em {
    color:
        rgba(242, 240, 233, 0.68);
}


.about-alibi__principle:nth-child(3)
.about-alibi__number {
    color:
        rgba(242, 240, 233, 0.055);
}


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

.about-alibi__principle.is-visible::before {
    opacity:
        1;

    filter:
        blur(0)
        saturate(1)
        brightness(1);

    transform:
        scale(1);
}


/* ==========================================================================
   LAYER ORDER
   ========================================================================== */

.about-alibi__content {
    position:
        relative;

    z-index:
        3;
}


.about-alibi__number {
    z-index:
        2;
}


.about-alibi__rule {
    z-index:
        5;
}


/* ==========================================================================
   GHOST NUMBER HOVER FOR DARK PRINCIPLES
   ========================================================================== */

@media (hover: hover) {

    .about-alibi__principle:nth-child(2):hover
    .about-alibi__number,

    .about-alibi__principle:nth-child(3):hover
    .about-alibi__number {
        color:
            rgba(79, 115, 255, 0.16);
    }

}


/* ==========================================================================
   WIDE / ULTRAWIDE
   ========================================================================== */

@media (min-width: 1600px) {

    .about-alibi__principle:nth-child(1)::before {
        background-position:
            center right;
    }


    .about-alibi__principle:nth-child(2)::before,
    .about-alibi__principle:nth-child(3)::before {
        background-position:
            center center;
    }

}


/*
 * At true ultrawide widths, keep the artwork filling the
 * entire section instead of turning it into a right-side panel.
 */

@media (min-width: 2200px) {

    .about-alibi__principle::before {
        background-size:
            cover;
    }


    .about-alibi__principle:nth-child(1)::after {
        background:
            linear-gradient(
                90deg,
                rgba(242, 240, 233, 0.94) 0%,
                rgba(242, 240, 233, 0.82) 24%,
                rgba(242, 240, 233, 0.46) 43%,
                rgba(242, 240, 233, 0.12) 63%,
                rgba(242, 240, 233, 0.02) 100%
            );
    }


    .about-alibi__principle:nth-child(2)::after,
    .about-alibi__principle:nth-child(3)::after {
        background:
            linear-gradient(
                90deg,
                rgba(4, 5, 6, 0.80) 0%,
                rgba(4, 5, 6, 0.64) 28%,
                rgba(4, 5, 6, 0.30) 52%,
                rgba(4, 5, 6, 0.08) 72%,
                rgba(4, 5, 6, 0.02) 100%
            );
    }

}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .about-alibi__principle::before {
        background-position:
            center center;
    }


    .about-alibi__principle:nth-child(1)::after {
        background:
            linear-gradient(
                90deg,
                rgba(242, 240, 233, 0.94) 0%,
                rgba(242, 240, 233, 0.78) 42%,
                rgba(242, 240, 233, 0.28) 72%,
                rgba(242, 240, 233, 0.08) 100%
            );
    }


    .about-alibi__principle:nth-child(2)::after,
    .about-alibi__principle:nth-child(3)::after {
        background:
            linear-gradient(
                90deg,
                rgba(4, 5, 6, 0.78) 0%,
                rgba(4, 5, 6, 0.60) 46%,
                rgba(4, 5, 6, 0.22) 78%,
                rgba(4, 5, 6, 0.08) 100%
            );
    }

}


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

@media (max-width: 700px) {

    .about-alibi__principle::before {
        background-position:
            center center;
    }


    .about-alibi__principle:nth-child(1)::after {
        background:
            linear-gradient(
                180deg,
                rgba(242, 240, 233, 0.76) 0%,
                rgba(242, 240, 233, 0.50) 45%,
                rgba(242, 240, 233, 0.72) 100%
            );
    }


    .about-alibi__principle:nth-child(2)::after,
    .about-alibi__principle:nth-child(3)::after {
        background:
            linear-gradient(
                180deg,
                rgba(4, 5, 6, 0.56) 0%,
                rgba(4, 5, 6, 0.36) 45%,
                rgba(4, 5, 6, 0.68) 100%
            );
    }

}


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

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

    .about-alibi__principle::before {
        opacity:
            1;

        filter:
            none;

        transform:
            none;

        transition:
            none;
    }

}


/* BAD INFLUENCE ABOUT ALIBI FULL BLEED ART V2 END */


/* ==========================================================================
   04. SOURCE MODULE: premium-about-close.css
   ========================================================================== */
/* BAD INFLUENCE PREMIUM ABOUT CLOSE V1 START */


.about-close {
    position:
        relative;

    overflow:
        hidden;

    background:
        var(--porcelain);

    color:
        #101010;
}


/* ==========================================================================
   SCAN
   ========================================================================== */

.about-close__scan {
    position:
        absolute;

    z-index:
        4;

    top:
        0;

    left:
        0;

    width:
        0;

    height:
        3px;

    background:
        #2f5eff;

    box-shadow:
        0 0 20px
        rgba(47, 94, 255, 0.48);

    transition:
        width 1000ms
        cubic-bezier(.2,.75,.2,1);
}


.about-close.is-visible
.about-close__scan {
    width:
        100%;
}


/* ==========================================================================
   SHELL
   ========================================================================== */

.about-close__shell {
    width:
        min(
            calc(100% - clamp(4rem, 10vw, 12rem)),
            1760px
        );

    margin-inline:
        auto;

    padding-top:
        clamp(6rem, 10vw, 10rem);

    padding-bottom:
        clamp(7rem, 11vw, 12rem);
}


/* ==========================================================================
   META
   ========================================================================== */

.about-close__meta {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        2rem;

    padding-bottom:
        0.8rem;

    border-bottom:
        1px solid
        rgba(16, 16, 16, 0.22);

    color:
        rgba(16, 16, 16, 0.5);

    font-family:
        var(--font-mono);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.about-close__meta span:first-child {
    color:
        #2f5eff;
}


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

.about-close__main {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(18rem, 0.5fr);

    gap:
        clamp(5rem, 11vw, 14rem);

    align-items:
        end;

    padding-top:
        clamp(5rem, 10vw, 10rem);
}


/* ==========================================================================
   HEADLINE
   ========================================================================== */

.about-close__eyebrow {
    margin:
        0
        0
        1.5rem;

    color:
        #2f5eff;

    font-family:
        var(--font-mono);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.about-close h2 {
    margin:
        0;

    font-family:
        var(--font-sans);

    font-size:
        clamp(5rem, 10.5vw, 12.5rem);

    font-weight:
        700;

    line-height:
        0.74;

    letter-spacing:
        -0.075em;

    text-transform:
        uppercase;
}


.about-close__mask {
    display:
        block;

    overflow:
        hidden;

    padding:
        0.08em
        0.04em
        0.04em
        0;

    margin:
        -0.08em
        0
        -0.04em
        0;
}


.about-close__mask > span {
    display:
        block;

    transform:
        translateY(112%);

    transition:
        transform 900ms
        cubic-bezier(.16,.8,.2,1);
}


.about-close.is-visible
.about-close__mask:nth-child(1) > span {
    transform:
        translateY(0);
}


.about-close.is-visible
.about-close__mask:nth-child(2) > span {
    transform:
        translateY(0);

    transition-delay:
        90ms;
}


.about-close__probably {
    display:
        block;

    width:
        fit-content;

    margin:
        clamp(1rem, 2vw, 2rem)
        0
        0
        clamp(5rem, 16vw, 18rem);

    color:
        #2f5eff;

    font-family:
        var(--font-serif);

    font-size:
        clamp(2.5rem, 4.4vw, 5.2rem);

    font-weight:
        400;

    font-style:
        italic;

    line-height:
        1;

    opacity:
        0;

    transform:
        translateX(-24px);

    transition:
        opacity 700ms 240ms ease,
        transform 700ms 240ms
        cubic-bezier(.2,.75,.2,1);
}


.about-close.is-visible
.about-close__probably {
    opacity:
        1;

    transform:
        none;
}


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

.about-close__statement {
    padding-bottom:
        0.7rem;

    opacity:
        0;

    transform:
        translateY(24px);

    transition:
        opacity 700ms 280ms ease,
        transform 700ms 280ms
        cubic-bezier(.2,.75,.2,1);
}


.about-close.is-visible
.about-close__statement {
    opacity:
        1;

    transform:
        none;
}


.about-close__statement-label {
    margin:
        0
        0
        1.5rem;

    padding-bottom:
        0.8rem;

    border-bottom:
        1px solid
        rgba(16, 16, 16, 0.22);

    color:
        #2f5eff;

    font-family:
        var(--font-mono);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.about-close__statement > p:not(.about-close__statement-label) {
    margin:
        0;

    font-size:
        clamp(1.1rem, 1.45vw, 1.4rem);

    line-height:
        1.5;
}


.about-close__statement > em {
    display:
        block;

    margin-top:
        1rem;

    color:
        rgba(16, 16, 16, 0.48);

    font-family:
        var(--font-serif);

    font-size:
        clamp(1rem, 1.2vw, 1.2rem);

    font-style:
        italic;
}


/* ==========================================================================
   ROUTES
   ========================================================================== */

.about-close__routes {
    display:
        grid;

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

    background:
        #101010;

    border-top:
        3px solid
        #2f5eff;
}


.about-close__route {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    grid-template-rows:
        auto auto;

    column-gap:
        1.5rem;

    row-gap:
        clamp(1.5rem, 3vw, 3rem);

    min-height:
        clamp(14rem, 18vw, 20rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    overflow:
        hidden;

    border-right:
        1px solid
        rgba(242, 240, 233, 0.16);

    color:
        var(--porcelain);

    text-decoration:
        none;

    opacity:
        0;

    transform:
        translateY(28px);

    transition:
        opacity 650ms
        cubic-bezier(.2,.75,.2,1),

        transform 650ms
        cubic-bezier(.2,.75,.2,1),

        background-color 260ms ease,

        color 260ms ease;
}


.about-close__route:last-child {
    border-right:
        0;
}


.about-close.is-visible
.about-close__route {
    opacity:
        1;

    transform:
        none;
}


.about-close.is-visible
.about-close__route:nth-child(1) {
    transition-delay:
        360ms;
}


.about-close.is-visible
.about-close__route:nth-child(2) {
    transition-delay:
        440ms;
}


.about-close.is-visible
.about-close__route:nth-child(3) {
    transition-delay:
        520ms;
}


.about-close__route-number {
    grid-column:
        1;

    color:
        #4f73ff;

    font-family:
        var(--font-mono);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;
}


.about-close__route-name {
    grid-column:
        1 / 3;

    grid-row:
        2;

    align-self:
        end;

    font-family:
        var(--font-sans);

    font-size:
        clamp(2.1rem, 3.5vw, 4.5rem);

    font-weight:
        700;

    line-height:
        0.85;

    letter-spacing:
        -0.055em;
}


.about-close__route-copy {
    grid-column:
        2 / 4;

    grid-row:
        1;

    justify-self:
        end;

    max-width:
        15rem;

    color:
        rgba(242, 240, 233, 0.52);

    font-family:
        var(--font-serif);

    font-size:
        clamp(0.95rem, 1.1vw, 1.1rem);

    font-style:
        italic;

    line-height:
        1.35;

    text-align:
        right;
}


.about-close__route-arrow {
    grid-column:
        3;

    grid-row:
        2;

    align-self:
        end;

    justify-self:
        end;

    color:
        #4f73ff;

    font-size:
        clamp(1.8rem, 2.6vw, 3rem);

    transition:
        transform 260ms ease;
}


/* ==========================================================================
   ROUTE HOVER
   ========================================================================== */

@media (hover: hover) {

    .about-close__route:hover {
        background:
            #2f5eff;

        color:
            #fff;
    }


    .about-close__route:hover
    .about-close__route-number,

    .about-close__route:hover
    .about-close__route-arrow {
        color:
            #fff;
    }


    .about-close__route:hover
    .about-close__route-copy {
        color:
            rgba(255, 255, 255, 0.78);
    }


    .about-close__route:hover
    .about-close__route-arrow {
        transform:
            translate(0.18em, -0.18em);
    }

}


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

@media (min-width: 701px) and (max-width: 1100px) {

    .about-close__shell {
        width:
            calc(100% - 4rem);
    }


    .about-close__main {
        grid-template-columns:
            1fr;

        gap:
            4rem;
    }


    .about-close__statement {
        max-width:
            31rem;
    }


    .about-close__routes {
        grid-template-columns:
            1fr;
    }


    .about-close__route {
        min-height:
            12rem;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(242, 240, 233, 0.16);
    }

}


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

@media (max-width: 700px) {

    .about-close__shell {
        width:
            auto;

        margin-inline:
            1rem;

        padding-block:
            5rem;
    }


    .about-close__main {
        display:
            block;

        padding-top:
            4rem;
    }


    .about-close h2 {
        font-size:
            clamp(
                4rem,
                17vw,
                6rem
            );
    }


    .about-close__probably {
        margin-left:
            2rem;

        font-size:
            clamp(
                2.5rem,
                11vw,
                4rem
            );
    }


    .about-close__statement {
        margin-top:
            4rem;
    }


    .about-close__routes {
        grid-template-columns:
            1fr;
    }


    .about-close__route {
        min-height:
            11rem;

        padding:
            1.5rem;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(242, 240, 233, 0.16);
    }


    .about-close__route-name {
        font-size:
            clamp(
                2.2rem,
                12vw,
                3.5rem
            );
    }

}


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

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

    .about-close__scan,
    .about-close__mask > span,
    .about-close__probably,
    .about-close__statement,
    .about-close__route,
    .about-close__route-arrow {
        transition:
            none;
    }


    .about-close__scan {
        width:
            100%;
    }


    .about-close__mask > span,
    .about-close__probably,
    .about-close__statement,
    .about-close__route {
        opacity:
            1;

        transform:
            none;
    }

}


/* BAD INFLUENCE PREMIUM ABOUT CLOSE V1 END */