:root{--bg:#faf5ee;--ink:#2b211b;--clay:#c4683f;--clay-d:#a4512c;--card:#fff;--muted:#7a6a5e}
*{box-sizing:border-box}
body{margin:0;font-family:Georgia,'Times New Roman',serif;background:var(--bg);color:var(--ink);line-height:1.6}
a{color:var(--clay-d)}
.top{display:flex;justify-content:space-between;align-items:center;padding:1rem 5vw;position:sticky;top:0;background:var(--bg);border-bottom:1px solid #e6dccd;z-index:5}
.logo{font-size:1.4rem;font-weight:bold;text-decoration:none;color:var(--ink)}
nav a{margin-left:1.5rem;text-decoration:none;color:var(--ink)}
nav a:hover{color:var(--clay)}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;padding:5rem 5vw}
.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:.8rem;color:var(--muted)}
h1{font-size:clamp(2.4rem,6vw,4.5rem);line-height:1.05;margin:.3em 0}
.lead{font-size:1.2rem;max-width:34em;color:var(--muted)}
.btn{display:inline-block;margin-top:1rem;padding:.8rem 1.6rem;background:var(--clay);color:#fff;text-decoration:none;border-radius:2rem}
.btn:hover{background:var(--clay-d)}
.art svg{width:100%;max-width:320px;margin:auto;display:block}
section{padding:3rem 5vw}
h2{font-size:2rem;margin-top:0}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.filters button{border:1px solid var(--clay);background:transparent;color:var(--clay-d);padding:.4rem 1rem;border-radius:2rem;cursor:pointer;font:inherit;text-transform:capitalize}
.filters button.on,.filters button:hover{background:var(--clay);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.5rem}
.card{background:var(--card);border-radius:1rem;overflow:hidden;box-shadow:0 2px 10px #0001;display:flex;flex-direction:column}
.card .pic{height:170px;display:flex;align-items:center;justify-content:center}
.card .pic svg{height:120px}
.card .body{padding:1rem 1.2rem 1.2rem}
.card h3{margin:0 0 .2rem}
.card .meta{color:var(--muted);font-size:.85rem}
.card p{font-size:.95rem;margin:.6rem 0}
.price{font-weight:bold;font-size:1.1rem}
.verhaal,.contact{max-width:46rem}
footer{padding:2rem 5vw;color:var(--muted);border-top:1px solid #e6dccd;font-size:.9rem}
@media(max-width:700px){.hero{grid-template-columns:1fr;padding-top:2rem}nav a{margin-left:.9rem}}