/* =========================================================================
   Quixotesco — fundação v1.0
   =========================================================================

   O que este arquivo substitui: 4.449 linhas com 429 !important, 125 blocos
   @media e 271 seletores prefixados com `body.home`, onde `.qx-lead-story`
   era declarado treze vezes.

   A causa daquilo não era desleixo, era ausência de mecanismo. Como não havia
   como dizer "esta seção é escura", cada cor foi reescrita para a home com
   `body.home … !important`, e cada reescrita gerou a seguinte.

   O mecanismo está aqui: TRÊS SUPERFÍCIES. Um componente nunca sabe sobre
   qual delas está. Ele pede --qx-texto; a superfície responde. Uma seção muda
   de papel para tinta trocando um atributo, e nada abaixo dela precisa saber.

   ========================================================================= */

@layer legado;

/* Uma única camada, e ela é a do código velho.

   CSS sem camada vence CSS em camada, sempre, independentemente de
   especificidade. Era esse o mecanismo que faltava: o tema brigava com as
   folhas de estilo de bloco do WordPress na base do !important porque não
   tinha como se colocar acima delas. Agora o novo código fica fora de
   camada — vence o WordPress e vence o legado — e o legado fica dentro de
   `legado`, onde perde para tudo. Nenhum !important é necessário. */

/* =========================================================================
   TOKENS — vindos do design system Quixotesco, sem reinterpretação
   ========================================================================= */


:root {
  /* As três superfícies. Nada além delas. */
  --qx-papel: #f1f2f1;
  --qx-tinta: #101820;
  --qx-petroleo: #1f2d38;

  /* Papel de leitura: levemente mais quente que o papel de interface. */
  --qx-papel-leitura: #f7f6f1;
  --qx-papel-fundo: #ebe9e2;

  /* Ouro: acento. Filete e ◆. Nunca fundo, nunca texto corrido. */
  --qx-ouro-marca: #b59e5f;
  --qx-ouro-claro: #d6c69a;
  --qx-ouro-leitura: #75683f;

  /* Espaço: base 8. Tudo é múltiplo dela. */
  --qx-base: 8px;
  --qx-passo: 24px;
  --qx-bloco: 48px;
  --qx-filete: 3px;

  /* A margem lateral. Um valor, todos os formatos. */
  --qx-margem: clamp(18px, 5vw, 72px);

  /* Ritmo vertical das seções. */
  --qx-secao: clamp(56px, 7vw, 120px);
  --qx-secao-curta: clamp(40px, 5vw, 76px);

  /* Medidas. */
  --qx-leitura: 720px;
  --qx-media: 960px;
  --qx-editorial: 1320px;

  /* Famílias. */
  --qx-display: "Bluu Next", "Bodoni Moda", Georgia, serif;
  --qx-texto-f: Alegreya, Georgia, serif;
  --qx-versalete: "Alegreya SC", Alegreya, Georgia, serif;
  --qx-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Interface: piso de 12px. Abaixo disso não é discrição, é ilegibilidade. */
  --qx-ui: 0.75rem;
  --qx-ui-tracking: 0.14em;

  /* Filtro de imagem estrangeira. O mesmo do Instagram. */
  --qx-filtro-imagem: saturate(0.72) contrast(1.06) brightness(0.82) sepia(0.04);
  --qx-foco-imagem: 50% 43%;
}

/* -----------------------------------------------------------------------
   As três superfícies.

   `superficie` é o fundo. `texto` e `texto-2` são o que se lê sobre ele.
   `ouro` muda de valor entre claro e escuro porque o ouro da marca some
   sobre papel em corpo pequeno — por isso existe o ouro de leitura.
   `linha` é o filete; `linha-fraca`, a divisória interna.

   Um componente usa estes cinco. Nunca um hexadecimal.
   ----------------------------------------------------------------------- */

[data-qx-superficie="papel"],
:root {
  --qx-superficie: var(--qx-papel);
  --qx-texto: #101820;
  --qx-texto-2: #626d77;
  --qx-ouro: var(--qx-ouro-leitura);
  --qx-ouro-sinal: var(--qx-ouro-marca);
  --qx-linha: rgba(16, 24, 32, 0.17);
  --qx-linha-fraca: rgba(16, 24, 32, 0.09);
  --qx-realce: var(--qx-papel-fundo);
  color-scheme: light;
}

