.blog-page { max-width: 900px; color: var(--dark-text-color); }
.blog-page a { color: var(--main-theme-color); }
.blog-hero h1 { margin-bottom: .3em; }
.blog-hero p { line-height: 1.5; }
.blog-byline { font-size: .85em; color: var(--gray-text-color); }
.blog-month { margin: 2em 0; }
.blog-list { list-style: none; padding: 0; }
.blog-list li { margin: 0 0 1.2em; }
.blog-list a { font-weight: 700; }
.blog-list-group { font-size: .8em; color: var(--gray-text-color); margin-left: 8px; }
.blog-list p { margin: .25em 0 0; line-height: 1.5; }
.blog-toc { background: #fff; border: 1px solid var(--silent-color); border-radius: 8px; padding: 12px 16px; margin: 1.5em 0; }
.blog-toc-title { font-weight: 700; margin: 0 0 .4em; }
.blog-toc ul { margin: 0; padding-left: 1.2em; line-height: 1.6; }
.blog-prose p { margin: .6em 0; line-height: 1.6; }
.blog-section { margin: 2.5em 0; }
.blog-section h2 { margin-bottom: .3em; }
.blog-table { width: 100%; border-collapse: collapse; margin-top: .8em; background: #fff; border-radius: 8px; overflow: hidden; }
.blog-table th, .blog-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--silent-color); vertical-align: middle; }
.blog-table th { font-weight: 700; }
.blog-model { display: flex; align-items: center; gap: 10px; }
/* a long username may break, or the table pushes the whole page sideways on a phone */
.blog-model a { min-width: 0; overflow-wrap: anywhere; }
/* fixed box: a dead hotlinked avatar must not shift the row or show its alt text */
.blog-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--silent-color); }
.blog-avatar img { display: block; width: 40px; height: 40px; object-fit: cover; color: transparent; font-size: 0; }
.blog-method p { font-size: .9em; line-height: 1.6; color: var(--gray-text-color); }
.blog-more { margin-top: 2em; }
@media screen and (max-width: 480px) {
    .blog-table { font-size: .9em; }
    .blog-table th, .blog-table td { padding: 6px 4px; }
    .blog-model { gap: 6px; }
    .blog-avatar { flex-basis: 32px; width: 32px; height: 32px; }
    .blog-avatar img { width: 32px; height: 32px; }
}