* { box-sizing: border-box; }
html { background: var(--site-bg); color: var(--site-text); font-family: var(--site-sans); }
body { margin: 0; }
a { color: inherit; text-decoration: none; text-underline-offset: .2em; }
a:hover { color: var(--site-red); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--site-red); outline-offset: 5px; }
.shell { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.blog-nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--site-line); }
.brand { color: var(--site-red); font-size: 2rem; font-weight: 800; }
.brand span { color: var(--site-text); }
.blog-nav nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 32px); font-size: .9rem; font-weight: 600; }
.blog-nav nav a { padding-block: 14px; }
.blog-nav [aria-current] { color: var(--site-red); }
.reading-column { width: min(700px, calc(100% - 48px)); min-height: 65dvh; margin: clamp(48px, 7vw, 88px) auto 96px; }
h1, h2 { text-wrap: balance; }
h1 { margin: 0; font-size: clamp(2.6rem, 5.8vw, 4.5rem); line-height: 1.05; letter-spacing: -.035em; }
.index-header h1 { color: var(--site-red); }
.index-header > p { color: var(--site-muted); font-size: 1.2rem; line-height: 1.6; }
.post-preview { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--site-line); }
.post-meta { color: var(--site-muted); font-size: .9rem; line-height: 1.6; }
.post-preview h2 { max-width: 22ch; margin: 16px 0; font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; }
.post-preview > p:not(.post-meta) { max-width: 52ch; font-size: 1.15rem; line-height: 1.6; color: var(--site-muted); }
.read-post, .back-link { display: inline-block; color: var(--site-red); padding-block: 12px; }
.back-link { margin-bottom: 24px; }
.post-header { margin-bottom: 44px; }
.post-header .post-meta { margin-top: 24px; }
.post-body { font-size: clamp(1.1rem, 2vw, 1.25rem); line-height: 1.75; }
.post-body p { margin: 0 0 1.4em; }
.post-body .lede { font-size: clamp(1.4rem, 2.5vw, 1.65rem); line-height: 1.5; font-weight: 500; }
sup a { color: var(--site-red); }
.post-notes { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--site-line); color: var(--site-muted); font-size: .95rem; line-height: 1.7; }
.post-notes p { margin: 0; scroll-margin-top: 24px; }
.post-notes a { color: var(--site-red); }
.blog-footer { display: flex; justify-content: space-between; gap: 24px; padding-block: 28px; border-top: 1px solid var(--site-line); color: var(--site-muted); font-size: .9rem; line-height: 1.5; }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 12px; background: var(--site-bg); z-index: 2; }
.skip-link:focus { top: 12px; }
@media (max-width: 520px) {
  .shell, .reading-column { width: calc(100% - 32px); }
  .brand { font-size: 1.55rem; }
  .blog-nav { gap: 16px; min-height: 68px; }
  .blog-nav nav { gap: 16px; font-size: .8rem; }
  .blog-footer { align-items: flex-start; }
}