/*
  ══════════════════════════════════════════════════════════════════════════════════════
  O CORPO DO ARTIGO — a MESMA folha na página publicada e dentro do editor.

  ── POR QUE ELA SAIU DO `blog.css` (11/08/2026) ─────────────────────────────────────

  A tipografia do artigo vivia em dois lugares: aqui, para quem lê, e em
  `simple-editor.scss`, para quem escreve. Os números já não batiam — 17,5px contra 17px de
  corpo, 28px contra 30px no h2 — e quem escrevia via um texto que não era o que ia sair.

  Ordem do dono, 11/08/2026: *"fontes usadas, Montserrat e Gazpacho, devidamente configuradas
  no Tiptap para agilizar e formatar corretamente desde a escrita"*. Formatar corretamente
  desde a escrita exige que a escrita e a leitura leiam a mesma régua.

  ── COMO OS DOIS LADOS A RECEBEM ────────────────────────────────────────────────────

  · a página do blog: `<link rel="stylesheet" href="/artigo.css">` no layout público;
  · o console: a mesma `<link>` no `admin.html`, e o conteúdo do Tiptap carrega a classe
    `rb-texto` junto com `simple-editor`.

  É o mesmo canal do `/blocos.css`: uma URL, servida pelo Vite em desenvolvimento e pelo Nginx
  em produção. O PHP não precisa abrir arquivo nenhum de `app/` — que é bom, porque em
  desenvolvimento ele não consegue.

  Nenhum hex: quem muda a marca muda `brandTokens.js`, e o build reprova se `/tokens.css`
  divergir.
  ══════════════════════════════════════════════════════════════════════════════════════
*/

/*
  A MEDIDA DE LEITURA MANDA no corpo do texto.

  65 caracteres é o que o olho acompanha sem perder a linha. Quem limita a medida é o
  contêiner (`.rb-artigo` na página, o próprio editor no console) — aqui fica a régua do texto.
*/
.rb-texto {
  font-family: var(--revolu-font);
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--revolu-text);
}

.rb-texto p { margin: 0 0 var(--revolu-space-6); }

.rb-texto h2,
.rb-texto h3,
.rb-texto h4 {
  font-family: var(--revolu-font-display);
  color: var(--revolu-text);
  line-height: 1.2;
  margin: var(--revolu-space-12) 0 var(--revolu-space-3);
}

.rb-texto h2 { font-size: 28px; }
.rb-texto h3 { font-size: 22px; }
.rb-texto h4 { font-size: 18px; }

.rb-texto a { color: var(--revolu-primary); }

/*
  A IMAGEM DO CORPO VEM DENTRO DE `<figure>` — e sem esta regra valia a margem do navegador
  (1em 40px): toda foto entrava recuada 40px de cada lado, mais estreita que o texto. O oposto
  do que a medida de leitura defende, e ninguém recebia erro por isso.
*/
.rb-texto figure {
  margin: var(--revolu-space-8) 0;
}

.rb-texto img {
  max-width: 100%;
  height: auto;
  border-radius: var(--revolu-radius-md);
  display: block;
}

/* A legenda, quando o renderizador aprender a emiti-la: menor, suave, colada na foto. */
.rb-texto figcaption {
  margin-top: var(--revolu-space-2);
  color: var(--revolu-text-muted);
  font-size: 13.5px;
  text-align: center;
}

.rb-texto ul,
.rb-texto ol { margin: 0 0 var(--revolu-space-6); padding-left: var(--revolu-space-6); }

.rb-texto li { margin-bottom: var(--revolu-space-2); }

.rb-texto blockquote {
  margin: var(--revolu-space-8) 0;
  padding-left: var(--revolu-space-4);
  border-left: 3px solid var(--revolu-secondary);
  color: var(--revolu-text-soft);
}

.rb-texto hr {
  border: 0;
  border-top: 1px solid var(--revolu-border);
  margin: var(--revolu-space-12) 0;
}