/* ==========================================================================
   Tema ddallagnol (Ecclesia) — folha de estilo nativa
   Todos os valores numéricos são medidos do original; a autoridade é
   referencias/TOKENS.md. Não inventar valor: medir, depois escrever aqui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonte (self-hosted, variável — cobre 100..900 num único arquivo)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/themes/ddallagnol/fonts/jost-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/themes/ddallagnol/fonts/jost-latin-var-italic.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Semânticos (light) — fontes: <style id="jinko-custom-css-vars"> da página
     viva, NÃO os defaults de :root do jinko/style.css (o site sobrescreve
     primária, botões, rodapé, bordas, larguras e raios). */
  --dd-body-background: #ffffff;
  --dd-body-font-color: #131315;
  --dd-link-color: #355c7d;
  --dd-link-hover-color: #f67280;
  --dd-meta-color: #94979e;
  /* `--default-border-color` (style.css:240 claro / 5001 escuro, **46 consumidores
     no oráculo** — frisa do header, pílulas da trilha, contorno de tag, borda do
     arquivo). O site NUNCA o sobrescreve nos dois `<style>` impressos. O que o
     site sobrescreve é `--header-border-color` (rgba(19,19,21,0.08) claro /
     rgba(255,255,255,0.08) escuro) — token **morto**: os 2 únicos usos em todo o
     corpus congelado estão comentados (`boost.css:841` e `:854`), e a frisa do
     header vem de `.site-header{border-bottom:1px solid var(--default-border-color)}`
     (style.css:1139-1140). Portar o valor sobrescrito para a frisa = borda 2,5×
     mais fraca no escuro. */
  --dd-border-color: rgba(0, 0, 0, 0.08);
  --dd-header-background: #ffffff;
  --dd-header-color: #131315;
  /* style.css:230. As bandas de ≤1199 (1rem), ≤1060 (16px) e ≤600 (14px) do
     original não têm efeito neste tema: abaixo de 1200px o `#primary-menu`
     some junto com `.site-header-inner` e quem fala é a `.mobile-header`. */
  --dd-primary-menu-font-size: 1.125rem;
  --dd-footer-background: #fafafa;
  --dd-footer-color: #131315;
  --dd-entry-title-color: #131315;
  --dd-post-background: #ffffff;
  --dd-accent: #c06c84;
  --dd-accent-foreground: #ffffff;
  --dd-accent-hover: #f67280;
  --dd-widget-color: #94979e;
  --dd-widget-title-color: #131315;
  /* style.css:217 `--input-background: var(--white)`; cor do texto medida no
     input vivo da busca: #44464b (dark-grey do fabricante). */
  --dd-input-background: #ffffff;
  --dd-input-color: #44464b;
  /* style.css:241 `--default-highlight-background` — hover de chip/tag/fechar. */
  --dd-highlight: rgba(0, 0, 0, 0.04);

  /* Medidos no site vivo (getComputedStyle no <body>): --widget-link-padding
     0.625rem 0. O `--global-inner-elements-margin` (28 consumidores no oráculo)
     NÃO é fixo: `style.css:208` = **3.125rem**, e `style.css:5243-5248` o reescreve
     para `calc(var(--post-margin))` (= 1.6667rem) em `@media (max-width:1060px)`.
     A medição de 13/10 devolveu 26,67px porque o browser integrado está a 591px —
     ou seja, mediu a banda ≤1060 e foi lida como base. Valor corrigido acima da
     linha; o `@media (max-width:1060px)` desta folha devolve o mesmo 1.6667rem,
     então o que renderiza a ≤1060 não muda. */
  --dd-widget-link-padding: 0.625rem 0;
  /* Fila (vii), 14/10 — o censo reverso achou a caixa de link da LISTA do widget
     não portada: `style.css:4299-4306` põe padding, peso e corpo no `<a>` do `li`
     (não no `li`). Valores: `--widget-font-size` = 1,125rem (`style.css:231`) e
     `--widget-link-font-weight` = 600 (`:235`); `--widget-link-color` só existe no
     `<style>` impresso do customizer (`#131315` claro / `#ffffff` escuro) e tem
     fallback `var(--black)` no oráculo — o valor claro medido é o mesmo, então a
     base abaixo é o valor do inline, não o fallback. */
  --dd-widget-font-size: 1.125rem;
  --dd-widget-link-font-weight: 600;
  --dd-widget-link-color: #131315;
  --dd-inner-elements-margin: 3.125rem;

  /* Tipografia */
  --dd-body-font: 'Jost', Arial, Helvetica, sans-serif;
  --dd-title-font: 'Jost', Arial, Helvetica, sans-serif;
  --dd-body-font-size: 1.125rem;
  --dd-h1: 3.7rem;
  --dd-h2: 2.25rem;
  --dd-h3: 1.75rem;
  --dd-h4: 1.5rem;
  --dd-h5: 1.25rem;
  --dd-h6: 1.1rem;
  --dd-heading-weight: 700;
  /* Título do card da listagem. Correção medida em 13/10 (Fase 4): o valor
     anterior (1.5rem) era um chute herdado de `.post-navigation.list`, não do
     card. O original tem cascata responsiva real (ver seção 13): 1.625rem no
     desktop com sidebar, 1.875rem entre 768 e 1060px, 1.625rem entre 600 e
     768px, 1.875rem em mobile-grid até 480px, e 1.5rem só abaixo de 380px.
     style.css:146-158, 255-258, 5045, 5141, 5250, 5448, 5704-5708, 5874, 5945. */
  --dd-entry-title-size: 1.625rem;
  --dd-entry-title-weight: 600;
  --dd-entry-title-tracking: -0.05rem;
  --dd-entry-meta-size: 0.9375rem;

  /* Títulos de widget (boost.css:34-36) — NÃO têm override responsivo no
     original, então ficam fixos em todo viewport. Reusar --dd-h4/--dd-entry-title-size
     invertia a hierarquia: a linha de 1.25rem saía maior que o líder de 1.5rem. */
  --dd-widget-lead-title-size: 1.5rem;
  --dd-widget-row-title-size: 1.25rem;

  /* Layout */
  /* Fila (vii), 14/10 — `--site-width` é TOKEN DISTINCTO de `--site-max-width`:
     o customizer inline (`home.html`, bloco de 2 139 B) define os dois com
     `1400px`, mas só `--site-max-width` tem degraus nas bandas (1 140 em ≤1360,
     `style.css:5041`; 960 em ≤1199, `:5124`; 800 em ≤1060, `:5245`).
     `--sidebar-width` (`style.css:97`) lê o **1400 fixo**, então a barra lateral
     vale (1400 − 3 × 2,5rem) / 4 = 320px e NÃO encolhe com a banda. */
  --dd-site-width: 1400px;
  --dd-sidebar-width: calc((var(--dd-site-width) - (var(--dd-flex-gap) * 3)) / 4);
  --dd-site-max-width: 1400px;
  --dd-large-mobile-max-width: 960px;
  --dd-small-desktop-max-width: 1140px; /* style.css:57 */
  --dd-content-max-width: 800px;
  --dd-post-margin: 2.5rem;
  /* `style.css:121-122` — os dois tokens de margem das bandas pequenas são
     DECLARADOS NA BASE (`:root`) e resolvem contra o `--post-margin` de base:
     2,5rem / 1,5 = 1,6667rem. É essa a mecânica que permite ao oráculo reescrever
     `--post-margin` em `body` (`:5128`) sem ciclar, e é por isso que ele precisa
     re-declarar `--wrap-inner-flex-gap` (`:5126`) e os `--cols-*-flex-basis`
     (`:5130-5131`) na mesma banda — os tokens de `:root` já descem congelados. */
  --dd-large-mobile-post-margin: calc(var(--dd-post-margin) / 1.5);
  --dd-mobile-post-margin: calc(var(--dd-post-margin) / 1.5);
  /* style.css:60 `--wrapper-side-gutter: calc(var(--post-margin))` — o oráculo o
     reescreve **uma única vez**, em `body` na banda ≤640, para `25px`
     (`style.css:5548`). A banda está no §13.3; o valor 1.25rem que estava lá era
     invenção (fila (vi), 14/10). */
  --dd-side-gutter: var(--dd-post-margin);
  --dd-flex-gap: var(--dd-post-margin);
  --dd-elements-margin: 3.125rem;
  /* Valor de BASE. O oráculo cai para `calc(--post-margin * 1.5)` = 2.5rem em
     `@media (max-width:1060px)` (`style.css:5247`); o degrau está no §13. */
  --dd-header-flex-gap: 28px;
  --dd-custom-logo-width-mobile: 90px;
  --dd-custom-logo-width-small-mobile: 70px;
  --dd-entry-wrapper-flex-gap: 1.25rem;
  --dd-card-padding: 1.875rem;
  /* Cadeia de `--cols-*-flex-basis` (style.css:103-105). Fila (vii), 14/10 — o
     oráculo tem DEGRAUS por banda e um deles é **escopado**: `.has-sidebar main`
     reescreve `--cols-3-flex-basis := --cols-2` em ≤1360 (`:5048-5049`), enquanto
     `body` reescreve `--cols-4 := --cols-3` na mesma banda (`:5043`). Como o
     `home` do site É `.has-sidebar` (medido nos 8 HTMLs congelados), a listagem
     base de 3 colunas vira 2 colunas já em ≤1360 — não em ≤1060 como o tema
     tinha. Os degraus estão no §13. */
  --dd-cols-4-flex-basis: calc(100% / 4 - ((var(--dd-post-margin) * 3) / 4));
  --dd-cols-3-flex-basis: calc(100% / 3 - ((var(--dd-post-margin) * 2) / 3));
  --dd-cols-2-flex-basis: calc(100% / 2 - (var(--dd-post-margin) / 2));
  --dd-avatar-width: 40px;
  --dd-entry-meta-flex-gap: 0.3125rem;
  /* style.css:169/172 — `--category-meta-font-size` (1rem) e `--entry-meta-separator`
     ("·") têm definição ÚNICA na base e zero degraus de banda (medido: 1 `--token:`
     cada um nos dois oráculos), então descem congelados para qualquer largura. O
     separador é portado como token, não como literal, porque a cascata do oráculo o
     sobrescreve por `content: none` em quatro seletor — ver §12. */
  --dd-category-meta-font-size: 1rem;
  --dd-entry-meta-separator: "\22C5";

  /* Forma */
  --dd-radius: 8px;
  --dd-thumbnail-radius: 10px;
  --dd-button-radius: 8px;
  --dd-button-padding: 0.9375rem 1.25rem;

  /* Fundo do card rosé "Olá, Tudo bem?" e das variações de destaque — medido
     como `--wp--preset--color--light-dark-highlight: #f2f2f2` no `<style>`
     impresso pela página (home.html:94), NÃO é uma cor de marca inventada. O
     original não tem override dessa cor no bloco dark — ela fica #f2f2f2 nos
     dois modos; replicado como medido, não "corrigido". */
  --dd-highlight-background: #f2f2f2;

  /* Capa do CTA de doação (D-22, fila (ix)): as duas atribuições inline medidas no
     vivo, `style="color:#ffffff"` no wrapper e `style="background-color:#a9a2c7"` no
     véu (o congelado ainda punha o `#000` default porque o placeholder do
     fabricante não tinha cor inline). São valores do customizer impressos igual no
     claro e no escuro ⇒ vivem só na base, sem override no bloco escuro. */
  --dd-donate-cover-color: #ffffff;
  --dd-donate-cover-veil-color: #a9a2c7;

  /* Tokens do post individual (Fase 5) — todos medidos do par de `<style>`
     impresso pela página (`home.html:127-193` claro / `:195+` escuro) e das
     linhas de style.css/boost.css citadas na seção 14. */
  /* style.css:195 `--content-width: calc(100% - (var(--post-margin)*2))` — a
     coluna de texto dos filhos de `.entry-content` dentro do cap de 800px. Na
     banda ≤640 o oráculo **troca a fórmula** para o gutter (`style.css:5549`
     `calc(100% - (var(--wrapper-side-gutter)*2))` = 100% − 50px); replicado no
     §13.3. */
  --dd-content-width: calc(100% - (var(--dd-post-margin) * 2));
  /* style.css:206 (1.375rem; cai para 1.25rem em **≤640px**, `style.css:5546`
     dentro do bloco que abre em `:5543`). CORREÇÃO (fila (vi)): o override
     estava portado na banda ≤600 — nos 601–640px o corpo do post saía 1.375rem
     onde o oráculo já tinha caído para 1.25rem. Sem override no site; também
     não há override de `--single-entry-meta-font-size` (2520), então a meta do
     header do post usa o fallback de 1rem medido. */
  --dd-single-entry-font-size: 1.375rem;
  --dd-single-entry-meta-font-size: 1rem;
  /* style.css:223 `--default-content-margin` — respiro entre blocos de
     conteúdo, listas e aspas. */
  --dd-content-margin: 1.5rem;
  /* `--entry-color` (conteúdo): #131315 claro / #ffffff escuro — NÃO é o
     --dd-body-font-color (escuro #cfd0d2). */
  --dd-entry-color: #131315;
  --dd-entry-link-color: #355c7d;
  --dd-entry-link-hover-color: #f67280;
  /* `--entry-meta-link-color` (158/226): texto cru de 13,13,15 → 255,255,255. */
  --dd-meta-link-color: #131315;
  /* `--tags-background` (172) e `--category-meta-color` (157). Sem override no
     bloco escuro medido — tags continuam brancas nos dois modos, como no
     original (replicado, não "corrigido"); categoria herda o azul/branco do
     link nos dois modos. O oráculo declara `--tags-color:
     var(--entry-meta-link-color)` (`style.css:238`) e `--tags-font-size`
     (`:239`), mas nenhum leitor os consome (grep em `style.css` + `boost.css`:
     só `--tags-background` é lido, em `:3851`) ⇒ o chip usa
     `--dd-meta-link-color` direto e os tokens mortos não são portados. */
  --dd-tag-background: #ffffff;
  --dd-category-meta-color: #355c7d;
  /* Fallbacks de `var(--primary-theme-color)` em marcadores de lista e na
     barra do blockquote (355c7d → da4453). */
  --dd-primary-theme: #355c7d;
  /* style.css:198 `--thumbnail-hero-padding: 40%` — a razão do hero do post.
     CORREÇÃO (fila (vi), 14/10): o token tem 7 redefinições responsivas no
     oráculo e **uma delas é em `body`**, banda ≤640 (`style.css:5545` →
     `var(--thumbnail-wide-padding)` = 56,25%). As outras 6 (`:5262/5269/5272`
     ≤1060, `:5455` ≤768, `:5614` ≤600, `:5878` ≤480) estão em `.cover-wrapper`
     /`.post-grid`, que o tema não imprime ⇒ mortas. O hero do post é 40% acima
     de 640 e 56,25% abaixo — a banda está no §13.3. */
  --dd-thumbnail-hero-padding: 40%;
  /* style.css:199-200 — as duas razões do card (fila (v)): `thumbnail-wide`
     (índice) e `thumbnail-landscape` (arquivos/busca). Nenhum `@media` as
     redefine em `body`: 56,25% e 66,75% valem nos 3 viewports. */
  --dd-thumbnail-wide-padding: 56.25%;
  --dd-thumbnail-landscape-padding: 66.75%;
  /* style.css:175/177 — corpo do excerpt do card. O token base é 1.25rem, mas o
     grid de 3 colunas o derruba para 1.125rem (style.css:2338-2341) e não há
     redefinição responsiva dele em `--cols-3-excerpt-font-size`. */
  --dd-excerpt-font-size: 1.25rem;
  --dd-cols-3-excerpt-font-size: 1.125rem;
  /* `--tertiary-theme-color:#f8b195` aparece IGUAL nos dois blocos medidos de
     `autor.html` (claro linha 132, escuro linha 200) — por isso não há
     sobreposição aqui. É a cor do nickname do autor (style.css:2682). */
  --dd-tertiary-theme-color: #f8b195;
  /* style.css:139. O site não o redefine no bloco escuro (0 ocorrências de
     `--post-box-shadow` em autor.html/home.html) — a sombra do avatar do autor
     é a mesma nos dois modos, replicada como medido. */
  --dd-post-box-shadow: 0 0 20px rgba(0, 0, 0, 0.07);

  /* Cabeçalho de arquivo (Fase 6) — medidos do par de <style> impresso pela
     página: claro `--archive-header-color:#131315` /
     `--archive-header-meta-color:#94979e` (cat-sacramentos.html:148-149),
     escuro `#ffffff` / `#cfd0d2` (:216-217). Não há
     `--archive-header-background` definido em lugar nenhum — o
     `background: var(--archive-header-background)` do fabricante resolve para
     nada (herda o fundo do site); não portamos regra fantasma. */
  --dd-archive-header-color: #131315;
  --dd-archive-header-meta-color: #94979e;

  --dd-header-height: 59px;
}

/* Modo escuro — medido do <style id="tfm-dark-theme-css"> da página viva
   (ver referencias/TOKENS.md). Não é paleta inventada. */
body[data-color-mode='dark'] {
  --dd-body-background: #31253f;          /* rgb(49,37,63) */
  --dd-body-font-color: #cfd0d2;
  --dd-link-color: #ffffff;
  --dd-link-hover-color: #cfd0d2;
  --dd-meta-color: #cfd0d2;
  --dd-border-color: rgba(255, 255, 255, 0.2);
  /* style.css:4992/5005 — no escuro o fundo do chip de tag deixa de ser branco e
     passa a ser o próprio highlight (rgba(255,255,255,0.06)). Os dois `<style>`
     impressos só definem `--tags-background:#ffffff` no bloco CLARO; o valor
     escuro mora no mecanismo de dark mode do oráculo, não na personalização do
     site — por isso ele não aparece ali. */
  --dd-tag-background: var(--dd-highlight);
  --dd-header-background: #31253f;
  --dd-header-color: #ffffff;
  --dd-footer-background: #321d2f;
  --dd-footer-color: #ffffff;
  --dd-entry-title-color: #ffffff;
  --dd-post-background: #321d2f;
  --dd-accent: #4c5f7a;
  --dd-accent-foreground: #ffffff;
  --dd-accent-hover: #393E6F;
  --dd-widget-color: #94979e;
  --dd-widget-title-color: #ffffff;
  /* O par de `--widget-link-color` no `<style>` escuro medido é `#ffffff`
     (mesmo valor de `--widget-title-color`); sem esta linha o link da lista do
     widget ficaria #131315 sobre fundo escuro. */
  --dd-widget-link-color: #ffffff;
  /* style.css:4990-4991/5003-5004 — no escuro o input deixa de ser branco e
     passa a ser branco a 6% sobre o fundo, com texto branco. */
  --dd-input-background: rgba(255, 255, 255, 0.06);
  --dd-input-color: #ffffff;
  --dd-highlight: rgba(255, 255, 255, 0.06);

  /* Sobrepostos do bloco escuro medido (`home.html:195+`). `--tags-color` e
     `--tags-font-size` são **mortos no oráculo** (0 consumidores em `style.css`
     e `boost.css`, medido) — não têm equivalente aqui. O fundo do chip de tag tem
     override escuro, sim: `--tags-background` no bloco de dark mode (linha acima). */
  --dd-entry-color: #ffffff;
  --dd-entry-link-color: #da4453;
  --dd-entry-link-hover-color: #f8b195;
  --dd-meta-link-color: #ffffff;
  --dd-category-meta-color: #ffffff;
  --dd-primary-theme: #da4453;
  /* Arquivo (Fase 6): `--archive-header-color:#ffffff` e
     `--archive-header-meta-color:#cfd0d2` no bloco escuro das capturas
     (cat-sacramentos.html:216-217). */
  --dd-archive-header-color: #ffffff;
  --dd-archive-header-meta-color: #cfd0d2;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* `normalize.css:12` — é a ÚNICA altura de linha global do oráculo. O `body`
   (`style.css:289-299`) não declara `line-height`, então 1,15 desce por herança
   **unitless** e cada elemento a recalcula sobre o próprio `font-size` (por isso
   o `.prev-next` de 15px dá 17,25px e não 20,7px). A folha tinha `1.7` no `body`
   — número que não existe em nenhuma das três folhas nem no `<style>` do
   customizer (`grep line-height: 1.7` = 0 ocorrências no corpus) — e ele inchava
   toda linha de texto que não é `<p>` nem heading. */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--dd-body-background);
  color: var(--dd-body-font-color);
  font-family: var(--dd-body-font);
  font-size: var(--dd-body-font-size);
  -webkit-font-smoothing: antialiased;
}

/* Base de cabeçalhos — `style.css:369-387` (0-0-1). Correção medida na fila (vii):
   a folha tinha `line-height:1.2` e `margin:0 0 0.6em` inventados; o oráculo dá
   `margin: var(--heading-margin)` = **1.5rem 0** (`:224`) e
   `line-height: var(--heading-line-heght, 1.25)` — o token tem o erro de grafia
   (`heght`) e **0 definições** no corpus, então vale o fallback 1,25. O
   `letter-spacing` também é fallback: `--heading-letter-spacing` não é definido
   em nenhuma das três folhas nem no `<style>` em linha do customizer ⇒
   `-0.0625rem`. O peso vem de `--heading-font-weight: 700` (`:72`). */
h1, h2, h3, h4, h5, h6 {
  font-feature-settings: "lnum";
  font-variant-numeric: lining-nums;
  font-family: var(--dd-title-font);
  font-weight: var(--dd-heading-weight);
  letter-spacing: -0.0625rem;
  line-height: 1.25;
  margin: 1.5rem 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* `style.css:389-424`: h1 tem linha própria (1.138888889, fallback de
   `--h1-line-height`, que não é definido) e h4/h5/h6 trocam o tracking. */
h1 { font-size: var(--dd-h1); line-height: 1.138888889; }
h2 { font-size: var(--dd-h2); }
h3 { font-size: var(--dd-h3); }
h4 { font-size: var(--dd-h4); letter-spacing: -0.046875rem; }
h5 { font-size: var(--dd-h5); letter-spacing: -0.040625rem; }
h6 { font-size: var(--dd-h6); letter-spacing: -0.040625rem; }

/* `style.css:425-428`: os dois tokens têm fallback no próprio `var()`
   (`--default-line-height` e `--paragraph-margin` não são definidos em parte
   alguma do corpus nem no `<style>` em linha) ⇒ linha 1,5 e `0 0 1em 0`. A folha
   tinha `1.4em` inventado. */
p { line-height: 1.5; margin: 0 0 1em 0; }

a {
  color: var(--dd-link-color);
  /* Longhand, não o shorthand: `text-decoration: none` resetaria a cor do
     sublinhado que .entry-title a instala no hover. */
  text-decoration-line: none;
}
a:hover,
a:focus { color: var(--dd-link-hover-color); }

img {
  max-width: 100%;
  height: auto;
  border-style: none;
}

ul, ol { padding-left: 1.25rem; }

/* style.css:545-548 — o oráculo declara `li` **global**, não por superfície:
   `line-height: 1.5` e margem com fallback (o token `--list-item-margin` tem 0
   definições no corpus). A folha só portava isso dentro de `.entry-content`, o
   que deixava `li` de widget/menu/menu-offcanvas com a linha do corpo: medido no
   oráculo, `.widget ul li` tem `line-height` 27px (18 × 1,5) e no tema era
   20,7px ⇒ 6px por linha a menos em toda lista lateral e de rodapé. As
   supressões do próprio oráculo (`.widget > ul > li { margin: 0 }`,
   `:4291-4296`) já estão portadas, então a regra global entra sem empurrar
   margem onde ele a zera. */
li {
  line-height: 1.5;
  margin: 0 0 0.5rem 1rem;
}

/* --------------------------------------------------------------------------
   4. Utilitários
   -------------------------------------------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* O original (`common.min.css`, inline) usa `clip-path: inset(50%)` + `word-break`
   e acrescenta `.screen-reader-text:focus{…z-index:100000}`. Medido no congelado:
   os 144 portadores da classe são **140 `span` + 4 `h2`** — nenhum é focável e
   nenhuma âncora a contém ⇒ o bloco `:focus` é morto por projeto neste site e não
   é portado; os dois `clip` escondem igual. */

.faux-heading { margin: 0; font-size: inherit; font-weight: inherit; }
/* Utilitários de alinhamento de texto do bloco. Dupla procedência medida:
   · `common.min.css` do core, impresso INLINE no `<head>`
     (`<style id="wp-block-library-inline-css">`, 4274 B) — `:root .has-text-align-{center,
     left,right}` **sem** `!important`;
   · `gutenberg.css:123-127` (folha do tema, chega DEPOIS das inline) — reforça
     `left` e `right` com `!important`; `center` não tem refino do tema.
   CORREÇÃO da afirmação antiga (fila (vii)): a folha dizia que o site carregava
   "só 5 folhas, nenhuma delas o style.min.css do core". O censo do `<head>` dá 17
   `<style>` core/inline (1302 `wp-block-library` 4274 B · 5625 archives · 5857 button
   · 8555 categories · 9020 cover · 29473 heading · 30779 latest-comments · 32220
   latest-posts · 34600 paragraph · 35400 buttons · 36936 search · 39515 group ·
   39769 spacer · 39937 classic-theme-styles · 40341 global-styles 13294 B · 53682
   dominant-color) ANTES das 6 `<link>` (53880 boost, 54047 normalize, 54195 fontello,
   56102 style, 56247 gutenberg, 57610 custom-css-vars) — o que continua verdade é que
   nenhuma folha core separada (`style.min.css`) é linkada. Consequência prática: folha
   do tema vence empate de especificidade, mas `!important` do tema também vence o
   `:root` core por posição + força.
   Consumidores no conteúdo migrado (censo REST 14/10): **10 `<p>`** com
   `has-text-align-center`; `left`/`right` com **zero** ocorrências — portados mesmo
   assim, porque a 8.3 não limpa esta família (a lista do checklist é `wp-block-*`,
   `alignwide`, `size-*`, `wp-image-*`). */
:root .has-text-align-center { text-align: center; }
:root .has-text-align-left { text-align: left !important; }
:root .has-text-align-right { text-align: right !important; }

/* Troca de logo por estado: cada variante marca em qual estado ela desaparece.
   A regra de display vive aqui (e não em `.site-logo img`) porque qualquer
   seletor de elemento+classe concorrente anulava o swap. */
.hidden-dark-theme,
.hidden-light-theme { display: block; }
.hidden-light-theme { display: none; }

body[data-color-mode='dark'] .hidden-light-theme { display: block; }
body[data-color-mode='dark'] .hidden-dark-theme { display: none; }

/* --------------------------------------------------------------------------
   5. Contêiner
   -------------------------------------------------------------------------- */
.wrap {
  margin: auto;
  position: relative;
  padding: var(--dd-elements-margin) var(--dd-side-gutter) var(--dd-post-margin);
}

.wrap-inner {
  max-width: var(--dd-site-max-width);
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dd-flex-gap);
  min-height: calc(100vh - 380px);
}

