/**
 * Homepage styles.
 *
 * A light ground with black-and-white photography, and one warm accent
 * reserved for a single emphasised word, links, and the live figure. The
 * accent is never used decoratively, so that when it appears it means
 * something.
 */

/* Playfair Display — self-hosted, so no request leaves for Google. */
@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-latin.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
	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: "Playfair Display";
	src: url("../fonts/playfair-latin-ext.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
	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;
}

:root {
	--aim-ink: #14181d;
	--aim-ink-soft: #3d454f;
	--aim-muted: #6b7480;
	--aim-line: #e2e0da;
	--aim-sand: #f6f4ef;
	--aim-paper: #ffffff;

	/* The hero's light ground, matching the reference. */
	--aim-shell: #f4f4f2;

	/* Accent — used for a single emphasised word and for links. */
	--aim-accent: #e8880c;
	--aim-accent-dark: #c26f06;

	--aim-display: "Playfair Display", "Times New Roman", Times, serif;

	/* Drives both the cut-out's width and the gap left for it in the word. */
	--aim-subject-w: clamp(20rem, 40vw, 40rem);


	--aim-max: 1140px;
	--aim-gap: clamp(1rem, 3vw, 2rem);
	--aim-section-y: clamp(3.5rem, 8vw, 7rem);

	--aim-radius: 4px;
	--aim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.aim-home {
	color: var(--aim-ink);
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
	line-height: 1.65;
}

.aim-home section {
	padding-block: var(--aim-section-y);
}

.aim-home h1,
.aim-home h2 {
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
	margin: 0;
}

.aim-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aim-accent);
	margin: 0 0 1rem;
}

/* ---------------------------------------------------------------- buttons */

.aim-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9rem 1.9rem;
	border-radius: var(--aim-radius);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: background-color 0.18s var(--aim-ease),
		border-color 0.18s var(--aim-ease),
		transform 0.18s var(--aim-ease);
}

.aim-btn--primary {
	background: var(--aim-accent);
	color: #fff;
}

.aim-btn--primary:hover,
.aim-btn--primary:focus-visible {
	background: var(--aim-accent-dark);
	color: #fff;
	transform: translateY(-1px);
}

.aim-btn--ghost {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.aim-btn--ghost:hover,
.aim-btn--ghost:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

/* ------------------------------------------------------------------- hero */

.aim-hero {
	background: var(--aim-shell);
	padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
	overflow: hidden;
}

/*
 * The stage stacks three layers in one grid cell: the word at the back, the
 * cut-out animal in front of it, and the text blocks on top. Using a single
 * grid area rather than absolute positioning keeps the stage's height driven
 * by its tallest child, so nothing needs a fixed height.
 */
.aim-hero__stage {
	position: relative;
	width: min(100% - 2 * var(--aim-gap), var(--aim-max));
	margin-inline: auto;
	display: grid;
	grid-template-areas: "stage";
	place-items: center;
}

.aim-hero__stage > * {
	grid-area: stage;
}

/* slides ------------------------------------------------------------------ */

/*
 * Every slide occupies the same cell so the stage keeps the height of the
 * tallest one and nothing shifts as slides change. Inactive slides are taken
 * out of the flow visually but still contribute their height.
 */
.aim-hero__slide {
	display: grid;
	grid-template-areas: "stage";
	place-items: center;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s var(--aim-ease), visibility 0.5s var(--aim-ease);
}

.aim-hero__slide > * {
	grid-area: stage;
}

.aim-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* navigation -------------------------------------------------------------- */

.aim-hero__nav {
	align-self: end;
	justify-self: end;
	display: flex;
	gap: 0.6rem;
	z-index: 4;
}

.aim-hero__arrow {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1.5px solid rgb(0 0 0 / 0.22);
	border-radius: 50%;
	background: transparent;
	color: var(--aim-ink);
	cursor: pointer;
	transition: background-color 0.18s var(--aim-ease),
		border-color 0.18s var(--aim-ease), color 0.18s var(--aim-ease);
}

.aim-hero__arrow svg {
	width: 1.1rem;
	height: 1.1rem;
}

.aim-hero__arrow:hover,
.aim-hero__arrow:focus-visible {
	background: var(--aim-ink);
	border-color: var(--aim-ink);
	color: #fff;
}

.aim-hero__dots {
	align-self: center;
	justify-self: end;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	z-index: 4;
}

.aim-hero__dot {
	width: 0.6rem;
	height: 0.6rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.22);
	cursor: pointer;
	transition: background-color 0.18s var(--aim-ease), transform 0.18s var(--aim-ease);
}

