/*
 * Hero. Logo, headline, lede, one button. Everything centred on the cream ground, and the
 * headline's accent phrase carries the marker.
 *
 * Vertical gaps are the measured mockup rhythm, held in the --rhythm-* tokens.
 */

.hero {
	position: relative;
	padding-block-start: var(--rhythm-md);
	text-align: center;
}

/*
 * The line art. Sized to the gap left either side of the text column rather than to a fixed width,
 * so it can never reach the headline: whatever the viewport, it takes the space the text is not
 * using and stops. Below 90rem that gap is too narrow to draw anything legible in, so it goes.
 */
.hero__illo {
	display: none;
}

.hero__container {
	position: relative;
	z-index: 1;
}

@media (min-width: 90rem) {
	.hero__illo {
		display: block;
		position: absolute;
		z-index: 0;
		width: calc((100% - var(--container-text)) / 2 - var(--space-4));
		max-width: 33.75rem;   /* the art's own drawn width, so it is never enlarged past it */
		color: var(--bnk-line);
		pointer-events: none;
	}

	.hero__illo--left {
		inset-inline-start: 0;
		inset-block-start: calc(var(--illo-top) + 1.25rem);   /* nudged off the headline's first line */
	}

	/* Dropped a little against the left one, as the mockup stages them. */
	.hero__illo--right {
		inset-inline-end: 0;
		inset-block-start: calc(var(--illo-top) + var(--space-8));
	}
}

.hero__logo {
	width: var(--logo-width);
	margin-inline: auto;
	color: var(--color-heading);
}

/*
 * The plain run of the headline is a shade lighter than the accent, so the marker phrase leads
 * without the whole line shouting. base.css sets headings to 700, and this steps back everything
 * outside a .marker to 500.
 */
.hero__heading {
	margin-block-start: var(--rhythm-md);
	margin-inline: auto;
	max-width: var(--container-text);
	font-size: var(--font-9);
	font-weight: var(--weight-medium);

	/*
	 * Not balanced. base.css balances headings, and here that evened the two lines by breaking
	 * after "indoor", which splits the marker phrase in half and shows two blocks. The measure is
	 * set so the natural break falls after the phrase instead.
	 *
	 * `auto`, not `normal`: text-wrap takes wrap/nowrap/auto/balance/stable/pretty, and `normal` is
	 * invalid, so the declaration was dropped and the inherited balance quietly won.
	 */
	text-wrap: auto;
}

.hero__lede {
	margin-block-start: var(--rhythm-sm);
	margin-inline: auto;
	max-width: 44ch;
	color: var(--color-text-muted);
}

.hero__action {
	margin-block-start: var(--rhythm-sm);
}

/*
 * Mobile spacing. The headline sits closer to its lede, and the button gets room on both sides:
 * the pulse ring grows to 1.16 of the pill, so at the desktop rhythm it was landing almost on the
 * lede above and the first photograph below.
 */
@media (max-width: 46rem) {
	.hero__heading {
		margin-block-start: var(--space-5);
	}

	.hero__lede {
		margin-block-start: var(--space-3);
	}

	.hero__action {
		margin-block-start: var(--space-6);
	}

	/*
	 * Padding on the section, not a bottom margin on the button. A margin on the last child collapses
	 * out through the container and the gap below the button never changes.
	 */
	.hero {
		padding-block-end: var(--space-3);
	}
}