html.blog-document { height: auto; min-height: 100%; overflow: auto; }
.blog-body { height: auto; min-height: 100dvh; overflow: visible; font-size: 1rem; line-height: 1.75; }
.reading-shell { width: min(44rem, calc(100% - 3rem)); min-height: 100dvh; display: flex; flex-direction: column; margin-inline: auto; padding-top: max(env(safe-area-inset-top), 3rem); padding-bottom: max(env(safe-area-inset-bottom), clamp(1rem, 4.8dvh, 2.5rem)); }
.blog-nav { display: flex; align-items: center; margin-bottom: 1.5rem; font-size: .875rem; line-height: 1.5; }
.author-link { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; }
.author-link img { border-radius: 50%; display: block; }
.breadcrumbs { margin-bottom: 2rem; font-size: .8125rem; line-height: 1.6; }
.breadcrumbs ol { display: flex; align-items: baseline; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: flex; align-items: baseline; gap: .625rem; }
.breadcrumbs li:not(.breadcrumb-current) { flex-shrink: 0; }
.breadcrumb-current { min-width: 0; }
.breadcrumbs [aria-current="page"] { color: #737373; overflow-wrap: anywhere; }
.breadcrumb-separator { color: #999; }
.breadcrumbs a { text-decoration-color: #b7b7b7; text-underline-offset: 4px; }
.blog-body h1 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); line-height: 1.2; font-weight: 500; letter-spacing: -.045em; text-wrap: balance; }
.blog-index .reading-shell { padding-top: max(env(safe-area-inset-top), 2rem); }
.blog-index .blog-nav { margin-bottom: 1rem; }
.blog-index .breadcrumbs { margin-bottom: 1.25rem; }
.blog-index h1 { font-size: clamp(1.75rem, 4.5vw, 2rem); }
.index-heading { margin-bottom: 1.25rem; }
.post-list { margin: 0; padding: 0; list-style: none; }
.post-list li + li { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
.post-card { display: block; text-decoration: none; }
.post-summary { display: grid; gap: .375rem; }
.post-summary time { color: #737373; font-size: .75rem; line-height: 1.5; }
.post-summary h2 { margin: 0; color: var(--text); font-size: 1rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.4; text-wrap: balance; }
.post-summary p { color: #666; font-size: .875rem; line-height: 1.55; }
.post-card:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.article-heading { margin-bottom: 2rem; }
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; color: #737373; font-size: .8125rem; line-height: 1.5; }
.article-cover { margin: 0 0 2.75rem; }
.article-cover img { display: block; width: 100%; height: auto; background: #f5f5f5; }
.article-copy { width: min(100%, 40rem); margin-inline: auto; overflow-wrap: anywhere; }
.article-copy p { margin-block: 0 1.4rem; }
.article-copy h2 { margin-block: 2.75rem 1rem; color: var(--text); font-size: 1.375rem; line-height: 1.4; letter-spacing: -.025em; font-weight: 500; }
.article-copy h2 strong { font-weight: inherit; }
.article-copy strong { font-weight: 500; }
.article-copy ul, .article-copy ol { padding-left: 1.4rem; margin-block: 1.25rem 1.5rem; list-style: revert; }
.article-copy li + li { margin-top: .75rem; }
.article-copy a { text-underline-offset: 3px; text-decoration-color: #a0a0a0; }
.article-copy code, .article-copy pre { font-family: inherit; }
.article-copy code { font-size: .9em; background: #f5f5f5; padding: .1rem .25rem; }
.reading-footer { margin-top: auto; padding-top: 4rem; }
.blog-index .reading-footer { padding-top: 2.5rem; }
@media (max-width: 520px) {
  .reading-shell { width: calc(100% - 2rem); padding-top: max(env(safe-area-inset-top), 2rem); padding-bottom: max(env(safe-area-inset-bottom), 1rem); }
  .article-cover { margin-bottom: 2rem; }
  .article-copy { font-size: 1rem; line-height: 1.75; }
  .article-copy h2 { font-size: 1.25rem; margin-top: 2.25rem; }
}