/* The homepage's warm paper tones (--paper, --paper-deep) come from
   ../shared/tokens.css, shared with about-us. */

/* Page base. Kept at page level — parchment background (shared with
   for-captives), Garamond with fallbacks, and feature settings
   without "kern". */
html,
body {
	font-family: var(--font-sans);
	font-feature-settings: "liga", "onum";
}

/* The canvas takes the CLOSING BAND's ink, not the page's paper. The
   page height is fractional (the 1.05rem root leaves every rem length
   so), and the scrollable area rounds out past it, exposing a
   hairline of canvas below the CTA — a light bar under the ink band,
   appearing or not with the viewport. Painting the canvas ink hides
   it whatever the rounding does; nothing can cover it from inside the
   page, since it lies below the last element's box. The paper is
   body's job now, and body must therefore span the CONTENT: at
   height: 100% it only paints the first viewport and everything below
   the fold rides on the canvas — which is why this pair cannot simply
   be split colour-wise. Keep the two rules in step with about-us.css. */
html {
	height: 100%;
	background: var(--ink);
}

body {
	min-height: 100%;
	background: var(--paper);
}

main > section:not(.hero) {
	padding: var(--stroke-section) var(--gutter);
	display: grid;
	gap: var(--gap-columns);
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

main > section:not(.hero) .copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gap-copy);
}

main > section:not(.hero) .copy .button {
	margin-top: var(--gap-copy);
}

/* Wide-screen line-length cap for the two-column teasers, matching
   the dark pages' rails: the column is already ~measure-wide at the
   1600px design width, so this only binds above it. The CTA (full-
   width centered display line) and about-us (its own 50% caps below)
   stay uncapped. */
main > section:not(.hero):not(.cta):not(.about-us) .copy {
	max-width: var(--measure);
}

/* Teaser type pinned to the shared section vocabulary the dark pages
   codified (accent heading over body copy) instead of UA heading
   defaults. The CTA keeps default sizing — it's the same markup on
   every page. */
main > section:not(.hero):not(.cta) .copy h1 {
	font-size: var(--text-heading);
}

main > section:not(.hero) .copy h2 {
	font-size: var(--text-body);
}

main > section:not(.hero).dark {
	background-color: var(--ink);
	color: var(--parchment);
}

main > section:not(.hero).dark .button:hover {
	color: var(--ink);
}

/* svh, not vh: on iOS 100vh is the large viewport, which would sink
   the hero's bottom (and its vertical centering) behind Safari's
   collapsed toolbar. svh is stable during scroll (unlike dvh) and
   equals vh on desktop. */
.hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: calc(100svh - var(--nav-height));
}

.field {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* The canvas tracks the hero box itself (unsized, the svg would take
   its intrinsic 16:9 height from the viewBox and leave the bottom of
   tall heroes bare). hero.js reads this box's aspect to fit the
   field's viewBox on narrow heroes; xMidYMin slice in the markup
   keeps the wide case top-anchored, as the old overflow clip did. */
.field svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Portrait fields flow into the section seam, not off a screen edge:
   landscape lines exit at the right margin, where the cut can't be
   seen, but the converging amber would otherwise stop dead against
   the Product band below. Feather the last stretch so the bundle
   resolves and dissolves. hero.js owns the class — see the note
   there on why this isn't an orientation query. */
.field svg.field--portrait {
	-webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}

.hero-content {
	position: relative;
	z-index: 1;
	padding: 0 var(--gutter);
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: calc(100svh - var(--nav-height));
}

/* Below the threshold the --gutter floor (4rem a side) would leave a
   ~250px text box on phones; the hero takes the mobile gutter, as the
   token's comment provides for. The type re-clamp lives with the pair
   in tokens.css. */
@media (max-width: 900px) {
	.hero-content {
		padding: 0 var(--gutter-mobile);
	}
}

.hero-content h1,
.hero-content h2 {
	margin: 0;
}

/* Unitless leading (the old 6rem/8rem as ratios of the type sizes),
   so the lines track the hero clamps at every width. */
.hero-content h2 {
	font-size: var(--text-deck);
	line-height: 1.5;
	margin: 0;
}

.hero-content h1 {
	font-size: var(--text-hero);
	line-height: 1;
}

.product .composition {
	max-height: 20rem;
}

main > section.about-us {
	display: block;
	padding-top: 0;
}

main > section.about-us > .copy {
	display: flex;
	align-items: center;
}

main > section.about-us > .copy > * {
	/* The half-column mimic, held to the reading measure on wide
	   screens (the 50% term is the narrower one up to the design
	   width, so this only binds above it). */
	max-width: min(calc(50% - var(--gap-columns) / 2), var(--measure));
}

main > section.cta {
	display: block;
	position: absolute;
	padding: var(--stroke-cta) var(--gutter);
}

main > section.cta > .copy {
	width: calc(100vw - 2 * var(--gutter));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-copy);
}

/* ── Mobile: the CTA ──────────────────────────────────────────
   The fixed gutter collapses, as on the dark pages and about-us —
   this page was the last CTA still holding the desktop gutter on a
   phone, which left the band too narrow to seat the mascot beside
   the button and slid the pair off the centre axis. The section is
   out of flow, so its .copy carries the width and must swap too. */
