/*
 * O logotipo da Ukari na tela.
 *
 * O SÍMBOLO
 * Saturno chapado: um corpo e duas faixas de anel, separadas pela divisão de
 * Cassini. `Ukari` vem de *yukari* (縁) — o laço, o vínculo entre duas partes —,
 * e o anel planetário diz isso sem virar joia.
 *
 * O DESENHO ANTERIOR ERAM DOIS ELOS ENTRELAÇADOS, e o problema dele não era de
 * execução: dois círculos do mesmo tamanho presos um no outro leem como
 * ALIANÇA. Nenhum ajuste de espessura consertava a associação.
 *
 * O que dá volume é a faixa passar ATRÁS do corpo na metade de cima e NA FRENTE
 * na metade de baixo. Sem essa alternância, é um risco sobre um disco — e é a
 * primeira coisa a conferir se o símbolo parecer chapado demais.
 *
 * O halo é a cor do FUNDO, não uma terceira cor: é o vão entre o corpo e a
 * faixa que passa na frente dele. Vem de `--ukari-halo`, definido em
 * `tokens.css` como `--st-bg`, e é o que faz o desenho funcionar nos dois temas
 * sem um segundo arquivo. Se o halo herdar a cor errada, o anel e o planeta se
 * fundem numa mancha — é o primeiro lugar a olhar quando o símbolo parece sujo.
 *
 * A FONTE, HOSPEDADA AQUI
 * O `<link>` para fonts.googleapis.com exigiria dois domínios de terceiros na
 * CSP (`style-src` e `font-src`), mandaria o IP de cada visitante para o Google
 * antes de qualquer consentimento — o que um tribunal alemão já considerou, em
 * 2022, violação do GDPR — e contradiria por escrito o que declaramos ao
 * Search Console sobre não rodar código de terceiros aqui. Uma empresa que
 * vende privacidade não pode entregar o IP do visitante para desenhar o próprio
 * nome. A Inter Tight é OFL: hospedar é o uso pretendido.
 */

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  /* Arquivo variável: um download cobre de 400 a 700 e evita a segunda e a
     terceira requisição que pesos separados custariam. */
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  /* Latino apenas. O site fala inglês, português e espanhol; o resto do Unicode
     seria peso que nenhum visitante veria. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

/* --- O lockup: símbolo + nome ------------------------------------------- */

.kv-lockup, .st-lockup {
  display: inline-flex;
  align-items: center;
  /* Símbolo e nome são dois objetos, e o intervalo é o que diz isso. Abaixo de
     .3em o desenho lê como uma letra inicial do nome, e não como um logotipo
     ao lado dele. */
  gap: .34em;
  font-size: 1.15rem;
  text-decoration: none;
}

/* Saturno é DEITADO — 53 por 30 no `viewBox` justo, quase dois para um. Medido
   pela altura, como um símbolo quadrado, ele encolheria ao lado do texto.

   Por isso a largura é que manda: 1.5em de largura põem o desenho em ~0.85em de
   altura, contra a altura de caixa alta de ~0.72em da Inter Tight. É onde os
   dois pesam igual ao olho.

   `height: auto` e nenhuma altura fixa: a proporção sai do `viewBox`, que é
   emitido por `tools/gerar_marca.py` junto com o próprio desenho. Fixar a
   altura aqui seria o segundo lugar guardando a mesma proporção, e é onde os
   dois divergem no próximo ajuste. */
.st-mark {
  display: block;
  flex: none;
  width: 1.5em;
  height: auto;
  color: var(--st-ink, #0f0f11);
}

.kv-word, .st-word {
  font-family: var(--st-font-display, "Inter Tight", system-ui, sans-serif);
  font-weight: 600;
  /* Cinco letras curtas, com uma ascendente (`k`) e nenhuma descendente:
     apertado demais vira mancha, largo demais desmancha. */
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--st-ink, #0f0f11);
}

/* Sobre superfície de marca (herói escuro, rodapé invertido) o desenho e o nome
   viram brancos, e o halo passa a ser a cor daquela superfície — não a do tema.
   Sem isto, o vão entre os elos desenha um risco claro no meio de um fundo
   preto. */
.st-on-dark .st-mark, .st-on-dark .st-word { color: #ffffff; }
.st-on-dark { --ukari-halo: #0d0d0f; }