:root{
  --ink:#2B2119;
  --paper:#FAF5EF;
  --surface:#F1E1D6;
  --wine:#7A2E3D;
  --wine-dark:#5A1F2B;
  --gold:#B98A3E;
  --line:#E4D2C2;
  --radius:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Work Sans", -apple-system, sans-serif;
  line-height:1.65;
  font-size:17px;
}
h1,h2,h3,.brand{
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  color:var(--wine-dark);
  letter-spacing:-0.01em;
}
a{color:var(--wine);}
a:focus-visible, button:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

.knot{display:inline-block; width:1em; height:1em; vertical-align:-0.15em;}

header.site{
  display:flex; align-items:center; justify-content:space-between;
  max-width:960px; margin:0 auto; padding:28px 24px 18px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-size:1.3rem; text-decoration:none;
}
.brand svg{width:26px; height:26px;}
nav.site a{
  margin-left:22px; text-decoration:none; color:var(--ink);
  font-size:0.95rem; border-bottom:1px solid transparent;
}
nav.site a:hover{border-color:var(--gold);}

.cta{
  display:inline-block;
  background:var(--wine);
  color:#fff !important;
  padding:11px 22px;
  border-radius:999px;
  text-decoration:none;
  font-size:0.95rem;
  font-weight:600;
  transition:background .15s ease;
}
.cta:hover{background:var(--wine-dark);}

.hero{
  max-width:960px; margin:0 auto; padding:36px 24px 8px;
  border-bottom:1px solid var(--line);
}
.eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:.75rem;
  color:var(--gold); font-weight:700; margin-bottom:10px;
}
.hero h1{font-size:2.4rem; margin:0 0 14px; line-height:1.15;}
.hero p.lead{max-width:620px; color:#4a3c33; font-size:1.08rem;}

main{max-width:960px; margin:0 auto; padding:34px 24px 60px;}

.grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px; margin-top:24px;
}
.card{
  background:var(--surface); border-radius:var(--radius);
  padding:22px; text-decoration:none; color:var(--ink);
  border:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 24px -14px rgba(90,31,43,.35);}
.card h3{margin:0; font-size:1.15rem;}
.card p{margin:0; font-size:.94rem; color:#5a4c42;}
.card .tag{font-size:.78rem; color:var(--wine); font-weight:600;}

article.post h1{font-size:2rem; margin-bottom:6px;}
article.post .meta{color:#8a7364; font-size:.9rem; margin-bottom:26px;}
article.post p{max-width:680px;}
article.post h2{font-size:1.3rem; margin-top:36px;}

.callout{
  max-width:680px; margin:34px 0; padding:20px 22px;
  background:var(--surface); border-left:4px solid var(--wine);
  border-radius:0 var(--radius) var(--radius) 0;
}
.callout p{margin:0;}

footer.site{
  border-top:1px solid var(--line);
  margin-top:40px;
  padding:30px 24px 50px;
  text-align:center;
  color:#8a7364;
  font-size:.9rem;
}
footer.site a{color:var(--wine);}

@media (max-width:600px){
  header.site{flex-direction:column; gap:14px; align-items:flex-start;}
  nav.site a{margin-left:0; margin-right:18px;}
  .hero h1{font-size:1.9rem;}
}