.blog-header { padding-block: 72px 48px; max-width: 1190px; }
.blog-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.blog-heading h1 { font-size: clamp(48px,7vw,88px); font-weight: 500; letter-spacing: -.065em; line-height: 1.1; }
.blog-heading h1 span { color: var(--signal-text); padding-left: .18em; font-weight: 300; }
.blog-header > p { color: #b3b3b8; font-size: 19px; margin-top: 20px; line-height: 1.6; }
.rss-link, .back-link, .post-date, .post-topics, .article-meta, .article-end, .pagination { font: 12px/1.7 var(--mono); }
.rss-link, .back-link { color: #b3b3b8; }
.post-list { max-width: 1190px; padding-bottom: 90px; }
.post-row { display: grid; grid-template-columns: 165px minmax(0,1fr) 32px; gap: 35px; padding-block: 36px 40px; border-top: 1px solid var(--rule-strong); }
.post-date { color: var(--muted); padding-top: 4px; }
.post-topics { color: var(--signal-text); letter-spacing: .025em; }
.post-summary h2 { font-size: clamp(25px,3vw,35px); line-height: 1.22; font-weight: 500; letter-spacing: -.035em; margin: 10px 0 14px; max-width: 760px; }
.post-summary > p:last-child { max-width: 760px; color: #b3b3b8; font-size: 17px; line-height: 1.65; }
.post-summary a:hover, .related-posts a:hover, .article-end a:hover, .rss-link:hover, .back-link:hover { color: var(--signal-text); }
.post-arrow { font-size: 26px; margin-top: 27px; align-self: start; }
.reading-shell { width: min(760px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.article-header { padding-block: 46px 32px; }
.article-header .back-link { display: inline-block; margin-bottom: 40px; }
.article-header h1 { font-size: clamp(36px,4.6vw,58px); line-height: 1.08; font-weight: 500; letter-spacing: -.045em; margin: 17px 0 23px; overflow-wrap: anywhere; }
.article-deck { font-size: 21px; line-height: 1.55; color: #b5b5ba; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 13px; color: var(--muted); margin-top: 24px; }
.article-meta > span:last-child:not(:first-child) { color: var(--muted); }
.article-toc { padding: 20px 0; margin: 0 0 38px; border-block: 1px solid var(--rule-strong); font: 14px/1.7 var(--sans); }
.article-toc summary { cursor: pointer; font-weight: 600; }
.article-toc ol { padding-left: 22px; margin-top: 12px; color: #b5b5ba; }
.article-toc li { padding-block: 3px; }
.article-toc a:hover { color: var(--ink); text-decoration: underline; }
.article-body { font: 19px/1.8 Georgia, 'Times New Roman', serif; color: #d0d0d0; overflow-wrap: anywhere; }
.article-body > * + * { margin-top: 24px; }
.article-body h2, .article-body h3, .article-body h4 { color: var(--ink); font-family: var(--sans); line-height: 1.3; font-weight: 500; scroll-margin-top: 100px; }
.article-body h2 { margin-top: 52px; font-size: 30px; letter-spacing: -.035em; }
.article-body h3 { margin-top: 36px; font-size: 23px; letter-spacing: -.02em; }
.article-body a { text-decoration: underline; text-decoration-color: #626266; text-underline-offset: 4px; }
.article-body a:hover { color: var(--ink); text-decoration-color: var(--signal-text); }
.article-body .heading-link { text-decoration: none; }
.article-body .heading-link:hover::after { content: ' #'; color: var(--signal-text); }
.article-body ul, .article-body ol { padding-left: 26px; }
.article-body li + li { margin-top: 9px; }
.article-body blockquote { border-left: 2px solid var(--signal); padding: 3px 0 3px 24px; font-style: italic; color: #b5b5ba; }
.article-body code { font-family: var(--mono); font-size: .8em; background: #151516; padding: 3px 5px; }
.article-body pre { background: #101011; border: 1px solid var(--rule-strong); padding: 22px; overflow-x: auto; line-height: 1.6; }
.article-body pre code { padding: 0; background: transparent; font-size: 13px; white-space: pre; overflow-wrap: normal; }
.article-body img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.article-body figcaption { margin-top: 12px; font: 13px/1.6 var(--sans); color: var(--muted); }
.article-body table { display: block; overflow-x: auto; border-collapse: collapse; font: 14px/1.6 var(--sans); }
.article-body th, .article-body td { text-align: left; padding: 13px 16px; border: 1px solid var(--rule-strong); min-width: 145px; }
.article-body th { color: var(--ink); background: #111112; }
.article-body hr { border: 0; border-top: 1px solid var(--rule); margin-block: 40px; }
.hljs-comment, .hljs-quote { color: #929398; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #e78e77; }
.hljs-string, .hljs-attr { color: #a9c3a3; }
.hljs-number, .hljs-built_in { color: #c9b0dd; }
.hljs-title, .hljs-function { color: #a7c2df; }
.article-end { display: flex; justify-content: space-between; gap: 20px; padding-block: 28px; border-top: 1px solid var(--rule-strong); margin-top: 55px; }
.related-posts { margin-block: 36px 90px; }
.related-posts h2 { font: 12px/1.5 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.related-posts > a { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--rule); padding-block: 19px; font-size: 20px; line-height: 1.35; }
.preview-note { border-left: 2px solid var(--signal); padding: 12px 18px; color: #b5b5ba; font: 13px/1.6 var(--mono); margin-bottom: 28px; }
.pagination { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; border-top: 1px solid var(--rule-strong); padding-top: 24px; }
.empty-blog { padding-block: 40px 80px; border-top: 1px solid var(--rule-strong); line-height: 1.8; color: #b5b5ba; }
.empty-blog a { display: block; text-decoration: underline; }
@media(max-width:700px) {
  .blog-header { padding-block: 40px 32px; }
  .blog-heading { align-items: center; }
  .rss-link { font-size: 10px; }
  .post-row { grid-template-columns: minmax(0,1fr) 22px; gap: 12px; padding-block: 25px 30px; }
  .post-date { grid-column: 1 / -1; }
  .post-arrow { margin-top: 27px; font-size: 22px; }
  .article-header { padding-top: 30px; }
  .article-header .back-link { margin-bottom: 28px; }
  .article-deck { font-size: 19px; }
  .article-body { font-size: 18px; line-height: 1.8; }
  .article-body h2 { font-size: 27px; }
  .article-body pre { padding: 16px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }