/* ===========================================================================
   O blog. Herda tudo de paginas.css — aqui só o que a lista de textos e o
   artigo precisam a mais.
   =========================================================================== */

/* ---------- a lista ---------- */
.posts{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha)}
.post{background:var(--papel);padding:34px 32px;display:block;transition:background .3s}
.post:hover{background:var(--papel-2)}
.post .meta{font-size:12.5px;color:var(--tinta-3);letter-spacing:.01em}
.post h2{font-family:var(--titulo);font-size:26px;font-weight:400;letter-spacing:-.02em;
  line-height:1.25;margin:10px 0 0;max-width:22ch}
.post .resumo{font-size:15px;color:var(--tinta-2);line-height:1.7;margin-top:12px;max-width:68ch}
.post .ler{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;
  color:var(--teal-esc);font-weight:500}
.post .ler svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.post:hover .ler svg{transform:translateX(4px)}
@media(max-width:600px){.post{padding:26px 22px}.post h2{font-size:22px}}
.vazio{color:var(--tinta-3)}

/* ---------- o artigo ---------- */
.capa-post h1{max-width:20ch}
.meta-post{margin-top:20px;font-size:13.5px;color:var(--tinta-3)}

/* A LARGURA É A DO OLHO, não a da tela: passando de ~70 caracteres por linha
   a pessoa perde o começo da linha seguinte ao voltar da direita, e relê. */
.artigo{max-width:68ch}
.artigo h2{margin-top:48px}
.artigo h3{font-size:18px;margin:32px 0 10px}
.artigo p{font-size:16.5px;line-height:1.78;margin-bottom:18px}
.artigo li{font-size:16.5px;line-height:1.75}
.artigo ul,.artigo ol{margin-bottom:20px}
.artigo blockquote{margin:26px 0;padding:4px 0 4px 24px;border-left:2px solid var(--teal-med)}
.artigo blockquote p{margin:0;font-size:17.5px;color:var(--tinta);font-style:italic}
.artigo code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.9em;
  background:var(--papel-3);padding:2px 6px;border-radius:3px}
/* A régua fecha o texto e abre o pé — é onde o artigo vira nota da casa. */
.artigo hr{border:0;border-top:1px solid var(--linha);margin:40px 0 26px}
.artigo hr + p em{font-style:normal;color:var(--tinta-3);font-size:14.5px;line-height:1.7;display:block}

/* ---------- continue lendo ---------- */
.mais{margin-top:72px;padding-top:44px;border-top:1px solid var(--linha)}
.mais > h2{font-family:var(--titulo);font-size:15px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:22px}
.mais .posts{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.mais .posts{grid-template-columns:1fr}}
.mais .post{padding:26px 24px}
.mais .post h3{font-family:var(--titulo);font-size:18px;font-weight:400;letter-spacing:-.01em;
  line-height:1.3;margin-top:9px}