---
/**
 * The opening of every marketing page except the homepage — eyebrow, `<h1>`, lede.
 *
 * A component rather than four copies of the same three elements, because phase 4 writes
 * five pages and phases 5 and 6 write four more. The homepage is deliberately not one of
 * them: its `<h1>` is the tagline inside the hero, set against the emblem, and pulling that
 * into a shared header would either flatten the hero or push its layout in here (D19).
 *
 * The `<h1>` is the page's own name, not the product's, and `Base` appends the site name to
 * the document title — so a page sets a short `title` and gets "Features — Runic Gateway"
 * in the tab and "Features" on the page.
 */
interface Props {
  /** Small uppercase line above the title. What kind of page this is. */
  eyebrow: string;
  title: string;
}

const { eyebrow, title } = Astro.props;
---

<header class="page section pagehead">
  <p class="eyebrow">{eyebrow}</p>
  <h1>{title}</h1>
  <div class="prose pagehead__lede">
    <slot />
  </div>
</header>

<style>
  /* The section rhythm gives generous space below; the header wants less, because the
     first section under it is part of the same thought. */
  .pagehead {
    padding-bottom: clamp(1rem, 2.5vw, 1.75rem);
  }

  .pagehead h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 5vw, 2.9rem);
  }

  .pagehead__lede {
    color: var(--muted);
    font-size: 1.06rem;
  }

  .pagehead__lede :global(p) {
    margin: 0 0 0.85rem;
  }

  .pagehead__lede :global(p:last-child) {
    margin-bottom: 0;
  }
</style>