/* `style.css:356-360` — o `<main>` do oráculo é `display:block` com
   `flex-basis:100%` e `width:100%`; não `flex:1 1 0` (invenção removida na
   fila (vii)). Quem abre espaço para a barra lateral é a banda ≥1061 abaixo,
   não um `flex-grow`. `main > *:not(#primary){margin-bottom:--wrap-inner-flex-gap}`
   (`:366-368`) é o ritmo dos blocos internos e vem portado junto. */
main {
  display: block;
  flex-basis: 100%;
  width: 100%;
}
main > *:not(#primary) { margin-bottom: var(--dd-flex-gap); }

/* `style.css:1086-1094` — a barra lateral é COLUNA flex com `gap:--post-margin`,
   `flex-basis:--sidebar-width`, `flex-shrink:1` e `position:relative` (a frisa de
   ≤1060 ancora nela). O tema tinha `.sidebar{flex:0 0 calc((100% - gap*3)/4)}` —
   fórmula de 1/4 do contentor (não do `--site-width`), `flex-shrink:0` e sem
   coluna/gap.
   Fila (vii), 14/10 — a regra original tem ainda `margin-bottom:calc(var(
   --global-elements-margin)*2)` (`:1088`), e esse token **não é definido em lugar
   nenhum**: censo de `--global-elements-margin:` em `style.css`, `boost.css`,
   `gutenberg.css`, `fontello.css`, `normalize.css` e nos 8 HTMLs congelados dá
   **zero definições** contra 10 usos. Sem valor computado a declaração é inválida
   no tempo de computação e a propriedade cai no valor inicial (`margin-bottom:0`).
   Não se "conserta" o que no site real é um não-operador; os outros cinco usos do
   mesmo token (`:873`, `:1381`, `:3486`, `:4064`, `boost.css:2603`) são mortos
   pelas mesmas razões. */
.aside-sidebar {
  flex-basis: var(--dd-sidebar-width);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dd-post-margin);
  flex-shrink: 1;
}
/* `style.css:1095-1100` — a ÚNICA coisa que abre espaço para a barra lateral: em
   ≥1061, dentro de `body.has-sidebar`, o `main` deixa de ocupar 100% e passa a
   `100% - (--sidebar-width + --wrap-inner-flex-gap)`. Especificidade 0-1-1 contra
   o `main` nu de cima (0-0-1); sem `has-sidebar` no `<body>` a regra não casa e a
   listagem renderiza em coluna única com a barra empurrada para baixo — foi o
   estado medido antes da fila (vii). O oráculo não prefixa com `body`, e o
   prefixo elevaria a especificidade para 0-1-2, mudando quem ganha em `:5285`. */
@media (min-width: 1061px) {
  .has-sidebar main {
    flex-basis: calc(100% - (var(--dd-sidebar-width) + var(--dd-flex-gap)));
    max-width: calc(100% - (var(--dd-sidebar-width) + var(--dd-flex-gap)));
  }
}
/* `style.css:1101-1106` — `<main class="… has-pagination …">` é irmão direto do
   `<aside>` (medido em `home.html`); a banda extra de 40px compensa a altura da
   paginação. Duas regras idênticas no oráculo; uma chega. */
.has-pagination + .aside-sidebar {
  padding-bottom: calc(var(--dd-inner-elements-margin) + var(--dd-post-margin) + 40px);
}
/* `style.css:4242-4253` — os widgets da barra têm canto arredondado e perdem a
   margem externa no primeiro e no último. As duas variantes irmãs do oráculo
   (`.toggle-sidebar`, `.after-content-sidebar`) não são portadas: nenhum dos dois
   classes sai no meu DOM — a gaveta mobile é só navegação (`.nav-drawer`, sem
   `.widget`) e o tema não renderiza área depois do conteúdo (medido nos 7 HTMLs
   de `/tmp/dd7_*`: `aside-sidebar=1` nas cinco listagens, `0` no post e no 404). */
.aside-sidebar .widget { border-radius: var(--dd-radius); }
.aside-sidebar .widget:first-child { margin-top: 0; }
.aside-sidebar .widget:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  padding: 0 var(--dd-side-gutter);
  border-bottom: 1px solid var(--dd-border-color);
  color: var(--dd-header-color);
  background: var(--dd-header-background);
}

/* Fase 10b — sticky behavior (1:1 do oráculo). O oráculo usa JS para adicionar
   `.fixed` quando scrollY > threshold; quando `.fixed` está presente:
   - `.header-branding` (linha 1: sociais/logo/categorias) fica oculta
   - só `.site-header-inner` (linha 2: menu) permanece visível
   - fundo translúcido com backdrop-filter
   - position: fixed no topo */
.site-header.fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3000;
  backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, 0.8);
}
.site-header.fixed .header-branding {
  display: none;
}
.site-header.fixed .site-header-inner {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: none;
}
/* Dark mode: fundo translúcido escuro */
body[data-color-mode="dark"] .site-header.fixed {
  background: rgba(0, 0, 0, 0.4);
}

/* Linha 1: sociais à esquerda, logo ao centro, categorias à direita */
.header-branding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dd-header-flex-gap);
  width: 100%;
  max-width: var(--dd-site-max-width);
  margin: auto;
  padding: 0.625rem 0;
}

/* style.css:1317-1331 — as duas seções do header são `flex: 1`, cada uma com o
   próprio `justify-content`. É ESSE `flex:1` simétrico o mecanismo que centra a
   logo em relação à PÁGINA: as duas sobras são iguais, então o item do meio cai
   no centro da janela qualquer que seja a largura do conteúdo de cada lado. A
   versão anterior tinha `flex: 0 0 auto` aqui e `flex: 1 1 auto` na `.site-logo`,
   que inverte o papel — quem esticava era a logo, e ela se centrava na sobra
   ENTRE as seções (feedback 2: "centralizada com base nos itens à sua
   esquerda/direita, e não à página"). */
.header-section {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.75rem;
}
.header-section.header-left { justify-content: flex-start; }
.header-section.header-right { justify-content: flex-end; }
/* style.css:1266-1268 — no cabeçalho mobile só a seção DIREITA cresce; o
   hambúrguer volta a `flex: 0` e a logo, sem esticar, fica colada nele. Medido
   em vw 547: oráculo `header-left` 34px, `.site-logo` 160px, `header-right`
   271px (a sobra toda), com os dois toggles encostados à direita. */
.site-header .mobile-header .header-left { flex: 0; }

.site-logo {
  /* `style.css:1215-1219` — os três valores abaixo são da regra do oráculo e
     faltavam na folha. `font-size:0` é o que esconde o texto do logo (por isso o
     `h1.site-logo` mede 0px ao vivo); `margin:0` é o que permite ao branding
     frontal ser um `<h1>` sem herdar `margin: 1.5rem 0` do bloco global de
     cabeçalhos (§3, `--heading-margin`). Saíram daqui `display:flex`,
     `align-items`, `justify-content:center` e `flex:1 1 auto`, que não existem na
     folha do fabricante: a caixa da logo é do conteúdo e o centro vem das
     `.header-section`. */
  margin: 0;
  font-size: 0;
  text-align: center;
}
.site-logo a { display: inline-block; }
/* `#wp-custom-css` das 9 capturas (48 bytes, idênticos em todas): o CSS
   adicional do site é UMA regra. `style.css:1236` declara `.custom-logo { }`
   vazio, então este `min-width` é o único autor da caixa. Efeito medido por
   aritmética de css-sizing: em ≤1060 ele **vence** o
   `max-width: var(--dd-custom-logo-width-mobile)` do §13 (min-width tem
   precedência sobre max-width), logo o logo mobile vale 160px, não 90px —
   comportamento real do original, replicado, não "corrigido". */
.custom-logo { min-width: 160px !important; }
/* O display das variantes de logo pertence às utilitárias .hidden-*-theme:
   uma regra aqui (0,1,1) as venceria por especificidade e os dois logos apareceriam juntos. */

/* Linha 2: hambúrguer, menu primário, toggles */
.site-header-inner {
  width: 100%;
  border-top: 1px solid var(--dd-border-color);
}

.header-layout-wrapper {
  max-width: var(--dd-site-max-width);
  margin: auto;
}

.primary-menu-container {
  display: flex;
  align-items: center;
  gap: var(--dd-header-flex-gap);
  min-height: var(--dd-header-height);
}

.primary-menu-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.primary-menu-section.section-right { margin-left: auto; }

.primary-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  font-size: var(--dd-primary-menu-font-size);
}
.primary-menu > li {
  margin: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
}
.primary-menu > li > a {
  display: flex;
  align-items: center;
  color: var(--dd-header-color);
  font-size: inherit;
  font-weight: 500;
  padding: 11px;
  border-radius: var(--dd-button-radius);
}
.primary-menu > li > a:hover,
.primary-menu > li > a:focus,
.primary-menu > li.current-menu-item > a {
  background: var(--dd-highlight);
}
/* Os itens do menu do original são CATEGORIAS de WordPress, e esses têm outro
   estado: contorno interno em vez de chip (style.css:1797-1808, medido vivo em
   /author/ecclesia/ — `outline: 2px solid transparent`, offset -2px; no estado
   `2px solid` na cor do texto, sem background). `menu-item-category` é gancho
   local do tema, não o vocabulário `menu-item-object-*` do WP. */
.primary-menu > li.menu-item-category > a {
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.primary-menu > li.menu-item-category > a:hover,
.primary-menu > li.menu-item-category > a:focus,
.primary-menu > li.menu-item-category.current-menu-item > a {
  outline: 2px solid;
}
/* style.css:1635-1638 — o rótulo do link é um flex item (é por isso que o ícone
   que vier depois fica centrado na linha de texto) e opacidade transitada. Sem
   esta regra o `<span class="menu-label">` do meu markup renderiza como inline
   e qualquer filho seu escapa do alinhamento. As quatro regras de *caret* do
   mesmo bloco (1606-1626, 6061) NÃO são portadas: a âncora é
   `li.menu-item-has-children > a .menu-label::after`, e `menu-item-has-children`
   tem 0 ocorrências nos 9 HTML do oráculo (menu sem submenu congelado) — ramo
   inerte por dado, e com ele morre a dependência do glifo `fontello \e812`. */
.primary-menu .menu-label {
  display: flex;
  transition: opacity 0.3s ease;
}

/* Menu secundário (barra de categorias da linha 1). No original ele NÃO é uma
   lista própria: o `<ul>` é `class="primary-menu header-secondary"` — uma
   SEGUNDA instância do menu primário — então herda caixa do link (flex, padding
   11px, raio 8px), `gap: 5px`, `font-size: var(--primary-menu-font-size)` e o
   chip/contorno de estado. Medido vivo em /category/formacao/: os DOIS itens
   "Formação" (secundário 494 e primário 2377) têm `current-menu-item`,
   `aria-current="page"`, `background rgba(0,0,0,.04)` e `outline 2px solid
   rgb(19,19,21)`. O que `.header-secondary` acrescenta é só a marcha entre
   itens (style.css:1816-1822: `margin-left: .625rem`, primeiro 0).
   `.mobile-header` também carrega este `<ul>`, mas
   `.mobile-header .header-secondary li{display:none}` (style.css:1272) esconde
   todos os itens — a nossa gaveta mobile sem a barra é visualmente equivalente. */
.header-secondary > li {
  margin-left: 0.625rem;
}
.header-secondary > li:first-child {
  margin-left: 0;
}

/* Ícones de ação do header.
   Cascata medida em `style.css:1391-1418`, regra `.site-header [class*="toggle"]`:
   contorno (não borda) de 1px em `--default-border-color` com `outline-offset:-1`
   sobre `border-radius:25px` num box de 34px = **círculo**. O box não tem
   background; o hover/pfocus pinta `--default-highlight-background`
   (`style.css:1400-1403`) e NÃO muda a cor do ícone — o `color:--dd-accent` que
   estava aqui era invenção. `--toggle-icon-color` (style.css:85) = `--header-color`,
   logo o ícone herda a cor do header. `font-size:1.125rem` (18px) é o tamanho do
   glifo fontello; com SVG inline o equivalente é o SVG em 18px, exceto o de menu,
   que `style.css:1415-1418` aumenta para 22px. */
.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  outline: 1px solid var(--dd-border-color);
  outline-offset: -1px;
  border-radius: 25px;
  background: transparent;
  color: var(--dd-header-color);
  font-size: 1.125rem;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.2s ease;
}
.toggle svg { width: 18px; height: 18px; }
.toggle:hover,
.toggle:focus { background: var(--dd-highlight); }

/* `style.css:1404-1406`: o hambúrguer é o único toggle SEM contorno. */
.toggle.toggle-menu { outline: none; }
.toggle.toggle-menu svg { width: 22px; height: 22px; }

/* 10b.6 — um único ícone visível por estado, como no original, e o **estado é o
   do original**: `style.css:1423-1428` dá `\e80a` quando NÃO é escuro e `\e809`
   quando é. Mapeado pelo nome no `fontello.css` do próprio site (`:68-69`), não
   pela forma: `\e809` = `icon-sun-inv` e `\e80a` = `icon-moon-inv` ⇒ no claro o
   oráculo mostra a **LUA** (o glifo nomeia o destino do gesto, não o estado
   atual) e no escuro o sol. A folha tinha o par invertido — sol no claro —, que é
   o erro que o operador viu como "ícones fora do padrão": a geometria já batia
   (34×34, raio 25, contorno 1px/-1px, 18px) e só a troca de glifo divergia. */
.dd-ico-moon { display: block; }
.dd-ico-sun { display: none; }
body[data-color-mode='dark'] .dd-ico-moon { display: none; }
body[data-color-mode='dark'] .dd-ico-sun { display: block; }

/* Ícones sociais do header — boost.css:795-828 (caixa), 460-477 (variante
   `icon-background` + glifo branco) e 483/489/517 (fundo por marca).
   A caixa NÃO é círculo: é o quadrado arredondado de `--default-border-radius`
   com o FUNDO da marca e o glifo em branco. O invento anterior (32×32,
   `border-radius:50%`, fundo cinza #f2f2f3, gap 8px) não tem origem medida. */
.header-social .social-icons { gap: 0.3125rem; }                 /* :795-797 — ul sem `.icon` */
.header-social .social-icons .social-icon { margin: 0; }         /* :799-802 */
.header-social .social-icons .social-icon a {                    /* :804-817 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding-right: 0;
  font-size: 18px;
  color: var(--dd-header-color);
  border-color: var(--dd-header-color);
  transition: all 0.2s ease;
}
/* :822-828 (escopo do header) + :460-466 (raio/fundo da variante) — a segunda
   vitória de especificidade sobe a caixa para 34×34 e o glifo para 15px. */
.header-social .social-icons.icon-background .social-icon a {
  width: 34px;
  height: 34px;
  font-size: 15px;
  background: var(--dd-highlight);
  border-radius: var(--dd-radius);
}
/* :474-477 — com `.brand` o glifo é branco em toda rede exceto e-mail. Vence o
   `color:--header-color` acima, e é por isso que o header NÃO muda no escuro:
   as regras de dark mode do oráculo excluem o wrapper
   (`.tfm-social-icons-wrapper:not(.header-social)`, :433-439). */
.social-icons.icon-background.brand .social-icon:not(.social-icon-email) a { color: #ffffff; } /* `--white` (style.css:48) */
.social-icons.icon-background.brand .social-icon-twitterx a { background: #000000; }   /* :483 */
.social-icons.icon-background.brand .social-icon-facebook a { background: #3a589e; }   /* :489 */
.social-icons.icon-background.brand .social-icon-instagram a { background: #cd486b; }  /* :517 */
/* O glifo do oráculo é fontello com `font-size:15px` no header e `18px` na barra
   do post (`.tfm-social-icon` herda). Com SVG o tamanho é do desenho, então a
   caixa do ícone segue o mesmo par: 15px no header, 18px no post (§14.4). */
.header-social .social-icons svg { width: 15px; height: 15px; }

/* Cabeçalho mobile (uma linha: hambúrguer · logo · toggles).
   style.css:1256-1265 — a régua é do próprio bloco em todo lugar: `gap: 1rem`,
   `padding: 0.75rem 0` e `max-width: var(--site-max-width)`; a banda ≤1199 só
   liga o `display:flex` (:5170-5172) e põe `gap: 0.5rem` nos FILHOS
   (:5173-5175). A versão anterior aplicava ao container o `0.5rem` que é dos
   filhos e o respiro vertical pela metade. Medido em vw 547 com a mesma
   assinatura de DOM: oráculo `.mobile-header` 58px (12 + 34 + 12) contra 51 do
   tema, com os mesmos três filhos de 34px. O `max-width` segue
   `--dd-site-max-width` — a banda ≤1199 rebaixa o token para 960 e as menores
   reduzem de novo; um token fixo de 960 deixaria o bloco largo demais ≤640.
   O `margin: auto` é do tema, não do oráculo: lá o centro vem de
   `.site-header{flex-direction:column; align-items:center}` (:1145-1148), que
   aqui ainda não foi portado porque mexe na banda desktop (verificação em
   andamento na tarefa da logo). */
.mobile-header {
  display: none;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
  padding: 0.75rem 0;
  max-width: var(--dd-site-max-width);
}

/* --------------------------------------------------------------------------
   7. Drawer de navegação (menu off-canvas)
   -------------------------------------------------------------------------- */
.nav-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 3100;
  width: 95%;
  max-width: 420px;
  background: var(--dd-body-background);
  color: var(--dd-body-font-color);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  overflow-y: auto;
  overflow-x: hidden;
}
body.dd-nav-open .nav-drawer { transform: translateX(0); }

/* style.css:1130-1136 — TODO filho direto do drawer entra com a mesma caixa:
   `margin: 1.875rem` (30px), `display:block`, `width:auto`, `max-width:100%`.
   Medido no vivo (vw 547, drawer de 420px): oráculo `.widget` em x=30 com 360px
   de largura; o tema imprimia x=0 e 420px com `display:inline-block`, ou seja,
   título e linhas de "Categorias"/"Arquivos" colados nas bordas — o desalinho do
   feedback 4. As margens verticais de irmãos bloco COLAPSAM, e é isso que põe o
   primeiro widget em y=105 = 75 do header + 30 (nada de `gap` aqui). */
.nav-drawer > *,
.nav-drawer .widget {
  margin: 1.875rem;
  display: block;
  width: auto;
  max-width: 100%;
}

/* style.css:1862-1873 — o header do drawer é full-bleed: vem com
   `margin-left/right/top: 0` EXATAMENTE para desfazer o `1.875rem` da regra
   acima (só o `margin-bottom` fica, e é ele que abre os 30px até o primeiro
   bloco), `padding: 0.75rem 1.875rem` e borda inferior. */
.drawer-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1.875rem;
  margin-left: 0;
  padding: 0.75rem 1.875rem;
  border-bottom: 1px solid var(--dd-border-color);
  color: var(--dd-header-color);
}

/* style.css:1992-1994 — no drawer a logo leva `margin: 0.5rem 0`, o que faz o
   header inteiro medir 75px no oráculo (12 + 8 + 34 + 8 + 12 + 1 de borda)
   contra os 59px medidos aqui sem essas margens. */
.nav-drawer .site-logo.faux-heading { margin: 0.5rem 0; }

.drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* style.css:1889-1903 — o círculo do oráculo é um `::before` com `width/height:
     32px` e `border: 1px` em content-box, logo a caixa EXTERNA medida é 34×34
     (vivo: `.close-menu` 34x34 em x=356). Aqui o box-sizing global é border-box,
     então o 34 é o valor do `width`/`height`, não um acréscimo meu. */
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--dd-border-color);
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.drawer-close:hover { background: var(--dd-highlight); transform: rotate(90deg); }
.drawer-close .dd-ico { width: 16px; height: 16px; }

.drawer-menu {
  margin: 1.875rem;
  padding: 0;
  list-style: none;
  font-size: var(--dd-body-font-size);
}
.drawer-menu > li { margin: 0; padding: 0; line-height: normal; }
.drawer-menu > li > a {
  display: flex;
  align-items: center;
  margin: 0;
  padding: var(--dd-widget-link-padding);
  color: var(--dd-body-font-color);
  font-weight: 600;
  text-decoration: none;
}

/* gutenberg.css:582-597 — as listas de "Categorias" e "Arquivos" do drawer são
   blocos Gutenberg, não a família genérica de widget: o `<li>` fica com
   `position: relative` e o `<a>` ganha `align-items: center`. É exatamente esse
   `align-items` que faltava: medido no vivo, o oráculo centraliza o rótulo na
   linha de 47px (`.cat-item > a` com `ai center`) e o tema o deixava no topo da
   linha. Os seletores ficam em (0-1-2), como no oráculo, para PERDER as
   propriedades compartilhadas para `.widget ul li a` (0-1-3) — que é o que
   acontece lá, já que os dois só diferem no `align-items`. */
.category-list li,
.archive-list li { position: relative; }
.category-list li a,
.archive-list li a { align-items: center; }

/* O original (.body-fade, style.css:4576-4584) não escurece a página: o fundo
   é transparente e o único efeito é blur(100px). Um scrim preto seria invenção. */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 3050;
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
body.dd-nav-open .drawer-overlay { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   8. Painel de busca
   Medido em .site-search/.site-search-wrapper (style.css:1996-2035, 2057-2066)
   e no overlay aberto do site vivo: 591x693 (viewport inteiro), fundo
   transparente, backdrop blur(100px), wrapper central com gap de
   --global-inner-elements-margin e filhos limitados a 680px.
   -------------------------------------------------------------------------- */
.search-panel {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--dd-side-gutter);
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
body.dd-search-open .search-panel { opacity: 1; visibility: visible; }

.search-panel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dd-inner-elements-margin);
  width: 100%;
  max-width: 680px;
}

/* Feedback de 16/10 (2): o X do cabeçalho SAIU — o `.search-panel-header` com o
   seu `.search-panel-close` era a forma do oráculo (`.site-search .close-menu`,
   `style.css:2029-2040`), mas com o controle de estado de foco dentro da caixa
   passou a haver DOIS fechar na mesma tela. O painel fica com um só fechar — o
   glifo da caixa no estado focado — mais Escape e o clique fora da caixa
   (`assets/js/theme.js`). A regra e o markup saem juntos; o `gap` do wrapper não
   precisa mais do `margin-top` negativo que comia a faixa (não há 2º filho). */

/* Fase 10c.7 (fila `#14`, feedback 7 de 15/10): a caixa volta a ser UMA
   superfície. Antes o `.search-submit` era segmento IRMÃO do input — metade do
   fundo de um lado, metade do outro, emenda no meio — e o SVG do botão não
   casava nenhuma regra de tamanho (a folha tinha `.search-submit .dd-ico`, mas
   o layout imprimia o glifo sem a classe), então a lupa media **0×0**: o
   "botão" era um espaço em branco de 36px à direita. `position:absolute` aqui +
   `flex:1` no input põem o controle dentro da caixa, ancorado à direita, e a
   caixa inteira fica arredondada dos dois lados. */
.search-panel-inner {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 680px;
  /* Feedback de 16/10 (1): a caixa se confunde com o fundo. Em claro a causa é
   aritmética de cor: `--dd-input-background` é `#ffffff` (style.css:217) sobre
   uma página branca, e o painel do oráculo não pinta fundo — só
   `backdrop-filter: blur(100px)` — então a caixa é branca sobre branca, e a
   borda sozinha não resolve: a família de linha do fabricante é 0.08/0.07/0.05
   de preto (censo em `referencias/css` + `html`), que composta sobre branco dá
   ~#ebebeb, ou seja, 1,12:1 contra o fundo. O dispositivo que o oráculo USAVA
   para este exato caso é sombra, e são duas, ambas medidas: `0 0 35px
   rgba(0,0,0,0.1)` é a do próprio form de busca (`style.css:2045-2048`), que a
   portação anterior deixou para trás, e `0 0 10px rgba(0,0,0,0.2)`
   (`style.css:3051`) é a do selo que flutua sobre o card — o mesmo problema de
   "elemento solto sobre a superfície", com halo apertado que desenha a borda
   onde os 35px são difusos demais. A borda de 1px entra além delas porque no
   escuro sombra preta sobre `#31253f` não separa NADA, e lá quem faz o trabalho
   é o `--dd-border-color` escuro, já medido em `rgba(255,255,255,0.2)` — o
   mesmo peso de linha que veste a lista de sugestões (§8b), então caixa e lista
   ficam da mesma família nos dois modos. */
  border: 1px solid var(--dd-border-color);
  border-radius: var(--dd-radius);
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.1), 0 0 10px rgba(0, 0, 0, 0.2);
  /* Feedback de 16/10 (4): a caixa sobe para liberar tela para a lista. O
   valor é posto por `assets/js/theme.js` como `--dd-search-lift` (0px sem
   sugestões), por isso o bloco sobe GRADUALMENTE com o número de resultados em
   vez de dar um salto: a transição é a única coisa em movimento e ela não
   interfere no foco nem no clique. */
  transform: translateY(var(--dd-search-lift, 0px));
  transition: transform 0.24s ease;
}

