/* ── Fontes ────────────────────────────────────────────────────────────────
   Auto-hospedadas em /fontes (o CSP declara `font-src 'self'`; CDN de fonte
   seria bloqueada e cairia na fonte de sistema sem avisar). Proveniência,
   licença e o porquê de cada uma estão em web/site/fontes/README.md.

   `swap`: o texto aparece na hora na fonte de sistema e troca quando a fonte
   chega. O contrário — segurar o texto esperando o download — deixaria a
   página em branco em conexão ruim. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontes/jetbrains-mono-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontes/pixelify-sans-latin.woff2") format("woff2");
}

/* ⚠ Silkscreen NÃO TEM MINÚSCULA — minúscula é desenhada como maiúscula. Só
   use onde o texto já é caixa alta; nunca em parágrafo. */
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fontes/silkscreen-bold-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* As três pilhas terminam na monoespaçada de sistema: se a fonte não
     carregar, ou se faltar um glifo (o `□` dos botões de janela, por
     exemplo), o navegador cai nela glifo a glifo em vez de mostrar tofu. */
  --fonte-corpo: "JetBrains Mono", ui-monospace, "Courier New", monospace;
  --fonte-titulo: "Pixelify Sans", ui-monospace, "Courier New", monospace;
  --fonte-moldura: "Silkscreen", ui-monospace, "Courier New", monospace;

  --ground: var(--page-b);
  --frame: var(--bark);
  --edge: var(--ink);

  /* Anel de foco (#898, P0 da auditoria de 27/08). Era `--gold-hi`, e dourado
     sobre papel da 1,10-1,14:1 nos DOIS temas — invisivel, e PIOR ainda sob
     `prefers-contrast: more` (1,15:1). Derivar de `--edge` (= tinta) da
     10-12,75:1 sobre os papeis e resolve temas e contrast-more sozinho.
     ⚠ O dourado de SELECAO (`aria-pressed`) fica: e identidade, nao foco.
     Guarda com matematica WCAG em `web/__tests__/foco-visivel.test.js`. */
  --focus-ring: var(--edge);
  --accent: var(--moss);
  --accent-hi: var(--moss-hi);
  --gold: var(--amber);
  --gold-hi: var(--amber-hi);
  --paper: #e2dbc7;
  --paper-2: #cdc4ac;
  --paper-hi: #f2ecdd;
  --ink: #161a13;
  /* ⚠ MEDIDO, nao herdado. A paleta verde original tinha `--muted: #7d7a63`, e sobre
     `--paper-2` isso da **2,50:1** — reprova AA com folga, em 33 elementos. O defeito
     existia ANTES do azul e ninguem o viu: a porta para o azul trocou este token por um
     navy escuro (`#33465c`) e consertou-o por acidente, e a auditoria de 2026-08-09 nao
     deixou guarda que reprovasse. Ao voltar ao verde, o valor foi resolvido para o mais
     claro que ainda passa 4,5:1 contra os DOIS fundos em que aparece. */
  --muted: #545242;
  --caption: var(--bark);
  --page-a: #2b3324;
  --page-b: #1c2119;
  --page-c: #0d1009;
  --title-bg: var(--bark);
  --title-text: var(--amber-hi);
  --title-sub: var(--paper);
  --body-text: var(--ink);
  --outside-text: var(--paper-hi);
  --brand-under: #f2ecdd;
  --brand-story: #f0c96b;
  --on-accent: var(--paper-hi);
  --bark-text: var(--paper-hi);
  --link: var(--bark);
  --footer-bg: var(--soil-2);
  --footer-text: var(--fern);
  --toggle-bg: var(--soil);
  --toggle-text: var(--amber-hi);
  --scan: rgba(0, 0, 0, .13);
  --shadow: rgba(0, 0, 0, .55);

  /* Aliases kept for the inline illustrations and the preserved page content. */
  --soil: #1c2119;
  --soil-2: #141810;
  --bark: #3d3428;
  --moss: #4a6b3f;
  --moss-hi: #6f9459;
  --fern: #8fa87c;
  --amber: #d9a441;
  --amber-hi: #f0c96b;
  --slot: var(--soil);
  --slot-ink: var(--bark);
}

:root[data-tema="claro"] {
  /* ⚠ O bloco claro declara apenas o que MUDA de valor. Os derivados
     (`--accent`, `--gold`, `--edge`, `--frame`, `--ground`, `--body-text`,
     `--on-accent`, `--footer-bg` e os `-hi`) sao `var()` de base no `:root`, e
     por isso resolvem-se sozinhos aqui — a base e que troca. Foi assim que a
     paleta original nasceu, e duplicar o literal em cada tema e o que fez a
     troca para o azul tocar 49 tokens em vez de uma dezena. */
  color-scheme: light;
  --paper: #efe9d9;
  --paper-2: #d6cfb9;
  --paper-hi: #fdfaf0;
  --ink: #2a3226;
  --muted: #5d594a;
  --caption: #475439;
  --page-a: #e7e1cc;
  --page-b: #cdc6ad;
  --page-c: #b3ab90;
  --title-bg: var(--moss);
  --title-text: var(--paper-hi);
  --title-sub: var(--paper-hi);
  --outside-text: var(--ink);
  --brand-under: #fdfaf0;
  --brand-story: #f6dd9a;
  --bark-text: var(--ink);
  --link: #33402c;
  --footer-text: #e7e1cc;
  --toggle-bg: var(--paper);
  --toggle-text: var(--ink);
  --scan: rgba(90, 80, 50, .05);
  --shadow: rgba(60, 55, 35, .30);

  --soil: #3a5531;
  --soil-2: #4a6b3f;
  --bark: #9c8b6a;
  --moss: #4a6b3f;
  --moss-hi: #6f9459;
  --fern: #5f7a4e;
  --amber: #c68a2a;
  --amber-hi: #e0aa4a;
  /* Sobre o verde (`--moss` #4a6b3f) o ambar medio da 2,89:1. Aqui o `--gold-hi`
     deixa de ser alias de `--amber-hi` e assume o tom claro que a propria paleta
     ja usa em `--brand-story` — 4,54:1, e nao uma cor nova. */
  --gold-hi: #f6dd9a;
  --slot: var(--soil-2);
  --slot-ink: var(--moss);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--page-c);
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  margin: 0;
  padding: 16px 16px 44px;
  background:
    linear-gradient(180deg, var(--page-a), var(--page-b) 56%, var(--page-c));
  color: var(--outside-text);
  /* rem, não px: o controle de tamanho do painel de leitura escala a raiz, e
     `15px` aqui deixaria o corpo inteiro imune a ele. 15/16 = 0.9375rem. */
  font: 500 0.9375rem/1.7 var(--fonte-corpo);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  background: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 4px);
}

a {
  color: var(--link);
  text-underline-offset: 3px;
}

/* #994: generic link hover color leaks into custom-background components; button hover is the --gold-hi border. */

a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.theme-toggle {
  display: flex;
  justify-content: flex-end;
  width: min(860px, 100%);
  margin: 0 auto 14px;
}

.theme-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 10px;
  border: 2px solid var(--edge);
  background: var(--toggle-bg);
  color: var(--toggle-text);
  font: 700 0.6875rem/1 ui-monospace, "Courier New", monospace;
  letter-spacing: .08em;
  cursor: pointer;
}

.theme-toggle button + button { border-left: 0; }

.theme-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

.wrap {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.wrap.narrow { max-width: 760px; }
.wrap.compact { max-width: 620px; }

.win {
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--paper);
  border: 2px solid var(--edge);
  box-shadow:
    inset -2px -2px 0 var(--paper-2),
    inset 2px 2px 0 var(--paper-hi),
    4px 5px 0 var(--shadow);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  gap: 12px;
  padding: 6px 9px;
  background: var(--title-bg);
  border-bottom: 2px solid var(--edge);
}

/* A barra de janela é a moldura: pixel aqui é identidade, e o texto dela já é
   curto e fixo. `.st` é minúscula no HTML e a Silkscreen a desenha em caixa
   alta — é o efeito pretendido, não um descuido. */
