/* Uses the variables and shared components from styles.css. */


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

.history-container {
    width: min(
        1120px,
        calc(100% - 48px)
    );

    margin: 0 auto;
}

.history-narrow-container {
    width: min(
        780px,
        calc(100% - 48px)
    );

    margin: 0 auto;
}


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

.history-page {
    position: relative;
    z-index: 3;

    min-height: 100vh;

    padding-top:
        var(--header-height);

    overflow-x: hidden;

    background-color: #ffffff;
}


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

.history-hero {
    position: relative;

    overflow: hidden;

    background-color:
        var(--navy);

    border-top:
        6px solid
        var(--orange);

    isolation: isolate;
}

.history-hero::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(
            circle at 18% 25%,
            rgba(
                231,
                196,
                113,
                0.11
            ),
            transparent 36%
        ),
        linear-gradient(
            115deg,
            transparent 0%,
            transparent 64%,
            rgba(
                255,
                255,
                255,
                0.025
            ) 64%,
            rgba(
                255,
                255,
                255,
                0.025
            ) 100%
        );

    pointer-events: none;
}

.history-hero-grid {
    position: relative;
    z-index: 1;

    display: grid;

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

    align-items: stretch;

    min-width: 0;
}

.history-hero-copy {
    min-width: 0;

    padding:
        72px
        70px
        72px
        0;
}

.history-hero-kicker {
    margin-bottom: 13px;

    color:
        var(--light-grey);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.21em;
    line-height: 1.4;

    text-transform: uppercase;
}

.history-hero h1 {
    margin: 0;

    color:
        var(--gold);

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

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

    font-weight: 400;
    line-height: 1.04;
}

.history-hero-separator {
    width: 72px;
    height: 3px;

    margin: 26px 0;

    background-color:
        var(--orange);
}

.history-hero-copy
p:not(.history-hero-kicker) {
    max-width: 680px;

    margin-bottom: 13px;

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

    font-size: 16px;
    line-height: 1.75;
}

.history-hero-copy
p:last-child {
    margin-bottom: 0;
}

.history-hero-copy
.history-hero-lead {
    color:
        rgba(
            255,
            255,
            255,
            0.9
        );

    font-size: 19px;
}


/* ==================================================
   HERO YEAR PANEL
================================================== */

.history-hero-year {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 360px;

    padding:
        42px
        35px;

    background-color:
        var(--orange);

    color:
        var(--navy);

    text-align: center;
}

