@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Italiana&display=swap');
:root{
    --ink:#2b2522;
    --muted:#746b62;
    --cream:#f5f1eb;
    --gold:#a48b6c;
    --white:#fff;
    --line:#ded8d0;
}
    
*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    color:var(--ink);
    background:#fff;
    font-family:'DM Sans',Arial,sans-serif;
    font-size:15px;
    line-height:1.7;
}

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

button,input,textarea,select{
    font:inherit;
}

button{
    cursor:pointer;
}

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

h1,h2,h3,p{
    margin-top:0;
}

h1,h2,h3{
    font-weight:400;
}

h1,h2{
    font-family:'Italiana',Georgia,serif;
    line-height:1.1;
}

h1{
    font-size:clamp(4.1rem,8vw,8.5rem);
}

h2{
    font-size:clamp(2.6rem,4.5vw,5rem);
}

h3{
    font-size:2rem;
}

em{
    font-weight:400;
    color:var(--gold);
}

.topline{
    background:#2c2622;
    color:#f9f4ed;
    font-size:10px;
    letter-spacing:.26em;
    text-align:center;
    padding:7px;
}

.header{
    height:86px;
    display:flex;
    align-items:center;
    gap:35px;
    padding:0 5%;
    justify-content:space-between;
    background:#fff;
    position:relative;
    z-index:20;
}

.brand{
    white-space:nowrap;
    letter-spacing:.11em;
    font-size:22px;
    font-weight:600;
}

.brand span{
    color:var(--gold);
}

.brand small{
    font-size:11px;
    letter-spacing:.28em;
    font-weight:500;
    display:block;
    line-height:1;
    text-align:center;
}

.header nav{
    display:flex;
    align-items:center;
    gap:28px;
}

.header nav a,.head-link{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:700
}

.header nav a:hover,.header nav a[aria-current]{
    color:var(--gold);
}

.head-link{
    border-bottom:1px solid currentColor;
    padding-bottom:5px
}

.menu-toggle{
    display:none;
    border:0;
    background:none;
    font-size:25px
}

.hero{
    height:min(750px,80vh);
    min-height:570px;
    position:relative;
    background:#49413e;
    overflow:hidden;
}

.slide{
    position:absolute;
    inset:0;
    background-image:linear-gradient(90deg,rgba(25,20,18,.72) 0%,rgba(25,20,18,.36) 53%,rgba(25,20,18,.06)),var(--image);
    background-size:cover;
    background-position:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .7s;
}

.slide.current{
    opacity:1;
    visibility:visible
}

.hero-copy{
    color:white;
    max-width:690px;
    position:absolute;
    top:50%;
    left:8%;
    transform:translateY(-50%)
}

.hero h1{
    margin:21px 0 23px
}

.hero em,.cta em,.contact-photo em{
    color:#efe3d5;
}

.hero p{
    max-width:420px;
    color:#eee8e0;
    margin-bottom:31px;
}

.eyebrow{
    font-size:11px;
    font-weight:700;
    letter-spacing:.27em;
    color:#eee5da;
}

.eyebrow.dark{
    color:#987b5b
}

.button{
    border:1px solid var(--ink);
    display:inline-flex;
    justify-content:center;
    align-items:center;
    background:var(--ink);
    color:white;
    padding:15px 26px;
    font-size:11px;
    letter-spacing:.12em;
    font-weight:700;
    transition:.2s;
}

.button:hover{
    background:var(--gold);
    border-color:var(--gold);
}

.button.light{
    border-color:white;
    background:white;
    color:var(--ink);
}

.button.light:hover{
    background:transparent;
    color:#fff;
}

.carousel-tools{
    position:absolute;
    bottom:38px;
    right:7%;
    z-index:5;
    display:flex;
    align-items:center;
    color:#fff;
    gap:18px;
    font-size:12px;
    letter-spacing:.15em;
}

.carousel-tools button{
    border:1px solid #ffffff9c;
    border-radius:50%;
    width:39px;
    height:39px;
    background:transparent;
    color:white;
    font-size:19px;
}

.carousel-tools button:hover{
    background:#fff;
    color:var(--ink);
}

.section{
    padding:100px 7%;
}

.two-col{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:10%;
    align-items:center;
}

.two-col p{
    color:var(--muted);
    max-width:540px;
}

.text-link{
    font-size:11px;
    letter-spacing:.12em;
    font-weight:700;
    border-bottom:1px solid var(--ink);
    padding-bottom:7px;
    display:inline-block;
    margin-top:15px;
}

.text-link:hover{
    color:var(--gold);
    border-color:var(--gold);
}

.cream{
    background:var(--cream);
}

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:25px;
    margin-bottom:40px;
}

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.image-card{
    position:relative;
    height:480px;
    overflow:hidden;
    color:white;
    background:#504640;
}

.image-card:after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(transparent 45%,rgba(0,0,0,.67));
}

.image-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s;
}

.image-card:hover img{
    transform:scale(1.05);
}

.image-card div{
    position:absolute;
    bottom:24px;
    left:27px;
    z-index:1;
}

.image-card span,.product span{
    font-size:10px;
    letter-spacing:.2em;
    font-weight:700;
}

.image-card h3{
    margin:8px 0 0;
}

