:root{

--bg:#F5F5F0;
--surface:#FFFFFF;

--text:#20211F;

--accent:#4E6B57;
--accent-dark:#32453A;

--border:#D8DED6;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Inter,sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.75;

}

.container{

max-width:900px;

margin:auto;

padding:90px 32px;

}

header{

margin-bottom:40px;

}

h1{

font-family:"Cormorant Garamond",serif;

font-size:4.6rem;

font-weight:600;

line-height:.95;

color:var(--accent-dark);

margin-bottom:15px;

}

.subtitle{

font-size:1rem;

letter-spacing:.03em;

color:#666;

margin-bottom:35px;

}

nav{

display:flex;

gap:30px;

}

nav a{

text-decoration:none;

color:var(--accent);

font-weight:500;

position:relative;

transition:.25s;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:2px;

background:var(--accent);

transition:.3s;

}

nav a:hover::after{

width:100%;

}

section{

margin-bottom:90px;

}

.divider{

color:var(--accent);

font-size:2.5rem;

letter-spacing:.15rem;

margin-bottom:20px;

}

h2{

font-family:"Cormorant Garamond",serif;

font-size:2.3rem;

font-weight:600;

margin-bottom:22px;

color:var(--accent-dark);

}

p{

max-width:720px;

margin-bottom:18px;

}

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:22px;

margin-top:35px;

}

.card{

background:var(--surface);

padding:28px;

border-radius:14px;

border:1px solid var(--border);

transition:.25s ease;

}

.card:hover{

transform:translateY(-5px);

box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.card h3{

font-family:"Cormorant Garamond",serif;

font-size:1.6rem;

margin-bottom:12px;

color:var(--accent-dark);

}

footer{

margin-top:100px;

padding-top:50px;

border-top:1px solid var(--border);

}

footer a{

color:var(--accent);

text-decoration:none;

}

footer a:hover{

text-decoration:underline;

}

@media (max-width:700px){

.container{

padding:55px 24px;

}

h1{

font-size:3.5rem;

}

h2{

font-size:2rem;

}

nav{

gap:20px;
flex-wrap:wrap;

}

.cards{

grid-template-columns:1fr;

}

}