/* Article page styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --navy:#0862a1;--navy-mid:#065490;
  --orange:#f97316;--orange-dark:#ea580c;
  --cream:#f9f7f4;--white:#fff;
  --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;
  --gray-400:#9ca3af;--gray-600:#4b5563;--gray-800:#1f2937;
  --font-display:'DM Serif Display',Georgia,serif;
  --font-body:'Source Sans 3',system-ui,sans-serif;
  --font-hand:'Caveat',cursive;
  --radius-lg:20px;
}
body{font-family:var(--font-body);color:var(--gray-800);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
.container{width:min(800px,92%);margin:0 auto;}

.article-hero{
  position:relative;background:#0862a1;padding:110px 0 44px;
  overflow:hidden;
}
.article-hero::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.article-hero .container{position:relative;z-index:1;}
.article-back{
  display:inline-block;font-size:.85rem;color:rgba(255,255,255,.6);
  margin-bottom:16px;transition:color .2s;
}
.article-back:hover{color:var(--orange);}
.article-cat{
  display:inline-block;padding:4px 16px;border-radius:50px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:rgba(249,115,22,.2);border:1px solid rgba(249,115,22,.35);
  color:var(--orange);margin-bottom:14px;
}
.article-hero h1{
  font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--white);line-height:1.2;margin-bottom:10px;max-width:700px;
}
.article-hero time{font-size:.88rem;color:rgba(255,255,255,.5);}

.article-body{padding:50px 0 60px;}
.article-body .container{
  font-size:1.05rem;line-height:1.9;color:var(--gray-600);
}
.article-body h2{font-family:var(--font-display);font-size:1.4rem;color:var(--navy);margin:32px 0 12px;}
.article-body h3{font-family:var(--font-display);font-size:1.15rem;color:var(--navy);margin:24px 0 8px;}
.article-body p{margin-bottom:18px;}
.article-body strong{color:var(--navy);}
.article-body a{color:var(--orange);font-weight:600;}
.article-body ul,.article-body ol{padding-left:24px;margin-bottom:18px;}
.article-body li{margin-bottom:8px;}
.article-body img{border-radius:var(--radius-lg);margin:24px 0;box-shadow:0 8px 30px rgba(0,0,0,.08);}
.article-body blockquote{
  border-left:4px solid var(--orange);padding:16px 24px;margin:24px 0;
  background:var(--white);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  font-style:italic;color:var(--navy);
}

.article-cta{
  padding:50px 0 80px;text-align:center;
  background:var(--white);border-top:1px solid var(--gray-200);
}
.article-cta p{font-family:var(--font-display);font-size:1.2rem;color:var(--navy);margin-bottom:20px;}
.btn-cta{
  display:inline-flex;align-items:center;gap:8px;padding:14px 32px;
  border-radius:50px;background:var(--orange);color:#fff;
  font-weight:700;font-size:.95rem;transition:all .3s;margin-right:12px;
}
.btn-cta:hover{background:var(--orange-dark);transform:translateY(-2px);}
.btn-back{font-size:.9rem;color:var(--gray-400);font-weight:600;}
.btn-back:hover{color:var(--orange);}

@media(max-width:640px){.article-hero{padding:100px 0 36px;}}