/* === Blog Post Styles === */

.article-header { background: var(--charcoal); color: white; padding: 60px 0 50px; }
.article-header .breadcrumb { font-size: 13px; margin-bottom: 16px; opacity: 0.5; }
.article-header .breadcrumb a { color: white; text-decoration: none; }
.article-header .breadcrumb a:hover { text-decoration: underline; }
.article-header h1 { font-family: 'Instrument Serif', serif; font-size: 40px; line-height: 1.2; margin-bottom: 16px; max-width: 780px; }
.article-meta { font-size: 14px; opacity: 0.6; }
.article-body { max-width: 740px; margin: 0 auto; padding: 60px 24px; }
.article-body p { font-size: 17px; line-height: 1.85; color: var(--slate); margin-bottom: 20px; }
.article-body h2 { font-family: 'Instrument Serif', serif; font-size: 28px; color: var(--ink); margin: 48px 0 16px; }
.article-body h3 { font-family: 'Instrument Serif', serif; font-size: 22px; color: var(--ink); margin: 36px 0 12px; }
.article-body ul, .article-body ol { margin: 16px 0; padding-left: 24px; color: var(--slate); font-size: 17px; line-height: 1.85; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote { border-left: 3px solid var(--green); margin: 32px 0; padding: 16px 24px; background: var(--green-glow); border-radius: 0 12px 12px 0; font-style: italic; color: var(--slate); }
.article-cta { background: var(--charcoal); border-radius: 20px; padding: 48px; text-align: center; color: white; margin: 48px 0; }
.article-cta h2 { color: white; margin: 0 0 12px; font-size: 26px; }
.article-cta p { color: rgba(255,255,255,0.7); margin-bottom: 24px; }
.article-cta .cta-btn { display: inline-block; background: var(--green); color: white; padding: 14px 32px; border-radius: 10px; text-decoration: none; font-weight: 600; transition: all 0.3s; }
.article-cta .cta-btn:hover { background: var(--green-deep); transform: translateY(-2px); }