/* ============================================================
   WUSTA — camada de layout do atlas
   Carregada depois de styles.css: converte a grade em fluxo assimétrico,
   remove linhas e molduras e refina a tipografia (Inter).

   Branco absoluto: sem linhas, sem molduras, sem dobra.
   Fluxo assimétrico em duas colunas; hierarquia por tamanho e cor.
   ============================================================ */

/* Inter (SIL OFL) — grotesca neutra no lugar da ABC Diatype, que é licenciada */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cargo-gap: 96px;
  --fold-w: 88px;          /* largura da sombra da dobra */
  --page-pad: 52px;        /* margem interna de cada página */
  --ink-soft: #8a8a8a;     /* metadados e legendas */
  --ink-mid: #555;         /* texto secundário */
  --rule: rgba(17, 17, 17, 0.16);

}

/* ============================================================
   2. AS SEÇÕES: sem molduras, respiro de página
   ============================================================ */

.section-pad {
  padding: 88px var(--page-pad) 104px;
  border-bottom: none;
}


.frame-grid {
  gap: 0;
  background: none;
  border: none;
}

.frame-cell {
  background: none;
  padding: 0 var(--page-pad);
}

.frame-grid-3 { grid-template-columns: 1fr 1fr; }

/* cabeçalhos de seção ocupam as duas páginas */
.section-header { margin-bottom: 72px; }

.section-header .span-2 { grid-column: auto; }

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

.hero-grid { grid-template-columns: 1fr 1fr; }

.hero-title { padding: 0 var(--page-pad); }

.stat-cell,
.stat-compact { align-self: end; }

/* ---------- faixa de destaques ---------- */

.home-painting-band { border: none; padding: 0; }

.band-head {
  border-bottom: none;
  padding: 0 var(--page-pad) 14px;
  margin-bottom: 44px;
}

/* a faixa deixa de rolar na horizontal: vira duas páginas */
.hero-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: none;
  overflow: visible;
}

.hero-strip button {
  background: none;
  padding: 0 var(--page-pad);
  margin-bottom: 56px;
  display: block;
}

.hero-strip img { width: 100%; height: auto; }

/* ---------- introdução e interlúdios ---------- */

.intro-card.frame-grid { grid-template-columns: 1fr 1fr; }

.intro-card .intro-symbol { padding: 0 var(--page-pad); }

.text-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: none;
  border: none;
}

.text-card {
  background: none;
  padding: 0 var(--page-pad) 64px;
}

.text-card + .text-card { }

/* ---------- criações ---------- */

/* a declaração corre em duas colunas: nada cruza a lombada */
.spec-line {
  border: none;
  padding: 0 var(--page-pad);
  margin: 0 0 64px;
  columns: 2;
  column-gap: calc(var(--page-pad) * 2 + var(--fold-w));
}

/* ---------- manifesto ---------- */

.manifesto-body {
  border: none;
  padding: 0 var(--page-pad);
  column-gap: calc(var(--page-pad) * 2 + var(--fold-w) / 2);
  column-rule: none;
  margin-bottom: 64px;
}

.manifesto-footer { padding-top: 32px; }

.manifesto-footer .frame-cell { align-items: start; padding-top: 0; }

/* ---------- trilha ---------- */

