/* Unified blog styles: applies to blog index and article pages */

/* Layout for blog content */
.container {
  padding: 50px 20px;
  text-align: left;
  max-width: 880px;
  margin: 0 auto;
  font-family: 'Fira Code', monospace;
}

/* Headings */
h2 { color: var(--brand-blue); margin: 24px 0 12px; }
.article h1 { color: #fff; }
.article h2, .article h3, .article h4 { color: var(--brand-blue); margin-top: 28px; }

/* Blog index list */
ul.blog-list, .container > ul { list-style: none; padding: 0; }
ul.blog-list li, .container > ul li { margin-bottom: 16px; }
.publish-date { font-style: italic; color: #ccc; }

/* Article body */
.article { color: #ccc; line-height: 1.7; font-size: 1.05em; }
.article p { margin: 0 0 16px; color: #ddd; }
.article ul { margin: 0 0 16px 20px; }
.article li { margin-bottom: 8px; }
.article img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 12px auto; }

/* Code blocks */
pre, code { font-family: 'Fira Code', monospace; background: #0f0f0f; color: #eaeaea; }
pre { padding: 12px; border-radius: 6px; overflow: auto; }
code { padding: 2px 6px; border-radius: 4px; }

/* Blockquotes */
blockquote { border-left: 3px solid var(--brand-blue); padding: 8px 12px; margin: 16px 0; color: #ccc; background: rgba(0,0,0,0.2); }

/* Minor tweaks */
.section { margin-bottom: 40px; }