/* Blog — em cima do base.css do site novo. So o que o artigo precisa. */
.artigo{max-width:760px;margin:0 auto;padding:44px 24px 20px}
.artigo .volta{font-size:14px;color:var(--ink-3);text-decoration:none;
  display:inline-block;margin-bottom:20px}
.artigo .volta:hover{color:var(--accent)}
.artigo h1{font-size:clamp(1.9rem,4.4vw,2.8rem);line-height:1.15;margin-bottom:14px}
.artigo .meta{font-size:13.5px;color:var(--ink-3);margin-bottom:12px;
  display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.artigo .cats{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:26px}
.artigo .cats a{font-size:12px;padding:3px 11px;border-radius:99px;
  border:1px solid var(--line);color:var(--ink-2);text-decoration:none}
.artigo .cats a:hover{border-color:var(--accent);color:var(--accent)}
.capa-art{width:100%;border-radius:12px;margin-bottom:30px;aspect-ratio:16/9;
  object-fit:cover}
.corpo{font-size:17.5px;line-height:1.75}
.corpo p{margin-bottom:18px;color:var(--ink-2)}
.corpo h2{font-size:1.6rem;margin:36px 0 12px}
.corpo h3{font-size:1.25rem;margin:28px 0 10px}
.corpo h4{font-size:1.08rem;margin:22px 0 8px}
.corpo ul,.corpo ol{margin:0 0 20px 22px;color:var(--ink-2)}
.corpo li{margin-bottom:8px}
.corpo img{border-radius:10px;margin:22px 0;height:auto}
.corpo a{color:var(--accent)}
.corpo blockquote{border-left:3px solid var(--accent);padding-left:18px;
  margin:24px 0;font-style:italic;color:var(--ink-2)}
.corpo table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.corpo th,.corpo td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.corpo strong{color:var(--ink)}

.lista{max-width:1120px;margin:0 auto;padding:44px 24px 10px}
.lista .cab{margin-bottom:30px}
.busca{width:100%;max-width:460px;padding:13px 16px;border:1px solid var(--line);
  border-radius:10px;font-size:16px;font-family:var(--sans);margin-bottom:26px}
.busca:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
/* Duas colunas, nao tres: cartao maior, titulo inteiro sem cortar, e metade
   das imagens por dobra de tela. */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:22px}
.post[hidden]{display:none}
.mais{display:block;margin:30px auto 0;padding:14px 28px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  font-size:15px;font-family:var(--sans);cursor:pointer;min-height:48px}
.mais:hover{border-color:var(--accent);color:var(--accent)}
.conta-posts{font-size:13.5px;color:var(--ink-3);margin:18px 0 0;text-align:center}
.post{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;text-decoration:none;color:inherit;display:flex;
  flex-direction:column;transition:.18s}
.post:hover{transform:translateY(-3px);border-color:#cfd7e4;
  box-shadow:0 16px 40px -26px rgba(21,26,34,.45)}
.post img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--cream)}
.post .cx{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post h3{font-size:17px;line-height:1.32;margin:0}
.post p{font-size:14.5px;color:var(--ink-3);margin:0;flex:1}
.post .q{font-size:12.5px;color:var(--ink-3);font-family:var(--mono,monospace)}
.vazio-busca{color:var(--ink-3);padding:30px 4px}

.paginas{display:flex;gap:8px;justify-content:center;margin:32px 0 4px;flex-wrap:wrap}
.paginas a,.paginas .atual{min-width:42px;min-height:42px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:9px;text-decoration:none;font-size:15px;
  color:var(--ink-2)}
.paginas a:hover{border-color:var(--accent);color:var(--accent)}
.paginas .atual{background:var(--navy);border-color:var(--navy);color:#fff}
.lista .volta{font-size:14px;color:var(--ink-3);text-decoration:none;
  display:inline-block;margin-bottom:14px}
.lista .volta:hover{color:var(--accent)}

.chamada{background:linear-gradient(150deg,var(--navy),var(--navy-2));color:#fff;
  text-align:center;padding:54px 0;margin-top:40px}
.chamada .wrap{max-width:620px}
.chamada h2{color:#fff;margin-bottom:12px}
.chamada p{color:#c3d0e2;margin-bottom:24px}
@media(max-width:640px){
  .artigo{padding:28px 18px 12px}.lista{padding:28px 18px 8px}
  .corpo{font-size:16.5px}
}