/* Blog article template: an open reading column on cream, no card box. */
.blog-body { background: var(--color-bg); }
.article-container {
  max-width: 800px; margin: 0 auto;
  padding: calc(var(--nav-height) + var(--nav-offset) + var(--space-4)) var(--gutter) var(--space-6);
  /* some posts carry an inline padding-top from the old template; the fixed nav needs this one */
  padding-top: calc(var(--nav-height) + var(--nav-offset) + var(--space-4)) !important;
  background: transparent; box-shadow: none; border-radius: 0;
}
.article-card { background: transparent; box-shadow: none; border: 0; padding: 0; }
.article-header { margin-bottom: var(--space-4); text-align: center; }
.article-title {
  font-family: var(--font-display); font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.08; letter-spacing: -0.02em;
  font-weight: 500; color: var(--color-text); margin: 0.5rem 0 1rem; text-wrap: balance;
}
.article-meta { color: var(--color-text-soft); font-size: var(--type-small-size); margin-bottom: var(--space-3); }
.article-content { font-size: 18px; line-height: 1.75; color: var(--color-text); font-family: var(--font-body); }
.article-content h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; margin: var(--space-5) 0 1rem; color: var(--color-text); }
.article-content h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin: var(--space-4) 0 0.75rem; }
.article-content h4 { margin: var(--space-3) 0 0.5rem; }
.article-content p { margin-bottom: 1.4rem; max-width: none; }
.article-content ul, .article-content ol { margin: 0 0 1.4rem; padding-left: 1.4rem; }
.article-content li { margin-bottom: 0.5rem; }
.article-content li > p { margin-bottom: 0.5rem; }
.article-content img { border-radius: var(--radius-card); margin: var(--space-3) auto; display: block; }
.article-content figure { margin: var(--space-3) 0; }
.article-content figcaption { font-size: var(--type-small-size); color: var(--color-text-soft); text-align: center; margin-top: 0.5rem; }
.article-content blockquote { margin: var(--space-3) 0; padding: 1rem 1.5rem; border-left: 3px solid var(--color-primary); background: var(--color-primary-tint); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; }
.article-content table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: 15px; }
.article-content th, .article-content td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.article-content th { font-weight: 600; color: var(--color-text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.article-content a { color: var(--color-primary); }
.article-content strong { font-weight: 600; }
.article-content hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-4) 0; }
.article-content pre { padding: 1rem 1.25rem; background: var(--color-bg-band); border-radius: var(--radius-md); overflow-x: auto; font-size: 14px; }

.back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: 15px; margin-bottom: var(--space-3); transition: color var(--transition-fast); }
.back-link:hover { color: var(--color-trust-hover); }

/* In-article table of contents (newer posts) */
.toc { margin: 0 0 var(--space-4); padding: 1.25rem 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); font-size: 15px; }
.toc strong { display: block; margin-bottom: 0.5rem; color: var(--color-text); font-weight: 600; }
.toc ol, .toc ul { margin: 0; padding-left: 1.25rem; }
.toc li { margin-bottom: 0.35rem; }
.toc a { color: var(--color-text-muted); text-decoration: none; }
.toc a:hover { color: var(--color-primary); text-decoration: underline; }

@media (max-width: 768px) {
  .article-container { padding-top: calc(var(--nav-height) + var(--nav-offset) + var(--space-3)); padding-bottom: var(--space-5); }
  .article-content { font-size: 17px; }
}

img, svg, video { max-width: 100%; height: auto; }