.blog-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 56px 0; min-width: 0; }
.blog-shell h1 { font-size: 48px; line-height: 1.12; max-width: 900px; overflow-wrap: anywhere; }
.blog-shell > .lede { font-size: 16px; line-height: 1.6; }
.blog-categories { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 32px 0; }
.blog-categories a { padding: 10px 0; text-decoration: none; color: var(--text-secondary); }
.blog-categories a[aria-current="page"] { color: #ededed; text-decoration: underline; text-underline-offset: 8px; }
.blog-categories a:hover { color: #ededed; }
.blog-categories .blog-rss { margin-left: auto; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; align-items: start; }
.blog-card { min-width: 0; overflow-wrap: anywhere; letter-spacing: 0; }
.blog-card > a { display: block; text-decoration: none; }
.blog-card-media { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111111; border: 1px solid #292929; border-radius: 4px; }
.blog-card .blog-card-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; background: transparent; }
.blog-card h2 { font-size: 22px; font-weight: 500; line-height: 1.3; margin: 22px 0 10px; }
.blog-card > a:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.blog-card > a:focus-visible { outline: 2px solid #ededed; outline-offset: 6px; }
.blog-card p { line-height: 1.6; }
.blog-card > p:not(.blog-meta) { font-size: 14px; color: var(--text-secondary); margin: 0 0 18px; }
.blog-card-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.2em; }
.blog-card > .blog-meta { font-size: 13px; margin-top: 22px; }
.blog-meta { font-size: 14px; line-height: 1.7; opacity: .8; }
.blog-heading { max-width: 850px; margin: 0 auto 32px; }
.blog-heading .blog-excerpt { font-size: 17px; line-height: 1.6; }
.blog-cover { display: block; width: 100%; height: auto; max-height: none; background: #111111; border-radius: 4px; margin: 32px auto 48px; }
.blog-body { max-width: 760px; margin: auto; font-size: 18px; line-height: 1.8; overflow-wrap: anywhere; }
.blog-body h2 { font-size: 30px; line-height: 1.3; margin: 44px 0 20px; }
.blog-body h3 { font-size: 23px; line-height: 1.4; margin-top: 28px; }
.blog-body img { max-width: 100%; height: auto; }
.blog-body a { text-decoration: underline; text-underline-offset: 3px; }
.blog-body pre { overflow: auto; padding: 16px; background: #151c19; }
.blog-body table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; }
.blog-body td, .blog-body th { border: 1px solid #66726d; padding: 10px; }
.blog-body blockquote { margin: 24px 0; border-left: 3px solid #75bc8c; padding-left: 20px; }
.blog-body section { padding: 12px 0; }
.blog-related { border-top: 1px solid #52605b; }
@media (max-width: 800px) { .blog-grid { grid-template-columns: 1fr; } .blog-shell { padding: 32px 0; } .blog-shell h1 { font-size: 32px; } .blog-body { font-size: 17px; } .blog-body h2 { font-size: 26px; } .blog-cover { margin: 24px auto; } }
.blog-author-portrait { display: inline-block; width: 40px; height: 50px; object-fit: cover; object-position: center 25%; vertical-align: middle; margin: 0 0.5rem; border-radius: 4px; }