@layer components {
  /* Brand pass: the wobbly hand-drawn ink marks become the letterpress
     primitives — a straight pink hairline and a clean thin pink ellipse
     (the wordmark's "o"). Class names kept so call sites don't churn.
     New work should reach for .brand-rule / .brand-ring (brand.css). */

  /* Was a wobbly ink underline; now the short pink hairline that sits
     under a small-caps label all through the TCX invitation. */
  .hand-underline {
    position: relative;
    display: inline-block;
  }
  .hand-underline::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -3px;
    height: 1px;
    background: var(--pink);
    pointer-events: none;
  }

  /* Was a wobbly ink ellipse around a word; now a clean thin pink ring. */
  .hand-circle {
    position: relative;
    display: inline-block;
    padding: 4px 12px;
  }
  .hand-circle::after {
    content: '';
    position: absolute; inset: 0;
    border: 1.5px solid var(--pink);
    border-radius: 50%;
    pointer-events: none;
  }

  /* Was a Caveat scrawl; now a light display italic — "the hosts named
     together" reads signature-like without being handwriting. */
  .signature {
    font-family: var(--display);
    font-style: normal;
    font-weight: var(--weight-normal);
    font-size: 19px;
    color: var(--ink);
    line-height: 1.3;
  }
}