/* =========================================================
	RESET
	Modern reset:
	https://piccalil.li/blog/a-more-modern-css-reset/
========================================================= */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
	@media (prefers-reduced-motion: no-preference) {
		interpolate-size: allow-keywords;
	}
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  /* color-scheme: light dark; */
  scrollbar-gutter: stable;
}

/* Remove default margin in favour of better control in authored CSS */
:is(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
  margin-block: 0;
}

figure { margin-inline: 0; }

:is(body, blockquote) { margin: 0; }

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  margin-inline: 0;
  padding: 0;
  list-style: none;
}

/* Set core body defaults */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  min-block-size: 100svh;
  line-height: 1.5;
}

/* Set shorter line heights on interactive elements */
:is(button, input, label) {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
:is(h1, h2, h3, h4) {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  color: currentColor;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
:is(img, picture, svg) {
  display: block;
  max-width: 100%;
  height: auto;
}

svg:not([class]) {
	width: auto;
	height: 1lh;
}

svg {
	flex-shrink: 0;
}

:is(video, iframe[src*='youtube'], iframe[src*='vimeo']) {
	display: block;
	aspect-ratio: 16/9;
	width: 100%;
	height: auto;
}

/* Inherit fonts for inputs and buttons */
:is(input, button, textarea, select) {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5lh;
}

/* Focus and selection */
:focus { outline: none; }

:focus-visible {
	outline: 2px solid var(--focus-color, currentColor);
	outline-offset: var(--focus-offset, 0.2lh);
}

/* Firefox is the only browser that doesn't outline the whole element unless you make it display: inline-block. That in itself causes multiple flow issues. We can detect it using its own vendor prefix and reduce focus offset.
*/
@supports (-moz-appearance: none) {
	:root { --focus-offset: 0.08em; }
}

::-moz-selection {
	background: var(--color-light, white);
	color: var(--color-dark, black);
}

::selection {
	background: var(--color-light, white);
	color: var(--color-dark, black);
}

/* =========================================================
	FONTS
========================================================= */

/* MARK: Libre Baskerville
----------------------------------------------- */
/* libre-baskerville-regular - latin */
@font-face {
	font-style: normal;
	font-weight: 400;
	src: url('/assets/fonts/libre-baskerville-v24-latin-regular.woff2') format('woff2');
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Libre Baskerville';
	font-display: swap;
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* libre-baskerville-italic - latin */
@font-face {
	font-style: italic;
	font-weight: 400;
	src: url('/assets/fonts/libre-baskerville-v24-latin-italic.woff2') format('woff2');
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Libre Baskerville';
	font-display: swap;
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* libre-baskerville-700 - latin */
@font-face {
	font-style: normal;
	font-weight: 700;
	src: url('/assets/fonts/libre-baskerville-v24-latin-700.woff2') format('woff2');
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Libre Baskerville';
	font-display: swap;
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* libre-baskerville-700italic - latin */
@font-face {
	font-style: italic;
	font-weight: 700;
	src: url('/assets/fonts/libre-baskerville-v24-latin-700italic.woff2') format('woff2');
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Libre Baskerville';
	font-display: swap;
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* MARK: Source Sans
----------------------------------------------- */
/* source-sans-3-300 - latin */
@font-face {
	font-style: normal;
	font-weight: 300;
	src: url('/assets/fonts/source-sans-3-v19-latin-300.woff2') format('woff2');
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Source Sans 3';
	font-display: swap;
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-300italic - latin */
@font-face {
	font-style: italic;
	font-weight: 300;
	src: url('/assets/fonts/source-sans-3-v19-latin-300italic.woff2') format('woff2');
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Source Sans 3';
	font-display: swap;
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-regular - latin */
@font-face {
	font-style: normal;
	font-weight: 400;
	src: url('/assets/fonts/source-sans-3-v19-latin-regular.woff2') format('woff2');
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Source Sans 3';
	font-display: swap;
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-italic - latin */
@font-face {
	font-style: italic;
	font-weight: 400;
	src: url('/assets/fonts/source-sans-3-v19-latin-italic.woff2') format('woff2');
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Source Sans 3';
	font-display: swap;
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-500 - latin */
@font-face {
	font-style: normal;
	font-weight: 500;
	src: url('/assets/fonts/source-sans-3-v19-latin-500.woff2') format('woff2');
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Source Sans 3';
	font-display: swap;
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-500italic - latin */
@font-face {
	font-style: italic;
	font-weight: 500;
	src: url('/assets/fonts/source-sans-3-v19-latin-500italic.woff2') format('woff2');
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Source Sans 3';
	font-display: swap;
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-700 - latin */
@font-face {
	font-style: normal;
	font-weight: 700;
	src: url('/assets/fonts/source-sans-3-v19-latin-700.woff2') format('woff2');
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Source Sans 3';
	font-display: swap;
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-sans-3-700italic - latin */
@font-face {
	font-style: italic;
	font-weight: 700;
	src: url('/assets/fonts/source-sans-3-v19-latin-700italic.woff2') format('woff2');
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Source Sans 3';
	font-display: swap;
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* =========================================================
	VARIABLES (Custom properties)
========================================================= */

:root {
	/* MARK: Fonts
	----------------------------------------------- */
	--font-serif: "Libre Baskerville", Garamond, Times, serif;
	--font-sans: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;


	/* MARK: Font sizes
		Endpoint values come from the Figma type scale.
	----------------------------------------------- */
	--fs--3: clamp(0.75rem, 0.728rem + 0.094vw, 0.8125rem);		/* 12 → 13px */
	--fs--2: clamp(0.875rem, 0.831rem + 0.188vw, 1rem);			/* 14 → 16px */
	--fs--1: clamp(1rem, 0.956rem + 0.188vw, 1.125rem);			/* 16 → 18px */
	--fs-0: clamp(1.125rem, 1.059rem + 0.282vw, 1.3125rem);		/* 18 → 21px */
	--fs-1: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem);			/* 20 → 24px */
	--fs-2: clamp(1.375rem, 1.243rem + 0.563vw, 1.75rem);			/* 22 → 28px */
	--fs-3: clamp(1.5625rem, 1.408rem + 0.657vw, 2rem);			/* 25 → 32px */
	--fs-4: clamp(1.75rem, 1.53rem + 0.939vw, 2.375rem);			/* 28 → 38px */
	--fs-5: clamp(1.9375rem, 1.651rem + 1.221vw, 2.75rem);		/* 31 → 44px */
	--fs-6: clamp(2.125rem, 1.817rem + 1.315vw, 3rem);				/* 34 → 48px */
	--fs-7: clamp(2.5rem, 2.06rem + 1.878vw, 3.75rem);				/* 40 → 60px */


	/* MARK: Spacing
	----------------------------------------------- */
	--space-2xs: 0.25rem;	/* 4px */
	--space-xs: 0.5rem;		/* 8px */
	--space-sm: 0.75rem;		/* 12px */
	--space-md: 1.25rem;		/* 20px */
	--space-lg: 2rem;			/* 32px */
	--space-xl: 3rem;			/* 48px */
	--space-2xl: 5rem;		/* 80px */
	--space-3xl: 7.5rem;		/* 120px */


	/* MARK: Brand colors
	----------------------------------------------- */
	--gold: #AC9257;
	--gold-light: #C9B892;
	--gold-lighter: #DFD6BF;
	--gold-lightest: #F7F4EE;
	--lake: #50C9B5;
	--lake-light: #8DDCCF;
	--lake-lighter: #BCEAE3;
	--lake-lightest: #EDFAF8;
	--river: #0B3F4A;
	--river-light: #608289;
	--river-lighter: #A2B6BA;
	--river-lightest: #E7ECED;
	--salmon: #E0684A;
	--salmon-light: #EB9D89;
	--salmon-lighter: #F3C6BA;
	--salmon-lightest: #FCF0ED;
	--twilight: #025E6F;
	--twilight-light: #5B96A1;
	--twilight-lighter: #9FC2C8;
	--twilight-lightest: #E6EFF1;
	--gray: #5E5E5F;
	--gray-light: #969697;
	--gray-lighter: #C2C2C2;
	--gray-lightest: #EFEFEF;

	/* TODO: Swap out later with brand colors */
	--gold-light-opaque: #eee9dc;
	--lake-light-opaque: #d9f7f2;
	--twilight-dark: #0d414b;


	/* MARK: Neutral colors
	----------------------------------------------- */
	--neutral-100: #F5F5F5;
	--neutral-200: #E1E1E2;
	--neutral-400: #C4C4C4;
	--neutral-700: var(--gray);
	--neutral-900: #4D4D4D;


	/* MARK: Semantic colors
	----------------------------------------------- */
	--warning: #C70000;
	--error: var(--warning);
	--success: #34A300;

	--form-error-color: var(--error);
	--alert-red: var(--error);
	--action-green: var(--success);
	--table-border-dark: var(--gray);
	--table-header-bg-light: var(--neutral-100);


	/* MARK: Widths & gutter
	----------------------------------------------- */
   --max-width: 1435px;
   --max-body-width: 1200px;
   --max-body-width-narrow: 1000px;
	--gutter: 1.5rem;


	/* MARK: Border radius
	----------------------------------------------- */
	--radius-circle: 50%;
   /* --radius-lg: 0.3rem; */
	/* --border-radius-xl: 0.5rem; */

	--border-radius-circle: 50%;
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;


	/* MARK: Transitions
	----------------------------------------------- */
	/* --transition-base: 300ms ease-in-out; */
	/* --transition-movement: 200ms linear; */
	/* --transition-fade: 450ms ease-in-out; */
	/* --transition-bounce: 550ms cubic-bezier(0.5, 0.05, 0.2, 1.5); */
	--transition-base: 0.5s ease-in-out;
   --transition-base-fast: 0.3s ease-in-out;


	/* MARK: z-index
	----------------------------------------------- */
   --zindex-sticky-header: 99999; /* from original dev */

   --z-below: -1; /* and this for all values below the base */
   --z-base: 0;
   --z-above: 1; /* use this for all values above the base */
   --z-navigation: calc(var(--z-above) + 100);
   --z-nav-logo: calc(var(--z-navigation) + 10);
   --z-content: calc(var(--z-navigation) + 15);
   --z-cookie-notice: calc(var(--z-navigation) + 20);
   --z-modal: calc(var(--z-navigation) + 30);
}

/* =========================================================
	GLOBAL STYLES
	Low-specificity, global styles that apply to the whole
	project. Based on https://cube.fyi/css.html
========================================================= */

/* MARK: Body
----------------------------------------------- */
body {
	position: relative;
   background-repeat: no-repeat;
   background-attachment: fixed !important;
   background-color: white;
   padding-bottom: 0;
   min-height: 800px;
	color: var(--neutral-900);
	font-weight: 400;
	font-size: var(--fs-0);
	line-height: 1.6;
	font-family: var(--font-sans);
	font-size-adjust: from-font;
	letter-spacing: -0.21px;
}

/* MARK: Main content container
----------------------------------------------- */
main[role="document"] {
   padding-inline: 0;
   min-height: 800px;
}

/* MARK: Links
----------------------------------------------- */
/* a:not(.button, .flag-button, .arrow-button) { */
a:not([class]) {
   transition: all var(--transition-base);
   border-bottom: 1px solid transparent;
   color: var(--salmon);
   text-decoration: none;

   &:hover {
      color: var(--salmon);
      text-decoration: none;
   }
}


/* MARK: Anchor links
----------------------------------------------- */
a.anchor { display: none; }


/* MARK: Typography
----------------------------------------------- */
:is(b, strong) { font-weight: 700; }

:is(h2, h3, h4) {
   color: var(--twilight);
}

h2.medium {
   font-weight: 500;
}

h3 {
   font-weight: 700;
   font-size: var(--fs-2);

   &.twilight-regular {
      font-weight: 500;
      font-size: var(--fs-1);
   }
}

h4 {
   font-size: var(--fs-1);

   &.dark-gray-bold {
      color: var(--black);
      font-weight: 700 !important;
      font-size: var(--fs-0);
      line-height: 1.5;
   }

   &.dark-gray-regular {
      color: var(--black);
      font-weight: 400;
      font-size: var(--fs-0);
   }
}


/* MARK: Images
----------------------------------------------- */
picture > img {
   width: 100%;
}


/* MARK: Non-heading type
----------------------------------------------- */
/* small { font-size: var(--fs--1); } */

/* :is(code, kbd, samp) {
	padding: var(--space-3xs);
	font-family: var(--font-monospace);
	hyphens: none;
	text-align: left;
	word-break: normal;
	word-spacing: normal;
	tab-size: 2;
	word-wrap: normal;
	box-decoration-break: clone;
} */

/* This is quite a new property, so we want code styles to not be huge or tiny */
/* @supports not (font-size-adjust: from-font) {
	:is(code, kbd, samp) { font-size: var(--fs-0); }
} */

/* pre:has(code) {
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
}

pre code {
	border: none;
	background: none;
	padding: 0;
} */

/* kbd {
	border: 1px solid var(--neutral-500);
}

var {
	font-style: normal;
	font-weight: 500;
}

q { font-style: italic; } */


/* ul:not([class]) {
	padding-inline-start: 1.7ch;
	list-style-type: disc;
}

ul:not([class]) > li { padding-inline-start: var(--space-xs); }

ul ::marker { font-size: 0.8lh; }

ol ::marker {
	font-weight: var(--font-bold);
	font-size: 1em;
} */

/* Lists with classes and roles will be out of standard flow, so remove the default spacing */
/* [role='list'][class],
[role='tablist'][class] {
	margin-block: 0;
	padding: 0;
} */

/* dt { font-weight: 500; }
dt + dd { margin-block-start: var(--space-xs); }
dd + dt { margin-block-start: var(--space-sm); }
dd { margin-inline-start: 1.5ch; } */


/* blockquote footer {
	margin-block-start: var(--space-sm);
	font-size: var(--fs-0);
} */

/* blockquote q { font-style: normal; } */

/* figcaption {
	padding-block-start: var(--space-2xs);
	font-size: var(--fs-0);
} */


/* MARK: Text decoration
----------------------------------------------- */
/* a:not([class]):hover { text-underline-offset: 0.2lh; } */

/* :is(h1, h2, h3, h4) a:not([class]) {
	text-decoration-thickness: 0.1ex;
	text-underline-offset: 0.2ex;
} */

/* :is(h1, h2, h3, h4) a:not([class]):hover { text-underline-offset: 0.3ex; } */


/* MARK: Misc elements
----------------------------------------------- */
hr {
	margin-block: var(--space-xl);
}

/* =========================================================
	GLOBAL STYLES FOR ANNUAL REPORTS
	Additional globals only for annual reports.
	Builds on global-styles.css

	Trimmed 2026-09-24 to what's actually used by
	templates/annual-reports/_annual-report.twig and
	templates/_partials/annualReports/. A full copy of the
	pre-trim, WP-era version is kept at
	_legacy/src/css/global/ar-global-styles.css for reference.
========================================================= */

html {
   overflow-y: auto;
   scroll-behavior: smooth !important;
   scroll-padding-top: 80px !important;
}

body {
   position: relative;
   overflow-x: hidden !important;
}

a.to-top {
   position: fixed;
   right: 0;
   bottom: 0;
   z-index: calc(var(--z-navigation) + 100);
   border-radius: var(--radius-md) 0 0 0;
   background-color: var(--lake);
   padding: 3px 7px 7px 7px;
}

.prose a:not(.button, .flag-button):hover {
   border-bottom: 1px solid var(--salmon);
}

section {
   padding-top: var(--space-xl);
   padding-bottom: var(--space-xl);
   min-height: 12.5rem;
}

/* =========================================================
	CENTER COMPOSITION
	Use to center a column
	(new way of doing a common wrapper/container)
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
:is(.center, .container) {
	--container-margin-inline: var(--gutter);
	--container-padding-inline: unset;
	--container-max-width: var(--max-body-width);

	margin-inline: var(--container-margin-inline);
   padding-inline: var(--container-padding-inline);
   max-width: var(--container-max-width);

	@media (width >= 1250px) {
      /* margin-inline: auto; */
		--container-margin-inline: auto;
   }

	/* &[data-variant="annual-report"],
	&[data-container="annual-report"] {
      --container-margin-inline: 1.25rem;
   } */

	&.is-intro,
	&[data-variant="intro"] {
		margin-block-start: var(--space-2xl);

		@media (width >= 992px) {
			margin-block-start: var(--space-3xl);
		}
	}
}


/* MARK: Width variants
----------------------------------------------- */
:is(.center, .container)[data-center-width="narrow"] {
	--container-max-width: var(--max-body-width-narrow);
	--container-padding-inline: 1.25rem;
	--container-margin-inline: auto;
}

:is(.center, .container)[data-center-width="wide"] {
	@media (width >= 576px) {
		max-width: var(--max-body-width);
	}
}


/* MARK: Block or page specific
----------------------------------------------- */
/* :is(.content, footer) :is(.container, .center) {
   width: 100vw;
} */

footer :is(.container, .center) {
	--container-margin-inline: auto;
	--container-padding-inline: 1.5625rem;
}

:is(.breadcrumbs, .page-header) + .center:not(.breadcrumbs),
:is(.breadcrumbs, .page-header) + .container:not(.breadcrumbs) {
	margin-block-start: var(--space-2xl);
	padding-block: 0;

	@media (width >= 992px) {
		margin-block-start: 6rem;
	}
}


/* MARK: Full width
	Break an element out of its parent container
----------------------------------------------- */
.full-width {
	position: relative;
	right: 50%;
	left: 50%;
	margin-right: -50vw;
	margin-left: -50vw;
	width: 100vw;
	max-width: 100vw;
}

/* =========================================================
	FLOW COMPOSITION
	Like the Every Layout stack: https://every-layout.dev/layouts/stack/
	Info about this implementation: https://piccalil.li/blog/my-favourite-3-lines-of-css/
========================================================= */

.flow > * + * {
	margin-block-start: var(--flow-space, 1rem);
}

/* Spacing between inner elements, like .flow */
.prose {
	> * + *,
	ul > * + *,
	ol > * + * { margin-block-start: var(--prose-flow-space, 1rem); }
}

/* =========================================================
	HIDDEN UTILITIES
	Info: https://piccalil.li/quick-tip/visually-hidden/
========================================================= */

/* MARK: Screen reader only (visually hidden)
----------------------------------------------- */
.sr-only {
	border: 0;
	clip: rect(0 0 0 0);
	position: absolute;
	margin: 0;
	padding: 0;
	width: 1px;
	height: 0;
	overflow: hidden;
	white-space: nowrap;

	&:focus-visible {
		position: static;
		margin: 0;
		padding: 0;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
}

/* MARK: Hide element
----------------------------------------------- */
.hidden {
	display: none;
}

/* =========================================================
	LIST UTILITIES
========================================================= */

/* MARK: Custom list
----------------------------------------------- */
:is(ol, ul).custom-list {
	--custom-list-padding-left: 1.5rem;

	margin-inline: 0;
	padding-inline-start: var(--custom-list-padding-left);
	list-style: none;
	text-indent: -2ch;

	li {
		counter-increment: basic-list;
	}

	li::before {
		margin-inline-end: 0.75ch;
		content: counter(basic-list) " \AD";
		color: var(--lake);
		font-weight: bolder;
		/* min-width: 2ch; */
	}
}

ul.custom-list > li::before {
	content: "\203A";
	font-size: 1.6875rem;
	line-height: 1;
}

/* MARK: Hierarchical/Legal ol
----------------------------------------------- */
ol.hierarchical {
	--list-text-indent: 0;
	--list-padding-left: 0;

	counter-reset: clause;
	margin-inline: 0;
	padding-inline-start: var(--list-padding-left);
	list-style: none outside none;
	text-indent: var(--list-text-indent);

	@media (width >= 768px) {
		--list-text-indent: -2.75ch;
		--list-padding-left: var(--space-lg);
	}

	> li {
		counter-increment: clause;
	}

	> li::before {
		margin-inline-end: 0.5ch;
		content: counters(clause, ".") ". ";
		color: var(--lake);
	}

	/* Level 2 */
	> li > ol {
		margin-block-start: var(--space-2xs);
		padding-inline-start: calc( var(--list-padding-left) + 1ch);

		@media (width >= 768px) {
			--list-text-indent: -4ch;
		}
	}

	/* Level 3 */
	> li > ol > li > ol {
		padding-inline-start: calc( var(--list-padding-left) + 2ch);

		@media (width >= 768px) {
			--list-text-indent: -5ch;
		}
	}

	/* Level 4 */
	> li > ol > li > ol > li > ol {
		padding-inline-start: calc( var(--list-padding-left) + 3.25ch);

		@media (width >= 768px) {
			--list-text-indent: -6ch;
		}
	}

	/* Followed by custom lists */
	> li > ul.custom-list {
		--custom-list-padding-left: 2.875rem;
	}

	> li > ol > li > ul.custom-list {
		--custom-list-padding-left: 4rem;
	}

	> li > ol > li > ol > li > ul.custom-list {
		--custom-list-padding-left: 4.5rem;
	}

	/* Followed by standard lists */
	> li > ul:not([class]), ul[class=""] {
		--list-text-indent: 0;
		text-indent: var(--list-text-indent);
	}
}

/* =========================================================
	ANNUAL REPORTS NAVIGATION
	Applies to 2024 and newer.
========================================================= */

/* MARK: Nav container
----------------------------------------------- */
nav.ar-nav {
   --nav-bg-color: var(--river);
   display: flex;
   position: fixed;
   top: 0;
   left: 50%;
   -moz-column-gap: 5.75rem;
        column-gap: 5.75rem;
   justify-content: space-between;
   align-items: center;
   transform: translateX(-50%);
   z-index: var(--z-navigation);
   border-radius: 0 0 8px 8px;
   background-color: var(--nav-bg-color);
   padding-inline: 1rem;
   padding-block: 0.875rem;
   width: 100vw;
   max-width: 100vw;
   height: 66px;

   @media (width >= 768px) {
      max-width: calc(100vw - 2.5rem);
   }

   @media (width >= 1080px) {
      max-width: 1015px;
   }
}


/* MARK: Logo
----------------------------------------------- */
nav .logo {
   display: flex;
   align-items: center;
   margin-block-start: 14px;

   @media (width >= 768px) { margin-block-start: 0; }

   .logomark {
      display: grid;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      background-color: var(--nav-bg-color);
      aspect-ratio: 1;
      width: 74px;

      @media (width >= 768px) { width: 29px; }

      img { width: 52px; }
   }

   .logotype {
      @media (width >= 768px) { display: none; }

      width: 132px;
   }
}


/* MARK: Mobile menu button
----------------------------------------------- */
nav .mobile-menu-button {
   @media (width >= 768px) { display: none; }

	@media (width < 768px) {
		all: unset;
		display: flex;
		flex-direction: column;
		gap: 5px;
		margin-block-start: 0.75rem;
		width: -moz-fit-content;
		width: fit-content;

		&:hover { cursor: pointer; }

		.bars {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 33px;
			height: 23px;
		}

		.bars .bar {
			border-radius: 10px;
			background-color: white;
			width: 100%;
			height: 3px;
		}

		span {
			color: white;
			font-weight: 900;
			font-size: 0.6875rem;
			letter-spacing: 4%;
			text-align: center;
			text-transform: uppercase;
		}
	}
}


/* MARK: Mobile menu overlay
----------------------------------------------- */
nav .mobile-menu-overlay {
   @media (width >= 768px) { display: none; }

	@media (width < 768px) {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		flex-direction: column;
		z-index: calc(var(--z-navigation) + 1);
		background-color: var(--river);
		padding-inline: 1.125rem;
		padding-block: 1rem 1.25rem;
		width: 100vw;
		height: 100vh;

		.mobile-menu-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				display: flex;
				align-items: center;
				gap: 0.875rem;
				color: white;
				font-weight: 400;
				font-size: 1.1875rem;
				font-family: var(--font-serif);


				img { width: 38px; }
			}

			button {
				display: grid;
				gap: 4px;
				border: 0;
				background-color: transparent;
				padding: 0;
			}

			button .x {
				display: block;
				position: relative;
				margin-inline: auto;
				width: 25px;
				height: 25px;
			}

			button .x .bar {
				--bar-width: 33px;
				--bar-height: 3px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform-origin: center;
				margin-inline-start: calc((var(--bar-width) / 2) * -1);
				margin-block-start: calc((var(--bar-height) / 2) * -1);
				border-radius: 10px;
				background-color: white;
				width: var(--bar-width);
				height: var(--bar-height);
			}


			button .x .bar:nth-child(1) { transform: rotate(45deg); }


			button .x .bar:nth-child(2) { transform: rotate(-45deg); }

			button span {
				color: white;
				font-weight: 900;
				font-size: 0.6875rem;
				line-height: 1;
				letter-spacing: 4%;
				text-align: center;
				text-transform: uppercase;
			}
		}

		.mobile-menu-nav {
			flex: 1;

			ul {
				display: grid;
				gap: 1.75rem;
				padding-block-start: 8.125rem;
				color: white;
				font-weight: 400;
				font-size: 1.8125rem;
				line-height: 1;
				font-family: var(--font-serif);
				letter-spacing: 2%;
				text-align: center;


				li a { color: inherit; }
			}
		}

		.mobile-menu-footer {
			color: var(--lake);
			font-weight: 700;
			font-size: 0.9375rem;
			line-height: 2;
			letter-spacing: -1%;
			text-align: center;


			a { color: inherit; }

			.social {
				display: flex;
				-moz-column-gap: 1.875rem;
				     column-gap: 1.875rem;
				justify-content: center;
				align-items: center;
				margin-block-end: 1rem;


				svg { fill: var(--lake); }


				svg.facebook { width : 15px; }


				svg.x { width : 29px; }


				svg.instagram { width : 27px; }


				svg.linkedin { width : 27px; }
			}
		}
	}
}


/* MARK: Desktop links
----------------------------------------------- */
nav .links {
   @media (width < 768px) { display: none; }

	@media (width >= 768px) {
		display: flex;
		justify-content: space-between;
		margin-block: 0;
		width: 100%;
		color: white;
		font-weight: 400;
		font-size: 1.1875rem;
		line-height: 1;
		font-family: var(--font-serif);
		letter-spacing: -1.5%;

		li {
			flex-shrink: 0;
		}

		li a {
			display: block;
			transition: color var(--transition-base-fast);
			color: inherit;

			&:hover {
				color: var(--lake);
			}
		}
	}
}

/* =========================================================
	BUTTON COMPONENTS
========================================================= */

/* MARK: Button group ---------------- */
:is(.button-group, .button-set) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);

	&.left,
	&[data-variant="left"] { justify-content: flex-start; }

	&.right,
	&[data-variant="right"] { justify-content: flex-end; }

	&.center,
	&[data-variant="center"] { justify-content:  center; }
}


/* MARK: Primary (solid)
----------------------------------------------- */
.button,
.fui-btn.fui-submit {
	--btn-bg: var(--salmon);
	--btn-bg-hover: var(--salmon);
	--btn-label-color: white;
	--btn-label-color-hover: white;
	--btn-label-size: var(--fs--1);
	--btn-label-weight: 700;
	--btn-border-color: var(--btn-bg);
	--btn-border-color-hover: var(--btn-bg-hover);
	--btn-border: 2px solid var(--btn-border-color);
	--btn-radius: var(--radius-sm);
	--btn-padding: var(--space-xs) var(--space-sm);
	--btn-display: flex;
	--btn-gap: var(--space-xs);
	--btn-width: fit-content;

	display: var(--btn-display);
	align-items: center;
	gap: var(--btn-gap);
	transition: all var(--transition-base);
	border: var(--btn-border);
	border-radius: var(--btn-radius);
	background-color: var(--btn-bg);
	padding: var(--btn-padding);
	width: var(--btn-width);
	color: var(--btn-label-color);
	font-weight: var(--btn-label-weight);
	font-size: var(--btn-label-size);
	line-height: normal;
	font-family: var(--font-sans);
	text-decoration: none;

	&:hover {
		cursor: pointer;
		border-color: var(--btn-border-color-hover);
		background-color: var(--btn-bg-hover);
		color: var(--btn-label-color-hover);
	}
}

.button:not([data-variant]),
.button[data-variant="primary"] {
	/* Color variants */
	&[data-color="gold"] {
		--btn-bg: var(--gold);
		--btn-bg-hover: var(--gold);
	}

	&[data-color="lake"] {
		--btn-bg: var(--lake);
		--btn-bg-hover: var(--lake);
	}

	&[data-color="river"] {
		--btn-bg: var(--river);
		--btn-bg-hover: var(--river);
	}

	&[data-color="salmon"] {
		--btn-bg: var(--salmon);
		--btn-bg-hover: var(--salmon);
	}

	&[data-color="salmon-lightest"] {
		--btn-bg: var(--salmon-lightest);
		--btn-bg-hover: var(--salmon-lightest);
		--btn-label-color: var(--salmon);
	}

	&[data-color="twilight"] {
		--btn-bg: var(--twilight);
		--btn-bg-hover: var(--twilight);
	}

	&[data-color="gray"] {
		--btn-bg: var(--gray);
		--btn-bg-hover: var(--gray);
	}
}


/* MARK: Secondary (outline)
----------------------------------------------- */
.button[data-variant="secondary"] {
	--btn-bg: transparent;
	--btn-bg-hover: var(--salmon-lightest);
	--btn-label-color: var(--salmon);
	--btn-label-color-hover: var(--btn-label-color);
	--btn-border-color: var(--btn-label-color);
	--btn-border-color-hover: var(--btn-label-color);

	/* Color variants */
	&[data-color="gold"] {
		--btn-bg-hover: var(--gold-lightest);
		--btn-label-color: var(--gold);
		/* --btn-label-color-hover: var(--gold); */
	}

	&[data-color="lake"] {
		--btn-bg-hover: var(--lake-lightest);
		--btn-label-color: var(--lake);
	}

	&[data-color="river"] {
		--btn-bg-hover: var(--river-lightest);
		--btn-label-color: var(--river);
	}

	&[data-color="salmon"] {
		--btn-bg-hover: var(--salmon-lightest);
		--btn-label-color: var(--salmon);
	}

	&[data-color="twilight"] {
		--btn-bg-hover: var(--twilight-lightest);
		--btn-label-color: var(--twilight);
	}

	&[data-color="gray"] {
		--btn-bg-hover: var(--gray-lightest);
		--btn-label-color: var(--gray);
	}
}


/* MARK: Size variants
	Applies to primary and secondary only
----------------------------------------------- */
.button[data-size="md"] {
	--btn-padding: var(--space-sm) var(--space-md);
	--btn-label-size: var(--fs-0);
}

.button[data-size="lg"] {
	--btn-padding: var(--space-md) var(--space-lg);
	--btn-label-size: var(--fs-1);
}


/* MARK: Button icons
----------------------------------------------- */
.button:has(svg) svg {
	--button-icon-size: 1em;
	height: var(--button-icon-size);

	&.icon-sm { --button-icon-size: 0.5em; }
	&.icon-md { --button-icon-size: 0.75em; }
	&.icon-lg { --button-icon-size: 1em; }
}


/* MARK: Flag button
----------------------------------------------- */
.flag-button-shadow-wrap {
	display: inline-block;
	filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.2));
	margin-block-start: var(--space-lg);
	height: -moz-fit-content;
	height: fit-content;
}

.flag-button {
	--s: 20px; /* control the shape */
	--btn-clip-path: polygon(0 0, calc(100% - var(--s)) 0, 100% 50%, calc(100% - var(--s)) 100%, 0 100%, var(--s) 50%);
	--btn-bg: var(--salmon);
	--btn-label-color: white;
	--btn-label-size: var(--fs-1);
	--btn-padding: var(--space-sm) var(--space-xl);

	clip-path: var(--btn-clip-path);
	background: var(--btn-bg);
	padding: var(--btn-padding);
	width: -moz-fit-content;
	width: fit-content;
	color: var(--btn-label-color);
	font-weight: 700;
	font-size: var(--btn-label-size);
	line-height: 1.8; /* control the height */
	line-height: normal;
	letter-spacing: 0.25px;
	text-decoration: none;
	text-transform: uppercase;

	/* Color variants */
	&[data-color="gold"] { --btn-bg: var(--gold); }
	&[data-color="lake"] { --btn-bg: var(--lake); }
	&[data-color="river"] { --btn-bg: var(--river); }
	&[data-color="salmon"] { --btn-bg: var(--salmon); }
	&[data-color="twilight"] { --btn-bg: var(--twilight); }
	&[data-color="gray"] { --btn-bg: var(--gray); }
}


/* MARK: Arrow button
----------------------------------------------- */
.arrow-button {
	--btn-bg: white;
	--btn-label-color: var(--gold);
	--btn-label-padding-inline: var(--space-sm) var(--space-2xs);
	--btn-label-padding-block: var(--space-xs);
	--btn-label-font-size: var(--fs--1);
	--btn-arrow-tip-size: 16px;
	--btn-arrow-sizing: 30px 0 30px var(--btn-arrow-tip-size);

	display: inline-block;
	position: relative;
	padding-inline: 0 var(--btn-arrow-tip-size);
	width: -moz-fit-content;
	width: fit-content;
	overflow: hidden;
   color: var(--btn-label-color);
   font-weight: 700;
   font-size: var(--btn-label-font-size);
   line-height: 1;
   letter-spacing: 0.25px;
   text-transform: uppercase;

	&::after {
		display: inline-block;
		position: absolute;
      top: 50%;
		right: 0;
      transform: translateY(-50%);
		border-width: var(--btn-arrow-sizing);
		border-style: solid;
		border-color: transparent transparent transparent var(--btn-bg);
      content: "";
	}

	& span {
		display: inline-block;
		z-index: 1;
		border-radius: var(--radius-md) 0 0 var(--radius-md);
		background-color: var(--btn-bg);
		padding-inline: var(--btn-label-padding-inline);
		padding-block: var(--btn-label-padding-block);
		color: var(--btn-label-color);
	}

	/* Color variants - color is text color on white bg */
	&[data-color="gold"] { --btn-label-color: var(--gold); }
	&[data-color="lake"] { --btn-label-color: var(--lake); }
	&[data-color="twilight"] { --btn-label-color: var(--twilight); }
	&[data-color="salmon"] { --btn-label-color: var(--salmon); }
	&[data-color="gray"] { --btn-label-color: var(--gray); }

	/* Color variant one-offs */
	&[data-color="white-on-twilight"] {
		--btn-bg: var(--twilight);
		--btn-label-color: white;
	}

	&[data-color="white-on-salmon"] {
		--btn-bg: var(--salmon);
		--btn-label-color: white;
	}

	/* Color variants used in buttonCta.twig (entry type in CKEditor) */
	&[data-color="dark-gray-normal"] {
		--btn-bg: var(--gray);
		--btn-label-color: white;
	}

	&[data-color="dark-gray-light"] {
		--btn-bg: var(--gray-light);
		--btn-label-color: white;
	}

	&[data-color="dark-gray-lighter"] {
		--btn-bg: var(--gray-lighter);
		--btn-label-color: var(--gray);
	}

	&[data-color="dark-gray-lightest"] {
		--btn-bg: var(--gray-lightest);
		--btn-label-color: var(--gray);
	}

	&[data-color="gold-normal"] {
		--btn-bg: var(--gold);
		--btn-label-color: white;
	}

	&[data-color="gold-light"] {
		--btn-bg: var(--gold-light);
		--btn-label-color: white;
	}

	&[data-color="gold-lighter"] {
		--btn-bg: var(--gold-lighter);
		--btn-label-color: var(--gold);
	}

	&[data-color="gold-lightest"] {
		--btn-bg: var(--gold-lightest);
		--btn-label-color: var(--gold);
	}

	&[data-color="lake-normal"] {
		--btn-bg: var(--lake);
		--btn-label-color: white;
	}

	&[data-color="lake-light"] {
		--btn-bg: var(--lake-light);
		--btn-label-color: white;
	}

	&[data-color="lake-lighter"] {
		--btn-bg: var(--lake-lighter);
		--btn-label-color: white;
	}

	&[data-color="lake-lightest"] {
		--btn-bg: var(--lake-lightest);
		--btn-label-color: var(--lake);
	}

	&[data-color="river-normal"] {
		--btn-bg: var(--river);
		--btn-label-color: white;
	}

	&[data-color="river-light"] {
		--btn-bg: var(--river-light);
		--btn-label-color: white;
	}

	&[data-color="river-lighter"] {
		--btn-bg: var(--river-lighter);
		--btn-label-color: var(--river);
	}

	&[data-color="river-lightest"] {
		--btn-bg: var(--river-lightest);
		--btn-label-color: var(--river);
	}

	&[data-color="salmon-normal"] {
		--btn-bg: var(--salmon);
		--btn-label-color: white;
	}

	&[data-color="salmon-light"] {
		--btn-bg: var(--salmon-light);
		--btn-label-color: white;
	}

	&[data-color="salmon-lighter"] {
		--btn-bg: var(--salmon-lighter);
		--btn-label-color: var(--salmon);
	}

	&[data-color="salmon-lightest"] {
		--btn-bg: var(--salmon-lightest);
		--btn-label-color: var(--salmon);
	}

	&[data-color="twilight-normal"] {
		--btn-bg: var(--twilight);
		--btn-label-color: white;
	}

	&[data-color="twilight-light"] {
		--btn-bg: var(--twilight-light);
		--btn-label-color: white;
	}

	&[data-color="twilight-lighter"] {
		--btn-bg: var(--twilight-lighter);
		--btn-label-color: white;
	}

	&[data-color="twilight-lightest"] {
		--btn-bg: var(--twilight-lightest);
		--btn-label-color: var(--twilight);
	}

	/* Size variants */
	&[data-size="md"] {
		--btn-label-padding-inline: 1rem var(--space-xs);
		--btn-label-padding-block: var(--space-sm);
		--btn-label-font-size: var(--fs-2);
		--btn-arrow-tip-size: 20px;
		--btn-arrow-sizing: 50px 0 50px var(--btn-arrow-tip-size);
	}

	&[data-size="lg"] {
		--btn-label-padding-inline: 1.5rem var(--space-2xs);
		--btn-label-padding-block: 1.75rem;
		--btn-label-font-size: var(--fs-2);
		--btn-arrow-tip-size: 32px;
		--btn-arrow-sizing: 50px 0 50px var(--btn-arrow-tip-size);
	}
}



/* MARK: Grants Portal
----------------------------------------------- */
.button[data-variant="grants-portal"] {
	--btn-bg: oklch(from var(--lake) calc(l - 0.05) c h);
	--btn-bg-hover: var(--river);
	--btn-label-color: white;
	--btn-label-size: var(--fs--3);
	--btn-label-weight: 500;
	--btn-border: 0;
	--btn-radius: 0 0 0 var(--radius-md);
	--btn-padding: 0 var(--space-xs) 0.0625rem 0.625rem;
	--btn-width: fit-content;

	font-weight: 300;
	letter-spacing: 0.5px;
	text-transform: uppercase;

	@media (width >= 960px) {
		position: absolute;
		top: 0;
		right: 0;
	}
}


/* MARK: Grant filters reset
	See grantsDatabase.twig
----------------------------------------------- */
.button[data-variant="grant-filters-reset"] {
	--btn-bg: white;
	--btn-bg-hover: var(--salmon);
	--btn-label-color: var(--salmon);
	--btn-label-size: 0.8125rem;
	--btn-label-weight: 700;
	--btn-border-color: var(--salmon);
	--btn-border-color-hover: var(--salmon);
	--btn-border: 2px solid var(--btn-border-color);
	--btn-radius: 4px 0 0 4px;
	--btn-padding: 0.125rem var(--space-2xs) 0.125rem 0.375rem;
	--btn-display: flex;
	--btn-gap: var(--space-xs);
	--btn-width: fit-content;

	position: relative;
	transition: all var(--transition-base-fast);
	border-width: 2px 0 2px 2px;
	line-height: 1;
	letter-spacing: 1px;
   text-transform: uppercase;

	@media (width < 992px) { display: none; }

	&::after {
      position: absolute;
      top: 50%;
      right: -7px;
      transform: translateY(-50%) rotate(45deg);
		transition: all var(--transition-base-fast);
      border: 2px solid var(--salmon);
      border-width: 2px 2px 0 0;
      background-color: white;
      padding: 4px;
      aspect-ratio: 1;
      width: 15px;
      content: "";
   }

	& span {
		position: relative;
      z-index: var(--z-above);
	}

	&:hover::after {
		background-color: var(--salmon);
	}
}


/* MARK: Load more
----------------------------------------------- */
.button[data-variant="load-more"] {
	--btn-bg-hover: var(--twilight);
	--btn-padding: var(--space-xs) 1rem;

	display: block;
	margin-inline: auto;
	margin-block-end: var(--space-lg);
	text-transform: uppercase;
}


/* MARK: Legacy buttons & links
	To eventually refactor
----------------------------------------------- */
a.hoverline:hover {
   text-decoration: underline;
}

.link a {
   font-weight: bold;
}

.link::after {
   display: inline;
   margin-inline: 4px -12px;
   content: "\203a";
   color: var(--salmon);
   line-height: 14px;
}

a.pdf::after,
a[href$=".pdf"]:not(.no-label, .arrow-button)::after {
   display: inline-block;
   position: relative;
   bottom: -4px;
   margin-left: 5px;
   background-image: url("/assets/images/icon_pdf_inline.svg");
   background-position: initial;
   background-size: auto 0.7em;
   background-repeat: no-repeat;
   width: 1.4em;
   height: 0.9em;
   content: ""; /* was previously \203a */
   line-height: 12px;
   text-indent: 33px;
}

a[href^="tel:"] {
   color: inherit;
   text-decoration: none;
   white-space: nowrap;
}

/* =========================================================
	ANNUAL REPORTS HEADER
	Applies to 2024 and newer.
========================================================= */

/* MARK: Container/wrapper
----------------------------------------------- */
header.ar-header {
	--h1-color: white;
	--list-color: var(--river);
   display: grid;
   position: relative;
   background-color: var(--gray);
   height: 100vh;
   min-height: 500px;
   overflow-y: hidden;

   @media (width >= 768px) {
      grid-template-columns: 40% auto;
   }

   @media (width >= 1100px) {
      grid-template-columns: 500px auto;
   }

	/* Color variations */
	&[data-variant="dark-gray"],
	&[data-variant="none"] { --list-color: var(--lake); }
	&[data-variant="river"] { --list-color: var(--lake); }
	&[data-variant="twilight"] { --list-color: var(--lake-light); }

   &::before {
      @media (width < 768px) { display: none; }

      position: fixed;
      bottom: 0;
      left: 0;
      transform: translate3d(0, calc(var(--scroll-y, 0) * -0.2), 0);
      will-change: transform;
      background-image: url("/assets/images/bg-map-annual-report.svg");
      background-position: left bottom;
      background-size: auto;
      background-repeat: no-repeat;
      width: 100%;
      max-width: 530px;
      height: 100%;
      content: "";
   }
}


/* MARK: Title/sidebar
----------------------------------------------- */
header.ar-header .title {
   padding-block-start: 3rem;
   font-weight: 400;
   font-family: var(--font-serif);

   @media (width >= 768px) {
      margin-inline: auto 3.25rem;
      padding-block-start: 6.3125rem;
   }

	:is(svg, img) {
		@media (width < 768px) { display: none; }
	}

   svg {
      fill: white;
      margin-inline-start: auto;

      max-width: 282px;
      height: 6.75vw;
   }

	img.anniversary-logo-50 {
		--h-spacing: auto;
		margin-inline: var(--h-spacing);

		@media (width >= 768px) {
			--h-spacing: auto -12px;
		}
	}

   h1 {
		--v-spacing: 8.125rem 3.875rem;
      margin-inline: auto;
      margin-block: var(--v-spacing);
      max-width: 250px;
      color: var(--h1-color);
      font-weight: inherit;
      font-size: 3.0625rem;
      line-height: 1.04;
      letter-spacing: -1.5%;
      text-align: center;

      @media (width >= 768px) { text-align: right; }

      span {
         display: block;
         margin-block-end: 0.75rem;
         font-size: 5.25rem;
         line-height: 0.6;
         letter-spacing: -5.9%;
      }
   }

	img.anniversary-logo-50 + h1 {
		--v-spacing: 6.125rem 3.875rem;
	}

   ul {
      @media (width < 768px) { display: none; }
      display: grid;
      position: relative;
      gap: 1rem;
      z-index: var(--z-above);
      margin-block-start: 5.375rem;
      max-width: 250px;
      color: var(--list-color);
      font-weight: inherit;
      text-align: right;

      li a {
         color: inherit;
      }
   }
}


/* MARK: Image
----------------------------------------------- */
header.ar-header .image {
   position: relative;
   background-color: white;
   min-height: 446px;

   picture {
      display: block;
      width: 100%;
      height: 100%;
   }

   picture img {
      opacity: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
   }
}


/* MARK: Avoid header bg collision
----------------------------------------------- */
#ar-ceo,
#ar-review,
#ar-grant-highlights,
#ar-people,
#ar-investments,
#ar-benefactor,
#ar-mission,
footer {
   position: relative;
   z-index: var(--z-above);
}

/* =========================================================
	ANNUAL REPORTS CEO LETTER
	Applies to 2024 and newer.
========================================================= */

#ar-ceo {
   background-color: rgba(94, 94, 95, 0.1);
   padding-block: 7.5rem;

   @media (width >= 768px) {
      background-image: url("/assets/images/bg-annual-report-ceo-map.svg");
      background-position: right bottom;
      background-repeat: no-repeat;
   }
}

#ar-ceo article {
   --border-style: 8px solid var(--lake);
   --content-padding-inline: 1.25rem;
   --content-padding-block: 2.5rem;
   display: grid;
   border-top: var(--border-style);
   border-radius: 8px;
   overflow: hidden;

   @media (width >= 768px) {
      grid-template-columns: auto 295px;
      border-top: 0;
      border-left: var(--border-style);
   }

   .prose {
      background-color: white;
      padding-inline: var(--content-padding-inline);
      padding-block: var(--content-padding-block);

      @media (width >= 768px) {
         --content-padding-inline: 2.5rem;
         --content-padding-block: 3rem 4.375rem;
      }

      @media (width >= 1024px) {
         --content-padding-inline: 4.8125rem;
         --content-padding-block: 4rem 5.75rem;
      }

      :is(h2, h3) + * {
         --prose-flow-space: 2rem;
      }

      h2 {
         color: var(--lake);
         font-weight: 400;
         font-size: 3rem;
         line-height: 1.25;
         font-family: var(--font-serif);
         letter-spacing: -2.2%;
      }

      h3 {
         font-weight: 700;
         font-size: 1.75rem;
         line-height: 1.25;
         letter-spacing: -1%;
      }

      p {
         --prose-flow-space: 0.875rem;
         color: #393939;
         font-size: 1.25rem;
         line-height: 1.6;
      }

      svg,
      img {
         max-width: 300px;
      }
   }

   figure {
      background-color: #e3e3e3;

      @media (width >= 768px) {
         background-color: rgba(94, 94, 95, 0.08);
      }

      picture img { width: 100%; }

      picture.min {
         @media (width >= 768px) { display: none; }
      }

      picture.max {
         @media (width < 768px) { display: none; }
      }

      figcaption {
         --content-padding-inline: 1.125rem;
         --content-padding-block: 2.25rem;
         padding-inline: var(--content-padding-inline);
         padding-block: var(--content-padding-block);
         color: var(--gray);
         letter-spacing: -1%;

         @media (width >= 768px) {
            --content-padding-inline: 2.1875rem;
            --content-padding-block: 1.875rem;
         }
      }

      figcaption p {
         font-size: 1.125rem;
         line-height: 1.6875;
      }

      figcaption p:nth-child(1) strong {
         font-size: 1.5rem;
         line-height: 2;
      }
   }
}

/* =========================================================
	ANNUAL REPORTS IN REVIEW SECTION
	Applies to 2024 and newer.
========================================================= */

/* MARK: Section container
----------------------------------------------- */
#ar-review {
   padding: 0;
}


/* MARK: Stats block
----------------------------------------------- */
.ar-review-stats {
   --content-padding-block: 7.3125rem 3.75rem;
   display: grid;

   @media (width >= 768px) {
      --content-padding-block: 7.3125rem 7.875rem;
      grid-template-columns: calc(50% + 12px) auto;
   }

   /* MARK: Summary stats */
   .summary {
      --content-max-width: 300px;
      background-color: var(--river);
      padding-inline: 1.25rem;
      padding-block: var(--content-padding-block);
      color: white;
      text-align: center;

      @media (width >= 768px) {
         text-align: right;
      }

      @media (width >= 768px) {
         padding-inline: 1.25rem 5.5rem;
      }

      h2 {
         color: inherit;
         font-weight: 400;
         font-size: 4.75rem;
         line-height: 1;
         font-family: var(--font-serif);
         letter-spacing: -3%;

         @media (width >= 768px) {
            margin-inline-start: auto;
            max-width: var(--content-max-width);
         }

         + * {
            margin-block-start: 5rem;
         }
      }

      .stat-item {
         @media (width >= 768px) {
            margin-inline-start: auto;
            max-width: var(--content-max-width);
         }

         + .stat-item {
            margin-block-start: 2rem;
         }
      }

      .stat-item span {
         font-weight: 700;
         font-size: 5.8125rem;
         line-height: 0.5;
         letter-spacing: -4%;
         text-align: inherit;
      }

      .stat-item p {
         font-weight: 400;
         font-size: 1.75rem;
         line-height: 1.7;
         letter-spacing: -1%;
      }
   }

   /* MARK: Stats - Details by sector */
   .details {
      --content-padding-block: 3.6875rem 7.4375rem;
      display: grid;
      position: relative;
      gap: 2.625rem;
      background-color: rgba(11, 63, 74, 0.2);
      padding-inline: 1.25rem;
      padding-block: var(--content-padding-block);

      @media (width >= 768px) {
         --content-padding-block: 7.3125rem 3.75rem;
         padding-inline: 4.6875rem 1.25rem;
      }

      .item {
         display: grid;
         grid-template-columns: 65px auto;
         gap: 1rem;
      }

		.item figure svg {
			height: auto;
		}

      .item p {
         color: #025e6e;
         font-size: 1.4375rem;
         line-height: 1.2;
         letter-spacing: -2%;
      }

      .item p span {
         display: block;
         margin-block-end: 1.2rem;
         font-weight: 700;
         font-size: 4.1875rem;
         line-height: 0.5;
         letter-spacing: -5%;
      }

      &::before {
         position: absolute;
         top: -20px;
         left: 50%;
         transform: translateX(-50%);
         background-image: url("/assets/images/arrow-annual-report-stats.svg");
         background-position: center;
         background-repeat: no-repeat;
         width: 99px;
         height: 20px;
         content: "";

         @media (width >= 768px) {
            top: 50%;
            left: -49px;
            transform: translateX(0) translateY(-50%);
            rotate: -90deg;
         }
      }
   }
}


/* MARK: Content
----------------------------------------------- */
.ar-review-content {
   --section-padding-block: 7.25rem 7.5rem;
   background-color: rgba(80, 201, 181, 0.2);
   padding-block: var(--section-padding-block);
   color: var(--river);

   @media (width >= 768px) {
      --section-padding-block: 6.9375rem 7.5rem;
      background-image: url("/assets/images/bg-map-annual-report-video-block.svg");
      background-position: right bottom;
      background-repeat: no-repeat;
   }

   .container {
      @media (width >= 768px) {
         --container-margin-inline: 2.5rem;
      }
   }

   .prose {
      --prose-flow-space: 0.625rem;
      color: inherit;
   }

   .prose h2 {
      --heading-font-size: 3rem;
      --heading-line-height: 1.25;
      --heading-letter-spacing: -2.2%;
      color: inherit;
      font-weight: 400;
      font-size: var(--heading-font-size);
      line-height: var(--heading-line-height);
      font-family: var(--font-serif);
      letter-spacing: var(--heading-letter-spacing);
      text-align: center;

      @media (width >= 768px) {
         --heading-font-size: 4.75rem;
         --heading-letter-spacing: -3%;
      }
   }

   .prose p {
      margin-inline: auto;
      max-width: 62.5rem;
      color: inherit;
      font-size: 1.75rem;
      line-height: 1.35;
      letter-spacing: -1%;
   }

	picture:has(img) {
		--flow-space: 4.375rem;
	}

	@media (width >= 800px) {
		picture img[data-width] { margin-inline: auto; }
		picture img[data-width="75"] { max-width: 75%; }
		picture img[data-width="50"] { max-width: 50%; }
		picture img[data-width="25"] { max-width: 25%; }
	}

   figure.video-embed {
      --flow-space: 4.375rem;
      max-width: 75rem;
   }
}

/* =========================================================
	ANNUAL REPORTS GRANT HIGHLIGHTS
	Applies to 2024 and newer.
========================================================= */

/* MARK: Section/container
----------------------------------------------- */
#ar-grant-highlights {
   padding-block: 0;
}


/* MARK: Vertical spacing
----------------------------------------------- */
.ar-text-narrow-image-block + .dual-slider {
   --margin-block-start: 2.75rem;
   margin-block-start: var(--margin-block-start);

   @media (width >= 768px) {
      --margin-block-start: 5.75rem;
   }
}

.ar-image-block {
   margin-block: 2.5rem;
}


/* MARK: Programming block
----------------------------------------------- */
.programming {
   background-color: var(--lake);
   padding-block: 7.5rem;

   @media (width >= 768px) {
      background-image: url("/assets/images/bg-map-annual-report-programming.svg");
      background-position: right bottom;
      background-repeat: no-repeat;
   }

   .ar-text-narrow-image-block {
      --block-margin-block-start: 0;
      --block-background-color: white;
      --figcaption-bg-color: rgba(255, 255, 255, 0.15);
      --figcaption-color: white;

      + * {
         margin-block-start: 2.8125rem;

         @media (width >= 768px) {
            margin-block-start: 2.5rem;
         }

         @media (width >= 1024px) {
            margin-block-start: 1.5625rem;
         }
      }
   }
}

/* =========================================================
	ANNUAL REPORTS TEXT + IMAGE BLOCK
	Applies to 2024 and newer.
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
.ar-text-narrow-image-block {
   --block-background-color: rgba(94, 94, 95, 0.08);
   --block-margin-block-start: 7.5rem;
   --block-border-styling: 8px solid var(--river);
   --block-border-width: 8px 0 0 0;
   --heading-color: var(--river);
   --heading-font-size: 3rem;
   --heading-line-height: 1.25;
   --prose-font-size: 1.25rem;
   --prose-padding-block: 1.875rem;
   --prose-padding-inline: 1.25rem;
   --figcaption-padding-block: 1.625rem 1.875rem;
   --figcaption-padding-inline: 1.125rem;
   --figcaption-bg-color: rgba(94, 94, 95, 0.2);
   --figcaption-color: var(--gray);
   --figcaption-font-size: 1.125rem;
   --figcaption-font-size-lg: 1.5rem;
   display: grid;
   position: relative;
   z-index: var(--z-above);
   margin-block-start: var(--block-margin-block-start);
   border: var(--block-border-styling);
   border-width: var(--block-border-width);
   border-radius: 8px;
   max-width: 1188px;
   overflow: hidden;

   @media (width >= 768px) {
      --block-border-width: 0 0 0 8px;
      --heading-font-size: 3rem;
      --heading-line-height: 1.35;
      --prose-padding-block: 3rem 3.5625rem;
      --prose-padding-inline: 3rem 3.6875rem;
      --figcaption-padding-block: 1.5rem 1.875rem;
      --figcaption-padding-inline: 1.875rem;
      grid-template-columns: auto 290px;
   }

   @media (width >= 1024px) {
      --prose-padding-block: 4rem 6.4375rem;
      --prose-padding-inline: 4rem;
   }
}


/* MARK: Prose
----------------------------------------------- */
.ar-text-narrow-image-block .prose {
   background-color: var(--block-background-color);
   padding-inline: var(--prose-padding-inline);
   padding-block: var(--prose-padding-block);
   font-size: var(--prose-font-size);

   h2 {
      color: var(--heading-color);
      font-weight: 400;
      font-size: var(--heading-font-size);
      line-height: var(--heading-line-height);
      font-family: var(--font-serif);
      letter-spacing: -2.2%;

      &.small {
         --heading-font-size: 2.25rem;
         --heading-line-height: 1.25;
      }
   }

   p {
      --prose-flow-space: 2rem;
      line-height: 1.6;

      @media (width >= 768px) {
         --prose-flow-space: 1.875rem;
      }

      a {
         font-weight: 700;
      }
   }
}


/* MARK: Image
----------------------------------------------- */
.ar-text-narrow-image-block {
   figure {
      display: flex;
      flex-direction: column;
   }

   figure picture {
      flex: 1;
      max-height: 100%;

      img {
         width: 100%;
         height: 100%;
         -o-object-fit: cover;
            object-fit: cover;
      }
   }

   figcaption {
      flex: 1;
      background-color: var(--figcaption-bg-color);
      padding-inline: var(--figcaption-padding-inline);
      padding-block: var(--figcaption-padding-block);
      color: var(--figcaption-color);
      font-style: italic;
      font-size: var(--figcaption-font-size);

      p:has(strong) {
         font-style: normal;
         font-size: var(--figcaption-font-size-lg);

         + p {
            margin-block-start: 0.75rem;
         }
      }
   }
}


/* MARK: Buttons
----------------------------------------------- */
.ar-text-narrow-image-block .button-group {
   -moz-column-gap: 2.5rem;
        column-gap: 2.5rem;
   row-gap: 1.25rem;
   margin-block-start: 2.1875rem;

   .button {
      text-transform: uppercase;
   }
}

/* =========================================================
	ANNUAL REPORTS IMAGE BLOCKS
	Applies to 2024 and newer.
========================================================= */

/* MARK: Single/1-up
----------------------------------------------- */
/* .ar-image-block[data-img-block="single"] {} */


/* MARK: 2-up
----------------------------------------------- */
.ar-image-block[data-img-block="2-up"] {
   --gap: 1rem;
   display: grid;
   gap: var(--gap);

   @media (width >= 850px) {
      --gap: 1.25rem;
      grid-template-columns: repeat(2, 1fr);

      figure {
         overflow: hidden;
      }

      figure:nth-child(1) {
         border-radius: 0 8px 8px 0;
      }

      figure:nth-child(2) {
         border-radius: 8px 0 0 8px;
      }
   }

   @media (width >= 1024px) {
      --gap: 2rem;
   }
}


/* MARK: Figures with caption
----------------------------------------------- */
figure.with-caption {
   position: relative;

   figcaption {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.8);
      padding: 0.5rem 0.875rem;
      color: white;
      font-size: 0.9375rem;
      line-height: 1.4;
      letter-spacing: -1%;
   }

   &[data-caption="sw"] figcaption {
      bottom: 0;
      left: 0;
   }

   &[data-caption="se"] figcaption {
      right: 0;
      bottom: 0;
   }
}

/* =========================================================
	ANNUAL REPORTS ACCORDION CARDS
	Applies to 2024 and newer.
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
.ar-accordion-cards {
   --card-heading-font-size: 2rem;
   --card-heading-line-height: 1.2;
   --card-heading-letter-spacing: -3%;
   --card-summary-icon-width: 9px;
   --card-summary-gap: 0.75rem;
   --card-summary-font-size: 1.3125rem;
   --card-summary-line-height: 1.9;
   --card-summary-letter-spacing: -3%;
   --card-prose-font-size: var(--fs--2);
   --card-prose-line-height: 1.625;
   --card-prose-letter-spacing: -3%;

   @media (width >= 768px) {
      --card-heading-font-size: 1.75rem;
      --card-heading-line-height: 1.25;
      --card-heading-letter-spacing: -1%;
   }

   .card {
      align-items: start;
      border-radius: 8px;
      background-color: white;
      padding-inline: 1.6875rem;
      padding-block: 1.875rem 3.75rem;

      h3 {
         font-weight: 700;
         font-size: var(--card-heading-font-size);
         line-height: var(--card-heading-line-height);
         letter-spacing: var(--card-heading-letter-spacing);
      }

      h3 + * {
         margin-block-start: 1.75rem;
      }

      details {
         &[open] summary::before {
            rotate: 90deg;
         }

         + details {
            margin-block-start: 1.25rem;
         }
      }

      details summary {
         display: grid;
         grid-template-columns: var(--card-summary-icon-width) auto;
         gap: var(--card-summary-gap);
         font-size: var(--card-summary-font-size);
         line-height: 1.14285714;
         list-style: none; /* Ensure default marker is removed for Firefox */

         &::before {
            display: inline-block;
            transition: all var(--transition-base-fast);
            margin-block-start: 5px;
            background-image: url("/assets/images/icon-accordion-arrow.svg");
            background-position: center;
            background-repeat: no-repeat;
            width: var(--card-summary-icon-width);
            height: 15px;
            content: "";
         }

         span.extra {
            font-size: var(--fs--2);
         }

         /* Remove default marker/bullet */
         &::-moz-list-bullet { list-style-type: none; /* Firefox */ }
         &::-webkit-details-marker,
			&::marker { display: none; /* Webkit - Safari, Chrome, Edge */ }
      }

      details .prose {
         margin-block-start: 0.25rem;
         padding-inline-start: calc(var(--card-summary-icon-width) + var(--card-summary-gap));
         font-size: var(--card-prose-font-size);
         line-height: var(--card-prose-line-height);
         letter-spacing: var(--card-prose-letter-spacing);
      }

      details .prose a {
         font-weight: 700;
      }
   }
}


