/* Keep the original coloured mark; recolour only its transparent ELM lettering. */
.elm-brand-logo {
  --elm-logo-ink: #000;
  position: relative;
  display: inline-block;
  width: 36px;
  height: auto;
  aspect-ratio: 623 / 554;
  flex: 0 0 auto;
  background: transparent;
}
.elm-brand-logo .elm-brand-logo__mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.elm-brand-logo__lettering {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--elm-logo-ink);
  clip-path: inset(74% 0 0 0);
  -webkit-mask: url('../root/logo.png') center / contain no-repeat;
  mask: url('../root/logo.png') center / contain no-repeat;
}
@supports ((mask-image: url('../root/logo.png')) or (-webkit-mask-image: url('../root/logo.png'))) {
  .elm-brand-logo .elm-brand-logo__mark { clip-path: inset(0 0 26% 0); }
  .elm-brand-logo__lettering { display: block; }
}
.site-body .brand-mark {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.guest-body .elm-brand-logo { --elm-logo-ink: #fff; }
/* Public browsing has a light header even when using the legacy guest base. */
.guest-public__brand .elm-brand-logo { --elm-logo-ink: #000; }
[data-theme='dark'] .elm-brand-logo { --elm-logo-ink: #fff; }
[data-theme='light'] .elm-brand-logo { --elm-logo-ink: #000; }