@font-face { font-family: "Inter"; src: url("fonts/Inter-latin-opsz.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Editorial New"; src: url("fonts/EditorialNew-Thin.woff2") format("woff2"); font-weight: 200; font-display: swap; }

:root {
  --ink: #000;
  --paper: #fff;
  --muted: #8a8a8a;
  --gutter: clamp(16px, 2.2vw, 44px);
  --side: 46vw;                              /* columna izquierda del proyecto */
  --list: clamp(40px, 7.5vw, 156px);         /* títulos de la portada y del proyecto */
  --ul: max(2px, .075em);                    /* grosor del subrayado en la sans */
  --nav: clamp(16px, 2.38vw, 44px);          /* cabecera y pie: +70% */
  --body: clamp(15px, 1.65vw, 30px);         /* texto de los proyectos */
  --small: clamp(13px, 1.1vw, 19px);
  /* Kerning: Editorial New -5%, Helvetica apretada */
  --track-serif: -0.05em;
  --track-sans: -0.06em;                   /* Helvetica en mayúsculas: la misma en toda la web */
  --track-text: -0.035em;
  --sp: .2em;                                /* ancho de un espacio en Editorial New (lo mide el JS) */
  --ease: cubic-bezier(.7, 0, .2, 1);
  --snap: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); color: var(--ink); }
body { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: var(--small); line-height: 1.25; letter-spacing: var(--track-text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
img { display: block; width: 100%; height: auto; }
[hidden] { display: none !important; }
.serif { font-family: "Editorial New", Georgia, serif; font-weight: 200; line-height: 1; letter-spacing: var(--track-serif); }

/* Cabecera y pie */
.top { position: fixed; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: var(--gutter); z-index: 30; background: var(--paper); color: var(--ink); font-size: var(--nav); letter-spacing: var(--track-sans); line-height: 1; }
.brand { text-transform: uppercase; display: flex; gap: 0.55em; flex-wrap: wrap; }
.brand b { font-family: "Inter", sans-serif; font-variation-settings: "opsz" 32; font-weight: 700; }
.nav { display: flex; gap: 1em; text-transform: uppercase; white-space: nowrap; }
.nav a:hover { text-decoration: underline; text-decoration-thickness: var(--ul); text-underline-offset: 0.14em; }
.brand a:hover { text-decoration: underline; text-decoration-thickness: var(--ul); text-underline-offset: 0.14em; }
.foot { position: fixed; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: end; padding: var(--gutter); font-size: var(--nav); letter-spacing: var(--track-sans); line-height: 1.05; z-index: 30; mix-blend-mode: difference; color: #fff; }
.foot a { display: block; }
.foot a:hover { text-decoration: underline; text-decoration-thickness: var(--ul); text-underline-offset: 0.14em; }
.legal { display: flex; align-items: baseline; gap: .55em; }
.legal b { font-family: "Inter", sans-serif; font-variation-settings: "opsz" 32; font-weight: 700; }
.lang { position: relative; }
.lang-btn { text-transform: uppercase; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { text-decoration: underline; text-decoration-thickness: var(--ul); text-underline-offset: 0.14em; }
.lang-menu { position: absolute; right: 0; bottom: 100%; list-style: none; padding-bottom: .15em; }
.lang-menu button { display: block; text-transform: uppercase; }
.lang-menu button:hover { text-decoration: underline; text-decoration-thickness: var(--ul); text-underline-offset: 0.14em; }
.lang-menu:not([hidden]) li { animation: up .3s var(--snap) both; }
@keyframes up { from { opacity: 0; transform: translateY(.4em); } }
body.in-project .foot { opacity: 0; pointer-events: none; }

/* Portada: lista centrada */
.list { list-style: none; min-height: 100vh; padding: calc(var(--gutter) * 2 + var(--nav) * 2.2) var(--gutter) calc(var(--gutter) * 6); }
.item { display: flex; justify-content: center; }
.item a { position: relative; display: inline-flex; padding-bottom: .3em; font-size: var(--list); }
.item .n { position: absolute; right: calc(100% + .6rem); top: .1em; font-size: var(--small); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.item .name { white-space: nowrap; }
#list.hovering { cursor: pointer; }
/* Hover: primero se abren las palabras y justo después aparece la imagen. Rápido. */
.gap { display: inline-block; position: relative; vertical-align: -0.04em; width: 0; height: .78em; margin: 0 0 0 var(--sp); overflow: hidden; transition: width .3s var(--snap) .04s, margin .3s var(--snap) .04s; }
.gap .ph { position: absolute; inset: 0; opacity: 0; transform: scale(1.12); transition: opacity .12s linear, transform .45s var(--snap); }
.item.on a .gap, .item a:focus-visible .gap { width: 2.2em; margin: 0 var(--sp); transition-delay: 0s; }
.item.on a .gap .ph, .item a:focus-visible .gap .ph { opacity: 1; transform: none; transition: opacity .22s linear .16s, transform .5s var(--snap) .16s; }
.item .meta { position: absolute; left: calc(100% + .9rem); top: 50%; font-size: var(--small); line-height: 1.25; text-transform: uppercase; white-space: nowrap; letter-spacing: var(--track-sans); opacity: 0; transform: translate(-6px, -50%); transition: opacity .12s, transform .3s var(--snap); pointer-events: none; }
.item.on a .meta, .item a:focus-visible .meta { opacity: 1; transform: translate(0, -50%); }
.item a:focus-visible { outline: none; }

/* Imágenes y marcadores */
.ph { position: relative; overflow: hidden; background: var(--tone, #e6e6e6) center / cover no-repeat; }
.ph[data-label]::after { content: attr(data-label); position: absolute; left: 12px; bottom: 10px; font: 500 11px/1 "Inter", sans-serif; letter-spacing: var(--track-sans); text-transform: uppercase; color: rgba(0,0,0,.45); }
.ph.dark::after { color: rgba(255,255,255,.5); }
.ph.video::before { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 1.5px solid #fff; border-radius: 50%; }
.ph.video .play { position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -6px; border-left: 18px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }

/* Título que viaja al centro y luego, con el scroll, a la izquierda */
.stage-title { position: fixed; left: 0; top: 0; z-index: 21; pointer-events: none; white-space: nowrap; transform-origin: 0 0; color: #000; will-change: transform; }
.stage-title .sgap { display: inline-block; width: 0; height: .78em; }

/* Proyecto */
.project { display: none; }
body.in-project .project { display: block; }
body.in-project #list, body.in-about #list { display: none; }
.p-intro { height: 100vh; }
.p-body { position: relative; z-index: 1; display: grid; grid-template-columns: max(calc(34.5vw - var(--gutter) * 3.5), calc(var(--list) * 4.6)) 1fr; column-gap: calc(var(--gutter) * 2.5); padding: 0 var(--gutter); }
.p-side { position: sticky; top: 0; align-self: start; min-height: 100vh; padding: calc(var(--gutter) * 4.2 + var(--nav)) 0 calc(var(--gutter) * 1.6); display: flex; flex-direction: column; }
.p-title { font-size: var(--list); white-space: nowrap; }
.p-text { margin-top: auto; padding-top: calc(var(--gutter) * 3); }
.p-text h2 { font-weight: 400; font-size: var(--nav); text-transform: uppercase; letter-spacing: var(--track-sans); line-height: 1; margin: 0 0 .45em; }
.p-text p { font-size: min(var(--body), 2.35vh); line-height: 1.06; letter-spacing: -0.045em; }
.p-text p + h2 { margin-top: 1.5em; }
.p-main { padding-top: calc(var(--gutter) * 2.6 + var(--nav)); }
.p-hero { aspect-ratio: 16/9; }
.g-yt { aspect-ratio: 16/9; background: #000; }
.g-yt iframe { display: block; width: 100%; height: 100%; border: 0; }
.g-link a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.p-hero video, .g-wide video { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-cap { display: flex; justify-content: space-between; gap: 1em; padding: .7em 0 0; font-size: var(--body); line-height: 1.12; }
.p-cap .cap-l { text-transform: uppercase; letter-spacing: var(--track-sans); font-size: var(--nav); line-height: 1.1; }
.p-cap .cap-l b { font-family: "Inter", sans-serif; font-variation-settings: "opsz" 32; font-weight: 700; }
.p-cap .cap-l a { color: inherit; text-decoration: none; }
.p-cap .cap-l a:hover { text-decoration: underline; text-decoration-thickness: var(--ul); text-underline-offset: 0.14em; }
.p-cap .cap-r { color: var(--muted); text-transform: uppercase; text-align: right; letter-spacing: var(--track-sans); }
.p-quote { font-size: calc(var(--list) * .85); margin: calc(var(--gutter) * 4) 0 calc(var(--gutter) * 1); max-width: 8.5em; }
/* Textos entre imágenes */
/* Mismo aire arriba y abajo: se recorta el texto a la altura de las mayúsculas y la línea base */
.g-text { margin-top: calc(var(--gutter) * 2.5); max-width: 24em; font-size: var(--body); line-height: 1.06; letter-spacing: -0.045em; text-box: trim-both cap alphabetic; }
.g-side { display: grid; grid-template-columns: 1fr 60%; gap: calc(var(--gutter) * 2.5); align-items: end; margin-top: calc(var(--gutter) * 2.5); }
.g-side .g-text { margin: 0; max-width: none; font-size: calc(var(--body) * 1.35); }
.g-side .g-mid { width: auto; margin: 0; }
.g-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--gutter) * 2.5); margin-top: calc(var(--gutter) * 2.5); }
.g-trio img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.g-trio.natural img { aspect-ratio: auto; }
.g-trio.quad { grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.g-side .g-mid video { display: block; width: 100%; }
.g-clients { margin-top: calc(var(--gutter) * 5); border-top: 2px solid var(--ink); padding-top: 1.2em; font-size: var(--body); line-height: 1.2; }
.g-clients h3 { font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-sans); margin-bottom: 1.2em; }
.g-clients ul { list-style: none; columns: 4; column-gap: calc(var(--gutter) * 2.5); letter-spacing: -0.045em; }
.g-credits { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--gutter) * 2.5); margin-top: calc(var(--gutter) * 5); }
.g-credits > div { border-top: 2px solid var(--ink); padding-top: 1.2em; font-size: var(--body); line-height: 1.06; }
.g-credits h3 { font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-sans); margin-bottom: .9em; }
.g-credits p { letter-spacing: -0.045em; }
.g-tall { grid-template-columns: 1fr auto; }
.g-tall .p-quote { margin: 0; align-self: end; max-width: none; font-size: var(--list); }
.g-side.flip { grid-template-columns: 60% 1fr; }
.g-side.narrow { grid-template-columns: 1fr 38%; }
.g-trio video { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-trio.tall > * { aspect-ratio: 9 / 16; object-fit: cover; }
.g-pair video { display: block; width: 100%; }
.g-side.flip .g-text { order: 2; }
.g-tall video { display: block; height: calc(100vh - var(--gutter) * 7); aspect-ratio: 9 / 16; width: auto; object-fit: cover; }
.g-tall img { display: block; height: calc(100vh - var(--gutter) * 7); width: auto; max-width: 100%; object-fit: contain; }
.g-wide, .g-pair, .g-mid { margin-top: calc(var(--gutter) * 2.5); }
.g-pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gutter) * 2.5); align-items: start; }
.g-mid { width: 60%; margin-left: auto; }
.g-wide.ph, .g-mid.ph { aspect-ratio: 16/9; }
.g-pair .ph { aspect-ratio: 4/5; }
.p-tail { height: 100vh; }
.ghost { position: fixed; inset: 0; z-index: 0; opacity: 0; pointer-events: none; }
.hold { visibility: hidden; }

/* Sobre mí */
body.in-about .foot { position: static; mix-blend-mode: normal; color: var(--ink); justify-content: flex-end; }
body.in-about .foot .social { display: none; }
.about { padding: calc(var(--gutter) * 2 + var(--nav) * 1.6) var(--gutter) calc(var(--gutter) * 3); }
.about > .portrait { position: relative; width: 44vw; margin: 0 auto; }
.about > .portrait > img:first-child { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
/* Firma «niko stankovic»: aparece al pasar el ratón por la foto, sin animación, y sobresale por la derecha como en la referencia */
.portrait .firma { position: absolute; left: 43.4%; top: 33%; width: 96%; height: auto; opacity: 0; pointer-events: none; }
.portrait:hover .firma { opacity: 1; }
.ab-top { display: flex; justify-content: space-between; gap: 1em; text-transform: uppercase; font-size: calc(var(--nav) * .6); letter-spacing: var(--track-sans); line-height: 1; margin-top: 22vh; }
.ab-lead { font-size: clamp(34px, 5.3vw, 240px); line-height: .98; margin-top: .12em; }
.ab-intro { display: grid; grid-template-columns: calc(34.5vw - var(--gutter) * 3.5) 1fr; gap: calc(var(--gutter) * 2.5); margin-top: calc(var(--gutter) * 5); }
.ab-text { max-width: 31em; }
.ab-text p { font-size: var(--body); line-height: 1.16; letter-spacing: -0.045em; }
.ab-text p + p { margin-top: .9em; }
.ab-sec { display: grid; grid-template-columns: calc(34.5vw - var(--gutter) * 3.5) 1fr; gap: calc(var(--gutter) * 2.5); margin-top: calc(var(--gutter) * 5); align-items: start; }
.ab-sec h2 { font-size: calc(var(--list) * .66); text-transform: uppercase; font-weight: 200; }
.rows { list-style: none; border-bottom: 2px solid var(--ink); }
.row { display: grid; grid-template-columns: 7.5em 1fr auto; column-gap: 1.2em; padding: 1.2em .6em; border-top: 2px solid var(--ink); font-size: calc(var(--body) * .9); text-transform: uppercase; letter-spacing: var(--track-sans); line-height: 1.2; }
.row p { grid-column: 2 / -1; margin-top: .9em; text-transform: none; letter-spacing: var(--track-text); line-height: 1.22; max-width: 44em; }
.row.two { grid-template-columns: 1.4fr 1fr; }
.row.tags p { grid-column: 1 / -1; margin: 0; text-transform: none; letter-spacing: var(--track-text); }
.row.tags.up p { text-transform: uppercase; letter-spacing: var(--track-sans); }
.ab-contact { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: calc(var(--gutter) * 9); font-size: clamp(34px, 5.3vw, 240px); line-height: 1; }
.ab-contact a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .1em; }

@media (max-width: 820px) {
  :root { --side: 100%; --nav: 16px; --list: 40px; --body: 16px; }
  .brand span { display: none; }
  .list { padding-top: calc(var(--gutter) * 5); }
  .item { justify-content: flex-start; padding-left: 2.6rem; }
  .item a { flex-wrap: wrap; padding-bottom: .5em; }
  .item .n { right: calc(100% + .5rem); }
  .item .meta { position: static; flex-basis: 100%; margin: .35em 0 0; opacity: 1; transform: none; color: var(--muted); white-space: normal; }
  .item .name { white-space: normal; }
  .p-body { grid-template-columns: minmax(0, 1fr); }   /* sin minmax, un título largo (Música) ensanchaba la columna y se salía de la pantalla */
  .p-side { position: static; height: auto; padding-top: calc(var(--gutter) * 4); }
  .p-text { margin-top: 1.6em; }
  .p-main { padding-top: var(--gutter); }
  .g-pair { gap: var(--gutter); }
  .g-mid { width: 78%; }
  .g-side, .g-side.flip { grid-template-columns: 1fr; }
  .g-side.flip .g-text { order: 0; }
  .g-trio { gap: var(--gutter); }
  .g-credits { grid-template-columns: 1fr; }
  .g-clients ul { columns: 2; }
  .g-tall video, .g-tall img { height: auto; width: 100%; }
  .ab-intro, .ab-sec, .ab-contact { grid-template-columns: 1fr; gap: 1.2em; }
  .ab-top { margin-top: 12vh; }
  .about > .portrait { width: 100%; }
  .ab-contact { font-size: 26px; word-break: break-all; }
  .row { grid-template-columns: 1fr; row-gap: .25em; font-size: 14px; }
  .row p { grid-column: 1; }
  .ab-sec { margin-top: calc(var(--gutter) * 3); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
.row p a { text-decoration: none; }
.row p a:hover { text-decoration: underline; text-decoration-thickness: var(--ul); text-underline-offset: .15em; }
.row > span:last-of-type:not(:first-child) { text-align: right; }
@media (max-width: 820px) { .row > span:last-of-type:not(:first-child) { text-align: left; } }
@media (max-width: 820px) { .g-trio.quad { grid-template-columns: repeat(2, 1fr); } }
.g-first { margin-top: 0; }
.g-solo { margin-top: calc(var(--gutter) * 2.5); display: flex; justify-content: center; }
.g-solo img { display: block; height: calc(100vh - var(--gutter) * 7); width: auto; max-width: 100%; }
@media (max-width: 820px) { .g-solo img { height: auto; width: 100%; } }
/* Sobre mí: los textos de dentro van justificados y terminan todos en la misma línea, donde empieza la columna de la derecha */
.row { grid-template-columns: 7.5em 1fr 30%; }
.row > span:nth-child(3) { white-space: nowrap; justify-self: end; }
.row p { grid-column: 2 / 3; max-width: none; text-align: justify; hyphens: manual; }
.row.tags p { grid-column: 1 / 3; }
.row.prose p + p { margin-top: .9em; }
@media (max-width: 820px) { .row { grid-template-columns: 1fr; } .row p, .row.tags p { grid-column: 1; } }
.g-note { margin-top: .7em; margin-left: auto; max-width: 38em; text-align: right; font-size: calc(var(--body) * .62); line-height: 1.25; color: var(--muted); }
.p-main video { background: var(--tone, #eee); }

/* Auditoría 2026-11-07: accesibilidad sin cambios visuales */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.in-project #home-h1 { display: none; }

/* Ajustes 2026-11-12 */
/* Todos los textos de la galería al mismo tamaño que el texto de la izquierda; el grande queda solo para la serif */
.g-text, .g-side .g-text { font-size: min(var(--body), 2.35vh); }   /* la misma fórmula que .p-text p */
/* Disciplinas y año: más pequeño y en una sola línea */
.p-cap { align-items: baseline; }
.p-cap .cap-d, .p-cap .cap-r { font-size: max(12px, calc(var(--nav) * .49)); }   /* cliente y disciplinas: 49 % del nombre (70 % dos veces) */
.p-cap .cap-r { white-space: nowrap; color: var(--ink); line-height: 1.1; }   /* igual que el texto del cliente: misma letra, tamaño y negro */
.g-duo video { display: block; width: 100%; height: auto; }
/* Dos imágenes de proporción distinta a la misma altura */
.g-duo { display: flex; gap: calc(var(--gutter) * 2.5); margin-top: calc(var(--gutter) * 2.5); }
.g-duo > div { min-width: 0; }
.g-credits h3 a:hover { text-decoration: underline; text-decoration-thickness: var(--ul); text-underline-offset: 0.14em; }
@media (max-width: 820px) { .g-duo { gap: var(--gutter); } .p-cap .cap-r { white-space: normal; } }
.p-cap .cap-d { letter-spacing: var(--track-sans); }   /* el kerning se calcula sobre su propio tamaño, igual que en .cap-r */

@media (max-width: 820px) { .portrait .firma { left: 28%; width: 70%; } }   /* en el móvil no puede salirse de la pantalla */