/* faixa.css — specs E e F, refinadas em 29/10 (docs/refino/faixa.md). y relativo ao topo da faixa.
   Topos = topo da maiúscula (.tb).
   Palavras: recorte por palavra (.lt-linha) com padding-top 10 (overshoot) e padding-bottom = folga abaixo da
   linha de base; top = topo da maiúscula − 10 (posto inline pelo JS).
   Fileiras de hover: faixas de 236 px da largura toda, a partir de 401 (eram 207, F §2; +29 para a linha curta
   embaixo da palavra ativa). A lista cresce 4 × 29 = 116, que entram no fim da faixa (--extra): a folga entre
   a última miniatura e a timeline continua a do vídeo (G cobre o fim da faixa enquanto entra, G §6.1). */
#faixa{--extra:116}
/* letter-spacing calibrado na Tarefa 6 (Passo 5): a caixa de tinta do título e do índice "01/" ficava
   fora de ±3 px com o -.045em padrão de .d nesse tamanho; ver LEVEL.servicos para as palavras. */
.fx__tit{left:calc(58 * var(--u));top:calc(146 * var(--u));--cap:44;--lh:59;color:#fff;letter-spacing:-.051em}
/* contagem dos pilares no fim do título, na altura da maiúscula da 2ª linha (left posto pelo JS) */
.fx__n{--cap:12;color:#8a8a8a;letter-spacing:.02em}
.fx__par{left:calc(924 * var(--u));top:calc(156 * var(--u));--cap:16;--lh:31.3;width:calc(450 * var(--u));color:#fff}
/* cursor:none na lista: só a seta verde aparece (js/cursor.js); o cursor do sistema não aparece no vídeo (F §7.3) */
.fs{position:absolute;left:0;top:calc(401 * var(--u));width:100%;height:calc(944 * var(--u));cursor:none}
.fs__f{position:absolute;left:0;width:100%;height:calc(236 * var(--u))}
/* linhas finas: no topo de cada fileira e uma no fim, na coluna de conteúdo (58 → 1422). A da fileira ativa
   ganha um fio verde por cima, que se desenha da esquerda e recolhe para a direita. */
.fs__fio{position:absolute;left:calc(58 * var(--u));top:0;width:calc(1364 * var(--u));height:1px;
  background:rgba(255,255,255,.13);transform-origin:0 50%}
.fs__fio i{position:absolute;inset:0;background:var(--c-limao);transform:scaleX(0);transform-origin:0 50%}
/* índice: segue a fileira ativa (branco, barra verde); as outras #666 */
.fs__i{--cap:21;color:var(--c-apagado);transition:color .32s linear}
.fs__i span{transition:color .32s linear}
.fs__f.is-ativa .fs__i{color:#fff}
.fs__f.is-ativa .fs__i span{color:var(--c-limao)}
.fs__w{--cap:114;padding-top:calc(10 * var(--u));color:var(--c-apagado);transition:color .32s linear}
.fs__f.is-ativa .fs__w{color:#fff}
/* linha curta (texto de p32): 30 px abaixo da linha de base da palavra, alinhada à tinta dela; as letras
   sobem do recorte só na fileira ativa (js/sections/faixa.js) */
.fs__d{--cap:11;--lh:20;color:#a8a8a8;letter-spacing:-.005em}
/* miniatura: a foto em P&B por baixo e a mesma foto em cor por cima, recortada pelo corte de 45° */
.fs__m{position:absolute;border-radius:calc(20 * var(--u));overflow:hidden;background:#1c1c1c}
.fs__m img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.fs__mb{filter:grayscale(1) brightness(.52) contrast(1.08)}
.fs__mc{position:absolute;inset:0;overflow:hidden}
/* fio verde da borda do corte: centrado no canto de baixo à esquerda, girado 45° e levado pela diagonal */
.fs__corte{position:absolute;left:calc(-260 * var(--u));top:100%;width:calc(520 * var(--u));height:calc(1.5 * var(--u));
  margin-top:calc(-.75 * var(--u));background:var(--c-limao);opacity:0;pointer-events:none}