.bar b {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  color: var(--title-text);
  font-family: var(--fonte-moldura);
  font-size: 0.7500rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.bar .st {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  color: var(--title-sub);
  font-family: var(--fonte-moldura);
  font-size: 0.6250rem;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── No celular o subtítulo desce para a própria linha ────────────────────────────
   O `nowrap` + `ellipsis` acima é o certo enquanto a barra imita uma janela: uma linha
   só, cortada com reticências. Mas a 375 px o título e os botões falsos consomem a
   largura, e o subtítulo ficava com ~100 px. Medido em `/` nessa largura: SEIS dos nove
   subtítulos cortados, e não pela metade — "do primeiro toque ao último capítulo" tinha
   289 px de texto em 99 px de caixa, e "o aplicativo já roda, em grupo…" tinha 313 px
   em 107 px. Cerca de um terço legível.

   E o subtítulo não é enfeite: é a única linha que diz o que a seção é. Cortá-lo em
   telefone — que é onde a maior parte do tráfego chega — apaga a explicação justamente
   para quem tem menos contexto.

   Então em tela estreita a barra quebra em duas linhas e o subtítulo recupera a largura
   inteira. A ilusão de janela sobrevive: título e botões continuam na primeira linha. */
@media (max-width: 34rem) {
  .bar {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .bar .st {
    order: 3;
    flex: 1 0 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.4;
  }

  /* Os botões falsos vão para a direita da PRIMEIRA linha, e não para o fim da última. */
  .bar .btns {
    order: 2;
    margin-left: auto;
  }
}

/* Fica de fora das fontes novas de propósito: o `□` de `– □ ×` é U+25A1, que
   não existe no subconjunto latin de nenhuma das três (ver fontes/README.md).
   Na monoespaçada de sistema o glifo existe. */
.btns {
  flex: 0 0 auto;
  color: var(--title-sub);
  font-size: 0.7500rem;
  letter-spacing: .35em;
}

.wordmark {
  display: inline-flex;
  gap: .08em;
  align-items: baseline;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
}

/* ── A MARCA NÃO MUDA DE FONTE ─────────────────────────────────────────────
   Decisão da Emily: trocar a fonte foi para os TEXTOS do site; o logotipo fica
   como está. Trocar a fonte é decisão de legibilidade, redesenhar a marca é
   decisão de marca — e essa não foi tomada.

   ⚠ PRECISA SER ESTA LISTA INTEIRA, não só `.wordmark`. A marca aparece em
   duas formas com marcação diferente:
     - na barra:  <span class="wordmark">…
     - na home:   <h1 class="hero-wordmark"><span class="wordmark-under">…
   A da home NÃO tem a classe `.wordmark`, então uma regra só em `.wordmark`
   deixa ela herdar a fonte de título do `h1` — foi o que aconteceu na primeira
   versão desta mudança, e passou despercebido porque a pixel no tamanho do
   logotipo lembra a monoespaçada. Os `-under`/`-story` entram na lista para o
   caso de aparecerem soltos fora do `.hero-wordmark`.

   Guardado por web/__tests__/marca-nao-muda-de-fonte.test.js. */
.wordmark,
.hero-wordmark,
.wordmark-under,
.wordmark-story {
  font-family: ui-monospace, "Courier New", monospace;
}

.wordmark-under { color: var(--brand-under); }
.wordmark-story { color: var(--brand-story); }

.wordmark--bar { font-size: 0.6875rem; }
.bar-suffix { color: var(--title-sub); font-size: 0.6250rem; }

.body {
  padding: 26px 24px;
  background: var(--paper);
  color: var(--body-text);
}

h1, h2, h3, h4 { color: var(--body-text); }

h1 {
  margin: 0 0 4px;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.8750rem, 7vw, 2.7500rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.08;
}

.hero-wordmark {
  display: flex;
  flex-wrap: wrap;
  gap: .14em;
  width: max-content;
  max-width: 100%;
  padding: .18em .25em .16em;
  background: var(--title-bg);
  border: 2px solid var(--edge);
  box-shadow: 3px 3px 0 var(--shadow);
  letter-spacing: .08em;
}

.hero-wordmark .wordmark-under { color: var(--brand-under); }
.hero-wordmark .wordmark-story { color: var(--brand-story); }

/* h2 e h3 já são `text-transform: uppercase` — é a condição para a Silkscreen
   entrar sem surpresa (ver o aviso de caixa alta em fontes/README.md). */
h2 {
  margin: 0 0 16px;
  font-family: var(--fonte-moldura);
  font-size: 1.0000rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

h3 {
  margin: 22px 0 6px;
  color: var(--muted);
  font-family: var(--fonte-moldura);
  font-size: 0.7500rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

h3:first-child { margin-top: 0; }

p {
  max-width: 64ch;
  margin: 0 0 15px;
}

/* A chamada é o único texto corrido em pixel: é curta, grande e de caixa mista,
   tamanho em que o `C` da Pixelify ainda se separa do `O`. */
.lede {
  font-family: var(--fonte-titulo);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.5;
}

.kicker {
  margin: 0 0 20px;
  color: var(--muted);
  font-family: var(--fonte-moldura);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.rule {
  height: 2px;
  margin: 22px 0;
  background: var(--gold);
}

.tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--fonte-moldura);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .05em;
}

.two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}

.steps li {
  position: relative;
  margin-bottom: 18px;
  padding-left: 42px;
  counter-increment: steps;
}

.steps li::before {
  position: absolute;
  top: 1px;
  left: 0;
  padding: 3px 7px;
  background: var(--accent);
  color: var(--on-accent);
  content: counter(steps, decimal-leading-zero);
  font-size: 0.6875rem;
  letter-spacing: .08em;
}

.steps b { display: block; letter-spacing: .02em; }
.steps span, .cap, .plan .when, .note { color: var(--muted); }
.steps span { font-size: 0.8750rem; }

.mock {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
  margin: 0 auto;
}

.cover {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--edge);
}

/* ══ A hero da ficha e do ensaio ═══════════════════════════════════════════
   ⚠ ESTAS CLASSES EXISTIAM NO HTML E NAO EXISTIAM AQUI. O gerador emite
   `.obra-hero`, `.obra-hero__sinopse` e `.obra-hero__colecoes`/`__temas` desde
   sempre, e o CSS nunca teve regra para nenhuma delas (issue #908, auditoria de
   UI/UX de 2026-08-27).

   Sem regra valia so `.cover { width: 100% }`, e o resultado, MEDIDO em
   `/obras/a-cartomante` a 1280x720:

     capa renderizada   808x808 px   (arquivo natural 512x512 -- ampliada 1,58x)
     <h1> em            y = 981      abaixo da dobra

   Ou seja: a pagina que existe para APRESENTAR a obra abria com a ilustracao
   ampliada e borrada, e o titulo ficava fora da primeira tela. Nas 248 fichas,
   que sao a superficie de entrada do buscador.

   A marcacao (img + div irmaos dentro de um wrapper chamado "hero") sempre
   indicou layout lado a lado; faltava so o CSS.

   ── POR QUE ESTA GRADE, E NAO UMA NOVA ─────────────────────────────────────
   E a mesma de `.posts__item` (`124px 1fr`, `gap 1rem`, `align-items: start`),
   que o design system ja usa para "capa + texto", com o mesmo empilhamento
   abaixo de 30rem. Nenhum token novo, nenhuma medida inventada: a hero passa a
   parecer com o resto do site em vez de parecer com nada. */
.obra-hero {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 1rem;
  align-items: start;
}

.obra-hero > div { min-width: 0; }

.obra-hero__sinopse {
  margin-top: .6rem;
  color: var(--muted);
}

/* Duas classes porque sao DUAS COISAS, e ate 2026-08-27 as duas se chamavam
   `__temas`: na ficha o paragrafo lista Colecoes, no ensaio lista temas.
   Estilizar coisas diferentes com o mesmo nome e como elas ficam iguais por
   acidente na proxima mudanca. */
.obra-hero__colecoes,
.obra-hero__temas {
  margin-top: .5rem;
  font-size: .8125rem;
  color: var(--muted);
}

/* The ficha lists themes outside the hero because they describe the whole work, not only
   the synopsis. Keep the same visual hierarchy as the essay's theme list. */
.obra-ficha__temas {
  margin-top: .5rem;
  font-size: .8125rem;
  color: var(--muted);
}

@media (max-width: 30rem) {
  /* Mesmo motivo do `.posts__item`: abaixo disto a capa come metade da largura
     e o titulo quebra em duas palavras por linha. */
  .obra-hero { grid-template-columns: 1fr; }
  .obra-hero .cover { width: 96px; }
}

.cap {
  margin-top: 5px;
  font-size: 0.6875rem;
  line-height: 1.35;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 14px;
  margin: 4px 0;
}

.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.plan {
  padding: 16px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
}

.plan.pro { border-left-color: var(--gold); }

.plan h3 {
  margin: 0 0 4px;
  font-size: 0.8750rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.plan .when {
  margin-bottom: 10px;
  font-size: 0.6875rem;
  letter-spacing: .06em;
}

.plan ul { margin: 0; padding-left: 17px; }
.plan li { margin-bottom: 5px; font-size: 0.8750rem; }

.note {
  margin-bottom: 15px;
  padding: 15px;
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
  font-size: 0.8750rem;
}

.audio-vitrine__intro {
  max-width: 64ch;
}

.audio-vitrine__panel,
.amostra-painel {
  display: grid;
  gap: 16px;
  padding: 16px;
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
}

/* ── Acervo: capa clicável ──────────────────────────────────────────────
   A capa é um <button>, não uma imagem com onclick: precisa ser alcançável
   por teclado e anunciar estado. O botão zera a aparência nativa e devolve
   à capa o mesmo desenho que ela tinha como <figure>. */
.grid--capas {
  list-style: none;
  padding: 0;
}

.capa-botao {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.capa-botao .cover {
  transition: outline-color .12s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.capa-botao:hover .cover { outline-color: var(--accent-hi); }
.capa-botao[aria-pressed="true"] .cover { outline-color: var(--gold-hi); }
.capa-botao:focus-visible { outline: none; }
.capa-botao:focus-visible .cover { outline: 3px solid var(--focus-ring); }

/* Selo "amostra": diz, ANTES do clique, quais capas têm áudio. Sem isso o
   usuário descobre que não há amostra só depois de clicar — seis vezes. */
.capa-selo {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.5625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* A capa sem amostra não fica "apagada" a ponto de sumir: continua legível,
   só não promete o que não tem. */
.capa-botao[data-amostra="0"] .cover { opacity: .78; }
.capa-botao[data-amostra="0"]:hover .cover,
.capa-botao[data-amostra="0"][aria-pressed="true"] .cover { opacity: 1; }

.amostra-painel__vazio {
  max-width: 60ch;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .capa-botao .cover { transition: none; }
}

.audio-vitrine__meta,
.audio-vitrine__work,
.audio-vitrine__caption,
.audio-vitrine__status {
  margin: 0;
}

.audio-vitrine__work {
  font-size: 1.0000rem;
}

.audio-vitrine__caption,
.audio-vitrine__status {
  color: var(--muted);
  font-size: 0.7500rem;
}

.audio-vitrine__label {
  display: block;
  margin-bottom: 6px;
  color: var(--body-text);
  font-size: 0.7500rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.audio-vitrine__select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 2px solid var(--edge);
  background: var(--paper);
  color: var(--body-text);
  font: inherit;
}

.audio-vitrine__audio {
  display: block;
  width: 100%;
  margin-top: 12px;
}

.audio-vitrine__vote {
  margin: 0;
  padding: 14px;
  border: 2px solid var(--frame);
  background: var(--paper);
  color: var(--body-text);
}

.audio-vitrine__vote legend {
  padding: 0 6px;
  font-weight: 700;
  letter-spacing: .06em;
}

.audio-vitrine__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.audio-vitrine__button {
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--edge);
  background: var(--accent);
  color: var(--on-accent);
  font: 700 0.8125rem/1.2 ui-monospace, "Courier New", monospace;
  cursor: pointer;
}

.audio-vitrine__button--down {
  background: var(--paper-2);
  color: var(--body-text);
}

.audio-vitrine__button:disabled {
  cursor: default;
  opacity: .65;
}

.authors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.auth {
  padding: 12px;
  background: var(--paper-2);
  color: var(--body-text);
  text-align: center;
}

.auth b {
  display: block;
  margin-top: 8px;
  color: var(--body-text);
  font-size: 0.7500rem;
  letter-spacing: .08em;
}

.auth span {
  color: var(--muted);
  font-size: 0.6875rem;
}

/* Keep the P3's per-author inline colors working everywhere else. The first card
   uses the light-theme accent as its background, so its two inline accents need
   the existing AA-safe tokens in every theme and contrast preference. */
.authors .auth:first-child b[style*="--amber-hi"] {
  color: var(--gold-hi) !important;
}

.authors .auth:first-child span[style*="--fern"] {
  color: var(--on-accent) !important;
}

.legal h1 { font-size: clamp(1.5000rem, 6vw, 2.1250rem); }
.legal h2 { margin-top: 26px; }

/* Nas páginas legais o h3 carrega navegação de verdade (a política tem 6). Com a cor
   --muted e 13px ele fica a 1px do corpo do texto e some na varredura visual: quem
   procura "Anúncios" não acha. Sobe para a tinta dos títulos e para 14px — a hierarquia
   passa a ser legível sem mexer no h3 do resto do site. */
.legal h3 {
  margin-top: 22px;
  color: var(--ink);
  font-size: 0.875rem;
}
.legal h2:first-of-type { margin-top: 0; }
.legal .body { line-height: 1.75; }
.legal .back { display: inline-block; margin-bottom: 16px; font-size: 0.7500rem; letter-spacing: .08em; }
.legal .box,
.legal .note {
  margin-bottom: 15px;
  padding: 15px;
  background: var(--paper-2);
}

.legal .box { border-left: 3px solid var(--accent); }
.legal .note { border-left: 3px solid var(--gold); }
.legal ul { margin: 0 0 15px; padding-left: 18px; }
.legal li { margin-bottom: 8px; }

/* #913: seis geradores emitem `wrap legal` em pagina que nao e juridica, e a
   prosa de `.legal ul` (0,1,1) vencia as grades de cartao (0,1,0): 18px de
   recuo espurio no /acervo, medido ao vivo. Mesmo peso de seletor, vitoria
   devolvida ao componente. */
.legal .acervo-lista,
.legal .baixar__lista,
.legal .posts { padding-left: 0; margin: 0; }

.legal .acervo-lista li,
.legal .baixar__lista li,
.legal .posts li { margin-bottom: 0; }
.legal table { width: 100%; margin-bottom: 15px; border-collapse: collapse; font-size: 0.8750rem; }
.legal th, .legal td { padding: 7px 8px; border-bottom: 1px solid var(--frame); text-align: left; }
.legal th { color: var(--muted); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; }

.not-found { text-align: center; }
.not-found h1 { margin-bottom: 14px; }
.not-found .body { padding: 42px 24px; }
.not-found .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.not-found .actions a {
  display: inline-block;
  padding: 8px 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
}

.foot {
  padding: 16px;
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 0.6875rem;
  letter-spacing: .06em;
  line-height: 1.9;
  text-align: center;
}

.foot b { color: var(--gold-hi); letter-spacing: .1em; }
.foot a { color: var(--footer-text); }
.foot a {
  display: inline-block;
  padding: 5px 0;
  line-height: 1.4;
}

@media (min-width: 560px) {
  .plans { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 660px) {
  .two { grid-template-columns: 1fr 1fr; gap: 30px; }
  .two.wide { grid-template-columns: 1.15fr .85fr; }
  .theme-toggle { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* ── Acessibilidade P1 (2026-08-09) ─────────────────────────────── */
.skip-link {
  position: absolute; left: 8px; top: 8px; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; font-weight: 700; text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus,
.skip-link:focus-visible { transform: none; outline: 3px solid var(--focus-ring); outline-offset: 3px; }

details.transcricao { margin-top: 12px; }
details.transcricao summary {
  cursor: pointer; color: var(--link);
  text-decoration: underline; text-underline-offset: 3px;
  font-size: 0.875rem; letter-spacing: .04em;
}
details.transcricao p { margin: 10px 0 0; font-size: 0.9375rem; }

/* ── Acervo completo (/acervo) ──────────────────────────────────────────
   Lista, não grade: cada obra traz sinopse, e sinopse em cartão de grade
   vira coluna de 3 palavras. A capa fica pequena à esquerda e o texto
   ocupa a largura de leitura. */
.acervo-filtro {
  margin: 18px 0 6px;
  padding: 14px 16px;
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
}

.acervo-filtro .audio-vitrine__select { margin-bottom: 8px; }

/* O campo de busca segue o input do site (.waitlist__input) de propósito — é o padrão de
   entrada que a pessoa já viu na lista de espera. `appearance: none` tira o X e a lupa que
   o WebKit injeta em `type="search"`, que não combinam com a moldura de sistema operacional
   do site. `type="search"` fica porque dá teclado com "buscar" no celular. */
.acervo-busca__campo {
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper-hi);
  border: 2px solid var(--edge);
  appearance: none;
  -webkit-appearance: none;
}

.acervo-busca__campo:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.acervo-busca__campo::-webkit-search-cancel-button { appearance: none; }

/* Lista e barra de iniciais são irmãs: a barra à direita, largura fixa, e a lista tomando
   o resto. `minmax(0, 1fr)` e não `1fr` — sem o minmax, um cartão largo empurra a barra
   fora da tela, porque a faixa mínima padrão de um item de grid é o seu conteúdo. */
.acervo-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

/* Colada enquanto se rola, como o índice do Plex: a barra tem de estar ao alcance com a
   lista no meio, não só no topo da página. */
.acervo-iniciais {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

/* 36×30 no desktop: acima do mínimo AA de 24×24 (WCAG 2.5.8), abaixo dos 44×44 do AAA
   (2.5.5) que o resto do site usa. Duas trocas conscientes, e as duas medidas:
     - altura: 20 letras a 44px dariam 880px de coluna, mais que a tela útil, e barra que
       não cabe não é índice;
     - largura: a 44px a barra media 64px, e isso derrubava a grade de 3 para 2 colunas em
       860px de página — ou seja, deixava o acervo MAIS longo, o oposto do que a busca e a
       barra existem para resolver.
   No toque as letras voltam a 44px cheios, na consulta de largura lá embaixo. */
.acervo-iniciais__letra {
  min-width: 36px;
  min-height: 30px;
  padding: 2px 6px;
  border: 0;
  background: none;
  font-family: var(--fonte-moldura);
  font-size: 0.75rem;
  line-height: 1;
  color: var(--caption);
  cursor: pointer;
}

.acervo-iniciais__letra:hover { color: var(--ink); background: var(--paper-hi); }
.acervo-iniciais__letra:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -1px; }

/* A letra ativa: fundo E texto mudam. Só cor não serve — quem não distingue as duas cores
   ficaria sem saber qual filtro está em vigor (WCAG 1.4.1, uso de cor). */
.acervo-iniciais__letra[aria-pressed='true'] {
  /* `--on-accent`, e nao `--paper`: este e texto sobre `--accent`, e ha um token com esse
     nome exato para o caso. Com o verde, `--paper` sobre `--moss` da 4,38:1 — reprova AA
     por 0,12. O `--on-accent` (`--paper-hi`) da 5,16:1. Medido em runtime, no /acervo. */
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 700;
}

/* Em tela estreita a barra vira faixa horizontal acima da lista: uma coluna de 27 letras
   ao lado de cartões de 240px não caberia, e encolher a lista para caber é pior.
   Aqui os alvos ganham os 44px cheios (WCAG 2.5.8) — é onde se toca com o dedo. */
@media (max-width: 44rem) {
  .acervo-corpo { grid-template-columns: minmax(0, 1fr); }
  .acervo-iniciais {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
    order: -1;
    border-left: 0;
    border-top: 3px solid var(--gold);
  }
  .acervo-iniciais__letra { min-height: 44px; }
}

@media (forced-colors: active) {
  .acervo-iniciais__letra[aria-pressed='true'] {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}

/* 210px e não 240px: a barra de iniciais tomou 47px da largura, e a 240px de mínimo a
   grade caía de 3 para 2 colunas — medido em 860px de página. Duas colunas alongam a
   lista, e encurtá-la é justamente o motivo desta tela ter ganhado busca e barra. */
.acervo-lista {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 26px 20px;
}

/* Cartão vertical, no formato da seção de amostras: capa em cima, texto
   embaixo. Era uma lista de 148 linhas — cada obra ocupando a largura
   inteira — e a página ficava com 148 blocos empilhados. Em grade a mesma
   informação cabe em ~50 linhas, sem perder a sinopse, que é o texto que o
   buscador indexa. */
.obra {
  display: block;
  padding-bottom: 4px;
}

.obra .cover {
  width: 124px;
  margin-bottom: 8px;
}

.obra__texto > * { margin: 0; }

.obra__titulo {
  /* #909: sem esta linha o titulo herda Silkscreen do h2 — fonte SO de caixa
     alta, e o `text-transform: none` abaixo era inoperante em 248 titulos.
     O README das fontes sempre mandou: "Silkscreen so tem CAIXA ALTA". */
  font-family: var(--fonte-corpo);
  font-size: 0.9375rem;
  margin: 0 0 2px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

.obra__autor { font-size: 0.8125rem; }

.obra__meta {
  font-size: 0.6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 2px 0 6px;
}

.obra__sinopse {
  font-size: 0.8125rem;
  max-width: 64ch;
}

/* O filtro esconde visualmente; o conteúdo continua no HTML entregue, que é
   o que o buscador lê. Nenhuma obra fica inalcançável por estar filtrada. */
.obra[hidden] { display: none; }

/* Em tela estreita a coluna única deixa a capa sozinha numa linha larga;
   ali vale voltar ao formato lado a lado. */
@media (max-width: 419px) {
  .acervo-lista { grid-template-columns: 1fr; gap: 18px; }
  .obra { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; }
  .obra .cover { width: 92px; margin-bottom: 0; }
  .win[data-nivel="ficha"] > .body { padding: 26px 12px; }
}

/* ── Acessibilidade P2 ──────────────────────────────────────────────────
   Duas preferências de sistema que o site ignorava. Nenhuma das duas é
   "tema alternativo": são pedidos explícitos de quem não enxerga bem. */

/* 1. prefers-contrast: more — o visitante pediu MAIS contraste ao sistema.
   Aqui a paleta não muda de família: os tons vão para as pontas. Texto de
   apoio deixa de ser cinza-azulado e passa à tinta cheia, porque "texto
   secundário" é uma escolha de design que essa preferência revoga. */
@media (prefers-contrast: more) {
  :root {
    --paper: #ecebe6;
    --paper-2: #f4f3ef;
    --paper-hi: #ffffff;
    --ink: #000000;
    --caption: #1a1a1a;
    --link: #273122;
    --gold-hi: #fefaf0;
  }

  :root[data-tema="claro"] {
    --ground: #ffffff;
    --ink: #000000;
    --caption: #1a1a1a;
    --link: #273122;
  }

  /* A capa sem amostra parava de 78% de opacidade. Opacidade REDUZ contraste —
     exatamente o oposto do que foi pedido. */
  .capa-botao[data-amostra="0"] .cover { opacity: 1; }

  .win, .obra, .acervo-filtro { border-color: var(--ink); }
}

/* 2. forced-colors — modo de alto contraste do Windows. O sistema DESCARTA as
   nossas cores e impõe as dele. Tudo o que se distinguia só por cor de fundo
   fica indistinguível: por isso a borda volta, com palavra-chave de cor do
   sistema, que é o único valor que sobrevive aqui. */
@media (forced-colors: active) {
  .win,
  .obra,
  .acervo-filtro,
  .amostra-painel,
  .audio-vitrine__panel,
  .audio-vitrine__vote,
  .box,
  .note {
    border: 1px solid CanvasText;
  }

  /* O selo "amostra" era só fundo colorido. */
  .capa-selo {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
  }

  /* Estado pressionado — o único sinal de qual tema e qual obra estão ativos. */
  .theme-toggle button[aria-pressed="true"],
  .capa-botao[aria-pressed="true"] .cover {
    outline: 3px solid Highlight;
    outline-offset: 1px;
  }

  .skip-link { border: 2px solid CanvasText; }

  a:focus-visible,
  button:focus-visible,
  select:focus-visible,
  summary:focus-visible,
  .capa-botao:focus-visible .cover {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  /* As capas são ilustração, não interface: preservar o desenho é o certo. */
  .cover { forced-color-adjust: none; }

  /* Opacidade não sobrevive à substituição de cor e só atrapalha. */
  .capa-botao[data-amostra="0"] .cover { opacity: 1; }
}

/* ── Home · acervo: o caminho para a página completa ────────────────────
   O link para /acervo estava no rodapé da seção, depois das capas e do
   player — ou seja, depois de tudo que prende a atenção. Subiu para antes
   das amostras e ganhou peso: é a única porta para as outras 141 obras. */
.acervo__todas {
  margin: 16px 0 22px;
  padding: 12px 16px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  font-size: 0.9375rem;
}

.acervo__todas a { text-decoration: none; }
.acervo__todas a:hover,
.acervo__todas a:focus-visible { text-decoration: underline; }

/* "Amostras" separa a porta do acervo (acima) do que dá para ouvir agora
   (abaixo). O h3 global é --muted a 13px e some ao lado do corpo do texto;
   aqui ele precisa ler como início de bloco. */
.acervo__amostras {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: .06em;
}

/* ── Waitlist do teste fechado ──────────────────────────────────────────
   Primeiro formulário do site. Tudo aqui é controle nativo: <input>,
   <label>, <button>. Nada de campo estilizado por div — teclado, leitor de
   tela e preenchimento automático já funcionam de graça no nativo. */
.teste-requisitos {
  max-width: 64ch;
  margin: 0 0 18px;
  padding-left: 20px;
}

.teste-requisitos li { margin-bottom: 6px; }

.waitlist {
  display: grid;
  gap: 12px;
  max-width: 44ch;
  padding: 16px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
}

.waitlist__campo { display: grid; gap: 4px; }

.waitlist__input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper-hi);
  border: 2px solid var(--edge);
}

.waitlist__input:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Honeypot: fora da tela, mas NÃO display:none — bot esperto ignora o que o CSS
   esconde por display, e preenche o que só está deslocado. */
.waitlist__pote {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.waitlist__opcao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  font-size: 0.8125rem;
}

.waitlist__opcao input { margin-top: 3px; }
.waitlist__nota { display: block; color: var(--caption); }

.waitlist__botao {
  justify-self: start;
  padding: 10px 20px;
  font: inherit;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border: 2px solid var(--edge);
  cursor: pointer;
}

.waitlist__botao:hover { box-shadow: inset 0 0 0 2px var(--gold-hi); } /* #911: fundo fica */
.waitlist__botao:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.waitlist__botao[disabled] { opacity: .6; cursor: default; }

.waitlist__status { margin: 0; font-size: 0.8125rem; min-height: 1.4em; }

.waitlist__privacidade {
  max-width: 64ch;
  margin: 14px 0 0;
  font-size: 0.75rem;
}

@media (forced-colors: active) {
  .waitlist, .waitlist__input, .waitlist__botao { border: 1px solid CanvasText; }
}

/* ── Painel de administração (/painel, atrás do Cloudflare Access) ──────── */
.painel-numeros {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}

.painel-numeros b { font-size: 1.25rem; color: var(--ink); }

.painel-tabela {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 18px;
  font-size: 0.8125rem;
}

.painel-legenda {
  caption-side: bottom;
  text-align: left;
  padding-top: 6px;
  font-size: 0.75rem;
  color: var(--caption);
}

.painel-tabela th,
.painel-tabela td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--frame);
  /* ⚠ `break-word`, e NÃO `anywhere`. Aqui estava `anywhere` para todas as células, e a
     diferença entre os dois não é de grau: o MDN diz que no `anywhere` as oportunidades
     de quebra "are considered when calculating min-content intrinsic sizes", e no
     `break-word` "are NOT". Traduzindo, `anywhere` permite ao navegador encolher uma
     coluna até UM caractere — e foi assim que a fila de escuta, com oito colunas em
     772 px, imprimiu "DURAÇÃO" como "DUR AÇÃ O" e "3:18:29" como "3:1 8:2 9".

     `word-break: normal` fecha a outra porta: garante quebra ENTRE palavras, nunca
     dentro. É a mesma escolha já feita no `.painel-abrir` logo abaixo, pelo mesmo
     motivo — só que lá alguém aprendeu a lição uma tabela antes. */
  overflow-wrap: break-word;
  word-break: normal;
}

/* O `anywhere` continua existindo, escopado ao ÚNICO caso que o justifica.
   Um e-mail é uma palavra só, sem espaço, e pode ter 60 caracteres: sem quebra
   arbitrária ele define o mínimo da coluna e empurra a tabela para fora da tela. O
   preço — o endereço partido ao meio — é aceitável em endereço, e não em "DURAÇÃO".
   Aplicado pela classe, em `painel.js`, e não por `:nth-child`: posição de coluna muda,
   e uma regra posicional passa a quebrar a célula errada sem ninguém perceber. */
.painel-tabela .painel-tabela__endereco {
  overflow-wrap: anywhere;
}

.painel-tabela th {
  color: var(--ink);
  font-size: 0.6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.painel-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.painel-mailto { font-size: 0.8125rem; }

/* O botão que abre o ensaio para ler e editar.
   Sem isto ele herdava a aparência padrão de <button>: caixa cinza estreita, e o título
   quebrado no meio da palavra ("Dom Casm urro"). O gatilho existia e não se anunciava —
   pior que ausente, porque parece que a função não foi feita. Agora lê-se como ação:
   alinhado à esquerda, ocupando a célula, sublinhado, e nunca partindo palavra. */
.painel-abrir {
  display: block;
  width: 100%;
  min-height: 44px; /* alvo de toque, WCAG 2.5.8 — mesma régua do resto do site */
  padding: 8px 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  /* #911: era var(--accent), 4,38:1 — e o hover ia a 2,51:1. Mesmo padrao do
     .redes__link: link no corpo, hover afunda para a tinta. */
  color: var(--link);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  overflow-wrap: break-word;
  word-break: normal; /* quebra ENTRE palavras, nunca dentro */
  hyphens: none;
}
.painel-abrir:hover, .painel-abrir:focus-visible { color: var(--ink); } /* #911 */

/* A coluna do título precisa de largura para o nome caber em uma ou duas linhas
   inteiras; espremida, era ela que forçava a quebra no meio da palavra. */
.painel-tabela th:first-child, .painel-tabela td:first-child { min-width: 12rem; }

@media (max-width: 40rem) {
  .painel-tabela th:first-child, .painel-tabela td:first-child { min-width: 7rem; }
}

@media (forced-colors: active) {
  .painel-tabela th, .painel-tabela td { border-bottom: 1px solid CanvasText; }
}

/* ── Hero: redes sociais ao lado do wordmark ─────────────────────────────
   Mini-janela dentro da janela do hero: o site é uma casca de sistema
   operacional, e uma janela dentro de outra é a gramática que ele já tem —
   não precisou de elemento novo.

   ⚠ Glifos MONOCROMÁTICOS de propósito. Vermelho do YouTube, preto do X e
   azul do Telegram, juntos, seriam as três únicas cores fora da família da
   paleta em toda a página. `currentColor` faz um só desenho servir tema
   claro, escuro, hover e modo de alto contraste. */
.hero-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
}

.hero-topo .hero-wordmark { margin-bottom: 0; }

.redes {
  flex: 0 1 268px;
  /* Mesmas variáveis da janela de verdade (.win / .bar / .body), não escolhidas
     de novo. ⚠ A primeira versão usou --frame na barra e --soil-2 no fundo:
     no tema CLARO isso dava 1,13:1 no rótulo (invisível) e um painel escuro
     dentro de uma página clara. A barra real usa --title-bg, e --soil-2 não
     inverte com o tema. Reusar é o que mantém os dois temas coerentes. */
  background: var(--paper);
  border: 2px solid var(--edge);
}

.redes__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 5px 9px;
  background: var(--title-bg);
  border-bottom: 2px solid var(--edge);
  color: var(--title-text);
  font-size: 0.625rem;
  letter-spacing: .12em;
}

.redes__bar .btns { color: var(--title-sub); letter-spacing: .18em; }

.redes__corpo {
  padding: 10px 12px 8px;
  background: var(--paper);
  color: var(--body-text);
}

.redes__texto {
  margin: 0 0 8px;
  max-width: 34ch;
  font-size: 0.75rem;
}

.redes__lista {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Alvo de toque de 44 px, exigência do handoff e do WCAG 2.2 (2.5.8). O glifo
   é de 22 px; o resto é área clicável, que não precisa ser visível. */
.redes__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--link);
  text-decoration: none;
}

.redes__glifo {
  width: 22px;
  height: 22px;
  display: block;
}

/* ⚠ O hover NÃO usa --accent-hi nem --gold-hi. Medi: sobre o corpo da janela
   (que é --paper claro nos DOIS temas) o --accent-hi dá 2,40:1 no tema escuro —
   reprova até nos 3:1 que objeto gráfico exige (WCAG 1.4.11). Aquelas variáveis
   são realce para fundo escuro, e o corpo aqui é claro.
   --ink sobre --paper-2 dá 11,94:1 no escuro e 14,13:1 no claro. */
.redes__link:hover {
  color: var(--ink);
  background: var(--paper-2);
}

.redes__link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -2px;
}

@media (max-width: 560px) {
  /* Em tela estreita o mini-painel ocupa a largura toda em vez de brigar
     com o wordmark por espaço. */
  .redes { flex: 1 1 100%; }
}

@media (forced-colors: active) {
  .redes, .redes__bar { border-color: CanvasText; }
  /* O glifo é interface, não ilustração: deve seguir a cor do sistema. */
  .redes__glifo { forced-color-adjust: auto; }
}

/* Nota de grafia dentro da transcrição. Decisão do Murilo (requisito); o alcance é
   medido, não escolhido — só aparece onde há grafia de época a explicar. Fica JUNTO do
   texto, não no rodapé da página: quem estranha "theatro" está lendo o trecho naquele
   momento, e é ali que a explicação serve. */
.transcricao__nota {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--frame);
  font-size: 0.6875rem;
  color: var(--caption);
}

.transcricao__texto[hidden] { display: none; }

/* ── Ensaio: autoria, fontes e a enquete de fim de página ───────────────────── */

.ensaio-autoria {
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--body-text);
  border-bottom: 1px solid var(--edge);
  padding-bottom: .6rem;
  margin: 0 0 1.4rem;
}

.fontes {
  margin: 2.4rem 0 0;
  border-top: 2px solid var(--edge);
  padding-top: 1.2rem;
}

.fontes__nota {
  font-size: .86rem;
  font-style: italic;
  color: var(--body-text);
  margin: .1rem 0 .6rem;
}

.fontes__lista {
  margin: 0 0 1.4rem;
  padding-left: 1.6rem;
  font-size: .9rem;
  line-height: 1.65;
}

.fontes__lista li { margin-bottom: .7rem; }

/* A referência é o dado; o link é o atalho. Por isso o link mostra só o host: a URL inteira
   dentro de uma referência ABNT some no meio do texto e ainda quebra o alinhamento. */
.fonte__link {
  white-space: nowrap;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .82em;
}

/* ── A enquete ──────────────────────────────────────────────────────────────── */

.palpite {
  margin: 2.4rem 0 1.6rem;
  border: 2px solid var(--edge);
  background: var(--paper-2);
  padding: 1.1rem 1.2rem 1.2rem;
}

.palpite h2 { margin: 0 0 .2rem; font-size: 1.05rem; }

.palpite__chamada {
  margin: 0 0 1rem;
  font-size: .88rem;
  font-style: italic;
}

.palpite__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

/* min-height 44 e padding generoso: alvo de toque, mesma exigência dos ícones do hero
   (WCAG 2.5.8). O flex:1 com base 9rem faz os dois ficarem lado a lado no telefone sem
   estourar 375 px. */
.palpite__botao {
  flex: 1 1 9rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .7rem .9rem;
  border: 2px solid var(--edge);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.palpite__glifo { flex: 0 0 auto; }

/* O olho do robô é vazado: pinta com a cor do FUNDO DO BOTÃO, não com uma cor fixa. Cor
   fixa aqui viraria mancha quando o botão troca de fundo no hover ou no estado votado. */
.palpite__olho { fill: var(--paper); }

.palpite__botao:hover:not(:disabled),
.palpite__botao:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}

.palpite__botao:hover:not(:disabled) .palpite__olho,
.palpite__botao:focus-visible .palpite__olho { fill: var(--accent); }

.palpite__botao:disabled { cursor: default; opacity: 1; }

.palpite__botao[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 0 0 2px var(--paper);
}

.palpite__botao[aria-pressed="true"] .palpite__olho { fill: var(--accent); }

.palpite__conta {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: .86em;
}

.palpite__aviso {
  margin: .8rem 0 0;
  font-size: .88rem;
  min-height: 1.2em;
}

.palpite__revelacao {
  margin: 1rem 0 0;
  border-top: 1px solid var(--edge);
  padding-top: .8rem;
  font-size: .92rem;
}

.palpite__revelacao summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.palpite__revelacao p { margin: .5rem 0 0; }

.obra__ensaio { margin: .45rem 0 0; font-size: .86rem; }

@media (prefers-contrast: more) {
  .palpite__botao { border-width: 3px; }
  .fontes__nota { font-style: normal; font-weight: 600; }
}

@media (forced-colors: active) {
  .palpite__botao { border-color: CanvasText; color: CanvasText; }
  .palpite__botao[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  .palpite__glifo { forced-color-adjust: none; }
  .palpite__olho { fill: Canvas; }
}

/* ── /baixar e o selo de EPUB no cartão ────────────────────────────────────────
   O selo é o caminho de descoberta de quem NAVEGA o acervo em vez de buscar: ele
   aparece no cartão, que é o mesmo desenho no /acervo, nas 73 páginas de autor e
   nas 17 de coleção. Discreto de propósito — o cartão é sobre a obra, não sobre o
   formato; o selo diz "dá para levar" sem competir com o título. */

.selo-epub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 24px é o mínimo AA (WCAG 2.5.8) para alvo de toque. Aqui não vai a 44px como o
     botão da ficha: dentro de uma lista de 248 cartões, alvo grande vira ruído. */
  min-height: 24px;
  padding: 3px 9px;
  background: var(--paper-2);
  border: 1px solid var(--gold);
  color: inherit;
  font-size: 0.75rem;
  letter-spacing: .04em;
  text-decoration: none;
}

.selo-epub:hover,
.selo-epub:focus-visible { border-color: var(--gold-hi); background: var(--paper); }
.selo-epub:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.obra__epub { margin: 6px 0 0; }

.baixar__nota { font-size: 0.8750rem; }

/* ⚠ A lista da /baixar herda `.acervo-lista` porque é assim que o filtro do site.js a
   enxerga (ele engancha em [data-acervo-lista] e varre `.obra`). Mas `.acervo-lista` é um
   grid de 3 colunas para CARTÃO, e a /baixar é uma lista de LINHAS — sem este override o
   título encavala no botão de download, medido por screenshot. Reusar o comportamento não
   obriga a herdar a forma. */
.baixar__lista {
  display: block;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  gap: 0;
}

.baixar__item {
  /* Sem `!important`: a regra `.obra { display: block }` do acervo está ANTES no arquivo,
     então esta — mais tarde, mesma especificidade — vence. A ordem é a garantia. */
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .14);
}

.baixar__capa { flex: none; width: 60px; height: 90px; object-fit: cover; }
.baixar__texto { flex: 1 1 auto; min-width: 0; }
/* `break-word` aqui é o caso legítimo dele: uma palavra ÚNICA maior que o cartão.
   Medido a 375 px — de 94 títulos, exatamente UM transborda: "Autopsicografia" pede
   140 px numa caixa de 120 px, e com `overflow: visible` ele vazava por cima da borda.
   Nem `anywhere` (que deixaria o cartão encolher) nem `hidden` (que esconderia parte do
   título de uma obra): quebrar a palavra é o único desfecho que mantém o título inteiro
   e dentro da caixa. */
.baixar__titulo {
  font-family: var(--fonte-corpo);
  margin: 0 0 3px;
  font-size: 0.9375rem;
  letter-spacing: .02em;
  overflow-wrap: break-word;
} /* #909 */
.baixar__autor { margin: 0; font-size: 0.8125rem; color: var(--caption); }

/* ⚠ Texto sobre `--accent` usa `--on-accent`, nunca `--paper`. Com o verde, `--paper` sobre
   `--moss` da 4,38:1 e reprova AA por 0,12 — foram 188 elementos no /baixar e mais no
   /obras. O `--on-accent` existe para este caso exato e da 5,16:1. Medido em runtime. */
.baixar__botao {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  /* Este SIM a 44px (WCAG 2.5.5, AAA): é a ação principal da página, e a lista é
     percorrida no telefone. */
  min-height: 44px;
  justify-content: center;
  padding: 6px 14px;
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--accent);
  font-weight: 700;
  font-size: 0.8125rem;
  text-decoration: none;
}

