/*
* CmiA Annual Report
 *
 * The design is an InDesign artboard 1920 pt wide with a 870 pt centred content
 * column. Rather than translate every measurement by hand,
the whole stylesheet
 * is written in one design unit,
--ar-u,
which equals exactly 1px once the
 * viewport is wide enough. So `calc(42 * var(--ar-u))` is literally "42 pt in the
 * PDF",
and at 1920px the rendering is the design at 1:1.
 *
 * Sections:
 *   00 tokens        04 typography     08 accordion & expander
 *   01 reset         05 buttons        09 slider
 *   02 layout        06 figures        10 sections
 *   03 bands         07 charts         11 responsive & motion
 */

/* ══════════════════════════════════════════════════ 00 tokens ═══ */

.cmia-ar {
	/* Palette taken from the PDF annotations, not from a render of it - colour
	   conversion shifts the rendered pixels (#ec6244 for a specified #eb6144). */
	--ar-ink: #052837;
	--ar-navy: #002f47;
	--ar-orange: #eb6144;
	--ar-green: #74956c;
	--ar-greige: #d1b59f;
	--ar-greige-50: #e8dacf;
	--ar-sand: #e9cea4;
	--ar-sky: #d8e7f4;
	--ar-paper: #f2f2f0;
	--ar-lime: #e0e163;
	--ar-mint: #a8d1a3;
	--ar-white: #fff;

	--ar-sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* IvyPresto Text is the designed face but is not licensed for this project;
	   Cormorant Garamond stands in. Drop the licensed woff2 into assets/fonts,
	   add its @font-face, and this line is the only change needed. */
	--ar-serif: "IvyPresto Text", "Cormorant Garamond", Georgia, "Times New Roman", serif;

	/* Kept at 1: the serif sizes below are already measured against the PDF. Only
	   adjust if the licensed IvyPresto is dropped in, which sits differently. */
	--ar-serif-scale: 1;

	--ar-gutter: clamp(20px, 4vw, 72px);
	--ar-vw: 100vw;
	--ar-u: clamp(0.74px, calc((var(--ar-vw) - 2 * var(--ar-gutter)) / 870), 1px);

	--ar-col: 870;
	--ar-col-wide: 1278;

	/* Type scale in design units, derived from the PDF's own text metrics:
	   every size below is `100 * pdf_line_width / width_of_the_same_string_at_100px`,
	   measured with tools/verify/calibrate.html. Nothing here was eyeballed. */
	--ar-fs-h2: 38.3;
	--ar-fs-h3: 30.2;
	--ar-fs-quote: 33.3;
	--ar-fs-body: 20.6;
	--ar-fs-body-sm: 16.7;
	--ar-fs-link: 20.2;
	--ar-fs-table: 14.5;
	--ar-fs-table-head: 16.2;
	--ar-fs-label: 14.5;
	--ar-fs-eyebrow: 15.3;
	--ar-fs-kicker: 14.6;
	--ar-fs-slide-kicker: 10.2;
	--ar-fs-slide-title: 16;
	--ar-fs-slide-partner: 16.3;
	--ar-fs-spot-title: 20;
	--ar-fs-attribution: 10.2;
	--ar-fs-footnote: 7.1;
	--ar-fs-btn: 25.25;
	--ar-fs-btn-sm: 11.7;
	--ar-fs-num-lg: 50;
	--ar-fs-num-md: 48;

	--ar-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ═══════════════════════════════════════════════════ 01 reset ═══ */

/* Class selectors alone would lose to the theme's Foundation rules on bare
elements,
so the reset matches on descendants of the scope and wins on
   specificity. It is deliberately not wrapped in :where(). */
.cmia-ar {
	box-sizing: border-box;
	color: var(--ar-navy);
	font-family: var(--ar-sans);
	font-weight: 400;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.cmia-ar *,
.cmia-ar *::before,
.cmia-ar *::after {
	box-sizing: inherit;
}

.cmia-ar h1,
.cmia-ar h2,
.cmia-ar h3,
.cmia-ar h4,
.cmia-ar p,
.cmia-ar figure,
.cmia-ar blockquote,
.cmia-ar dl,
.cmia-ar dd,
.cmia-ar dt,
.cmia-ar ul,
.cmia-ar ol,
.cmia-ar li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	list-style: none;
}

.cmia-ar img,
.cmia-ar svg,
.cmia-ar picture {
	display: block;
	max-width: 100%;
}

.cmia-ar img {
	height: auto;
}

.cmia-ar button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* The theme's Foundation build paints tables: tbody gets a white ground and a
   border, thead and tfoot a grey one, and every even row is striped. All of it
   is scoped to bare elements, so the report has to name the same elements to
   outrank it - a .ar-table class alone would lose. */
.cmia-ar table,
.cmia-ar thead,
.cmia-ar tbody,
.cmia-ar tfoot,
.cmia-ar tr,
.cmia-ar th,
.cmia-ar td,
.cmia-ar caption {
	border: 0;
	background: none;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	text-align: left;
}

.cmia-ar table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.cmia-ar tbody tr:nth-child(even) { background: none; }

.cmia-ar th,
.cmia-ar td,
.cmia-ar caption {
	padding: 0;
}

.cmia-ar .ar-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ══════════════════════════════════════════════════ 02 layout ═══ */

/* Break out of whatever container the theme's page template puts us in.
--ar-vw defaults to 100vw and is corrected by JS to the document element's
   client width,
which excludes a reserved scrollbar. */
.cmia-ar {
	width: var(--ar-vw);
	max-width: var(--ar-vw);
	margin-inline: calc(50% - var(--ar-vw) / 2);
	overflow-x: clip;
}

.cmia-ar .ar-wrap {
	width: min(calc(var(--ar-col) * var(--ar-u)), calc(100% - 2 * var(--ar-gutter)));
	margin-inline: auto;
}

.cmia-ar .ar-wrap--wide {
	width: min(calc(var(--ar-col-wide) * var(--ar-u)), calc(100% - 2 * var(--ar-gutter)));
}

/* ═══════════════════════════════════════════════════ 03 bands ═══ */

.cmia-ar .ar-band {
	position: relative;
	width: 100%;
}

.cmia-ar .ar-band--white { background: var(--ar-white); }
.cmia-ar .ar-band--paper { background: var(--ar-paper); }
.cmia-ar .ar-band--orange { background: var(--ar-orange); }
.cmia-ar .ar-band--green { background: var(--ar-green); }
.cmia-ar .ar-band--greige { background: var(--ar-greige); }
.cmia-ar .ar-band--greige-50 { background: var(--ar-greige-50); }
.cmia-ar .ar-band--sand { background: var(--ar-sand); }
.cmia-ar .ar-band--sky { background: var(--ar-sky); }

.cmia-ar .ar-band--results {
	/* A soft mesh gradient in the artwork; carried as a small JPEG because it is
	   entirely low-frequency and scales up without a visible seam. It is stretched
	   rather than covered: `cover` would scale the square source to the band's
	   height and crop away most of its width, leaving only the green centre. */
	background: #123c61 url("../img/results-gradient.jpg") 0 0 / 100% 100% no-repeat;
	color: var(--ar-white);
}

.cmia-ar .ar-band__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.cmia-ar .ar-band__bg picture,
.cmia-ar .ar-band__bg img {
	width: 100%;
	height: 100%;
}

.cmia-ar .ar-band__bg img {
	object-fit: cover;
	object-position: center;
}

.cmia-ar .ar-band > .ar-wrap {
	position: relative;
	z-index: 1;
}

/* ══════════════════════════════════════════════ 04 typography ═══ */

.cmia-ar .ar-h2 {
	font-size: calc(var(--ar-fs-h2) * var(--ar-u));
	line-height: calc(50 * var(--ar-u));
	font-weight: 700;
	letter-spacing: -.005em;
}

.cmia-ar .ar-h2--center { text-align: center; }
.cmia-ar .ar-h2--light { color: var(--ar-white); }

.cmia-ar .ar-prose {
	font-size: calc(var(--ar-fs-body) * var(--ar-u));
	line-height: calc(30.7 * var(--ar-u));
	/* The design only breaks words where it sets a discretionary hyphen. */
	hyphens: manual;
}

.cmia-ar .ar-prose p + p { margin-top: calc(14 * var(--ar-u)); }
.cmia-ar .ar-prose--tight p + p { margin-top: 0; }
.cmia-ar .ar-prose--bold { font-weight: 600; }
.cmia-ar .ar-prose--center { text-align: center; }
.cmia-ar .ar-prose--light { color: var(--ar-white); }
.cmia-ar .ar-prose--small { font-size: calc(var(--ar-fs-body-sm) * var(--ar-u)); line-height: calc(20 * var(--ar-u)); }
.cmia-ar .ar-prose--slide { font-size: calc(var(--ar-fs-body-sm) * var(--ar-u)); line-height: calc(19.4 * var(--ar-u)); }
.cmia-ar .ar-prose sup { font-size: .7em; vertical-align: super; line-height: 0; }

.cmia-ar .ar-lede {
	font-size: calc(var(--ar-fs-h3) * var(--ar-u));
	line-height: 1.3;
	text-align: center;
	color: var(--ar-white);
}

.cmia-ar .ar-kicker {
	font-size: calc(var(--ar-fs-kicker) * var(--ar-u));
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ar-white);
}

