/* =============================================================================
   Seu Imaginário — primitivas de marca
   Componentes que aparecem em todas as superfícies (loja, páginas claras, painel).
   Depende de brand/tokens.css.

   A assinatura do cabeçalho e do rodapé é **imagem**: o lockup completo da arte
   oficial (carta com lua e cristal + o nome "Seu Imaginário") entra como um só
   arquivo. O nome nunca é redigitado com outra fonte — é o que garante que o
   cabeçalho seja idêntico à arte. Os arquivos vêm de source/build-assets.py.

   Proporção do lockup: 2075 x 651 (3,1874:1). As alturas abaixo são px CSS e
   cada uma tem 1x/2x/3x no srcset, em múltiplos inteiros para o navegador não
   reescalar a arte. Ao mudar uma altura aqui, mude o LOCKUP_SIZES do script.
   ============================================================================= */

.brand {
  display: inline-block;
  flex-shrink: 0;
  text-decoration: none;
  /* A marca não é um link comum: herda a cor do contexto em vez de assumir a
     cor de link do tema. */
  color: inherit;
}

.brand img { display: block; height: 52px; width: auto; }

/* Rodapé e superfícies secundárias: mesma marca, um passo menor. */
.brand--small img { height: 44px; }

@media (max-width: 620px) {
  .brand img { height: 40px; }
  .brand--small img { height: 40px; }
}