:root{
  --bg:#FBF6F2;
  --card:#FFFFFF;
  --primary:#C27A5C;
  --primary-dark:#A86345;
  --primary-light:rgba(194,122,92,0.10);
  --text:#2D2420;
  --text-secondary:#8B7E74;
  --warm-accent:#F5EDE4;
  --radius-lg:24px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
h1,h2,h3{font-family:'Manrope',sans-serif;letter-spacing:-0.02em;line-height:1.2;}

:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:8px;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:780px;}

/* ---------- Nav ---------- */
.blog-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(251,246,242,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(45,36,32,0.06);
}
.blog-nav .wrap{
  max-width:1180px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:16px;
  padding-bottom:16px;
}
.brand{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:17px;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(194,122,92,0.18);
  flex-shrink:0;
}
.nav-links{display:flex;gap:24px;align-items:center;}
.nav-links a{
  font-size:15px;
  font-weight:600;
  color:var(--text-secondary);
  transition:color .3s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--primary-dark);}
.nav-cta{
  background:var(--text);
  color:#fff;
  padding:10px 20px;
  border-radius:999px;
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  transition:background .3s var(--ease);
}
.nav-cta:hover{background:var(--primary-dark);}

/* ---------- Blog hero / index ---------- */
.blog-hero{padding:64px 0 8px;}
.breadcrumbs{font-size:13.5px;color:var(--text-secondary);margin-bottom:18px;}
.breadcrumbs a{color:var(--primary-dark);}
.breadcrumbs a:hover{text-decoration:underline;}
.blog-hero h1{font-size:clamp(28px,4vw,42px);font-weight:800;margin-bottom:16px;max-width:820px;}
.blog-hero .lead{font-size:17.5px;color:var(--text-secondary);max-width:700px;}

.article-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  padding:40px 0 20px;
}
.article-card{
  background:#fff;
  border:1px solid rgba(45,36,32,0.06);
  border-radius:var(--radius-lg);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.article-card:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 44px -20px rgba(45,36,32,0.12);
  border-color:rgba(194,122,92,0.2);
}
.article-card .tag{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--primary);
}
.article-card h2{font-size:20px;font-weight:800;}
.article-card p{font-size:15px;color:var(--text-secondary);flex:1;}
.article-card .more{font-size:14px;font-weight:700;color:var(--primary-dark);}

/* ---------- Article ---------- */
.article{padding:48px 0 24px;}
.article h1{font-size:clamp(26px,3.6vw,40px);font-weight:800;margin-bottom:14px;}
.article-meta{font-size:13.5px;color:var(--text-secondary);margin-bottom:30px;}
.article-body{font-size:17px;line-height:1.75;color:#3B322C;}
.article-body p{margin-bottom:18px;}
.article-body h2{font-size:23px;font-weight:800;margin:38px 0 14px;color:var(--text);}
.article-body h3{font-size:18px;font-weight:700;margin:26px 0 10px;color:var(--text);}
.article-body ul,.article-body ol{margin:0 0 18px 22px;}
.article-body li{margin-bottom:8px;}
.article-body blockquote{
  border-left:3px solid var(--primary);
  background:var(--warm-accent);
  padding:16px 20px;
  border-radius:0 14px 14px 0;
  margin:22px 0;
  font-style:italic;
  color:var(--text);
}
.article-body strong{font-weight:700;color:var(--text);}
.article-body a{color:var(--primary-dark);text-decoration:underline;}
.article-body a:hover{color:var(--primary);}

/* ---------- CTA box ---------- */
.cta-box{
  background:linear-gradient(160deg,#2D2420 0%,#3D2E28 60%,#4A3830 100%);
  color:#fff;
  border-radius:28px;
  padding:40px 36px;
  margin:48px 0;
  text-align:center;
}
.cta-box h2{font-size:24px;font-weight:800;margin-bottom:10px;}
.cta-box p{color:#C4B5A8;font-size:15.5px;max-width:540px;margin:0 auto 24px;}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:54px;
  padding:0 28px;
  border-radius:16px;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:15.5px;
  cursor:pointer;
  border:none;
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow:0 12px 24px -8px rgba(194,122,92,0.5);
}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);}
.btn-ghost{background:#fff;color:var(--text);border:1px solid rgba(45,36,32,0.12);}
.btn-ghost:hover{transform:translateY(-2px);}

/* ---------- Related ---------- */
.related{padding:8px 0 40px;}
.related h2{font-size:22px;font-weight:800;margin-bottom:18px;}
.related-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.related-list a{
  background:#fff;
  border:1px solid rgba(45,36,32,0.06);
  border-radius:18px;
  padding:18px;
  font-size:15px;
  font-weight:600;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.related-list a:hover{border-color:rgba(194,122,92,0.25);transform:translateY(-3px);}

/* ---------- Footer ---------- */
footer{padding:36px 0 56px;text-align:center;color:var(--text-secondary);font-size:13px;}
footer .footer-links{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:12px;
}
footer .footer-links a{font-weight:600;}
footer .footer-links a:hover{color:var(--primary-dark);}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .article-list{grid-template-columns:1fr;}
  .related-list{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .blog-hero{padding:40px 0 8px;}
  .article{padding:32px 0 16px;}
  .cta-box{padding:32px 22px;}
}