/* PROJECT PAGES */

.project { padding-bottom: var(--space); }
.project-back {
  display: inline-block;
  padding: 1rem 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.project-back:hover { color: var(--red-deep); }

.project-header { padding: 1rem 0 2rem; }
.project-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--red);
  font-size: clamp(2.75rem, 10vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.project-meta { margin-top: 0.75rem; font-size: 0.875rem; }

/* Vertical videos stay a sensible size on desktop instead of filling the screen. */
.player { max-width: 100%; }
.player[data-ratio="9x16"] { max-width: 26rem; }

.player-button {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--ink);
  position: absolute;
  inset: 0;
  width: 100%;
  cursor: pointer;
}
.player-label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--paper);
  padding: 0.5rem 0.9rem;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.project-body { margin-top: 2rem; max-width: 60ch; }
.project-body p { margin-bottom: 1rem; }