:root{
    --ivory:#F7F6F1;
    --dark:#252925;
    --warm:#D9D6CC;
    --accent:#6A776A;

    --brand:#6A776A;
    --brand-dark:#3F4A40;
    --brand-light:#879287;

    --white:#FFFFFF;
    --muted:#737A73;
    --line:rgba(63,74,64,.18);

    --serif:"Cormorant Garamond",Georgia,serif;
    --sans:"Manrope",Arial,sans-serif;
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    background:var(--ivory);
    color:var(--dark);
    font-family:var(--sans);
    line-height:1.7
}

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


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

.site-header{
    position:fixed;
    z-index:20;
    top:0;
    width:100%;
    height:78px;
    padding:0 clamp(22px,4vw,64px);
    display:flex;
    align-items:center;
    color:#fff;
    transition:.3s;
    border-bottom:1px solid transparent
}

.site-header.scrolled{
    background:rgba(247,246,241,.95);
    color:var(--brand-dark);
    backdrop-filter:blur(14px);
    border-color:var(--line)
}

.brand{
    display:flex;
    gap:11px;
    align-items:center;
    font-size:11px;
    letter-spacing:.18em;
    font-weight:700
}

.brand-mark{
    position:relative;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    overflow:hidden
}

.brand-mark img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    transition:opacity .3s ease
}

.brand-mark .logo-scrolled{
    opacity:0
}

.site-header.scrolled .brand-mark .logo-default{
    opacity:0
}

.site-header.scrolled .brand-mark .logo-scrolled{
    opacity:1
}

.site-header nav{
    display:flex;
    gap:34px;
    margin-left:auto;
    margin-right:44px
}

.site-header nav a,
.visit{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.13em
}

.visit{
    border-bottom:1px solid currentColor;
    padding-bottom:3px
}

.menu{
    display:none;
    background:none;
    border:0;
    color:inherit
}

.menu span{
    display:block;
    width:23px;
    height:1px;
    background:currentColor;
    margin:6px
}

.mobile-menu{
    display:none
}


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

.hero{
    height:100svh;
    min-height:650px;
    position:relative;
    color:#fff;
    overflow:hidden;
}

.photo,
.food-photo,
.g{
    background-size:cover;
    background-position:center
}

.hero-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;

    animation:zoom 14s ease-out forwards
}

.hero-shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(36,46,38,.78),
            rgba(63,74,64,.16) 70%
        ),
        linear-gradient(
            0deg,
            rgba(36,46,38,.60),
            transparent 50%
        )
}

@keyframes zoom{
    to{
        transform:scale(1.02)
    }
}

.hero-copy{
    position:absolute;
    left:8vw;
    bottom:14vh;
    max-width:680px
}

.hero-copy small,
.intro>small,
.experience>small,
.food-copy small,
.gallery small,
.location small{
    font-size:10px;
    letter-spacing:.2em
}

.hero-copy small{
    color:rgba(255,255,255,.78)
}

.hero-copy h1{
    font:400 clamp(72px,10vw,150px)/.9 var(--serif);
    letter-spacing:-.04em;
    margin:18px 0 25px
}

.hero-copy h1 i,
h2 i{
    font-style:italic
}

.hero-copy p{
    max-width:490px;
    font-size:14px;
    color:rgba(255,255,255,.86);
    margin-bottom:28px
}

.line-link{
    display:inline-block;
    border-bottom:1px solid currentColor;
    padding-bottom:4px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.15em
}

.hero-meta{
    position:absolute;
    left:4vw;
    right:4vw;
    bottom:25px;
    display:flex;
    justify-content:space-between;
    font-size:9px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:rgba(255,255,255,.72)
}


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

.intro{
    padding:14vw 8vw;
    max-width:1500px;
    margin:auto;
    background:var(--ivory)
}

.intro>small{
    color:var(--brand)
}

.intro>div{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:10vw
}

.intro h2,
.gallery h2,
.location h2{
    font:400 clamp(58px,7.5vw,110px)/.92 var(--serif);
    letter-spacing:-.035em;
    margin:0
}

