/* ESTRUCTURA DE LAS PÁGINAS DE PROYECTO (todas: clientes y Studies). Se carga después de css/case.css.
   Como donut-studio.com: un título enorme que avanza sin parar y, debajo, dos columnas. A la izquierda, fija al bajar, la ficha del
   proyecto (datos, un índice de sus partes y el texto); a la derecha, las imágenes y vídeos uno debajo de otro, por partes.
   La columna izquierda usa el mismo sistema que el resto de la web: datos a 14 px (etiqueta suave, valor a 500, como «Based in Madrid»
   en Work), el texto a 16 px en regular y el índice como los enlaces de la barra: la parte que se ve, subrayada.
   Los colores salen de variables: blanco y tinta por defecto; cada proyecto puede tener su paleta (css/palettes.css, data-palette en <html>).
   Orden: variables · título que avanza · dos columnas · columna izquierda (datos, índice, texto) · partes · móvil · movimiento. */

:root {
  --pl-title: var(--ink);                /* títulos grandes */
  --pl-soft: rgba(20, 20, 20, .62);      /* etiquetas y números: 5,6:1 sobre blanco */
}

/* ---------- Título que avanza ---------- */
.st-marquee { overflow: hidden; padding: calc(var(--nav-h) + clamp(8px, 2vw, 24px)) 0 clamp(12px, 2vw, 28px); } /* sin raya debajo: el palo de la «p» o la «g» la tocaba; el cambio de franja a cuerpo lo marca el color */
.st-run { display: inline-flex; white-space: nowrap; font-family: var(--font-display); font-size: clamp(72px, 13vw, 220px); font-weight: var(--fw-title); letter-spacing: -.05em; line-height: .9; color: var(--pl-title); animation: mw-run 40s linear infinite; will-change: transform; }
.st .st-run { letter-spacing: -.04em; line-height: 1; }
.st-run > span { padding-right: .25em; }
.st-sep { padding: 0 .1em; font-weight: 400; }

/* ---------- Dos columnas ---------- */
.st-layout { display: grid; grid-template-columns: minmax(260px, 28%) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); padding: 0 var(--edge); }
.st-content { padding: clamp(24px, 3.5vh, 40px) 0 0; min-width: 0; }

/* ---------- Columna izquierda: datos arriba, texto y el índice abajo del todo ---------- */
.st-side {
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.5vh, 36px);
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  padding: clamp(24px, 3.5vh, 40px) 0 clamp(20px, 3vh, 32px);
  scrollbar-width: none;
}
.st-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; font-size: var(--fs-s); line-height: 1.3; }
.st-facts dt { color: var(--pl-soft); margin-bottom: 4px; }
.st-facts dd { font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.st-intro p { max-width: 48ch; font-size: var(--fs-read); font-weight: var(--fw-regular); line-height: var(--lh-body); letter-spacing: -.01em; }
.st-intro p + p { margin-top: .9em; }

.st-index { padding-bottom: 4px; } /* justo bajo los datos: se ve nada más llegar */
.st-index ol { list-style: none; display: grid; gap: 2px; }
.st-index a { display: inline-block; padding: 4px 0; font-size: var(--fs-l); font-weight: 500; letter-spacing: -.015em; line-height: 1.25; text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.st-index a span { display: inline-block; margin-left: 8px; font-size: var(--fs-s); font-weight: var(--fw-regular); letter-spacing: 0; color: var(--pl-soft); font-variant-numeric: tabular-nums; }
.st-index a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.st-index a[aria-current] { text-decoration-line: underline; }     /* la parte que se ve, como la página actual en la barra */
@media (hover: hover) and (pointer: fine) { .st-index a:hover { text-decoration-line: underline; } }

/* ---------- Partes: título grande y texto; debajo, las imágenes una tras otra ---------- */
.st-part + .st-part { margin-top: clamp(72px, 10vw, 160px); }
.st-part { scroll-margin-top: calc(var(--nav-h) + 16px); }
.st-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; padding-bottom: clamp(20px, 3vw, 36px); }
.st-head h2 { grid-column: 1; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-title); letter-spacing: -.035em; line-height: 1.05; color: var(--pl-title); text-wrap: balance; }
.st-head p { grid-column: 1; max-width: var(--measure); margin-top: 16px; font-size: var(--fs-read); line-height: var(--lh-body); letter-spacing: -.01em; }
.st-video { grid-column: 2; grid-row: 1 / span 2; margin: 0; overflow: hidden; background: var(--panel); }
.st-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-video.is-square { width: clamp(140px, 14vw, 220px); aspect-ratio: 1; }
.st-video.is-tall { width: clamp(110px, 9vw, 160px); aspect-ratio: 9 / 16; }

.st-stack { display: grid; gap: clamp(8px, 1vw, 16px); }
.st-item { position: relative; margin: 0; overflow: hidden; background: var(--panel); aspect-ratio: var(--ar, auto); }
.st-item img, .st-item video { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-item.is-portrait { width: min(100%, 420px); } /* vídeos e imágenes verticales: no a todo lo ancho, que no ocupen tres pantallas */
.st-item.player video { cursor: pointer; }

@media (max-width: 760px) {
  .st-layout { grid-template-columns: 1fr; }
  .st-side { position: static; height: auto; overflow: visible; }
  .st-head { grid-template-columns: 1fr; }
  .st-video { grid-column: 1; grid-row: auto; margin-top: 16px; }
  .st-video.is-square { width: 46vw; }
  .st-video.is-tall { width: 34vw; }
  .st-item.is-portrait { width: 100%; }
}

/* Al llegar, el título y la ficha suben un poco; al aparecer, cada imagen se aleja de 1,06 a 1 dentro de su marco; con «reducir movimiento», quieta */
@media (prefers-reduced-motion: no-preference) {
  .js .st-marquee, .js .st-side { animation: fade-up .5s var(--ease-out) both; } /* la ficha entra con el título, sin esperas */
  .js .st-side { animation-delay: .06s; }
  .js .st-item[data-reveal] img { scale: 1.06; transition: scale 1.2s var(--ease-out); }
  .js .st-item[data-reveal].is-in img { scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .st-run { animation: none; } }

/* El post de Instagram (Lexus): a su ancho natural, alineado con las imágenes */
.case-embed-body { max-width: 540px; }
.case-embed-body blockquote.instagram-media { padding: 24px; background: var(--panel); font-size: var(--fs-s); }