.blog-page { max-width: 960px; }
.blog-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0 1.7rem; border-bottom:1px solid var(--line); margin-bottom:2.4rem; }
.blog-home { font-size:1.65rem; font-weight:750; color:var(--text); text-decoration:none; letter-spacing:-.02em; }
.blog-header nav { display:flex; gap:1rem; font-weight:650; }
.blog-header nav a { text-underline-offset:.17em; }
.blog-page h1 { font-size:clamp(2.2rem,5.5vw,3.3rem); line-height:1.1; max-width:860px; }
.blog-page .section-intro { margin-top:1rem; }
.blog-list { margin:2rem 0 0; padding:0; list-style:none; }
.blog-list li { border-top:1px solid var(--line); padding:1.4rem 0 .8rem; }
.blog-list h2 { font-size:1.5rem; margin:0 0 .4rem; line-height:1.25; }
.post-meta { color:var(--muted); margin:.8rem 0 1.2rem; }
.post-body { max-width:820px; font-size:1.08rem; line-height:1.7; overflow-wrap:anywhere; }
.post-body h2 { font-size:1.85rem; line-height:1.2; margin:2.3rem 0 1rem; }
.post-body h3 { font-size:1.4rem; margin:1.8rem 0 .8rem; }
.post-body p { margin:1rem 0; }
.post-body img { max-width:100%; height:auto; }
.post-body pre { overflow-x:auto; background:var(--soft); padding:1rem; border:1px solid var(--line); border-radius:.5rem; line-height:1.5; }
.post-body code { font-size:.9em; }
.post-body blockquote { border-left:3px solid var(--line); margin:1.5rem 0; padding:0 1.1rem; color:var(--muted); }
.post-body table { border-collapse:collapse; display:block; overflow-x:auto; max-width:100%; }
.post-body td,.post-body th { padding:.45rem .7rem; border:1px solid var(--line); }
.math-display { overflow-x:auto; overflow-y:hidden; margin:1.2rem 0; }
.draft-banner { border:1px solid #b99b53; background:#faf5e8; padding:.75rem 1rem; border-radius:.5rem; }
@media (max-width:620px) { .post-body { font-size:1rem; } }

/* Blog index: reuse the homepage's .top-nav buttons from base.css.
   Only the index is affected; individual post pages keep their existing header. */
.blog-index-header {
  --blog-title-size: clamp(2.75rem, 6vw, 4.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem 2rem;
  padding: 1.2rem 0 0;
  margin: 0 0 1rem;
}
.blog-page .blog-index-title {
  margin: 0;
  max-width: none;
  font-size: var(--blog-title-size);
  line-height: 1.05;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.blog-index-nav {
  /* Offset the buttons to the visible top of the title letters, not its baseline.
     The small optical adjustment scales with the title's font size. */
  margin: calc(var(--blog-title-size) * .15) 0 0;
  align-self: start;
  justify-self: end;
  justify-content: flex-end;
  align-items: center;
}
.blog-index-nav a {
  white-space: nowrap;
}
@media (max-width: 700px) {
  .blog-index-header {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .9rem;
  }
  .blog-index-nav {
    margin: 0;
    justify-self: start;
    justify-content: flex-start;
  }
}
/* Article titles: smaller than the main blog title, but still prominent. */
.blog-post .blog-index-header {
  --blog-title-size: clamp(2.5rem, 5.5vw, 3.75rem);
}