[data-qx-superficie="tinta"] {
  --qx-superficie: var(--qx-tinta);
  --qx-texto: #edede8;
  --qx-texto-2: rgba(237, 237, 232, 0.70);
  --qx-ouro: var(--qx-ouro-claro);
  --qx-ouro-sinal: var(--qx-ouro-marca);
  --qx-linha: rgba(241, 242, 241, 0.22);
  --qx-linha-fraca: rgba(241, 242, 241, 0.12);
  --qx-realce: rgba(214, 198, 154, 0.06);
  color-scheme: dark;
}

[data-qx-superficie="petroleo"] {
  --qx-superficie: var(--qx-petroleo);
  --qx-texto: #edede8;
  --qx-texto-2: rgba(237, 237, 232, 0.70);
  --qx-ouro: var(--qx-ouro-claro);
  --qx-ouro-sinal: var(--qx-ouro-marca);
  --qx-linha: rgba(241, 242, 241, 0.20);
  --qx-linha-fraca: rgba(241, 242, 241, 0.10);
  --qx-realce: rgba(214, 198, 154, 0.07);
  color-scheme: dark;
}

/* A superfície pinta a si mesma. É a única regra que precisa disso. */
[data-qx-superficie] {
  background: var(--qx-superficie);
  color: var(--qx-texto);
}

/* Modo Noite da página de leitura: troca a superfície, não os componentes. */
html[data-qx-leitura="noite"] [data-qx-superficie="leitura"] {
  --qx-superficie: var(--qx-tinta);
  --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.20);
  --qx-linha-fraca: rgba(241, 242, 241, 0.10);
  color-scheme: dark;
}

[data-qx-superficie="leitura"] {
  --qx-superficie: var(--qx-papel-leitura);
  --qx-texto: #101820;
  --qx-texto-2: #4a5560;
  --qx-ouro: var(--qx-ouro-leitura);
  --qx-linha: rgba(16, 24, 32, 0.17);
  --qx-linha-fraca: rgba(16, 24, 32, 0.09);
  color-scheme: light;
}


/* =========================================================================
   BASE
   ========================================================================= */


*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--qx-superficie);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--qx-superficie);
  color: var(--qx-texto);
  font-family: var(--qx-texto-f);
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

/* O espaçamento entre blocos do WordPress é decidido por nós.

   Esta é a terceira tentativa de matar a faixa clara entre as seções, e as
   duas primeiras falharam em silêncio: eu vinha editando a fundação pelo
   texto indentado que existia ANTES de o arquivo sair de dentro de @layer,
   e o replace não encontrava nada. Não havia asserção para avisar.

   A regra do WordPress é `:where(.wp-site-blocks) > *`, de especificidade
   ZERO — qualquer seletor de classe a vence. O problema nunca foi força. */
.wp-site-blocks { padding-inline: 0; }

.wp-site-blocks > *,
main > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* A mesma regra do WordPress alcança os <li> de qualquer listagem de posts,
   e era ela que deixava o primeiro cartão da trilha 24px acima dos outros:
   `:not(:first-child)` recebia margem, o primeiro não. O espaçamento entre
   cartões e entre linhas de arquivo é dado pelo componente, nunca herdado.

   `body` na frente porque a regra do WordPress tem a mesma especificidade e
   é impressa depois da folha do tema — empate significa derrota. */
body .wp-block-post-template > *,
body .wp-block-query > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* O espaçamento de bloco também vaza para dentro de qualquer grupo aninhado
   — era ele que punha 24px entre o wordmark e a divisa no masthead. Em vez de
   caçar seletor por seletor, as superfícies que compomos zeram a própria
   variável: quem decide o ritmo interno é o componente. */
:is(.qx-home-opening,
    .qx-publicacoes,
    .qx-footer,
    .qx-page-hero,
    .qx-archive-page,
    .qx-menu-panel,
    .qx-related) {
  --wp--style--block-gap: 0px;
}

