/* ------------------------------------------------------------------ hero -- */

/* The hero is the one place that uses the wider shell — see tokens.css. */
.hero > .container {
    max-width: var(--shell-hero);
}

.hero {
    position: relative;
    /* 1.6vh was 14px at 900: the memory card's top edge kissed the bar. The
       fold gate holds the calls to action above 700px either way. */
    padding-top: clamp(1.1rem, 2.6vh, 2.5rem);
    padding-bottom: clamp(1.5rem, 4vh, 4rem);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.hero h1 {
    margin-bottom: 1.4rem;
    /* Even the rag rather than pinning a measure, which would fight the fluid
       shell and reintroduce an orphan at some width nobody tested. Note this
       changed no line count at any width measured — Chrome declines to balance
       above its own line threshold — so the shell curve is doing the work and
       this is here for the widths between the ones sampled. */
    text-wrap: balance;
}