/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

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

:root {
    /* ============================================= */
    /* TYPOGRAPHY
    /* ============================================= */
    --ff-base: "Montserrat", sans-serif;

    --fs-home-title: clamp(2.5rem, 10vw, 5rem);
    --fs-home-subtitle: 1rem;
    --fs-home-subtitle-desktop: 1.25rem;

    --fs-nav-link: 1.125rem;
    --fs-nav-toggle: 1.125rem;

    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;
    --fw-black: 900;

    --lh-tight: 0.95;
    --lh-base: 1.4;
    --lh-body: 1.6;

    /* ============================================= */
    /* LAYOUT
    /* ============================================= */
    --site-max-width: 120rem;
    --content-max-width: 52rem;

    --desktop-breakpoint: 65rem;
    --desktop-nav-width: 13.25rem;

    --hero-padding-mobile: 8rem 1.5rem 4rem;
    --hero-padding-desktop: 10rem 3rem 5rem;

    /* ============================================= */
    /* SPACING
    /* ============================================= */
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 3rem;
    --space-4xl: 4rem;
    --space-5xl: 5rem;
    --space-6xl: 6rem;

    /* ============================================= */
    /* COLORS
    /* ============================================= */
    --clr-white: hsla(0, 0%, 100%, 1);
    --clr-white-muted: hsla(0, 0%, 100%, .9);
    --clr-white-soft: hsla(0, 0%, 100%, 0.35);
    --clr-black: hsla(0, 0%, 0%, 1);

    --clr-text: var(--clr-white);
    --clr-text-muted: var(--clr-white-soft);
    --clr-title: hsla(45, 100%, 50%, 1);

    --clr-overlay-black-010: hsla(0, 0%, 0%, 0.1);
    --clr-overlay-black-020: hsla(0, 0%, 0%, 0.2);
    --clr-overlay-black-030: hsla(0, 0%, 0%, 0.3);
    --clr-overlay-black-040: hsla(0, 0%, 0%, 0.4);
    --clr-overlay-black-050: hsla(0, 0%, 0%, 0.5);
    --clr-overlay-black-055: hsla(0, 0%, 0%, 0.55);
    --clr-overlay-black-070: hsla(0, 0%, 0%, 0.7);
    --clr-overlay-black-072: hsla(0, 0%, 0%, 0.72);
    --clr-overlay-black-090: hsla(0, 0%, 0%, 0.9);

    --clr-overlay-green-050: hsla(119, 100%, 10%, 0.5);
    --clr-overlay-overview: hsla(43, 100%, 36%, 0.78);

    --clr-nav-bg: hsla(0, 0%, 0%, 0.62);
    --clr-nav-bg-strong: hsla(0, 0%, 0%, 0.9);
    --clr-nav-divider: hsla(0, 0%, 100%, 0.6);

    --clr-scroll-btn: hsla(0, 0%, 0%, 0.45);
    --clr-scroll-btn-hover: hsla(0, 0%, 0%, 0.7);
    --clr-button-bg: hsla(0, 0%, 100%, 0.28);

    /* ============================================= */
    /* BORDER RADIUS
    /* ============================================= */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-round: 999rem;

    /* ============================================= */
    /* SHADOWS
    /* ============================================= */
    --shadow-soft: 0 0.5rem 2rem hsla(0, 0%, 0%, 0.25);

    /* ============================================= */
    /* COMPONENT SIZING
    /* ============================================= */
    --divider-width: 8rem;
    --divider-height: 0.125rem;

    --scroll-btn-size: 3.25rem;
    --scroll-icon-size: 1.5rem;

    --logo-width-mobile: 14rem;
    --logo-width-desktop: 18rem;
    --brand-width-mobile: 8.75rem;
    --brand-width-desktop: 11rem;

    --mobile-nav-width: 11.875rem;
    --mobile-nav-height: 4.25rem;

    --next-btn-size: 3rem;
    --next-icon-size: 2.25rem;
}

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



/* ============================================= */
/* ============================================= */
/* Home | START
/* ============================================= */
/* ============================================= */

