/* cleopatra — components: single-class, opt-in only */

@layer components {
  /* display — opt-in hero/step-5 heading */
  .display {
    font-size: var(--step-5);
  }

  /* standfirst / dek under the headline */
  .standfirst {
    font-size: var(--step-1);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--text-muted);
    margin-block-end: var(--rlh);
  }

  /* author + date row */
  .byline {
    font-size: var(--step--1);
    color: var(--text-muted);
    margin-block-end: var(--rlh);
  }
  .byline a { color: var(--text-muted); }
  .byline a:hover { color: var(--accent); }

  /* small pill for tags/topics */
  .tag {
    display: inline-block;
    font-size: var(--step--1);
    line-height: 1;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border);
    border-radius: 1e5px;
    color: var(--text-muted);
    text-decoration: none;
  }
  .tag:hover { border-color: var(--accent); color: var(--accent); }

  /* outline button variant */
  .button.outline {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
  }
  .button.outline:hover { background: var(--accent); color: var(--accent-contrast); }

  /* minimal card — basis for future rails */
  .card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
  }
  .card > * + * { margin-block-start: var(--space-2); }

  /* wordmark in the site header */
  .wordmark {
    font-weight: 700;
    font-size: var(--step-1);
    letter-spacing: -0.02em;
  }
}