/* The kickers on the slide cards ("Burkina Faso:", "Project partner:") are a
   separate, much smaller role than the section kickers. */
.cmia-ar .ar-slide-kicker {
	font-size: calc(var(--ar-fs-slide-kicker) * var(--ar-u));
	line-height: 1.5;
	font-weight: 700;
	color: var(--ar-navy);
}

.cmia-ar .ar-footnote {
	font-size: calc(var(--ar-fs-footnote) * var(--ar-u));
	line-height: 1.4;
	text-align: center;
}

/* A heading over a hairline rule - the recurring section divider. */
.cmia-ar .ar-rule {
	font-size: calc(var(--ar-fs-h3) * var(--ar-u));
	line-height: 1.2;
	padding-bottom: calc(14 * var(--ar-u));
	border-bottom: 1px solid currentColor;
}

.cmia-ar .ar-rule--light { color: var(--ar-white); }

/* ═════════════════════════════════════════════════ 05 buttons ═══ */

.cmia-ar .ar-btn {
	display: inline-block;
	padding: calc(9 * var(--ar-u)) calc(22 * var(--ar-u));
	font-size: calc(var(--ar-fs-btn) * var(--ar-u));
	line-height: 1.25;
	font-weight: 400;
	letter-spacing: .045em;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter .2s ease;
}