.cta{
    min-height:370px;
    text-align:center;
    background:#2c2622;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

.cta h2{
    margin:20px 0 30pxl
}

.page-intro{
    text-align:center;
    padding:100px 20px 80px;
    background:#faf8f5;
}

.page-intro h1{
    margin:20px 0;
    font-size:clamp(4rem,7vw,7rem);
}

.page-intro p{
    color:var(--muted);
    max-width:650px;
    margin:0 auto;
}

.collection-grid{
    display:grid;
    gap:85px;
}

.collection{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9%;
    align-items:center;
    scroll-margin-top:30px;
}
    
.collection img{
    width:100%;
    height:570px;
    object-fit:cover;
    background:#e4ded7;
}

.collection p{
    max-width:500px;
    color:var(--muted);
}

.collection.reverse img{
    order:2;
}

.collection h2{
    margin:17px 0 24px;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.product img{
    width:100%;
    height:400px;
    object-fit:cover;
    margin-bottom:19px;
    background:#ded8d0;
}

.product span{
    color:#91795e;
}

.product h2{
    font-size:2.2rem;
    margin:9px 0;
}

.product p{
    color:var(--muted);
}

.contact-layout{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:7%;
}

.contact-photo{
    position:relative;
    min-height:690px;
    background:#52433a;
}

.contact-photo img{
    height:100%;
    width:100%;
    object-fit:cover;
    filter:brightness(.73);
}

.contact-photo h2{
    position:absolute;
    bottom:35px;
    left:30px;
    color:white;
    font-size:3rem;
}

.contact-layout form h2{
    font-size:3.1rem;
    margin:12px 0;
}

.contact-layout form>p{
    color:var(--muted);
    font-size:13px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 21px;
}

.field{
    margin:20px 0;
}

.field label{
    display:block;
    font-size:12px;
    font-weight:700;
    margin-bottom:8px;
}

.field input:not([type=checkbox]),.field select,.field textarea{
    width:100%;
    padding:13px 12px;
    background:white;
    border:1px solid var(--line);
    border-radius:0;
    outline:none;
}

.field input:focus,.field select:focus,.field textarea:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 2px #a48b6c20;
}

.field.invalid input,.field.invalid select,.field.invalid textarea{
    border-color:#b64d4d;
}

.field.valid input,.field.valid select{
    border-color:#48856a;
}

.error{
    display:block;
    min-height:18px;
    font-size:11px;
    color:#ad3e3e;
}

.checkbox-field label{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-weight:400;
}

.checkbox-field input{
    margin-top:5px;
    accent-color:var(--ink);
}

.success{
    min-height:470px;
}

.success .button{
    margin-top:35px;
}

footer{
    padding:65px 7% 20px;
    background:#ece7e0;
    display:grid;
    grid-template-columns:2fr 1fr 1.4fr;
    gap:50px;
}

footer a,footer span,footer small{
    display:block;
}

footer p,footer small{
    font-size:12px;
    color:var(--muted);
}

footer strong{
    font-size:11px;
    letter-spacing:.17em;
}

footer div>a:not(.brand){
    margin-top:9px;
    font-size:13px;
}

.copyright{
    grid-column:1/-1;
    border-top:1px solid #d5cec4;
    padding-top:19px;
    margin-top:25px;
}

@media(max-width:1020px){
    .header{
        gap:12px;
        padding:0 4%;
    }
    
    .header nav{
        gap:12px;
    }
    
    .header nav a{
        font-size:10px;
    }
    
    .head-link{
        display:none;
    }
    
    .brand{
        font-size:18px;
    }
    
    .cards{
        gap:14px;
    }
    
    .image-card{
        height:350px;
    }
    }
    
    @media(max-width:760px){
        .header{
            height:76px;
        }
        
        .menu-toggle{
            display:block;
        }
        
        .header nav{
            display:none;
            position:absolute;
            top:76px;
            left:0;
            right:0;
            background:#fff;
            box-shadow:0 12px 25px #0002;
            padding:20px 6%;
            flex-direction:column;
            align-items:flex-start;
            gap:18px;
        }
        
        .header nav.open{
            display:flex;
        }
        
        .hero{
            min-height:620px;
            height:80vh;
        }
        
        .hero-copy{
            left:7%;
            right:7%
        }
        
        .hero h1{
            font-size:clamp(4.2rem,14vw,6.5rem);
        }
        
        .carousel-tools{
            bottom:18px;
        }
        
        .section{
            padding:65px 6%;
        }
        
        .two-col,.collection,.contact-layout{
            grid-template-columns:1fr;
            gap:30px;
        }
        
        .cards,.product-grid{
            grid-template-columns:1fr;
        }
        
        .image-card{
            height:430px;
        }
        
        .section-head{
            display:block;
        }
        
        .collection.reverse img{
            order:0;
        }
        
        .collection img{
            height:400px;
        }

        .form-grid{
            grid-template-columns:1fr;
            gap:0;
        }
        
        .contact-photo{
            min-height:300px;
            height:360px;
        }
        
        .contact-photo h2{
            font-size:2.6rem;
        }
        
        footer{
            grid-template-columns:1fr;
            gap:22px;
        }
        
        .page-intro{
            padding:70px 18px;
        }
        
        .product img{
            height:480px;
        }
        }
        
        @media(prefers-reduced-motion:reduce){
            *,*:before,*:after{transition:none!important;scroll-behavior:auto!important}
        }