/* ============================================================
   mb-brand.css — one Mistific wordmark, everywhere
   ============================================================

   The oracle carousel drew the wordmark in Cinzel 700 — Roman capitals, wide
   .34em tracking, a four-stop shimmer and a soft violet glow. Every other
   screen drew it in Space Grotesk 500 with a flat vertical gradient: a
   different typeface, not a different size. Two wordmarks for one brand, and
   the geometric sans version is the one users met on 27 of 30 screens.

   This adopts the carousel's treatment as the single wordmark. Deliberately
   NOT set here: `font-size`. Each screen sizes its own header (6.4cqw in the
   compact top bar, clamp(24px,6vw,38px) on the carousel hero), and those are
   correct for their contexts — only the identity was inconsistent.

   Tracking scales with the type rather than sitting at a flat .34em, because
   at compact header sizes .34em pushed the wordmark into the moon pill.

   Loaded LAST in <head> on purpose: each screen defines its own `.brand` rule
   inside its own <style>, so this has to come after to win the cascade at
   equal specificity.
   ============================================================ */

/* ── 2026-08-21: a marca virou ARTE, não mais tipografia ────────────────────

   Antes daqui a marca era texto (Cinzel 700 + gradiente recortado no texto +
   shimmer). O logo novo tem letra própria, desenhada — reproduzi-la com fonte
   web seria uma imitação. Então `.brand` passa a exibir o PNG/WEBP da palavra.

   Feito só no CSS de propósito: as 34 telas continuam com
   `<div class="brand">Mistific</div>` no HTML e nada precisou ser editado nelas.
   Isso também mantém a palavra no DOM para leitor de tela e para busca — ela
   só sai de vista (`text-indent`), em vez de sumir do documento.

   O TAMANHO continua vindo de cada tela: a altura é `em`, então todo
   `font-size` que já existia (5.6cqw na barra, clamp(...) no herói) segue
   mandando. `aspect-ratio` deriva a largura da arte (720×110), o que evita
   esticar a palavra.
   ─────────────────────────────────────────────────────────────────────────── */
.brand {
  display: inline-block;
  height: 1.02em;                 /* casa com a altura de caixa-alta do texto antigo */
  aspect-ratio: 720 / 110;        /* dimensões reais de brand-wordmark.webp */
  background: url('/img/brand-wordmark.webp') center / contain no-repeat;
  /* a palavra continua no DOM, fora de vista */
  text-indent: -200vw;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
  /* o glow violeta era do tratamento antigo e continua servindo à arte nova */
  filter: drop-shadow(0 0 14px rgba(167, 139, 250, .38));
}

/* ⚠️ O `/img/...` acima resolve nos DOIS endereços onde as telas são servidas
   (`/mistific-X.html` e `/redesign/mistific-X.html`) porque o middleware da
   raiz libera `^/(kin|icons|img)/[a-z0-9-]+\.(jpg|png|webp)$` — `brand-wordmark`
   casa. Qualquer nome com maiúscula, ponto extra ou subpasta cairia num 404
   SILENCIOSO (o CSS não avisa: a marca só não aparece). */

/* O herói do carrossel pedia mais entreletra quando isto era texto. Com arte
   não há entreletra a ajustar — o que muda é só o tamanho, e quem o define é a
   própria tela. Mantido como âncora caso alguma tela ainda mire estes
   seletores. */
.stage > .brand,
.hero .brand,
.vbrand {
  height: 1.06em;
}

/* `[data-mb-compact-brand] .brand{font-size:15px !important}` used to live
   here. It bought off a collision on the seven consulta screens, where the row
   was back | brand | moon | coins | bell | avatar and left the wordmark ~80px
   — Cinzel needs 88px even at zero tracking, so the mark rendered clipped to
   "MISTIFI". The step-down did not actually clear it either: measured on a
   390px viewport the moon pill still overlapped the final C.

   mb-topbar.css fixes the cause instead. The moon left the bar, and a screen
   with a back button no longer draws the wordmark at all — its name is the
   `.chead` H1 directly below. The seven consulta screens keep the attribute so
   nothing has to be un-stamped, but no rule reads it any more, and the
   !important that was fighting each page's own <style> is gone with it. */
