:root{--cream:#F4EFE7;--paper:#FBF7F0;--ink:#14110E;--muted:#6f665a;--brass:#A8895A;--line:#e2d9c9}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
header.site{border-bottom:1px solid var(--line);background:var(--cream)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px;flex-wrap:wrap}
.brand{font:600 22px/1 Georgia,serif;letter-spacing:.02em;text-decoration:none}
.brand span{display:block;font:500 10px/1.6 -apple-system,Segoe UI,Helvetica,Arial,sans-serif;letter-spacing:.28em;color:var(--brass);text-transform:uppercase;margin-top:6px}
nav a{font:500 13px/1 -apple-system,Segoe UI,Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--muted);margin-left:22px}
nav a:hover{color:var(--ink)}
.hero{background:var(--cream);border-bottom:1px solid var(--line)}
.hero .wrap{padding-block:72px 80px;max-width:820px;text-align:center}
.hero h1{font:600 clamp(34px,5.4vw,58px)/1.12 Georgia,serif;margin:0 0 18px}
.hero p{font-size:19px;color:var(--muted);margin:0 auto;max-width:620px}
.eyebrow{font:600 11px/1 -apple-system,Segoe UI,Helvetica,Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--brass);margin-bottom:20px}
h2{font:600 clamp(24px,3vw,34px)/1.2 Georgia,serif;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 32px}
section{padding-block:64px}
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{text-decoration:none;display:block}
.card .ph{aspect-ratio:1/1;overflow:hidden;background:var(--cream);border:1px solid var(--line)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.04)}
.card h3{font:600 17px/1.3 Georgia,serif;margin:14px 0 6px}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.price{font:600 19px/1 Georgia,serif;margin-top:10px}
.price s{color:#a79d8e;font-size:15px;font-weight:400;margin-left:8px}
.tag{font:500 10px/1 -apple-system,Segoe UI,Helvetica,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-top:8px;display:block}
.cats{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cat{border:1px solid var(--line);background:var(--cream);padding:26px;text-decoration:none;display:block}
.cat:hover{border-color:var(--brass)}
.cat h3{font:600 21px/1.25 Georgia,serif;margin:0 0 8px}
.cat p{margin:0;color:var(--muted);font-size:15px}
.guides{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.guide{border-top:2px solid var(--brass);padding-top:18px;text-decoration:none;display:block}
.guide h3{font:600 22px/1.25 Georgia,serif;margin:0 0 8px}
.guide p{margin:0;color:var(--muted);font-size:15px}
article{max-width:720px;margin:0 auto}
article h1{font:600 clamp(30px,4.4vw,46px)/1.15 Georgia,serif;margin:0 0 14px}
article .lede{font-size:20px;color:var(--muted);margin:0 0 40px}
article h2{margin-top:44px}
article p{margin:0 0 20px}
.inline{display:flex;gap:20px;border:1px solid var(--line);background:var(--cream);padding:18px;margin:30px 0;text-decoration:none;align-items:center}
.inline img{width:120px;height:120px;object-fit:cover;flex:0 0 120px;border:1px solid var(--line)}
.inline .t{font:600 17px/1.3 Georgia,serif;margin:0 0 6px}
.inline .d{margin:0;color:var(--muted);font-size:14px}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filters button{font:500 12px/1 -apple-system,Segoe UI,Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:11px 16px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
footer.site{background:var(--ink);color:#cbbfa9;margin-top:40px}
footer.site .wrap{padding-block:48px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;font-size:14px}
footer.site a{color:#e6d9bf}
.disclose{background:var(--cream);border:1px solid var(--line);padding:22px;color:var(--muted);font-size:14px;margin-top:40px}
@media(max-width:640px){nav a{margin:0 16px 0 0}header.site .wrap{justify-content:center;text-align:center}.inline{flex-direction:column;align-items:flex-start}.inline img{width:100%;height:210px;flex:none}}