.aim-hero__dot:hover {
	background: rgb(0 0 0 / 0.4);
}

.aim-hero__dot.is-active {
	background: var(--aim-accent);
	transform: scale(1.35);
}

/* the oversized word ------------------------------------------------------ */

.aim-hero__display {
	margin: 0;
	/*
	 * Anchored to the top rather than centred: the copy sits along the bottom
	 * edge, and a centred word collides with it. From the top the letters
	 * clear the text and the animal reads in front of them.
	 */
	align-self: start;
	justify-self: stretch;
	text-align: center;
	font-family: var(--aim-display);
	font-weight: 500;
	font-size: clamp(5rem, 22vw, 17rem);
	line-height: 0.9;
	letter-spacing: 0.02em;
	/* Pale enough that the headline crossing it stays readable. */
	color: #dcdbd7;
	user-select: none;
	z-index: 1;
}

/*
 * Split word: the letters sit either side of a gap the animal occupies.
 * The gap is narrower than the animal on purpose, so the two overlap
 * slightly and the animal reads as standing in front of the word rather
 * than slotted into a hole cut for it.
 */
.aim-hero__display.is-split {
	display: flex;
	justify-content: center;
	align-items: baseline;
}

.aim-hero__word-gap {
	flex: 0 0 auto;
	width: calc(var(--aim-subject-drawn, var(--aim-subject-w)) * 0.66);
}

/*
 * The letters are filled with the photograph. Two guards, because the cost of
 * getting this wrong is the word disappearing rather than merely looking
 * plain:
 *
 *   @supports  — a browser without background-clip would otherwise paint
 *                transparent text on a light ground.
 *   .has-fill  — set by PHP only when the image URL actually resolved. An
 *                attachment can outlive its file, and without this the word
 *                would go transparent with no background behind it.
 */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.aim-hero__display.has-fill {
		background-image: var(--aim-fill);
		background-size: cover;
		background-position: center 30%;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		/*
		 * Grayscale matches the cut-out's treatment — the text itself is
		 * transparent, so this acts only on the fill showing through.
		 *
		 * Lightened and faded on purpose: the headline crosses these letters,
		 * and the word has to sit behind it. Photographs vary in exposure, so
		 * a dark one would otherwise swallow the text.
		 */
		filter: grayscale(1) brightness(1.35) contrast(0.85) opacity(0.5);
	}
}

/* the cut-out subject ----------------------------------------------------- */

.aim-hero__subject {
	align-self: end;
	justify-self: center;
	z-index: 2;
	pointer-events: none;
}

/*
 * Actual drawn width: the narrower of the allowed width and the width a
 * full-height image would occupy at its own aspect ratio (--aim-ar, set per
 * slide from the attachment's real dimensions).
 *
 * Deriving it this way means the element box always matches the picture, so
 * object-fit never letterboxes, and the gap in the word can use the very same
 * figure — a portrait animal gets a narrow gap, a wide one a broad gap.
 */
.aim-hero__slide {
	--aim-subject-drawn: min(
		var(--aim-subject-w),
		calc(72vh * var(--aim-ar, 1))
	);
}

.aim-hero__cutout {
	display: block;
	width: var(--aim-subject-drawn);
	height: auto;
	object-position: bottom center;
	filter: grayscale(1) contrast(1.06);
}

/* text blocks ------------------------------------------------------------- */

.aim-hero__headline,
.aim-hero__aside {
	z-index: 3;
	pointer-events: none;
}

.aim-hero__headline > *,
.aim-hero__aside > * {
	pointer-events: auto;
}

.aim-hero__headline {
	align-self: end;
	justify-self: start;
	padding-bottom: clamp(1rem, 4vh, 3rem);
}

.aim-hero__headline h1 {
	margin: 0;
	font-family: var(--aim-display);
	font-weight: 700;
	font-size: clamp(1.4rem, 0.9rem + 1.9vw, 2.6rem);
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: var(--aim-ink);
}

/*
 * Each sentence holds its own line. Without nowrap the phrases break at
 * arbitrary words against the oversized letters behind them, which reads as
 * a stack of fragments rather than two statements.
 */
.aim-hero__line {
	display: block;
	white-space: nowrap;
}

.aim-hero__headline em {
	font-style: normal;
	color: var(--aim-accent);
}

.aim-hero__aside {
	align-self: end;
	justify-self: end;
	width: min(100%, 21rem);
	text-align: left;
	padding-bottom: clamp(1rem, 6vh, 4rem);
}

/* Clear the dot column so the two never sit on top of each other. */
[data-slider] .aim-hero__aside {
	margin-right: 2.75rem;
}

/*
 * A larger animal reaches under this text. Rather than shrinking the photo
 * or moving the copy, lay a wash of the page colour beneath it — faded in
 * from the left so it reads as light falling off, not as a panel dropped on
 * top. Keeps the text legible whatever photograph is behind it.
 */
.aim-hero__aside::before {
	content: "";
	position: absolute;
	inset: -1rem -1rem -1rem -2.5rem;
	z-index: -1;
	background: linear-gradient(
		90deg,
		rgb(244 244 242 / 0) 0%,
		rgb(244 244 242 / 0.82) 22%,
		rgb(244 244 242 / 0.94) 55%
	);
	pointer-events: none;
}

.aim-hero__aside {
	position: relative;
	isolation: isolate;
}

.aim-hero__headline .aim-hero__lead {
	margin-top: 1rem;
	max-width: 38ch;
}

.aim-hero__headline .aim-btn {
	margin-top: 1.5rem;
}

.aim-hero__subject-name {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.aim-hero__lead {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--aim-ink-soft);
}

.aim-hero__caption {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
	color: var(--aim-muted);
}

/* Understated link, in the manner of the reference's "DETAILS". */
.aim-link {
	display: inline-block;
	margin-top: 1.25rem;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid var(--aim-ink);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--aim-ink);
	transition: color 0.18s var(--aim-ease), border-color 0.18s var(--aim-ease);
}

.aim-link:hover,
.aim-link:focus-visible {
	color: var(--aim-accent);
	border-color: var(--aim-accent);
}

/* figures ----------------------------------------------------------------- */

.aim-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(2rem, 6vw, 4.5rem);
	width: min(100% - 2 * var(--aim-gap), var(--aim-max));
	margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
	padding-top: clamp(1.25rem, 3vw, 2rem);
	border-top: 1px solid rgb(0 0 0 / 0.12);
}

.aim-hero__stat dt {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aim-muted);
}

.aim-hero__stat dd {
	margin: 0.4rem 0 0;
	font-family: var(--aim-display);
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--aim-ink);
}

/*
 * Below roughly 60rem the three layers stop coexisting: the word, the animal
 * and the copy each need the full width, so the stage unstacks into a column.
 */