.timeline-home {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: var(--hero-padding-mobile);

    display: flex;
    align-items: flex-end;
    justify-content: center;

    overflow: hidden;

    background-image: url("../img/timeline-images/_home/RT-O_timeline-hero-bg_home.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    font-family: var(--ff-base);
}

.timeline-home::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--clr-overlay-black-050);
    z-index: 1;
}

.timeline-home__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: var(--site-max-width);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.timeline-home__content {
    max-width: 40rem;
}

.timeline-home__title {
    margin: 0;

    font-size: var(--fs-home-title);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);

    text-transform: uppercase;
    color: var(--clr-title);
}

.timeline-home__divider {
    width: var(--divider-width);
    height: var(--divider-height);

    margin: var(--space-lg) auto var(--space-md);

    background-color: var(--clr-text-muted);
}

.timeline-home__subtitle {
    margin: 0;

    font-size: var(--fs-home-subtitle);
    font-weight: var(--fw-bold);
    line-height: var(--lh-base);

    text-transform: uppercase;
    color: var(--clr-text);
}

.timeline-home__scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: var(--scroll-btn-size);
    height: var(--scroll-btn-size);

    margin-top: var(--space-xl);

    border-radius: 50%;
    background-color: var(--clr-scroll-btn);

    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.timeline-home__scroll-btn:hover,
.timeline-home__scroll-btn:focus-visible {
    transform: translateY(0.25rem);
    background-color: var(--clr-scroll-btn-hover);
}

.timeline-home__scroll-btn img {
    width: var(--scroll-icon-size);
    height: var(--scroll-icon-size);
}

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

@media (min-width: 65rem) {
    .timeline-home {
        height: 100vh;
        min-height: 0;
        padding: var(--hero-padding-desktop);
        align-items: center;
    }

    .timeline-home__content {
        max-width: var(--content-max-width);
    }

    .timeline-home__subtitle {
        font-size: var(--fs-home-subtitle-desktop);
    }

    .timeline-home__scroll-btn {
        margin-top: var(--space-2xl);
    }
}


/* ============================================= */
/* ============================================= */
/* Home | END
/* ============================================= */
/* ============================================= */


/* ============================================= */
/* ============================================= */
/* Overview | START
/* ============================================= */
/* ============================================= */

