/* Blog-specific styles — style.css loaded via <link> in HTML */

.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 56px; }

/* Reading progress bar */
#reading-progress {
  position: fixed; top: 71px; left: 0;
  height: 2px; background: var(--brand);
  width: 0%; z-index: 100;
  transition: width 0.1s linear;
}

/* Blog nav active state */
.nav-blog-active { color: var(--brand) !important; font-weight: 500; }

/* ============================================================
   Blog Responsive — Tablet ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {
  .container        { padding: 0 32px; }
  .container-narrow { padding: 0 32px; }

  /* Blog index */
  .featured-article { grid-template-columns: 1fr; gap: 32px; }
  .posts-grid       { grid-template-columns: 1fr 1fr; gap: 28px; }
  .newsletter-grid  { grid-template-columns: 1fr; gap: 32px; }
  .newsletter-form  { flex-direction: column; }

  /* Tech post TOC layout */
  .container > div[style*="grid-template-columns: 220px"] { display: block; }
  .toc-side { position: static; margin-bottom: 40px; border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
}

/* ============================================================
   Blog Responsive — Mobile ≤ 768px
   ============================================================ */
@media (max-width: 768px) {
  .container        { padding: 0 20px; }
  .container-narrow { padding: 0 20px; }

  /* Blog index hero */
  .posts-grid { grid-template-columns: 1fr; }
  .filter-bar-inner { padding: 16px 20px; }

  /* Post header */
  .container-narrow h1.serif { font-size: 36px !important; }

  /* Footer inside blog */
  footer .container > div[style*="grid-template-columns: 1.4fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
}