.mf { overflow: hidden; min-height: 100vh; display: flex; align-items: center; color: #111112; }
.mf-caixa { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * 4); }
.mf-texto {
  max-width: calc(var(--u) * 80);
  font-size: clamp(1.625rem, calc(var(--u) * 4), 4rem);
  line-height: 1.08; letter-spacing: -0.035em; font-weight: 600;
  text-wrap: balance; color: #111112;
}
.mf-texto .serif { letter-spacing: -0.01em; }
/* revelação em blocos: cada linha só do tamanho da frase, centralizada; bloco escuro por cima */
.mf-linha { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; }
.mf-tampa {
  position: absolute; left: -0.05em; right: -0.05em; top: 0.06em; bottom: 0.02em;
  background: #111112; pointer-events: none; will-change: transform;
}
/* altura fixa = logo parada (3.5rem de largura na proporção 525x360); a logo em vetor fica solta no centro */
.mf-assinatura { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 2.4rem; }
.mf-marca { position: relative; z-index: 2; width: 3.5rem; background: #111112; will-change: transform; }
/* versão em vetor (o JS troca a máscara por ela para poder engordar o contorno) */
.mf-marca-svg { display: block; height: auto; aspect-ratio: 525 / 360; background: none; overflow: visible; max-width: none; will-change: transform; /* camada no tamanho grande = sempre nítida */ }
html.tema-instantaneo body { transition: none !important; }
/* passagem lima -> preto presa à rolagem (--passagem 0..1, setada pelo manifesto.js) */
html.passando body {
  background: color-mix(in srgb, #111112 calc(var(--passagem) * 100%), #d2ff00) !important;
  transition: none !important;
}
@media (max-width: 520px) { .mf-texto { font-size: calc(var(--u) * 3.1); line-height: 1.1; } }