/* =========================================================================
   Quixotesco — componentes v1.0
   =========================================================================
   Cada componente aparece UMA vez neste arquivo. Se você precisar procurar
   duas, é porque algo saiu do lugar.

   Nenhum !important, nenhum seletor prefixado com `body.home`: a home é
   escura porque a seção declara data-qx-superficie="tinta", não porque cada
   regra foi reescrita para ela.
   ========================================================================= */

/* -------------------------------------------------------------------------
   MASTHEAD
   ------------------------------------------------------------------------- */

.qx-header {
  position: relative;
  z-index: 2;
}

.qx-home-masthead-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* Pela linha de base: o ◆ MENU encontra a base do wordmark, não o centro
     do conjunto wordmark + tagline, que o deixava alto demais. */
  align-items: baseline;
  gap: var(--qx-passo);
  padding-block: calc(var(--qx-base) * 3);
}

.qx-home-brand-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--qx-base) * 1.5);
}

.qx-brand,
.qx-brand a {
  display: block;
  margin: 0;
  line-height: 1;
  color: var(--qx-texto);
}

/* As marcas são os arquivos da identidade, não uma composição tipográfica
   aproximada: o losango dourado faz parte do desenho do logotipo. */
.qx-brand-img {
  display: block;
  width: auto;
  height: 1em;
}

.qx-brand--home { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.qx-brand--compact { font-size: 1.625rem; }

.qx-footer-mark {
  display: block;
  width: auto;
  height: clamp(3.5rem, 7vw, 6rem);
  margin: 0;
}

/* A tagline não é justificada.

   Esticá-la até a largura do wordmark abria buracos entre as palavras de uma
   linha de sete palavras curtas. O alinhamento com a marca se faz por
   entreletra — que é espaçamento uniforme, não espaço distribuído entre
   poucas palavras — e por centragem. */
.qx-tagline {
  margin: 0;
  font-family: var(--qx-texto-f);
  font-style: italic;
  font-size: clamp(0.78rem, 0.95vw, 0.9rem);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: center;
  text-wrap: balance;
  color: var(--qx-texto-2);
}

.qx-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qx-passo);
  padding-block: calc(var(--qx-base) * 2.5);
}

.qx-header-tools {
  display: flex;
  justify-content: flex-start;
}

.qx-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--qx-base) * 1.25);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--qx-texto);
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  font-weight: 500;
  letter-spacing: var(--qx-ui-tracking);
  text-transform: uppercase;
  cursor: pointer;
}

.qx-menu-diamond { color: var(--qx-ouro); }

.qx-menu-toggle:hover { color: var(--qx-ouro); }

/* -------------------------------------------------------------------------
   A PRIMEIRA DOBRA
   -------------------------------------------------------------------------
   Aqui morava o vão de até 470px em 1080p: o herói recebia `flex: 1` e o
   grid lá dentro continuava do tamanho do texto. A elasticidade agora
   atravessa a cadeia inteira até a fotografia, que é a última peça a
   esticar. Nenhuma altura é calculada; nada pode desatualizar.
   ------------------------------------------------------------------------- */

.qx-home-opening {
  display: flex;
  flex-direction: column;
  min-height: min(100svh, 60rem);
}

.qx-opening-header,
.qx-opening-index { flex: 0 0 auto; }

.qx-opening-hero,
.qx-opening-hero > .qx-hero-home,
.qx-hero-home > .qx-medida,
.qx-home-editorial > .qx-lead-story {
  display: flex;
  min-height: 0;
}

.qx-opening-hero,
.qx-opening-hero > .qx-hero-home,
.qx-hero-home > .qx-medida { flex: 1 1 auto; }

/* A primeira dobra inteira — masthead, destaque, chamadas e índice — vive
   dentro da mesma medida. Sem o teto abaixo, o item de flex crescia até a
   borda da tela e só o cabeçalho ficava alinhado. */
.qx-hero-home > .qx-medida {
  width: 100%;
  max-width: min(100% - 2 * var(--qx-margem), var(--qx-editorial));
  margin-inline: auto;
}

.qx-hero-home > .qx-medida { flex-direction: column; }

.qx-home-editorial {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--qx-bloco);
  padding-block: calc(var(--qx-base) * 2) var(--qx-bloco);
}

/* O DESTAQUE ---------------------------------------------------------- */

.qx-lead-story {
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 20rem;
  padding: clamp(1.5rem, 2.5vw, 2.75rem);
  overflow: hidden;
  isolation: isolate;
}

.qx-lead-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}

.qx-lead-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--qx-image-position, var(--qx-foco-imagem));
  filter: var(--qx-filtro-imagem);
}

/* A legibilidade do título sobre fotografia não pode depender da fotografia. */
.qx-lead-story--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(16, 24, 32, 0.10) 0%, rgba(16, 24, 32, 0.28) 34%, rgba(16, 24, 32, 0.70) 66%, rgba(16, 24, 32, 0.94) 100%),
    linear-gradient(90deg, rgba(16, 24, 32, 0.38) 0%, rgba(16, 24, 32, 0.04) 72%);
}

/* Sem fotografia, o vazio é espaço tipográfico, não erro de layout. */
.qx-lead-story:not(.qx-lead-story--has-image) {
  background: var(--qx-petroleo);
  box-shadow: inset 0 0 0 1px var(--qx-linha);
}

.qx-lead-story,
.qx-lead-story a { color: #edede8; }

.qx-lead-kicker {
  margin: 0 0 calc(var(--qx-base) * 1.5);
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  font-weight: 500;
  letter-spacing: var(--qx-ui-tracking);
  text-transform: uppercase;
  color: rgba(237, 237, 232, 0.82);
}

.qx-lead-kicker span { color: var(--qx-ouro-marca); }
.qx-lead-kicker b { color: rgba(237, 237, 232, 0.28); font-weight: 400; }

.qx-lead-title {
  margin: 0;
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* O resumo tem a medida do título, não uma medida própria mais estreita:
   justificado, com hifenização automática, como o corpo dos textos. */
.qx-lead-dek {
  margin: calc(var(--qx-base) * 2) 0 0;
  font-style: italic;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.45;
  color: rgba(237, 237, 232, 0.90);
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
  hyphenate-limit-zone: 8%;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 2;
}

.qx-lead-meta-wrap { margin-top: var(--qx-passo); }

.qx-lead-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--qx-base) * 1.25);
  margin: 0;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 237, 232, 0.78);
}

.qx-diamond-sep { color: var(--qx-ouro-marca); }

/* AS TRÊS CHAMADAS ----------------------------------------------------- */

.qx-secondary-stories {
  display: grid;
  grid-template-rows: repeat(var(--qx-secondary-count, 3), minmax(0, 1fr));
  min-height: 0;
  border-top: 1px solid var(--qx-linha);
}

