:root { color-scheme: dark; --bg: #0a0a0a; --fg: #f2f2f2; --muted: #a1a1a1; --line: #292929; font-family: 'Ubuntu Mono', ui-monospace, monospace; background: var(--bg); color: var(--fg); font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--fg); }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.blog-shell { width: min(100% - 40px, 980px); min-height: 100vh; margin-inline: auto; display: flex; flex-direction: column; }
.blog-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 14px; }
.blog-brand { text-decoration: none; font-weight: 700; }
.blog-path, .blog-eyebrow, .blog-footer { color: var(--muted); }
.blog-nav { display: flex; justify-content: space-between; gap: 24px; padding-block: 22px; font-size: 13px; }
.blog-nav a, .blog-read { text-decoration: none; }
.blog-eyebrow { margin: 0 0 14px; font-size: 12px; line-height: 1.6; letter-spacing: .04em; text-transform: lowercase; }
h1 { max-width: 22ch; margin: 0; font-size: clamp(34px, 7vw, 64px); line-height: 1.08; font-weight: 400; letter-spacing: -.04em; overflow-wrap: anywhere; }
.blog-summary { max-width: 70ch; margin: 22px 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.blog-tags li { border: 1px solid var(--line); padding: 5px 9px; }
.blog-article { padding-block: clamp(44px, 8vw, 88px); }
.blog-cover { display: block; width: 100%; max-height: 520px; margin-top: 28px; object-fit: cover; }
.blog-body { width: 100%; max-width: none; margin-top: 44px; font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.blog-body h2, .blog-body h3, .blog-body h4 { margin: 2em 0 .7em; line-height: 1.25; font-weight: 400; }
.blog-body h2 { font-size: clamp(24px, 4vw, 34px); }
.blog-body h3 { font-size: 23px; }
.blog-body p, .blog-body ul, .blog-body ol, .blog-body blockquote, .blog-body table, .blog-body pre { margin-block: 1.25em; }
.blog-body blockquote { margin-inline: 0; padding-left: 18px; border-left: 1px solid #777; color: var(--muted); }
.blog-body pre, .blog-body code { font-family: inherit; }
.blog-body pre { overflow-x: auto; padding: 18px; border: 1px solid var(--line); background: #101010; }
.blog-body :not(pre) > code { padding: 2px 5px; border: 1px solid var(--line); }
.blog-body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.blog-body th, .blog-body td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; }
.blog-body img { display: block; max-width: 100%; height: auto; }
.blog-list { list-style: none; padding: 0; margin: 36px 0 80px; border-top: 1px solid var(--line); }
.blog-list > li { padding: 28px 0; border-bottom: 1px solid var(--line); }
.blog-list h2 { margin: 0; font-size: clamp(22px, 4vw, 32px); font-weight: 400; line-height: 1.25; overflow-wrap: anywhere; }
.blog-list h2 a { text-decoration: none; }
.blog-list .blog-summary { margin: 12px 0; font-size: 15px; }
.blog-read { font-size: 13px; }
.blog-empty { padding-block: clamp(48px, 12vw, 120px); color: var(--muted); }
.blog-empty h1 { margin-bottom: 18px; color: var(--fg); }
.blog-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: auto; padding-block: 20px; border-top: 1px solid var(--line); font-size: 12px; }
@media (max-width: 560px) { .blog-shell { width: min(100% - 32px, 980px); } .blog-header { min-height: 64px; } .blog-summary { font-size: 15px; } .blog-body { margin-top: 32px; font-size: 15px; } .blog-footer { flex-direction: column; } }