.history-year-label {
    margin-bottom: 13px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.history-hero-year strong {
    display: block;

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

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

    font-weight: 700;
    line-height: 0.9;
}

.history-year-caption {
    max-width: 180px;

    margin-top: 20px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.5;

    text-transform: uppercase;
}


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

.history-opening {
    position: relative;

    padding:
        74px 0 70px;

    background-color: #ffffff;
}

.history-opening
p:not(.section-eyebrow) {
    margin-bottom: 15px;

    color: #666666;

    font-size: 16px;
    line-height: 1.8;
}

.history-opening
p:last-child {
    margin-bottom: 0;
}

.history-opening
.history-opening-lead {
    color:
        var(--text);

    font-size: 18px;
}


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

.history-section-heading {
    width: min(
        760px,
        100%
    );

    margin:
        0 auto 52px;

    text-align: center;
}

.history-section-intro {
    max-width: 620px;

    margin:
        18px auto 0;

    color: #666666;

    font-size: 15px;
    line-height: 1.7;
}


/* ==================================================
   STORY OF INNOVATION
================================================== */

.history-timeline-section {
    position: relative;

    padding:
        72px 0 82px;

    overflow: hidden;

    background-color:
        var(--mid-grey);
}

.history-timeline {
    position: relative;

    width: min(
        900px,
        100%
    );

    margin: 0 auto;
}


/* ==================================================
   TIMELINE TRACK
================================================== */

.history-timeline-track {
    position: absolute;

    top: 10px;
    bottom: 10px;
    left: 142px;

    width: 3px;

    overflow: hidden;

    background-color:
        rgba(
            0,
            0,
            0,
            0.1
        );
}

.history-timeline-progress {
    width: 100%;
    height: 0;

    background-color:
        var(--orange);

    transform-origin: top;

    transition:
        height 0.12s linear;
}


/* ==================================================
   TIMELINE MOMENTS
================================================== */

.history-moment {
    position: relative;

    display: grid;

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

    gap: 46px;

    min-width: 0;

    padding:
        0 0 50px;

    opacity: 1;

    transform:
        translateY(0);
}

.history-moment:last-child {
    padding-bottom: 0;
}


/* ==================================================
   TIMELINE YEAR
================================================== */

.history-moment-marker {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    padding-top: 5px;

    color:
        var(--navy);

    text-align: right;
}

.history-moment-marker time,
.history-moment-short-year {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
}


/* ==================================================
   TIMELINE DOT
================================================== */

.history-moment-dot {
    position: absolute;

    top: 7px;
    left: 134px;
    z-index: 2;

    width: 19px;
    height: 19px;

    background-color:
        var(--orange);

    border:
        5px solid
        var(--mid-grey);

    border-radius: 50%;

    box-shadow:
        0 0 0 2px
        rgba(
            184,
            134,
            11,
            0.3
        );

    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.history-moment.is-active
.history-moment-dot {
    background-color:
        var(--gold);

    box-shadow:
        0 0 0 3px
        rgba(
            184,
            134,
            11,
            0.32
        );

    transform:
        scale(1.18);
}


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

.history-moment-content {
    min-width: 0;
}

.history-moment-label {
    margin-bottom: 7px;

    color:
        var(--orange);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.history-moment-content h3 {
    margin:
        0 0 12px;

    color:
        var(--navy);

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

    font-size:
        clamp(
            1.6rem,
            3vw,
            2.15rem
        );

    font-weight: 400;
    line-height: 1.22;
}

.history-moment-content
p:not(.history-moment-label) {
    max-width: 650px;

    margin: 0;

    color: #666666;

    font-size: 14px;
    line-height: 1.72;
}


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

.history-legacy {
    position: relative;

    padding:
        82px 0 86px;

    overflow: hidden;

    background-color: #ffffff;
}

.history-legacy-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(280px, 0.7fr);

    align-items: center;

    gap: 70px;

    min-width: 0;
}

.history-legacy-copy {
    min-width: 0;
}

.history-legacy-separator {
    width: 64px;
    height: 3px;

    margin: 24px 0;

    background-color:
        var(--orange);
}

.history-legacy-copy
p:not(.section-eyebrow) {
    max-width: 680px;

    margin:
        0 0 14px;

    color: #666666;

    font-size: 15px;
    line-height: 1.76;
}

.history-legacy-copy
p:last-child {
    margin-bottom: 0;
}

.history-legacy-copy
.history-legacy-lead {
    color:
        var(--text);

    font-size: 18px;
}


/* ==================================================
   LEGACY SUMMARY
================================================== */

.history-legacy-summary {
    min-width: 0;

    padding:
        36px 34px;

    background-color:
        var(--light-grey);

    border-top:
        5px solid
        var(--orange);

    box-shadow:
        0 16px 38px
        rgba(
            0,
            0,
            0,
            0.07
        );

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.history-legacy-summary:hover {
    border-color:
        var(--gold);

    box-shadow:
        0 20px 44px
        rgba(
            0,
            0,
            0,
            0.1
        );

    transform:
        translateY(-4px);
}

.history-summary-label {
    margin-bottom: 23px;

    color:
        var(--orange);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.history-legacy-summary dl {
    margin: 0;
}

.history-legacy-summary
dl div {
    padding:
        0 0 17px;

    margin:
        0 0 17px;

    border-bottom:
        1px solid
        rgba(
            0,
            0,
            0,
            0.09
        );
}

.history-legacy-summary
dl div:last-child {
    padding-bottom: 0;
    margin-bottom: 0;

    border-bottom: 0;
}

.history-legacy-summary dt {
    margin-bottom: 5px;

    color: #777777;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.history-legacy-summary dd {
    margin: 0;

    color:
        var(--navy);

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

    font-size: 18px;
    line-height: 1.35;
}


/* ==================================================
   FINAL CALLOUT
================================================== */

.history-callout {
    position: relative;

    padding:
        62px 0;

    overflow: hidden;

    background-color:
        var(--navy);
}

.history-callout::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: min(
        1200px,
        100%
    );

    background:
        radial-gradient(
            circle at 25% 50%,
            rgba(
                231,
                196,
                113,
                0.06
            ),
            transparent 44%
        );

    pointer-events: none;

    transform:
        translateX(-50%);
}

.history-callout-inner {
    position: relative;
    z-index: 1;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 45px;
}

.history-callout-inner > div {
    min-width: 0;
}

.history-callout-kicker {
    margin-bottom: 8px;

    color:
        var(--orange);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.history-callout h2 {
    margin: 0;

    color:
        var(--gold);

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

    font-size:
        clamp(
            1.85rem,
            4vw,
            2.7rem
        );

    font-weight: 400;
    line-height: 1.2;
}


/* ==================================================
   CALLOUT BUTTON
================================================== */

.history-callout-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex:
        0 0 auto;

    min-width: 205px;

    padding:
        16px 25px;

    background-color:
        var(--orange);

    border:
        2px solid
        var(--orange);

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.4;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.history-callout-button:hover {
    background-color:
        var(--gold);

    border-color:
        var(--gold);

    color:
        var(--navy);

    transform:
        translateY(-2px);
}

.history-callout-button:focus-visible {
    outline:
        3px solid
        var(--gold);

    outline-offset: 4px;
}


/* ==================================================
   GENERAL SCROLL REVEAL
================================================== */

.history-reveal,
.history-moment {
    opacity: 1;

    transform:
        translateY(0);
}

.js-enabled
.history-reveal.reveal-ready:not(.animate-in),
.js-enabled
.history-moment.reveal-ready:not(.animate-in) {
    opacity: 0;

    transform:
        translateY(28px);
}

.history-reveal.reveal-ready,
.history-moment.reveal-ready {
    transition:
        opacity 1.05s ease,
        transform 1.35s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.history-reveal.animate-in,
.history-moment.animate-in {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==================================================
   TIMELINE STAGGER

   Keeps the desktop reveal feeling on every viewport.
================================================== */

.history-moment:nth-child(1) {
    transition-delay: 0s;
}

.history-moment:nth-child(2) {
    transition-delay: 0.05s;
}

.history-moment:nth-child(3) {
    transition-delay: 0.1s;
}

.history-moment:nth-child(4) {
    transition-delay: 0.15s;
}

.history-moment:nth-child(5) {
    transition-delay: 0.2s;
}

.history-moment:nth-child(6) {
    transition-delay: 0.25s;
}

.history-moment:nth-child(7) {
    transition-delay: 0.3s;
}


/* ==================================================
   LARGE TABLET
   951px - 1100px
================================================== */

@media (max-width: 1100px) {

    .history-container {
        width: min(
            calc(100% - 44px),
            1040px
        );
    }

    .history-narrow-container {
        width: min(
            760px,
            calc(100% - 44px)
        );
    }


    /* Hero stays two-column */

    .history-hero-grid {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(245px, 0.65fr);
    }

    .history-hero-copy {
        padding:
            66px
            54px
            66px
            0;
    }

    .history-hero-year {
        min-height: 350px;

        padding:
            38px 28px;
    }


    /* Timeline remains desktop-style */

    .history-timeline {
        width: min(
            860px,
            100%
        );
    }


    /* Legacy remains two-column */

    .history-legacy-grid {
        gap: 52px;
    }

}


/* ==================================================
   TABLET
   701px - 950px
================================================== */

@media (max-width: 950px) {

    .history-container {
        width: min(
            calc(100% - 36px),
            900px
        );
    }

    .history-narrow-container {
        width: min(
            720px,
            calc(100% - 36px)
        );
    }


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

       Still stays two-column on normal tablets.
    ================================================== */

    .history-hero-grid {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(210px, 0.75fr);
    }

    .history-hero-copy {
        padding:
            60px
            38px
            60px
            0;
    }

    .history-hero-kicker {
        font-size: 11px;

        letter-spacing:
            0.18em;
    }

    .history-hero h1 {
        font-size:
            clamp(
                2.8rem,
                7vw,
                4.4rem
            );
    }

    .history-hero-copy
    p:not(.history-hero-kicker) {
        font-size: 15px;
    }

    .history-hero-copy
    .history-hero-lead {
        font-size: 18px;
    }

    .history-hero-year {
        min-height: 330px;

        padding:
            34px 22px;
    }

    .history-hero-year strong {
        font-size:
            clamp(
                4rem,
                10vw,
                5.8rem
            );
    }


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

    .history-opening {
        padding:
            68px 0 66px;
    }


    /* ==================================================
       TIMELINE

       Preserve the desktop left-year / right-story
       composition on tablet.
    ================================================== */

    .history-timeline-section {
        padding:
            66px 0 74px;
    }

    .history-timeline {
        width: min(
            760px,
            100%
        );
    }

    .history-timeline-track {
        left: 116px;
    }

    .history-moment {
        grid-template-columns:
            96px
            minmax(0, 1fr);

        gap: 38px;

        padding-bottom: 46px;
    }

    .history-moment-dot {
        left: 108px;
    }

    .history-moment-marker time,
    .history-moment-short-year {
        font-size: 19px;
    }

    .history-moment-content h3 {
        font-size:
            clamp(
                1.5rem,
                3.3vw,
                1.95rem
            );
    }


    /* ==================================================
       LEGACY

       Keep two columns on tablet.
    ================================================== */

    .history-legacy {
        padding:
            72px 0 76px;
    }

    .history-legacy-grid {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(250px, 0.85fr);

        gap: 38px;
    }

    .history-legacy-summary {
        padding:
            31px 28px;
    }


    /* ==================================================
       CALLOUT
    ================================================== */

    .history-callout {
        padding:
            54px 0;
    }

    .history-callout-inner {
        gap: 30px;
    }

    .history-callout-button {
        min-width: 190px;

        padding:
            15px 21px;
    }

}


/* ==================================================
   SMALL TABLET / LARGE MOBILE
   701px - 780px
================================================== */

@media (max-width: 780px) {

    /*
       At this point the hero benefits from becoming
       vertically arranged, while its visual hierarchy
       is still retained.
    */

    .history-hero-grid {
        grid-template-columns: 1fr;
    }

    .history-hero-copy {
        padding:
            58px 0 52px;

        text-align: center;
    }

    .history-hero-separator {
        margin-right: auto;
        margin-left: auto;
    }

    .history-hero-copy
    p:not(.history-hero-kicker) {
        margin-right: auto;
        margin-left: auto;
    }

    .history-hero-year {
        min-height: 180px;

        padding:
            30px 24px;
    }

    .history-year-label {
        margin-bottom: 8px;
    }

    .history-hero-year strong {
        font-size:
            clamp(
                4rem,
                12vw,
                5rem
            );
    }

    .history-year-caption {
        margin-top: 14px;
    }


    /* Legacy stacks slightly before phone size */

    .history-legacy-grid {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .history-legacy-copy {
        text-align: center;
    }

    .history-legacy-separator {
        margin-right: auto;
        margin-left: auto;
    }

    .history-legacy-summary {
        width: min(
            520px,
            100%
        );

        margin: 0 auto;
    }

}


/* ==================================================
   MOBILE
   700px AND BELOW
================================================== */

@media (max-width: 700px) {

    .history-container,
    .history-narrow-container {
        width:
            calc(
                100% - 28px
            );
    }


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

    .history-hero-copy {
        padding:
            52px 0 48px;
    }

    .history-hero-kicker {
        margin-bottom: 10px;

        font-size: 10px;

        letter-spacing:
            0.17em;
    }

    .history-hero h1 {
        font-size:
            clamp(
                2.7rem,
                13vw,
                4rem
            );
    }

    .history-hero-separator {
        width: 62px;

        margin:
            22px auto;
    }

    .history-hero-copy
    p:not(.history-hero-kicker) {
        font-size: 15px;

        line-height: 1.7;
    }

    .history-hero-copy
    .history-hero-lead {
        font-size: 17px;
    }

    .history-hero-year {
        min-height: 165px;

        padding:
            28px 20px;
    }

    .history-hero-year strong {
        font-size: 4.5rem;
    }

    .history-year-caption {
        max-width: 230px;

        font-size: 10px;
    }


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

    .history-opening {
        padding:
            58px 0 56px;
    }

    .history-opening
    p:not(.section-eyebrow) {
        font-size: 15px;

        line-height: 1.72;
    }

    .history-opening
    .history-opening-lead {
        font-size: 17px;
    }


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

    .history-section-heading {
        margin-bottom: 40px;
    }

    .history-section-intro {
        margin-top: 15px;

        font-size: 14px;

        line-height: 1.65;
    }


    /* ==================================================
       TIMELINE

       Same timeline behaviour, but the line moves to
       the left so the content has enough room.
    ================================================== */

    .history-timeline-section {
        padding:
            58px 0 65px;
    }

    .history-timeline {
        width: 100%;
    }

    .history-timeline-track {
        top: 7px;
        bottom: 7px;

        left: 8px;

        width: 3px;
    }

    .history-moment {
        grid-template-columns: 1fr;

        gap: 8px;

        padding:
            0
            0
            42px
            37px;
    }

    .history-moment-marker {
        align-items: flex-start;

        padding-top: 0;

        text-align: left;
    }

    .history-moment-marker time,
    .history-moment-short-year {
        font-size: 16px;
    }

    .history-moment-dot {
        top: 1px;
        left: 0;

        width: 19px;
        height: 19px;
    }

    .history-moment-label {
        margin-bottom: 5px;

        font-size: 9px;

        letter-spacing:
            0.12em;
    }

    .history-moment-content h3 {
        margin-bottom: 9px;

        font-size:
            clamp(
                1.4rem,
                7vw,
                1.7rem
            );
    }

    .history-moment-content
    p:not(.history-moment-label) {
        font-size: 13px;

        line-height: 1.67;
    }


    /*
       Keep the exact same scroll reveal on mobile.
       Only reduce the travel distance slightly.
    */

    .js-enabled
    .history-reveal.reveal-ready:not(.animate-in),
    .js-enabled
    .history-moment.reveal-ready:not(.animate-in) {
        opacity: 0;

        transform:
            translateY(22px);
    }


    /* ==================================================
       LEGACY
    ================================================== */

    .history-legacy {
        padding:
            60px 0 65px;
    }

    .history-legacy-grid {
        gap: 34px;
    }

    .history-legacy-copy {
        text-align: center;
    }

    .history-legacy-separator {
        width: 58px;

        margin:
            21px auto;
    }

    .history-legacy-copy
    p:not(.section-eyebrow) {
        font-size: 14px;

        line-height: 1.7;
    }

    .history-legacy-copy
    .history-legacy-lead {
        font-size: 16px;
    }

    .history-legacy-summary {
        padding:
            30px 26px;
    }

    .history-summary-label {
        margin-bottom: 20px;

        font-size: 10px;
    }

    .history-legacy-summary dd {
        font-size: 17px;
    }


    /* ==================================================
       CALLOUT
    ================================================== */

    .history-callout {
        padding:
            48px 0;
    }

    .history-callout-inner {
        align-items: stretch;

        flex-direction: column;

        gap: 27px;

        text-align: center;
    }

    .history-callout-kicker {
        font-size: 10px;
    }

    .history-callout h2 {
        font-size:
            clamp(
                1.8rem,
                9vw,
                2.4rem
            );
    }

    .history-callout-button {
        align-self: center;

        width: 100%;
        max-width: 340px;
    }

}


/* ==================================================
   SMALL MOBILE
   480px AND BELOW
================================================== */

@media (max-width: 480px) {

    .history-container,
    .history-narrow-container {
        width:
            calc(
                100% - 24px
            );
    }


    /* Hero */

    .history-hero-copy {
        padding:
            46px 0 43px;
    }

    .history-hero h1 {
        font-size:
            clamp(
                2.45rem,
                13vw,
                3.4rem
            );
    }

    .history-hero-year {
        padding:
            25px 16px;
    }

    .history-hero-year strong {
        font-size: 4rem;
    }


    /* Opening */

    .history-opening {
        padding:
            52px 0;
    }


    /* Timeline */

    .history-timeline-section {
        padding:
            52px 0 58px;
    }

    .history-section-heading {
        margin-bottom: 34px;
    }

    .history-moment {
        padding:
            0
            0
            38px
            33px;
    }

    .history-timeline-track {
        left: 7px;
    }

    .history-moment-dot {
        left: -1px;

        width: 18px;
        height: 18px;
    }

    .history-moment-content h3 {
        font-size: 1.35rem;
    }

    .history-moment-content
    p:not(.history-moment-label) {
        font-size: 12px;

        line-height: 1.65;
    }


    /* Legacy */

    .history-legacy {
        padding:
            54px 0 58px;
    }

    .history-legacy-summary {
        padding:
            27px 22px;
    }

    .history-legacy-summary
    dl div {
        padding-bottom: 14px;
        margin-bottom: 14px;
    }


    /* Callout */

    .history-callout {
        padding:
            43px 0;
    }

    .history-callout-button {
        max-width: none;
    }

}


/* ==================================================
   TOUCH DEVICES
================================================== */

@media (hover: none) {

    /*
       Prevent desktop hover states from remaining
       visually stuck after a tap.
    */

    .history-legacy-summary:hover {
        border-color:
            var(--orange);

        box-shadow:
            0 16px 38px
            rgba(
                0,
                0,
                0,
                0.07
            );

        transform: none;
    }

    .history-callout-button:hover {
        background-color:
            var(--orange);

        border-color:
            var(--orange);

        color: #ffffff;

        transform: none;
    }


    /* Touch feedback */

    .history-legacy-summary:active {
        border-color:
            var(--gold);

        transform:
            translateY(-2px);
    }

    .history-callout-button:active {
        background-color:
            var(--gold);

        border-color:
            var(--gold);

        color:
            var(--navy);

        transform:
            translateY(-1px);
    }

}


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

@media
(max-width: 900px)
and
(orientation: landscape)
and
(max-height: 520px) {

    /*
       Landscape phones have much less vertical room,
       so the hero is made slightly more compact while
       keeping the same visual composition.
    */

    .history-hero-copy {
        padding:
            38px 0 36px;
    }

    .history-hero h1 {
        font-size:
            clamp(
                2.4rem,
                7vw,
                3.3rem
            );
    }

    .history-hero-separator {
        margin:
            18px auto;
    }

    .history-hero-year {
        min-height: 130px;

        padding:
            20px 18px;
    }

    .history-hero-year strong {
        font-size: 3.8rem;
    }

    .history-year-caption {
        margin-top: 8px;
    }

}


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

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

    .history-reveal,
    .history-moment,

    .history-reveal.reveal-ready:not(.animate-in),
    .history-moment.reveal-ready:not(.animate-in) {
        opacity: 1;

        transform: none;

        transition: none !important;
        transition-delay: 0s !important;
    }

    .history-timeline-progress {
        transition: none;
    }

    .history-moment-dot,
    .history-legacy-summary,
    .history-callout-button {
        transition: none;
    }

}