@media (max-width: 60rem) {
	.aim-hero__stage {
		grid-template-areas:
			"word"
			"subject"
			"headline"
			"aside";
		place-items: stretch;
		gap: 0;
	}

	.aim-hero__display  { grid-area: word; }
	.aim-hero__subject  { grid-area: subject; margin-top: -12vw; }
	.aim-hero__headline { grid-area: headline; }
	.aim-hero__aside    { grid-area: aside; }

	.aim-hero__display {
		font-size: clamp(3.5rem, 20vw, 9rem);
	}

	.aim-hero__cutout {
		height: clamp(15rem, 44vh, 24rem);
		margin-inline: auto;
	}

	.aim-hero__headline {
		max-width: none;
		justify-self: start;
		padding-bottom: 0;
		margin-top: 1.5rem;
	}

	/* Too narrow to hold a full sentence on one line — wrapping wins here. */
	.aim-hero__line {
		white-space: normal;
	}

	.aim-hero__aside {
		justify-self: start;
		width: 100%;
		max-width: 34rem;
		padding-bottom: 0;
		margin-top: 1.5rem;
	}

	/* Stacked layout: nothing to clear, and the dots move below the stage. */
	[data-slider] .aim-hero__aside {
		margin-right: 0;
	}

	.aim-hero__slide {
		grid-template-areas:
			"word"
			"subject"
			"aside";
	}

	.aim-hero__display  { grid-area: word; }
	.aim-hero__subject  { grid-area: subject; }
	.aim-hero__aside    { grid-area: aside; }

	.aim-hero__dots {
		flex-direction: row;
		justify-self: center;
		align-self: end;
		margin-top: 1.5rem;
	}

	.aim-hero__nav {
		justify-self: center;
		align-self: end;
	}
}

/* Without a photograph the stage has no subject layer to make room for. */
.aim-hero:not(.has-photo) .aim-hero__stage {
	min-height: clamp(18rem, 40vh, 26rem);
}

/* ------------------------------------------------------------------ about */

.aim-about {
	background: var(--aim-paper);
}

.aim-about__inner {
	width: min(100% - 2 * var(--aim-gap), 780px);
	margin-inline: auto;
	text-align: center;
}

.aim-about__title {
	font-size: clamp(1.85rem, 1.4rem + 2vw, 2.85rem);
	font-weight: 700;
}

.aim-about__expand {
	display: block;
	font-size: 0.62em;
	font-weight: 500;
	color: var(--aim-muted);
	letter-spacing: -0.01em;
	margin-top: 0.4rem;
}

.aim-about__body {
	margin: 1.75rem 0 0;
	font-size: clamp(1.02rem, 1rem + 0.25vw, 1.15rem);
	color: var(--aim-ink-soft);
	text-align: left;
}

.aim-about__pull {
	margin: 2.25rem 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--aim-line);
	font-size: clamp(1.15rem, 1rem + 0.75vw, 1.5rem);
	font-weight: 600;
	color: var(--aim-ink);
}

/* ------------------------------------------------------------------ stats */

.aim-stats {
	background: var(--aim-sand);
	border-block: 1px solid var(--aim-line);
}

.aim-stats__inner {
	width: min(100% - 2 * var(--aim-gap), var(--aim-max));
	margin-inline: auto;
}