/* MARK: 2-up or more layout
----------------------------------------------- */
.ar-accordion-cards[data-accordion-cards="2-up"] {
   display: grid;
   row-gap: 2.5rem;

   @media (width >= 700px) {
      grid-template-columns: repeat(2, 1fr);
      -moz-column-gap: 1.125rem;
           column-gap: 1.125rem;
   }

   @media (width >= 1024px) {
      -moz-column-gap: 1.375rem;
           column-gap: 1.375rem;
   }
}

/* =========================================================
	ANNUAL REPORTS DUAL SLIDER & FILTERS
	Applies to 2024 and newer.
========================================================= */

/* MARK: Container/wrapper
----------------------------------------------- */
.dual-slider {
   width: 100%;
   overflow: hidden;
}


/* MARK: Min/mobile filters
----------------------------------------------- */
.filters-min {
   @media (width >= 640px) { display: none; }

   --filter-primary-color: #025d6e;
   position: relative;
   margin-block-end: 1.875rem;

   /* MARK: Toggle for mobile filter */
   button.mobile-filter-toggle {
      display: block;
      border: 2px solid var(--filter-primary-color);
      border-radius: 6px;
      background-color: white;
      padding: 0.25rem 0.5rem;
      width: 100%;
      color: var(--filter-primary-color);
      font-weight: 600;
      font-size: 1.125rem;
      text-transform: uppercase;

      &[aria-expanded="true"] {
         border-radius: 6px 6px 0 0;
      }

      .toggle-icon {
         display: inline-block;
         rotate: -90deg;
         transition: rotate var(--transition-base-fast);

         &.open {
            rotate: 0deg;
         }
      }
   }

   /* MARK: Mobile dropdown */
   .mobile-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      z-index: calc(var(--z-above) + 10);
      background-color: var(--filter-primary-color);
      padding: 1.25rem 0.625rem 2.5rem;
   }

   .dropdown-content {
      text-align: center;

      > div:has(.dropdown-section) {
         display: flex;

         .dropdown-section:nth-child(1) {
            flex-basis: 40%;
         }

         .dropdown-section:nth-child(2) {
            flex-basis: 60%;
         }
      }

      button {
         display: block;
         border: 0;
         background-color: transparent;
         padding: 1rem;
         width: 100%;
         color: white;
         font-weight: 600;
         font-size: 0.875rem;
         line-height: 1;
         letter-spacing: -0.15px;
         text-align: center;
         text-transform: uppercase;

         &.active {
            color: #4e8f9a;
         }
      }
   }
}


