/* blog: reading layout on the same tokens as the landing */
body.blog { background: var(--sc-canvas); }
.blog main { padding-top: calc(var(--bar-h) + var(--sc-8)); padding-bottom: var(--sc-9); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-bottom: var(--sc-7); }
.crumbs a { color: var(--sc-ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--sc-ink); }
.crumbs [aria-current] { color: var(--sc-ink); max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.blog-index__head { max-width: 52rem; margin-bottom: var(--sc-9); }
.blog-index__head h1 { margin: 0 0 var(--sc-5); font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; }
.blog-index__head p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); max-width: 46ch; }
.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.posts__item article { display: grid; grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 1fr) auto; gap: var(--sc-3) var(--sc-7); align-items: baseline; padding-block: var(--sc-6); border-bottom: 1px solid var(--sc-hairline); }
.posts__item .mono { margin: 0; grid-row: span 2; }
.posts__item h2 { margin: 0; font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; }
.posts__item h2 a { text-decoration: none; }
.posts__item h2 a:hover { color: var(--sc-accent); }
.posts__item p:not(.mono) { margin: 0; grid-column: 2; color: var(--sc-ink-soft); max-width: 70ch; }
.posts__more { grid-column: 3; grid-row: 1 / span 2; align-self: center; white-space: nowrap; font-size: var(--sc-t-sm); color: var(--sc-accent); text-decoration: none; }
@media (max-width: 860px) {
  .posts__item article { grid-template-columns: 1fr; }
  .posts__item .mono, .posts__item p:not(.mono), .posts__more { grid-column: 1; grid-row: auto; }
}

.post { width: 100%; max-width: calc(46rem + 2 * var(--sc-gutter)); margin-inline: auto; padding-inline: var(--sc-gutter); box-sizing: border-box; }
.post__head { margin-bottom: var(--sc-7); }
.post__head h1 { margin: var(--sc-3) 0 var(--sc-5); font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; }
.post__lede { margin: 0; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); text-wrap: pretty; }
.prose { font-size: 1.075rem; line-height: 1.75; color: color-mix(in oklab, var(--sc-ink) 92%, var(--sc-ink-soft)); }
.prose > * + * { margin-top: var(--sc-5); }
.prose h2 { margin-top: var(--sc-9); font-size: var(--sc-t-xl); line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; color: var(--sc-ink); scroll-margin-top: calc(var(--bar-h) + 1rem); }
.prose h3 { margin-top: var(--sc-7); font-size: var(--sc-t-lg); font-weight: 600; color: var(--sc-ink); }
.prose h2 + *, .prose h3 + * { margin-top: var(--sc-3); }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--sc-accent); }
.prose a { color: var(--sc-ink); text-decoration-color: var(--sc-accent); }
.prose a:hover { color: var(--sc-accent); }
.prose strong { color: var(--sc-ink); font-weight: 600; }
.prose code { font-family: var(--sc-font-mono); font-size: 0.86em; padding: 1px 6px; border-radius: 4px; background: var(--sc-surface); color: var(--sc-accent); box-shadow: inset 0 0 0 1px var(--sc-hairline); }
.prose em { color: var(--sc-ink-soft); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--sc-t-sm); line-height: 1.5; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--sc-hairline); vertical-align: top; }
.prose th { font-family: var(--sc-font-mono); font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--sc-ink-soft); }
.tldr { margin: 0 0 var(--sc-7); padding: var(--sc-5) var(--sc-6); border-radius: var(--sc-r-md); background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge), inset 0 0 0 1px var(--sc-hairline); }
.tldr p { margin: 0; font-size: var(--sc-t-base); line-height: 1.65; }
.tldr strong { color: var(--sc-accent); }
.post__cta { margin-top: var(--sc-9); padding: var(--sc-7); border-radius: var(--sc-r-lg); background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--sc-accent) 12%, var(--sc-surface)), var(--sc-surface) 60%); box-shadow: var(--sc-e3), var(--sc-edge), inset 0 0 0 1px var(--sc-hairline); }
.post__cta h2 { margin: 0 0 var(--sc-3); font-size: var(--sc-t-xl); letter-spacing: -0.025em; font-weight: 600; }
.post__cta p { margin: 0 0 var(--sc-5); color: var(--sc-ink-soft); max-width: 52ch; }
.post__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5); }
.related { margin-top: var(--sc-8); }
.related h2 { margin: 0 0 var(--sc-4); }
.related ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline); }
.related li { border-bottom: 1px solid var(--sc-hairline); }
.related a { display: block; padding: 14px 0; text-decoration: none; font-weight: 500; }
.related a:hover { color: var(--sc-accent); }
.blog .foot { margin-top: 0; padding-block: var(--sc-6) var(--sc-7); }