/* ── 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: #0d1220;
  --frame: #1c2740;
  --edge: #080b14;
  --accent: #35597a;
  --accent-hi: #4a7aa0;
  --gold: #6fa8c9;
  --gold-hi: #8ec4e0;
  --paper: #c9ba9c;
  --paper-2: #d8c8a0;
  --paper-hi: #ded0b2;
  --ink: #0c0a08;
  --muted: #33465c;
  --caption: #33465c;
  --page-a: #1c2740;
  --page-b: #0d1220;
  --page-c: #080b14;
  --title-bg: #1c2740;
  --title-text: #8ec4e0;
  --title-sub: #c9ba9c;
  --body-text: #0c0a08;
  --outside-text: #ded0b2;
  --brand-under: #ded0b2;
  --brand-story: #8ec4e0;
  --on-accent: #fdf2e2;
  --bark-text: #ded0b2;
  --link: #2b4a68;
  --footer-bg: #080b14;
  --footer-text: #c9ba9c;
  --toggle-bg: #1c2740;
  --toggle-text: #8ec4e0;
  --scan: rgba(12, 10, 8, .22);
  --shadow: rgba(12, 10, 8, .58);

  /* Aliases kept for the inline illustrations and the preserved page content. */
  --soil: #0d1220;
  --soil-2: #080b14;
  --bark: #1c2740;
  --moss: #35597a;
  --moss-hi: #4a7aa0;
  --fern: #ded0b2;
  --amber: #6fa8c9;
  --amber-hi: #8ec4e0;
  --slot: #0d1220;
  --slot-ink: #1c2740;
}

:root[data-tema="claro"] {
  color-scheme: light;
  --ground: #d9dfe8;
  --frame: #c3ccd9;
  --edge: #0c0a08;
  --accent: #35597a;
  --accent-hi: #4a7aa0;
  --gold: #6fa8c9;
  --gold-hi: #8ec4e0;
  --paper: #fdf2e2;
  --paper-2: #e8d8c0;
  --paper-hi: #fdf2e2;
  --ink: #0c0a08;
  --muted: #33465c;
  --caption: #33465c;
  --page-a: #e0e6ee;
  --page-b: #d9dfe8;
  --page-c: #c3ccd9;
  --title-bg: #35597a;
  --title-text: #b8ddef;
  --title-sub: #ded0b2;
  --body-text: #0c0a08;
  --outside-text: #0c0a08;
  --brand-under: #ded0b2;
  --brand-story: #b8ddef;
  --on-accent: #fdf2e2;
  --bark-text: #0c0a08;
  --link: #35597a;
  --footer-bg: #1c2740;
  --footer-text: #ded0b2;
  --toggle-bg: #fdf2e2;
  --toggle-text: #0c0a08;
  --scan: rgba(12, 10, 8, .09);
  --shadow: rgba(12, 10, 8, .35);

  --soil: #35597a;
  --soil-2: #1c2740;
  --bark: #c3ccd9;
  --moss: #35597a;
  --moss-hi: #4a7aa0;
  --fern: #ded0b2;
  --amber: #6fa8c9;
  --amber-hi: #8ec4e0;
  --slot: #1c2740;
  --slot-ink: #35597a;
}

* { 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;
}

a:hover { color: var(--link); }

a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--gold-hi);
  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: 34px;
  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;
  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;
}

/* 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); }

.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);
}

.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(--gold-hi); }

/* 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) !important;
  color: var(--body-text);
  text-align: center;
}

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

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

.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; }
.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); }

@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(--gold-hi); 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; }

.acervo-lista {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 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 {
  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; }
}

/* ── 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: #16304a;
    --gold-hi: #cfe8f7;
  }

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

  /* 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(--gold-hi);
  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 { background: var(--accent-hi); }
.waitlist__botao:focus-visible { outline: 3px solid var(--gold-hi); 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);
  /* E-mail longo não pode empurrar a tabela para fora da tela. */
  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; }

@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(--gold-hi);
  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; }
}

/* ── Í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 { margin: 0 0 .2rem; font-size: 1.1rem; }
.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: #16304a;
  --gold-hi: #cfe8f7;
}

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

: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: 34px;
  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;
  border: 2px solid var(--edge);
  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__grupo,
  .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; }