/* ABAIQ brand lockup: favicon + wordmark + trademark.
   One markup shape for every page, so the brand never drifts.

   <a class="brand-lockup" style="--brand-h:32px" href="index.html">
     <img class="brand-lockup-mark" src="assets/favicon.png" alt="">
     <img class="brand-lockup-word" src="assets/logo-title.png" alt="ABAIQ">
     <span class="brand-lockup-tm">&trade;</span>
   </a>

   --brand-h is the wordmark height; the mark, the gap and the trademark all
   scale from it, matching the ratios used in the home page navigation.
   --brand-mb is the space below the lockup (the pages that stack a heading
   under it used to put that margin on the image itself). */

.brand-lockup {
  --brand-h: 32px;
  display: inline-flex !important;
  align-items: center;
  gap: calc(var(--brand-h) * 0.156);
  margin-bottom: var(--brand-mb, 0);
  line-height: 1;
  vertical-align: middle;
  text-decoration: none;
}

.brand-lockup > img.brand-lockup-word {
  height: var(--brand-h) !important;
  width: auto !important;
  margin: 0 !important;
  display: block !important;
  border-radius: 0 !important;
}

.brand-lockup > img.brand-lockup-mark {
  height: calc(var(--brand-h) * 0.875) !important;
  width: calc(var(--brand-h) * 0.875) !important;
  margin: 0 !important;
  display: block !important;
  border-radius: 0 !important;
  flex: none;
}

.brand-lockup > .brand-lockup-tm {
  align-self: flex-start;
  margin-left: calc(var(--brand-h) * -0.281);
  margin-top: calc(var(--brand-h) * 0.062);
  font-size: calc(var(--brand-h) * 0.375);
  font-weight: 700;
  line-height: 1;
  color: #a78bfa;
}