/* Atelier — main.css
   Orden: fuentes · variables · base · cabecera · home (escena, pila, grid) · archive · proyecto · about · contacto · cierre · cursores · experimentos.
   Cada bloque lleva su propio @media: móvil (max-width:820px) y escritorio (min-width:821px). */

/* ========== Fuentes ========== */
@font-face{font-family:"Neuzeit S";font-weight:400;font-display:swap;src:url("../fonts/NeuzeitS-Book.woff2") format("woff2"),url("../fonts/NeuzeitS-Book.woff") format("woff")}
@font-face{font-family:"Neuzeit S";font-weight:700;font-display:swap;src:url("../fonts/NeuzeitS-Heavy.woff2") format("woff2"),url("../fonts/NeuzeitS-Heavy.woff") format("woff")}
@font-face{font-family:"Bradford LL";font-weight:400;font-display:swap;src:url("../fonts/Bradford-Book.woff2") format("woff2")}
@font-face{font-family:"Bradford LL";font-weight:400;font-style:italic;font-display:swap;src:url("../fonts/Bradford-BookItalic.woff2") format("woff2")}
@font-face{font-family:"Bradford LL";font-weight:500;font-display:swap;src:url("../fonts/Bradford-Medium.woff2") format("woff2")}
@font-face{font-family:"Bradford LL";font-weight:700;font-display:swap;src:url("../fonts/Bradford-Bold.woff2") format("woff2")}

/* ========== Variables ==========
   Retícula: 1 u = 1 px del storyboard a 1920 de ancho (820 en móvil). Márgenes 25 u. Blanco y negro puros; el color lo pone cada proyecto.
   Escala tipográfica (múltiplos de 6 u):
     Neuzeit (estructura): 15 · 18 · 24 · 48 · 96 u (XS · S · M · L · XL), más el nombre gigante. XS (--t15) solo para fuentes y enlaces de la nota sobre Claude.
     Bradford (voz):       15 · 18 · 24 · 30 u, cada uno × --bo = 1,05 para igualar la altura de x de la Neuzeit
                           (medido: Neuzeit 0,500 em · Bradford Book 0,474 · Medium 0,476 · Bold 0,482).
   Estilos de la Bradford: texto corrido Book 400 · cliente y subtítulo Medium 500 · cursiva Book Italic.
   Tracking: meta y texto −.025 · L −.04 · XL y gigante −.05 · Bradford −.01 (Medium) / −.005 (Book).
   Interlineado: Bradford 1,2 en clientes · 1,3 en texto de 24 · 1,25 en la frase de 30; meta en varias líneas 1,5. */
:root{
  --u:calc(100vw / 1920);
  --bg:#ffffff; --fg:#000000; --dim:#8c8c8c; --rule:#000000; --panel:#000000;
  --sans:"Neuzeit S","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Bradford LL","Times New Roman",Times,serif;
  --m:max(16px,calc(25 * var(--u)));
  --gx:max(16px,env(safe-area-inset-left,0px),calc(25 * var(--u)));
  --gxr:max(16px,env(safe-area-inset-right,0px),calc(25 * var(--u)));
  /* Neuzeit */
  --nav:max(13px,calc(24 * var(--u)));
  --meta:max(12px,calc(18 * var(--u)));
  --client:var(--meta);
  --t15:max(10px,calc(15 * var(--u)));
  --t24:max(13px,calc(24 * var(--u)));
  --t30:max(15px,calc(30 * var(--u)));
  --t48:max(20px,calc(48 * var(--u)));
  --t96:max(28px,calc(96 * var(--u)));
  /* Bradford */
  --bo:1.05;
  --b15:calc(var(--t15) * var(--bo));
  --b18:calc(var(--meta) * var(--bo));
  --b24:calc(var(--t24) * var(--bo));
  --b30:calc(var(--t30) * var(--bo));
  /* Nombre gigante (entrada y cierre): mismo tamaño y posición, bajo la cabecera */
  --ogiant:min(calc(309 * var(--u)),calc((100vh - var(--hdr-h0,50px) - var(--m) * 2.6) / 3.5));
  --giant-lh:0.83;
  --ease:cubic-bezier(.72,0,.18,1);
  /* grosor de los subrayados: proporcional al cuerpo del texto (nunca menos de 1,5 px) */
  --ul:max(1px,.06em);
}
@media (max-width:820px){:root{--u:calc(100vw / 820)}}
/* Inicio de títulos unificado: Projects, Archive y About arrancan a la misma altura */
@media (min-width:821px){:root{--title-y:55vh}}

/* ========== Base ========== */
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--t24)/1.25 var(--sans);letter-spacing:-.025em;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .5s var(--ease),color .5s var(--ease)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
i{font-style:normal}
em{font-style:italic}
main{position:relative}
.pad{padding-left:var(--gx);padding-right:var(--gxr)}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:.5em 1em;z-index:100}
.skip:focus{left:var(--gx)}
/* Bradford: cifras antiguas */
.cap .c,.meta .client,.proj .cl,.proj .pl,.blk-ti .txt,.about .man,.about .bio,.sector h3,.ci,.hfx.av-index.av-client .arch .arow .cl{font-variant-numeric:oldstyle-nums;font-feature-settings:"onum" 1}
/* Bradford: texto corrido siempre en Book 400 (también los h/negritas que vienen del sitio antiguo) */
@media (min-width:821px){
  .blk-ti .txt h1,.blk-ti .txt h2,.blk-ti .txt h3,.blk-ti .txt h4,.blk-ti .txt h5,.blk-ti .txt strong,.blk-ti .txt b,.about .man,.about .bio,.about .bio strong,.about .bio b{font-weight:400}
}
/* Clientes separados por « · »: se parten entre elementos; el punto se centra en la altura de x (0,13 em, solo óptico) */
.ci{display:inline-block;max-width:100%;vertical-align:baseline}
.ci .dot{position:relative;top:.13em}
/* Letras con kerning por pares: siempre en línea (.tag span / .oname span las volverían bloque) */
.kp{display:inline!important}
/* Barra de administración (usuario con sesión) */
body.admin-bar{--adm:32px}
@media (max-width:782px){body.admin-bar{--adm:46px}}
body.admin-bar .hdr,body.admin-bar .gt{top:var(--adm)}

