:root {
  --sage: #A3B18A;
  --cream: #F6F1E9;
  --terracotta: #D08C60;
  --charcoal: #2F2F2F;
  --white: #fffdf9;
}
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--charcoal); }
nav.container-fluid { background: rgba(246,241,233,.96); border-bottom: 1px solid rgba(47,47,47,.08); position: sticky; top: 0; z-index: 10; }
nav a, nav strong { color: var(--charcoal); }
nav a[role="button"], .primary-btn, button { background: var(--sage); border-color: var(--sage); color: var(--charcoal); font-weight: 700; }
nav a[role="button"]:hover, .primary-btn:hover, button:hover { background: #8f9f78; border-color: #8f9f78; }
h1, h2, h3 { color: var(--charcoal); }
p, li { color: #4b4b4b; }
main.container { padding-top: 3rem; padding-bottom: 3rem; }
.eyebrow { color: var(--sage); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 800; }

.blog-header { text-align: center; margin: 2rem 0 3rem; }
.blog-header h1 { font-size: clamp(2rem, 4vw, 3rem); margin: .5rem 0 1rem; }
.blog-header p { max-width: 640px; margin: 0 auto; }

.post-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
.post-card { background: var(--white); border-radius: 18px; padding: 1.75rem; box-shadow: 0 8px 20px rgba(47,47,47,.06); border: 1px solid rgba(47,47,47,.06); transition: .2s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(47,47,47,.1); }
.post-card a { text-decoration: none; color: inherit; display: block; }
.post-card h2 { font-size: 1.4rem; margin: .25rem 0 .75rem; }
.post-meta { color: var(--terracotta); font-size: .85rem; font-weight: 600; margin: 0 0 .5rem; }
.read-more { color: var(--sage); font-weight: 700; margin-top: 1rem; }

.blog-post { background: var(--white); border-radius: 22px; padding: 3rem 2.5rem; box-shadow: 0 10px 28px rgba(47,47,47,.06); border: 1px solid rgba(47,47,47,.06); margin: 1rem 0 3rem; max-width: 760px; margin-left: auto; margin-right: auto; }
.blog-post h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 1rem 0 1.5rem; line-height: 1.2; }
.blog-post h2 { font-size: 1.4rem; margin: 2.2rem 0 .75rem; color: var(--charcoal); }
.blog-post p, .blog-post li { font-size: 1.05rem; line-height: 1.7; }
.blog-post .lede { font-size: 1.2rem; color: var(--charcoal); font-style: italic; margin: 1.5rem 0 2rem; }
.blog-post ul { padding-left: 1.5rem; }
.blog-post .post-meta a { color: var(--terracotta); text-decoration: none; }
.blog-post .post-meta a:hover { text-decoration: underline; }
.blog-post .primary-btn { display: inline-block; margin-top: 1.5rem; }

.cta-box { background: var(--sage); border-radius: 22px; padding: 2rem; margin: 3rem 0; text-align: center; }
.cta-box h2, .cta-box p { color: var(--charcoal); }

footer.container { padding-bottom: 2rem; text-align: center; }

@media (max-width: 600px) {
  .blog-post { padding: 2rem 1.25rem; }
  nav.container-fluid ul:last-child { flex-wrap: wrap; }
}