/* Itamar Musse Antiquário
   Sistema visual: papel quente, tinta morna, uma serifa de livro para a voz
   e uma grotesca estreita, em caixa alta espaçada, para os rótulos.
   As peças nunca são ampliadas além do seu tamanho nativo: flutuam
   centradas num plinto claro, como numa prancha de catálogo. */

:root{
  --papel:#efebe3;
  --papel-2:#e6e1d7;      /* plinto das imagens */
  --papel-3:#dcd6ca;      /* plinto mais fundo  */
  --tinta:#191510;
  --tinta-70:#5f574c;
  --tinta-45:#8e8578;
  --tinta-20:#c5bdaf;
  --linha:#d3cbbd;
  --escuro:#14110c;
  --escuro-2:#1e1a13;
  --claro:#efe9dd;

  --serif:"EB Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  --m:clamp(20px,4.2vw,72px);        /* margem da página */
  --gap:clamp(64px,9vw,148px);       /* respiro entre blocos */
  --topo:clamp(60px,7vw,84px);       /* altura do cabeçalho */

  --fs-corpo:clamp(1.06rem,.53vw + .93rem,1.28rem);
  --fs-lead:clamp(1.32rem,1.1vw + 1.02rem,1.86rem);
  --fs-t1:clamp(2.6rem,6.4vw,6.4rem);
  --fs-t2:clamp(1.72rem,2.5vw + .8rem,3.1rem);
  --fs-t3:clamp(1.24rem,.8vw + 1rem,1.72rem);
  --fs-rot:clamp(9.5px,.28vw + 8.6px,11px);   /* rótulos */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--serif);font-size:var(--fs-corpo);line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:oldstyle-num;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.1}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--tinta);color:var(--papel)}
:focus-visible{outline:1px solid var(--tinta);outline-offset:3px}

/* ---------------------------------------------------------- utilitários */

.rot{
  font-family:var(--sans);font-size:var(--fs-rot);font-weight:500;
  text-transform:uppercase;letter-spacing:.19em;line-height:1.5;
  font-variant-numeric:normal;
}
.tenue{color:var(--tinta-45)}
.env{padding-inline:var(--m)}
.centro{text-align:center}
.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--m);top:12px;z-index:300;background:var(--tinta);
  color:var(--papel);padding:10px 16px}

.regra{height:1px;background:var(--linha);border:0;margin:0}

.lead{font-size:var(--fs-lead);line-height:1.42}
.prosa p + p{margin-top:1.05em}
.prosa{max-width:34em;text-wrap:pretty}

/* ------------------------------------------------------------ cabeçalho */

.hdr{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--topo);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding-inline:var(--m);
  background:color-mix(in srgb,var(--papel) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease,background .4s ease;
}
.hdr.solto{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr.preso{border-bottom-color:var(--linha)}

.marca{display:flex;flex-direction:column;line-height:1;white-space:nowrap;flex:0 0 auto}
.marca b{font-family:var(--sans);font-weight:500;font-size:clamp(12px,.4vw + 11px,14.5px);
  text-transform:uppercase;letter-spacing:.26em}
.marca small{font-family:var(--sans);font-size:9px;font-weight:400;
  text-transform:uppercase;letter-spacing:.22em;color:var(--tinta-45);margin-top:5px}

.nav{display:flex;gap:clamp(14px,1.9vw,30px);margin-left:auto;align-items:center}
.nav a{position:relative;padding-block:4px;transition:color .3s ease}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--tinta)}

.hdr-fim{display:flex;align-items:center;gap:clamp(12px,1.5vw,22px);flex:0 0 auto}
.lang{border:1px solid var(--linha);padding:5px 9px;transition:background .3s ease,color .3s ease}
.lang:hover{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}

.menu-bt{display:none;margin-left:auto}

/* gaveta mobile */
.gaveta{position:fixed;inset:0;z-index:120;background:var(--papel);
  display:flex;flex-direction:column;justify-content:center;padding:var(--m);
  opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s}