.cmia-ar .ar-btn:hover { filter: brightness(1.06); }

.cmia-ar .ar-btn--orange {
	background: var(--ar-orange);
	color: var(--ar-white);
}

.cmia-ar .ar-btn--yellow {
	padding: calc(7 * var(--ar-u)) calc(16 * var(--ar-u));
	background: var(--ar-lime);
	color: var(--ar-navy);
	font-size: calc(var(--ar-fs-btn-sm) * var(--ar-u));
	font-weight: 700;
	letter-spacing: .05em;
}

.cmia-ar .ar-btn[aria-disabled="true"] { cursor: default; }

/* ═════════════════════════════════════════════════ 06 figures ═══ */

/* The large serif numerals. tabular-nums keeps the digits from shifting width
while they count up,
which would otherwise make the figure visibly jitter. */
.cmia-ar .ar-figure {
	display: block;
	font-family: var(--ar-serif);
	font-weight: 400;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
	line-height: 1;
}

.cmia-ar .ar-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.cmia-ar .ar-stat__icon {
	width: auto;
	height: calc(30 * var(--ar-u));
	margin-bottom: calc(12 * var(--ar-u));
	color: var(--ar-navy);
}

.cmia-ar .ar-stat__figure {
	font-size: calc(var(--ar-fs-num-lg) * var(--ar-serif-scale) * var(--ar-u));
	margin-bottom: calc(10 * var(--ar-u));
}

.cmia-ar .ar-stat__label {
	font-size: calc(var(--ar-fs-label) * var(--ar-u));
	line-height: 1.28;
	font-weight: 500;
}

/* The "+32 %" style rise indicator: arrow, figure, bar, caption. */
.cmia-ar .ar-rise {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 calc(14 * var(--ar-u));
	align-items: end;
}

.cmia-ar .ar-rise__icon {
	width: calc(21 * var(--ar-u));
	height: calc(21 * var(--ar-u));
	margin-bottom: calc(6 * var(--ar-u));
	color: var(--ar-navy);
}

.cmia-ar .ar-rise__figure {
	font-size: calc(var(--ar-fs-num-md) * var(--ar-serif-scale) * var(--ar-u));
	margin-bottom: calc(10 * var(--ar-u));
}

.cmia-ar .ar-rise__label {
	display: block;
	margin-top: calc(10 * var(--ar-u));
	font-size: calc(var(--ar-fs-label) * var(--ar-u));
	line-height: 1.28;
	font-weight: 500;
	text-align: center;
}

.cmia-ar .ar-bar {
	display: block;
	width: calc(337 * var(--ar-u));
	max-width: 100%;
	height: calc(14.66 * var(--ar-u));
	background: var(--ar-bar-track);
}

.cmia-ar .ar-bar__fill {
	display: block;
	width: var(--ar-bar-fill);
	height: 100%;
	background: var(--ar-ink);
	transform-origin: left center;
	transition: transform 1.1s var(--ar-ease);
}

.cmia-ar .ar-bar.is-armed .ar-bar__fill { transform: scaleX(0); }
.cmia-ar .ar-bar.is-in .ar-bar__fill { transform: scaleX(1); }

/* ══════════════════════════════════════════════════ 07 charts ═══ */

.cmia-ar .ar-donut {
	display: block;
	width: 100%;
	height: auto;
}