/* Imagem estrangeira nunca entra crua. */
.qx-imagem {
  filter: var(--qx-filtro-imagem);
  object-fit: cover;
  object-position: var(--qx-foco-imagem);
  width: 100%;
  height: 100%;
}

::selection {
  background: var(--qx-ouro-marca);
  color: var(--qx-tinta);
}

/* O anel de foco é da superfície, como tudo o mais. Nunca transicionado. */
:focus-visible {
  outline: 2px solid var(--qx-ouro-sinal);
  outline-offset: 3px;
}

/* O template chama esta classe de qx-skip-link; o nome aqui tem de ser o
   mesmo, senão o link aparece no topo de todas as páginas. */
.qx-skip-link {
  position: absolute;
  left: -9999px;
}

.qx-skip-link:focus {
  left: var(--qx-margem);
  top: var(--qx-base);
  z-index: 100;
  padding: var(--qx-base) calc(var(--qx-base) * 2);
  background: var(--qx-superficie);
}


/* =========================================================================
   MEDIDAS — a sarjeta vem da largura, nunca de padding
   ========================================================================= */


/* Um invólucro, três larguras. Substitui .qx-shell e suas variantes. */
.qx-medida {
  width: min(100% - 2 * var(--qx-margem), var(--qx-largura, var(--qx-editorial)));
  /* O teto é necessário porque a medida também é item de flex na primeira
     dobra: sem ele, `flex-grow` ignora a largura e a composição encosta nas
     bordas. Com max-width, cresce até a medida e não além. */
  max-width: min(100% - 2 * var(--qx-margem), var(--qx-largura, var(--qx-editorial)));
  margin-inline: auto;
}

.qx-medida[data-qx-largura="leitura"] { --qx-largura: var(--qx-leitura); }
.qx-medida[data-qx-largura="media"]   { --qx-largura: var(--qx-media); }






/* =========================================================================
   TIPOGRAFIA
   ========================================================================= */



/* A rubrica: mono, caixa alta, sempre no topo. É o que faz parecer
   publicação e não lista de links. */
.qx-rubrica {
  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-texto-2);
}

.qx-rubrica .qx-losango { color: var(--qx-ouro); }

/* Metadado de linha: mono, sem caixa alta, piso de 12px. */
.qx-meta {
  margin: 0;
  font-family: var(--qx-mono);
  font-size: var(--qx-ui);
  line-height: 1.5;
  color: var(--qx-texto-2);
}





/* =========================================================================
   ESTADOS E MOVIMENTO
   -------------------------------------------------------------------------
   A gramática é uma só, e vale em toda parte onde há nome próprio de seção:
   o nome vira itálico e o filete cresce. O ◆ entra, gira ou se desloca.
   A seta anda poucos pixels. O texto nunca salta nem muda de caixa.
   ========================================================================= */


:root {
  --qx-micro: 150ms;
  --qx-ui-tempo: 280ms;
  --qx-editorial-tempo: 560ms;
  --qx-revelacao: 720ms;
  --qx-curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* O filete que cresce. Um elemento, um gesto, reaproveitado. */
.qx-filete {
  display: block;
  width: 28px;
  height: var(--qx-filete);
  background: var(--qx-ouro);
  opacity: 0.4;
  transform-origin: left center;
  transition:
    width var(--qx-ui-tempo) var(--qx-curva),
    opacity var(--qx-ui-tempo) var(--qx-curva);
}

/* O itálico como gesto. Devolvido ao sistema, não só ao índice. */
.qx-gesto-italico {
  transition: color var(--qx-micro) var(--qx-curva);
}

.qx-seta {
  display: inline-block;
  transition: transform var(--qx-micro) var(--qx-curva);
}

@media (hover: hover) and (pointer: fine) {
  .qx-entrada:hover .qx-gesto-italico,
  .qx-entrada:focus-within .qx-gesto-italico {
    font-style: italic;
    color: var(--qx-ouro);
  }

  .qx-entrada:hover .qx-filete,
  .qx-entrada:focus-within .qx-filete {
    width: 100%;
    opacity: 1;
  }

  .qx-entrada:hover .qx-seta,
  .qx-entrada:focus-within .qx-seta {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}