/* 06-components/catalogue — the card catalogue. Where the museum of worlds is a
   rack of screenshot cards, the categories directory and the blog feed are a
   *ledger*: a holo-panel per group, a bracketed count in its header, and its
   members as a rule-separated, scannable list beneath — so the reader parses the
   shape of the corpus at a glance. Composes .c-panel for the frame and the shared
   .c-group__label grammar for the console header. */

/* ── Categories index card — a catalogue entry: name + bracketed page count over
   a rail of the wikis/eras its pages span. The whole card is the link. */
.c-catalogue-card { display: block; color: inherit; }
.c-catalogue-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-end: var(--space-sm);
}
.c-catalogue-card__head h2 {
  font-size: var(--text-md);
  margin: 0;
}
.c-catalogue-card__empty {
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin: 0;
}

/* ── The grouped ledger — a panel header over a rule-separated member list. */
.c-catalogue__head { margin-block-end: var(--space-md); }

.c-catalogue__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-chrome);
  font-size: var(--text-sm);
}
/* Green hairline rules between rows carry the ledger read; the first row sits
   flush under the header. Dozens of rows just extend the ledger, never blow it. */
.c-catalogue__list > li {
  padding-block: var(--space-xs);
  border-block-start: 1px solid var(--rule);
}
.c-catalogue__list > li:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

/* A single page row: a terminal-glyphed link that truncates rather than
   overflowing the panel when a title runs long. */
.c-catalogue__row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6ch;
  max-width: 100%;
}
.c-catalogue__row::before {
  content: "·";
  color: var(--ink-dim);
  flex: none;
}
.c-catalogue__row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Blog feed rows carry more than a page row: a heading, a degrading meta
   line, a clamped excerpt and a wrapping tag rail. Looser vertical rhythm. */
.c-catalogue__list--feed > li { padding-block: var(--space-md); }

.c-post-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.c-post-row__title {
  font-size: var(--text-md);
  margin: 0;
}
/* The meta line: mono chrome, segments joined by dim `·`. Every segment is
   optional, so it never dangles a "by" or an empty separator. */
.c-post-row__meta {
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  color: var(--ink);
  letter-spacing: var(--tracking-chrome);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6ch;
}
.c-post-row__meta a { color: var(--link); }
/* A long excerpt clamps to a few lines rather than blowing the panel. */
.c-post-row__excerpt {
  font-family: var(--font-read);
  color: var(--ink-read);
  line-height: var(--leading-body);
  margin: 0;
  max-width: var(--measure);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}