/* pathLength="100" normalises the circumference, so the dash values are the
percentages themselves. The final arcs are inline,
so the chart is complete
   before any script runs; JS only rewinds it when it is still below the fold. */
.cmia-ar .ar-donut__seg {
	stroke-dasharray: var(--seg-len) 100;
	transition: stroke-dasharray .9s var(--ar-ease) var(--seg-delay, 0ms);
}

.cmia-ar .ar-donut.is-armed .ar-donut__seg { stroke-dasharray: 0 100; }
.cmia-ar .ar-donut.is-in .ar-donut__seg { stroke-dasharray: var(--seg-len) 100; }

.cmia-ar .ar-legend__item { display: block; }

.cmia-ar .ar-legend__figure {
	display: inline-block;
	font-size: calc(var(--ar-fs-num-md) * var(--ar-serif-scale) * var(--ar-u));
}

.cmia-ar .ar-legend__label {
	display: block;
	margin-top: calc(6 * var(--ar-u));
	font-size: calc(var(--ar-fs-label) * var(--ar-u));
	line-height: 1.28;
	font-weight: 500;
}

.cmia-ar .ar-legend__item--light { color: var(--ar-white); }
.cmia-ar .ar-legend__item--muted { color: #b9cdcd; }
.cmia-ar .ar-legend__item--lime { color: var(--ar-lime); }
.cmia-ar .ar-legend__item--greige { color: var(--ar-greige); }

/* ═══════════════════════════════════════════════════ 08 table ═══ */

/* Column widths taken from the PDF: the table runs 951 to 1390, and the four
   figure columns end at 1177, 1248, 1324 and 1390. Fixed layout keeps the label
   column from stealing width and letting the figures run into each other -
   in the design "Licensing income" wraps rather than pushing the numbers over. */
.cmia-ar .ar-table {
	width: calc(438.5 * var(--ar-u));
	table-layout: fixed;
	font-size: calc(var(--ar-fs-table) * var(--ar-u));
	/* Labels that wrap are set tighter than the rows are spaced: in the design a
	   two-line label sits inside the same 42.6 unit row as a one-line one. */
	line-height: calc(16.7 * var(--ar-u));
	font-variant-numeric: tabular-nums;
}

.cmia-ar .ar-table th,
.cmia-ar .ar-table td {
	padding: 0;
	vertical-align: middle;
}

.cmia-ar .ar-table thead th {
	padding-bottom: calc(29.5 * var(--ar-u));
	font-size: calc(var(--ar-fs-table) * var(--ar-u));
	font-weight: 400;
	vertical-align: top;
	border-bottom: 1px solid rgba(255, 255, 255, .8);
}

.cmia-ar .ar-table thead th:first-child {
	font-size: calc(var(--ar-fs-table-head) * var(--ar-u));
	color: var(--ar-lime);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.cmia-ar .ar-table tbody th,
.cmia-ar .ar-table tbody td { height: calc(42.6 * var(--ar-u)); }

.cmia-ar .ar-table__num { text-align: right; padding-left: calc(8 * var(--ar-u)); }
.cmia-ar .ar-table__rowhead { font-weight: 400; }

.cmia-ar .ar-table tr > *:nth-child(1) { width: calc(148 * var(--ar-u)); }
.cmia-ar .ar-table tr > *:nth-child(2) { width: calc(78.1 * var(--ar-u)); }
.cmia-ar .ar-table tr > *:nth-child(3) { width: calc(70.8 * var(--ar-u)); }
.cmia-ar .ar-table tr > *:nth-child(4) { width: calc(75.5 * var(--ar-u)); }
.cmia-ar .ar-table tr > *:nth-child(5) { width: calc(66.1 * var(--ar-u)); }

.cmia-ar .ar-table tfoot th,
.cmia-ar .ar-table tfoot td {
	padding-top: calc(10 * var(--ar-u));
	font-size: calc(var(--ar-fs-table-head) * var(--ar-u));
	line-height: calc(21.7 * var(--ar-u));
	vertical-align: top;
	border-top: 1px solid rgba(255, 255, 255, .8);
}

/* ══════════════════════════════ 09 accordion & expander ═══ */

.cmia-ar .ar-accordion__item { border-bottom: 1px solid var(--ar-navy); }
.cmia-ar .ar-accordion__item:first-child { border-top: 1px solid var(--ar-navy); }

.cmia-ar .ar-accordion__heading { font: inherit; }

.cmia-ar .ar-accordion__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(20 * var(--ar-u));
	width: 100%;
	padding: calc(18 * var(--ar-u)) 0;
	text-align: left;
	color: var(--ar-orange);
}

.cmia-ar .ar-accordion__title {
	font-size: calc(var(--ar-fs-h3) * var(--ar-u));
	line-height: 1.2;
}

.cmia-ar .ar-accordion__chevron {
	flex: 0 0 auto;
	width: calc(26 * var(--ar-u));
	height: calc(26 * var(--ar-u));
	color: var(--ar-navy);
	transition: transform .3s ease;
}

.cmia-ar .ar-accordion__item[data-open] .ar-accordion__chevron { transform: rotate(180deg); }

/* Panels are open by default, so the copy is present without JavaScript; the
   script measures each one and collapses it. The grid 0fr -> 1fr technique is
   deliberately not used here: an item with overflow:hidden has an automatic
   minimum size of zero, so the flexible track collapses and never reopens. */
.cmia-ar .ar-accordion__panel {
	overflow: hidden;
	transition: height .4s var(--ar-ease);
}

.cmia-ar .ar-accordion__inner > * { padding-bottom: calc(16 * var(--ar-u)); }

/* Collapsed only once the toggle is live, so a no-JS reader keeps the full note. */
.cmia-ar .ar-expander__more { display: block; }

.cmia-ar .ar-expander.is-collapsible .ar-expander__more {
	overflow: hidden;
	transition: height .45s var(--ar-ease);
}

.cmia-ar .ar-expander__toggle {
	margin-top: calc(18 * var(--ar-u));
	font-size: calc(var(--ar-fs-link) * var(--ar-u));
	text-decoration: underline;
	text-underline-offset: .25em;
}

/* ══════════════════════════════════════════════════ 10 slider ═══ */

.cmia-ar .ar-slider { position: relative; }

.cmia-ar .ar-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cmia-ar .ar-slider__track::-webkit-scrollbar { display: none; }

.cmia-ar .ar-slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

/* The design crops every slide frame to a fixed height rather than letting the
   photograph's own aspect ratio drive it. */
.cmia-ar .ar-slider--cccp .ar-slider__slide,
.cmia-ar .ar-slider--interviews .ar-slider__slide {
	min-height: calc(551 * var(--ar-u));
}

.cmia-ar .ar-cccp-slide__media,
.cmia-ar .ar-interview__media {
	position: relative;
	overflow: hidden;
}

.cmia-ar .ar-cccp-slide__media picture,
.cmia-ar .ar-interview__media picture,
.cmia-ar .ar-cccp-slide__media img,
.cmia-ar .ar-interview__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cmia-ar .ar-slider__nav {
	display: flex;
	justify-content: space-between;
	margin-top: calc(26 * var(--ar-u));
}

/* In the design the arrow on the exhausted side is a plain white disc and the
live one carries the section accent - that is exactly the disabled state. */
.cmia-ar .ar-slider__btn {
	display: grid;
	place-items: center;
	width: calc(46 * var(--ar-u));
	height: calc(46 * var(--ar-u));
	border-radius: 50%;
	background: var(--ar-slider-accent, var(--ar-lime));
	color: var(--ar-navy);
	transition: background .2s ease, opacity .2s ease;
}

.cmia-ar .ar-slider__btn[disabled] {
	background: var(--ar-white);
	cursor: default;
}

.cmia-ar .ar-slider__btn--prev .ar-slider__icon { transform: scaleX(-1); }

.cmia-ar .ar-slider__icon {
	width: calc(22 * var(--ar-u));
	height: calc(22 * var(--ar-u));
}

.cmia-ar .ar-slider--interviews,
.cmia-ar .ar-slider--spotlight { --ar-slider-accent: var(--ar-sky); }

/* ════════════════════════════════════════════════ 11 sections ═══ */

/* 1 - hero */
.cmia-ar .ar-band--hero { min-height: calc(956 * var(--ar-u)); }

.cmia-ar .ar-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(956 * var(--ar-u));
	padding: calc(80 * var(--ar-u)) 0;
	text-align: center;
}