.gaveta[data-aberta]{opacity:1;visibility:visible}
.gaveta a{font-size:clamp(1.6rem,7vw,2.4rem);padding-block:.28em;
  border-bottom:1px solid var(--linha)}
.gaveta-x{position:absolute;top:calc(var(--topo)/2);right:var(--m);transform:translateY(-50%)}

/* ------------------------------------------------------------------ hero */

.hero{
  display:grid;grid-template-columns:1fr minmax(0,44%);
  align-items:end;gap:clamp(24px,4vw,64px);
  padding:calc(var(--topo) + clamp(46px,8vw,110px)) var(--m) clamp(48px,7vw,96px);
  min-height:100svh;
}
.hero-txt{max-width:22ch;padding-bottom:clamp(0px,2vw,28px)}
.hero h1{font-size:var(--fs-t1);line-height:.95;letter-spacing:-.018em;
  white-space:pre-line;margin-bottom:.42em}
.hero .rot{color:var(--tinta-45);margin-bottom:clamp(20px,3vw,34px)}
.hero p{max-width:30ch;color:var(--tinta-70)}
.hero-fig{margin:0;justify-self:end;width:100%}
.hero-fig img{width:auto;max-width:100%;max-height:74svh;margin-left:auto}
.hero-fig figcaption{margin-top:14px;color:var(--tinta-45);text-align:right}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0;align-items:start;
    padding-top:calc(var(--topo) + 40px)}
  .hero-fig{max-width:min(78vw,420px);justify-self:start;margin-top:8px}
  .hero-fig img{max-height:none;margin-left:0}
  .hero-fig figcaption{text-align:left}
  .hero-txt{max-width:none}
}

/* ---------------------------------------------------------------- blocos */

.bloco{padding-block:var(--gap)}
.bloco--topo{padding-top:calc(var(--topo) + clamp(46px,7vw,96px))}
.escuro{background:var(--escuro);color:var(--claro)}
.escuro .tenue{color:#948b7c}
.escuro .regra{background:#2e281e}
.escuro .nav a[aria-current]{color:var(--claro)}

.cab{display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;padding-bottom:clamp(22px,3vw,38px);
  border-bottom:1px solid var(--linha);margin-bottom:clamp(30px,4vw,58px)}
.escuro .cab{border-bottom-color:#2e281e}
.cab h2{font-size:var(--fs-t2);letter-spacing:-.012em}
.cab .rot{color:var(--tinta-45);white-space:nowrap}

.titulo-pag{padding-bottom:clamp(26px,4vw,52px)}
.titulo-pag h1{font-size:var(--fs-t2);letter-spacing:-.012em;max-width:16ch}
.titulo-pag .rot{color:var(--tinta-45);margin-bottom:clamp(14px,1.6vw,20px)}
.titulo-pag p{margin-top:clamp(16px,2vw,26px);color:var(--tinta-70)}

/* citação de abertura */
.abertura{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,90px);align-items:start}
.abertura blockquote{margin:0;font-size:var(--fs-lead);line-height:1.36;
  text-indent:-.42em;max-width:20ch}
.abertura blockquote footer{font-size:var(--fs-rot);font-family:var(--sans);
  text-transform:uppercase;letter-spacing:.19em;color:var(--tinta-45);
  margin-top:1.6em;text-indent:0}
@media (max-width:760px){.abertura{grid-template-columns:1fr}}

/* --------------------------------------------------------------- plinto */
/* As fotografias do acervo têm fundos diversos (cinza, azul, branco).
   O plinto uniformiza sem recortar: a peça é contida, nunca ampliada. */

.plinto{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--papel-2);overflow:hidden;
  aspect-ratio:4/5;
}
.plinto img{
  width:auto;height:auto;max-width:86%;max-height:86%;
  object-fit:contain;
  transition:transform .9s cubic-bezier(.2,.7,.25,1),filter .6s ease;
}
.plinto--largo{aspect-ratio:3/2}
.plinto--alto{aspect-ratio:2/3}
.plinto--cheio img{max-width:100%;max-height:100%}
a:hover > .plinto img{transform:scale(1.028)}
.escuro .plinto{background:var(--escuro-2)}

/* ----------------------------------------------------------- grade obras */

.obras{display:grid;gap:clamp(26px,3.2vw,54px) clamp(18px,2.4vw,36px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,238px),1fr))}
.obra-cartao .plinto{margin-bottom:16px}
.obra-cartao h3{font-size:var(--fs-t3);line-height:1.22;letter-spacing:-.006em}
.obra-cartao .rot{color:var(--tinta-45);margin-top:7px}
.obra-cartao{transition:opacity .45s ease}