.baixar__botao:hover,
.baixar__botao:focus-visible {
  /* #911: o hover trocava o fundo por --accent-hi e o texto caia a 2,94-3,32:1
     no exato momento do clique. O fundo FICA; o sinal e a borda dourada. */
  border-color: var(--gold-hi);
}
.baixar__botao:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.baixar__kb { font-weight: 400; font-size: 0.6875rem; color: var(--on-accent); } /* #911: opacidade em texto e contraste perdido sem aviso */

@media (forced-colors: active) {
  /* No alto contraste o navegador descarta background e border: sem isto o selo some
     dentro do cartão e o botão vira texto. O símbolo ⤓ e a palavra "EPUB" carregam o
     sentido sem depender de cor (WCAG 1.4.1). */
  .selo-epub, .baixar__botao { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
}

/* ── Botões de loja no hero ────────────────────────────────────────────────────
   O do Google Play é colorido e leva ao opt-in oficial do teste fechado. O do
   iPhone é CINZA de propósito — não existe app iOS, e um botão colorido de App
   Store seria promessa; o cinza diz "ainda não" antes do clique, e o clique leva
   à página /ios, que registra o interesse (inscrição com origem própria). */

.lojas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 6px;
}

.loja-botao {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 18px 10px 14px;
  background: var(--ink);
  color: var(--paper-hi);
  border: 2px solid var(--gold);
  text-decoration: none;
}

