/* =====================================================
   ZKR — SINGLE DESTINATION
===================================================== */

.zkr-destination-single {
    --ivory: #f4f2ed;
    --sand: #dedbd3;
    --black: #090909;

    background: var(--ivory);

    color: var(--black);
}


.zkr-destination-container {
    width:
        min(
            calc(100% - 110px),
            1500px
        );

    margin: 0 auto;
}


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

.zkr-destination-hero {

    position: relative;

    min-height:
        calc(100svh - 80px);

    padding:
        45px
        clamp(35px, 5vw, 85px);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background:
        #333
        center / cover
        no-repeat;

    color: #f5f3ed;

    overflow: hidden;
}


.zkr-destination-hero__top {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    font-size: 8px;

    letter-spacing: 2px;
}


.zkr-destination-hero__content {

    position: relative;

    z-index: 2;

    max-width: 1050px;

    margin:
        auto 0;
}


.zkr-destination-hero__eyebrow {

    margin-bottom: 25px;

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 9px;

    letter-spacing: 2.2px;
}


.zkr-destination-hero__eyebrow span {

    width: 42px;

    height: 1px;

    background: currentColor;
}


.zkr-destination-hero h1 {

    margin: 0;

    font-family:
        Didot,
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        clamp(
            90px,
            11vw,
            180px
        );

    line-height: .82;

    letter-spacing: -8px;

    font-weight: 400;
}


.zkr-destination-hero h1 em {

    font-weight: 400;

    font-style: italic;
}


.zkr-destination-hero__content > p {

    max-width: 520px;

    margin:
        38px 0 0;

    font-size: 16px;

    line-height: 1.6;
}


.zkr-destination-hero__button {

    width: fit-content;

    min-width: 255px;

    min-height: 57px;

    margin-top: 30px;

    padding: 0 23px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    border-radius: 999px;

    background: var(--ivory);

    color: #0a0a0a;

    text-decoration: none;

    font-size: 8px;

    letter-spacing: 1.4px;
}


.zkr-destination-hero__coords {

    position: absolute;

    right:
        clamp(35px, 5vw, 85px);

    bottom: 45px;

    display: flex;

    gap: 35px;

    z-index: 2;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.zkr-destination-hero__scroll {

    position: absolute;

    left:
        clamp(35px, 5vw, 85px);

    bottom: 45px;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 14px;

    font-size: 7px;

    letter-spacing: 2px;
}


.zkr-destination-hero__scroll span {

    width: 55px;

    height: 1px;

    background:
        rgba(255,255,255,.65);
}


/* =====================================================
   COMMON LABEL
===================================================== */

.zkr-destination-section-label {

    display: flex;

    align-items: center;

    gap: 20px;

    font-size: 8px;

    letter-spacing: 2px;
}


.zkr-destination-section-label
span:first-child {

    opacity: .4;
}


/* =====================================================
   ABOUT
===================================================== */

.zkr-destination-about {

    padding:
        135px 0
        160px;
}


.zkr-destination-about__grid {

    margin-top: 80px;

    display: grid;

    grid-template-columns:
        1fr
        .65fr;

    gap:
        clamp(
            80px,
            12vw,
            180px
        );
}


.zkr-destination-about h2 {

    margin: 0;

    font-family:
        Didot,
        "Bodoni MT",
        Georgia,
        serif;

    font-size:
        clamp(
            68px,
            8vw,
            125px
        );

    line-height: .85;

    letter-spacing: -6px;

    font-weight: 400;
}


.zkr-destination-about h2 em {

    font-weight: 400;
}


.zkr-destination-about__content {

    max-width: 550px;

    font-size: 15px;

    line-height: 1.8;

    color:
        rgba(10,10,10,.66);
}


.zkr-destination-richtext
p {

    margin:
        0 0 25px;
}


.zkr-destination-richtext h2,
.zkr-destination-richtext h3 {

    margin:
        38px 0 14px;

    font-family:
        Arial,
        sans-serif;

    font-size: 24px;

    line-height: 1.2;

    letter-spacing: -.5px;

    font-weight: 500;
}


/* =====================================================
   PROJECTS
===================================================== */

.zkr-destination-projects {

    padding:
        125px 0
        150px;

    background: var(--sand);
}


.zkr-destination-projects__heading {

    margin:
        65px 0
        55px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;
}


.zkr-destination-projects__heading h2 {

    margin: 0;

    font-family:
        Didot,
        Georgia,
        serif;

    font-size:
        clamp(
            65px,
            7vw,
            105px
        );

    line-height: .84;

    letter-spacing: -5px;

    font-weight: 400;
}


.zkr-destination-projects__heading h2 em {

    font-weight: 400;
}


.zkr-destination-projects__heading > div {

    padding-bottom: 8px;

    font-size: 7px;

    letter-spacing: 2px;
}


.zkr-destination-project-grid {

    display: grid;

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

    gap: 22px;
}


.zkr-destination-project-card__image {

    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio:
        4 / 4.8;

    border-radius: 7px;

    background: #ccc;
}


.zkr-destination-project-card__image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform
        650ms
        cubic-bezier(.2,.7,.2,1);
}


.zkr-destination-project-card__image:hover img {

    transform: scale(1.025);
}


