.wp-site-blocks > header {
	position: relative;
	z-index: 100;
}

/* The page starts under the header so the hero and the shapes run behind it. */
.wp-site-blocks > main {
	position: relative;
	margin-block: calc(-1 * var(--ce-header-h)) 0;
	overflow: clip;
}

/* The shapes (.ce-shapes, .ce-shape) are in shapes.css. */

/* Screens: hero and sections. Each is at least one viewport tall. */
.ce-screen {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: 1fr auto;
	min-height: 100vh;
	min-height: 100svh;
	margin-block: 0;
	padding: var(--ce-top-clear) clamp(1.25rem, 4vw, 3rem) 0;
	text-align: center;
	/* The screens sit over the shapes. Only their text and arrows take the pointer. */
	pointer-events: none;
}

.ce-screen:focus {
	outline: none;
}

.ce-screen__body {
	align-self: center;
	box-sizing: border-box;
	width: 100%;
}

.ce-hero {
	padding-top: var(--ce-top-clear);
}

.ce-hero__content {
	pointer-events: none;
	container-type: inline-size;
}

/* The font size follows the width of the hero, so each line of the title stays on one line. */
.ce-hero__title {
	margin: 0 auto;
	--ce-fs: 2rem;
	--ce-fs: min(9rem, 8.8cqi);
	line-height: 1.28;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* Room for the dotted underline between these two tight lines. The shared
   explainer offset would otherwise land on the next line. */
.ce-hero__title .ce-explain__trigger {
	text-underline-offset: 0.14em;
	text-decoration-thickness: 0.055em;
}

/* The women* note hangs on this heading. The shared hint is an inline-block
   with 3.1rem of margin above the word (explainer.css), which would push the
   two nowrap lines apart. Here the note stays out of the line at every width,
   so the lines keep their gap and nothing jumps when the note fades in or
   hides.
   The green asterisk is a percentage of the whole page, and this word moves
   with the heading, so a fixed offset only meets the asterisk at one width.
   home.js measures both and parks the note just above the asterisk, then aims
   the arrow at it. The tilt below is the fallback until that runs. The
   rotation stays on the words, not on the note box, so the fade cannot wipe it. */
.ce-hero__title .ce-explain--hint {
	display: inline;
	margin-top: 0;
}

.ce-hero__title .ce-explain__hint {
	right: 0;
	bottom: 100%;
	left: auto;
	z-index: 1;
	flex-direction: row;
	align-items: flex-end;
	gap: 0;
	margin: 0;
	text-align: right;
}

.ce-hero__title .ce-explain__arrow--above {
	display: block;
	width: clamp(2.5rem, 6.8vw, 4.75rem);
	margin-top: 0;
	stroke-width: 28;
	transform-origin: 3% 2%;
}

.ce-hero__title .ce-explain__arrow--side {
	display: none;
}

.ce-hero__title .ce-explain__hint-text {
	width: max-content;
	white-space: nowrap;
	text-wrap: nowrap;
	transform: rotate(-6deg);
	transform-origin: 100% 50%;
}

.ce-hero .ce-lead {
	--ce-mw: 32em;
	margin: calc(clamp(2rem, 5vh, 3.25rem) * var(--ce-fit-k-gap, 1)) auto 0;
	--ce-fs: clamp(1.25rem, 2.4vw, 1.875rem);
	line-height: 1.3;
}

/* The explainer hint of the Home hero only (explainer.css sets the layout). */
.ce-hero .ce-explain__hint {
	--ce-fs: 0.95rem;
}

@media (min-width: 480px) {
	.ce-hero .ce-explain__hint {
		--ce-fs: 1rem;
	}
}

@media (min-width: 900px) {
	.ce-hero .ce-explain__hint {
		--ce-fs: clamp(1rem, 1.3vw, 1.25rem);
	}
}

/* Sections: the text sits in the middle, the shapes stay hoverable at the sides. */
.ce-section .ce-screen__body {
	pointer-events: none;
}

.ce-section .ce-screen__body > * {
	pointer-events: auto;
}

.ce-section__title {
	margin: 0 0 1.5rem;
	font-size: clamp(2.25rem, 5.5vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.ce-section p {
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.ce-section .ce-program-hook {
	margin: 1.5rem auto 0;
	text-align: center;
}

.ce-section .ce-program-hook a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ce-highlight {
	background: none;
	color: inherit;
}

.ce-section .wp-block-buttons {
	gap: 0.75rem 1rem;
	margin-top: 2rem;
}

.ce-hero .wp-block-buttons {
	gap: calc(0.75rem * var(--ce-fit-k-gap, 1)) calc(1rem * var(--ce-fit-k-gap, 1));
	margin-top: calc(2rem * var(--ce-fit-k-gap, 1));
	pointer-events: auto;
}

.ce-section .wp-block-button__link {
	padding: 0.7em 1.8em;
	font-size: 1.125rem;
	line-height: 1.2;
	text-decoration: none;
}

.ce-hero .wp-block-button__link {
	--ce-fs: 1.125rem;
	padding: 0.7em 1.8em;
	line-height: 1.2;
	text-decoration: none;
}

.ce-section .wp-block-button__link:focus-visible,
.ce-hero .wp-block-button__link:focus-visible,
.ce-textlink a:focus-visible {
	outline: 3px solid var(--ce-focus-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--ce-focus-band);
}

.ce-section .ce-textlink {
	margin-top: 1.25rem;
	font-size: 1.125rem;
}

/* Home #founded on the fit ladder (fit.css, Size x rung). Design sizes live in
   --ce-fs; gaps take --ce-fit-k-gap. #organisations and #everyone keep the
   .ce-section rules above. No --ce-mw: the column is the constrained layout. */
#founded {
	--ce-paragraph-gap: calc(1.5rem * var(--ce-fit-k-gap, 1));
}

#founded .ce-section__title {
	margin: 0 0 calc(1.5rem * var(--ce-fit-k-gap, 1));
	--ce-fs: clamp(2.25rem, 5.5vw, 4.5rem);
}

#founded .ce-screen__body > p {
	--ce-fs: clamp(1.0625rem, 1.6vw, 1.25rem);
}

#founded .wp-block-buttons {
	gap: calc(0.75rem * var(--ce-fit-k-gap, 1)) calc(1rem * var(--ce-fit-k-gap, 1));
}

