:root{
  --navy:#16233F; --navy-deep:#0E1830;
  --cream:#F7F2E4; --cream-dim:#EFE7D2;
  --gold:#C9A227; --gold-bright:#E4C158;
  --forest:#3F6D50;
  --ink:#24304A; --ivory:#F4F1E6;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--navy-deep);color:var(--ivory);
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; margin:0;}
a{color:inherit;}
img{max-width:100%; display:block;}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; max-width:900px; margin:0 auto;
}
.brand{font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:20px; display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--ivory);}
.brand .dot svg{ width:18px; height:18px; fill:#fff; }
.pill-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  background:var(--gold); color:var(--navy-deep); text-decoration:none;
  font-size:13px; font-weight:700; padding:8px 18px; border-radius:20px;
  border:none; cursor:pointer; font-family:'Inter',sans-serif; white-space:nowrap;
}
.pill-btn.ghost{ background:transparent; color:rgba(244,241,230,0.7); border:1.5px solid rgba(244,241,230,0.25); }

.wrap{ max-width:720px; margin:0 auto; padding:20px 28px 80px; }
.eyebrow{font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-bright); font-weight:700; margin-bottom:10px;}

/* ===== Blog index ===== */
.blog-hero h1{ font-size:38px; margin-bottom:14px; }
.blog-hero p{ color:rgba(244,241,230,0.65); font-size:16px; line-height:1.6; max-width:520px; }
.post-list{ margin-top:36px; display:flex; flex-direction:column; gap:18px; }
.post-card{
  display:block; background:var(--cream); border-radius:18px; padding:24px 26px;
  text-decoration:none; color:var(--ink); border:2px solid rgba(201,162,39,0.4);
}
.post-card:hover{ border-color:var(--gold); }
.post-card .date{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--forest); font-weight:700; margin-bottom:8px; }
.post-card h2{ font-size:22px; margin-bottom:8px; }
.post-card p{ font-size:14.5px; color:rgba(36,48,74,0.7); line-height:1.6; margin:0; }

/* ===== Single post ===== */
.post-header{ margin-bottom:30px; }
.post-header .date{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold-bright); font-weight:700; margin-bottom:10px; }
.post-header h1{ font-size:36px; line-height:1.2; margin-bottom:12px; }
.post-header .lead{ color:rgba(244,241,230,0.65); font-size:16px; line-height:1.6; }

.post-body{ background:var(--cream); border-radius:22px; padding:36px 34px; color:var(--ink); }
.post-body h2{ font-size:22px; margin:32px 0 12px; color:var(--ink); }
.post-body h2:first-child{ margin-top:0; }
.post-body p{ font-size:15.5px; line-height:1.75; margin:0 0 16px; }
.post-body ul{ font-size:15.5px; line-height:1.75; padding-left:20px; margin:0 0 16px; }
.post-body li{ margin-bottom:6px; }
.fact-box{
  background:var(--cream-dim); border-left:4px solid var(--gold); border-radius:10px;
  padding:16px 18px; font-size:14.5px; line-height:1.6; margin:20px 0;
}
.fact-box b{ display:block; margin-bottom:4px; color:var(--forest); text-transform:uppercase; font-size:11px; letter-spacing:0.06em; }

.post-cta{
  margin-top:32px; background:var(--navy); border-radius:16px; padding:26px 28px; text-align:center;
}
.post-cta h3{ color:#fff; font-size:20px; margin-bottom:8px; }
.post-cta p{ color:rgba(244,241,230,0.65); font-size:14px; margin-bottom:18px; }

.related{ margin-top:40px; }
.related h3{ font-size:14px; text-transform:uppercase; letter-spacing:0.06em; color:rgba(244,241,230,0.5); margin-bottom:14px; }
.related a{ display:block; color:var(--gold-bright); text-decoration:none; font-size:15px; margin-bottom:8px; }
.related a:hover{ text-decoration:underline; }

footer{ text-align:center; padding:30px 20px; color:rgba(244,241,230,0.4); font-size:12px; }

@media (max-width:640px){
  .post-header h1{ font-size:28px; }
  .post-body{ padding:26px 22px; }
}