/* frase.css — spec H. y relativo à seção (página 6153,5). Linhas: recorte = caixa da linha (H §6.2), aqui com
   padding de 20 acima e abaixo da maiúscula; top = topo da maiúscula − 20 (posto pelo JS). Avatares na frente. */
.fr__bloco{position:absolute;inset:0}
.fr__l{--cap:112;--lh:157;color:var(--c-ink);padding:calc(20 * var(--u)) 0}
/* letter-spacing calibrado por linha (Passo 5): a Mona Sans condensada, no .d padrão (-.045em), fica mais
   apertada que a grotesca do vídeo nesse tamanho (cap 112); cada linha pede um afrouxo diferente para a
   caixa de tinta bater dentro de ±3 px (conferir.py H q975). */
.fr__l1{letter-spacing:-.036em}
.fr__l2{letter-spacing:-.022em}
.fr__l3{letter-spacing:-.034em}
/* avatar: quadrado de 206 com raio 26 (H §5). O recorte também segura a etiqueta, que sobe de dentro dele. */
.fr__av{position:absolute;z-index:2;width:calc(206 * var(--u));height:calc(206 * var(--u));border-radius:calc(26 * var(--u));
  overflow:hidden;isolation:isolate}
.fr__av img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
/* filete interno de 1 px: a borda clara da foto (céu, piso) não se dissolve no branco da página */
.fr__av::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(12,12,12,.08);pointer-events:none}
/* etiqueta: o lugar e o tempo, em pílula branca no pé do avatar (vocabulário das pílulas dos números) */
.fr__tag{position:absolute;left:calc(10 * var(--u));bottom:calc(10 * var(--u));z-index:1;height:calc(26 * var(--u));
  padding:0 calc(11 * var(--u)) 0 calc(9 * var(--u));border-radius:calc(13 * var(--u));background:#fff;
  display:flex;align-items:center;gap:calc(7 * var(--u));will-change:transform}
.fr__tag span{--cap:9;color:var(--c-ink);letter-spacing:.01em}
.fr__q{display:block;width:calc(7 * var(--u));height:calc(7 * var(--u));background:var(--c-limao);
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
/* hover discreto: a foto chega mais perto e o quadrado vira o corte de 45° da marca */
.fr__av:hover img{transform:scale(1.07)}
.fr__av:hover .fr__q{transform:rotate(45deg)}
/* a rota que liga os três tempos: linha fina verde (o verde fica no grafismo), por trás das letras e dos avatares */
.fr__rota{position:absolute;left:0;top:0;width:100%;height:calc(1125.2 * var(--u));overflow:visible;pointer-events:none}
.fr__rota path{fill:none;stroke:var(--c-limao);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.fr__av img,.fr__q{transition:none}}