/* ==========================================================================
   HAUS · mockup da home · v1
   Ordem do arquivo: fontes, tokens, base, utilidades, blocos na ordem da
   pagina, anotacoes, responsivo. Nao ha regra depois do responsivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes (todas servidas daqui, mesmo dominio do HTML)
   O navegador so baixa o peso que a pagina realmente usa, entao declarar
   os sete nao custa banda.
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Regio Mono'; src: url('../fonts/RegioMono-UltraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Regio Mono'; src: url('../fonts/RegioMono-Light.woff2')      format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Regio Mono'; src: url('../fonts/RegioMono-Regular.woff2')    format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Regio Mono'; src: url('../fonts/RegioMono-Medium.woff2')     format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Regio Mono'; src: url('../fonts/RegioMono-SemiBold.woff2')   format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Regio Mono'; src: url('../fonts/RegioMono-Bold.woff2')       format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Regio Mono'; src: url('../fonts/RegioMono-ExtraBold.woff2')  format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

/* Serifa de display: Gelasio. E o desenho e as metricas da Georgia num
   arquivo livre (OFL), o que resolve o titulo com o peso que a marca quer sem
   depender de fonte instalada na maquina de quem abre nem de licenca de
   redistribuicao. Variavel de 400 a 700, com italico. */
@font-face {
  font-family: 'Haus Serif';
  src: url('../fonts/Gelasio-Roman-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Haus Serif';
  src: url('../fonts/Gelasio-Italic-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: italic; font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Cor. O marrom foi medido no arquivo do logo: #806F59. O preto e o
     branco puxam para o quente para conversar com ele. */
  --paper:      #FBFAF8;
  --paper-tint: #F3F0EB;
  --ink:        #17140F;
  --ink-70:     rgba(23, 20, 15, .68);
  --ink-45:     rgba(23, 20, 15, .45);
  --brand:      #806F59;
  --brand-deep: #5E5040;
  --rule:       rgba(23, 20, 15, .18);
  --rule-soft:  rgba(23, 20, 15, .09);
  --noir:       #100E0B;
  --note:       #2A78D6;

  /* Peso 700 porque e nele que a Gelasio coincide exatamente com a Georgia
     (a Georgia nao tem peso 600). Medido: 2125 px nas duas, mesma frase. */
  --serif: 'Haus Serif', Georgia, 'Times New Roman', serif;
  --serif-tracking: -.004em;
  --serif-weight: 700;

  --mono:  'Regio Mono', ui-monospace, Menlo, Consolas, monospace;

  --gutter: 40px;
  --max:    1180px;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* height: auto e obrigatorio junto com max-width: 100%. Sem ele, o atributo
   height do HTML continua valendo como altura CSS enquanto a largura encolhe,
   e a foto estica. Era o que acontecia com a imagem da manchete: 656x576 em
   vez de 656x369. */
img { max-width: 100%; height: auto; display: block; }

/* display: block acima vence o [hidden] da folha do navegador. Sem esta
   regra, esconder um elemento por JS nao esconde nada. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

:where(a, button, input):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   4. Utilidades tipograficas
   -------------------------------------------------------------------------- */
.lbl {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.lbl-dim { color: var(--ink-45); }

.hl {
  font-family: var(--serif);
  font-weight: var(--serif-weight);
  line-height: 1.04;
  letter-spacing: var(--serif-tracking);
  margin: 0;
  /* Quebra gulosa, que enche cada linha ate onde a proxima palavra nao cabe
     mais. Medido nas manchetes desta pagina: balance dava 56% a 75% de
     aproveitamento da coluna, pretty dava 71% a 98%, e wrap da 79% a 98%.
     O preco do guloso e poder deixar uma palavra sozinha na ultima linha. */
  text-wrap: wrap;
  font-optical-sizing: auto;
}
.hl-s {
  font-family: var(--serif);
  font-weight: var(--serif-weight);
  font-size: 1.16rem;
  line-height: 1.16;
  margin: 0;
  font-optical-sizing: auto;
}
.dek {
  font-family: var(--mono);
  font-weight: 300;
  font-size: .96rem;
  line-height: 1.5;
  color: var(--ink-70);
  margin: 0;
}
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.figure figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-45);
  padding-top: 9px;
}

/* Foto com leve aproximacao no hover. Contido pelo overflow do pai. */
.shot { overflow: hidden; background: var(--paper-tint); }
.shot img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
a:hover .shot img { transform: scale(1.03); }

/* --------------------------------------------------------------------------
   5. Cabecalho do site
   -------------------------------------------------------------------------- */
/* Precisa de altura real: elemento de rect vazio nao "intersecta" e o
   observador nunca dispararia. */
#topo-sentinela { height: 1px; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: background .45s ease, border-color .45s ease, color .45s ease;
}

/* Ao sair do topo, o cabecalho escurece. Mesmo truque do fechamento: os
   tokens sao redefinidos neste escopo e os filhos acompanham sozinhos,
   inclusive o botao Newsletter e o campo de busca. */
.masthead.is-dark {
  --paper:      #100E0B;
  --paper-tint: rgba(251, 250, 248, .06);
  --ink:        #FBFAF8;
  --ink-70:     rgba(251, 250, 248, .70);
  --ink-45:     rgba(251, 250, 248, .52);
  --rule:       rgba(251, 250, 248, .20);
  --brand:      #C9AE8D;
  background: var(--paper);
  color: var(--ink);
}

.masthead__in {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-block: 22px;
}

/* A marca e um SVG embutido pintado com `currentColor`, entao ela acompanha o
   `color` de quem a contem. Como `.masthead.is-dark` ja redefine `--ink` e a
   propria `.masthead` ja anima `color` em .45s, a inversao para o tom claro
   sai de graca: nao ha segundo arquivo nem troca de opacidade.
   A altura vem do viewBox; fixar `height` aqui distorceria o desenho. */
.masthead__logo {
  display: block;
  line-height: 0;
  color: var(--ink);
}
.masthead__logo .marca {
  display: block;
  width: 132px;
  height: auto;
}
.masthead nav {
  display: flex;
  gap: 24px;
  margin-inline: auto;
  flex-wrap: wrap;
}
.masthead nav a { padding-block: 5px; border-bottom: 1px solid transparent; }
.masthead nav a:hover { border-bottom-color: var(--ink); }
.masthead__tools { display: flex; align-items: center; gap: 16px; }

/* --------------------------------------------------------------------------
   5b. Busca: a palavra vira campo
   A palavra "Buscar" encolhe até zero enquanto o campo cresce ao lado. Os
   dois vivem no mesmo container flex, então a troca acontece no mesmo lugar
   da barra, sem salto. Clique fora ou Esc faz o caminho de volta.
   -------------------------------------------------------------------------- */
.search { display: flex; align-items: center; }

.search__btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-45);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  max-width: 6rem;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .2s ease, max-width .34s cubic-bezier(.2, .7, .3, 1), color .2s;
}
.search__btn:hover { color: var(--ink); }

