/* Heredia y el roster de quién ha tocado.
   Parte de styles/ — se cargan en orden desde index.html. */

/* La columna del retrato es estrecha a propósito: al lado va sólo el nombre y
   una frase, y con la foto más ancha quedaba un hueco enorme debajo del
   texto. */
.residente__grid {
  display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.residente__foto { margin: 0; position: relative; }
.residente__foto img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: 3px; filter: grayscale(1) contrast(1.08);
  transition: filter .8s var(--ease);
}
.residente__foto:hover img { filter: grayscale(0) contrast(1); }
.residente__foto figcaption {
  margin-top: .8rem; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--hueso-45);
}
.residente__nombre {
  margin: 0 0 1.5rem;
  font-family: var(--display); font-variation-settings: 'wdth' 125;
  font-weight: 900; font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  line-height: .84; letter-spacing: -.035em; text-transform: uppercase;
  color: var(--oro);
}
.residente__texto p { color: var(--hueso-70); max-width: 48ch; text-wrap: pretty; }

/* roster */
.roster { margin-top: clamp(4rem, 10vh, 7rem); }
.roster__titulo {
  margin: 0 0 1.75rem; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--hueso-45);
  font-weight: 400;
}
.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;
}
.roster__lista li { color: var(--hueso-45); transition: color .3s; }
.roster__lista li:hover { color: var(--hueso); }

/* Cada nombre lleva a su Instagram. Sin subrayado en reposo —serían catorce
   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 .es-residente { color: var(--oro); }
.roster__lista .es-invitado { color: var(--hueso-70); }
.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;
}

@media (max-width: 900px) {
  .residente__grid { grid-template-columns: 1fr; }
}