/* MARK: Max/desktop filters
----------------------------------------------- */
.filters-max {
   @media (width < 640px) { display: none; }

   /* MARK: Toggle for state/sector */
   .view-toggle {
      --view-toggle-bg: var(--salmon);
      display: block;
      position: relative;
      transition: all var(--transition-base);
      margin-inline: auto 0;
      border: 0;
      border-radius: 5px 6px 6px 0;
      background-color: var(--view-toggle-bg);
      padding: 0.5rem 1.25rem 0.5rem 0.75rem;
      color: white;
      font-weight: 700;
      font-size: 0.875rem;
      line-height: 1;
      letter-spacing: 3%;
      text-transform: uppercase;

      &::before {
         --slant-width: 14px;
         position: absolute;
         bottom: 0;
         left: calc(var(--slant-width) * -1.4);
         clip-path: polygon(100% 0, 0% 100%, 100% 100%);
         background-color: var(--view-toggle-bg);
         width: calc(var(--slant-width) * 1.5);
         height: calc(100% - 1px);
         content: "";
      }

      &:hover {
         filter: brightness(1.3);
      }
   }

   /* MARK: Filter buttons */
   .filter-buttons {
      --flow-space: 0.375rem;
      --btn-label-color: white;
      --btn-min-width: clamp(70px, 4vw, 150px);
      --btn-bg-color: var(--twilight);
      --btn-border-color: var(--btn-bg-color);
      --btn-border: 1.5px solid var(--btn-border-color);
      --btn-font-size: clamp(0.875rem, 2vw, 1.25rem);
      display: flex;
      -moz-column-gap: 0.3125rem;
           column-gap: 0.3125rem;
      margin-block-end: 3.75rem;

      button {
         position: relative;
         transition: all var(--transition-base-fast);
         border: var(--btn-border);
         border-radius: var(--radius-sm);
         background-color: var(--btn-bg-color);
         padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5625rem, 2vw, 1rem);
         min-width: var(--btn-min-width);
         color: var(--btn-label-color);
         font-weight: 700;
         font-size: var(--btn-font-size);
      }

      button.active::after {
         --arrow: url("/assets/images/bg-filter-btn-arrow-twilight.svg");
         position: absolute;
         top: 100%;
         left: 50%;
         transform: translateX(-50%);
         background-image: var(--arrow);
         background-position: center;
         background-repeat: no-repeat;
         width: 70px;
         height: 16px;
         content: "";
      }

      button[data-filter="all"],
      button[data-filter="all"].active {
         --btn-bg-color: white;
         --btn-border-color: var(--twilight);
         --btn-label-color: var(--twilight);
         max-width: -moz-fit-content;
         max-width: fit-content;
         text-transform: uppercase;


         &::after { display: none; }
      }
   }

   /* MARK: State filter buttons */
   .filter-buttons.state-filters {
      /* Shared styles */
      button {
         flex: 1 0 auto;
         background-position: center;
         background-size: contain;
         background-repeat: no-repeat;
         height: clamp(32px, 5vw, 64px);
         text-transform: uppercase;


         &:hover { filter: brightness(1.3); }
      }

      /* Unique styles */
      button[data-filter="Alaska"] {
         background-image: url("/assets/images/bg-state-filter-btn-ak.svg");
      }

      button[data-filter="Idaho"] {
         --btn-min-width: clamp(72px, 4vw, 150px);
         background-image: url("/assets/images/bg-state-filter-btn-id.svg");
      }

      button[data-filter="Montana"] {
         background-image: url("/assets/images/bg-state-filter-btn-mt.svg");
      }

      button[data-filter="Oregon"] {
         background-image: url("/assets/images/bg-state-filter-btn-or.svg");
      }

      button[data-filter="Washington"] {
         background-image: url("/assets/images/bg-state-filter-btn-wa.svg");
      }

      button[data-filter="bcNational"] {
         --btn-min-width: clamp(122px, 14vw, 183px);
         background-image: url("/assets/images/bg-state-filter-btn-bc-natl.svg");
      }
   }

   /* MARK: Sector filter buttons */
   .filter-buttons.sector-filters {
      /* Shared styles */
      button {
         --btn-border: 1.5px solid var(--btn-border-color);
         --btn-font-size: clamp(0.75rem, 1vw, 1rem);
         line-height: 1.2;


         &:hover { filter: brightness(1.2) saturate(0.6); }


         &.active { filter: brightness(1.5) saturate(0); }
      }

      /* Unique styles */
      button[data-filter="all"],
      button[data-filter="all"].active {
         --btn-min-width: max-content;
         --btn-font-size: clamp(0.75rem, 1vw, 1.25rem);
         filter: none;
      }

      button[data-filter="arts-culture"] {
         --btn-bg-color: var(--lake);
         --btn-border-color: var(--btn-bg-color);


         &.active::after { --arrow: url("/assets/images/bg-filter-btn-arrow-lake.svg"); }
      }

      button[data-filter="human-services"] {
         --btn-bg-color: var(--gray);
         --btn-border-color: var(--btn-bg-color);


         &.active::after { --arrow: url("/assets/images/bg-filter-btn-arrow-dark-gray.svg"); }
      }

      button[data-filter="health"] {
         --btn-bg-color: var(--salmon);
         --btn-border-color: var(--btn-bg-color);


         &.active::after { --arrow: url("/assets/images/bg-filter-btn-arrow-salmon.svg"); }
      }

      button[data-filter="education"] {
         --btn-bg-color: var(--twilight);
         --btn-border-color: var(--btn-bg-color);


         &.active::after { --arrow: url("/assets/images/bg-filter-btn-arrow-twilight.svg"); }
      }

      button[data-filter="research"] {
         --btn-bg-color: var(--gold);
         --btn-border-color: var(--btn-bg-color);


         &.active::after { --arrow: url("/assets/images/bg-filter-btn-arrow-gold.svg"); }
      }
   }
}


