.blog-shell { padding-top: 80px; }
.blog-hero { padding-top: clamp(6rem, 14vw, 12rem); padding-bottom: 5rem; border-bottom: 1px solid var(--line); }
.blog-hero h1 { margin: 0; font-size: clamp(4rem, 10vw, 9rem); line-height: 0.9; letter-spacing: -0.075em; }
.blog-hero h1 span { color: var(--accent); }
.blog-lede { max-width: 650px; margin: 2rem 0; color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.feed-link, .back-link { color: var(--accent); font: 500 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.post-list { padding-top: 2rem; padding-bottom: 8rem; }
.post-card { display: grid; grid-template-columns: 0.5fr 1.5fr; column-gap: 3rem; padding: 2.5rem 0; border-bottom: 1px solid var(--line); }
.post-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0; color: var(--muted); font: 0.68rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.post-card h2 { margin: 0 0 0.8rem; font-size: clamp(1.8rem, 3.2vw, 3rem); line-height: 1.08; letter-spacing: -0.05em; }
.post-card h2 a:hover { color: var(--accent); }
.post-card > p:not(.post-meta) { grid-column: 2; max-width: 700px; margin: 0; color: var(--muted); }
.post-card .post-meta { grid-row: span 3; display: block; }
.post-card .post-meta span { display: block; margin: 0.5rem 0 0; }
.post-read { grid-column: 2; width: fit-content; margin-top: 1.4rem; color: var(--accent); font: 500 0.72rem var(--mono); text-transform: uppercase; }
.post-read span { margin-left: 0.5rem; }
.article-shell { padding-top: 8rem; padding-bottom: 8rem; }
.article-header { max-width: 900px; padding: 4rem 0 3rem; }
.article-header h1 { margin: 1rem 0 1.5rem; font-size: clamp(3rem, 7vw, 6.8rem); line-height: 0.98; letter-spacing: -0.07em; }
.article-deck { max-width: 760px; color: var(--muted); font-size: clamp(1.15rem, 2vw, 1.5rem); }
.article-header .post-meta { padding-top: 1rem; }
.article-body { max-width: 740px; margin-left: min(25%, 270px); font-size: 1.08rem; }
.article-body p, .article-body li { color: var(--muted); }
.article-body h2 { margin: 3rem 0 1rem; color: var(--text); font-size: 1.8rem; letter-spacing: -0.04em; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.article-body blockquote { margin-inline: 0; padding-left: 1.5rem; border-left: 2px solid var(--accent); color: var(--text); }
.article-footer { max-width: 740px; margin: 4rem 0 0 min(25%, 270px); padding-top: 2rem; border-top: 1px solid var(--line); }
.article-footer > p { color: var(--muted); }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid var(--line); }
.site-footer p { color: var(--muted); font: 0.62rem var(--mono); text-align: right; }
@media (max-width: 700px) {
  .post-card { grid-template-columns: 1fr; gap: 1rem; }
  .post-card .post-meta, .post-card > p:not(.post-meta), .post-read { grid-column: 1; grid-row: auto; }
  .post-meta span { margin-left: 0; }
  .article-body, .article-footer { margin-left: 0; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .site-footer p { text-align: left; }
}