.brand {
  display: inline-grid;
  grid-template-columns: var(--brand-logo-size, 2.25rem) minmax(0, 1fr);
  gap: 0;
}
.brand__mark {
  display: block;
  width: var(--brand-logo-size, 2.25rem);
  height: var(--brand-logo-size, 2.25rem);
}
.brand__mark img {
  display: block;
  width: var(--brand-logo-size, 2.25rem);
  height: var(--brand-logo-size, 2.25rem);
  max-width: none;
  object-fit: contain;
}
.brand__name { min-width: 0; overflow: hidden; }
.brand__name-text {
  display: block;
  padding-inline-start: var(--brand-logo-gap, .6rem);
  white-space: nowrap;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .brand {
    transition: grid-template-columns 640ms cubic-bezier(.22, 1, .36, 1) 160ms;
  }
  .brand__name-text {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 240ms ease-out, transform 640ms cubic-bezier(.22, 1, .36, 1);
  }

  /* Collapse the text and its gap together without measuring fonts or moving the globe. */
  .brand--quiet { grid-template-columns: var(--brand-logo-size, 2.25rem) minmax(0, 0fr); }
  .brand--quiet .brand__name-text { opacity: 0; transform: translateX(-4px); }
  .brand:is(:hover, :focus-visible) {
    grid-template-columns: var(--brand-logo-size, 2.25rem) minmax(0, 1fr);
    transition-delay: 0ms;
  }
  .brand:is(:hover, :focus-visible) .brand__name-text {
    opacity: 1;
    transform: translateX(0);
    transition-duration: 420ms, 640ms;
    transition-delay: 120ms, 0ms;
  }
}

@media print {
  .brand {
    grid-template-columns: var(--brand-logo-size, 2.25rem) minmax(0, 1fr);
    transition: none;
  }
  .brand .brand__name-text { opacity: 1; transform: none; transition: none; }
}