.loja-botao:hover,
.loja-botao:focus-visible { border-color: var(--gold-hi); }

.loja-botao:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.loja-glifo { width: 28px; height: 28px; flex: none; }

.loja-texto { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.loja-texto small { font-size: 0.7rem; letter-spacing: .08em; text-transform: uppercase; }
.loja-texto b { font-size: 1rem; }

.loja-botao--cinza {
  /* #911: a opacity .75 compunha com o texto e caia a 3,24-3,82:1. O "cinza que
     diz ainda nao" vem das CORES, que a guarda mede — opacidade nao e. */
  background: var(--paper-2);
  color: var(--muted);
  border-color: currentColor;
}

.loja-botao--cinza:hover,
.loja-botao--cinza:focus-visible { color: var(--ink); }

.lojas__nota { font-size: 0.8750rem; }

@media (forced-colors: active) {
  /* O alto contraste do sistema descarta background e cor declarados; sem isto os dois
     botões viram texto solto e o "cinza que diz ainda não" desaparece — o estado passa
     a estar só na cor, que é o que a WCAG 1.4.1 proíbe. O texto pequeno de cada botão
     ("Teste fechado" / "iPhone — ainda não") é quem carrega o estado sem cor. */
  .loja-botao { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .loja-glifo { forced-color-adjust: none; }
}

/* ── Baixar o EPUB ─────────────────────────────────────────────────────────────
   O único bloco da ficha que entrega algo AGORA: o app está em teste fechado e o
   áudio não toca na web, mas o livro em texto a pessoa leva no clique. Por isso ele
   ganha o desenho de bloco (paper-2 + filete dourado, a mesma língua de .note e
   .amostra-painel) enquanto a chamada do aplicativo continua como parágrafo solto —
   a hierarquia visual segue o que a página cumpre, não o que ela promete. */

.obra-cta--epub {
  margin: 22px 0;
  padding: 16px;
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
}

.obra-cta--epub h2 { margin-top: 0; }

.obra-epub__botao {
  display: inline-block;
  /* 44px de alvo (WCAG 2.5.5, AAA) e não os 24px do mínimo AA: é a ação principal da
     página, e boa parte do acervo é lida no telefone. */
  min-height: 44px;
  padding: 11px 20px;
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.obra-epub__botao:hover,
.obra-epub__botao:focus-visible {
  /* #911: ver .baixar__botao — o fundo fica, o sinal e a borda. */
  border-color: var(--gold-hi);
}

.obra-epub__botao:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.obra-epub__nota { font-size: 0.8750rem; margin-bottom: 0; }

@media (forced-colors: active) {
  /* No modo de alto contraste do sistema o navegador descarta background e border
     declarados; sem estas duas linhas o botão vira texto solto, indistinguível de um
     link comum. */
  .obra-epub__botao { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .obra-cta--epub { border-left-color: CanvasText; }
}

/* ── Índice do blog (/blog) ──────────────────────────────────────────────────── */

.posts { list-style: none; margin: 0; padding: 0; }

.posts__item {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--edge);
}

.posts__item:last-child { border-bottom: 0; }

/* Mesma medida da capa do acervo (124px): as duas listas ficam lado a lado na navegação e
   capa de tamanho diferente entre elas parece defeito de carregamento. */
.posts__item .cover { width: 124px; height: auto; border: 2px solid var(--edge); }

.posts__data {
  margin: 0 0 .25rem;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.posts__titulo { font-family: var(--fonte-corpo); margin: 0 0 .2rem; font-size: 1.1rem; } /* #909 */
.posts__autor { margin: 0 0 .5rem; font-size: .86rem; }
.posts__chamada { margin: 0 0 .5rem; }

/* Medido a 375 px: o link nu dava 207x16, alvo de 16 px de altura. A exceção "link em linha"
   do WCAG 2.5.8 cobre link dentro de prosa; este é chamada solta e única saída do item, então
   vale o alvo de verdade. `inline-flex` + min-height é o que dá altura a um <a> sem transformá-lo
   em botão nem mexer no fluxo do parágrafo. */
.posts__leia { margin: 0; font-size: .9rem; }

.posts__leia a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: .35rem;
}

@media (max-width: 30rem) {
  /* Abaixo disso a capa de 124px come metade da largura e a chamada quebra em 3 palavras
     por linha. Empilhar é melhor que encolher a capa até ela não dizer nada. */
  .posts__item { grid-template-columns: 1fr; }
  .posts__item .cover { width: 96px; }
}

/* ══ Preferências de leitura (2026-08-13) ═══════════════════════════════════
   Pedido do Murilo: "gostei do formato que eles usam" (menu de acessibilidade
   em grade), mas sem contratar ninguém e sem overlay de terceiro.

   A diferença que justifica escrever em vez de instalar: overlay tenta CONSERTAR
   a página por fora, adivinhando. Aqui não há adivinhação — cada botão liga um
   bloco desta folha, escrito por nós, sobre variáveis que já existem. E o site
   continua inteiro sem JS: quem tem preferência no sistema operacional já é
   atendido pelos @media abaixo, que não dependem de botão nenhum.

   Convenção: cada preferência é um atributo em <html>, como o tema já faz
   (`data-tema`). Zero/ausente = padrão. */

/* ── Tamanho do texto ──────────────────────────────────────────────────────
   Escala a raiz; como o CSS inteiro está em rem, tudo acompanha. Foi preciso
   antes converter os três `font:` que ainda tinham px — o corpo era um deles,
   e sem isso este controle não moveria a leitura, só a moldura. */
:root[data-a11y-texto="1"] { font-size: 112.5%; }
:root[data-a11y-texto="2"] { font-size: 125%; }
:root[data-a11y-texto="3"] { font-size: 150%; }

/* ── Entrelinha ────────────────────────────────────────────────────────────
   Em <body> e não em `*`: line-height herda, e forçar em todo elemento
   esmaga botão e barra de título, que são caixas de uma linha por desenho. */
:root[data-a11y-entrelinha="1"] body { line-height: 1.9; }
:root[data-a11y-entrelinha="2"] body { line-height: 2.3; }

/* ── Espaçamento de texto ──────────────────────────────────────────────────
   Os valores são os do WCAG 2.2 critério 1.4.12, deliberadamente: 0.12em entre
   letras, 0.16em entre palavras, 2em entre parágrafos.
   ⚠ Oferecer o botão NÃO cumpre o 1.4.12 — o critério mede a página aguentar o
   espaçamento aplicado POR FORA, por extensão ou folha de estilo do visitante.
   Este controle é conveniência; o teste de conformidade continua sendo o de fora. */
:root[data-a11y-espacamento="1"] p,
:root[data-a11y-espacamento="1"] li,
:root[data-a11y-espacamento="1"] dd,
:root[data-a11y-espacamento="1"] figcaption {
  letter-spacing: .12em;
  word-spacing: .16em;
}
:root[data-a11y-espacamento="1"] p { margin-bottom: 2em; }

/* Segundo degrau, e ele NÃO é "o dobro porque sim". Zorzi et al. (2012, PNAS)
   mediram leitura de crianças disléxicas italianas e francesas com texto em
   Times-Roman de 14 pt e entreletra aumentada em 2,5 pt — ou seja ~0,18 em — e
   registraram melhora imediata, sem treino, porque a dificuldade é de aglomeração
   (crowding) e o espaço a alivia. Eles também aumentaram espaço entre palavras e
   entrelinha para manter a proporção, que é o que a última regra faz aqui.
   Os 0,12 em do degrau anterior são o mínimo do WCAG, não o valor com evidência. */
:root[data-a11y-espacamento="2"] p,
:root[data-a11y-espacamento="2"] li,
:root[data-a11y-espacamento="2"] dd,
:root[data-a11y-espacamento="2"] figcaption {
  letter-spacing: .18em;
  word-spacing: .24em;
}
:root[data-a11y-espacamento="2"] p { margin-bottom: 2em; }
:root[data-a11y-espacamento="2"] body { line-height: 2; }

/* ── Destacar links ────────────────────────────────────────────────────────
   Sublinhado E contorno: cor sozinha não distingue link para quem não separa
   matiz (WCAG 1.4.1 — não usar cor como único meio). */
:root[data-a11y-links="1"] a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 700;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

/* ── Menos movimento ───────────────────────────────────────────────────────
   Espelha o que `prefers-reduced-motion` já faz, para quem não configurou o
   sistema mas quer o efeito aqui. */
:root[data-a11y-movimento="1"] *,
:root[data-a11y-movimento="1"] *::before,
:root[data-a11y-movimento="1"] *::after {
  scroll-behavior: auto !important;
  transition: none !important;
  animation: none !important;
}

/* ── Fonte mais legível ────────────────────────────────────────────────────
   O site inteiro é monoespaçado — é a identidade dele, e monoespaçado é
   justamente o que trava leitor com dificuldade de decodificação. Trocamos por
   uma pilha de fontes do SISTEMA: zero download, zero requisição, nada de novo
   no CSP. Fonte específica para dislexia (OpenDyslexic, Atkinson Hyperlegible)
   exigiria hospedar arquivo e conferir licença — fica para depois, declarado.

   ⚠ A REDEFINIÇÃO DAS VARIÁVEIS É O QUE FAZ ISTO FUNCIONAR. Desde que o site
   ganhou fonte pixel, quem liga este botão precisa perder o pixel TAMBÉM na
   moldura, no título e na chamada — pixel é ainda pior de decodificar que
   monoespaçado. Zerar as três variáveis aqui cobre todo mundo que as usa, hoje
   e amanhã: quem criar um elemento novo com `var(--fonte-moldura)` já nasce
   coberto, sem precisar lembrar de voltar aqui. Só quem NÃO usa variável
   (button, select, input, e a marca, que é presa à mono de propósito) precisa
   aparecer na lista explícita abaixo. */
:root[data-a11y-fonte="1"] {
  --fonte-corpo: Verdana, "DejaVu Sans", Tahoma, "Segoe UI", system-ui, sans-serif;
  --fonte-titulo: Verdana, "DejaVu Sans", Tahoma, "Segoe UI", system-ui, sans-serif;
  --fonte-moldura: Verdana, "DejaVu Sans", Tahoma, "Segoe UI", system-ui, sans-serif;
}

:root[data-a11y-fonte="1"] body,
:root[data-a11y-fonte="1"] button,
:root[data-a11y-fonte="1"] select,
:root[data-a11y-fonte="1"] input,
:root[data-a11y-fonte="1"] .wordmark,
:root[data-a11y-fonte="1"] .hero-wordmark,
:root[data-a11y-fonte="1"] .wordmark-under,
:root[data-a11y-fonte="1"] .wordmark-story {
  font-family: Verdana, "DejaVu Sans", Tahoma, "Segoe UI", system-ui, sans-serif;
}

/* ── Contraste alto ────────────────────────────────────────────────────────
   ⚠ ESTE BLOCO É GÊMEO do `@media (prefers-contrast: more)` lá em cima. CSS não
   deixa dar dois gatilhos à mesma regra (media query não entra em lista de
   seletores), então a duplicação é obrigatória — e por isso existe uma guarda em
   `web/__tests__/preferencias-de-leitura.test.js` que reprova se os dois blocos
   declararem variáveis diferentes. Mexeu num, mexe no outro. */
:root[data-a11y-contraste="1"] {
  --paper: #ecebe6;
  --paper-2: #f4f3ef;
  --paper-hi: #ffffff;
  --ink: #000000;
  --caption: #1a1a1a;
  --link: #273122;
  --gold-hi: #fefaf0;
}

:root[data-a11y-contraste="1"][data-tema="claro"] {
  --ground: #ffffff;
  --ink: #000000;
  --caption: #1a1a1a;
  --link: #273122;
}

:root[data-a11y-contraste="1"] .capa-botao[data-amostra="0"] { opacity: 1; }
:root[data-a11y-contraste="1"] .palpite__botao { border-width: 3px; }
:root[data-a11y-contraste="1"] .fontes__nota { font-style: normal; font-weight: 600; }

/* ── O painel ──────────────────────────────────────────────────────────────
   Gramática de janela, como o resto do site: barra de título + corpo de papel.
   Não é modal — é uma gaveta que abre no fluxo, então não prende foco nem
   esconde a página atrás de véu. Preferência não é decisão urgente. */
.a11y {
  width: min(860px, 100%);
  margin: 0 auto 14px;
}

.a11y__abrir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 10px;
  border: 2px solid var(--edge);
  background: var(--toggle-bg);
  color: var(--toggle-text);
  font: 700 0.6875rem/1 ui-monospace, "Courier New", monospace;
  letter-spacing: .08em;
  cursor: pointer;
}

.a11y__abrir[aria-expanded="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

.a11y__painel {
  margin-top: 8px;
  border: 2px solid var(--edge);
  background: var(--paper);
  color: var(--ink);
}

.a11y__painel[hidden] { display: none; }

.a11y__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: var(--title-bg);
  color: var(--title-text);
  font: 700 0.6875rem/1.4 ui-monospace, "Courier New", monospace;
  letter-spacing: .08em;
}

.a11y__corpo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.a11y__grupo {
  padding: 10px;
  background: var(--paper-2);
}

.a11y__rotulo {
  display: block;
  margin-bottom: 8px;
  font: 700 0.75rem/1.3 ui-monospace, "Courier New", monospace;
  letter-spacing: .04em;
}

.a11y__opcoes { display: flex; flex-wrap: wrap; gap: 6px; }

.a11y__opcoes button {
  min-height: 44px;
  min-width: 44px;
  padding: 6px 12px;
  border: 2px solid var(--edge);
  background: var(--paper-hi);
  color: var(--ink);
  font: 700 0.75rem/1 ui-monospace, "Courier New", monospace;
  cursor: pointer;
}

.a11y__opcoes button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

.a11y__rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0 12px 12px;
  font-size: 0.75rem;
}

.a11y__limpar {
  min-height: 44px;
  padding: 6px 12px;
  border: 2px solid var(--edge);
  background: var(--paper-hi);
  color: var(--ink);
  font: 700 0.75rem/1 ui-monospace, "Courier New", monospace;
  cursor: pointer;
}

@media (max-width: 34rem) {
  /* Duas colunas a 375px dão cartão de 150px, e "Espaçamento do texto" quebra
     em três linhas dentro do rótulo. Uma coluna é mais longa e legível. */
  .a11y__corpo { grid-template-columns: 1fr; }
}

@media (forced-colors: active) {
  .a11y__painel,
  .a11y__opcoes button { border-color: CanvasText; }
  .a11y__opcoes button[aria-pressed="true"] { border-color: Highlight; border-width: 3px; }
}

/* ══ Menu lateral de links recomendados (2026-08-13) ════════════════════════
   Pedido do Murilo: o site e o blog compartilham um menu lateral, e ele linka os
   lugares de onde tiramos texto, dado e bibliografia.

   Por que HTML e não construído em JS como o painel de acessibilidade: o painel
   serve quem já está na página; o menu existe para ser SEGUIDO e INDEXADO. Link
   que nasce em JS não é nem uma coisa nem outra para quem chega de buscador ou
   navega sem script.

   Layout: abaixo de 75rem o menu é um bloco no fim do conteúdo — é onde ele faz
   sentido num telefone, depois do que a pessoa veio ler. A partir de 75rem vira
   coluna à direita, grudada, e a coluna de leitura mantém a medida de sempre. */
.lateral {
  margin: 22px 0;
  color: var(--ink);
}

/* Cada bloco do lateral é uma JANELA como as demais do site — a moldura vem do
   .win; aqui só o respiro entre janelas e o miolo delas. */
.lateral > .win { margin: 0 0 22px; }
.lateral .win .body { padding: 14px 16px; }

.lateral__lista { margin: 0; padding: 0; list-style: none; }
.lateral__lista li { margin: 0; }

.lateral__lista a {
  display: block;
  /* 44px de alvo sem virar botão: preenchimento vertical num elemento de bloco.
     13px e não 11 — com 11 o alvo media 40-41px, medido, e o WCAG 2.5.8 pede 44. */
  padding: 13px 0;
  color: var(--link);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lateral__lista li + li a { border-top: 1px solid var(--paper-2); }
.lateral__para {
  /* Dentro do <a>, não ao lado: o alvo passa a cobrir nome + rótulo, e a legenda
     deixa de ser texto solto que o leitor de tela anuncia desconectado do link. */
  display: block;
  margin-top: 2px;
  color: var(--caption);
  font-size: 0.6875rem;
  letter-spacing: .04em;
  text-decoration: none;
}


@media (min-width: 75rem) {
  /* O envelope é que vira grade, não o <main> — porque `main` não tem o mesmo papel em
     todas as páginas: na home ele É a janela (`main.win`), nas outras é o invólucro
     (`main.wrap`). Envolver funciona nos dois casos sem a página precisar saber.
     A primeira versão punha o menu ANTES de `</main>`, e na home ele foi parar dentro
     da moldura da janela. Marcador uniforme não garante papel uniforme. */
  .com-lateral {
    display: grid;
    /* A coluna de leitura mantém os 53.75rem (860px) de sempre; a PÁGINA é que
       alarga para caber a lateral de 17rem ao lado. A versão anterior abria a
       grade dentro do .wrap de 860px e espremia o conteúdo. */
    grid-template-columns: minmax(0, 53.75rem) 17rem;
    gap: 22px;
    align-items: start;
    width: min(73.5rem, 100%);
    margin: 0 auto;
  }
  .com-lateral > .lateral { position: sticky; top: 16px; }
}

@media (forced-colors: active) {
  .lateral .win { border-color: CanvasText; }
}

/* ── Menu de navegação da home — dentro da janela UNDERSTORY.EXE LITERARY_OS,
   entre a barra de título e a logo. Só existe na home (decisão de 2026-08-13:
   "somente na home; esse padrão depois vai para o blog"). Carimbado por
   pipeline/src/menu-lateral.py. */
.navmenu { margin: 0 0 26px; }

.navmenu__titulo {
  margin: 0 0 10px;
  font-size: 0.6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--caption);
}

.navmenu__botoes { display: flex; flex-wrap: wrap; gap: 8px; }

.navmenu__botao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--edge);
  background: var(--paper-2);
  color: var(--ink);
  font: 700 0.75rem/1 ui-monospace, "Courier New", monospace;
  letter-spacing: .06em;
  text-decoration: none;
}