.qx-secondary-story {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--qx-base) * 1.25);
  padding-block: var(--qx-passo);
  border-bottom: 1px solid var(--qx-linha-fraca);
}

.qx-secondary-story:last-child { border-bottom: 0; }

.qx-secondary-meta {
  margin: 0;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qx-texto-2);
}

.qx-secondary-meta span { color: var(--qx-ouro); margin-inline: 0.5em; }

.qx-secondary-story h3 {
  margin: 0;
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.35vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.qx-secondary-story h3 a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  transition: color var(--qx-micro) var(--qx-curva);
}

.qx-secondary-story h3 a:hover { color: var(--qx-ouro); }

.qx-link-arrow {
  display: inline-block;
  color: var(--qx-ouro);
  transition: transform var(--qx-micro) var(--qx-curva);
}

.qx-secondary-story h3 a:hover .qx-link-arrow { transform: translateX(3px); }

.qx-secondary-dek {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--qx-texto-2);
}

/* -------------------------------------------------------------------------
   ÍNDICE 01–05
   -------------------------------------------------------------------------
   Variante A do canvas: o número é massa gráfica atrás do nome. O destaque
   vem da escala, não de caixa nem de sombra.
   ------------------------------------------------------------------------- */

.qx-cats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* A faixa é a própria medida editorial: sem isso o número fantasma da
     primeira entrada encosta na borda da tela. */
  width: min(100% - 2 * var(--qx-margem), var(--qx-editorial));
  margin-inline: auto;
  border-top: 1px solid var(--qx-linha);
}

.qx-cats-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(var(--qx-base) * 1.75);
  min-height: 108px;
  padding: calc(var(--qx-base) * 4) var(--qx-passo) calc(var(--qx-base) * 3.5) 0;
  overflow: hidden;
}

.qx-cats-num {
  position: absolute;
  left: 0;
  top: 0.02em;
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 5.4vw, 5.4rem);
  line-height: 1;
  color: var(--qx-ouro);
  opacity: 0.13;
  transition: opacity var(--qx-ui-tempo) var(--qx-curva);
}

.qx-cats-nome {
  position: relative;
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.qx-cats-card .qx-filete { position: relative; }

@media (hover: hover) and (pointer: fine) {
  .qx-cats-card:hover .qx-cats-num,
  .qx-cats-card:focus-visible .qx-cats-num { opacity: 0.30; }
}

.qx-cats-card:focus-visible { outline-offset: -3px; }

/* -------------------------------------------------------------------------
   CRONOLOGIA
   ------------------------------------------------------------------------- */

.qx-publicacoes { padding-block: var(--qx-secao); }

.qx-recent-heading {
  padding-bottom: var(--qx-passo);
  border-bottom: 1px solid var(--qx-linha);
}

.qx-recent-heading h2 {
  margin: 0;
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.qx-section-index {
  display: block;
  margin-bottom: calc(var(--qx-base) * 1.5);
  font-size: var(--qx-ui);
  color: var(--qx-ouro);
}

.qx-recent-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--qx-base) * 1.5) var(--qx-passo);
  margin-block: var(--qx-passo) calc(var(--qx-base) * 1.5);
}

.qx-recent-filter-label {
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  color: var(--qx-texto-2);
}

.qx-recent-filter-label span { color: var(--qx-ouro); }

.qx-recent-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 11rem;
}

.qx-recent-select-wrap select {
  width: 100%;
  min-height: 44px;
  padding: calc(var(--qx-base) * 0.75) calc(var(--qx-base) * 4) calc(var(--qx-base) * 0.75) calc(var(--qx-base) * 1.5);
  border: 1px solid var(--qx-linha);
  border-radius: 0;
  background: transparent;
  color: var(--qx-texto);
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  appearance: none;
  cursor: pointer;
}

.qx-recent-select-caret {
  position: absolute;
  right: calc(var(--qx-base) * 1.5);
  pointer-events: none;
  color: var(--qx-ouro);
}

.qx-recent-filter-submit {
  min-height: 44px;
  padding-inline: var(--qx-passo);
  border: 1px solid var(--qx-linha);
  background: transparent;
  color: var(--qx-texto);
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  cursor: pointer;
}

.qx-recent-enhanced .qx-recent-filter-submit { display: none; }

.qx-recent-status {
  min-height: 1.6em;
  margin: calc(var(--qx-base) * 1.5) 0;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  line-height: 1.6;
  color: var(--qx-texto-2);
}

.qx-recent-list { border-top: 1px solid var(--qx-linha); }

.qx-recent-row {
  margin: 0;
  border-bottom: 1px solid var(--qx-linha-fraca);
}

.qx-recent-row-link {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr) auto 1.5rem;
  align-items: center;
  gap: var(--qx-passo);
  min-height: 64px;
  padding-block: var(--qx-passo);
}

.qx-recent-row-link h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--qx-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.2rem, 1.7vw, 1.65rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  transition: color var(--qx-micro) var(--qx-curva);
}

.qx-recent-meta,
.qx-recent-end {
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  line-height: 1.5;
  color: var(--qx-texto-2);
}

.qx-recent-meta {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
}

/* Data, título, tempo e seta dividem UMA linha. Sem o grid-row explícito o
   posicionamento automático empurrava os metadados para uma segunda faixa. */
.qx-recent-end { grid-column: 3; grid-row: 1; }
.qx-recent-arrow { grid-column: 4; grid-row: 1; justify-self: end; color: var(--qx-ouro); }

/* A coincidência com a primeira dobra é informação, não redundância. */
.qx-recent-row.is-headlight .qx-recent-meta::before {
  content: "◆";
  font-size: 0.7em;
  color: var(--qx-ouro);
}

@media (hover: hover) and (pointer: fine) {
  .qx-recent-row-link:hover h3 { color: var(--qx-ouro); }
}

.qx-recent-pagination:empty { display: none; }
.qx-recent-pagination { margin-top: var(--qx-passo); }

.qx-recent-pagination-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* Pela linha de base: o ◆ MENU encontra a base do wordmark, não o centro
     do conjunto wordmark + tagline, que o deixava alto demais. */
  align-items: baseline;
  gap: calc(var(--qx-base) * 1.5);
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
}

.qx-recent-pagination-inner > :last-child { justify-self: end; }
.qx-recent-pagination .is-disabled { color: var(--qx-texto-2); opacity: 0.6; }
.qx-recent-page-state { color: var(--qx-texto-2); }

.qx-recent-pagination a,
.qx-recent-archive a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--qx-base));
  min-height: 44px;
}

.qx-recent-archive {
  margin-top: var(--qx-passo);
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
}