.cmia-ar .ar-hero__title {
	width: calc(604 * var(--ar-u));
	max-width: 100%;
	margin-bottom: calc(74 * var(--ar-u));
}

.cmia-ar .ar-hero__title svg {
	width: 100%;
	height: auto;
	fill: var(--ar-navy);
}

/* 2 - founder */
.cmia-ar .ar-band--founder,
.cmia-ar .ar-band--white[data-ar-section="founder"] { min-height: calc(1266 * var(--ar-u)); }

.cmia-ar .ar-founder {
	display: grid;
	grid-template-columns: calc(423 * var(--ar-u)) 1fr;
	gap: 0 calc(218 * var(--ar-u));
	padding: calc(56 * var(--ar-u)) 0 calc(90 * var(--ar-u));
}

.cmia-ar .ar-founder__headline {
	font-size: calc(var(--ar-fs-h2) * var(--ar-u));
	line-height: calc(54 * var(--ar-u));
	font-weight: 700;
}

.cmia-ar .ar-founder__portrait { margin-top: calc(48 * var(--ar-u)); }

.cmia-ar .ar-founder__quote {
	width: calc(460 * var(--ar-u));
	margin-top: calc(40 * var(--ar-u));
	font-size: calc(var(--ar-fs-quote) * var(--ar-u));
	line-height: calc(43 * var(--ar-u));
	color: var(--ar-navy);
}

