/* ==========================================================================
   Thais Darzé — curadora e pesquisadora
   Sistema visual v2. Linguagem editorial de contemporaryand.com: grotesca
   suíça, caixa-alta em escala grande, grade de revista assimétrica, etiquetas
   em pílula, nenhum fio — o branco separa.
   A arquitetura de conteúdo (verbetes, índices contados, migalhas) segue as
   páginas de acervo do MoMA.
   Acento: urucum.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,300;1,8..60,400&display=swap');

:root{
  color-scheme: light;

  /* --- cor -------------------------------------------------------------- */
  --paper:      #ffffff;
  --paper-2:    #f2f2f0;
  --paper-3:    #e6e6e3;
  --ink:        #000000;
  --ink-soft:   #565656;
  --ink-faint:  #949494;
  --rule:       #e2e2df;
  --urucum:     #f0431f;
  --urucum-esc: #c8330f;

  /* --- tipografia ------------------------------------------------------- */
  --sans:  "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;

  --fs-micro:   0.75rem;
  --fs-meta:    0.8125rem;
  --fs-small:   0.9375rem;
  --fs-base:    1.0625rem;
  --fs-lead:    clamp(1.1875rem, 1.7vw, 1.5rem);
  --fs-cartao:  clamp(1.1875rem, 1.5vw, 1.4375rem);
  --fs-h2:      clamp(2rem, 5.5vw, 4.25rem);
  --fs-h1:      clamp(2.5rem, 6.5vw, 5rem);

  --track-caps: .06em;

  /* --- métrica ---------------------------------------------------------- */
  --gutter:  clamp(1.15rem, 3.2vw, 3rem);
  --measure: 40rem;
  --maxw:    98rem;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-base);
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 1.1em; }

