.blog-post{padding-block:var(--space-3) var(--space-5);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4)}.blog-post__header{display:grid;gap:var(--space-1)}.blog-post__lede{color:var(--color-text-secondary);font-size:var(--text-lg);max-width:60ch}.blog-post__meta{font-size:var(--text-sm);color:var(--color-text-tertiary)}.blog-post__main{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);align-items:start}@media(min-width:64rem){.blog-post__main{grid-template-columns:minmax(0,1fr) 17rem;grid-template-areas:"body toc";gap:var(--space-5)}.blog-post__toc{grid-area:toc;position:sticky;top:calc(var(--header-height) + var(--space-3))}.blog-post__main>.blog-post__body{grid-area:body}}.blog-post__toc{border:1px solid var(--color-border);border-radius:var(--radius-lg);background-color:var(--color-surface);box-shadow:var(--shadow-sm);padding:1.25rem}.blog-post__toc-title{font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-1)}.blog-post__toc ol{margin:0;padding:0;list-style:none;display:grid;gap:.125rem;font-size:var(--text-sm)}.blog-post__toc a{display:block;padding:.4375rem .75rem;border-radius:var(--radius-sm);color:var(--color-text-secondary);text-decoration:none;line-height:1.35}.blog-post__toc a:hover{background-color:var(--color-surface-sunken);color:var(--color-text)}.blog-post__body{max-width:none;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:clamp(1.25rem,.8rem + 2.2vw,3rem)}.blog-post__body>*{max-width:70ch}.blog-post .faq{border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);margin-top:var(--space-1)}.blog-post .faq summary{cursor:pointer;padding:var(--space-2);font-weight:600;min-height:44px;display:flex;align-items:center}.blog-post .faq summary::-webkit-details-marker{color:var(--color-text-tertiary)}.blog-post .faq p{padding:0 var(--space-2) var(--space-2)}.related-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2)}@media(min-width:40rem){.related-grid{grid-template-columns:repeat(3,1fr)}}