/* O artigo fica no meio e o sumario na margem esquerda, que estava vazia.
   Abaixo de 1180px nao ha margem para ele: some, e o artigo volta a ser uma
   coluna centrada. O padding do envelope tambem conserta o texto encostando
   na borda do telefone - `.artigo` nao tinha padding lateral nenhum. */
.artigo-env{max-width:44rem; margin:0 auto; padding:0 20px}
.sumario{display:none}
@media(min-width:1180px){
  .artigo-env{display:grid; grid-template-columns:14rem minmax(0,44rem);
    gap:0 56px; max-width:none; justify-content:center; align-items:start;
    padding:0 24px}
  .artigo-env > .trilha{grid-column:2}
  .sumario{display:block; grid-row:2; position:sticky; top:96px;
    max-height:calc(100vh - 130px); overflow-y:auto}
}
.sumario p{font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--fraca); font-weight:800; margin:0 0 12px}
.sumario ol{list-style:none; margin:0; padding:0; counter-reset:s}
.sumario li{counter-increment:s; margin:0 0 3px}
.sumario a{display:block; padding:6px 10px 6px 30px; border-radius:8px;
  font-size:13.5px; line-height:1.35; color:var(--fraca); position:relative}
.sumario a::before{content:counter(s,decimal-leading-zero); position:absolute;
  left:9px; top:6px; font-size:11px; font-weight:800; color:var(--linha);
  font-variant-numeric:tabular-nums}
.sumario a:hover{background:var(--painel); color:var(--tinta); text-decoration:none}
.sumario a:hover::before{color:var(--marca-texto)}

.artigo{max-width:44rem}
/* Mesmo tico de degrade dos H2 das LPs: em 5.700px de rolagem os titulos
   precisam de uma marca, senao viram paragrafo em negrito. */
.artigo h2{margin:46px 0 12px; position:relative; padding-top:18px;
  scroll-margin-top:100px}
.artigo h2::before{content:""; position:absolute; top:0; left:0; width:38px;
  height:3px; border-radius:3px; background:var(--grad)}
.artigo h3{margin:24px 0 6px}
.meta{font-size:13.5px; color:var(--fraca); margin:0 0 20px}
.meta b{color:var(--tinta); font-weight:600}
.dek{font-size:1.15rem; color:var(--fraca); margin:0 0 22px; line-height:1.55}
.resposta{border-left:3px solid var(--marca-forte); padding:2px 0 2px 16px; margin:0 0 26px}
.resposta p:last-child{margin-bottom:0}
.ancora{background:var(--painel); border:1px solid var(--linha); border-radius:12px;
  padding:15px 18px; margin:26px 0; font-size:15px}
.ancora b{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--fraca); margin-bottom:5px; font-weight:700}
.busca-blog{max-width:26rem; margin:6px auto 0}
.busca-blog input{width:100%; padding:13px 16px; border-radius:11px; font:inherit;
  font-size:15px; background:var(--painel); border:1px solid var(--linha); color:var(--tinta)}
.busca-blog input:focus{outline:2px solid var(--marca-forte); outline-offset:1px}
.chips-cat{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px}
.chip{border:1px solid var(--linha); background:var(--painel); color:var(--fraca);
  border-radius:999px; padding:8px 15px; font:inherit; font-size:13.5px;
  font-weight:600; cursor:pointer}
.chip b{color:var(--tinta); font-weight:800; margin-left:5px}
.chip.on{background:var(--grad); color:#04140A; border-color:transparent}
.chip.on b{color:#04140A}
.destaque{display:grid; gap:0; grid-template-columns:1fr; background:var(--painel);
  border:1px solid var(--linha); border-radius:16px; overflow:hidden; margin:0 0 26px}
@media(min-width:820px){.destaque{grid-template-columns:.9fr 1.1fr}}
.destaque:hover{border-color:color-mix(in srgb, var(--marca) 45%, var(--linha));
  text-decoration:none}
.destaque-ilu{display:flex; align-items:center; justify-content:center;
  padding:26px; background:var(--painel2)}
.destaque-ilu .ilu{max-width:280px}
.destaque-txt{padding:26px}
.destaque-txt em{font-style:normal; font-size:11px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--marca-texto); font-weight:800}
.destaque-txt h2{margin:10px 0 10px; font-size:1.6rem}
.destaque-txt p{color:var(--fraca); margin:0 0 14px}
.ler{font-weight:700; color:var(--marca-texto)}
.vazio-busca{color:var(--fraca); padding:22px 0}
.posts{list-style:none; padding:0; margin:18px 0 0}
.posts li{padding:18px 0; border-bottom:1px solid var(--linha)}
.posts a{font-size:1.12rem; font-weight:700; text-decoration:none; letter-spacing:-.01em}
.posts span{display:block; color:var(--fraca); font-size:14.5px; margin-top:5px}
.posts em{font-style:normal; font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--fraca); display:block; margin-bottom:6px}
.leia{background:var(--painel); border:1px solid var(--linha); border-radius:13px;
  padding:18px 20px; margin:34px 0 0}
.leia h2{margin:0 0 10px; font-size:1.1rem}
.leia ul{margin:0; padding-left:18px}
.leia li{margin:7px 0; color:var(--fraca)}