::selection{ background:var(--urucum); color:#fff; }
:focus-visible{ outline:3px solid var(--urucum); outline-offset:2px; }

.pular{ position:absolute; left:-9999px; background:var(--ink); color:#fff; padding:.75rem 1rem; z-index:100; }
.pular:focus{ left:.5rem; top:.5rem; }

/* -------------------------------------------------------------- estrutura */

.env{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
main{ flex:1 0 auto; padding-bottom:clamp(4rem,9vw,8rem); }
.medida{ max-width:var(--measure); }

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

.topo{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
}
.topo-linha{
  display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.25rem);
  padding-block:clamp(.9rem,1.8vw,1.4rem);
  flex-wrap:wrap;
}
.marca{
  font-weight:700;
  font-size:clamp(1.5rem,3vw,2.5rem);
  letter-spacing:-.035em;
  line-height:.95;
  white-space:nowrap;
}
.marca:hover{ color:var(--urucum); }

.nav{
  display:flex; flex-wrap:wrap;
  gap:clamp(.7rem,1.4vw,1.4rem);
  font-size:clamp(.8125rem,1vw,.9375rem);
  font-weight:700;
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
  flex:1 1 auto;
}
.nav a{ padding-bottom:.1rem; border-bottom:2px solid transparent; }
.nav a:hover{ color:var(--urucum); }
.nav a[aria-current="page"]{ border-bottom-color:var(--urucum); }

.utilidades{
  display:flex; align-items:center; gap:.9rem;
  font-size:var(--fs-meta);
  margin-left:auto;
}
.utilidades a{ color:var(--ink-soft); }
.utilidades a:hover{ color:var(--urucum); }
.icone{ width:1.15rem; height:1.15rem; display:block; }

.menu-btn{
  display:none; background:none; border:0; padding:.3rem 0; cursor:pointer;
  font:inherit; font-size:var(--fs-meta); font-weight:700;
  letter-spacing:var(--track-caps); text-transform:uppercase;
}

@media (max-width:60rem){
  .menu-btn{ display:block; }
  .nav{ display:none; order:3; flex-basis:100%; flex-direction:column; gap:.1rem; padding-bottom:1rem; }
  .nav.aberto{ display:flex; }
  .nav a{ padding-block:.5rem; border-bottom:0; border-left:3px solid transparent; padding-left:.6rem; }
  .nav a[aria-current="page"]{ border-left-color:var(--urucum); }
}

/* ------------------------------------------------------------- migalhas */

.migalhas{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  font-size:var(--fs-micro);
  font-weight:600; letter-spacing:var(--track-caps); text-transform:uppercase;
  color:var(--ink-faint);
  padding-top:clamp(1.5rem,3vw,2.5rem);
}
.migalhas a:hover{ color:var(--urucum); }
.migalhas .sep{ opacity:.6; }

/* --------------------------------------------------------------- títulos */

.titulo-pagina{
  font-size:var(--fs-h1);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.95;
  text-transform:uppercase;
  margin:.25em 0 0;
  max-width:22ch;
}
.titulo-pagina.natural{ text-transform:none; letter-spacing:-.03em; }

.subtitulo{
  font-size:var(--fs-lead);
  font-weight:400;
  color:var(--ink-soft);
  letter-spacing:-.01em;
  line-height:1.3;
  margin-top:1.1rem;
  max-width:44rem;
}

.secao{ padding-top:clamp(3.5rem,7vw,6rem); }
.secao-cabeca{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.secao-titulo{
  font-size:var(--fs-h2);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.92;
  text-transform:uppercase;
  margin:0;
}
.contagem{
  font-size:var(--fs-micro);
  font-weight:600; letter-spacing:var(--track-caps); text-transform:uppercase;
  color:var(--ink-faint);
  margin:.55rem 0 0;
}
.ver-tudo{
  font-size:var(--fs-micro); font-weight:700;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  padding-bottom:.15rem;
  border-bottom:2px solid var(--ink);
}
.ver-tudo:hover{ color:var(--urucum); border-color:var(--urucum); }

/* ------------------------------------------------------------ texto corrido */

.prosa{ max-width:var(--measure); }
.prosa a{ color:var(--urucum); text-decoration:underline; text-underline-offset:.2em; }
.prosa h3{ font-size:1.0625rem; font-weight:700; margin:2.25em 0 .6em; }
.prosa ul{ margin:0 0 1.1em; padding-left:1.1rem; }
.prosa li{ margin-bottom:.4em; }

.prosa-serif{ font-family:var(--serif); font-size:1.1875rem; line-height:1.7; }
.prosa-serif p{ font-size:inherit; }

.abertura{
  font-size:var(--fs-lead); line-height:1.35;
  letter-spacing:-.015em; max-width:44rem;
}

blockquote.citacao{
  margin:clamp(2rem,4vw,3.5rem) 0;
  font-size:clamp(1.5rem,3.6vw,2.75rem);
  font-weight:700; letter-spacing:-.03em; line-height:1.05;
  text-transform:uppercase;
  max-width:26ch;
}
blockquote.citacao cite{
  display:block; margin-top:1.1rem;
  font-style:normal; font-size:var(--fs-micro); font-weight:600;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  color:var(--ink-faint);
}
blockquote.citacao.serifada{
  font-family:var(--serif); font-weight:300; text-transform:none;
  font-size:clamp(1.25rem,2.4vw,2rem); line-height:1.3; max-width:34ch;
  letter-spacing:-.01em;
}

/* ---------------------------------------------------------------- grades */

.grade{
  display:grid;
  gap:clamp(2rem,3.5vw,3rem) clamp(1.15rem,2vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr));
}
.grade-2{ grid-template-columns:repeat(auto-fill,minmax(min(22rem,100%),1fr)); }

/* destaque editorial: um grande + pilha à direita */
.editorial{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.75rem);
  align-items:start;
}
@media (max-width:56rem){ .editorial{ grid-template-columns:1fr; } }
.editorial-pilha{
  display:grid; gap:clamp(1.75rem,3vw,2.5rem);
  align-content:start;
}

.cartao{ display:block; }
.cartao .placa{ margin-bottom:.9rem; }
.cartao:hover .placa img{ opacity:.85; }
.cartao:hover .cartao-titulo{ color:var(--urucum); }

.cartao-artista{
  font-size:var(--fs-micro); font-weight:700;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 .35rem;
}
.cartao-titulo{
  font-size:var(--fs-cartao); font-weight:700;
  letter-spacing:-.025em; line-height:1.08;
  margin:0 0 .45rem;
  transition:color .12s var(--ease);
}
.cartao-meta{ font-size:var(--fs-meta); color:var(--ink-faint); margin:0; }
.cartao-local{ font-size:var(--fs-small); color:var(--ink-soft); margin:.15rem 0 0; line-height:1.35; }

.cartao.grande .placa::before{ padding-top:88%; }
.cartao.grande .cartao-titulo{
  font-size:clamp(1.75rem,3.4vw,3rem);
  letter-spacing:-.035em; line-height:1;
}
.cartao.grande .cartao-local{ font-size:var(--fs-base); max-width:44rem; }

/* --------------------------------------------------------------- placas */

.placa{ position:relative; background:var(--paper-2); overflow:hidden; }
.placa::before{ content:""; display:block; padding-top:62%; }
.placa.retrato::before{ padding-top:112%; }
.placa.alta::before{ padding-top:58%; }
.placa img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transition:opacity .2s var(--ease);
}
.placa-vazia{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:.9rem 1rem; color:var(--ink-faint);
}
.placa-vazia .rotulo{
  font-size:var(--fs-micro); font-weight:700;
  letter-spacing:var(--track-caps); text-transform:uppercase;
}
.placa-vazia .nome{ font-size:1rem; font-weight:600; line-height:1.2; color:var(--ink-soft); }

