/* blog index + tag pages + search results */

/* Blog index two-column layout: posts on left, archive sidebar on right */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 0 40px;
  align-items: start;
}
.blog-sidebar {
  position: sticky;
  top: 80px;
  padding-top: 24px;
}
/* On narrow screens collapse to single column, hide sidebar */
@media (max-width: 720px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { display: none; }
}

/* Archive widget — styled to match the TOC sidebar */
.archive-widget {
  border: 1px dashed var(--line-strong);
  background: var(--card);
}
.archive-head {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  color: var(--dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  border-bottom: 1px dashed var(--line);
}
.archive-head::before { content: "./"; color: var(--accent); }
.archive-tree {
  list-style: none; margin: 0;
  padding: 8px 14px 12px;
  font-family: var(--mono); font-size: 11px;
}
.arch-item { margin: 3px 0; }
.arch-btn {
  display: flex; align-items: baseline;
  background: none; border: none; padding: 0;
  cursor: pointer; font-family: inherit; font-size: inherit;
  text-align: left; width: 100%;
}
.arch-branch { flex-shrink: 0; white-space: pre; color: var(--accent); }
.arch-month-btn .arch-branch { opacity: 0.7; }
.arch-label { color: var(--dim); transition: color .15s; }
.arch-n { color: var(--faint); font-size: 10px; margin-left: 5px; }
.arch-btn:hover .arch-label,
.arch-btn.active .arch-label { color: var(--fg); }
.arch-btn.active .arch-n { color: var(--accent); }

/* Tag cloud & chips as links */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.tag { cursor: pointer; transition: .15s; text-decoration: none; border-style: solid; }
.chip.tag:hover { border-color: var(--accent); color: var(--accent); }
.tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* Blog post list */
.post-item { display: block; border-bottom: 1px dashed var(--line); padding: 18px 0; cursor: pointer; }
.post-item:last-child { border-bottom: none; }
.post-item:hover .pi-title { color: var(--accent); }
.pi-date { display: flex; justify-content: space-between; align-items: baseline; color: var(--accent); font-size: 13px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
.pi-title { font-weight: 600; line-height: 1.5; margin-bottom: 3px; }
.pi-summary { color: var(--dim); font-size: 13px; line-height: 1.6; margin-bottom: 8px; }
.pi-footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pi-time { color: var(--dim); font-size: 12px; }