/* MARK: Slider
----------------------------------------------- */
.dual-slider-container {
   width: 100%;
   overflow: hidden;

   .slider + .slider {
      margin-block-start: 0.9375rem;
   }

   /* MARK: Slide */
   .swiper-slide {
      --slide-dimension: 150px;
      --slide-sector-color: white;
      flex-shrink: 0;  /* Prevent flexbox from changing it */
      opacity: 1;
      transition: all var(--transition-base);
      border-radius: var(--radius-md);
      width: var(--slide-dimension) !important;
      height: var(--slide-dimension);
      overflow: hidden;

      @media (width >= 640px) {
         --slide-dimension: 200px;
      }

      &[data-sector="arts-culture"] {
         --slide-sector-color: var(--lake);
      }

      &[data-sector="human-services"] {
         --slide-sector-color: var(--gray);
      }

      &[data-sector="health"] {
         --slide-sector-color: var(--salmon);
      }

      &[data-sector="education"] {
         --slide-sector-color: var(--twilight);
      }

      &[data-sector="research"] {
         --slide-sector-color: var(--gold);
      }
   }

   /* MARK: Inactive slide */
   .swiper-slide:not(.active) {
      opacity: 0.2;
   }

   /* MARK: Slide button */
   .swiper-slide button {
      display: flex;
      position: relative;
      margin: 0;
      border: 0;
      background-color: transparent;
      padding: 0;
      width: 100%;
      height: 100%;

      &::before,
      &::after {
         position: absolute;
         inset-inline: 0;
         width: 100%;
         height: 8px;
         content: "";
      }

      .slide-overlay {
         display: flex;
         position: absolute;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
         transition: all var(--transition-base);
         inset: 0;
         background-color: var(--slide-sector-color);
         padding-inline: 0.75rem;
         padding-block: 1.5rem 1rem;
         width: 100%;
         height: 100%;
      }

      .slide-overlay h3 {
         color: white;
         font-weight: 400;
         font-size: var(--fs--2);
         line-height: 1.375;
         font-family: var(--font-serif);
         letter-spacing: -2%;
      }

      .slide-overlay div {
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 100%;
      }

      .slide-overlay div img { opacity: 0.4; }
      .slide-overlay div img:nth-child(2) { max-width: 50px; }

      /* Add focus outline for better visibility: */
      &:focus-visible {
         outline: 2px solid var(--focus-color, blue);
         outline-offset: 2px;
      }

      /* Touch-friendly active state */
      &:active .slide-overlay {
         transform: translateY(0);
      }
   }

   /* MARK: Slide overlay & button band per row */
   .slider-1 .swiper-slide button {
      .slide-overlay {
         transform: translateY(-100%);
      }

      &::before {
         top: 0;
         background-color: var(--slide-sector-color);
      }
   }

   .slider-2 .swiper-slide button {
      .slide-overlay {
         transform: translateY(100%);
      }

      &::after {
         bottom: 0;
         background-color: var(--slide-sector-color);
      }
   }

   /* MARK: Button hover */
   .swiper-slide button:hover .slide-overlay,
   .swiper-slide button:focus-visible .slide-overlay,
   .swiper-slide button.touch-active .slide-overlay {
      transform: translateY(0);
   }
}


