@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/SourceSans3VF-Upright.woff2") format("woff2"); font-style: normal; font-weight: 200 900; font-display: swap; }

.blog-page { width: min(760px, calc(100% - 56px)); margin: 0 auto; padding: 88px 0 110px; }
.blog-article-header { padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.blog-article-header h1, .blog-index h1 { max-width: 720px; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.08; }
.blog-article-meta { margin-top: 16px; color: var(--muted); font-size: 13px; }
.blog-article-body { padding-top: 34px; color: #33413e; font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif; font-size: 18px; line-height: 1.65; }
.blog-article-body h2, .blog-article-body h3 { margin: 42px 0 13px; }
.blog-article-body h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); line-height: 1.2; }
.blog-article-body p, .blog-article-body ul, .blog-article-body ol, .blog-article-body blockquote { margin: 0 0 20px; }
.blog-article-body ul, .blog-article-body ol { padding-left: 25px; }
.blog-article-body img { display: block; width: auto; max-width: 100%; max-height: 500px; height: auto; margin: 32px auto; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; }
.blog-article-body a, .blog-index-item a { color: var(--accent); font-weight: 750; }
.blog-article-body code { padding: 2px 5px; border-radius: 4px; background: #edf2ef; font-size: .9em; }
.blog-article-body pre { overflow-x: auto; padding: 17px; border-radius: 9px; background: #1c2925; color: #e8f1ed; font-size: 14px; line-height: 1.5; }
.blog-article-body pre code { padding: 0; background: none; }
.blog-article-body blockquote { margin-left: 0; padding-left: 18px; border-left: 3px solid var(--accent); color: var(--muted); }
.blog-index-lede { max-width: 560px; margin-top: 20px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.blog-index-list { display: grid; gap: 24px; margin-top: 48px; }
.blog-index-item { padding: 23px 0; border-top: 1px solid var(--line); }
.blog-index-item h2 { margin-top: 7px; font-size: 22px; }
.blog-index-item h2 a { color: var(--ink); text-decoration: none; }
.blog-index-item h2 a:hover { color: var(--accent); }
.blog-index-item > p:last-child { margin-top: 9px; color: var(--muted); line-height: 1.5; }

@media (max-width: 680px) {
  .blog-page { width: min(100% - 32px, 760px); padding: 58px 0 74px; }
  .blog-article-body { font-size: 16px; }
}