/* ============================================================
   Cruzz — brand lockup.

   The logo is a single monochrome SVG that paints itself with
   currentColor. An <img> can't see currentColor (it renders inside its
   own document, so the fill collapses to black), so the wordmark is
   painted as a CSS mask over the current text colour instead: one source
   file, correct colour in light and dark, no per-theme duplicates.
   ============================================================ */

.brand-logo,
.brand-logo-mark {
  display: inline-block;
  /* the brand honey (#f59e0b) is the logo's colour in every theme — set it here
     so currentColor resolves to it wherever the lockup is dropped */
  color: var(--honey-500, #f59e0b);
  background-color: currentColor;
  flex-shrink: 0;
}

/* full wordmark — 264.5 x 88 in the source file */
.brand-logo {
  height: 26px;
  aspect-ratio: 264.5 / 88;
  -webkit-mask: url("/static/images/logo.svg") center / contain no-repeat;
  mask: url("/static/images/logo.svg") center / contain no-repeat;
}

/* just the C — for the 76px icon rail and other tight spots */
.brand-logo-mark {
  height: 30px;
  aspect-ratio: 60 / 88;
  -webkit-mask: url("/static/images/logo-mark.svg") center / contain no-repeat;
  mask: url("/static/images/logo-mark.svg") center / contain no-repeat;
}

/* the wordmark carries the name, so a lockup is just the logo + optional tag */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text-main);
}
.brand-lockup:hover { text-decoration: none; }