.search-panel input[type='search'] {
  flex: 1 1 auto;
  min-width: 0;
  /* 56px = largura do botão; sem o reserve o texto entraria debaixo do glifo. */
  padding: 18px 56px 18px 18px;
  border: 0;
  /* -1px: quem porta a borda e o raio de fora agora é a caixa (§8 acima); sem
     isto o canto do input sai 1px por fora da borda e desenha um degrau. */
  border-radius: calc(var(--dd-radius) - 1px);
  background: var(--dd-input-background);
  color: var(--dd-input-color);
  font-family: var(--dd-body-font);
  font-size: 16px;
}
/* O `type=search` do Chrome/WebKit desenha o próprio "×" de limpar assim que o
   campo tem texto: duas cancelas na caixa e o glifo do foco atropelado. */
.search-panel input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.search-panel .search-submit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  padding: 0;
  border: 0;
  border-radius: 0 calc(var(--dd-radius) - 1px) calc(var(--dd-radius) - 1px) 0;
  background: none;
  color: var(--dd-input-color);
  font-size: var(--dd-body-font-size);
  cursor: pointer;
}
.search-panel .search-submit:hover,
.search-panel .search-submit:focus-visible {
  background: var(--dd-highlight);
}
.search-panel .search-submit .dd-ico { width: 18px; height: 18px; }
.search-panel input[type='search']:focus {
  outline: thin dotted;
  outline-offset: -4px;
}

/* Lupa fora de foco, fechar em foco — o estado é aplicado por
   `assets/js/theme.js` como `.is-focused` na caixa (não é `:focus-within`: o
   Chrome move o foco para o botão clicado e o Safari não, e o par de glifos
   teria de trocar no meio do clique num motor e no outro não). Mesma forma do
   par `.ico-share`/`.ico-cancel` do card (§12). */
.search-submit .ico-cancel { display: none; }
.search-panel-inner.is-focused .ico-search { display: none; }
.search-panel-inner.is-focused .ico-cancel { display: block; }

/* --------------------------------------------------------------------------
   8b. Autocomplete da caixa de pesquisa (fila `#14`)
   Superfície nova, sem oráculo (censo em `referencias/` = 3 `autocomplete`,
   todos autofill do formulário de comentário). É filho do `<form>` e ancorado
   a ele de propósito: o `.search-panel-wrapper` é uma coluna flex com
   `gap: var(--dd-inner-elements-margin)` (3.125rem = 50px na base), então como
   quarto filho a lista subiria uma faixa de 50px e descolaria da caixa.
   -------------------------------------------------------------------------- */
.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  /* O teto não é arbitrário. Antes (feedback 7 de 15/10) a caixa era fixa no
   centro, então o livre abaixo dela era ~(100vh − 59px)/2 e o teto tinha de ser
   `50vh − 4,5rem` — medido em viewport de 693px, as 6 sugestões (312px) já
   sangravam. Com a caixa que sobe (feedback 16/10, item 4) quem é centralizado
   é o BLOCO caixa+lista, e a conta deixa de ser a metade de baixo: o bloco cabe
   em `100vh` menos a caixa e dois respiros. `10rem` = 64px de caixa + 2×32px,
   e como a elevação é `((altura da lista) + 6)/2` a fórmula é auto-consistente
   — no limite, as duas margens saem 46px, nunca menos de 32.
   380px, e não os 320 originais, por medição: 6 itens de `min-height:44px` são
   276px, mas na banda estreita um título quebra em duas linhas (59px) e a lista
   inteira medida deu **324px de conteúdo contra 318 de caixa** — ou seja, o teto
   velho deixava a 6ª sugestão cortada e o painel com barra de rolagem interna
   para nada. 380 cobre 6 itens com título quebrado (pior caso ~368px). */
  max-height: min(380px, calc(100vh - 10rem));
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--dd-border-color);
  border-radius: var(--dd-radius);
  background: var(--dd-post-background);
  color: var(--dd-input-color);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
.search-suggestions li {
  display: flex;
  align-items: center;
  /* 44px = alvo de toque mínimo (WCAG 2.5.5); o glifo do card não entra aqui. */
  min-height: 44px;
  padding: 8px 12px;
  border-radius: calc(var(--dd-radius) - 2px);
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
}
.search-suggestions li:hover { background: var(--dd-highlight); }
.search-suggestions li.is-active {
  background: var(--dd-highlight);
  box-shadow: inset 0 0 0 1px var(--dd-border-color);
}


/* --------------------------------------------------------------------------
   9. Botões
   -------------------------------------------------------------------------- */
.dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--dd-button-padding);
  border: 0;
  border-radius: var(--dd-button-radius);
  background: var(--dd-accent);
  color: var(--dd-accent-foreground);
  font-family: var(--dd-body-font);
  font-size: var(--dd-body-font-size);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
/* O `color` repetido no hover/foco não é redundância: `a:hover, a:focus` (:397,
   especificidade 0-1-1) vence o `color` de `.dd-btn` (0-1-0), e no light
   `--dd-link-hover-color` é o MESMO `#f67280` de `--dd-accent-hover` — sem a
   declaração o texto some no fundo. Por isso `.goto-top` (:1357) e
   `.widget-search .search-button` (:2582) já fazem o par. */
.dd-btn:hover,
.dd-btn:focus {
  text-decoration: none;
  background: var(--dd-accent-hover);
  color: var(--dd-accent-foreground);
}

/* --------------------------------------------------------------------------
   10. Footer
   Cascata auditada regra a regra em 14/10 contra `style.css:3978-4009`. O
   oráculo **não** põe padding vertical no `<footer>`: a frisa é
   `border-top:1px solid --default-border-color`, o respiro acima é
   `margin-top:--global-primary-elements-margin` (aqui `--dd-elements-margin`) e
   o respiro interno é `padding:--global-inner-elements-margin 0` no
   `.site-footer-inner` (o tema chama `.footer-inner`; o nome não é portado porque
   nenhuma regra do site depende dele). O que estava aqui era `padding:
   3.125rem lateral 1.5rem` — a mesma quantia no topo, **sem frisa, sem
   `margin-top`** e com um pé de 1.5rem que não existe no oráculo.
   Inertes e por isso não portados: `gap`/`align-items:center` do inner (só um
   filho — `.footer-bottom`, `.footer-copyright`, `.footer-nav` e `.footer-logo`
   têm **0** ocorrências nas 8 capturas), `order:10` do `.footer-columns`,
   `border-radius:--default-border-radius` do inner (sem fundo nem borda).
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 0 var(--dd-side-gutter);
  margin-top: var(--dd-elements-margin);
  background: var(--dd-footer-background);
  border-top: 1px solid var(--dd-border-color);
  color: var(--dd-footer-color);
}
.site-footer a { color: var(--dd-footer-color); }

.footer-inner {
  width: 100%;
  max-width: var(--dd-site-max-width);
  margin: auto;
  padding: var(--dd-inner-elements-margin) 0;
}

.footer-columns { display: flex; flex-wrap: wrap; gap: var(--dd-post-margin); width: 100%; }
/* `style.css:4008-4011` — a coluna de rodapé lê o token `--cols-4-flex-basis`,
   não uma fórmula escrita à mão (o tema tinha `flex:1 1 calc(100%/4 - …)`, que dá
   o mesmo valor na base e **quebra nas bandas** porque o token tem degrau em
   `body` (`:5041`) e a regra escopada `.cols-4 .footer-column` chega em ≤1360
   (`:5056`). `flex-grow:1` é declarado separadamente no oráculo. */
.footer-column { flex-basis: var(--dd-cols-4-flex-basis); flex-grow: 1; }

/* 10b.8 — seção "Docendo Discimus" no footer. O oráculo tem o widget Mailchimp
   com esse título; a D-07 não migra o formulário, mas o operador quer a área
   visível. Caixa simples: título + texto, centralizados, com o mesmo respiro
   do resto do footer. */
.footer-docendo {
  /* 16/10 — só o respiro de TOPO. O bloco inteiro é decisão (D-07 não migra o
     Mailchimp), mas o respiro de baixo não precisa ser: `.footer-inner` já fecha
     o rodapé com `padding: --dd-inner-elements-margin 0` medido do oráculo
     (`style.css:3996-4001`), e somar os dois era o que abria o vazio no fim da
     página que o operador apontou. */
  text-align: center;
  margin-top: var(--dd-post-margin);
  padding-top: var(--dd-inner-elements-margin);
  border-top: 1px solid var(--dd-border-color);
}
.footer-docendo-title {
  /* O oráculo imprime esta caixa como `<h2 class="widgettitle">` dentro de
     `.tfm-before-footer-section .widget_mc4wp_form_widget` (home.html:1526, e 1×
     em cada uma das 9 capturas). Duas regras concorrem: `style.css:4260-4266`
     (0-1-0, `.widget-title, .widgettitle`) daria `--h4-font-size` + linha 1,1,
     mas `boost.css:2662-2667` (0-4-1, escopada no container do widget) **vence** e
     dá `font-size: var(--h2-font-size)` + `margin-bottom: 0`. Da regra perdida
     sobra o que ela não sobrescreve: linha 1,1 e `margin-top: 0`. O 0,75rem
     abaixo é o fallback `--widget-title-margin` da mesma regra — o vão próprio do
     oráculo é 0 (o `<h2>` é o único filho do widget, o formulário não sai), mas
     aqui há um parágrafo depois, e o valor usado é o que o fonte declara. */
  font-size: var(--dd-h2);
  line-height: 1.1;
  margin: 0 0 0.75rem;
}
.footer-docendo-text {
  max-width: 480px;
  margin: 0 auto;
  color: var(--dd-widget-color);
}

/* Fase 7.6 (D-23) — enxerto legal do rodapé. O oráculo não tem essa linha, então
   a caixa é decisão; o que NÃO é decisão é nenhum dos quatro valores: a cor vem de
   `.site-footer a` (acima), o corpo e o vão são os da linha de meta
   (`--dd-entry-meta-size`/`--dd-entry-meta-flex-gap`, os mesmos do erro do
   formulário) e o vão vertical é o `--dd-post-margin` que já separa as colunas do
   próprio rodapé. Sem `text-decoration`: o hover do link comum já só troca a cor. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--dd-entry-meta-flex-gap);
  /* 16/10 — era `--dd-post-margin` (3,125rem na base), o mesmo vão das COLUNAS do
     rodapé, e por isso a linha de links ficava solta da descrição logo acima.
     0,75rem é o `--widget-title-margin` que o oráculo já usa para colar um título
     de widget no primeiro item dele — o mesmo tipo de vínculo, o mesmo número. */
  margin-top: 0.75rem;
  font-size: var(--dd-entry-meta-size);
}

/* Fila (viii), 14/10 — botão "voltar ao topo" (`style.css:4595-4629`). O oráculo
   imprime em 9/9 capturas (`home.html:1530`) e o `<body>` carrega `has-backtotop`.
   Caixa: 50×50px circle, fixed bottom:-100px (hidden) → bottom:30px quando
   `.visible`, fundo `--button-background`/`--button-hover-background`, glifo
   fontello `\e802` rotacionado -90° (seta para cima). O tema substitui o glifo
   por `↑` (mesma função, sem fontello — fila iv). */
.goto-top {
  position: fixed;
  bottom: -100px;
  right: 25px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  background: var(--dd-accent);
  color: var(--dd-accent-foreground);
  border-radius: 50px;
  z-index: 4000;
  text-decoration: none;
  transition: bottom 0.3s ease, opacity 0.3s ease;
}
.goto-top.visible {
  opacity: 1;
  visibility: visible;
  bottom: 30px;
}
.goto-top span { display: none; }
.goto-top::after {
  content: '↑';
  font-size: 1.25rem;
  line-height: 1;
}
.goto-top:hover,
.goto-top:focus {
  background: var(--dd-accent-hover);
  color: var(--dd-accent-foreground);
}

/* --------------------------------------------------------------------------
   11. Widgets (sidebar e rodapé)
   -------------------------------------------------------------------------- */
/* Fila (vii), 14/10 — bloco reancorado em `style.css:4238-4306` + cadeia
   `.sidebar .wp-block-group` do `gutenberg.css`. O pente reverso mediu três
   invenções minhas aqui: (a) `padding` no `<li>` (o oráculo põe a caixa de respiro
   no `<a>`: `style.css:4299-4306`, `padding: var(--widget-link-padding)` =
   0,625rem 0, com `display:flex`, peso 600 e corpo 1,125rem); (b) o título em
   `--dd-h5` (1,25rem) — mas `--widget-title-font-size`/`--widget-title-margin` não
   têm definição em `style.css`/`boost.css`/`gutenberg.css` nem nos 9 `<style>`
   impressos (censo: 0), então valem os fallbacks da própria declaração
   (`style.css:4259-4263`): `var(--h4-font-size)` = 1,5rem e 0,75rem; e (c) nesta
   rodada, `margin-bottom: --dd-post-margin` no `.widget` e `color: --widget-color`
   no contêiner — **nenhuma das duas existe no oráculo**: `.widget` só declara
   `display:inline-block; width:100%` (`:4238`) e o espaço entre widgets vem do
   `gap: var(--post-margin)` do `<aside>`/das colunas (`style.css:1085`, `:4000`),
   não de margem. Com a margem portada a barra abria 5rem onde o original abre
   2,5rem. A cor cinza é de `.widget p`/`.sidebar .widget time` (`:4359`), não do
   container. */
.widget { display: inline-block; width: 100%; }
.widget p,
.sidebar .widget time { color: var(--dd-widget-color); }
.widget-title {
  /* 10b.7 — A/B medido ao vivo a 531px nos dois sites (oráculo 28px/35px × tema
     20px/22px no mesmo papel). A folha portava `font-size: var(--dd-h4)` +
     `line-height: 1.1` de `style.css:4260-4266`, mas essa regra é uma **lista de
     seletores** (`.widget-title, .widgettitle`) e no oráculo os dois nomes têm
     destinos diferentes, censo nos 9 HTML:
       - `.widget-title` (com hífen): **0** ocorrências como heading.
       - `.widgettitle` (sem hífen): **9** (1 por página) — é só o widget Mailchimp
         "Docendo Discimus", que `boost.css:2662-2667` (0-4-1) ainda veste com
         `--h2-font-size`; portado em `.footer-docendo-title` (§10).
     Os títulos que o tema marca com `.widget-title` são os widgets de BLOCO, cujo
     elemento no oráculo é `<h2 class="wp-block-heading">` (13 ocorrências) e a quem
     **nenhuma das três folhas dá `font-size`** ⇒ manda o bloco global `h2,h3,…`
     (`:369-387`, `line-height: var(--heading-line-heght, 1.25)`; o token tem erro
     de grafia e 0 definições, logo vale o fallback) mais
     `h2{font-size:var(--h2-font-size)}` (`:400-403`). O tema recriou o nome morto
     e herdou o valor dele: um degrau abaixo em toda banda, porque
     `--h2-font-size` tem degrau em ≤1360/≤680/≤600 e `--h4-font-size` não.
     Reparado por subtração: sem `font-size` nem `line-height` aqui, o `<h2>` cai
     na mesma cascata do oráculo, degraus incluídos; sobrevive só o que
     `gutenberg.css:1426-1429` declara de fato para
     `.sidebar .wp-block-group .wp-block-heading:not(.has-text-color)`
     (`margin:0` + `color: --widget-title-color`). Peso e tracking vêm de `:355-366`. */
  margin: 0;
  color: var(--dd-widget-title-color);
  font-weight: var(--dd-heading-weight);
}
/* O vão depois do título tem DOIS valores no oráculo, e o de 1,625rem
   (`style.css:4272`) nunca chega: `gutenberg.css:1430` (0-4-0, `.wp-block-heading +
   *:not(.widget-subtitle)`) dá 1,5rem e `:1433` (0-4-0, **mais tarde na fonte**) dá
   `calc(1.5rem - 0.625rem)` = 0,875rem quando o vizinho **imediato** é a lista de
   posts recentes. Os dois widgets do tema estão medidos no oráculo e a fronteira
   é exatamente essa adjacência:
   - `block-3` (sidebar "Posts recentes"): lista colada no `<h2>` ⇒ `:1433` vence o
     empate de 0-4-0 pela ordem da fonte ⇒ **0,875rem**.
   - `block-10` (rodapé "Espere! Aqui tem mais:", `home.html:1310-1318`): há um
     `wp-block-spacer` de **1px** entre os dois. Quem recebe os 1,5rem de `:1430` é
     o **spacer** — e NÃO é anulado por `:1403` (0-4-0 também, mas **mais cedo** na
     fonte, então perde o empate) — enquanto a lista, cujo irmão anterior é o
     spacer, não é casada por `:1430` nem por `:1433` e fica com `margin-top:0` de
     `:1403`. Vão real = 1,5rem + 1px.
   Como o tema não imprime o spacer (§3 proíbe a classe de bloco), a lista ocupa o
   lugar do par spacer+lista e leva os **1,5rem** da regra geral; o 1px é a
   divergência de markup aceita e registrada. Medido e corrigido duas vezes nesta
   fila: a primeira versão desta nota dizia "a lista cai no ramo de 1,5rem" (por um
   motivo errado), a segunda punha 1px na lista (motivo certo, aritmética errada —
   eu tinha lido `:1403` como vencedora do empate). */
.widget-title + *:not(.widget-subtitle) { margin-top: 1.5rem; }
.widget-title + .latest-posts-list:not(.has-dates) { margin-top: 0.875rem; }
/* A faixa "Em Alta:" da sidebar (`home.html:1166-1170`) é um `<section>` de widget
   próprio, irmão do widget numerado: `block-7` embrulha
   `.wp-block-group.has-light-dark-highlight-background-color.has-background` e
   dentro dele só o `<h2 class="wp-block-heading">`. Mesma regra do grupo colorido
   do card "Olá, Tudo bem?" — caixa de `style.css:4476-4479` e cor **`#f2f2f2`**
   (o `!important` do preset `global-styles` vence `gutenberg.css:50`; ver a nota
   de proveniência no §12.1). */
.widget-band {
  padding: var(--dd-card-padding);
  border-radius: var(--dd-radius);
  background: var(--dd-highlight-background);
}
/* Categorias + faixa de apoio do drawer (`home.html:376` e `:392`). A lista é
   coberta pela família `.widget ul` acima (borda no `<li>`, `padding:
   var(--widget-link-padding)` no `<a>`) — o oráculo não dá regra própria a
   `wp-block-categories-list` nem a `wp-block-archives-list`. O `<h5>` do CTA traz
   `has-medium-grey-color` (`gutenberg.css:80-81` → `--medium-grey`, #94979e nos
   DOIS modos, `style.css:52` e sem override em `tfm-dark-theme-css`), e por ter
   `has-text-color` ele escapa do `:not()` de `gutenberg.css:1426`: o `margin:0`
   vem de `:1403` e a cor não é a do título. O `<h2>` seguinte é
   `.wp-block-heading` depois de heading ⇒ `:1430` dá 1,5rem de topo (0-4-0, mais
   tarde que `:1426`, e o `margin:0` deste é shorthand). */
.donate-lead { margin: 0; color: var(--dd-widget-color); }
.donate-lead + .widget-title { margin-top: 1.5rem; }
.widget ul,
.widget ol {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
/* style.css:4283-4285 — só a borda fica no `<li>`. O guarda `:not(.menu-item-
   has-children)` é do oráculo e nunca casa aqui (a classe tem 0 ocorrências no
   corpus inteiro), mas sai do fonte → a regra passaria a vestir o `<li>` de
   submenu se ele existisse; mantém-se por fidelidade de cascata. */
.widget ul li:not(.menu-item-has-children),
.widget ol li:not(.menu-item-has-children) { border-bottom: 1px solid var(--dd-border-color); }
/* style.css:4291-4296 */
.widget > ul > li,
.widget > ol > li,
.widget > div > ul > li { margin: 0; display: block; }
.widget ul li a,
.widget ol li a {
  display: flex;
  padding: var(--dd-widget-link-padding);
  color: var(--dd-widget-link-color);
  font-weight: var(--dd-widget-link-font-weight);
  font-size: var(--dd-widget-font-size);
  font-style: normal;
}

/* Listas de posts recentes (coluna 1 do rodapé e bloco homônimo da sidebar): no
   oráculo é o bloco Gutenberg Latest Posts (`gutenberg.css:780-847`) em DOIS
   estados medidos em `home.html` — a sidebar traz `wp-block-latest-posts__list`
   e o rodapé acrescenta `has-dates`. O estado manda: sem `has-dates` o `<li>`
   conserva a borda e o `padding: var(--widget-link-padding)` (0.625rem 0,
   style.css:234); com `has-dates`, `[class*="has"]` troca o gap do container por
   1,25rem (794-796) e `…[class*="has"].wp-block-latest-posts li` zera borda e
   padding (797-800). Os seletores abaixo carregam `.widget ul` para ter a mesma
   força da folha do fabricante (0-3-2/0-4-2) frente à regra genérica
   `.widget ul li` (0-2-2) e `.widget ul li a` (0-1-3): sem isso a borda da lista e
   o corpo de 1,125rem do link de widget venciam o título de 1,5rem — que vale
   nos DOIS estados, porque o link do bloco (`li a.post-title`, 0-2-2, espelho de
   `gutenberg.css:811-821`) também bate acima de `.widget ul li a`. O tamanho vem
   de `--tfm-posts-widget-entry-title-font-size`, definido em `boost.css:34` como
   1,5rem (não é IACVT). Os `padding`s NÃO são reescritos no `<a>`: no oráculo o
   link continua herdando o `padding` de `style.css:4299-4306`, e o `<li>` do
   estado sem `has-dates` recebe o mesmo valor — a respiração dupla é do
   fabricante. `is-layout-flow`, `wp-block-*` e o `!important` de
   `li:first-child/li:last-child` (803-809, que só zera margens já zeradas por
   `style.css:4293-4297`) não migram. */
/* Geometria líquida medida na fila (vii), 14/10. O container é `display:flex;
   column` (`gutenberg.css:781`), mas o vão e o reco NÃO são os da folha de base:
   `:1407` (0-2-1) troca o `display:flex` do `<li>` por `block`, `:1416` (0-4-0)
   põe `gap:0` no container `:not([class*="has"])` e `:1419` (0-3-1) dá
   `padding:0; margin:0` ao item — os três por morarem dentro de
   `.sidebar .wp-block-group`, que é também o estado das colunas do rodapé.
   Sobra a borda de lista (`:786` + `style.css:4283`), que nenhuma daquelas regras
   declara, e a caixa de respiro vai para o `<a>` (`style.css:4299-4306`,
   0.625rem 0) — exceto no estado com datas, em que `:1423`
   (`…[class*="has-"] .wp-block-latest-posts__post-title`) a zera e `:793/:796`
   trocam a borda+reco por `gap: 1.25rem` no container. */
.widget ul.latest-posts-list { display: flex; flex-direction: column; gap: 0; }
.widget ul.latest-posts-list li {
  border-bottom: 1px solid var(--dd-border-color);
  margin: 0;
  display: block;
  padding: 0;
}
.widget ul.latest-posts-list.has-dates { gap: 1.25rem; }
.widget ul.latest-posts-list.has-dates li { border: 0; padding: 0; }
.widget ul.latest-posts-list.has-dates li a.post-title { padding: 0; }
/* `gutenberg.css:1410` (0-4-1 **+ `!important`**): no `<li>` com mais de um filho
   — o estado com datas, título + data — o filho que não é o último recebe
   `margin-bottom: 0.75rem`. É o único vão interno da linha do widget e estava
   ausente: o `margin:0` de `a.post-title` abaixo não o anula justamente porque
   quem ganha é o `!important` (mesma aritmética do oráculo). Na lista sem datas o
   `<li>` tem filho único ⇒ `:not(:last-child)` não casa e a regra é no-op, como
   no original. */
.widget ul.latest-posts-list li > *:not(:last-child) {
  margin-bottom: 0.75rem !important;
}
.widget ul.latest-posts-list li a.post-title {
  margin: 0;
  /* `gutenberg.css:812` — a cor vem de `--entry-meta-link-color`, não de
     `--widget-title-color` (os dois têm o mesmo par de valores medido,
     #131315/#ffffff, mas o token de origem é o da meta). */
  color: var(--dd-meta-link-color);
  font-family: var(--dd-title-font);
  font-size: var(--dd-widget-lead-title-size);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--dd-entry-title-tracking);
  text-decoration: none;
}
.widget ul.latest-posts-list li time.post-date {
  margin: 0;
  letter-spacing: normal;
  /* A cor NÃO é `--entry-meta-color` (`gutenberg.css:841-847`, 0-2-0): quem ganha é
     `.sidebar .widget time` (`style.css:4359`, 0-3-0) ⇒ `--widget-color`. Os dois
     tokens coincidem em claro (#94979e) e **divergem no escuro** (medido no
     `<style>` de `home.html:156/168/224/236`: `--entry-meta-color:#cfd0d2` ×
     `--widget-color:#94979e`) — no tema escuro a data saía #cfd0d2. */
  color: var(--dd-widget-color);
  font-size: var(--dd-entry-meta-size);
  font-weight: 500;
}

