:root {
	--accent-color: light-dark(
		var(--dark-accent-color),
		var(--light-accent-color)
	);
	--light-accent-color: oklch(.65 .22 30deg);
	--dark-accent-color:  oklch(.50 .20 30deg);
}


body,
body > * {
	max-inline-size: unset;
	padding-block: unset;
	padding-inline: unset;
}

main > *,
footer {
	padding-inline: var(--body-padding-inline);
}

header {
	padding-block: var(--space-800);
	background-color: var(--surface-color);
	align-items: center;
	min-block-size: 60vb;
	align-content: center;
}


/**
 * Main title
 */

hgroup:has(h1) {
	margin-block: unset;
	margin-trim: block;
}

hgroup:has(h1) > * {
	margin-block: var(--space-400);
}

hgroup:has(h1) > p {
	font-weight: normal;
}

/**
 * Dynamic title size:
 * - at least 1.25rem
 * - grow fast on small screens and slow on larger screens: sqrt from 0 to 100
 * - clamp at 3rem
 */
h1 {
	font-size: 1.25rem;
	font-size: clamp(1.25rem, 6.25rem, 3rem);
	font-size: min(
		1.25rem +
		5vw * .1 * sqrt(progress(100vw, 320px, 960px) * 100),
		3rem);
	font-weight: bold;
	line-height: 1.15;
	text-box-trim: trim-both;
}

h1 b {
	color: var(--accent-color);
	font-weight: inherit;

	@supports (background-clip: text) {
		color: transparent;
		background-image: linear-gradient(.48turn,
			var(--light-accent-color),
			var(--dark-accent-color));
		background-clip: text;
	}
}


footer {
	padding-block: var(--space-400);
}