/* ===========================================================
   POST — página de leitura de um artigo do blog
   Coluna estreita de propósito. Linha de leitura confortável
   fica entre 60 e 75 caracteres; acima disso o olho perde a
   volta da linha e a pessoa relê sem perceber.
   =========================================================== */
/* Mesma base do case.css. Ela precisa estar aqui porque a página de post
   não carrega o case.css, e sem isso o fundo volta a ser branco. */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--cream);font-family:var(--font);overflow-x:hidden;}
img{display:block;max-width:100%;}

.post-main{padding-top:clamp(96px,12vw,150px);padding-bottom:clamp(80px,10vw,120px);}
.post-shell{width:min(720px,90vw);margin-inline:auto;}

.post-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:clamp(36px,5vw,56px);}
.post-back{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border:1px solid var(--cream-10);
  border-radius:999px;color:var(--cream-50);font-size:14px;text-decoration:none;transition:color .3s,border-color .3s,background .3s;}
.post-back:hover{color:var(--cream);}
.post-back:hover,.post-back:focus-visible{border-color:var(--cream-30);background:var(--cream-10);}
.post-back--home{color:var(--cream-30);}

.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  color:var(--red-edge);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;}
.post-meta i{width:3px;height:3px;border-radius:50%;background:var(--cream-30);font-style:normal;}
.post-meta span:not(:first-child){color:var(--cream-30);}

.post-title{margin-top:26px;font-size:clamp(34px,5vw,58px);font-weight:700;
  letter-spacing:-.04em;line-height:1.02;text-wrap:balance;color:var(--cream);}

.post-lead{margin-top:clamp(24px,3vw,32px);font-size:clamp(18px,1.8vw,22px);font-weight:300;
  letter-spacing:-.02em;line-height:1.45;color:var(--cream-90);}

/* Capa do artigo. Sangra além da coluna de leitura, igual à mesma imagem
   quando ela é card lá na home, então a pessoa reconhece na hora que clicou. */
.post-capa{margin:clamp(36px,4vw,52px) 0 0;width:min(860px,92vw);margin-inline:calc(50% - min(430px,46vw));}
.post-capa img{width:100%;border:1px solid var(--cream-10);border-radius:clamp(12px,1.4vw,18px);}
.post-capa figcaption{width:min(720px,90vw);margin:14px auto 0;color:var(--cream-30);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;line-height:1.5;}

/* filete separando a abertura do corpo, na mesma régua do resto do site */
.post-rule{margin:clamp(40px,5vw,60px) 0;border:0;border-top:1px solid var(--cream-10);}

.post-body{font-size:clamp(16px,1.5vw,18px);font-weight:300;letter-spacing:-.01em;
  line-height:1.75;color:var(--cream-50);}
.post-body p{margin-bottom:1.5em;}
.post-body strong{color:var(--cream-90);font-weight:600;}
.post-body em{color:var(--cream-90);}

.post-body h2{margin:clamp(48px,6vw,72px) 0 24px;font-size:clamp(24px,2.8vw,34px);
  font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--cream);text-wrap:balance;}

/* frase que fecha um raciocínio, puxada pra fora da coluna de texto */
.post-punch{margin:clamp(36px,4vw,52px) 0;padding-left:22px;border-left:2px solid var(--red-edge);
  font-size:clamp(20px,2.2vw,26px);font-weight:500;letter-spacing:-.03em;line-height:1.25;
  color:var(--cream);text-wrap:balance;}

/* Ilustração do post. Mesmo acabamento dos blocos de mídia do case, ou seja
   canto arredondado, filete de 1px e a legenda pequena em caixa alta. As
   imagens são faixas de cor chapada geradas aqui, não still de série. */
.post-fig{margin:clamp(40px,5vw,60px) 0;}
.post-fig img{width:100%;border:1px solid var(--cream-10);border-radius:clamp(12px,1.4vw,18px);}
.post-fig figcaption{margin-top:14px;color:var(--cream-30);font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.5;}
.post-fig--par{display:grid;gap:clamp(14px,1.6vw,20px);}
@media(min-width:720px){.post-fig--par{grid-template-columns:1fr 1fr;}
  .post-fig--par figcaption{margin-top:12px;}}

/* Foto de terceiro sangra um pouco pra fora da coluna de leitura, só o
   suficiente pra respirar. Passou muito disso ela come a página. */
.post-fig--larga{width:min(860px,92vw);margin-inline:calc(50% - min(430px,46vw));}
.post-fig--larga figcaption{width:min(720px,90vw);margin-inline:auto;}

/* Pôster é retrato. Na largura do texto ele viraria um paredão, então fica
   estreito e centralizado, com a legenda embaixo. */
.post-fig--retrato{display:grid;justify-items:center;}
.post-fig--retrato img{width:min(360px,72vw);}
.post-fig--retrato figcaption{max-width:min(420px,80vw);text-align:center;}

.post-credito{color:var(--cream-30);}

/* Barra de temperatura. Abre cada seção com a cor do assunto dela, então o
   leitor sente o argumento antes de ler o parágrafo. É o próprio tema do
   texto virando elemento de layout. */
.post-body h2{position:relative;padding-top:26px;}
.post-body h2::before{content:"";position:absolute;top:0;left:0;width:64px;height:3px;border-radius:2px;
  background:var(--barra,var(--red-edge));}
.post-body h2.t-frio{--barra:linear-gradient(90deg,#16303F,#5C8AA3);}
.post-body h2.t-quente{--barra:linear-gradient(90deg,#8F4415,#E6BE85);}
.post-body h2.t-mistura{--barra:linear-gradient(90deg,#27536E,#8F4415);}

.post-end{margin-top:clamp(64px,8vw,96px);padding-top:clamp(36px,4vw,48px);
  border-top:1px solid var(--cream-10);display:grid;gap:22px;justify-items:start;}
.post-end p{font-size:clamp(18px,2vw,24px);font-weight:500;letter-spacing:-.03em;
  line-height:1.25;color:var(--cream);max-width:22ch;}