/*
 * Homepage hero composition (docs/HOMEPAGE.md; VISUAL_ACCEPTANCE.md HE01–HE09,
 * P01; reference R1).
 *
 * The hero is a core Group (.fct-hero) holding real HTML: the lead note, the
 * H1, the visual (fct/hero-collage plus the two notes that belong to it), the
 * intro and the CTA. From 900 px it is R1's two-part composition on a grid
 * measured in R1 panel widths (cqw = 1 % of the hero):
 *
 *   columns   7 % margin | 33.5 % text | 4 % overlap | 55.5 % visual
 *   text      x 0.070–0.445   (headline, R1)
 *   visual    x 0.405–1.000   (collage region, bleeds to the right edge)
 *
 * Vertical positions are R1 anchors in the hero field below the header
 * (y' = (y − 0.100) / 0.900), converted to cqw through the field's aspect
 * ratio, 1.306: headline top at 15 % of the field = 11.5 cqw.
 *
 * STRUCTURAL ONLY: anchors, not tuned values. Final tuning waits for the
 * approved source images (hero visual gate).
 *
 * No 100vh anywhere (HE09): the height follows the collage's aspect ratio or
 * the text, whichever is taller, so zoom and long text stay reachable.
 */

/*
 * Hero display face: League Spartan Black, for the homepage hero H1 only
 * (D-005 exception; Space Grotesk stays the heading face everywhere else).
 * Declared here, not in theme.json, so it is not offered in the editor's font
 * picker; the file only downloads where the hero H1 uses it. SIL OFL,
 * assets/fonts/league-spartan/OFL.txt.
 */
@font-face {
	font-family: "League Spartan";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/league-spartan/league-spartan-900-latin.woff2?v=d5a1cc7ea1c8") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "League Spartan";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/league-spartan/league-spartan-900-latin-ext.woff2?v=6a82ed3e09a7") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.fct-hero {
	container-type: inline-size;
	position: relative;
	/* The display preset as the site defines it, for the headline's own scale below. */
	--fct-hero-display: var(--wp--preset--font-size--display);
	/* The foreground ridge may run past the hero's right and bottom edges. */
	overflow: clip;
}

/* The hero sets its own spacing; the flow layout's block gap does not apply. */
.fct-hero > * {
	margin-block: 0;
}

.fct-hero .fct-hero__title,
.fct-hero .fct-hero__message,
.fct-hero .fct-hero__note--lead {
	position: relative;
	z-index: 1;
}

/*
 * Headline: the brand statement, five presentational lines on desktop (R1).
 * R1's mass is turned about 4° anticlockwise (its line starts step right from
 * 0.071 to 0.106 of the panel): HE05's one rotated text layer. Ink is black in
 * R1; Charcoal Green is the nearest token.
 */
.fct-hero .fct-hero__title {
	/*
	 * League Spartan Black fitted to R1's ink height (docs/HOMEPAGE.md, bake-off
	 * round 2) is 0.98 of the display preset; 2 % less (0.9604) is the first
	 * step that clears the frozen fish. Scaling the preset keeps the fluid range
	 * and the preset class; the preset's 3rem floor still holds on small phones.
	 */
	--wp--preset--font-size--display: max(3rem, calc(var(--fct-hero-display) * 0.9604 * var(--fct-hero-scale, 1)));
	font-family: "League Spartan", var(--wp--preset--font-family--display);
	font-weight: 900;
	font-synthesis: none;
	color: var(--wp--preset--color--charcoal);
	/*
	 * R1's lines are packed tight: capitals only, so no descenders to collide.
	 * 0.811 keeps the approved gap between lines per cap height (0.86 on Space
	 * Grotesk's cap height) on League Spartan's taller capitals.
	 */
	line-height: 0.811;
	letter-spacing: 0;
	transform: rotate(-4deg);
	transform-origin: 0 50%;
}

