/* Páginas de artigo: coluna de leitura sobre a mesma base de site.css */

.back{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--accent);
}

.artigo{max-width:720px;margin:0 auto;padding:96px 24px 120px}
.artigo .meta{margin-bottom:28px}
.artigo__title{font-size:52px;line-height:1.08;color:var(--ink);margin:0 0 28px;text-wrap:pretty}
.artigo__lead{
  font-style:italic;font-size:24px;line-height:1.45;
  color:var(--ink-soft);margin:0 0 56px;text-wrap:pretty;
}
.artigo__body{
  display:flex;flex-direction:column;gap:28px;
  border-top:1px solid rgba(70,62,41,.16);padding-top:48px;
}
.artigo__body p{font-size:19px;line-height:1.75;color:#4f4738;margin:0;text-wrap:pretty}

/* Subtítulo de seção. O gap do flex já separa; a margem extra em cima cria a
   respiração que divide o texto em blocos legíveis. */
.artigo__h2{
  font-size:30px;line-height:1.2;color:var(--ink);
  margin:26px 0 -6px;text-wrap:pretty;
}
.artigo__body > .artigo__h2:first-child{margin-top:0}

.artigo__lista{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px}
.artigo__lista li{font-size:18px;line-height:1.65;color:#4f4738;text-wrap:pretty}
.artigo__lista li::marker{color:var(--accent)}

/* Links dentro do texto. O padrão do site (site.css:38) é cor de destaque e nenhum
   sublinhado — funciona em nav e rodapé, não numa coluna de leitura: o accent
   #823D24 e o corpo #4f4738 são ambos terrosos, e cor sozinha não marca link
   (WCAG 1.4.1). Aqui o link mantém a cor do texto e ganha um sublinhado accent,
   que não briga com a leitura; o hover é que troca a cor. */
.artigo__body a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;
  text-underline-offset:3.5px;
}
.artigo__body a:hover{color:var(--accent);filter:none}

/* Um .btn dentro do corpo continua sendo botão. A regra acima pinta todo <a> do
   corpo com a cor do texto e sublinha — no fundo terracota do botão isso apagava
   o rótulo (contraste de 1,6:1). Só apareceu quando a landing do diário passou a
   ter CTA no meio do texto: nos artigos o único .btn fica no rodapé, fora do
   corpo. */
.artigo__body a.btn{color:var(--parchment);text-decoration:none}
.artigo__body a.btn:hover{color:var(--parchment)}

/* Recado prático da seção — o que a pessoa levaria anotado. */
.artigo__nota{
  background:rgba(130,61,36,.07);
  border-left:3px solid var(--accent);
  padding:18px 22px;border-radius:0 8px 8px 0;
  font-size:17.5px !important;line-height:1.6 !important;color:var(--ink) !important;
}

.artigo__foot{
  margin-top:72px;padding-top:44px;border-top:1px solid rgba(70,62,41,.16);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.artigo__foot > div{display:flex;flex-direction:column;gap:6px}
.artigo__reg{font-size:13px;color:var(--muted)}
.artigo__disclaimer{
  margin-top:36px;font-size:12.5px;line-height:1.6;color:var(--muted);
  border-left:2px solid rgba(130,61,36,.3);padding-left:16px;
}

/* índice de artigos */
.artigos-idx .h2{margin-bottom:56px}
.article-list--index a{gap:10px;padding:30px 0}
.article-list--index a:last-child{border-bottom:1px solid rgba(70,62,41,.2)}
.article-list--index .feature__d{margin:4px 0 0;font-size:16px}

@media (max-width:1000px){
  .artigo{padding:56px 24px 88px}
  .artigo__title{font-size:clamp(30px,7vw,40px)}
  .artigo__lead{font-size:20px;margin-bottom:40px}
  .artigo__body{padding-top:36px;gap:24px}
  .artigo__body p{font-size:17px}
  .artigo__h2{font-size:24px;margin-top:18px}
  .artigo__lista li{font-size:16.5px}
  .artigo__nota{font-size:16px !important;padding:16px 18px}
  .back{font-size:11px}
}