/* ===========================================================
   Shared styles for Sarah Bradley blog pages
   (base tokens mirror the homepage so everything stays on-brand)
   =========================================================== */

:root{
  --cream:        #FBF6EE;
  --cream-deep:   #F4ECDE;
  --card:         #F5F0E6;
  --card-line:    #E7DECB;
  --ink:          #34424F;
  --ink-soft:     #5B6670;
  --terracotta:   #C8643F;
  --mustard:      #E6B54E;
  --mustard-soft: #F1D48A;
  --sage:         #8DA67E;
  --blue:         #7FA8C9;
  --pink:         #D98C9A;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{ font-family:'Playfair Display', Georgia, serif; font-weight:600; color:var(--ink); line-height:1.25; }
a{ color:var(--terracotta); }
img{ max-width:100%; display:block; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

/* ---------- Nav ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(251,246,238,.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--card-line);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:62px; }
.nav-name{ font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:600; letter-spacing:.3px; color:var(--ink); text-decoration:none; }
.nav-links{ display:flex; gap:26px; }
.nav-links a{
  color:var(--ink-soft); text-decoration:none; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600; transition:color .2s;
}
.nav-links a:hover, .nav-links a.active{ color:var(--terracotta); }
@media(max-width:680px){ .nav-links{ gap:16px; } .nav-links a{ font-size:.72rem; letter-spacing:.08em; } }
@media(max-width:460px){ .nav-links a.hide-xs{ display:none; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; background:var(--mustard-soft); color:var(--ink);
  padding:14px 30px; border-radius:40px; text-decoration:none;
  font-weight:700; font-size:.95rem; border:1px solid #e8c878;
  transition:transform .15s ease, box-shadow .2s ease, background .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(200,100,63,.18); background:#efce7d; }
.btn-outline{ background:transparent; border:1.5px solid var(--terracotta); color:var(--terracotta); }
.btn-outline:hover{ background:var(--terracotta); color:#fff; }

/* ---------- Blog header ---------- */
.blog-head{ padding:60px 0 10px; text-align:center; position:relative; }
.eyebrow{
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terracotta); font-weight:700; margin-bottom:14px;
}
.blog-head h1{ font-size:clamp(2rem,5vw,3rem); margin:0 auto; max-width:16ch; }
.blog-head .sub{ color:var(--ink-soft); font-size:1.1rem; margin-top:16px; }
.post-meta{ color:var(--ink-soft); font-size:.9rem; margin-top:18px; letter-spacing:.02em; }
.dot-rule{ width:60px; height:3px; border-radius:3px; margin:26px auto 0;
  background:linear-gradient(90deg,var(--terracotta),var(--mustard)); }

/* ---------- Article prose ---------- */
.prose{ max-width:720px; margin:0 auto; padding:20px 24px 10px; }
.prose h2{ font-size:1.6rem; margin:44px 0 14px; }
.prose h3{ font-size:1.15rem; margin:30px 0 10px; font-family:'Mulish',sans-serif; font-weight:700; letter-spacing:.02em; }
.prose p{ font-size:1.12rem; color:#414c56; margin:0 0 18px; }
.prose ul{ margin:0 0 20px; padding:0; list-style:none; }
.prose ul li{ position:relative; padding-left:26px; margin-bottom:9px; font-size:1.08rem; color:#414c56; }
.prose ul li::before{ content:""; position:absolute; left:2px; top:11px; width:9px; height:9px; border-radius:50%; background:var(--sage); opacity:.6; }
.prose a{ color:var(--terracotta); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:#a44e2e; }
.lead-para{ font-size:1.22rem !important; color:var(--ink) !important; }

/* pull quote */
.pullquote{
  border-left:3px solid var(--mustard); background:var(--cream-deep);
  border-radius:0 12px 12px 0; padding:22px 26px; margin:34px 0;
  font-family:'Playfair Display',serif; font-size:1.35rem; font-style:italic;
  color:var(--ink); line-height:1.4;
}

/* further reading box */
.reading{ background:var(--card); border:1px solid var(--card-line); border-radius:14px; padding:28px 30px; margin:34px 0; }
.reading h3{ margin-top:0; }
.reading h4{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta); margin:22px 0 12px; }
.reading ul{ list-style:none; margin:0; padding:0; }
.reading li{ padding-left:0; margin-bottom:16px; }
.reading li::before{ display:none; }
.reading .src{ font-weight:700; color:var(--ink); }
.reading .desc{ display:block; font-size:.98rem; color:var(--ink-soft); margin-top:3px; }
.reading a.visit{ font-size:.85rem; font-weight:600; text-decoration:none; color:var(--terracotta); }
.reading a.visit:hover{ text-decoration:underline; }

/* back link + post CTA */
.back-link{ display:inline-block; margin:0 0 6px; font-size:.85rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; }
.back-link:hover{ color:var(--terracotta); }
.post-cta{ background:var(--cream-deep); text-align:center; padding:56px 24px; margin-top:40px; }
.post-cta h2{ font-size:1.8rem; margin:0 0 12px; }
.post-cta p{ color:var(--ink-soft); max-width:520px; margin:0 auto 24px; }

/* ---------- Blog listing cards ---------- */
.post-list{ max-width:820px; margin:10px auto 0; padding:0 24px; }
.post-card{
  display:block; background:var(--card); border:1px solid var(--card-line);
  border-radius:16px; padding:32px 34px; margin-bottom:24px; text-decoration:none;
  transition:transform .2s ease, box-shadow .25s ease;
}
.post-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(52,66,79,.08); }
.post-card .cat{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--terracotta); font-weight:700; }
.post-card h2{ font-size:1.7rem; margin:10px 0 12px; color:var(--ink); }
.post-card p{ color:var(--ink-soft); margin:0 0 16px; font-size:1.05rem; }
.post-card .more{ color:var(--terracotta); font-weight:700; font-size:.95rem; }
.post-card .pdate{ color:var(--ink-soft); font-size:.85rem; margin-top:10px; }

/* ---------- Footer ---------- */
footer{ background:var(--ink); color:#d8dee4; padding:50px 0 34px; text-align:center; margin-top:0; }
footer .fname{ font-family:'Playfair Display',serif; font-size:1.5rem; color:#fff; }
footer .ftitle{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:#9fb0bd; margin-top:6px; }
footer .frule{ width:60px; height:1px; background:#4a5a68; margin:18px auto; }
footer .fmeta{ font-size:.88rem; color:#9fb0bd; line-height:1.9; }
footer a{ color:#e9c477; text-decoration:none; }
footer a:hover{ text-decoration:underline; }
footer .hcpc{ font-size:.78rem; color:#7d8d9a; margin-top:18px; }