/* ==========================================================================
   Story — a história do casal em composição editorial.

   Sem card, sem borda, sem caixa: o texto assenta direto no fundo da seção.
   O que organiza a leitura é a largura de medida, o espaço em branco e a
   troca entre a serifa e a sem-serifa. Todas as classes são próprias desta
   seção — nada aqui vaza para o resto do site.
   ========================================================================== */

.story {
  /* Medidas locais: a composição é mais larga que a coluna de texto, para
     o número, o rótulo e o fio respirarem sem alargar a linha de leitura. */
  --story-largura: 58rem;
  --story-medida: 40rem;

  max-width: var(--story-largura);
  margin-inline: auto;
  text-align: center;
}

/* --- Capítulo ----------------------------------------------------------- */
.story__capitulo {
  max-width: var(--story-largura);
  margin-inline: auto;
}

/* Cabeçalho do capítulo: o algarismo em serifa sobre o rótulo em caixa
   alta, no mesmo tom dos eyebrows do site. */
.story__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.story__numero {
  font-family: var(--font-display);
  /* A serifa entrega algarismos antigos por padrão, e "01" sai parecendo
     "OI". `lining-nums` traz a versão alinhada, de altura constante. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  /* O azul claro da paleta ficaria em 2:1 sobre o fundo da seção. O
     algarismo é texto visível, então usa o mesmo tom dos eyebrows, que já
     foi calibrado para 4.5:1. */
  color: var(--serenity-medium);
}

.story__rotulo {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--serenity-medium);
}

/* Frase de abertura do capítulo. A medida curta em `ch` faz a quebra em
   duas linhas acontecer sozinha, sem <br> no conteúdo. */
.story__abertura {
  --story-atraso: 90ms;
  max-width: 20ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.25rem + 2vw, 2.6rem);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

/* --- Citação ------------------------------------------------------------
   Ganha peso pelo corpo e pela cor, não por ornamento. As aspas curvas são
   do mesmo tamanho do texto: nada de aspas decorativas gigantes. */
.story__citacao {
  --story-atraso: 180ms;
  max-width: 34ch;
  margin: var(--space-6) auto 0;
}

.story__citacao p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  line-height: var(--lh-snug);
  color: var(--serenity-dark);
  text-wrap: balance;
}

.story__citacao p::before {
  content: "“";
}

.story__citacao p::after {
  content: "”";
}

/* --- Texto corrente ------------------------------------------------------ */
.story__texto {
  --story-atraso: 240ms;
  max-width: var(--story-medida);
  margin: var(--space-6) auto 0;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* --- Fio do tempo entre os capítulos ------------------------------------
   Linha de 1px que nasce e morre em transparente, com um ponto no meio.
   Ornamental: o HTML o marca como aria-hidden. */
.story__fio {
  display: block;
  width: 1px;
  height: clamp(4.5rem, 2rem + 6vw, 7.5rem);
  margin: var(--space-8) auto;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--serenity),
    transparent
  );
  position: relative;
}

.story__fio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background-color: var(--serenity);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* --- Destaque emocional --------------------------------------------------
   O ponto alto da seção: corpo grande, muito ar em volta e nenhuma moldura. */
.story__destaque {
  margin-top: var(--space-9);
}

.story__destaque-frase {
  max-width: 28ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.3rem + 2.3vw, 2.75rem);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

/* Mesmo filete que assina os títulos de seção, repetido aqui em escala
   menor para fechar o destaque sem introduzir outro ornamento. */
.story__ornamento {
  display: block;
  width: 56px;
  height: 1px;
  margin: var(--space-6) auto 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--serenity),
    transparent
  );
}

/* --- Fecho ---------------------------------------------------------------
   Volta ao corpo de texto: depois do destaque, a voz baixa de novo. */
.story__fecho {
  max-width: var(--story-medida);
  margin: var(--space-8) auto 0;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* --- Entrada em cena -----------------------------------------------------
   Reaproveita o `.reveal` do projeto (IntersectionObserver + animations.css).
   O único acréscimo é o atraso: cada elemento declara o seu `--story-atraso`
   na própria regra, e é ele que faz o bloco aparecer em sequência em vez de
   tudo de uma vez. */
.js-reveal .story .reveal {
  transition-delay: var(--story-atraso, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .story .reveal {
    transition-delay: 0ms;
  }
}

/* --- Celular -------------------------------------------------------------
   A composição continua editorial; só ganha margem lateral extra para o
   texto não encostar nas bordas e perde um pouco do respiro vertical. */
@media (max-width: 640px) {
  .story {
    padding-inline: var(--space-1);
  }

  .story__destaque {
    margin-top: var(--space-8);
  }

  .story__fio {
    margin-block: var(--space-7);
  }

  .story__fecho {
    margin-top: var(--space-7);
  }
}