/**
 * Hero overrides.
 *
 * css/style.css is a committed Tailwind build with no source in the repo, so it
 * cannot be regenerated — additions go here and are enqueued alongside it.
 */

/**
 * Stop the typing animation reflowing the page between 768px and 1023px.
 *
 * The hero title's min-height comes from custom CSS hung off the
 * `.min-h-[12rem]` utility class: 9rem at base, then 35rem from 1024px and
 * 25rem from 1524px. Those larger values comfortably clear the tallest phrase,
 * but between 768px and 1023px the font steps up to 3rem while the min-height
 * is still 9rem (144px) — and the tallest phrase needs 192px. Result: a 48px
 * jump as phrases cycle, which Core Web Vitals counts as layout shift.
 *
 * 12rem covers the tallest measured phrase in that band exactly. Scoped to the
 * home page because the same .hero-text element is used by ~100 other pages,
 * which have no min-height today and must not gain one.
 */
@media (min-width: 768px) and (max-width: 1023.98px) {
	body.home .hero-text {
		min-height: 12rem;
	}
}