@layer components {
  /* Hand-drawn ink underline — wobbly SVG, sits below the text. */
  .hand-underline {
    position: relative;
    display: inline-block;
  }
  .hand-underline::after {
    content: '';
    position: absolute;
    left: -2px; right: -4px;
    bottom: -3px;
    height: 4px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 4' preserveAspectRatio='none'><path d='M0,2 Q15,0 30,2 T60,2 T100,2' stroke='%231a1814' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
    opacity: 0.85;
    pointer-events: none;
  }

  /* Hand-drawn ink ellipse around a word. */
  .hand-circle {
    position: relative;
    display: inline-block;
    padding: 4px 10px;
  }
  .hand-circle::after {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'><ellipse cx='50' cy='20' rx='46' ry='15' fill='none' stroke='%231a1814' stroke-width='1.6' stroke-linecap='round' transform='rotate(-1 50 20)'/></svg>") center/100% 100% no-repeat;
    pointer-events: none;
  }

  /* Caveat-hand signature. */
  .signature {
    font-family: var(--hand);
    font-size: 28px;
    color: var(--ink);
    line-height: 1.2;
  }
}