:root { --ink:#1d2720; --cream:#f8f4ec; --moss:#315941; --clay:#c8694e; --line:#d8d0c1; --serif: Georgia, 'Times New Roman', serif; --sans: system-ui, sans-serif; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--sans); } a { color:inherit; text-decoration:none; }
.nav { display:flex; justify-content:space-between; align-items:center; padding:1.3rem 5vw; border-bottom:1px solid var(--line); } .brand { font-family:var(--serif); font-size:1.6rem; letter-spacing:.04em; } .nav-links { display:flex; gap:1.3rem; font-size:.9rem; }
.hero { min-height:68vh; display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:end; padding:9vw 5vw 6vw; background:linear-gradient(120deg,#d9e4d2 0%,#f8f4ec 58%,#ecd2bf 100%); } .eyebrow { color:var(--moss); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; } h1 { font:clamp(3.2rem,8vw,7rem)/.9 var(--serif); letter-spacing:-.05em; max-width:9ch; margin:.8rem 0 1.4rem; } .hero-copy { max-width:35rem; font-size:1.05rem; line-height:1.7; } .hero-art { min-height:330px; border-radius:50% 50% 8px 8px; background:radial-gradient(circle at 52% 28%,#f2dac8 0 8%,transparent 8.5%), radial-gradient(circle at 48% 58%,#6c9268 0 28%,transparent 28.5%),#a5c09c; }
.button { display:inline-block; margin-top:1.4rem; background:var(--moss); color:#fff; padding:.85rem 1.2rem; font-weight:700; font-size:.9rem; } .section { padding:6rem 5vw; } .section-head { display:flex; justify-content:space-between; align-items:end; gap:2rem; border-bottom:1px solid var(--line); padding-bottom:1.4rem; } h2 { font:clamp(2.2rem,4vw,4rem)/1 var(--serif); margin:0; letter-spacing:-.04em; } .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; padding-top:1.5rem; } .product { display:flex; flex-direction:column; min-height:270px; background:#fff; padding:1.25rem; border:1px solid var(--line); } .product-art { min-height:150px; background:#dce8d5; margin-bottom:1.2rem; } .product h3 { font:1.55rem var(--serif); margin:0 0 .45rem; } .product p { line-height:1.5; margin:0; } .product a { margin-top:auto; padding-top:1rem; color:var(--moss); font-weight:700; } .empty { grid-column:1/-1; padding:2rem; border:1px dashed var(--line); color:#536259; } .footer { padding:2rem 5vw; color:#f8f4ec; background:var(--ink); display:flex; justify-content:space-between; }
@media (max-width:720px) { .nav-links { display:none; } .hero { grid-template-columns:1fr; padding-top:5rem; } .hero-art { min-height:220px; } .grid { grid-template-columns:1fr; } .section { padding:4rem 5vw; } }