/* Documental — el fotograma crece con el scroll hasta ocupar todo el ancho (de borde a borde). */
.doc {
  position: relative;
  z-index: var(--z-content);
  padding: clamp(80px, 14vh, 160px) 0 clamp(120px, 20vh, 220px);   /* sin padding lateral: el marco llega a los bordes */
  overflow: hidden;
}

/* Misma tinta maciza que los numerales de las partes (lit.css, data-lit-ink): la etiqueta y la nota que pasan por
   encima se leen sobre tinta, no sobre rojo */
.doc__word {
  position: absolute;
  left: 0;
  top: clamp(40px, 8vh, 90px);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(100px, 16vw, 280px);
  line-height: 1;
  color: var(--ink-dark);                  /* respaldo si no hubiera background-clip: text */
  white-space: nowrap;
  pointer-events: none;
}

.doc__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.doc .link-arrow { align-self: center; }

/* Etiqueta + nota forman un solo bloque: entre ellos un paso corto, no los 40px de la columna */
.doc__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-inline: var(--gutter);
  text-align: center;
}
/* El video es el tráiler, no el documental. Crema (no hueso ni --mute): es la única tinta clara que pasa AA
   también donde la tela más brilla; regular y no light, porque a este cuerpo el trazo fino pierde contraste */
.doc__note {
  max-width: 34ch;
  font: italic var(--w-regular) clamp(16px, 1.25vw, 19px) / 1.4 var(--font-text);
  color: var(--cream);
  text-wrap: balance;
}
.doc__note strong { font-weight: var(--w-semibold); }

.doc__stage { width: 100%; }

/* Tamaño final = ancho completo. El estado reducido lo pone documentary.js con scale y clip-path sobre el propio
   marco: sin fondo ni sombra propios, lo único que crece es el video (nada de una caja negra alrededor). */
.doc__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  transform-origin: 50% 50%;
}

.doc__frame:has(iframe)::after { display: none; }