.qx-recent-archive a:hover { color: var(--qx-ouro); }
.qx-recent-empty { padding-block: var(--qx-passo); color: var(--qx-texto-2); }

/* -------------------------------------------------------------------------
   CAPA DE CATEGORIA E LINHAS DE ARQUIVO
   ------------------------------------------------------------------------- */

.qx-page-hero { padding-block: var(--qx-secao) var(--qx-secao-curta); }

.qx-page-hero > .qx-medida {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--qx-passo) var(--qx-bloco);
  padding-bottom: var(--qx-passo);
  border-bottom: var(--qx-filete) solid var(--qx-ouro-sinal);
}

.qx-page-hero .qx-page-cabecalho {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qx-base) * 2.5);
}

.qx-page-title {
  margin: 0;
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: clamp(3rem, 6.4vw, 5.75rem);
  line-height: 0.96;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.qx-page-hero .wp-block-term-description p,
.qx-page-hero .wp-block-term-description {
  margin: 0;
  max-width: 34ch;
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.45;
  color: var(--qx-texto-2);
}

.qx-termo-contagem {
  padding-bottom: calc(var(--qx-base) * 1.5);
  letter-spacing: var(--qx-ui-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.qx-archive-results { padding-bottom: var(--qx-secao); }

.qx-archive-row {
  display: grid;
  grid-template-columns: 16.75rem minmax(0, 1fr) 8rem;
  gap: var(--qx-bloco);
  align-items: start;
  padding-block: calc(var(--qx-base) * 5.5);
  border-bottom: 1px solid var(--qx-linha);
}

/* Sem imagem, o bloco vira superfície e a linha não desmonta. */
.qx-archive-figura {
  aspect-ratio: 264.7 / 85.7;
  background: var(--qx-petroleo);
  overflow: hidden;
}

.qx-archive-figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--qx-image-position, var(--qx-foco-imagem));
  filter: var(--qx-filtro-imagem);
  transition: filter var(--qx-editorial-tempo) var(--qx-curva);
}

.qx-archive-corpo {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qx-base) * 1.75);
  min-width: 0;
}

.qx-archive-title {
  margin: 0;
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

.qx-archive-row .wp-block-post-excerpt__excerpt,
.qx-archive-row .wp-block-post-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--qx-texto-2);
}

.qx-archive-fim {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--qx-base) * 3.5);
}

.qx-reading-time-slot {
  margin: 0;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qx-texto-2);
  white-space: nowrap;
}

.qx-archive-fim .qx-seta { font-size: 1.5rem; color: var(--qx-ouro); }

@media (hover: hover) and (pointer: fine) {
  .qx-archive-row:hover .qx-archive-figura img { filter: none; }
}

.qx-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qx-passo);
  padding-top: var(--qx-bloco);
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qx-pagination a:hover { color: var(--qx-ouro); }

/* -------------------------------------------------------------------------
   RODAPÉ
   ------------------------------------------------------------------------- */

.qx-footer {
  border-top: 1px solid rgba(181, 158, 95, 0.4);
  padding-block: var(--qx-secao-curta) max(var(--qx-passo), env(safe-area-inset-bottom));
}

.qx-footer-colophon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: var(--qx-bloco);
}

.qx-footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--qx-passo);
}

.qx-footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--qx-base)) var(--qx-passo);
}

.qx-footer-social-item {
  margin: 0;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  line-height: 1.5;
}

.qx-footer-social-item a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
}

.qx-footer-social-item .handle { color: var(--qx-texto-2); }

.qx-footer-social-item a:hover,
.qx-footer-social-item a:hover .handle { color: var(--qx-ouro); }

.qx-footer-colophon-line {
  margin: 0;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: var(--qx-ui-tracking);
  color: var(--qx-ouro);
}

/* A divisa fecha o rodapé como fecha o masthead: mesma frase, mesma voz. */
.qx-footer-tagline {
  margin: calc(var(--qx-base)) 0 0;
  font-family: var(--qx-texto-f);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--qx-texto-2);
}

/* =========================================================================
   ENQUADRAMENTOS ESTREITOS
   -------------------------------------------------------------------------
   Mobile é outro enquadramento: a composição se reorganiza, não empilha.
   ========================================================================= */