/* MARK: Instructions
----------------------------------------------- */
.slider-instructions {
   transition: opacity 0.7s ease;
   font-weight: 700;
   font-size: 1.375rem;
   line-height: 1.1;
   text-align: center;
   text-transform: uppercase;

   p {
      display: flex;
      -moz-column-gap: 20px;
           column-gap: 20px;
      justify-content: center;
      align-items: center;
      opacity: 0.4;
      color: var(--lake);
      font-size: inherit;
      letter-spacing: 3%;


      @media (width >= 640px) { -moz-column-gap: 30px; column-gap: 30px; }
   }

   &[data-instructions="top"] {
      margin-block-end: 1.875rem;
   }

   &[data-instructions="bottom"] {
      margin-block-start: 2.5rem;
      font-size: 0.875rem;


      @media (width >= 640px) { font-size: 1.25rem; }

      p svg {
         width: 20px;


         @media (width >= 640px) { width: 32px; }
      }

      p svg:first-of-type {
         rotate: 180deg;
      }
   }
}

.slider-instructions.visible {
   opacity: 1;
}


/* MARK: Modal
----------------------------------------------- */
.micromodal-slide {
   display: none;
   position: relative;
   z-index: calc(var(--z-modal) + 50);

   &.is-open {
      display: block;
   }

   /* MARK: Overlay */
   .modal__overlay {
      display: flex;
      position: fixed;
      justify-content: center;
      align-items: center;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      width: 100vw;
      height: 100vh;
      min-height: 100vh;
      overflow: auto;
   }

   /* MARK: Container */
   .modal__container {
      position: relative;
      flex: 1;
      background-color: white;
      width: 100%;
      height: 100%;
      max-height: 100%;
      overflow-y: auto;
   }

   /* MARK: Close button */
   .modal__container .modal__btn {
      display: grid;
      position: absolute;
      top: 5px;
      right: 20px;
      justify-content: center;
      align-items: center;
      z-index: calc(var(--z-modal) + 1);
      transition: all var(--transition-base);
      margin: 0;
      border: 0;
      background-color: transparent;
      padding: 0;
      width: 60px;
      height: 60px;
      color: white;

      @media (width >= 768px) {
         top: 40px;
         right: 40px;
         border-radius: 50%;
         background-color: var(--gray);
      }

      &::after {
         width: 100%;
         height: 100%;
         content: "\2715";
         color: white;
         font-size: 2.6875rem;
         line-height: 1.4;
      }

      &:hover {
         rotate: -90deg;
      }
   }

   /* MARK: Modal content */
   .modal__content {
      --sector-color: white;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      min-height: 100vh;

      @media (width >= 768px) {
         display: grid;
         grid-template-columns: 30% auto;
      }

      @media (width >= 1024px) {
         grid-template-columns: 25% auto;
      }

      &[data-sector="arts-culture"] { --sector-color: var(--lake); }
      &[data-sector="human-services"] { --sector-color: var(--gray); }
      &[data-sector="health"] { --sector-color: var(--salmon); }
      &[data-sector="education"] { --sector-color: var(--twilight); }
      &[data-sector="research"] { --sector-color: var(--gold); }
   }

   /* MARK: Modal text/prose */
   .modal__content .prose {
      --p-font-size: 0.9375rem;
      --p-line-height: 1.3;
      --heading-font-size: 1.8175rem;
      --heading-line-height: 1.3;
      --heading-margin-bottom: 0.9375rem;
      --padding-inline: 1.875rem;
      flex-shrink: 0;
      background-color: var(--sector-color);
      padding-inline: var(--padding-inline);
      padding-block: 2.5rem 1.875rem;
      color: white;
      font-size: var(--p-font-size);
      line-height: var(--p-line-height);

      @media (width >= 768px) {
         --p-font-size: var(--fs--2);
         --p-line-height: 1.5625;
         --heading-font-size: 1.875rem;
         --heading-line-height: 1.3;
      }

      @media (width >= 1024px) {
         --heading-margin-bottom: 3.125rem;
         --padding-inline: 1.5rem;
      }

      @media (width >= 1180px) { --padding-inline: 2rem; }

      @media (width >= 1280px) { --padding-inline: 3rem; }

      h3 {
         margin-block-end: var(--heading-margin-bottom);
         color: inherit;
         font-weight: 400;
         font-size: var(--heading-font-size);
         line-height: var(--heading-line-height);
         font-family: var(--font-serif);
      }
   }

   /* MARK: Modal image/figure */
   .modal__content figure {
      position: relative;
      flex-grow: 1;
      flex-shrink: 1;
      min-height: 40vh;

      img {
         display: block;
         width: 100%;
         height: 100%;
         -o-object-fit: cover;
            object-fit: cover;
      }

      footer {
         --gap: 0.625rem;
         --padding: 0.75rem;
         --justify: center;
         --stats-font-size: 1.75rem;
         display: flex;
         position: absolute;
         bottom: 0;
         -moz-column-gap: var(--gap);
              column-gap: var(--gap);
         justify-content: var(--justify);
         align-items: center;
         inset-inline: 0;
         background-color: rgba(255, 255, 255, 0.9);
         padding: var(--padding);
         width: 100%;

         @media (width >= 420px) {
            --gap: 2rem;
            --padding: 1rem 0.75rem;
         }

         @media (width >= 500px) {
            --gap: 3rem;
            --padding: 1rem 2rem;
            --justify: space-between;
         }

         @media (widdth >= 768px) {
            --stats-font-size: 2.2rem;
         }

         @media (width >= 1024px) {
            --gap: 4rem;
            --justify: flex-start;
            --stats-font-size: 3rem;
         }
      }

      /* MARK: Modal sector icon */
      footer .sector {
         --text-max-width: calc(40% - var(--gap));
         --text-font-size: 0.875rem;
         display: flex;
         -moz-column-gap: 6px;
              column-gap: 6px;
         align-items: center;
         max-width: var(--text-max-width);
         color: var(--sector-color);
         font-size: var(--text-font-size);
         line-height: 1.2;


         @media (width >= 500px) { --text-font-size: 0.9375rem; }

         @media (width >= 768px) { --text-font-size: 1.15rem; }

         @media (width >= 1024px) { --text-font-size: 1.375rem; }


         &[data-sector="arts-culture"] {
				@media (width >= 420px) { --text-max-width: 150px; }
				@media (width >= 500px) { --text-max-width: 170px; }
				@media (width >= 768px) { --text-max-width: 190px; }
				@media (width >= 1024px) { --text-max-width: 240px; }
         }

         &[data-sector="human-services"] {
				@media (width >= 420px) { --text-max-width: 160px; }
				@media (width >= 500px) { --text-max-width: 180px; }
				@media (width >= 768px) { --text-max-width: 210px; }
				@media (width >= 1024px) { --text-max-width: 260px; }
         }

         &[data-sector="health"] {
				@media (width >= 420px) { --text-max-width: 180px; }
				@media (width >= 500px) { --text-max-width: 220px; }
				@media (width >= 768px) { --text-max-width: 280px; }
				@media (width >= 1024px) { --text-max-width: 300px; }
			}

         &[data-sector="education"] {
				@media (width >= 420px) { --text-max-width: 180px; }
				@media (width >= 500px) { --text-max-width: 200px; }
				@media (width >= 768px) { --text-max-width: 280px; }
         }

         &[data-sector="research"] {
				@media (width >= 420px) { --text-max-width: 140px; }
				@media (width >= 500px) { --text-max-width: 160px; }
         }

         svg,
         img {
            --icon-width: 38px;
            flex-shrink: 0;
            width: var(--icon-width);


            @media (width >= 420px) { --icon-width: 48px; }

            @media (width >= 1024px) { --icon-width: 64px; }
         }
      }

      /* MARK: Modal state icon */
      footer .state {
         --state-icon-margin-inline: 0;
         display: flex;
         align-items: center;
         color: var(--sector-color);
         font-weight: 700;
         font-size: var(--stats-font-size);

         svg {
            --svg-max-sizing: 40px;
            fill: var(--sector-color);
            margin-inline-start: var(--state-icon-margin-inline);
            max-width: var(--svg-max-sizing);
            max-height: var(--svg-max-sizing);


            @media (width >= 768px) { --svg-max-sizing: 50px; }

            @media (width >= 1024px) { --svg-max-sizing: 64px; }
         }


         &[data-state="Alaska"] {
            svg { --state-icon-margin-inline: 0; }

				@media (width >= 768px) {
					svg { --state-icon-margin-inline: 4px; }
				}
         }


         &[data-state="Idaho"] {
            svg { --state-icon-margin-inline: -4px; }

				@media (width >= 768px) {
					svg { --state-icon-margin-inline: 4px; }
				}
         }


         &[data-state="Montana"] {
            svg { --state-icon-margin-inline: 4px; }

				@media (width >= 768px) {
					svg { --state-icon-margin-inline: 7px; }
				}
         }

         &[data-state="Oregon"] {
            svg { --state-icon-margin-inline: 5px; }

				@media (width >= 1024px) {
					svg { --state-icon-margin-inline: 8px; }
				}
         }


         &[data-state="Washington"] {
            svg { --state-icon-margin-inline: 2px; }

				@media (width >= 768px) {
					svg { --state-icon-margin-inline: 4px; }
				}
         }

         &[data-state="BC"] {
            svg { --state-icon-margin-inline: 4px; }

				@media (width >= 768px) {
					svg { --state-icon-margin-inline: 8px; }
				}
         }


         &[data-state="National"] {
            svg { --state-icon-margin-inline: 2px; }

				@media (width >= 768px) {
					svg { --state-icon-margin-inline: 4px; }
				}
         }
      }

      /* MARK: Modal amount text */
      footer .amount {
         color: var(--sector-color);
         font-weight: 700;
         font-size: var(--stats-font-size);
         text-transform: uppercase;
      }
   }
}


