/* Páginas de detalle de obra: mismo lenguaje que la portada, sin motor.
   Negro, tipografía en beige, cenefa dorada solo alrededor de las fotos. */
:root{
  --naranja:#E86F2E;
  --bg:#000;
  --fg:#E8C39E;
  --muted:rgba(232,195,158,.88);
  --faint:rgba(232,195,158,.76);
  --line:rgba(232,195,158,.26);
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --fb:20px;
  --gutter:80px;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%}
body{margin:0;font:300 19px/1.65 var(--sans);background:var(--bg);min-height:100vh}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
img{display:block;max-width:100%;height:auto}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}

/* --- cabecera --- */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:28px 0 0;font:500 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.top a{text-decoration:none;color:var(--muted)}
.top a:hover{color:var(--fg)}
.top .back::before{content:'← ';}
.top .mark{display:flex;align-items:center;gap:12px;color:var(--fg);text-transform:none;letter-spacing:.12em;font-size:13px}
.top .mark img{height:36px;width:auto;display:block;border:1px solid rgba(232,195,158,.35)}

/* --- título --- */
.head{padding:16vh 0 8vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.head .num{grid-column:1/3;font:400 13px/1.6 var(--mono);color:var(--naranja);letter-spacing:.16em}
.head h1{grid-column:3/11;margin:0;font:400 clamp(34px,4.6vw,64px)/1.02 var(--sans);letter-spacing:-.02em;color:#fff}
.head .meta{grid-column:3/11;margin-top:24px;font:400 14px/1.7 var(--mono);color:var(--muted);letter-spacing:.04em}
.head .meta span + span::before{content:' · ';color:var(--faint)}

/* --- fotos enmarcadas --- */
.frame{position:relative;margin:0}
.frame .photo{position:relative;display:block}
.frame img{width:100%;aspect-ratio:var(--ar,3/2);object-fit:cover;background:#0B3C5D}

/* Aparición en mosaico (obra.js): con JS, la foto y su cenefa esperan
   escondidas; al entrar en pantalla se apoya sobre la foto una capa
   (span.teselas) de fragmentos poligonales (<i> con clip-path y su trozo
   exacto de la imagen) que llegan desde unos píxeles afuera y encajan en su
   sitio; antes, una junta dorada (.junta) marca el trazado y se desvanece
   al final. La img real espera oculta hasta .is-done, cuando la capa se
   quita. Sin JS (o con movimiento reducido) todo queda visible desde el
   principio. */
.js-teselas .frame .photo img{opacity:0}
.js-teselas .frame .photo.is-done img{opacity:1}
.frame .photo .teselas{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.frame .photo .teselas i{
  position:absolute;display:block;background-repeat:no-repeat;
  will-change:transform,opacity;opacity:0;
  animation:shard-in .68s cubic-bezier(.2,.8,.2,1) var(--fd,0ms) both;
}
.frame .photo .teselas .junta{inset:0;width:auto;height:auto;background-size:100% 100%;will-change:opacity;animation:joint-net 1.2s linear both}
@keyframes shard-in{
  from{opacity:0;transform:translate(var(--fx,0px),var(--fy,0px)) rotate(var(--fr,0deg)) scale(.96)}
  55%{opacity:1}
  to{opacity:1;transform:none}
}
@keyframes joint-net{0%{opacity:0}14%{opacity:1}74%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .js-teselas .frame .photo img{opacity:1}
  .frame .photo .teselas{display:none}
}
.frame figcaption{margin-top:calc(var(--fb) + 22px);max-width:56ch;font:400 14px/1.7 var(--mono);color:var(--muted)}
.frame figcaption small{display:block;color:var(--faint)}

.lead-photo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:var(--fb) 0}
.lead-photo .frame{grid-column:2/12}

/* --- texto y ficha --- */
.body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:14vh 0 6vh}
.body .text{grid-column:3/9}
.body .text p{margin:0 0 1.2em;max-width:60ch;font-size:19px;line-height:1.65}
.body .text p:last-child{margin-bottom:0}
.body .ficha{grid-column:10/13;margin:0;font:400 14px/1.7 var(--mono);color:var(--fg);align-self:start;border-top:1px solid var(--line);padding-top:16px}
.body .ficha dt{color:var(--naranja);letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin-top:20px}
.body .ficha dt:first-child{margin-top:0}
.body .ficha dd{margin:4px 0 0}

blockquote.quote{grid-column:3/11;margin:6vh 0 0;padding:6px 0 6px 26px;border-left:2px solid var(--naranja);font:300 clamp(26px,2.6vw,34px)/1.3 var(--sans);color:#fff}
blockquote.quote footer{margin-top:14px;font:400 14px/1.6 var(--mono);color:var(--muted)}

/* --- galería --- */
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:calc(var(--fb)*2 + 80px);padding:8vh 0 4vh}
.gallery .frame:nth-child(4n+1){grid-column:1/7}
.gallery .frame:nth-child(4n+2){grid-column:8/13;margin-top:10vh}
.gallery .frame:nth-child(4n+3){grid-column:2/7}
.gallery .frame:nth-child(4n+4){grid-column:8/13;margin-top:6vh}
.gallery .frame.tall{--ar:4/5}
.gallery .frame.wide{--ar:3/2}

/* --- video --- */
.videos{padding:10vh 0 0;border-top:1px solid var(--line);margin-top:10vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:56px}
.videos h2{grid-column:1/-1;margin:0;font:400 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--naranja)}
.videos .video{grid-column:1/9;margin:0}
.videos .video:nth-child(odd){grid-column:5/13}
.video-box{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}
.video-box iframe,.video-box video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{margin-top:14px;font:400 17px/1.4 var(--sans);color:var(--fg)}
.video figcaption small{display:block;margin-top:4px;font:400 13px/1.6 var(--mono);color:var(--muted)}
.videos .video--vertical{grid-column:4/8}
.videos .video--vertical:nth-child(odd){grid-column:6/10}
.video--vertical .video-box{aspect-ratio:9/16}
@media (max-width:1023px){.videos .video,.videos .video:nth-child(odd){grid-column:1/-1}.videos .video--vertical,.videos .video--vertical:nth-child(odd){grid-column:3/11}}
@media (max-width:600px){.videos .video--vertical,.videos .video--vertical:nth-child(odd){grid-column:1/-1}}

/* --- fuentes y navegación --- */
.sources{padding:10vh 0 0;border-top:1px solid var(--line);margin-top:10vh}
.sources h2,.nav h2{margin:0 0 20px;font:400 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--naranja)}
.sources ul{list-style:none;margin:0;padding:0;font:400 14px/1.8 var(--mono);color:var(--muted);max-width:80ch}
.sources li a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)}
.sources li a:hover{border-color:var(--fg)}
.sources li small{color:var(--faint)}
.todo{color:var(--faint);font:400 13px/1.6 var(--mono);margin-top:18px}