.search__form {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  border-bottom: 1px solid var(--rule);
  transition: width .38s cubic-bezier(.2, .7, .3, 1),
              opacity .26s ease .06s,
              border-color .45s ease;
}
.search__ico {
  flex: none;
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0 0 0 4px;
  cursor: pointer;
  color: var(--ink-45);
  transition: color .2s;
}
.search__ico svg { width: 15px; height: 15px; display: block; }
.search__ico:hover { color: var(--ink); }
.search__form input {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 0;
  background: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--mono);
  font-weight: 300;
  font-size: .8rem;
  color: var(--ink);
}
.search__form input::placeholder { color: var(--ink-45); }
.search__form input::-webkit-search-cancel-button { display: none; }

.search.is-open .search__btn { max-width: 0; opacity: 0; }
.search.is-open .search__form {
  /* min() para nao estourar a barra em tela estreita */
  width: min(236px, 42vw);
  opacity: 1;
  pointer-events: auto;
  border-bottom-color: var(--ink);
}
.search.is-open .search__ico { color: var(--ink); }

.btn-line {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 11px 16px;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .45s ease;
}
.btn-line:hover { background: var(--ink); color: var(--paper); }

.btn-solid {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 13px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background .2s;
}
.btn-solid:hover { background: var(--brand-deep); border-color: var(--brand-deep); }

