/* One continuous landscape. Shared V3 type, chrome and CTA styling stay canonical. */
.homepage-journey {
	--journey-gutter: clamp(22px, 3vw, 64px);
	display: flex;
	height: 100svh;
	min-height: 0;
	flex-direction: column;
	overflow: hidden;
}

.homepage-journey > .home-v3-header {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	background: var(--home-v3-paper);
}

.journey-viewport {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: rgba(23, 55, 45, .24) transparent;
	overscroll-behavior-x: contain;
	container-type: size;
}

.journey-viewport:focus-visible { outline: 2px solid var(--home-v3-forest); outline-offset: -3px; }

.journey-world {
	position: relative;
	width: max(210vw, 250svh);
	height: 100%;
	min-height: 650px;
	isolation: isolate;
	overflow: clip;
}

/* The image and the route always share one undistorted 3:1 coordinate space. */
.journey-art {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 0;
	width: 100%;
	aspect-ratio: 3;
	transform: translateY(-50%);
	pointer-events: none;
}

.journey-art img,
.journey-route {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.journey-art img { object-fit: contain; }
.journey-route { overflow: visible; }
.journey-route-line {
	fill: none;
	stroke: var(--home-v3-acid);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.journey-route-definition { stroke: var(--home-v3-forest); stroke-width: 3.6; opacity: .6; }

.journey-content { position: absolute; inset: 0; }
.journey-endpoint {
	position: absolute;
	top: 0;
	width: 100vw;
	height: 100%;
	pointer-events: none;
}
.journey-endpoint a { pointer-events: auto; }
.journey-opening { left: 0; }
.journey-ending { right: 0; }

.journey-opening-copy {
	position: absolute;
	top: clamp(40px, 7svh, 88px);
	left: var(--journey-gutter);
	width: max-content;
	max-width: calc(100vw - 2 * var(--journey-gutter));
}
.journey-title,
.journey-ending h2 {
	margin: 0;
	color: var(--home-v3-forest);
	font-family: var(--home-v3-serif);
	font-size: clamp(84px, 10vw, 180px);
	font-weight: 400;
	line-height: .94;
	letter-spacing: -.065em;
}
.journey-title span,
.journey-ending h2 span { display: block; white-space: nowrap; }

.journey-follow {
	position: absolute;
	bottom: 22px;
	left: var(--journey-gutter);
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	gap: 18px;
	color: var(--home-v3-forest);
	font: 400 11px/1.4 var(--home-v3-mono);
	letter-spacing: .065em;
	text-decoration: none;
	text-transform: uppercase;
}
.journey-follow > span[aria-hidden] { font-size: 22px; }

.journey-ending-copy {
	position: absolute;
	right: var(--journey-gutter);
	bottom: 130px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--home-v3-heading-action-gap);
	text-align: right;
}
.journey-ending h2 { font-size: clamp(84px, 8vw, 144px); }
.journey-ending .home-v3-ending-get { min-height: 48px; padding-inline: 23px; }

.homepage-journey .home-v3-footer {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100vw;
	margin: 0;
	padding: 0 var(--journey-gutter) 12px;
	border-top: 0;
	background: var(--home-v3-paper);
}
.homepage-journey .home-v3-footer-inner { min-height: 64px; }
.homepage-journey .home-v3-footer-links a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; }

/* Keep the canonical footer in reading order but pin it to the viewport, not
   the moving artwork. Without JS it remains reachable at the landscape's end. */
.journey-viewport[data-journey-enhanced] .journey-world { display: flex; align-items: flex-end; }
.journey-viewport[data-journey-enhanced] .home-v3-footer {
	position: sticky;
	left: 0;
	right: auto;
	bottom: auto;
	flex: 0 0 100vw;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.journey-viewport[data-journey-enhanced][data-journey-at-end] .home-v3-footer {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}
.homepage-journey a:focus-visible { outline-color: var(--home-v3-forest); }
.homepage-journey .skip-link { z-index: 5; }

@media (max-width: 700px) {
	.homepage-journey { --journey-gutter: 24px; }
	.journey-world { width: max(300vw, 235svh); min-height: 630px; }
	.journey-title { font-size: clamp(74px, 23vw, 124px); }
	.journey-opening-copy { top: 48px; }
	.journey-art { top: 43%; }
	.journey-ending h2 { font-size: clamp(80px, 22vw, 120px); }
	.journey-ending-copy { bottom: 180px; }
	.homepage-journey .home-v3-footer { padding: 0 12px 8px; }
	.homepage-journey .home-v3-footer-inner { gap: 4px; row-gap: 0; padding-block: 8px; }
	.homepage-journey .home-v3-footer-note { flex-shrink: 0; white-space: nowrap; letter-spacing: 0; }
	/* Keep the links together, with breathing room after the copyright. */
	.homepage-journey .home-v3-footer-links { flex: 0 1 auto; width: auto; max-width: 100%; padding-inline-start: 16px; gap: 12px; justify-content: flex-end; }
	.homepage-journey .home-v3-footer-links a { min-width: 24px; white-space: nowrap; letter-spacing: 0; }
}

/* Short windows and text zoom remain scrollable; never clip a control or footer. */
@media (max-height: 660px) {
	.journey-world { min-height: 640px; }
	.journey-title { font-size: clamp(74px, 8vw, 100px); }
	.journey-opening-copy { top: 35px; }
	.journey-ending h2 { font-size: 96px; }
	.journey-ending-copy { bottom: 175px; }
	.journey-art { top: 35%; }
}

@media (prefers-reduced-motion: reduce) {
	.journey-viewport { scroll-behavior: auto; }
	.journey-viewport[data-journey-enhanced] .home-v3-footer { transition: none; }
}

@media (forced-colors: active) {
	.journey-art { display: none; }
	.journey-viewport { border: 1px solid CanvasText; }
}

@media print {
	.homepage-journey { display: block; height: auto; overflow: visible; }
	.journey-viewport { overflow: visible; }
	.journey-world { width: 100%; height: auto; min-height: 0; }
	.journey-art, .journey-follow { display: none; }
	.journey-content, .journey-endpoint, .journey-opening-copy, .journey-ending-copy,
	.homepage-journey .home-v3-footer { position: static; width: auto; height: auto; margin-block: 28px; }
	.journey-viewport[data-journey-enhanced] .journey-world { display: block; }
	.journey-viewport[data-journey-enhanced] .home-v3-footer { position: static; opacity: 1; visibility: visible; transition: none; }
}