@media (max-width: 980px) {

  .qx-home-editorial {
    display: flex;
    flex-direction: column;
    gap: var(--qx-passo);
  }

  .qx-lead-story { flex: 1 1 auto; min-height: 26svh; }
  .qx-secondary-stories { flex: 0 0 auto; grid-template-rows: none; }
  .qx-secondary-story { padding-block: calc(var(--qx-base) * 1.75); }

  /* A faixa deixa parte do próximo item visível: o índice se anuncia como
     lista que continua, em vez de fingir que cabe. */
  .qx-cats {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(9rem, 30%);
    gap: var(--qx-passo);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--qx-ouro-marca) transparent;
  }

  .qx-cats-card {
    scroll-snap-align: start;
    min-height: 88px;
    padding: calc(var(--qx-base) * 3) 0 calc(var(--qx-base) * 2);
  }

  .qx-cats-num { font-size: 3rem; }

  .qx-recent-row-link {
    grid-template-columns: minmax(0, 1fr) auto 1.5rem;
    gap: 0.4rem 0.75rem;
  }

  .qx-recent-row-link h3 { grid-column: 1 / 3; grid-row: 1; }
  .qx-recent-meta { grid-column: 1; grid-row: 2; }
  .qx-recent-end { grid-column: 2; grid-row: 2; }
  .qx-recent-arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; }

  .qx-archive-row {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--qx-passo);
    padding-block: var(--qx-bloco);
  }

  .qx-archive-fim {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 560px) {

  /* A primeira dobra do celular tem de caber inteira: masthead, destaque,
     as três chamadas e o índice. Orçamento de uma tela de 740px, medido:
     masthead 118 + destaque 300 + chamadas 168 + índice 74 + respiros. */
  .qx-home-masthead-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--qx-base) * 0.5);
    padding-block: calc(var(--qx-base) * 1.25) calc(var(--qx-base) * 0.5);
    text-align: center;
  }

  .qx-home-brand-slot { order: 1; gap: calc(var(--qx-base) * 0.5); }

  /* O ◆ MENU desce para baixo da divisa: sozinho no alto à esquerda, ele
     obrigava o wordmark a começar uma linha abaixo e custava 40px. */
  .qx-home-menu-slot { order: 2; margin-top: calc(var(--qx-base) * 0.5); }
  .qx-home-tagline-slot { display: none; }

  .qx-brand--home { font-size: clamp(1.75rem, 8vw, 2.25rem); }

  .qx-home-editorial {
    padding-block: calc(var(--qx-base) * 1.25) calc(var(--qx-base) * 1.5);
    gap: calc(var(--qx-base) * 1.5);
  }

  /* O seletor precisa dos dois níveis: `.qx-home-editorial > .qx-lead-story`
     é quem zera o min-height na cadeia elástica, e uma regra escrita só com
     `.qx-lead-story` perdia para ela por especificidade. */
  .qx-home-editorial > .qx-lead-story {
    min-height: 0;
    /* 35svh é o valor medido: com ele a dobra fecha em 740px exatos num
       aparelho de 740 — masthead, destaque, as três chamadas e o índice. */
    height: 35svh;
    padding: calc(var(--qx-base) * 2);
  }

  .qx-lead-title { font-size: clamp(1.75rem, 7.5vw, 2.25rem); }
  .qx-lead-dek { -webkit-line-clamp: 2; }

  /* As três chamadas ficam com data e título numa linha cada. */
  .qx-secondary-dek { display: none; }
  .qx-secondary-story { padding-block: calc(var(--qx-base) * 1.25); gap: 2px; }
  .qx-secondary-story h3 { font-size: 1.0625rem; }

  .qx-cats-card {
    min-height: 0;
    padding: calc(var(--qx-base) * 2) 0 calc(var(--qx-base) * 1.5);
  }

  .qx-cats-num { font-size: 2.25rem; }
  .qx-cats-nome { font-size: 1.25rem; }

  /* A canção do Labi Siffre, 15% menor: são seis versos curtos com quebra
     forçada, e no celular eles ocupavam quase uma tela inteira. Cada termo
     do clamp original — 1.5rem, 6vw, 2rem — multiplicado por 0,85. */
  .qx-manifesto-song blockquote p {
    font-size: clamp(1.275rem, 5.1vw, 1.7rem);
  }

  /* O Reverberando perde os filetes: numa coluna única eles não separam
     nada, só riscam a superfície. */
  .qx-band-reverb .qx-reverb-quote {
    border-left: 0;
    border-top: 0;
    padding-top: 0;
  }

  .qx-lead-dek {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .qx-cats { grid-auto-columns: 46%; }

  .qx-recent-row-link { grid-template-columns: minmax(0, 1fr) 1.5rem; }
  .qx-recent-end { grid-column: 1; grid-row: 3; }
  .qx-recent-arrow { grid-column: 2; }

  .qx-archive-row { grid-template-columns: minmax(0, 1fr); }
  .qx-archive-figura { aspect-ratio: 16 / 9; }
  .qx-archive-fim { grid-column: 1; }

  .qx-footer-colophon { gap: var(--qx-passo); }

  /* Instagram e YouTube dividem uma linha. Empilhados, ocupavam três linhas
     para dizer duas palavras. */
  .qx-footer-social {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--qx-passo);
  }

  .qx-footer-social-item a { justify-content: flex-end; }
  .qx-footer-social-item .handle { display: none; }
  .qx-footer-mark { height: 3.25rem; }
}

/* Telas baixas: a dobra não pode cortar o título para caber. */
@media (max-height: 700px) and (max-width: 980px) {
  .qx-lead-dek { -webkit-line-clamp: 1; }
  .qx-cats-card { min-height: 72px; }
}

/* -------------------------------------------------------------------------
   FAIXAS DA HOME AINDA SERVIDAS PELO LEGADO
   -------------------------------------------------------------------------
   Reverberando e Manifesto continuam com o desenho antigo, mas o ritmo
   vertical é do sistema: ao mandar o legado para dentro de @layer, o
   espaçamento delas passou a perder para o layout de blocos e as duas
   encolheram para um terço da altura.
   ------------------------------------------------------------------------- */

.qx-band-reverb,
.qx-band-manifesto {
  box-sizing: border-box;
  padding-block: var(--qx-secao);
}

.qx-band-manifesto { padding-inline: 0; }

.qx-band-reverb > .qx-shell,
.qx-band-manifesto > .qx-shell {
  width: min(100% - 2 * var(--qx-margem), var(--qx-editorial));
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   CONTINUE A LEITURA
   -------------------------------------------------------------------------
   A tentativa anterior impôs colunas estreitas a um cartão que o legado
   montava deitado — imagem à esquerda, texto à direita —, e o resultado foi
   um título por sílaba. O cartão passa a ser desenhado aqui, de pé: imagem
   no topo, categoria, título. Nenhuma regra do arquivo velho sobrou para
   disputar.
   ------------------------------------------------------------------------- */

.qx-related-section { padding-block: var(--qx-secao); }

.qx-related-head {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qx-base) * 1.5);
  margin-bottom: var(--qx-bloco);
}

.qx-related-eyebrow {
  margin: 0;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  font-weight: 500;
  letter-spacing: var(--qx-ui-tracking);
  text-transform: uppercase;
  color: var(--qx-ouro);
}

.qx-related-heading {
  margin: 0;
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.qx-trilha {
  position: relative;
  display: flex;
  align-items: start;
  gap: var(--qx-passo);
}

.qx-related .wp-block-post-template {
  display: grid;
  grid-auto-flow: column;
  /* A coluna nunca é mais estreita que a medida de um título de display:
     abaixo de 15rem a Bluu Next começa a quebrar dentro da palavra. */
  grid-auto-columns: minmax(16rem, 1fr);
  gap: var(--qx-bloco);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--qx-ouro-marca) transparent;
}

/* O encaixe da rolagem lateral pertence ao filho direto da lista, que é o
   <li> do post-template — o cartão vive dentro dele. */
.qx-related .wp-block-post-template > * { scroll-snap-align: start; }

.qx-related-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qx-base) * 1.5);
  min-width: 0;
  scroll-snap-align: start;
}

.qx-related-image {
  margin: 0;
  overflow: hidden;
  background: var(--qx-petroleo);
}

.qx-related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--qx-image-position, var(--qx-foco-imagem));
  filter: var(--qx-filtro-imagem);
  transition: filter var(--qx-editorial-tempo) var(--qx-curva);
}

.qx-related-card:hover .qx-related-image img { filter: none; }

.qx-related-card .qx-primary-term-slot { margin: 0; }

.qx-related-title {
  margin: 0;
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  hyphens: manual;
  transition: color var(--qx-micro) var(--qx-curva);
}

.qx-related-card:hover .qx-related-title { color: var(--qx-ouro); }

.qx-trilha-seta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--qx-linha);
  background: transparent;
  color: var(--qx-ouro);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--qx-micro) var(--qx-curva);
}

.qx-trilha-seta:hover { border-color: var(--qx-ouro); }
.qx-trilha-seta[disabled] { opacity: 0.35; cursor: default; }

