/* Graciela Lempert — boceto. Minimal, fino, la obra primero. Tipografía del portfolio: Cormorant Garamond.
   14/9 (iPhone de Florencia con "estilos rotos", reproducido con WebKit: miniaturas de 277x555 en una
   pantalla de 390 y la página desbordada a 593 de ancho): nada de alturas en % dentro de cajas con
   aspect-ratio (Safari no las resuelve), nada de gap en flex (iOS < 14.5), alto de pantalla con vh de
   respaldo antes de svh, y el visor sin inset. */
:root{--fondo:#faf9f7;--tinta:#1d1b19;--suave:#6f6a63;--tenue:#9a948c;--linea:#e6e2dc;--ancho:1240px;--alto-mini:210px;--alto-mini-dest:270px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--fondo);color:var(--tinta);font-family:"Cormorant Garamond",Garamond,"Times New Roman",serif;font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 20px}
@media (min-width:600px){.envoltura{padding:0 40px}}
@media (min-width:1100px){.envoltura{padding:0 56px}}

/* encabezado */
.cabecera{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;padding-top:40px;padding-bottom:40px}
.marca{font-size:28px;font-weight:400;letter-spacing:.02em;white-space:nowrap;margin-right:24px}
.menu{display:flex;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.menu a{color:var(--suave);padding:4px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;margin-left:34px}
.menu a:first-child{margin-left:0}
.menu a:hover,.menu a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--tinta)}

/* inicio */
.inicio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-column-gap:90px;align-items:center;min-height:calc(100vh - 190px);padding-bottom:64px}
@supports (min-height:100svh){.inicio{min-height:calc(100svh - 190px)}}
.retrato img{width:100%;max-width:440px;-webkit-filter:grayscale(1);filter:grayscale(1);margin-left:auto}
.etiqueta{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--tenue);font-weight:500;margin-bottom:22px}
.statement p{font-size:23px;line-height:1.55;margin-bottom:.9em;max-width:32em}
.statement p.entrada{font-style:italic;font-size:28px;line-height:1.4}

/* títulos de página */
.titulo-pagina{font-weight:400;font-size:46px;letter-spacing:.01em;line-height:1.1;margin:8px 0 18px}
.indice{display:flex;flex-wrap:wrap;font-size:15.5px;color:var(--suave);margin-bottom:64px;max-width:62em}
.indice a{margin:0 22px 6px 0}
.indice a:hover{color:var(--tinta)}
.indice .rotulo{flex:0 0 100%;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--tenue);margin:10px 0 4px}

/* series */
.serie{padding:56px 0;border-top:1px solid var(--linea)}
.serie-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-column-gap:56px;grid-row-gap:18px;margin-bottom:34px}
.serie h2{font-weight:400;font-size:32px;line-height:1.15}
.serie .anio{display:block;font-size:13px;letter-spacing:.2em;color:var(--tenue);margin-top:8px}
.serie .texto p{font-size:18px;color:#3b3833;margin-bottom:.8em;max-width:40em}
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:30px}
.grilla.destacada{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
/* La miniatura tiene ALTO FIJO en px (no aspect-ratio): así max-height:100% de la foto se resuelve
   igual en Safari que en Chrome. Las obras quedan apoyadas abajo, como colgadas a la misma altura. */
.miniatura{display:flex;align-items:flex-end;justify-content:center;height:var(--alto-mini);min-width:0;cursor:zoom-in}
.grilla.destacada .miniatura{height:var(--alto-mini-dest)}
.miniatura img{max-width:100%;max-height:100%;width:auto;height:auto;transition:opacity .25s,transform .35s;box-shadow:0 16px 26px -18px rgba(40,32,24,.5),0 1px 3px rgba(40,32,24,.06)}
.miniatura:hover img{opacity:.86;transform:translateY(-3px)}
.miniatura:focus{outline:none}
.miniatura:focus-visible{outline:1px solid var(--tinta);outline-offset:6px}
.bloque-anteriores{margin:72px 0 0;padding-bottom:6px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--tenue);font-weight:500}

