/* base.css — tokens, reset e utilitários. Toda medida é "px do vídeo" × --u (a página útil do vídeo mede
   1480 de largura). As alturas das seções são a geometria global (docs/specs/geometria.md §2): a soma dá
   9619,5, o período do loop; a cópia do hero no fim ocupa exatamente uma tela (js/loop.js).
   --extra: altura além da geometria, em px do vídeo, que cada seção pode pôr no próprio CSS (ex.: #featured{--extra:240}).
   As seções novas (data-nova no index.html) medem só --extra. Tudo o que vem depois desce a soma das de cima:
   app.js soma sozinho em aoEntrar e rolaY (pela seção dona do elemento), gatilho direto soma App.antes(sec) e o
   fim da página soma App.D (o total, que app.js também põe em --N). O período do loop é 9619,5 + --N. */
:root{
  --u: calc(100vw / 1480);
  --c-ink:#0c0c0c; --c-apagado:#666;
  /* paleta SKNA (amostrada do folder): limão #9AD426, cinza claro #EDEEEB, grafite e um limão claro.
     Substitui os 4 pastéis do layout: roxo -> grafite, amarelo -> limão, pêssego -> cinza, azul -> limão claro. */
  --c-limao:#9ad426; --c-cinza:#edeeeb; --c-grafite:#2a2c2c; --c-limao-claro:#d6eca2;
  --f-display:'Mona Sans','Arial Narrow',sans-serif;  --cr-d:.729;   /* sCapHeight da Mona Sans */
  --f-marca:'Instrument Sans',sans-serif;              --cr-m:.72;
  --f-logo:'Albert Sans',sans-serif;
  --f-texto:'Manrope','Helvetica Neue',Arial,sans-serif; --cr-t:.728;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
/* fundo do documento escuro: aparece só onde nenhuma seção pinta (vão da cópia do hero que chega
   deslocada, js/loop.js); cada seção pinta o próprio fundo */
body{background:var(--c-ink);color:var(--c-ink);overflow-x:clip;-webkit-font-smoothing:antialiased;
  font-family:var(--f-texto)}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
button{background:none;border:0;font:inherit;color:inherit;cursor:pointer}
ul,ol{list-style:none}
/* altura travada na geometria (período + 1 tela, geometria §2): sem isso, o deslocamento próprio da
   cópia do hero (y +80 -> 0, js/loop.js, Tarefa 11) empurraria #hero-copia para baixo do fim natural do
   documento enquanto R < 8663,5 (quase toda a rolagem) e inflaria scrollHeight (e o limite do Lenis
   infinite) em até 80 px. overflow:clip trava o fim do documento exatamente aí; a fatia que passaria
   do limite nunca aparece, porque a janela nunca rola além do próprio limite pra revelá-la. */
main{position:relative;height:calc((9619.5 + var(--N, 0)) * var(--u) + 100vh);overflow:clip}
/* ===== utilitários ===== */
.abs{position:absolute}
.tb{text-box:trim-both cap alphabetic}
.d{font-family:var(--f-display);font-variation-settings:'wdth' 87,'wght' 500;text-transform:uppercase;
  letter-spacing:-.045em;white-space:nowrap;
  font-size:calc(var(--cap) * var(--u) / var(--cr-d));line-height:calc(var(--lh, var(--cap)) * var(--u))}
.t{font-family:var(--f-texto);font-weight:500;letter-spacing:-.03em;
  font-size:calc(var(--cap) * var(--u) / var(--cr-t));line-height:calc(var(--lh, 31) * var(--u))}
/* ===== seções: alturas da geometria global ===== */
#hero{position:relative;height:calc((1207 + var(--extra, 0)) * var(--u));background:var(--c-ink);overflow:hidden}
#manifesto{position:relative;z-index:2;height:calc((868 + var(--extra, 0)) * var(--u));background:#fff}
#featured{position:relative;height:calc((1651.5 + var(--extra, 0)) * var(--u));background:#fff}
#faixa{position:relative;height:calc((1517 + var(--extra, 0)) * var(--u));background:var(--c-ink)}
#timeline{position:relative;z-index:2;height:calc((910 + var(--extra, 0)) * var(--u));background:#fff}
#frase{position:relative;height:calc((1125.2 + var(--extra, 0)) * var(--u));background:#fff}
#numeros{position:relative;height:calc((904 + var(--extra, 0)) * var(--u));background:#fff}
#rodape{position:relative;height:calc((1436.8 + var(--extra, 0)) * var(--u));background:#fff}
/* seções novas: só --extra (o próprio CSS de cada uma dá o valor, o fundo e o z-index) */
main > [data-nova]{position:relative;height:calc(var(--extra, 0) * var(--u))}
#hero-copia{position:relative;height:100vh;background:var(--c-ink);overflow:hidden}
/* antes do boot tudo que anima fica invisível (evita piscar o estado final antes do estado inicial) */
html:not(.is-ready) main,html:not(.is-ready) #cab{visibility:hidden}
/* ===== primitivos de letra (js/app.js: App.letras) =====
   .lt-linha é o recorte: corta só na vertical (overflow: visible clip), então a tinta que passa da
   caixa de avanço na horizontal (A e V sobrepostos, spec B §3) não é cortada. A borda de baixo do
   recorte é o padding-bottom de cada linha (a spec de cada seção dá a folga abaixo da linha de base).
   O texto original fica no .lt-fantasma, invisível, segurando largura e linha de base. Cada .lt é uma
   letra absoluta: left/top/line-height vêm do Range do glifo (App.letras), então coincide com o fantasma. */
.lt-linha{position:relative;overflow:visible clip;white-space:pre}
/* quando a linha também é .abs (várias linhas de título, C §6.2), o recorte tem de ficar fora do fluxo:
   como position:relative não empilha em cima da anterior mas herda a posição estática dela, a 2ª e a
   3ª linha desciam a mais (a altura das linhas acima somava ao top). Especificidade (0,2,0) > (0,1,0)
   garante que o position:absolute vença mesmo com .lt-linha depois no arquivo (achado na Tarefa 4). */
.abs.lt-linha{position:absolute}
.lt-fantasma{visibility:hidden}
.lt{position:absolute;white-space:pre;text-box:none;will-change:transform}