/* ============================================================
   test.css — Extracted styles for <main> prototype
   Fonts: Herbert (prototyping stand-in)
   Source reference: src/app.css
   ============================================================ */

/* ------------------------------------------------------------
   FONTS
   ------------------------------------------------------------ */
@font-face {
    font-family: Herbert;
    font-display: fallback;
    src: url(fonts/Herbert/Herbert-Regular.woff) format("woff"),
         url(fonts/Herbert/Herbert-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Herbert;
    font-display: fallback;
    src: url(fonts/Herbert/Herbert-Italic.woff) format("woff"),
         url(fonts/Herbert/Herbert-Italic.ttf) format("truetype");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: HerbertSemiSans;
    font-display: fallback;
    src: url(fonts/Herbert/Herbert-SemiSans.woff) format("woff"),
         url(fonts/Herbert/Herbert-SemiSans.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

/* ------------------------------------------------------------
   VARIABLES
   ------------------------------------------------------------ */
:root {
    --color: #000;
    --soft: #fffcf9;
    --serif: 'Herbert', sans-serif;
    --sans:  'Herbert', sans-serif;
    --italic: 'Herbert', sans-serif;
    --neue: 'HerbertSemiSans', sans-serif;
    --gap: 5vw;
}

@media only screen and (min-width: 1025px) {
    :root {
        --gap: 4vw;
    }
}

/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    color: var(--color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; }

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    line-height: 1;
    overscroll-behavior: none;
    overflow-x: hidden;
    background: var(--soft);
}

h1 {
    font-size: 2em;
    margin: 0;
}

p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
}

@media only screen and (min-width: 1025px) {
    p {
        font-size: 1.05vw;
        line-height: 1.8vw;
        margin-bottom: 1.5vw;
    }
}

a, picture, span { display: block; }

picture {
    width: 100%;
    height: 100%;
}

img {
    border-style: none;
    display: block;
}

/* Hidden before load — faded in by JS after images are ready */
.main {
    opacity: 0;
    visibility: hidden;
}

/* Hidden before JS reveal fires */
.js-img {
    opacity: 0;
}

/* Natural ratio: when a real <img> is a direct child, let it drive height */
.js-img > img {
    width: 100%;
    height: auto;
    display: block;
}

.js-img:has(> img) {
    height: auto !important;
}

/* ------------------------------------------------------------
   UTILITY — LAYOUT
   ------------------------------------------------------------ */
.e-hold {
    margin: 0 auto;
    width: calc(100vw - var(--gap) * 2);
}

.e-wp  { width: 100%; }
.e-hp  { height: 100%; }
.e-wvw { width: 100vw; }
.e-hvh { height: 100vh; }

.e-rel { position: relative; }
.e-abs { position: absolute; }
.e-fixed { position: fixed; }

.e-flex,
.e-flex-col {
    display: flex;
    justify-content: center;
    align-items: center;
}
.e-flex-col { flex-direction: column; }

.e-hidden { overflow: hidden; }

.e-img-fit {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------
   UTILITY — COLOUR / TYPE
   ------------------------------------------------------------ */
.e-white { background-color: #fff; }
.e-black { background-color: #000; }
.t-white { color: #fff; }
.t-italic { font-style: italic; }
.t-center { text-align: center; }
.e-upper { text-transform: uppercase; }

.no-event { pointer-events: none !important; }

@media only screen and (max-width: 960px) {
    .no-mobile { display: none !important; }
}
@media only screen and (min-width: 580px) and (max-width: 1024px) {
    .no-mobile { display: none !important; }
}

/* ------------------------------------------------------------
   UTILITY — TEXT ANIMATION (SplitText wrappers)
   ------------------------------------------------------------ */
.wrap,
.wrap-p {
    overflow: hidden;
    color: inherit;
}

.wrap-p .wrapped,
.wrap-p .wrapped-p,
.wrap .wrapped,
.wrap .wrapped-p {
    color: inherit;
    white-space: nowrap;
}

.will-change { will-change: transform; }

/* ------------------------------------------------------------
   TITLE REVEAL
   ------------------------------------------------------------ */
.title-reveal {
    font-family: var(--serif);
    line-height: 0.85;
}

.title-reveal .wrap {
    overflow: hidden;
    position: relative;
}

.title-reveal .wrap .wrapped:last-child {
    position: absolute;
}

h1.title-reveal {
    /* font-size: 200px; */
    font-size: 10vw;
    /* margin-bottom: 5vw; */
}

@media only screen and (min-width: 1025px) {
    h1.title-reveal {
        font-size: 20.5vw;
        margin-bottom: 5vw;
        margin-left: -0.7vw;
    }
}

/* Title section */
.title-section {
    position: relative;
}

/* ---- Chapter-specific title sizes ---- */
.title-myths {
    font-size: 125px !important;
}

@media only screen and (min-width: 1025px) {
    .title-myths {
        font-size: 19.8vw !important;
    }
}

.title-challenge {
    font-size: 75px !important;
}

@media only screen and (min-width: 1025px) {
    .title-challenge {
        font-size: 15.2vw !important;
    }
}

/* ------------------------------------------------------------
   MODULE 1 — Large image + side text
   ------------------------------------------------------------ */
.module1 {
    margin-top: 9px;
}

@media only screen and (min-width: 1025px) {
    .module1 {
        margin-top: 1vw;
        position: relative;
    }
}

@media only screen and (min-width: 1025px) {
    .module1__hold {
        display: flex;
    }
}

@media only screen and (min-width: 1025px) {
    .module1__img {
        height: 38.7vw;
        width: 53.4vw;
        flex-shrink: 0;
    }
}

.module1__text {
    margin-top: 28px;
}

@media only screen and (min-width: 1025px) {
    .module1__text {
        margin: 0 0 0 4.2vw;
        width: 30vw;
    }
}

.module1__text p {
    width: 85%;
}

@media only screen and (min-width: 1025px) {
    .module1__text p {
        width: 100%;
    }
}

@media only screen and (min-width: 1025px) {
    .module1__dot {
        border-radius: 50%;
        bottom: -15vw;
        height: 1.3vw;
        position: absolute;
        width: 1.3vw;
    }
}

@media only screen and (min-width: 1025px) {
    .dot-myths {
        bottom: -31vw !important;
    }
}

/* ------------------------------------------------------------
   MODULE 2 — Two-column image layout
   ------------------------------------------------------------ */
.module2 {
    margin-top: 75px;
}

@media only screen and (min-width: 1025px) {
    .module2 {
        margin-top: 20.4vw;
    }
}

@media only screen and (min-width: 1025px) {
    .module2__hold {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
}

@media only screen and (min-width: 1025px) {
    .module2__col1 {
        display: flex;
        flex-direction: column-reverse;
        width: 35.4vw;
        margin-top: 2.1vw;
    }
}

.module2__col1__img {
    width: 64vw;
}

@media only screen and (min-width: 1025px) {
    .module2__col1__img {
        width: 100%;
        margin-top: 0.4vw;
        height: 37.2vw;
    }
}

.module2__text {
    margin-top: 47px;
    width: 71%;
}

@media only screen and (min-width: 1025px) {
    .module2__text {
        margin-top: 1.4vw;
        width: 100%;
    }
}

.module2__text .t-italic {
    font-size: 14px;
    margin-top: 10.4vw;
}

@media only screen and (min-width: 1025px) {
    .module2__text .t-italic {
        font-size: 1.12vw;
    }
}

.module2__col2 {
    margin-top: 35px;
}

@media only screen and (min-width: 1025px) {
    .module2__col2 {
        width: 53.6vw;
    }
}

.module2__col2__img {
    width: 100vw;
    margin-left: -5vw;
}

/* @media only screen and (min-width: 580px) and (max-width: 1024px) {
    .module2__col2__img {
        height: 120vh;
    }
} */

@media only screen and (min-width: 1025px) {
    .module2__col2__img {
        width: 100%;
        margin: 0;
        height: 81.2vw;
    }
}

/* Myths variant */
/* @media only screen and (min-width: 1025px) {
    .myths .module2__col2__img img {
        object-position: 0 -12vw;
    }
} */

/* Challenge variant */
@media only screen and (min-width: 1025px) {
    .challe {
        margin-top: 6.3vw;
    }
    .challe .module2__col1__img {
        margin-top: 26.8vw;
    }
    .challe .module2__col2__img {
        margin-top: 21vw;
    }
}

/* ------------------------------------------------------------
   MODULE 3 — Offset single / dual images
   ------------------------------------------------------------ */
.module3 {
    margin-top: 75px;
}

@media only screen and (min-width: 1025px) {
    .module3 {
        margin-top: 10.7vw;
    }
}

.module3__img1 {
    margin-top: 42px;
    width: 73vw;
}

@media only screen and (min-width: 1025px) {
    .module3__img1 {
        width: 53.5vw;
        height: 40.7vw;
    }
}

.module3__img2 {
    margin-top: 69px;
    width: 51vw;
    margin-left: 39vw;
}

@media only screen and (min-width: 1025px) {
    .module3__img2 {
        height: 56.8vw;
        margin: 10.8vw 0 0 57.6vw;
        width: 34.4vw;
    }
}

/* ------------------------------------------------------------
   SEC-HORI — Horizontal scroll section
   ------------------------------------------------------------ */
.sec-hori {
    overflow: hidden;
    margin: 47px 0 106px;
    position: relative;
}

@media only screen and (min-width: 1025px) {
    .sec-hori {
        height: 450vh;
        margin: 9.3vw 0 10.1vw;
    }
}

@media only screen and (max-width: 1024px) {
    .sec-hori {
        padding: 6vh 0;
        background: #000;
    }
}

.sec-hori__travel {
    margin: 5vh 0 0 5vw;
    width: 90vw;
}

@media only screen and (min-width: 1025px) {
    .sec-hori__travel {
        display: flex;
        align-items: flex-start;
        flex-wrap: nowrap;
        height: 78vh;
        justify-content: flex-start;
        margin-left: 4vw;
        margin-top: 12vh;
        will-change: transform;
    }
}

.sec-hori__each {
    height: 100%;
    position: relative;
    width: 100%;
}

@media only screen and (min-width: 1025px) {
    .sec-hori__each {
        flex-shrink: 0;
        overflow: hidden;
        width: 70vw;
    }

    /* When a direct <img> child is present, let its aspect ratio set width */
    .sec-hori__each:has(> img) {
        width: auto;
    }
}

/* Natural-ratio image inside hori scroll: fixed height, auto width */
.sec-hori__each > img {
    height: 100%;
    width: auto;
    display: block;
    max-width: none;
}

.sec-hori__each picture {
    -webkit-clip-path: inset(0 0 40px 0);
    clip-path: inset(0 0 40px 0);
}

/* Narrow child — no longer needed; width is driven by image aspect ratio */

/* Mobile batch reveal classes (CSS-driven, for non-desktop) */
@media only screen and (max-width: 1024px) {
    .sec-hori .pic-batch {
        overflow: hidden;
    }
}

.sec-hori .pic-batch picture {
    transform: scale(1.6);
    transition: transform 2.6s cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-clip-path 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 2.6s cubic-bezier(0.16, 1, 0.3, 1),
                clip-path 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition: transform 2.6s cubic-bezier(0.16, 1, 0.3, 1),
                clip-path 1.6s cubic-bezier(0.16, 1, 0.3, 1),
                -webkit-clip-path 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sec-hori .is-view picture {
    transform: scale(1) !important;
}

/* ------------------------------------------------------------
   BIG PARALLAX SECTION
   ------------------------------------------------------------ */
.big-plx {
    margin: 10.7vw 0;
    height: 110vh;
}

@media only screen and (min-width: 1025px) {
    .big-plx {
        height: 130vh;
    }
}

.big-plx img {
    margin-top: -10vw;
}

/* ------------------------------------------------------------
   NAV CLOSING SECTION
   ------------------------------------------------------------ */
.nav {
    padding: 120px 0;
}

@media only screen and (min-width: 1025px) {
    .nav {
        padding-top: 0;
        padding-bottom: 18vw;
    }
}

@media only screen and (min-width: 1025px) {
    .nav__title {
        width: 100%;
    }
}

.nav__title h2 {
    font-family: var(--serif);
    color: #fff;
    font-size: 49px;
    line-height: 1;
}

@media only screen and (min-width: 1025px) {
    .nav__title h2 {
        font-size: 10.98vw;
        white-space: nowrap;
    }
}

.nav__title h2 .wrap-words {
    overflow: hidden;
}

.nav__title h2 .wrap-words div {
    white-space: nowrap;
}

.nav__title span {
    display: inline-block;
}

.nav__title__the span:last-child {
    margin-left: 11.3vw;
}

@media only screen and (min-width: 1025px) {
    .nav__title__im {
        margin-left: 23.5vw;
    }
}

.nav__were {
    font-size: 15px;
    margin-bottom: 4vw;
    background: #fff;
    color: #000;
}

@media only screen and (min-width: 1025px) {
    .nav__were {
        font-size: 1.05vw;
    }
}

.nav__authors {
    display: block;
    margin-top: 23px;
    text-align: center;
}

@media only screen and (min-width: 1025px) {
    .nav__authors {
        width: 55vw;
        margin-top: 91px;
        display: flex;
        justify-content: space-between;
        text-align: initial;
    }
}

.nav__authors__each {
    padding: 5px 0;
    color: #fff;
}

@media only screen and (min-width: 1025px) {
    .nav__authors__each {
        padding: 0;
        font-size: 1vw;
    }
}

/* nav background is black (set by GSAP on scroll) */
.nav__hold {
    align-items: flex-start;
}