/* A11 Sports — preview · base.css
   Dona: Aquarela. Reset e tokens vivem em tokens.css — aqui vem o grão,
   as superfícies de seção, o layout de conteúdo e a tipografia utilitária.
   Não redefinir tokens. Caminhos de asset sempre relativos. */

/* ============================================================
   GRÃO — overlay SVG turbulence, fixo, um só, no <body>
   ============================================================ */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
@media (prefers-reduced-motion:reduce){
  body::after{opacity:.03}
}

/* ============================================================
   LAYOUT DE CONTEÚDO
   ============================================================ */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap--wide{max-width:1600px}
.wrap--narrow{max-width:900px}

/* medida de leitura */
.measure{max-width:62ch}

/* ============================================================
   SEÇÃO — bloco full-width, alterna ink / paper
   ============================================================ */
.section{
  position:relative;
  padding-block:clamp(80px,12vh,180px);
  overflow-clip-margin:1px;
}
.section--ink{
  background:var(--ink);
  color:var(--ink-on-dark);
}
.section--paper{
  background:var(--paper);
  color:var(--ink-on-paper);
}

/* contexto de cor: paper reescreve linhas / textos secundários / acento-borda */
.section--paper .kicker{color:var(--mute-paper)}
.section--paper .lead,
.section--paper .body-copy{color:#33322e}
.section--paper hr,
.section--paper .rule{background:var(--line-paper);border-color:var(--line-paper)}
.section--paper .section-head{border-color:var(--line-paper)}

/* seção "flush": sem padding vertical (hero, faixas) */
.section--flush{padding-block:0}

/* ============================================================
   TIPOGRAFIA UTILITÁRIA
   ============================================================ */
.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:.92;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.display--hero{font-size:var(--fs-hero)}
.display--h2{font-size:var(--fs-h2)}
.display--outro{font-size:var(--fs-outro);line-height:.86}

.lead{
  font-size:clamp(1.05rem,1.6vw,1.35rem);
  line-height:1.5;
  color:var(--ink-on-dark);
  max-width:52ch;
}
.body-copy{
  color:var(--mute);
  max-width:62ch;
}
.body-copy + .body-copy{margin-top:1em}

/* número de seção — Anton, acento osso, zero à esquerda */
.seq{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--bone);
  line-height:1;
  font-size:clamp(2.4rem,5vw,3.6rem);
  letter-spacing:.02em;
}

/* kicker com traço curto (usa ::before) */
.kicker--dash::before{
  content:"— ";
  color:var(--bone);
}

/* régua fina */
.rule{
  height:1px;
  width:100%;
  background:var(--line);
  border:0;
}

/* link editorial sublinhado por baixo */
.link-underline{
  position:relative;
  color:inherit;
  padding-bottom:2px;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size var(--dur-fast) var(--ease);
}
.link-underline:hover{background-size:100% 1px}

/* ============================================================
   HELPERS DE MOVIMENTO
   Sem hiding via CSS: sem JS ou em reduced-motion tudo fica visível.
   anim.js aplica o estado inicial com gsap.set() só quando a lib carrega,
   e reduz para fade curto / nada em prefers-reduced-motion.
   ============================================================ */
[data-reveal] > .line{display:block}

/* utilidades */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.stack > * + *{margin-top:var(--stack-gap,1rem)}
.anchor{scroll-margin-top:calc(var(--bar-h) + 24px)}