/* MARK: Modal animations
----------------------------------------------- */
@keyframes mmfadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
}

@keyframes mmfadeOut {
   from { opacity: 1; }
   to { opacity: 0; }
}

.micromodal-slide[aria-hidden="false"] .modal__overlay,
.micromodal-slide[aria-hidden="false"] .modal__container {
   animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
   animation: mmfadeOut 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
   animation: mmfadeOut 0.25s cubic-bezier(0, 0, 0.2, 1);
}

/* =========================================================
	PEOPLE SECTION
	Applies to 2024 and newer.
========================================================= */

/* MARK: People section
----------------------------------------------- */
#ar-people {
   padding-block: 7.125rem 0;

   h2.section-heading {
      color: var(--lake);
      font-weight: 400;
      font-size: 3rem;
      line-height: 1.25;
      font-family: var(--font-serif);
      letter-spacing: -2.2%;
      text-align: center;

      @media (width >= 768px) {
         font-size: 4.75rem;
         letter-spacing: -3%;
      }
   }
}


/* MARK: People grid
----------------------------------------------- */
.people-grid {
   --grid-col-gap: 1.25rem;
   --grid-row-gap: 1.25rem;
   --bio-border: 10px solid var(--lake);
   --bio-border-width: 0 0 10px 0;
   --bio-padding-inline: 1.25rem;
   --bio-padding-block: 1.75rem;
   display: flex;
   -moz-column-gap: var(--grid-col-gap);
        column-gap: var(--grid-col-gap);
   row-gap: var(--grid-row-gap);
   flex-wrap: wrap;
   justify-content: center;
   margin-block-start: 2.5rem;

   @media (width >= 768px) {
      --grid-col-gap: 3.75rem;
      --grid-row-gap: 3rem;
      --bio-border-width: 0 0 0 10px;
      --bio-padding-inline: 1.375rem;
      --bio-padding-block: 2rem;
   }

   @media (width >= 1024px) {
      --grid-col-gap: 4.375rem;
      --grid-row-gap: 3rem;
      margin-block-start: 3.375rem;
   }
}