.cmia-ar .ar-founder__note { align-self: start; }

/* 3 - consolidated results */
.cmia-ar .ar-band--results { padding: calc(96 * var(--ar-u)) 0 calc(155 * var(--ar-u)); }
.cmia-ar .ar-band--results .ar-h2 { margin-bottom: calc(38 * var(--ar-u)); }
.cmia-ar .ar-band--results .ar-prose { max-width: calc(825 * var(--ar-u)); }

.cmia-ar .ar-fin { margin-top: calc(70 * var(--ar-u)); }
.cmia-ar .ar-fin + .ar-fin { margin-top: calc(127 * var(--ar-u)); }
.cmia-ar .ar-fin .ar-rule { margin-bottom: calc(30 * var(--ar-u)); color: var(--ar-mint); }
.cmia-ar .ar-fin__table { padding-top: calc(112 * var(--ar-u)); }

.cmia-ar .ar-fin__grid {
	display: grid;
	grid-template-columns: calc(298 * var(--ar-u)) 1fr;
	gap: 0 calc(126 * var(--ar-u));
	align-items: start;
}

.cmia-ar .ar-legend {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(26 * var(--ar-u)) calc(22 * var(--ar-u));
	margin-top: calc(34 * var(--ar-u));
}

.cmia-ar .ar-legend--row {
	grid-template-columns: repeat(3, 1fr);
	max-width: calc(430 * var(--ar-u));
	margin-inline: auto;
}

/* 4 - CCCP header image */
.cmia-ar .ar-band--cccp-header { height: calc(489 * var(--ar-u)); }
.cmia-ar .ar-band--cccp-header img { object-position: 50% 15%; }

/* 5 - CCCP */
.cmia-ar .ar-band--orange[data-ar-section="cccp"] { padding: calc(64 * var(--ar-u)) 0 calc(64 * var(--ar-u)); color: var(--ar-white); }
.cmia-ar .ar-band--orange[data-ar-section="cccp"] .ar-lede { margin-top: calc(30 * var(--ar-u)); }
.cmia-ar .ar-band--orange[data-ar-section="cccp"] .ar-rule { margin: calc(150 * var(--ar-u)) 0 calc(30 * var(--ar-u)); }
.cmia-ar .ar-band--orange[data-ar-section="cccp"] .ar-rule:first-of-type { margin-top: calc(79 * var(--ar-u)); }

.cmia-ar .ar-outputs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(65 * var(--ar-u));
}

.cmia-ar .ar-outputs__title {
	margin-bottom: calc(14 * var(--ar-u));
	font-size: calc(var(--ar-fs-eyebrow) * var(--ar-u));
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #f0b3a2;
}

.cmia-ar .ar-outputs__row {
	display: grid;
	grid-template-columns: calc(76 * var(--ar-u)) 1fr;
	gap: calc(10 * var(--ar-u));
	align-items: center;
	padding: calc(14 * var(--ar-u)) 0;
	border-bottom: 1px solid rgba(255, 255, 255, .55);
}

.cmia-ar .ar-outputs__figure { font-size: calc(var(--ar-fs-num-md) * var(--ar-serif-scale) * var(--ar-u)); }

.cmia-ar .ar-outputs__row dd {
	font-size: calc(var(--ar-fs-label) * var(--ar-u));
	line-height: 1.28;
	font-weight: 500;
}

.cmia-ar .ar-coop { margin-top: calc(30 * var(--ar-u)); }

.cmia-ar .ar-donut--coop {
	width: calc(260 * var(--ar-u));
	margin: 0 auto calc(26 * var(--ar-u));
}

.cmia-ar .ar-slider--cccp { margin-top: calc(105 * var(--ar-u)); }

.cmia-ar .ar-cccp-slide {
	display: grid;
	grid-template-columns: 1fr calc(272 * var(--ar-u));
	background: var(--slide-bg);
	color: var(--ar-navy);
}

.cmia-ar .ar-cccp-slide__media img { height: 100%; object-fit: cover; }