/* home: seleção em ritmo irregular */
.selecao{display:grid;gap:clamp(34px,4.6vw,86px) clamp(18px,2.4vw,38px);
  grid-template-columns:repeat(12,1fr)}
.selecao > *{grid-column:span 4}
.selecao > *:nth-child(1){grid-column:1/span 5}
.selecao > *:nth-child(2){grid-column:7/span 4;align-self:end}
.selecao > *:nth-child(3){grid-column:1/span 3}
.selecao > *:nth-child(4){grid-column:5/span 4}
.selecao > *:nth-child(5){grid-column:10/span 3;align-self:end}
.selecao > *:nth-child(6){grid-column:3/span 5}
@media (max-width:860px){
  .selecao{grid-template-columns:repeat(2,1fr);gap:26px 18px}
  .selecao > *,.selecao > *:nth-child(n){grid-column:span 1;align-self:start}
}

/* filtros */
.filtros{display:flex;flex-wrap:wrap;gap:6px 8px;margin-bottom:clamp(28px,3.6vw,50px)}
.filtros button{border:1px solid var(--linha);padding:7px 13px;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.filtros button:hover{border-color:var(--tinta-45)}
.filtros button[aria-pressed="true"]{background:var(--tinta);color:var(--papel);
  border-color:var(--tinta)}
.obra-cartao[hidden]{display:none}

/* ------------------------------------------------------------ obra única */

.obra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);
  gap:clamp(30px,5vw,92px);align-items:start}
.obra-imgs{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,22px);
  position:sticky;top:calc(var(--topo) + 24px)}
.obra-imgs .plinto{aspect-ratio:auto;padding:clamp(22px,4vw,64px);min-height:0}
.obra-imgs .plinto img{max-width:100%;max-height:74svh;cursor:zoom-in}
.obra-corpo h1{font-size:var(--fs-t2);letter-spacing:-.012em;line-height:1.06;
  margin-bottom:.5em}
.obra-corpo .prosa{margin-top:clamp(24px,3vw,38px);color:var(--tinta-70)}

.ficha{border-top:1px solid var(--linha);margin-top:clamp(26px,3vw,40px)}
.ficha div{display:grid;grid-template-columns:9.5rem 1fr;gap:16px;
  padding-block:11px;border-bottom:1px solid var(--linha)}
.ficha dt{color:var(--tinta-45)}
.ficha dd{margin:0}
@media (max-width:520px){.ficha div{grid-template-columns:7rem 1fr;gap:12px}}

.acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,40px)}
.bt{display:inline-block;border:1px solid var(--tinta);padding:11px 20px;
  transition:background .32s ease,color .32s ease}
.bt:hover{background:var(--tinta);color:var(--papel)}
.bt--vazado{border-color:var(--linha)}
.bt--vazado:hover{border-color:var(--tinta)}
.escuro .bt{border-color:var(--claro)}
.escuro .bt:hover{background:var(--claro);color:var(--escuro)}

@media (max-width:900px){
  .obra{grid-template-columns:1fr}
  .obra-imgs{position:static}
  .obra-imgs .plinto img{max-height:none}
}

/* --------------------------------------------------------------- dossiê */

.dossie{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);
  gap:clamp(28px,5vw,96px);align-items:center}
.dossie--inv{grid-template-columns:minmax(0,1fr) minmax(0,44%)}
.dossie--inv .dossie-fig{order:2}
.dossie-fig{margin:0}
.dossie-fig figcaption{margin-top:14px;color:var(--tinta-45)}
@media (max-width:820px){
  .dossie,.dossie--inv{grid-template-columns:1fr;gap:26px}
  .dossie--inv .dossie-fig{order:0}
}

