@layer components {
  .wordmark {
    font-family: var(--font-family-display);
    line-height: 0.9;
    letter-spacing: 0.02em;
    text-transform: uppercase;

    color: transparent;
    background-color: var(--color-cream);
    background-image: var(--texture-grain);
    background-clip: text;
    filter: drop-shadow(0.06em 0.07em 0 var(--color-brand-magenta-dark));
  }

  @supports not (background-clip: text) {
    .wordmark {
      color: var(--color-cream);
      background: none;
    }
  }
}