.zkr-destination-project-card__status {

    position: absolute;

    top: 18px;

    right: 18px;

    padding:
        12px 17px;

    border-radius:
        999px;

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

    color: white;

    font-size: 7px;

    letter-spacing:
        1.3px;
}


.zkr-destination-project-card__meta {

    margin-top: 15px;

    display: flex;

    justify-content: space-between;

    font-size: 8px;

    color:
        rgba(10,10,10,.48);
}


.zkr-destination-project-card h3 {

    margin:
        10px 0
        18px;

    font-family:
        Didot,
        Georgia,
        serif;

    font-size:
        clamp(
            35px,
            3.2vw,
            52px
        );

    font-weight: 400;
}


.zkr-destination-project-card h3 a {

    color: inherit;

    text-decoration: none;
}


.zkr-destination-project-card__bottom {

    padding-top: 15px;

    border-top:
        1px solid
        rgba(10,10,10,.17);

    display: flex;

    justify-content: space-between;

    font-size: 8px;
}


.zkr-destination-project-card__bottom a {

    color: inherit;

    text-decoration: none;

    letter-spacing: 1px;
}


/* =====================================================
   LIVING
===================================================== */

.zkr-destination-living {

    padding:
        130px 0
        155px;

    background:
        #090909;

    color:
        #f4f2ed;
}


.zkr-destination-living__grid {

    margin-top: 75px;

    display: grid;

    grid-template-columns:
        1fr
        .65fr;

    gap:
        clamp(
            80px,
            10vw,
            160px
        );
}


.zkr-destination-living h2 {

    margin: 0;

    font-family:
        Didot,
        Georgia,
        serif;

    font-size:
        clamp(
            68px,
            7vw,
            110px
        );

    line-height: .85;

    letter-spacing: -5px;

    font-weight: 400;
}


.zkr-destination-living h2 em {

    font-weight: 400;
}


.zkr-destination-living__content {

    max-width: 500px;
}


.zkr-destination-living__content p {

    margin: 0;

    font-size: 15px;

    line-height: 1.75;

    color:
        rgba(255,255,255,.77);
}


.zkr-destination-living__small {

    margin-top:
        24px !important;

    font-size:
        12px !important;

    color:
        rgba(255,255,255,.48)
        !important;
}


.zkr-destination-living__button {

    min-height: 55px;

    margin-top: 35px;

    padding:
        0 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-radius:
        999px;

    background: var(--ivory);

    color: #0a0a0a;

    text-decoration: none;

    font-size: 8px;

    letter-spacing:
        1.3px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {
    
    
      .zkr-destination-hero {
        padding-top: 105px;
    }

    .zkr-destination-container {

        width:
            calc(100% - 70px);
    }


    .zkr-destination-about__grid,
    .zkr-destination-living__grid {

        gap: 55px;
    }

}


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

@media (max-width: 767px) {

    .zkr-destination-container {

        width:
            calc(100% - 42px);
    }


    .zkr-destination-hero {

        min-height:
            calc(100svh - 70px);

           padding: 100px 21px 28px;
    }


    .zkr-destination-hero h1 {

        font-size:
            clamp(
                66px,
                19vw,
                90px
            );

        line-height: .87;

        letter-spacing: -4px;
    }


    .zkr-destination-hero__content > p {

        width: 90%;

        margin-top: 25px;

        font-size: 13px;
    }


    .zkr-destination-hero__button {

        min-width: 0;

        width: 100%;

        max-width: 300px;

        min-height: 51px;
    }


    .zkr-destination-hero__coords {

        right: 21px;

        bottom: 24px;

        font-size: 6px;
    }


    .zkr-destination-hero__scroll {

        left: 21px;

        bottom: 24px;
    }


    .zkr-destination-about {

        padding:
            85px 0
            95px;
    }


    .zkr-destination-about__grid {

        margin-top: 50px;

        display: block;
    }


    .zkr-destination-about h2 {

        font-size:
            clamp(
                58px,
                17vw,
                75px
            );

        letter-spacing: -4px;
    }


    .zkr-destination-about__content {

        margin-top: 45px;

        font-size: 13px;
    }


    .zkr-destination-projects {

        padding:
            85px 0
            95px;
    }


    .zkr-destination-projects__heading {

        margin:
            45px 0
            35px;

        display: block;
    }


    .zkr-destination-projects__heading h2 {

        font-size:
            clamp(
                56px,
                16vw,
                75px
            );

        letter-spacing: -4px;
    }


    .zkr-destination-projects__heading > div {

        margin-top: 25px;
    }


    .zkr-destination-project-grid {

        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .zkr-destination-project-card__image {

        aspect-ratio:
            4 / 4.6;
    }


    .zkr-destination-living {

        padding:
            85px 0
            100px;
    }


    .zkr-destination-living__grid {

        margin-top: 50px;

        display: block;
    }


    .zkr-destination-living h2 {

        font-size:
            clamp(
                57px,
                16vw,
                76px
            );

        letter-spacing: -4px;
    }


    .zkr-destination-living__content {

        margin-top: 45px;
    }

}

/* =====================================================
   FIX HERO DESTINATION — HEADER OFFSET
===================================================== */

.zkr-destination-hero {
    padding-top: 120px;
}

.zkr-destination-hero__top {
    position: relative;
    z-index: 5;
}