.navmenu__botao:hover { background: var(--paper-hi); color: var(--ink); }

.navmenu__botao[aria-current="page"] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 2px 2px 0 var(--edge);
}

/* Na home — a única página com a lateral — os controles do topo alinham com a
   página alargada, não com a coluna de 860px (ver .com-lateral). Sem :has()
   nada muda: ficam nos 860px de sempre, que é o comportamento das demais. */
body:has(.com-lateral) .theme-toggle,
body:has(.com-lateral) .a11y { width: min(76rem, 100%); }

.a11y__icone { flex: 0 0 auto; }

/* ── Prosa própria da página agregadora ────────────────────────────────────────
   As 90 páginas de autor e coleção nasceram repetindo a sinopse que já está na
   ficha e no /acervo — a mesma frase em quatro lugares. Este bloco é o que a
   página tem de SEU: a prosa sobre o autor, que já existia no catálogo e só
   aparecia na ficha da obra. Desenho de citação, não de aviso: é conteúdo
   editorial, não alerta. */
.agregadora__ensaio {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
}

.agregadora__ensaio p { margin: 0; max-width: 68ch; }

/* Aviso de publicação que falhou, no painel. Vermelho e no topo da fila de trabalho: é a
   única coisa da tela que significa "o que você fez não chegou ao site". */
