/* ===== Subpáginas de proyecto: tamaño máximo de las imágenes (solo computador) =====
   AJUSTE ÚNICO: cambia --img-max para hacer las imágenes más grandes o más pequeñas en todas las subpáginas.
   Reglas:
   · Ninguna imagen mide más de --img-max de ancho ni más del 85 % de la altura de la ventana.
     Si no cabe, se achica en proporción y queda centrada (sin recortar ni deformar).
   · Las filas de imágenes lado a lado (bocetos, peinados, mockups) ocupan como máximo --img-max en total.
   · --ar (ancho/alto de cada imagen) va en la propia etiqueta <img>. La fila «Page by page» de It's Coming
     no lleva --ar ni se limita: conserva su diseño.
   · En celular (menos de 768 px de ancho) nada de esto se aplica. */
:root { --img-max: 1040px; }
/* ANCHO ÚNICO DE CONTENIDO (computador): texto, ficha, línea gris, texto de proceso y navegación final
   miden siempre esto en todas las páginas, sin importar el tamaño de las imágenes. */
:root { --ancho-contenido: 1040px; }
/* Excepción: Crocodile Teeth tiene imágenes muy panorámicas (y bocetos en fila); con 1040 px se veían muy pequeñas. */
.project-page--crocodile { --img-max: 1240px; }
/* Excepción: en Letters from the Other Side la fila de bocetos (Proceso) se veía muy pequeña a 1040 px. */
.project-page--letters { --sketch-max: 1240px; }

@media (min-width: 768px) {
  .project-page img[style*="--ar"] {
    width: min(100%, var(--img-max), calc(85vh * var(--ar)));
    margin-left: auto;
    margin-right: auto;
  }
  .project-page .sketch-row,
  .project-page .pair-row {
    max-width: var(--sketch-max, var(--img-max));
    margin-left: auto;
    margin-right: auto;
  }
  /* El texto del proyecto empieza en el mismo borde izquierdo que la ficha técnica. */
  .project-text { max-width: 760px; }
  .project-text p { max-width: 680px; }
}

/* ===== Diagramación tipo revista, compartida por todas las subpáginas de proyecto ===== */
  /* ---------- Texto + ficha en dos columnas (diagramación tipo revista) ----------
     Computador: texto a la izquierda (≈55 %), ficha a la derecha (≈40 %), alineados arriba;
     el bloque mide lo mismo que las imágenes (--img-max). Celular: una columna, primero el texto. */
  .project-intro { margin: 72px auto 0; }
  /* Línea encima del bloque, a todo su ancho. */
  .project-intro { border-top: 1px solid rgba(90, 95, 115, 0.12); padding-top: 40px; } /* línea fina gris, igual a las de la ficha */
  .project-intro .project-text { margin: 0; max-width: none; }
  .project-intro .project-text p { max-width: none; }
  /* Texto de proceso: párrafo corto bajo el subtítulo PROCESS / PROCESO, mismo estilo que el texto del proyecto. */
  .process-text {
    max-width: 680px;
    margin: 0 auto 32px;
    text-align: center; /* centrado, como el subtítulo de encima */
    font-family: 'Raleway', sans-serif;
    font-size: 1.12rem;
    line-height: 1.75;
    color: #5a5f73;
  }
  @media (max-width: 767px) { .process-text { font-size: 1.05rem; margin-bottom: 24px; } }
  /* Entradilla: la primera frase como párrafo aparte, 4 px más grande que el resto, mismo color. */
  .project-text .entradilla { font-size: calc(1.12rem + 4px); line-height: 1.6; margin-bottom: 0.9rem; } /* párrafo aparte; el resto empieza en línea nueva */
  @media (max-width: 767px) { .project-text .entradilla { font-size: calc(1.05rem + 2px); } } /* celular: un poco menor */
  .project-intro .project-specs { margin: 0; max-width: none; padding: 0; border: 0; } /* sin las dos líneas largas que la enmarcaban */
  /* Ficha en cuadrícula: cada dato lleva una línea fina debajo, del ancho de su columna. */
  .project-intro .specs-grid { row-gap: 1.1rem; column-gap: 2rem; }
  .project-intro .specs-grid > div { padding-bottom: 0.9rem; border-bottom: 1px solid rgba(90, 95, 115, 0.12); }
  .project-intro .spec-note { margin-top: 1.1rem; } /* nota final abajo, a lo ancho de la ficha */
  @media (min-width: 768px) {
    .project-intro {
      max-width: var(--ancho-contenido); /* siempre el ancho único, sin importar la imagen de arriba */
      display: grid;
      grid-template-columns: 55fr 40fr;
      column-gap: 5%;
      align-items: start;
    }
    /* Ficha a la derecha: ~10 % más grande para equilibrar con el texto de al lado (13,8 → 15,2 px y 14,7 → 16,2 px). */
    .project-intro .specs-grid dt { font-size: 0.95rem; }
    .project-intro .specs-grid dd { font-size: 1.01rem; }
  }
  @media (min-width: 768px) {
    /* Navegación final (Anterior / Siguiente) dentro del ancho único. */
    .project-nav { max-width: var(--ancho-contenido); margin-left: auto; margin-right: auto; }
  }
  @media (max-width: 767px) {
    .project-intro { margin-top: 48px; padding-top: 32px; }
    .project-intro .project-specs { margin-top: 40px; }
  }

/* ===== Reparto de líneas: SOLO en el texto de los proyectos (párrafos y entradillas) =====
   Ningún párrafo termina con una sola palabra en la última línea («pretty»); la entradilla, en renglones de largo
   parecido («balance»). Sin guiones de corte de palabra.
   OJO: no aplicarlo a la frase azul del encabezado ni a títulos: text-wrap anula su «una sola línea» (white-space: nowrap)
   y el script que ajusta su tamaño la agranda y la parte en muchas líneas. */
.project-text p, .process-text { text-wrap: pretty; -webkit-hyphens: manual; hyphens: manual; }
.project-text .entradilla { text-wrap: balance; }