/* The eMatrix + AI lockup.
   Shared by every page that shows the wordmark, so the badge cannot drift between them.
   Include AFTER the page's own stylesheet.

   ONE number drives the whole lockup: --logo-h, the wordmark's rendered height. Each page sets
   it on .brand-lockup (including inside its media queries) and everything else — the image, the
   badge's type size, its padding, radius, border and the gap — derives from it. That is the
   point: the app draws this wordmark at seven different sizes (58 / 52 / 48 / 44 / 38 / 34 /
   30px), and a badge with hard-coded pixels would be right at one of them and wrong at six.

   The badge is CSS, not part of the PNG. The wordmark is a 379x135 raster with no vector
   version, so compositing the badge in would be soft at the larger sizes and would freeze the
   gold as pixels rather than a token. */

.brand-lockup {
  display: inline-flex;
  align-items: flex-start;
  gap: calc(var(--logo-h, 48px) * .065);
}

/* Beats the pages' own `.brand-logo { height: … }` on specificity (0,1,1 vs 0,1,0) regardless of
   link order, so --logo-h is the single source of truth for the size. */
.brand-lockup img {
  height: var(--logo-h, 48px);
  width: auto;
  display: block;
}

.brand-ai {
  flex: none;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--gold, #e4b24a);
  border: max(1px, .085em) solid var(--gold, #e4b24a);
  border-radius: .5em;
  padding: .24em .46em;

  /* Scales with the wordmark, but stops shrinking at 8px. Ported literally from the design mock
     the badge is ~20% of the logo's height, which on the 30px in-call top bar would render at
     6px — a smudge. The floor keeps it legible there; the cap keeps it from ballooning if the
     lockup is ever used large. */
  font-size: clamp(8px, calc(var(--logo-h, 48px) * .20), 26px);

  /* Sits just below the wordmark's top edge, as in the mock, rather than centred against it. */
  margin-top: calc(var(--logo-h, 48px) * .06);
}