/* -------------------------------------------------------------------------
   ASSINATURA DO TEXTO
   -------------------------------------------------------------------------
   Fecho de carta: alinhado à direita, a despedida composta e o nome
   assinado à mão, e as duas redes como desenho — não como rótulo.
   ------------------------------------------------------------------------- */

.qx-assinatura {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--qx-base) * 2.5);
  /* O respiro que o losango terminal trazia (e que ele deixou ao sair, ver
     abaixo) passa para a própria assinatura. */
  margin-block: clamp(3rem, 6vw, 4.75rem) var(--qx-secao-curta);
  text-align: right;
}

/* O losango terminal é o ::after do conteúdo, que já existe e já está em
   ouro — só estava centralizado. Muda de eixo, não de natureza.

   `text-align: right` sozinho não moveu nada, e por um motivo concreto: o
   pseudo é uma caixa de bloco com a largura inteira da coluna, e a linha
   única dentro dela obedece ao `text-align-last` herdado da coluna de
   leitura, que é `left`. Em vez de disputar duas propriedades de alinhamento
   de texto, a caixa encolhe para o tamanho do glifo e é a margem que a
   empurra — isso não depende de herança nenhuma. */
.qx-reading-shell .wp-block-post-content::after {
  width: fit-content;
  margin-inline: auto 0;
  text-align: right;
  text-align-last: right;
}

/* Onde há assinatura, o ◆ dourado do fim do texto sai: o ponto final agora é
   o losango desenhado no fim do "Quixotesco", na tinta da própria assinatura.
   Dois losangos empilhados no mesmo canto diluíam um ao outro. Páginas sem
   assinatura mantêm o ◆ terminal. */
.qx-reading-shell:has(.qx-assinatura) .wp-block-post-content::after {
  content: none;
}

/* -------------------------------------------------------------------------
   FILTROS DO ARQUIVO
   -------------------------------------------------------------------------
   O CSS do legado tinha sido escrito para outra marcação: ele tratava
   `.qx-archive-filter` — que é cada rótulo — como se fosse o formulário, com
   quatro colunas de grade dentro de uma etiqueta. Daí o botão gigante, a
   falta de respiro no topo e a seta caindo embaixo do campo em vez de ficar
   dentro dele.

   Escrito agora contra a marcação real: formulário em linha, rótulo em mono
   acima do campo, seta dentro do invólucro do <select> — a mesma composição
   do filtro da cronologia na home.
   ------------------------------------------------------------------------- */

.qx-archive-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--qx-passo);
  padding-block: var(--qx-passo);
  border-block: 1px solid var(--qx-linha-fraca);
}

.qx-archive-filter {
  display: flex;
  flex-direction: column;
  gap: calc(var(--qx-base) * 0.75);
  flex: 1 1 11rem;
  min-width: 0;
}

.qx-archive-filter.qx-archive-search { flex: 2 1 16rem; }

.qx-archive-filter .label {
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: var(--qx-ui-tracking);
  text-transform: uppercase;
  color: var(--qx-texto-2);
}

.qx-archive-filter input,
.qx-archive-filter select {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: calc(var(--qx-base) * 1.25) 0;
  border: 0;
  border-bottom: 1px solid var(--qx-linha);
  border-radius: 0;
  background: transparent;
  color: var(--qx-texto);
  font-family: var(--qx-texto-f);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.qx-archive-filter input::placeholder { color: var(--qx-texto-2); }
.qx-archive-filter input:focus,
.qx-archive-filter select:focus { outline: none; border-bottom-color: var(--qx-ouro); }

/* A seta é nossa e mora dentro do campo: a nativa do sistema é suprimida,
   senão aparecem duas — uma dentro, outra embaixo. */
.qx-archive-filter .select-wrap {
  position: relative;
  display: block;
}

.qx-archive-filter select {
  appearance: none;
  padding-right: calc(var(--qx-base) * 3);
  cursor: pointer;
}

.qx-archive-filter .select-caret {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--qx-ouro);
  font-size: 0.75rem;
}

.qx-filter-actions {
  display: flex;
  align-items: center;
  gap: var(--qx-passo);
  flex: 0 0 auto;
}

.qx-filter-actions button {
  min-height: 44px;
  padding-inline: var(--qx-passo);
  border: 1px solid var(--qx-linha);
  border-radius: 0;
  background: transparent;
  color: var(--qx-texto);
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: var(--qx-ui-tracking);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--qx-micro) var(--qx-curva),
              color var(--qx-micro) var(--qx-curva);
}

.qx-filter-actions button:hover { border-color: var(--qx-ouro); color: var(--qx-ouro); }

.qx-filter-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: var(--qx-ui-tracking);
  text-transform: uppercase;
  color: var(--qx-texto-2);
}

.qx-filter-actions a:hover { color: var(--qx-ouro); }

@media (max-width: 560px) {
  .qx-archive-filters { gap: calc(var(--qx-base) * 2); }
  .qx-archive-filter,
  .qx-archive-filter.qx-archive-search { flex: 1 1 100%; }
  .qx-filter-actions { flex: 1 1 100%; justify-content: space-between; }
}

/* -------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------
   A citação de Machado fica; o que muda é a composição. Ela deixa de ser um
   bloco centralizado de tipo enorme em papel e passa a ser uma citação de
   verdade: superfície noturna, aspas em ouro como ornamento, filete, crédito
   em mono. O numeral fantasma marca a página sem dizer nada, como o número
   do índice 01–05.

   E o pé traz o índice editorial inteiro: quem se perdeu precisa de portas,
   não de um corredor.
   ------------------------------------------------------------------------- */

/* A página de erro ocupa exatamente uma tela.

   "Masthead + conteúdo = 100svh" não se escreve em CSS sem saber a altura do
   masthead, e constante de altura de cabeçalho é a classe de erro que a
   primeira dobra da home já nos custou. A saída é que aqui os dois são a
   mesma superfície: o masthead fica sobreposto ao <main>, que mede 100svh
   inteiros. Nada é calculado, e o masthead pode mudar de altura à vontade.

   A folga no topo do corpo é o que impede a citação de encostar no
   wordmark; como o conteúdo é centrado verticalmente, ela só atua quando a
   tela é baixa. */
body.error404 { position: relative; }

body.error404 .wp-site-blocks > header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 3;
}

.qx-404 {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.qx-404-corpo {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--qx-base) * 3);
  padding-block: calc(var(--qx-secao-curta) + 3.5rem) var(--qx-secao-curta);
  isolation: isolate;
}

/* O numeral fica à direita, fora do eixo do texto: atrás da frase ele
   embaçaria a leitura em vez de marcar a página. */
.qx-404-numero {
  position: absolute;
  z-index: -1;
  right: 2vw;
  top: 50%;
  transform: translateY(-54%);
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: clamp(9rem, 26vw, 22rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--qx-ouro);
  opacity: 0.1;
  pointer-events: none;
}