/* Widget numerado (sidebar "Em Alta:" + colunas 2–4 do rodapé): o primeiro post
   de cada coluna do rodapé leva a miniatura larga (1,5rem no título); os demais
   viram LINHA com a miniatura de 100px à ESQUERDA e o título a 1,25rem à direita
   dela. Corrigido na fila (v): eu tinha a miniatura à direita, porque li o
   `order:1` de boost.css:1441 sozinho — mas o `<div>` do cabeçalho do widget é
   `entry-header entry-wrapper` (home.html:1189) e `.entry-wrapper` vale
   `order: var(--entry-wrapper-order, 20)` (style.css:2797-2798); como nenhum dos
   dois tokens é sobrescrito no `<style>` do site (censo: zero ocorrências), a
   miniatura (1, ou 10 no card) sempre antecede o cabeçalho (20). O token
   `--tfm-posts-widget-thumbnail-max-width` é 100px (boost.css:32). O flex é do
   `.post-inner` (style.css:2299-2305), não do `<article>` — medido: no oráculo o
   `<article class="article widget-entry">` embrulha um único `.post-inner`.
   CORREÇÃO DA FILA (vii), 14/10 — o vão ENTRE itens do widget não é o da grade:
   `boost.css:1371-1373` reescreve `gap` do container para
   `var(--tfm-posts-widget-flex-gap, 1.25rem)`, e o token não tem definição em
   `style.css`/`boost.css` nem no `<style>` impresso dos 9 HTML (censo: 0) → vale
   o fallback 1,25rem, não os 2,5rem de `--post-margin` que eu usava. O de dentro
   do item continua `--dd-entry-wrapper-flex-gap` (1,25rem; 1rem abaixo de 600px —
   style.css:5603-5610, boost.css:1377-1379 com o mesmo fallback). */
.widget-numbered-posts { margin-bottom: 0; }
.widget-numbered-posts .post-grid { gap: 1.25rem; }
.widget-entry { position: relative; }
.widget-entry .thumbnail-wrapper { position: relative; margin: 0; }
.widget-entry .post-thumbnail { margin: 0; }
.widget-entry .post-thumbnail img { width: 100%; height: auto; border-radius: var(--dd-thumbnail-radius); }
/* boost.css:1381-1397 — a cascata do título em três degraus: base 1,5rem; todo
   card COM miniatura cai a 1,25rem (1387, `has-post-thumbnail` está em 124/124
   artigos do corpus); o líder da coluna (`first-grid`, 1392) volta a 1,5rem; e a
   linha `:not(.first-grid)` reafirma 1,25rem (1396). As variantes `.cover` e
   `.card` do mesmo bloco (1389, 1391, 1611-1652) são inertes por dado: `card` e
   `cover` têm 0 ocorrências nos 72 artigos de widget contados. */
.widget-entry .entry-title {
  margin: 0;
  font-size: var(--dd-widget-lead-title-size);
  font-weight: 600;
}
.widget-entry.has-post-thumbnail .entry-title { font-size: var(--dd-widget-row-title-size); }
.widget-entry.first-grid.has-post-thumbnail .entry-title { font-size: var(--dd-widget-lead-title-size); }
/* boost.css:1444 — `--widget-link-color`, não `--widget-title-color` (mesmo par
   de valores medido, token de origem distinto). */
.widget-entry .entry-title a { color: var(--dd-widget-link-color); }

/* boost.css:1429-1455 — a LINHA (não-líder): `post-inner` vira row, o par
   `flex-basis:50%` + `flex-grow:1` (1436-1440) divide o espaço e o `max-width`
   de 100px fecha o lado da miniatura. O `gap: 0.75rem` que vem no mesmo bloco de
   1436 é INERTE: `gap` é propriedade de container e ali ela cai sobre um flex
   item — portado como comentário, não como regra. */
.widget-entry:not(.first-grid) .post-inner { flex-direction: row; align-items: flex-start; }
.widget-entry .post-inner > * { flex-basis: 50%; flex-grow: 1; }
.widget-entry .entry-header { min-width: 0; }
.widget-entry:not(.first-grid) .thumbnail-wrapper { order: 1; max-width: 100px; }
.widget-entry:not(.first-grid) .post-thumbnail img { position: relative; }

/* boost.css:1400-1422 — a linha de meta do card de widget NÃO é lista de widget:
   sem borda de `<li>`, sem o corpo/peso de link de lista (volta ao corpo da meta
   e 500 no link), e sem `display:flex` do `<a>`. A âncora precisa dos quatro
   nós (`.widget` + seção + `.widget-entry` + `.entry-meta a` = 0-4-1) para vencer
   `.widget ul li a` (0-1-3) da mesma folha, exatamente como `boost.css` faz com
   `.tfm_posts_widget` no lugar da minha classe de seção. */
.widget-numbered-posts .widget-entry .entry-meta li { border: 0; }
.widget-numbered-posts .widget-entry .widget-entry .entry-meta a,
.widget-numbered-posts .widget-entry .entry-meta a { font-weight: 500; }
.widget-numbered-posts .widget-entry .entry-meta a:not([class*='cat-link']) {
  font-size: var(--dd-entry-meta-size);
  padding: 0;
  display: revert;
}

/* Selo numerado sobre a miniatura (boost.css:1465-1519): a base é 30×30 a 8/8
   (1482-1490) e o líder da coluna sobe a 50×50 a 15/15 pelo par
   `.show-post-count.has-post-thumbnails.has-post-views .first-grid.has-post-thumbnail`
   (1513-1519, com o passo intermediário de 40×40 em 1502-1511) — que casa no
   rodapé porque o container traz `has-post-views` (`has-tfm-post-views` em
   `home.html:1323`, renomeado por §3) e `first-grid`; a sidebar (`list`,
   `home.html:1171`) não tem líder nenhum, então seus 3 selos ficam na base.
   `z-index:200` é o valor do oráculo (boost.css:1471). O bloco de referência é o
   `<article>` — é ele que tem `position:relative` (style.css:2191-2195,
   `article.article`), e como a miniatura é o primeiro item do `.post-inner`, os
   8/8 do artigo caem no canto superior esquerdo dela. No oráculo o selo contém
   SÓ O NÚMERO — medido em `home.html:1185/1337` e reconfirmado na home viva de
   14/10 (nós filhos de `.tfm-post-count`: zero). As visualizações vivem
   exclusivamente na linha `.entry-meta.after-title`; as regras
   `.tfm-post-count .tfm-view-count` (1527-1553) pedem um `.tfm-view-count`
   FILHO do selo, que o corpus não imprime (0 nós) — ramo inerte por dado, com
   ele morre a referência ao glifo `fontello \f526`. */
.widget-numbered-posts .post-count {
  position: absolute;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: var(--dd-widget-link-color);
  font-weight: 600;
  width: 30px;
  height: 30px;
  top: 8px;
  left: 8px;
  background: var(--dd-post-background);
  border-radius: var(--dd-thumbnail-radius);
  font-size: 0.875rem;
  line-height: 1;
}
.widget-numbered-posts .first-grid .post-count {
  gap: 0.125rem;
  width: 50px;
  height: 50px;
  min-height: 50px;
  top: 15px;
  left: 15px;
  font-size: 1.125rem;
}

/* boost.css:1460-1465 — o item SEM miniatura de um widget com selo: como o selo
   é absoluto, o texto recua pela largura dele (40px no container neutro;
   `calc(--tfm-posts-widget-thumbnail-max-width + gap do item)` quando o container
   é `has-post-thumbnails` — 100px de boost.css:32 mais o fallback de 1371-1373).
   Nos 4 widgets da home o container sempre traz `has-post-thumbnails`, então o
   40px puro só pega num widget sem miniaturas nenhum; deixo as duas regras porque
   os dois estados do container existem no vocabulário do fabricante. No meu DOM
   atual nenhum `widget-entry` cai aqui (o feed planta capa em todos), mas a
   regra é o que impede o selo de subir sobre o título quando um post ficar sem
   imagem. */
.widget-numbered-posts .show-post-count .widget-entry:not(.has-post-media) { padding-left: 40px; }
.widget-numbered-posts .show-post-count.has-post-thumbnails .widget-entry:not(.has-post-media) {
  padding-left: calc(100px + var(--dd-entry-wrapper-flex-gap));
}

/* --------------------------------------------------------------------------
   12. Grade e card da listagem (Fase 4.2)
   Estrutura medido em `referencias/html/home.html` (`main#main >
   .post-grid.cols-3.grid.mobile-grid`) e nas regras de `style.css` citadas
   abaixo linha a linha. A grade é flex com `gap` = `--dd-post-margin`; o card
   é `.article` com `flex: 0 1 100%` (uma coluna) e a classe da grade redefine
   a base por coluna (`--dd-cols-3-flex-basis`). Autor acima da miniatura é
   ordem de `flex` (5 vs 10), não o DOM.
   -------------------------------------------------------------------------- */
.post-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dd-post-margin);
}

/* style.css:2191-2195 — o oráculo dá a base a QUALQUER `article.article` /
   `div.article`, não só aos filhos da grade. CORREÇÃO (fila (vi)): o seletor
   estava restrito a `.post-grid > .article`, então o `<article>` do post
   individual (`article` + `hentry`, fora de toda grade — medido no DOM
   congelado) ficava sem `position:relative`, que é o ponto estático da frisa de
   1px do post sem miniatura (banda ≤640, §13.3) e de qualquer absoluto futuro
   dentro do article. As grades continuam casando (os cards são todos
   `article.article`), inclusive os da navegação (`:226` de `single.php`). */
article.article,
div.article {
  flex: 0 1 100%;
  min-width: 0;
  position: relative;
}

.cols-3 > .article { flex-basis: var(--dd-cols-3-flex-basis); }
.cols-2 > .article { flex-basis: var(--dd-cols-2-flex-basis); }

.post-inner {
  display: flex;
  flex-direction: column;
  gap: var(--dd-entry-wrapper-flex-gap);
  width: 100%;
  height: 100%;
}

/* style.css:2291-2320 + 2797-2799 (fila (vii), 14/10) — o embrulho de texto. No
   oráculo o nó é `div.entry-header.entry-wrapper` nas 72 superfícies de widget
   contadas (censo dos 9 HTML: `entry-header` SEMPRE junto de `entry-wrapper`
   fora do post individual, que é `header.entry-header.single-entry-header`), e
   as duas classes têm regras próprias de `gap` com a MESMA especificidade (0-1-0):
   `.entry-wrapper{gap:var(--entry-wrapper-flex-gap)}` (`:2295`) vem antes e
   `.entry-header{gap:2rem}` (`:2316`) depois ⇒ no nó combinado quem manda é
   2rem, e é isso que o widget herda. A ordem também vem do par:
   `order: var(--entry-wrapper-order, 20)` — o token não tem definição em
   `style.css`/`boost.css` nem no `<style>` impresso (censo: 0), então vale o
   fallback 20, e é por isso que a miniatura (10 no card, 1 na linha do widget)
   sempre antecede o cabeçalho. `.entry-header-inner` (0 nós no corpus, ordem 15)
   não é portada. */
.entry-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dd-entry-wrapper-flex-gap);
  height: auto;
  justify-content: flex-start;
  order: 20;
}
.entry-header {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 2rem;
}

/* Ordem visual (style.css:2650-2658, 2675-2677, 2775-2777, 2817-2819). */
.post-grid .author-meta { order: 5; }
.thumbnail-wrapper { order: 10; }
.entry-title { order: 30; }
.entry-meta.after-title { order: 40; }
.hentry-footer { order: 60; }

/* Miniatura e botão de compartilhar (boost.css:1142-1211). */
.thumbnail-wrapper {
  position: relative;
  margin: 0;
}

/* Caixa de razão da miniatura (fila (v) — style.css:2353-2425). O oráculo NÃO
   dimensiona o `<img>`: zera a altura do `<figure>` e do `<a>` e devolve essa
   altura como `padding-bottom` percentual por VARIANTE de card — `thumbnail-wide`
   56,25% no índice, `thumbnail-landscape` 66,75% nos arquivos e na busca. O
   `<img>` é absoluto cobrindo o box: para um abspos o bloco de referência é o
   PADDING box do ancestral, por isso `height:100%` resolve contra a razão e não
   contra o conteúdo 0. Raio e recorte ficam no `<figure>` (`overflow:hidden`);
   o `<img>` não tem raio próprio — a única regra de raio nele é `.list
   .post-thumbnail img` (:2404-2406), classe que o tema não imprime.
   `thumbnail-uncropped` é a variante dos widgets (medido: os 30 `widget-entry`
   do congelado a carregam), e é ela que o `:not()` do fabricante usa para deixar
   a miniatura em aspecto natural. */
.post-thumbnail,
.faux-thumbnail {
  position: relative;
  margin: 0;
  border-radius: var(--dd-thumbnail-radius);
  overflow: hidden;
}
.has-post-media:not(.thumbnail-uncropped) .post-thumbnail { height: 0; }
.post-thumbnail a { height: 0; display: block; position: relative; }
.thumbnail-uncropped .post-thumbnail a { height: 100%; }
.thumbnail-wide .post-thumbnail,
.thumbnail-wide .post-thumbnail a { padding-bottom: var(--dd-thumbnail-wide-padding); }
.thumbnail-landscape .post-thumbnail,
.thumbnail-landscape .faux-thumbnail,
.thumbnail-landscape .post-thumbnail a,
.thumbnail-landscape .faux-thumbnail a { padding-bottom: var(--dd-thumbnail-landscape-padding); }
.post-thumbnail img { width: 100%; transition: all 0.5s ease; }
.article:not(.thumbnail-uncropped) .post-thumbnail img {
  object-fit: cover;
  height: 100%;
  position: absolute;
}
/* style.css:2413-2421 e 5861-5863 — a miniatura do LÍDER de widget é impressa em
   DUAS resoluções no oráculo (440×284 + 300×194, mesmo arquivo webp) dentro de um
   `<figure class="post-thumbnail has-mobile-thumbnail">`: acima de 601px a
   segunda é ocultada ("hide mobile image"), abaixo de 600px a primeira. As duas
   regras pendem da âncora `.post-grid`, que é exatamente o que o container do
   widget passou a carregar (fila (vii)). No MESMO bloco de 601px do fabricante
   existe `.list > .hentry.thumbnail-uncropped .post-thumbnail img` com
   `object-fit:cover;height:100%;position:absolute` — inerte por dado, e por dois
   motivos: nenhum container de loop usa `list` (censo dos 9 HTML: o loop é sempre
   `post-grid cols-3 grid mobile-grid`) e nenhum artigo de widget tem `hentry`. */
@media (min-width: 601px) {
  .post-grid .has-mobile-thumbnail img + img { display: none; }
}
@media (max-width: 600px) {
  .post-grid .has-mobile-thumbnail img:first-of-type { display: none; }
}
/* style.css:2423-2425 — o zoom é da miniatura no hover, não do card. */
.post-grid .post-thumbnail:hover img { transform: scale(1.02); }

.toggle-share {
  position: absolute;
  top: var(--dd-card-padding);
  left: var(--dd-card-padding);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: var(--dd-post-background);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  color: var(--dd-meta-color);
  cursor: pointer;
}
.toggle-share svg { width: 15px; height: 15px; }
/* boost.css:1176-1186 — o mesmo botão troca o glifo: `\e813` (share) fechado,
   `\e80c` (`icon-cancel-1`, fontello.css:71) aberto. Sem `fontello` (lixo,
   anti-checklist §3) a troca é entre os dois SVG do botão, dirigida pela classe
   `.close` que `assets/js/theme.js:80` já aplica no clique. */
.toggle-share .ico-cancel { display: none; }
.toggle-share.close .ico-share { display: none; }
.toggle-share.close .ico-cancel { display: block; }

/* Escopo `.thumbnail-wrapper` (Fase 5): boost.css:1142 só aplica o overlay à
   share board DA MINIATURA. O post individual tem `.share-wrapper.side` dentro
   de `.single-content-wrapper` (absoluto lateral) e no rodapé — se estas regras
   ficassem globais, os dois wrappers do single nasceriam invisíveis
   (`opacity:0` + `inset:0` sobre o wrapper inteiro). */
.thumbnail-wrapper .share-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--dd-thumbnail-radius);
  -webkit-backdrop-filter: blur(30px) brightness(90%);
  backdrop-filter: blur(30px) brightness(90%);
  opacity: 0;
  transition: all 0.5s ease;
}
.thumbnail-wrapper .share-wrapper.show { opacity: 1; z-index: 2; }

.share-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.5s ease;
}
.thumbnail-wrapper .share-wrapper.show .share-icons { opacity: 1; transform: scale(1); }

/* boost.css:1215-1221 — no card da grade o rótulo "Compartilhar" não é
   impresso, só os ícones. */
.thumbnail-wrapper .share-icons .share-text { display: none; }
.thumbnail-wrapper .share-icons .share-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #ffffff;
}
.thumbnail-wrapper .share-icons .share-icon svg { width: 18px; height: 18px; }

/* boost.css:1255-1265 — whatsapp é `mobile-only`. A cascade real tem três
   regras: `style.css:4585-4588` (base `display:none; visibility:hidden`),
   `boost.css:1255-1259` (`min-width:1060px` → `none !important`) e
   `boost.css:1261-1265` (`max-width:1060px` → `flex !important`). Aos 1060px
   exatos as duas bandas batem juntas e têm a MESMA especificidade (0-2-0),
   então decide a ordem na fonte: a de `flex` vem depois e ganha ⇒ o chip é
   visível em ≤1060. Daí a banda do tema ser `min-width:1061px`; com `1060px`
   ele sumia justo no viewport onde o site o mostra. O `visibility` do oráculo é
   redundante aqui (nada exibe o que já está com `display:none`). */
@media (min-width: 1061px) {
  .share-icons .share-icon.mobile-only,
  .social-icons .social-icon.mobile-only { display: none; }
}

/* Meta de autor: avatar 40px, nome e nickname à direita, sem separador "·"
   entre os três — o mecanismo é o par de `content: none` do fabricante
   (style.css:2564-2569), não um `:not(:first-child)` meu. Corrigido na fila
   (vii) de 14/10: a atalho antigo suprimia o separador do PRIMEIRO item de
   toda linha, enquanto o oráculo imprime separador em todos os itens e mata
   os iniciais por `:nth-child(-n+3)`/`(-n+2)`, que só existem dentro de
   `.multi-line`/`.has-avatar`. Consequência medida: a linha `after-title` do
   card (data + curtidas, sem avatar nem multi-line) perde o "·" da frente no
   meu CSS e o tem no oráculo. */
/* Subtração medida em 15/10: aqui havia `font-size: var(--dd-entry-meta-size)`
   no BLOCO. No oráculo o `0.9375rem` nasce em `.entry-meta ul` (`style.css:2516`),
   nunca no `.entry-meta`; o bloco herda o corpo. Medido com a mesma assinatura de
   DOM nos dois lados (vw 547): `entry-header single-entry-header > entry-meta
   author-meta` e `hentry-footer single-hentry-footer > entry-meta hentry-footer-meta
   post-tags` = **18px** no oráculo × 15px no tema; o `<li>` interno já batia em 15
   porque a UL tem a regra própria (`.entry-meta .post-meta`, abaixo), e o `.prev-next`
   também bate porque declara o tamanho em `style.css:3910`. */
/* style.css:2502-2505 — a cor da meta é de um seletor de SUBSTRING de classe,
   que casa o bloco E cada `<li>` (`entry-meta-author`, `entry-meta-date`,
   `entry-meta-avatar`…), com `letter-spacing: normal` desfazendo o tracking
   herdado. Porta-do inteiro; o `color` do bloco sozinho não alcançaria os
   items, que têm de herdar por esse seletor e não pelo pai. */
[class*='entry-meta'] {
  color: var(--dd-meta-color);
  letter-spacing: normal;
}
/* style.css:2506-2518 — `position:relative` é da UL de toda meta (é ela que
   ancora o autor absoluto), não só do bloco com avatar. O par `font-size` +
   `font-weight:500` também é da UL (:2516-2517): todo item de meta nasce em
   peso 500 e é desfeito item a item abaixo. */
.entry-meta .post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dd-entry-meta-flex-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  font-size: var(--dd-entry-meta-size);
  font-weight: 500;
}
/* style.css:2539-2545 — o entrelinha é do `<li>`, não do filho qualquer da UL.
   Trocar `> *` por `li` preserva a aritmética de especificidade do oráculo:
   `.entry-meta li` (0-1-1) perde para `.post-meta.categories li` (0-2-1, :2600),
   e a minha versão `> *` (0-2-0) VENCERIA desse mesmo `li` das categorias,
   deixando a linha do chip de categoria em 1.2 em vez de 1. */
.entry-meta li {
  margin: 0;
  line-height: 1.2;
}
/* style.css:2525-2527 e 2543-2545 — a linha multi-linha ALINHA EM BAIXO e sobe
   o entrelinha para 1.5. Corrigido na fila (v): eu tinha `center`/`1.2` para
   todas as linhas, o que deixava o nickname da home 6px mais alto que o do
   oráculo e o nome do autor fora do prumo do avatar. */
.multi-line.entry-meta .post-meta { align-items: flex-end; }
.entry-meta.multi-line li { line-height: 1.5; }
/* style.css:2493-2496 — `overflow:hidden` é do bloco de autor E do `after-title`
   (a regra os enumera juntos); a linha que NÃO é multi-line nem tem avatar entra
   com `margin-left` negativo de `3px + gap`, compensando o respiro do separador.
   Corrigido na fila (vii): o comentário anterior dizia "só do bloco de autor". */
.entry-meta.after-title,
.author-meta { overflow: hidden; }
.after-title .post-meta:not(.multi-line):not(.has-avatar),
.author-meta .post-meta:not(.multi-line):not(.has-avatar) {
  margin-left: calc(0px - (3px + var(--dd-entry-meta-flex-gap)));
}
/* style.css:2560-2563 — separador em TODO item de meta, exceto os de
   `.categories` (que têm régua própria). */
.post-meta:not(.categories) > *::before {
  content: var(--dd-entry-meta-separator);
  margin-right: var(--dd-entry-meta-flex-gap);
}
/* style.css:2564-2569 — as supressões. `.post-meta *.entry-meta-avatar` (avatar
   nunca leva separador), `:nth-child(-n+3)` em linha multi-line e `(-n+2)` em
   linha com avatar matam os separadores iniciais; o par com `.tfm-view-count` é
   portado pelo renome `.view-count` do tema e está MEDIDO como morto: a contagem
   de artigo com `author-meta` e `view-count` no mesmo subtree é zero no corpus
   (o widget numerado usa outro bloco de meta). */
.entry-meta .post-meta *.entry-meta-avatar::before,
.entry-meta .multi-line *:nth-child(-n+3)::before,
.entry-meta .has-avatar *:nth-child(-n+2)::before,
.post-grid .entry-meta.author-meta .view-count::before {
  content: none;
}
/* style.css:2590-2592 — na linha multi-line com avatar, o TERCEIRO item
   (nickname) também fica sem separador: o `+ * + *` sai do avatar, passa no
   autor e mata o nickname. */
