@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Inter:wght@300;400;500;600&display=swap');

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#f8f6f2;
    color:#111;
    overflow-x:hidden;
}

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

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

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 60px;

    background:rgba(248,246,242,.92);

    backdrop-filter:blur(15px);

    z-index:1000;

}

.logo{

    font-family:'Cormorant Garamond',serif;

    font-size:28px;

    letter-spacing:.35em;

}

.nav{

    display:flex;

    gap:45px;

}

.nav a{

    font-size:13px;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.hero{

    position:relative;

    height:100vh;

    overflow:hidden;

}

.hero-image{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.18);

}

.hero-copy{

    position:absolute;

    left:8%;

    bottom:13%;

    color:white;

}

.hero-copy span{

    letter-spacing:.35em;

    font-size:13px;

}

.hero-copy h1{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(90px,10vw,170px);

    font-weight:300;

    margin:20px 0;

}

.hero-copy p{

    font-size:18px;

    line-height:1.8;

}

.scroll{

    position:absolute;

    right:40px;

    bottom:40px;

    writing-mode:vertical-rl;

    color:white;

    letter-spacing:.4em;

    font-size:12px;

}
.menu-btn{
    display:none;
}

main{
    margin-top:90px;
}

.manifest{

    padding:120px 8%;

    text-align:center;

}

.manifest p{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(32px,4vw,56px);

    line-height:1.4;

}

.space-title{

    padding:0 8% 60px;

}

.space-title span{

    letter-spacing:.3em;

    font-size:12px;

}

.space-title h2{

    font-family:'Cormorant Garamond',serif;

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

    font-weight:300;

    margin-top:15px;

}

.space-grid{

    padding:0 8% 140px;

    display:grid;

    grid-template-columns:1.3fr .8fr 1fr .8fr;

    gap:24px;

    align-items:start;

}

.space-grid figure{

    margin:0;

}

.space-grid img{

    width:100%;

    border-radius:2px;

}

.space-grid .large img{

    aspect-ratio:4/5;

    object-fit:cover;

}

.space-grid .tall img{

    aspect-ratio:3/5;

    object-fit:cover;

}

.space-grid .wide img{

    aspect-ratio:4/3;

    object-fit:cover;

}

.space-grid figcaption{

    margin-top:12px;

    font-size:14px;

    letter-spacing:.15em;

    text-transform:uppercase;

}
.works{

    padding:120px 8% 160px;

}

.works-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:50px;

}

.works-head span{

    font-size:12px;

    letter-spacing:.3em;

}

.works-head h2{

    font-family:'Cormorant Garamond',serif;

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

    font-weight:300;

    line-height:.95;

}

.works-grid{

    display:grid;

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

    gap:24px;

}

.works-grid figure{

    margin:0;

}

.works-grid img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    display:block;

}

.reservation-banner{

    background:#111;

    color:#fff;

    padding:120px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}

.reservation-banner span{

    font-size:12px;

    letter-spacing:.3em;

}

.reservation-banner h2{

    font-family:'Cormorant Garamond',serif;

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

    font-weight:300;

    margin:16px 0;

}

.reservation-banner p{

    max-width:480px;

    line-height:1.9;

    opacity:.8;

}

.reservation-banner a{

    border:1px solid #fff;

    padding:18px 36px;

    text-transform:uppercase;

    letter-spacing:.18em;

}

.footer{

    display:flex;

    justify-content:space-between;

    padding:70px 8%;

    border-top:1px solid #e5e0d8;

}

.footer h3{

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    font-weight:300;

}

.footer p{

    line-height:1.9;

    color:#666;

}

@media (max-width:900px){

.header{

padding:0 20px;

height:72px;

}

.nav{

display:none;

}

.hero-copy{

left:24px;

right:24px;

bottom:60px;

}

.hero-copy h1{

font-size:64px;

}

.hero-copy p{

font-size:15px;

}

.scroll{

display:none;

}

.manifest{

padding:70px 24px;

}

.manifest p{

font-size:34px;

}

.space-title{

padding:0 24px 40px;

}

.space-grid{

grid-template-columns:1fr;

padding:0 24px 80px;

gap:16px;

}

.space-grid .large img,
.space-grid .tall img,
.space-grid .wide img{

aspect-ratio:4/5;

}

.works{

padding:70px 24px;

}

.works-head{

display:block;

}

.works-head h2{

margin-top:16px;

}

.works-grid{

grid-template-columns:1fr;

}

.reservation-banner{

display:block;

padding:70px 24px;

}

.reservation-banner a{

display:inline-block;

margin-top:30px;

}

.footer{

display:block;

padding:50px 24px;

}

}
@media (min-width:901px){

    .hero-image{
        object-position:center center;
    }

    .hero-copy{
        left:8%;
        bottom:10%;
        z-index:10;
    }

    .hero-overlay{
        background:linear-gradient(
            90deg,
            rgba(0,0,0,.38),
            rgba(0,0,0,.08)
        );
    }

}
@media (max-width:900px){

    .header{
        height:72px;
        padding:0 20px;
        overflow-x:auto;
        white-space:nowrap;
    }

    .logo{
        font-size:24px;
        flex-shrink:0;
        margin-right:28px;
    }

    .nav{
        display:flex !important;
        gap:24px;
        flex-shrink:0;
    }

    .nav a{
        font-size:12px;
        letter-spacing:.16em;
    }

    .menu-btn{
        display:none;
    }

}
@media(max-width:900px){

    .header{
        position:sticky !important;
        top:0 !important;
        height:auto !important;
        min-height:86px !important;
        padding:26px 24px 18px !important;
        display:block !important;
        background:#f8f6f2 !important;
        overflow:hidden !important;
        z-index:9999 !important;
    }

    .logo{
        display:block !important;
        font-size:30px !important;
        letter-spacing:.28em !important;
        margin-bottom:22px !important;
        white-space:nowrap !important;
    }

    .nav{
        display:flex !important;
        flex-wrap:nowrap !important;
        gap:22px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        width:100% !important;
        padding-bottom:4px !important;
        -webkit-overflow-scrolling:touch !important;
        scrollbar-width:none !important;
    }

    .nav::-webkit-scrollbar{
        display:none !important;
    }

    .nav a{
        display:inline-block !important;
        flex:0 0 auto !important;
        font-size:12px !important;
        letter-spacing:.18em !important;
        text-transform:uppercase !important;
        white-space:nowrap !important;
        opacity:1 !important;
        color:#111 !important;
    }

    .menu-btn{
        display:none !important;
    }

    main{
        margin-top:0 !important;
    }

    .hero{
        height:calc(100vh - 120px) !important;
    }
}