/*
 * Print texture, as in R1's printed mass: imperfect ink, not a dot pattern.
 * - Wear (mask, assets/masks/ink-print.svg): knockouts only inside a few slow,
 *   irregular zones, so most of every letter stays solid; the lightest spot
 *   keeps 30 % of the ink. Sized in em, so it scales with the letters.
 * - Edge roughness (filter #fct-hero-ink, defined with the collage): a small
 *   displacement of the letter edges, 2.4 px on desktop, 1.5 px on phones.
 * Both are non-destructive: the text stays live, selectable HTML in its own
 * colour. Without the filter definition the headline simply renders plain.
 * Plain ink where the user asks for more contrast or forced colours.
 *
 * WebKit clips a mask to the element's border box even with mask-clip:
 * no-clip, which cut the ink that lies outside the H1's box: the capitals'
 * tops at line height 0.811 (STOP), ASKING's offset to the left, the end of
 * the marker. So the two effects sit on the H1's two inner spans, in their
 * original order (edges, then wear):
 * - the edge filter on .fct-hero__ink, whose box is exactly the H1's content
 *   box, so its noise falls where it always did in every engine;
 * - the wear mask on the phrase span around it, grown by a 48 px bleed on
 *   every side (padding, cancelled by an equal negative margin) and offset by
 *   the same 48 px, so its texture falls where it did on the H1 and nothing
 *   is clipped. The H1's own box and rotation are unchanged.
 */

/* Its own formatting context, so the span's negative margins never collapse through it (below 900 px it is not a grid item). */
.fct-hero .fct-hero__title {
	display: flow-root;
}

.fct-hero .fct-hero__title > span[lang] {
	display: block;
	margin: -48px;
	padding: 48px;
	-webkit-mask: url("../masks/ink-print.svg?v=c542b1e5617e") 48px 48px / 4.6em 4.6em repeat;
	mask: url("../masks/ink-print.svg?v=c542b1e5617e") 48px 48px / 4.6em 4.6em repeat;
	mask-clip: no-clip;
}

.fct-hero .fct-hero__ink {
	display: block;
	filter: url("#fct-hero-ink");
}

@media (max-width: 599.98px) {
	.fct-hero .fct-hero__ink {
		filter: url("#fct-hero-ink-s");
	}
}

@media (prefers-contrast: more), (forced-colors: active) {
	.fct-hero .fct-hero__title > span[lang] {
		-webkit-mask: none;
		mask: none;
	}

	.fct-hero .fct-hero__ink {
		filter: none;
	}
}

/*
 * R1's Gold marker runs under TREES. only, starting a little inside it. Its
 * shape is R1's own brush stroke (qa/tools/trace-underline.mjs): heavier,
 * rounded start, uneven edges, thin split end, faint dry-bristle streaks. The
 * box (position and length) is unchanged.
 */
.fct-hero .fct-hero__title.is-style-marker::after {
	content: none;
}

.fct-hero__title .fct-hero__line:last-child {
	position: relative;
	width: fit-content;
}

.fct-hero__title .fct-hero__line:last-child::after {
	content: "";
	position: absolute;
	left: 0.3em;
	right: -0.05em;
	bottom: -0.26em;
	height: 0.24em;
	background-color: var(--wp--preset--color--gold);
	-webkit-mask: url("../masks/marker-r1.svg?v=e7a7baee437b") center / 100% 100% no-repeat;
	mask: url("../masks/marker-r1.svg?v=e7a7baee437b") center / 100% 100% no-repeat;
	pointer-events: none;
}

/*
 * Hand-set feel: each line sits a touch off the common axis, as in R1's
 * printed mass. Restrained offsets (em, so they scale with the line) and
 * rotations of 0.3–0.6° about each line's left end, inside the one −4° text
 * layer (HE05). Only one pair of neighbouring lines leans together (FISH TO →
 * CLIMB), so the tight 0.811 rhythm keeps clear gaps. ASKING steps left and
 * dips at its end: with the −2 % size and the 15 px collage shift that keeps
 * the G clear of the frozen fish's jaw (docs/HOMEPAGE.md).
 */
.fct-hero__line {
	display: block;
	white-space: nowrap;
	translate: var(--fct-line-x, 0) 0;
	rotate: var(--fct-line-r, 0deg);
	transform-origin: 0 60%;
}

.fct-hero__line:nth-child(1) { --fct-line-r: -0.6deg; }
.fct-hero__line:nth-child(2) { --fct-line-x: -0.06em; --fct-line-r: 0.6deg; }
.fct-hero__line:nth-child(3) { --fct-line-x: 0.04em; --fct-line-r: 0.5deg; }
.fct-hero__line:nth-child(4) { --fct-line-x: 0.08em; --fct-line-r: -0.4deg; }
.fct-hero__line:nth-child(5) { --fct-line-x: 0.03em; --fct-line-r: 0.4deg; }

/*
 * The client-facing message (homepage phase 1, 2026-10-29): question, intro and CTA as one group in
 * the intro's place, directly under the statement. The question is the hero's only H2, in the heading
 * face at a quiet size, so the statement stays the dominant mass; the CTA leads to Contact, the former
 * CTA follows as a quiet text link.
 */
