---
/**
 * The hero inside the site header: a gold eyebrow, the page title in Cinzel
 * and a lede. Extra content (buttons, chips, a filter) goes in the slot.
 */
interface Props {
  eyebrow?: string;
  title: string;
  lede?: string;
}
const { eyebrow, title, lede } = Astro.props;
---
{eyebrow && <div class="eyebrow">{eyebrow}</div>}
<h1 class="title">{title}</h1>
{lede && <p class="lede">{lede}</p>}
<slot />

<style>
  .eyebrow {
    font-size: 11px;
    letter-spacing: 0.3em;
    font-weight: 600;
    color: var(--gk-gold-bright);
    text-transform: uppercase;
  }
  .title {
    margin: 0;
    font-size: clamp(34px, 6vw, 48px);
    letter-spacing: 0.08em;
    line-height: 1.05;
  }
  .lede {
    margin: 0;
    font-size: 17px;
    color: var(--gk-soft);
    max-width: 62ch;
    line-height: 1.6;
  }
</style>