/* =========================================================
   VILLA PAGE
   ========================================================= */

.villa-story {
    position: relative;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.villa-section {
    position: relative;
    margin-bottom: clamp(68px, 6vw, 96px);
}

.villa-section:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.villa-heading {
    width: 100%;
    margin-bottom: 42px;
}

.villa-heading h1,
.villa-section h2 {
    margin: 0;

    color: var(--color-forest);

    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.04;
}

.villa-heading h1 {
    font-size: clamp(3.3rem, 7vw, 6.4rem);
}

.villa-section h2 {
    width: 100%;
    margin-bottom: 30px;

    font-size: clamp(2.25rem, 4.5vw, 4rem);
}

.villa-lead {
    width: 100%;
    margin: 22px 0 0;

    color: var(--color-sage);

    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2.3vw, 1.9rem);
    line-height: 1.45;
}

.villa-section-copy,
.villa-prose {
    width: 100%;
    max-width: none;
}

.villa-prose {
    color: var(--color-text);

    font-size: 1.04rem;
    line-height: 1.82;
}

.villa-prose p {
    margin: 0 0 22px;
}

.villa-emphasis {
    color: var(--color-forest);

    font-family: var(--font-serif);
    font-size: clamp(1.24rem, 1.8vw, 1.55rem);
    line-height: 1.55;
}

.villa-emphasis-final {
    margin-top: 30px;
}

.villa-closing {
    width: 100%;
    max-width: none;

    margin-top: 38px;

    color: var(--color-forest);

    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.55;
}

.villa-stillness {
    margin-top: 32px;

    color: var(--color-forest);

    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.5;
}

.villa-prose-sensory {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;
}


/* =========================================================
   VISUAL SCENES
   ========================================================= */

.villa-scene {
    --parallax-y: 0px;

    position: relative;

    width: 100%;
    margin: 44px 0 0;

    overflow: hidden;

    background: var(--color-alabaster);
}

.villa-scene img {
    position: absolute;

    top: -120px;
    left: 0;

    width: 100%;
    height: calc(100% + 240px);

    object-fit: cover;

    transform: translate3d(
        0,
        var(--parallax-y),
        0
    );

    will-change: transform;

    user-select: none;
    pointer-events: none;
}


/* =========================================================
   SCENE HEIGHTS
   ========================================================= */

.villa-scene-home {
    height: clamp(340px, 34vw, 430px);
}

.villa-scene-home img {
    object-position: center 52%;
}


.villa-scene-history {
    height: clamp(390px, 38vw, 490px);
}

.villa-scene-history img {
    object-position: center 46%;
}


.villa-scene-rila {
    height: clamp(500px, 48vw, 620px);

    margin-bottom: 48px;

    box-shadow:
        0 20px 48px rgba(18, 32, 26, 0.15);
}

.villa-scene-rila img {
    object-position: center 55%;
}


.villa-scene-closeness {
    height: clamp(300px, 30vw, 370px);

    margin-top: 44px;
    margin-bottom: 42px;
}

.villa-scene-closeness img {
    object-position: center center;
}


/* =========================================================
   FINAL SECTION
   ========================================================= */

.villa-together,
.villa-together .villa-section-copy {
    width: 100%;
    max-width: none;
}




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

@media (max-width: 768px) {

    .villa-section {
        margin-bottom: 64px;
    }

    .villa-heading {
        margin-bottom: 34px;
    }

    .villa-prose {
        font-size: 1rem;
        line-height: 1.75;
    }

    /*
     * No parallax on small screens.
     */
    .villa-scene img {
        top: 0;

        height: 100%;

        transform: none !important;
        will-change: auto;
    }

    .villa-scene-home {
        height: 290px;
    }

    .villa-scene-history {
        height: 330px;
    }

    .villa-scene-rila {
        height: 420px;
        margin-bottom: 40px;
    }

    .villa-scene-closeness {
        height: 280px;
        margin-bottom: 36px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .villa-scene img {
        top: 0;

        height: 100%;

        transform: none !important;
        will-change: auto;
    }

}