/* --------------------------------------------------------------------------
   7. Manchete e coluna de ultimas
   -------------------------------------------------------------------------- */
.lead { border-bottom: 1px solid var(--rule); }
.lead__in {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 0;
}
.lead__main {
  padding: 38px 44px 44px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lead__meta { display: flex; gap: 14px; align-items: center; }
/* Sem trava de largura: o texto usa a coluna inteira. As travas em ch que
   estavam aqui (19ch no titulo e 46ch no dek) cortavam a linha bem antes da
   borda, com sobra de 178 px e 250 px. */
/* Reduzida a pedido da Anna, e calibrada no acervo real: a mediana dos
   titulos tem 66 caracteres, mas o p99 tem 105 e o maior tem 148. O tamanho
   anterior so era confortavel no caso mediano. */
.lead__main .hl { font-size: clamp(2rem, 3.6vw, 2.7rem); }
.lead__main .dek { font-size: 1.02rem; }

.latest {
  border-left: 1px solid var(--rule);
  padding: 38px 0 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* A coluna da direita e mais curta que a manchete, e antes disso o excedente
   virava um bloco branco de 242 px abaixo do botao. Agora a lista cresce para
   ocupar a sobra e a divide em faixas iguais, marcadas pelos filetes. O vazio
   deixa de ser um buraco no fim e passa a ser respiro entre as chamadas. */
.latest__list {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.latest__list li {
  flex: 1;
  display: flex;
  min-height: 88px;
}
.latest__list li + li { border-top: 1px solid var(--rule-soft); }
.latest__list a {
  display: flex;
  gap: 14px;
  padding-block: 15px;
  align-items: center;
  width: 100%;
}
/* 104px e nao 74px: com a lista preenchendo a coluna, a faixa ficou com cerca
   de 166px de altura, e a miniatura pequena deixava a linha parecendo vazia.
   A fonte da imagem tem 150px, entao 104 ainda esta dentro da resolucao. */
.latest__list .shot { width: 104px; height: 104px; flex: none; }
.latest__list .shot img { width: 104px; height: 104px; object-fit: cover; }
.latest__txt { display: flex; flex-direction: column; gap: 6px; }
.latest__list .hl-s { font-size: 1.02rem; }
.latest__list a:hover .hl-s { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   8. Entrevista
   -------------------------------------------------------------------------- */
.interview { border-bottom: 1px solid var(--rule); }
.interview__in { padding-block: 34px; display: flex; flex-direction: column; gap: 20px; }
.interview__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.interview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
}
.interview__grid .hl { font-size: clamp(1.9rem, 3vw, 2.35rem); }
.interview__txt { display: flex; flex-direction: column; gap: 16px; }
.interview__cite { color: var(--brand); }

/* --------------------------------------------------------------------------
   9. Grade das verticais
   -------------------------------------------------------------------------- */
.verticals { border-bottom: 1px solid var(--rule); }
.verticals__in { padding-block: 34px; display: flex; flex-direction: column; gap: 22px; }
.verticals__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.verticals__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.vcard { display: flex; flex-direction: column; gap: 11px; }
.vcard .shot { aspect-ratio: 4 / 3; }
.vcard .shot img { width: 100%; height: 100%; object-fit: cover; }
.vcard__cat { color: var(--brand); }
.vcard .dek { font-size: .84rem; }
.vcard:hover .hl-s { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   10. Fechamento escuro (institucional + newsletter + rodape)
   Nenhum componente e restilizado aqui. Todos leem cor de token, entao basta
   redefinir os tokens neste escopo e o bloco inteiro se inverte, inclusive o
   botao Assinar, que troca preto-no-claro por claro-no-escuro sozinho.
   -------------------------------------------------------------------------- */
.closing {
  --paper:      #100E0B;
  --paper-tint: rgba(251, 250, 248, .06);
  --ink:        #FBFAF8;
  --ink-70:     rgba(251, 250, 248, .70);
  --ink-45:     rgba(251, 250, 248, .48);
  --rule:       rgba(251, 250, 248, .22);
  --rule-soft:  rgba(251, 250, 248, .12);
  /* O marrom da marca nao sobrevive em fundo preto (contraste 2,2:1),
     entao aqui ele sobe de luminancia mantendo o mesmo matiz. */
  --brand:      #C9AE8D;
  --brand-deep: #E0CBB0;

  background: var(--paper);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   10b. Institucional e newsletter
   -------------------------------------------------------------------------- */
.about { border-bottom: 1px solid var(--rule); }
.about__in {
  padding-block: 40px;
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 44px;
}
.about__txt { display: flex; flex-direction: column; gap: 16px; }
.about__txt .hl { font-size: clamp(1.6rem, 2.4vw, 1.95rem); }

.stats { display: flex; gap: 44px; margin-top: 6px; flex-wrap: wrap; }
/* align-items: center faz o numero se centralizar sobre o rotulo, que e
   sempre o elemento mais largo da coluna. O text-align cuida do numero
   durante a contagem, quando ele e mais estreito que a largura travada. */
.stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.stats .num { text-align: center; }
.stats .num {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 2.65rem;
  line-height: 1;
  /* tabular-nums e obrigatorio aqui: sem ele o numero muda de largura a cada
     quadro da contagem e o rotulo abaixo fica tremendo. */
  font-variant-numeric: tabular-nums;
}

.signup {
  border: 1px solid var(--rule);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  background: var(--paper-tint);
  align-self: start;
  /* O cabecalho e fixo. Sem esta folga ele cobriria o topo do formulario
     justamente quando a rolagem para nele. */
  scroll-margin-top: 96px;
  transition: border-color .3s ease, box-shadow .3s ease;
}

/* Quando o leitor chega aqui pelo botao do topo, a caixa se anuncia por um
   instante. Sem isso a pagina rola e nada indica que ele chegou ao destino. */
.signup.is-alvo {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(128, 111, 89, .16);
}
.signup .hl-s { font-size: 1.24rem; }
.signup input {
  height: 42px;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding-inline: 13px;
  font-family: var(--mono);
  font-size: .84rem;
  color: var(--ink);
  width: 100%;
}
.signup input::placeholder { color: var(--ink-45); }
.signup__done {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   11. Rodape
   -------------------------------------------------------------------------- */
.foot__in {
  padding-block: 30px 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
/* Dentro de `.closing`, que ja redefine `--ink` para o tom claro, entao o
   `currentColor` da marca resolve o branco sozinho. */
.foot__logo { display: block; line-height: 0; color: var(--ink); }
.foot__logo .marca { display: block; width: 96px; height: auto; }
.foot nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.foot nav a:hover { color: var(--brand); }

/* Icone do Instagram. Herda a cor do link, entao acompanha o hover e nao
   precisa de arquivo de imagem nem de segunda versao para fundo escuro. */
.ico {
  display: flex;
  align-items: center;
  color: var(--ink);
}
.ico svg { width: 19px; height: 19px; display: block; }
.ico:hover { color: var(--brand); }

/* Chamada sem imagem destacada. Sao 251 no acervo, 2,5%. O bloco ocupa o
   mesmo espaco da foto e mostra a inicial do titulo, para a grade nao ficar
   com buraco nem fingir que ha imagem. */
.semfoto {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--paper-tint);
  border: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.semfoto span {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--ink-45);
  line-height: 1;
}
.latest__list .shot .semfoto { min-height: 104px; }

/* --------------------------------------------------------------------------
   12. Materia
   O corpo vem do WordPress em blocos Gutenberg, entao as classes wp-block-*
   sao dado de entrada: nao adianta renomear, elas estao gravadas em 10.130
   registros. O que da para fazer e vesti-las.
   -------------------------------------------------------------------------- */
/* O wireframe 02 desenha a materia num card de 820 px contra os 1180 da home,
   e "leitura centrada, coluna unica". A PROPORCAO dele e o que vale
   (texto 620 de 820, ou 76%); a largura absoluta nao, porque o wireframe
   desenhou a tela isolada. Lado a lado com a home, 820 fica visivelmente
   estreito: cabecalho e rodape correm em 1180 e o meio da pagina encolhe.

   Entao a materia usa o mesmo trilho da home, com a proporcao do wireframe:
     --col   832 px  texto, intertitulo, lista e citacao
     100%   1100 px  figura, galeria e video, que passam da coluna de texto */
.post {
  /* Texto na MESMA medida da foto, do trilho ao trilho. Pedido do Marcelo em
     12/09/2026, depois de ver a coluna estreita centralizada e depois
     alinhada a esquerda: nas duas, a sobra ao lado do texto lia como se a
     linha tivesse acabado antes da hora.

     O preco esta medido e assumido: em 1100 px a linha passa de 100
     caracteres, acima da faixa classica de 60 a 80. A entrelinha de 1,72
     segura parte disso. Para voltar atras basta trocar este unico valor por
     uma medida fixa, por exemplo 52rem. */
  --col: 100%;
  padding-bottom: 10px;
}

.post__head { padding-top: 40px; }

/* Barra de progresso de leitura, colada na borda de baixo do cabecalho.
   O cabecalho e sticky, e elemento posicionado e bloco de contencao, entao
   a barra viaja com ele sem calculo de altura. */
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--rule-soft);
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
}

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumbs a:hover { color: var(--brand); }

/* Chapeu, titulo, linha de apoio e assinatura dividem a MESMA coluna do
   corpo. Sem isso o titulo encosta no trilho da pagina e o texto comeca
   133 px mais para dentro: dois alinhamentos a esquerda na mesma leitura.
   Quem passa da coluna e so a foto. */
.post__head > * { max-width: var(--col); margin-inline: 0 auto; }

/* 2,5rem no maior titulo do acervo (148 caracteres) da 7 linhas, que e muito.
   O clamp desce conforme a tela e o line-height fecha para 1.05. */
.post__title {
  font-size: clamp(1.72rem, 1.1rem + 2.2vw, 3rem);
  margin-block: 18px 0;
  margin-inline: 0 auto;
}

.post__dek {
  font-size: 1.06rem;
  line-height: 1.55;
  margin-top: 16px;
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}
.post__meta a { color: var(--brand); }
.post__meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

.post__lead { margin: 30px auto 0; }
.post__lead img { width: 100%; }
.post__lead figcaption,
.post__body figcaption {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .06em;
  color: var(--ink-45);
  padding-top: 10px;
}

/* A coluna de leitura, sempre em rem e NUNCA em em.
   `max-width` em em resolve contra a fonte do PROPRIO elemento, entao o mesmo
   `38em` dava 644 px no paragrafo (17 px), 985 px no h2 (26 px) e 882 px na
   figura. Eram tres colunas diferentes na mesma pagina, e o texto era a mais
   estreita das tres: parecia que a linha acabava antes de chegar na borda,
   porque acabava mesmo. */
.post__body {
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--ink);
  margin-top: 34px;
}
.post__body > * { max-width: var(--col); margin-inline: 0 auto; }
.post__body p { margin-block: 0 1.25em; margin-inline: 0 auto; }
.post__body a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post__body a:hover { color: var(--ink); }
.post__body strong, .post__body b { font-weight: 600; }

/* Os H1 do corpo (24 materias) chegam aqui ja rebaixados para H2 pelo
   ConteudoDaMateria, para a pagina ter um H1 so. */
.post__body h2, .post__body h3, .post__body h4 {
  font-family: var(--serif);
  font-weight: var(--serif-weight);
  line-height: 1.16;
  letter-spacing: var(--serif-tracking);
  margin-block: 1.9em .55em;
  margin-inline: 0 auto;
}
.post__body h2 { font-size: 1.62rem; }
.post__body h3 { font-size: 1.3rem; }
.post__body h4 { font-size: 1.1rem; font-family: var(--mono); font-weight: 500; letter-spacing: .02em; }

.post__body ul, .post__body ol { margin-block: 0 1.25em; margin-inline: 0 auto; padding-left: 1.3em; }
.post__body li { margin-bottom: .4em; }

.post__body blockquote,
.post__body .wp-block-quote,
.post__body .wp-block-pullquote {
  margin-block: 2em;
  margin-inline: 0 auto;
  padding-left: 22px;
  border-left: 2px solid var(--brand);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--ink);
}
.post__body blockquote p { margin-bottom: .5em; }
.post__body blockquote cite,
.post__body .wp-block-quote__citation {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* Figura pode passar da coluna de texto: foto de arquitetura vale a largura.
   O teto e a largura da pagina, nunca o tamanho natural do arquivo. */
.post__body figure,
.post__body .wp-block-image {
  max-width: 100%;
  margin: 2.2em auto;
}
.post__body figure img { width: 100%; }

.post__body .wp-block-gallery,
.post__body .blocks-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 100%;
  margin: 2.2em auto;
  padding: 0;
  list-style: none;
}
.post__body .wp-block-gallery figure,
.post__body .blocks-gallery-item { margin: 0; max-width: none; }

/* "Galeria em grade sai da coluna de texto para o full-width do card",
   diz a anotacao do wireframe. O negativo da goteira leva ela ate a borda. */
@media (min-width: 861px) {
  .post__body .wp-block-gallery,
  .post__body .blocks-gallery-grid {
    margin-inline: calc(-1 * var(--gutter));
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
  }
}

/* Video de terceiro. O acervo tem 2.194 iframes, quase todos YouTube ou
   Vimeo, e nenhum deles traz largura util. */
.post__body iframe,
.post__body .wp-block-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  margin: 2.2em auto;
}
.post__body .wp-block-embed { max-width: 100%; }
.post__body .wp-block-embed__wrapper { margin: 0; }

.post__body hr, .post__body .wp-block-separator {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 2.4em auto;
  max-width: 6em;
}

.post__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin: 2em auto;
}
.post__body th, .post__body td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 9px 10px;
  text-align: left;
}