/* MARK: People grid
----------------------------------------------- */
article.people-card {
   position: relative;
   flex: 0 0 150px; /* Fixed width cards */

   @media (width >= 768px) {
      flex: 0 0 182px;
   }

   /* Remove the bio from inside the card structure completely */
   .bio {
      display: none !important;
   }

   button {
      cursor: pointer;
      border: 0;
      background: none;
      padding: 0;
      width: 100%;
      text-align: left;

      &:focus-visible {
         outline: 3px solid var(--lake);
         outline-offset: 2px;
      }
   }

   &.bio-active::after {
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      animation: fadeInSlide 0.4s ease-out;
      background-image: url("/assets/images/bg-bio-arrow.svg");
      background-position: center;
      background-repeat: no-repeat;
      width: 109px;
      height: 21px;
      content: "";

      @media (width >= 768px) {
         bottom: -48px;
      }
   }

   figure {
      position: relative;
      margin: 0;

      img {
         border-radius: 8px;
         aspect-ratio: 1;
         width: 100%;
      }

      .icon {
         display: grid;
         position: absolute;
         top: 154px;
         right: 4px;
         justify-content: center;
         align-items: center;
         margin: 0;
         border-radius: 50%;
         background-color: white;
         width: 24px;
         height: 24px;

         svg {
            fill: var(--lake);
            margin-inline: auto;
            width: 70%;
         }
      }

      figcaption {
         margin-block-start: 0.625rem;
      }

      figcaption h3 {
         color: var(--river);
         font-weight: 700;
         font-size: 1.125rem;
         line-height: 1.17;
         letter-spacing: -1%;
      }

      figcaption p {
         margin-block-start: 0.625rem;
         color: var(--gray);
         font-style: italic;
         font-size: var(--fs--2);
         line-height: 1.25;
         letter-spacing: -1%;

         @media (width >= 768px) {
            margin-block-start: 0.375rem;
         }
      }
   }
}


/* MARK: People bio panel
----------------------------------------------- */
.full-width-bio-row {
   display: none;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   transition: all 0.3s ease;
   border: var(--bio-border);
   border-width: var(--bio-border-width);
   border-radius: 8px;
   background-color: rgba(94, 94, 95, 0.1);
   width: 100vw;

   &.showing-bio {
      display: block;
      animation: fadeInSlide 0.4s ease-out;
   }

   .bio-content-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 2rem;
      margin: 0 auto;
      padding: var(--bio-padding-block) var(--bio-padding-inline);
      max-width: 1200px; /* Match your container */
   }

   .bio-text {
      transition: opacity 0.3s ease;
   }

   .bio-close {
      flex: 0 0 auto;
      cursor: pointer;
      border: none;
      background: none;
      width: 38px;
      height: 38px;

      &:focus-visible {
         outline: 3px solid var(--lake);
         outline-offset: 2px;
      }

      .icon-close {
         display: block;
         position: relative;
         width: 100%;
         height: 100%;
      }

      .icon-close span {
         display: block;
         position: absolute;
         top: 50%;
         left: 0;
         transform-origin: center;
         background-color: var(--gray);
         width: 100%;
         height: 3px;
      }

      .icon-close span:nth-child(1) {
         rotate: 45deg;
      }

      .icon-close span:nth-child(2) {
         rotate: -45deg;
      }
   }
}

