/* LEGACY — "Uma carta sobre o que fica".

   Página de leitura longa, não de vitrine. A régua aqui é a medida do texto:
   nada passa de ~62ch, o corpo é grande e o entrelinhamento largo, porque o
   visitante vem ler uma carta e não varrer uma grade.

   Tudo sai dos tokens do CALONE Monochrome Intelligence System®. O ritmo das
   faixas alterna escuro e claro na mesma cadência do resto do site, e cada
   seção declara `data-nav-theme` para o cabeçalho trocar de cor sozinho. */

.legacy-page {
  background: var(--calone-ink);
  color: var(--calone-white);
  font-family: var(--calone-font-sans);
  overflow-x: clip;
}

.legacy-page main { overflow: clip; }

/* O reset vai dentro de `:where()`, que não soma especificidade.

   Escrito como `.legacy-page p { margin: 0 }` ele valeria 0,1,1 e venceria
   qualquer `.classe { margin-top }` (0,1,0) — foi assim que três margens da
   página de monitorado morreram caladas e só apareceram na régua. Com
   `:where()` o reset vale zero e a classe do componente sempre ganha, sem
   precisar de `!important` em cada regra. */
:where(.legacy-page) :where(h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure) { margin: 0; }
:where(.legacy-page) :where(ul, ol) { padding: 0; list-style: none; }
:where(.legacy-page) :where(h1, h2, h3, p, li, dd) { overflow-wrap: anywhere; }

.legacy-shell {
  --shell-respiro: clamp(22px, 5vw, 80px);
  width: min(100%, 1440px);
  margin-inline: auto;
  padding-inline: var(--shell-respiro);
}

.legacy-secao {
  padding-block: clamp(104px, 13vw, 210px);
  border-top: 1px solid var(--calone-on-dark-border);
}

/* Faixas claras. A alternância é a respiração da carta: o leitor sabe que
   virou de assunto sem precisar de um título dizendo isso. */
.legacy-define,
.legacy-exige,
.legacy-acaso,
.legacy-pergunta {
  background: var(--calone-paper);
  color: var(--calone-ink);
  border-color: var(--calone-on-light-border);
}