/* Tabela e bloco largo nao podem empurrar a pagina para o lado: o scroll
   fica dentro deles. */
.post__body .wp-block-table,
.post__body .wp-block-code,
.post__body pre { overflow-x: auto; max-width: 100%; }

.post__body .aligncenter { margin-inline: auto; }
.post__body .alignwide, .post__body .alignfull { max-width: 100%; }

.post__tags { margin-block: 42px 0; margin-inline: 0 auto; max-width: var(--col); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.post__tags ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  padding: 6px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-70);
}
.tag:hover { border-color: var(--brand); color: var(--brand); }

/* Assinatura e compartilhar, na regua que separa o cabecalho da materia do
   corpo. E a linha "Por Nome do Autor · Compartilhar" do wireframe. */
.post__assina {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.post__assina a { color: var(--brand); }
.post__assina a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post__ponto { color: var(--ink-45); }
.compartilhar {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink-45);
  margin-left: auto;
}
.compartilhar:hover { color: var(--ink); }

/* "Leia tambem" acompanha a largura do card da materia, com tres colunas. */
.post-relacionadas { border-top: 1px solid var(--rule); border-bottom: 0; }
.post-relacionadas .verticals__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* --------------------------------------------------------------------------
   13. Arquivo (categoria, tag, autor, e a home da pagina 2 em diante)
   -------------------------------------------------------------------------- */