.fct-hero .fct-hero__message {
	max-width: 35cqw;
}

.fct-hero .fct-hero__message > * {
	margin-block: 0;
}

.fct-hero .fct-hero__question {
	color: var(--wp--preset--color--forest);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(24px, 2.08cqw, 32px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.fct-hero .fct-hero__intro {
	margin-block-start: 0.9em;
}

.fct-hero .fct-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-block-start: var(--wp--preset--spacing--m);
}

.fct-hero .fct-hero__cta > * {
	margin: 0;
}

.fct-hero .fct-hero__more {
	font-weight: 600;
}

.fct-hero .fct-hero__more a {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.fct-hero .fct-hero__arrow {
	margin-inline-start: 8px;
}

.fct-hero__visual {
	position: relative;
}

/* Notes that annotate the collage sit on it, in its own coordinates (R1). */
.fct-hero .fct-hero__visual > .fct-hero__note {
	position: absolute;
	z-index: 2;
	margin: 0;
}

/*
 * "Real work. …": R1 x 0.790–0.975, y 0.300 → stage right 4.2 %, top 22.2 %.
 * The approved tree's crown droops over that spot to 40 % of the stage, so the
 * note sits just below its outer twigs, still to the right of the trunk. A
 * plain note, as in R1 (its arrows are separate decoration).
 */
.fct-hero .fct-hero__note--work {
	top: 40%;
	right: 1.5%;
}

/*
 * On two lines, "Context / Matters", as in R1: min-content breaks at the one
 * space, so the phrase stays a single line of text for reading and copying.
 * Its enclosure is R1's own open loop (qa/tools/trace-enclosure.mjs), not the
 * note style's closed oval: traced with the arrows' ink weight, at R1's own
 * proportions (1.17 : 1 here, 1.16 : 1 in R1), open at the top left where R1's
 * pen started with a small hook. It reaches 0.35 em above and below the words,
 * as R1's loop sits loosely round them. Decoration only: an empty
 * pseudo-element is never read out.
 */
.fct-hero .fct-hero__note--context {
	width: min-content;
}

.fct-hero .fct-hero__note--context::before {
	inset: -0.35em 0;
	-webkit-mask-image: url("../masks/note-enclosure-r1.svg?v=b91750f2186c");
	mask-image: url("../masks/note-enclosure-r1.svg?v=b91750f2186c");
}

/*
 * "Context Matters": R1 x 0.800–0.950, y 0.585, beside its climber. Anchored
 * from below, so it always ends just above the figure's head (stage 64 %)
 * whatever its size at a given width.
 */
.fct-hero .fct-hero__note--context {
	/*
	 * WCAG 1.4.12 (Phase 6C): with the test's larger line height the work note grows downwards and this note upwards
	 * (three and two lines), and the paragraph spacing (2 em below a paragraph) lifts this bottom-anchored note
	 * further; the two ran into each other. Switched on the line height (as in Phase 6A): the five lines' extra
	 * height plus 2 em move this note down. At the designed 1.08 both terms are exactly 0 (the 0.5 px margin), so
	 * the frozen position is unchanged.
	 */
	--fct-note-grow: calc(5 * max(0px, 1lh - 1.08em - 0.5px) + clamp(0px, (1lh - 1.08em - 0.5px) * 1000, 2em));

	bottom: calc(37% - var(--fct-note-grow));
	right: 2%;
}

/*
 * Frozen-hero bugfix (integration audit A1, 2026-10-04). The notes keep their
 * size as the stage shrinks, so below 1400 px the 37 % brings "Context Matters"
 * into "Real learning.". Here the note is never closer than 10 px of paper to
 * the work note: its top stays at least the work note's top (40 %) + 3.47 em,
 * where the painted loop clears the painted "Real learning." by that gap
 * (calibrated on the ink; the note's own height is 3.267 em). Whichever is
 * lower wins. From 1400 px the frozen 37 % applies unchanged; below 600 px the
 * note is static. Around 900–1024 px the loop (not its letters) may cross a
 * little of the tree's rocky base, as approved.
 */
@media (max-width: 1399.98px) {
	.fct-hero .fct-hero__note--context {
		bottom: calc(min(37%, calc(60% - 6.737em - 10px)) - var(--fct-note-grow));
	}
}

@media (min-width: 900px) {
	.fct-hero {
		/*
		 * Homepage phase 1 (2026-10-29): the statement, its lead note and the room
		 * above them at 72 %, so the message's question starts in the first screen
		 * on common desktops (1280 × 800 to 1920 × 1080). The collage keeps its size.
		 */
		--fct-hero-scale: 0.72;

		display: grid;
		grid-template-columns: 7% 33.5% 4% 1fr;
		/*
		 * Row 1 is R1's 11.5 cqw, or the height the former two-line lead note
		 * gave it (6.5 cqw of margins plus two lines of note type). The note now
		 * sits out of the flow; this keeps the approved headline where it was.
		 */
		grid-template-rows: max(calc(11.5cqw * var(--fct-hero-scale)), calc((6.5cqw + 2.16 * var(--wp--preset--font-size--note)) * var(--fct-hero-scale))) auto auto auto 1fr;
	}

	/*
	 * "Same world. / Different questions.": R1's statement above the headline,
	 * at R1's place, scale and slant: fitted on ink to R1 at 1440 (x 0.065–0.366,
	 * from under the logo to just above STOP; baselines rising 14°). Out of the
	 * grid flow; sized with the headline's display preset (66 px at 1440), so it
	 * keeps its relation to the headline where that preset stops growing.
	 * R1's hand is narrower than Caveat: matched on the lines' extent.
	 */
	.fct-hero > .fct-hero__note--lead {
		--fct-note-rotate: -14deg;
		position: absolute;
		left: 6.3%;
		top: calc(3.7cqw * var(--fct-hero-scale));
		margin: 0;
		max-width: none;
		font-size: calc(var(--fct-hero-display) * 0.458 * var(--fct-hero-scale));
		line-height: 1.02;
		white-space: nowrap;
	}

	/* League Spartan's capitals sit high in the line box: 1.7 cqw brings the ink to R1's top. */
	.fct-hero > .fct-hero__title {
		grid-column: 2 / 4;
		grid-row: 2;
		margin-top: calc(1.7cqw * var(--fct-hero-scale));
	}

	.fct-hero > .fct-hero__visual {
		grid-column: 3 / 5;
		grid-row: 1 / -1;
		align-self: start;
	}

	/*
	 * 15 px right at 1440 (1.04 cqw), the second step that clears the fish from
	 * the headline's G. The frozen collage moves as a whole (images and their
	 * arrows); the handwritten notes stay where they were.
	 */
	.fct-hero > .fct-hero__visual > .fct-hero-collage {
		translate: 1.04cqw 0;
	}

	/* The message: R1 x 0.100, 3 cqw right of the headline; R1 leaves 0.020 of rest below the marker. */
	.fct-hero > .fct-hero__message {
		grid-column: 2 / 4;
		grid-row: 3;
		margin: 1.6cqw 0 0 3cqw;
	}
}

/*
 * Below 900 px: headline → message (question, intro, CTA) → compact collage, in
 * DOM order. Homepage phase 1 (2026-10-29) moved the message above the collage,
 * so it is visible straight away rather than below the image (FCT_WEB_SPEC.md
 * §11 had headline → collage → intro → CTA). Secondary notes drop out on narrow
 * screens; "Context Matters" stays with the collage (MO03).
 */
@media (max-width: 899.98px) {
	.fct-hero {
		padding-inline: var(--wp--style--root--padding-left, 16px) var(--wp--style--root--padding-right, 16px);
	}

	/* Plus the room League Spartan's high-set capitals take from the line box above them. */
	.fct-hero > .fct-hero__title {
		margin-top: calc(var(--wp--preset--spacing--m) + 0.12em);
	}

	/* The fish is not beside the headline here: ASKING keeps to the gutter. */
	.fct-hero__line:nth-child(2) {
		--fct-line-x: 0;
	}

	.fct-hero > .fct-hero__visual {
		width: min(100%, 560px);
		margin: var(--wp--preset--spacing--l) 0 0 auto;
	}

	.fct-hero > .fct-hero__message {
		max-width: 33em;
		margin-top: var(--wp--preset--spacing--l);
	}
}

@media (max-width: 599.98px) {
	.fct-hero > .fct-hero__note--lead,
	.fct-hero .fct-hero__note--work {
		display: none;
	}

	/*
	 * The collage is too small to carry a note: it follows it, right-aligned
	 * (spec §11), with room for the enclosure's 0.35 em above the words.
	 */
	.fct-hero .fct-hero__visual > .fct-hero__note--context {
		position: static;
		margin: calc(var(--wp--preset--spacing--s) + 0.35em) 0 0 auto;
	}
}