/* =============================================================================
   index.css — pagine di indice (wiki, articoli, projects)
   Lista verticale editoriale: data small-caps, titolo serif, dek, tag.
   NIENTE card con copertina, NIENTE griglia. Densita' alta, leggibilita' alta.
   ============================================================================= */

.index {
  padding-block: var(--space-8);
}

/* -----------------------------------------------------------------------------
   HEADER DELL'INDICE — titolo pagina + dek
   ----------------------------------------------------------------------------- */
.index-header {
  max-width: var(--measure-wide);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--ink);
}

.index-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}

.index-title {
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

.index-dek {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
  margin: 0;
  max-width: var(--measure);
}

/* -----------------------------------------------------------------------------
   FILTRI / TAG — barra opzionale sotto l'header
   ----------------------------------------------------------------------------- */
.index-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}

.index-filter {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.index-filter:hover {
  background: var(--selection);
  border-color: var(--ink);
  color: var(--ink);
  text-decoration: none;
}

.index-filter-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.index-filter-active:hover {
  background: var(--ink);
  color: var(--paper);
}

/* -----------------------------------------------------------------------------
   LISTA ENTRIES
   ----------------------------------------------------------------------------- */
.index-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--measure-wide);
}

.index-entry {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--rule);
}

.index-entry:first-child {
  padding-top: 0;
}

.index-entry-meta {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.index-entry-meta > * + *::before {
  content: "·";
  color: var(--ink-subtle);
  margin-right: var(--space-3);
}

.index-entry-title {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

.index-entry-title a {
  color: var(--ink);
  text-decoration: none;
}

.index-entry-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  background: var(--selection);
}

.index-entry-dek {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: var(--lh-snug);
  color: var(--ink-muted);
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  text-wrap: pretty;
}

.index-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.index-entry-tag {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
}

.index-entry-tag::before {
  content: "# ";
  color: var(--ink-subtle);
}

.index-entry-tag:hover {
  color: var(--ink);
  background: var(--selection);
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   PAGINAZIONE — minimal, testo, niente bottoni pill
   ----------------------------------------------------------------------------- */
.index-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.index-pagination a {
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}

.index-pagination a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  background: var(--selection);
}

.index-pagination-info {
  color: var(--ink-muted);
  font-weight: var(--fw-regular);
}

/* -----------------------------------------------------------------------------
   EMPTY STATE
   ----------------------------------------------------------------------------- */
.index-empty {
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--ink-muted);
  font-family: var(--font-serif);
  font-style: italic;
  max-width: var(--measure);
  margin-inline: auto;
}