/* ==========================================================================
   pag-artigo.css: o que so existe na PAGINA DE UM ARTIGO

   Os dez artigos carregavam css/pag-noticias.css inteiro, que e a folha do
   INDICE do blog: 9,4 kB para usar duas regras. Medido no navegador, cada
   artigo casava 2 dos 27 seletores de la. Os outros 25 sao o destaque, os
   filtros de eixo e as prateleiras da capa de /noticias/, que nao existem
   dentro de um texto.

   Conferido antes de separar: a folha do indice nao define nenhum @keyframes,
   entao nao havia o consumo invisivel do tipo "animation: <nome>" a quebrar
   (uma regra pode nao casar seletor nenhum e ainda assim ser usada pelo NOME
   da animacao, que foi como .mov-empurrar pareceu orfa uma vez). E nenhuma
   das duas regras abaixo tem propriedade de animacao.

   O indice continua com a sua folha; o artigo passa a ter a dele.
   ========================================================================== */

/* Primeira frase em corpo maior: o artigo comeca com uma promessa, nao com
   um paragrafo qualquer. A classe vai no primeiro <p> de cada arquivo em
   noticias/. A regra existia no indice desde o inicio e nenhum artigo a
   usava, entao todo texto abria no corpo de leitura comum e o degrau entre o
   resumo da capa e a prosa era um tombo, de --c1 direto para --c2 em
   --suave. Com ela o degrau vira dois, e o primeiro paragrafo continua sendo
   parte da apresentacao. O seletor filho e proposital: so o primeiro nivel
   da prosa, nunca um paragrafo dentro de <blockquote> ou de <li>. */
.prosa > .artigo-abertura {
  font-size: var(--c1);
  line-height: 1.7;
  color: var(--texto);
}

/* "Da mesma prateleira" reaproveita a grade das relacionadas do kit; so o
   respiro acima e proprio do artigo. */
.artigo-produto .relacionadas-grade {
  margin-top: var(--esp-grid);
}