/* Blog article pages — reuses tokens.css variables; loaded after site.css. */

.blog-main { max-width: 780px; margin: 0 auto; padding: 24px 20px 40px; }

.post-crumb { font-size: 12px; margin-bottom: 14px; }
.post-crumb a { color: var(--twb-text-muted); text-decoration: none; }
.post-crumb a:hover { color: var(--twb-accent); }

.post h1 {
  font-size: 26px; line-height: 1.3; margin: 0 0 6px;
  color: var(--twb-text-strong); letter-spacing: -0.01em;
}
.post-meta { font-size: 12px; color: var(--twb-text-dim); margin-bottom: 22px; }
.post h2 {
  font-size: 18px; margin: 30px 0 10px; color: var(--twb-text-strong);
  padding-bottom: 6px; border-bottom: 1px solid var(--twb-border);
}
.post h3 { font-size: 15px; margin: 20px 0 8px; color: var(--twb-text-strong); }
.post p, .post li { font-size: 14.5px; line-height: 1.75; color: var(--twb-text-normal); }
.post p { margin: 0 0 14px; }
.post ul, .post ol { margin: 0 0 14px; padding-left: 22px; }
.post li { margin-bottom: 6px; }
.post a { color: var(--twb-accent); }
.post blockquote {
  margin: 0 0 14px; padding: 8px 14px;
  border-left: 3px solid var(--twb-accent); background: var(--twb-bg-1);
}
.post table { border-collapse: collapse; margin: 0 0 16px; font-size: 13.5px; }
.post th, .post td { border: 1px solid var(--twb-border); padding: 6px 12px; text-align: left; }
.post th { background: var(--twb-bg-1); color: var(--twb-text-strong); }
.post-cta {
  margin-top: 30px; padding: 16px 18px; border: 1px solid var(--twb-border);
  border-radius: var(--twb-radius-s); background: var(--twb-bg-1);
}
.post-cta a { font-weight: 600; }

/* blog index */
.blog-index h1 { font-size: 24px; margin: 8px 0 4px; color: var(--twb-text-strong); }
.blog-index .lede { color: var(--twb-text-muted); font-size: 14px; margin-bottom: 22px; }
.blog-card {
  display: block; text-decoration: none; padding: 14px 16px; margin-bottom: 12px;
  border: 1px solid var(--twb-border); border-radius: var(--twb-radius-s);
  background: var(--twb-bg-1);
}
.blog-card:hover { border-color: var(--twb-accent); }
.blog-card h2 { font-size: 16px; margin: 0 0 6px; color: var(--twb-text-strong); }
.blog-card p { font-size: 13px; margin: 0; color: var(--twb-text-muted); line-height: 1.6; }