/* HCluster — tipografia, ritmo e elementos.
   A PALETA NÃO MORA AQUI: cada tema é um arquivo em assets/css/temas/, que
   redefine só as variáveis de cor. A ordem de carga está em includes/head.php. */

/* Três vozes, três famílias, todas OFL 1.1 e servidas daqui — nenhuma em CDN.
   Os arquivos são gerados por ferramentas/gerar-fontes.py, com os eixos
   variáveis limitados ao que o CSS abaixo realmente pede: sem isso são 559 KB,
   com isso são 169 KB. Licenças em assets/fonts/OFL-*.txt. */

@font-face{
  font-family:'Archivo'; font-style:normal; font-display:swap;
  font-weight:400 650; font-stretch:88% 112%;
  src:url('../fonts/archivo.woff2') format('woff2-variations');
}
@font-face{
  font-family:'Source Serif'; font-style:normal; font-display:swap;
  font-weight:400 600;
  src:url('../fonts/source-serif.woff2') format('woff2-variations');
}
@font-face{
  font-family:'Source Serif'; font-style:italic; font-display:swap;
  font-weight:400;
  src:url('../fonts/source-serif-italico.woff2') format('woff2');
}
@font-face{
  font-family:'Martian Mono'; font-style:normal; font-display:swap;
  font-weight:500 600; font-stretch:100% 112%;
  src:url('../fonts/martian-mono.woff2') format('woff2-variations');
}

:root{
  /* Archivo tem eixo de largura, então título condensado e rótulo largo saem do
     MESMO arquivo. É o que devolve as três vozes sem baixar três famílias. */
  --titulo: 'Archivo', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  --texto:  'Source Serif', Georgia, 'Times New Roman', serif;
  --mono:   'Martian Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Ritmo em múltiplos de 8, valores fixos por faixa. clamp() com três casas
     decimais é, ele próprio, marca de página gerada. */
  --v-1: 8px;  --v-2: 16px; --v-3: 24px; --v-4: 40px;
  --v-5: 64px; --v-6: 96px;

  /* Três durações e duas curvas dão conta do site inteiro.
     A curva de entrada é desacelerada de verdade — `ease` é o default do
     navegador, e default é o que estamos evitando. */
  --t-estado:  120ms;
  --t-entrada: 320ms;
  --t-dado:    4200ms;
  --curva-estado:  cubic-bezier(.4,.14,.3,1);
  --curva-entrada: cubic-bezier(.2,0,.38,1);

  --leitura: 66ch;
  --faixa: 1140px;
  --canaleta: 7.5rem;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font:400 1.125rem/1.62 var(--texto);
  font-feature-settings:'kern' 1;
  text-rendering:optimizeLegibility;
}

/* Título em Archivo condensado. Sem text-wrap:balance e sem entreletra negativa
   exagerada: os dois são ajuste de manchete, e aqui o gênero é documento. */
h1,h2,h3,h4{
  font-family:var(--titulo);
  line-height:1.18;
  margin:0 0 var(--v-2);
}

h1{font-size:2.75rem; font-weight:650; font-stretch:88%; letter-spacing:-.015em}
h2{font-size:1.6875rem; font-weight:600; font-stretch:92%}
h3{font-size:1.1875rem; font-weight:600; font-stretch:100%}
h4{font-size:1rem; font-weight:600; font-stretch:100%}

p{margin:0 0 var(--v-3); max-width:var(--leitura)}

a{
  color:var(--azul);
  text-underline-offset:3px;
  transition:color var(--t-estado) var(--curva-estado);
}
a:hover{color:var(--azul-claro)}

:focus-visible{outline:2px solid var(--azul); outline-offset:2px}

strong{font-weight:600}
em{font-style:italic}

ul,ol{margin:0 0 var(--v-3); padding-left:1.25rem; max-width:var(--leitura)}
li{margin-bottom:var(--v-1)}

hr{border:0; border-top:1px solid var(--risco); margin:var(--v-4) 0}

img,svg{max-width:100%}

/* Rótulo, número e anotação: Martian Mono, largura ampliada.
   Caixa alta aqui é convenção de documento técnico — nomeia um campo. O que
   denuncia landing page é caixa alta usada como subtítulo de seção, e disso o
   site não tem. */
.rotulo,.identificacao dt,.tabela caption,.rodape-tit,.rodape-dados dt,
.contato-lado dt,.consentimento-titulo{
  font-family:var(--mono);
  font-weight:600;
  font-stretch:112%;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tinta-3);
}

.numero{
  font-family:var(--mono);
  font-weight:500;
  font-size:.9375rem;
  color:var(--tinta-3);
  font-variant-numeric:tabular-nums;
}

/* Etiqueta acima do H1. */
.sobrenome{
  font-family:var(--mono);
  font-weight:600; font-stretch:112%;
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--azul);
  margin-bottom:var(--v-2);
  max-width:none;
}

.linha-fina{
  font-size:1.25rem;
  line-height:1.5;
  color:var(--tinta-2);
}

.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--chapa); color:var(--chapa-txt);
  padding:var(--v-2); border:1px solid var(--azul);
}
.pular:focus{left:0}