/* Beverly Hathorn Consulting - ai.beverlyhathornconsulting.com blog */
/* Matches the "Start With One Task" landing page: Playfair Display + Montserrat */

:root{
  --navy:#1A2535;
  --navy-soft:#26334a;
  --gold:#BA8B5B;
  --blue:#6899CA;
  --cream:#F7F5F0;
  --ink:#2B2B2B;
  --grey:#6B7280;
  --line:#E4DED2;
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  font-family:var(--sans); color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;}
a{color:var(--blue);}
.wrap{max-width:960px; margin:0 auto; padding:0 28px;}
.narrow{max-width:760px; margin:0 auto; padding:0 28px;}
.skip-link{position:absolute; top:-48px; left:0; background:var(--gold); color:var(--navy); padding:10px 16px; z-index:10; font-size:14px; font-weight:700;}
.skip-link:focus{top:0;}

/* ---------- TOP BAR ---------- */
.topbar{background:var(--navy); border-bottom:1px solid rgba(255,255,255,.08);}
.topbar .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 28px; padding-top:18px; padding-bottom:18px;}
.brand{font-family:var(--serif); font-weight:600; font-size:18px; color:#fff; text-decoration:none;}
.topnav{display:flex; flex-wrap:wrap; gap:6px 26px; list-style:none; margin:0; padding:0;}
.topnav a{font-size:14px; font-weight:500; color:#C6CCD6; text-decoration:none; padding:4px 0; display:inline-block;}
.topnav a:hover, .topnav a.active{color:#fff;}
.topnav a.active{border-bottom:2px solid var(--gold);}

/* ---------- HERO ---------- */
.post-hero{
  background:radial-gradient(1100px 620px at 82% -10%, var(--navy-soft), var(--navy) 60%);
  color:#fff; padding:56px 0 64px; position:relative; overflow:hidden;
}
.post-hero::after{
  content:""; position:absolute; right:-140px; bottom:-200px; width:380px; height:380px;
  border-radius:50%; background:rgba(104,153,202,0.16);
}
.post-hero .narrow{position:relative; z-index:1;}
.crumbs{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; font-size:13px; color:#9AA6B6;}
.crumbs a{color:#C6CCD6; text-decoration:none;}
.crumbs a:hover{color:#fff;}
.crumbs li+li::before{content:"\203A"; margin-right:8px; color:#6B7A90;}
.post-hero h1{
  font-family:var(--serif); font-weight:600; font-size:40px; line-height:1.18; margin:0 0 16px;
  letter-spacing:-.01em; text-wrap:balance;
}
.post-hero p{font-size:18px; line-height:1.6; color:#D7DCE4; margin:0; max-width:56ch;}

/* ---------- ARTICLE ---------- */
.article{background:#fff; border-bottom:1px solid var(--line); padding:52px 0 72px;}
.article-meta{
  font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:28px;
}
.article h2{font-family:var(--serif); font-weight:600; font-size:27px; line-height:1.25; color:var(--navy); margin:44px 0 14px;}
.article h3{font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.3; color:var(--navy); margin:30px 0 10px;}
.article p{font-size:16.5px; line-height:1.75; color:var(--ink); margin:0 0 18px;}
.article ul, .article ol{margin:0 0 22px; padding-left:24px; font-size:16px; line-height:1.75; color:var(--ink);}
.article li{margin-bottom:7px;}
.article strong{color:var(--navy);}
.article blockquote{
  margin:24px 0; padding:18px 22px; background:var(--cream); border-left:3px solid var(--gold);
  border-radius:0 6px 6px 0; font-family:var(--serif); font-style:italic; font-size:17px;
  line-height:1.6; color:var(--navy);
}
.article blockquote p{font-size:inherit; line-height:inherit; color:inherit; margin:0;}

/* ---------- NEXT STEP BOX ---------- */
.next-step{
  background:var(--navy); color:#fff; border-radius:10px; padding:36px 34px; margin:48px 0 0;
}
.next-step .eyebrow{
  display:block; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:#D9B98C; margin-bottom:12px;
}
.next-step h2, .next-step h3{font-family:var(--serif); font-weight:600; font-size:25px; line-height:1.25; color:#fff; margin:0 0 12px;}
.next-step p{font-size:15.5px; line-height:1.65; color:#C6CCD6; margin:0 0 24px; max-width:58ch;}
.btn-row{display:flex; flex-wrap:wrap; gap:12px 14px;}
.btn{
  display:inline-block; font-family:var(--sans); font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:6px; text-decoration:none; letter-spacing:.01em;
  background:var(--gold); color:var(--navy); border:1px solid var(--gold);
  transition:transform .15s ease, background .2s ease;
}
.btn:hover{background:#cf9e6f; transform:translateY(-1px);}
.btn-outline{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4);}
.btn-outline:hover{background:rgba(255,255,255,.08); border-color:#fff;}

/* ---------- RELATED ---------- */
.related{margin-top:52px; padding-top:36px; border-top:1px solid var(--line);}
.related h3{font-family:var(--serif); font-weight:600; font-size:21px; color:var(--navy); margin:0 0 18px;}
.related-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.related-card{
  display:block; padding:20px 22px; background:var(--cream); border:1px solid var(--line);
  border-radius:10px; text-decoration:none; transition:border-color .2s ease;
}
.related-card:hover{border-color:var(--blue);}
.related-card h4{font-family:var(--serif); font-weight:600; font-size:17px; line-height:1.35; color:var(--navy); margin:0 0 6px;}
.related-card p{font-size:14px; line-height:1.5; color:var(--grey); margin:0;}

/* ---------- BLOG LIST ---------- */
.list{padding:60px 0 72px;}
.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.post-card{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px 28px 26px;
  display:flex; flex-direction:column;
}
.post-card .date{font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:10px;}
.post-card h2{font-family:var(--serif); font-weight:600; font-size:21px; line-height:1.3; margin:0 0 10px;}
.post-card h2 a{color:var(--navy); text-decoration:none;}
.post-card h2 a:hover{color:var(--blue);}
.post-card p{font-size:15px; line-height:1.6; color:var(--grey); margin:0 0 18px;}
.post-card .more{margin-top:auto; font-size:14px; font-weight:700; color:var(--blue); text-decoration:none;}
.post-card .more:hover{color:var(--navy);}
.list .next-step{margin-top:56px;}

footer{padding:36px 0; text-align:center; font-size:13px; color:var(--grey);}
footer a{color:var(--grey); text-decoration:none; border-bottom:1px solid var(--line);}
footer a:hover{color:var(--navy);}
footer .sep{margin:0 10px; color:var(--line);}

@media (max-width:760px){
  .post-hero{padding:40px 0 48px;}
  .post-hero h1{font-size:30px;}
  .post-hero p{font-size:16.5px;}
  .article{padding:36px 0 56px;}
  .article h2{font-size:23px;}
  .related-grid, .card-grid{grid-template-columns:1fr;}
  .next-step{padding:30px 24px;}
  .btn-row .btn{width:100%; text-align:center;}
}
@media (prefers-reduced-motion: reduce){
  .btn{transition:none;}
  html{scroll-behavior:auto;}
}