/* visor (slide) */
.visor{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--fondo);z-index:50;display:none;padding:10px 20px 18px}
.visor.abierto{display:block}
.visor:focus{outline:none}
.visor-barra{display:flex;justify-content:space-between;align-items:center;height:44px;font-size:13px;letter-spacing:.18em;color:var(--tenue)}
.visor-cerrar{-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--tinta)}
.visor-escena{position:relative;display:flex;align-items:center;justify-content:center;height:calc(100vh - 215px);padding:0 56px}
@supports (height:100svh){.visor-escena{height:calc(100svh - 215px)}}
.visor-escena img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 26px 48px -30px rgba(40,32,24,.45),0 2px 6px rgba(40,32,24,.06)}
.visor-flecha{-webkit-appearance:none;appearance:none;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:none;border:0;cursor:pointer;width:52px;height:88px;display:flex;align-items:center;justify-content:center;color:var(--tinta);opacity:.5;transition:opacity .2s}
.visor-flecha:hover,.visor-flecha:focus{opacity:1}
.visor-flecha.prev{left:0}.visor-flecha.sig{right:0}
.ficha{text-align:center;padding-top:14px;font-size:14.5px;line-height:1.55;color:var(--suave)}
.ficha .nombre{font-style:italic;font-size:18px;color:var(--tinta)}
.ficha .vendida{display:inline-block;margin-top:4px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue)}

/* bio y contacto */
.bio{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-column-gap:80px;padding-bottom:72px;align-items:start}
.bio .retrato img{max-width:360px;margin:0}
.bio .texto p{font-size:20px;margin-bottom:1em;max-width:36em}
.curatorial{margin-top:56px;padding-top:36px;border-top:1px solid var(--linea)}
.curatorial h2{font-weight:400;font-style:italic;font-size:27px;margin-bottom:16px}
.bio .curatorial p{font-size:18px;color:#3b3833}
.curatorial .autor{margin-top:18px;font-size:14px;letter-spacing:.04em;color:var(--suave)}
.contacto{padding-bottom:90px;min-height:calc(100vh - 260px)}
.contacto > *{max-width:40em}
.contacto dl{display:grid;grid-template-columns:max-content 1fr;grid-column-gap:36px;grid-row-gap:14px;font-size:21px;margin-top:10px}
.contacto dt{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--tenue);padding-top:7px;font-weight:500}
.contacto a{border-bottom:1px solid var(--linea)}
.contacto a:hover{border-bottom-color:var(--tinta)}

/* pie */
.pie{border-top:1px solid var(--linea);padding-top:26px;padding-bottom:34px;display:flex;justify-content:space-between;font-size:13px;letter-spacing:.08em;color:var(--tenue)}
.pie a:hover{color:var(--tinta)}

@media (max-width:980px){
  .inicio{grid-column-gap:48px}
  .statement p{font-size:21px}
  .statement p.entrada{font-size:25px}
}
@media (max-width:820px){
  :root{--alto-mini:200px;--alto-mini-dest:230px}
  .inicio,.bio,.serie-cab{grid-template-columns:minmax(0,1fr)}
  .inicio{min-height:0;padding-top:4px}
  .inicio .retrato,.bio .retrato{margin-bottom:34px}
  .retrato img{margin:0 auto;max-width:320px}
  .cabecera{display:block;padding-top:28px;padding-bottom:28px}
  .marca{display:block;font-size:26px;margin:0 0 14px}
  .menu a{margin-left:26px}
  .titulo-pagina{font-size:38px}
  .serie{padding:40px 0}
  .serie h2{font-size:28px}
  .grilla,.grilla.destacada{grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:22px}
  .visor{padding:6px 10px 14px}
  .visor-escena{padding:0 34px;height:calc(100vh - 230px)}
  .visor-flecha{width:36px}
  .contacto dl{grid-template-columns:minmax(0,1fr);grid-row-gap:4px}
  .contacto dd{margin-bottom:14px}
  .contacto{min-height:0}
}
@media (max-width:820px) and (min-height:0){
  @supports (height:100svh){.visor-escena{height:calc(100svh - 230px)}}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* El foco que pone el JS al abrir el visor no dibuja recuadro; con teclado sí (Safari 15.4+). */
.visor-cerrar:focus:not(:focus-visible){outline:none}