/* Brand assets and sizing follow Brand Guidelines v1.0 in the source pack.
   Master artwork is used verbatim; no retyping, recoloring, or effects. */
:root {
  --ml-bg: #05070b;
  --ml-ink: #e9edf2;
  --ml-muted: #8792a2;
  --ml-teal: #17e3c4;
  --ml-clear-space: clamp(6px, 0.5em, 12px);
  --ml-logo-nav-height: 34px;
  --ml-logo-mobile-height: 30px;
}

.ml-wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: inherit;
  text-decoration: none;
  line-height: 0;
  white-space: nowrap;
  padding: var(--ml-clear-space);
  margin: calc(-1 * var(--ml-clear-space));
}

.ml-wordmark__logo {
  display: block;
  width: auto;
  height: var(--ml-logo-nav-height);
  max-width: min(100%, 200px);
  object-fit: contain;
}

.ml-wordmark:focus-visible {
  outline: 2px solid var(--ml-teal);
  outline-offset: 5px;
}

.ml-wordmark--large .ml-wordmark__logo {
  height: clamp(56px, 8vw, 88px);
  max-width: min(100%, 300px);
}

.ml-wordmark--compact .ml-wordmark__logo {
  height: var(--ml-logo-mobile-height);
  max-width: min(100%, 168px);
}

@media (max-width: 480px) {
  .ml-wordmark__logo { height: var(--ml-logo-mobile-height); max-width: 168px; }
  .ml-wordmark--large .ml-wordmark__logo { height: clamp(48px, 12vw, 68px); }
}