.legacy-etiqueta {
  color: var(--calone-on-dark-muted);
  font-size: clamp(.66rem, .78vw, .78rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.legacy-define .legacy-etiqueta,
.legacy-exige .legacy-etiqueta,
.legacy-acaso .legacy-etiqueta { color: var(--calone-on-light-muted); }

.legacy-titulo {
  max-width: 20ch;
  margin-top: clamp(26px, 3.4vw, 52px);
  font-size: clamp(2.1rem, 4.6vw, 5.2rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.legacy-titulo--tese { max-width: 24ch; }

/* =====================================================================
   Abertura — o campo manda, o tipo se ancora na base

   A composição é a "laocoon" do catálogo do GetLayers: cena generativa em
   full-bleed, uma grade de fios verticais como estrutura permanente, e todo
   o texto afundado na faixa de baixo, com o título gigante alinhado à
   primeira coluna da grade. O terço superior fica vazio de propósito — é o
   que dá ao campo o direito de ser o assunto.

   Os tokens da CALONE vencem a prescrição visual da composição: onde ela
   pede "serif de alto contraste", aqui é o Playfair itálico, que é o único
   display do sistema; onde ela pede cor, aqui é branco sobre preto.
   ===================================================================== */
.legacy-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding-block: clamp(96px, 12vw, 148px) clamp(30px, 4vw, 56px);
  overflow: clip;
}

.legacy-hero__campo {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0;
  transition: opacity var(--motion-cinematic) var(--ease-calone);
}

.legacy-hero__campo.is-pronto { opacity: 1; }
.legacy-hero__campo canvas { display: block; width: 100%; height: 100%; }

/* A grade não é decoração: é a régua a que o título e as colunas se
   alinham, e é o que impede o tipo solto de flutuar sobre a cena. */
.legacy-hero__grade {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.legacy-hero__grade .legacy-shell {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100%;
}

.legacy-hero__grade span { border-left: 1px solid rgba(255, 255, 255, .055); }
.legacy-hero__grade span:first-child { border-left-color: rgba(255, 255, 255, .1); }

/* Duas cortinas: a de baixo devolve contraste ao texto sobre o campo, a de
   cima protege o cabeçalho fixo. Sem elas o branco do tipo encosta no
   branco da poeira e a leitura some. */
.legacy-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--calone-ink) 1%, rgba(8, 8, 8, .84) 26%, rgba(8, 8, 8, 0) 64%),
    linear-gradient(to bottom, rgba(8, 8, 8, .72), rgba(8, 8, 8, 0) 24%);
}

.legacy-hero__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.legacy-migalha {
  display: flex;
  gap: 10px;
  color: var(--calone-on-dark-muted);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.legacy-migalha a { text-decoration: none; }
.legacy-migalha a:hover { color: var(--calone-white); }

.legacy-hero__dica {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--calone-on-dark-muted);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: right;
}

.legacy-hero__dica::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.legacy-hero__base {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
  padding-top: clamp(40px, 7vw, 96px);
}

.legacy-hero__titulo {
  font-family: var(--calone-font-display);
  font-style: italic;
  font-size: clamp(4.2rem, 15vw, 15rem);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.03em;
  /* Playfair itálico desce muito no "g" e no "y"; a folga evita que o
     `overflow: clip` da seção corte a perna das letras. */
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

/* Uma palavra é bloco para que a linha nunca quebre no meio dela. */
.legacy-proximidade__palavra { display: inline-block; white-space: nowrap; }

/* O peso por proximidade é escrito quadro a quadro pelo rAF — não há
   `transition` nele de propósito, senão o CSS interpola por cima da
   interpolação do JS e a letra fica sempre um passo atrás do cursor.
   A transição aqui é só a da entrada. */
.legacy-proximidade__letra {
  display: inline-block;
  transition-property: opacity, filter, transform;
  transition-duration: 300ms, 950ms, 950ms;
  transition-timing-function: var(--ease-calone);
  will-change: font-variation-settings;
}

/* Opacidade chega cedo na curva: a letra fica sólida enquanto ainda sobe e
   perde o borrão, que é o que faz a entrada parecer cara. E nada é cortado
   por `overflow` — máscara sobre borrão cisalha o halo e mata o efeito. */
.legacy-hero__titulo.is-oculto .legacy-proximidade__letra {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(.16em);
}

.legacy-hero__lado {
  display: grid;
  gap: clamp(22px, 2.8vw, 36px);
  padding-bottom: clamp(4px, 1vw, 14px);
}

.legacy-hero__colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
}

.legacy-hero__colunas p {
  color: var(--calone-on-dark-muted);
  font-size: clamp(.88rem, 1vw, 1rem);
  line-height: 1.62;
}

.legacy-hero__colunas strong {
  color: var(--calone-white);
  font-weight: 500;
}

.legacy-hero__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: clamp(14px, 1.8vw, 22px);
  border-top: 1px solid var(--calone-on-dark-border);
}

