/* Artigos de Loreta Andrade (gerados por refazer/fontes/loreta-andrade/paginas_artigos.py a partir do artigos.json).
   Tipografia de leitura longa: coluna de 62ch, serifa no texto, entrelinha 1.8. Só classes .artigo*; cor só pelos tokens
   do site (--fundo, --fundo-2, --texto, --suave, --corpo, --acento, --acento-forte, --sobre-acento, --linha, --foco,
   --raio, --serif, --sans, --ease): o tema claro/escuro troca os tokens, e nenhum hex mora aqui. */

.artigos, .artigo { padding-block: clamp(40px, 7vw, 112px) clamp(64px, 9vw, 140px); }

/* ---------------------------------------------------------------- índice e destaque */
.artigos-capa { display: grid; gap: 18px; max-width: 62ch; margin-bottom: clamp(32px, 5vw, 64px); }
.artigos-titulo { font-family: var(--serif); font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.25rem); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--texto); max-width: 18ch; }
.artigos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.artigo-cartao a { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--raio); border: 1px solid var(--linha); background: var(--fundo-2); color: var(--texto);
  text-decoration: none; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.artigo-cartao a:hover { border-color: var(--acento); }
.artigo-cartao a:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.artigo-cartao-data { font: 500 .78rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.artigo-cartao b { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); font-weight: 600; line-height: 1.2; }
.artigo-cartao-resumo { color: var(--corpo); line-height: 1.55; }
.artigo-cartao-ler { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linha); color: var(--acento); font-weight: 600; }
.artigos-destaque .artigos-titulo { margin: 8px 0 16px; }
.artigos-destaque .lide { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 48px); }
.artigos-acao { margin-top: clamp(28px, 4vw, 44px); }

/* ---------------------------------------------------------------- artigo */
.artigo-leitura { max-width: 62ch; margin-inline: auto; }
.artigo-voltar a { display: inline-flex; min-height: 40px; align-items: center; color: var(--acento); font-weight: 500;
  text-underline-offset: 3px; }
.artigo-voltar a:focus-visible, .artigo-origem a:focus-visible, .artigo-relacionados a:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.artigo-cabeca { display: grid; gap: 16px; padding: 16px 0 clamp(28px, 4vw, 40px); margin-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--linha); }
.artigo-titulo { font-family: var(--serif); font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.75rem); line-height: 1.08;
  letter-spacing: -0.02em; color: var(--texto); text-wrap: balance; }
.artigo-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--suave); font: 500 .9rem/1.4 var(--sans); }
.artigo-meta > * + *::before { content: "·"; margin-right: 18px; color: var(--suave); }
.artigo-origem { font-size: .95rem; }
.artigo-origem a { color: var(--texto); text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }

.artigo-arte { margin: 0 0 clamp(28px, 4vw, 40px); padding: clamp(20px, 3vw, 32px); border-radius: var(--raio);
  background: var(--fundo-2); border: 1px solid var(--linha); }
.artigo-arte-rotulo, .artigo-pergunta-rotulo, .artigo-resposta-rotulo { font: 600 .75rem/1 var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--acento); margin: 0 0 12px; }
.artigo-arte blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); line-height: 1.35;
  color: var(--texto); }
.artigo-arte figcaption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); color: var(--suave);
  font-size: .92rem; line-height: 1.55; }
.artigo-arte figcaption b { color: var(--texto); }
.artigo-pergunta { margin: 0 0 24px; padding: 18px 22px; border-left: 3px solid var(--linha); color: var(--suave); line-height: 1.6; }

.artigo-texto { font-family: var(--serif); font-size: clamp(1.125rem, 1.04rem + .35vw, 1.3rem); line-height: 1.8; color: var(--corpo);
  hanging-punctuation: first; }
.artigo-texto p { margin: 0 0 1.2em; }
.artigo-texto p:first-child::first-letter { float: left; margin: .08em .12em 0 0; font-size: 3.4em; line-height: .8; color: var(--acento); }
.artigo-assinatura { display: grid; gap: 2px; margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--linha); }
.artigo-assinatura b { font-family: var(--serif); font-size: 1.15rem; color: var(--texto); }
.artigo-assinatura span { color: var(--suave); font-size: .92rem; }

.artigo-relacionados { margin-top: clamp(40px, 5vw, 64px); }
.artigo-relacionados h2 { font: 600 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); margin: 0 0 16px; }
.artigo-relacionados ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.artigo-relacionados a { display: grid; gap: 6px; height: 100%; padding: 18px 20px; border-radius: calc(var(--raio) * .7);
  border: 1px solid var(--linha); background: var(--fundo-2); color: var(--texto); text-decoration: none; transition: border-color .3s var(--ease); }
.artigo-relacionados a:hover { border-color: var(--acento); }
.artigo-relacionados span { font: 600 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.artigo-relacionados b { font-family: var(--serif); font-size: 1.1rem; line-height: 1.3; }
.artigo-relacionados small { color: var(--suave); font-size: .9rem; line-height: 1.45; }

.artigo-aviso { max-width: 62ch; margin: clamp(32px, 4vw, 48px) auto 0; padding: 14px 18px; border-radius: calc(var(--raio) * .5);
  border: 1px solid var(--linha); color: var(--suave); font-size: .9rem; line-height: 1.55; }
.artigos .artigo-aviso { margin-inline: 0; }

@media (prefers-reduced-motion: reduce) {
  .artigo-cartao a, .artigo-relacionados a { transition: none; }
}