/* faixa de imagens */
.faixa{display:grid;gap:clamp(12px,1.6vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.faixa figure{margin:0}
.faixa figcaption{margin-top:11px;color:var(--tinta-45)}

/* linha do tempo */
.tempo{display:grid;gap:clamp(46px,6vw,96px)}
.capitulo{display:grid;grid-template-columns:8rem minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:start}
.capitulo .ano{font-family:var(--sans);font-size:var(--fs-rot);font-weight:500;
  text-transform:uppercase;letter-spacing:.19em;color:var(--tinta-45);
  padding-top:.55em}
.capitulo h2{font-size:var(--fs-t3);margin-bottom:.7em}
@media (max-width:700px){.capitulo{grid-template-columns:1fr;gap:10px}}

/* lista de exposições */
.lista{border-top:1px solid var(--linha)}
.item{display:grid;grid-template-columns:7rem minmax(0,10rem) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);padding-block:clamp(26px,3.4vw,46px);
  border-bottom:1px solid var(--linha);align-items:start}
.item .plinto{aspect-ratio:1;margin:0}
.item h3{font-size:var(--fs-t3);line-height:1.2;margin-bottom:.4em}
.item .rot{color:var(--tinta-45)}
.item p{color:var(--tinta-70);margin-top:.65em;max-width:46ch}
.item .ano{font-family:var(--sans);font-size:var(--fs-rot);font-weight:500;
  text-transform:uppercase;letter-spacing:.19em;color:var(--tinta-45)}
.item-txt{grid-column:3}
@media (max-width:760px){
  .item{grid-template-columns:1fr;gap:14px}
  .item .plinto{max-width:180px}
  .item-txt{grid-column:1}
}

/* -------------------------------------------------------------- as casas */

.casas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(30px,4vw,80px)}
.casa h3{font-size:var(--fs-t3);margin-bottom:.6em}
.casa address{font-style:normal;color:var(--tinta-70);margin-block:1em}
.casa .rot{color:var(--tinta-45)}
.escuro .casa address{color:#b3a996}

/* --------------------------------------------------------------- rodapé */

.rod{background:var(--escuro);color:var(--claro);padding-block:clamp(52px,6vw,88px)}
.rod a{transition:opacity .3s ease}
.rod a:hover{opacity:.6}
.rod-grade{display:grid;gap:clamp(30px,4vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.rod h4{font-family:var(--sans);font-size:var(--fs-rot);font-weight:500;
  text-transform:uppercase;letter-spacing:.19em;color:#948b7c;margin-bottom:1.5em}
.rod address{font-style:normal;line-height:1.75}
.rod-fim{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;
  margin-top:clamp(44px,5vw,76px);padding-top:24px;border-top:1px solid #2e281e;
  color:#948b7c}

/* --------------------------------------------------------------- lightbox */

.lupa{position:fixed;inset:0;z-index:200;background:rgba(12,10,7,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,64px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;cursor:zoom-out}
.lupa[data-aberta]{opacity:1;visibility:visible}
.lupa img{max-width:100%;max-height:100%;width:auto;height:auto}
.lupa-x{position:absolute;top:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);
  color:var(--claro)}

/* ------------------------------------------------------------- aparições */

.surge{opacity:0;transform:translateY(16px)}
.surge.vista{opacity:1;transform:none;
  transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .surge,.surge.vista{opacity:1;transform:none;transition:none}
  .plinto img,a:hover > .plinto img{transition:none;transform:none}
}

/* --------------------------------------------------------------- mobile */

@media (max-width:900px){
  .nav,.hdr-fim .lang{display:none}
  .menu-bt{display:block}
  .hdr{gap:12px}
}

/* --------------------------------------------------------------- impressão */
@media print{
  .hdr,.gaveta,.lupa,.filtros,.acoes{display:none}
  body{background:#fff;color:#000}
}