/* La página de proyecto. */

.project { max-width: 85rem; margin: 0 auto; }

.project__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  padding: 8rem 0;
}

.project__title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.project__meta {
  margin: 0;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 1.05rem;
}

/* el back del final: centrado, grande y con aire */
.project > .back {
  display: block;
  width: fit-content;
  margin: 7rem auto 3rem;
  padding: 1rem 2rem;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* vimeo: portada estática hasta que se clica */
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #151515;
  margin-bottom: var(--gap);
  cursor: pointer;
  overflow: hidden;
}

.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.player__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.3rem;
  color: #fff;
  text-shadow: 0 0 20px rgba(0, 0, 0, .6);
  transition: transform var(--dur) ease;
}

.player:hover .player__play { transform: scale(1.12); }

.stills { display: flex; flex-direction: column; gap: var(--gap); }
/* sin medidas, antes de cargar miden 0 px y el lazy-load las baja todas:
   16:9 de reserva hasta que llega la foto, y luego su proporción real */
.stills img { height: auto; aspect-ratio: auto 16 / 9; }
.still { background: #151515; }