@font-face {
    font-family: "Coming Soon";
    src:
        local("Coming Soon"),
        local("Coming Soon-Regular"),
        url("./assets/coming-soon-v20-latin-regular.woff2") format("woff2");
}


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

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

html {
    scroll-behavior: smooth;
}

body {
    background: #f6f2e9;
    color: #202522;
    font-family:
        "Noto Sans SC",
        "Microsoft YaHei",
        sans-serif;
    overflow-x: hidden;
}

img {
    display: block;
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}


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

:root {

    --ink: #202522;
    --paper: #f6f2e9;
    --paper-dark: #ebe5d8;

    --river: #5c8f91;
    --river-dark: #315e61;

    --orange: #c96f42;

    --line: rgba(32, 37, 34, 0.18);

    --max-width: 1280px;

}


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

.header {

    position: sticky;
    top: 0;
    z-index: 100;

    background: rgba(246, 242, 233, 0.94);

    backdrop-filter: blur(14px);

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

}


.header-container {

    width: min(
        calc(100% - 64px),
        var(--max-width)
    );

    min-height: 84px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.header-logo {

    width: 135px;

    flex-shrink: 0;

}


.header-logo img {

    width: 100%;

}


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

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 32px;

    margin-left: auto;

    margin-right: 30px;

}


.desktop-nav a {

    position: relative;

    font-family: "Coming Soon", sans-serif;

    font-size: 14px;

    letter-spacing: 0.04em;

    color: var(--ink);

    transition: 0.3s;

}


.desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -7px;

    width: 0;

    height: 1px;

    background: var(--orange);

    transition: 0.3s;

}


.desktop-nav a:hover {

    color: var(--orange);

}


.desktop-nav a:hover::after {

    width: 100%;

}


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

.header-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}


.search-button {

    border: 1px solid var(--ink);

    background: transparent;

    padding: 9px 17px;

    border-radius: 100px;

    font-family: "Coming Soon", sans-serif;

    cursor: pointer;

    transition: 0.3s;

}


.search-button:hover {

    background: var(--ink);

    color: white;

}


/* ========================================
   MOBILE MENU BUTTON
======================================== */

.menu-button {

    display: none;

    width: 42px;

    height: 42px;

    border: 1px solid var(--ink);

    background: transparent;

    border-radius: 50%;

    cursor: pointer;

    padding: 10px;

}


.menu-button span {

    display: block;

    height: 1px;

    background: var(--ink);

    margin: 4px 0;

    transition: 0.3s;

}


.menu-button.active span:nth-child(1) {

    transform:
        translateY(5px)
        rotate(45deg);

}


.menu-button.active span:nth-child(2) {

    opacity: 0;

}


.menu-button.active span:nth-child(3) {

    transform:
        translateY(-5px)
        rotate(-45deg);

}


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

.mobile-nav {

    display: none;

}


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

.hero {

    width: 100%;

    padding:
        90px
        32px
        120px;

}


.hero-inner {

    width: min(
        calc(100% - 0px),
        var(--max-width)
    );

    margin: auto;

    display: grid;

    grid-template-columns:
        0.8fr
        1.2fr;

    gap: 80px;

    align-items: center;

}


.hero-copy {

    position: relative;

}


.eyebrow {

    font-family: "Coming Soon", sans-serif;

    font-size: 12px;

    letter-spacing: 0.18em;

    color: var(--orange);

    margin-bottom: 22px;

}


.hero h1 {

    font-family:
        "Coming Soon",
        sans-serif;

    font-size: clamp(
        70px,
        8vw,
        126px
    );

    font-weight: 400;

    line-height: 0.82;

    letter-spacing: -0.06em;

}


.hero h1 span {

    color: var(--river);

}


.hero-subtitle {

    margin-top: 34px;

    font-family: "Coming Soon", sans-serif;

    font-size: 22px;

    line-height: 1.5;

}


.hero-description {

    max-width: 470px;

    margin-top: 25px;

    font-size: 15px;

    line-height: 1.9;

    color: #5c625e;

}


.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 20px;

    margin-top: 35px;

    padding: 13px 20px;

    border: 1px solid var(--ink);

    border-radius: 100px;

    font-size: 13px;

    transition: 0.3s;

}


.hero-button:hover {

    background: var(--ink);

    color: white;

}


.hero-button span {

    font-size: 18px;

}


.hero-image {

    position: relative;

}


.hero-image img {

    height: 620px;

    object-fit: cover;

    border-radius: 4px;

}