.timeline-overview {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 6rem 1rem 2rem;
    overflow: hidden;
    font-family: var(--ff-base);

    background-image: url("../img/timeline-images/_home/RT-O_timeline-hero-bg_home.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.timeline-overview::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--clr-overlay-overview);
    z-index: 1;
}

.timeline-overview > * {
    position: relative;
    z-index: 2;
}


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

.timeline-overview__inner {
    width: 100%;
    max-width: var(--site-max-width);
    margin: 0 auto;
    min-height: calc(100vh - 8rem);

    display: flex;
    align-items: center;
    justify-content: center;
}



/* ============================================= */
/* NEXT BUTTON
/* ============================================= */

.timeline-overview__next {
    width: var(--next-btn-size);
    height: var(--next-btn-size);
    margin: 2rem auto 0;
    border-radius: var(--radius-round);
    background-color: var(--clr-button-bg);

    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-overview__next img {
    width: var(--next-icon-size);
    height: var(--next-icon-size);
}


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

@media (min-width: 65rem) {
    .timeline-overview {
        min-height: 100vh;
        padding: 0 3rem;
        display: flex;
        align-items: center;
    }

    .timeline-overview__nav-mobile {
        display: none;
    }

    .timeline-overview__inner {
        min-height: 100vh;
        justify-content: flex-start;
        align-items: center;
        padding-left: 17rem;
        padding-right: 5rem;
    }



    .timeline-overview__next {
        position: absolute;
        left: 50%;
        bottom: 1.5rem;
        transform: translateX(-50%);
        margin: 0;
    }

}

/* ============================================= */
/* ============================================= */
/* Overview | END
/* ============================================= */
/* ============================================= */



/* ============================================= */
/* ============================================= */
/* Timeline slide | START */
/* ============================================= */
/* ============================================= */

.timeline-slide {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 6rem 1.25rem 5rem;
    overflow: hidden;

    display: flex;
    align-items: center;

    font-family: var(--ff-base);

    background-image: var(--slide-bg-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.timeline-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.timeline-slide--purple::after {
    background-color: hsla(234, 54%, 22%, 0.82);
}

.timeline-slide--yellow::after {
    background-color: hsla(45, 100%, 30%, 0.753);
}

.timeline-slide__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: var(--site-max-width);
    margin: 0 auto;

    display: flex;
    justify-content: center;
}

.timeline-slide__content {
    width: 100%;
    max-width: 42rem;
    text-align: center;
    color: var(--clr-white);
}

.timeline-slide__year {
    margin: 0;

    font-size: clamp(2.75rem, 15vw, 3rem);
    line-height: 0.95;
    font-weight: var(--fw-extra-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.timeline-slide__title {
    margin: 0.75rem 0 1.5rem;

    font-size: clamp(1.5rem, 8vw, 1.75rem);
    line-height: 1.05;
    font-weight: var(--fw-extra-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;

    color: var(--clr-white-muted);
}

.timeline-slide__body-wrap {
    position: relative;

    max-height: 16rem;
    padding-right: 1.25rem;

    overflow-y: auto;

    /* Firefox */
    scrollbar-width: auto;
    scrollbar-color: hsla(0, 0%, 100%, 0.95) hsla(0, 0%, 100%, 0.22);
}

.timeline-slide__body-wrap::-webkit-scrollbar {
    width: 0.875rem;
}

.timeline-slide__body-wrap::-webkit-scrollbar-track {
    background-color: hsla(0, 0%, 100%, 0.22);
    border-radius: var(--radius-round);
}

.timeline-slide__body-wrap::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 100%, 0.95);
    border-radius: var(--radius-round);

    /* creates visual inset/padding inside the scrollbar */
    border: 0.25rem solid hsla(235, 28%, 28%, 0.9);
}

.timeline-slide__body-wrap::-webkit-scrollbar-thumb:hover {
    background-color: hsl(0, 0%, 100%);
}

.timeline-slide__body {
    font-size: clamp(1rem, 2vw, 1rem);
    line-height: 1.3;
    font-weight: var(--fw-regular);
    letter-spacing: 0.03em;
}

.timeline-slide__body p {
    margin: 0;
}

.timeline-slide__body p a {
    color: var(--clr-white);
    font-weight: var(--fw-semibold);
    transition: all 0.25s ease;
}

.timeline-slide__body p a:hover {
    color: var(--clr-white-muted);
}

.timeline-slide__body p + p {
    margin-top: 1rem;
}

.timeline-slide__body strong {
    font-weight: var(--fw-extra-bold);
}

.timeline-slide__body em {
    font-style: italic;
}

@media (min-width: 65rem) {
    .timeline-slide__body-wrap {
        max-height: 19rem;
        padding-left: 20;
        padding-right: 1.5rem;
        /* border-left: 0.25rem solid hsla(0, 0%, 100%, 0.45); */
    }
}

.timeline-slide__media {
    margin-top: 2.5rem;

    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.timeline-media-thumb {
    position: relative;
    width: min(100%, 16rem);
    margin: 0 auto;
    padding: 0;
    border: 0.0625rem solid hsla(0, 0%, 100%, 0.35);
    background-color: hsla(0, 0%, 0%, 0.3);
    cursor: pointer;
    overflow: hidden;
    box-shadow: 5px 5px 5px hsla(0, 0%, 0%, 0.45);
}

.timeline-media-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    opacity: 1;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

/* colour overlay */
.timeline-media-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 26, 64, 0.65);
  z-index: 1;
  pointer-events: none;
}


.timeline-media-thumb:hover img,
.timeline-media-thumb:focus-visible img {
    opacity: 0.95;
    transform: scale(1.04);
}

/* icon */
.timeline-media-thumb__icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
  pointer-events: none;
}

.timeline-media-thumb__icon--image::after {
  background-image: url("../img/icons/icon-gallery.svg");
}

.timeline-media-thumb__icon--video::after {
  background-image: url("../img/icons/icon-video.svg");
}

/* .timeline-media-thumb__icon {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-media-thumb__icon--video::before {
    content: "";
    width: 0;
    height: 0;

    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 1.65rem solid var(--clr-white);
}

.timeline-media-thumb__icon--image::before {
    content: "";
    display: block;
    width: 3rem;
    height: 3rem;
    background-image: url("../img/icons/icon-gallery.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
} */

video {
    max-width: 100vw;
}

@media (min-width: 65rem) {
    .timeline-slide {
        padding: 0 7rem 0 3rem;
    }

    .timeline-slide__inner {
        justify-content: flex-start;
        align-items: center;
        min-height: 100vh;
        padding-left: 11.875rem;
    }

    .timeline-slide__content {
        max-width: 51rem;
        text-align: left;
    }

    .timeline-slide__media {
        max-width: 33.5rem;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.875rem;
    }

    .timeline-media-thumb {
        width: 100%;
        margin: 0;
    }

    video {
    max-width: 50vw;
}
}

/* ============================================= */
/* ============================================= */
/* Timeline slide | END */
/* ============================================= */
/* ============================================= */



/* ============================================= */
/* ============================================= */
/* Media modal | START */
/* ============================================= */
/* ============================================= */

.media-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;

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

    padding: 1.25rem;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.3s ease,
        visibility 0s linear 0.3s;
}

.media-modal.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity 0.3s ease,
        visibility 0s linear 0s;
}

