/* Shared styles for the 11 posts migrated from mcp.hosting/blog
 * (now living at /blog/<slug>/). Extracted verbatim from the
 * per-post inline <style> blocks the original export script
 * emitted, so this file lets the migrated posts share one
 * stylesheet instead of duplicating ~25 lines into each HTML.
 *
 * Visually-equivalent unification with the rest of /blog (which
 * uses .article from /css/style.css and hand-styled inline code
 * tags) is a separate refactor -- this file lets that happen in
 * one place when we're ready, instead of editing 11 inline blocks.
 */
.article-hero { max-width: 760px; margin: 32px auto 0; padding: 0 16px; }
.article-hero h1 { font-size: 2rem; color: var(--text); margin: 0 0 14px; line-height: 1.25; }
.article-meta { color: var(--subtext); font-size: 0.9rem; margin: 0 0 32px; }
.article-meta a { color: var(--blue); text-decoration: none; }
.article-body { max-width: 760px; margin: 0 auto 80px; padding: 0 16px; color: var(--text); line-height: 1.65; font-size: 1rem; }
.article-body p { margin: 0 0 1.1em; }
.article-body h2 { font-size: 1.4rem; margin: 2em 0 0.6em; color: var(--text); }
.article-body h3 { font-size: 1.15rem; margin: 1.6em 0 0.5em; color: var(--text); }
.article-body a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body a:hover { opacity: 0.85; }
.article-body code { font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace; font-size: 0.92em; background: var(--surface0); padding: 0.1em 0.4em; border-radius: 4px; color: var(--text); }
.article-body pre { background: var(--surface0); border: 1px solid var(--surface1); border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 1.2em 0; line-height: 1.5; }
.article-body pre code { background: transparent; padding: 0; border-radius: 0; }
.article-body ul, .article-body ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.article-body li { margin: 0.35em 0; }
.article-body blockquote { border-left: 3px solid var(--blue); padding: 0 0 0 1em; margin: 1.2em 0; color: var(--subtext); }
.article-body img { max-width: 100%; height: auto; border-radius: 6px; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.article-body th, .article-body td { padding: 8px 12px; border-bottom: 1px solid var(--surface1); text-align: left; }
.article-body th { color: var(--text); }
.article-footer { max-width: 760px; margin: 0 auto 40px; padding: 24px 16px; border-top: 1px solid var(--surface1); color: var(--subtext); font-size: 0.92rem; }
.article-footer a { color: var(--blue); }