/* ─── Index page ────────────────────────────────────────────────────────── */
.index-main {
  padding: 0 var(--pad-x) var(--pad-y);
}

/* ─── Sticky category filter bar ────────────────────────────────────────── */
.index-filter-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--color-line);
  padding: 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.index-label {
  font-size: var(--size-base);
  text-transform: uppercase;
}

.index-filter-btn {
  font-size: var(--size-base);
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color);
  transition: opacity 0.15s;
}



.index-filter-btn.is-active,
.index-filter-btn:hover {
  text-decoration: underline;
}


/* ─── Each row inside a letter group ─────────────────────────────────────── */
.index-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding: 0.75rem 0 0.75rem 13%;
  align-items: start;
  border-bottom: 1px solid var(--color-line);
}

.index-entry__name {
  font-size: var(--size-lg);
}

.index-entry__category {
  font-size: var(--size-xs);
}

.index-entry__links {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.25rem;
}

.index-link {
  font-size: var(--size-base);
  text-transform: uppercase;
  display: block;
}
.index-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .index-entries { padding-left: 0; }
  .index-entry {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0.75rem 0;
  }

  /* Name + category sit side-by-side: name wraps on the left,
     category is pinned top-right and never overlaps the name. */
  .index-entry__name-col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
  }

  .index-entry__category {
    flex-shrink: 0;
    text-align: right;
    padding-top: 0.3em; /* nudge down to optically align with the display-font cap-height */
  }
}