/* ============================================================
   BLOG INDEX + ARTICLE PAGES
   ============================================================ */

.page-header {
  padding-block: var(--sp-7) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.page-header h1 { font-size: var(--step-5); margin-top: var(--sp-3); max-width: 18ch; }
.page-header p { margin-top: var(--sp-4); color: var(--ink-soft); max-width: 52ch; font-size: var(--step-1); }

.category-filter {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.category-filter a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.4em 0.8em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}
.category-filter a:hover, .category-filter a.is-active {
  border-color: var(--olive);
  color: var(--olive-deep);
  background: var(--olive-pale);
}

.category-block { padding-block: var(--sp-7); border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.category-block__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.category-block__head h2 { font-size: var(--step-3); }
.category-block__desc { color: var(--ink-soft); max-width: 60ch; margin-bottom: var(--sp-3); }

/* ---- Article page ---- */
.article-hero {
  padding-block: var(--sp-6) var(--sp-5);
}
.article-hero__meta {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-faint);
  flex-wrap: wrap;
}
.article-hero h1 {
  margin-top: var(--sp-3);
  font-size: var(--step-5);
  max-width: 22ch;
}
.article-hero__dek {
  margin-top: var(--sp-4);
  font-size: var(--step-1);
  color: var(--ink-soft);
  max-width: 58ch;
}

.article-body {
  padding-block: var(--sp-6) var(--sp-8);
}
.article-body__layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--sp-7);
  align-items: start;
}
.prose {
  max-width: 68ch;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink);
}
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--step-3); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--step-2); margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.5em; }
.prose blockquote { margin: 0; }
.prose figure { margin: 0; }
.prose figcaption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: var(--sp-2);
}
.prose strong { color: var(--ink); }

.article-aside {
  position: sticky;
  top: 100px;
  display: grid;
  gap: var(--sp-5);
}
.aside-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  background: var(--paper-dim);
}
.aside-card h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--olive-deep);
  margin-bottom: var(--sp-3);
}
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55em; font-size: 0.85rem; }
.toc-list a { color: var(--ink-soft); }
.toc-list a:hover { color: var(--rust-deep); }

@media (max-width: 900px) {
  .article-body__layout { grid-template-columns: 1fr; }
  .article-aside { position: static; }
}

.author-box {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  max-width: 68ch;
}
.author-box__photo {
  width: 64px; height: 64px;
  border-radius: 50%;
  background-color: var(--wood-frame);
  border: 1px solid var(--line);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--ink-faint);
  text-align: center;
  overflow: hidden;
}
.author-box__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}
.author-box h4 { font-size: var(--step-1); }
.author-box p { color: var(--ink-soft); font-size: var(--step--1); margin-top: 4px; }

/* ---- Contact page layout ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.related-articles { padding-block: var(--sp-7); border-top: 1px solid var(--line); background: var(--paper-dim); }
.related-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
@media (max-width: 860px) {
  .related-articles__grid { grid-template-columns: 1fr; }
}