.article-hero { background: var(--navy); padding: 100px 0 60px; border-bottom: 1px solid rgba(245,166,35,0.15); }
.article-hero .container { max-width: 760px; }
.article-category { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.article-hero h1 { font-size: clamp(22px, 4vw, 34px); font-weight: 800; color: var(--white); line-height: 1.25; margin-bottom: 20px; max-width: 680px; }
.article-meta { display: flex; align-items: center; gap: 12px; }
.author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--gold); flex-shrink: 0; }
.article-meta strong { display: block; font-size: 13px; font-weight: 600; color: var(--white); }
.article-meta span { font-size: 12px; color: rgba(255,255,255,0.45); }
.article-body { max-width: 760px; padding-top: 56px; padding-bottom: 60px; }
.article-body p { font-size: 16px; line-height: 1.85; color: #333; margin-bottom: 20px; }
.article-body h2 { font-size: 21px; font-weight: 800; color: var(--navy); margin: 36px 0 14px; padding-top: 8px; border-top: 2px solid var(--gold); display: inline-block; }
.article-body h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin: 24px 0 10px; }
.article-body ul, .article-body ol { padding-left: 22px; margin-bottom: 20px; }
.article-body li { font-size: 15px; line-height: 1.8; color: #444; margin-bottom: 6px; }
.article-body blockquote { border-left: 4px solid var(--gold); background: var(--light-bg); padding: 16px 20px; margin: 28px 0; border-radius: 0 4px 4px 0; }
.article-body blockquote p { font-style: italic; font-size: 17px; color: var(--navy); margin: 0; }
.article-cta { max-width: 760px; background: var(--navy); border-radius: 8px; padding: 50px 44px; margin-bottom: 80px; text-align: center; }
.article-cta h3 { font-size: 22px; font-weight: 800; color: var(--white); margin-bottom: 10px; }
.article-cta p { font-size: 14px; color: rgba(255,255,255,0.55); margin-bottom: 20px; }
@media (max-width: 768px) { .article-hero { padding: 80px 0 40px; } .article-body { padding-top: 36px; padding-bottom: 40px; } .article-cta { padding: 36px 24px; } }