.entry-meta.multi-line .post-meta .entry-meta-avatar + * + *::before {
  content: none;
}
/* style.css:2550-2559 — os pesos. A UL nasce 500 (:2517); dentro do bloco de
   autor TUDO volta a `normal` (inclusive o avatar e o nickname), o `<li>` de
   autor é `normal` e SÓ o nome linkado do autor recupera 500. Sem este trio o
   meu card inteira o nickname e a data, que o oráculo imprime regulares. */
.author-meta *,
.has-avatar.multi-line * { font-weight: normal; }
.entry-meta-author { font-weight: normal; }
.author-meta .entry-meta-author a { font-weight: 500; }
/* style.css:2531-2538 — na linha multi-line o autor ocupa a largura toda e
   sobe uma faixa de `gap` (é o que cola as duas linhas do bloco); read-time e
   comentário/curtida fazem o mesmo quando a linha NÃO tem avatar.
   **16/10**: removido para o single — o operador quer o nome ao lado de "por"
   na mesma linha, não empilhado. */
.post-meta.multi-line .entry-meta-author {
  margin-bottom: calc(0rem - var(--dd-entry-meta-flex-gap));
}
.single-entry-header .post-meta.multi-line .entry-meta-author {
  width: auto;
}
.post-meta.multi-line:not(.has-avatar) .entry-meta-read-time,
.post-meta.multi-line:not(.has-avatar) .entry-meta-comment-count {
  margin-top: calc(0rem - var(--dd-entry-meta-flex-gap));
}
/* style.css:2593-2599, 2659-2671 e 2834 — os ramos NÃO-multi-line e o de artigo
   sem mídia. Com o dado de hoje os dois primeiros não disparam (toda linha de
   autor do corpus é `multi-line has-avatar`: 50 blocos `author-meta`, 50 com
   `multi-line`; âncora `multi-meta-items:not(.multi-line)` até casa 39 elementos,
   mas nenhum tem descendente `author-meta` → alvo zero). O ramo sem mídia também
   é inerte por dado: 125 `<article>` no corpus, 3 sem `has-post-media`, e 0 dos 3
   contêm `author-meta` ou `hentry-footer`. Portados por fidelidade de cascata,
   com o custo zero medido. */
.entry-meta.multi-meta-items:not(.multi-line) .author-meta {
  flex-direction: column;
  align-items: flex-start;
}
.entry-meta.multi-meta-items:not(.multi-line) .author-meta .entry-meta-date {
  margin-top: -2px;
}
.author-meta:not(.multi-line) .has-avatar *:not(.entry-meta-avatar):not(.entry-meta-author):not(.entry-meta-author-nickname):last-child {
  margin-left: auto;
}
.article:not(.has-post-media) .author-meta { margin-bottom: auto; }
.article:not(.has-post-media) .hentry-footer { margin-top: 0; }
/* style.css:2686-2694 — "Hide/show meta". Medido no corpus: o `<li>` de
   visualizações SÓ EXISTE dentro de `.after-title` (7 ocorrências na home: as 3
   do widget numerado da sidebar + zero no loop; 1 no single + 6 nos widgets do
   rodapé) e os 9 artigos que o contêm têm `default`. Como `.has-nickname` só
   aparece nos 10 `<article>` do loop (que não têm esse `<li>`), o ramo
   `.has-author.has-nickname:not(.has-avatar)` não casa em nada aqui e vale a base
   `display:none` (0-3-0) → no oráculo o "1.9k Visualizações" do card numerado É
   IMPRESSO E ESCONDIDO; o que mostra a visualização é só o single, reaberto pelo
   `.single-entry-header .after-title .tfm-view-count` (0-3-0, :2692-2693, depois
   da base). `card` tem 0 ocorrências nos 125 artigos (anti-checklist §3 e inerte
   por dado); o par `.author-meta` da base também não casa, porque nenhuma
   `.author-meta` do corpus tem `tfm-view-count` descendente. Porto o DOM (li
   presente) e a cascata (escondido), que é o que reproduz a tela. */
.default .after-title .view-count,
.card .after-title .view-count { display: none; }
.has-author.has-nickname:not(.has-avatar) .author-meta .view-count { display: none; }
.has-author.has-nickname:not(.has-avatar) .after-title .view-count,
.single-entry-header .after-title .view-count { display: block; }

/* style.css:2528-2530 + 2570-2574 — o avatar fica NO FLUXO (é um flex item de
   40px); quem sai do fluxo é o item seguinte. `min-height` do avatar só vale na
   linha multi-line, como no fabricante. */
.entry-meta .post-meta.has-avatar.multi-line { min-height: var(--dd-avatar-width); }
.entry-meta-avatar img {
  width: var(--dd-avatar-width);
  height: var(--dd-avatar-width);
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
/* style.css:2584-2589 — nome do autor é absoluto no topo da linha e o deslocamento
   horizontal vem de `margin-left`, NÃO de `left`: o ponto estático de um filho
   absoluto de um flex container é o início do container (como se ele fosse o
   único item), então o `margin-left` de `avatar + gap` é exatamente o que o põe
   ao lado do avatar. O nickname (3º item) continua no fluxo, cai depois do avatar
   e, com `align-items:flex-end`, assenta na base da linha de 40px — a segunda
   linha que o oráculo mostra. */
.entry-meta.multi-line .entry-meta-avatar + * {
  position: absolute;
  top: 0;
  margin-left: calc(var(--dd-avatar-width) + var(--dd-entry-meta-flex-gap));
  width: auto;
}

/* style.css:2546-2549 — o link de meta lê `--entry-meta-link-color` (site
   override: `#131315` claro / `#ffffff` escuro), NÃO o `--body-font-color`
   (`#cfd0d2` no escuro). Corrigido em 14/10: no dark todo link de meta saía
   20% mais fraco que o oráculo. O chip de categoria (1115) e o de tag (1746)
   vêm depois na fonte e têm a mesma especificidade (0-1-1), então continuam
   vencendo com as cores próprias. */
.entry-meta a { color: var(--dd-meta-link-color); text-decoration: none; }
/* style.css:2682-2685 — a regra do fabricante é no ELEMENTO, não só no span:
   o card tem `<span class="nickname">` dentro do `<li>`, mas o cabeçalho do
   autor (Fase 7.1) imprime o texto direto no `.entry-meta-author-nickname`.
   Selecionar os dois cobre as duas superfícies com a mesma cor medida. */
.entry-meta-author-nickname,
.entry-meta-author-nickname .nickname {
  color: var(--dd-tertiary-theme-color);
  text-transform: capitalize;
}

/* Excerpt do card (fila (v)) — style.css:2322-2341 e 2775-2777. Só existe FORA
   do índice: censo de 57 cards deu 37 excerpts nos arquivos/busca e zero nos 20
   do índice, com o MESMO post-390 saindo das duas formas. `order:50` (:2775) é o
   que o pendura entre o after-title (40) e o rodapé (60), e é por isso que ele é
   irmão dos blocos de meta dentro de `.post-inner`, não filho do título.
   Tipografia medida: corpo 1.25rem (:175) derrubado para 1.125rem pela grade de
   3 colunas (:2338-2341, token :177) — sem redefinição responsiva; cor e peso
   vêm de `--excerpt-color`→`--entry-meta-color` (:179) e `--excerpt-font-weight`
   que o site não define (fallback 400, :2326); `line-height` idem (normal) e
   `padding:0`. O `width:auto; margin-left:0` é de `.post-grid
   div[class*="excerpt"]` (:2330-2333). */
.entry-content.excerpt {
  order: 50;
  font-size: var(--dd-excerpt-font-size);
  color: var(--dd-meta-color);
  font-weight: 400;
  line-height: normal;
  padding: 0;
  width: auto;
  margin-left: 0;
}
.cols-3 .entry-content.excerpt { font-size: var(--dd-cols-3-excerpt-font-size); }

.entry-title {
  margin: 0;
  font-size: var(--dd-entry-title-size);
  font-weight: var(--dd-entry-title-weight);
  letter-spacing: var(--dd-entry-title-tracking);
}
/* Sublinhado invisível que colore no hover — comportamento medido do original
   (style.css:2454-2467), não ornamento acrescentado. */
.entry-title,
.entry-title a {
  color: var(--dd-entry-title-color);
  text-decoration: underline;
  text-decoration-color: transparent;
}
.entry-title a { transition: all 0.4s ease; display: block; }
.entry-title a:hover {
  text-decoration-color: var(--dd-link-color);
  text-decoration-thickness: 3px;
}

.entry-meta.after-title { margin: 0; }

/* Rodapé do card: "3 Min Read" à esquerda, categoria à direita, separado por
   uma linha. Corrigido na fila (vii) de 14/10: a portagem antiga colava as DOS
   níveis da cascata do fabricante (`.hentry-footer` :2817 e `.post-grid
   .hentry-footer` :2822) numa regra só, o que (a) trocava o `gap` de 0,5rem por
   12px, (b) punha `align-items:center` que não existe em nenhuma das duas,
   (c) aplicava a borda de topo incondicionalmente em vez do combinador de
   irmão (:2844-2847) e (d) perdia `position:relative`, `width:100%`, `border:0`
   e os `margin-left/right:0` da grade. `margin-top:auto` é o que prende o
   rodapé na base do card, já que `.post-inner` é `height:100%`. */
.hentry-footer {
  display: flex;
  order: 60; /* :2819 — `--entry-read-more-order` não tem definição nenhuma
                (0 `--token:` nos dois oráculos) ⇒ vale o fallback 60. */
  border-top: 1px solid var(--dd-border-color);
}
.post-grid .hentry-footer {
  flex-direction: row;
  justify-content: flex-end;
  display: none;
  position: relative;
  gap: 0.5rem;
  margin-left: 0;
  margin-right: 0;
  margin-top: auto;
  width: 100%;
  border: 0;
}
/* :2837-2841 — a dupla que reexibe o rodapé. O terceiro membro do oráculo é
   `.has-read-more .hentry-footer`, MEDIDO morto: `has-read-more` aparece zero
   vezes no corpus (o botão "Ler mais" está desligado — a família `.read-more`
   inteira, 32 regras, tem 0 ocorrências no DOM). */
.post-grid .has-read-time:not(.has-read-more) .hentry-footer,
.post-grid .has-category-meta .hentry-footer { display: flex; }
/* :2842-2848 — a borda e o respiro existem só quando o rodapé vem DEPOIS de um
   `<div>` que não seja o da miniatura, ou de um `<h3>`. Os dois ramos `.list`
   são mortos (`.post-grid` com classe `list`: 0 ocorrências no corpus). */
.post-grid .post-inner div:not(.thumbnail-wrapper) + .hentry-footer,
.post-grid .post-inner h3 + .hentry-footer {
  border-top: 1px solid var(--dd-border-color);
  padding-top: var(--dd-entry-wrapper-flex-gap);
}
/* :2849-2851 e :2810-2812 — dentro da grade todos os filhos voltam a `order:1`
   (o `order:60` do rodapé é do card fora dela) e tudo que NÃO é a categoria
   empurra o espaço sobrando para a direita, deixando o chip encostado na borda.
   O `margin-left:auto` que eu punha no `.category-meta` é inventado: com
   `justify-content:flex-end` + `margin-right:auto` no irmão o efeito já é o
   medido, e pô-lo de novo mudaria a partilha de espaço quando o read-time é o
   único item (`.category-meta` ausente). */
.post-grid .hentry-footer > * { order: 1; }
.hentry-footer > *:not(.category-meta) { margin-right: auto; }

.category-meta { order: 20; display: flex; }
.category-meta .categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--dd-entry-meta-flex-gap);
  font-size: var(--dd-category-meta-font-size); /* :2680 → 1rem, e NÃO o
      0.9375rem herdado da UL; sem este degrau o chip saía 1,6px menor. */
}
/* :2600-2603 — `line-height:1` e `height:100%` são do `<li>` da categoria; a
   especificidade (0-2-1) é justamente a que vence `.entry-meta li` (0-1-1), que
   acabou de ser restaurada acima. */
.post-meta.categories li { line-height: 1; height: 100%; }
[class*='cat-slug'] { color: var(--dd-meta-color); font-weight: 600; }
/* :2608-2619 — o link de categoria é inline-flex ALINHADO E CENTRALizado com
   `height:100%`; `position:relative` é do âncora `a[class*="cat-link"]` (:2620),
   não de qualquer link dentro de `.cat-slug`. E o `<i dir="ltr">em</i>` volta a
   peso 400 e `text-transform:none` (a UL de meta vem em caixa alta). */
.post-meta.categories a,
[class*='cat-slug'] a {
  display: inline-flex;
  color: var(--dd-category-meta-color);
  padding: 0;
  height: 100%;
  align-items: center;
}
.post-meta.categories i { text-transform: none; font-weight: 400; }
a[class*='cat-link'] { position: relative; }
/* style.css:2621-2632 — a régua colorida sobre o nome da categoria. No
   original a regra é GLOBAL (`a[class*="cat-link"]::before`) e é desfeita em
   quatro âmbitos: `.single-hentry-footer` (:2633), `#colophon.site-footer` e
   seus widgets (:4041-4044), `.widget.tfm_posts_widget` (boost:1421) e
   `.primary-menu`/`.primary-nav-sidebar` (:1810). Census dos 133 `cat-link`
   do corpus: todos vivem dentro de um desses âmbitos ou do rodapé do card ⇒
   o escopo positivo `.category-meta` abaixo é equivalente ao par
   global+supressões. */
.category-meta [class*="cat-slug"] a::before {
  content: '';
  position: absolute;
  top: calc(-1 * (var(--dd-entry-wrapper-flex-gap) + 1px));
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--dd-category-meta-color);
}

/* Chip do tempo de leitura (Fase 4, pente de 14/10).
   `style.css:5972-5976`: borda de 1px em `--default-border-color`, `padding:6px
   14px`, raio `--button-border-radius`. Não havia nenhuma regra para
   `.entry-meta-read-time` no tema — o `<li>` impresso em `_card.php` rendia como
   texto solto, sem caixa, em todas as listagens.
   O `.readtime` não tinha regra no oráculo (`grep` em style.css + boost.css = 0);
   o `font-weight:600` que estava aqui era invenção e foi removido.
   O ícone é `\e805` = `icon-clock` (`fontello.css:64`), colado pelo oráculo em
   `style.css:5967-5971` com `margin-right:5px`; aqui vira SVG mascarado (fontello
   é lixo proibido pelo anti-checklist §3), com `background:currentColor` para
   herdar a mesma cor do texto. */
.hentry-footer .entry-meta-read-time {
  /* 10b.6 (15/10) — o `<li>` NÃO é flex. A folha tinha `display:inline-flex` +
     `align-items:center` para sentar o relógio, e um container flex **descarta o
     texto de espaço em branco entre os filhos**: o chip renderizava "3 MinRead"
     colado (medido: `Read.left − .readtime.right = 0`), enquanto o oráculo imprime
     o markup idêntico, byte a byte, com um espaço entre os dois `<span>`
     (`home.html:496`: `…<span class="readtime">3 Min</span> <span
     class="read string">Read</span>…`) e o `<li>` em fluxo normal, onde o espaço
     vale. Caixa (borda, respiro, raio) inalterada; só o modelo de layout sai. */
  border: 1px solid var(--dd-border-color);
  padding: 6px 14px;
  border-radius: var(--dd-button-radius);
}
.hentry-footer .entry-meta-read-time::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  /* O glifo `\e805` do oráculo é texto inline (baseline); a máscara de 14px
     precisa de um alinhamento próprio para não sentar abaixo da linha. */
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* A palavra "Read" (`.string`) some do chip nas faixas estreitas de grade —
   `style.css:2886-2983`, quatro media queries. No oráculo a condição é
   `.has-sidebar .cols-3` (≥1361) e `.cols-3` (1061-1200 e 601-800), mais
   `[class*="cols"]` (≤400). `cols-4` só existe no footer
   (`footer-widget-area footer-columns cols-4`, zero `.hentry-footer` lá), logo
   as regras de `cols-4` são mortas; `mobile-compact` tem 0 ocorrências no corpus
   congelado. O gate `has-sidebar` (classe de `<body>`) é **coextensivo** ao grid
   de 3 colunas neste corpus: medido 1/1 em home/page2/autor/categoria/tag e 0 nas
   duas páginas de post — os quatro `@media` abaixo valem sem precisar da classe. */
@media (min-width: 1361px) {
  .cols-3 .hentry-footer .entry-meta-read-time .string { display: none; }
}
@media (min-width: 1061px) and (max-width: 1200px) {
  .cols-3 .hentry-footer .entry-meta-read-time .string { display: none; }
}
@media (min-width: 601px) and (max-width: 800px) {
  .cols-3 .hentry-footer .entry-meta-read-time .string { display: none; }
}
@media (max-width: 400px) {
  [class*='cols'] .hentry-footer .entry-meta-read-time .string { display: none; }
}

/* --------------------------------------------------------------------------
   12.1 Card "Olá, Tudo bem?" (loop-sidebar, Fase 4.4/4.5)
   Item fixo da grade na posição "depois do 2º post" (medido em home.html:571 e
   page2.html:571). É um `.article` comum — herda `flex-basis` de 1/3 da grade.
   O botão "Inscrever-se" do original é um modal `tfm-subscribe` (lixo, D-07).

   REESCRITO na fila (vii): a portagem antiga punha o fundo no CARD
   (`.article.loop-sidebar{background:#f2f2f2}`) e o respiro no `.post-inner`.
   Nenhum dos dois tem regra no corpus — `grep loop-sidebar` nas três folhas dá
   só três ocorrências, todas estruturais: `style.css:2473/2479` (exclusões
   `:not(.loop-sidebar)` da linha do card) e `:5642/5646` (flex-basis no media).
   A caixa real é do GRUPO interno (`home.html:572`:
   `.wp-block-group.has-light-dark-highlight-background-color.has-background`):
   `padding: var(--card-padding)` e `border-radius: var(--default-border-radius)`
   de `style.css:4476-4479` (`:where()`, peso 0-0-0 mas nada concorre; o raio vale
   **8px** porque o `<style>` inline do customizer reescreve
   `--default-border-radius: 8px`, que é o que os 23 leitores do token veem — os
   5px de `style.css:62` são o valor de folha, não o de página).
   A COR é a medição que **corrige esta seção**: `gutenberg.css:50-53` dá
   `background: var(--default-highlight-background)` (= `rgba(0,0,0,0.04)`,
   `style.css:241`; escuro `rgba(255,255,255,0.06)` em `:5002`), mas o `<style>`
   `global-styles` impresso pela página dá
   `.has-light-dark-highlight-background-color{background-color:
   var(--wp--preset--color--light-dark-highlight) !important}` com o preset
   **`#f2f2f2`** — e `!important` vence independentemente da ordem da folha. O
   preset tem definição **única** nas 9 capturas e **nenhum** degrau no bloco
   escuro, nem regra escura casando a classe (a única é `gutenberg.css:1552-1553`,
   escopo `.wp-block-cover … + .wp-block-cover__inner-container`, que não é este
   DOM) ⇒ a banda é **#f2f2f2 nos DOIS modos**, o token do tema é
   `--dd-highlight-background` e **não** `--dd-highlight`. Coincide com o
   `getComputedStyle` já medido na Fase 3.4/4.4 (`rgb(242,242,242)` nos dois).
   O `.post-inner` (`= .loop-sidebar-inner`, `style.css:2299-2305`) é flex coluna
   com `gap: var(--entry-wrapper-flex-gap)` e **zero padding**.

   O vão interno dos 4 elementos NÃO é 1rem: o card tem `class="… sidebar"` e o
   grupo tem `wp-block-group`, então `gutenberg.css:1403`
   (`.sidebar .wp-block-group [class*="wp-block"]:not(.avatar)`, 0-4-0) zera o
   `margin-top/bottom` de todos eles — inclusive do `<p>` (que no original carrega
   `wp-block-paragraph`) — e `:1430` devolve `margin-top: 1.5rem` a quem vem
   depois de um `.wp-block-heading`. Daí a sequência medida: h2 `margin:0`
   (`:1426`) · h6 1,5rem (heading depois de heading) · 1º `<p>` 1,5rem (depois do
   h6) · 2º `<p>` 0. O `<div style="height:20px" class="wp-block-spacer">` entre o
   2º `<p>` e o botão fica de fora com o botão (D-07).
   Cores: os dois títulos são `.wp-block-heading:not(.has-text-color)` ⇒
   `--widget-title-color` (`:1426`), não `--entry-title-color`; o `<p>` casa
   `.widget p` (`style.css:4358-4361`, e o `<section class="widget widget_block">`
   é pai do grupo) ⇒ `--widget-color`. */
.loop-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: var(--dd-entry-wrapper-flex-gap);
  width: 100%;
  height: 100%;
}
.loop-sidebar-group {
  padding: var(--dd-card-padding);
  border-radius: var(--dd-radius);
  background: var(--dd-highlight-background);
}
.loop-sidebar-title {
  margin: 0;
  color: var(--dd-widget-title-color);
  font-size: var(--dd-h2);
  font-weight: var(--dd-heading-weight);
  /* `:1426` é `margin:0` (shorthand, zera também o left/right da base 1.5rem 0). */
}
.loop-sidebar-subtitle {
  margin: 1.5rem 0 0;
  color: var(--dd-widget-title-color);
  font-size: var(--dd-h6);
  font-weight: var(--dd-heading-weight);
}
.loop-sidebar-text { margin: 0; color: var(--dd-widget-color); }
.loop-sidebar-subtitle + .loop-sidebar-text { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   12.2 Paginação (Fase 4.4; caixa re-escrita na varredura de 14/10)
   Último filho da grade (medido: `home.html:1148`, dentro de
   `.post-grid`, não como irmão dela) — precisa de `flex-basis: 100%` para
   trocar de linha e ocupar a largura toda.

   A portagem anterior **inventava a caixa**: borda 1px, fundo `--post-background`,
   raio 8px, padding horizontal e um estado `.current` rosé com texto branco. O
   oráculo (`style.css:4676-4774`) é outro objeto: número = célula 40×40 sem borda
   nem fundo, raio **25px** (círculo), peso 600, corpo 0.9375rem; o item atual é
   só `background: --default-highlight-background`; e **prev/next são botões**
   (`--button-*`: fundo da primária, padding 0.9375rem 1.25rem, raio 8px, 18px,
   branco) com a seta de fonte glifo antes/depois.
   Cores: o `<a>` numerado NÃO tem regra de cor própria — cai em `a{color:--link-color}`
   (`style.css:499-500`), por isso aqui também não se declara cor: o link é
   `#355c7d`/`#fff` e o `<span class="current">` herda a cor do corpo.
   Flatado de propósito: o oráculo gateia tudo por `main.has-pagination-numbers` /
   `.has-pagination-prev-next` e por `main:not(.has-pagination-text)`; as capturas
   (`home.html:427`, `page2.html:427`) sempre carregam as três classes e a variante
   "só prev/next" nunca aparece no site ⇒ a única variante portada é a medida, e a
   margem do 1º item vira `.prev{margin-right}` em vez de `.paged … :first-child`
   (a classe `paged` é do body do WP; o resultado computado nos dois lados é o mesmo).
   -------------------------------------------------------------------------- */
.navigation.pagination {
  flex-basis: 100%;
  /* style.css:4677 — `calc(--global-inner-elements-margin - --post-margin)`:
     0.625rem ≥1200px, 1.4583rem em 1061–1199px, 0 ≤1060px. */
  margin-top: calc(var(--dd-inner-elements-margin) - var(--dd-post-margin));
}
.nav-links {
  display: flex;
  flex-basis: 100%;
  position: relative;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  font-size: var(--dd-h6);
  max-width: var(--dd-content-max-width);
  margin-left: auto;
  margin-right: auto;
  /* style.css:4719 (`.pagination .nav-links`) vence o `padding-top` de 4708. */
  padding: 0;
}
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 25px;
  font-size: var(--dd-entry-meta-size);
  font-weight: 600;
}
.page-numbers.current { background: var(--dd-highlight); }

/* prev/next = botão (style.css:4722-4742). `--button-font-size` é
   `--body-font-size` (18px) e não o 0.9375rem dos números — os dois seletores
   têm o mesmo peso e este vem depois, mas aqui a especificação é explícita. */
.nav-links .page-numbers.prev,
.nav-links .page-numbers.next {
  display: inline-flex;
  align-items: center;
  background: var(--dd-accent);
  color: var(--dd-accent-foreground);
  padding: var(--dd-button-padding);
  border-radius: var(--dd-button-radius);
  font-size: var(--dd-body-font-size);
  font-weight: 600;
}
.nav-links .page-numbers.prev:hover,
.nav-links .page-numbers.prev:focus,
.nav-links .page-numbers.next:hover,
.nav-links .page-numbers.next:focus {
  background: var(--dd-accent-hover);
  color: var(--dd-accent-foreground);
}
.nav-links .page-numbers.prev { margin-right: 0.5rem; }
.nav-links .page-numbers.next { margin-left: 0.5rem; }

/* Setas: fontello `\e802` (`icon-right-small`, style.css:4743-4762) → `'\203A'`,
   o mesmo glifo já adotado na trilha e na navegação do post (§3 proíbe a fonte).
   `has-pagination-text` está sempre presente nas capturas ⇒ o rótulo por extenso
   ("Posts Recentes" / "Posts Anteriores") fica visível e a seta o acompanha. */
.nav-links .page-numbers.next::after {
  content: '\203A';
  margin-left: 8px;
  font-weight: normal;
}
.nav-links .page-numbers.prev::before {
  content: '\203A';
  margin-right: 8px;
  font-weight: normal;
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   12.3 Estado vazio
   -------------------------------------------------------------------------- */
.no-posts { padding: var(--dd-elements-margin) 0; color: var(--dd-meta-color); text-align: center; }

/* --------------------------------------------------------------------------
   11.1 Widgets da sidebar (Fase 4.5) — além do que a seção 11 já cobre
   (título, listas, numerado, recentes). Busca e CTA de apoio.
   -------------------------------------------------------------------------- */
/* Busca da sidebar (fila (vii), 14/10) — o oráculo é o bloco Search na variante
   `__button-outside __text-button`, e a folha do tema (jinko `style.css`, que chega
   ANTES de `gutenberg.css` mas DEPOIS das folhas core) decide quase tudo:
   · container `gutenberg.css:1252` (0-1-0): coluna com `gap: --entry-wrapper-flex-gap`
     (1,25rem; 1rem abaixo de 600px);
   · label `style.css:777` + core `__label{width:100%}` + `gutenberg.css:1272`:
     `--title-font`, peso 600, `margin-bottom: 0.5rem` (que SOMA ao gap do container)
     e `font-size: var(--block-widget-title-font-size)` — token com **0 definições**
     no corpus (IACVT ⇒ `unset` ⇒ herda o corpo, 16px). Não é título de widget:
     `.wp-block-heading` não casa aqui, e por isso o `<label>` saiu do §11;
   · wrapper `gutenberg.css:1257` + core `:where()`: `position:relative; display:flex`
     com `flex:auto; flex-wrap:nowrap; max-width:100%`;
   · input `style.css:849-877` (0-1-1, vence o `:where(__input)` core): borda 1px
     `--default-border-color`, raio `--input-border-radius` (=`--default-border-radius`,
     sobrescrito para 8px no `<style>` em linha), fundo `--input-background`,
     cor `--input-color`, corpo 16px, `letter-spacing:-0.015em`,
     `padding: 0.875rem 1rem` (fallback de `--input-padding`, que não é definido) e
     `margin: var(--global-elements-margin) 0` → também IACVT ⇒ **0**; o core ainda
     empresta `flex-grow:1` e `min-width:3rem`;
   · botão: base `style.css:928-965` (fundo `--button-background`, texto
     `--button-color`, `--button-padding`, peso/corpo do botão) +
     `gutenberg.css:1264` (0-1-0, mais tarde) que zera a borda e troca o raio por
     `--input-border-radius`, e o `margin-left:10px` do core, que a base não declara.
   O ícone de busca NÃO mora aqui: ele é do painel do cabeçalho (§8). */
.widget-search .search-block {
  display: flex;
  flex-direction: column;
  gap: var(--dd-entry-wrapper-flex-gap);
}
.widget-search .search-label {
  display: block;
  width: 100%;
  margin: 0 0 0.5rem 0;
  font-family: var(--dd-title-font);
  font-weight: 600;
}
.widget-search .search-inner { position: relative; display: flex; flex: auto; flex-wrap: nowrap; max-width: 100%; }
.widget-search .search-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  flex-grow: 1;
  min-width: 3rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--dd-border-color);
  border-radius: var(--dd-radius);
  box-shadow: none;
  background: var(--dd-input-background);
  color: var(--dd-input-color);
  font-family: var(--dd-body-font);
  font-size: 16px;
  letter-spacing: -0.015em;
}
.widget-search .search-input:focus { border-color: currentColor; }
.widget-search .search-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  display: inline-block;
  line-height: 1.25;
  margin: 0;
  opacity: 1;
  padding: var(--dd-button-padding);
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
  letter-spacing: normal;
  text-transform: none;
  font-family: var(--dd-body-font);
  font-size: var(--dd-body-font-size);
  font-weight: 600;
  background: var(--dd-accent);
  color: var(--dd-accent-foreground);
  margin-left: 10px;
  word-break: normal;
  border: 0;
  border-radius: var(--dd-radius);
}
.widget-search .search-button:focus,
.widget-search .search-button:hover {
  text-decoration: none;
  background: var(--dd-accent-hover);
  color: var(--dd-accent-foreground);
}

/* A lista de texto "Posts recentes" da sidebar e a do rodapé vivem na família
   `.latest-posts-list` do §11 (com o estado `has-dates` do rodapé); o selo e os
   títulos do widget numerado também — o §11 foi re-derivado na fila (vii) e as
   duas regras antigas que restavam aqui (`.recent-posts-text-list`, `.widget-grid`)
   foram removidas: a primeira escondia a borda que o oráculo mantém e encolhia o
   título para 0,875rem, e a segunda abria 2,5rem de vão entre as linhas do widget
   num seletor que o container do oráculo não usa. */
.no-comments { margin: 0; font-size: var(--dd-entry-meta-size); }

/* CTA de doação da sidebar = CAPA (D-22, fila (ix)). Geometria da biblioteca de
   blocos: `min-height:430px`, `padding:1em`, `overflow:hidden`+`clip`, flex
   centralizado, `position:relative` e o par de `background-position:50%` /
   `box-sizing:border-box` (`style.min.css` baixado do vivo, bloco
   `.wp-block-cover,.wp-block-cover-image`). O `padding` não vale aqui:
   `.sidebar .wp-block-cover` (gutenberg.css:1372-1375) troca por
   `--card-padding` (1,875rem, style.css:242) e põe `align-items:center`, vencendo
   o `align-items:flex-start` de style.css:4364 porque o `<link>` do gutenberg é o
   ÚLTIMO dos três medidos no vivo (boost → style → gutenberg). Raio e sombra
   também vêm de `:4364-4366` (`--default-border-radius` = 8px inline no `<style>`
   da página, não os 5px da base; `--post-box-shadow` sem override). */
.widget-donate .donate-cover {
  align-items: center;
  background-position: 50%;
  border-radius: var(--dd-radius);
  box-shadow: var(--dd-post-box-shadow);
  box-sizing: border-box;
  color: var(--dd-donate-cover-color);
  display: flex;
  justify-content: center;
  min-height: 430px;
  overflow: hidden;
  overflow: clip;
  padding: var(--dd-card-padding);
  position: relative;
}
/* O `<img>` de fundo é absolto e cobridor (`.wp-block-cover .wp-block-cover__image-background`:
   `border/margin/padding:0`, inset 0, `width/height:100%`, `max-*:none`,
   `object-fit:cover`). */
.widget-donate .donate-cover-image {
  border: none;
  inset: 0;
  margin: 0;
  max-height: none;
  max-width: none;
  object-fit: cover;
  padding: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}
/* Véu: `.has-background-dim` (inset 0 + absolto) com o degrau `-60` de opacidade;
   a cor é a atribuição inline medida, não o `#000` default da folha. */
.widget-donate .donate-cover-veil {
  background-color: var(--dd-donate-cover-veil-color);
  inset: 0;
  opacity: 0.6;
  position: absolute;
}
/* O véu NÃO é #a9a2c7 nos dois modos: `body.tfm-dark-mode .sidebar .wp-block-cover.is-light
   .wp-block-cover__background{background-color:var(--post-background) !important}`
   (style.css:5017-5023) veste o fundo do post sobre a capa — a da CTA tem `is-light`
   no vivo — e o `!important` ganha do estilo inline. O par de luz está COMENTADO na
   folha do fabricante (`:5018`), então só o escuro muda. Sem `!important` aqui: o
   seletor com `body[data-color-mode]` (0-2-1 + elemento) já bate o de base (0-2-0). */
body[data-color-mode='dark'] .widget-donate .donate-cover-veil {
  background-color: var(--dd-post-background);
}
/* Container interno: `color:inherit;position:relative;width:100%` (biblioteca) +
   `max-width:--site-width;margin-top:0` (gutenberg.css:220-226), com o `padding:0`
   de gutenberg.css:1379-1381 sobre os 2rem daquela mesma regra. */
.widget-donate .donate-cover-inner {
  color: inherit;
  margin-top: 0;
  max-width: var(--dd-site-width);
  padding: 0;
  position: relative;
  width: 100%;
}
/* `.sidebar .wp-block-cover.has-text-color *:not(.has-text-color):not(input)`
   (style.css:4371-4376) é o `!important` que impede `.widget p` (`:4360`) de
   pintar o parágrafo de cinza sobre a foto. Com o markup renomeado o `!important`
   sobra: 0-2-1 daqui bate 0-1-1 dali. */
.widget-donate .donate-cover-inner :is(h5, h2, p) {
  color: inherit;
  margin: 0;
}
/* Os dois `wp-block-spacer` do oráculo (30px entre o `<h5>` e o `<h2>`, 10px entre
   o `<h2>` e o `<p>`) são classe de bloco proibida (§3); materializados como
   `margin-top` dos vizinhos, o vão líquido é o mesmo. */
.widget-donate .donate-cover-inner h5 { font-size: var(--dd-h5); }
.widget-donate .donate-cover-inner h2 { font-size: var(--dd-h2); margin-top: 1.875rem; }
.widget-donate .donate-cover-inner p { margin-top: 0.625rem; }

/* --------------------------------------------------------------------------
   14. Post individual (Fases 5.2/5.3/5.4)
   Autoria numérica: `referencias/html/post-arcanjos.html` (única captura
   válida de single — `post-mitos.html` é página de 404) + `style.css`/
   `boost.css` linha a linha. Substituições de glifo (fontello é lixo, anti-
   checklist §3): aspas do blockquote `'\201D'`, setas da navegação
   `'\2039'`/`'\203A'`, tag do chip como data-URI SVG.
   -------------------------------------------------------------------------- */

/* 14.1 Contêiner e hero ------------------------------------------------------------------ */
.content-area.the-post {
  display: flex;
  flex-direction: column;
  gap: var(--dd-inner-elements-margin);
  width: 100%;
  max-width: var(--dd-site-max-width);
  margin: 0 auto;
}
.the-post > .article { position: relative; }
.the-post > .article .thumbnail-wrapper { margin-bottom: 0.75rem; }
.thumbnail-hero .post-thumbnail { padding-bottom: var(--dd-thumbnail-hero-padding); }
.thumbnail-hero .post-thumbnail a { display: block; position: absolute; inset: 0; padding-bottom: var(--dd-thumbnail-hero-padding); }
.thumbnail-hero .post-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* 14.2 Header do post (author / título / meta) ------------------------------------------- */
/* style.css:4135 (`order:20`) + 2310-2317 (`.entry-header`: flex de coluna,
   `gap: var(--entry-header-flex-gap)` 1.25rem em `:225`, e a **segunda** regra
   `.entry-header{gap:2rem}` em `:2316`, mesma especificidade e depois no fonte ⇒
   2rem). CORREÇÃO (fila (vi), 14/10): o `gap` estava no `--dd-inner-elements-margin`
   (3.125rem ≥1061 / 1.6667rem ≤1060) e o header tinha `width:100%` +
   `max-width:800px` + `margin:0 auto` inventados — o oráculo só dá cap de
   `--site-width` ao header da variante `.cover` (`:4138`), que o post não usa.
   Com o cap inventado, o título e a meta do post ficavam 50–80px mais estreitos
   que o texto do corpo em qualquer viewport. */
.single-entry-header {
  order: 20;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  width: 100%;
  max-width: var(--dd-content-max-width);
  margin-left: auto;
  margin-right: auto;
}
/* style.css:4150 — os filhos ocupam a coluna inteira de 800px.
   **16/10**: o `.single-entry-header` agora tem o `max-width` e `margin: 0 auto`,
   então os filhos só precisam de `width: 100%` para preencher a coluna. */
.single-entry-header > * {
  width: 100%;
}
/* style.css:2469/138 — sem `--entry-title-color-single` no site, cai no da cor do
   título medida (clara #131315 / escura #ffffff).
   CORREÇÃO (fila (vi), 14/10): falta o `font-size` base. No oráculo o título do
   post é `h1.entry-title` e **não há regra de `.entry-title` que dê tamanho a
   ele** (`:2430` só dá margin/letter-spacing/peso; os tamanhos vêm das regras
   `.cols-N .entry-title`, que não alcançam o single) ⇒ quem manda é
   `h1{font-size:var(--h1-font-size)}` (`:389-394`). Aqui a `.entry-title`
   genérica do card (seção 11, `--dd-entry-title-size` 1.625rem) tem a mesma
   especificidade e vem **depois** do `h1` global, então acima de 1361px — onde
   nenhuma das 4 faixas abaixo dispara — o título do post saía 26px em vez dos
   59px do oráculo. A medição de 13/10 foi a 591px, onde as duas cadeias
   coincidem (2.5rem) e o defeito é invisível. */
.single-entry-title {
  font-size: var(--dd-h1);
  color: var(--dd-entry-title-color);
  margin: 0;
  text-align: left;
}
/* style.css:2519-2520 — a meta do post usa o fallback de 1rem, não 0.9375rem
   do card. */
.the-post > .article .entry-meta:not(.category-meta) ul {
  font-size: var(--dd-single-entry-meta-font-size);
}
.the-post .entry-content hr { height: 0; }
/* style.css:2693/3097 — no single a view-count é impressa (no card some) e o
   número vai em caixa alta. */
.single-entry-header .after-title .view-count { display: inline; }
.entry-meta .view-count .count { text-transform: uppercase; }

/* Curtidas (D-06) — o slot `.entry-meta-comment-count` do original, vestido
   com a tipografia de meta medida. Os tokens de cor são da marca (§5 do plano:
   --dd-accent #c06c84 / hover #f67280), o formato é do original. */
.dd-like {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--dd-meta-link-color);
  cursor: pointer;
}
.dd-like:hover .dd-like-icon { color: var(--dd-accent-hover); }
.dd-like-icon { width: 1em; height: 1em; color: var(--dd-accent); flex: none; }
.dd-like-icon-fill { display: none; }
.dd-like[aria-pressed='true'] .dd-like-icon-outline { display: none; }
.dd-like[aria-pressed='true'] .dd-like-icon-fill { display: inline-block; }
.dd-like:focus-visible { outline: 2px solid var(--dd-accent); outline-offset: 2px; }

/* 14.3 Conteúdo (tipografia do post) ------------------------------------------------------ */
/* style.css:4156-4200 — wrapper relativo (abriga a share lateral absoluta) e
   a coluna de 800px com 1.375rem de corpo. */
.single-content-wrapper { position: relative; order: 60; }
.entry-content {
  width: 100%;
  max-width: var(--dd-content-max-width);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--dd-single-entry-font-size);
  /* Removido por medição (16/10): a folha aplicava `line-height: 1.5` aqui
     citando `style.css:426`, mas aquela regra é do **`p`**, não do contêiner. No
     oráculo `.entry-content` herda os 1,15 do `html` (medido: 23px sobre 20px, e
     o `blockquote` idem); o 1,5 chega pelo `p` e pelo `li` globais. Deixar o
     contêiner em 1,5 dava linha alta a todo texto que não é parágrafo nem item
     de lista — e era a maior fonte de divergência de altura do corpo do post. */
  color: var(--dd-entry-color);
  padding-top: calc(var(--dd-inner-elements-margin) / 2);
}
/* style.css:4176 — em `body:not(.has-sidebar)` o conteúdo do post **estica na
   janela inteira** (`100vw` com `margin-left: calc(-50vw + 50%)`); `style.css:5330`
   reafirma o mesmo na banda ≤1060. Medido: `has-sidebar` é zero nas capturas do
   post ⇒ a condição do oráculo é sempre verdadeira aqui. Sem esta regra o
   `.entry-content` fica dentro do gutter do `.wrap` e a coluna de texto rende
   50–100px a menos em mobile (fila (vi), 14/10). O cap de 1400px da base é o
   próprio `--site-width` (inline `home.html:186` = `1400px`).
   **REMOVIDO 16/10**: o operador quer o conteúdo contido em 800px, não esticado.
   A regra abaixo fazia `.entry-content` ocupar 100vw, sobrescrevendo o
   `max-width: 800px` da base. */
.entry-content a { color: var(--dd-entry-link-color); }
.entry-content a:hover,
.entry-content a:focus { color: var(--dd-entry-link-hover-color); }
.entry-content > * {
  margin-left: auto;
  margin-right: auto;
}
/* style.css:4192 — o cap de coluna é dado por uma regra de especificidade 0-8-1
   cujos `:not()` **excluem** os blocos alinhados; sem as exclusões o `.alignfull`
   de `:4802` seria esmagado aqui (mesma classe, esta regra vem depois). */
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
  max-width: var(--dd-content-max-width);
  width: var(--dd-content-width);
}
/* style.css:4802-4813 — os dois blocos de alinhamento do Gutenberg. `--site-width`
   do oráculo (inline `home.html:186`) vale 1400px, igual ao cap do tema. As
   variantes `.has-sidebar` (`:4815/4819`) e a de contentor aninhado (`:4822-4825`)
   não são portadas: `has-sidebar` é zero nas capturas do post e nenhum bloco
   aninhado do único post congelado usa essas classes. */
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.alignwide,
.is-style-wide {
  width: var(--dd-content-width);
  margin-left: auto;
  margin-right: auto;
  max-width: var(--dd-site-max-width);
}
.entry-content > *:not(h2, h3, h4, h5, h6) { margin-bottom: var(--dd-content-margin); }
.the-post .entry-content > *:last-child { margin-bottom: 0; }
/* Ritmo vertical dos blocos de conteúdo (fila (vii), 14/10) — no oráculo a família
   inteira ancora em `[class*="wp-block"]` (`gutenberg.css:125` 0-1-0, `:130` 0-3-0,
   `:137` 0-2-0) e o HTML migrado é limpo na 8.3 ⇒ o seletor é substituído por
   **filho direto**. A substituição é exata porque o censo na REST dos 20 posts
   (14/10) deu **443/443 filhos diretos com classe de bloco** (403 `p`, 11 `hr`,
   8 `ul`, 8 `h2`, 8 `h3`, 4 `blockquote`, 1 `figure`) e **zero sem**.
   Especificidade resolvida, na ordem do fonte: `style.css:4147` (`:not(h2)…:not(h6)`,
   **0-1-5**) vence o `margin-bottom` de `:125` ⇒ não-título fica com 1.5rem; o título
   não é nomeado por `:4147` e fica com os 2rem de `:125` (`--default-content-margin`
   + ele/3). O topo é 0 (`:137`) exceto entre dois blocos, onde `:130` (0-3-0) manda
   `calc(1.5rem + 17px)` = **41px** — por colapso, o par p–p do site vale 41px, não os
   24px que a folha tinha até aqui. `:140` (`p + [class*="wp-block"]`, 0-2-1) é
   **inerte neste conteúdo**: perde de `:130` nos 403 pares medidos e só valeria para
   um `<p>` sem classe de bloco, que não existe na fonte. */
.entry-content > * { margin-top: 0; }
.entry-content > * + * { margin-top: calc(var(--dd-content-margin) + 17px); }
.entry-content > :is(h2, h3, h4, h5, h6) { margin-bottom: calc(var(--dd-content-margin) + var(--dd-content-margin) / 3); }
.entry-content p img:not(.alignleft):not(.alignright) { margin-top: 2rem; margin-bottom: 1.8rem; }
/* style.css:490 — o cap de 800px de `.entry-content > *` é anulado no original
   (hr é filho direto e a regra de 4192 não o nomeia). */
/* style.css:489-492 dá ao `hr` a borda e o respiro de 4rem; o cap de coluna vale
   também para ele: `style.css:4192` (`body:not(.home):not(.blog)
   .entry-content > *:not(.alignwide)…`, especificidade 0-8-1) nomeia o `hr` pelo
   `*` e não o exclui em nenhum dos `:not()`, enquanto a regra nomeada
   `.the-post .entry-content hr` (0-2-1) só trata borda/cor/margem. CORREÇÃO
   (fila (vi)): a folha tinha `width/max-width:100%` aqui, com o argumento
   invertido ⇒ o filete atravessava a janela inteira em vez de parar nos 800px.
   Medido: zero `hr` no único post congelado (`post-arcanjos.html`), logo é regra
   sem superfície no congelado e viva a partir da Fase 8. */
.entry-content hr {
  border: 0;
  border-top: 1px solid var(--dd-border-color);
  /* `style.css:457` dá `margin: 4rem auto`; nos 11 `<hr>` reais do conteúdo migra-
     do (`hr.wp-block-separator.has-alpha-channel-opacity`, censo REST 14/10) quem
     decide é `gutenberg.css:1205` — `margin-top/bottom: 3rem` com `!important`, que
     vence a 0-1-5 de `:4147` e os 41px de `:130`. Os 4rem ficam só para o `hr` fora
     do conteúdo (a mesma regra do oráculo o nomeia por elemento). */
  margin: 3rem auto;
}

.entry-content ul,
/* `style.css:510` dá `margin: 1.5rem 0 1.5rem 3rem`; os dois verticais são
   sobrescritos no oráculo (fundo por `:4147`, topo por `:137`/`:130`) ⇒ sobra só o
   recuo, e ele continua vindo da mesma regra. */
.entry-content ol { margin-left: 3rem; }
.entry-content ul ul,
.entry-content ol ul { list-style: circle; } /* style.css:524-531 */
.entry-content ul ul ul { list-style: square; }
.entry-content ol ol ol { list-style: lower-roman; }
/* `.entry-content li { line-height:1.5; margin:0 0 0.5rem 1rem }` vivia aqui e
   foi **subtraído**: é exatamente a regra global de `li` (§3, Lists), que o
   oráculo declara uma vez para o documento inteiro. */
.entry-content li > ul,
.entry-content li > ol { margin: 1rem 0 0 0; }
.entry-content li::marker { color: var(--dd-primary-theme); }

.entry-content blockquote {
  border: 0;
  border-left: 0.4rem solid var(--dd-primary-theme);
  color: inherit;
  /* `style.css:590` dá `margin: calc(1.5rem * 1.5) 0` (= 2.25rem) e
     `gutenberg.css:381` acrescenta `margin-left/right: auto` — no post real os
     verticais são sobrescritos pela família de blocos (`:4147` manda 1.5rem no
     fundo, `:137`/`:130` no topo), então a regra nomeada não contribui nada aqui;
     o horizontal já vem de `.entry-content > *`. */
  padding: 0 0 0 2rem;
}
/* `gutenberg.css:133` (`[class*="wp-block"] [class*="wp-block"]`, 0-2-0) zera o
   ritmo dos blocos aninhados. Único caso vivo no censo da REST (14/10): os
   `<p class="wp-block-paragraph">` dentro das 4 `blockquote.wp-block-quote` — na
   Vigília Pascal são 3 parágrafos seguidos **sem vão algum**, comportamento que a
   folha anterior não replicava. `li` não entra: não tem classe de bloco, fica com
   `style.css:513`. */
.entry-content blockquote p { margin-top: 0; margin-bottom: 0; }
/* style.css:616-640 — o slot de 40px que o fontello `\e806` ocupava recebe a
   aspas tipográfica; o cite traz a régua de 40px do original. */
.entry-content blockquote p:first-child { position: relative; padding-top: 40px; }
.entry-content blockquote p:first-child::before {
  content: '\201D';
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--dd-primary-theme);
}
.entry-content blockquote p:last-child,
.entry-content blockquote p:last-of-type { margin: 0; }
.entry-content blockquote cite {
  display: inline-block;
  position: relative;
  padding-top: 1.5rem;
  margin-top: 1rem;
  font-size: 1.0625rem;
  font-style: normal;
  line-height: 1.25;
  color: var(--dd-meta-color);
}
.entry-content blockquote cite::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--dd-border-color);
}
.entry-content cite { font-style: normal; color: var(--dd-meta-color); }
.entry-content cite a { color: var(--dd-meta-link-color); }

.entry-content code,
.entry-content kbd,
.entry-content pre,
.entry-content samp {
  font-family: monospace;
  font-size: 0.9em;
  font-weight: normal;
  padding: 0.3rem 0.6rem;
  word-break: break-word;
  border-radius: var(--dd-radius);
  border: 1px solid var(--dd-border-color);
  background: var(--dd-highlight);
}

/* `style.css:652` é `figure{display:block;margin:0}` (0-0-1): no `<figure>` do
   embed do Via Sacra os verticais perdem para a família de blocos (`:4147` → 1.5rem
   embaixo, `:130` → 41px em cima) ⇒ só o `display` sobrevive ao pente. */
.entry-content figure { display: block; }
.entry-content iframe { display: block; max-width: 100%; }
.entry-content sup { top: -0.5em; }
.entry-content sub { bottom: -0.25em; }
.entry-content sub, .entry-content sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
.entry-content b, .entry-content strong { font-weight: 700; }
/* `<mark>` (7 ocorrências no conteúdo dos 20 posts): **zero** regras nas 5 folhas que
   o site carrega e zero no `common.min.css` inline ⇒ é o amarelo da UA que aparece
   no original. Nada portado — portar seria divergir. */

/* 14.4 Share do post (lateral fixa e rodapé) ---------------------------------------------- */
/* boost.css:638-745 — a barra de redes do post: 34px, rótulo impresso no
   rodapé, capitalização por rede. */
.share-wrapper.side { display: flex; flex-direction: column; gap: var(--dd-inner-elements-margin); }
/* boost.css:651-659 — a `<ul>` do share NÃO tem tamanho nem peso: os 18px/600
   são do `<li>` do ícone (`:684-692`). Deixá-los na lista vestia também o rótulo
   "Compartilhar", que no oráculo é 0.9375rem/normal (`:1239-1247`). */
.social-icons {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;                  /* :658 — `--tfm-social-icons-gap` nunca é definido; fallback 0.5rem */
  list-style: none;
  text-transform: capitalize;   /* :657 */
}
.social-icons .social-icon {
  display: flex;                /* :684-692 */
  margin: 0;
  border: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}
.the-post .hentry-footer .social-icons { flex-wrap: wrap; } /* :672-677 */
.social-icons .social-icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--dd-meta-link-color);
  text-decoration: none;
  font-size: 1.125rem;          /* :713 */
}
/* boost.css:973-978 — o raio do chip só existe na variante `icon-border`
   (`--tfm-social-icons-border-radius` nunca definido ⇒ cai em
   `--default-border-radius`, 8px). Na lista genérica (`:709`) o raio é 0
   (`--tfm-social-icon-border-radius`, idem) — por isso ele sai daqui. */
.social-icons.icon-border .social-icon a {
  outline: 1px solid var(--dd-border-color);
  outline-offset: -1px;
  border-radius: var(--dd-radius);
}
.social-icons svg { width: 18px; height: 18px; }
/* boost.css:1239-1250 — o rótulo do compartilhamento é um `<li>` flex do próprio
   bloco, centralizado, na cor/ tamanho de meta. */
.share-wrapper .share-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  margin: 0;
  font-size: var(--dd-entry-meta-size);
  color: var(--dd-meta-color);
}
.share-wrapper .share-text span:nth-child(2) { margin-left: 3px; }
/* boost.css:771-777 — SÓ no rodapé do post o rótulo sobe para
   `--body-font-size` (1.125rem) e ganha o travessão. O travessão do oráculo está
   escopo nestes seletores (e no do card, :1215), nunca na lista genérica — a
   portagem anterior o punha também na barra lateral. */
.single-hentry-footer .share-wrapper .share-text { font-size: var(--dd-body-font-size); }
.single-hentry-footer .share-wrapper .share-text::after { content: '\2014'; margin-left: 5px; }

/* boost.css:1054-1091 — coluna absoluta à esquerda da coluna de 800px, com o
   bloco interno sticky a 120px. */
.single-content-wrapper > .share-wrapper.side {
  position: absolute;
  left: calc((100% - var(--dd-content-max-width)) / 2 / 2 - 18px);
  top: 0;
  height: 100%;
  z-index: 2;
  padding-top: calc(var(--dd-inner-elements-margin) / 2);
}
.single-content-wrapper > .share-wrapper.side .share {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
}
/* boost.css:1070-1091 — a orientação em coluna é da share LATERAL; o que se
   esconde ali são o segundo span ("this article", `:1085-1088`) e o nome de
   rede (`:1089-1091`), NUNCA o `<li class="share-text">`: no oráculo a barra
   lateral imprime "Compartilhar" acima da coluna de ícones. */
.single-content-wrapper > .share-wrapper.side .social-icons { flex-direction: column; align-items: center; }
.single-content-wrapper > .share-wrapper.side .share-this-text { display: none; }
/* As redes do post não imprimem nome (o SVG substitui o glifo), então
   `.tfm-social-name` não tem equivalente no tema. */

/* boost.css:260-384 — cor de marca por rede (no claro; o escuro volta para a
   cor de link de meta medida, boost.css:451-458). */
.social-icons.brand .social-icon-twitterx a { color: #000000; }
.social-icons.brand .social-icon-facebook a { color: #3a589e; }
.social-icons.brand .social-icon-linkedin a { color: #0077b5; }
.social-icons.brand .social-icon-pocket a { color: #ee4056; }
.social-icons.brand .social-icon-vkontakte a { color: #5082b9; }
.social-icons.brand .social-icon-odnoklassniki a { color: #f58220; }
.social-icons.brand .social-icon-whatsapp a { color: #2cb742; }
body[data-color-mode='dark'] .social-icons.brand .social-icon a { color: var(--dd-meta-link-color); }

/* 14.5 Rodapé do post (categoria, tags, share) -------------------------------------------- */
/* style.css:3785-3801 — o rodapé do post é flex de LINHA com `wrap`; cada filho
   ocupa a linha inteira por `flex-basis:100%`, EXCETO a linha de tags, que nasce
   10%/grow 1 (`:3831-3834`) e cresce até a largura toda. A portagem anterior
   usava `flex-direction:column`, o que inverte o eixo e faria de `flex-basis`
   ALTURA — é por isso que a banda de 600px (`:5785-5800`) não era portável
   literalmente. Com o eixo do oráculo restaurado, ela volta como medida. */
.single-hentry-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dd-inner-elements-margin);
  width: 100%;
  max-width: var(--dd-content-max-width);
  margin: var(--dd-inner-elements-margin) auto 0 auto;
  border: 0; /* :3791 — a borda é por filho, não no bloco */
}
.single-hentry-footer > * {
  border-top: 1px solid var(--dd-border-color);
  padding-top: var(--dd-inner-elements-margin);
  flex-basis: 100%;
}
/* A share do rodapé não tem regra incondicional no oráculo: ela só é cortada
   acima de 1060px (`boost.css:1092-1096`), regra que está em §14.4b. */
.single-hentry-footer .footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dd-post-margin);
  font-size: 1.125rem;
  font-weight: 500;
}
.single-hentry-footer .footer-meta.entry-meta .categories {
  justify-content: flex-end;
  font-size: 1.125rem;
  gap: calc(var(--dd-entry-meta-flex-gap) * 2);
}
/* style.css:3815-3820 — chip de categoria: outline 2px na cor do texto
   (`outline: 2px solid` sem cor = currentColor), sem régua (see 12 → escopo
   `.category-meta` já remove o ::before do card aqui). */
.single-hentry-footer [class*='cat-slug'] a[class*='cat-link'] {
  outline: 2px solid;
  outline-offset: -2px;
  padding: 11px 14px;
  border-radius: var(--dd-button-radius);
}
.entry-meta.post-tags { flex-basis: 10%; flex-grow: 1; }
.post-tags .single-post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--dd-entry-meta-flex-gap) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* style.css:3838-3878 — chip de tag. */
a[class*='tag-link'] {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--dd-meta-link-color);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.1;
  margin: 0;
  padding: 11px 14px;
  outline: 2px solid var(--dd-border-color);
  outline-offset: -2px;
  border-radius: var(--dd-button-radius);
  background: var(--dd-tag-background);
}
/* 16/10 — `\f292` = `icon-hashtag` (`fontello.css:124`), mas **não é o caractere
   "#"**: é o glifo de ícone-fonte. Medido no oráculo vivo por rasterização do
   glyph a 120px (canvas, limiar α>128): caixa de avanço 120 (= 1em), ink
   **116 × 103**, 9,4px acima da baseline e 0,8 abaixo; duas hastes de **18px**
   de largura e duas barras de **20px**, todas com a mesma inclinação
   **dx/dy = −0,24** (≈ −13,5°). O "#" do Jost é outra proporção: ink
   0,605·px de largura por 0,70·px de altura (razão 0,86) contra 1,17 do glifo —
   **nenhum `font-size` casa as duas dimensões**, então `content: '#'` (a
   tentativa anterior) reproduz um cerquilha tipográfico menor e mais estreito,
   não o ícone. A máscara abaixo é o traçado medido, polígono a polígono, no
   espaço de 1em = 116×103; o box declarado do oráculo era `12px × 13,2px`
   (avanço 1em × `line-height:1.1` herdado de `style.css:3838-3852`), e é esse
   box que a regra reproduce — `fontello` fica fora da folha (anti-checklist §3). */
a[class*='tag-link']::before {
  content: '';
  flex: none;
  width: 12px;
  height: 13.2px;
  margin-right: 3px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 103'%3E%3Cpath d='M43 0h17L35.3 103H18.3zM79 0h18L72.3 103H54.3zM13.2 24h102l-4.5 19H8.7zM4.6 60h102l-4.6 19H0z'/%3E%3C/svg%3E") center / 11.6px 10.3px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 116 103'%3E%3Cpath d='M43 0h17L35.3 103H18.3zM79 0h18L72.3 103H54.3zM13.2 24h102l-4.5 19H8.7zM4.6 60h102l-4.6 19H0z'/%3E%3C/svg%3E") center / 11.6px 10.3px no-repeat;
}
a[class*='tag-link']:hover,
a[class*='tag-link']:focus { background: var(--dd-highlight); }
.tag-link-count {
  font-weight: 500;
  font-size: 12px !important;
  color: var(--dd-meta-color);
  margin-left: 8px;
  margin-top: 3px;
}

/* 14.6 Navegação anterior/próximo (Fase 5.4) ---------------------------------------------- */
/* Medido em post-arcanjos.html + na contraparte viva (13/10): o original NÃO
   imprime posts relacionados nem bio de autor aqui — as classes
   `has-tfm-related-posts`/`has-author-bio`/`has-tfm-read-time` não geram HTML.
   A label do próximo post ("Próximo Post") só existe no site vivo. */
.after-content {
  display: flex;
  flex-direction: column;
  gap: var(--dd-inner-elements-margin);
}
.after-content > div:not(.alignwide) {
  margin: 0 auto;
  width: 100%;
  max-width: var(--dd-content-max-width);
  padding-top: var(--dd-inner-elements-margin);
  /* 16/10 — a frisa que o operador pediu como "HR antes dos links de
     anterior/próximo" não é um `<hr>` no oráculo (0 ocorrências de `<hr`/
     `wp-block-separator` no post congelado): é `border-top` da própria
     `style.css:3488-3492`. A folha tinha fundido as duas regras do oráculo
     (`:3488` caixa + `:3494` respiro) em uma só e **perdido a borda** — ficou o
     respiro, sem a linha. Um `<hr>` seria inventar um elemento para dizer o que
     uma borda já diz no fonte. */
  border-top: 1px solid var(--dd-border-color);
}
.single div.post-navigation { order: 40; max-width: var(--dd-content-max-width); margin-left: auto; margin-right: auto; }
/* Valor de BASE do token `--cols-4-entry-title-font-size` (style.css:145).
   As 4 faixas responsivas dele estão em §14.1 — não são fixos. */
.post-navigation .article .entry-title { font-size: 1.625rem; } /* style.css:3891 */
.post-navigation .prev-next {
  font-size: var(--dd-entry-meta-size);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}
.post-navigation .next { justify-content: flex-end; }
/* :3939-3954 — `\e812` = **`icon-right-open`** (`fontello.css:77`): um chevron,
   impresso em `font-size: 10px` e girado 180° no "anterior" (`transform:
   rotate(180deg)` é o que o oráculo declara). Medido no vivo: caixa do pseudo
   **7,14 × 11,5px** (avanço 0,714em × `line-height` 1,15 sobre 10px) e tinta
   geométrica **5,83 × 9,08px** — rasterizando o glifo a 120px, o ink é 70 × 109
   com hastes cujo corte horizontal mede ~34 (= espessura perpendicular 27/120).
   A máscara abaixo é um polyline ajustado por IoU contra esse raster
   (0,876; ink 69 × 112 na mesma escala). A tentativa anterior usava `‹`/`›`
   tipográficos compensados em `1.2em`: isso **inchava a linha** — o glifo do
   oráculo cabe dentro dos 17,25px da linha de 15px, enquanto `‹` em 18px pede
   20,7px e somava 4px ao bloco. */
.post-navigation .prev-next.prev::before,
.post-navigation .prev-next.next::after {
  content: '';
  flex: none;
  width: 7.14px;
  height: 11.5px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 0 69 112'%3E%3Cpath d='M20 4 L62 54.5 L20 104' fill='none' stroke='%23000' stroke-width='27' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 5.83px 9.08px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='10 0 69 112'%3E%3Cpath d='M20 4 L62 54.5 L20 104' fill='none' stroke='%23000' stroke-width='27' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 5.83px 9.08px no-repeat;
}
.post-navigation .prev-next.prev::before {
  margin-right: 0.375rem;
  transform: rotate(180deg);
}
.post-navigation .prev-next.next::after {
  margin-left: 0.375rem;
}
.next-article .post-inner { text-align: right; }
.next-article .category-meta { align-self: flex-end; }
.post-navigation.has-next-post:not(.has-prev-post) { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   13. Responsivo — breakpoints reais do original
   --------------------------------------------------------------------------
   Fila (vii), 14/10 — **toda** banda de token deste § declara em `body`, como no
   oráculo (`body {` em `:5040`, `:5122`, `:5244`, `:5446`, `:5545`, `:5604`,
   `:5873`, `:5944`). A escolha não é cosmética: um token declarado em `:root` é
   substituído no `<html>` com os valores de base e desce **congelado** para os
   descendentes; mover o degrau para `:root` reescreve de arrastão tudo o que
   depende dele. Medido na folha antiga: era isso que encolhia `--dd-side-gutter`
   na banda de 1199px (o oráculo só o muda uma vez, para 25px em ≤640 — `:5548`) e
   congelava `--dd-flex-gap`/`--dd-sidebar-width` fora do valor original. */

/* ≤1360 (`style.css:5039`) — o contentor cai para os 1 140px de
   `--small-desktop-site-max-width` (`:5041`) e a listagem COM barra passa a DUAS
   colunas: `.has-sidebar main{--cols-3-flex-basis: --cols-2}` (`:5048-5049`),
   degrau que só existe porque o `home` do site é `.has-sidebar` (medido nos 8
   HTMLs congelados). Não portados, com a inércia provada:
     · `body{--cols-4-flex-basis: --cols-3}` (`:5043`) — o único leitor do token
       é a base de `.footer-column`, e `.cols-4 .footer-column` (`:5056`, 0-2-0
       contra 0-1-0) ganha em toda banda ≤1360; o rodapé do tema é sempre
       `.footer-columns.cols-4` (`layouts/frontend.php:349`).
     · `.aside-sidebar{width:calc((--small-desktop-site-max-width - gap*3)/4)}`
       (`:5086`) — `width` num item de flex-row cujo eixo principal é governado
       por `flex-basis` (`--sidebar-width`, 320px fixos): não é usado.
     · `.has-sidebar main{flex-grow:1}` (`:5090`) — sem espaço livre: 780 (base do
       main) + 40 (gap) + 320 (barra) = 1 140 = largura exata do contentor. */
@media (max-width: 1360px) {
  body { --dd-site-max-width: var(--dd-small-desktop-max-width); }
  .has-sidebar main { --dd-cols-3-flex-basis: var(--dd-cols-2-flex-basis); }
  .cols-4 .footer-column { flex-basis: var(--dd-cols-2-flex-basis); }
}

/* ≤1199 (`style.css:5121`) — a banda do `--large-mobile-*`: contentor 960px
   (`:5124`), ritmo 1,6667rem (`:5128`) e os dois tokens que o oráculo
   **re-declara** explicitamente porque os valores de `:root` já desceram
   congelados: `--wrap-inner-flex-gap` (`:5126`) e os `--cols-2/3-flex-basis`
   (`:5130-5131`, que passam a ler `--mobile-post-margin` em vez do
   `--post-margin`). O `--header-flex-gap: 18px` mora AQUI (`:5132`), não em
   ≤1060 como a folha antiga. `--default-post-margin` (`:5129`) e
   `--list-inner-flex-gap` (`:5127`) não têm leitor no DOM do tema. */
@media (max-width: 1199px) {
  body {
    --dd-post-margin: var(--dd-large-mobile-post-margin);
    --dd-flex-gap: var(--dd-large-mobile-post-margin);
    --dd-site-max-width: var(--dd-large-mobile-max-width);
    --dd-header-flex-gap: 18px;
    --dd-cols-2-flex-basis: calc(100% / 2 - (var(--dd-mobile-post-margin) / 2));
    --dd-cols-3-flex-basis: calc(100% / 3 - ((var(--dd-mobile-post-margin) * 2) / 3));
  }
}

/* ≤1060 (`style.css:5243`) — contentor na largura do corpo (800px, `:5245`:
   `--mobile-site-max-width` é `var(--content-max-width)`, `:59`), ritmos
   amarrados ao `--post-margin` da banda (`:5247-5248`) e, o que a folha antiga
   não fazia, **o `<main>` e a barra deixam de dividir linha**: `.wrap-inner`
   vira coluna (`:5281-5283`), o main volta a 100% com respiro de rodapé
   (`:5285-5287`) e a barra passa a LINHA de widgets de 2 colunas com uma frisa
   de 1px atravessando a janela (`:5289-5318`). */
@media (max-width: 1060px) {
  body {
    --dd-site-max-width: var(--dd-content-max-width);
    --dd-elements-margin: calc(var(--dd-post-margin) * 1.5);
    --dd-inner-elements-margin: var(--dd-post-margin);
    --dd-cols-3-flex-basis: var(--dd-cols-2-flex-basis);
  }
  /* `style.css:5385-5388` — o rodapé **empilha** (`.footer-columns[class*="cols"]`,
     0-2-0): eixo coluna e `gap` do ritmo primário (2,5rem aqui). As regras de
     `flex-basis` das bandas anteriores continuam existindo mas com o eixo trocado
     deixam de ser largura — por isso o degradê real é 3 → 2 (≤1360) → empilhado
     (≤1060), e não 4 → 3 → 2 → 1 como a folha antiga registrou. */
  .footer-columns[class*='cols'] { flex-direction: column; gap: var(--dd-elements-margin); }

  .wrap-inner { flex-wrap: nowrap; flex-direction: column; }
  .has-sidebar main { flex-basis: 100%; padding-bottom: var(--dd-elements-margin); }
  .aside-sidebar {
    width: 100%;
    max-width: var(--dd-content-max-width);
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--dd-elements-margin);
    padding-top: var(--dd-elements-margin);
    gap: var(--dd-elements-margin);
    flex-direction: row;
    flex-wrap: wrap;
  }
  /* `style.css:5300-5308` — a frisa do topo da barra: 1px, 100vw, ancorada no
     `position:relative` da base (`:1089`) e deslocada por `calc(-50vw + 50%)`
     para atravessar a janela inteira a partir do centro do contentor. */
  .aside-sidebar::before {
    content: '';
    width: 100vw;
    height: 1px;
    background: var(--dd-border-color);
    position: absolute;
    top: 0;
    left: 0;
    margin-left: calc(-50vw + 50%);
  }
  /* `style.css:5315-5318` — os widgets da barra viram linha de duas colunas. A
     variante `.aside-sticky-container > *` do oráculo não é portada: nenhum
     HTML congelado nem nenhuma das minhas superfícies imprimem esse contentor
     (`grep -c aside-sticky` = 0 em `referencias/html/` e `/tmp/dd7_*`). */
  .aside-sidebar > *:not(.aside-sticky-container) {
    flex-basis: calc((100% - var(--dd-elements-margin)) / 2);
  }
}

/* ≤768 (`style.css:5444`) — a linha de widgets da barra fecha em coluna única
   (`:5467-5469`) e o rodapé declara `flex-basis:100%` (`:5457-5458`). As duas
   outras regras `flex-basis` da banda não têm onde casar no DOM do site e por
   isso não são portadas: `[class*="cols"].list.post-navigation` (`:5460-5461`) e
   `.post-grid.list[class*="cols"]` (`:5472-5473`) pedem a classe `list`, que os
   8 HTMLs congelados só imprimem nas grades de widget do plugin
   (`post-grid tfm-posts-widget list …`) — nunca na grade do loop
   (`post-grid cols-3 grid mobile-grid`) nem na navegação do post. O
   `flex-basis:100%` do rodapé é o que o oráculo imprime; com o eixo já em
   coluna (`:5281`) ele resolve contra uma altura **indefinida** e vale como
   conteúdo, exatamente como no site. */
@media (max-width: 768px) {
  .aside-sidebar > *:not(.aside-sticky-container) { flex-basis: 100%; }
  [class*='cols'] .footer-column { flex-basis: 100%; }
}

/* ≤1199px o original abandona as duas linhas do header e usa só a
   `.mobile-header` (style.css:5161-5172). Não é o breakpoint de 600px. */
@media (max-width: 1199px) {
  /* style.css:5170-5175 — a banda só ACENDE o bloco e dá `gap: 0.5rem` aos
     filhos; o resto da régua (`padding: 0.75rem 0`, `gap: 1rem`, `max-width`)
     já está na regra base (:1256-1265), não aqui. */
  .mobile-header {
    display: flex;
    margin: auto;
  }
  .mobile-header > * { gap: 0.5rem; }

  .header-branding,
  .site-header-inner { display: none; }

  .mobile-header .custom-logo {
    width: 100%;
    max-width: var(--dd-custom-logo-width-mobile);
  }

  .hidden-mobile { display: none !important; }
}

/* Cascata de tamanho do título do card (Fase 4.2) — ver comentário em
   `--dd-entry-title-size` na seção 2. Cada faixa abaixo é uma das 6 medidas em
   style.css:255-258, 5045, 5141, 5250, 5448, 5704-5708, 5874, 5945. */
@media (max-width: 1060px) {
  body { --dd-entry-title-size: 1.875rem; }
}
@media (max-width: 768px) {
  body { --dd-entry-title-size: 1.625rem; }
}
@media (max-width: 600px) {
  body { --dd-entry-title-size: 1.875rem; }
}
@media (max-width: 480px) {
  body { --dd-entry-title-size: 1.625rem; }
}
@media (max-width: 380px) {
  body { --dd-entry-title-size: 1.5rem; }
}

/* style.css:5932-5941 (banda ≤400) — `--card-padding` desce a 1,5rem DENTRO da
   grade: o degrau é escrito no container `.mobile-grid`, não no `body`, então só
   herda quem está dentro de uma grade de cards. No meu DOM o consumidor atingido
   é o `.toggle-share` da miniatura (`top/left: var(--dd-card-padding)`, §12), que
   passa de 1,875rem para 1,5rem aos 400px — os demais usos do token
   (`.loop-sidebar-inner`, `.widget-donate`) estão fora de `.mobile-grid` e ficam
   na base, exatamente como no oráculo, onde o card de listagem não tem
   `padding: var(--card-padding)` nenhum (a regra com esse valor exige
   `.has-background`, classe que os 19 `<article>` da home não carregam). No MESMO
   bloco o oráculo reescreve `.mobile-compact{--card-padding:1.25rem;
   --mobile-compact-entry-title-font-size:…}` — `mobile-compact` tem ZERO
   ocorrências nos 9 HTML (censo) e o token que ele reescreve só é lido por regras
   de `.mobile-compact`; ramo inerte por dado, não portado. */
@media (max-width: 400px) {
  .mobile-grid { --dd-card-padding: 1.5rem; }
}

/* Cascata de `--dd-h1..h6` (fila (vi), 14/10) — a folha só tinha a base
   (`:66-71`) e UMA banda inventada em ≤600 (`h1 2.4rem / h2 1.85rem / h3 1.5rem`,
   valores que não existem em nenhuma linha do oráculo). O `h1` do oráculo vale
   `var(--h1-font-size)` (`style.css:389-394`) e o token tem **5** degraus
   responsivos em `body`; o mesmo bloco de `body` de cada banda reescreve também
   `--h2..--h6`. Cadeia medida, na ordem do fonte:
     ≤1360 `:5100` (1200-1360) e `:5135` (≤1199) → h1 3.2rem — os dois dão o
             mesmo valor, e o `:5135` ainda sobrescreve o 2.7rem de `:5118`
             (mesma faixa de viewport, depois no fonte); as demais de `:5136-5140`
             são iguais à base, logo não replicadas.
     ≤768  `:5452` h1 2.5rem;  ≤680 `:5534-5539` h1 2.5 (reafirma) + h2 2 + h3 1.5
             + h4 1.25 + h5 1.1 + h6 1;  ≤600 `:5605-5609` h2 1.75 + h3 1.375
             (h4/h5/h6 reafirmam 1.25/1.1/1 e **h1 não é tocado** — fica 2.5rem);
     ≤480  `:5875` h1 2.25rem;  ≤380 `:5946` h1 2.125rem.
   Isto corrige o `<h1>` do arquivo de categoria/tag/busca/autor e o do template
   de erro (`.archive-title` só tem `margin:0` em `:2105`, então é o `h1` quem dá
   o tamanho) — e é o que permite apagar as 4 faixas explícitas de
   `.single-entry-title`, que duplicavam a mesma cadeia à mão. */
@media (max-width: 1360px) {
  body { --dd-h1: 3.2rem; }
}
@media (max-width: 768px) {
  body { --dd-h1: 2.5rem; }
}
@media (max-width: 680px) {
  body {
    --dd-h2: 2rem;
    --dd-h3: 1.5rem;
    --dd-h4: 1.25rem;
    --dd-h5: 1.1rem;
    --dd-h6: 1rem;
  }
}
@media (max-width: 600px) {
  body {
    --dd-h2: 1.75rem;
    --dd-h3: 1.375rem;
  }
}
@media (max-width: 480px) {
  body { --dd-h1: 2.25rem; }
}
@media (max-width: 380px) {
  body { --dd-h1: 2.125rem; }
}

@media (max-width: 600px) {
  /* style.css:5610 — `--entry-wrapper-flex-gap: 1rem` na banda ≤600. Os três
     valores de cabeçalho que estavam aqui (2.4/1.85/1.5rem) eram invenção e
     saíram; o `--dd-side-gutter: 1.25rem` também (o gutter só tem UM degrau no
     oráculo: 25px em ≤640, ver §13.3). */
  body { --dd-entry-wrapper-flex-gap: 1rem; }

  .mobile-header .custom-logo { max-width: var(--dd-custom-logo-width-small-mobile); }

  /* Sem regra de rodapé aqui: o oráculo não tem nenhuma (o censo de `footer` em
     `@media (max-width:600px)` é 0) — o empilhamento já aconteceu aos 1060px, e
     um `flex-basis:100%` neste ponto seria **altura** 100%, não largura, porque o
     eixo do container já é coluna. */

  /* style.css:5641-5643 — abaixo de 600px toda grade vira 1 coluna, inclusive
     o card "Olá, Tudo bem?" (`.loop-sidebar` recebe o mesmo `!important`). O
     seletor é o do oráculo: `.post-grid[class*="grid"]` (descendente, não filho)
     — as minhas grades carregam `class="post-grid cols-3 grid mobile-grid"`, logo
     `[class*="grid"]` casa; `.article` e `.loop-sidebar` são os dois filhos. */
  .post-grid[class*='grid'] .article,
  .post-grid[class*='grid'] .loop-sidebar { flex-basis: 100% !important; }
}

/* --------------------------------------------------------------------------
   13.3 Banda ≤640 — o bloco de `body` do oráculo (style.css:5543-5602)
   O censo dos `@media` do `jinko/style.css` (46 aberturas, de `:255` a `:5943`)
   mostra que a banda de 640px é a **única** que reescreve
   `--wrapper-side-gutter` (`:5548`), e é também a que carrega o hero do post e o
   corpo do single. Ela **não** estava portada: as 4 linhas de `body` viraram, no
   tema, uma banda ≤600 com valores diferentes (1.25rem de gutter, 2.4rem de h1)
   ou simplesmente não existiam.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body {
    /* style.css:5548 — único degrau do gutter no oráculo inteiro. */
    --dd-side-gutter: 25px;
    /* style.css:5549 — a coluna de texto **troca de fórmula**: deixa de seguir o
       `--post-margin` e passa a seguir o gutter da banda (100% − 50px). */
    --dd-content-width: calc(100% - (var(--dd-side-gutter) * 2));
    /* style.css:5545 — o hero do post perde a razão de 40% e passa a usar a do
       card largo (56,25%). É a única das 7 redefinições de
       `--thumbnail-hero-padding` que alcança o single: as outras 6 estão em
       `.cover-wrapper`/`.post-grid`. */
    --dd-thumbnail-hero-padding: var(--dd-thumbnail-wide-padding);
    /* style.css:5546 — corpo do post 1.25rem (a folha tinha este degrau em ≤600,
       deixando 601-640 renderizarem 1.375rem). */
    --dd-single-entry-font-size: 1.25rem;
  }

  /* style.css:5551-5553 — o respiro do topo do `.wrap` passa a ser o gutter. */
  .wrap { padding-top: var(--dd-side-gutter); }

  /* style.css:5554-5556 — a trilha perde o `--global-primary-elements-margin`
     (2.5rem nesta banda) e ganha o gutter. */
  .breadcrumbs { margin-bottom: var(--dd-side-gutter); }

  /* style.css:5557-5572 — post **sem miniatura** com trilha impressa: respiro no
     topo e uma frisa de 1px atravessando a janela inteira. As variantes
     `.default-alt` e `.single-hero` do mesmo grupo não são portadas: o tema não
     imprime nenhuma das duas classes (medido: `single-hero` é 0 ocorrências no
     congelado). O ponto estático do `::before` é o `<article>`, que recebe
     `position:relative` da base (`style.css:2194`, portada na seção 11). */
  .has-breadcrumbs .the-post > .article:not(.has-post-media) {
    padding-top: var(--dd-elements-margin);
  }
  .has-breadcrumbs .the-post > .article:not(.has-post-media)::before {
    content: '';
    width: 100vw;
    height: 1px;
    background: var(--dd-border-color);
    position: absolute;
    top: 0;
    margin-left: calc(-50vw + 50%);
  }
}