.intro-text{
    max-width:480px;
    padding-top:20px
}

.intro-text p{
    font-size:16px;
    line-height:1.9
}

.muted{
    font-size:13px!important;
    color:var(--muted)
}


/* =========================================================
   EXPERIENCE
   ========================================================= */

.experience{
    background:var(--brand);
    color:#fff;
    padding:9vw 6vw
}

.experience>small{
    display:block;
    max-width:1400px;
    margin:0 auto 55px;
    color:rgba(255,255,255,.68)
}

.feature{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr
}

.feature .photo{
    min-height:500px
}


/* Hotel */

.hotel{
    background:
        linear-gradient(
            145deg,
            #7F8B7F,
            #3F4A40 62%,
            #687468
        )
}


/* Restaurant */

.restaurant{
    background:
        linear-gradient(
            145deg,
            #98A398,
            #4D594E 65%,
            #B0B8AE
        )
}


/* Banquet */

.banquet{
    background:
        linear-gradient(
            145deg,
            #596559,
            #879287 60%,
            #323B33
        )
}


.feature-copy{
    padding:7vw;
    display:flex;
    flex-direction:column;
    justify-content:center
}


/* Dark feature */

.dark .feature-copy{
    background:var(--brand-dark)
}


/* Light feature */

.light{
    background:var(--ivory);
    color:var(--dark)
}

.light .feature-copy{
    background:var(--ivory)
}

.feature-copy b{
    font-size:10px;
    color:#DDE2DC;
    letter-spacing:.18em;
    margin-bottom:45px
}

.light .feature-copy b{
    color:var(--brand)
}

.feature-copy h3{
    font:400 clamp(52px,5.8vw,86px)/.95 var(--serif);
    margin:0 0 22px
}

.feature-copy p{
    max-width:390px;
    font-size:14px;
    color:rgba(255,255,255,.70);
    line-height:1.9
}

.light .feature-copy p{
    color:#626961
}

.feature-copy em{
    font-style:normal;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:9px;
    margin-top:42px;
    color:rgba(255,255,255,.66)
}

.light .feature-copy em{
    color:var(--brand-dark)
}


/* =========================================================
   SMALL EXPERIENCE ROWS
   ========================================================= */

.minor{
    max-width:1400px;
    margin:auto;
    border-top:1px solid rgba(255,255,255,.18)
}

.minor>div{
    display:grid;
    grid-template-columns:60px 1fr 210px;
    gap:25px;
    align-items:center;
    padding:32px 8px;
    border-bottom:1px solid rgba(255,255,255,.18)
}

.minor span{
    font-size:10px;
    color:#DDE2DC
}

.minor h4{
    font:400 34px var(--serif);
    margin:0
}

.minor p{
    font-size:12px;
    color:rgba(255,255,255,.60);
    margin:0
}

.minor strong{
    font-size:9px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:rgba(255,255,255,.68)
}


/* =========================================================
   FOOD
   ========================================================= */

.food{
    min-height:700px;
    background:var(--brand-dark);
    color:#fff;
    display:grid;
    grid-template-columns:1fr 1fr
}

.food-photo{
    background:
        linear-gradient(
            145deg,
            #879287,
            #4A564B 55%,
            #293129
        )
}

.food-copy{
    padding:8vw;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.food-copy small{
    color:#D8DED8
}

.food-copy h2{
    font:400 clamp(65px,7vw,110px)/.92 var(--serif);
    margin:25px 0
}

.food-copy p{
    max-width:340px;
    color:rgba(255,255,255,.68);
    margin-bottom:32px
}


/* =========================================================
   GALLERY
   ========================================================= */

.gallery{
    padding:12vw 6vw;
    max-width:1500px;
    margin:auto;
    background:var(--ivory)
}

.gallery small{
    color:var(--brand)
}

.gallery-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:60px
}

.gallery-grid{
    display:grid;
    grid-template-columns:1.1fr .65fr 1fr;
    grid-template-rows:260px 390px;
    gap:14px
}

.g{
    background:#788578
}

.g1{
    grid-row:span 2;

    background:
        linear-gradient(
            145deg,
            #7F8B7F,
            #354035
        )
}