/* ========== Cabecera ========== */
.hdr{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;background:var(--bg);font-size:var(--nav);line-height:1;transition:background-color .5s var(--ease),color .5s var(--ease)}
body:not(.brand-on) .hdr{background:transparent}
.hdr .row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;column-gap:1em;padding-top:var(--m);padding-bottom:calc(var(--m) * .6)}
#brand{white-space:nowrap;opacity:0} /* sin fundido: el nombre XL, ya del mismo tamaño y en la misma posición, se cambia por el de la cabecera en el mismo instante */
body.brand-on #brand{opacity:1}
.hdr .lang{white-space:nowrap;justify-self:center}
.hdr .nav{display:flex;gap:calc(20 * var(--u));justify-self:end;white-space:nowrap}
.hdr .nav a,.hdr .lang a{border-bottom:var(--ul) solid transparent;padding-bottom:.08em}
.hdr .nav a.active,.hdr .lang a.active{border-bottom-color:currentColor}
/* escritorio: En / Es a la derecha, junto a Projects / Archive / Info; el centro queda vacío. Separación idioma–menú = cuatro veces la separación entre enlaces (4 × 20 u) */
@media (min-width:821px){
  .hdr .row{grid-template-columns:minmax(0,1fr) auto auto;column-gap:calc(80 * var(--u))}
  .hdr .lang{justify-self:end}
}
/* Sub-barra (categorías / título del proyecto): aparece con un fundido, sin deslizarse */
.hdr .sub{font-size:var(--meta);line-height:1;min-height:0;height:0;overflow:hidden;opacity:0;transition:opacity .7s ease,height 0s linear .7s}
.hdr .sub.on{height:calc(var(--meta) + 10px);opacity:1;padding-bottom:4px;transition:opacity .7s ease,height 0s linear 0s}
.hdr .sub-proj.on{height:calc(var(--nav) * 1.25 + 8px);padding-bottom:0}
.cats{text-align:right}
.cats a{border-bottom:var(--ul) solid transparent;padding-bottom:.1em}
.cats a.active{border-bottom-color:currentColor}
.cats a:hover{border-bottom-color:currentColor}
.cats i{margin:0 .9em}
.ptitle{margin:0 0 0 auto;text-align:right;font-size:var(--nav);line-height:1.2;max-width:min(100%,calc(1100 * var(--u)));white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* título del proyecto al hacer scroll: a la derecha, bajo el menú, sin cortarse */
@media (max-width:820px){
  .hdr .row{grid-template-columns:1fr auto;row-gap:.5em}
  .hdr .lang{grid-column:1;grid-row:2;justify-self:start}
  .hdr .nav{gap:.8em;flex-wrap:wrap;justify-content:flex-end;grid-column:2;grid-row:1/3}
  .cats{text-align:left}
}
@media (min-width:821px){.cats{letter-spacing:-.025em}}

/* Móvil: tamaño de referencia de los elementos XXL (el del menú): 17,5 vw, como mucho 88 px */
:root{--xxl-m:min(17.5vw,88px)}
/* Móvil: la escala tipográfica acordada (a 390 px de ancho): XXL 68 · XL 46 · L 23 · M 19 · S 16. Nada de texto por debajo de S */
@media (max-width:820px){:root{--m-xxl:var(--xxl-m);--m-xl:var(--t96);--m-l:var(--t48);--m-m:calc(var(--t48) * .85);--m-s:calc(var(--t48) * .7)}}
/* Móvil: «Menú» abre un panel a pantalla completa que entra desde la derecha, con los enlaces apilados y grandes; Español / English abajo, al alcance del pulgar */
.mtog,.mnav{display:none}
@media (max-width:820px){
  .hdr .row{grid-template-columns:minmax(0,1fr) auto;row-gap:0;font-size:18px;letter-spacing:-.02em}
  .hdr .row > .lang,.hdr .row > .nav{display:none}
  .mtog{display:block;justify-self:end;margin:-12px -12px -12px 0;padding:12px 12px 12px 18px;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mtog .c,html.m-open .mtog .o{display:none}
  html.m-open .mtog .c{display:inline}
  .mnav{display:flex;flex-direction:column;justify-content:space-between;gap:calc(var(--m) * 2);position:fixed;left:0;right:0;top:var(--adm,0px);bottom:0;z-index:-1;padding:calc(var(--hdr-h0,50px) + var(--m) * 1.2) var(--gxr) calc(var(--m) * 1.5 + env(safe-area-inset-bottom,0px)) var(--gx);background:var(--bg);color:var(--fg);transform:translateX(100%);visibility:hidden;overflow-y:auto;overscroll-behavior:contain;transition:transform .45s var(--ease),visibility 0s linear .45s}
  html.m-open .mnav{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
  .mnav a{text-decoration:none;color:inherit}
  .mnav-g a.active{text-decoration:underline;text-decoration-thickness:max(2px,.045em);text-underline-offset:.1em} /* en el menú XXL solo se subraya el idioma; los enlaces, nunca */
  .mnav-l{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--xxl-m);line-height:var(--giant-lh);letter-spacing:-.05em}
  .mnav-l a[href*="/archive/"]{transform:translateX(.075em)} /* la h de «Archivo/Archive» un poco más a la derecha: la y de «Proyectos» y la j de «Projects» no la tocan */
  .mnav-g{font-size:var(--xxl-m);line-height:var(--giant-lh);letter-spacing:-.05em;white-space:nowrap}
  html.m-open #brand{opacity:1}
  .mtog{transition:opacity .5s ease}
  body:has(#stage):not(.brand-on) .mtog{opacity:0;pointer-events:none} /* home: «Menú» aparece con un fundido justo cuando el nombre gigante termina de encogerse en la cabecera */
  html.m-open .hdr{background:var(--bg)}
  html.m-open .hdr .sub{visibility:hidden}
  html.m-open,html.m-open body{overflow:hidden}
}
/* móvil: el nombre gigante cabe a lo ancho («Atelier» y «Herrera» miden unos 3,05 em) */
@media (max-width:820px){:root{--ogiant:var(--xxl-m)}#tag.tag{bottom:calc(var(--m) * 1.5 + env(safe-area-inset-bottom,0px))}} /* móvil: el nombre de la entrada y el XXL, al tamaño de referencia (el del menú) */

/* ========== Home: escena de entrada ========== */
.stage{position:relative}
.stage .sticky{position:sticky;top:var(--adm,0px);height:calc(100vh - var(--adm,0px));height:calc(100dvh - var(--adm,0px));overflow:hidden}
.title{position:absolute;left:var(--gx);top:calc(var(--hdr-h0,50px) + var(--m) * 1.2);margin:0;font-weight:400;font-size:var(--ogiant);line-height:var(--giant-lh);letter-spacing:-.05em;transform-origin:0 0;will-change:transform;z-index:55} /* por encima de la cabecera (50): al encogerse hacia ella, la franja blanca nunca la tapa */
html.m-open .title,html.m-open .tag,html.m-open .cap,html.m-open .vcur{visibility:hidden} /* con el menú abierto, el nombre gigante no se pone encima */
.title .l{display:block;width:max-content;white-space:nowrap;transform-origin:0 0;will-change:transform}
.tag{position:absolute;left:0;bottom:calc(var(--m) + env(safe-area-inset-bottom,0px));margin:0;font-size:var(--ogiant);line-height:var(--giant-lh);letter-spacing:-.05em;white-space:nowrap;transform-origin:0 100%;will-change:transform,opacity;z-index:5}
.tag span{display:block}

/* Pila de imágenes */
.pile{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none}
.pile img{position:absolute;max-width:min(80vw,calc(1100 * var(--u)));max-height:80vh;width:auto;height:auto;object-fit:contain;opacity:0;will-change:transform,opacity}
.pile img.on{opacity:1}
/* Referencia de la pila (vive en <body>): arriba, bajo el nombre, con mezcla «difference» */
.cap{position:fixed;z-index:45;left:var(--gx);top:calc(var(--adm,0px) + var(--hdr-h0,50px) + var(--m) * 1.2);margin:0;display:block;max-width:calc(100vw - 2 * var(--gx));color:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .3s}
.cap.on{opacity:1}
.cap.solo{mix-blend-mode:normal;color:#000} /* entre imagen e imagen, el pie solo, en negro sobre blanco */
.cap .t{display:block}
.cap .lbl{display:block;font-family:var(--sans);font-weight:400;font-size:var(--t48);line-height:1;letter-spacing:-.04em;margin:0 0 calc(var(--b30) * 1.2)} /* versión B: «Destacados», como los títulos «Proyectos» y «Archivo» */
.cap .c{display:block;font-family:var(--serif);font-weight:500;font-size:calc(var(--nav) * 1.08);line-height:1.05;letter-spacing:-.01em;margin:0 0 1.2em}
.cap .tt{display:block;max-width:calc(50vw - var(--gx));font-family:var(--sans);font-weight:400;font-size:var(--t96);line-height:1;letter-spacing:-.05em;text-wrap:balance}
@media (hover:hover) and (pointer:fine){.cap .vp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:820px){.cap{display:none}}
@media (min-width:821px){.cap .c{font-size:var(--b30);line-height:1.2}}
/* Etiqueta «View →» junto al cursor (escritorio con ratón) */
.vcur{position:fixed;left:0;top:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .09s;display:flex;align-items:center;gap:.3em;background:none;color:#fff;mix-blend-mode:difference;font-family:var(--sans);font-weight:400;font-size:var(--t96);line-height:1;letter-spacing:-.03em;padding:0;border-radius:0;white-space:nowrap;will-change:transform}
.vcur svg{display:block;width:1.05em;height:.7em;flex:none;overflow:visible}
.vcur.on{opacity:1}
html.vcur-hit,html.vcur-hit body{cursor:pointer}

/* ========== Home: grid de proyectos ========== */
/* Tras la pila: pantalla casi vacía; el título «Projects» asoma abajo. Cierre: dos renglones del tamaño del nombre */
.grid{padding-top:calc(100vh - var(--t24) * 1.25 - 22 * var(--u));padding-bottom:calc(var(--m) * 5 + var(--ogiant) * var(--giant-lh))}
.grid > .label,.arch .label{font-size:var(--t24);letter-spacing:-.01em;margin:0 0 calc(22 * var(--u))}
.rows{display:grid;gap:calc(70 * var(--u)) 0}
.row{display:grid;gap:calc(35 * var(--u));grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:start}
.row[hidden]{display:none}
.cell{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(14 * var(--u));min-width:0}
.cell.is-hidden{display:none}
.cell .img{position:relative;display:block;width:100%;overflow:hidden}
.cell .img img{width:100%;height:auto;display:block;max-width:100%}
/* Carrusel al pasar el cursor: fundido entre fotogramas, cada uno con su proporción */
.cell .img .fr{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:contain;background:var(--pbg,var(--bg));opacity:0;transition:opacity .55s ease;pointer-events:none}
.cell .img .fr.on{opacity:1}
/* Texto bajo la imagen: apilado y alineado a la izquierda (1, 2 y 4 columnas) */
.meta{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(14 * var(--u));line-height:1.2;justify-items:start}
.meta .client{font-family:var(--serif);font-size:var(--client);letter-spacing:-.01em;font-weight:500}
.meta .ttl{font-size:var(--t24);margin:0;font-weight:400;letter-spacing:-.025em;line-height:1.05;text-wrap:pretty}
.tags{font-size:var(--meta);letter-spacing:-.025em;line-height:1.5;white-space:normal;overflow-wrap:normal;display:inline}
.tags a{display:inline;white-space:nowrap;border-bottom:var(--ul) solid transparent;padding-bottom:.08em}
.tags a:hover{border-bottom-color:currentColor}
.tags i{margin:0 .8em}
.tags i::after{content:"\200b"}
.empty{font-size:var(--t24);color:var(--dim);padding-block:calc(var(--m) * 2)}
@media (max-width:820px){.row[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.row[data-n="4"],.row[data-n="2"]{grid-template-columns:1fr}}
@media (min-width:821px){.meta .client{font-size:var(--b18)}}

/* ========== Archive ========== */
.arch{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.arch .list{grid-column:1/-1;padding-top:calc(var(--m) * 6);padding-bottom:calc(var(--m) * 4 + var(--ogiant) * var(--giant-lh) * .91)}
.arow{display:grid;grid-template-columns:3fr 1fr;align-items:start;gap:calc(35 * var(--u));border-top:1px solid var(--rule);padding:calc(13 * var(--u)) 0 calc(14 * var(--u));font-size:var(--t48);line-height:1;letter-spacing:-.04em;margin:0;--ind:calc(200 * var(--u));--nofs:var(--t48)}
.arow:last-child{border-bottom:1px solid var(--rule)}
/* hueco entre filas (sin hover): al pasar entre dos líneas la lista vuelve a verse completa */
.arch .arows .arow + .arow{margin-top:calc(26 * var(--u))}
.arow .t{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.02}
.arow .t a:hover{border-bottom:0}
.arow .tags{align-self:start;text-align:right;transition:opacity .2s;min-width:0;padding-top:calc(var(--t48) * 0.1);line-height:1.25}
.arch .arow .cl{display:none}
/* número de inventario (con punto) y año: columna que termina en el borde derecho de la palabra «Archive / Archivo» (--archw, medido en main.js; el punto sobresale).
   Número arriba, con su altura de mayúscula alineada con la del título (--nody, medido en main.js); año siempre en S, completo (2024), abajo y al margen izquierdo, como los rótulos de los filtros.
   Títulos alineados con las opciones de los filtros (200 u, como .sortbar .lab). Tamaño del número según el tamaño de texto: S con texto S; L con texto M, L y XL */
.av-s .arow{--nofs:var(--meta)}
.arow .ac{position:relative;display:block;margin-left:var(--ind);min-height:calc(var(--nofs) * .9 + var(--meta) * 1.6)}
.arow .ac .t{display:block}
.arow .ix{position:absolute;top:0;bottom:0;left:calc(-1 * var(--ind));width:var(--archw, calc(var(--t48) * 3.4));display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:var(--meta);line-height:1.25;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:821px){.arow .ac .tags{display:block}}
.arow .no{position:relative;top:var(--nody, 0px);font-size:var(--nofs);line-height:.8;letter-spacing:-.04em}
.av-s .arow .no{letter-spacing:-.025em}
.arow .no .dt{position:absolute;left:100%}
.arow .yr{align-self:flex-start}
.arow .yr .y2{display:none}
/* texto S (escritorio): año arriba, en la misma línea que el número (año al margen, número al borde de «Archive»): filas de una sola línea cuando el título cabe. En móvil no caben juntos: siguen apilados */
@media (min-width:821px){
  .av-s .arow .ix{flex-direction:row-reverse;justify-content:space-between;align-items:flex-start}
  .av-s .arow .yr{position:relative;top:var(--nody, 0px);line-height:.8;white-space:normal;max-width:calc(var(--archw, 100px) - var(--meta) * 2.6)} /* un intervalo (2009—2020) que no cabe junto al número pasa a dos líneas */
  .av-s .arow .ac{min-height:0}
  .av-s .arow .no{flex-shrink:0}
}
.sortbar{display:none}
.arch .panel{position:fixed;top:var(--hdr-h,64px);bottom:0;right:0;width:50%;background:var(--panel);display:grid;place-items:center;z-index:40;opacity:0;pointer-events:none}
.arch .panel.on{opacity:1}
/* todas las imágenes del panel en el mismo marco: la caja entera menos dos márgenes por lado, escaladas sin recortar (las apaisadas usan todo el ancho, las verticales todo el alto) */
.arch .panel img{position:absolute;top:calc(2 * var(--m));left:calc(2 * var(--m));width:calc(100% - 4 * var(--m));height:calc(100% - 4 * var(--m));object-fit:contain} /* caja fija dentro del panel: la imagen entera siempre cabe en la pantalla */
.arch .panel.on ~ .list .arow .tags{opacity:0}
@media (max-width:820px){
  .arch .panel{display:none}
  .arow{font-size:max(18px,calc(32 * var(--u)));grid-template-columns:1fr}
  .arow .tags{display:none}
}
@media (min-width:821px){
  .arch .list{padding-top:calc(50vh - var(--t48) * .5)} /* el rótulo «Archive» centrado a media altura de la pantalla (antes 55vh, algo más abajo) */
  /* etiquetas en una sola línea: toman el ancho que necesitan y el título cede el espacio */
  .arch .arow{grid-template-columns:minmax(0,1fr) auto}
  .arch .arow .tags{white-space:nowrap}
}

/* ========== Proyecto ========== */
.proj{padding-bottom:calc(var(--m) * 4)}
.proj .head{text-align:center;padding-top:calc(246 * var(--u));display:grid;justify-items:center;gap:calc(26 * var(--u))}
.proj .cl{font-family:var(--serif);font-size:var(--t24);letter-spacing:-.01em;line-height:1.2;margin:0}
.proj .cl b{font-weight:500}
.proj h1{font-size:var(--t96);line-height:1;letter-spacing:-.05em;font-weight:400;margin:0;max-width:calc(1300 * var(--u));text-wrap:balance}
.proj .deliv{font-size:var(--meta);line-height:1.6;max-width:calc(1100 * var(--u));margin:0;text-align:center;text-wrap:balance} /* bloque centrado de ancho limitado: los créditos largos se parten en un bloque compacto */
.proj .deliv i{margin:0 .9em;font-style:normal}
.proj .deliv .dl{display:block}
.proj .deliv .di{white-space:nowrap}
.proj .deliv .di.dw{white-space:normal;text-wrap:balance} /* créditos más anchos que el bloque: se parten dentro del ancho máximo, en bloque equilibrado */
.proj .link{font-size:var(--meta);margin:0}
.proj .notes{font-size:var(--meta);line-height:1.6;max-width:calc(1100 * var(--u));margin:calc(var(--meta) * 1.6 - 26 * var(--u)) 0 0;text-align:center;text-wrap:balance} /* notas adicionales: una línea en blanco tras los entregables, sin viñetas */
.proj .link a{border-bottom:var(--ul) solid currentColor}
.proj .body{display:grid;gap:calc(70 * var(--u));padding-top:calc(200 * var(--u))}
.blk-ti{display:grid;grid-template-columns:1fr 1fr;gap:calc(45 * var(--u));align-items:start}
.blk-ti .txt{font-family:var(--serif);font-size:var(--t24);line-height:1.3;letter-spacing:-.005em;max-width:calc(912 * var(--u))}
.blk-ti .txt p{margin:0 0 1em}
.blk-ti img,.blk-im img{width:100%;height:auto;display:block}
.blk-im{display:grid;gap:calc(35 * var(--u));grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.blk-im > img{grid-column:span var(--w,4)} /* Mix: 1/4, 1/2, 3/4 o entero (--w desde single.php) */
.proj .foot{padding-top:max(calc(380 * var(--u)),140px);font-size:var(--t24);display:flex;justify-content:space-between;gap:1em}
.proj .foot a{border-bottom:var(--ul) solid currentColor}
@media (max-width:820px){
  .proj .head{padding-top:calc(var(--m) * 6)}
  .proj h1{font-size:max(28px,calc(64 * var(--u)))}
  .blk-ti{grid-template-columns:1fr}
}
@media (max-width:480px){.blk-im{grid-template-columns:1fr}.blk-im > img{grid-column:auto}}
@media (min-width:821px){
  .proj .cl{font-size:var(--b30)}
  .blk-ti .txt{font-size:var(--b24)}
  .proj .deliv,.proj .foot,.proj .link{letter-spacing:-.025em}
  .proj .deliv{line-height:1.5}
}

/* Página genérica (page.php) */
.generic{padding-top:calc(var(--m)*6);max-width:70ch}
.generic h1{font-size:var(--t48);line-height:1;letter-spacing:-.04em;font-weight:400;margin:0 0 1em}
.generic .content p{margin:0 0 1em}

/* ========== About ==========
   Secciones separadas 380 u (mín. 140 px); el statement abre la página; cierre igual que la home. */
.about{padding-bottom:calc(var(--ogiant) * var(--giant-lh) * 1.3)}
.about .sec{padding-top:max(calc(380 * var(--u)),140px)}
.about .sec.hero{padding-top:calc(var(--m) * 2.2)}
.about h2{font-size:var(--t48);line-height:1;letter-spacing:-.04em;font-weight:400;margin:0 0 calc(30 * var(--u))}
.about .two{display:grid;grid-template-columns:1fr 1fr;gap:calc(45 * var(--u));align-items:start}
.about .two img{width:100%;height:auto;display:block}
.about .intro{font-size:var(--t48);line-height:1.05;letter-spacing:-.04em;margin:0 0 calc(70 * var(--u))}
/* Statement: titular grande sin título; «Philosophy» encabeza el texto Bradford con el mismo respiro que entre secciones */
.about .hero .txt{position:relative;padding-top:50vh}
.about .hero .hero-t{margin:max(calc(380 * var(--u)),140px) 0 calc(30 * var(--u))}
.about .hero .stick{position:sticky;top:calc(var(--hdr-h,64px) + var(--m));align-self:start}
.about .hero .stick img{width:100%;height:auto}
.about .man{font-family:var(--serif);font-size:var(--t30);line-height:1.25;letter-spacing:-.005em}
.about .man p,.about .bio p{margin:0 0 1em}
/* la línea base de la última línea del texto = borde inferior de la imagen (al final del scroll) */
.about .hero .man p:last-child{margin-bottom:-.365em}
/* Biografía (una columna ancha) + contacto */
.about .bio{font-family:var(--serif);font-size:var(--t24);line-height:1.3;letter-spacing:-.005em}
.about .contact{font-size:var(--t48);line-height:1.05;letter-spacing:-.04em;align-self:start;position:sticky;top:calc(var(--hdr-h,64px) + var(--m))}
.about .contact p{margin:0 0 1em}
.about .contact p span{display:block}
.about .contact .gt-open{margin:0 0 1em}
.about .contact .gt-open a{border-bottom:var(--ul) solid currentColor;padding-bottom:.04em}
/* «Formerly»: una columna en la posición 3/4 de la retícula */
.about .contact .former{margin-top:1em}
.about .contact .former,.about .contact .former *{letter-spacing:-.025em}
.about .contact .former .fl{font-size:var(--t24);line-height:1.25;margin:0 0 calc(var(--meta) * 4.8)} /* «Before / Antes» en M y con más aire antes de las direcciones que entre ellas (≈ 1,5 ×) */
.about .contact .former .fg{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2em 0}
.about .contact .former .fg p{margin:0;font-size:var(--meta);line-height:1.4}
/* años de cada estudio como etiqueta: arriba, sin paréntesis, con raya como en el Archive y separados de la dirección */
.about .contact .former .fg .fy{display:block;margin:0 0 .55em;font-variant-numeric:lining-nums tabular-nums}
/* Clientes: hueco entre categorías = hueco entre el título y la primera categoría */
.sector h3{font-family:var(--serif);font-size:var(--t24);font-weight:500;letter-spacing:-.005em;margin:0 0 calc(18 * var(--u))}
.sector p{font-size:var(--t48);line-height:1.15;letter-spacing:-.04em;margin:0}
.sector .loc{font-size:var(--meta);letter-spacing:-.025em;line-height:0;vertical-align:0;position:relative;top:calc((var(--meta) - var(--t48)) * .752);margin-left:calc(var(--t24) * .75);white-space:nowrap} /* ciudad y país de cada cliente: superíndice alineado a la altura de las mayúsculas */
.about .sector + .sector{margin-top:calc(var(--t48) * 1.05)}
/* Becas, copyright y colofón */
.about .small{font-size:var(--t24);line-height:1.25}
.about .small p{margin:0 0 .6em}
.about .legal{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:max(calc(380 * var(--u)),140px) calc(45 * var(--u));align-items:start}
/* la última sección (notas, o legal si no hay notas) cierra con 240 u */
.about > .sec:last-of-type{padding-bottom:max(calc(240 * var(--u)),96px)}
.about .legal > div:first-child{grid-column:1;grid-row:1}
.about .legal > div:last-child{grid-column:2;grid-row:2}
.about .legal h2{margin-bottom:calc(14 * var(--u))}
.about .legal .b{margin-bottom:calc(60 * var(--u))}
/* Nota sobre Claude (sección propia; la reescribe cada semana una tarea programada), en la columna derecha:
   declaraciones (primer y último bloque) en Neuzeit M · noticias: titular Neuzeit S, texto Bradford M, fuentes y enlaces Neuzeit XS · aviso en Neuzeit S, antes de la declaración final */
.about .notes{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(45 * var(--u))}
.about .notes > div{grid-column:2;--nl:calc(var(--t24) * 1.25)}
.about .notes a{border-bottom:var(--ul) solid currentColor;padding-bottom:.04em;overflow-wrap:anywhere}
.about .notes .st{margin:0 0 var(--nl);font-size:var(--t24);line-height:1.25}
.about .notes .ni{margin:0 0 var(--nl)}
.about .notes h3{margin:0 0 .35em;font-size:var(--meta);font-weight:400;line-height:1.25;letter-spacing:-.025em}
.about .notes .bd{margin:0 0 .5em;font-family:var(--serif);font-size:var(--b18);line-height:1.3;letter-spacing:-.005em;font-variant-numeric:oldstyle-nums;font-feature-settings:"onum" 1}
.about .notes .src{margin:0;font-size:var(--t15);line-height:1.4;letter-spacing:-.025em}
.about .notes .auto{margin:0 0 var(--nl);font-size:var(--meta);line-height:1.4;letter-spacing:-.025em}
@media (max-width:820px){
  .about .two,.about .legal{grid-template-columns:1fr}
  .about .legal > div:last-child{grid-column:1}
  .about .notes{grid-template-columns:1fr}
  .about .notes > div{grid-column:1}
}
@media (min-width:821px){
  .about .hero .txt{padding-top:calc(78vh - 87 * var(--u));padding-top:calc(78svh - 87 * var(--u))}
  .about .man{font-size:var(--b30)}
  .about .bio,.sector h3{font-size:var(--b24)}
  .sector h3{line-height:1.3}
  .about .contact .former{margin-left:calc((100% + 45 * var(--u)) / 2)}
  /* contacto (con las direcciones anteriores) aparece 2 × XL antes que la biografía, que baja 12 × XL (1152 u): el contacto queda fijo (sticky) mientras la biografía sube; terminan juntos */
  .about .bio-sec > :first-child{margin-top:calc(1152 * var(--u))}
  .about .bio-sec .contact{margin-top:calc(-192 * var(--u))}
  /* Becas y premios queda fijo un rato mientras llega el bloque de copyright y se va antes que él (desigual): ocupa las dos filas y su margen inferior
     (45 % de la altura del copyright, --cph) acorta su recorrido fijo; el copyright baja la altura de Becas (--lgh) para mantener la diagonal: fila 1 a la izquierda, 380 u, fila 2 a la derecha. Medidas en main.js */
  .about .legal > div:first-child{grid-row:1 / span 2;position:sticky;top:calc(var(--hdr-h,64px) + var(--m));margin-bottom:calc(var(--cph, 0px) * .45)}
  .about .legal > div:last-child{margin-top:var(--lgh, 0px)}
  .about .bio p:last-child{margin-bottom:0}
/* textos legales en prosa (Aviso legal, Privacidad, Prácticas), tras copyright y colofón: Bradford en cuerpo pequeño, como el texto de la nota sobre Claude; las listas y créditos (becas, copyright, colofón) siguen en Neuzeit */
.about .small.prose{font-family:var(--serif);font-size:var(--b18);line-height:1.3;letter-spacing:-.005em;font-variant-numeric:oldstyle-nums;font-feature-settings:"onum" 1}
/* Aviso legal, Privacidad y Prácticas forman un bloque aparte, separado del colofón (más aire que entre bloques, menos que entre secciones) */
.about .legal .b:not(.pz) + .b.pz{margin-top:calc(180 * var(--u))} /* el margen inferior del colofón se funde con este: queda 180 u */
/* la nota sobre Claude, más cerca del final de la sección legal (antes 380 u) */
.about .sec.notes{padding-top:calc(200 * var(--u))}
}

/* ========== Contacto: ventana a pantalla completa ========== */
.gt{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none;color:#000;background:#e8e5de;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.gt::-webkit-scrollbar{display:none;width:0;height:0}
.gt.on{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
html.gt-open{overflow:hidden}
.gt-close{position:absolute;top:var(--m);right:var(--m);z-index:2;font:inherit;font-size:var(--nav);line-height:1;letter-spacing:-.02em;color:#000;background:none;border:0;border-bottom:var(--ul) solid transparent;border-radius:0;padding:0 0 .08em;cursor:pointer;-webkit-appearance:none;appearance:none}
.gt-close:hover,.gt-close:focus-visible{border-bottom-color:currentColor;outline:0}
.gt-col{left:var(--m);right:auto} /* «Colour / Color»: arriba a la izquierda, mismo aspecto que «Close» */
.gt-in{flex:1 0 auto;min-height:0;padding:calc(var(--m) * 3.2) var(--m) calc(var(--m) * 1.6);display:grid;grid-template-columns:minmax(0,1fr);row-gap:calc(70 * var(--u));align-content:center;justify-items:center}
.gt h2{margin:0;text-align:center;font-weight:400;font-size:var(--t48);line-height:1;letter-spacing:-.04em}
.gt-form{width:min(100%,max(calc(1300 * var(--u)),520px));min-width:0}
/* Formulario: filete sobre cada campo (como las filas del Archive) · etiquetas Neuzeit S · nombre y correo Bradford XL · mensaje Bradford L · Send Neuzeit M */
.cfw{position:relative;width:100%;margin:0 auto}
.cf label{display:block;margin:0;padding:calc(18 * var(--u)) 0 calc(34 * var(--u));border-top:1px solid #000}
.cf label span{display:block;font-size:var(--meta);line-height:1.2;letter-spacing:-.025em;margin:0 0 .3em}
.cf input[type=text],.cf input[type=email],.cf textarea{display:block;width:100%;margin:0;font-family:var(--serif);font-weight:400;font-size:var(--b24);line-height:1.25;letter-spacing:-.005em;font-variant-numeric:oldstyle-nums;color:#000;background:transparent;border:0;border-radius:0;padding:.1em 0;outline:0;resize:none;overflow:hidden;-webkit-appearance:none;appearance:none;cursor:text}
.cf input[type=text],.cf input[type=email]{font-size:var(--b30);line-height:1.2}
.cf textarea{min-height:max(150px,calc(300 * var(--u)))}
.cf input:-webkit-autofill{-webkit-text-fill-color:#000;transition:background-color 99999s}
.cf button[type=submit]{display:flex;align-items:center;justify-content:flex-end;gap:.3em;width:100%;text-align:left;font:inherit;font-size:var(--t24);line-height:1;letter-spacing:-.04em;color:#000;background:none;border:0;border-top:1px solid #000;border-radius:0;padding:calc(18 * var(--u)) 0 0;cursor:pointer;-webkit-appearance:none;appearance:none}
.cf button[type=submit]:hover,.cf button[type=submit]:focus-visible{outline:0}
.cf button[type=submit] svg{display:block;width:1.05em;height:.7em;flex:none;overflow:visible}
.cf button[type=submit] span{border-bottom:var(--ul) solid transparent}
.cf button[type=submit]:hover span,.cf button[type=submit]:focus-visible span{border-bottom-color:currentColor}
.cf .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-note{font-family:var(--serif);font-size:var(--b24);font-weight:400;line-height:1.3;letter-spacing:-.005em;margin:0 0 1.2em}
.cf-note.err{font-weight:500}
@media (min-width:821px){.cf-note{font-size:var(--b30)}}

/* ========== Cierre (misma animación que la entrada) ========== */
.outro{position:relative;--ogiant:min(calc(309 * var(--u)),calc((100vh - var(--hdr-h,64px) - var(--m) * 2.6) / 3.5))}
.outro .sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.outro .oname{position:absolute;left:var(--gx);top:calc(var(--hdr-h,64px) + var(--m) * 1.2);margin:0;font-weight:400;font-size:var(--ogiant);line-height:var(--giant-lh);letter-spacing:-.05em;transform-origin:0 0;will-change:transform}
.outro .oname span{display:block}
.outro .otag{position:absolute;left:0;bottom:calc(var(--m) + env(safe-area-inset-bottom,0px));margin:0;font-size:var(--ogiant);line-height:var(--giant-lh);letter-spacing:-.05em;white-space:nowrap;transform-origin:0 100%;will-change:transform}
.outro .otag span{display:block}

/* ========== Cursor del sitio: punto negro (escritorio con ratón; lo activa el JS) ========== */
html.has-dotcur,html.has-dotcur *{cursor:none!important}
html.has-dotcur #wpadminbar,html.has-dotcur #wpadminbar *{cursor:default!important}
.dotcur{position:fixed;left:0;top:0;z-index:99990;pointer-events:none;mix-blend-mode:difference;will-change:transform;opacity:0;transition:opacity .08s}
.dotcur.on{opacity:1}
.dotcur i{display:block;--d:max(7px,calc(var(--nav) * .52));width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;background:#fff;transition:width .09s var(--ease,ease),height .09s var(--ease,ease),margin .09s var(--ease,ease)}
.dotcur.link i{--d:calc(var(--nav) * 1.2)}

/* ========== Movimiento reducido ========== */
@media (prefers-reduced-motion:reduce){ .hdr .lang,.hdr .nav,.hdr .sub,.title,.tag,.pile img,.arch .panel{transition:none!important} }

/* =====================================================================
   EXPERIMENTOS — interruptores en Personalizar → Atelier → General o por URL
   (?motion=0 · ?hover=0 · ?archview=default · ?archbox=0 · ?archsize=regular)
   ===================================================================== */

/* MOVIMIENTO: las filas del grid entran con un deslizamiento suave */
.motion .row .cell{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) calc(var(--ci,0) * 90ms),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--ci,0) * 90ms)}
.motion .row.in .cell,.motion-fail .row .cell{opacity:1;transform:none}
.motion .row.now .cell{transition:none}

/* HOVER (.hfx): el resto de proyectos se apaga; Archive con mezcla «difference» sobre el panel */
@media (hover:hover) and (pointer:fine){
  /* Grid: al pasar por un proyecto, imagen y texto del resto desaparecen por completo y vuelven al instante (sin fundidos ni transparencias). Archive: filas restantes (0 = desaparecen) */
  .hfx{--dim-arch:0}
  .hfx [data-grid].hov .cell:not(.is-hov) > .img,.hfx [data-grid].hov .cell:not(.is-hov) > .meta{opacity:0}
  .hfx .arows .arow{transition:opacity .16s ease-out}
  .hfx .arows.hov .arow:not(.active){opacity:var(--dim-arch);transition:opacity .45s ease}
  .hfx .arch .list{position:relative;z-index:41;color:#fff;mix-blend-mode:difference}
  /* las líneas de las filas se dibujan aparte para poder cortarlas donde empieza la imagen */
  .hfx .arch .arows .arow,.hfx .arch .arows .arow:last-child{border-color:transparent;position:relative}
  .hfx .arch .arows .arow::before,.hfx .arch .arows .arow:last-child::after{content:"";position:absolute;left:0;height:1px;width:100%;background:#fff;transition:width .25s ease}
  .hfx .arch .arows .arow::before{top:-1px}
  .hfx .arch .arows .arow:last-child::after{bottom:-1px}
  .hfx .arch .panel.on ~ .list .arow::before,.hfx .arch .panel.on ~ .list .arow:last-child::after{width:50%}
}
@media (min-width:821px){
  /* Títulos de sección «Projects» y «Archive» en L; el hueco previo al grid deja el título entero en el borde inferior */
  .hfx .grid{padding-top:calc(100vh - var(--t48) - var(--b30) * 1.2)}
  .hfx .grid > .label,.hfx .arch .label{font-size:var(--t48);line-height:1;letter-spacing:-.04em;margin:0 0 calc(20 * var(--u))}
  .hfx.av-index .arch .label{margin-bottom:calc(64 * var(--u))} /* aire entre «Archive» y los filtros */
  /* Archive: etiquetas a la izquierda, pegadas al título */
  .hfx .arch .arow{grid-template-columns:minmax(0,1fr);row-gap:.1em;padding-bottom:calc(18 * var(--u))}
  .hfx .arch .arow .tags{text-align:left;padding-top:0;white-space:nowrap;justify-self:start}
  .hfx .arch .panel.on ~ .list .arow .tags{opacity:1}
  /* variante ?archbox=0: imagen pequeña sin caja */
  .hfx.ab0 .arch .panel{background:transparent;left:auto;right:var(--gxr);width:34%;display:flex;align-items:center;justify-content:flex-end}
  .hfx.ab0 .arch .panel img{max-width:100%;max-height:min(68vh,calc(760 * var(--u)));width:auto;height:auto}
  .hfx.ab0 .arch .panel.on ~ .list .arow::before,.hfx.ab0 .arch .panel.on ~ .list .arow:last-child::after{width:min(100%,calc(var(--img-left,9999px) - var(--gx) - 16px))}
  /* variante ?archsize=regular: títulos de la lista a tamaño normal */
  .hfx.as-reg .arch .arow{font-size:var(--t24);letter-spacing:-.02em;line-height:1.15;padding:calc(10 * var(--u)) 0 calc(12 * var(--u))}
  .hfx.as-reg .arch .arows .arow + .arow{margin-top:calc(14 * var(--u))}
}
/* Proyectos: espacio entre título y rejilla = una línea de Bradford */
.hfx .grid > .label{margin-bottom:calc(var(--b30) * 1.2)}

/* TÍTULOS (?ttl=1–4, ver main.js): respuesta del texto al pasar por un proyecto del grid, siempre sin fundidos */
.ttl .tt-f{display:none}
.tv-3 .cell.is-hov .ttl .tt-n{display:none}
.tv-3 .cell.is-hov .ttl .tt-f{display:inline}
.tv-4 .cell.is-hov .ttl{font-family:var(--serif);font-size:var(--b24);letter-spacing:-.005em;font-variant-numeric:oldstyle-nums;font-feature-settings:"onum" 1}
.gcap{position:fixed;z-index:45;left:var(--gx);top:calc(var(--adm,0px) + var(--hdr-h0,50px) + var(--m) * 1.2);margin:0;max-width:calc(100vw - 2 * var(--gx));color:#fff;mix-blend-mode:difference;pointer-events:none;display:none}
.gcap.on{display:block}
.gcap .c:empty{display:none}
.gcap .tg{display:none}
.tv-6.gcap-on .cell.is-hov .ttl,.tv-8.gcap-on .cell.is-hov .ttl{visibility:hidden}
.tv-7 .gcap .tt,.tv-8 .gcap .tt{font-size:var(--t48);line-height:1;letter-spacing:-.04em}
.tv-7 .gcap .c,.tv-8 .gcap .c{font-size:var(--b24);margin-bottom:.8em}
.gcap .c{display:block;font-family:var(--serif);font-weight:500;font-size:var(--b30);line-height:1.2;letter-spacing:-.01em;margin:0 0 1.2em;font-variant-numeric:oldstyle-nums;font-feature-settings:"onum" 1}
.gcap .tt{display:block;max-width:calc(50vw - var(--gx));font-family:var(--sans);font-weight:400;font-size:var(--t96);line-height:1;letter-spacing:-.05em;text-wrap:balance}
@media (max-width:820px){.gcap{display:none!important}}

/* ESPACIADO DEL GRID (?gs=1–4, ver main.js): filas · columnas */
.gs-2 .rows{row-gap:calc(140 * var(--u))}.gs-2 .rows > .row{column-gap:calc(70 * var(--u))} /* solo filas del grid de proyectos (antes «.row» también alcanzaba la cabecera) */
.gs-3 .rows{row-gap:calc(192 * var(--u))}.gs-3 .rows > .row{column-gap:calc(70 * var(--u))}
.gs-4 .rows{row-gap:max(calc(380 * var(--u)),140px)}.gs-4 .rows > .row{column-gap:calc(96 * var(--u))}

/* GRID LÍQUIDO (?flow=1, ver main.js): anchos en la retícula de 4 columnas (1/4, 1/2, 3/4, entero) y caída propia por proyecto; solo escritorio */
@media (min-width:821px){
  .flow [data-grid] .row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .flow [data-grid] .row[data-n="2"] .cell{grid-column:span 2}
  .flow [data-grid] .row[data-n="1"] .cell{grid-column:1 / -1}
  .flow [data-grid] .row[data-n="1"] .cell.w3{grid-column:var(--c3,1) / span 3}
  .flow [data-grid] .cell{margin-top:calc(var(--dy,0) * var(--u))} /* margen, no relleno: el blanco no cuenta como proyecto y apaga el hover */
}

/* UN PROYECTO POR PANTALLA (?one=1, ver main.js): cada proyecto con su ancho y columna en la retícula de 4, altura natural y hueco fijo entre proyectos; título XL */
@media (min-width:821px){
  .one [data-grid] .rows,.one [data-grid] .row{display:block}
  .one [data-grid] .cell{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(35 * var(--u));align-content:start;row-gap:calc(14 * var(--u));margin:0 0 var(--onegap,50svh)} /* altura natural; hueco fijo entre proyectos */
  .one [data-grid] .cell > .img,.one [data-grid] .cell > .meta{grid-column:var(--c,1) / span var(--s,2)}
  .one [data-grid] .cell .img img{width:auto;max-width:100%;max-height:calc(100svh - var(--hdr-h,64px) - 10em)}
  /* sin texto bajo la imagen: el rótulo XL (cliente · título enlazado · categorías en S) es el único texto del proyecto */
  .one [data-grid] .cell > .meta{display:none}
  .one .gcap{pointer-events:auto}
  .one .gcap .tt{color:inherit}
  .one .gcap .tg{display:block;margin-top:calc(var(--t96) * .3)}
}

/* ARCHIVE · VISTA INDEX (.av-index, por defecto; ?archview=default la apaga): lista compacta con controles
   Orden · Tamaño (S / M / Grande / XL) · Categorías · Cliente, apilados bajo el título */
@media (min-width:821px){
  .hfx.av-index{--dim-arch:1}
  .hfx.av-index .arch .sortbar{display:flex;flex-direction:column;flex-wrap:wrap;align-items:flex-start;gap:1.15em;font-size:var(--t24);letter-spacing:-.01em;margin:0 0 calc(128 * var(--u))} /* aire bajo «Archive» (64 u, en .label) y, el doble, entre los años y la primera fila (≈ dos filas de filtros) */
  .hfx.av-index .arch .sortsw,.hfx.av-index .arch .sizesw,.hfx.av-index .arch .showsw,.hfx.av-index .arch .modesw,.hfx.av-index .arch .yrsw{display:flex;flex-wrap:wrap;align-items:baseline}
  .hfx.av-index .arch .yrsw .yrl{display:flex;flex-direction:column;gap:.3em;font-size:var(--meta)} /* años en dos filas, siempre en S como los años de la lista (los botones heredan) */
  .hfx.av-index .arch .yrsw .yrr{display:flex;flex-wrap:wrap;align-items:baseline}
  .hfx.av-index .arch .yrsw .yrl button[data-yr=""]{font-size:var(--t24)} /* «All / Todos» en M, como las demás opciones */
  .hfx.av-index .arch .sortbar .lab{display:inline-block;min-width:calc(200 * var(--u))}
  .hfx.av-index .arch .sortbar i{margin:0 .8em;font-style:normal}
  .hfx.av-index .arch .sortbar .arw{display:none;width:.5em;height:.752em;margin-left:.3em;vertical-align:baseline;overflow:visible} /* flechas de «Orden»: de la línea base a la altura de mayúscula (mismo trazo que la flecha «View») */
  .hfx.av-index .arch .sortbar .arw.sq{width:.752em}
  .hfx.av-index .arch .sortbar .arw.az{margin:0 .2em} /* A → Z */
  /* las flechas solo aparecen al pasar el cursor (o con el foco del teclado) y empujan el resto de la fila; sin transición */
  .hfx.av-index .arch .sortbar button:hover .arw,.hfx.av-index .arch .sortbar button:focus-visible .arw,.hfx.av-index .arch .sortbar button.on .arw{display:inline-block} /* la flecha se queda en la opción elegida */
  .hfx.av-index .arch .sortbar .azx{display:none}
  .hfx.av-index .arch .sortbar button:hover .azx,.hfx.av-index .arch .sortbar button:focus-visible .azx,.hfx.av-index .arch .sortbar button.on .azx{display:inline}
  /* subrayado de los filtros a la misma distancia que en la cabecera (≈ 0,3 em bajo la línea base): interlineado 1 y el medio interlineado pasa a margen, así la altura de cada fila no cambia */
  .hfx.av-index .arch .sortbar button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;border-bottom:var(--ul) solid transparent;padding:0 0 .08em;margin:.125em 0;line-height:1;cursor:inherit;white-space:nowrap}
  .hfx.av-index .arch .sortbar button.on{border-bottom-color:currentColor}
  .hfx.av-index .arch .arows .arow + .arow{margin-top:0}
  .hfx.av-index:not(.av-tags) .arch .arow .tags{display:none}
  /* tamaños de la lista: M por defecto · S = categorías · Grande = L · XL = títulos de proyecto */
  .hfx.av-index .arch .arow{font-size:var(--t24);letter-spacing:-.02em;line-height:1.15;padding:calc(11 * var(--u)) 0 calc(9 * var(--u));row-gap:.06em}
  .hfx.av-index.av-s .arch .arow{font-size:var(--meta);letter-spacing:-.025em;line-height:1.25;padding:calc(8 * var(--u)) 0 calc(8 * var(--u));row-gap:.05em}
  .hfx.av-index.av-big .arch .arow{font-size:var(--t48);letter-spacing:-.04em;line-height:1;padding:calc(15 * var(--u)) 0 calc(13 * var(--u));row-gap:.1em}
  .hfx.av-index.av-xl .arch .arow{font-size:var(--t96);letter-spacing:-.05em;line-height:.9;padding:calc(22 * var(--u)) 0 calc(18 * var(--u));row-gap:.12em}
/* Neuzeit L y XL: interlineado 1 en todo el sitio (título de proyecto, rótulos XL de la home y del stack, Archive). Con 0,9 los trazos descendentes (g, j, p, y: 0,21 em) tocaban las mayúsculas de la línea siguiente (0,752 em). La animación inicial (0,83) no cambia */
.hfx.av-index.av-big .arch .arow .t{line-height:1}
.hfx.av-index.av-xl .arch .arow .t{line-height:1}
  /* cliente sobre cada título, en Bradford proporcional al tamaño del título */
  .hfx.av-index.av-client .arch .arow .cl{display:block;font-family:var(--serif);font-weight:500;font-size:var(--b18);line-height:1.15;letter-spacing:-.005em;margin-bottom:.2em}
  .hfx.av-index.av-s.av-client .arch .arow .cl{font-size:var(--b15)}
  .hfx.av-index.av-big.av-client .arch .arow .cl{font-size:var(--b24)}
  .hfx.av-index.av-xl.av-client .arch .arow .cl{font-size:var(--b30)}
}

/* ===== DIVISORES: en categorías y filtros del Archive la barra se mantiene (invisible, mismo espacio) y encima se dibuja una línea vertical de 1 px, del peso de las líneas del Archive,
   de la altura de mayúscula de Neuzeit (0,752 em; ascendente 0,78 em). En / Es y los interruptores Off / On conservan la barra. ===== */
:is(nav.cats,.sortbar,.tags,.tg,.gzsw) i[aria-hidden]{position:relative;font-style:normal;-webkit-text-fill-color:transparent}
:is(nav.cats,.sortbar,.tags,.tg,.gzsw) i[aria-hidden]::after{content:'';position:absolute;left:50%;top:.028em;width:1px;height:.752em;margin-left:-.5px;background:currentColor}
.arch .sortbar i[aria-hidden]::after{top:.153em} /* en los filtros la barra es un elemento de bloque (flex) con interlineado 1,25: se suma medio interlineado */
/* regla: dos alternativas (En / Es) llevan barra; listas de opciones llevan línea */

/* ===== COLOR NEGRO (html.dark): solo Archive e Info (las páginas de proyecto no cargan la clase). Se invierten los tonos; la ventana de imagen del Archive pasa a blanca para seguir destacando ===== */
html.dark{--bg:#000000;--fg:#ffffff;--rule:#ffffff;--panel:#ffffff}
html.dark body{background:var(--bg);color:var(--fg)}
/* el cambio es seco, sin fundido */
html.mode-now,html.mode-now *,html.mode-now *::before,html.mode-now *::after{transition:none!important}

/* ===== EXPERIMENTO GRID POR TAMAÑOS (?grid=size activa · ?grid=old vuelve): «Size: S / L».
   S (html.gz): retícula pequeña y regular (6 columnas; móvil 2), imagen contenida apoyada abajo a la izquierda, pie alineado a la izquierda con cliente, título y categorías; sin título gigante al pasar.
   L: el grid líquido de siempre con el título XL al pasar; ?lcap=0 quita los pies pequeños (solo queda el título XL), ?lcap=1 los recupera. Sin fundidos. ===== */
.gzsw{display:flex;flex-wrap:wrap;align-items:baseline;font-size:var(--t24);line-height:1.25;letter-spacing:-.01em;margin:0 0 calc(64 * var(--u))}
.gzsw .lab{display:inline-block;box-sizing:border-box;min-width:calc(200 * var(--u));padding-right:.6em} /* «Grid Size / Tamaño de retícula» no pisa la S si es más ancho que la columna */
.gzsw i{margin:0 .8em;font-style:normal}
.gzsw i[aria-hidden]::after{top:.153em}
.gzsw button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;border-bottom:var(--ul) solid transparent;padding:0 0 .08em;margin:.125em 0;line-height:1;cursor:inherit}
.gzsw button.on{border-bottom-color:currentColor}
html.gz .grid .rows{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(80 * var(--u)) calc(40 * var(--u));align-items:start}
@media (max-width:820px){html.gz .grid .rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 14px}}
html.gz .grid .rows > .row{display:contents}
html.gz .grid .rows > .row[hidden]{display:none}
html.gz .grid .rows .cell{grid-column:auto!important;margin:0!important;opacity:1!important;transform:none!important;transition:none!important;display:grid;grid-template-columns:minmax(0,1fr);gap:calc(16 * var(--u))}
html.gz .grid .rows .cell.is-hidden{display:none}
html.gz .grid .rows .cell > .img,html.gz .grid .rows .cell > .meta{opacity:1!important;grid-column:auto!important}
html.gz .grid .rows .cell .img{aspect-ratio:3 / 4}
html.gz .grid .rows .cell .img img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:left bottom}
html.gz .grid .rows .cell .img .fr{object-position:left bottom}
html.gz .grid .rows .meta{display:grid!important;justify-items:start;text-align:left;gap:calc(10 * var(--u))}
/* pies a escala de la retícula pequeña: cliente, título y categorías en cuerpos de texto, no de titular */
html.gz .grid .rows .meta .client{font-size:max(12px,calc(17 * var(--u)));line-height:1.15}
html.gz .grid .rows .meta .ttl{visibility:visible!important;font-size:max(13px,calc(20 * var(--u)));line-height:1.12;letter-spacing:-.015em;text-wrap:pretty}
html.gz .grid .rows .meta .tags{display:block;font-size:max(11px,calc(15 * var(--u)));line-height:1.4;white-space:normal} /* las categorías pasan de línea en vez de invadir la columna vecina */
html.gz .grid .rows .meta .tags a{white-space:nowrap}
html.gz .gcap{display:none!important}
html.lcap0:not(.gz) .grid .rows .cell > .meta{display:none}
/* Mix: la retícula original del traspaso (filas de 4, 2 o 1 columnas según el «layout» de cada proyecto), sin títulos XL ni caída del grid líquido;
   pie siempre visible bajo cada imagen: título al tamaño del menú principal (--nav, 24 u), cliente en Bradford Medium 18 u (como el cliente del Archive), categorías en S, 18 u. Sin fundidos. */
html.gm .gcap{display:none!important}
html.gm [data-grid].hov .cell > .img,html.gm [data-grid].hov .cell > .meta{opacity:1!important} /* sin apagar el resto al pasar */
html.gm .grid .rows .cell{margin-top:0}
html.gm .grid .rows .cell > .meta{display:grid!important;gap:calc(16 * var(--u))}
html.gm .grid .rows .meta .ttl{visibility:visible!important;font-size:var(--nav);line-height:1.1;letter-spacing:-.02em}
html.gm .grid .rows .meta .client{font-size:var(--b18);line-height:1.15;letter-spacing:-.005em}
html.gm .grid .rows .meta .tags{display:block;font-size:var(--meta);line-height:1.5}
/* M: todos los proyectos en la retícula de 4 columnas (mismo hueco entre columnas que Mix), sea cual sea su «layout»; 2 columnas en móvil */
html.gm4 .grid .rows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(128 * var(--u)) calc(70 * var(--u));align-items:start}
html.gm4 .grid .rows > .row{display:contents}
html.gm4 .grid .rows > .row[hidden]{display:none}
html.gm4 .grid .rows .cell{grid-column:auto!important}
@media (max-width:820px){html.gm4 .grid .rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 14px}}
/* «Grid Size» fijo en la cabecera (escritorio): a la izquierda de la fila de categorías, mismo cuerpo; el de debajo de «Projects» queda solo para móvil */
.hdr .sub .gzhd{display:none}
@media (min-width:821px){
  html.gzt .hdr .sub.on,html.gzt.gzin .hdr .sub{display:flex;justify-content:space-between;align-items:baseline}
  html.gzt.gzin .hdr .sub{height:calc(var(--meta) + 10px);opacity:1;padding-bottom:4px;transition:none} /* la fila se abre ya con «S / XL», en seco */
  html.gzt .hdr .sub:not(.on) .cats{visibility:hidden} /* las categorías, solo cuando llega el grid */
  html.gzt .hdr .sub .gzhd{display:flex;font-size:inherit;line-height:1;margin:0}
  html.gzt .hdr .sub .gzhd .lab{min-width:0;padding-right:1.2em}
  html.gzt .hdr .sub .gzhd i{margin:0 .9em}
  html.gzt .hdr .sub .gzhd i[aria-hidden]::after{top:.028em}
  html.gzt .hdr .sub .gzhd button{margin:0;padding:0 0 .1em}
  html.gzt .grid > .gzsw{display:none}
}
/* XL (un proyecto por pantalla): el rótulo baja y deja aire bajo la cabecera; cliente, título y categorías se juntan en un solo bloque */
html.one .gcap{top:calc(var(--adm,0px) + (var(--hdr-h0,50px) + var(--meta) + 3px) * 2 - 19px)} /* hueco vacío ≈ alto del bloque «Atelier…» + «Size» de la cabecera */
html.one .gcap .c{margin-bottom:.45em}
html.one .gcap .tg{margin-top:calc(var(--t96) * .1)}
/* ===== GRID POR TAMAÑOS (fin) ===== */

/* ---------- INFO: series de imágenes (una al azar por visita). Retícula de 4 columnas alineada con las dos mitades. ---------- */
.about .ph{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(45 * var(--u));align-items:start}
.about .ph:empty{display:none}
.about .aph{margin:0;grid-column:var(--c,1) / span var(--s,4)}
.about .aph img{display:block;width:100%;height:auto}
.about .stick .aph{grid-column:auto}
.about .aph figcaption{font-family:var(--sans);font-weight:400;font-size:var(--meta);line-height:1.2;letter-spacing:0;margin:calc(var(--meta) * .7) 0 0;max-width:calc(660 * var(--u))}
.about .ph[data-aslot="bio"]:has(> .aph.q){padding-top:max(calc(60 * var(--u)),24px)} /* foto pequeña tras la bio: pegada al texto */
@media (max-width:820px){
  .about .ph{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about .aph{grid-column:1 / -1}
  .about .aph.q{grid-column:var(--mc,1) / span 1}
}

/* ---------- VERSIÓN B (?site=b): «Featured» termina en tres salidas; /projects/ es solo el grid ---------- */
.choose{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.08em;padding-bottom:var(--m);font-size:var(--t96);line-height:1;letter-spacing:-.05em}
.choose a{text-decoration-line:none;text-decoration-thickness:var(--ul);text-underline-offset:.09em} /* subrayado pegado a la línea base (el borde inferior caía bajo la caja de línea, casi en el siguiente enlace) */
.choose .lg{margin-top:.6em} /* el idioma, separado de las secciones */
.choose a:hover,.choose a:focus-visible{text-decoration-line:underline}
@media (max-width:820px){.choose{font-size:var(--t48);letter-spacing:-.04em;gap:.25em}}
/* versión B · menú final: entra con el scroll mientras toda la pantalla pasa de blanco a un degradado turbio (mostaza, gris, azul sucio, marrón)
   con destellos vivos (azul RGB, magenta, mandarina, amarillo neón, morado neón, cian eléctrico, verde del Conservatorio) y negro, que sube muy despacio, en bucle. Capa fija detrás de todo y ligera: un rectángulo pequeño ampliado ×10
   (el degradado no pierde nada) y movido con transform; --gi desde main.js. Texto en «difference», como los pies XL; el menú aparece con un fundido, como el resto del sitio */
.choose{position:relative;padding-top:0;padding-bottom:0;height:100vh;height:100svh;min-height:0} /* al final de la página el bloque queda centrado exactamente en la pantalla */
.choose.gap{margin-top:60vh} /* respiro en blanco entre la pila y el menú */
.choose::before{content:"";position:fixed;left:0;top:0;width:10vw;height:240vh;transform-origin:0 0;transform:scale(10);z-index:-1;pointer-events:none;background:linear-gradient(180deg,#ffffff -7.95%,#ffffff -3.5%,#cfa61c -0.25%,#cfa61c 0.25%,#0000ff 2.61%,#5a4430 4.82%,#5a4430 5.28%,#00a85a 7.78%,#00a85a 8.05%,#34373a 10.83%,#34373a 11.39%,#ff8a00 13.64%,#ff7fa0 15.52%,#ff7fa0 15.79%,#e6007e 17.59%,#111111 20.15%,#111111 24.97%,#eaff00 28.11%,#2b5562 30.72%,#2b5562 31.23%,#00e0f0 33.5%,#d6bc86 35.63%,#d6bc86 36.09%,#9b30ff 38.66%,#9b30ff 38.95%,#ffffff 42.05%,#ffffff 46.5%,#cfa61c 49.75%,#cfa61c 50.25%,#0000ff 52.61%,#5a4430 54.82%,#5a4430 55.28%,#00a85a 57.78%,#00a85a 58.05%,#34373a 60.83%,#34373a 61.39%,#ff8a00 63.64%,#ff7fa0 65.52%,#ff7fa0 65.79%,#e6007e 67.59%,#111111 70.15%,#111111 74.97%,#eaff00 78.11%,#2b5562 80.72%,#2b5562 81.23%,#00e0f0 83.5%,#d6bc86 85.63%,#d6bc86 86.09%,#9b30ff 88.66%,#9b30ff 88.95%,#ffffff 92.05%,#ffffff 96.5%,#cfa61c 99.75%,#cfa61c 100.25%,#0000ff 102.61%,#5a4430 104.82%,#5a4430 105.28%,#00a85a 107.78%);opacity:var(--gi,0);will-change:transform;animation:chg 36s linear infinite}
.choose:not(.gon)::before{visibility:hidden;animation-play-state:paused}
/* caja bajo el menú en «exclusion» sobre el degradado: el texto («difference») se lee contra una zona invertida y suave */
.choose{align-items:flex-end;text-align:right} /* menú a la derecha, alineado a la derecha */
.choose .cbox{display:flex;flex-direction:column;align-items:flex-end;gap:inherit;max-width:100%}
.choose .cbox::before{content:"";position:fixed;left:0;top:0;height:100vh;width:50vw;z-index:-1;background:#d9d4c7;mix-blend-mode:exclusion;pointer-events:none;opacity:0;transition:opacity .7s ease}
.choose.in .cbox::before{opacity:1}
/* el nombre XL, fijo en la mitad izquierda (donde está en la intro), solo aparece con un fundido */
.choose .ctitle{position:fixed;left:var(--gx);top:calc(var(--adm,0px) + var(--hdr-h0,50px) + var(--m) * 1.2);margin:0;text-align:left;font-weight:400;font-size:min(var(--ogiant),calc((100vw - 2 * var(--gx)) / 3.2));line-height:var(--giant-lh);letter-spacing:-.05em;color:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .7s ease}
.choose .ctitle .l{display:block;width:max-content;white-space:nowrap}
.choose.in .ctitle{opacity:1}
.choose:not(.in) .ctitle{transition:none} /* fundido solo al entrar; al subir, fuera en seco (sin sombra) */
/* al entrar en el degradado la barra blanca de la cabecera desaparece; el menú superior pasa a «difference», como el resto del texto */
html.chon .hdr{background:transparent;color:#fff;mix-blend-mode:difference}
/* VARIANTE ?menu=2: el nombre XL en negro sobre blanco en la mitad izquierda; el degradado solo en la mitad derecha, con el menú alineado a la derecha;
   la cabecera entera desaparece cuando se iría la barra blanca */
html.mv2 .choose::before{left:50vw;width:5vw} /* ×10 = media pantalla */
html.mv2 .choose .cbox::before{left:50vw;width:25vw;background:#fff} /* bloque blanco en «exclusion» en el tercer cuarto de la pantalla */
html.mv2 .choose .ctitle{color:#000;mix-blend-mode:normal;font-size:min(var(--ogiant),calc((50vw - 2 * var(--gx)) / 3.1))}
html.mv2.chon .hdr{mix-blend-mode:normal;opacity:0;pointer-events:none;transition:opacity .5s ease}
/* VARIANTE ?menu=3: sin el nombre; el menú ocupa su lugar con su mismo tamaño XL y posición: cuatro líneas alineadas a la izquierda
   (con la alineación óptica del nombre) y el idioma alineado a la derecha, en la línea de «Info» */
html.mv3 .choose .ctitle{display:none}
html.mv3 .choose{font-size:min(var(--ogiant),calc((100vw - 2 * var(--gx)) / 5));line-height:var(--giant-lh);letter-spacing:-.05em;gap:0;align-items:stretch;text-align:left;justify-content:flex-start;padding-top:calc(var(--hdr-h0,50px) + var(--m) * 1.2)}
html.mv3 .choose .cbox{position:static;align-items:flex-start;width:auto}
.choose .lgs{display:none}
html.mv3 .choose .lg{display:none}
/* idioma: «Es / En» como en la cabecera, pero al tamaño XL del menú, alineado a la derecha en la línea de «Info» */
html.mv3 .choose .lgs{display:block;position:absolute;top:calc(var(--hdr-h0,50px) + var(--m) * 1.2 + 3em * var(--giant-lh));right:var(--gx);font-size:inherit;line-height:var(--giant-lh);letter-spacing:-.05em;white-space:nowrap;color:#fff;mix-blend-mode:difference;opacity:0;transition:opacity .7s ease}
html.mv3 .choose.in .lgs{opacity:1}
html.mv3 .choose .lgs a{mix-blend-mode:normal}
html.mv3 .choose .lgs a.on{text-decoration-line:underline}
@media (max-width:820px){html.mv3 .choose{justify-content:flex-end;padding-top:0}html.mv3 .choose .lgs{position:static;align-self:flex-end}}
/* VARIANTE ?menu=5: sin degradado. El nombre XL, fijo en la mitad izquierda, exactamente donde está en la intro; la navegación en la mitad derecha,
   alineada a la izquierda, en las mismas líneas base que el nombre (tamaño, interlínea y desfase los pone main.js); «Es / En» puede salirse por abajo */
html.mv5 .choose::before,html.mv5 .choose .cbox::before,html.mv5 .choose .lg{display:none}
html.mv5 .choose{overflow:hidden;align-items:flex-start;justify-content:flex-start;text-align:left;padding-top:0;padding-bottom:0;padding-left:calc(50vw + var(--gx));gap:0;letter-spacing:-.05em}
html.mv5 .choose .cbox{align-items:flex-start;gap:0}
html.mv5 .choose .cbox,html.mv5 .choose .cbox > *{letter-spacing:-.05em} /* el mismo apretado que el nombre, a su propio tamaño */
html.mv5 .choose a,html.mv5 .choose .ctitle{color:#000;mix-blend-mode:normal}
html.mv5 .choose .ctitle{font-size:min(var(--ogiant),calc((50vw - 2 * var(--gx)) / 3.1))}
@media (min-width:821px){html.mv5 .choose .ctitle{font-size:var(--ogiant)}} /* el mismo tamaño exacto de la intro */
html.mv5 .choose .cbox{display:block;white-space:nowrap}
html.mv5 .choose .cbox > a{display:block}
html.mv5 .choose .cbox > a.lg{display:none}
html.mv5 .choose .cbox > a:nth-of-type(4){display:inline-block} /* «Info» y «Es / En» en la misma línea; el idioma puede salirse por la derecha */
html.mv5 .choose .lgs{display:inline-block;margin-left:.2em;white-space:nowrap;opacity:0;transition:opacity .7s ease}
html.mv5 .choose.in .lgs{opacity:1}
.choose .lgs .sl{margin:0 .25em}
html.mv5 .choose .lgs .sl{margin:0} /* «Es/En» sin espacios */
html.mv5 .choose .lgs a.on{text-decoration-line:underline}
html.mv5.chon .hdr{mix-blend-mode:normal;opacity:0;pointer-events:none;transition:opacity .5s ease}
/* VARIANTE ?menu=6: sin degradado. El nombre XL aparece donde está en la intro; al llegar, el menú XL (mismo tamaño, interlínea y líneas base)
   entra por la derecha pegado a él y lo empuja fuera de la pantalla, quedándose en su lugar exacto. «Info Es/En» en la misma línea */
html.mv6 .choose::before,html.mv6 .choose .cbox::before,html.mv6 .choose .lg{display:none}
html.mv6 .choose{overflow:hidden;align-items:flex-start;justify-content:flex-start;text-align:left;padding-top:calc(var(--adm,0px) + var(--hdr-h0,50px) + var(--m) * 1.2);padding-bottom:0;font-size:var(--ogiant);line-height:var(--giant-lh);letter-spacing:-.05em;gap:0}
html.mv6 .choose .cbox{display:block;white-space:nowrap;letter-spacing:-.05em;transform:translateX(var(--mx,100vw))} /* --mx y --tx los anima main.js (empujón) */
html.mv6 .choose.gap{margin-top:0}
html.mv6 .choose{height:150vh;height:150svh} /* recorrido corto: la pila sale, aparece el nombre y, al poco, el empujón; el final de la página llega justo después */
html.mv6 .choose .cbox > a{display:block;width:max-content;opacity:1;transition:none} /* zona activa solo sobre la palabra, no toda la línea */
html.mv6 .choose .cbox > a.lg{display:none}
html.mv6 .choose .cbox > a:nth-of-type(4){display:inline-block}
html.mv6 .choose .cbox{position:fixed;top:calc(var(--adm,0px) + var(--hdr-h0,50px) + var(--m) * 1.2);left:var(--gx);right:var(--gx)} /* fijo, en las líneas exactas del nombre, a todo el ancho («Es/En» al margen derecho) */
html.mv6 .choose .lgs{display:block;position:absolute;right:0;top:calc(3em * var(--giant-lh));white-space:nowrap;transform:none} /* «Es/En» entra junto con el menú, en el mismo empujón */ 
html.mv6 .choose .lgs .sl{margin:0}
html.mv6 .choose .lgs a{opacity:1;transition:none}
html.mv6 .choose a,html.mv6 .choose a:hover,html.mv6 .choose a:focus-visible{text-decoration-line:none} /* sin subrayados en este menú… */
/* teclado: al llegar con el tabulador, la misma flecha de «View» (mismo tamaño) tras la palabra, sin mover nada */
html.mv6 .choose .cbox > a:not(.lg):focus-visible,html.mv6 .choose .cinfo > a:focus-visible{outline:none}
html.mv6 .choose .cbox > a:not(.lg):focus-visible::after,html.mv6 .choose .cinfo > a:focus-visible::after{content:"";display:inline-block;width:calc(var(--t96) * 1.05);height:calc(var(--t96) * .7);margin:0 calc(var(--t96) * -1.35) 0 calc(var(--t96) * .3);vertical-align:.15em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2016%27%3E%3Cpath%20d%3D%27M1%208H24M17%201L24%208L17%2015%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linejoin%3D%27miter%27%20stroke-miterlimit%3D%2710%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2016%27%3E%3Cpath%20d%3D%27M1%208H24M17%201L24%208L17%2015%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linejoin%3D%27miter%27%20stroke-miterlimit%3D%2710%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
html.mv6 .choose .lgs a.on,html.mv6 .choose .lgs a:hover,html.mv6 .choose .lgs a:focus-visible{text-decoration-line:underline;text-decoration-thickness:var(--ul);text-underline-offset:.09em} /* …salvo el idioma: el activo subrayado, el otro al pasar */
html.mv6 .choose a,html.mv6 .choose .ctitle{color:#000;mix-blend-mode:normal}
html.mv6 .choose .ctitle{transition:none;transform:translateX(var(--tx,0px))} /* el nombre aparece en seco, en su sitio de la intro (sin fundido) */
html.mv6 .choose.tin .ctitle{opacity:1} /* el nombre solo aparece cuando la pila ha salido entera */
html.mv6 .choose:not(.tin) .ctitle{transition:none}
html.mv6 .choose:not(.tin) .cbox{visibility:hidden}
/* prueba ?lead=open: interlínea del menú final +14 % (los rasgos descendentes ya no tocan los ascendentes); las líneas base dejan de coincidir con las del nombre */
html.mv6.mlo .choose .cbox{line-height:calc(var(--giant-lh) * 1.14)}
html.mv6.mlo .choose .lgs{top:calc(3em * var(--giant-lh) * 1.14)} /* al volver hacia arriba desaparece en seco: sin sombra sobre la pila */
html.mv6.chon .hdr{mix-blend-mode:normal;opacity:0;pointer-events:none;transition:opacity .5s ease}
@media (max-width:820px){html.mv6 .choose{font-size:min(var(--ogiant),calc((100vw - 2 * var(--gx)) / 5));justify-content:flex-start;padding-bottom:0}}
/* VARIANTE ?menu=4: «Es / En» arriba a la derecha, chocando a propósito con «Featured» (las dos en «difference») */
@media (min-width:821px){html.mv4 .choose .lgs{top:calc(var(--hdr-h0,50px) + var(--m) * 1.2)}}
@media (max-width:820px){html.mv2 .choose{font-size:calc((50vw - 2 * var(--gx)) / 4.6)}}
@media (max-width:820px){.choose{justify-content:flex-end;padding-bottom:calc(var(--m) * 2.5)}} /* móvil: el nombre XL ocupa la parte alta; el menú, abajo */
.choose a{color:#fff;mix-blend-mode:difference;opacity:0;transition:opacity .7s ease;will-change:opacity} /* capa propia: la mezcla se resuelve en la GPU */
.choose.in a{opacity:1}
@keyframes chg{from{transform:scale(10) translateY(0)}to{transform:scale(10) translateY(-120vh)}}
@media (prefers-reduced-motion:reduce){.choose::before{animation:none}.choose a{transition:none}}

body.view-projects .grid{padding-top:calc(50vh - var(--t48) * .5)} /* sin pila delante: el título «Projects» a media altura, como «Archive» */

/* ---------- PROYECTO · RETÍCULA DE IMÁGENES (S: 4 columnas · M: 2 · Mix: filas de cada galería) ---------- */
.hdr .sub .pghd{display:none}
.hdr .sub-proj.on{display:flex;justify-content:space-between;align-items:baseline}
html.pgin .hdr .sub-proj{display:flex;justify-content:space-between;align-items:baseline;height:calc(var(--nav) * 1.25 + 8px);opacity:1;transition:opacity .7s ease,height 0s linear 0s} /* la fila se abre cuando llegan las imágenes, como en el grid de proyectos */
html.pgin .hdr .sub-proj .pghd{display:flex;font-size:var(--meta);line-height:1.2;margin:0;flex-shrink:0}
.hdr .sub-proj .pghd .lab{min-width:0;padding-right:1.2em}
.hdr .sub-proj .pghd i{margin:0 .9em;font-style:normal}
.hdr .sub-proj .pghd button{margin:0;padding:0 0 .1em}
html.pg4 .proj .body,html.pg2 .proj .body{gap:calc(35 * var(--u));align-items:start}
html.pg4 .proj .body{grid-template-columns:repeat(4,minmax(0,1fr))}
html.pg2 .proj .body{grid-template-columns:repeat(2,minmax(0,1fr))}
html.pg4 .proj .blk-ti,html.pg2 .proj .blk-ti{grid-column:1 / -1;margin-bottom:calc(35 * var(--u))}
html.pg4 .proj .blk-im,html.pg2 .proj .blk-im{display:contents}
html.pg4 .proj .blk-im > img,html.pg2 .proj .blk-im > img{grid-column:auto}
@media (max-width:820px){html.pg4 .proj .body{grid-template-columns:repeat(2,minmax(0,1fr))}html.pg2 .proj .body{grid-template-columns:1fr}html.pgin .hdr .sub-proj .pghd{display:none}html.pgin .hdr .sub-proj:not(.on){height:0;opacity:0}}
/* cabecera de proyecto (escritorio): la fila del selector mide y se coloca exactamente como en el grid de proyectos (sin salto al ir y volver);
   el título M se alinea a la línea base del selector sin empujarlo (margen negativo + fila sin recorte) */
@media (min-width:821px){
  .hdr .sub-proj.on,html.pgin .hdr .sub-proj{height:calc(var(--meta) + 10px);padding-bottom:4px;overflow:visible}
  html.pgin .hdr .sub-proj .pghd{line-height:1}
  .hdr .sub-proj .pghd i[aria-hidden]::after{top:.028em}
  .hdr .sub-proj .ptitle{margin-top:-.45em}
}
/* flecha del sitio (atelier_arrow): mismo trazo que las del orden del Archive */
.arw-i{display:inline-block;width:.752em;height:.752em;vertical-align:baseline;overflow:visible;flex:none}
.proj .foot .arw-left{margin-right:.35em}
.proj .foot .arw-right{margin-left:.35em}
.proj .foot a{text-wrap:balance}
/* selección en color (paleta del sitio; el color cambia con cada selección, desde main.js) */
::selection{background:var(--sc,#cfa61c);color:var(--si,#000)}


/* menú gigante: «Lab» en la cuarta línea; «Info» en la columna de «Es/En», una línea más arriba */
.choose .cinfo{display:none}
html.mv6 .choose .cinfo{display:block;position:absolute;right:0;top:0;white-space:nowrap} /* Info arriba a la derecha, en la línea de «Destacados» */
html.mv6 .choose .cinfo.low{top:calc(2em * var(--giant-lh))} /* si no cabe junto a «Destacados» (pantallas bajas y anchas), baja a la línea de «Archivo» */
html.mv6.mlo .choose .cinfo.low{top:calc(2em * var(--giant-lh) * 1.14)}
html.mv6 .choose .cinfo a{opacity:1;transition:none}
/* 261104 «Info» como las demás: sin subrayado, con la flecha (antes se le había quedado el subrayado del idioma) */

/* siglas en versalitas en el texto corrido en Bradford (las pone main.js); espaciado +6 %, como pide Bringhurst */
.sc{font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:.06em}

/* móvil: el final de la home es el mismo menú que el panel: cinco palabras apiladas y Es / En abajo (va al final para ganar a las variantes mv) */
@media (max-width:820px){
  html.mv6 body .choose{font-size:var(--xxl-m)}
  html.mv6 body .choose .cbox{bottom:calc(var(--m) * 1.5 + env(safe-area-inset-bottom,0px))}
  html.mv6 body .choose .cbox > a:nth-of-type(4){display:block}
  html.mv6 body .choose .cinfo,html.mv6 body .choose .cinfo.low{position:static;display:block}
  html.mv6 body .choose .cinfo > a{display:inline-block;margin-left:-.085em}
  html.mv6 body .choose .lgs{position:absolute;top:auto;bottom:0;left:0;right:auto;font-size:inherit;line-height:var(--giant-lh);letter-spacing:-.05em}
  html.mv6 body .choose .lgs .sl{margin:0 .25em}
}

/* móvil: la pila arranca arriba, bajo la cabecera, con su margen; el pie de foto, en XL, abajo a la izquierda (en la línea de «Es / En»); si se cruza con la imagen, en negativo, como en escritorio */
@media (max-width:820px){
  .pile img{top:calc(var(--hdr-h,66px) + var(--m) * 1.5);max-width:calc(100vw - var(--gx) - var(--gxr));max-height:calc(100vh - var(--adm,0px) - var(--hdr-h,66px) - var(--m) * 3 - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - var(--adm,0px) - var(--hdr-h,66px) - var(--m) * 3 - env(safe-area-inset-bottom,0px))} /* la pila ocupa toda la pantalla que puede, con los márgenes de arriba, de los lados y de abajo; el pie flota encima y, donde se cruzan, en negativo */
  p.cap{display:flex;flex-direction:column;justify-content:center;top:var(--adm,0px);bottom:0} /* el pie entero (cliente, título, categorías) queda centrado a media pantalla, tenga las líneas que tenga; «Ver →» sigue fijo abajo */
  p.cap .vp.vp{position:fixed;right:var(--gxr);bottom:calc(var(--m) * 1.5 + env(safe-area-inset-bottom,0px));margin:0} /* «Ver →», abajo a la derecha, en el margen inferior de la pantalla */
  p.cap .lbl{margin-bottom:.9em} /* «Destacados», separado del cliente */
  p.cap .c{margin-bottom:.35em;font-size:calc(var(--t48) * .85);line-height:1.15} /* móvil: cliente en Bradford a tamaño de lectura (≈19 px) */
  p.cap .cg{display:block;margin:.6em 0 0;font-size:calc(var(--t48) * .7);line-height:1.25;letter-spacing:-.01em} /* móvil: categorías ≈16 px */
  p.cap .cg:empty{display:none}
  p.cap .tt{max-width:none;font-size:var(--t96)}
  p.cap .vp{display:block;margin-top:.12em;text-align:right;font-size:var(--t96);line-height:1;letter-spacing:-.05em;color:inherit;text-decoration:none;pointer-events:auto}
}
@media (min-width:821px){.cap .cg{display:none}}

/* Home en táctil: la página no se desplaza, se desplaza #scr (la barra del navegador no se encoge y la cabecera no queda tapada) */
html.scr,html.scr body{height:100%;overflow:hidden;overscroll-behavior:none}
html.scr{margin-top:0 !important}
html.scr #scr{position:fixed;inset:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
html.scr body.admin-bar #main{margin-top:46px} /* con sesión iniciada, la barra de WordPress ocupa su sitio con un margen (no con relleno en #scr: el relleno desplazaría también lo pegajoso y el nombre quedaría 46 px más bajo que el menú) */

/* móvil: entre el final de la pila y el primer proyecto del grid, solo un margen (nada de pantalla en blanco) */
@media (max-width:820px){body.home .grid.grid,html.hfx body.home .grid.grid{padding-top:calc(var(--m) * 4)}}
/* móvil: «Proyectos» sobre el grid en L */
@media (max-width:820px){#gridlabel.label{font-size:var(--m-l,var(--t48));line-height:1.15}}
/* móvil: hueco entre pila y grid. «Proyectos» asoma abajo cuando la última imagen casi sale por arriba */
@media (max-width:820px){body.home .grid.grid,html.hfx body.home .grid.grid{position:relative;z-index:20;padding-top:calc(100svh - var(--hdr-h,66px) - var(--m) * 3)}}

/* móvil: filtros. Fuera la fila de categorías; en su lugar una sola línea «Filtros: Todos» que abre un panel lateral con las categorías en XL */
.fbtn,.fpan{display:none}
@media (max-width:820px){
.hdr .sub .cats{display:none}
.fbtn{display:block;appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;font-size:var(--m-s,calc(var(--t48) * .7));line-height:1.2;text-align:left;cursor:pointer}
.fbtn b{font-weight:inherit;border-bottom:var(--ul,1px) solid currentColor}
.fpan{display:block;position:fixed;inset:0;z-index:300;background:#fff;color:#000;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
html.f-open .fpan{transform:none}
.fpan .fp-h{position:absolute;left:var(--fx,16px);right:var(--fr,16px);top:var(--fy,16px);display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs,20px);line-height:1.2}
.fpan .fp-x{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.fpan .fp-l{display:flex;flex-direction:column;align-items:flex-start;padding:calc(var(--fy,16px) + var(--fs,20px) * 1.2 + var(--m,16px) * 2) var(--fr,16px) calc(var(--m,16px) * 3 + env(safe-area-inset-bottom)) var(--fx,16px)}
.fpan .fp-l a{font-size:var(--m-xl,var(--t96));line-height:var(--giant-lh,.9);letter-spacing:-.02em;color:inherit;text-decoration:none;padding:.04em 0;border-bottom:0}
.fpan .fp-l a.active{text-decoration:underline;text-decoration-thickness:.045em;text-underline-offset:.1em}
}
/* filtros (prueba): el panel entra por la izquierda y ocupa media pantalla; categorías en L, interlineado justo para que el subrayado no toque los ascendentes de la línea siguiente. Tocar fuera cierra */
@media (max-width:820px){
.fpan{right:auto;width:50vw;transform:translateX(-100%);border-right:1px solid #000}
.fpan .fp-h{right:var(--m,16px)}
.fpan .fp-l{padding-right:var(--m,16px)}
.fpan .fp-l a{font-size:var(--m-l,var(--t48));line-height:1.18;letter-spacing:-.01em;padding:0}
.fpan .fp-l a.active{text-decoration-thickness:.06em;text-underline-offset:.09em}
.fbk{display:none;position:fixed;inset:0;z-index:299;background:transparent}
html.f-open .fbk{display:block}
}
/* ===== MÓVIL: DOS TAMAÑOS DE TEXTO. Todo en M salvo lo que es XL (títulos de proyecto, «Ver →») y XXL (nombre gigante, lema, menú). El Lab queda fuera (pasada propia) ===== */
@media (max-width:820px){
html body:not(.page-id-5463) :is(#hdr,#main,.fpan,p.cap) :not(#stage *,#stage,.title,.title *,.tag,.tag *,.oname,.oname *,.otag,.otag *,.choose,.choose *,.mnav,.mnav *,.tt,.tt *,.vp,.head h1,.head h1 *,.sc,sup,.kp,img,svg,svg *){font-size:var(--m-m)}
html body:not(.page-id-5463) #main .head h1{font-size:var(--m-xl);line-height:1}
html body .fpan .fp-l a{line-height:1.2}
html body #grid .gzsw:not(.txsw),html body .hdr .gzsw{display:none}
}
/* móvil · Archivo: el interruptor de texto es «aA  M / XL» (a diminuta, A en L). M: filas en M. XL: número y título en XL; cliente, año y categorías siguen en M */
@media (max-width:820px){
html body .sizesw button[data-size=s],html body .sizesw button[data-size=large],html body .sizesw button[data-size=s]+i,html body .sizesw button[data-size=large]+i{display:none}
html body:not(.page-id-5463) #main .sizesw .lab.aa:not(#_){letter-spacing:0;white-space:nowrap}
html body:not(.page-id-5463) #main .sizesw .lab.aa .a1:not(#_){font-size:calc(var(--m-m) * .55)}
html body:not(.page-id-5463) #main .sizesw .lab.aa .a2:not(#_){font-size:var(--m-l);line-height:.8}
html.av-xl body:not(.page-id-5463) #main .arch .arow :is(.no,.no *,.t,.t *):not(#stage,.sc,.kp,sup){font-size:var(--m-xl)}
html.av-xl body:not(.page-id-5463) #main .arch .arow .t{line-height:1}
}
/* móvil · Proyectos: donde estaba «Retícula», el tamaño del texto «aA  M / XL». XL: títulos de proyecto en XL; cliente y categorías siguen en M */
.txsw{display:none}
@media (max-width:820px){
html body #grid .gzsw.txsw{display:flex}
html body:not(.page-id-5463) #main .txsw .lab.aa:not(#_){letter-spacing:0;white-space:nowrap}
html body:not(.page-id-5463) #main .txsw .lab.aa .a1:not(#_){font-size:calc(var(--m-m) * .55)}
html body:not(.page-id-5463) #main .txsw .lab.aa .a2:not(#_){font-size:var(--m-l);line-height:.8}
html.tx-xl body:not(.page-id-5463) #main #grid .cell :is(.tt-n,.tt-n *):not(.sc,.kp,sup){font-size:var(--m-xl);line-height:1;letter-spacing:-.02em}
html body:not(.page-id-5463) #main .arch .arow .ix:not(#_){align-items:flex-start;row-gap:.15em}
}
@media (max-width:820px){html body:not(.page-id-5463) #main .txsw .lab.aa:not(#_){width:auto;min-width:0;flex:0 0 auto;margin-right:.7em}}
/* filtros (prueba): panel a pantalla completa, sigue entrando por la izquierda; categorías en XXL, como el menú */
@media (max-width:820px){
html body .fpan.fpan{width:auto;right:0;border-right:0}
html body #fpan .fp-l a:not(#_){font-size:var(--xxl-m);line-height:.95;letter-spacing:-.05em} /* .95: lo justo para que el subrayado no toque los ascendentes de la línea siguiente */
html body #fpan .fp-l a.active:not(#_){text-decoration-thickness:.05em;text-underline-offset:.08em}
}
/* filtros: apilados en XXL; interlineado corto dentro de cada categoría (las que ocupan dos líneas) y más aire entre categorías, lo justo para que el subrayado no toque la siguiente */
@media (max-width:820px){
html body #fpan .fp-l a:not(#_){display:block;font-size:var(--m-xl);line-height:.85;margin-bottom:.17em;letter-spacing:-.04em} /* prueba: XL */
html body #fpan .fp-l a:last-child:not(#_){margin-bottom:0}
}
/* página de proyecto: «Prensa y conferencias» al final, en S, seco */
.proj .press{margin:calc(var(--m) * 4) 0 calc(var(--m) * 2);font-size:var(--m-s);line-height:1.4;max-width:calc(var(--m-s) * 38)}
.proj .press p{margin:0}
.proj .press .press-l{margin-bottom:.6em}
.proj .press a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
html body:not(.page-id-5463) #main .proj .press :is(p,a,br):not(#_):not(#_){font-size:var(--m-s)}
/* página de proyecto: cita destacada. La cita en XL, comilla de apertura colgada; debajo, tras raya, el crédito y el original en S */
.proj .pq{margin:calc(var(--m) * 4) 0;padding:0}
.proj .pq blockquote{margin:0;padding:0}
.proj .pq blockquote p{margin:0;font-size:var(--t96);line-height:1;letter-spacing:-.04em;max-width:16em;text-wrap:balance}
.proj .pq .hq{margin-left:-.5em;display:inline-block;width:.5em}
.proj .pq figcaption{margin-top:calc(var(--m) * 1.2);font-size:var(--m-s);line-height:1.35;display:flex;flex-direction:column;gap:.2em}
@media (max-width:820px){html body:not(.page-id-5463) #main .proj .pq blockquote p:not(#_):not(#_){font-size:var(--m-xl)}html body:not(.page-id-5463) #main .proj .pq :is(.hq):not(#_):not(#_){font-size:inherit}html body:not(.page-id-5463) #main .proj .pq figcaption :is(span):not(#_):not(#_){font-size:var(--m-s)}}
/* cita destacada en Bradford cursiva: distinta de todo lo demás en la web */
.proj .pq blockquote p{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em;line-height:1.02}
.proj .pq .hq{margin-left:-.42em;width:.42em}
/* la comilla cuelga dentro del bloque: queda en el margen de la página y el texto alineado a su derecha (el margen de 19 px no admite colgarla fuera) */
.proj .pq blockquote p{padding-left:.42em}
/* bajo la cita: dos columnas en Bradford cursiva, más pequeñas */
.proj .pq .pq-d{margin-top:calc(var(--m) * 2);columns:2;column-gap:calc(var(--gx, 20px) * 2);max-width:calc(var(--t96) * 16);font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--t24);line-height:1.3;letter-spacing:-.005em}
.proj .pq .pq-d p{margin:0 0 .8em;break-inside:avoid-column}
@media (max-width:820px){.proj .pq .pq-d{columns:1}html body:not(.page-id-5463) #main .proj .pq .pq-d p:not(#_):not(#_){font-size:var(--m-m)}}
/* Lab · Categorías: tabla de definiciones. Nombre en L, definición en S, número de proyectos alineado a la derecha; una raya más gruesa separa las disciplinas de los mundos */
.lab .cat-t{margin:calc(var(--gs, 20px) * 1.5) var(--gx, 0) 0;border-top:1px solid currentColor}
.lab .cat-r{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,1fr);column-gap:calc(var(--gx, 20px) * 2);align-items:baseline;padding:.7em 0 .8em;border-bottom:1px solid currentColor}
.lab .cat-r.cat-w{border-top:3px solid currentColor}
.lab .cat-r p{margin:0}
.lab .cat-n{font-size:var(--t48);letter-spacing:-.03em;line-height:1}
.lab .cat-d{font-size:var(--t24);line-height:1.3;max-width:38em}
.lab .cat-c{font-size:var(--t48);letter-spacing:-.03em;line-height:1;text-align:right;font-variant-numeric:tabular-nums lining-nums}
.lab .cat-m{margin-top:calc(var(--gs, 20px) * 1.2)}
@media (max-width:820px){.lab .cat-r{grid-template-columns:minmax(0,1fr) auto;row-gap:.35em}.lab .cat-d{grid-column:1 / -1;grid-row:2}}
/* «Sobre las categorías»: diminuto, al final de la fila de filtros; en el panel móvil, abajo, en M */
.cats .cats-about{font-size:var(--t15);margin-left:1.6em;border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;letter-spacing:0}
.fpan .fp-about{display:block;margin:calc(var(--m,16px) * 1.5) var(--fr,16px) calc(var(--m,16px) * 3) var(--fx,16px);color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
/* Lab · notas al pie de las marcas, con volados, como un manual */
.lab .lb-x.lb-x > .lb-d.lb-d.cat-m{margin-bottom:.45em}
.lab .cat-fn{list-style:none;margin:0 var(--gx) calc(30 * var(--u));padding:0;font-size:var(--t24);line-height:1.35;max-width:46em}
.lab .cat-fn li{margin:0 0 .25em;padding-left:1.1em;text-indent:-1.1em}
.lab .cat-fn sup,.lab .cat-m sup{font-size:.62em;line-height:0;vertical-align:.55em;font-variant-numeric:lining-nums;margin-left:.05em}
/* Lab 01.2 · el nombre alineado a margen arranca en la segunda columna, bajo su conmutador */
@media (min-width:821px){.lab #type .kxxl > .ty-gc > #laboa#laboa{grid-area:4 / 2 / auto / -1;font-size:min(var(--ogiant),calc((100vw - var(--gx) - var(--gxr)) / 6.2))}}
/* Lab · Categorías v2: tres grupos separados por aire (no por rayas gruesas), con una etiqueta vertical en S; definiciones en Bradford; notas al pie en Bradford S, como un pie de imprenta */
.lab .cat-t.cat-t{border-top:0}
.lab .cat-g{display:grid;grid-template-columns:calc(var(--meta, 14px) * 2) minmax(0,1fr);border-top:1px solid currentColor}
.lab .cat-g + .cat-g{margin-top:calc(var(--gs, 20px) * 2.2)}
.lab .cat-v{margin:0;writing-mode:vertical-rl;transform:rotate(180deg);text-align:end;font-family:"Neuzeit S","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;font-size:var(--meta, 14px);line-height:1;letter-spacing:0;padding-bottom:.85em;white-space:nowrap}
.lab .cat-gr .cat-r:last-child{border-bottom:0}
.lab .cat-g:last-child .cat-gr .cat-r:last-child{border-bottom:1px solid currentColor}
.lab .cat-d.cat-d{font-family:var(--serif);font-weight:500;letter-spacing:-.005em;line-height:1.3}
.lab .lb-x.lb-x > .lb-d.lb-d.cat-m{margin-top:calc(var(--gs, 20px) * 2.8);font-size:max(22px,var(--b30));line-height:1.25}
.lab .cat-fn.cat-fn{font-family:var(--serif);font-weight:500;font-size:var(--meta, 14px);line-height:1.4;max-width:40em}
@media (max-width:820px){.lab .cat-g{grid-template-columns:calc(var(--m-m) * 1.5) minmax(0,1fr)}.lab .cat-v{font-size:var(--m-m)}}
/* Lab · notas al pie como filas: la marca en Neuzeit L, la explicación en Bradford S, alineadas a las columnas de la tabla */
.lab .cat-fn.cat-fn{font-family:inherit;font-size:inherit;max-width:none;margin-top:.4em;border-top:1px solid currentColor}
.lab .cat-fn.cat-fn li{display:grid;grid-template-columns:calc(var(--meta, 14px) * 2) minmax(0,3fr) calc(var(--gx, 20px) * 2) minmax(0,6fr) calc(var(--gx, 20px) * 2) minmax(0,1fr);column-gap:0;align-items:baseline;margin:0;padding:.55em 0 .65em;text-indent:0;border-bottom:1px solid currentColor}
.lab .cat-fn.cat-fn li > sup{font-family:"Neuzeit S","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:var(--meta, 14px);vertical-align:baseline;line-height:1;margin:0}
.lab .cat-fn .fn-k{font-family:"Neuzeit S","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;font-size:var(--t24);letter-spacing:-.02em;line-height:1.15}
.lab .cat-fn .fn-d{font-family:var(--serif);font-weight:400;font-size:calc(var(--meta, 14px) * 1.05);line-height:1.3;letter-spacing:-.005em;max-width:40em}
@media (max-width:820px){.lab .cat-fn.cat-fn li{grid-template-columns:calc(var(--m-m) * 1.5) minmax(0,1fr);row-gap:.3em}.lab .cat-fn .fn-k{font-size:var(--m-xl)}.lab .cat-fn .fn-d{grid-column:2;font-size:var(--m-m)}}

/* notas al pie: media anchura; la explicación arranca pegada a la marca, no en la columna de las definiciones */
@media (min-width:821px){.lab .cat-fn.cat-fn{width:calc(50% - var(--gx, 20px));max-width:none}.lab .cat-fn.cat-fn li{grid-template-columns:calc(var(--meta, 14px) * 2) minmax(0,2fr) minmax(0,3fr);column-gap:0}.lab .cat-fn .fn-d{grid-column:3;padding-left:var(--gx, 20px)}}
/* Sistema tipográfico: el texto corrido usa solo los tamaños del sistema. Bradford va un 5 % por encima de Neuzeit para igualar el ojo: S = meta × 1,05 (como los créditos de imagen y el colofón), M = b24 (como las descripciones del Lab) */
@media (min-width:821px){
html body .lb-hero p.h1-n{font-size:calc(var(--meta, 14px) * 1.05);line-height:1.3;letter-spacing:-.005em}
html body .lab .cat-d.cat-d{font-size:max(18px,var(--b24))}
html body .lab .ri p.rs{font-size:var(--t15)}
html body .proj .pq-d.pq-d p{font-size:max(18px,var(--b24))}
}
.lab .lb-x.lb-x > .lb-d.lb-d.cat-m{font-weight:500}
/* Lab · notas al pie: contador de proyectos con cada marca, en Neuzeit M como la marca */
.lab .cat-fn .fn-c{font-family:"Neuzeit S","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;font-size:var(--t24);letter-spacing:-.02em;line-height:1.15;text-align:right;font-variant-numeric:tabular-nums lining-nums;padding-left:var(--gx, 20px)}
@media (min-width:821px){.lab .cat-fn.cat-fn li{grid-template-columns:calc(var(--meta, 14px) * 2) calc(var(--t24) * 9) minmax(0,1fr) auto}}
@media (max-width:820px){.lab .cat-fn.cat-fn li{grid-template-columns:calc(var(--m-m) * 1.5) minmax(0,1fr) auto}.lab .cat-fn .fn-c{grid-column:3;grid-row:1;font-size:var(--m-m)}.lab .cat-fn .fn-d{grid-row:2}}
/* Notas al pie del Lab: Bradford S, como los créditos (B). La nota del color se queda en Neuzeit 18 px (A) porque acompaña a una cifra enorme */
html body .lab p.p-fn.snd-fn{font-size:calc(var(--meta, 14px) * 1.05);font-weight:400;line-height:1.3;letter-spacing:-.005em;max-width:40em}
/* 07.4 Theremin: la cifra al tamaño de las de 03 Estadísticas (doble XL, con el mismo tope), en Bradford Light por el fondo; «Hz» como sus volados, en L */
html body .lab .thr-r{font-size:min(calc(var(--t96) * 2),15vw);letter-spacing:-.055em}
html body .lab .thr-r sup{font-size:var(--t48);letter-spacing:-.03em;top:.06em}
/* 09 Info-Gradiente, fondo «Blanco y negro»: colores fijos por columna. Titulares blanco, Filosofía negro; Poemas negro, Declaraciones blanco */
.lab .gb-off .g-st:not(.g-2):not(.g-3){background:linear-gradient(90deg,#fff 50%,#000 50%)}
.lab .gb-off .g-st.g-2{background:linear-gradient(90deg,#000 50%,#fff 50%)}
@media (max-width:820px){.lab .gb-off .g-st:not(.g-2):not(.g-3){background:#fff}.lab .gb-off .g-st.g-2{background:#000}}
/* Marcas de la línea del cliente como volados: «A Puerta Cerrada⁽cancelado⁾» */
sup.mk{font-size:calc(var(--t15, 11px) * 1.05);line-height:0;vertical-align:.5em;margin-left:.12em;letter-spacing:0;font-style:normal}
/* Archivo · Cronológico invertido: la flecha apunta hacia arriba */
.sortbar .dir-u .arw{transform:rotate(180deg)}
.hfx .sortbar button[data-sort="newest"],.hfx .sortbar button[data-sort="newest"].on{border-bottom-color:transparent}
.sortbar button[data-sort="newest"] .lbl,.sortbar .dir{display:inline-block;border-bottom:1px solid transparent}
.sortbar .dir{margin-left:.7em}
.sortbar button[data-sort="newest"] .lbl + .dir{margin-left:0}
.sortbar button[data-sort="newest"] .lbl{padding-right:.28em}
html.hfx.av-index .arch .sortbar button[data-sort="newest"],html.hfx.av-index .arch .sortbar button[data-sort="newest"].on{border-bottom-color:transparent}
.hfx.av-index .arch .sortbar .dir .arw{display:inline-block;margin-left:0}
.sortbar button[data-sort="newest"].on .lbl,.sortbar button[data-sort="newest"].on .dir.on{border-bottom-color:currentColor}
/* Archivo · «Subir ↑» al final de la lista, como los botones del orden */
.arch-up{margin:calc(var(--m,16px) * 2.5) 0 calc(var(--m,16px) * 5);font-size:var(--t24)}
.arch-up button{font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid transparent;padding:0;cursor:pointer;letter-spacing:inherit}
.arch-up button:hover,.arch-up button:focus-visible{border-bottom-color:currentColor}
.arch-up .arw-u{display:inline-block;width:.752em;height:.752em;margin-left:.3em;vertical-align:baseline;overflow:visible}
@media (max-width:820px){.arch-up{font-size:var(--m-m)}}
/* Archivo · Año: una sola línea, tramos de dos años */
.sortbar .yrsw .yrr{white-space:nowrap}
html.hfx.av-index .arch .yrsw .yrl{font-size:var(--t24)}
/* Lab 05 · prueba: círculo y cuadrado de la identidad rebotando a pantalla completa (sustituyen a las imágenes de proyectos) */
.lab .w-fld{position:relative;height:100vh;margin-top:var(--gs,20px);overflow:hidden}
.lab .w-fld .w-o{position:absolute;left:0;top:0;width:clamp(120px,22vw,340px);height:auto;color:inherit;will-change:transform;display:block}
/* móvil · el icono de tamaño de texto es «AA»: la primera grande, la segunda más pequeña (no diminuta), como el icono habitual */
@media (max-width:820px){html body:not(.page-id-5463) #main :is(.sizesw,.txsw) .lab.aa .a1:not(#_){font-size:calc(var(--m-l) * .62);margin-left:.04em}}
/* Lab · móvil: nada puede ser más ancho que la pantalla (si algo lo es, el teléfono aleja la página y todo parece media columna) */
@media (max-width:820px){
html,body{overflow-x:clip}
.lab #type .ty-s.ty-s,.lab #type .ty-col.ty-col{grid-template-columns:minmax(0,1fr);min-width:0;width:auto}
.lab #type .ty-col > *,.lab #type .ty-r{min-width:0}
.lab #switches .sw-x{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lab #sound p.bm-v{width:auto}
}
@media (max-width:820px){
.lab .lb-d.lb-br.lb-br{max-width:none}
.lab .lab-gl.lab-gl{columns:2}
.lab .lab-gl.lab-gl > li.sec:nth-child(n){break-before:auto}
}
/* Lab · título en 53 idiomas: caja de altura fija (la de su versión más larga); el texto se apoya abajo y crece hacia arriba */
.lab .lb-hero h1.h1-fix{display:flex;flex-direction:column;justify-content:flex-end}
.lab .lb-hero h1.h1-fix > .h1-in{display:block}

/* 261103 mobile: Chromatic Index value above title */
@media (max-width:820px){.lab .h-l.h-l{grid-template-columns:auto minmax(0,1fr) auto}.lab .h-l > a > i{grid-column:1;grid-row:1}.lab .h-l > a > b{grid-column:2;grid-row:1}.lab .h-l > a > span{grid-column:2;grid-row:2}.lab .h-l > a > em{grid-column:3;grid-row:1}}
/* 261103 mobile: palette table, filter labels & footnotes */
@media (max-width:820px){.lab .p-l .p-b.p-b{grid-template-columns:minmax(0,1fr) 4.9em 6.4em 4.6em;column-gap:calc(var(--gx)*.5)}.lab .p-l .p-b > span{white-space:normal;min-width:0}}@media (max-width:820px){html body .lab .cat-g .cat-v.cat-v,html body .lab .cat-g .cat-v.cat-v span{font-size:var(--meta)}.lab .cat-g.cat-g{grid-template-columns:calc(var(--meta)*2.2) minmax(0,1fr)}}@media (max-width:820px){html body .lab .cat-fn.cat-fn li{grid-template-columns:calc(var(--meta)*2.2) minmax(0,1fr) auto}html body .lab .cat-fn .fn-k.fn-k{font-size:var(--t48)}html body .lab .cat-fn .fn-c.fn-c{font-size:var(--t48)}html body .lab .cat-fn .fn-d.fn-d{font-size:var(--t24)}}
/* 261103 mobile: Lab hero gap halved */
@media (max-width:820px){.lab .lb-hero.lb-hero{padding-top:6vh}}
/* 261103 mobile: text continues after .com */
@media (max-width:820px){.lab .lb-hero h1 .h1-l + .h1-l{display:inline}.lab .lb-hero h1 .h1-l + .h1-l::after{content:" "}}
/* 261103 mobile: Lab intro larger (L×1.3), nota bene at running-text size */
@media (max-width:820px){html body .lab .lb-hero p.lb-in{font-size:calc(min(var(--t96),calc(var(--ogiant) * .73)) * .65)}html body .lab .lb-hero p.lb-d.lb-fn{font-size:var(--m-m)}html body .lab .lb-hero p.lb-fn sup{font-size:calc(var(--t48) * .42)}}
/* 261103 «Claude¹:» enlaza a la sección del asistente */
.lab .by a.by-l{color:inherit;border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}.lab .by a.by-l sup{font-size:.6em;line-height:0;vertical-align:.55em;margin-left:.05em;font-feature-settings:normal;letter-spacing:0}
/* 261103 tablet: the language sentence keeps the same ratio to «Atelier's Lab» as on phones (0.73) */
@media (max-width:820px){html body .lab .lb-hero h1.h1-fix{font-size:min(var(--t96),calc(var(--ogiant) * .73))}}
/* 261103 tablet & mobile: «An archive…» tighter; desktop stays at 1.15 */
@media (max-width:820px){html body .lab .lb-hero p.lb-in{line-height:1.05}}
/* 261103 † de la nota, como el de «† On this note» */
.lab .lb-fn .nb sup.dg{font-weight:400;margin-left:.08em;letter-spacing:0}
/* 261103 Type Specimen: attribution of the quote on its own line, title in italics */
.lab #type .ty-w .q-src{display:block;margin-top:.5em}
/* 261103 «Last Update» con hora de Madrid */
.lab .pg .pg-d .pg-g{display:inline-grid;grid-template-columns:auto auto;column-gap:.25em;row-gap:.08em;line-height:1;align-items:baseline}.lab .pg .pg-d .pg-hc{display:inline-block;width:0}.lab .pg .pg-d .pg-g .pg-l{justify-self:end;margin-right:0}.lab .pg .pg-d .pg-z{font-size:.55em;line-height:0;vertical-align:.75em;margin-left:.15em;letter-spacing:0}
/* 261103 desktop: «Atelier Hugo…» (optical alignment) on the same size, leading and top as the kerning lines, so both baselines meet */
@media (min-width:821px){html body .lab #type .kxxl > .ty-gc > #laboa#laboa{font-size:min(var(--ogiant), calc((100vw - var(--gx) - var(--gxr)) / 5.7));line-height:.83;padding-top:.062em}}
/* 261103 Chromatic Index: colour names in Bradford S */
.lab .h-l.m-name > a > b{font-family:var(--serif);font-size:calc(var(--meta) * 1.05);font-weight:400;letter-spacing:-.005em}
/* 261103 the Note and the studio manifesto on Info share one style: Bradford b30 (desktop) / m-m (mobile), weight 500, 1.3 */
html body .lab .lb-hero p.lb-d.lb-fn,html body .about .man p{font-weight:500;line-height:1.3}
/* 261103 mobile: switch labels at the mobile running size, long ones wrap with the arrow hanging; small print never under S (12 px) */
@media (max-width:820px){html body .lab #switches .sw-b.sw-b{white-space:normal;padding-left:1em;text-indent:-1em}}@media (max-width:820px){html body .lab .ri p.rs,html body .lab .rs,html body .lab .ty-k,html body .lab .lb-fn2{font-size:var(--meta)}}@media (max-width:820px){html body .lab #switches .sw-b.sw-b{font-size:var(--m-m)}}
/* 261103 mobile: «Atelier Hugo…» (optical alignment) at the same XXL as the kerning words above */
@media (max-width:820px){html body .lab .ty-oa.ty-oa{font-size:var(--ogiant)}}
/* 261103 mobile: when a group of switches does not fit after its label, all its options move to the next line together (class set by main.js) */
@media (max-width:820px){.lab .lb-s.lb-lbr{display:block;height:0;overflow:hidden}.lab p.lb-d > :not(.lb-s):not(button).lb-lbr{display:block;flex-basis:100%}}
/* 261103 mobile: the manifesto at the lead size (same as «An archive…»), easier to read than XL */
@media (max-width:820px){html body .lab .s-t.s-t{font-size:var(--t48);line-height:1.15;letter-spacing:-.04em;word-spacing:-.02em;text-wrap:pretty}}
/* 261103 mobile: switch groups separated by «·» start a new line */
@media (max-width:820px){.lab .lb-s.lb-dot{display:block;height:0;overflow:hidden}}
/* 261103 mobile pattern: the last row of switches keeps a double gap (--gd) before the content it controls; consecutive rows stay together */
@media (max-width:820px){html body #main .lab p.lb-d:has(> button.lb-b):not(:has(+ p.lb-d > button.lb-b)){margin-bottom:var(--gd)}}
/* 261103 mobile: rows of switches at 2.1 line spacing; each switch is as tall as its line (about 38 px) so it is easy to tap */
@media (max-width:820px){html body #main .lab p.lb-d:has(> button.lb-b){line-height:2.1}html body #main .lab p.lb-d:has(> button.lb-b) > button.lb-b{line-height:inherit;vertical-align:baseline}}
/* 261103 mobile: the small clocks start at the same distance below the rule as every other statistic */
@media (max-width:820px){html body .lab .q.q:has(.q-ck){padding-top:calc(34 * var(--u))}}
/* 261103 Lab 05: the glass sphere of the identity joins the ring and the square */
.lab .w-fld img.w-o-g{height:auto;aspect-ratio:1;border-radius:50%;display:block}

/* 261103 Lab 05 · prueba: cuadrado de vidrio líquido */
.lab .w-fld canvas.w-o-q,.lab .w-fld canvas.w-o-b{height:auto;aspect-ratio:1}

/* 261103 Lab 05 · notas sobre el círculo y el cuadrado al fondo del campo; las formas rebotan por encima */
.lab .w-fld.w-fld{height:auto;min-height:100vh}
.lab .w-fld .w-o{z-index:1}
.lab .cs-n{list-style:none;margin:0;padding:calc(80 * var(--u)) var(--gx) calc(150 * var(--u));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(45 * var(--u));row-gap:calc(110 * var(--u));align-items:start;position:relative;z-index:0}
.lab .cs-n > li{margin:0;padding:0}
.lab .cs-n .cs-h{font-family:var(--sans);font-size:var(--t24);font-weight:400;line-height:1.15;letter-spacing:-.02em;margin:0 0 .6em}
.lab .cs-n .cs-h span{margin-right:.25em}
.lab .cs-n p{font-family:var(--serif);font-size:calc(var(--meta) * 1.05);font-weight:400;line-height:1.3;letter-spacing:-.005em;margin:0;text-wrap:pretty}
.lab .cs-n p sup{font-size:.7em;line-height:0}
.lab .w-fld .w-o.w-o{width:clamp(60px,11vw,170px)}
.lab .w-fld canvas.w-o-b.w-o-b{z-index:2} /* la lupa pasa siempre por encima */
.lab .w-fld canvas.w-o{filter:drop-shadow(0 .06em .14em rgba(0,0,0,.22));font-size:clamp(60px,11vw,170px)}
@media (max-width:820px){.lab .cs-n{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gx);row-gap:calc(var(--gd) * 1.5);padding-top:var(--gd)}}

/* 261103 Lab 05 · toda la sección (título, texto, formas y notas) pasa en bucle de negro a azul RGB */
@keyframes cs-c{from{color:#000}to{color:#00f}}
html body .lab .lb-x:has(#labfld){animation:cs-c 10s ease-in-out infinite alternate}
html body .lab .lb-x:has(#labfld) :is(.lb-n,.lb-n span,.lb-t,.lb-d,.lb-d b,.lb-d a,.lb-s,.w-fld){color:inherit}
.lab .cs-n,.lab .cs-n h3,.lab .cs-n p,.lab .cs-n em,.lab .cs-n span{color:inherit}
@media (prefers-reduced-motion:reduce){html body .lab .lb-x:has(#labfld){animation:none}}

/* 261103 Lab 05 · si el navegador no tiene WebGL, la bola (lupa) y el gel se dibujan con CSS */
.lab .w-fld canvas.w-o-x{border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,0) 8%),radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 58%,rgba(0,0,0,.38) 100%);-webkit-backdrop-filter:saturate(1.2);backdrop-filter:saturate(1.2);backdrop-filter:url(#w-lens) saturate(1.2);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent);background-color:color-mix(in srgb,currentColor 16%,transparent)}
.lab .w-fld canvas.w-o-q.w-o-x{background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.9) 0 5%,rgba(255,255,255,0) 11%),radial-gradient(circle at 70% 78%,rgba(255,255,255,.35) 0 4%,rgba(255,255,255,0) 10%),color-mix(in srgb,currentColor 20%,transparent);-webkit-backdrop-filter:blur(.6px);backdrop-filter:blur(.6px);backdrop-filter:url(#w-gelb) blur(.4px);box-shadow:none;filter:none;border-radius:0}

/* 261103 Lab · R.I.P.: la identidad anterior; la entrada de la antigua web y la papelería azul con la cadena de palabras tachadas hasta los bordes */
.lab .rip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(45 * var(--u));margin:var(--gd) var(--gx) 0;align-items:start}
.lab .rip-a{grid-column:2 / span 2;font-family:var(--sans);font-size:var(--t48);font-weight:400;line-height:1.68}
.lab .rip-a p{margin:0;white-space:nowrap}
.lab .rip-a .rip-w,.lab .rip-a .rip-n{letter-spacing:.28em;text-transform:uppercase}
.lab .rip-a s{text-decoration-thickness:1px}
.lab .rip .rip-z{letter-spacing:0}
.lab .rip-a .rip-s{margin-left:1em}
.lab .rip{grid-auto-flow:row dense;row-gap:calc(var(--gd) * .9)}
.lab .rip-a.rip-t{grid-column:auto;font-size:var(--t24)}
.lab .rip-p{grid-column:1;grid-row:1 / span 4;align-self:stretch;min-height:0;background:#00f;color:#fff;overflow:hidden;position:relative}
@keyframes rip-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.lab .rip-l{animation:rip-up 60s linear infinite}
@media (prefers-reduced-motion:reduce){.lab .rip-l{animation:none}}
.lab .rip-l{position:absolute;left:17%;right:0;top:-1.25em;font-family:var(--sans);font-size:calc(var(--t24) * .9);font-weight:400;letter-spacing:.32em;text-transform:uppercase;line-height:2.85;white-space:nowrap}
.lab .rip-l p{margin:0}
.lab .rip-l s{text-decoration-thickness:1px}
.lab .rip-l s + s{margin-left:.95em}
@media (max-width:820px){.lab .rip{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gx);row-gap:calc(var(--gd) * .6)}.lab .rip-a{grid-column:1 / -1}.lab .rip-p{order:-1}.lab .rip-a.rip-t{grid-column:auto}.lab .rip-a.rip-t:nth-of-type(n+8){display:none}.lab .rip-p{grid-column:1 / -1;grid-row:auto;aspect-ratio:210 / 297;min-height:0;margin-top:calc(var(--gd) * .4)}.lab .rip-l{font-size:var(--t24)}}

/* 261103 Lab · R.I.P.: toda la sección en azul RGB con los textos en blanco; la cadena pasa en la columna 1 y los logotipos parpadean en las columnas 2 a 4 */
html body .lab .lb-x.lb-rip{background:#00f;color:#fff;padding-bottom:max(calc(380 * var(--u)),140px)}
html body .lab .lb-rip :is(.lb-n,.lb-n span,.lb-t,.lb-d,.rip,.rip *){color:#fff}
.lab .lb-rip .rip-p{background:transparent}

/* 261103 Lab · R.I.P. en dos mitades: a la izquierda la entradilla y debajo la cadena que pasa; a la derecha el logotipo grande y debajo los logotipos al tamaño de la cadena */
@media (min-width:821px){html body .lab .lb-x.lb-rip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(45 * var(--u));padding-left:var(--gx);padding-right:var(--gx)}
html body .lab .lb-rip > *{margin-left:0;margin-right:0}
html body .lab .lb-rip > .lb-n,html body .lab .lb-rip > .lb-t{grid-column:1 / -1}
html body .lab .lb-rip > .lb-d{grid-column:1 / span 2;grid-row:3;max-width:none;margin-bottom:0}
html body .lab .lb-rip .rip{display:contents}
html body .lab .lb-rip .rip-p{grid-column:1 / span 2;grid-row:5;height:auto;align-self:stretch;margin-top:calc(var(--gd) * .5)}
html body .lab .lb-rip .rip-g{grid-column:3 / span 2;grid-row:5;height:auto;margin-top:calc(var(--gd) * .5);overflow:visible}html body .lab .lb-rip .rip-g > .rip-t:nth-child(n+7){display:none}}
html body .lab .lb-rip .rip-l{left:0;font-size:var(--rip-f)}
html body .lab .lb-rip{--rip-f:calc(var(--t48) * .62)}
@media (max-width:820px){html body .lab .lb-rip{--rip-f:calc(var(--t24) * 1.04)}}
html body .lab .lb-rip .rip-g{display:flex;flex-direction:column;row-gap:calc(var(--t24) * 1.6)}
html body .lab .lb-rip .rip-a.rip-t{font-size:var(--rip-f)}
@media (max-width:820px){html body .lab .lb-rip .rip{grid-template-columns:minmax(0,1fr)}html body .lab .lb-rip .rip-p{order:0}html body .lab .lb-rip .rip-g{grid-column:1 / -1;margin-top:max(calc(var(--gd) * 1.3),90px)}}

/* 261103 Lab 05 · la nota 12 (Identidad) es la declaración principal: ocupa dos columnas, con título y texto a los tamaños de la entradilla */
.lab .cs-n{grid-auto-flow:row dense}
.lab .cs-n > li:nth-child(12) .cs-h{font-size:var(--t48);line-height:1.05;letter-spacing:-.03em;margin-bottom:.45em}
.lab .cs-n > li:nth-child(12) p{font-size:max(18px,var(--b24));font-weight:500;line-height:1.3}
.lab .cs-n > li > p + p{margin-top:1.3em}
@media (max-width:820px){.lab .cs-n > li:nth-child(12){grid-column:1 / -1;grid-row:auto}}

/* 261103 Lab 05 · en escritorio las notas caen a alturas desiguales, como al principio; en móvil bajan con pasos desiguales medidos en líneas del texto */
.lab .cs-n{--L:calc(var(--meta) * 1.05 * 1.3)}
@media (min-width:821px){.lab .cs-n{row-gap:calc(85 * var(--u))}.lab .cs-n > li{margin-top:calc(var(--y,0) * var(--u) * .75)}.lab .cs-n > li:nth-child(1){--y:0}.lab .cs-n > li:nth-child(2){--y:220}.lab .cs-n > li:nth-child(3){--y:90}.lab .cs-n > li:nth-child(4){--y:360}.lab .cs-n > li:nth-child(5){--y:60}.lab .cs-n > li:nth-child(6){--y:300}.lab .cs-n > li:nth-child(7){--y:140}.lab .cs-n > li:nth-child(8){--y:20}.lab .cs-n > li:nth-child(9){--y:110}.lab .cs-n > li:nth-child(10){--y:40}.lab .cs-n > li:nth-child(11){--y:130}.lab .cs-n > li:nth-child(12){--y:60}.lab .cs-n > li:nth-child(11){grid-column:4;grid-row:3}.lab .cs-n > li:nth-child(12){grid-column:3 / span 2;grid-row:4}}
@media (max-width:820px){.lab .cs-n{row-gap:calc(var(--L) * 2)}.lab .cs-n > li{margin-top:calc(var(--m,0) * var(--L))}.lab .cs-n > li:nth-child(1){--m:0}.lab .cs-n > li:nth-child(2){--m:4}.lab .cs-n > li:nth-child(3){--m:1}.lab .cs-n > li:nth-child(4){--m:6}.lab .cs-n > li:nth-child(5){--m:0}.lab .cs-n > li:nth-child(6){--m:3}.lab .cs-n > li:nth-child(7){--m:2}.lab .cs-n > li:nth-child(8){--m:7}.lab .cs-n > li:nth-child(9){--m:0}.lab .cs-n > li:nth-child(10){--m:4}.lab .cs-n > li:nth-child(11){--m:1}.lab .cs-n > li:nth-child(12){--m:2}}


/* 261103 Lab · antes de una sección de color el blanco que queda es igual al color que empieza: el espacio entre secciones, una vez en cada lado */
html body .lab .lb-x:has(+ .lb-x.lb-rip),html body .lab .lb-x:has(+ #switches){padding-bottom:max(calc(380 * var(--u)),140px)}
html body .lab .lb-x:has(+ .lb-x.lb-rip) .cs-n{padding-bottom:0}

/* 261103 Lab · R.I.P.: rótulos «Identity, 2016» y «Identity, 2026» como los de los interruptores («Orden:»); después de la identidad anterior, corte a blanco con la nueva en negativo: logotipo y lema en negro y en azul; al lado de cada uno, en la columna siguiente y alineadas a la derecha, las marcas: los cuadrados en negro junto al negro y los círculos en azul junto al azul */
html body .lab .lb-rip .rip-y{grid-column:1 / -1;margin:var(--gd) 0 0;font-family:var(--serif);font-size:max(18px,var(--b24));font-weight:500;line-height:1.3;letter-spacing:-.005em}
html body .lab .lb-x.lb-rip{padding-bottom:0}
html body .lab .lb-rip > .rip-new{grid-column:1 / -1;margin:var(--gd) calc(var(--gx) * -1) 0;padding:var(--gd) var(--gx) 0;background:#fff;color:#000;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(45 * var(--u));align-items:start}
html body .lab .lb-rip .rip-new > .rip-y{margin-top:0;color:#000}
html body .lab .lb-rip > .rip-new{box-shadow:0 2px 0 #fff} /* tapa la última fila de píxel azul cuando la altura cae en fracción */
html body .lab .lb-rip .rip-lk{grid-column:span 1;margin-top:calc(var(--gd) * .5);color:#000}
html body .lab .lb-rip .rip-lk.rip-bl{color:#00f}
html body .lab .lb-rip .rip-lk p{margin:0;color:inherit;font-family:var(--sans);font-weight:400;font-size:calc(73.4 * var(--u));line-height:var(--giant-lh);letter-spacing:-.05em}
html body .lab .lb-rip .rip-lk p > span{display:block;color:inherit}
html body .lab .lb-rip .rip-lk .rip-tg{margin-top:1.2em;white-space:nowrap}
html body .lab .lb-rip .rip-mk{grid-column:span 1;display:flex;flex-direction:column;align-items:flex-end;row-gap:calc(40 * var(--u));margin-top:calc(var(--gd) * .5);color:#000}
html body .lab .lb-rip .rip-mk.rip-ci{color:#00f}
@media (min-width:821px){html body .lab .lb-rip .rip-mk{align-self:stretch;justify-content:space-between;font-size:calc(73.4 * var(--u));margin-top:calc(var(--gd) * .5 - .057em);padding:0 40% .135em 0}} /* las marcas van de la altura de las mayúsculas de «Atelier» a la línea de base de «exhibitions.», y se acercan a su logotipo */
html body .lab .lb-rip .rip-k{display:block;width:clamp(40px,6vw,115px);height:auto;aspect-ratio:1 / 1}
@media (min-width:821px){html body .lab .lb-rip > .rip-y{grid-row:4}html body .lab .lb-rip > .rip-new{margin-top:calc(var(--gd) * 1.5);padding-top:calc(var(--gd) * 1.5)}}
/* el corte a blanco es interno a la sección: azul + blanco suman lo mismo que de la entradilla a «Identity, 2016» */
@media (max-width:820px){html body .lab .lb-rip > .rip-y{margin-left:var(--gx);margin-right:var(--gx)}html body .lab .lb-rip > .rip-new{margin-left:0;margin-right:0;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gx)}html body .lab .lb-rip .rip-lk{grid-column:1 / -1}html body .lab .lb-rip .rip-mk{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:.9em;width:7em;font-size:calc(73.4 * var(--u));margin-top:1.2em}html body .lab .lb-rip .rip-k{width:100%}html body .lab .lb-rip .rip-lk.rip-bl{margin-top:calc(var(--gd) * 1.5)} /* en tablet y móvil las marcas forman una fila bajo su logotipo, tan ancha como «creative direction,» */}

/* 261103 Lab · las líneas de interruptores resaltan: banda a todo el ancho en el color de su sección (la columna vertical de BPM tiene su propia franja, abajo) (currentColor, así sigue también los colores animados; con border-image, que no crea capas propias, para que la banda de una columna no tape el texto de la otra) y letra en blanco */
html body #main .lab p.lb-d:not(.bpm-v):has(button),html body #main .lab p.lb-d.snd-ins{border-image:linear-gradient(currentColor,currentColor) fill 0 / 0 / 0 100vmax;-webkit-text-fill-color:#fff;padding-top:0;padding-bottom:0;line-height:2.1}
html body #main .lab p.lb-d:not(.bpm-v):has(button),html body #main .lab p.lb-d:not(.bpm-v):has(button) *,html body #main .lab p.lb-d.snd-ins{text-decoration-color:#fff}
html body #main .lab p.lb-d.side:has(button){background:none;box-shadow:none;clip-path:none;border-image:none;z-index:2} /* «Vary:» cuando se coloca a la derecha en la misma línea que «Play / Stop»: usa la banda de esa línea */
html body #main .lab p.lb-d.snd-bpm.bpm-v > button{align-self:center;display:block;line-height:1.3;padding:.4em 0;border-image:linear-gradient(currentColor,currentColor) fill 0 / 0 / 0 100vmax 0 .7em;-webkit-text-fill-color:#fff;text-decoration-color:#fff} /* BPM en vertical junto a la retícula: cada número tiene su franja negra, de la misma altura que las bandas de interruptores, hasta el borde derecho de la pantalla */
html body #main .lab p.lb-d.bpm-cut:not(.bpm-v):has(button){clip-path:inset(0 var(--cut,-100vmax) 0 -100vmax)}
html body #main .lab p.snd-bpm.bpm-v > .snd-bt{top:var(--bt-t,0);height:var(--bt-h,auto);left:0;right:auto;margin:0;display:flex;align-items:center;border-image:linear-gradient(currentColor,currentColor) fill 0 / 0 / 0 100vmax 0 .7em;-webkit-text-fill-color:#fff} /* la banda de interruptores se corta antes de la columna de BPM y la cabecera «BPM» abre su propia franja, en blanco */
html body #main .lab p.lb-d.snd-ins{max-width:none;margin-bottom:calc(var(--gd) / 3)}html body #main .lab p.snd-fn:has(+ p.snd-ins){margin-bottom:var(--gd)}@media (max-width:820px){html body #main .lab p.lb-d.snd-ins{margin-bottom:var(--gd)}} /* instrucciones del theremin: banda negra como los interruptores, sin su espaciado extra */
html body #main .lab #sound p.lb-d.snd-ins,html body #main .lab #sound p.lb-d.snd-m{margin-bottom:0}html body #main .lab #sound p.snd-ins + .thr,html body #main .lab #sound p.snd-m + .snd-k{margin-top:0} /* excepción: el theremin y el teclado de colores van pegados a su banda, sin hueco blanco */
html body #main .lab :is(.lb-x:has([data-gb]),.lb-lib) p.lb-d:has(button){margin-bottom:0}html body #main .lab :is(.lb-x:has([data-gb]),.lb-lib) p.lb-d:has(button) + :not(p.lb-d){margin-top:0} /* el tablón de anuncios y la biblioteca también van pegados a su banda */

/* 261103 Lab · Centralita en negro: fondo negro y letra blanca, con el mismo espacio de sección arriba y abajo que R.I.P. */
html body .lab .lb-x#switches{background:#000;color:#fff;padding-bottom:max(calc(380 * var(--u)),140px)}
html body .lab #switches :is(.lb-n,.lb-n span,.lb-t,.lb-d,.lb-d span,.sw-h,.sw-b){color:#fff}
html body #main .lab p.lb-d:not(.bpm-v):not(.bpm-cut):has(button):has(+ p.lb-d:not(.snd-bpm) button){border-image-outset:0 100vmax 1px} /* interlineado único de las bandas: 2,1 tanto entre líneas partidas como entre bandas apiladas; la de arriba baja 1 px para que no asome una raya entre dos bandas */

/* 261103 Lab · Biblioteca en tinta marrón (como la vieja tinta marrón de pluma) o, con el interruptor, azul marino: letra, bandas, lomos, fichas y paneles; el negro de los paneles pasa a marrón con una capa en «screen» */
html body .lab .lb-x.lb-lib.lb-lib{--ink:#7a4527;color:var(--ink)}html body .lab .lb-x.lb-lib.lb-lib.ink-n{--ink:#233580}
html body .lab .lb-lib.lb-lib .g-st::after{content:'';position:absolute;inset:0;background:var(--ink);mix-blend-mode:screen;pointer-events:none;z-index:50}
html body .lab .lb-lib.lb-lib .sf-k{border-color:var(--ink)}
html body .lab .lb-lib.lb-lib .sf-c{color:var(--ink);border-color:var(--ink)}
html body .lab .lb-lib.lb-lib :is(.sf-c-f dt,.sf-c-f dd,.sf-c-x){border-color:var(--ink)}

/* 261103 cifras elzevirianas en LL Bradford: el texto corrido del Lab, sus notas y fichas (no la columna de BPM), y «Pruébala» cuando está en Bradford */
html body .lab :is(p.lb-d:not(.snd-bpm),.cs-n p,.p-fn,.lb-fn2,.sf-c,.rip-y),html body .lab .ty-try.ty-sf{font-variant-numeric:oldstyle-nums;font-feature-settings:"onum" 1}

/* 261103 «Pruébala»: el regulador de tamaño resalta en la banda: raya blanca y un círculo amarillo reflectante, como la barra de ayuda de la Centralita */
html body .lab #labtz{-webkit-appearance:none;appearance:none;width:clamp(160px,16vw,300px);height:1em;margin:0;padding:0;background:transparent;vertical-align:middle;cursor:pointer}
html body .lab #labtz::-webkit-slider-runnable-track{height:2px;background:#fff;border:0}
html body .lab #labtz::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1em;height:1em;margin-top:calc(1px - .5em);border:0;border-radius:50%;background:#eaff00}
html body .lab #labtz::-moz-range-track{height:2px;background:#fff;border:0}
html body .lab #labtz::-moz-range-thumb{width:1em;height:1em;border:0;border-radius:50%;background:#eaff00}
html body .lab #labtz:focus-visible{outline:1px solid #eaff00;outline-offset:4px}
html body .pq-d{font-variant-numeric:oldstyle-nums;font-feature-settings:"onum" 1} /* 261103 también las reseñas de prensa en las páginas de proyecto */
html body .lab .q.q-hid{opacity:.35} /* 261103 la cifra de visitas, oculta al público: con la sesión iniciada se ve apagada */
html body .lab .h-l.m-name b{font-weight:500;font-variant-numeric:normal} /* 261103 Índice cromático: los nombres de color, un peso más (Bradford Medium) y sin cifras tabulares, que ensanchaban los espacios */
/* 261103 Tipografía: dos interruptores en la misma fila, uno por columna; cada banda crece solo hacia su lado (la derecha cubre el hueco entre columnas), para que la de la derecha no tape el texto blanco de la izquierda */
@media (min-width:821px){html body #main .lab #type .ty-g > .ty-gc:first-child > p.lb-d:has(button){border-image-outset:0 2px 0 100vmax}html body #main .lab #type .ty-g > .ty-gc:last-child > p.lb-d:has(button){border-image-outset:0 100vmax 0 calc(45 * var(--u))}}

/* 261103 R.I.P.: «Identidad, 2016: Mover / Parar» es un interruptor; en el azul, la banda es blanca con letra azul; parado, la cadena y los logotipos se quedan quietos */
html body #main .lab .lb-rip > p.rip-sw:has(button),html body #main .lab .lb-rip > p.rip-sw:has(button) *{-webkit-text-fill-color:#00f;text-decoration-color:#00f}
html body .lab .lb-rip.rip-stop .rip-l{animation-play-state:paused}
/* † y * volados tras R.I.P. y D.O.B. (D.E.P. y F. de N.) */
html body .lab .lb-t .rip-sg{font-size:.36em;line-height:0;vertical-align:1.3em;margin-left:.06em;letter-spacing:0}html body .lab .lb-t .rip-sg:last-child{font-size:.5em;vertical-align:.62em} /* el asterisco ya va alto en el diseño de la fuente: más grande y menos subido, para que case con la daga */

/* 261103 R.I.P. · Identidad 2026 a pantalla completa: el nombre arriba, el lema abajo y las marcas de arriba abajo; «Animada»: el logotipo se compone (como el cierre de la página), aparecen las marcas una a una y luego flotan y rebotan por la pantalla blanca */
html body .lab .lb-rip > .rip-new{--stH:calc(100svh - var(--hdr-h,64px) - 2.1 * max(18px,var(--b24)) - var(--gd));position:relative}
@media (min-width:821px){html body .lab .lb-rip .rip-lk{height:var(--stH);display:flex;flex-direction:column;justify-content:space-between}html body .lab .lb-rip .rip-lk .rip-tg{margin-top:0}}
html body .lab .rip-new.rin-build .rip-nm > span{animation:rin-up .9s cubic-bezier(.16,.8,.12,1) both;animation-delay:calc(var(--i,0) * .12s)}
html body .lab .rip-new.rin-build .rip-tg > span{animation:rin-in 1s cubic-bezier(.16,.8,.12,1) both;animation-delay:calc(.55s + var(--i,0) * .12s)}
html body .lab .rip-new.rin-build .rip-k{animation:rin-pop .6s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(1.35s + var(--i,0) * .14s)}
@keyframes rin-up{from{transform:translateY(60%);opacity:0}to{transform:none;opacity:1}}
@keyframes rin-in{from{transform:translateX(30vw);opacity:0}to{transform:none;opacity:1}}
@keyframes rin-pop{from{transform:scale(0)}to{transform:none}}
html body .lab .rip-new.rin-fly .rip-k{position:absolute;margin:0;z-index:2}
html body .lab .rip-new.rin-fly .rip-k6{animation:rin-wob 5s ease-in-out infinite}
html body .lab .rip-new.rin-fly .rip-k3{animation:rin-spin 9s linear infinite}
@keyframes rin-wob{0%,100%{transform:none}33%{transform:rotate(9deg) scale(1.08,.93)}66%{transform:rotate(-7deg) scale(.94,1.07)}}
@keyframes rin-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html body .lab .rip-new .rip-k,html body .lab .rip-new .rip-nm > span,html body .lab .rip-new .rip-tg > span{animation:none !important}}

/* 261104 Lab · Identity 2026: el escenario cabe en una pantalla también con la barra de WP; en «Animated» el negro y el azul se intercambian por corte seco */
html body.admin-bar .lab .lb-rip > .rip-new{--ab:32px}
@media (max-width:782px){html body.admin-bar .lab .lb-rip > .rip-new{--ab:46px}}
html body .lab .lb-rip > .rip-new{--stH:calc(100svh - var(--ab,0px) - var(--hdr-h,64px) - 2.1 * max(18px,var(--b24)) - var(--gd))}
html body .lab .lb-rip .rin-inv .rip-lk{color:#00f}
html body .lab .lb-rip .rin-inv .rip-lk.rip-bl{color:#000}
html body .lab .lb-rip .rin-inv .rip-mk.rip-sq{color:#00f}
html body .lab .lb-rip .rin-inv .rip-mk.rip-ci{color:#000}

/* 261104 Lab · Símbolos: las figuras, 1,5 veces más grandes (de 11vw a 16,5vw) */
html body .lab .w-fld .w-o.w-o{width:clamp(90px,16.5vw,255px)}
html body .lab .w-fld canvas.w-o{font-size:clamp(90px,16.5vw,255px)}

/* 261104 Lab · Identity 2026: el rótulo en azul, pegado al azul de 2016 y separado de él solo por un filete blanco; sin hueco blanco encima */
html body .lab .lb-rip.lb-rip > .rip-new{padding-top:0;margin-top:calc(var(--gd) * 2)}
@media (min-width:821px){html body .lab .lb-rip.lb-rip > .rip-new{margin-top:calc(var(--gd) * 3)}}
html body .lab .lb-rip.lb-rip .rip-new > .rip-y{color:#00f;position:relative}
html body .lab .lb-rip.lb-rip .rip-new > .rip-y::before{content:'';position:absolute;left:-100vmax;right:-100vmax;top:0;height:1px;background:#fff;pointer-events:none}

/* 261104 Índice: † y * volados también en el título del índice (D.E.P.† / F. de N.*) */
html body .lab .lab-gl .ix-t .rip-sg{font-size:.36em;line-height:0;vertical-align:1.3em;margin-left:.06em;letter-spacing:0}
html body .lab .lab-gl .ix-t .rip-sg:last-child{font-size:.5em;vertical-align:.62em}

/* 261104 Info · Colofón: las tipografías enlazan al espécimen del Lab, subrayadas para que se vea que son enlaces */
html body .legal .small a.tl{white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
/* 261104 Info · Colofón: las notas ² y ³ en letra pequeña de Bradford, como los textos legales en prosa */
html body .about .legal .small .fn-t{font-family:var(--serif);font-size:var(--b18);line-height:1.3;letter-spacing:-.005em;font-variant-numeric:oldstyle-nums;font-feature-settings:"onum" 1}
/* 261104 Info · Colofón: un filete fino y aire extra separan las notas de los créditos */
html body .about .legal .small p:not(.fn-t) + .fn-t{margin-top:1.3em;padding-top:.6em;border-top:1px solid currentColor}
html body .about .legal .small .fn-t + .fn-t{margin-top:1.3em}
/* 261104 Info · Becas y Colofón (Neuzeit pequeña): más interlineado y más aire entre cada entrada */
html body .about .legal .small:not(.prose) p:not(.fn-t){line-height:1.38;margin-bottom:.95em}
/* 261104 Lab · Filtros: la tabla de marcas, a media anchura, es la tabla de categorías reducida a la mitad: las mismas columnas en proporción (etiqueta · 3 · hueco · 6 · hueco · 1), con etiqueta y huecos a la mitad */
@media (min-width:821px){html body .lab .cat-fn.cat-fn li{grid-template-columns:var(--meta, 14px) minmax(0,3fr) var(--gx, 20px) minmax(0,6fr) var(--gx, 20px) minmax(0,1fr)}html body .lab .cat-fn.cat-fn li > sup{grid-column:1}html body .lab .cat-fn .fn-k{grid-column:2}html body .lab .cat-fn .fn-d{grid-column:4;padding-left:0;padding-right:0}html body .lab .cat-fn .fn-c{grid-column:6;padding-left:0}}
/* 261104 Lab · «Índice» flotante: sin fondo, sobre el contenido, en diferencia para leerse sobre cualquier color */
html body .lab-ixh{position:fixed;right:var(--gxr);z-index:49;font-family:var(--sans);font-size:var(--meta);line-height:1;letter-spacing:-.025em;padding-top:calc(var(--meta) * 1.1);color:#fff;mix-blend-mode:difference;opacity:0;pointer-events:none;transition:opacity .7s ease}
html body .lab-ixh.on{opacity:1;pointer-events:auto}
html body .lab-ixh a{color:inherit;text-decoration:none;border-bottom:var(--ul) solid transparent;padding-bottom:.1em}
html body .lab-ixh a:hover,html body .lab-ixh a:focus-visible{border-bottom-color:currentColor;outline:0}
@media (max-width:820px){html body .lab-ixh{font-size:16px;padding-top:.7em}html body .lab-ixh a{display:inline-block;padding:.35em 0 .35em .6em}} /* móvil y tableta: el mismo «Índice» flotante, con un área de toque más grande */
@media (prefers-reduced-motion:reduce){html body .lab-ixh{transition:none}}
/* 261104 Lab · Plano (bajo las notas sobre Claude): mosaico a sangre, teselas 8:5 del sprite; 19 columnas en escritorio, 6 en móvil; fecha junto al cursor en diferencia */
html body .lab #blueprint .bp-g{display:grid;grid-template-columns:repeat(19,minmax(0,1fr));width:100vw;margin:calc(var(--gd) * .5) 0 0 calc(50% - 50vw);background:#f2f2f2}
html body .lab #blueprint .bp-g i{display:block;aspect-ratio:8/5;background-size:1900% 600%;background-position:var(--x) var(--y);background-repeat:no-repeat}
html body .lab #blueprint .bp-g.on i{background-image:var(--bp)}
@media (max-width:820px){html body .lab #blueprint .bp-g{grid-template-columns:repeat(6,minmax(0,1fr))}}
html body .bp-tip{position:fixed;left:0;top:0;z-index:99990;pointer-events:none;font-family:var(--sans);font-size:var(--meta);line-height:1;letter-spacing:-.025em;color:#fff;mix-blend-mode:difference;white-space:nowrap;opacity:0}
html body .bp-tip.on{opacity:1}
@media (hover:none){html body .bp-tip{display:none}}
html body .lab #blueprint .bp-w{position:relative;margin-top:var(--nl,calc(var(--t24) * 1.25))}html body .lab #blueprint .bp-w .bp-g{margin-top:0}
/* el subrayador de la nota, también sobre la imagen: una franja fluorescente que entra de izquierda a derecha, en «multiply» (ilumina el blanco, deja ver las capturas) */
html body .lab #blueprint .bp-cn{margin-top:var(--nl,calc(var(--t24) * 1.25))}
/* 261104 Lab · ² Plano: el mismo subrayador fluorescente que la nota sobre Claude, en el rótulo y en el pie */
.lab #blueprint > .lb-n .hl,.lab #blueprint .bp-fn .hl{background:linear-gradient(var(--hc),var(--hc)) no-repeat 0 0 / 0% 100%;color:var(--hi,#000);transition:background-size 1.1s cubic-bezier(.72,0,.18,1);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lab #blueprint .hl.in{background-size:100% 100%}
html body .lab #blueprint .bp-w{margin-top:calc(var(--gd) * .5)}
/* 261104 Lab · ² Plano como un registro: teselas separadas por blanco, dentro de los márgenes; el subrayador barre las teselas columna a columna (cada una con su retardo), como una sola pasada, y el blanco entre ellas queda blanco */
html body .lab #blueprint .bp-g{gap:max(3px,calc(8 * var(--u)));width:calc(100vw - var(--gx) - var(--gxr));margin-left:calc(50% - 50vw + var(--gx));background:none}
html body .lab #blueprint .bp-g i{--c:var(--cd);background-repeat:no-repeat;background-size:0% 100%,1900% var(--bsy,600%);background-position:0 0,var(--x) var(--y);background-blend-mode:multiply,normal;background-color:#f2f2f2;transition:background-size .1s linear;transition-delay:calc(var(--c) * .058s)}
@media (max-width:820px){html body .lab #blueprint .bp-g i{--c:var(--cm);transition-delay:calc(var(--c) * .18s)}}
html body .lab #blueprint .bp-g.on i{background-image:linear-gradient(var(--hc,#00ffff),var(--hc,#00ffff)),var(--bp);background-color:transparent}
html body .lab #blueprint .bp-w.in .bp-g i{background-size:100% 100%,1900% var(--bsy,600%)}
@media (prefers-reduced-motion:reduce){html body .lab #blueprint .bp-g i{transition:none}}
/* 261104 Índice: «² Blueprint» cuelga de Claude como una subentrada: el mismo aire que entre un título y su primera subsección */
html body .lab .lab-gl > li.sec:has(+ li.sec > a[href="#blueprint"]){padding-bottom:calc(18 * var(--u))}
/* 261104 ² Plano: menos aire entre la nota sobre Claude y «² Blueprint»; la zona para sustituir la imagen, discreta, solo con sesión */
html body .lab #blueprint{padding-top:calc(var(--gd) * 1.5)}
html body .lab #blueprint .bp-drop{margin:0 var(--gx);padding:.8em 0;border-top:1px dashed currentColor;border-bottom:1px dashed currentColor;font-size:var(--meta);opacity:.55;text-align:center}
html body .lab #blueprint .bp-drop.hov{opacity:1;background:#eaff00}
/* 261104 «Subrayador: No»: sin fondo fluorescente en la nota sobre Claude ni en el ² Plano */
html.hl-off body .lab :is(#claude,#blueprint) .hl{background-size:0% 100%}
html.hl-off body .lab #blueprint .bp-w .bp-g i{background-size:0% 100%,1900% var(--bsy,600%);transition-delay:0s}
/* 261104 ² Plano: cada fila con su color de subrayador y una pasada más lenta (las filas arrancan escalonadas) */
html body .lab #blueprint .bp-g i{--hc:var(--hcd);transition:background-size .17s linear;transition-delay:calc(var(--cd) * .1s + var(--rd) * .22s)}
@media (max-width:820px){html body .lab #blueprint .bp-g i{--hc:var(--hcm);transition:background-size .3s linear;transition-delay:calc(var(--cm) * .3s + var(--rm) * .12s)}}
html body .lab #blueprint .bp-g.on i{background-image:linear-gradient(var(--hc),var(--hc)),var(--bp)}
/* 261104 ² Plano: el pie, a todo el ancho de la página, desde el margen izquierdo de la página (con el mosaico y «² Blueprint») */
html body .lab #blueprint .bp-cn > div{grid-column:1 / -1}
/* el mosaico, exactamente en los márgenes de la página (100vw contaba la barra de desplazamiento) */
html body .lab #blueprint .bp-w .bp-g{width:auto;margin-left:var(--gx);margin-right:var(--gxr)}
/* 261104 «Subrayador: Sí / No»: el interruptor entero en fluorescente, como el subrayador */
html body #main .lab p.lb-d.hl-sw.hl-sw{color:#b6ff00;-webkit-text-fill-color:#000;text-decoration-color:#000}html body #main .lab p.lb-d.hl-sw.hl-sw *{-webkit-text-fill-color:#000;text-decoration-color:#000} /* banda entera fluorescente (sale de currentColor), letra negra: el verde amarillento del pie automático en la nota sobre Claude */
html body #main .lab #blueprint p.lb-d.hl-sw.hl-sw{color:#ff00ff} /* magenta en el Plano, que tiene su propia gama de subrayadores */

/* ===== 261104 REVISIÓN MÓVIL Y TABLETA ===== */
/* Tableta: la escala móvil (390 px: XXL 68 · XL 46 · L 23 · M 19 · S 16) crecía con el ancho hasta duplicarse a 768 px (M 38 px). Ahora crece hasta los 480 px y ahí se queda: en tableta M 23, L 28, XL 56; márgenes y aires, igual */
@media (max-width:820px){:root{--u:calc(min(100vw, 480px) / 820)}}
/* Proyecto: el título y la línea de categorías se salían por la derecha (la celda del grid no podía estrecharse por debajo de su contenido) */
.proj .head{grid-template-columns:minmax(0,1fr)}
.proj .head > *{min-width:0;max-width:100%}
/* Proyecto, móvil: las categorías («Identity / Editorial / …») no tenían dónde partirse (sin espacios entre enlace y barra): ahora pasan de línea entre categorías, centradas */
@media (max-width:820px){.proj .head .tags{display:flex;flex-wrap:wrap;justify-content:center;row-gap:.15em}}
/* Identity 2026 en móvil y tableta: una identidad por pantalla, como en escritorio. Nombre arriba, lema abajo; a la derecha, sus tres marcas en columna, repartidas de arriba abajo. La primera pantalla cuenta con la banda «Identity, 2026»; la segunda ocupa la pantalla entera bajo la cabecera */
@media (max-width:820px){
html body .lab .lb-rip.lb-rip > .rip-new{grid-template-columns:minmax(0,1fr) auto;--stH2:calc(100svh - var(--ab,0px) - var(--hdr-h,64px) - var(--gd) * 2)}
html body .lab .lb-rip.lb-rip .rip-lk,html body .lab .lb-rip.lb-rip .rip-mk{height:var(--stH);margin-top:calc(var(--gd) * .5)}
html body .lab .lb-rip.lb-rip .rip-lk{grid-column:1;display:flex;flex-direction:column;justify-content:space-between}
html body .lab .lb-rip.lb-rip .rip-lk .rip-tg{margin-top:0}
html body .lab .lb-rip.lb-rip .rip-mk{grid-column:2;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;width:auto}
html body .lab .lb-rip.lb-rip .rip-mk .rip-k{width:min(24vw,150px)}
html body .lab .lb-rip.lb-rip .rip-lk.rip-bl,html body .lab .lb-rip.lb-rip .rip-mk.rip-ci{height:var(--stH2);margin-top:calc(var(--gd) * 1.5)}
}
@media (max-width:820px){html body .lab .lb-rip.lb-rip .rip-new .rip-lk,html body .lab .lb-rip.lb-rip .rip-new .rip-mk{height:calc(100svh - var(--stOff1,180px))}html body .lab .lb-rip.lb-rip .rip-new .rip-lk.rip-bl,html body .lab .lb-rip.lb-rip .rip-new .rip-mk.rip-ci{height:calc(100svh - var(--stOff2,140px))}} /* medidas de main.js (Identity 2026 en móvil y tableta) */
@media (max-width:820px){html body .lab .lb-rip.lb-rip .rip-new :is(.rip-lk,.rip-mk){margin-top:0}} /* el aire entre banda y pantalla, y entre pantallas, lo pone solo el hueco del grid */
@media (max-width:820px){html body .lab .lb-rip.lb-rip .rip-new :is(.rip-lk.rip-bl,.rip-mk.rip-ci){margin-top:var(--gd)}} /* entre las dos pantallas, el mismo aire que entre la banda y la primera */
/* Lab en móvil y tableta, escala coherente: los interruptores de la Centralita al mismo cuerpo que las demás bandas de interruptores; las definiciones de Filtros en la S de Bradford (la misma que las fichas de la Biblioteca y del Tablón) */
@media (max-width:820px){html body .lab #switches .sw-b.sw-b{font-size:max(18px,var(--b24))}html body .lab #categorias :is(.cat-d,.fn-d).cat-d,html body .lab #categorias .fn-d.fn-d{font-size:calc(max(13px,var(--t24)) * var(--bo))}}
/* 261104 Lab, móvil: más aire entre el título con su nota de traducción y el texto de presentación */
@media (max-width:820px){html body .lab .lb-hero .lb-in{margin-top:calc(var(--gd) * 2)}}
/* 261104 Identity 2016 en móvil: en el iPhone la ventana con la lista que sube salía vacía. Ahora tiene una altura fija (no depende de aspect-ratio), va siempre encima de la otra lista y anima en 3D (capa propia, más fiable en Safari) */
@keyframes rip-up3{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@media (max-width:820px){html body .lab .lb-rip .rip .rip-p{order:-1;grid-row:auto;height:calc((100vw - var(--gx) - var(--gxr)) * 1.1);aspect-ratio:auto;-webkit-mask-image:-webkit-radial-gradient(white,black)}html body .lab .lb-rip .rip .rip-l{animation-name:rip-up3;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}}
/* 261104 Lab: los rótulos con número (secciones, subsecciones, índice) al mismo cuerpo que las bandas de interruptores, en todos los tamaños de pantalla (antes, por debajo de 1440 px, quedaban en 13,6 px) */
html body .lab .lb-n{font-size:max(18px,var(--b24))} /* 261104 el índice vuelve a sus cuerpos de antes: rótulos en serif pequeña frente a los títulos en sans, más contraste */
/* Tipografía, móvil: cuando las dos columnas de una subsección se apilan (04.3: elzevirianos y de caja alta), un aire claro entre la primera y la segunda */
@media (max-width:820px){html body .lab #type .ty-g > .ty-gc + .ty-gc{margin-top:calc(var(--gd) * 1.5)}}
html body .lab #labhl a:not([href]){cursor:default} /* Índice Cromático sin enlaces (lanzamiento suave) */

/* 261104 Info-Gradient y Biblioteca: la banda de interruptores toca el degradado; en móvil y tableta cada columna es una ventana a todo el ancho */
html body #main .lab .lb-x.lb-x > p.lb-d.lb-d.lb-d:has(+ .g-st){margin-bottom:0}
@media (max-width:820px){
html body .lab .g-st{--gw:calc(100svh - var(--hdr-h,44px));height:calc(var(--gw) * 2)}
html body .lab .g-st .g-c{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));row-gap:0}
html body .lab .g-st .g-c > div:nth-child(2){display:block}
html body .lab .g-st .g-x{top:50%;width:100%;height:50%}
html body .lab .gb-off .g-st:not(.g-2){background:linear-gradient(180deg,#fff 50%,#000 50%)}
html body .lab .gb-off .g-st.g-2{background:linear-gradient(180deg,#000 50%,#fff 50%)}
}
/* 261104 Secuenciador y caja de ritmos: lo más anchos posible en móvil y tableta */
@media (max-width:820px){
html body .lab .snd-rig .sq.sq,html body .lab .snd-rig .bm.bm{max-width:none;width:auto;padding:6px 0;gap:4px;margin-right:var(--gxr)}
html body .lab .snd-rig .sq.sq{margin-left:calc(var(--gx) + var(--meta) * 1.5 + 8px)}
html body .lab .snd-rig .bm.bm{margin-left:calc(var(--gx) + var(--meta) * 1.5 + 8px)}
html body .lab .snd-rig .sq.sq i b,html body .lab .snd-rig .bm.bm i b{right:calc(100% + 8px)}
}

/* 261104 Theremin en móvil y tableta: mucho más bajo para que se pueda pasar de largo con el dedo */
@media (max-width:820px){html body .lab #sound .thr{height:max(190px,28svh)}}

/* 261104 Discos 09.5 en pantallas táctiles: el punto tocado crece como con el cursor y vuelve solo */
html body .lab .sp-f{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media (hover:none){html body .lab .sp-f i:hover{transform:none;mix-blend-mode:normal;z-index:auto;transition:transform .13s cubic-bezier(.2,.9,.25,1)}}
html body .lab .sp-f.sp-f i.tp{transform:scale(4);mix-blend-mode:difference;z-index:2;transition:none}

/* 261104 Subrayador: cada sección se apaga por separado */
html body .lab :is(#claude,#blueprint).hl-off .hl{background-size:0% 100%}
html body .lab #blueprint.hl-off .bp-w .bp-g i{background-size:0% 100%,1900% var(--bsy,600%);transition-delay:0s}

/* 261104 Cierre en móvil y tableta: el nombre arranca al mismo tamaño que en la entrada */
@media (max-width:820px){html body .outro{--ogiant:var(--xxl-m)}}

/* 261104 «Índice» flotante en móvil y tableta: mismo cuerpo que «Menú» y justo debajo */
@media (max-width:820px){html body nav.lab-ixh.lab-ixh{font-size:18px;letter-spacing:-.02em;padding-top:0}html body nav.lab-ixh.lab-ixh a{padding:2px 0 .6em .6em;font-size:inherit;letter-spacing:inherit}}

/* 261104 Identity 2026 en móvil y tableta: entre la identidad negra y la azul, el mismo aire que en 2016 entre la ventana y los nombres */
@media (max-width:820px){html body .lab .lb-rip.lb-rip .rip-new :is(.rip-lk.rip-bl,.rip-mk.rip-ci){margin-top:calc(var(--gd) * .6 + max(calc(var(--gd) * 1.3),90px))}}

/* 261104 Identity 2026: la lente y el velo dejan ver lo que tienen detrás, como en 03 (sobre blanco se ven igual, sobre texto o formas lo transparentan) */
html body .lab .lb-rip .rip-new img.rip-k{mix-blend-mode:multiply}

/* 261104 Banda BPM en móvil y tableta: «BPM» con el mismo aire sobre la banda que las demás líneas de interruptores */
@media (max-width:820px){html body .lab #sound .snd-rig .snd-bpm .snd-bt.snd-bt{line-height:inherit}}

/* 261104 Centralita en pantallas táctiles: cinco por familia, los que no descolocan la página. Color: negativo, grises, tono girado, RGB, subrayador. Tamaño: todo S, interlineado 1,5 y 0,8, tracking apretado, aplastado. Interfaz: miope, terremoto, espejo, cajas, sin imágenes. Tipo: Times + Helvetica, mayúsculas, cursiva, negrita, tachado. El resto queda para el escritorio */
@media (max-width:820px),(hover:none) and (pointer:coarse){
html body .lab #switches .sw-b:not([data-cs="neg"],[data-cs="grey"],[data-cs="hue"],[data-cs="rgb"],[data-cs="neon"],[data-cs="s"],[data-cs="dl"],[data-cs="lh0"],[data-cs="tight"],[data-cs="squash"],[data-cs="blur"],[data-cs="shake"],[data-cs="mirror"],[data-cs="boxes"],[data-cs="noimg"],[data-cs="th"],[data-cs="up"],[data-cs="ital"],[data-cs="bold"],[data-cs="strike"]){display:none}
}

/* 261104 Índice en persiana: baja bajo la cabecera, en blanco, con su propio scroll; la página de detrás no se mueve */
html body .lab.lab-ixo{position:fixed;left:0;right:0;bottom:0;top:var(--hdr-h,64px);z-index:48;margin:0;padding:var(--gd) 0 calc(var(--gd) * 2);background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transform:translateY(-104%);transition:transform .4s cubic-bezier(.2,.8,.2,1);min-height:0;width:auto}
html body .lab.lab-ixo.in{transform:none}
html body .lab.lab-ixo > section{margin:0;padding:0}
html.ixo-open,html.ixo-open body{overflow:hidden}
html body .lab-ixh.open{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){html body .lab.lab-ixo{transition:none}}
html body .lab-ixh.open{mix-blend-mode:normal;color:#000}

/* 261104 «Índice» en escritorio: más grande (M), en negro sobre una banda de subrayador amarillo que se pasa al aparecer, y baja un poco desde la cabecera */
@media (min-width:821px){
html body nav.lab-ixh{font-size:max(18px,var(--b24));mix-blend-mode:normal;color:#000;padding-top:calc(var(--meta) * .9);transform:translateY(-.5em);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.9,.25,1.25)}
html body nav.lab-ixh.on,html body nav.lab-ixh.open{transform:none}
html body nav.lab-ixh a{display:inline-block;margin-right:-.4em;padding:.12em .4em .16em;border-bottom:0;background:linear-gradient(#eaff00,#eaff00) no-repeat 0 0 / 0% 100%;transition:background-size .5s .25s cubic-bezier(.2,.8,.2,1)}
html body nav.lab-ixh.on a,html body nav.lab-ixh.open a{background-size:100% 100%}
html body nav.lab-ixh a:hover,html body nav.lab-ixh a:focus-visible{text-decoration:underline;text-decoration-thickness:var(--ul,1px);text-underline-offset:.18em}
}
@media (min-width:821px) and (prefers-reduced-motion:reduce){html body nav.lab-ixh,html body nav.lab-ixh a{transition:none}}

/* 261104 «Índice» en móvil y tableta: la misma banda de subrayador que en escritorio, al cuerpo de «Menú» y alineado con él */
@media (max-width:820px){
html body nav.lab-ixh.lab-ixh{mix-blend-mode:normal;color:#000;padding-top:4px}
html body nav.lab-ixh.lab-ixh a{margin-right:-.3em;padding:.1em .3em .14em;border-bottom:0;background:linear-gradient(#eaff00,#eaff00) no-repeat 0 0 / 0% 100%;transition:background-size .5s .25s cubic-bezier(.2,.8,.2,1)}
html body nav.lab-ixh.lab-ixh.on a,html body nav.lab-ixh.lab-ixh.open a{background-size:100% 100%}
}

/* 261104 Centralita entre 821 y 1199 px: un interruptor que no cabe en su columna pasa a dos líneas, la segunda alineada con el texto y no con la flecha */
@media (min-width:821px) and (max-width:1199px){html body .lab .sw-x .sw-b.sw-b{white-space:normal;padding-left:1.02em;text-indent:-1.02em}}

/* 261104 Info en móvil y tableta: la misma escala que el Lab en vez de un solo cuerpo. En escritorio Info ya usa las mismas variables que el Lab; aquí se repiten los suelos del Lab en móvil:
   L Neuzeit (intro, títulos, contacto, listas) = t48 · texto largo Bradford (filosofía) = m-m, como la nota del Lab · M Bradford (biografía, rótulos de sector) = 18 px mínimo, como las descripciones · M Neuzeit (estudios anteriores, becas) = 18 px mínimo · notas al pie y letra pequeña = 15 px mínimo, como la nota de Claude · pies de foto y años = meta, 13 px mínimo */
@media (max-width:820px){
html body #main#main .about :is(.intro,h2),html body #main#main .about .contact,html body #main#main .about .contact :is(p,a,span):not(.former *),html body #main#main .sector p{font-size:var(--t48)}
html body #main#main .about .man,html body #main#main .about .man *{font-size:var(--m-m)}
html body #main#main .about .bio,html body #main#main .about .bio *:not(sup),html body #main#main .sector h3{font-size:max(18px,var(--b24))}
html body #main#main .about .contact .former .fl,html body #main#main .about .small:not(.prose),html body #main#main .about .small:not(.prose) :is(p,a,span):not(.fn-t,.fn-t *){font-size:max(18px,var(--t24))}
html body #main#main .about .legal .small .fn-t,html body #main#main .about .legal .small .fn-t *,html body #main#main .about .small.prose,html body #main#main .about .small.prose *{font-size:max(15px,var(--b18))}
html body #main#main .about .aph figcaption,html body #main#main .about .contact .former .fg p,html body #main#main .about .contact .former .fg p *{font-size:max(13px,var(--meta))}
}

/* 261104 La banda de «Índice» llega hasta el borde derecho de la pantalla (como las bandas negras de BPM); la palabra sigue en el margen */
html body nav.lab-ixh.lab-ixh a{margin-right:calc(-1 * var(--gxr));padding-right:var(--gxr)}


/* 261104 «Índice»: la banda amarilla cuelga justo del borde inferior de la cabecera blanca, sin rendija por la que se vea el fondo; al aparecer sale de debajo de la cabecera */
html body nav.lab-ixh.lab-ixh{padding-top:0;transform:translateY(-100%);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
html body nav.lab-ixh.lab-ixh.on,html body nav.lab-ixh.lab-ixh.open{transform:none}
html body nav.lab-ixh.lab-ixh a{vertical-align:top}
html body nav.lab-ixh.lab-ixh{margin-top:-1px}
@media (prefers-reduced-motion:reduce){html body nav.lab-ixh.lab-ixh{transition:none}}

/* 261104 Censo en móvil y tableta: la cuota del Lab alineada a la derecha, con aire respecto a R G B; columnas un poco más justas */
@media (max-width:820px){
html body .lab .p-l .p-b.p-b{grid-template-columns:minmax(0,1fr) 4.4em 6em 3.9em;column-gap:calc(var(--gx) * .5)}
html body .lab .p-l .p-b.p-b > span:last-child{text-align:right;justify-self:end}
}

/* 261104 Índice: las líneas que pertenecen a un mismo numeral, juntas (interlineado 1,1); el aire entre numerales se queda como estaba */
html body .lab .lab-gl .ix-s a{line-height:1.1;padding-top:.12em;padding-bottom:.12em}
html body .lab .lab-gl .ix-l{line-height:1.1}

/* 261104 Disco de llegada en pantallas táctiles: aparece, cruza despacio y se va */
@keyframes lbland{0%{opacity:0}14%{opacity:1}62%{opacity:1}100%{opacity:0}}
html body #labdisc.lab-disc.lnd{animation:lbland 3.4s ease forwards;transition:transform 3.3s cubic-bezier(.35,.1,.25,1)}
@media (hover:none),(pointer:coarse){html body #labdisc.lab-disc:not(.lnd){animation:none;opacity:0}} /* sin el disco rojo de la esquina antes de la llegada */

/* 261104 Identity 2026: el cuadrado y el círculo de contorno, un poco más pequeños, para que ópticamente pesen como la mancha y el cristal (como en InDesign). Con «scale», que se suma a las animaciones sin pisarlas */
html body .lab .lb-rip .rip-new :is(.rip-k1,.rip-k4){--ok:.88;scale:var(--ok)}html body .lab .lb-rip .rip-new .rip-k4{--ok:.84}html body .lab .lb-rip .rip-new .rip-k1{--ok:.949} /* medidas de la maqueta de InDesign (cristal 147 px): cuadrado 139, círculo 155, trazo 16 */
html body .lab .lb-rip .rip-new :is(.rip-k1,.rip-k4){overflow:visible}html body .lab .lb-rip .rip-new :is(.rip-k1,.rip-k4) :is(rect,circle){stroke-width:calc(9.8px / var(--ok))} /* el trazo conserva su grosor al encoger, como al reducir el marco en InDesign */

/* 261104 Caja de ritmos en móvil y tableta: siglas en lugar de nombres, la rejilla al mismo ancho y tamaño que el secuenciador */
@media (max-width:820px){html body .lab .snd-rig .bm.bm i b{font-size:0;letter-spacing:0;width:auto;white-space:nowrap}html body .lab .snd-rig .bm.bm i b::after{content:attr(data-s);font-size:var(--meta);letter-spacing:-.02em}}

/* 261104 Teclado de la gama en móvil y tableta: tan alto como el theremin (y con él la rejilla de discos de 09.5, que mide lo mismo) */
@media (max-width:820px){html body .lab #sound .snd-k{height:max(190px,28svh)}}
@media (max-width:820px){html body .lab #sound :is(.snd-k,.thr){height:var(--insth,max(190px,28svh))}} /* 261104 todos los instrumentos a la altura del secuenciador */

/* 261104 Secuenciador y caja de ritmos en móvil y tableta: la rejilla centrada en el blanco entre la banda de mandos y la de BPM (mismo alto total) */
@media (max-width:820px){html body #main .lab #sound p.lb-d:has(+ .snd-rig){margin-bottom:calc((var(--gd) + var(--gs)) / 2)}html body #main .lab #sound .snd-rig .snd-bpm.snd-bpm{margin-top:calc((var(--gd) + var(--gs)) / 2)}}

/* 261104 Secuenciador y caja de ritmos en móvil y tableta: la rejilla centrada también a lo ancho (de margen a margen); notas y siglas en cuerpo mínimo, en el margen izquierdo */
@media (max-width:820px){
html body .lab .snd-rig .sq.sq,html body .lab .snd-rig .bm.bm{margin-left:var(--gx);margin-right:var(--gxr)}
html body .lab .snd-rig .sq.sq i b,html body .lab .snd-rig .bm.bm i b{right:calc(100% + 2px)}
html body .lab .snd-rig .sq.sq i b{font-size:9px;letter-spacing:0}
html body .lab .snd-rig .bm.bm i b::after{font-size:8.5px;letter-spacing:-.02em}
}

/* 261104 Secuenciador y caja de ritmos en móvil y tableta, versión final: notas y siglas al cuerpo de pie (meta), alineadas a la izquierda en el margen como el resto del texto; puntos casi tan grandes como a todo el ancho (huecos de 3 px) */
@media (max-width:820px){
html body .lab .snd-rig .sq.sq,html body .lab .snd-rig .bm.bm{--lw:23px;margin-left:calc(var(--gx) + var(--lw));margin-right:var(--gxr);gap:3px}
html body .lab .snd-rig .sq.sq i b,html body .lab .snd-rig .bm.bm i b{right:auto;left:calc(-1 * var(--lw));width:auto;text-align:left}
html body .lab .snd-rig .sq.sq i b{font-size:var(--meta);letter-spacing:-.02em}
html body .lab .snd-rig .bm.bm i b::after{font-size:var(--meta);letter-spacing:-.02em}
}

/* 261104 «Last Update» y «Madrid,» en móvil y tableta: más aire hasta la fecha y la hora (la coma sigue colgada) */
@media (max-width:820px){html body .lab .pg .pg-d .pg-g{column-gap:.8em}}
@media (max-width:820px){html body .lab .pg .pg-d .pg-g .pg-l{font-size:1em;top:0;letter-spacing:inherit}} /* 261104 en móvil, rótulo y dato al mismo cuerpo (antes 12 frente a 13, ni igual ni volado) */

/* 261104 Censo en móvil y tableta: nombres de color al cuerpo de las cifras; si un nombre largo pasa a dos líneas, su banda crece lo justo para que no se corte */
@media (max-width:820px){
html body .lab .p-l .p-b.p-b > span:first-child{font-size:var(--meta);line-height:1.12;letter-spacing:-.015em}
html body .lab .p-l .p-b.p-b[style]{height:auto;min-height:max(var(--h),calc(var(--meta) * 2.5))}
html body .lab .p-l .p-b.p-b.sm{min-height:calc(var(--meta) * 2.5)}
}
@media (max-width:820px){html body .lab .p-l .p-b.p-b[style]:not(.sm){background-position:0 50%}} /* 261104 la banda de color, centrada con su texto cuando la fila crece */

/* 261104 PRUEBA: en las bandas de interruptores de varias líneas (móvil y tableta), un filete fino entre línea y línea, a todo el ancho, para ver filas iguales con el texto centrado en cada una */
@media (max-width:820px){
html body #main .lab p.lb-d:has(button.lb-b){position:relative}
html body #main .lab p.lb-d:has(button.lb-b)::after{content:'';position:absolute;left:-100vw;right:-100vw;top:calc(var(--swl,2.1em) - .5px);bottom:0;pointer-events:none;background:repeating-linear-gradient(to bottom,var(--swh,rgba(255,255,255,.6)) 0 1px,transparent 1px var(--swl,2.1em));z-index:1}
html body #main .lab p.lb-d.hl-sw::after{--swh:rgba(0,0,0,.5)}
}

/* 261104 Instrucciones del theremin (móvil y tableta): es texto, no mandos; interlineado de texto corrido, sin filetes, con el mismo aire arriba y abajo que una banda de una línea */
@media (max-width:820px){html body #main .lab #sound p.lb-d.snd-ins.snd-ins{line-height:1.3;padding-top:.4em;padding-bottom:.4em}html body #main .lab #sound p.lb-d.snd-ins::after{content:none}}
@media (max-width:820px){html body #main .lab p.lb-d:has(button.lb-b) + p.lb-d:has(button.lb-b)::before{content:'';position:absolute;left:-100vw;right:-100vw;top:0;height:1px;background:rgba(255,255,255,.6);pointer-events:none;z-index:1}} /* 261104 PRUEBA: el mismo filete entre bandas de interruptores seguidas (Biblioteca: Leer / Vista / Tinta) */

/* 261104 Filetes entre líneas de interruptores también en escritorio */
@media (min-width:821px){
html body #main .lab p.lb-d:has(button.lb-b){position:relative}
html body #main .lab p.lb-d:has(button.lb-b)::after{content:'';position:absolute;left:-100vw;right:-100vw;top:calc(var(--swl,2.1em) - .5px);bottom:0;pointer-events:none;background:repeating-linear-gradient(to bottom,var(--swh,rgba(255,255,255,.6)) 0 1px,transparent 1px var(--swl,2.1em));z-index:1}
html body #main .lab p.lb-d.hl-sw::after{--swh:rgba(0,0,0,.5)}
html body #main .lab p.lb-d:has(button.lb-b) + p.lb-d:has(button.lb-b)::before{content:'';position:absolute;left:-100vw;right:-100vw;top:0;height:1px;background:rgba(255,255,255,.6);pointer-events:none;z-index:1}
html body #main .lab #sound p.lb-d.snd-ins::after{content:none}
}
@media (min-width:821px){html body #main .lab #sound p.lb-d.snd-bpm::after{content:none}} /* en escritorio la columna de BPM no es una banda: sin filetes */
html body .lab .lb-rip.lb-rip .rip-new > .rip-y::before{background:rgba(255,255,255,.6)} /* 261104 el filete entre 2016 y 2026, como los de las bandas */

/* 261104 Título del Lab que cambia de idioma: interlineado más cerrado (0,92) en latín, griego y cirílico; 1 en las escrituras con signos altos o bajos (indias, tailandesa, árabe, hebrea, etíope, vietnamita, CJK…), para que no se toquen */
html body .lab .lb-hero h1.h1-fix,html body .lab .lb-hero h1.h1-fix :not(sup){line-height:.92}
html body .lab .lb-hero h1.h1-fix:is(:lang(th),:lang(lo),:lang(km),:lang(my),:lang(hi),:lang(mr),:lang(ne),:lang(sa),:lang(bn),:lang(pa),:lang(gu),:lang(or),:lang(ta),:lang(te),:lang(kn),:lang(ml),:lang(si),:lang(bo),:lang(dz),:lang(am),:lang(ti),:lang(ar),:lang(fa),:lang(ur),:lang(ps),:lang(ug),:lang(he),:lang(yi),:lang(vi),:lang(zh),:lang(ja),:lang(ko)),html body .lab .lb-hero h1.h1-fix:is(:lang(th),:lang(lo),:lang(km),:lang(my),:lang(hi),:lang(mr),:lang(ne),:lang(sa),:lang(bn),:lang(pa),:lang(gu),:lang(or),:lang(ta),:lang(te),:lang(kn),:lang(ml),:lang(si),:lang(bo),:lang(dz),:lang(am),:lang(ti),:lang(ar),:lang(fa),:lang(ur),:lang(ps),:lang(ug),:lang(he),:lang(yi),:lang(vi),:lang(zh),:lang(ja),:lang(ko)) :not(sup){line-height:1}
html body .lab .lb-hero p.h1-n{text-wrap:pretty} /* 261104 la nota de las traducciones: el nombre del estudio no se parte, y el renglón anterior ya no se queda corto con «by» suelto */

/* 261104 Lab 03 · Símbolos: el círculo y el cuadrado de contorno, en la misma proporción que en la identidad 2026 (un poco más pequeños que la lupa y el velo) */
html body .lab .w-fld .w-o-c{--ok:.949}html body .lab .w-fld .w-o-s{--ok:.84}
html body .lab .w-fld :is(.w-o-c,.w-o-s){scale:var(--ok);overflow:visible}
html body .lab .w-fld :is(.w-o-c,.w-o-s) :is(rect,circle){stroke-width:calc(9.8px / var(--ok))}
/* 261104 Identidad 2026: la lupa y el velo son ahora los de 03 (WebGL) */
html body .lab .lb-rip .rip-new canvas.rip-k{aspect-ratio:1 / 1;height:auto}

/* Launch 4 Nov 2026: menu items not yet open are grey; closed addresses show the Coming soon page: the logotype top left, the tagline bottom left, «Coming soon» in between at the XXL size of the name, a few shapes drifting behind. */
html body.soft a[data-soon]{color:#a6a6a6 !important}
.soon{--ogiant:min(calc(309 * var(--u, calc(100vw / 1920))),calc((100vh - var(--hdr-h,64px) - var(--m,16px) * 2.6) / 3.5));--osm:calc(var(--ogiant) * .25);position:relative;height:100svh;min-height:420px;overflow:hidden;box-sizing:border-box}
.soon > p,.soon-mid{position:absolute;z-index:2;left:var(--gx,16px);margin:0;font-weight:400;letter-spacing:-.05em}
.soon-nm,.soon-tg{font-size:var(--osm);line-height:var(--giant-lh,.83)}
.soon-nm span,.soon-tg span{display:block}
.soon-nm{top:calc(var(--hdr-h,64px) + var(--m,16px) * 1.2)}
.soon-tg{bottom:calc(var(--m,16px) + env(safe-area-inset-bottom,0px))}
.soon-mid{top:calc(var(--hdr-h,64px) + var(--m,16px) * 1.2);left:50% !important;right:var(--gx,16px)}
.soon-t .l{display:block}
.soon-t{margin:0;font-weight:400;font-size:min(var(--ogiant),calc((50vw - var(--gx,16px)) / var(--soon-w,3.38)));line-height:var(--giant-lh,.83);letter-spacing:-.05em;white-space:nowrap}
.soon-p{width:100%;max-width:none;margin:.6em 0 0;font-family:var(--sans,inherit);font-weight:400;font-size:max(16px,var(--t30,30px));line-height:1.15;letter-spacing:-.04em;text-wrap:pretty}
.soon-p a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.soon-mk{position:absolute;inset:0;z-index:1;pointer-events:none}
.soon-mk .k{position:absolute;display:block;width:clamp(56px,10vw,190px);aspect-ratio:1;box-sizing:border-box;color:#000}
.soon-mk .c1{border-radius:50%;border:clamp(5px,.9vw,16px) solid currentColor;right:9%;top:20%;animation:sn-a 19s ease-in-out infinite alternate}
.soon-mk .c2{border-radius:50%;background:#2f45ff;right:24%;top:70%;width:clamp(40px,6vw,120px);animation:sn-b 23s ease-in-out infinite alternate}
.soon-mk .c3{background:rgba(120,130,150,.28);border-radius:42% 58% 63% 37%/45% 38% 62% 55%;right:38%;top:12%;width:clamp(70px,13vw,240px);animation:sn-g 11s ease-in-out infinite alternate,sn-a 27s ease-in-out infinite alternate-reverse}
.soon-mk .s1{border:clamp(5px,.9vw,16px) solid currentColor;right:30%;bottom:10%;width:clamp(48px,8vw,160px);animation:sn-r 31s linear infinite}
.soon-mk .s2{background:currentColor;right:5%;bottom:14%;width:clamp(30px,4.5vw,86px);animation:sn-b 17s ease-in-out infinite alternate-reverse}
.soon-mk .s3{background:#2f45ff;right:50%;top:28%;width:clamp(22px,3vw,56px);animation:sn-r 21s linear infinite reverse,sn-a 15s ease-in-out infinite alternate}
@keyframes sn-a{to{translate:-6vw 4vw}}
@keyframes sn-b{to{translate:5vw -6vw}}
@keyframes sn-r{to{rotate:360deg}}
@keyframes sn-g{0%{border-radius:42% 58% 63% 37%/45% 38% 62% 55%;scale:1}50%{border-radius:63% 37% 38% 62%/58% 63% 37% 42%;scale:1.12}100%{border-radius:35% 65% 52% 48%/38% 52% 48% 62%;scale:.92}}
@media (max-width:760px){.soon{--osm:calc(var(--ogiant) * .42)}.soon-mk .k{opacity:.85}}
@media (prefers-reduced-motion:reduce){.soon-mk .k{animation:none !important}}

/* «Lab →» on the Coming soon page: the site arrow, and the colours of the Lab's opening word, one every 0.9 s */
.soon a.soon-lab{white-space:nowrap;animation:sn-c 12.6s step-end infinite;font-size:min(var(--ogiant),calc((50vw - var(--gx,16px)) / var(--soon-w,3.38)));line-height:var(--giant-lh,.83);letter-spacing:-.05em;text-decoration:none} /* XXL, the size of «Coming Soon!»; La −0.025, ab −0.04 em as the Lab title */
.soon .soon-ar{display:inline-block;width:.78em;height:.78em;margin-left:.22em;vertical-align:-.04em;overflow:visible}
@keyframes sn-c{0.000%{color:#cfa61c}7.143%{color:#0000ff}14.286%{color:#5a4430}21.429%{color:#00a85a}28.571%{color:#34373a}35.714%{color:#ff8a00}42.857%{color:#ff7fa0}50.000%{color:#e6007e}57.143%{color:#eaff00}64.286%{color:#2b5562}71.429%{color:#e4002b}78.571%{color:#00e0f0}85.714%{color:#d6bc86}92.857%{color:#9b30ff}}
@media (prefers-reduced-motion:reduce){.soon a.soon-lab{animation:none}}

.soon > p.soon-lk{left:50%;right:var(--gx,16px);bottom:calc(var(--m,16px) + env(safe-area-inset-bottom,0px));font-family:var(--sans,inherit);font-size:max(16px,var(--t30,30px));line-height:1.15;letter-spacing:-.04em;white-space:nowrap}
/* shapes kept in the empty bands, clear of «Coming Soon!», the text and «Lab →» */
.soon-mk .c1{right:56%;top:58%}.soon-mk .c2{right:80%;top:36%}.soon-mk .c3{right:68%;top:44%}.soon-mk .s1{right:58%;top:26%;bottom:auto}.soon-mk .s2{right:72%;top:72%;bottom:auto}.soon-mk .s3{right:78%;top:58%}

/* 261104 the logo's lens and veil without WebGL (Chrome with hardware acceleration off): the same CSS glass as Lab 03 */
.lab .rip-new canvas.rip-k.w-o-x{border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0px, rgba(255, 255, 255, 0.95) 6%, rgba(255, 255, 255, 0) 8%), radial-gradient(circle, rgba(255, 255, 255, 0) 58%, rgba(0, 0, 0, 0.38) 100%) color-mix(in srgb, currentcolor 16%, transparent); backdrop-filter: url("#w-lens") saturate(1.2); box-shadow: color-mix(in srgb, currentcolor 45%, transparent) 0px 0px 0px 1px inset;}
.lab .rip-new canvas.rip-k6.w-o-x{background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.9) 0px, rgba(255, 255, 255, 0.9) 5%, rgba(255, 255, 255, 0) 11%), radial-gradient(circle at 70% 78%, rgba(255, 255, 255, 0.35) 0px, rgba(255, 255, 255, 0.35) 4%, rgba(255, 255, 255, 0) 10%), color-mix(in srgb, currentcolor 20%, transparent); backdrop-filter: url("#w-gelb") blur(0.4px); box-shadow: none; filter: none; border-radius: 0px;}