@layer components {
  /* Wordmark */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 560;
    letter-spacing: -0.02em;
    text-decoration: none;
  }

  .brand__mark {
    inline-size: 1.6em;
    block-size: 1.6em;
    color: var(--color-accent);
  }
}

@layer components {
  .brand__heart {
    fill: var(--color-on-accent);
  }
}