/* Blog — um post é leitura: capa e título lado a lado, depois uma coluna de ~68 caracteres no preto do site.
   Tamanhos do título do post e das seções: passos "titulo-post" e "secao" do DESIGN.md. */
.post { padding: 132px var(--margem) 16vh; }

.post-topo { max-width: 1120px; margin: 0 auto; display: grid; gap: clamp(24px, 4vw, 56px); align-items: end; }
@media (min-width: 900px) { .post-topo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.post-capa { width: min(100%, 440px); height: auto; aspect-ratio: 1; object-fit: cover; display: block; border-radius: var(--raio); background: #0B0B0D; }
@media (min-width: 900px) { .post-capa { width: 100%; } }    /* empilhado, a capa não empurra o título pra fora da tela */
.post-titulo { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.02; letter-spacing: -.03em; }
.post-linha-fina { margin-top: 16px; max-width: 40ch; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.5; color: var(--texto-2); }
.post-meta { margin-top: 20px; font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-2); }

.post-corpo { max-width: 68ch; margin: clamp(56px, 8vw, 104px) auto 0; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.65; }
.post-corpo p + p { margin-top: 1.1em; }
.post-corpo h2 { margin: 2.6em 0 .7em; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.post-corpo a:not(.botao) { text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.post-corpo a:not(.botao):hover { text-decoration-color: var(--branco); }
.assinatura { margin-top: 1.4em; font-weight: 700; }

.post-video { width: 100%; height: auto; display: block; margin-bottom: .9em; border-radius: var(--raio); background: #0B0B0D; }

/* Faixas e ficha: o nome na frente, o detalhe em cinza claro do lado. */
.faixas { padding: 0; list-style: none; counter-reset: faixa; }
.faixas li { counter-increment: faixa; display: grid; grid-template-columns: 2.2em 1fr auto; gap: 4px 12px; padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .16); }
.faixas li::before { content: counter(faixa); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.faixas .nome { font-weight: 700; }
.faixas .tempo { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.faixas .autoria { grid-column: 2 / -1; font-size: .92em; line-height: 1.45; color: var(--texto-2); }

.faixas + .ficha { margin-top: 28px; }
.ficha { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 10px 24px; }
.ficha dt { padding-top: .2em; font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-2); }
.ficha dd { margin: 0; line-height: 1.5; }
.ficha .onde { color: var(--texto-2); }
@media (max-width: 560px) {
  .ficha { grid-template-columns: 1fr; gap: 2px; }
  .ficha dd { margin-bottom: 14px; }
}
.feito-aqui { margin-top: 1.6em; color: var(--texto-2); }

.post-fecho { margin-top: 3.2em; padding-top: 2.2em; border-top: 1px solid rgba(255, 255, 255, .16); }
.post-fecho h2 { margin-top: 0; }

/* O índice do Blog é a revista (caminho A, escolha do Arthur em 28/10, a partir da VICE): a foto do post mais novo de
   ponta a ponta com a faixa preta da manchete, e embaixo o papel branco, com a coluna de bonecos nas duas bordas. */
.blog-indice { background: var(--branco); color: var(--preto); --borda: clamp(34px, 6.4vw, 104px); }
.blog-indice .barra { color: var(--branco); }
.blog-indice .por { display: block; margin-top: 16px; font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }

.manchetes { position: relative; overflow: hidden; background: var(--preto); }
.manchetes-trilho { display: flex; touch-action: pan-y; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.manchete { flex: 0 0 100%; display: flex; flex-direction: column; background: var(--preto); color: var(--branco); text-decoration: none; }
.manchete img { width: 100%; height: min(74vh, 760px); object-fit: cover; display: block; user-select: none; }
.manchete-faixa { flex: 1; display: block; padding: 30px var(--margem) 40px; text-align: center; }
.manchetes.vivo .manchete-faixa { padding-bottom: 84px; }     /* espaço pros controles, que ficam na faixa preta */
.manchete-titulo { display: block; max-width: 22ch; margin: 0 auto; font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 800;
  line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.manchete-fina { display: block; margin-top: 14px; font-size: clamp(1rem, 1.35vw, 1.2rem); color: var(--texto-2); }
.manchete .por { color: var(--texto-2); }
.manchete:hover .manchete-titulo { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
/* Controles: só aparecem com o script rodando (sem ele, fica a primeira matéria, parada). */
.manchetes-controles { display: none; }
.manchetes.vivo .manchetes-controles { display: flex; position: absolute; left: 0; right: 0; bottom: 24px; justify-content: center;
  align-items: center; gap: 12px; }
.manchetes-pontos { display: flex; }
.manchetes-pontos button { width: 40px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.manchetes-pontos button::before { content: ""; display: block; height: 3px; margin: 0 6px; background: rgba(255, 255, 255, .35);
  transition: background-color .3s ease-out; }
.manchetes-pontos button[aria-current="true"]::before { background: var(--branco); }
.manchetes-pausa { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--raio);
  background: none; color: var(--branco); cursor: pointer; }
.manchetes-pausa svg { width: 16px; height: 16px; fill: currentColor; }
.manchetes-pausa .icone-play, .manchetes-pausa[aria-pressed="true"] .icone-pausa { display: none; }
.manchetes-pausa[aria-pressed="true"] .icone-play { display: block; }
@media (prefers-reduced-motion: reduce) { .manchetes-trilho { transition: none; } }

.papel { position: relative; padding: 0 calc(var(--borda) + var(--margem)) 14vh; }
.papel::before, .papel::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--borda);
  background: var(--borda-esq, url(/blog/midia/borda-esquerda.svg)) center top / 100% auto repeat-y; }
.papel::before { left: 0; }
.papel::after { right: 0; background-image: var(--borda-dir, url(/blog/midia/borda-direita.svg)); }
.papel-miolo { max-width: 1120px; margin: 0 auto; }

.linha { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; padding: 44px 0;
  border-bottom: 1px solid var(--preto); text-decoration: none; }
.linha img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.linha-titulo { display: block; font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.linha-fina { display: block; margin-top: 12px; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.5; color: #3D3D3D; }
.linha:hover .linha-titulo { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }

.secao-papel { margin-top: 64px; padding-bottom: 14px; border-bottom: 3px solid var(--preto); font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.blog-indice .post-fecho { max-width: 68ch; border-top-color: var(--preto); }
.papel-miolo > .post-fecho:first-child { margin-top: 0; padding-top: 64px; border-top: 0; }   /* sem matérias embaixo do topo */
.blog-indice .post-fecho h2 { margin-bottom: .5em; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.blog-indice .post-fecho p { font-size: clamp(1rem, 1.35vw, 1.2rem); }
.blog-indice .post-fecho .botao--cheio { background: var(--preto); color: var(--branco); }
.blog-indice .post-fecho .botao--vazado { box-shadow: inset 0 0 0 1px var(--preto); }

@media (max-width: 760px) {
  .linha { grid-template-columns: 1fr; }
  .manchete img { height: min(52vh, 460px); }
}