/* ============================================================
   TreeSec — _insight.css
   Estilo da FAMILIA de artigos (paginas insight-*).
   Carregado via front-matter `styles: _insight`, entre o base.css e o
   css da pagina. So' entra aqui o que e' identico em TODOS os artigos;
   o que um artigo faz diferente fica no styles/<artigo>.css dele.
   ============================================================ */

h1,h2,h3,h4 {
  letter-spacing:-0.015em;
  color:#fff;
}

.post-hero {
  padding:64px 20px 30px;
}

.post-hero .kicker {
  display:inline-block;
  padding:6px 10px;
  border:1px solid var(--ring);
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.3px;
  text-transform:uppercase;
}

.post-meta {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
  margin-top:18px;
}

.post-meta span {
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.post-meta svg {
  width:14px;
  height:14px;
  opacity:.7;
}

.post-hero .lead {
  font-size:clamp(16px,2vw,19px);
  color:#cbd5e1;
  max-width:760px;
}

.article {
  max-width:760px;
  margin:0 auto;
  padding:20px 20px 60px;
}

.article p, .article li {
  color:#cbd5e1;
  font-size:16.5px;
}

.article p {
  margin:0 0 16px;
}

.article ul, .article ol {
  margin:0 0 16px;
  padding-left:22px;
}

.article li {
  margin-bottom:8px;
}

.article strong {
  color:#fff;
}

.article a {
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:rgba(99,179,255,.4);
  text-underline-offset:3px;
}

.article blockquote p {
  margin:0;
}

footer {
  margin-top:60px;
}