/* Quién ha tocado.
   Parte de styles/ — se cargan en orden desde index.html.

   Aquí vivía además la ficha del residente —retrato grande, nombre en oro y
   una biografía—. Se quitó a petición de los organizadores: no quieren que
   nadie salga destacado sobre los demás. Por eso esta lista no tiene ningún
   estado especial por artista: todos los nombres pesan igual. */

.roster__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  font-family: var(--display); font-variation-settings: 'wdth' 115;
  font-weight: 700; font-size: clamp(1.3rem, 4.2vw, 2.9rem);
  line-height: 1.15; text-transform: uppercase;
  /* Los nombres pasan por delante del sol: en la portada al bajar, y en
     /artistas de fijo, porque al quitar la ficha del residente la lista subió
     justo encima del núcleo. Sobre el naranja el hueso al 70 % se perdía.
     Aquí sí sirve `text-shadow` —y no `drop-shadow` como en el título del
     hero— porque estas letras son macizas: no hay relleno transparente donde
     la sombra se vería por dentro. Sobre fondo oscuro no se nota. */
  text-shadow: 0 1px 14px rgb(7 8 15 / .6);
}
.roster__lista li { color: var(--hueso-70); transition: color .3s; }
.roster__lista li:hover { color: var(--hueso); }

/* Cada nombre lleva a su Instagram. Sin subrayado en reposo —serían dieciocho
   subrayados a tamaño de titular— pero con uno al pasar por encima y foco
   visible al tabular. */
.roster__enlace {
  color: inherit; text-decoration: none;
  text-underline-offset: .12em; text-decoration-thickness: .04em;
}
.roster__enlace:hover { text-decoration: underline; text-decoration-color: var(--oro); }
.roster__lista .origen {
  font-family: var(--mono); font-size: .34em; font-weight: 400;
  text-transform: uppercase; letter-spacing: .12em; color: var(--hueso-45);
  margin-left: .35em; vertical-align: middle;
}