/* =========================================================
   01 — ROOT
   ========================================================= */

:root {

    --paper: #f7f5f0;
    --paper-white: #ffffff;
    --paper-soft: #f1eee7;

    --ink: #181715;
    --ink-soft: #45423d;

    --muted: #77736b;
    --muted-light: #9a958b;

    --gold: #9c7c49;
    --gold-light: #b99b67;

    --line: rgba(24,23,21,.10);
    --line-soft: rgba(24,23,21,.055);

    --serif:
        "Cormorant Garamond",
        "Bodoni Moda",
        Georgia,
        serif;

    --sans:
        "Plus Jakarta Sans",
        Arial,
        sans-serif;

    --max-width: 1380px;

}


/* =========================================================
   02 — RESET
   ========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background: var(--paper);

    color: var(--ink);

    font-family: var(--sans);

    -webkit-font-smoothing: antialiased;

}


a {

    color: inherit;

    text-decoration: none;

}


img {

    display: block;

    max-width: 100%;

}


button {

    font-family: inherit;

}


::selection {

    background: var(--gold);

    color: #fff;

}




/* =========================================================
   04 — PREMIUM COVER
   ========================================================= */

.state-cover {

    position: relative;

    width: 100%;

    height: min(72vh, 750px);

    min-height: 560px;

    overflow: hidden;

    background: #d8d4cb;

}


.cover-slider {

    position: relative;

    width: 100%;

    height: 100%;

}


.cover-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    transform: scale(1.025);

    transition:
        opacity 1.25s ease,
        transform 7s cubic-bezier(.16,1,.3,1);

}


.cover-slide.active {

    opacity: 1;

    transform: scale(1);

}


/* =========================================================
   COVER CINEMATIC OVERLAY
   ========================================================= */

.cover-slider::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.58) 0%,
            rgba(0,0,0,.17) 48%,
            rgba(0,0,0,.02) 78%,
            transparent 100%
        );

}


/* =========================================================
   05 — SLIDER BUTTONS
   ========================================================= */

.slider-btn {

    position: absolute;

    top: 50%;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    transform:
        translateY(-50%);

    border:
        1px solid rgba(255,255,255,.48);

    border-radius: 50%;

    background:
        rgba(255,255,255,.10);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    color: #fff;

    font-size: 17px;

    cursor: pointer;

    transition:
        background .3s ease,
        transform .3s ease,
        border-color .3s ease;

}


.slider-btn:hover {

    background:
        rgba(255,255,255,.22);

    border-color:
        rgba(255,255,255,.75);

    transform:
        translateY(-50%) scale(1.04);

}


.prev {

    left: 28px;

}


.next {

    right: 28px;

}


/* =========================================================
   06 — SLIDER DOTS
   ========================================================= */

.slider-dots {

    position: absolute;

    left: 50%;

    bottom: 27px;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 8px;

    transform:
        translateX(-50%);

}


.dot {

    width: 5px;

    height: 5px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,.45);

    transition:
        width .35s ease,
        background .35s ease;

}


.dot.active {

    width: 25px;

    border-radius: 10px;

    background: #fff;

}


/* =========================================================
   07 — STATE INTRO
   ========================================================= */

.state-intro {

    max-width:
        var(--max-width);

    margin:
        0 auto;

    padding:
        125px 6vw 80px;

}


/* Small luxury label */

.state-intro::before {

    content:
        "DISCOVER";

    display:
        block;

    margin-bottom:
        24px;

    color:
        var(--gold);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .30em;

}


/* =========================================================
   STATE TITLE
   ========================================================= */

.state-intro h1 {

    max-width:
        1000px;

    margin:
        0;

    font-family:
        var(--serif);

    font-size:
        clamp(64px, 8vw, 118px);

    font-weight:
        400;

    line-height:
        .82;

    letter-spacing:
        -.065em;

}


/* =========================================================
   INTRO DESCRIPTION
   ========================================================= */

.state-intro p {

    max-width:
        650px;

    margin:
        34px 0 0;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.9;

}


/* =========================================================
   08 — DESTINATION SECTION
   ========================================================= */

.destination-section {

    max-width:
        var(--max-width);

    margin:
        0 auto;

    padding:
        30px 6vw 145px;

}


/* Section eyebrow */

.destination-section::before {

    content:
        "PLACES TO EXPERIENCE";

    display:
        block;

    margin-bottom:
        28px;

    color:
        var(--muted-light);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .25em;

}


/* =========================================================
   09 — DESTINATION GRID
   ========================================================= */

.destinations {

    display:
        grid;

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

    column-gap:
        24px;

    row-gap:
        62px;

}


/* =========================================================
   10 — DESTINATION CARD
   ========================================================= */

.destination-card {

    position:
        relative;

    width:
        100%;

    overflow:
        visible;

    cursor:
        pointer;

    background:
        transparent;

}


/* =========================================================
   IMAGE FRAME
   ========================================================= */

.destination-card::before {

    content:
        "";

    display:
        block;

    width:
        100%;

    height:
        275px;

    background:
        var(--paper-soft);

}