@keyframes fadeInSlide {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}


/* MARK: Single person text & image blocks
----------------------------------------------- */
.ar-single-person-blocks {
   margin-block-start: 7.5rem;
   background-color: var(--river);
   padding-block: 7.5rem;

   @media (width >= 768px) {
      margin-block-start: 7.125rem;
      background-image: url("/assets/images/bg-map-annual-report-people.svg");
      background-position: right bottom;
      background-repeat: no-repeat;
   }

   @media (width >= 1024px) {
      margin-block-start: 7.25rem;
   }

   .ar-text-narrow-image-block {
      --block-background-color: white;
      --block-margin-block-start: 0;
      --block-border-styling: 8px solid var(--lake);
      --figcaption-bg-color: rgba(255, 255, 255, 0.1);
      --figcaption-color: white;

      + .ar-text-narrow-image-block {
         --block-margin-block-start: 3rem;
      }
   }
}

/* =========================================================
	ANNUAL REPORTS INVESTMENTS SECTION
	Applies to 2024 and newer.
========================================================= */


/* MARK: Section / container
----------------------------------------------- */
#ar-investments {
   --section-padding-block: 7rem 6.6875rem;
   padding-block: var(--section-padding-block);

   @media (width >= 768px) { --section-padding-block: 7.5rem 7rem; }
}


/* MARK: Intro text & image block
----------------------------------------------- */
#ar-investments .ar-text-narrow-image-block:first-of-type { --block-margin-block-start: 0; }


/* MARK: Total assets chart
----------------------------------------------- */
#ar-investments .ar-total-assets-chart-container {
   --section-margin-block-start: 2.5rem;
   --chart-min-height: 800px;

   margin-block-start: var(--section-margin-block-start);

   @media (width >= 768px) {
      --chart-min-height: 500px;
      --section-margin-block-start: 3.75rem;
   }

   @media (width >= 1024px) {
      --chart-min-height: 400px;
      --section-margin-block-start: 7rem;
   }

   .prose {
      margin-block-end: 1rem;
      font-size: 1.25rem;
   }

   .ar-stacked-chart {
      height: var(--chart-min-height);
      min-height: var(--chart-min-height);

      #stacked-financial-chart {
         width: 100%;
         height: 100%;
      }
   }
}


/* MARK: Investment types chart
----------------------------------------------- */
#ar-investments .ar-investment-types {
   --section-margin-block-start: 2.25rem;
   display: grid;
   row-gap: 1.5625rem;
   margin-block-start: var(--section-margin-block-start);

   @media (width >= 768px) {
      --section-margin-block-start: 3.75rem;
   }

   @media (width >= 960px) {
      grid-template-rows: auto 1fr;
      grid-template-columns: auto 223px;
      row-gap: 3.125rem;
   }

   @media (width >= 1024px) {
      --section-margin-block-start: 7.5rem;
      grid-template-columns: auto 260px;
      -moz-column-gap: 5.375rem;
           column-gap: 5.375rem;
   }

   .prose {
      font-size: 1.25rem;
      line-height: 1.6;

      @media (width >= 960px) {
         grid-row: 1;
         grid-column: 1;
      }

      a {
         font-weight: 700;
      }
   }

   figure.donut-chart-container {
      margin-inline: auto;
      width: 248px;
      max-width: 100%;

      @media (width >= 960px) {
         grid-row: 1 / 3;
         grid-column: 2;
      }

      figcaption {
         margin-inline: auto;
         margin-block-start: 1rem;
         max-width: 120px;
         font-size: 1.75rem;
         line-height: 1.1;
         letter-spacing: -1%;
         text-align: center;
      }
   }

   .ar-investment-types-container {
      --spacing: 2.25rem;

      @media (width >= 960px) {
         --spacing: 1.25rem;
         grid-row: 2;
         grid-column: 1;
      }
   }

   h3 {
      --heading-alignment: center;
      font-weight: 400;
      font-size: 1.75rem;
      line-height: 1.35;
      font-family: var(--font-serif);
      letter-spacing: -2.2%;
      text-align: var(--heading-alignment);

      @media (width >= 960px) { --heading-alignment: left; }

      + .ar-investment-types-lists {
         margin-block-start: var(--spacing);
      }
   }

   .ar-investment-types-lists {
      --dl-text-align: center;
      --dl-column-gap: 1rem;
      --dt-margin-inline: auto;
      --dt-padding-inline: 1.125rem;
      display: grid;
      row-gap: 2.5rem;

      @media (width >= 768px) {
         grid-template-columns: 1fr 1fr 1fr;
         -moz-column-gap: var(--dl-column-gap);
              column-gap: var(--dl-column-gap);
      }

      @media (width >= 960px) {
         --dl-text-align: left;
         --dl-column-gap: 0.5rem;
      }

      dl {
         color: var(--gray);
         font-size: 1.25rem;
         line-height: 1;
         letter-spacing: -1%;
         text-align: var(--dl-text-align);


         &:nth-child(1) dt { background-color: var(--twilight); }


         &:nth-child(2) dt { background-color: var(--lake); }


         &:nth-child(3) dt { background-color: var(--salmon); }
      }

      dl dt {
         margin-inline: var(--dt-margin-inline);
         border-radius: var(--radius-sm);
         padding-inline: var(--dt-padding-inline);
         padding-block: 0.8125rem;
         width: -moz-fit-content;
         width: fit-content;
         color: white;
         font-weight: 700;

         @media (width >= 960px) {
            --dt-margin-inline: 0 auto;
         }
      }

      dl dd {
         margin-block-start: 0.875rem;

         @media (width >= 960px) {
            padding-inline-start: var(--dt-padding-inline);
         }
      }
   }
}

/* =========================================================
	BENEFACTOR SECTION
	Applies to 2024 and newer.
========================================================= */

#ar-benefactor {
   background-color: rgba(94, 94, 95, 0.1);
   padding-block: 7.5rem;

   @media (width >= 768px) {
      background-image: url("/assets/images/bg-map-annual-report-benefactor.svg");
      background-position: left bottom;
      background-repeat: no-repeat;
   }

   .ar-text-narrow-image-block {
      --block-background-color: white;
      margin-block: 0;
   }
}

/* =========================================================
	MISSION SECTION
	Applies to 2024 and newer.
========================================================= */

#ar-mission {
   .ar-text-narrow-image-block {
      --block-background-color: rgba(80, 201, 181, 0.1);
      --block-border-styling: 8px solid var(--lake);
      --heading-color: var(--lake);
   }
}

/* =========================================================
	FOOTER
	Applies to 2024 and newer.
========================================================= */

footer {
   margin-block-start: 7.5rem;
   padding-block: 2.25rem 3.375rem;

   @media (width < 960px) { --flow-space: 2.625rem; }

   @media (width >= 960px) {
      display: flex;
      row-gap: 3.5625rem;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
   }

   > a {
      display: block;
      font-weight: 700;
      font-size: 1.375rem;
      line-height: 1.4;
      letter-spacing: -1%;
      text-align: center;
   }

   ul {
      display: flex;
      -moz-column-gap: 2.25rem;
           column-gap: 2.25rem;
      justify-content: center;
      align-items: center;

      li:nth-child(1) { width: 19px; }
      li:nth-child(2) { width: 36px; }
      li:nth-child(3) { width: 33px; }
      li:nth-child(4) { width: 34px; }
      li svg { fill: var(--salmon); }
   }

   > p {
      color: rgba(0, 0, 0, 0.3);
      font-weight: 400;
      font-size: 0.75rem;
      line-height: 1;
      letter-spacing: -1%;
      text-align: center;

      @media (width >= 960px) {
         flex-basis: 100%;
      }
   }
}

/* =========================================================
	ANIMATIONS
	Applies to 2024 and newer.
========================================================= */

*[data-aos] {
   /* Ensure AOS has clean control */
   will-change: opacity;

	&:not(.aos-animate) { opacity: 0; }
}


/* MARK: Header animations
----------------------------------------------- */
header.ar-header {
	--bg-color-change: var(--lake);
   animation: colorChange 0.75s ease-in-out 1s forwards;

	&[data-variant="salmon"] { --bg-color-change: var(--salmon); }
	&[data-variant="dark-gray"],
	&[data-variant="none"] { --bg-color-change: var(--gray); }
	&[data-variant="gold"] { --bg-color-change: var(--gold); }
	&[data-variant="river"] { --bg-color-change: var(--river); }
	&[data-variant="twilight"] { --bg-color-change: var(--twilight); }

   .title svg[data-aos] {
      will-change: opacity, transform;

      /* Make sure no other transforms interfere */
      &:not(.aos-animate) { transform: translateX(-60px); opacity: 0; }
   }

   .image picture img {
      animation: imageFadeIn 1.5s ease-in-out forwards;
   }
}

#ar-grant-highlights .ar-image-block figure:nth-child(1):not(.aos-animate) { transform: translateX(-100px); opacity: 0; }
#ar-grant-highlights .ar-image-block figure:nth-child(2):not(.aos-animate) { transform: translateX(100px); opacity: 0; }


/* MARK: Keyframes
----------------------------------------------- */
@keyframes colorChange {
   to { background-color: var(--bg-color-change); }
}

@keyframes imageFadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
}

/* =========================================================
	VIDEO BLOCKS
========================================================= */

/* MARK: Video embed
----------------------------------------------- */
.video-embed {
	margin-inline: auto;
	margin-block-start: var(--flow-space, 30px);
	width: 100%;
	max-width: var(--max-body-width-narrow);

	> iframe {
		aspect-ratio: 16 / 9;
		width: 100%;
		height: 100%;
	}
}

:is(.container, .center):is(.is-wide, [data-variant="wide"]) .video-embed {
	max-width: calc( var(--max-body-width) - 3.125rem );
}


/* MARK: Video block
----------------------------------------------- */
.video-block[data-page="50th-anniversary"] {
	--padding-block: 4.5rem 6.125rem;
	background-image: url("/assets/images/bg-video-texture.png");
	background-position: center;
	background-size: cover;
	background-repeat: repeat-y;

	background-color: var(--gold);
	padding-block: var(--padding-block);

	& .container {
		max-width: 62.5rem;
	}

	& h2 {
		color: white;
		font-weight: 400;
		font-size: clamp(1.5rem, 1.25vi + 2rem, 3rem);
		font-family: var(--font-serif);
	}

	& figure.video-embed {
		--flow-space: 2rem;
	}
}

@media (width >= 960px) {
	.video-block[data-page="50th-anniversary"] {
		--padding-block: 9rem 12.1875rem;

		figure.video-embed {
			--flow-space: 3rem;
		}
	}
}


/* MARK: Video set
----------------------------------------------- */
.video-set {
	float: right;
	clear: right;
	margin-inline-start: 2.5rem;
	margin-block: 0.625rem 1.5rem;
	border-radius: var(--radius-md);
	background-color: var(--neutral-100);
	padding: 1.25rem;

	@media (width >= 640px) {
		max-width: 33.75rem;
	}

	h2 {
		margin: 0;
		color: var(--gray);
		font-weight: 100;
		font-size: var(--fs-1);
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	.video-embed {
		@media (width >= 1270px) { padding-inline: 1.5rem; }
	}
}

figure.image.break-column.image-style-align-right + .video-set {
	@media (width >= 1270px) {
		margin-inline-end: -5rem;
		width: 50%;
	}
}

/* =========================================================
	ANNUAL REPORTS
	Applies to 2024 and newer.
	See annual-report-legacy.css for older report styles.

	Styles are organized following the CUBE CSS methodology
	(cube.fyi).

	Keep this file imports-only. Per the CSS spec, @import
	rules must come before any other statements — a stray
	rule above an import will silently disable it.
========================================================= */

/* Layer order */
/* @layer vendors; */


/* MARK: Globals
----------------------------------------------- */


/* MARK: Compositions
----------------------------------------------- */


/* MARK: Utilities
----------------------------------------------- */


/* MARK: Blocks
----------------------------------------------- */


/* MARK: Vendors
	Layered so all unlayered project styles
	override them regardless of specificity

	Example: @import "..." layer(vendors);
----------------------------------------------- */


/*# sourceMappingURL=annual-reports.css.map*/