.legacy-hero__assinatura {
  color: var(--calone-on-dark-muted);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.legacy-hero__pista {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--calone-on-dark-muted);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.legacy-hero__pista::after {
  content: "";
  width: 56px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: legacy-pista 2.4s var(--ease-calone) infinite;
}

@keyframes legacy-pista {
  0%, 100% { transform: scaleX(.28); opacity: .35; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* =====================================================================
   Prosa — a medida do texto manda
   ===================================================================== */
.legacy-prosa { display: grid; gap: clamp(34px, 4.4vw, 66px); }

.legacy-lede {
  max-width: 34ch;
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  line-height: 1.5;
}

.legacy-citacao p {
  max-width: 16ch;
  font-family: var(--calone-font-display);
  font-style: italic;
  font-size: clamp(2.4rem, 7vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

/* =====================================================================
   O que legado não é — a negação riscada
   O risco aqui é literal e correto: são as coisas que o legado NÃO é.
   ===================================================================== */
.legacy-nega__lista {
  display: grid;
  gap: clamp(4px, .8vw, 12px);
  margin-top: clamp(52px, 6vw, 90px);
}

.legacy-nega__item {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding-block: clamp(10px, 1.2vw, 18px);
  font-size: clamp(1.5rem, 3.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.035em;
}

.legacy-nega__item > span { position: relative; display: inline; }

/* O traço cresce da esquerda para a direita; `--risco` vai de 0 a 1. */
.legacy-nega__item > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 54%;
  height: 2px;
  background: currentColor;
  transform: scaleX(var(--risco, 0));
  transform-origin: left;
}

.legacy-cena-pronta .legacy-nega__item { opacity: calc(.42 + (1 - var(--risco, 0)) * .58); }

.legacy-nega__remate {
  max-width: 30ch;
  margin-top: clamp(46px, 5vw, 78px);
  color: var(--calone-on-dark-muted);
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  line-height: 1.5;
}

/* =====================================================================
   A definição
   ===================================================================== */
.legacy-define__lista {
  display: grid;
  gap: 0;
  margin-top: clamp(58px, 7vw, 104px);
  border-top: 1px solid var(--calone-on-light-border);
}

.legacy-define__lista li {
  padding-block: clamp(22px, 2.6vw, 38px);
  border-bottom: 1px solid var(--calone-on-light-border);
  font-size: clamp(1.1rem, 2vw, 1.9rem);
  line-height: 1.35;
  letter-spacing: -.02em;
}

.legacy-define__lista li::before {
  content: "É ";
  color: var(--calone-gray-500);
  font-family: var(--calone-font-display);
  font-style: italic;
}

/* =====================================================================
   O que exige
   ===================================================================== */
.legacy-exige__lista {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  max-width: 52ch;
  margin-top: clamp(50px, 6vw, 88px);
}

.legacy-exige__lista li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  line-height: 1.45;
}

.legacy-exige__lista span { color: var(--calone-gray-500); }

.legacy-exige__nota {
  max-width: 40ch;
  margin-top: clamp(44px, 5vw, 72px);
  color: var(--calone-on-light-muted);
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  line-height: 1.5;
}

.legacy-exige__nota em,
.legacy-livro__nota em { font-family: var(--calone-font-display); font-style: italic; }

/* =====================================================================
   A jornada — espinha fixa e quatro capítulos
   ===================================================================== */
.legacy-jornada {
  padding-block: clamp(104px, 13vw, 210px);
  border-top: 1px solid var(--calone-on-dark-border);
}

.legacy-jornada__palco {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
  margin-top: clamp(64px, 8vw, 130px);
}

/* A espinha acompanha a leitura: fica presa na tela enquanto os quatro
   capítulos passam, e o curso branco marca onde o leitor está. */
.legacy-espinha {
  position: sticky;
  top: clamp(120px, 18vh, 200px);
  align-self: start;
  display: grid;
  gap: clamp(20px, 2.4vw, 34px);
  padding-left: 26px;
}

.legacy-espinha__trilho,
.legacy-espinha__curso {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
}

.legacy-espinha__trilho { background: var(--calone-on-dark-border); }

.legacy-espinha__curso {
  background: var(--calone-white);
  transform: scaleY(var(--curso, 1));
  transform-origin: top;
}

.legacy-espinha__no {
  position: relative;
  display: grid;
  gap: 5px;
  color: var(--calone-on-dark-muted);
  font-size: clamp(.92rem, 1.2vw, 1.15rem);
  letter-spacing: -.01em;
  text-decoration: none;
  transition: color var(--motion-standard) var(--ease-calone);
}

.legacy-espinha__no span {
  font-size: .6rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2em;
}

.legacy-espinha__no::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%) scaleX(.5);
  transform-origin: left;
  transition: transform var(--motion-standard) var(--ease-calone);
}

.legacy-espinha__no[aria-current="true"] { color: var(--calone-white); }
.legacy-espinha__no[aria-current="true"]::before { transform: translateY(-50%) scaleX(1.9); }

.legacy-jornada__capitulos { display: grid; gap: clamp(90px, 12vw, 190px); }

.legacy-capitulo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 46px);
  scroll-margin-top: clamp(100px, 14vh, 170px);
}

.legacy-capitulo__marca { display: grid; gap: 14px; justify-items: center; }