.publicacao-falhou { border-left-color: #b3261e; }
.publicacao-falhou p { margin: 8px 0; }
.publicacao-falhou__log {
  margin: 8px 0;
  padding: 10px;
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, .18);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ── O TEXTO DA OBRA NA PRÓPRIA PÁGINA ────────────────────────────────────────────────
 *
 * 19/08: 16 impressões no Search Console, ZERO cliques. As buscas eram `navio negreiro
 * resumo` e `conto de machado de assis o espelho` — gente atrás do texto, chegando numa
 * página de 173 palavras. Este bloco é a resposta: quem veio ler, lê aqui.
 *
 * Serifada e maior que o resto do site de propósito. A interface é monoespaçada porque a
 * marca é essa, mas ninguém lê um conto de 3.400 palavras em monoespaçada. */
.obra-texto {
  margin: 26px 0;
  padding: 20px 20px 4px;
  background: var(--paper-2);
  border-left: 3px solid var(--moss);
}
.obra-texto h2 { margin-top: 0; }
.obra-texto__nota {
  font-size: 0.8125rem;
  color: var(--caption);
  margin-bottom: 18px;
}
.obra-texto p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 38em;
}
.obra-texto h3 {
  font-size: 0.8750rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 26px 0 12px;
}
.obra-texto h3:first-of-type { margin-top: 0; }

/* Verso: cada linha é um <p> próprio, então o espaçamento de parágrafo separaria versos
 * que pertencem à mesma estrofe. `white-space: pre-wrap` não serve — a quebra já veio
 * feita, e o que falta é só não afastar as linhas. */
.obra-texto--verso p {
  margin: 0;
  line-height: 1.65;
}
.obra-texto--verso p:first-of-type { margin-top: 0; }

@media (forced-colors: active) {
  .obra-texto { border-left-color: CanvasText; }
}

/* A síntese da página agregadora — o parágrafo derivado do catálogo e do disco.
 *
 * Search Console, 21/08: 4 das 6 buscas que acharam o site eram de autor ou coleção, e as
 * páginas que apareciam tinham mediana de 150 palavras. O cartão já dava a lista; o que
 * faltava era o que só a página do autor pode dizer — de quando até quando, o que se repete,
 * e o que dá para levar hoje. */
.agregadora__sintese {
  background: var(--paper-2);
  border-left: 3px solid var(--amber);
  padding: 14px 16px;
  margin: 0 0 22px;
  max-width: 62ch;
}
.agregadora__sintese strong { color: var(--ink); }

@media (forced-colors: active) {
  .agregadora__sintese { border-left-color: CanvasText; }
}