@font-face { font-family: QS; src: url("assets/typography/queen-skittles-pixel/QueenSkittlesPixel-SuperSlanted.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nocturne Script"; src: url("assets/typography/nocturne-script/nocturne-script-regular.woff2") format("woff2"), url("assets/typography/nocturne-script/nocturne-script-regular.ttf") format("truetype"); font-display: swap; }
/* Peso vertical de Pixel: es el que carga el contenido y los créditos. La
   SuperSlanted (QS, arriba) queda solo para la marca del header. */
@font-face { font-family: "Queen Skittles Pixel"; src: url("assets/typography/queen-skittles-pixel/QueenSkittlesPixel-Regular.woff2") format("woff2"); font-style: normal; font-display: swap; }
:root { --bg: #f4f2f0; --text: #111011; --muted: #625e60; --pink: #f000a8; --line: #dcd8d6; --script: "Nocturne Script", "Times New Roman", serif; --pixel: "Queen Skittles Pixel", monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Ninguna ficha de proyecto usa Arial: todo el contenido (descripción, cuerpo,
   créditos, navegación) hereda Queen Skittles Pixel de aquí, y los nombres y
   títulos van en Nocturne por sus propias reglas. Aplica igual a los proyectos
   que se agreguen después: no hay que tocar nada por proyecto. */
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--pixel); }
header { position: fixed; inset: 0 0 auto; z-index: 4; display: flex; justify-content: space-between; align-items: baseline; padding: 20px 24px; mix-blend-mode: difference; }
header a { color: #f1efed; text-decoration: none; }
/* La marca es la misma en todo el sitio: Pixel itálico, como en el índice de
   portafolio. header queda con mix-blend-mode:difference (no un color sólido)
   porque flota sobre la foto ancha del proyecto al hacer scroll, y necesita
   seguir siendo legible tanto sobre el fondo claro como sobre la imagen. */
.header-brand { font: italic 1.2rem/1 QS, monospace; }
.header-back { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.project-hero { min-height: 100dvh; display: grid; grid-template-columns: 1.4fr .6fr; align-items: end; gap: 8vw; padding: 100px 24px 32px; }
.status { margin: 0 0 18px; color: var(--pink); font-size: .68rem; text-transform: uppercase; }
.project-hero h1 { max-width: 11ch; margin: 0; font: 400 clamp(3.4rem, 10.5vw, 10.5rem)/1.02 var(--script); color: var(--pink); }
.project-hero > p { max-width: 38ch; margin: 0; color: var(--muted); line-height: 1.4; }
.project-image { margin: 0; overflow: hidden; }
.project-image--wide { width: 100%; height: 100dvh; }
.project-image img, .project-image video { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-image iframe { width: 100%; height: 100%; border: 0; display: block; }
.project-copy { min-height: 80dvh; display: grid; align-content: center; gap: 34px; padding: 100px max(24px, 12vw); }
/* Segundo título del proyecto ("Una continuidad visual para todo un disco"):
   Pixel SuperSlanted -- la alargada e inclinada, que es la voz de marca para
   una frase grande. El nombre del proyecto (h1) sigue en Nocturne y el cuerpo
   en Pixel Regular: cada una hace un trabajo distinto.
   El letter-spacing negativo venía de una grotesca; en un tipo de píxel
   monoespaciado apretaba los caracteres hasta pegarlos, así que se quita. */
.project-copy h2 { max-width: 14ch; margin: 0; font-family: QS, monospace; font-size: clamp(2.4rem, 6.4vw, 7rem); font-weight: 400; line-height: 1.02; letter-spacing: 0; }
.project-copy p { max-width: 48ch; margin: 0 0 0 auto; color: var(--muted); line-height: 1.5; }
.project-gallery { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; padding: 18px; }
.project-gallery figure { height: 80dvh; margin: 0; overflow: hidden; }
.project-next { display: flex; justify-content: space-between; padding: 80px 24px; }
.project-next a { color: var(--text); font-size: .75rem; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.project-next a:hover { color: var(--pink); }
@media (max-width: 700px) {
  .project-hero { grid-template-columns: 1fr; align-content: end; }
  .project-hero h1 { font-size: 15vw; }
  .project-image--wide { height: 72dvh; }
  .project-copy { min-height: 70dvh; padding-inline: 20px; }
  .project-copy p { margin-left: 0; }
  .project-gallery { grid-template-columns: 1fr; }
  .project-gallery figure { height: 65dvh; }
  .project-next { gap: 30px; }
}

/* --- Subtitulo de campana ------------------------------------------------ */
.campaign { max-width: 34ch; margin: 20px 0 0; color: var(--muted); font-size: .8rem; font-style: italic; line-height: 1.45; }

/* --- Piezas del catalogo --------------------------------------------------
   Ficha por pieza: nombre, precio, materiales y medidas. Sin boton de compra
   mientras no exista un link real de venta (ver project.js). */
.pieces { padding: 90px max(24px, 12vw) 0; }
.pieces > h2 { margin: 0 0 26px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pieces__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 34px; }
.piece { padding-top: 14px; border-top: 1px solid var(--line); }
.piece__name { margin: 0 0 6px; font-family: var(--script); font-size: 1.5rem; font-weight: 400; line-height: 1.05; color: var(--text); }
.piece__price { margin: 0 0 10px; color: var(--pink); font-size: .82rem; font-weight: 700; }
.piece__spec { margin: 0 0 4px; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.piece__spec--dim { color: #8d8a8b; }
.pieces__note { margin: 34px 0 0; color: var(--muted); font-size: .76rem; }
.pieces__note a { color: var(--pink); }
@media (max-width: 700px) { .pieces { padding-inline: 20px; } }

/* --- Creditos ------------------------------------------------------------
   Cada fila es rol / personas. Los handles enlazan a Instagram; los que el
   PROJECT.md documenta sin verificar se imprimen como texto plano y en gris.
   El credito de Queen Skittles va en magenta: es su ficha. */
.credits { padding: 110px max(24px, 12vw); }
.credits > h2 { margin: 0 0 26px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.credits dl { margin: 0; }
.credit { display: grid; grid-template-columns: minmax(150px, 22ch) 1fr; gap: 8px 24px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.credit:last-child { border-bottom: 1px solid var(--line); }
.credit dt { margin: 0; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.credit dd { margin: 0; font-size: .92rem; line-height: 1.85; }
.credit-name { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; }
a.credit-name { transition: color .15s ease, border-color .15s ease; }
a.credit-name:hover, a.credit-name:focus-visible { color: var(--pink); border-bottom-color: currentColor; }
span.credit-name { color: #928e90; }
.credit-name.is-queen { color: var(--pink); font-weight: 700; }

/* --- Foco visible --------------------------------------------------------- */
a:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 2px; }
header a:focus-visible { outline-color: #f1efed; }

/* --- Siguiente proyecto ---------------------------------------------------
   "Siguiente:" es utilidad de navegación (Pixel, heredado de .project-next a).
   El nombre del proyecto es el mismo dato que ya aparece en Nocturne en el
   índice y en el propio <h1> de esta página: debe nombrarse igual aquí. */
.project-next [data-next-name] { font-family: var(--script); font-size: 1.15em; text-transform: none; }

/* --- Proyecto inexistente -------------------------------------------------
   No se sustituye por otro caso en silencio: se muestra el error y se ocultan
   las secciones que dependen de datos. */
[data-state="missing"] .project-image--wide,
[data-state="missing"] .project-copy,
[data-state="missing"] .project-gallery,
[data-state="missing"] .credits { display: none; }
[data-state="missing"] .project-hero { min-height: 70dvh; }
[data-state="missing"] .project-next a[data-next] { display: none; }

@media (max-width: 700px) {
  .credits { padding: 70px 20px; }
  .credit { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; }
  .credit dd { line-height: 2; }
}