/* Hybrid writing: a reading column for the index, and a content+backlinks
   two-column layout for each entry. Tags/categories as chips; backlinks in the aside. */

/* Index (list grouped by category) */
.reading { max-width: 44rem; margin: 0; padding: 2.5rem 1.5rem; }
.topic-group { margin: 1.8rem 0; }
.topic-group h2 { font-size: 1.05rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; }
.topic-group ul { list-style: none; padding: 0; }
.topic-group li { margin: 0.55rem 0; }

/* Single entry: content + backlinks side panel */
.entry {
  display: grid;
  grid-template-columns: minmax(0, 42rem) 15rem;
  gap: 2.5rem;
  max-width: 62rem; margin: 0; padding: 2.5rem 1.5rem;
}
.entry > .article { min-width: 0; }
/* No backlinks → drop the empty side column and keep the reading width left-aligned. */
.entry:not(:has(.backlinks)) { grid-template-columns: 1fr; max-width: 44rem; }

.article h1 { margin-bottom: 0.4rem; }
.article .meta { margin: 0 0 1.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* .chip and .backlinks are shared primitives — see base.css.
   The articles entry pins the backlinks panel to the side column: */
.entry-aside .backlinks { position: sticky; top: 4rem; }

@media (max-width: 52rem) {
  .entry { grid-template-columns: 1fr; gap: 1.5rem; }
  .entry-aside .backlinks { position: static; }
}