/* texto na página esquerda, player na direita */
.sound-section {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.sound-section > div:first-child { padding-right: calc(var(--page-pad) + var(--fold-w) / 2); }

.player {
  border: none;
  padding: 0;
  margin-left: calc(var(--page-pad) + var(--fold-w) / 2);
  align-self: start;
}

/* ---------- rodapé: frase à esquerda, assinatura à direita ---------- */

.site-footer { padding: 36px var(--page-pad); }

/* a frase fica contida na página esquerda */
.site-footer span { max-width: calc(50% - var(--fold-w)); }

/* ============================================================
   3. AS GRADES: fluxo assimétrico sobre as duas páginas
   ============================================================ */

.catalog-grid,
.featured-grid {
  display: block;
  position: relative;
  background: none;
  border: none;
  columns: 2;
  column-gap: 0;
  padding: 0;
}

.works-grid,
.object-grid { grid-template-columns: none; }

.card {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  background: none;
  height: auto;
  margin: 0 0 var(--cargo-gap);
  padding: 0 var(--page-pad);
}

.card > button,
.object-grid .card > button {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

.card figure { margin: 0 0 14px; display: block; overflow: hidden; }

.card img { display: block; width: 100%; height: auto; }

/* ritmo irregular: cada página respira diferente, sem encolher as obras */
.card:nth-child(5n + 1) { margin-bottom: calc(var(--cargo-gap) * 1.6); }
.card:nth-child(7n + 3) { margin-bottom: calc(var(--cargo-gap) * 0.55); }
.card:nth-child(4n + 2) img { width: 92%; }
.card:nth-child(6n + 5) img { width: 84%; }
.card:nth-child(9n + 4) img { width: 100%; }

.catalog-grid .card:first-child { margin-top: 32px; }

.card > button:hover .card-copy h3 {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   4. TIPOGRAFIA REFINADA
   Hierarquia por tamanho e cor. Nada de peso extra.
   ============================================================ */

/* uma só grotesca em todo o site, como na referência */
body,
h1, h2, h3,
.logo,
.stat-number,
.site-footer b,
.card-copy h3,
.modal-content h2,
input, button, a {
  font-family: var(--sans);
}

body {
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- display: hierarquia contida, à maneira suíça ---------- */

h1, h2, h3 { font-weight: 500; }

.hero h1 {
  font-size: clamp(22px, 2.6vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.section-header h2 {
  font-size: clamp(17px, 1.9vw, 27px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.018em;
}

.sound-section h2 { font-size: clamp(16px, 1.7vw, 24px); letter-spacing: -0.018em; }

.stat-number {
  font-size: 46px;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.stat-number.small { font-size: 32px; }

.logo {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.site-footer b { font-size: 12px; font-weight: 500; letter-spacing: -0.01em; }

/* ---------- metadados: pequenos, cinza, largos ---------- */

.kicker,
.mini-head,
.stat-label,
.stat-sub,
.toolbar label,
.toolbar > span,
.filter-row button,
.load-more,
.band-head .mini-head {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.kicker { margin-bottom: 22px; }

.stat-label { margin-top: 14px; line-height: 1.7; }

.stat-sub { margin-top: 10px; }

.spec-line {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  line-height: 1.95;
  color: var(--ink-mid);
}

/* ---------- corpo: leve e arejado ---------- */

.lead {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  max-width: 42ch;
  margin-top: 30px;
  color: var(--ink-mid);
}

.section-text {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  max-width: 52ch;
  margin-top: 22px;
  color: var(--ink-mid);
}

.manifesto-body p {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.68;
  margin-bottom: 24px;
}

.manifesto-footer { font-size: 12px; line-height: 1.75; color: var(--ink-mid); }

.sidebar-note { font-size: 11px; line-height: 1.65; color: var(--ink-soft); }

.frame-cell > p:not([class]) { font-size: 12.5px; line-height: 1.62; color: var(--ink-mid); }

/* ---------- legendas das obras: mínimas ---------- */

.card-copy { border-top: none; padding-top: 0; }

.card-copy code {
  display: block;
  margin-bottom: 3px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.card-copy h3 {
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: -0.004em;
  line-height: 1.4;
  margin: 0;
  max-width: 34ch;
}

.card-copy p { display: none; }

.card-copy .tag {
  display: block;
  margin-top: 3px;
  border: none;
  padding: 0;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* ---------- textos longos ---------- */

.text-card h3 {
  font-size: 15px;
  line-height: 1.28;
  letter-spacing: 0.005em;
  margin-bottom: 14px;
}

.text-card p {
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--ink-mid);
}

.intro-card h3 { font-size: clamp(17px, 1.9vw, 25px); line-height: 1.22; }

.intro-card > .frame-cell > p:not([class]) { font-size: 13px; }

.intro-card .intro-symbol { font-size: 20px; color: var(--ink-soft); }

/* ---------- navegação ---------- */

.sidebar nav a {
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-soft);
}

.sidebar nav a:hover,
.sidebar nav a.active { color: var(--ink); }

.langs .lang-link { font-size: 10px; letter-spacing: 0.14em; }

.sidebar footer { font-size: 9.5px; letter-spacing: 0.14em; color: var(--ink-soft); }

/* ---------- controles ---------- */

/* busca e filtros na página esquerda, contador na direita — o centro fica livre */
.toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  border: none;
  padding: 0 var(--page-pad);
  margin: 0 0 64px;
  gap: 0;
}

.toolbar label {
  grid-column: 1;
  padding-right: calc(var(--page-pad) + var(--fold-w) / 2);
}

.toolbar .filter-row {
  grid-column: 2;
  margin-left: calc(var(--page-pad) + var(--fold-w) / 2);
  border: none;
  gap: 22px;
  justify-self: start;
}

.toolbar > span {
  grid-column: 2;
  justify-self: end;
  margin-left: 0;
}

.toolbar input { font-size: 12px; border-bottom: none; padding-left: 0; min-width: 0; width: 100%; }

.filter-row button { padding: 0; }

.filter-row button + button { border-left: none; }

.filter-row button.active { background: none; color: var(--ink); }

/* o rótulo encosta na margem esquerda, longe da dobra */
.load-more {
  border: none;
  padding: 40px var(--page-pad) 0;
  margin-top: 8px;
  text-align: left;
}

.load-more:hover { color: var(--ink); }

/* ---------- modal: uma página só, centrada ---------- */

.modal-content h2 { font-size: clamp(18px, 2vw, 26px); line-height: 1.22; }

#modalText p { font-size: 13.5px; line-height: 1.7; }

#modalMeta { font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-soft); }

/* ============================================================
   5. RESPONSIVO
   ============================================================ */

@media (max-width: 1180px) {
  :root { --cargo-gap: 72px; --page-pad: 34px; }
  .section-pad { padding: 64px var(--page-pad) 80px; }
}

/* ============================================================
   MOBILE — uma coluna, tudo alinhado à mesma margem
   ============================================================ */

@media (max-width: 760px) {
  :root { --cargo-gap: 52px; --page-pad: 20px; }

  .section-pad { padding: 56px 0 64px; }

  /* uma coluna em tudo */
  .catalog-grid,
  .featured-grid { columns: 1; }

  .frame-grid,
  .frame-grid-3,
  .hero-grid,
  .intro-card.frame-grid,
  .text-grid,
  .sound-section,
  .hero-strip { grid-template-columns: 1fr; gap: 0; }

  /* margem única: todo bloco começa na mesma vertical */
  .frame-cell,
  .hero-title,
  .card,
  .text-card,
  .band-head,
  .toolbar,
  .spec-line,
  .manifesto-body,
  .load-more,
  .site-footer,
  .hero-strip button,
  .home-painting-band { padding-left: var(--page-pad); padding-right: var(--page-pad); }

  .hero-title { padding-top: 0; padding-bottom: 0; }

  /* respiro entre blocos empilhados */
  .hero-grid .stat-cell { margin-top: 44px; }
  .section-header .stat-compact { margin-top: 32px; }
  .section-header { margin-bottom: 44px; }
  .intro-card .intro-symbol { margin-bottom: 16px; }
  .text-card { padding-bottom: 44px; }
  .card { margin-bottom: var(--cargo-gap); }
  .hero-strip button { margin-bottom: 40px; }

  /* nada de larguras variáveis: a obra ocupa a coluna inteira */
  .card img,
  .card:nth-child(4n + 2) img,
  .card:nth-child(6n + 5) img,
  .card:nth-child(9n + 4) img { width: 100%; }

  .card:nth-child(5n + 1),
  .card:nth-child(7n + 3) { margin-bottom: var(--cargo-gap); }

  .catalog-grid .card:first-child { margin-top: 0; }

  /* barra de busca e filtros empilhados, sem estouro lateral */
  .toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-bottom: 40px;
  }

  .toolbar label,
  .toolbar .filter-row,
  .toolbar > span {
    grid-column: auto;
    margin-left: 0;
    padding-right: 0;
    justify-self: auto;
  }

  .toolbar label { display: flex; gap: 12px; align-items: baseline; }
  .toolbar input { flex: 1; }

  /* filtros rolam por toque, contidos na largura da tela */
  .toolbar .filter-row {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 18px;
    max-width: 100%;
  }

  .toolbar .filter-row::-webkit-scrollbar { display: none; }
  .toolbar .filter-row button { flex: 0 0 auto; white-space: nowrap; }

  .toolbar > span { align-self: flex-start; }

  /* uma coluna nos textos corridos */
  .spec-line,
  .manifesto-body { columns: 1; margin-bottom: 40px; }

  /* trilha: texto e player empilhados */
  .sound-section > div:first-child { padding-right: 0; }
  .player { margin-left: 0; padding: 0 var(--page-pad); margin-top: 28px; }
  .player > div { min-width: 0; }

  /* rodapé empilhado */
  .site-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-footer span { max-width: 100%; }

  /* menu e gaveta */
  .mobile-menu { border: none; background: var(--bg); }
  .sidebar { padding-left: var(--page-pad); padding-right: var(--page-pad); }
}

@media (max-width: 430px) {
  :root { --page-pad: 16px; --cargo-gap: 44px; }
  .hero h1 { font-size: clamp(20px, 7.4vw, 30px); }
  .stat-number { font-size: 38px; }
  .stat-number.small { font-size: 28px; }
}

@media (max-width: 760px) {
  /* a faixa de destaques já tem margem: o botão não soma outra */
  .hero-strip button { padding-left: 0; padding-right: 0; }

  /* rodapé alinhado à mesma margem dos demais blocos */
  .site-footer { display: flex; padding: 32px var(--page-pad); gap: 12px; }
  .site-footer span,
  .site-footer b { margin: 0; padding: 0; text-indent: 0; text-align: left; width: 100%; }
}

/* ============================================================
   7. REFINO FINAL
   Símbolos fora, colunas alinhadas, tipografia mais justa.
   ============================================================ */

/* ---------- textos: só os títulos, sem ornamento ---------- */

.intro-card .intro-symbol,
.text-card .symbol,
.sidebar-mark { display: none; }

/* a introdução recupera a largura das duas páginas */
.intro-card.frame-grid { grid-template-columns: 1fr 1fr; }
.intro-card .intro-symbol + .frame-cell { grid-column: 1 / -1; }
.intro-card .frame-cell.span-2 { grid-column: 1 / -1; }
.intro-card .frame-cell.span-2 > * { max-width: 62ch; }

/* ---------- colunas: tudo parte da mesma linha do alto ---------- */

.frame-grid,
.section-header,
.hero-grid,
.text-grid,
.sound-section { align-items: start; }

.stat-cell,
.stat-compact { align-self: start; }

/* o número acompanha a altura da primeira linha do título ao lado */
.hero-grid .stat-cell { padding-top: 4px; }
.section-header .stat-compact { padding-top: 6px; }

/* os interlúdios começam todos na mesma altura */
.text-card { justify-content: flex-start; }
.text-card h3 { min-height: 2.6em; }

/* ---------- tipografia mais justa ---------- */

body { font-size: 12.5px; line-height: 1.5; letter-spacing: -0.008em; }

.hero h1 {
  font-size: clamp(21px, 2.3vw, 38px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.028em;
}

.section-header h2 {
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1.12;
  letter-spacing: -0.024em;
}

.sound-section h2 { font-size: clamp(15px, 1.5vw, 21px); letter-spacing: -0.024em; }

.intro-card h3 { font-size: clamp(15px, 1.6vw, 21px); line-height: 1.16; letter-spacing: -0.022em; }

.text-card h3 { font-size: 13.5px; line-height: 1.24; letter-spacing: -0.016em; margin-bottom: 12px; }

.stat-number { font-size: 38px; font-weight: 400; letter-spacing: -0.038em; line-height: 1; }
.stat-number.small { font-size: 27px; letter-spacing: -0.034em; }

.logo { font-size: 13px; font-weight: 500; letter-spacing: -0.012em; }

/* metadados: um só corpo, um só tracking */
.kicker,
.mini-head,
.stat-label,
.stat-sub,
.toolbar label,
.toolbar > span,
.filter-row button,
.load-more,
.spec-line,
#modalMeta,
.card-copy code,
.card-copy .tag,
.sidebar footer,
.langs .lang-link {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.7;
}

.kicker { margin-bottom: 18px; }

/* corpo de texto */
.lead { font-size: 13px; line-height: 1.55; max-width: 40ch; margin-top: 26px; }
.section-text { font-size: 12.5px; line-height: 1.58; max-width: 50ch; margin-top: 20px; }
.manifesto-body p { font-size: 12.5px; line-height: 1.68; margin-bottom: 20px; }
.text-card p { font-size: 12px; line-height: 1.58; }
.frame-cell > p:not([class]) { font-size: 12px; line-height: 1.58; }
.manifesto-footer { font-size: 11.5px; line-height: 1.62; }
.sidebar-note { font-size: 10.5px; line-height: 1.62; }
.sidebar nav a { font-size: 10.5px; letter-spacing: 0.01em; }

/* legendas das obras */
.card-copy h3 { font-size: 11px; line-height: 1.36; letter-spacing: -0.008em; max-width: 32ch; }

#modalText p { font-size: 13px; line-height: 1.66; }
.modal-content h2 { font-size: clamp(16px, 1.8vw, 23px); line-height: 1.16; letter-spacing: -0.022em; }

@media (max-width: 760px) {
  .intro-card .frame-cell.span-2 { grid-column: auto; }
  .text-card h3 { min-height: 0; }
  .hero-grid .stat-cell,
  .section-header .stat-compact { padding-top: 0; }
}

/* ============================================================
   8. BRANCO ABSOLUTO
   Varre qualquer linha herdada do styles.css base.
   ============================================================ */

.sidebar,
.langs,
.lang-link,
.lang-link + .lang-link,
.section-pad,
.frame-grid,
.frame-cell,
.home-painting-band,
.band-head,
.toolbar,
.filter-row,
.filter-row button,
.filter-row button + button,
.card,
.card-copy,
.catalog-grid,
.featured-grid,
.text-grid,
.text-card,
.spec-line,
.manifesto-body,
.manifesto-footer,
.player,
.player button,
.site-footer,
.load-more,
.modal-content,
.modal-image,
.intro-card,
.hero-strip,
.hero-strip button,
.sidebar nav a,
.sidebar nav a.active,
.intro-card button,
.text-card button,
.mobile-menu,
.modal-close,
.modal-nav,
#progress {
  border: none;
  outline: none;
  column-rule: none;
}

.toolbar input { border: none; padding-left: 0; }

.sidebar nav a.active { text-decoration: none; color: var(--ink); }

/* seletor de idioma como texto */
.lang-link { padding: 0 10px 0 0; background: none; color: var(--ink-soft); }
.lang-link.active { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* o link do PDF vira uma linha de texto */
#modalPdf {
  background: var(--bg);
  outline: 10px solid var(--bg);
  border: none;
  padding: 10px 0 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  color: var(--ink-soft);
}

#modalPdf:hover { color: var(--ink); }

.toolbar input::placeholder { color: #bbb; }

/* filtros quebram em linhas em vez de estourar a página */
@media (min-width: 761px) {
  .toolbar {
    grid-template-columns: 1fr 1fr;
    row-gap: 16px;
    align-items: start;
  }

  .toolbar label { grid-column: 1; grid-row: 1; }

  .toolbar .filter-row {
    grid-column: 2;
    grid-row: 1;
    flex-wrap: wrap;
    row-gap: 10px;
    max-width: 100%;
  }

  .toolbar > span {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-left: 0;
  }
}

/* sem o bloco de contagem, a abertura ocupa a folha inteira */
.hero-grid { grid-template-columns: 1fr; }
.hero-title { max-width: 62ch; }

/* o rodapé segue a mesma margem dos demais blocos */
.site-footer { padding-left: calc(var(--page-pad) * 2); padding-right: calc(var(--page-pad) * 2); }

@media (max-width: 760px) {
  .site-footer { padding-left: var(--page-pad); padding-right: var(--page-pad); }
}

/* o total de itens sai da barra; o script segue atualizando em silêncio */
.toolbar > span { display: none; }

/* ============================================================
   9. PLAYER — só símbolos pretos, sem caixa e sem azul do sistema
   ============================================================ */

.player button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.player button:hover { color: var(--ink); opacity: 0.55; }
.player button:focus { outline: none; }
.player button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* a barra: um fio preto, sem cor de destaque do sistema */
#progress {
  appearance: none;
  -webkit-appearance: none;
  accent-color: var(--ink);
  background: rgba(17, 17, 17, 0.22);
  height: 1px;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

#progress::-webkit-slider-runnable-track {
  height: 1px;
  background: transparent;
  border: none;
}

#progress::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: var(--ink);
  border: none;
  border-radius: 0;
  box-shadow: none;
}

#progress::-moz-range-track { height: 1px; background: transparent; border: none; }
#progress::-moz-range-progress { height: 1px; background: var(--ink); }
#progress::-moz-range-thumb {
  width: 7px;
  height: 7px;
  background: var(--ink);
  border: none;
  border-radius: 0;
}

#progress:focus { outline: none; }
#progress:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* os tempos acompanham os metadados */
.player span { font-size: 10px; letter-spacing: 0.05em; color: var(--ink-soft); min-width: 0; }

.player > div { display: flex; align-items: center; gap: 14px; }

/* ---------- trilha: crédito sobre a barra, tudo centrado ---------- */

.sound-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-top: 96px;
  padding-bottom: 112px;
}

.sound-section h2#sound-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  text-align: center;
}

.sound-section .player {
  margin: 0;
  padding: 0;
  width: min(520px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.sound-section .player > div { flex: 1; justify-content: center; }

@media (max-width: 760px) {
  .sound-section {
    padding: 64px var(--page-pad) 72px;
    gap: 18px;
  }
  .sound-section .player { margin: 0; padding: 0; width: 100%; }
}

.sound-section .player { align-self: center; }

/* ============================================================
   10. MOBILE — refino de margens e ritmo
   ============================================================ */

@media (max-width: 760px) {
  /* a faixa já tem margem: o cabeçalho dela não soma outra */
  .band-head { padding-left: 0; padding-right: 0; }
  .home-painting-band { padding-left: var(--page-pad); padding-right: var(--page-pad); }

  /* ritmo vertical mais generoso entre blocos */
  .section-pad { padding-top: 64px; padding-bottom: 72px; }
  .hero.section-pad { padding-top: 56px; }
  .section-header { margin-bottom: 40px; }
  .home-painting-band { margin-top: 8px; }
  .band-head { margin-bottom: 32px; }

  /* tipografia: um degrau acima para leitura no toque */
  .hero h1 { font-size: clamp(21px, 6.8vw, 32px); line-height: 1.08; }
  .section-header h2 { font-size: clamp(17px, 5.4vw, 23px); line-height: 1.14; }
  .lead { font-size: 13.5px; line-height: 1.6; max-width: 34ch; }
  .section-text { font-size: 13px; line-height: 1.62; max-width: 40ch; }
  .manifesto-body p { font-size: 13px; line-height: 1.7; }
  .text-card h3 { font-size: 14.5px; }
  .text-card p { font-size: 12.5px; }
  .card-copy h3 { font-size: 12px; line-height: 1.4; max-width: 30ch; }
  .card-copy code, .card-copy .tag { font-size: 10px; }
  .spec-line { font-size: 10.5px; line-height: 1.85; }

  /* menu e navegação com área de toque confortável */
  .sidebar nav a { font-size: 13px; padding: 9px 0; letter-spacing: 0.01em; }
  .langs .lang-link { font-size: 12px; padding: 6px 14px 6px 0; }
  .mobile-menu { font-size: 10px; letter-spacing: 0.05em; padding: 12px 16px; }

  /* botões de texto maiores para o dedo */
  .intro-card button,
  .text-card button,
  .load-more { font-size: 11px; padding-top: 14px; padding-bottom: 14px; }

  .filter-row button { font-size: 11px; padding: 4px 0; }
  .toolbar input { font-size: 14px; }
}

@media (max-width: 430px) {
  .hero h1 { font-size: clamp(20px, 7.2vw, 28px); }
  .section-header h2 { font-size: clamp(16px, 5.8vw, 21px); }
}

/* uma coluna de fato no celular (estas regras vêm depois das de desktop) */
@media (max-width: 760px) {
  .intro-card.frame-grid,
  .text-grid,
  .frame-grid-3,
  .hero-grid,
  .sound-section,
  .hero-strip { grid-template-columns: 1fr; }

  .intro-card .frame-cell.span-2 > * { max-width: none; }
  .hero-title { max-width: none; }
  #introExcerpt { max-width: 42ch; }
}

@media (max-width: 760px) {
  /* blocos empilhados precisam de ar entre si */
  .frame-grid > .frame-cell + .frame-cell,
  .section-header > .frame-cell + .frame-cell,
  .intro-card > .frame-cell + .frame-cell { margin-top: 34px; }

  .manifesto-footer > .frame-cell + .frame-cell { margin-top: 22px; }

  .text-card + .text-card { margin-top: 4px; }
}

/* ============================================================
   11. CORREÇÕES DE SÍMBOLO E ESTADO
   ============================================================ */

/* o idioma ativo se marca por cor, não por caixa preta */
.lang-link.active {
  background: none;
  background-color: transparent;
  color: var(--ink);
  text-decoration: none;
}

.lang-link { color: var(--ink-soft); }
.lang-link:hover { color: var(--ink); }

/* setas e triângulos como texto, nunca como emoji colorido do sistema */
.player button,
.load-more,
.band-head a,
.intro-card button,
.text-card button,
.sidebar nav a,
.modal-nav,
.modal-close,
#modalPdf {
  font-variant-emoji: text;
  -webkit-font-feature-settings: normal;
}

/* ============================================================
   12. ESCALA TIPOGRÁFICA — degraus claros entre os níveis
   Antes: título de interlúdio 13,5px e corpo 12,5px se confundiam.
   Razão ~1,22 entre níveis consecutivos.
   ============================================================ */

.hero h1 { font-size: clamp(24px, 2.5vw, 34px); line-height: 1.08; letter-spacing: -0.026em; }

.section-header h2 { font-size: clamp(18px, 1.8vw, 25px); line-height: 1.14; letter-spacing: -0.022em; }

/* os dois h3 do site passam a ter o mesmo peso hierárquico */
.intro-card h3,
.text-card h3 {
  font-size: 17px;
  line-height: 1.24;
  letter-spacing: -0.018em;
  margin-bottom: 14px;
}

.lead { font-size: 14px; line-height: 1.58; max-width: 40ch; }

.section-text,
.manifesto-body p,
#introExcerpt,
.text-card p,
.frame-cell > p:not([class]) { font-size: 12.5px; line-height: 1.66; }

.section-text { max-width: 52ch; }

.card-copy h3 { font-size: 11.5px; line-height: 1.38; }

.manifesto-footer { font-size: 12px; line-height: 1.66; }

/* ---------- mobile: mesma progressão, um degrau acima ---------- */

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(23px, 7vw, 30px); line-height: 1.1; }
  .section-header h2 { font-size: clamp(18px, 5.6vw, 22px); line-height: 1.16; }

  .intro-card h3,
  .text-card h3 { font-size: 16.5px; line-height: 1.26; margin-bottom: 13px; }

  .lead { font-size: 14.5px; line-height: 1.6; max-width: 34ch; }

  .section-text,
  .manifesto-body p,
  #introExcerpt,
  .text-card p,
  .frame-cell > p:not([class]) { font-size: 13.5px; line-height: 1.68; }

  .section-text { max-width: 40ch; }

  .card-copy h3 { font-size: 12.5px; line-height: 1.4; max-width: 30ch; }

  .manifesto-footer { font-size: 13px; line-height: 1.66; }

  .spec-line { font-size: 11px; line-height: 1.9; }
}

@media (max-width: 430px) {
  .hero h1 { font-size: clamp(21px, 7.4vw, 27px); }
  .section-header h2 { font-size: clamp(17px, 6vw, 20px); }
  .intro-card h3, .text-card h3 { font-size: 15.5px; }
}

/* ============================================================
   13. DETALHES TIPOGRÁFICOS
   Números tabulares onde há dado: códigos, índices e tempos
   passam a ter largura fixa e alinham em coluna.
   ============================================================ */

.card-copy code,
.card-copy .tag,
#modalMeta,
.player span,
.modal-note {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* nos títulos, ligaduras contextuais e kerning ativos */
h1, h2, h3, .lead {
  font-feature-settings: "kern" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

/* quebra de palavra elegante nos títulos longos das obras */
.card-copy h3,
.text-card h3,
.intro-card h3,
.modal-content h2 {
  hyphens: none;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* o corpo respira melhor sem justificação forçada */
.section-text,
.manifesto-body p,
.lead,
#modalText p { text-wrap: pretty; }


/* ---------- a marca em árabe: وُسْتَا ---------- */

@font-face {
  font-family: "Noto Arabic";
  src: url("assets/fonts/NotoArabic-wusta.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

.logo {
  font-family: "Noto Arabic", "Geeza Pro", sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.6;        /* espaço para os diacríticos acima e abaixo */
  letter-spacing: 0;
  /* palavra isolada: o bidi já ordena as letras; o bloco fica à esquerda */
  text-align: left;
  align-self: flex-start;
  margin-bottom: 44px;
}

/* a marca em árabe também nos rodapés */
.sidebar footer span[lang="ar"],
.site-footer b[lang="ar"] {
  font-family: "Noto Arabic", "Geeza Pro", sans-serif;
  font-weight: 400;
  line-height: 1.9;
}

.site-footer b[lang="ar"] { font-size: 15px; }


/* ============================================================
   7. ÍNDICE — a coleção como lista
   O atlas tem duas leituras: a grade, que mostra; o índice,
   que nomeia. A mesma matéria, sem imagem, em ordem de chegada.
   ============================================================ */

/* o alternador fica no canto, fora da leitura, sempre ao alcance */
.view-toggle {
  position: fixed;
  right: var(--page-pad);
  bottom: 26px;
  z-index: 60;
  display: flex;
  gap: 20px;
  padding: 9px 0 9px 20px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff 22px);
}

.view-toggle button {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.18s ease;
}

.view-toggle button:hover { color: var(--ink-mid); }
.view-toggle button.active { color: var(--ink); }

/* a lista anula a coluna dupla da grade */
.catalog-grid.index-view {
  display: block;
  columns: auto;
  column-count: 1;
  margin-top: 4px;
}

.index-head,
.index-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 230px;
  gap: 24px;
  align-items: baseline;
  width: 100%;
  padding: 0 var(--page-pad);
  text-align: left;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.index-head {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 22px;
}

.index-row {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding-top: 7px;
  padding-bottom: 7px;
  color: var(--ink-mid);
  transition: color 0.18s ease;
}

.index-row:hover { color: var(--ink); }

/* o código e a travessia pedem algarismos de mesma largura */
.index-row .idx-a,
.index-head .idx-a {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.index-row .idx-a { font-size: 10.5px; color: var(--ink-soft); }
.index-row:hover .idx-a { color: var(--ink-mid); }

.index-row .idx-b {
  color: var(--ink);
  text-wrap: pretty;
}

.index-row:hover .idx-b { text-decoration: underline; text-underline-offset: 4px; }

.index-row .idx-c {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 1180px) {
  .index-head,
  .index-row { grid-template-columns: 96px minmax(0, 1fr) 180px; gap: 18px; }
}

@media (max-width: 760px) {
  /* a barra encosta no pé da tela; o branco acima dela dissolve a linha de corte */
  .view-toggle { right: 0; left: 0; bottom: 0; justify-content: flex-start;
    gap: 22px; padding: 12px var(--page-pad) 14px; background: #fff;
    box-shadow: 0 -12px 14px 2px #fff; }

  /* na tela estreita a categoria desce para baixo do título */
  .index-head { display: none; }

  .index-row {
    grid-template-columns: 1fr;
    gap: 2px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .index-row .idx-a { order: 1; }
  .index-row .idx-b { order: 2; font-size: 12.5px; }
  .index-row .idx-c { order: 3; }

  /* a barra fixa não pode cobrir o fim da página */
  .site-footer { padding-bottom: 72px; }
}


/* ============================================================
   8. MOVIMENTO — a cascata, as linhas, a aparição
   Nada pisca, nada salta. O site respira devagar.
   ============================================================ */

/* ---------- espiral em perspectiva ---------- */

.cascata {
  position: relative;
  isolation: isolate;
  z-index: 0;
  display: block;
  width: 100%;
  height: min(78vh, 780px);
  margin: 0 var(--page-pad);
  overflow: hidden;
  perspective: 1150px;
  perspective-origin: 50% 50%;
  touch-action: pan-y;          /* no toque, o dedo vertical ainda rola a página */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.cascata:active { cursor: grabbing; }

/* o plano que gira: as obras ficam paradas nele */
.roda {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.casca-obra {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(96px, 9.6vw, 138px);
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: inherit;
  backface-visibility: hidden;
}

.casca-obra img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.casca-obra:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* a legenda diz qual obra o ponteiro aponta */
.cascata-legenda {
  margin: 20px var(--page-pad) 0;
  min-height: 1.5em;
  font-family: var(--sans);
  font-size: var(--chrome);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- a obra aberta, fora do 3D ---------- */

.lupa {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 5vh 5vw;
  background: rgba(255, 255, 255, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: zoom-out;
}

.lupa.aberta { opacity: 1; pointer-events: auto; }

.lupa img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  transform: scale(0.94);
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lupa.aberta img { transform: none; }

.lupa p {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--chrome);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- as linhas do índice chegam em fila ---------- */

@keyframes surgirLinha {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.catalog-grid.index-view .index-row {
  animation: surgirLinha 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--atraso, 0ms);
}

/* ---------- aparição dos blocos de texto ---------- */

.surge { opacity: 0; transform: translateY(13px); }

.surge.visivel {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.66s ease var(--atraso, 0ms),
    transform 0.66s cubic-bezier(0.22, 0.61, 0.36, 1) var(--atraso, 0ms);
}

/* ---------- responsivo ---------- */

/* Só abaixo de 760 a faixa recebe margem própria; acima disso a espiral
   precisa pôr a sua, senão fica uma margem mais larga que a coluna. */
@media (max-width: 760px) {
  .cascata,
  .cascata-legenda { margin-left: 0; margin-right: 0; }

  .cascata { height: min(46vh, 380px); perspective: 820px; }
  .cascata-legenda { margin-top: 16px; }
}

/* ---------- quem pediu quietude recebe quietude ---------- */

@media (prefers-reduced-motion: reduce) {
  .surge,
  .surge.visivel { opacity: 1; transform: none; transition: none; }
  .catalog-grid.index-view .index-row { animation: none; }
}


/* ============================================================
   9. CÓDEA — cápsulas e um verde só, sobre branco
   O papel continua branco. Da Codea vêm a gramática dos controles
   (cápsula cinza, pílula branca ativa, raio de 8px) e a métrica
   do texto miúdo: 13px, peso médio, tracking zero.
   A navegação deixa a lateral e sobe para uma cápsula centrada.
   ============================================================ */

:root {
  --papel: #ffffff;
  --neon: #00ff09;
  --capsula: rgba(109, 109, 109, 0.22);
  --raio: 8px;
  --chrome: 13px;
  --ink-soft: #666666;
  --rule: rgba(17, 17, 17, 0.2);
  /* a coluna de leitura: cada bloco já soma a margem da seção à sua
     própria, então o conteúdo nasce em duas margens da borda */
  --margem: calc(var(--page-pad) * 2);
}

/* abaixo de 760 a seção perde a margem horizontal e sobra uma só */
@media (max-width: 760px) {
  :root { --margem: var(--page-pad); }
}

html, body { background: var(--papel); }

::selection { background: var(--neon); color: #000; }

/* ---------- a barra de cima ---------- */

.sidebar {
  position: sticky;
  inset: auto;
  top: 0;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px var(--margem);
  border-right: none;
  background: var(--papel);
  overflow: visible;
  z-index: 70;
}

.sidebar > * { grid-row: 1; }

.sidebar .logo {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  font-size: 20px;
  line-height: 1.6;
  margin: 0;
}

/* a cápsula: fundo cinza translúcido, dois pixels de folga, pílulas dentro */
.sidebar nav {
  grid-column: 2;
  display: flex;
  gap: 0;
  padding: 2px;
  background: var(--capsula);
  border-radius: var(--raio);
}

.sidebar nav a {
  padding: 8px 14px;
  border-radius: var(--raio);
  border-bottom: none;
  font-size: var(--chrome);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #000;
  white-space: nowrap;
  transition: background 0.16s ease;
}

.sidebar nav a:hover,
.sidebar nav a.active { background: #fff; color: #000; border-bottom: none; }

/* o único verde da página */
.sidebar nav a[target="_blank"],
.sidebar nav a[target="_blank"]:hover { background: var(--neon); color: #000; }

.sidebar-mark,
.sidebar footer { display: none; }

main { margin-left: 0; }

/* ---------- idiomas: cápsula fixa embaixo à esquerda ---------- */

.sidebar .langs {
  position: fixed;
  left: var(--margem);
  bottom: 16px;
  display: flex;
  gap: 0;
  padding: 2px;
  border: none;
  border-radius: var(--raio);
  background: var(--capsula);
  z-index: 80;
}

.sidebar .lang-link {
  padding: 7px 13px;
  border: none;
  border-radius: var(--raio);
  font-size: var(--chrome);
  font-weight: 500;
  letter-spacing: normal;
  color: #000;
}

.sidebar .lang-link + .lang-link { border-left: none; }
.sidebar .lang-link.active { background: #fff; color: #000; text-decoration: none; }

/* ---------- grade / índice: a mesma cápsula, do outro lado ---------- */

.view-toggle {
  right: var(--margem);
  bottom: 16px;
  gap: 0;
  padding: 2px;
  background: var(--capsula);
  border-radius: var(--raio);
}

.view-toggle button {
  padding: 7px 13px;
  border-radius: var(--raio);
  font-size: var(--chrome);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #000;
}

.view-toggle button.active { background: #fff; color: #000; }

/* ---------- filtros e busca ---------- */

.toolbar .filter-row {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 2px;
  border: none;
  border-radius: var(--raio);
  background: var(--capsula);
  overflow-x: auto;
  scrollbar-width: none;
}

.toolbar .filter-row::-webkit-scrollbar { display: none; }

.filter-row button {
  padding: 7px 13px;
  border: none;
  border-radius: var(--raio);
  font-size: var(--chrome);
  font-weight: 500;
  letter-spacing: normal;
  white-space: nowrap;
  color: #000;
}

.filter-row button.active { background: #fff; color: #000; }

.toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--chrome);
  font-weight: 500;
  letter-spacing: normal;
}

.toolbar input {
  background: #fff;
  border: none;
  border-bottom: none;
  border-radius: var(--raio);
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: var(--chrome);
  width: 100%;
}

.toolbar input::placeholder { color: #8a8a8a; font-family: var(--sans); }

.load-more {
  display: inline-block;
  width: auto;
  padding: 8px 14px;
  margin-top: 36px;
  margin-left: var(--margem);
  border: none;
  border-radius: var(--raio);
  background: var(--capsula);
  font-size: var(--chrome);
  font-weight: 500;
  letter-spacing: normal;
}

.load-more:hover { background: #fff; }

/* ---------- o tracking some de toda a miudeza ---------- */

.kicker,
.mini-head,
.spec-line,
.band-head a,
.card-copy code,
.card-copy .tag,
.index-head,
.index-row,
.index-row .idx-a,
.index-row .idx-c,
.cascata-legenda,
.site-footer,
.text-card button,
.intro-card button,
#modalMeta,
.modal-note { letter-spacing: normal; }

.kicker,
.mini-head,
.index-head,
.cascata-legenda,
.site-footer { font-weight: 500; }

/* ---------- o fundo cinza pede que o modal também mude ---------- */

.modal { background: rgba(255, 255, 255, 0.97); }
.modal-content { background: var(--papel); }

#modalPdf {
  display: inline-block;
  padding: 8px 14px;
  border: none;
  border-radius: var(--raio);
  background: var(--neon);
  color: #000;
  font-size: var(--chrome);
  font-weight: 500;
  letter-spacing: normal;
  text-decoration: none;
}

.modal-close,
.modal-nav {
  border: none;
  border-radius: var(--raio);
  background: var(--capsula);
  color: #000;
}

/* ---------- a entrada também muda de papel ---------- */

.carregando { background: var(--papel); }

/* ---------- mobile: a cápsula desce sob o botão MENU ---------- */

@media (max-width: 900px) {
  .sidebar { padding-right: 96px; }
}

@media (max-width: 760px) {
  /* a barra não é mais gaveta: qualquer transform aqui viraria bloco de
     contenção e arrancaria a cápsula de idiomas do rodapé da janela */
  .sidebar,
  .sidebar.open {
    transform: none;
    transition: none;
  }

  .sidebar {
    width: 100%;
    grid-template-columns: 1fr;
    padding: 12px var(--margem);
    padding-right: 92px;
  }

  .sidebar nav {
    display: none;
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .sidebar.open nav { display: flex; }

  .mobile-menu {
    /* acima da barra: ela é opaca e cobriria o botão */
    z-index: 85;
    top: 12px;
    right: var(--margem);
    padding: 8px 14px;
    border: none;
    border-radius: var(--raio);
    background: var(--capsula);
    font-size: var(--chrome);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: uppercase;
  }

  /* as duas cápsulas flutuam nos cantos, sem barra de ponta a ponta */
  .view-toggle {
    left: auto;
    right: var(--margem);
    bottom: 14px;
    justify-content: flex-start;
    padding: 2px;
    background: var(--capsula);
    box-shadow: none;
  }

  .sidebar .langs { left: var(--margem); bottom: 14px; }

  .site-footer { padding-bottom: 86px; }

  .load-more { margin-left: var(--margem); }
}


/* ============================================================
   10. AFINAÇÃO — uma escala de rótulos, uma coluna, um preto
   Depois da passagem pela gramática da Codea sobraram cinco
   tamanhos de miudeza (10, 10.5, 11, 12, 13) e um espacejamento
   esquecido. Aqui a faixa se fecha em dois degraus: 13px para o
   que se clica, 11px para o que se lê de relance.
   ============================================================ */

:root { --rotulo: 11px; }

/* ---------- um degrau só para toda a miudeza ---------- */

.kicker,
.mini-head,
.band-head .mini-head,   /* este vinha mais específico e ganhava */
.spec-line,
.band-head a,
.card-copy code,
.card-copy .tag,
.site-footer,
.site-footer span,
.intro-card button,
.text-card button,
#modalMeta {
  font-size: var(--rotulo);
  font-weight: 500;
  letter-spacing: normal;   /* o mini-head ainda carregava 0.63px */
  line-height: 1.55;
}

/* ---------- um corpo só para o texto corrido ---------- */

.manifesto-footer .frame-cell { font-size: 12.5px; }

/* ---------- a voz dos títulos é a mesma nos três degraus ---------- */

.intro-card h3,
.text-card h3,
.card-copy h3 { font-weight: 500; }

/* ---------- um preto só: as pílulas vinham de #000 ----------
   As variantes .active são mais específicas e precisam vir junto,
   senão só a pílula apagada muda de cor e a acesa fica para trás. */

.sidebar nav a,
.sidebar nav a:hover,
.sidebar nav a.active,
.sidebar .lang-link,
.sidebar .lang-link.active,
.view-toggle button,
.view-toggle button.active,
.filter-row button,
.filter-row button.active,
.entrar,
#modalPdf { color: var(--ink); }

/* ---------- a coluna de leitura ---------- */

/* a pílula encosta na coluna pela borda, como as outras cápsulas.
   A margem conta a partir da seção, que já trouxe uma margem. */
.load-more { margin-left: var(--page-pad); }

/* largura 100% somada a margens laterais estoura o quadro: um bloco
   já ocupa o que sobra depois das margens */
.cascata { width: auto; }

@media (max-width: 760px) {
  .load-more { margin-left: var(--page-pad); }
  .cascata { width: auto; }
}

/* ---------- o índice entra na mesma escala ----------
   O cabeçalho e as colunas de borda são rótulo; o título é leitura. */

.catalog-grid.index-view .index-head,
.catalog-grid.index-view .index-row .idx-a,
.catalog-grid.index-view .index-row .idx-c {
  font-size: var(--rotulo);
  font-weight: 500;
  letter-spacing: normal;
}

.catalog-grid.index-view .index-row .idx-b {
  font-size: 12.5px;
  font-weight: 400;
}