/* ============================================================
   True Haven Design — Blog stylesheet
   Mirrors the design tokens, nav, and footer of the main site
   (see styles.css / index.html / about.html). Shared by
   /blog/index.html and every /blog/<slug>.html post so generated
   pages stay visually identical to the rest of the site.

   Palette, type scale and button treatment are lifted from
   styles.css. Class NAMES belong to the blog engine (chrome.mjs
   emits .nav-inner, .footer-inner, .btn-primary) so they differ
   from the main site's .nav / .foot-grid / .btn-solid — the
   rendered result is what matches, not the markup.
   ============================================================ */

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

:root {
  /* --- from styles.css :root --- */
  --ink:         #1a1a1a;   /* primary text / dark buttons */
  --ink-soft:    #4a4a4a;   /* secondary text */
  --line:        #e4e0da;   /* hairlines + card borders */
  --paper:       #ffffff;
  --cream:       #f7f5f1;   /* page background */
  --accent:      #a6927c;   /* warm taupe */
  --accent-dark: #8a7561;
  --gold:        #c9a24b;

  /* --- dark surfaces, from the site footer --- */
  --dark:        #111111;
  --dark-soft:   #232323;
  --dark-rule:   #2a2a2a;
  --on-dark:     #bdbab5;
  --on-dark-dim: #7d7a75;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── NAV (matches the site header) ─────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 88px; max-width: 1180px; margin: 0 auto; padding: 0 24px;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav-logo-img { display: block; height: 58px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav-links a {
  font-family: 'Jost', sans-serif; font-size: .78rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
  white-space: nowrap; transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent-dark); }
.nav-cta { display: flex; align-items: center; flex-shrink: 0; }

/* Site button treatment: .btn + .btn-solid */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink); padding: 14px 28px;
  font-family: 'Jost', sans-serif; font-size: .82rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: all .25s ease;
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 4px; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); }
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 88px; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 24px; gap: 20px; align-items: flex-start;
  }
  .nav-cta.open {
    display: block; position: absolute; top: 88px; left: 0; right: 0;
    background: var(--paper); padding: 0 24px 24px;
  }
}

/* ── PAGE HEADER ───────────────────────────────────────── */
.page-header { background: var(--dark); padding-top: 88px; }
.page-header-inner {
  max-width: 1180px; margin: 0 auto; padding: 64px 24px 60px;
  position: relative; overflow: hidden;
}
.page-header-inner::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 320px; height: 320px; border-radius: 50%;
  border: 1px solid rgba(166, 146, 124, 0.14);
}
.page-header-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: .72rem; font-weight: 500; letter-spacing: .32em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.page-header-title {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 500; color: #fff; line-height: 1.15; letter-spacing: .5px; max-width: 800px;
}
.page-header-title em { font-style: italic; color: #e6d9c6; }
.page-header-rule {
  height: 1px; margin-top: 28px;
  background: linear-gradient(to right, transparent, rgba(166, 146, 124, 0.5), transparent);
}

/* ── BREADCRUMB ────────────────────────────────────────── */
.breadcrumb {
  position: relative; z-index: 1;
  font-size: .72rem; font-weight: 400; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
  margin-bottom: 22px;
}
.breadcrumb a { color: var(--accent); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { margin: 0 8px; color: rgba(255, 255, 255, 0.28); }

/* ── ARTICLE META ──────────────────────────────────────── */
.post-meta {
  position: relative; z-index: 1; margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  font-size: 13px; color: rgba(255, 255, 255, 0.6);
}
.post-meta .cat {
  color: #fff; background: var(--accent-dark);
  padding: 5px 13px; font-size: .64rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
}

/* ── ARTICLE HERO IMAGE ────────────────────────────────── */
.post-hero {
  max-width: 1000px;
  margin: -52px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.post-hero img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 18px 50px rgba(26, 26, 26, 0.22);
}
@media (max-width: 600px) { .post-hero { margin-top: -28px; } }

/* ── ARTICLE BODY ──────────────────────────────────────── */
.article { padding: 56px 0 96px; }
.article-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.article-wrap p {
  font-size: 17px; line-height: 1.85; color: var(--ink-soft);
  margin-bottom: 24px;
}
.article-wrap h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 500; color: var(--ink);
  line-height: 1.2; letter-spacing: .5px; margin: 52px 0 8px;
}
.article-wrap h2 + .gold-rule { margin: 14px 0 26px; }
.article-wrap h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.35rem, 2.2vw, 1.6rem); font-weight: 500; color: var(--ink);
  letter-spacing: .5px; margin: 38px 0 14px;
}
.gold-rule { width: 48px; height: 1.5px; background: var(--accent); margin: 20px 0 28px; }
.article-wrap ul, .article-wrap ol { margin: 0 0 26px 26px; }
.article-wrap li { font-size: 17px; line-height: 1.8; margin-bottom: 10px; color: var(--ink-soft); }
.article-wrap a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.article-wrap a:hover { color: var(--ink); }
.article-wrap strong { color: var(--ink); font-weight: 500; }
.article-wrap figure { margin: 32px 0; }
.article-wrap figure img { width: 100%; height: auto; display: block; }
.article-wrap figcaption {
  font-size: 13px; color: var(--on-dark-dim); margin-top: 10px; text-align: center;
}
.lead { font-size: 20px !important; line-height: 1.7 !important; color: var(--ink) !important; font-weight: 400; }

blockquote {
  border-left: 3px solid var(--accent); background: var(--cream);
  margin: 32px 0; padding: 22px 28px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
  font-size: 1.35rem; line-height: 1.5; color: var(--ink);
}

/* Key-takeaways / TL;DR box */
.key-points {
  background: var(--cream); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); padding: 24px 28px; margin: 0 0 40px;
}
.key-points .kp-title {
  font-size: .68rem; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: 14px;
}
.key-points ul { margin: 0 0 0 20px; }
.key-points li { font-size: 15px; margin-bottom: 8px; color: var(--ink-soft); }

/* In-article CTA */
.cta-box {
  background: var(--dark); color: #fff;
  padding: 48px 40px; margin: 56px 0 0; text-align: center;
}
.cta-box h2 {
  font-family: 'Cormorant Garamond', serif; color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 500; letter-spacing: .5px; margin: 0 0 14px;
}
.cta-box p { color: var(--on-dark) !important; max-width: 540px; margin: 0 auto 30px !important; }
.cta-box .btn-primary { background: transparent; border-color: #fff; color: #fff; }
.cta-box .btn-primary:hover { background: #fff; border-color: #fff; color: var(--ink); }
.cta-box a[data-lead] { color: var(--accent); }

/* Disclosure */
.disclosure {
  max-width: 760px; margin: 48px auto 0; padding: 0 24px;
  font-size: 12px; color: var(--on-dark-dim); line-height: 1.7;
}

/* ── BLOG LISTING ──────────────────────────────────────── */
.listing { padding: 72px 0 96px; background: var(--paper); }
.post-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px;
}
.post-card {
  background: var(--paper); border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .3s, box-shadow .3s;
  text-decoration: none; color: inherit;
}
.post-card:hover { box-shadow: 0 8px 30px rgba(26, 26, 26, 0.10); transform: translateY(-3px); }
.post-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--cream); }
.post-card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.post-card .cat {
  font-size: .64rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: 12px;
}
.post-card h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem;
  font-weight: 500; color: var(--ink); line-height: 1.25; letter-spacing: .5px; margin-bottom: 12px;
}
.post-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 18px; }
.post-card .read {
  margin-top: auto; font-size: .7rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-dark);
}
.post-card-date { font-size: 12px; color: var(--on-dark-dim); margin-bottom: 14px; }
@media (max-width: 720px) { .post-grid { grid-template-columns: 1fr; } }

/* ── FOOTER (matches the site footer) ──────────────────── */
footer {
  background: var(--dark);
  color: var(--on-dark);
  padding: 70px 0 30px;
  font-size: .9rem;
}
.footer-inner {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 44px;
  margin-bottom: 44px; max-width: 1180px; margin-left: auto; margin-right: auto; padding: 0 24px;
}
/* Site ships one dark-on-light logo; invert it for the dark footer,
   the same treatment index.html applies inline. */
.footer-brand-logo {
  display: block; height: 78px; width: auto; margin-bottom: 16px;
  filter: invert(1) brightness(1.6);
}
.footer-desc { font-size: .9rem; color: var(--on-dark); line-height: 1.7; max-width: 300px; }
.footer-col-title {
  font-family: 'Jost', sans-serif;
  font-size: .75rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: #fff; margin-bottom: 18px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-links a { font-size: .9rem; color: var(--on-dark); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid var(--dark-rule); padding-top: 24px;
  max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-copy { font-size: .78rem; color: var(--on-dark-dim); letter-spacing: .05em; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: .78rem; color: var(--on-dark-dim); text-decoration: none; transition: color .2s; }
.footer-legal a:hover { color: #fff; }
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── FADE-IN ───────────────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }