/* manifesto.css: quello che il manifesto ha in piu' della home. Sta sopra
   costellazione.css, da cui prende stazioni, blocchi, titoli e mappa; le figure
   sono quelle di costellazione.js, nell'ordine scritto in <body data-figure>. */

/* i nove titoli in una schermata sola: il numero in mono ocra, il titolo al
   taglio sub. Niente scatole: il segno e' il salto di misura, come nella home. */
.st--lead .blocco--indice { grid-column: 1 / span 10; max-width: 1040px; }
.indice { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-18); }
.indice a {
  display: grid; grid-template-columns: 1.6em 1fr; align-items: baseline; column-gap: var(--sp-12);
  color: var(--ink); text-decoration: none;
  font-size: var(--t-sub); line-height: var(--lh-sub); letter-spacing: -0.01em; text-wrap: balance;
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.indice a:hover { color: var(--ocra); }
.indice a:focus-visible { outline: 2px solid var(--ocra); outline-offset: 4px; }
.indice__n {
  font-family: var(--mono); font-weight: 600; font-size: var(--t-label); letter-spacing: 0.02em; color: var(--ocra);
}

/* l'apertura ha due paragrafi: il primo stacca dal titolo come nella home */
.blocco--hero .corpo--hero + .corpo--hero { margin-top: var(--sp-18); }

/* sul telefono il testo della chiusura sta su due righe a tutta larghezza */
@media (max-width: 899px) {
  #parliamone .tasto { text-align: center; }
  .indice { gap: var(--sp-12); }
}