/* Hallmark · macrostructure: Catalogue (topic index + grouped article lists) · tone: grounded, direct, dignified · anchor hue: brick 29°
 * page: /media/, generated by tools/build_posts.py · system: design.md "limestone and brick" (locked; inner page of the Split Studio site)
 * no JS filter: the topic index is plain in-page links, so it works everywhere · eyebrows: none · tokens only
 * Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4
 */


.blog-index { display: grid; gap: var(--space-xl); padding-block: var(--space-xl) var(--space-3xl); }

/* Topic index: one column on phones, two on tablets, a sticky rail beside the lists on desktop */
.topic-nav h2 {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-strong);
  letter-spacing: 0; color: var(--color-text-muted);
}
.topic-nav ul {
  list-style: none; margin: var(--space-2xs) 0 0; padding: 0;
  display: grid; column-gap: var(--space-lg); border-top: var(--rule-strong) solid var(--color-ink);
}
.topic-nav li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.topic-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--tap-min);
  color: var(--color-ink); font-weight: var(--weight-ui); text-decoration: none; white-space: nowrap;
}
.topic-nav a:hover { text-decoration: underline 2px var(--color-accent); text-underline-offset: 0.15em; }
.topic-nav a:active { color: var(--color-accent-deep); }
.topic-nav__n { font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Groups: newest first inside each topic */
.topic-group + .topic-group { margin-top: var(--space-2xl); }
.topic-group h2 { font-size: var(--text-lg); }
.post-index { list-style: none; margin: var(--space-sm) 0 0; padding: 0; border-top: var(--rule-strong) solid var(--color-ink); }
.post-index li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.post-index a { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); color: var(--color-ink); text-decoration: none; }
.post-index__title {
  font-family: var(--font-display); font-weight: var(--weight-h3); font-size: var(--text-md);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-display); text-wrap: pretty;
}
.post-index__meta { font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.post-index a:hover .post-index__title { text-decoration: underline 2px var(--color-accent); text-underline-offset: 0.12em; }
.post-index a:active .post-index__title { color: var(--color-accent-deep); }
.topic-group__top { margin-top: var(--space-xs); }


@media (min-width: 40rem) {
  .topic-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .blog-index { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-2xl); padding-top: var(--space-2xl); }
  .topic-nav { position: sticky; top: calc(var(--header-h) + var(--space-lg)); align-self: start; }
  .topic-nav ul { grid-template-columns: minmax(0, 1fr); }
  .topic-group__top { display: none; } /* the topic rail stays in view on desktop */
}