/* Headline: a page's greeting set like a magazine cover, after Squarespace's brand site, with
   the facts of the moment under it in parentheses, after huyml.co. */
@layer components {
  .headline h1 {
    font-size: clamp(3rem, 1.5rem + 6vw, 6.5rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
  }

  .headline__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half) var(--inline-space-double);
    margin-block-start: var(--block-space);
    font-size: var(--text-small);
    color: var(--color-subtle);

    /* The parentheses are decoration: the alt text after the slash keeps them unread. */
    & > *::before { content: "( " / ""; }
    & > *::after { content: " )" / ""; }
  }

  .headline__label {
    margin-block-start: var(--block-space-double);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-subtle);
  }
}