/* -------------------------------------------------------------- etiquetas */

.etiquetas{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.7rem 0 0; }
.etiqueta{
  display:inline-block;
  font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.02em;
  padding:.3rem .7rem;
  border:1px solid var(--ink);
  border-radius:999px;
  color:var(--ink);
  line-height:1.25;
}
a.etiqueta:hover{ background:var(--ink); color:#fff; }
.etiqueta.forte{ border-color:var(--urucum); color:var(--urucum); }
.etiqueta.cartaz{ background:var(--urucum); border-color:var(--urucum); color:#fff; }

.etiquetas-grandes .etiqueta{
  font-size:clamp(.9375rem,1.5vw,1.25rem);
  font-weight:700; letter-spacing:-.01em;
  padding:.5rem 1.1rem;
}

/* ------------------------------------------------------------------ abas */

.abas{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:clamp(2rem,4vw,3rem) 0 clamp(1.75rem,3vw,2.5rem);
}
.abas button{
  background:none; cursor:pointer;
  font:inherit; font-size:var(--fs-micro); font-weight:700;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  color:var(--ink);
  padding:.45rem 1rem;
  border:1px solid var(--ink); border-radius:999px;
}
.abas button[aria-selected="true"]{ background:var(--ink); color:#fff; }
.abas button:hover{ border-color:var(--urucum); color:var(--urucum); }
.abas button[aria-selected="true"]:hover{ background:var(--urucum); color:#fff; }
.abas .n{ opacity:.6; font-weight:400; }

/* ------------------------------------------------------------------ listas */

.lista-linhas{ border-top:2px solid var(--ink); }
.lista-linhas ul{ margin:0; padding:0; }
.lista-linhas li{ list-style:none; border-bottom:1px solid var(--rule); }
.linha{
  display:grid;
  grid-template-columns:7rem 1fr auto;
  gap:.75rem 1.75rem;
  align-items:baseline;
  padding:1.25rem 0;
}
.linha .ano{
  font-size:var(--fs-micro); font-weight:600;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.linha .corpo strong{
  font-weight:700; font-size:1.0625rem; letter-spacing:-.015em;
  display:block; line-height:1.2;
}
.linha .corpo p{ margin:.3rem 0 0; font-size:var(--fs-small); color:var(--ink-soft); }
.linha .fim{ font-size:var(--fs-meta); color:var(--ink-faint); text-align:right; }
a.linha-link:hover .corpo strong{ color:var(--urucum); }
@media (max-width:44rem){
  .linha{ grid-template-columns:1fr; gap:.3rem; }
  .linha .fim{ text-align:left; }
}

.colunas-az{ columns:3 15rem; column-gap:clamp(1.5rem,3vw,3rem); }
.colunas-az .grupo{ break-inside:avoid; margin-bottom:2rem; }
.colunas-az .letra{
  font-size:1.5rem; font-weight:700; letter-spacing:-.02em;
  margin:0 0 .5rem; color:var(--urucum);
}
.colunas-az ul{ list-style:none; margin:0; padding:0; }
.colunas-az li{ margin-bottom:.35rem; font-size:1.0625rem; font-weight:600; letter-spacing:-.01em; }
.colunas-az a:hover{ color:var(--urucum); }

/* ------------------------------------------------------------------ verbete */

.verbete-def{
  font-size:clamp(1.375rem,2.6vw,2rem);
  font-weight:400; line-height:1.25; letter-spacing:-.025em;
  max-width:32ch;
  margin-top:clamp(1.75rem,3vw,2.5rem);
}

/* -------------------------------------------------------------------- ficha */

.ficha{
  border-top:2px solid var(--ink);
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:1.1rem;
  max-width:44rem;
}
.ficha dl{ margin:0; display:grid; grid-template-columns:10rem 1fr; gap:.6rem 1.5rem; }
.ficha dt{
  font-size:var(--fs-micro); font-weight:700;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  color:var(--ink-faint); padding-top:.1rem;
}
.ficha dd{ margin:0; font-size:var(--fs-small); }
@media (max-width:36rem){
  .ficha dl{ grid-template-columns:1fr; gap:.15rem; }
  .ficha dd{ margin-bottom:.9rem; }
}

/* ------------------------------------------------------------------- botão */

.botao{
  display:inline-block;
  font-size:var(--fs-micro); font-weight:700;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  padding:.85rem 1.6rem;
  border:2px solid var(--ink); border-radius:999px;
  background:var(--ink); color:#fff;
  transition:background .12s var(--ease), border-color .12s var(--ease);
}
.botao:hover{ background:var(--urucum); border-color:var(--urucum); }
.botao.vazado{ background:none; color:var(--ink); }
.botao.vazado:hover{ background:var(--ink); color:#fff; }

/* -------------------------------------------------------------------- capa */

.capa{ padding-top:clamp(2rem,4vw,3.5rem); }
.capa-nome{
  font-size:clamp(3.25rem,13vw,11rem);
  font-weight:700; letter-spacing:-.05em; line-height:.85;
  text-transform:uppercase;
  margin:0;
}
.capa-linha{
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem;
  align-items:baseline; justify-content:space-between;
  margin-top:clamp(1.25rem,2.5vw,2rem);
}
.capa-papel{
  font-size:var(--fs-micro); font-weight:700;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  max-width:34rem; line-height:1.6;
  margin:0;
}
.capa-abertura{
  font-family:var(--serif);
  font-size:clamp(1.1875rem,1.9vw,1.5rem);
  font-weight:300; line-height:1.4;
  max-width:34rem; margin:0;
}

/* mosaico da capa */
.mosaico{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(.6rem,1.2vw,1.15rem);
  margin-top:clamp(2rem,4vw,3.25rem);
}
.mosaico a{ display:block; overflow:hidden; }
.mosaico img{ width:100%; height:100%; object-fit:cover; transition:opacity .2s var(--ease); }
.mosaico a:hover img{ opacity:.82; }
.mosaico a{ aspect-ratio:1/1; }
.mosaico a:nth-child(2),
.mosaico a:nth-child(4){ margin-top:clamp(1.25rem,3vw,2.5rem); }
@media (max-width:44rem){
  .mosaico{ grid-template-columns:repeat(2,1fr); }
  .mosaico a:nth-child(n){ margin-top:0; }
  .mosaico a:nth-child(2),.mosaico a:nth-child(4){ margin-top:clamp(1rem,4vw,2rem); }
}

/* ------------------------------------------------------------------ imagens */

.figura{ margin:0; }
.figura img{ width:100%; height:auto; display:block; background:var(--paper-2); }
.figura figcaption{
  font-size:var(--fs-micro); color:var(--ink-faint);
  line-height:1.45; margin-top:.6rem; max-width:38rem;
}

.grade-figuras{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
  align-items:start;
}
.grade-figuras .figura img{ max-height:52vh; width:auto; max-width:100%; }

.capa-exposicao{
  margin-top:clamp(2rem,4vw,3rem);
  margin-bottom:clamp(2rem,4vw,3rem);
  max-width:64rem;
}
.capa-exposicao .figura img{ max-height:54vh; width:auto; max-width:100%; }

.figura.retrato img{ max-width:26rem; }

.sobre-grade{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,20rem);
  gap:clamp(2rem,5vw,4rem); align-items:start;
  margin-top:clamp(2rem,4vw,3rem);
}
.destaque-lexico{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,18rem);
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
@media (max-width:56rem){
  .sobre-grade,.destaque-lexico{ grid-template-columns:1fr; }
  .figura.retrato img{ max-width:22rem; }
}

/* ------------------------------------------------------------------ diversos */

.sobrelinha{
  font-size:var(--fs-micro); font-weight:700;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  color:var(--urucum);
  margin:clamp(1.5rem,3vw,2.5rem) 0 0;
}
.sobrelinha + .titulo-pagina{ margin-top:.3em; }

.fonte{
  font-size:var(--fs-micro); font-weight:600;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:2rem; padding-top:.9rem;
  border-top:1px solid var(--rule);
  max-width:var(--measure);
}
.tenue{ color:var(--ink-faint); }

.icone-ext{
  width:.72em; height:.72em; display:inline-block; vertical-align:baseline;
  margin-left:.3em; color:var(--ink-faint);
}
a.linha-link:hover .icone-ext{ color:var(--urucum); }
.linha .corpo p a{ color:inherit; text-decoration:underline; text-underline-offset:.18em; text-decoration-color:var(--rule); }
.linha .corpo p a:hover{ color:var(--urucum); text-decoration-color:currentColor; }

article.cartao .placa{ margin-bottom:.9rem; }

/* pílula flutuante */
.pilula{
  position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%);
  z-index:40;
  display:flex; align-items:center; gap:.55rem;
  background:var(--paper);
  border:2px solid var(--ink); border-radius:999px;
  padding:.4rem .5rem .4rem 1.2rem;
  box-shadow:0 6px 24px rgba(0,0,0,.14);
  font-size:var(--fs-micro); font-weight:700;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  white-space:nowrap;
}
.pilula .bolha{
  background:var(--urucum); color:#fff;
  border-radius:999px; padding:.45rem 1rem;
}
.pilula:hover{ border-color:var(--urucum); }
@media (max-width:30rem){ .pilula{ font-size:.6875rem; padding-left:.9rem; } }

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

.rodape{
  background:var(--ink); color:#fff;
  padding-block:clamp(3rem,6vw,5rem) 2.5rem;
  font-size:var(--fs-small);
}
.rodape-grade{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:2.5rem clamp(1.5rem,3vw,3rem);
}
.rodape h4{
  font-size:var(--fs-micro); font-weight:700;
  letter-spacing:var(--track-caps); text-transform:uppercase;
  color:var(--urucum);
  margin:0 0 .9rem;
}
.rodape ul{ list-style:none; margin:0; padding:0; }
.rodape li{ margin-bottom:.45rem; }
.rodape a:hover{ color:var(--urucum); }
.rodape p{ color:#c9c9c9; }
.rodape-fim{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:1.25rem;
  border-top:1px solid #333;
  font-size:var(--fs-micro);
  letter-spacing:var(--track-caps); text-transform:uppercase;
  color:#8a8a8a;
}

@media print{ .topo,.rodape,.abas,.pilula{ display:none; } body{ font-size:11pt; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }