/* ════════════════════════════════════════════════════════════
   MORPHIA · Blog
   Externo de propósito: as três páginas fixas usam CSS inline, mas 50 posts
   inline seriam 50 cópias do mesmo arquivo — e trocar um espaçamento
   obrigaria a regerar todos. Aqui, o navegador baixa uma vez e reaproveita.

   Cores oficiais: #1C1A1A · #E2574C · #F5F1EC · 70/20/10
   A marca é chapada — sem degradê, sem sombra colorida, sem contorno.
   ════════════════════════════════════════════════════════════ */

:root {
  --preto:      #1C1A1A;
  --preto-alto: #232020;
  --preto-2:    #151313;
  --vermelho:   #E2574C;
  --vermelho-esc: #C4453B;
  --creme:      #F5F1EC;
  --creme-2:    #EBE6DF;  /* superfície na zona clara */

  --sobre-preto:       rgba(245, 241, 236, 0.76);
  /* 0.44 media 3.98:1 sobre --preto — abaixo do 4.5:1 que WCAG AA exige para
     texto normal. 0.56 sobe para ~5.6:1 e ainda fica nitidamente mais quieto
     que o --sobre-preto do corpo (9.3:1), preservando a hierarquia. */
  --sobre-preto-fraco: rgba(245, 241, 236, 0.56);
  --linha-preto:       rgba(245, 241, 236, 0.10);

  /* Zona clara (corpo do blog): mesmos tokens de index.html:46-56, não
     valores novos — exceto --rotulo-sobre-creme logo abaixo, que é próprio
     deste arquivo e existe só por causa de uma medição. */
  --sobre-creme:       rgba(28, 26, 26, 0.72);
  --sobre-creme-fraco: rgba(28, 26, 26, 0.46);

  /* --sobre-creme-fraco (0.46, herdado de index.html) mede 2,89:1 sobre
     --creme e 2,83:1 sobre --creme-2 — abaixo até do piso de 3:1 para UI,
     quanto mais do 4,5:1 que texto normal de 12px exige. Não redefinimos o
     token da marca aqui: mudar seu valor só neste arquivo faria blog.css e
     index.html discordarem sobre o que o nome significa. Em vez disso, um
     token próprio do blog, para o único uso que precisava de um meio-termo
     entre --sobre-creme-fraco (reprova) e --sobre-creme (passa, mas fica
     idêntico ao corpo de texto e apaga a hierarquia do rótulo). 0,65 de
     alfa é o menor valor que passa nos dois fundos com folga:
       0.46 → 2.89:1 (creme) / 2.83:1 (creme-2)  reprova
       0.60 → 4.37:1 / 4.22:1                    passa raso
       0.65 → 5.13:1 / 4.92:1                    passa com folga — usado
       0.72 → 6.46:1 / 6.14:1 (== --sobre-creme)  passa, mas sem hierarquia
     Usado só em .rotulo. */
  --rotulo-sobre-creme: rgba(28, 26, 26, 0.65);
  --linha-creme:       rgba(28, 26, 26, 0.12);
  --linha-creme-fina:  rgba(28, 26, 26, 0.07);

  --max: 720px;          /* largura de leitura, ~68 caracteres em 19px */
  --max-largo: 1080px;   /* topo, pé e índice */
  --gutter: clamp(20px, 5vw, 40px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Corpo do blog é a zona clara — ler texto longo em fundo claro é mais fácil.
   Cabeçalho e rodapé continuam escuros (ver .topo, .pe abaixo) e funcionam
   como moldura na transição vindo da home, que é toda escura. */
body {
  background: var(--creme);
  color: var(--sobre-creme);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0;
  overflow-x: hidden;   /* nenhuma página do blog rola na horizontal */

  /* Índice com um post só é uma página curta: sem isto o rodapé fica no meio
     da tela com um vão preto embaixo, o que lê como página inacabada. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* .folha aparece uma vez só de propósito. Ela esteve dividida em dois blocos
   distantes — layout aqui, dimensão 110 linhas abaixo — e quem procurasse a
   classe acharia um só, editaria, e o outro continuaria valendo. */
.folha {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--max-largo);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

img { max-width: 100%; height: auto; display: block; }

/* ── Rótulo: IBM Plex Mono, caixa alta, tracking aberto ───────────────────
   Não é vermelho: a regra da marca proíbe vermelho em texto abaixo de 18px
   peso 700, e rótulo é 12px.
   Cor é --rotulo-sobre-creme (0,65 de alfa, definido no :root com a
   medição completa): --sobre-creme-fraco reprova (2,89:1) e --sobre-creme
   passa mas empata visualmente com o corpo do texto (6,46:1, mesmo tom).
   0,65 dá 5,13:1 — passa com folga e ainda lê como secundário. */
.rotulo {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rotulo-sobre-creme);
}

/* ── Títulos ──────────────────────────────────────────────────────────── */
h1 {
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--preto);
}

h2 {
  font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--preto);
}

h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--preto);
}

/* ── Topo e pé ────────────────────────────────────────────────────────── */
/* width: 100% é obrigatório, não decorativo. Como body é flex em coluna, estes
   três são itens de flex; e item de flex com `margin: 0 auto` no eixo
   transversal perde o `stretch` e passa a medir max-content. Medido num
   viewport de 1440 sem o width: .topo saiu com 461px e o pé com 345px em vez
   dos 1080 — a página inteira encolhia numa coluna estreita no meio da tela.
   Isso continua valendo mesmo sem o `max-width` abaixo: não é o max-width
   que sustentava o width: 100%, é o flex em coluna do body. */
/* background explícito: com o body virando claro, cabeçalho e rodapé param
   de herdar o preto de graça e precisam declará-lo — são a moldura escura
   que a decisão do dono do site pede, não a zona de leitura.
   Sem max-width nem margin: 0 auto — a faixa escura vai de borda a borda da
   tela (senão fica um retângulo de 1080px flutuando no meio do creme, o que
   só ficou visível depois que o corpo virou claro: no tema escuro a borda
   da faixa se confundia com o resto da página, também escura). O padding
   lateral que sobra é quem alinha o conteúdo (logo, nav) à mesma coluna de
   1080px que .folha usa: max() entre o --gutter mínimo e a metade do espaço
   sobrando fora dos 1080px, mais o gutter.
     1440px: (1440-1080)/2 + 40 = 220 → bate com .folha (180 de margem + 40
     de padding = 220, onde o corpo do post começa).
     375px: (375-1080)/2 + 40 é negativo, o max() cai para os 40 do gutter —
     igual ao padding que .folha já aplica nesse viewport. */
.topo, .pe {
  width: 100%;
  padding: 24px max(var(--gutter), calc((100% - var(--max-largo)) / 2 + var(--gutter)));
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--preto);
}

.topo { justify-content: space-between; border-bottom: 1px solid var(--linha-preto); }

.marca { display: block; line-height: 0; }

/* O arquivo tem 900x177; aqui ele desce para a altura do cabeçalho. A largura
   sai de auto para a proporção não distorcer. 24px é a MESMA altura que
   index.html:274 usa para o mesmo arquivo — dois cabeçalhos do mesmo site com
   a marca em tamanhos diferentes é inconsistência sem motivo. */
.marca img { height: 24px; width: auto; }

.nav { display: flex; align-items: center; gap: 20px; }

.nav a, .pe a {
  color: var(--sobre-preto);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.nav a:hover, .pe a:hover, .marca:hover { color: var(--creme); }

/* :active é invariante do projeto — todo clicável precisa dos três estados.
   Aqui o retorno é opacidade, não cor: vermelho em texto abaixo de 18px peso
   700 é proibido pelo manual, e estes links têm 15px. Opacidade é uma das duas
   propriedades que o projeto permite animar. */
.marca:active, .nav a:active, .pe a:active { opacity: 0.7; }

.pe {
  border-top: 1px solid var(--linha-preto);
  margin-top: 72px;
  color: var(--sobre-preto-fraco);
  font-size: 15px;
}

/* ── Pílula de CTA: raio total, caixa alta ────────────────────────────── */
.pilula {
  display: inline-block;
  background: var(--vermelho);
  color: var(--creme);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 999px;
  /* Só transform: animar cor ou sombra é proibido pelo projeto. */
  transition: transform 140ms ease;
}

.pilula:hover { background: var(--vermelho-esc); transform: translateY(-1px); }
.pilula:active { transform: translateY(0) scale(0.985); }
.pilula-topo { padding: 10px 18px; font-size: 12px; }

/* ── Foco: sempre dentro das três cores. Azul nativo é violação. ────────
   Medido depois do tema claro: --vermelho sobre --creme dá 3,28:1, acima do
   mínimo de 3:1 para indicador não-textual — passa, mas com pouca folga
   (o offset de 3px joga o anel para fora do cartão, sobre o --creme do
   corpo da página, não sobre o --creme-2 do próprio cartão, que reprovaria
   em 2,97:1). Não trocado para --vermelho-esc porque a regra só manda
   trocar se reprovar. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--vermelho);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Folha de conteúdo ────────────────────────────────────────────────── */
/* Encostada na borda esquerda do .folha, não centralizada dentro dele: com
   720px dentro de um contêiner de 1080px sobrava a mesma folga dos dois
   lados, e a primeira letra do título não batia com a primeira letra do
   logo — o olho lia como desalinhado, mesmo estando matematicamente
   centralizado. margin-right: auto absorve a folga que sobra à direita;
   como .post não tem width fixo (só max-width), abaixo de 720px de
   contêiner o auto vira 0 e a coluna volta a preencher tudo — por isso não
   precisa de regra própria para o mobile. */
.post { max-width: var(--max); margin: 56px auto 0 0; }

.post .rotulo { margin-bottom: 16px; }

.post h1 { margin-bottom: 20px; }

.chamada {
  font-size: 21px;
  line-height: 1.45;
  color: var(--sobre-creme);
  margin-bottom: 36px;
}

/* ── Capa: camada de vermelho em multiply, o tratamento que o manual
      permite para foto. Gradiente seria violação. ─────────────────────── */
.capa { position: relative; margin: 0 0 40px; border-radius: 12px; overflow: hidden; }

.capa::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--vermelho);
  mix-blend-mode: multiply;
  opacity: 0.14;
  pointer-events: none;
}

/* ── Corpo do post ────────────────────────────────────────────────────── */
.corpo > * + * { margin-top: 24px; }

.corpo h2 { margin-top: 48px; }
.corpo h3 { margin-top: 36px; }

.corpo ul, .corpo ol { padding-left: 24px; }
.corpo li + li { margin-top: 8px; }

.corpo code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.88em;
  background: var(--creme-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--preto);
}

.corpo blockquote {
  border-left: 3px solid var(--vermelho);
  padding-left: 20px;
  color: var(--preto);
  font-size: 21px;
  line-height: 1.4;
}

.corpo strong { color: var(--preto); font-weight: 700; }

/* Link em texto corrido: letra escura com sublinhado vermelho. Letra
   vermelha em corpo de texto é proibida — aqui o vermelho é traço, não
   letra. */
.corpo a {
  color: var(--preto);
  text-decoration: none;
  border-bottom: 2px solid var(--vermelho);
  padding-bottom: 1px;
}

.corpo a:hover { border-bottom-color: var(--preto); }

.corpo a:active { border-bottom-color: var(--preto); opacity: 0.7; }

/* ── CTA de fim de post: vermelho como fundo de bloco, texto creme ──────
   Cor não muda com o tema — o bloco já era vermelho chapado sobre o preto e
   continua vermelho chapado sobre o creme; se algo, o contraste com a
   página piora para o fundo (mais claro) e melhora para o bloco, que passa
   a saltar mais, não menos. Margem alinhada à esquerda pelo mesmo motivo
   do .post logo acima. */
.cta {
  max-width: var(--max);
  margin: 64px auto 0 0;
  background: var(--vermelho);
  color: var(--creme);
  border-radius: 12px;
  padding: 32px;
}

/* peso 700, não 600: é o próprio limite que a regra da marca abre para
   vermelho perto de texto ("≥18px peso 700"), e 700 é o que empurra o
   contraste creme-sobre-vermelho (3,28:1) para dentro do limite de texto
   grande em negrito do WCAG AA (3:1) — 600 ficava fora dos dois critérios. */
.cta p { font-size: 21px; font-weight: 700; line-height: 1.3; margin-bottom: 20px; color: var(--creme); }

.cta .pilula {
  background: var(--preto);
  color: var(--creme);
}

.cta .pilula:hover { background: var(--preto-2); }

/* ── Índice do blog ───────────────────────────────────────────────────── */
.pagina-indice h1 { margin: 56px 0 16px; }
.pagina-indice .chamada { max-width: var(--max); }

.lista { display: grid; gap: 16px; margin-top: 40px; }

.cartao {
  display: block;
  background: var(--creme-2);
  border: 1px solid var(--linha-creme);
  border-radius: 12px;
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease;
}

.cartao:hover { transform: translateY(-2px); border-color: var(--vermelho); }
.cartao:active { transform: translateY(0); }

.cartao .rotulo { margin-bottom: 12px; }
.cartao h2 { margin-bottom: 10px; }
.cartao .resumo { color: var(--sobre-creme); font-size: 17px; }

/* --sobre-creme-fraco não passa em nenhum patamar do WCAG sobre --creme
   (2,89:1), então o texto do estado vazio usa --sobre-creme (6,46:1) em vez
   do "fraco" que o dark theme usava aqui. Não é rótulo mono — é texto
   corrido de 19px — então não precisa do meio-termo que .rotulo usa. */
.vazio { color: var(--sobre-creme); }

/* auto-fit, nao auto-fill nem 1fr 1fr: com UM post — que e exatamente como o
   blog nasce — uma grade de duas colunas fixas deixa metade da tela vazia e o
   cartao parece perdido. auto-fit colapsa a trilha vazia e o cartao unico
   ocupa a largura inteira. Com dois ou mais, volta a duas colunas. */
@media (min-width: 860px) {
  .lista { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}