.aim-stats__head {
	max-width: 46ch;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.aim-stats__title {
	font-size: clamp(1.85rem, 1.4rem + 2vw, 2.85rem);
	font-weight: 700;
}

.aim-stats__sub {
	margin: 1rem 0 0;
	color: var(--aim-ink-soft);
	font-size: 1.05rem;
}

.aim-stats__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--aim-line);
	border: 1px solid var(--aim-line);
	border-radius: var(--aim-radius);
	overflow: hidden;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.aim-stats__item {
	background: var(--aim-paper);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.aim-stats__value {
	font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.aim-stats__label {
	font-weight: 600;
	font-size: 1.05rem;
}

.aim-stats__note {
	color: var(--aim-muted);
	font-size: 0.9rem;
}

/* The live figure earns the red; the historical totals do not. */
.aim-stats__item.is-live .aim-stats__value {
	color: var(--aim-accent);
}

.aim-stats__item.is-live .aim-stats__label::after {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: 0.5rem;
	border-radius: 50%;
	background: var(--aim-accent);
	animation: aim-pulse 2.2s var(--aim-ease) infinite;
}

@keyframes aim-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

/* -------------------------------------------------------------------- map */

.aim-regions {
	background: var(--aim-paper);
}

.aim-regions__inner {
	width: min(100% - 2 * var(--aim-gap), var(--aim-max));
	margin-inline: auto;
}

.aim-regions__head {
	max-width: 48ch;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.aim-regions__title {
	font-size: clamp(1.85rem, 1.4rem + 2vw, 2.85rem);
	font-weight: 700;
}

.aim-regions__sub {
	margin: 1rem 0 0;
	color: var(--aim-ink-soft);
	font-size: 1.05rem;
}

.aim-map {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
	.aim-map {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}

.aim-map__figure {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 26rem;
}

.aim-map svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.aim-map__region path {
	fill: var(--aim-region-fill, #e8e5de);
	stroke: var(--aim-paper);
	stroke-width: 2;
	stroke-linejoin: round;
	transition: fill 0.2s var(--aim-ease), transform 0.2s var(--aim-ease);
	transform-origin: center;
	cursor: pointer;
}

/*
 * Intensity steps. Tinting one hue rather than cycling colours keeps the
 * scale readable as a quantity, and stays legible for colour-blind viewers.
 */
.aim-map__region[data-level="0"] { --aim-region-fill: #eceae4; }
.aim-map__region[data-level="1"] { --aim-region-fill: #f9dcb4; }
.aim-map__region[data-level="2"] { --aim-region-fill: #f2bd74; }
.aim-map__region[data-level="3"] { --aim-region-fill: #ee9f36; }
.aim-map__region[data-level="4"] { --aim-region-fill: #e8880c; }

.aim-map__region:hover path,
.aim-map__region:focus-visible path,
.aim-map__region.is-active path {
	fill: var(--aim-ink);
}

.aim-map__region:focus-visible {
	outline: none;
}

.aim-map__region:focus-visible path {
	stroke: var(--aim-ink);
	stroke-width: 3;
}

.aim-map__tooltip {
	position: absolute;
	z-index: 3;
	transform: translate(-50%, -130%);
	background: var(--aim-ink);
	color: #fff;
	padding: 0.5rem 0.75rem;
	border-radius: var(--aim-radius);
	font-size: 0.85rem;
	line-height: 1.35;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
}

.aim-map__tooltip strong {
	display: block;
	font-size: 0.95rem;
}

/* legend */

.aim-map__legend {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--aim-line);
}

.aim-map__legend-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 0.25rem;
	border-bottom: 1px solid var(--aim-line);
	transition: background-color 0.18s var(--aim-ease);
	cursor: pointer;
}

.aim-map__legend-item:hover,
.aim-map__legend-item.is-active {
	background: var(--aim-sand);
}

.aim-map__swatch {
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 2px;
	background: var(--aim-region-fill, #eceae4);
}

.aim-map__legend-item[data-level="0"] { --aim-region-fill: #eceae4; }
.aim-map__legend-item[data-level="1"] { --aim-region-fill: #f9dcb4; }
.aim-map__legend-item[data-level="2"] { --aim-region-fill: #f2bd74; }
.aim-map__legend-item[data-level="3"] { --aim-region-fill: #ee9f36; }
.aim-map__legend-item[data-level="4"] { --aim-region-fill: #e8880c; }

.aim-map__legend-name {
	font-weight: 600;
}

.aim-map__legend-count {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--aim-ink);
}

.aim-map__note {
	margin: 1.25rem 0 0;
	font-size: 0.78rem;
	color: var(--aim-muted);
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
	.aim-home *,
	.aim-home *::before,
	.aim-home *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}