.hero-caption {

    position: absolute;

    left: 24px;

    bottom: 22px;

    color: white;

    font-family: "Coming Soon", sans-serif;

    font-size: 11px;

    letter-spacing: 0.12em;

    display: flex;

    gap: 15px;

}


.hero-caption span {

    color: #f5b18a;

}


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

.stories {

    width: min(
        calc(100% - 64px),
        var(--max-width)
    );

    margin: auto;

    padding:
        80px
        0
        140px;

}


.section-heading {

    display: grid;

    grid-template-columns: 1fr 0.7fr;

    gap: 60px;

    align-items: end;

    margin-bottom: 100px;

}


.section-heading h2,
.map-heading h2 {

    font-family: "Coming Soon", sans-serif;

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

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -0.05em;

}


.section-heading h2 em,
.map-heading h2 em {

    color: var(--river);

    font-style: normal;

}


.section-intro {

    max-width: 380px;

    font-size: 15px;

    line-height: 1.9;

    color: #686d69;

}


/* ========================================
   STORY CARD
======================================== */

.story-card {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 90px;

    align-items: center;

    padding:
        80px
        0;

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

}


.story-card.reverse .story-image {

    order: 2;

}


.story-card.reverse .story-content {

    order: 1;

}


.story-number {

    position: absolute;

    top: 35px;

    left: 0;

    font-family: "Coming Soon", sans-serif;

    font-size: 13px;

    color: var(--orange);

}


.story-image {

    position: relative;

    overflow: hidden;

}


.story-image img {

    height: 520px;

    object-fit: cover;

    transition: transform 0.8s ease;

}


.story-card:hover
.story-image img {

    transform: scale(1.035);

}


.image-label {

    position: absolute;

    left: 20px;

    bottom: 18px;

    padding: 7px 12px;

    background: rgba(
        20,
        30,
        29,
        0.75
    );

    color: white;

    font-family: "Coming Soon", sans-serif;

    font-size: 10px;

    letter-spacing: 0.14em;

}


.story-content {

    max-width: 480px;

}


.story-location {

    font-family: "Coming Soon", sans-serif;

    font-size: 12px;

    color: var(--orange);

    letter-spacing: 0.12em;

    margin-bottom: 20px;

}


.story-content h3 {

    font-family: "Coming Soon", sans-serif;

    font-weight: 400;

    font-size: clamp(
        40px,
        4vw,
        62px
    );

    line-height: 0.95;

    letter-spacing: -0.04em;

    margin-bottom: 30px;

}


.story-content p {

    font-size: 14px;

    line-height: 1.9;

    color: #646a66;

    margin-bottom: 18px;

}


.story-link {

    display: inline-block;

    margin-top: 18px;

    padding-bottom: 5px;

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

    font-family: "Coming Soon", sans-serif;

    font-size: 13px;

    transition: 0.3s;

}


.story-link:hover {

    color: var(--orange);

    border-color: var(--orange);

}


/* ========================================
   MAP
======================================== */

.map-section {

    width: min(
        calc(100% - 64px),
        var(--max-width)
    );

    margin: auto;

    padding:
        100px
        0
        150px;

}


.map-heading {

    display: grid;

    grid-template-columns: 1fr 0.7fr;

    gap: 60px;

    align-items: end;

    margin-bottom: 55px;

}


.map-heading > p {

    max-width: 350px;

    color: #686d69;

    line-height: 1.8;

    font-size: 14px;

}


.map-wrap {

    position: relative;

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

    background: #ebe5d8;

    padding: 15px;

}


.map-img {

    width: 100%;

    height: auto;

    display: block;

}


/* ========================================
   MAP HOTSPOT
======================================== */

.map-hotspot {

    position: absolute;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--orange);

    color: white;

    border: 4px solid
        rgba(255,255,255,0.75);

    font-family: "Coming Soon", sans-serif;

    font-size: 11px;

    transition: 0.3s;

}


.map-hotspot:hover {

    transform: scale(1.25);

    background: var(--river-dark);

}


.hotspot-well {

    top: 52%;

    left: 56%;

}


.hotspot-orange {

    top: 28%;

    left: 33%;

}


.hotspot-lao {

    top: 22%;

    left: 64%;

}


.hotspot-jing {

    top: 54%;

    left: 22%;

}


.hotspot-yu {

    top: 72%;

    left: 34%;

}


/* ========================================
   POPUP
======================================== */

.popup {

    position: fixed;

    inset: 0;

    z-index: 200;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 25px;

    background:
        rgba(24, 30, 28, 0.58);

    backdrop-filter: blur(5px);

}


.popup:target {

    display: flex;

}


.popup-inner {

    width: min(
        500px,
        100%
    );

    background: var(--paper);

    padding: 50px;

    position: relative;

}