/* =========================================================
   IMAGE
   ========================================================= */

.destination-card img {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        275px;

    object-fit:
        cover;

    transform:
        scale(1.001);

    transition:
        transform .9s cubic-bezier(.16,1,.3,1),
        filter .6s ease;

}


.destination-card:hover img {

    transform:
        scale(1.045);

    filter:
        saturate(.92)
        brightness(.96);

}


/* =========================================================
   11 — CARD CONTENT
   ========================================================= */

.card-overlay {

    position:
        static;

    display:
        block;

    padding:
        17px 2px 0;

    color:
        var(--ink);

    background:
        transparent;

}


/* =========================================================
   REMOVE OLD OVERLAY DECORATIONS
   ========================================================= */

.card-overlay::before,
.card-overlay::after {

    display:
        none;

}


/* =========================================================
   12 — DESTINATION TITLE
   ========================================================= */

.card-overlay h3 {

    margin:
        0;

    color:
        var(--ink);

    font-family:
        var(--serif);

    font-size:
        29px;

    font-weight:
        500;

    line-height:
        .95;

    letter-spacing:
        -.025em;

    transform:
        none;

    transition:
        color .3s ease;

}


.destination-card:hover
.card-overlay h3 {

    color:
        var(--gold);

    transform:
        none;

}


/* =========================================================
   13 — DESCRIPTION
   ========================================================= */

.card-overlay p {

    display:
        -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    overflow:
        hidden;

    max-width:
        95%;

    margin:
        9px 0 0;

    color:
        var(--muted);

    font-family:
        var(--sans);

    font-size:
        11px;

    line-height:
        1.7;

    opacity:
        1;

    transform:
        none;

}


/* =========================================================
   14 — EXPLORE BUTTON
   ========================================================= */

.card-overlay button {

    display:
        inline-flex;

    align-items:
        center;

    margin:
        12px 0 0;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--gold);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

    cursor:
        pointer;

    opacity:
        0;

    transform:
        translateY(5px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        color .25s ease;

}


.card-overlay button::after {

    content:
        "→";

    margin-left:
        9px;

    font-size:
        13px;

    transition:
        transform .3s ease;

}


.destination-card:hover
.card-overlay button {

    opacity:
        1;

    transform:
        translateY(0);

}


.card-overlay button:hover {

    color:
        #765b30;

}


.card-overlay button:hover::after {

    transform:
        translateX(4px);

}


/* =========================================================
   15 — OPTIONAL IMAGE CORNERS
   ========================================================= */

/*
   Almost-square corners feel more editorial and expensive
   than large rounded cards.

   If you want completely square images, change 3px to 0.
*/

.destination-card::before,
.destination-card img {

    border-radius:
        3px;

}


/* =========================================================
   16 — VERY SUBTLE IMAGE SHADOW
   ========================================================= */

.destination-card:hover::before {

    box-shadow:
        0 16px 40px rgba(30,27,20,.08);

}


/* =========================================================
   17 — TABLET
   ========================================================= */

@media (max-width: 950px) {

    .state-cover {

        height:
            620px;

        min-height:
            520px;

    }


    .state-intro {

        padding:
            100px 6vw 70px;

    }


    .destinations {

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

        column-gap:
            20px;

        row-gap:
            50px;

    }


    .destination-card::before,
    .destination-card img {

        height:
            260px;

    }


}


/* =========================================================
   18 — MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .state-cover {

        height:
            550px;

        min-height:
            500px;

    }


    .slider-btn {

        width:
            40px;

        height:
            40px;

        font-size:
            14px;

    }


    .prev {

        left:
            14px;

    }


    .next {

        right:
            14px;

    }


    .state-intro {

        padding:
            80px 6vw 60px;

    }


    .state-intro h1 {

        font-size:
            clamp(55px, 15vw, 78px);

        line-height:
            .84;

    }


    .state-intro p {

        font-size:
            13px;

        line-height:
            1.85;

    }


    .destination-section {

        padding:
            20px 5vw 90px;

    }


    .destinations {

        grid-template-columns:
            1fr;

        row-gap:
            44px;

    }


    .destination-card::before,
    .destination-card img {

        height:
            255px;

    }


    .card-overlay {

        padding:
            14px 2px 0;

    }


    .card-overlay h3 {

        font-size:
            28px;

    }


    .card-overlay p {

        max-width:
            100%;

        font-size:
            11px;

    }


    .card-overlay button {

        opacity:
            1;

        transform:
            none;

    }

}


/* =========================================================
   19 — SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .state-cover {

        height:
            510px;

    }


    .state-intro {

        padding-top:
            70px;

    }


    .state-intro h1 {

        font-size:
            51px;

    }


    .destination-card::before,
    .destination-card img {

        height:
            245px;

    }


    .card-overlay h3 {

        font-size:
            27px;

    }

}


/* =========================================================
   20 — REDUCED MOTION
   ========================================================= */

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

    html {

        scroll-behavior:
            auto;

    }


    .cover-slide,
    .destination-card img,
    .card-overlay h3,
    .card-overlay button {

        transition:
            none !important;

    }

}