#founded .wp-block-button__link {
	--ce-fs: 1.125rem;
}

#founded .ce-program-hook {
	margin: calc(1.5rem * var(--ce-fit-k-gap, 1)) auto 0;
}

#founded .ce-badge-anchor {
	margin-top: calc(3.25rem * var(--ce-fit-k-gap, 1));
}

#founded .ce-women-badge {
	--ce-fs: 1.25rem;
}

@media (max-width: 599px) {
	#founded {
		--ce-paragraph-gap: calc(1rem * var(--ce-fit-k-gap, 1));
	}

	#founded .ce-section__title {
		margin-bottom: calc(1rem * var(--ce-fit-k-gap, 1));
		--ce-fs: clamp(1.625rem, 8.4vw, 2.25rem);
	}

	#founded .wp-block-buttons {
		gap: calc(0.5rem * var(--ce-fit-k-gap, 1)) calc(0.75rem * var(--ce-fit-k-gap, 1));
	}

	#founded .wp-block-button__link {
		--ce-fs: 1rem;
	}
}

.ce-textlink a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Arrow at the end of a section. Path from icons/Arrow.svg, painted with Primary. */
.ce-next {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 4.5rem;
	min-height: 4.5rem;
	margin: 0 auto clamp(1rem, 3svh, 2rem);
	padding: 0.75rem 1.5rem;
	color: var(--ce-primary);
	text-decoration: none;
	transition: transform 0.2s ease;
	pointer-events: auto;
}

.ce-next svg {
	display: block;
	width: min(1.75rem, 3.6svh);
	height: auto;
	overflow: visible;
	fill: none;
	stroke: var(--ce-primary);
	stroke-miterlimit: 10;
	stroke-width: 1.5;
}

.ce-next:hover {
	transform: translateY(0.25rem);
}

.ce-next:focus-visible {
	outline: 3px solid var(--ce-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--ce-focus-band);
	border-radius: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.ce-shape__photo,
	.ce-screen :is(h1, h2, p, .wp-block-buttons),
	.ce-next {
		transition: none;
	}
}