/* Blog styles. Loaded after /styles.css, uses its variables. */
.blog-list { display: grid; gap: 1.25rem; max-width: 820px; margin: 0 auto; }
.blog-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.75rem; transition: var(--transition); }
.blog-card:hover { border-color: var(--primary); box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.blog-card h2 { font-size: 1.3rem; font-weight: 700; margin: 0.4rem 0 0.6rem; color: var(--text-primary); line-height: 1.3; }
.blog-card p { color: var(--text-muted); font-size: 0.98rem; line-height: 1.7; }
.blog-meta { font-size: 0.8rem; color: var(--text-dim); letter-spacing: 0.04em; text-transform: uppercase; }
.blog-empty { text-align: center; color: var(--text-muted); max-width: 560px; margin: 0 auto; }
.post-body { max-width: 720px; margin: 0 auto; }
.post-body h2 { font-size: 1.5rem; font-weight: 700; margin: 2.5rem 0 0.9rem; color: var(--text-primary); line-height: 1.3; }
.post-body p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.85; margin: 0 0 1.2rem; }
.post-body ul, .post-body ol { margin: 0 0 1.4rem 1.4rem; color: var(--text-muted); font-size: 1.05rem; line-height: 1.85; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.post-body a { color: var(--primary); border-bottom: 1px solid rgba(0,212,255,0.4); }
.post-body a:hover { color: var(--accent); }
.post-body strong { color: var(--text-primary); }
.post-byline { max-width: 720px; margin: 0 auto 2.5rem; color: var(--text-dim); font-size: 0.9rem; }
.post-cta { max-width: 720px; margin: 3rem auto 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.75rem; }
.post-cta p { color: var(--text-muted); margin-bottom: 1rem; line-height: 1.7; }
.post-back { max-width: 720px; margin: 2rem auto 0; }
.post-back a { color: var(--primary); font-weight: 600; }