@layer components {
  .wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1;
    white-space: nowrap;
  }
  .wordmark .quiet { color: var(--quiet); }
  .wordmark .loud { color: var(--ink); }

  .glyph { position: relative; display: inline-block; }
  .glyph > .overlay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    overflow: visible;
    max-inline-size: none;
  }

  .overlay-blip { inline-size: 0.72em; block-size: 0.72em; bottom: 0.79em; }
}