.cmia-ar .ar-cccp-slide__body { padding: calc(40 * var(--ar-u)) calc(46 * var(--ar-u)) calc(34 * var(--ar-u)); }
.cmia-ar .ar-cccp-slide__title { margin: calc(2 * var(--ar-u)) 0 calc(14 * var(--ar-u)); }

.cmia-ar .ar-cccp-slide__title {
	margin: calc(2 * var(--ar-u)) 0 calc(18 * var(--ar-u));
	font-size: calc(var(--ar-fs-slide-title) * var(--ar-u));
	line-height: calc(20 * var(--ar-u));
	font-weight: 800;
	text-transform: uppercase;
}

.cmia-ar .ar-cccp-slide__partner {
	margin-bottom: calc(28 * var(--ar-u));
	font-size: calc(var(--ar-fs-slide-partner) * var(--ar-u));
	font-weight: 500;
	text-transform: uppercase;
}

.cmia-ar .ar-cccp__cta { margin-top: calc(46 * var(--ar-u)); text-align: center; }

/* 6 - 20 years */
.cmia-ar .ar-band--white[data-ar-section="twenty-years"] { padding: calc(58 * var(--ar-u)) 0 calc(65 * var(--ar-u)); }
.cmia-ar .ar-band--white[data-ar-section="twenty-years"] .ar-h2 { margin-bottom: calc(38 * var(--ar-u)); }
.cmia-ar .ar-accordion { margin-top: calc(127 * var(--ar-u)); }

/* 7-12 - figure bands */
.cmia-ar .ar-band--stats {
	padding-top: calc(var(--ar-band-pt, 38) * var(--ar-u));
	padding-bottom: calc(var(--ar-band-pb, 30) * var(--ar-u));
}

.cmia-ar .ar-band__title {
	margin-bottom: calc(72 * var(--ar-u));
	font-size: calc(var(--ar-fs-h3) * var(--ar-u));
	line-height: calc(40 * var(--ar-u));
	text-align: center;
}

.cmia-ar .ar-stats {
	display: grid;
	gap: calc(40 * var(--ar-u)) calc(30 * var(--ar-u));
	align-items: start;
	justify-items: center;
}

.cmia-ar .ar-stats--1 { grid-template-columns: 1fr; }
.cmia-ar .ar-stats--2 { grid-template-columns: repeat(2, 1fr); }
.cmia-ar .ar-stats--3 { grid-template-columns: repeat(3, 1fr); }
.cmia-ar .ar-stats--4 { grid-template-columns: repeat(4, 1fr); }
.cmia-ar .ar-stats--with-bar { grid-template-columns: calc(300 * var(--ar-u)) 1fr; }
.cmia-ar .ar-stats + .ar-stats { margin-top: calc(115 * var(--ar-u)); }
.cmia-ar .ar-band--stats .ar-footnote { margin-top: calc(28 * var(--ar-u)); }

/* 13 - biodiversity */
.cmia-ar .ar-band--bio { min-height: calc(485 * var(--ar-u)); color: var(--ar-white); }

.cmia-ar .ar-bio {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(485 * var(--ar-u));
	padding: calc(60 * var(--ar-u)) 0;
}

.cmia-ar .ar-bio .ar-prose { margin-top: calc(26 * var(--ar-u)); max-width: calc(560 * var(--ar-u)); }

.cmia-ar .ar-bio__badge {
	position: absolute;
	right: calc(-96 * var(--ar-u));
	bottom: calc(52 * var(--ar-u));
	width: calc(134 * var(--ar-u));
}

/* 14 - interviews */
.cmia-ar .ar-band--paper[data-ar-section="interviews"] { padding: calc(101 * var(--ar-u)) 0 calc(81 * var(--ar-u)); }
.cmia-ar .ar-band--paper[data-ar-section="interviews"] .ar-h2 { margin-bottom: calc(46 * var(--ar-u)); }

.cmia-ar .ar-interview {
	display: grid;
	grid-template-columns: 1fr calc(272 * var(--ar-u));
}

.cmia-ar .ar-interview__media img { height: 100%; object-fit: cover; }

.cmia-ar .ar-interview__card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: calc(40 * var(--ar-u)) calc(46 * var(--ar-u)) calc(38 * var(--ar-u));
	background: var(--slide-bg);
}

.cmia-ar .ar-interview__quote {
	font-size: calc(var(--ar-fs-slide-title) * var(--ar-u));
	line-height: calc(20 * var(--ar-u));
	font-weight: 700;
	text-transform: uppercase;
}

.cmia-ar .ar-interview__name {
	margin-top: calc(24 * var(--ar-u));
	font-size: calc(var(--ar-fs-attribution) * var(--ar-u));
	font-weight: 700;
}