/* A medida vem em rem, não em ch: `ch` se mede pela fonte do elemento, e a
   do <blockquote> é o corpo do texto, não a da citação — 24ch davam uma
   coluna de 200px para um tipo de 56px, e a frase quebrava palavra a
   palavra. */
.qx-404-citacao {
  position: relative;
  margin: 0;
  padding-left: clamp(2rem, 5vw, 4rem);
  max-width: min(100%, 40rem);
}

/* As aspas são ornamento, não pontuação: ficam grandes, em ouro, fora da
   medida do texto — e por isso saem do fluxo. */
.qx-404-citacao::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.18em;
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 1;
  color: var(--qx-ouro);
  opacity: 0.55;
}

.qx-404-citacao p {
  margin: 0;
  font-family: var(--qx-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.qx-404-citacao cite {
  display: block;
  margin-top: calc(var(--qx-base) * 2.5);
  padding-top: calc(var(--qx-base) * 2);
  border-top: var(--qx-filete) solid var(--qx-ouro-sinal);
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qx-texto-2);
}

.qx-404-citacao cite em { font-style: italic; text-transform: none; }

.qx-404-volta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: var(--qx-ui-tracking);
  text-transform: uppercase;
  color: var(--qx-ouro);
}

.qx-404-volta:hover { color: var(--qx-ouro-marca); }

.qx-404-saidas {
  flex: 0 0 auto;
  padding-bottom: var(--qx-secao-curta);
}

.qx-404-saidas-rubrica { margin-bottom: calc(var(--qx-base) * 1.5); }

@media (max-width: 560px) {
  .qx-404-corpo { padding-block: calc(var(--qx-secao-curta) + 3rem) var(--qx-base); gap: calc(var(--qx-base) * 2.5); }

  /* No celular não há coluna livre à direita: o numeral desce para o rodapé
     da composição, onde há espaço, em vez de ficar atrás da citação. */
  .qx-404-numero {
    top: auto;
    bottom: 16%;
    right: -0.08em;
    transform: none;
    font-size: 7rem;
    opacity: 0.07;
  }
  .qx-404-citacao { padding-left: calc(var(--qx-base) * 3); max-width: none; }
  .qx-404-citacao p { font-size: clamp(1.625rem, 7.5vw, 2.25rem); }
  .qx-404-citacao::before { font-size: 3.5rem; }
}

/* -------------------------------------------------------------------------
   MANIFESTO — AS DUAS FRASES DE ABERTURA
   -------------------------------------------------------------------------
   A invocação e a tese sobre a arte eram compostas com `text-wrap: balance`,
   que encurta as linhas para igualá-las: o parágrafo ficava estreito dentro
   da própria medida. Passam a ocupar a coluna inteira, justificadas e com
   hifenização — o mesmo tratamento do corpo dos textos, em corpo de display.
   ------------------------------------------------------------------------- */

.qx-manifesto-incantation,
.qx-manifesto-art-thesis {
  width: 100%;
  max-width: none;
  text-wrap: wrap;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
  hyphenate-limit-zone: 8%;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 2;
}

/* Sem caixa alta: a frase é dita, não gritada. */
.qx-manifesto-incantation {
  text-transform: none;
  font-variant-caps: normal;
}

/* -------------------------------------------------------------------------
   CORPO DA PÁGINA DE TEXTO
   -------------------------------------------------------------------------
   No celular o texto saía em 14,4px. A causa não era o tema: a tipografia
   fluida do WordPress reescreveu o preset `medium` como
   `clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.6), 20px)` e o aplica por
   `:root :where(.wp-block-post-content)` — sem camada, vencendo o legado.

   Piso de 14px é tamanho de legenda, não de leitura. O tema reassume a
   medida do próprio corpo: 17px em telas estreitas, 20,5px nas largas.
   ------------------------------------------------------------------------- */

.qx-reading-shell .wp-block-post-content {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.28rem);
}

/* E a justificação vale em qualquer largura — no celular ela também tinha
   sido perdida para a mesma cascata. */
.qx-reading-shell .wp-block-post-content p {
  text-align: justify;
}

/* -------------------------------------------------------------------------
   MODO NOITE
   -------------------------------------------------------------------------
   A coluna de leitura troca de fundo por `data-qx-reading`, que é um
   mecanismo do legado e não redefine os tokens de superfície. Enquanto esse
   componente não migrar, o que é novo e vive lá dentro precisa declarar as
   duas faces — foi por isso que a assinatura saiu escura sobre escuro.
   ------------------------------------------------------------------------- */

html[data-qx-reading="night"] .qx-assinatura-texto {
  color: #edede8;
}

/* A assinatura desenhada: tinta preta no papel, branca na noite. O SVG
   pinta com `currentColor`, então basta trocar a cor do próprio elemento. */
html[data-qx-reading="night"] .qx-assinatura-nome {
  color: #ffffff;
}

html[data-qx-reading="night"] .qx-assinatura-redes a {
  color: #ffffff;
}

html[data-qx-reading="night"] .qx-assinatura-redes svg {
  stroke-width: 1.7;
}

/* Duas vozes na mesma assinatura: a despedida em itálico, composta; o nome
   de próprio punho, desenhado — traço de pena de bico largo, em SVG.

   O desenho não é fonte: não herda cor por token de texto, e sim por
   `currentColor`. No papel é preto puro; no modo noite, branco puro (regra
   acima). A altura em rem mantém o nome maior que a despedida, como numa
   carta, sem descer abaixo de ~48px — onde o "sco" começa a embolar. */
.qx-assinatura-texto {
  margin: 0;
  font-family: var(--qx-texto-f);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--qx-texto);
}

.qx-assinatura-despedida {
  font-style: italic;
}

.qx-assinatura-nome {
  display: block;
  height: 3.25rem;
  width: auto;
  aspect-ratio: 257.2 / 85.7;
  max-width: 100%;
  margin: 0.4rem 0 0 auto;
  color: #000000;
  overflow: visible;
}

.qx-assinatura-redes {
  display: flex;
  align-items: center;
  gap: calc(var(--qx-base) * 2);
  margin: 0;
}

.qx-assinatura-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--qx-texto-2);
  transition: color var(--qx-micro) var(--qx-curva);
}

.qx-assinatura-redes a:hover { color: var(--qx-ouro); }

