@layer components {
  .brand {
    display: flex;
    align-items: center;
  }

  /*
   * Die Marke ist nur sichtbar, wenn das große Logo aus dem Blick gescrollt ist.
   * Die Breite wird mitanimiert, damit der Schriftzug beim Einfliegen aufrückt
   * statt zu springen.
   */
  .brand__mark {
    width: 0;
    height: 1.9rem;
    color: var(--color-ink);
    opacity: 0;
    transform: translateX(-0.5rem) scale(0.7);
    transform-origin: left center;
    transition: width var(--speed) var(--ease), opacity var(--speed) var(--ease),
      transform var(--speed) var(--ease), margin-inline-end var(--speed) var(--ease);
  }

  .site-header.is-compact .brand__mark {
    width: 3.2rem;
    margin-inline-end: var(--space-xs);
    opacity: 1;
    transform: none;
  }
}