.popup-number {

    color: var(--orange);

    font-family: "Coming Soon", sans-serif;

    font-size: 13px;

}


.popup h3 {

    margin:
        18px
        0
        20px;

    font-family: "Coming Soon", sans-serif;

    font-size: 42px;

    font-weight: 400;

    line-height: 1;

}


.popup p {

    font-size: 14px;

    color: #626763;

    line-height: 1.8;

}


.popup-inner > a {

    display: inline-block;

    margin-top: 30px;

    font-size: 13px;

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

}


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

.footer {

    background: var(--ink);

    color: #f6f2e9;

    padding: 50px 32px;

}


.footer-container {

    width: min(
        100%,
        var(--max-width)
    );

    margin: auto;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

}


.footer-brand {

    font-family: "Coming Soon", sans-serif;

    font-size: 22px;

}


.footer-desc {

    margin-top: 10px;

    color: #aaa;

    font-size: 13px;

}


.footer-copy {

    color: #888;

    font-size: 12px;

}

@media screen and (max-width: 1000px) {

    .desktop-nav {

        gap: 17px;

    }


    .hero-inner {

        gap: 45px;

    }


    .story-card {

        gap: 50px;

    }


    .story-image img {

        height: 430px;

    }

}

@media screen and (max-width: 768px) {

    /* HEADER */

    .header-container {

        width: calc(100% - 36px);

        min-height: 70px;

    }


    .header-logo {

        width: 105px;

    }


    .desktop-nav,
    .search-button {

        display: none;

    }


    .menu-button {

        display: block;

    }


    /* MOBILE NAV */

    .mobile-nav {

        display: flex;

        flex-direction: column;

        gap: 0;

        position: absolute;

        left: 0;

        right: 0;

        top: 70px;

        background: var(--paper);

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

        transform:
            translateY(-120%);

        opacity: 0;

        pointer-events: none;

        transition:
            transform 0.35s ease,
            opacity 0.35s ease;

    }


    .mobile-nav.active {

        transform: translateY(0);

        opacity: 1;

        pointer-events: auto;

    }


    .mobile-nav a {

        padding: 17px 24px;

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

        font-family: "Coming Soon", sans-serif;

        font-size: 13px;

    }


    .mobile-nav a:active {

        background: var(--paper-dark);

    }


    /* HERO */

    .hero {

        padding:
            55px
            18px
            80px;

    }


    .hero-inner {

        display: flex;

        flex-direction: column;

        gap: 45px;

        align-items: stretch;

    }


    .hero h1 {

        font-size:
            clamp(
                66px,
                18vw,
                100px
            );

    }


    .hero-subtitle {

        font-size: 18px;

    }


    .hero-description {

        font-size: 14px;

    }


    .hero-image img {

        height: 430px;

    }


    /* STORIES */

    .stories {

        width:
            calc(100% - 36px);

        padding:
            50px
            0
            90px;

    }


    .section-heading {

        display: block;

        margin-bottom: 60px;

    }


    .section-heading h2,
    .map-heading h2 {

        font-size: 60px;

    }


    .section-intro {

        margin-top: 25px;

    }


    .story-card {

        display: flex;

        flex-direction: column;

        gap: 35px;

        padding:
            65px
            0;

    }


    .story-card.reverse .story-image,
    .story-card.reverse .story-content {

        order: initial;

    }


    .story-image img {

        height: 330px;

    }


    .story-content h3 {

        font-size: 46px;

    }


    .story-number {

        top: 25px;

    }


    /* MAP */

    .map-section {

        width:
            calc(100% - 36px);

        padding:
            70px
            0
            90px;

    }


    .map-heading {

        display: block;

        margin-bottom: 35px;

    }


    .map-heading > p {

        margin-top: 25px;

    }


    .map-wrap {

        padding: 7px;

        overflow: hidden;

    }


    .map-hotspot {

        width: 32px;

        height: 32px;

        border-width: 3px;

        font-size: 9px;

    }


    /* POPUP */

    .popup-inner {

        padding: 35px 28px;

    }


    .popup h3 {

        font-size: 35px;

    }


    /* FOOTER */

    .footer {

        padding:
            40px 18px;

    }


    .footer-container {

        flex-direction: column;

        align-items: flex-start;

    }

}

@media screen and (max-width: 420px) {

    .hero h1 {

        font-size: 68px;

    }


    .hero-image img {

        height: 330px;

    }


    .story-content h3 {

        font-size: 40px;

    }


    .section-heading h2,
    .map-heading h2 {

        font-size: 52px;

    }

}