:root {
  --teal: #0E8FA3;
  --teal-dark: #0B7A8C;
  --green: #4A6741;
  --flame: #E05A1A;
  --stone: #C4A882;
  --linen: #F5EFE6;
  --dark: #2C2C27;
  --mid: #5A5248;
  --light: #E0D8CE;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--linen);
  color: var(--dark);
  font-size: 17px;
  line-height: 1.7;
}

/* NAV (matches homepage) */
nav {
  position: sticky;
  top: 0;
  background: var(--linen);
  border-bottom: 3px solid var(--teal);
  padding: 18px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  font-size: 30px;
  font-weight: normal;
  color: var(--teal);
  letter-spacing: 0.01em;
  font-family: 'Playfair Display', Georgia, serif;
}
.nav-logo svg { display: block; flex-shrink: 0; }
.nav-links { display: flex; gap: 24px; align-items: center; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.nav-links a { color: var(--green); text-decoration: none; }
.nav-links a:hover { color: var(--teal); }
.nav-book { background: var(--flame); color: white !important; padding: 9px 20px; border-radius: 22px; }
.nav-book:hover { opacity: 0.88; }

.section-tag {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--teal);
}

.btn-flame {
  display: inline-block; padding: 13px 28px;
  background: var(--flame); border-radius: 28px;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: white; text-decoration: none; transition: opacity 0.2s;
}
.btn-flame:hover { opacity: 0.85; }

/* BLOG LIST */
.blog-hero {
  background: var(--linen);
  padding: 56px 40px 20px;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.blog-hero h2 { font-size: 34px; font-weight: normal; color: var(--dark); }

.blog-list { background: var(--linen); padding: 40px 40px 80px; }
.blog-list-inner { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.blog-card {
  display: block; background: white; border-radius: 4px;
  border-top: 4px solid var(--teal); padding: 32px 36px;
  text-decoration: none; color: inherit;
  box-shadow: 0 3px 12px rgba(44,44,39,0.06);
  transition: box-shadow 0.2s;
}
.blog-card:hover { box-shadow: 0 6px 20px rgba(44,44,39,0.12); }
.blog-card h3 { font-size: 24px; font-weight: normal; color: var(--dark); margin-bottom: 6px; }
.blog-card-meta {
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid);
  margin-bottom: 14px;
}
.blog-card p { font-size: 16px; line-height: 1.75; color: var(--mid); margin-bottom: 14px; }
.blog-read-more {
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal);
}

/* SINGLE POST */
.post-hero {
  background: var(--linen); padding: 56px 40px 24px;
  max-width: 720px; margin: 0 auto; text-align: center;
}
.post-back {
  display: inline-block; margin-bottom: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green); text-decoration: none;
}
.post-back:hover { color: var(--teal); }
.post-hero h1 { font-size: 36px; font-weight: normal; color: var(--dark); line-height: 1.25; margin-bottom: 16px; }
.post-lede { font-size: 18px; color: var(--mid); line-height: 1.7; }
.post-cover { width: 100%; max-width: 720px; border-radius: 4px; margin-top: 28px; box-shadow: 0 6px 24px rgba(44,44,39,0.15); }

.post-body {
  max-width: 680px; margin: 40px auto 0; padding: 0 40px 60px;
  font-size: 18px; line-height: 1.85; color: var(--dark);
}
.post-body p { margin-bottom: 20px; }
.post-body h2 { font-size: 26px; font-weight: normal; color: var(--dark); margin: 40px 0 16px; }
.post-body h3 { font-size: 21px; font-weight: normal; color: var(--dark); margin: 32px 0 14px; }
.post-body a { color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--teal); }
.post-body img { width: 100%; border-radius: 4px; margin: 24px 0; }
.post-body blockquote {
  border-left: 3px solid var(--teal); padding-left: 20px;
  color: var(--mid); font-style: italic; margin: 24px 0;
}
.post-body ul, .post-body ol { margin: 0 0 20px 24px; }
.post-body li { margin-bottom: 8px; }

.post-cta {
  background: var(--flame); padding: 44px 40px; text-align: center;
}
.post-cta p { font-size: 19px; color: white; }
.post-cta .btn-flame { background: white; color: var(--flame); margin-left: 12px; }
.post-cta .btn-flame:hover { opacity: 0.9; }

/* FOOTER (matches homepage) */
footer { background: var(--dark); padding: 28px 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
footer p { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); }
footer a { color: var(--stone); text-decoration: none; font-size: 12px; font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.08em; }

@media (max-width: 720px) {
  nav { padding: 12px 20px; flex-wrap: wrap; gap: 10px; }
  .nav-links { gap: 14px; font-size: 12px; }
  .blog-hero, .post-hero { padding: 36px 24px 16px; }
  .blog-hero h2 { font-size: 26px; }
  .post-hero h1 { font-size: 28px; }
  .blog-list { padding: 24px 20px 56px; }
  .blog-card { padding: 24px; }
  .post-body { padding: 0 24px 48px; font-size: 17px; }
  .post-cta { padding: 32px 24px; }
  .post-cta .btn-flame { display: block; margin: 16px auto 0; width: fit-content; }
  footer { flex-direction: column; text-align: center; padding: 24px 20px; }
}