.peak-hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(420px, 78vh, 760px);
	margin-block-start: 0 !important;
	padding-top: clamp(3rem, 12vh, 8rem);
	background: linear-gradient(var(--wp--custom--sky--top), var(--wp--custom--sky--bottom));
}

.peak-hero__scene {
	position: absolute;
	inset: 0;
	max-width: none !important;
	margin: 0 !important;
	/* Sun and hills above the header's notebook grid (the grid still shows on the sky behind them). */
	z-index: 2;
}

.peak-hero__title {
	position: relative;
	/* Above the header's grid, which now overlaps the top of the hero. */
	z-index: 2;
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
}

.peak-hero__sun {
	position: absolute;
	left: 66%;
	top: 22%;
	width: clamp(56px, 7vw, 110px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--custom--sky--sun);
	opacity: 0.85;
}

/* Small screens: keep the sun below the title (title ends ~12vh + two lines from the top). */
@media (max-width: 600px) {
	.peak-hero__sun {
		top: auto;
		bottom: 58%;
		left: 74%;
		width: 44px;
	}
}

svg.peak-hero__layer {
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 70%;
}

.peak-hero__layer--far path { fill: var(--wp--custom--hill--1); }
.peak-hero__layer--mid path { fill: var(--wp--custom--hill--2); }
.peak-hero__layer--near path { fill: var(--wp--custom--hill--3); }

/* Parallax: far layers drift down as the page scrolls. No JS. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.peak-hero__layer {
			animation: peak-parallax linear both;
			animation-timeline: scroll(root);
			animation-range: 0 80vh;
		}

		.peak-hero__sun { --shift: 320%; }
		.peak-hero__layer--far { --shift: 45%; }
		.peak-hero__layer--mid { --shift: 22%; }
		.peak-hero__layer--near { --shift: 0%; }
	}
}

@keyframes peak-parallax {
	to {
		transform: translateY(var(--shift, 0));
	}
}

.peak-home-valley {
	/* -1px hides a sub-pixel seam from the hero gradient at fractional boundaries. */
	margin-block-start: -1px !important;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.peak-home-valley .peak-timeline__list time {
	color: var(--wp--custom--valley--accent);
}

.peak-home-intro .wp-block-image {
	flex: none;
	margin: 0;
}

/* The valley flows straight into the footer valley on the homepage. */
body:has(.peak-home-valley) .peak-footer {
	margin-block-start: 0;
}

body:has(.peak-home-valley) .peak-footer .peak-hills {
	display: none;
}

/* Space between the intro and "Recent writing". */
.peak-home-valley > .peak-section-label {
	margin-top: var(--wp--preset--spacing--50);
}

.peak-timeline__all {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * The hero and valley share <main> (so the "Hello" heading is inside the main landmark).
 * Tall windows: main, and the valley within it, grow to meet the footer, instead of leaving
 * a paper gap where the footer is pushed down.
 */
.wp-site-blocks > .peak-home {
	margin-block-start: 0;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.peak-home > .peak-home-valley {
	flex-grow: 1;
}

/* Homepage: the header takes the sky's top colour, so the sky runs unbroken from the top of the window to the hills. */
body:has(.peak-home) .peak-header {
	background: var(--wp--custom--sky--top);
}