.g2{
    background:
        linear-gradient(
            145deg,
            #AAB3AA,
            #596559
        )
}

.g3{
    grid-row:span 2;

    background:
        linear-gradient(
            145deg,
            #596559,
            #9AA49A
        )
}

.g4{
    background:
        linear-gradient(
            145deg,
            #8B968B,
            #3E493F
        )
}

.g5{
    background:
        linear-gradient(
            145deg,
            #B2B9B0,
            #687368
        )
}


/* =========================================================
   LOCATION
   ========================================================= */

.location{
    background:#E8E6DE;
    padding:11vw 8vw
}

.location>div:first-child{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6vw;
    align-items:end;
    max-width:1400px;
    margin:auto
}

.location small{
    color:var(--brand)
}

.location h2{
    margin-top:30px
}

.location p{
    font-size:14px;
    line-height:2;
    color:#5F665F
}

.actions{
    max-width:1400px;
    margin:65px auto 0;
    display:flex;
    gap:30px;
    align-items:center
}

.primary{
    background:var(--brand-dark);
    color:#fff;
    padding:16px 23px;
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase
}

.actions>a:last-child{
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    border-bottom:1px solid var(--brand);
    padding-bottom:4px;
    color:var(--brand-dark)
}


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

footer{
    background:var(--brand-dark);
    color:#fff;
    padding:55px 6vw 24px
}

.footer-main{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:80px;
    padding-bottom:60px
}

.footer-main strong{
    font-size:12px;
    letter-spacing:.2em
}

.footer-logo{
    height:40px;
    width:auto;
    object-fit:contain;
    display:block
}

.footer-main p{
    font:22px var(--serif);
    color:rgba(255,255,255,.62)
}

.footer-main nav{
    display:grid;
    gap:10px
}

.footer-main nav a,
.footer-main>a{
    font-size:10px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:rgba(255,255,255,.72)
}

.footer-main>a{
    height:max-content;
    border-bottom:1px solid rgba(255,255,255,.35);
    padding-bottom:4px
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.14);
    padding-top:18px;
    display:flex;
    justify-content:space-between;
    color:rgba(255,255,255,.42);
    font-size:9px;
    letter-spacing:.1em;
    text-transform:uppercase
}


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

@media(max-width:800px){

    .site-header{
        height:68px
    }

    .site-header nav,
    .visit{
        display:none
    }

    .menu{
        display:block;
        margin-left:auto
    }

    .mobile-menu{
        position:fixed;
        z-index:15;
        inset:0;
        background:var(--brand-dark);
        color:#fff;
        padding:110px 25px 30px;
        display:flex;
        flex-direction:column;
        gap:18px;
        transform:translateY(-100%);
        transition:.4s
    }

    .mobile-menu.open{
        transform:none
    }

    .mobile-menu a{
        font:45px/1 var(--serif)
    }

    .intro>div,
    .location>div:first-child,
    .food{
        grid-template-columns:1fr
    }

    .intro-text{
        padding-top:35px
    }

    .feature{
        grid-template-columns:1fr
    }

    .feature .photo{
        min-height:330px
    }

    .light .feature-copy{
        order:1
    }

    .light .photo{
        order:2
    }

    .feature-copy{
        padding:55px 30px 65px
    }

    .minor>div{
        grid-template-columns:35px 1fr
    }

    .minor strong{
        grid-column:2
    }

    .food-photo{
        min-height:380px
    }

    .gallery-head{
        display:block
    }

    .gallery h2{
        margin-top:25px
    }

    .gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:220px 220px 300px
    }

    .g1{
        grid-row:span 2
    }

    .g3{
        grid-row:span 1
    }

    .g5{
        grid-column:span 2
    }

    .actions{
        flex-direction:column;
        align-items:flex-start
    }

    .footer-main{
        grid-template-columns:1fr 1fr;
        gap:40px
    }

    .footer-main>a{
        grid-column:1/-1
    }
}


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

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

    html{
        scroll-behavior:auto
    }

    .hero-photo{
        animation:none
    }
}