/* --------------------------------------------------------------------------
   14.1 Responsivo do post individual (Fase 5)
   Cada faixa abaixo é uma medição de style.css/boost.css já citada na seção
   14; aqui só muda o valor responsivo.
   -------------------------------------------------------------------------- */

/* As 4 faixas de `.single-entry-title` que havia aqui (3.2 / 2.5 / 2.25 / 2.125
   rem) foram **apagadas** na fila (vi): são exatamente os degraus de
   `--dd-h1` (`style.css:5100/5135`, `5452`, `5875`, `5946`), agora portados na
   §13, e o oráculo não tem nenhuma regra de tamanho em `.single-entry-title`
   (`:2469` só dá cor) — quem manda no título do post é `h1{font-size:
   var(--h1-font-size)}` (`:389-394`). A base `.single-entry-title` da seção 14.2
   segura o título fora da cadeia do card com o mesmo token. */

/* style.css:5114 (1061-1199) e 5367 (≤1060) — os filhos do header do post
   largam o cap de `--content-width` e passam a ocupar a coluna inteira abaixo de
   1200px. As duas faixas dão o mesmo valor, uma regra só cobre. */
@media (max-width: 1199px) {
  .single-entry-header > * { width: 100%; }
}

/* Título dos cards da navegação anterior/próximo — cascata medida e **corrigida**
   na fila (vii), 14/10. Duas regras disputam o elemento, ambas de especificidade
   0-3-0: a base `.post-navigation .article .entry-title{font-size:var(--cols-4-
   entry-title-font-size)}` (`style.css:3890-3892`, token de base 1,625rem em
   `:145`, com degraus 1,75/1,625/1,875/1,625 em ≤1360/≤1199/≤1060/≤768) e a banda
   `.post-navigation .article .entry-title{font-size:var(--xsmall-dt-entry-title-
   font-size)}` de ≤1360 (`:5053-5054`). `--xsmall-dt-entry-title-font-size` vale
   1,625rem (`:153`) e **não tem degrau nenhum** no oráculo inteiro — e a regra de
   ≤1360 vem depois no fonte, com a mesma especificidade, então ela vence todas as
   quatro reescrituras do token: do 1360 para baixo o card é 1,625 e não 1,75 nem
   1,875 (as duas faixas que esta folha tinha erradas). Acima de 1360 vence a base,
   que também é 1,625. Resta o trio de ≤600:
   `.mobile-grid[class*="cols"] .hentry .entry-title` (`:5704-5707`, 0-4-0) lê
   `--mobile-grid-entry-title-font-size` (1,875rem, base `:157`; redefinido em
   `body` para 1,625 em `:5874` e 1,5 em `:5945`). Esse seletor exige `.hentry` no
   article e `.mobile-grid`+`cols-*` no grid — o oráculo tem ambos
   (`class="article post hentry previous-article ..."` dentro de
   `class="... mobile-grid ... cols-2"`). O tema não carrega `hentry`/`post`
   (lixo §3, sem nenhuma regra viva além desta), então a regra é portada por
   **substituição de seletor**, mesmo precedente do tratamento de `.cols-3` na
   listagem. */
@media (max-width: 600px) {
  .post-navigation .article .entry-title { font-size: 1.875rem; }
}
@media (max-width: 480px) {
  .post-navigation .article .entry-title { font-size: 1.625rem; }
}
@media (max-width: 380px) {
  .post-navigation .article .entry-title { font-size: 1.5rem; }
}

/* style.css:5494 (banda ≤768) — o hero do post vira full-bleed e perde o
   raio. Sem `body.single` no DWPSys (classe do WordPress, lixo §3), o escopo
   `.the-post` é equivalente: a classe só existe no single. */
@media (max-width: 768px) {
  .the-post > .article .thumbnail-wrapper {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-radius: 0;
  }
  .the-post > .article .thumbnail-wrapper .post-thumbnail img { border-radius: 0; }
}

/* boost.css:1092-1108 — a share troca de lado no breakpoint 1060/1061: acima
   dela só a lateral fixa; abaixo, só a do rodapé. */
@media (max-width: 1199px) {
  /* boost.css:1097-1100 — na banda tablet/desktop estreito a barra lateral
     encosta na borda do wrapper (o `left` calculado é para a largura de site
     cheia). As variantes `.has-sidebar` de `:1061`/`:1101`/`:1111` NÃO são
     portadas: o post do tema não tem barra lateral (medido: `has-sidebar` sai
     em `/`, `/blog`, `/o-autor`, `/busca` e zero no post) ⇒ seletor morto. */
  .single-content-wrapper > .share-wrapper.side { left: 0; }
}
@media (max-width: 1060px) {
  .single-content-wrapper > .share-wrapper.side { display: none; }
  .single-hentry-footer > .share-wrapper.side { display: flex; }
}
@media (min-width: 1061px) {
  .single-hentry-footer > .share-wrapper.side { display: none; }
}

/* style.css:5785-5800 — a linha de categorias vira coluna e a de tags passa a
   linha inteira; boost.css:779-787 — o rótulo "Compartilhar" vira linha própria
   e perde o travessão. Os três grupos estavam ausentes ou escopados na lista
   genérica. O corpo do post NÃO aparece aqui: o passo de 1.25rem do oráculo
   mora em `style.css:5546`, dentro do bloco que abre em `:5543` (≤640), e está
   portado em §13.3 — ver §13.3 e a nota do token `--dd-single-entry-font-size`. */
@media (max-width: 600px) {
  /* `.tfm-view-count` aparece nesta mesma regra do oráculo, mas o rodapé do post
     não imprime contagem de visualizações (medido: os 7 `tfm-view-count` de
     `post-arcanjos.html` estão no cabeçalho e no rodapé do site, nenhum dentro
     de `.single-hentry-footer`) ⇒ o seletor é morto aqui. */
  .entry-meta.post-tags {
    flex-basis: 100% !important;
    flex-grow: 1;
    align-items: center !important;
  }
  .single-hentry-footer .footer-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .single-hentry-footer .share-wrapper .share-text {
    width: 100%;
    display: block;
    margin-bottom: 0.5rem;
  }
  .single-hentry-footer .share-wrapper .share-text::after { content: none; }
}

/* --------------------------------------------------------------------------
   15. Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   16. Breadcrumb + cabeçalho de arquivo (Fase 6.2)
   Breadcrumb medido em TODAS as capturas (`.tfm-breadcrumbs.navxt` irmão de
   `.wrap-inner`); na home o original imprime e esconde
   (`.home/.blog .tfm-breadcrumbs{display:none}`, boost.css:2620-2622) — aqui a
   home não emite, equivalente observável. Cabeçalho de arquivo medido em
   `cat-sacramentos.html`/`cat-formacao.html` (categoria, com
   `.archive-description-section` sempre presente) e `tag-anjos.html` (tag, sem
   o bloco). Regras: boost.css:2531-2586 e style.css:2071-2146/4906/4919-4924.
   -------------------------------------------------------------------------- */

/* style.css:4906 + boost.css:2531. `order:0` do original não é portado: sem
   `.wrap` em flex (a trilha é bloco irmão de `.wrap-inner`), a propriedade não
   tem efeito nenhum — medido no DOM das capturas.
   RENOME aqui (antichi-lista §3, fechado na fila (v) de 14/10): o oráculo emite
   `.tfm-breadcrumbs.navxt` (prefixo do tema `tfm-theme-boost` + classe do plugin
   NavXT); o tema publica `.breadcrumbs`/`.breadcrumbs-inner`. A especificidade
   composta de `.tfm-breadcrumbs.navxt` (0-2-1) não é necessária: não há regra
   concorrente nos spans da trilha, só as próprias abaixo. */
.breadcrumbs {
  font-size: 0; /* esconde o ` &gt; ` literal entre os spans; os spans
                   recebem tamanho próprio pela regra abaixo */
  text-transform: capitalize;
  color: var(--dd-meta-color);
  padding: 0;
  margin-bottom: var(--dd-elements-margin); /* style.css:4908, 3.125rem */
}

.breadcrumbs .breadcrumbs-inner {
  display: block;
  max-width: var(--dd-site-max-width);
  margin: auto;
  padding: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.breadcrumbs a {
  text-decoration: none;
  color: var(--dd-meta-link-color);
}

.breadcrumbs span {
  font-size: var(--dd-entry-meta-size); /* --entry-meta-font-size 0.9375rem, style.css:167 */
}

.breadcrumbs div > span {
  margin: 0 10px 0 0;
}

/* Separador: o glifo `\e812` da fonte `fontello` (boost.css:2595-2600) é lixo
   §3 — substituído por '\203A' como já feito nas setas da navegação do post
   (mesma cor/tamanho/margem medidos). */
.breadcrumbs div > span:not(:last-child)::after {
  content: '\203A';
  display: inline-block;
  font-size: 8px;
  margin-left: 10px;
  font-weight: 400;
  color: var(--dd-meta-color);
}

/* style.css:4919-4924 — acima de 641px a trilha vira pílula bordada. */
@media (min-width: 641px) {
  .breadcrumbs .breadcrumbs-inner > div {
    padding: 6px 10px 6px 15px;
    border-radius: 20px;
    border: 1px solid var(--dd-border-color);
    display: inline-block;
  }
}

/* A cor do arquivo (`--archive-header-meta-color`, boost.css:2557) não é
   portada como override: os dois modos medidos têm o MESMO valor do
   `--dd-meta-color` (#94979e claro / #cfd0d2 escuro) — regra sem efeito. */

/* 16.1 Cabeçalho do arquivo -------------------------------------------------- */

/* style.css:2072 traz `padding: - var(--wrapper-side-gutter)` — declaração
   inválida que o navegador descarta; portamos como sem efeito, como medido. */
.archive-header-inner {
  padding-bottom: calc(var(--dd-post-margin) / 2);
  margin: auto;
  color: var(--dd-entry-title-color);
  max-width: var(--dd-site-max-width);
  border-radius: var(--dd-radius);
}

.archive-description-wrap {
  width: 100%;
  max-width: var(--dd-content-max-width);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* `--excerpt-font-size: 1.25rem` (style.css:175) sem override no site. */
.archive-description-wrap p {
  margin: 0;
  color: var(--dd-meta-color);
  font-size: 1.25rem;
}

.archive-title-section {
  display: flex;
  gap: 1rem;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
}

.archive-title { margin: 0; }

.archive-header a { color: var(--dd-archive-header-color); }

/* Pílula de contagem "N Artigos" — style.css:2107-2113. */
.archive-header .entry-meta {
  color: var(--dd-archive-header-meta-color);
  order: 2;
  margin-top: 12px;
  border: 2px solid var(--dd-border-color);
  border-radius: var(--dd-button-radius);
  padding: 4px 16px;
  font-weight: 600;
}

.archive-title-section + .archive-description-section {
  margin-top: -10px;
}

/* 16.2 "O Autor" (Fase 7.1) — o author archive (`autor.html`) é o único
   cabeçalho de arquivo com avatar: `.archive-header.has-avatar.has-nickname
   .has-count > .archive-header-inner > .author-archive-wrapper >
   .author-avatar + .archive-description-wrap`. Medidas de style.css:2120-2136
   (wrapper), 2140-2145 (cápsula do nickname) e das bandas ≤640 (5858) e ≤480
   (5929). O arquivo de taxonomia NÃO tem `.archive-description-section` neste
   template (0 ocorrências na captura), então ela continua exclusiva de
   categoria. */
.author-archive-wrapper {
  display: flex;
  gap: 1.5rem;
  max-width: var(--dd-site-max-width);
  margin: auto;
}

.author-archive-wrapper .author-avatar {
  flex-basis: 120px;
  flex-shrink: 0;
}

/* 2130-2133 (max-width/shadow) + 2570-2573 (`img.avatar{border-radius:
   var(--avatar-border-radius, 50%); max-width: var(--avatar-width, 40px)}`):
   `--avatar-border-radius` não existe em lugar nenhum, então o recorte é
   circular nos dois modos; o `max-width:100%` do wrapper é que vence os 40px e
   deixa o `<img width="120" height="120">` do oráculo imprimir 120px. */
.author-archive-wrapper .avatar {
  max-width: 100%;
  border-radius: 50%;
  box-shadow: var(--dd-post-box-shadow);
}

.author-archive-wrapper .archive-description-wrap {
  text-align: left;
}

.archive-title-section .entry-meta-author-nickname {
  border: 2px solid;
  padding: 4px 16px;
  border-radius: var(--dd-button-radius);
  margin-top: 12px;
  font-weight: 600;
}

/* style.css:5858 e 5855 — CORREÇÃO de banda (fila (vi), 14/10): as duas regras
   estavam portadas como ≤640 com o comentário "abre em 5543", mas 5855/5858
   pertencem ao bloco que abre em `:5603` (`@media (max-width:600px)`, fecha em
   `:5865`); o bloco de 640 (5543-5602) só tem as 4 linhas de `body` + `.wrap` +
   trilha + frisa do post sem miniatura. 601-640 era a 8ª leitura de banda
   errante do pente. `:5929` (≤480, bloco 5872-5932) está correto. */
@media (max-width: 600px) {
  .author-archive-wrapper .author-avatar { flex-basis: 80px; }
  .archive-title-section { gap: 0.5rem; }
}

@media (max-width: 480px) {
  .author-archive-wrapper .author-avatar { display: none; }
}

/* --------------------------------------------------------------------------
   17. Template de erro 404/500 (Fase 7.3; bloco re-escrito na fila (vii))
   --------------------------------------------------------------------------
   DOM medido em `referencias/html/erro-404.html`. A regra do oráculo para esta
   página é **uma só**, mais as duas do gatilho de busca:
   `.error404 #primary > *{text-align:center}` (`style.css:4567`),
   `.sub-message-404 .toggle-search::before{content:none}` (`:4570`) e
   `.sub-message-404 .toggle-search{cursor:pointer}` (`:4573`).
   Como o tema não carrega a classe de body `error404`, a centralização é
   replicada escopando em `#primary.flex-grid` — censo: `flex-grid` só aparece
   nesta view (os arquivos usam `post-grid`).

   **Cinco regras que havia aqui foram apagadas por censo, não por gosto.**
   `page-header`, `title-404`, `flex-box`, `message-404`, `gohome` e `error` têm
   **zero** declarações nas três folhas do fabricante (`style.css`,
   `gutenberg.css`, `boost.css`) **e** zero nos 21 `<style>` impressos da própria
   captura (varredura programática em 14/10) — ou seja, no original o "404" gigante
   e a mensagem são vestidos só pela base tipográfica (`h1{font-size:--h1-font-size;
   margin:--heading-margin; …}`, `p{margin:0 0 1em 0}`, cor herdada de
   `body{color:--body-font-color}`). As regras portadas davam `margin:0`,
   `line-height:1`, cor `--dd-entry-title-color` (que no escuro é `#ffffff`, e o
   original pinta o título em `--body-font-color`) e um `max-width` de coluna que
   não existe. */
#primary.flex-grid > * {
  text-align: center;
}

/* `style.css:4570-4573`. O `color` que havia aqui era redundante com a base de
   link (`a{color:--dd-link-color}` + `a:hover`) e ficou de fora. */
.sub-message-404 .toggle-search::before { content: none; }
.sub-message-404 .toggle-search { cursor: pointer; }


/* --------------------------------------------------------------------------
   18. /contato (Fase 7.2; decisões D-02 e D-10) — superfície SEM oráculo
   --------------------------------------------------------------------------
   No original o item "Contato" do menu é `href="#!"` e a REST de `pages` devolve
   **0 páginas** (R-07, medido em 13/10): não há layout a replicar. Esta é a única
   frente do tema em que a caixa é decisão, e a disciplina aplicada continua a do
   pente — **nenhum número novo entra aqui**. Cada valor é réplica de uma caixa já
   medida e ancorada no §11.1 (o widget de busca do oráculo: container
   `gutenberg.css:1252`, rótulo `style.css:777`, campo `style.css:849-877`) ou de
   um token do §2:
     · rótulo  → `--dd-title-font` + peso 600 + `margin:0 0 0.5rem 0` (`style.css:777`);
     · campo   → borda 1px `--dd-border-color`, raio `--dd-radius`, fundo
                 `--dd-input-background`, texto `--dd-input-color`, corpo 16px,
                 `letter-spacing:-0.015em`, `padding:0.875rem 1rem`, foco
                 `border-color: currentColor` (`style.css:849-877`);
     · vão     → `--dd-entry-wrapper-flex-gap` (1,25rem) entre campos, o mesmo do
                 container do widget; o par de 0,3125rem + corpo 0,9375rem do erro é
                 a linha de meta (`--dd-entry-meta-flex-gap`/`--dd-entry-meta-size`);
     · botão   → `.dd-btn` do §9, sem regra própria;
     · coluna  → cap `--dd-content-max-width` (800px), o cap da coluna de texto do
                 post — o formulário é corpo de página, não grade.
   A REGRA DO CAP É COMPARTILHADA com `.policy-area` (Fase 7.6, D-23): as duas
   páginas legais têm a mesma caixa do `/contato` porque são corpo de página do
   mesmo jeito, e a tipografia delas vem das regras-base globais (§3), não de regra
   nova — por isso o bloco de baixo tem uma linha e não um capítulo.
   **Sem variação de cor por tipo de aviso.** O oráculo não tem nenhum bloco de
   feedback (não existe formulário), e inventar paleta semântica (verde/vermelho)
   seria invenção de marca numa superfície que nenhuma medição cobre: o que
   diferencia sucesso de erro é o texto e o `role`, e a caixa usa só o par
   `--dd-border-color`/`--dd-post-background`, que contrasta nos dois modos.
   O `*` de obrigatório é texto do rótulo, não decoração: por isso `.contact-required`
   não tem regra nenhuma. */
/* O cap de coluna sozinho NÃO centraliza: `#primary` é bloco dentro de um `<main>`
   de `width:100%` (`style.css:356-360`, portado no §5), então com `max-width` e
   margens `0` a caixa de 800px fica COLADA NA BORDA ESQUERDA do `.wrap-inner`
   central de até 1400px — em desktop a página de contato e as legais viravam um
   bloco à esquerda enquanto todo o resto do site é centrado (feedback 8). O
   mecanismo é o mesmo, já medido, de `.content-area.the-post` (:2580 `margin: 0
   auto`); em ≤800px o `auto` é inerte porque não há sobra. */
.contact-area,
.policy-area {
  max-width: var(--dd-content-max-width);
  margin-left: auto;
  margin-right: auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--dd-entry-wrapper-flex-gap);
}
.contact-field { display: flex; flex-direction: column; }

.contact-label {
  display: block;
  width: 100%;
  margin: 0 0 0.5rem 0;
  font-family: var(--dd-title-font);
  font-weight: 600;
}

.contact-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--dd-border-color);
  border-radius: var(--dd-radius);
  box-shadow: none;
  background: var(--dd-input-background);
  color: var(--dd-input-color);
  font-family: var(--dd-body-font);
  font-size: 16px;
  letter-spacing: -0.015em;
}
.contact-input:focus { border-color: currentColor; }
.contact-textarea { resize: vertical; }

.contact-error {
  margin: var(--dd-entry-meta-flex-gap) 0 0 0;
  font-size: var(--dd-entry-meta-size);
}
.contact-field.is-invalid .contact-input { border-color: var(--dd-accent); }

.contact-actions { margin: 0; }

/* Sem `margin` próprio: o parágrafo herdaria mesmo assim o `margin:0 0 1em 0` da
   base (`style.css:425-428`), e é ele que separa dois avisos consecutivos. */
.contact-flash {
  padding: 0.875rem 1rem;
  border: 1px solid var(--dd-border-color);
  border-radius: var(--dd-radius);
  background: var(--dd-post-background);
  color: var(--dd-body-font-color);
}