.media-modal__backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: hsla(0, 0%, 0%, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    cursor: pointer;
}

.media-modal__stage {
    position: relative;
    z-index: 2;

    width: min(100%, 62rem);
    color: var(--clr-white);
}

.media-modal__content {
    width: 100%;
    display: flex;
    justify-content: center;
}

.media-modal__content img {
    display: block;
    width: 100%;
    max-height: 72vh;
    border: 0;
    object-fit: contain;
}

.media-modal__video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--clr-black);
}

.media-modal__video-frame iframe,
.media-modal__video-frame video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.media-modal__caption {
    margin: 0.875rem 0 0;
    font-family: var(--ff-base);
    font-size: 1rem;
    line-height: 1.35;
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    text-align: center;
}

.media-modal__pagination {
    margin: 2.5rem 0 0;
    font-family: var(--ff-base);
    text-align: center;
    font-size: 0.8rem;
    line-height: 1;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
}

.media-modal__close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 3;

    width: 3.75rem;
    height: 3.75rem;

    border: 0;
    background-color: transparent;
    color: var(--clr-white);

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

    font: inherit;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
}

.media-modal__nav {
    position: fixed;
    top: 50%;
    z-index: 3;

    width: 4rem;
    height: 4rem;

    border: 0;
    background: transparent;
    color: hsla(0, 0%, 100%, 0.65);

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

    font: inherit;
    font-size: 6rem;
    line-height: 1;
    cursor: pointer;

    transform: translateY(-50%);
}

.media-modal__nav--prev {
    left: 2.5rem;
}

.media-modal__nav--next {
    right: 2.5rem;
}

.media-modal__nav.is-hidden {
    display: none;
}

.timeline-home,
#timelineSectionsRoot,
.timeline-section-arrows,
.global-menu__desktop-lockup {
    transition:
        filter 0.3s ease,
        transform 0.3s ease,
        opacity 0.3s ease;
}

/* body.has-media-modal-open .timeline-home,
body.has-media-modal-open #timelineSectionsRoot {
    filter: blur(5px);
    transform: scale(1.015);
} */

body.has-media-modal-open .timeline-section-arrows,
body.has-media-modal-open .global-menu__desktop-lockup {
    filter: blur(5px);
    opacity: 0.35;
}

body.has-media-modal-open {
    overflow: hidden;
}

@media (max-width: 64.9375rem) {
    .media-modal__stage {
        width: min(100%, 34rem);
    }

    .media-modal__nav {
        width: 3rem;
        height: 3rem;
        font-size: 4rem;
    }

    .media-modal__nav--prev {
        left: 0.5rem;
    }

    .media-modal__nav--next {
        right: 0.5rem;
    }

    .media-modal__close {
        width: 3rem;
        height: 3rem;
        font-size: 2.5rem;
    }
}

/* ============================================= */
/* ============================================= */
/* Media modal | END */
/* ============================================= */
/* ============================================= */