.arq__head {
  padding: 40px 0 26px;
  border-bottom: 1px solid var(--rule);
}
.arq__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.arq__meta a:hover { color: var(--brand); }

.arq__titulo {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem);
  margin: 14px 0 0;
}
.arq__conta { display: block; margin-top: 14px; }

.arq__lista { padding-block: 34px; }

/* A chamada de abertura. A foto pesa um pouco mais que o texto, como na
   manchete da home, para a pagina ter um ponto de entrada claro. */
.arq__destaque {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 30px;
  align-items: center;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule-soft);
}
.arq__destaque-foto { aspect-ratio: 4 / 3; }
.arq__destaque-txt { display: flex; flex-direction: column; gap: 13px; }
.arq__destaque-hl { font-size: clamp(1.4rem, 1rem + 1.3vw, 2rem); }
.arq__destaque:hover .arq__destaque-hl { text-decoration: underline; text-underline-offset: 4px; }

/* Tres colunas fecham com as nove restantes da pagina. */
.arq__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 26px;
}

.arq__vazio { padding-block: 60px; display: flex; flex-direction: column; gap: 10px; }
.arq__vazio a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

.arq__pag {
  padding-block: 10px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.arq__pag .btn-line { text-decoration: none; }

/* --- Busca (tela 03 do wireframe) --------------------------------------- */
.busca__in { padding: 56px 0 80px; }
.busca__h1 { margin: 0 0 14px; font-weight: 400; }
.busca__form { display: flex; flex-direction: column; gap: 14px; }

/* Campo grande, como o wireframe pede: a busca e o assunto da tela, nao um
   acessorio do cabecalho. */
.busca__campo {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 14px;
}
.busca__campo input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-weight: 300;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.3rem);
  line-height: 1.1;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
}
.busca__campo input::placeholder { color: var(--ink-45); }
.busca__campo input:focus { outline: none; }
.busca__campo input::-webkit-search-cancel-button { filter: grayscale(1); }
.busca__campo .btn-solid { flex: none; }

