/* pageheader — eyebrow, display title, subtitle and actions */
@layer components {
  .pageheader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding-block: var(--space-2) var(--space-1);
  }

  .pageheader__text {
    flex: 1 1 20rem;
    display: grid;
    gap: var(--space-0-5);
    min-inline-size: 0;
  }

  .pageheader__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--accent-text);
  }

  .pageheader__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tightest);
    text-wrap: balance;
  }

  .pageheader__subtitle {
    max-inline-size: 64ch;
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    color: var(--ink-2);
    text-wrap: pretty;
  }

  .pageheader__actions {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--space-1);

    &:empty { display: none; }
  }
}