/* -------------------------------------------------------------------------
   CITAÇÃO RECUADA
   -------------------------------------------------------------------------
   A citação longa é texto de outro, não ênfase. O parágrafo recua e muda de
   voz: sai da Alegreya e vai para a JetBrains Mono, 2pt abaixo do corpo —
   a letra de documento transcrito, não de texto composto.

   Justificada e hifenizada, como o corpo. O `font-size-adjust`
   herdado do corpo iguala a altura-x das duas famílias, então os 2pt de
   diferença são percebidos como 2pt, e não como a mono "maior".

   A citação ampliada (itálico grande, filete de ouro) continua existindo
   como estilo "Ampliada", para quando a citação for o acontecimento da
   página. A epígrafe tem estilo próprio e fica de fora.
   ------------------------------------------------------------------------- */

.qx-reading-shell .wp-block-post-content .wp-block-quote:not(.is-style-qx-ampliada):not(.is-style-qx-epigraph) {
  margin: 1.6em 0;
  padding: 0 0 0 2.5em;
  border: 0;
  font-family: var(--qx-mono);
  font-size: calc(1em - 2pt);
  font-style: normal;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: inherit;
}

.qx-reading-shell .wp-block-post-content .wp-block-quote:not(.is-style-qx-ampliada):not(.is-style-qx-epigraph) p {
  margin: 0 0 0.7em;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.qx-reading-shell .wp-block-post-content .wp-block-quote:not(.is-style-qx-ampliada):not(.is-style-qx-epigraph) p:last-of-type {
  margin-bottom: 0;
}

.qx-reading-shell .wp-block-post-content .wp-block-quote:not(.is-style-qx-ampliada):not(.is-style-qx-epigraph) cite {
  display: block;
  margin-top: 0.6em;
  font-size: 0.9em;
  font-style: normal;
  opacity: 0.75;
}

@media (max-width: 560px) {
  .qx-reading-shell .wp-block-post-content .wp-block-quote:not(.is-style-qx-ampliada):not(.is-style-qx-epigraph) {
    padding-left: 1.25em;
  }
}

/* -------------------------------------------------------------------------
   GEOMETRIA DA MARGEM
   -------------------------------------------------------------------------
   Contrato do REPERTORIO-EDITORIAL §1.4: a utilidade vive no tema e o plugin
   Quixotesco Editorial a usa — notas de rodapé na margem, sumário, olho,
   ficha, "À margem". A v0.22.1 apagou estas duas classes como código morto
   porque conferiu o tema e o Core, mas não o Editorial, que as emite por
   JavaScript. Sem o float, cada nota clonada caía no fluxo, logo acima do
   parágrafo que a chama — a "nota duplicada".

   A largura encolhe quando a folga lateral é menor que a margem nominal
   (a 1280px sobram 280px de cada lado; a margem pedia 294px), para que
   nada seja cortado pelo `overflow-x: hidden` do body.
   ------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  .qx-hang-left,
  .qx-hang-right {
    --qx-hang-w: min(var(--qx-margin-w), calc((100vw - var(--qx-measure)) / 2 - var(--qx-margin-gap) - 24px));
    width: var(--qx-hang-w);
    /* Nota que é só um endereço (URL) não tem onde quebrar: quebra em qualquer ponto. */
    overflow-wrap: anywhere;
  }

  .qx-hang-left {
    float: left;
    clear: left;
    margin-left: calc(-1 * (var(--qx-hang-w) + var(--qx-margin-gap)));
  }

  .qx-hang-right {
    float: right;
    clear: right;
    margin-right: calc(-1 * (var(--qx-hang-w) + var(--qx-margin-gap)));
  }
}

/* -------------------------------------------------------------------------
   TÍTULO DA PÁGINA DE TEXTO
   -------------------------------------------------------------------------
   A justificação foi testada e revertida. Em corpo de display, com duas a
   quatro palavras por linha, não há espaço em branco suficiente para
   distribuir: "A    arquitetura / do    vazio." abre buracos maiores do que
   o vão que a justificação vinha corrigir.

   Fica a bandeira à esquerda com `text-wrap: balance`, que iguala o
   comprimento das linhas e é o único recurso que encurta a bandeira sem
   deformar o espacejamento.
   ------------------------------------------------------------------------- */

.qx-single-title {
  /* Teto medido, não estimado: com a Bluu Next carregada, "A rachadura na
     casa dos Borg" ocupa 11,94em e a medida do título é 720px — cabe em uma
     linha até 60px. A estimativa anterior, 62px, errava por 4% e era
     exatamente o que mantinha esse título em duas linhas.

     3.7rem = 59,2px, com 13px de folga. Os outros títulos do site cabem com
     margem larga: "A arquitetura do vazio." até 77px, "O que só Justine
     sabe" até 87px. Quem manda no teto é sempre o título mais longo.

     A declaração de corpo saiu do legado, onde era !important — e
     !important dentro de @layer vence CSS sem camada. */
  font-size: clamp(2.4rem, 1.5rem + 2.5vw, 3.7rem);
  line-height: 0.95;
  text-align: left;
  text-align-last: auto;
  text-wrap: balance;
  hyphens: manual;
}

@media (max-width: 980px) {
  .qx-single-title { font-size: clamp(2rem, 6.4vw, 2.6rem); }
}

/* -------------------------------------------------------------------------
   FAIXA DO MANIFESTO
   ------------------------------------------------------------------------- */

.qx-manifesto-title {
  text-wrap: pretty;
}

/* O losango da chamada é ouro, como todo losango do sistema.

   Duas correções da tentativa anterior: `display: inline-flex` tirou o link
   do fluxo de texto do bloco, que era quem o centralizava; e a cor vinha de
   `--qx-texto`, que nesta faixa resolve para o tom de papel — a faixa usa a
   classe de fundo preto do WordPress, não uma superfície nossa, então o
   token nunca foi redefinido e o rótulo saiu escuro sobre preto. */
.qx-manifesto-link {
  color: #edede8;
}

.qx-manifesto-link::before {
  content: "◆";
  margin-right: 0.7em;
  color: var(--qx-ouro-marca);
  font-size: 0.85em;
}

/* =========================================================================
   MENU — A GAVETA
   =========================================================================
   O menu em tela cheia apagava o texto que a pessoa estava lendo. Num site
   cuja unidade é o texto longo, isso é hostil: a gaveta é fita de marcar
   página — abre, mostra, fecha, e o parágrafo continua onde estava.

   A busca mora aqui dentro. Antes eram duas telas cheias empilhadas, menu e
   busca; uma camada a mais do que o necessário.
   ========================================================================= */

.qx-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(16, 24, 32, 0.62);
  opacity: 0;
  transition: opacity var(--qx-ui-tempo) var(--qx-curva);
}

.qx-menu-overlay.is-open { opacity: 1; }
.qx-menu-overlay[hidden] { display: none; }