@media (max-width: 900px) {
	main > section.cta {
		padding-left: var(--gutter-mobile);
		padding-right: var(--gutter-mobile);
	}

	main > section.cta > .copy {
		width: calc(100vw - 2 * var(--gutter-mobile));
	}
}

/* ── Mobile: the teaser sections ──────────────────────────────
   Below the site threshold the product and captives teasers give
   up their side-by-side grid for one column, on mobile gutters
   (matching the header's swap in style.css). The two run opposite
   ways — captives leads with its scene, product with its copy —
   but both shorten the scene and overlap it with the text across a
   long dissolve, so neither costs the page a full stack's height.
   About Us has no scene but its copy joins the same text
   treatment. The CTA and hero are handled separately. */
@media (max-width: 900px) {
	main > section.product,
	main > section.for-captives {
		grid-template-columns: 1fr;
		gap: 0;
		padding-left: var(--gutter-mobile);
		padding-right: var(--gutter-mobile);
	}

	/* Captives opens on the cascade, whose own mask already softens
	   its top edge, so the section drops its top stroke; below, the
	   About Us band's edge does the separating, so that end takes the
	   stacked-column stroke rather than the section's full one.
	   Product opens on its heading, which does need a stroke — the
	   same short one: the composition below reaches well up into the
	   copy, so the section is dense enough without a deep run-in. */
	main > section.for-captives {
		padding-top: 0;
		padding-bottom: var(--stroke-mobile);
	}

	main > section.product {
		padding-top: var(--stroke-mobile);
	}

	/* The captives markup is copy-first, so its scene swaps up.
	   Painting follows the order-modified document order, which
	   leaves the copy last — it draws over the foot it overlaps. */
	.for-captives .animation {
		order: -1;
		/* The cascade's height came from the neighbouring copy
		   column; stacked, it must bring its own — matched to the
		   shortened composition below. */
		height: 16rem;
		/* Dissolving over its lower three-fifths, with the copy
		   pulled up over the faded foot. */
		margin-bottom: calc(-1 * var(--space-4));
		-webkit-mask-image: linear-gradient(
			to bottom,
			#000 40%,
			transparent 100%
		);
		mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
	}

	/* Full-width, the desktop 20rem height cap would squash the
	   composition's cells into wide rectangles. Cap the width at the
	   shortened height's cell-square point instead and centre the
	   block. */
	.product .composition {
		max-width: calc(16rem * 6 / 5);
		margin-left: auto;
		margin-right: auto;
	}

	/* Product runs the other way: the composition follows the copy,
	   reaching up over its last 6rem and pulled off the bottom stroke
	   as well, so the swap costs the page nothing. Its fade mirrors
	   the cascade's — the long dissolve at the top, a short one at the
	   foot — and the top ramp is eased (the 40% stop, rather than a
	   straight line to solid) so the overlap reads as a deliberate
	   layer rather than a wash: the band holds near two-fifths
	   strength the whole way down instead of climbing a straight
	   line. The stops track the overlap depth: 6rem of a 16rem box is
	   the top 37.5%, so the eased stretch has to run past that mark,
	   or the button lands on the steep part of the ramp and the
	   plateau does nothing. */
	.product .stage {
		order: 1;
		margin-top: calc(-1 * var(--space-6));
		margin-bottom: calc(-1 * var(--space-4));
		-webkit-mask-image: linear-gradient(
			to bottom,
			transparent 0%,
			rgb(0 0 0 / 0.4) 40%,
			#000 70%,
			#000 88%,
			transparent 100%
		);
		mask-image: linear-gradient(
			to bottom,
			transparent 0%,
			rgb(0 0 0 / 0.4) 40%,
			#000 70%,
			#000 88%,
			transparent 100%
		);
	}

	/* Ordering the stage last puts it after the copy in the paint
	   order too, so without this the composition would wash over the
	   button it tucks under. The copy keeps the upper hand it had
	   when the scene sat above it. */
	.product .copy {
		position: relative;
		z-index: 1;
	}

	/* About Us: the same text treatment as the teasers' copy — mobile
	   gutters, left-aligned, held to the reading measure. Its desktop
	   half-column mimic (50% of the content box) would squeeze the
	   copy into a ~100px ribbon on a phone.

	   Stacked, that mimic is gone and with it the section's only
	   differentiator, so the tonal fold cream carries it instead —
	   the for-captives page's row-2 device (.plRowFold). A band needs
	   its own air, so the desktop padding-top: 0 gives way to a
	   symmetric stroke — the mobile one every other band takes down
	   here. At the desktop 8rem the fold read as a mostly-empty cream
	   panel with three lines adrift in it.

	   Its foot is the exception: as the last band before the CTA it
	   takes the run-up stroke (--stroke-cta-lead), the deeper breath
	   the closing band gave back. */
	main > section.about-us {
		background: var(--paper-deep);
		padding: var(--stroke-mobile) var(--gutter-mobile)
			var(--stroke-cta-lead);
	}

	main > section.about-us > .copy {
		align-items: flex-start;
	}

	main > section.about-us > .copy > * {
		max-width: var(--measure);
	}
}