/* Página “Inteligência” — abertura, manifesto editorial e fecho. */

.inteligencia {
  position: relative;
  z-index: 1;
  color: var(--calone-black);
  background: var(--calone-paper);
}

.inteligencia__quadro {
  width: min(1280px, 100%);
  margin-inline: auto;
  padding-inline: clamp(22px, 6vw, 80px);
}

.inteligencia__eyebrow {
  margin: 0 0 clamp(18px, 2.6vh, 30px);
  color: var(--calone-on-light-muted);
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.inteligencia__abertura {
  padding-block: clamp(150px, 22vh, 250px) clamp(70px, 10vh, 120px);
}

.inteligencia__marco {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.2rem, 5.8vw, 4.8rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.036em;
}

.inteligencia__marco .font-display,
.inteligencia__manifesto .font-display,
.inteligencia__manifesto-fecho .font-display {
  font-weight: 400;
  letter-spacing: -.02em;
}

.inteligencia__manifesto-wrap {
  padding-block: clamp(100px, 17vh, 200px);
  border-block: 1px solid var(--calone-on-light-border);
}

/* Estrutura vinda da composição `artist-statement` do GetLayers: uma faixa
   contida com três coisas alinhadas à esquerda e muito ar — olho pequeno em
   caixa alta com um fio de chamada, o parágrafo promovido a corpo de display
   fazendo o trabalho de um título, e um fecho curto embaixo. A regra dela é
   explícita: funciona porque a medida estreita e nada compete. */

.inteligencia__manifesto-intro {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0;
  color: var(--calone-on-light-muted);
  font-size: clamp(.72rem, .9vw, .9rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* O fio de chamada da composição. Também resolve um problema de leitura: o
   olho não é um rótulo de categoria, é o começo da frase que vem abaixo, e o
   fio marca isso sem precisar de pontuação. */
.inteligencia__manifesto-intro::before {
  content: "";
  flex: none;
  width: clamp(22px, 3vw, 46px);
  height: 1px;
  background: currentColor;
  opacity: .55;
}

/* Uma passagem só, corpo de display, entrelinha larga.

   Os dois blocos anteriores rodavam a 1,11 de entrelinha em 21ch e 18ch —
   apertado demais para uma frase de cinco linhas nesse tamanho. A composição
   pede ~1,25, e é ela que deixa um parágrafo longo legível em corpo de
   título. A medida a 30ch continua mais estreita que a das seções vizinhas,
   que é o recuo que faz a faixa ler como pausa. */
.inteligencia__manifesto {
  margin: clamp(30px, 5vh, 60px) 0 0;
  max-width: 30ch;
  font-size: clamp(1.55rem, 3.1vw, 2.9rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.028em;
  text-wrap: pretty;
}

/* O fecho é o degrau de baixo da escada: mesma cor e mesma coluna, metade do
   tamanho. Quem separa os dois é a escala, não uma régua nem um cinza — a
   composição pede nada competindo, e esta é a frase que fecha o argumento. */
.inteligencia__manifesto-fecho {
  margin: clamp(54px, 9vh, 100px) 0 0;
  max-width: 38ch;
  font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -.014em;
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .inteligencia__manifesto {
    max-width: 100%;
    font-size: clamp(1.5rem, 6.4vw, 2.3rem);
    line-height: 1.26;
  }

  .inteligencia__manifesto-fecho {
    max-width: 100%;
    font-size: clamp(1rem, 4.2vw, 1.25rem);
  }
}