.nav{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:10vh 0 0;border-top:1px solid var(--line);margin-top:10vh}
.nav a{text-decoration:none;color:var(--fg);font:400 clamp(24px,2.4vw,28px)/1.2 var(--sans)}
.nav a small{display:block;margin-bottom:10px;font:400 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.nav .next{text-align:right}
.nav a:hover{color:#fff}

.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:12vh 0 40px;font:400 13px/1.7 var(--mono);color:var(--muted)}
.foot a{color:var(--muted);text-decoration:none}

@media (max-width:1023px){
  :root{--gutter:40px}
  /* la cenefa arranca en el margen; la foto queda --fb más adentro */
  .frame .photo{margin-left:var(--fb);margin-right:var(--fb)}
  .body{padding:10vh 0 6vh}
  .head h1,.head .meta{grid-column:1/-1}
  .head .num{grid-column:1/-1;margin-bottom:12px}
  .lead-photo .frame{grid-column:1/-1}
  .body .text{grid-column:1/-1}
  .body .ficha{grid-column:1/-1;margin-top:40px}
  blockquote.quote{grid-column:1/-1}
  .gallery .frame:nth-child(n){grid-column:1/-1;margin-top:0}
}
@media (max-width:600px){
  :root{--gutter:24px;--fb:13px}
  body{font-size:18px}
  .top{padding-top:22px;font-size:12px;letter-spacing:.1em}
  .top .mark{font-size:12px;letter-spacing:.04em;gap:10px}
  .top .mark img{height:32px}
  .head{padding:12vh 0 7vh;display:block}
  .head .num{margin-bottom:14px}
  .head .meta{margin-top:18px;font-size:15px;line-height:1.6}
  /* (la foto hereda el margen --fb del bloque de tablet: cenefa en el margen
     de 24px, foto 13px más adentro; el pie sigue alineado con el texto) */
  .frame figcaption{margin-top:calc(var(--fb) + 20px);font-size:15px;line-height:1.65;max-width:none}
  .lead-photo{padding:var(--fb) 0 calc(var(--fb) + 8px)}
  .body{padding:80px 0 40px;display:block}
  .body .text p{font-size:18px;line-height:1.6}
  .body .ficha{margin-top:56px;font-size:15px}
  .body .ficha dt{font-size:13px}
  blockquote.quote{margin-top:56px;padding-left:20px;font-size:24px}
  blockquote.quote footer{font-size:14px}
  .gallery{row-gap:88px;padding:64px 0 24px}
  .videos{margin-top:72px;padding-top:64px;row-gap:48px}
  .sources{margin-top:72px;padding-top:64px}
  .sources ul{font-size:15px;line-height:1.75}
  .sources li + li{margin-top:12px}
  .todo{font-size:14px}
  .nav{grid-template-columns:1fr;gap:32px;margin-top:72px;padding-top:56px}
  .nav .next{text-align:left}
  .nav a{font-size:24px}
  .foot{padding:72px 0 40px;font-size:14px}
  .cards{row-gap:88px;padding:var(--fb) 0 40px}
  .cards .card h2{margin-top:calc(var(--fb) + 22px);font-size:24px}
  .cards .card p{font-size:15px;line-height:1.6}
  .memory{margin-top:72px;padding-top:64px}
  .memory p,.memory ul{font-size:17px}
  .memory li{line-height:1.5;margin-bottom:14px}
  .memory li small{display:block;margin:4px 0 0;font-size:14px}
}

/* --- índice de obras --- */
.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:calc(var(--fb)*2 + 64px);padding:var(--fb) 0 6vh}
.cards .card{text-decoration:none;color:inherit;display:block}
.cards .card:nth-child(6n+1){grid-column:1/7}
.cards .card:nth-child(6n+2){grid-column:8/13;margin-top:12vh}
.cards .card:nth-child(6n+3){grid-column:2/6;margin-top:4vh}
.cards .card:nth-child(6n+4){grid-column:7/13}
.cards .card:nth-child(6n+5){grid-column:1/7;margin-top:6vh}
.cards .card:nth-child(6n+6){grid-column:8/12;margin-top:14vh}
.cards .card h2{margin:calc(var(--fb) + 24px) 0 6px;font:400 24px/1.2 var(--sans);color:#fff}
.cards .card p{margin:0;font:400 14px/1.7 var(--mono);color:var(--muted)}
.cards .card:hover h2{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:var(--naranja)}
.cards .card .frame{overflow:visible}
.memory{padding:10vh 0 0;border-top:1px solid var(--line);margin-top:6vh;max-width:70ch}
.memory h2{margin:0 0 16px;font:400 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--naranja)}
.memory p{margin:0 0 20px;color:var(--fg);font-size:17px}
.memory ul{list-style:none;margin:0;padding:0;font:400 17px/2 var(--sans)}
.memory li a{text-decoration:none;border-bottom:1px solid var(--line)}
.memory li a:hover{border-color:var(--fg)}
.memory li small{font:400 13px/1 var(--mono);color:var(--muted);margin-left:10px}
@media (max-width:1023px){
  .cards .card:nth-child(n){grid-column:1/-1;margin-top:0}
}

a,button{cursor:pointer}