.busca__conta { display: block; }

.busca__filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
  padding-bottom: 14px;
}
.busca__filtros a:hover { color: var(--brand); }
.busca__ativo { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 4px; }

.busca__nota { display: block; margin: 0 0 4px; text-transform: none; letter-spacing: .04em; }
.busca__nota a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* Lista tipografica: titulo a esquerda, origem a direita, separados por
   regua. Sem foto, de proposito, para varrer a lista com o olho. */
.busca__lista { list-style: none; margin: 10px 0 0; padding: 0; }
.busca__lista li { border-top: 1px solid var(--rule-soft); }
.busca__lista li:last-child { border-bottom: 1px solid var(--rule-soft); }
.busca__lista a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 20px 0;
}
.busca__titulo { font-size: 1.32rem; max-width: 44ch; }
.busca__lista a:hover .busca__titulo { text-decoration: underline; text-underline-offset: 4px; }
.busca__origem { flex: none; }

.busca__sugestoes, .busca__vazio { margin-top: 44px; display: flex; flex-direction: column; gap: 14px; }
.busca__sugestoes ul, .busca__sugestoes-lista {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
}
.busca__vazio .dek a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* Pagina de erro. Ela existe para devolver o leitor ao acervo, nao para
   pedir desculpa: por isso saidas concretas em vez de "voltar". */
