@layer components {
  /* Letterhead — small caps, heavily tracked, ink-soft.
     Used for sheet headers and decline letter mark. */
  .letterhead {
    text-align: center;
    font-family: var(--sans);
    font-size: var(--cap-sm);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: var(--weight-semibold);
  }
  .letterhead-left { text-align: left; }
  .letterhead-rule { border-top: 1px solid var(--ink); margin: 14px 0; height: 0; }

  /* Section header — small caps within a sheet ("A note from your hosts"). */
  .h-section {
    font-size: var(--cap-sm);
    letter-spacing: var(--tracking-cap-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: var(--weight-bold);
    margin: 0 0 var(--space-2);
  }

  /* Eyebrow — slightly looser tracking for body-of-page eyebrows. */
  .eyebrow {
    font-family: var(--sans);
    font-size: var(--cap-md);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-semibold);
  }

  /* Mono-feel caption — replaces IBM Plex Mono. Same micro-size, tracked. */
  .caption {
    font-family: var(--sans);
    font-size: var(--cap-sm);
    letter-spacing: var(--tracking-cap);
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-medium);
  }
  .caption-soft { color: var(--ink-faint); }
  .caption-ink { color: var(--ink); }

  /* Filson italic stands in for EB Garamond italic emphasis moments
     (hero title word, "Welcome back, Chaya", in-sheet section openers). */
  .display-italic {
    font-family: var(--display);
    font-style: italic;
    font-weight: var(--weight-medium);
    letter-spacing: 0.005em;
  }

  .display { font-family: var(--display); font-weight: var(--weight-medium); }
  .hand { font-family: var(--hand); font-weight: 400; }
  .muted { color: var(--ink-faint); }
  .soft  { color: var(--ink-soft); }
}