/* Blog: one reading column on the shared system (DESIGN-SYSTEM.md). */
.post { max-width: 760px; padding-block: 72px 96px; }
.post h1 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -.03em; line-height: 1.1; }
.post-meta { font: 13px var(--mono); color: var(--mute); margin-bottom: 18px; }
.post-meta a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.post-lead { margin-top: 16px; font-size: 19px; color: var(--ink-2); }
.prose { margin-top: 40px; display: grid; gap: 18px; font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.prose h2 { margin-top: 24px; font-size: 26px; color: var(--ink); }
.prose h3 { margin-top: 12px; font-size: 20px; color: var(--ink); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 22px; list-style: revert; display: grid; gap: 6px; }
.prose :not(pre) > code { padding: .05em .35em; border-radius: 5px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: .9em; }
.prose pre { margin: 0; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--term-line); background: var(--term); color: var(--term-ink); font: 13.5px/1.7 var(--mono); overflow-x: auto; }
.prose img { border-radius: var(--r); border: 1px solid var(--line); }
.prose blockquote { margin: 0; padding-left: 16px; border-left: 2px solid var(--line-2); color: var(--mute); }
.post-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); }
.post .log a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.prose > * { min-width: 0; } .prose code { overflow-wrap: anywhere; } .post h1 { overflow-wrap: anywhere; }
html[lang="vi"] .log [data-lang="en"], html:not([lang="vi"]) .log [data-lang="vi"] { display: none; }