.erro__in {
  padding: 90px 0 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 40rem;
}
.erro__titulo { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
.erro__dek { max-width: 34rem; }
.erro__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.erro__acoes a { text-decoration: none; }
.erro__secoes {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.erro__secoes nav { display: flex; flex-wrap: wrap; gap: 22px; }
.erro__secoes nav a:hover { color: var(--brand); }

/* --------------------------------------------------------------------------
   14. Anotacoes estruturais (as do wireframe, escondidas por padrao)
   -------------------------------------------------------------------------- */
.note {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--note);
  display: none;
}
body.show-notes .note { display: block; }

/* --------------------------------------------------------------------------
   15. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .lead__in { grid-template-columns: 1fr 340px; }
  .verticals__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .arq__grade { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .about__in { grid-template-columns: 1fr 300px; gap: 34px; }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; }

  .masthead__in { flex-wrap: wrap; gap: 16px; padding-block: 16px; }
  .masthead nav { order: 3; width: 100%; margin-inline: 0; gap: 18px; }
  .masthead__tools { margin-left: auto; }

  .lead__in { grid-template-columns: 1fr; }
  .lead__main { padding: 30px 0 34px; }
  .latest {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 30px 0 34px;
  }

  .interview__grid { grid-template-columns: 1fr; gap: 22px; }
  .about__in { grid-template-columns: 1fr; padding-block: 34px; }
  .stats { gap: 30px; }

  .post__head { padding-top: 26px; }
  .post__body { font-size: 1.02rem; }
  .post__body > *,
  .post__body figure,
  .post__body .wp-block-image,
  .post__body .wp-block-gallery { max-width: 100%; }
  .post__meta { gap: 12px; }

  .arq__head { padding-top: 26px; }
  .arq__destaque { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 560px) {
  .verticals__grid { grid-template-columns: 1fr; }
  .arq__grade { grid-template-columns: 1fr; }
  .post-relacionadas .verticals__grid { grid-template-columns: 1fr; }
  .foot__in { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   16. Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .shot img { transition: none; }
  a:hover .shot img { transform: none; }
}