.qx-menu-panel {
  --qx-texto: #edede8;
  --qx-texto-2: rgba(237, 237, 232, 0.70);
  --qx-ouro: var(--qx-ouro-claro);
  --qx-linha: rgba(241, 242, 241, 0.22);
  --qx-linha-fraca: rgba(241, 242, 241, 0.10);
  position: absolute;
  inset: 0 auto 0 0;
  width: min(420px, 88vw);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--qx-tinta);
  box-shadow: 1px 0 0 rgba(181, 158, 95, 0.35);
  color: var(--qx-texto);
  padding: max(var(--qx-base) * 2, env(safe-area-inset-top)) calc(var(--qx-base) * 5)
           max(calc(var(--qx-base) * 4), env(safe-area-inset-bottom))
           max(calc(var(--qx-base) * 5), env(safe-area-inset-left));
  padding-right: calc(var(--qx-base) * 5);
  transform: translateX(-16px);
  transition: transform var(--qx-ui-tempo) var(--qx-curva);
}

.qx-menu-overlay.is-open .qx-menu-panel { transform: translateX(0); }

.qx-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: var(--qx-ui-tracking);
  text-transform: uppercase;
  color: var(--qx-texto-2);
}

.qx-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--qx-base) * -1.5);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--qx-ouro);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.qx-menu-close:hover { color: var(--qx-ouro-marca); }

/* A BUSCA, primeiro elemento ------------------------------------------- */

.qx-menu-search {
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--qx-base) * 3.5);
}

.qx-menu-search-label {
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: var(--qx-ui-tracking);
  text-transform: uppercase;
  color: var(--qx-ouro);
}

.qx-menu-search-field {
  display: flex;
  align-items: center;
  gap: var(--qx-base);
  margin-top: calc(var(--qx-base) * 1.25);
  border-bottom: 1px solid var(--qx-linha);
}

.qx-menu-search-field:focus-within { border-bottom-color: var(--qx-ouro); }

.qx-menu-search-field input {
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(var(--qx-base) * 1.25) 0;
  border: 0;
  background: transparent;
  color: var(--qx-texto);
  font-family: var(--qx-display);
  font-weight: 700;
  /* Nunca abaixo de 16px: o Safari dá zoom ao focar campos menores. */
  font-size: 1.375rem;
  line-height: 1.2;
}

.qx-menu-search-field input::placeholder { color: rgba(237, 237, 232, 0.32); }
.qx-menu-search-field input:focus { outline: none; }

.qx-menu-search-field button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--qx-ouro);
  font-size: 1.125rem;
  cursor: pointer;
}

.qx-search-status {
  margin: calc(var(--qx-base) * 1.25) 0 0;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  line-height: 1.5;
  color: var(--qx-texto-2);
}

.qx-search-results:not(:empty) { margin-top: calc(var(--qx-base) * 1.5); }

.qx-search-result {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 1rem;
  align-items: baseline;
  gap: calc(var(--qx-base) * 1.25);
  padding-block: calc(var(--qx-base) * 1.25);
  border-bottom: 1px solid var(--qx-linha-fraca);
}

.qx-search-result .num {
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  color: var(--qx-ouro);
}

.qx-search-result a {
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--qx-texto);
  transition: color var(--qx-micro) var(--qx-curva);
}

.qx-search-result:hover a { color: var(--qx-ouro); }
.qx-search-result .arrow { justify-self: end; color: var(--qx-ouro); }

.qx-search-all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: var(--qx-ui-tracking);
  text-transform: uppercase;
  color: var(--qx-ouro);
}

/* O ÍNDICE -------------------------------------------------------------- */

.qx-menu-primary {
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--qx-base) * 4);
}

.qx-menu-primary a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 1rem;
  align-items: baseline;
  gap: calc(var(--qx-base) * 1.5);
  padding-block: calc(var(--qx-base) * 1.5);
  border-bottom: 1px solid var(--qx-linha-fraca);
  color: var(--qx-texto);
}

.qx-menu-primary a:last-child { border-bottom: 0; }

.qx-menu-primary .num {
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  color: var(--qx-ouro);
}

.qx-menu-primary .corpo { min-width: 0; }

/* Bluu Next, como no resto do site — sem versalete e sem caixa alta. O corpo
   é 1.5rem: numa coluna de 420px é o maior que convive com a linha de
   descrição sem empurrá-la para fora. */
.qx-menu-primary .label {
  display: block;
  font-family: var(--qx-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  transition: color var(--qx-micro) var(--qx-curva);
}

.qx-menu-primary .dica {
  display: block;
  margin-top: 2px;
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--qx-texto-2);
}

.qx-menu-primary .arrow {
  justify-self: end;
  align-self: center;
  font-size: 0.7rem;
  color: var(--qx-ouro-marca);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity var(--qx-micro) var(--qx-curva),
              transform var(--qx-micro) var(--qx-curva);
}

@media (hover: hover) and (pointer: fine) {
  .qx-menu-primary a:hover .label,
  .qx-menu-primary a:focus-visible .label {
    font-style: italic;
    color: var(--qx-ouro);
  }

  .qx-menu-primary a:hover .arrow,
  .qx-menu-primary a:focus-visible .arrow {
    opacity: 1;
    transform: translateX(0);
  }
}

/* O PÉ ------------------------------------------------------------------ */

.qx-menu-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--qx-passo);
  padding-top: calc(var(--qx-base) * 4);
}

.qx-menu-colofao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.qx-menu-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qx-base) var(--qx-bloco);
  padding-top: var(--qx-passo);
  border-top: 1px solid var(--qx-linha-fraca);
}

.qx-menu-secondary a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  letter-spacing: var(--qx-ui-tracking);
  text-transform: uppercase;
  color: var(--qx-texto-2);
}

.qx-menu-secondary a:hover { color: var(--qx-ouro); }

.qx-menu-brand img { width: auto; height: 1.25rem; }

/* O pé da gaveta repete o fecho da casa: marca, divisa e as duas redes. */
.qx-menu-tagline {
  margin: calc(var(--qx-base) * 1.25) 0 0;
  font-family: var(--qx-texto-f);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--qx-texto-2);
}

.qx-menu-redes {
  display: flex;
  align-items: center;
  gap: var(--qx-passo);
  margin: calc(var(--qx-base) * 1.5) calc(var(--qx-base) * -1.5) 0;
}

.qx-menu-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--qx-texto-2);
  transition: color var(--qx-micro) var(--qx-curva);
}

.qx-menu-redes a:hover { color: var(--qx-ouro); }

@media (max-width: 560px) {
  /* A gaveta ocupa a largura inteira sozinha: um comportamento só, sem
     segunda composição para o celular. */
  .qx-menu-panel { width: 100%; box-shadow: none; }
  .qx-menu-primary .label { font-size: 1.375rem; }
  .qx-menu-primary .dica { font-size: 0.9rem; }
}