/* P0-1 — a marca no ar. O caminho subia dois níveis e saía da raiz servida (404); sem format() o browser baixa às cegas, e sem o descritor de eixo o peso 250 é clampado para 400 e sintetizado. O display fino é a tipografia da Hostic. */ @font-face{font-family:o;src:url('outfit-var-ptbr.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap} /* Fallback com métricas casadas: o swap troca a fonte sem mover a linha. */ @font-face{font-family:o-fb;src:local('Arial'),local('Liberation Sans'),local('Helvetica'),local('DejaVu Sans');size-adjust:93.5%;ascent-override:100%;descent-override:26%;line-gap-override:0%} /* ───────────────────────────────────────────────────────────────────────── REV20 · ITEM 2 DO FOUNDER — "variação demasiada de tamanhos e tipografias". Ele está certo, e o número medido antes desta folha era: 31 declarações de `font-size` com 22 VALORES DISTINTOS espalhados por três arquivos. O pior não era a quantidade, era a redundância invisível: existiam TRÊS rampas de corpo quase idênticas (17→20 a 1.25vw, 1.35vw e 1.5vw) e QUATRO rampas médias que em 1440px caíam todas na mesma faixa de 34–42px — .lead 34,5 · .faq summary 36 · .events time 37,4 · .human h2 41,8. Quatro tamanhos que o olho lê como UM, mas nenhum igual ao outro. E o mesmo botão `.cta` era 11px na página, 13px no hero, 12px num breakpoint e 9px em outro: quatro tamanhos para UM componente. A escala abaixo é a fonte única. Cada degrau existe porque tem um PAPEL, não porque um valor sobrou — é esse critério que impede a rampa de voltar a inchar. 22 valores → 10 degraus. TIPOGRAFIAS: uma só, a Outfit (`o`). `o-fb` NÃO é uma segunda tipografia — é a mesma família emulada por Arial/Liberation com métricas casadas, e só aparece nos milissegundos antes do woff2 chegar. Medido: 1 typeface, teto de 2 cumprido com folga de um. Pesos, medidos no render e declarados como são — quatro, cada um com papel: 250 display · 400 corpo · 500 rótulo/CTA · 700 ênfase (o `` da copy, que vem do user-agent). O peso 280, que existia só na regra morta `.steps h3`, saiu junto com ela. E o degrau que faltava: medido no DOM, 25 elementos de texto renderizavam a 16px — o padrão do browser, valor que NÃO existia na escala. Era a maior violação da "escala única": justamente o corpo de leitura da página (as respostas do FAQ, os quatro eventos, os parágrafos da .beta e da .noise) estava fora dela. O `body` passa a assumir `--fs-body`. ───────────────────────────────────────────────────────────────────────── */ :root{ --fs-d1:clamp(44px,5.4vw,80px); /* D1 · display dominante: h1 do hero, ênfase-manifesto da .human */ --fs-d2:clamp(34px,4.4vw,72px); /* D2 · título de seção: todo h2 */ --fs-d3:clamp(20px,2.4vw,34px); /* D3 · sub-display em prosa: .lead, .faq summary, .human h2, .step */ /* D3n · numérico: as horas da linha do dia. Converge com o D3 em desktop (34px nos dois) porque 37,4 contra 34 repetia exatamente a vizinhança de 3px que este bloco existe para eliminar. O piso continua alto: em 390 as horas valem 30px contra 20 do D3, que é o que faz a linha do dia ler como cronologia e não como mais um parágrafo. */ --fs-num:clamp(30px,2.4vw,34px); --fs-lead:clamp(17px,1.5vw,22px); /* apoio do display: parágrafo do hero, fecho da .close */ --fs-body:clamp(17px,1.25vw,20px);/* corpo de leitura e h3 */ /* UMA rampa para todo botão/link de ação, em qualquer seção. O piso é 12px e NÃO 9px de propósito: a rev19 já tinha subido o CTA do hero de 9 para 12 em 390 porque "9px é menor que o corpo e é parte do não parece clicável". Unificar o componente não pode desfazer uma correção que já foi paga. */ --fs-cta:clamp(12px,.95vw,13px); --fs-label:11px; /* rótulo estático: label de formulário, nome de modo */ --fs-note:14px; /* frase curta de estado — precisa ser lida, não é rótulo */ --fs-eyebrow:9px; /* sobrancelha e tag, sempre com letter-spacing largo */ } *{box-sizing:border-box}html{background:#070706;color:#eee9df;font-family:o,o-fb,Arial;scroll-behavior:smooth;scroll-padding-top:80px}#conteudo,#controle,#beta{scroll-margin-top:80px} /* HOS-800 — os alvos de skip link e de âncora ganharam `tabindex="-1"` no markup só para que o FOCO acompanhe a rolagem. Sem isso o `#conteudo` movia o foco (já tinha o atributo) e o `#beta` não: o segundo skip link rolava a página e deixava o foco no `body`, então o leitor de tela nunca anunciava o destino — dois skip links com comportamentos diferentes. Eles não são controles e não entram na ordem de Tab, logo o anel do UA aqui não orienta ninguém: desenha uma moldura em volta da seção INTEIRA (medido em 0,2222% da viewport em 1440 e 0,2370% em 390). O anel sai, o movimento do foco fica. Os controles de verdade mantêm os seus anéis intactos. */ #conteudo:focus,#controle:focus,#beta:focus{outline:none}body{margin:0;font-size:var(--fs-body)}a{color:inherit}header{position:fixed;z-index:9;inset:0 0 auto;height:64px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;background:#070706bb;border-bottom:1px solid #ffffff18;backdrop-filter:blur(16px);font-size:var(--fs-eyebrow);letter-spacing:.18em}header a{text-decoration:none} /* P2-3 — o header era #070706bb + blur SEMPRE, inclusive por cima das cinco seções claras (.noise, .agents, .human, .faq e o topo da .agents). Sobre areia clara aquilo virava uma tarja cinza suja, e o `blur(16px)` borrava o texto da seção por baixo em vez de separar. Agora ele tem DOIS estados e o app.js troca conforme a seção que passa sob a faixa de 64px. Sem JS o estado escuro continua sendo o padrão — legível, só não ideal. */ header{transition:background .25s ease,color .25s ease,border-color .25s ease} header.claro{background:#eee9dfd9;color:#160b07;border-bottom:1px solid #16070726} @media(prefers-reduced-motion:reduce){header{transition:none}}/* P0-3 — `height:100svh` + `overflow:hidden` cortava o próprio conteúdo: a 1440x760 sobravam 286px fora da caixa e o CTA ficava em top:796px dentro de 760px, INALCANÇÁVEL por rolagem. Agora a altura é piso, não teto: o hero ocupa a tela inteira quando cabe e cresce quando não cabe. O padding vertical ganha teto em px para não empurrar o CTA para fora em telas baixas. */ .hero{min-height:max(100svh,700px);height:auto;position:relative;overflow:hidden;padding:clamp(88px,14vh,150px) 4vw;background:radial-gradient(circle at 72% 50%,#36160e,#070706 47%)}.copy{position:relative;z-index:3;max-width:680px}.copy small,section>small,.sticky small{font-size:var(--fs-eyebrow);letter-spacing:.2em;color:#d87859}/* P1-4 — escala tipográfica de TRÊS degraus. Antes `h1` e `h2` compartilhavam a mesma clamp: o corpo da página inteira falava no volume do hero e nada cedia. Agora D1 (h1) > D2 (h2) > D3 (h3) > corpo (16px), em toda a faixa de viewport: 7vw > 4.4vw garante que D2 nunca alcança D1 no meio da rampa. */ .copy h1,h2,h3{line-height:.87;letter-spacing:-.065em;font-weight:250} .copy h1{font-size:var(--fs-d1)} h2{font-size:var(--fs-d2)} h3{font-size:var(--fs-body);line-height:1.25;letter-spacing:-.02em;font-weight:400} .copy h1{margin:28px 0;text-wrap:balance}.copy em,h2 em{font-style:normal;color:#d36c4b}.copy p{max-width:430px;color:#aaa19a;line-height:1.6}.hero canvas{position:absolute;inset:0;width:100%;height:100%}/* P0-2 — .core e a posição dos rótulos moraram aqui, em copy-rev16.css e em core-fix.css ao mesmo tempo, resolvidos por !important e por ordem de injeção. Agora quem governa é só core-fix.css, carregado no . */.tag{position:absolute;font-style:normal;font-size:var(--fs-eyebrow);letter-spacing:.16em}/* P2-1 — `.noise` e `.agents` eram #ded8ce e #eee9df: 1,17:1 de separação, o olho lia UM campo claro de duas seções. #c9c0b3 leva o par a 1,49:1 sem sair da família de areia. O padding entra em TRÊS níveis, não num só, para a página parar de bater no mesmo compasso: 12vh argumento · 16vh utilidade · 22vh manifesto. */ .noise{padding:12vh 4vw;background:#c9c0b3;color:#111}.noise h2{max-width:1180px}/* P1-2 — dois pares por imóvel, e o `