.legacy-capitulo__risco {
  width: 1px;
  height: 100%;
  min-height: 40px;
  background: var(--calone-on-dark-border);
}

.legacy-capitulo__titulo {
  font-size: clamp(2.6rem, 7vw, 6.6rem);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.legacy-capitulo__texto {
  max-width: 46ch;
  margin-top: clamp(26px, 3vw, 44px);
  color: var(--calone-on-dark-muted);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  line-height: 1.6;
}

.legacy-capitulo__remate {
  max-width: 42ch;
  margin-top: clamp(30px, 3.4vw, 52px);
  font-family: var(--calone-font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 2.1rem);
  line-height: 1.3;
}

/* A virada de pergunta do capítulo "Eu": duas falas, a segunda pesando mais. */
.legacy-virada {
  display: grid;
  gap: clamp(18px, 2.2vw, 30px);
  max-width: 44ch;
  margin-top: clamp(34px, 4vw, 58px);
  padding-left: clamp(18px, 2vw, 30px);
  border-left: 1px solid var(--calone-on-dark-border);
}

.legacy-virada p {
  font-size: clamp(1.1rem, 1.9vw, 1.75rem);
  line-height: 1.3;
}

.legacy-virada span {
  display: block;
  margin-bottom: 10px;
  color: var(--calone-gray-500);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.legacy-virada__de { color: var(--calone-gray-500); text-decoration: line-through; }
.legacy-virada__de span { text-decoration: none; }
.legacy-virada__para { color: var(--calone-white); }

/* =====================================================================
   Não acontece por acaso
   ===================================================================== */
.legacy-acaso__lede {
  max-width: 34ch;
  margin-top: clamp(30px, 3.4vw, 48px);
  color: var(--calone-on-light-muted);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  line-height: 1.5;
}

.legacy-acaso__lista {
  display: grid;
  /* Quatro por linha, fixo — são oito itens, e 4×2 é a única divisão que os
     reparte igualmente. O `auto-fit` que estava aqui resolvia a largura
     sozinho, mas na régua de 1440 cabiam seis e a segunda fila ficava com
     duas células órfãs ao lado de um vão. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(50px, 6vw, 88px);
  background: var(--calone-on-light-border);
  border: 1px solid var(--calone-on-light-border);
}

.legacy-acaso__lista li {
  display: grid;
  gap: clamp(30px, 4vw, 54px);
  min-height: clamp(140px, 14vw, 190px);
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--calone-paper);
  font-size: clamp(.98rem, 1.3vw, 1.2rem);
  letter-spacing: -.01em;
}

.legacy-acaso__lista span {
  color: var(--calone-gray-500);
  font-size: .62rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2em;
}

/* =====================================================================
   As cinco dimensões
   ===================================================================== */
.legacy-dimensoes__lista {
  margin-top: clamp(56px, 7vw, 100px);
  border-top: 1px solid var(--calone-on-dark-border);
}

.legacy-dimensao {
  display: grid;
  grid-template-columns: 62px minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: baseline;
  padding-block: clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--calone-on-dark-border);
}

.legacy-dimensao__num {
  color: var(--calone-gray-500);
  font-size: .64rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2em;
}

.legacy-dimensao strong {
  font-size: clamp(1.5rem, 3vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
}

.legacy-dimensao p {
  color: var(--calone-on-dark-muted);
  font-size: clamp(.95rem, 1.3vw, 1.2rem);
  line-height: 1.5;
}

/* =====================================================================
   Governança — o anel em volta
   Nove responsabilidades dispostas em círculo: o texto diz "ao redor de
   tudo isso", e o layout diz a mesma coisa sem precisar repetir.
   ===================================================================== */
.legacy-anel {
  /* Deslocamento angular escrito pelo scroll (ver legacy.js). Fica aqui com
     valor neutro para o anel nascer no lugar certo sem JavaScript. */
  --giro: 0deg;

  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 640px);
  margin: clamp(70px, 9vw, 130px) auto 0;
  aspect-ratio: 1;
}

.legacy-anel::before,
.legacy-anel::after {
  content: "";
  position: absolute;
  border: 1px solid var(--calone-on-dark-border);
  border-radius: 50%;
}

.legacy-anel::before { inset: 0; }
.legacy-anel::after { inset: 27%; }

.legacy-anel__nucleo {
  position: relative;
  display: grid;
  gap: 10px;
  place-items: center;
  text-align: center;
}

.legacy-anel__nucleo span {
  font-size: clamp(1.3rem, 3vw, 2.4rem);
  letter-spacing: -.04em;
}

.legacy-anel__nucleo p {
  max-width: 18ch;
  color: var(--calone-on-dark-muted);
  font-family: var(--calone-font-display);
  font-style: italic;
  font-size: clamp(.85rem, 1.2vw, 1.05rem);
}

.legacy-anel__itens { position: absolute; inset: 0; }

/* Cada item é girado até o seu ângulo, empurrado para o raio e desgirado,
   para o texto continuar na horizontal.

   O `--giro` do scroll entra nas DUAS rotações: na primeira leva o item para
   a nova posição no anel, na segunda é desfeito para o rótulo continuar
   deitado. Girar o <ul> inteiro seria mais simples e estava errado — o
   desgiro do CSS conhece o `--angulo` de cada item, não a rotação do
   contêiner, então acima de poucos graus os rótulos começavam a tombar. */
.legacy-anel__itens li {
  position: absolute;
  left: 50%;
  top: 50%;
  transform:
    rotate(calc(var(--angulo) + var(--giro)))
    translate(min(42vw, 268px))
    rotate(calc((var(--angulo) + var(--giro)) * -1));
}

.legacy-anel__itens span {
  display: block;
  padding: 7px 13px;
  border: 1px solid var(--calone-on-dark-border);
  border-radius: 999px;
  background: var(--calone-ink);
  font-size: clamp(.62rem, .9vw, .78rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.legacy-governanca__remate {
  max-width: 30ch;
  margin: clamp(60px, 7vw, 100px) auto 0;
  font-family: var(--calone-font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 2.2rem);
  text-align: center;
}

/* =====================================================================
   A pergunta
   ===================================================================== */
.legacy-pergunta {
  padding-block: clamp(120px, 16vw, 250px);
  border-top: 1px solid var(--calone-on-light-border);
}

.legacy-pergunta__antes {
  max-width: 38ch;
  color: var(--calone-on-light-muted);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  line-height: 1.5;
}

.legacy-pergunta__frase {
  max-width: 18ch;
  margin-top: clamp(34px, 4vw, 60px);
  font-size: clamp(2.4rem, 6.4vw, 7rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
}

/* =====================================================================
   O livro
   ===================================================================== */
.legacy-livro__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(260px, 32%, 420px));
  gap: clamp(50px, 8vw, 130px);
  align-items: start;
}

/* A capa e a chamada empilham na coluna da direita, ocupando o vão que
   sobrava embaixo do livro.

   `align-self: stretch` desfaz o `align-items: start` da grade só para esta
   coluna, e o `space-between` joga a chamada para a BASE: ela passa a ficar
   na altura do parágrafo que fecha o texto à esquerda, em vez de colada na
   capa com um vão embaixo. Quando a coluna da esquerda é curta demais para
   abrir esse espaço, o `gap` mínimo segura a distância. */
.legacy-livro__capa {
  display: grid;
  /* `start`, não `space-between`. Empurrado para a base da coluna, o botão
     ficava a 153px da capa e passava a pertencer visualmente ao vão em vez do
     livro. Ancorado no topo, a distância é a do `gap` e não depende de quão
     alta é a coluna de texto ao lado. */
  align-content: start;
  gap: clamp(30px, 3.4vw, 52px);
}

/* Só o botão encolhe para o próprio conteúdo. Um `justify-items: start` no
   contêiner encolheria a capa junto — foi o que aconteceu: ela caiu de 415px
   (a largura da coluna) para 271px, a largura do texto dentro dela. */
.legacy-livro__cta { justify-self: start; }

.legacy-livro__contraste {
  display: grid;
  gap: clamp(22px, 2.6vw, 36px);
  max-width: 52ch;
  margin-top: clamp(46px, 5vw, 78px);
}

.legacy-livro__contraste div {
  display: grid;
  grid-template-columns: minmax(76px, auto) 1fr;
  gap: clamp(16px, 2vw, 30px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--calone-on-dark-border);
}

.legacy-livro__contraste dt {
  color: var(--calone-gray-500);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.legacy-livro__contraste dd {
  font-size: clamp(.98rem, 1.35vw, 1.22rem);
  line-height: 1.55;
}

.legacy-livro__nota {
  max-width: 52ch;
  margin-top: clamp(38px, 4vw, 62px);
  color: var(--calone-on-dark-muted);
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  line-height: 1.6;
}

/* Capa desenhada em tipografia: não há arquivo de capa da LEGACY, e um
   retângulo cinza dizendo "imagem" seria pior que uma capa de verdade
   composta com a própria fonte do sistema. */
.legacy-capa {
  display: grid;
  align-content: space-between;
  aspect-ratio: 2 / 3;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--calone-on-dark-border);
  background:
    radial-gradient(120% 90% at 22% 8%, rgba(255, 255, 255, .07), transparent 62%),
    var(--calone-black);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

.legacy-capa__marca {
  color: var(--calone-on-dark-muted);
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.legacy-capa__marca span { display: block; margin-top: 4px; color: var(--calone-white); }

.legacy-capa__titulo {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: .95;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.legacy-capa__linha { height: 1px; background: var(--calone-on-dark-border); }

.legacy-capa__deck {
  color: var(--calone-on-dark-muted);
  font-family: var(--calone-font-display);
  font-style: italic;
  font-size: clamp(.85rem, 1.2vw, 1.05rem);
}

/* =====================================================================
   Fecho
   ===================================================================== */
.legacy-fecho {
  padding-block: clamp(120px, 16vw, 240px);
  border-top: 1px solid var(--calone-on-dark-border);
  text-align: center;
}

.legacy-fecho__marca {
  font-size: clamp(3.4rem, 13vw, 12rem);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.legacy-fecho__linha {
  max-width: 26ch;
  margin: clamp(20px, 2.4vw, 34px) auto 0;
  color: var(--calone-on-dark-muted);
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  line-height: 1.3;
}

.legacy-fecho__linha--forte { color: var(--calone-white); }

.legacy-fecho__convite {
  max-width: 24ch;
  margin: clamp(44px, 5vw, 74px) auto 0;
  font-size: clamp(1.3rem, 2.6vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -.03em;
}

/* Os botões da página. Uma regra só para os dois, em vez de duas parecidas:
   é o mesmo objeto do sistema — a pílula branca do cabeçalho, do fecho e do
   Report da home. Pílula preenchida, texto preto, 999px de raio.

   Tentei antes deixar o do livro contornado, para escalonar a hierarquia com
   o do fecho. Lido na página, virou frase com link em vez de botão. */
.legacy-fecho__cta,
.legacy-livro__cta {
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  padding-inline: clamp(28px, 3vw, 44px);
  border: none;
  border-radius: 999px;
  background: var(--calone-white);
  color: var(--calone-black);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-micro) var(--ease-calone),
    background var(--motion-micro) var(--ease-calone);
}

/* O respiro acima é só do fecho: o do livro é posicionado pela coluna. */
.legacy-fecho__cta { margin-top: clamp(38px, 4vw, 60px); }

.legacy-fecho__cta:focus-visible,
.legacy-livro__cta:focus-visible {
  outline: 2px solid var(--calone-white);
  outline-offset: 3px;
}

/* =====================================================================
   Estados-base da cena
   Vivem sob `.legacy-cena-pronta`, classe que o JS só põe quando GSAP e
   ScrollTrigger existem e o visitante não pediu menos movimento. Sem ela a
   página nasce inteira e legível — que é o estado correto sem JavaScript.
   ===================================================================== */
.legacy-linha { display: block; overflow: hidden; padding-block: .22em; margin-block: -.22em; }
.legacy-linha > span { display: block; will-change: transform; }
.legacy-linha--palavra { display: inline-block; vertical-align: top; }

.legacy-cena-pronta [data-lista] > * { will-change: transform, opacity; }

@media (hover: hover) {
  .legacy-fecho__cta:hover,
  .legacy-livro__cta:hover { transform: translateY(-2px); background: var(--calone-silver); }
  .legacy-espinha__no:hover { color: var(--calone-white); }
  .legacy-capa { transition: transform var(--motion-standard) var(--ease-calone); }
  /* O hover levanta só a capa, não a chamada abaixo dela. */
  .legacy-livro__capa:has(.legacy-capa:hover) .legacy-capa { transform: translateY(-8px); }

}

@media (max-width: 1100px) {
  .legacy-jornada__palco { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 70px); }

  /* Sem coluna lateral a espinha vira uma régua horizontal presa no topo. */
  .legacy-espinha {
    position: sticky;
    top: clamp(74px, 11vh, 96px);
    z-index: 5;
    display: flex;
    gap: clamp(14px, 3vw, 28px);
    padding: 12px 0;
    background: linear-gradient(var(--calone-ink) 72%, transparent);
    padding-left: 0;
  }

  .legacy-espinha__trilho,
  .legacy-espinha__curso { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 1px; }
  .legacy-espinha__curso { transform: scaleX(var(--curso, 1)); transform-origin: left; }
  .legacy-espinha__no { gap: 2px; font-size: .92rem; }
  .legacy-espinha__no::before { display: none; }

  .legacy-livro__grade { grid-template-columns: 1fr; }
  .legacy-livro__capa { max-width: 340px; }
}

@media (max-width: 900px) {
  /* Abaixo de 900 a composição de duas colunas não cabe: o título gigante
     e as colunas de corpo passam a empilhar, e a grade cai para três fios
     para não virar hachura. */
  .legacy-hero__base { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 44px); }
  .legacy-hero__grade .legacy-shell { grid-template-columns: repeat(3, 1fr); }
  .legacy-hero__titulo { font-size: clamp(3.6rem, 19vw, 8rem); }

  /* 4×2 vira 2×4: com quatro colunas nesta largura a célula fica estreita
     demais para "Significativa" caber sem quebrar. */
  .legacy-acaso__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .legacy-secao { padding-block: clamp(86px, 15vw, 120px); }
  .legacy-anel { width: min(100%, 420px); }
  .legacy-anel::after { inset: 24%; }
  .legacy-anel__itens li { transform: rotate(var(--angulo)) translate(min(38vw, 168px)) rotate(calc(var(--angulo) * -1)); }
  .legacy-anel__itens span { padding: 5px 9px; font-size: .56rem; letter-spacing: .06em; }
  .legacy-dimensao { grid-template-columns: 44px 1fr; row-gap: 12px; }
  .legacy-dimensao p { grid-column: 2; }
  .legacy-capitulo { grid-template-columns: 1fr; gap: 18px; }
  .legacy-capitulo__marca { grid-auto-flow: column; justify-items: start; justify-content: start; align-items: center; gap: 12px; }
  .legacy-capitulo__risco { width: 40px; height: 1px; min-height: 0; }
  .legacy-hero__pista { display: none; }
  .legacy-hero__dica { display: none; }
  .legacy-hero__colunas { grid-template-columns: 1fr; }
  .legacy-hero__rodape { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .legacy-acaso__lista { grid-template-columns: 1fr; }
  .legacy-acaso__lista li { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-hero__pista::after { animation: none; transform: none; }
  .legacy-hero__campo { display: none; }
  .legacy-hero__grade { display: none; }
  .legacy-proximidade__letra { transition: none !important; }
  .legacy-nega__item > span::after { transform: scaleX(1); }
  .legacy-capa,
  .legacy-fecho__cta,
  .legacy-livro__cta { transition: none !important; transform: none !important; }
}

@media print {
  .site-header,
  .site-menu,
  .site-footer,
  .legacy-hero__campo,
  .legacy-hero__grade,
  .legacy-hero__scrim,
  .legacy-hero__dica,
  .legacy-hero__pista,
  .legacy-espinha { display: none !important; }

  .legacy-page,
  .legacy-secao,
  .legacy-jornada,
  .legacy-fecho { background: var(--calone-white); color: var(--calone-black); }

  .legacy-secao,
  .legacy-capitulo { break-inside: avoid; padding-block: 30px; }
}