.cmia-ar .ar-interview__role {
	font-size: calc(var(--ar-fs-attribution) * var(--ar-u));
	line-height: 1.45;
	font-weight: 700;
}

/* 15 - in the spotlight */
.cmia-ar .ar-band--white[data-ar-section="spotlight"] { padding: calc(51 * var(--ar-u)) 0 calc(20 * var(--ar-u)); }
.cmia-ar .ar-band--white[data-ar-section="spotlight"] .ar-h2 { margin-bottom: calc(35 * var(--ar-u)); }

/* The spotlight photograph is cropped to a wide band in the design. */
.cmia-ar .ar-spotlight__media {
	margin-bottom: calc(29 * var(--ar-u));
	aspect-ratio: 869 / 295;
}

.cmia-ar .ar-spotlight__media picture,
.cmia-ar .ar-spotlight__media img { display: block; height: 100%; }
.cmia-ar .ar-spotlight__media img { width: 100%; object-fit: cover; }

.cmia-ar .ar-spotlight__body {
	display: grid;
	grid-template-columns: calc(247 * var(--ar-u)) 1fr;
	gap: calc(35 * var(--ar-u));
}

.cmia-ar .ar-spotlight__country {
	font-size: calc(var(--ar-fs-h3) * var(--ar-u));
	line-height: calc(40 * var(--ar-u));
}

.cmia-ar .ar-spotlight__title {
	margin-top: calc(18 * var(--ar-u));
	font-size: calc(var(--ar-fs-spot-title) * var(--ar-u));
	line-height: calc(26 * var(--ar-u));
	font-weight: 600;
}

/* 16 - footer */
.cmia-ar .ar-band--footer { min-height: calc(828 * var(--ar-u)); }

.cmia-ar .ar-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(828 * var(--ar-u));
}

/* ═════════════════════════════════════ 12 responsive & motion ═══ */

@media (max-width: 900px) {
.cmia-ar .ar-founder,
.cmia-ar .ar-fin__grid,
.cmia-ar .ar-spotlight__body {
		grid-template-columns: 1fr;
		gap: calc(40 * var(--ar-u));
	}

.cmia-ar .ar-outputs { grid-template-columns: 1fr; }
.cmia-ar .ar-stats--3, .cmia-ar .ar-stats--4 { grid-template-columns: repeat(2, 1fr); }
.cmia-ar .ar-stats--with-bar { grid-template-columns: 1fr; }

.cmia-ar .ar-cccp-slide,
.cmia-ar .ar-interview { grid-template-columns: 1fr; }

/* Stacked, a slide can no longer be held to the design's fixed frame. The
   photograph is absolutely positioned inside its cell, so that cell needs an
   aspect ratio of its own here or it would collapse and the image vanish. */
.cmia-ar .ar-slider--cccp .ar-slider__slide,
.cmia-ar .ar-slider--interviews .ar-slider__slide { min-height: 0; }

.cmia-ar .ar-cccp-slide__media,
.cmia-ar .ar-interview__media { aspect-ratio: 3 / 2; }

.cmia-ar .ar-cccp-slide__body,
.cmia-ar .ar-interview__card { overflow: visible; }

.cmia-ar .ar-spotlight__media { aspect-ratio: 16 / 9; }

.cmia-ar .ar-bio__badge { position: static; margin-top: calc(30 * var(--ar-u)); }
}

@media (max-width: 720px) {
/* Below tablet the design's proportions stop being readable,
so the unit is
	   pinned and the layout is single column rather than a shrunken artboard. */
	.cmia-ar { --ar-u: .8px; }

.cmia-ar .ar-band--hero,
.cmia-ar .ar-hero__inner,
.cmia-ar .ar-bio,
.cmia-ar .ar-footer,
.cmia-ar .ar-band--footer { min-height: calc(620 * var(--ar-u)); }

.cmia-ar .ar-stats--2, .cmia-ar .ar-stats--3, .cmia-ar .ar-stats--4 { grid-template-columns: 1fr; }
.cmia-ar .ar-legend, .cmia-ar .ar-legend--row { grid-template-columns: 1fr; }

.cmia-ar .ar-table { font-size: calc(20 * var(--ar-u)); }
.cmia-ar .ar-table__num { padding-left: calc(10 * var(--ar-u)); }
}

@media (prefers-reduced-motion: reduce) {
.cmia-ar *,
.cmia-ar *::before,
.cmia-ar *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Cooperation Projects: Legendenfarben an die Ringsegmente angleichen */
.cmia-ar .ar-coop .ar-legend__item--light  { color: #a8d1a3; } /* 541 grün  */
.cmia-ar .ar-coop .ar-legend__item--greige { color: #d1b59e; } /* 72  grau  */