/* Blog posts: one shared stylesheet (was repeated as a <style> block in every post). Colours come from lib/brand.css. */
.blog-post { max-width: 800px; margin: 0 auto; padding: 120px 24px 60px; }
.blog-post__header { margin-bottom: 48px; }
.blog-post__category { color: var(--accent); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.blog-post__title { font-size: 2.5rem; color: var(--text); margin: 16px 0; line-height: 1.2; }
.blog-post__meta { color: var(--text-muted); font-size: 0.9rem; display: flex; gap: 24px; }
.blog-post__content { color: var(--text-muted); line-height: 1.8; font-size: 1.05rem; }
.blog-post__content h2 { color: var(--text); font-size: 1.5rem; margin: 48px 0 24px; }
.blog-post__content h3 { color: var(--text); font-size: 1.2rem; margin: 32px 0 16px; }
.blog-post__content p { margin-bottom: 24px; }
.blog-post__content ul, .blog-post__content ol { margin-bottom: 24px; padding-left: 24px; }
.blog-post__content li { margin-bottom: 12px; }
.blog-post__content blockquote { border-left: 3px solid var(--accent); padding-left: 24px; margin: 32px 0; color: var(--text-muted); font-style: italic; }
.references { background: rgba(16, 24, 40,0.03); border: 1px solid rgba(16, 24, 40,0.08); border-radius: 16px; padding: 32px; margin-top: 64px; }
.references h2 { color: var(--text); font-size: 1.3rem; margin-bottom: 24px; }
.references ol { color: var(--text-muted); font-size: 0.9rem; line-height: 1.8; }
.references li { margin-bottom: 16px; }
.references a { color: var(--accent); }
.strategy-card { background: rgba(16, 24, 40,0.03); border: 1px solid rgba(16, 24, 40,0.08); border-radius: 12px; padding: 24px; margin: 24px 0; }
.strategy-card h4 { color: var(--text); margin: 0 0 12px; }
.stat-box { background: rgba(59, 91, 253,0.05); border: 1px solid rgba(59, 91, 253,0.15); border-radius: 12px; padding: 24px; margin: 32px 0; text-align: center; }
.stat-box__number { font-size: 2.5rem; font-weight: 700; color: var(--accent); }
.stat-box__label { color: var(--text-muted); font-size: 0.9rem; margin-top: 8px; }
.strategy-card h3 { margin-top: 0; }
.ux-tip { background: rgba(59, 91, 253,0.05); border-left: 3px solid var(--accent); padding: 20px 24px; margin: 24px 0; }
.ux-tip h4 { color: var(--accent); margin: 0 0 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 32px 0; }
.trend-card { background: rgba(16, 24, 40,0.03); border: 1px solid rgba(16, 24, 40,0.08); border-radius: 12px; padding: 24px; margin: 24px 0; }
.trend-card h4 { color: var(--text); margin: 0 0 12px; }
.tip-box { background: rgba(59, 91, 253,0.05); border-left: 3px solid var(--accent); padding: 20px 24px; margin: 24px 0; }
.tip-box h4 { color: var(--accent); margin: 0 0 12px; }
.waste-type { background: rgba(16, 24, 40,0.03); border-left: 3px solid var(--accent); padding: 20px 24px; margin: 24px 0; }
.waste-type h4 { color: var(--text); margin: 0 0 12px; }
.model-card { background: rgba(16, 24, 40,0.03); border: 1px solid rgba(16, 24, 40,0.08); border-radius: 12px; padding: 24px; margin: 24px 0; }
.model-card h4 { color: var(--text); margin: 0 0 12px; font-size: 1.1rem; }
.matrix-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.matrix-table th, .matrix-table td { padding: 16px; text-align: left; border-bottom: 1px solid rgba(16, 24, 40,0.1); }
.matrix-table th { color: var(--text); font-weight: 600; }
.matrix-table td { color: var(--text-muted); }
.psych-tip { background: rgba(59, 91, 253,0.05); border-left: 3px solid var(--accent); padding: 20px 24px; margin: 24px 0; }
.psych-tip h4 { color: var(--accent); margin: 0 0 12px; }
.warning-box { background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.2); border-radius: 12px; padding: 24px; margin: 24px 0; }
.warning-box h4 { color: #ef4444; margin: 0 0 12px; }
.metric-card { background: rgba(16, 24, 40,0.03); border: 1px solid rgba(16, 24, 40,0.08); border-radius: 12px; padding: 24px; margin: 24px 0; }
.metric-card h4 { color: var(--accent); margin: 0 0 12px; }
.formula-box { background: rgba(59, 91, 253,0.05); border-left: 3px solid var(--accent); padding: 20px 24px; margin: 24px 0; }
.formula-box h4 { color: var(--text); margin: 0 0 12px; }
.margin-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.margin-table th, .margin-table td { padding: 16px; text-align: left; border-bottom: 1px solid rgba(16, 24, 40,0.1); }
.margin-table th { color: var(--text); font-weight: 600; }
.margin-table td { color: var(--text-muted); }
.practice-card { background: rgba(16, 24, 40,0.03); border: 1px solid rgba(16, 24, 40,0.08); border-radius: 12px; padding: 24px; margin: 24px 0; }
.practice-card h4 { color: var(--text); margin: 0 0 12px; }
.blog-post__content table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.blog-post__content th { padding: 12px; text-align: left; color: var(--text); }
.blog-post__content td { padding: 12px; color: var(--text-muted); }
.blog-post__content tr { border-bottom: 1px solid rgba(16, 24, 40,0.08); }
@media (max-width: 768px) {
    .blog-post__title { font-size: 1.75rem; }
    .blog-post { padding-top: 100px; }
}