.brand__logo {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: cover;
}

.brand__identity {
  display: block;
}

.brand--auth {
  display: block;
  width: fit-content;
}

/* Crop the full reverse lockup in CSS (top calligraphic mark only) so we
   never re-encode the asset. background-size width-fills; the shorter box
   clips the second typography. Absolute width — not % of fit-content. */
.auth-brand__logo {
  display: block;
  width: clamp(168px, 22vw, 228px);
  aspect-ratio: 504 / 328;
  background: url("maghal-logo-full-reverse-cobalt.webp") center top / 100% auto no-repeat;
}

html[data-theme="olive"] .auth-brand__logo {
  background-image: url("maghal-logo-full-reverse-olive.webp");
}

html[data-theme="wood"] .auth-brand__logo {
  background-image: url("maghal-logo-full-reverse-wood.webp");
}

html[data-theme="slate"] .auth-brand__logo {
  background-image: url("maghal-logo-full-reverse-slate.webp");
}

@media (max-width: 980px) {
  .auth-brand__logo {
    width: clamp(140px, 34vw, 188px);
  }
}

@media (max-width: 760px) {
  .brand__logo {
    width: 30px;
    height: 30px;
  }

  .auth-brand__logo {
    width: clamp(124px, 46vw, 164px);
  }
}