/* =========================================================
	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);
}

/* =========================================================
	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;
}

/* =========================================================
	SIDEBAR COMPOSITION
========================================================= */

.sidebar {
	--sidebar-gap: var(--space-xl);
	--sidebar-width: 18.75rem;

	display: grid;
	gap: var(--sidebar-gap);

	@media (width >= 50rem) {
		grid-template-columns: 1fr var(--sidebar-width);

		> :first-child { order: 2; }
		> :last-child { order: 1; }
	}
}

/* =========================================================
	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); }
}

/* =========================================================
	GRID
========================================================= */

/* MARK: Grid
	via Kevin Powell - https://www.youtube.com/watch?v=CHULPvkXIRo&list=WL&index=4
	Works backward from a max column count to calculate the ideal column size,
	then uses that as the minmax minimum. Caps the layout at N columns while
	still collapsing gracefully — no media queries needed.

	--grid-max-col-count (3): The maximum number of columns. The grid
	will never exceed this, but will collapse to fewer as needed.

	--grid-min-col-size (200px): The minimum size of each column.
	Once columns would go below this, the grid wraps to fewer columns.

	--grid-gap (1rem): The space between each item.

	--- Do not edit below ---
	--grid-col-size-calc: Calculates the ideal column size at exactly
	max-col-count columns, accounting for gaps.

	--grid-col-min-size-calc: Resolves the final minmax minimum by
	taking whichever is larger — the min size or the calculated size —
	and capping it at 100% to prevent overflow.
----------------------------------------------- */
.grid {
	--grid-max-col-count: 3;
	--grid-min-col-size: 200px;
	--grid-gap: var(--gutter);

	/* calculations, do not touch */
	--grid-col-size-calc: calc(
		(100% - var(--grid-gap) * var(--grid-max-col-count)) /
			var(--grid-max-col-count)
	);
	--grid-col-min-size-calc: min(
		100%,
		max(var(--grid-min-col-size), var(--grid-col-size-calc))
	);

	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(var(--grid-col-min-size-calc), 1fr)
	);
	gap: var(--grid-gap);
}


/* MARK: Fluid Grid
	(via Andy Bell / Every Layout)
	Sets a minimum column size and lets the browser decide how many columns fit.
	Column count is fluid; use when you don't need to control the maximum.

	--grid-min-item-size (16rem): The minimum size of each column
	before the grid wraps to fewer columns.

	--grid-placement (auto-fill): Set to auto-fit to collapse empty
	tracks, or auto-fill to preserve them.

	--grid-gap (var(--gutter)): The space between each item.
----------------------------------------------- */
.grid-fluid {
	--grid-min-item-size: 16rem;
	--grid-placement: auto-fill;
	--grid-gap: var(--gutter);

	display: grid;
	grid-template-columns: repeat(
		var(--grid-placement),
		minmax(var(--grid-min-item-size), 1fr)
	);
	gap: var(--grid-gap);
}

/* =========================================================
	BRICK GRID COMPOSITION/LAYOUT
========================================================= */

.brick {
	--brick-template-columns: 67% auto;

	display: grid;
	row-gap: var(--space-xl);

	@media (width >= 960px) {
		grid-template-columns: var(--brick-template-columns);
		-moz-column-gap: var(--space-lg);
		     column-gap: var(--space-lg);
	}
}


.brick[data-variant="is-reversed"] {
	--brick-template-columns: auto 67%;
}

/* =========================================================
	COLORS UTILITY CLASSES
	Pulled in from original WordPress site and converted to
	use custom properties.
========================================================= */

/* MARK: Foregrounds/text
----------------------------------------------- */
.dark-gray { color: var(--gray); }
.lake { color: var(--lake); }
.dark-grey-background .lake { color: var(--lake-light-opaque); }
.twilight { color: var(--twilight); }
.salmon { color: var(--salmon); }
.gold { color: var(--gold); }
.white { color: #fff; }


/* MARK: Backgrounds
----------------------------------------------- */


/* .twilight-background { background-color: var(--twilight); } */

/* .twilight-background.white {
	color: #fff;

	h1, h2, h3, h4 { color: #fff; }
} */

/* .lake-background { background-color: var(--lake); } */
/* .lake-light-background { background-color: var(--lake); } */
/* .gold-background { background-color: var(--gold); } */
/* .salmon-background { background-color: var(--salmon); } */
/* .dark-grey-background { background-color: var(--dark-grey); } */
/* .light-green-background { background-color: var(--lake); } */
/* .light-blue-background { background-color: var(--twilight-lightest); } */
/* .light-gold-background { background-color: var(--gold-light-opaque); } */
/* .light-grey-background { background-color: var(--light-grey); } */
/* .white-background { background-color: #fff; } */

/* =========================================================
	TYPOGRAPHY UTILITY CLASSES

	- Serif
	- Sans
	- Text styles
	- Text alignment
========================================================= */

/* MARK: Serif
----------------------------------------------- */
.serif {
	font-family: var(--font-serif);
}

.serif--3 {
	font-size: var(--fs--3);
	line-height: 1.3;
	font-family: var(--font-serif);
	letter-spacing: 0;
}

.serif--2 {
	font-size: var(--fs--2);
	line-height: 1.35;
	font-family: var(--font-serif);
	letter-spacing: -0.06px;
}

.serif--1 {
	font-size: var(--fs--1);
	line-height: 1.4;
	font-family: var(--font-serif);
	letter-spacing: -0.1px;
}

.serif-0 {
	font-size: var(--fs-0);
	line-height: 1.4;
	font-family: var(--font-serif);
	letter-spacing: -0.18px;
}

.serif-1 {
	font-size: var(--fs-1);
	line-height: 1.3;
	font-family: var(--font-serif);
	letter-spacing: -0.26px;
}

.serif-2 {
	font-size: var(--fs-2);
	line-height: 1.25;
	font-family: var(--font-serif);
	letter-spacing: -0.38px;
}

.serif-3 {
	font-size: var(--fs-3);
	line-height: 1.2;
	font-family: var(--font-serif);
	letter-spacing: -0.51px;
}

.serif-4 {
	font-size: var(--fs-4);
	line-height: 1.2;
	font-family: var(--font-serif);
	letter-spacing: -0.7px;
}

.serif-5 {
	font-size: var(--fs-5);
	line-height: 1.15;
	font-family: var(--font-serif);
	letter-spacing: -0.91px;
}

.serif-6 {
	font-size: var(--fs-6);
	line-height: 1.15;
	font-family: var(--font-serif);
	letter-spacing: -1.05px;
}

.serif-7 {
	font-size: var(--fs-7);
	line-height: 1.1;
	font-family: var(--font-serif);
	letter-spacing: -1.5px;
}


/* MARK: Sans
----------------------------------------------- */
.sans--3 {
	font-size: var(--fs--3);
	line-height: 1.3;
	font-family: var(--font-sans);
	letter-spacing: 0;
}

.sans--2 {
	font-size: var(--fs--2);
	line-height: 1.35;
	font-family: var(--font-sans);
	letter-spacing: -0.06px;
}

.sans--1 {
	font-size: var(--fs--1);
	line-height: 1.4;
	font-family: var(--font-sans);
	letter-spacing: -0.12px;
}

.sans-0 {
	font-size: var(--fs-0);
	line-height: 1.4;
	font-family: var(--font-sans);
	letter-spacing: -0.21px;
}

.sans-1 {
	font-size: var(--fs-1);
	line-height: 1.3;
	font-family: var(--font-sans);
	letter-spacing: -0.31px;
}

.sans-2 {
	font-size: var(--fs-2);
	line-height: 1.25;
	font-family: var(--font-sans);
	letter-spacing: -0.44px;
}

.sans-3 {
	font-size: var(--fs-3);
	line-height: 1.2;
	font-family: var(--font-sans);
	letter-spacing: -0.59px;
}

.sans-4 {
	font-size: var(--fs-4);
	line-height: 1.2;
	font-family: var(--font-sans);
	letter-spacing: -0.82px;
}

.sans-5 {
	font-size: var(--fs-5);
	line-height: 1.15;
	font-family: var(--font-sans);
	letter-spacing: -1.06px;
}

.sans-6 {
	font-size: var(--fs-6);
	line-height: 1.15;
	font-family: var(--font-sans);
	letter-spacing: -1.23px;
}

.sans-7 {
	font-size: var(--fs-7);
	line-height: 1.1;
	font-family: var(--font-sans);
	letter-spacing: -1.75px;
}


/* MARK: Text styles
----------------------------------------------- */
.text-center {
	text-align: center;
}

.text-display {
	font-size: var(--fs-7);
	line-height: 1.1;
	font-family: var(--font-sans);
	letter-spacing: -1.75px;
}

.text-heading-serif-xl {
	font-size: var(--fs-6);
	line-height: 115;
	font-family: var(--font-serif);
	letter-spacing: -1.05px;
}

.text-heading-serif-l {
	font-size: var(--fs-5);
	line-height: 1.15;
	font-family: var(--font-serif);
	letter-spacing: -0.91px;
}

.text-heading-serif-m {
	font-size: var(--fs-4);
	line-height: 1.2;
	letter-spacing: -0.7px;
}

.text-heading-serif-s {
	font-size: var(--space-lg);
	line-height: 1.2;
	letter-spacing: -0.51px;
}

.text-heading-sans-xl {
	font-size: var(--fs-6);
	line-height: 1.15;
	font-family: var(--font-sans);
	letter-spacing: -1.23px;
}

h2, .h2,
.text-heading-sans-l {
	font-size: var(--fs-5);
	line-height: 1.15;
	font-family: var(--font-sans);
	letter-spacing: -1.06px;
}

h3, .h3,
.text-heading-sans-m {
	font-weight: 700;
	font-size: var(--fs-4);
	line-height: 1.2;
	font-family: var(--font-sans);
	letter-spacing: -0.82px;
}

h4, .h4
.text-heading-sans-s {
	font-weight: 700;
	font-size: var(--fs-3);
	line-height: 1.2;
	font-family: var(--font-sans);
	letter-spacing: -0.59px;
}

h5, .h5,
.text-l {
	font-size: var(--fs-1);
	line-height: 1.5;
	font-family: var(--font-sans);
	letter-spacing: -0.31px;
}

.text-s {
	font-size: var(--fs--1);
	line-height: 1.5;
	font-family: var(--font-sans);
	letter-spacing: -0.12px;
}

.text-caption {
	font-size: var(--fs--2);
	line-height: 1.3;
	font-family: var(--font-sans);
	letter-spacing: -0.06px;
}

.text-caption-s {
	font-size: var(--fs--3);
	line-height: 1.3;
	letter-spacing: 0;
}

.text-eyebrow {
	font-weight: 500;
	font-size: var(--fs--2);
	line-height: 1.3;
	font-family: var(--font-sans);
	letter-spacing: 1px;
	text-transform: uppercase;
}


/* MARK: Text alignment
----------------------------------------------- */
.text-center { text-align: center; }

/* =========================================================
	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);
	}
}

/* =========================================================
	SPACING UTILITIES
	Use sparingly
========================================================= */


/* --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 */

.flow-lg { --flow-space: var(--space-lg); }
.flow-xl { --flow-space: var(--space-xl); }

.mb-2xl { margin-block: var(--space-2xl); }

/* =========================================================
	NAVIGATION
========================================================= */

:root {
	--mobile-nav-height: 3.75rem;
	/* Fallback for a single line; header-offset.js measures the real height */
	--site-alert-height: 2.75rem;
}

/* MARK: Shared styles
----------------------------------------------- */
header[class^="nav-"] button {
	border: 0;
}

header.nav-min .meganav-panel,
header.nav-max .meganav-menu .inner-panel {
	& .blurb {
		color: var(--twilight);
		font-size: 1.5625rem;
		line-height: 1.52;
		font-family: var(--font-serif);
	}

	& h3 {
		color: var(--lake);
		font-weight: 400;
		font-size: 1.75rem;
		letter-spacing: -0.5px;
	}

	& ul.basic-list {
		display: grid;
		row-gap: 2rem;
		margin-inline: 0;
		margin-block-start: 1.875rem;
		padding: 0;
		color: #025e6e;
		font-size: 1.3125rem;
		list-style: none;

		&.large { font-size: 1.75rem; }

		& li {
			line-height: 1.2;
			letter-spacing: -0.35px;
		}

		& li a { color: inherit; }

		+ .button {
			display: inline-block;
			margin-block-start: 1.875rem;
		}
	}

	& ul.list-sectors {
		display: grid;
		row-gap: 2.5rem;
		margin-inline: auto;
		padding: 0;
		font-size: 1.375rem;
		list-style: none;

		& li a {
			display: grid;
			grid-template-columns: 4.0625rem auto;
			-moz-column-gap: 0.9375rem;
			     column-gap: 0.9375rem;
			align-items: center;
		}

		& li a svg {
			width: 100%;
			height: 100%;
		}
	}
}


/* MARK: Mobile nav
----------------------------------------------- */
@media (width < 960px) {
	header.nav-max { display: none; }

	header.nav-min {
		position: fixed;
		top: 0;
		z-index: var(--z-navigation);
		background-color: var(--twilight-dark);
		width: 100%;

		&.is-open { overflow-y: scroll; }
	}

	header.nav-min .controls {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-inline: var(--space-xs);
		height: var(--mobile-nav-height);

		& .logo {
			display: flex;
			-moz-column-gap: 1rem;
			     column-gap: 1rem;
			align-items: center;
			width: -moz-fit-content;
			width: fit-content;
			height: 100%;
		}

		& .logomark {
			position: relative;
			margin-inline-start: 0.625rem;

			&::before {
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: var(--z-below);
				border-radius: var(--border-radius-circle);
				background-color: var(--twilight-dark);
				width: 5.3125rem;
				height: 5.3125rem;
				content: "";
			}
		}

		& .logomark .circle { display: none; }
		& .logotype img { width: 8.4375rem; }
		& .logomark img,
		& .logotype img { height: 2.6875rem; }

		& .mobile-nav-trigger {
			background-color: transparent;
			padding: 0;
			width: -moz-fit-content;
			width: fit-content;
			color: white;
			font-weight: 700;
			font-size: 0.6875rem;
			text-transform: uppercase;

			&:hover {
				cursor: pointer;
			}
		}

		& .mobile-nav-trigger div {
			display: grid;
			row-gap: 0.375rem;
			line-height: 1;
			text-align: center;

			& img { margin-inline: auto; }
		}

		& .mobile-nav-trigger .hamburger { display: grid; }
		& .mobile-nav-trigger .close { display: none; }
	}

	header.nav-min.is-open .mobile-nav-trigger {
		& .hamburger { display: none; }
		& .close { display: grid; }
	}

	header.nav-min .expander {
		display: none;
		background-color: var(--twilight-dark);
		width: 100%;
		height: calc(100vh - 60px);
		max-height: 9999px;
	}

	header.nav-min .expander-content {
		--inner-padding: 1.2rem;
		display: flex;
		row-gap: var(--space-lg);
		flex-direction: column;
		height: 100%;

		> :last-child { margin-top: auto; }
	}

	/* Search */
	header.nav-min .search {
		padding-inline: var(--inner-padding);
		padding-block-start: var(--space-lg);

		& form {
			display: grid;
			grid-template-columns: auto 2.125rem;
			min-height: 2.125rem;
		}

		& form button {
			display: grid;
			justify-content: center;
			align-items: center;
			border: 0;
			background-color: transparent;
			padding: 0;
		}

		& form button img { height: 100%; }

		& form input[type="search"] {
			border: 0;
			border-bottom: 2px solid white;
			background-color: transparent;
			padding-inline: 2px;
			padding-block: 1px;
			color: white;
			font-size: 1.25rem;
			letter-spacing: -0.5px;
		}

		& form input[type="search"]::-moz-placeholder { color: var(--twilight); }

		& form input[type="search"]::placeholder { color: var(--twilight); }
	}

	/* Nav links */
	header.nav-min ul.nav-links {
		margin: 0;
		padding: 0;
		list-style: none;

		& li { line-height: 1; }

		& li button.meganav-trigger {
			display: grid;
			grid-template-columns: auto 48px;
			-moz-column-gap: 1rem;
			     column-gap: 1rem;
			align-items: center;
			background-color: transparent;
			padding-inline: var(--inner-padding);
			width: 100%;
			height: 65px;
			color: var(--salmon);
			font-weight: 100;
			font-size: 1.1875rem;
			font-family: var(--font-serif);
			text-align: left;

			&:hover {
				cursor: pointer;
			}

			&::after {
				content: "+";
				font-weight: 100;
				font-size: 3rem;
				text-align: center;
			}

			&.is-open::after {
				content: "–";
				font-weight: 700;
				font-size: var(--space-lg);
			}
		}

		& li .meganav-panel {
			display: none;
			border-radius: 0 0 var(--radius-md) var(--radius-md);
			background-image: url("/assets/images/nav-down-arrow_mobile.svg");
			background-position: center top;
			background-repeat: no-repeat;
			background-color: var(--lake-light-opaque);
			padding-inline: calc( var(--inner-padding) + 10.8px );
			padding-block: 3.75rem;
			width: 100%;

			> * {
				margin-inline: auto;
				max-width: 500px;
			}
		}

		& li .meganav-panel .blurb-container {
			display: grid;
			row-gap: 2.5rem;
		}

		& li .meganav-panel .cards-header .button { display: none; }
		& li .meganav-panel h3.extra-space { margin-block-start: 3.125rem; }
		& li .meganav-panel ul.list-sectors { margin-block-start: 2.5rem; }
		& li .meganav-panel h3 { margin-block-start: 2.5rem; }

		& li .meganav-panel .cards {
			display: grid;
			row-gap: var(--space-md);
			margin-block-start: 1.875rem;
		}

		& li .meganav-panel .news { display: none; }
	}

	/* Social links */
	header.nav-min ul.social-links {
		display: flex;
		-moz-column-gap: var(--space-2xs);
		     column-gap: var(--space-2xs);
		justify-content: center;
		align-items: center;
		margin-inline: 0;
		padding-inline: 0;
		padding-block: 0.625rem;
		list-style: none;

		& li { width: 3.75rem; }
		& li img { margin-inline: auto; }
	}
}


/* MARK: Desktop nav
----------------------------------------------- */
@media (width >= 960px) {
	header.nav-min { display: none; }

	header.nav-max {
		--header-bg-spacing: 18.125rem;
		--header-bg: linear-gradient(90deg, #0d414b var(--header-bg-spacing), #51c9b6 290px);
		--header-mbs: 1.875rem;

		@media (width >= 1024px) { --header-bg-spacing: 19.875rem; }
		@media (width >= 1170px) { --header-bg-spacing: 22rem; }
		@media (width >= 1235px) { --header-bg-spacing: 23.1875rem; }
		@media (width >= 1435px) { --header-bg-spacing: 26rem; }

		display: grid;
		position: relative;
		grid-template-columns: var(--header-bg-spacing) auto;
		align-items: center;
		z-index: var(--z-navigation);
		/* transition: border-radius 0.5s, min-height 0.5s, max-height 0.5s; */
		transition: border-radius 0.5s;
		transition-timing-function: ease-in-out;
		margin-inline: auto;
		margin-block-start: var(--header-mbs);
		border-radius: var(--radius-md);
		background: var(--header-bg);
		width: 100%;
		max-width: 89.6875rem;
		min-height: 8.4375rem;
		max-height: 8.4375rem;

		&:has(.site-alert) { border-radius: var(--radius-md) var(--radius-md) 0 var(--radius-md) }
	}

	/* Logo */
	header.nav-max .logo {
		--logo-margin-inline-start: 1.875rem;
		--logomark-width: 4.0625rem;
		--logomark-circle-size: 10rem;
		--logotype-width: 10.75rem;

		@media (width >= 1170px) {
			--logo-margin-inline-start: 2.5rem;
			--logomark-width: 4.6875rem;
			--logotype-width: 11.9375rem;
		}

		@media (width >= 1235px) { --logo-margin-inline-start: 2.8125rem; }

		display: flex;
		-moz-column-gap: 14px;
		     column-gap: 14px;
		align-items: center;
		margin-inline-start: var(--logo-margin-inline-start);
		width: -moz-fit-content;
		width: fit-content;

		& .logomark {
			position: relative;
			transition: width 0.3s ease-in-out;
			width: var(--logomark-width);
		}

		& .logomark .circle {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			transition: width 0.75s, height 0.75s;
			transition-timing-function: ease-in-out;
			border-radius: 100%;
			width: var(--logomark-circle-size);
			height: var(--logomark-circle-size);
			overflow: hidden;

			&::after {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 100%;
				background-color: var(--twilight-dark);
				width: var(--logomark-circle-size);
				height: var(--logomark-circle-size);
				content: "";
			}
		}

		& .logotype {
			width: var(--logotype-width);

			& img {
				opacity: 1;
				transition: opacity 0.2s ease-in-out;
			}
		}

		/* z-index for logo bits */
		& .logomark .circle { z-index: var(--z-navigation); }

		& .logotype img,
		& .logomark img {
			position: relative;
			z-index: var(--z-nav-logo);
		}
	}

	/* Links container */
	header.nav-max nav {
		padding-inline: 1rem;
		@media (width >= 960px) { z-index: var(--z-above); }
		@media (width >= 1235px) { padding-inline: 2.125rem; }
	}

	/* Main nav links */
	header.nav-max ul.nav-links {
		--meganav-bg-color: #daf7f2;
		--nav-links-col-gap: 1.5rem;
		--button-font-size: 0.9375rem;

		@media (width >= 1170px) {
			--button-font-size: 1.0625rem;
			--nav-links-col-gap: 2.75rem;
		}

		@media (width >= 1270px) {
			--button-font-size: 1.1875rem;
		}

		display: flex;
		-moz-column-gap: 24px;
		     column-gap: 24px;
		justify-content: space-between;
		transition: padding-block-start 0.5s ease-in-out;
		margin: 0;
		padding-inline: 0;
		padding-block-start: 24px;
		list-style: none;

		& li button {
			position: relative;
			background-color: transparent;
			padding: 0;
			color: white;
			font-weight: 100;
			font-size: var(--button-font-size);
			font-family: var(--font-serif);

			&:not(.search)[aria-expanded="true"]::after {
				position: absolute;
				bottom: calc(3.2rem * -1);
				left: 50%;
				transform: translateX(-50%);
				z-index: calc(var(--z-above) + 1);
				background-image: url("/assets/images/nav-down-arrow.svg");
				background-position: center;
				background-repeat: no-repeat;
				width: 58px;
				height: 12px;
				content: "";
			}
		}

		& li .meganav-menu {
			position: absolute;
			top: 7.9375rem !important;
			left: 0 !important;
			z-index: var(--z-below);
			border-radius: 0 0 var(--radius-md) var(--radius-md);
			background-color: var(--meganav-bg-color);
			padding: 3.75rem 2.5rem;
			width: 100vw !important;
			max-width: 89.6875rem !important;
		}

		& li .faux-corners {
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 0 0 var(--radius-md) var(--radius-md);
			background: var(--header-bg);
			width: 100%;
			height: var(--space-xs);
		}

		& li .inner-panel {
			display: grid;
			-moz-column-gap: 1.875rem;
			     column-gap: 1.875rem;

			& .cards-header {
				display: flex;
				-moz-column-gap: 2rem;
				     column-gap: 2rem;
				row-gap: 1.875rem;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			& .cards-header h3,
			& h3 { margin-block-start: 0; }

			& .cards-header + .cards { margin-block-start: 2rem; }

			& .cards {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				-moz-column-gap: 0.9375rem;
				     column-gap: 0.9375rem;
			}

			/* .card-post-preview { min-height: 16.5625rem; } */
			/* .card-post-preview a.image img { height: 9.0625rem; } */
		}

		& li .inner-panel.what-we-do {
			grid-template-columns: repeat(3, 1fr);

			.blurb {
				border-right: 1px rgba(80, 201, 181, .3) solid;
				padding-inline-end: 2.5rem;
			}
		}

		& li .inner-panel.who-we-help {
			grid-template-columns: 13.75rem 24.625rem auto;

			ul.list-sectors {
				padding-inline-end: 3.5rem;
				font-size: 1.1875rem;
			}

			> :last-child {
				border-left: 1px rgba(80, 201, 181, .3) solid;
				padding-inline-start: 3.5rem;
				max-width: 35.25rem;
			}
		}

		& li .inner-panel.nonprofit-resources {
			grid-template-columns: 22.75rem 28.125rem auto;

			& .blurb-container { padding-inline-end: 3.5rem; }
			& .blurb-container div:has(.button) { margin-block-start: 1rem; }

			> div:nth-child(2) {
				border: 1px rgba(80, 201, 181, .3) solid;
				border-width: 0 1px;
				padding-inline: 3.5rem;
			}

			> div:nth-child(3) {
				padding-inline: 2.5rem 1.875rem;

				/* & .card-post-preview { min-height: 14.375rem; } */
			}

			& ul.basic-list.large {
				font-size: 1.5625rem;
			}
		}

		& li .inner-panel.around-the-trust {
			grid-template-columns: 31.6875rem auto;
			-moz-column-gap: 2.3125rem;
			     column-gap: 2.3125rem;

			& .page-links {
				display: flex;
				row-gap: 1rem;
				flex-wrap: wrap;
				margin-block-start: 0;
				border-right: 1px rgba(80, 201, 181, .3) solid;
				padding-inline-end: 3.5rem;
				font-size: 1.5625rem;
			}

			& .page-links ul:not(:last-child) { flex-basis: 50%; }
			& .page-links ul:last-child { flex-basis: 100%; }
			& .page-links ul:last-child li:last-child { display: none; }

			& .news {
				padding-inline-start: 3.5rem;
				max-width: 48rem;
			}

			& .cards {
				grid-template-columns: repeat(3, 1fr);
			}
		}

		& li .search-panel {
			top: 127px !important; /* important overrides UIKit defaults */
			left: 0 !important; /* important overrides UIKit defaults */
			z-index: var(--z-above);
			border-radius: 0 0 var(--radius-md) var(--radius-md);
			background-color: var(--lake-light);
			padding: var(--space-xl) var(--space-3xl) 2.5rem;
			width: 100vw !important; /* important overrides UIKit defaults */
			max-width: 89.6875rem !important; /* important overrides UIKit defaults */

			& form {
				display: flex;
				gap: 0.625rem;
			}

			& form img { width: 2.5rem; }

			& form input[type="search"] {
				border: 2px solid white;
				border-width: 0 0 2px 0;
				background-color: transparent;
				padding-inline: 1.5pt;
				width: 100%;
				color: var(--twilight);
				font-size: 1.75rem;
				letter-spacing: -0.5px;

				&:focus-visible {
					outline: 1px solid white;
				}
			}
		}
	}

	/* Grants portal link positioning */
	.button-grants-portal {
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 0 6px 0 var(--radius-md);
	}

	/* When nav is sticky */
	header.nav-max.is-sticky {
		--header-mbs: 0;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		transition: border-radius 0.5s, min-height 0.5s, max-height 0.5s;
		border-radius: 0 0 var(--radius-md) var(--radius-md);
		width: 100%;
		min-height: 3.125rem;
		max-height: 3.125rem;

		& .logomark {
			--logomark-width: 2.5rem;

			@media (width >= 1170px) {
				--logomark-width: 2.5rem;
			}
		}

		& .logomark .circle {
			--logomark-circle-size: 4.375rem;
		}

		& .logotype img { opacity: 0; }

		& ul.nav-links {
			padding-block-start: 0;

			li button:not(.search)[aria-expanded="true"]::after {
				bottom: -20px;
			}

			li .search-panel,
			li .meganav-menu,
			li .meganav-panel {
				top: 2.5625rem !important;
			}
		}

		& .button-grants-portal { display: none; }
		&:has(.site-alert) { border-radius: 0 0 0 var(--radius-md); }
	}
}


/* MARK: Site alert/message
----------------------------------------------- */
header.nav-max .site-alert {
	position: absolute;
}

header:is(.nav-min, .nav-max) .site-alert {
	transition: all 0.3s ease-in-out;
	background-color: var(--salmon);
	padding: var(--space-xs) 1rem;
	width: 100%;
	color: white;
	font-size: 1.125rem;
	text-align: center;

	@media (width >= 600px) {
		position: absolute;
		right: 0;
		margin-inline-start: auto;
		border-radius: 0 0 var(--radius-md) var(--radius-md);
		width: -moz-fit-content;
		width: fit-content;
		max-width: 28.75rem;
		text-align: right;
	}

	@media (width >= 960px) {
		top: 100%;
	}

	a {
		color: inherit;
		font-weight: 700;
	}
}

header:is(.nav-min, .nav-max) .site-alert.is-sticky { font-size: 0.875rem }
header.nav-min.is-open .site-alert { display: none; }

/* =========================================================
	COOKIE CONSENT
========================================================= */
#cookie-consent {
   position: fixed !important;
   bottom: 0;
   z-index: var(--z-cookie-notice);
   inset-inline: 0;
   max-width: 100vw;

   /* Remove padding to start */
   & #cc-main .cm--bar .cm__body,
   & #cc-main .cm__texts,
   & #cc-main .cm__desc,
   & #cc-main .cm--bar .cm__btns {
      padding: 0;
   }

   & #cc-main .cm--bar .cm__body {
      background-color: var(--twilight-dark);
      max-width: 100%;

      @media (width >= 500px) {
         flex-direction: row !important;
         flex-wrap: nowrap;
         align-items: center;
      }
   }

   & #cc-main .cm__desc {
      padding: var(--space-sm);
      color: white;
      font-size: 1rem !important;
      font-family: var(--font-sans-serif);

      a {
         transition: all var(--transition-base);
         border-bottom: 1px solid white !important;
         background-image: none;
         text-decoration: none;
      }

      a:hover {
         cursor: pointer;
         border-color: transparent !important;
         color: white !important;
      }
   }

   & #cc-main .cm--bar .cm__btns {
      border: 0 !important;
      padding: 0 !important;
   }

   & #cc-main .cc--anim .cm__btn {
      border: 0;
      border-radius: 0;
      background-color: var(--salmon);
      padding: 1rem 1.5rem;
      min-width: 8.75rem;
      min-height: var(--space-xl);

      span {
         font-weight: 400;
         font-family: var(--font-sans-serif);
      }
   }
}

/* =========================================================
	PAGE HEADERS
========================================================= */

/* MARK: Shared styles
----------------------------------------------- */
@media (width < 600px) {
	body:has(header.nav-min .site-alert) :is(.hero-home, .page-header) {
		padding-block-start: calc( var(--mobile-nav-height) + var(--site-alert-height) );
	}
}

@media (width < 960px) {
	:is(.hero-home, .page-header) {
		padding-block-start: var(--mobile-nav-height);
	}
}

/* MARK: Home hero
-----------------------------------------------*/
.hero-home {
	--hero-min-height: 37.5rem;
	--hero-bg-photo-width: 100%;
	--hero-bg-photo-height: 58vw;
	--hero-content-width: 100%;
	--hero-content-pbs: var(--space-xl);
	--hero-panel-position: relative;
	--hero-prose-margin-inline: auto;
	--hero-prose-margin-block: 0;
	--hero-prose-padding: 0;
	--hero-prose-alignment: center;
	--hero-h1-size: var(--fs-7);
	--hero-h1-leading: 1.4;
	--hero-h1-kerning: -1.75px;

	background-color: var(--gray);
	padding-block-end: 0;

	@media (width >= 900px) {
		min-height: var(--hero-min-height);
	}

	& .panel {
		position: var(--hero-panel-position);
		top: 0;
      left: 0;
      z-index: 0;
      background-color: var(--gray);
		padding-block-end: var(--space-2xl);
      width: 100%;
		height: 100%;

		@media (width >= 960px) {
			--hero-panel-position: fixed;
		}
	}

	& .container {
		position: relative;
		z-index: 10;
	}

	& .bg-map {
		position: fixed;
		z-index: 0;
		background-image: url("/assets/images/home_hero_contourmap_1.svg");
		background-size: 910px auto;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	& .bg-photo {
		position: relative;
		top: 0;
		left: 0;
		margin-top: 0;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		width: var(--hero-bg-photo-width);
		height: var(--hero-bg-photo-height);

		@media (width < 600px) {
			top: -1px;
		}

		@media (768px <= width < 960px) {
			--hero-bg-photo-height: 45vw;
		}

		@media (width >= 960px) {
			--hero-bg-photo-width: 50%;
			--hero-bg-photo-height: 100%;

			position: absolute;
			right: 0;
			left: auto;
		}

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

	& .content {
		padding-block-start: var(--hero-content-pbs);
		width: var(--hero-content-width);

		@media (width >= 960px) {
			--hero-content-width: 50%;
		}

		& .prose {
			margin-inline: var(--hero-prose-margin-inline);
			margin-block: var(--hero-prose-margin-block);
			padding: var(--hero-prose-padding);
			text-align: var(--hero-prose-alignment);

			@media (width >= 960px) {
				--hero-prose-margin-inline: 2.5rem 4.375rem;
				--hero-prose-margin-block: 16.875rem 0;
				--hero-prose-padding: var(--space-md);
				--hero-prose-alignment: right;
			}
		}

		& .prose h1 {
			color: #fff;
			font-weight: 500;
			font-size: var(--hero-h1-size);
			line-height: var(--hero-h1-leading);
			font-family: var(--font-serif);
			letter-spacing: var(--hero-h1-kerning);

			@media (width >= 960px) {
				--hero-h1-size: var(--fs-4);
				--hero-h1-leading: 1.45945946;
				--hero-h1-kerning: -0.75px;
			}

			@media (width >= 1024px) {
				--hero-h1-size: var(--fs-5);
				--hero-h1-leading: 1.38095238;
				--hero-h1-kerning: -1.75px;
			}

			@media (width >= 1171px) {
				--hero-h1-size: var(--fs-6);
				--hero-h1-leading: 1.39583333;
			}
		}

		& .prose p {
			--prose-flow-space: 0.75rem;

			color: #fff;

			@media (960px <= width < 1024px) {
				font-size: var(--fs--1);
				line-height: 1.5rem;
			}
		}

		/* & .prose .flag-button-shadow-wrap {} */

		& .prose .flag-button {
			display: block;
		}
	}



	/* & .content .prose .button-container {
		--prose-flow-space: -0.25rem;

		display: grid;
		justify-content: center;
		align-items: center;
		margin-inline: auto;
		background-image: url("/assets/images/home_hero_button.svg");
		background-position: center;
		background-size: 380px auto;
		background-repeat: no-repeat;
		background-color: transparent;
		width: 100%;
		min-height: 120px;
		overflow: visible;
		color: white;
		font-size: 1.75rem;
		letter-spacing: 0.25px;
		text-transform: uppercase;

		@media (width >= 960px) {
			margin-right: -44px;
			margin-left: auto;
			width: 380px;
		}
	} */


}

/* .panel is position:fixed and spans the full viewport height (z-index: 0)
   so the photo stays in place while the page scrolls. Sibling sections need
   position:relative + a higher z-index so their backgrounds paint over the
   fixed panel once scrolled past, instead of the panel showing through. */
.t-home section:not(.hero-home) {
	position: relative;
	z-index: 1;
}


/* MARK: Standard page headers
	Base styles
----------------------------------------------- */
.page-header {
	--header-h1-size: var(--fs-3);
	--header-h2-size: var(--fs-4);
	--header-p-size: var(--fs--1);
	--content-bg-color: var(--neutral-100);
	--header-bg-color: var(--content-bg-color);
	--content-h1-color: var(--lake);
	--content-h2-color: var(--twilight);
	--content-text-color: var(--neutral-900);

	background-color: var(--header-bg-color);

	@media (width >= 480px) {
		--header-p-size: var(--fs-1);
	}

	@media (width >= 600px) {
		--header-h1-size: var(--fs-6);
		--header-h2-size: var(--fs-7);
	}

	@media (width >= 768px) {
		--header-h1-size: var(--fs-7);
		--header-p-size: var(--fs-3);
		--header-bg-color: transparent;
	}

	& .content {
		position: relative;
		margin-inline: auto;
		background-color: var(--content-bg-color);
		padding: 3.75rem 8%;
		width: 100%;
		max-width: var(--max-width);
		text-align: center;

		@media (width >= 768px) {
			border-radius: var(--radius-md);
			padding-block: 6.25rem;
		}

		& h1 {
			display: inline-block;
			position: relative;
			margin-block-end: 1.875rem;
			border-bottom: 3px solid currentColor;
			padding-block-end: 1rem;
			color: var(--content-h1-color);
			font-weight: lighter;
			font-size: var(--header-h1-size);
			line-height: 1.2;
			letter-spacing: 3px;
			text-transform: uppercase;
		}

		& h2 {
			/* margin-inline: auto; */
			margin-block-start: var(--space-sm);
			/* margin-block-end: 0.625rem; */
			color: var(--content-h2-color);
			font-weight: 500;
			font-size: var(--header-h2-size);
			line-height: 1.28;
			font-family: var(--font-serif);
		}

		& p {
			margin-block-start: 0.625rem;
			color: var(--content-text-color);
			font-weight: 400;
			font-size: var(--header-p-size);
			line-height: 1.6;
		}
	}
}


/* MARK: With bg image
----------------------------------------------- */
.page-header[data-variant="has-bg-image"] {
	--image-vertical-space: 350px;

	@media (width >= 768px) { --image-vertical-space: 450px; }

	& img {
		position: absolute;
		/* top: calc( var(--image-vertical-space) * -1 ); */
		top: 0;
		inset-inline: 0;
		width: 100%;
		max-width: 800px;
		height: 100%;
		max-height: calc(var(--image-vertical-space) * 1.5);
		-o-object-fit: cover;
		   object-fit: cover;

		@media (width >= 768px) { max-width: unset; }
		@media (width >= 960px) { top: -30px; }
	}

	& .content {
		margin-block-start: var(--image-vertical-space);
	}
}


/* MARK: With icon
----------------------------------------------- */
.page-header[data-has-icon] {

	& .content .icon {
		display: grid;
		position: absolute;
		top: -75px;
		left: 50%;
		justify-content: center;
		align-items: center;
		transform: translateX(-50%);
		border-radius: 50%;
		background-color: var(--content-bg-color);
		width: 150px;
		height: 150px;

		& :is(img, svg) {
			width: 85px;
			height: 85px;
		}
	}

	& .content h1 { margin-block-start: 0.625rem; }

	&[data-color] {
		--content-h1-color: white;
		--content-h2-color: white;
		--content-text-color: white;
	}

	&[data-color="lake"] { --content-bg-color: var(--lake); }
	&[data-color="dark-gray"] { --content-bg-color: var(--gray); }
	&[data-color="salmon"] { --content-bg-color: var(--salmon); }
	&[data-color="twilight"] { --content-bg-color: var(--twilight); }
	&[data-color="gold"] { --content-bg-color: var(--gold); }

	/* &[data-color] .content {
		:is(h1, h2, p) { color: white; }
	} */
}


/* MARK: Resources category
----------------------------------------------- */
.page-header[data-variant="news-category"] {
	--content-bg-color: var(--lake-lightest);
	--content-h1-color: var(--twilight);
}


/* MARK: News
----------------------------------------------- */
.page-header[data-variant="news"] {
	--content-h1-color: var(--twilight);
}

.page-header[data-variant="news-post"] {
	--header-h1-size: var(--fs-6);
	/* --header-h2-size: var(--fs-4); */
	/* --header-p-size: var(--fs--1); */
	--content-bg-color: var(--neutral-900);
	/* --header-bg-color: var(--content-bg-color); */
	--content-h1-color: white;
	/* --content-h2-color: var(--twilight); */
	/* --content-text-color: var(--neutral-900); */

	& .page-header__kicker {
		margin-inline: auto;
		margin-block-end: var(--space-lg);
		border-bottom: 3px solid var(--lake-light);
		padding-block-end: var(--space-2xs);
		width: -moz-fit-content;
		width: fit-content;
		color: var(--lake-light);
		font-size: var(--fs-4);
		line-height: 1;
		text-transform: uppercase;
	}

	& h1 {
		margin: 0;
		border: 0;
		padding: 0;
		font-family: var(--font-serif);
		letter-spacing: normal;
		text-transform: none;
	}

	& .page-header__date {
		margin-block-start: var(--space-sm);
		color: var(--neutral-400);
		font-size: var(--fs-0);
	}
}

/* =========================================================
	IMAGES
========================================================= */

/* MARK: In CKEditor
----------------------------------------------- */
figure.image {
	&.image-style-block-align-left :is(img, figcaption) {
		margin-inline: 0 auto;
	}

	&.image-style-block-align-right :is(img, figcaption) {
		margin-inline: auto 0;
	}

	&.image-style-align-left {
		margin-inline: 0;

		@media (width >= 768px) {
			float: left;
			margin-right: 2.5rem;
			margin-block: 1rem;
			width: -moz-fit-content;
			width: fit-content;
		}
	}

	&.image-style-align-right {
		margin-inline: 0;

		@media (width >= 768px) {
			float: right;
			margin-left: 2.5rem;
			margin-block: 1rem;
			width: -moz-fit-content;
			width: fit-content;
		}
	}

	& img {
		margin-inline: auto;

		&.has-radius {
			border-radius: var(--radius-md);
		}
	}

	figcaption {
		margin-inline: auto;
		margin-block-start: calc(var(--space-xs) * -1);
		border-radius: 0 0 var(--radius-md) var(--radius-md);
		background-color: var(--gray-lightest);
		padding: 1rem var(--space-sm) var(--space-sm);
		max-width: 100%;
		font-style: italic;
		font-size: var(--fs--2);
		line-height: 1;
	}

	article:is(.center, .container) figure.image:is(.image-style-align-left, .image-style-align-right) {
		clear: both;
	}

	article:is(.center, .container) figure.image.image-style-align-left {
		@media (width >= 1270px) {
			margin-inline-start: calc(var(--space-3xl) * -1);
		}
	}

	article:is(.center, .container) figure.image.image-style-align-right {
		@media (width >= 1270px) {
			margin-inline-start: calc(var(--space-3xl) * -1);
		}
	}
}

/* =========================================================
	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;
}

/* =========================================================
	BREADCRUMBS
========================================================= */

nav:is(.center, .container).breadcrumbs {
	max-width: var(--max-width);

	ol {
		margin: -10px 0 0 0;
		border-radius: 0 0 7px 7px;
		background-color: var(--neutral-100);
		padding: 0 1.125rem 0.625rem;
		width: -moz-fit-content;
		width: fit-content;
		list-style: none;
	}

	ol li:not(.sr-only) a {
		color: var(--lake);
		font-weight: 700;
		font-size: var(--fs--1);
		line-height: 1;

		&::before {
			margin-inline-end: 0.625rem;
			content: "\2039 ";
			font-weight: normal;
		}
	}
}

.t-category nav.container.breadcrumbs ol {
	background-color: var(--lake-lightest);
}

.t-posts nav.container.breadcrumbs ol {
	background-color: var(--neutral-900);
}

/* =========================================================
	DIVIDERS & SPACERS
========================================================= */

/* MARK: 3-dots divider
----------------------------------------------- */
hr.is-3dots {
	border: 0;
	background-color: transparent;
	text-align: center;

	&::after {
		margin-inline: auto;
		height: 4px;
		content: "• • •";
		letter-spacing: 2rem;
	}
}


/* MARK: Spacers
----------------------------------------------- */
div.spacer[data-spacer="small"] {
	height: var(--space-xs);
}

div.spacer[data-spacer="medium"] {
	height: 1rem;
}

div.spacer[data-spacer="large"] {
	height: 1.5rem;
}

/* =========================================================
	CALLOUTS
========================================================= */

/* MARK: Base style
	Defaults are for the basic callout
----------------------------------------------- */
.callout {
	--callout-bg-color: var(--twilight);
	--callout-border: 0;
	--callout-border-radius: 0;
	--callout-color: white;
	--callout-padding: 1.5rem 3rem;
	--callout-text-align: center;
	--callout-text-size: var(--fs-0);

	border: var(--callout-border);
	border-radius: var(--callout-border-radius);
	background-color: var(--callout-bg-color);
	padding: var(--callout-padding);
	color: var(--callout-color);
	font-size: var(--callout-text-size);
	text-align: var(--callout-text-align);
}

/* MARK: Basic callout
----------------------------------------------- */
.callout[data-variant^="basic-"] {
	clear: both;
}

.callout[data-variant="basic-lake"] { --callout-bg-color: var(--lake); }
.callout[data-variant="basic-dark-gray"] { --callout-bg-color: var(--gray); }
.callout[data-variant="basic-light-gray"] { --callout-bg-color: var(--neutral-100); }
.callout[data-variant="basic-salmon"] { --callout-bg-color: var(--salmon); }
.callout[data-variant="basic-twilight"] { --callout-bg-color: var(--twilight); }
.callout[data-variant="basic-gold"] { --callout-bg-color: var(--gold); }
.callout[data-variant="basic-white"] {
	--callout-bg-color: white;
	--callout-border-radius: var(--radius-md);
	--callout-color: var(--twilight);
}


/* MARK: Bordered callout
	!: Will always have an icon
----------------------------------------------- */
.callout[data-variant^="bordered-"] {
	--callout-bg-color: white;
	--callout-border-color: var(--twilight);
	--callout-border: 2px solid var(--callout-border-color);
	--callout-border-width: 2px 2px 2px 10px;
	--callout-border-radius: var(--radius-md);
	--callout-color: var(--gray);
	--callout-padding: 2.5rem;
	--callout-text-align: left;
	--callout-icon-width: 60px;
	--callout-icon-color: var(--callout-border-color);

	display: grid;
	grid-template-columns: var(--callout-icon-width) auto;
	gap: 1rem;
	margin-block: 3.125rem;
	border-width: var(--callout-border-width);

	@media (width < 800px) {
		--callout-border-width: 10px 2px 2px 2px;
	}

	@media (width < 480px) {
		grid-template-columns: unset;
	}

	& svg {
		color: var(--callout-icon-color);
	}

	& ul:is(:last-child) {
		margin-block-end: 0;
	}

	& .prose {
		--prose-flow-space: var(--space-xs);
	}
}

.callout[data-variant="bordered-gold"] { --callout-border-color: var(--gold); }
.callout[data-variant="bordered-green"] { --callout-border-color: var(--action-green); }
.callout[data-variant="bordered-red"] { --callout-border-color: var(--alert-red); }


/* MARK: Size variants
	"standard" is default
----------------------------------------------- */
.callout[data-size="small"] {
	--callout-text-size: var(--fs--1);
	--callout-padding: 1.5rem;
	--callout-icon-width: 30px;
}


/* MARK: Section callouts
----------------------------------------------- */
.section-callout {
	--section-bg: var(--neutral-100);
	--section-h2-color: var(--twilight);
	--section-h2-size: var(--fs-6);
	--section-icon-col-width: 5.625rem;
	--section-icon-link-color: var(--twilight);
	--section-icon-link-size: var(--fs-4);

	background-color: var(--section-bg);
	padding-block: 5.375rem;

	& .prose h2 {
		color: var(--section-h2-color);
		font-weight: 500;
		font-size: var(--section-h2-size);
		/* font-size: var(--fs-7);  */
		/* was 3.25rem */
		font-family: var(--font-serif);
	}

	& .prose h2 + * {
		--prose-flow-space: 1.5rem;
	}

	& .center.grid {
		--container-max-width: 52rem;
		--grid-max-col-count: 2;
		--grid-min-col-size: 300px;

		@media (width >= 768px) {
			--grid-gap: var(--space-2xl);
		}

		margin-block-start: 3.75rem;
	}

	& .center.grid > div {
		min-width: 0;
	}

	& .center.grid > div a {
		display: grid;
		grid-template-columns: var(--section-icon-col-width) auto;
		align-items: center;
		gap: 1rem;
		margin-inline: auto;
		max-width: 26.25rem;
		color: var(--section-icon-link-color);
		text-decoration: none;

		@media (width >=768px) {
			--section-icon-col-width: 6.625rem;
		}

		& :is(svg, img) {
			width: 100%;
			height: auto;
		}

		& span {
			font-size: var(--section-icon-link-size);
			line-height: 1.1;
			letter-spacing: -1.5px;

			@media (width >= 768px) {
				--section-icon-link-size: 2.625rem;
			}
		}
	}
}

/* =========================================================
	CARDS
	Default/base card is vertical
========================================================= */

/* MARK: Cards group/container
----------------------------------------------- */
.card-group,
.card-group .card-group__subgroup {
	--card-group-max-width: var(--max-body-width);
	--card-group-col-gap: 1.875rem;
	--card-group-row-gap: 1.5rem;

	display: grid;
	row-gap: var(--card-group-row-gap);
	max-width: var(--card-group-max-width);
}


/* MARK: Vertical base card
----------------------------------------------- */
.card {
	--card-display: flex;
	--card-min-height: 20.625rem;
	--card-bg: var(--twilight-light);
	--card-picture-height: 10.3125rem;
	--card-picture-radius: var(--radius-md) var(--radius-md) 0 0;
	--card-body-padding: var(--space-md);
	--card-body-bg: white;
	--card-body-min-height: 9.375rem;
	--card-body-size: var(--fs-0);
	--card-body-radius: 0 0 var(--radius-md) var(--radius-md);
	--card-title-color: var(--twilight);
	--card-title-color-hover: var(--card-title-color);
	--card-title-size: var(--fs-1);
	--card-title-font: var(--font-serif);
	--card-title-leading: 1.1;
	--card-title-weight: 400;
	--card-date-size: var(--fs--2);
	--card-date-color: var(--gray);
	--card-tag-bg: var(--gold);
	--card-tag-color: white;
	--card-tag-position-block: var(--space-md);
	--card-tag-position-inline: 0;
	--card-tag-font-size: var(--fs--1);
	--card-tag-padding: var(--space-2xs) var(--space-xs);

	display: var(--card-display);
	position: relative;
	flex-direction: column;
	min-height: var(--card-min-height);

	& picture {
		flex-grow: 0;
		border-radius: var(--card-picture-radius);
		background-image: url("/assets/images/placeholder_logo.svg");
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		height: var(--card-picture-height);
		overflow: hidden;

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

	& .card__tag {
		position: absolute;
		top: var(--card-tag-position-block);
		left: var(--card-tag-position-inline);
		background-color: var(--card-tag-bg);
		padding: var(--card-tag-padding);
		max-width: 70%;
		color: var(--card-tag-color);
		font-size: var(--card-tag-font-size);
		line-height: 1;
		text-transform: uppercase;
	}

	& .card__body {
		flex-grow: 1;
		flex-shrink: 0;
		border-radius: var(--card-body-radius);
		background-color: var(--card-body-bg);
		padding: var(--card-body-padding);
		min-height: var(--card-body-min-height);
		font-size: var(--card-body-size);

		& .card__date {
			margin-block-start: var(--space-xs);
			color: var(--card-date-color);
			font-size: var(--card-date-size);
		}

		& :is(h2, h3, h4) + .card__excerpt {
			margin-block-start: var(--space-md);
		}

		& .card__read-more {
			display: inline-block;
			transition: border var(--transition-base);
			margin-block-start: var(--space-sm);
			border-bottom: 1px solid transparent;
			color: var(--salmon);
			font-weight: 700;
			text-decoration: none;

			&:hover {
				border-bottom: 1px solid var(--salmon);
			}

			& span {
				font-size: var(--fs-0);
			}
		}
	}

	& :is(h2, h3, h4) {
		color: var(--card-title-color);
		font-weight: var(--card-title-weight);
		font-size: var(--card-title-size);
		line-height: var(--card-title-leading);
		font-family: var(--card-title-font);
		letter-spacing: normal;

		& :is(a, a:hover) {
			color: currentColor;
		}
	}

	& :is(h2, h3, h4) a::after {
		position: absolute;
		z-index: var(--z-above);
		inset: 0;
		content: "";
	}

	:is(.card__date, .card__excerpt, .card__read-more) {
		position: relative;
		z-index: calc( var(--z-above) * 2);
	}
}


/* MARK: Horizontal card
	Same content structure as vertical,
	different layout. (Vertical on mobile.)
----------------------------------------------- */
.card[data-variant="horizontal"] {
	@media (width >= 820px) {
		--card-display: grid;
		--card-min-height: 21.25rem;
		--card-picture-radius: 0 var(--radius-md) var(--radius-md) 0;
		--card-picture-height: auto;
		--card-body-bg: rgba(11 63 74 / 0.7);
		--card-body-radius: var(--radius-md) 0 0 var(--radius-md);

		grid-template-columns: repeat(2, 1fr);
		align-items: stretch;
		width: 100%;
		height: var(--card-min-height);

		& picture {
			order: 2;
		}

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

		& .card__body {
			order: 1;
			padding-block-start: var(--space-2xl);
		}
	}
}


/* MARK: Horizontal brick
	Used in newsAnnouncementsIndex.twig
----------------------------------------------- */
.brick .card {
	--card-bg: var(--gray-lightest);
	--card-body-bg: var(--gray-lightest);
	--card-title-color: var(--salmon);
	--card-title-size: var(--fs-0);
	--card-title-font: var(--font-sans);
	--card-date-size: var(--fs--2);
}

.card[data-variant="horizontal-brick"] {
	--card-min-height: 20.625rem;

	@media (width >= 960px) {
		--card-display: grid;
		--card-picture-height: auto;
		--card-picture-radius: var(--radius-md) 0 0 var(--radius-md);
		--card-body-radius: 0 var(--radius-md) var(--radius-md) 0;

		&:first-child { grid-template-columns: 60% auto; }
		&:last-child { grid-template-columns: auto 60%; }
	}

	& picture {
		@media (width >= 960px) {
			contain: size;
		}
	}
}

.brick:not([data-variant="is-reversed"]) .card[data-variant="horizontal-brick"]:first-child {
	grid-template-columns: 60% auto;
}


/* MARK: Featured news
----------------------------------------------- */
.card[data-variant="featured-news"] {
	--card-bg: white;
	/* --card-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md); */
	--card-body-bg: transparent;
	--card-picture-radius: var(--radius-md);
	--card-body-radius: 0 0 var(--radius-md) var(--radius-md);
	--card-body-border-width: 0 1px 1px 1px;
	--card-title-color: var(--salmon);
	--card-title-color-hover: var(--twilight);
	--card-title-size: var(--fs-3);
	--card-title-font: var(--font-sans);
	--card-tag-bg: var(--gray);
	--card-tag-color: white;
	--card-tag-position-block: calc( (var(--fs-1) + ( var(--space-xs) * 2)) * -1 );
	/* --card-tag-position-inline: 0; */
	--card-tag-font-size: var(--fs-1);
	--card-tag-padding: var(--space-xs) 1rem;

	& picture {
		min-height: 25rem;
	}

	& .card__tag {
		border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	}

	& .card__body {
		border: 1px solid var(--gray-lightest);
		border-width: var(--card-body-border-width);
		border-radius: var(--card-body-radius);

		@media (width < 960px) {
			padding-inline: 0;
			padding-block-end: 0;
		}

		& .card__date {
			margin-block-end: var(--space-sm);
		}
	}

	@media (width >= 960px) {
		--card-display: grid;
		--card-body-radius: 0 var(--radius-md) var(--radius-md) 0;
		--card-body-border-width: 1px 1px 1px 0;

		grid-template-columns: auto 34%;
	}
}

.t-news .card[data-variant="featured-news"] {
	@media (width >= 960px) {
		--card-picture-radius: 0 0 0 var(--radius-md);
	}
}


/* MARK: Simple gray card
----------------------------------------------- */
.card[data-variant="simple"] {
	border-radius: var(--radius-sm);
	background-color: var(--gray-lightest);
	padding: 1.5rem var(--space-lg);

	& :is(h3, h4) {
		font-weight: 400;
		font-size: var(--fs-1);
		font-family: var(--font-sans);

		a.anchor { display: none; }

		& a {
			display: flex;
			gap: var(--space-xs);
			color: var(--twilight);
		}

		& a > svg {
			display: inline-block;
			width: 1rem;
		}
	}

	> img {
		margin-block-start: var(--space-xs);
		border-radius: var(--radius-sm);
		background-image: url("/assets/images/placeholder_logo.svg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
		height: 320px;
		-o-object-fit: cover;
		   object-fit: cover;
	}

	& p {
		margin-block-start: 1.5rem;
		font-size: var(--fs--1);
		line-height: 1.3;
	}
}


/* MARK: In mobile nav
----------------------------------------------- */
:is(.nav-min, .nav-max) .card {
	--card-body-bg: var(--lake-light);
	--card-title-size: var(--fs-0);
	--card-date-size: var(--fs--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%;
	}
}

/* =========================================================
	FOOTER
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
footer {
	--footer-padding-block: 1.875rem;

	@media (width >= 600px) { --footer-padding-block: 3.125rem 1.875rem; }
	@media (width >= 900px) { --footer-padding-block: 4.375rem; }

	position: relative;
	z-index: 1;
	background-color: #0b3f4a;
	padding-block: var(--footer-padding-block);
}

/* MARK: Top/contact area
----------------------------------------------- */
footer .container:not(.utility) {
	--footer-container-grid-cols: 72% auto;

	display: grid;
	grid-template-columns: var(--footer-container-grid-cols) auto;
	-moz-column-gap: 30px;
	     column-gap: 30px;
	color: white;
	font-size: var(--fs--2);

	@media (width >= 600px) {
		--footer-container-grid-cols: 1fr 4.125rem 1fr;
	}

	& a {
		color: var(--lake-light);
	}

	& .info {
		@media (width >= 900px) {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			-moz-column-gap: 1rem;
			     column-gap: 1rem;
		}

		> div:not(:last-child) {
			@media (width >= 900px) {
				--flow-space: 0;
			}
		}

		> div:last-child {
			@media (width >= 900px) { --flow-space: 0.5rem; }
			p { font-weight: 700; }
		}
	}

	& h4 {
		font-weight: 500;
		font-size: 1.4375rem;
	}

	& address {
		--flow-space: 1.5rem;
		font-style: normal;
	}

	& .map-link {
		--flow-space: 0;
	}

	& .grants-portal-link {
		font-weight: 700;
		text-transform: uppercase;

		@media (width >= 600px) { display: none; }
	}

	& .logomark {
		display: none;

		@media (width >= 600px) {
			display: block;
		}
	}

	& .social {
		@media (width >= 600px) {
			text-align: right;
		}

		& ul {
			display: grid;
			row-gap: 2rem;
			margin: 0;
			padding: 0;
			list-style: none;

			@media (width >= 600px) {
				display: flex;
				justify-content: flex-end;
				align-items: baseline;
				gap: 1.5rem;
			}
		}

		& .grants-portal-link {
			display: none;

			@media (width >= 600px) {
				display: block;
				margin-block-start: 1.875rem;
			}
		}
	}
}


/* MARK: Bottom/post footer
----------------------------------------------- */
footer .container.utility {
	margin-block-start: 1.5rem;
	font-size: 0.75rem;
	text-align: center;

	& a {
		color: #47ccb6;
	}

	& .logomark {
		@media (width >= 600px) {
			display: none;
		}

		& img {
			margin-inline: auto;
			width: 3.5625rem;
		}
	}

	> div {
		margin-block-start: 2.5rem;
		color: var(--twilight); /* poor contrast! */

		@media (width >= 600px) {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			gap: 2rem;
		}
	}

	& ul {
		--flow-space: 0.625rem;

		display: flex;
		-moz-column-gap: 1.5rem;
		     column-gap: 1.5rem;
		justify-content: center;
		margin-inline: 0;
		padding: 0;
		list-style: none;
		text-transform: lowercase;
	}
}


/* MARK: Scroll to top link
----------------------------------------------- */
.scroll-top {
	position: fixed;
	right: 0;
	bottom: 0;
	opacity: 0;
	z-index: var(--z-navigation);
	transition: opacity 1s ease-in-out;
	border: 0;
	border-radius: var(--radius-md) 0 0 0;
	background-color: rgba(71, 204, 182, 0.7);
	padding: 0.1875rem 0.4375rem 0.4375rem;

	&.is-visible {
		opacity: 1;
	}
}

/* =========================================================
	TABLE OF CONTENTS
========================================================= */

.toc {
	border-left: 3px solid var(--salmon);
	padding-inline-start: var(--space-lg);

	h2 {
		color: var(--gray);
		font-weight: 400;
		font-size: var(--fs-2);
	}

	ul {
		display: grid;
		gap: var(--space-md);
		margin-inline: 0;
		margin-block-start: var(--space-xl);
		padding: 0;
		font-weight: 700;
		font-size: var(--fs--1);

		li a:hover {
			color: var(--twilight);
		}

		li a::after {
			display: inline-block;
			margin-inline-start: var(--space-2xs);
			content: "›";
			line-height: 1;
		}
	}
}

/* =========================================================
	SIGNPOSTS
========================================================= */

.grid:has(.signpost) {
	--grid-max-col-count: 2;
	--grid-min-col-size: 400px;
	--grid-gap: 4rem;
}

.signpost {
	/* padding-inline: 1rem; */
	text-align: center;

	& * + * {
		margin-block-start: 1rem;
	}

	& h3 {
		color: var(--twilight);
	}
}

/* =========================================================
	GRANT OPPORTUNITIES
	Blocks unique to /grant-opportunities
========================================================= */

.grant-opportunity {
	--header-h2-size: var(--fs-5);
	--header-content-max-width: var(--max-body-width);
	--content-border-width: 0 0 0 10px;
}

.grant-opportunity header {
	@media (width >= 768px) {
		--header-h2-size: 4.5rem;
	}

	background-color: var(--lake-lightest);
	padding-block: 3.75rem;

	> * {
		margin-inline: auto;
		max-width: var(--header-content-max-width);
	}

	& h2 {
		color: var(--twilight);
		font-weight: 500;
		font-size: var(--header-h2-size);
		letter-spacing: -1.06px;
	}

	& p {
		color: var(--gray);
		font-size: var(--fs-2);
	}
}

.grant-opportunity__content {
	margin-block-start: 2.5rem;
	border: 10px solid var(--lake);
	border-width: var(--content-border-width);
	border-radius: var(--radius-md);
	padding-inline: 1.875rem;
	padding-block: var(--space-lg);

	+ .grant-opportunity__content {
		margin-block-start: 2.5rem;

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

	> .description.grid {
		--grid-max-col-count: 2;
		--grid-min-col-size: 340px;
		--grid-gap: var(--space-lg);

		@media (width >= 840px) {
			--grid-gap: var(--space-xl);
		}

		& h3 {
			color: var(--twilight);
			font-weight: 500;
			font-size: var(--fs-5);

			a {
				color: currentColor;
			}
		}
	}

	> .images.grid {
		--grid-max-col-count: 1;
		--grid-gap: var(--space-lg);
		--mbs: var(--space-xl);

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

		@media (width >= 768px) {
			--grid-gap: var(--space-xl);
		}

		@media (width >= 992px) {
			--grid-max-col-count: 3;
			--grid-min-col-size: 190px;
			--grid-gap: var(--space-2xl);
			--mbs: 4.5rem;

			margin-inline: auto;
			max-width: 74.3vw;
		}
	}

	> .images.grid > div {
		/* display: grid; */
		display: flex;
		flex-direction: column;
		gap: 1rem;
		font-size: var(--fs--1);
		text-align: center;

		@media (width >= 768px) and (width < 992px) {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			align-items: center;
		}

		@media (width >= 992px) {
			font-size: var(--fs-0);
		}

		& img {
			margin-inline: auto;
			border-radius: var(--radius-md);
		}
	}
}

.grant-opportunity__content[data-layout="reversed"] {
	--content-border-width: 0 10px 0 0;

	@media (width >= 840px) {
		& .description > div { order: 2; }
		& .description > figure { order: 1; }
	}
}

/* =========================================================
	PROGRAMMING SECTIONS
	/programming
========================================================= */

.programming-section {
	--icon-size: 6.25rem;
	--div-row-gap: var(--space-lg);
	--heading-color: var(--gray);

	@media (width >= 780px) {
		--div-row-gap: var(--space-xl);
	}

	+ .programming-section {
		margin-block-start: 3.75rem;
	}

	& header {
		text-align: center;

		& figure {
			margin-inline: auto;
			max-width: var(--icon-size);
		}

		& figure svg {
			min-height: var(--icon-size);
		}

		& .prose {
			margin-inline: auto;
			max-width: 68.75rem;
			color: var(--gray);
		}

		& .prose h2 {
			margin-block-start: 1rem;
			color: var(--heading-color);
			font-weight: 400;
			font-size: var(--fs-4);
		}
	}

	& > div {
		display: grid;
		row-gap: var(--div-row-gap);
		margin-block-start: 4.375rem;
	}

	& > div .prose {
		@media (width >= 780px) {
			--prose-flow-space: 0;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			-moz-column-gap: var(--space-xl);
			     column-gap: var(--space-xl);
		}
	}

	& > div .prose h3 {
		color: var(--heading-color);
		font-weight: 500;
		font-size: 1.75rem;
	}
}

.programming-section[data-theme="twilight"] {
	--heading-color: var(--twilight);
}

.programming-section[data-theme="gold"] {
	--heading-color: var(--gold);
}

/* =========================================================
	GRANT ELIGIBILITY BLOCKS
	/grant-application-process/guidelines-for-grantseekers
========================================================= */

.eligibility-block {
	--mbs: var(--space-xl);

	@media (width >= 64rem) {
		--mbs: 6.25rem;
	}

	padding-block: 0;

	+ .eligibility-block {
		margin-block-start: var(--mbs);
	}

	&[data-loop="first"] { margin-block-start: 8.75rem; }
	&[data-loop="last"] { margin-block-end: 8.75rem; }

	& h2 {
		display: flex;
		align-items: baseline;
		gap: 0.625rem;
		font-weight: 700;
		font-size: var(--fs-3);
		line-height: 1;
		letter-spacing: -2.5%;

		& span {
			border-radius: var(--radius-md);
			background-color: var(--twilight);
			padding: 0.625rem;
			color: white;
		}

		+ * {
			--flow-space: var(--space-xl);
		}
	}
}

/* =========================================================
	COLLAPSIBLE BLOCK
========================================================= */

/* MARK: Outer container styles
----------------------------------------------- */
.collapsible-block {
	--bg: var(--lake-lightest);
	--border-color: var(--lake);
	--border-width: 0 0 0 8px;
	--summary-font-size: var(--fs-1);
	--summary-font-weight: 400;
	--block-link-color: var(--lake);
	--padding: var(--space-xl);
	border: 1px solid var(--border-color);
	border-width: var(--border-width);
	border-radius: var(--radius-md);
	background-color: var(--bg);
	padding: var(--padding);

	&:hover {
		cursor: pointer;
	}

	.block-link {
		color: var(--block-link-color);
		font-weight: 700;
		font-size: var(--fs-0);
	}
}


/* MARK: Summary/heading
----------------------------------------------- */
.collapsible-block summary {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: var(--summary-font-weight);
	font-size: var(--summary-font-size);
	line-height: 1;
	letter-spacing: -2.5%;
	list-style: none;

	&:hover svg {
		color: var(--neutral-900);
	}

	svg {
		flex-shrink: 0;
		transition: rotate var(--transition-base-fast), color var(--transition-base-fast);
		width: 1.5rem;
		color: var(--border-color);
	}

	span {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--space-md);
		width: 100%;
	}

	span .block-link {
		display: none;
		transition: opacity 0.3s ease;
	}
}

@media (width >= 50rem) {
	.collapsible-block[open] span .block-link {
		display: block;
	}
}

.collapsible-block[open] > summary svg {
	rotate: 180deg;
}


/* MARK: Content
----------------------------------------------- */
.collapsible-block :is(div.flow, div.prose) {
	transition: height 0.45s ease;
	margin-block-start: var(--space-md);
	overflow: hidden;

	@media (width >= 50rem) {
		&.flow > .block-link { display: none; }
	}
}


/* MARK: Color variants
----------------------------------------------- */
.collapsible-block[data-variant="lake"] {
	--bg: var(--lake-lightest);
	--border-color: var(--lake);
	--block-link-color: var(--lake);
}

.collapsible-block[data-variant="dark-gray"] {
	--bg: var(--neutral-100);
	--border-color: var(--gray);
	--block-link-color: var(--gray);
}

.collapsible-block[data-variant="gold"] {
	--bg: var(--gold-lightest);
	--border-color: var(--gold);
	--block-link-color: var(--gold);
}

.collapsible-block[data-variant="river"] {
	--bg: var(--river-lightest);
	--border-color: var(--river);
	--block-link-color: var(--river);
}

.collapsible-block[data-variant="salmon"] {
	--bg: var(--salmon-lightest);
	--border-color: var(--salmon);
	--block-link-color: var(--salmon);
}

.collapsible-block[data-variant="twilight"] {
	--bg: var(--twilight-lightest);
	--border-color: var(--twilight);
	--block-link-color: var(--twilight);
}

.collapsible-block[data-variant="none"] {
	--bg: transparent;
	--border-width: 1px 1px 1px 8px;
	--border-color: var(--neutral-100);
	--block-link-color: var(--twilight);
	--padding: var(--space-md);

	& summary {
		color: var(--twilight);
	}

	& svg {
		color: var(--block-link-color);
	}
}

/* =========================================================
	PROCESS BLOCKS
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
.process-step {
	--arrow-sizing: 20px 40px 0 40px;
	--border-radius: 7px;
	--top-border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	--bottom-border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	--step-margin-block-start: 50px;
	--step-padding-inline: 0;
	--mbs: 2.5rem;
	--header-padding: 60px 20px;
	--header-h2-size: var(--fs-6);
	--header-pbe: 0.625rem;
	--header-text-size: var(--fs-2);
	--header-text-mbs: var(--space-md);
	--content-padding: 3.75rem 3.125rem;
	--footer-bg-color: var(--twilight);
	--footer-padding: var(--space-lg);
	--footer-arrow-position: -20px;

	@media (width >= 768px) {
		--arrow-sizing: 50px 100px 0 100px;
		--step-margin-block-start: 3.75rem;
		--step-padding-inline: 0.9375rem;
		--mbs: 5rem;
		--header-padding: 3.75rem var(--space-2xl);
		--header-text-mbs: 2.5rem;
		--content-padding: 3.75rem 5.625rem;
		--footer-padding: var(--space-xl);
		--footer-arrow-position: -50px;
	}

	@media (width >= 992px) {
		--header-h2-size: var(--fs-7);
		--header-pbe: var(--space-lg);
		--header-text-size: var(--fs-4);
	}

	display: grid;
	margin-block-start: var(--step-margin-block-start);
	padding-inline: var(--step-padding-inline);
	padding-block: 0;

	+ .process-step {
		--header-padding: 110px 80px 60px;
		margin-block-start: var(--mbs);

		& header {
			position: relative;

			::before {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				border-width: var(--arrow-sizing);
				border-style: solid;
				border-color: white transparent transparent transparent;
				width: 0;
				height: 0;
				content: "";
			}
		}
	}

	&:last-of-type:not(:has(.footer)) .content {
		border-radius: var(--bottom-border-radius);
	}

	&:last-of-type {
		margin-block-end: 90px;
		@media (width >= 768px) { margin-block-end: 130px; }
	}

	& header {
		background-color: var(--twilight);
		padding: var(--header-padding);
		color: white;
		text-align: center;

		@media (width >= 768px) {
			border-radius: var(--radius-sm) var(--radius-sm) 0 0;
		}

		& h2 {
			border-bottom: 1px solid white;
			padding-block-end: var(--header-pbe);
			color: inherit;
			font-size: var(--header-h2-size);
		}

		& div {
			margin-block-start: var(--header-text-mbs);
			font-size: var(--header-text-size);
			font-family: var(--font-serif);
		}
	}

	& .content {
		display: grid;
		row-gap: 4rem;
		padding: var(--content-padding);
		color: var(--gray);

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

		/* Ensures list numbering is continuous */
		&.connect-lists {
			counter-reset: basic-list;
		}

		& h3 {
			font-weight: 400;
			font-size: 1.625rem;
			letter-spacing: -1px;
		}

		* + h3 { --flow-space: 2rem; }

		& p.link + p.link {
			margin-block-start: 1.5rem;
		}

		& ol + p.link {
			margin-block-start: 3rem;
		}

		& ol:is(.start, .continue) {
			line-height: 1.5;
			list-style: none;

			li { margin-bottom: 0.9375rem; }
		}
	}

	& .footer {
		position: relative;
		background-color: var(--footer-bg-color);
		padding: var(--footer-padding);
		color: white;
		font-weight: 700;
		text-align: center;

		@media (width >= 768px) {
			border-radius: var(--bottom-border-radius);
		}

		&::after {
			position: absolute;
			bottom: var(--footer-arrow-position);
			left: 50%;
			transform: translateX(-50%);
			border-width: var(--arrow-sizing);
			border-style: solid;
			border-color: var(--footer-bg-color) transparent transparent transparent;
			width: 0;
			height: 0;
			content: "";
		}
	}
}

.container:has(figure.table) + .container.process-step {
	--step-margin-block-start: 0;
}

/* MARK: Color variations
----------------------------------------------- */
.process-step[data-color="lake"] {
	header { background-color: var(--lake); }
	.content { background-color: var(--lake-lightest); }
	.content h3 { color: var(--lake); }
	.footer { --footer-bg-color: var(--lake); }
}

.process-step[data-color="twilight"] {
	.content { background-color: var(--twilight-lightest); }
}

.process-step[data-color="gold"] {
	header { background-color: var(--gold); }
	.content { background-color: var(--gold-lightest); }
	.content h3 { color: var(--gold); }
}

/* =========================================================
	TABLES
========================================================= */

/* MARK: Base styles
	Mainly from previous dev
----------------------------------------------- */
table {
   --stroke: 1px solid var(--twilight-lightest);

	display: table;
   border: var(--stroke);
   border-collapse: collapse;
   width: 100%;

	+ table {
		margin-block-start: var(--space-xl);
	}

	& thead + tbody {
		border-top: var(--stroke);
	}

	tr + tr :is(th, td) {
		border-block-start: var(--stroke);
	}

	& :is(th, td) {
		padding: 0.5rem 1rem;

		& ~ :is(th, td) {
			border-inline-start: var(--stroke);
		}
	}

	& th {
		font-weight: 700;
		line-height: 1.2;
		text-align: left;

		&:not(:only-of-type) {
			border-block-end: var(--stroke);
		}

		&th:only-of-type {
			border-inline-end: var(--stroke);
		}
	}

	& caption {
		margin-block-start: 0.5rem;
		caption-side: bottom;
	}
}


/* MARK: Advanced branded styling
----------------------------------------------- */
figure.table:has(.advanced-branded-styling) {
	display: block;
	overflow-x: auto;
}

/* This ensures that the table scroll shadow JS has room
to remove the shadow when on the far right edge of
the table */
table.advanced-branded-styling {
	min-width: 500px;

	& :is(th, td) {
		font-size: 1.125rem;
	}

	& thead {
		--stroke: 1px solid var(--twilight);

		border: var(--stroke);
		border-width: 1px 1px 0 1px;
	}

	& thead th {
		background-color: var(--twilight);
		color: white;
	}

	tbody th {
		background-color: rgba(80 201 181 / 5%);
	}
}

/* =========================================================
	SIDE MENU
========================================================= */

.side-menu {
	--flow-space: 2rem;

	border-left: 3px solid var(--salmon);
	padding-inline-start: 1.5625rem;
	padding-block-end: 1.2rem;
	width: 18.75rem;

	@media (width >= 660px) {
		float: right;
		margin-inline-start: 2.5rem;
		margin-block-end: 2.5rem;
	}

	& h2 {
		/* --flow-space: 0 !important; */
		--flow-space: 0;

		color: var(--gray);
		font-weight: 500;
		font-size: 1.75rem;
		line-height: 1.2;
		letter-spacing: -0.5px;
	}

	& ul {
		counter-reset: basic-list;
		margin-inline: 0;
		margin-block-start: 40px;
		margin-block-end: 0;
		padding: 0;
		list-style: none;

		& li {
			margin-inline: 0 !important;
			font-weight: 700;
			font-size: 1.125rem;
			text-indent: 0 !important;

			&::before { display: none; }
		}

		& li a::after {
			display: inline-block;
			margin-inline: 4px -12px;
			content: "\203A";
			line-height: 0.77777778;
		}

		ul + .prose { --flow-space: var(--space-xl); }
		+ h2 { --flow-space: 2rem; }
	}

	+ * {
		--flow-space: var(--space-3xl);
	}
}

/* =========================================================
	QUOTES
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
figure.quote {
	--quote-bg: transparent;
	--quote-container-margin: 0;
	--quote-container-padding: 0;
	--quote-container-max-width: 100%;
	--blockquote-bg: transparent;
	--blockquote-padding: 0;
	--blockquote-text-color: var(--gray);
	--blockquote-text-size: var(--fs-1);
	--figcaption-font-size: var(--fs-0);
	--figcaption-text-color: var(--gray);
	--figcaption-mbs: var(--space-md);

	@media (width >= 768px) {
		--blockquote-text-size: var(--fs-2);
		--figcaption-font-size: var(--fs-2);
	}

	margin: var(--quote-container-margin);
	background-color: var(--quote-bg);
	padding: var(--quote-container-padding);
	max-width: var(--quote-container-max-width);

	& blockquote {
		background-color: var(--blockquote-bg);
		padding: var(--blockquote-padding);
		color: var(--blockquote-text-color);
		font-size: var(--blockquote-text-size);
	}

	& figcaption {
		margin-block-start: var(--figcaption-mbs);
		color: var(--figcaption-text-color);
		font-style: italic;
		font-size: var(--figcaption-font-size);
	}
}


/* MARK: Edge to edge
----------------------------------------------- */
figure.quote[data-variant="bleed"] {
	--quote-bg: var(--lake-lightest);
	--quote-container-margin: 4rem -50vw;
	--quote-container-padding: 2.5rem;
	/* --quote-container-max-width: 100%; */
	/* --blockquote-bg: transparent; */
	/* --blockquote-padding: 0; */
	/* --blockquote-text-color: var(--gray); */
	/* --figcaption-font-size: var(--fs-0); */
	/* --figcaption-text-color: var(--gray); */
	/* --figcaption-mbs: var(--space-xl); */

	/* @media (width >= 768px) {
		--figcaption-font-size: var(--fs-2);
	} */

	position: relative;
	right: 50%;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
}

/* =========================================================
	CTAs
========================================================= */

/* MARK: Base/basic
----------------------------------------------- */
.cta {
	text-align: center;

	& h2 {
		font-weight: 500;
		font-size: var(--fs-3);
	}

	& .prose {
		--flow-space: var(--space-md);
	}

	& .button-set {
		--flow-space: var(--space-lg);

		& .arrow-button {
			text-transform: capitalize;
		}
	}
}


/* MARK: Page-end CTA
----------------------------------------------- */
.cta[data-variant="page-end"] {
	--mbe: var(--space-2xl);
	--h2-size: var(--fs-3);
	--if-last-mbs: var(--space-2xl);

	@media (width >= 640px) {
		--mbe: 4.125rem;
		--h2-size: var(--fs-6);
		--if-last-mbs: var(--space-3xl);
	}

	margin-block-end: var(--mbe);
	background-color: var(--gray-lightest);
	padding-inline: 1.5625rem;
	padding-block: 4.125rem 4.875rem;

	& h2 {
		color: var(--twilight);
		font-weight: 400;
		font-size: var(--h2-size);
		line-height: 1;
		letter-spacing: -3%;
		text-align: center;
	}

	&:last-child {
		margin-block-start: var(--if-last-mbs);
	}
}

/* =========================================================
	ANNUAL REPORTS
========================================================= */

.t-annualReportsListing .grid {
	--grid-gap: var(--space-lg);

	margin-block: 2.5rem var(--space-3xl);

	@media (width >= 1024px) {
		--grid-gap: var(--space-xl);
	}

	> article h2 {
		color: var(--gray);
		font-weight: 400;
		font-size: var(--fs-0);
		line-height: 1.5;
	}
}

/* =========================================================
	SPLIT BLOCKS
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
.split-block {
	--gap: 1.5rem;
	--mbs: 3.5rem;

	@media (width >= 768px) {
		--gap: var(--space-xl);
		--mbs: var(--space-2xl);
	}

	@media (width >= 900px) {
		--mbs: 6.25rem;
	}

	display: grid;
	align-items: center;
	gap: var(--gap);
	margin-block-start: var(--mbs);

	@media (width >= 768px) {
		grid-template-columns: repeat(2, 1fr);
	}

	.image img {
		border-radius: var(--radius-md);
	}
}


/* MARK: Layouts
----------------------------------------------- */
@media (width >= 768px) {
	.split-block[data-layout="textImage"] {
		.text { order: 1; }
		.image { order: 2; }
	}

	.split-block[data-layout="imageText"] {
		.text { order: 2; }
		.image { order: 1; }
	}
}

/* =========================================================
	PEOPLE SECTION/BLOCK
========================================================= */

/* MARK: Block container
----------------------------------------------- */
.people-section {
	--block-mbs: var(--space-xl);

	margin-block-start: var(--block-mbs);
	padding: 0;

	+ .people-section {
		--block-mbs: 8.75rem;
	}

	& h2 {
		color: var(--lake);
		font-weight: 500;
		font-size: 3.75rem;
		text-align: center;

		+ .people-grid {
			margin-block-start: 2.5rem;
		}
	}
}


/* MARK: People grid
----------------------------------------------- */
.people-grid {
	display: flex;
	-moz-column-gap: 2.5rem;
	     column-gap: 2.5rem;
	flex-wrap: wrap;
	justify-content: center;

	& .person {
		padding-block: 2.5rem 3.75rem;
		width: 12.5rem;
		text-align: center;

		&.active {
			background-color: var(--lake-lightest);
		}

		& img {
			margin-inline: auto;
			border-radius: 50%;
		}

		& h3 {
			--flow-space: 0.625rem;

			color: var(--twilight);
			font-weight: 500;
			font-size: 1.25rem;
			line-height: 1.2;
		}

		& p {
			--flow-space: 0.375rem;

			font-size: var(--fs--2);
			line-height: 1.2;
		}
	}

	& .person-outer {
		position: relative;
		transition: transform 0.3s ease;
		cursor: pointer;

		&.active {
			transform: scale(1.05);
		}
	}
}


/* MARK: Bio row
----------------------------------------------- */
.bio-row {
	/* background-color: var(--neutral-100); */

	&.full-width {
		display: none;
		position: relative;    /* Position relative to adjust other elements if needed */
		left: 50%;             /* Move the element to the center of the viewport */
		transform: translateX(-50%); /* Shift it back by 50% of its width to align with the viewport edges */
		box-sizing: border-box; /* Include padding and borders in the element's width */
		margin-top: var(--space-md);
		margin-right: 0;       /* Reset any right margins */
		margin-left: 0;        /* Reset any left margins */
		/* width: 100%; */
		width: 100vw;          /* Full viewport width */
		max-width: 100%;       /* Ensure it doesn't exceed the viewport width */
	}

	&.full-width.showing-bio {
		display: block;
		animation: fadeIn 0.3s ease-in-out;
	}

	& .inner-container {
		position: relative;
		left: calc(-50vw + 50%);
		border: 1px solid var(--neutral-200);
		background-color: var(--neutral-100);
		padding: 2.5rem;
		width: 100vw;
	}

	& .container {
		display:flex;
		flex-direction: row;
		align-items: flex-start;
	}

	& .prose {
		margin-right: auto;
		margin-left: auto;
		padding: 2.5rem;
		padding-right: 6.25rem;
		max-width: calc(1190px - 6.25rem);
		line-height: 1.5;
		text-align: left;
	}

	& button {
		display: block;
		cursor: pointer;
		margin: var(--space-md) auto 0;
		border: none;
		border-radius: 5px;
		background-color: transparent;
		padding: 0.625rem var(--space-md);
		font-size: var(--fs-3);
		text-align: center;
	}
}


/* MARK: Animations
----------------------------------------------- */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* =========================================================
	COLOR BLOCK BOXES (.color-block-boxes)
========================================================= */

* + .color-block-boxes {
	margin-block-start: 5.625rem;
}

.color-block-boxes {
	--theme-color-bg: var(--lake-lightest);
	--theme-color: var(--lake);
	--h2-size: var(--fs-3);
	--h3-size: var(--fs-2);
	--boxes-mbs: 1.5rem;
	--boxes-text-size: var(--fs--2);

	@media (width >= 800px) {
		--h2-size: 3.4375rem;
		--h3-size: var(--fs-5);
		--boxes-mbs: var(--space-lg);
		--boxes-text-size: var(--fs-0);
	}

	border-top: 0.5rem solid var(--theme-color);
	border-radius: var(--radius-md);
	background-color: var(--theme-color-bg);
	padding-inline: 1.25rem;
	padding-block: 3.75rem;

	& h2 {
		color: var(--theme-color);
		font-weight: 400;
		font-size: var(--h2-size);
		letter-spacing: -3%;

		@media (width >= 800px) {
			text-align: center;
		}
	}

	& .boxes {
		display: grid;
		gap: var(--space-md);
		margin-block-start: var(--boxes-mbs);

		@media (width >= 800px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	& .boxes > div {
		border-radius: var(--radius-md);
		background-color: white;
		padding: 1.25rem;

		& h3 {
			color: var(--theme-color);
			font-weight: 700;
			font-size: var(--h3-size);
			letter-spacing: -2.5%;
		}

		& p {
			font-weight: 400;
			font-size: var(--boxes-text-size);
			line-height: 1.4;
			letter-spacing: -0.5%;
		}

		& h3 + p {
			margin-block-start: 0.9375rem;
		}
	}

	/* Color themes (default is lake; set by custom properties above) */
	&[data-boxes-theme="dark-gray"] {
		--theme-color-bg: var(--neutral-100);
		--theme-color: var(--gray);
	}

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

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

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

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

/* Spacing if last block */
.t-aboutTheTrust .main .color-block-boxes:last-child {
	margin-block-end: 13.125rem;

	@media (width >= 800px) {
		margin-block-end: 17.5625rem;
	}
}

/* =========================================================
	COLORED BLOCK - TEXT ONLY (.color-block-text-only)
========================================================= */

* + .color-block-text-only {
	margin-block-start: 5.625rem;
}

.color-block-text-only {
	--theme-color: var(--lake);
	--theme-color-bg: var(--lake-lightest);
	--padding: 2.5rem 1.25rem;
	--h2-font-size: var(--fs-3);
	--text-size: 1.25rem;

	@media (width >= 800px) {
		--padding: 3.75rem 3.125rem;
		--h2-font-size: var(--fs-6);
		--text-size: var(--fs-3);
	}

	background-color: var(--theme-color-bg);
	border-radius: var(--radius-md);
	border-top: 0.5rem solid var(--theme-color);
	padding-block: var(--padding);

	& h2 {
		color: var(--theme-color);
		font-weight: 400;
		font-size: var(--h2-font-size);
		line-height: 1;
		letter-spacing: -3%;
	}

	& p {
		font-weight: 400;
		font-size: var(--text-size);
		letter-spacing: -1%;
	}

	& h2 + p {
		margin-block-start: 0.9375rem;
	}

	@media (width >= 640px) {
		:is(h2, p) {
			text-align: center;
		}
	}

	/* Color themes (lake is default and set in custom properties above) */
	&[data-colored-block-theme="dark-gray"] {
		--theme-color: var(--gray);
		--theme-color-bg: var(--neutral-100);
	}

	&[data-colored-block-theme="gold"] {
		--theme-color: var(--gold);
		--theme-color-bg: var(--gold-lightest);
	}

	&[data-colored-block-theme="river"] {
		--theme-color: var(--river);
		--theme-color-bg: var(--river-lightest);
	}

	&[data-colored-block-theme="salmon"] {
		--theme-color: var(--salmon);
		--theme-color-bg: var(--salmon-lightest);
	}

	&[data-colored-block-theme="twilight"] {
		--theme-color: var(--twilight);
		--theme-color-bg: var(--twilight-lightest);
	}
}

/* Spacing if last block */
.t-aboutTheTrust .main .color-block-text-only:last-child {
	margin-block-end: 13.125rem;

	@media (width >= 800px) {
		margin-block-end: 17.5625rem;
	}
}

/* =========================================================
	COLUMNED TEXT STYLES
========================================================= */

.columned-text {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15.625rem, 100%), 1fr));
	-moz-column-gap: 2.625rem;
	     column-gap: 2.625rem;
	row-gap: var(--space-lg);
}

/* =========================================================
	FORMS
========================================================= */

form {
	font-family: var(--font-sans);

	:is(hr, .fui-hr) { margin-block: 1rem !important; }
}

/* There's a .flow composition, but this prevents forms from having to have that applied where markup is harder to control in certain systems. It still uses the --flow-space variables though to make managing space easier */
form > * + * {
	margin-top: var(--flow-space, 1rem);
}

/* MARK: Fieldset & legend
----------------------------------------------- */
fieldset {
	border: var(--stroke);
	padding: var(--space-sm);
}

legend {
	padding-inline: var(--space-xs);
	font-weight: 500;
}

/* MARK: Label
----------------------------------------------- */
:is(label, .fui-label,
	.fui-subfield-fieldset .fui-legend,
	.fui-type-radio .fui-fieldset .fui-legend,
	.fui-type-checkboxes .fui-fieldset .fui-legend,
	.fui-type-address .fui-fieldset .fui-legend) {
	font-weight: 700;
	font-size: var(--fs--1);
	line-height: 1.1;

	span.fui-required { color: var(--form-error-color); }
}

/* Usually label wraps checkbox and radio buttons, so we give ourselves more layout and text-flow control with flex */
label:has(input) {
	display: flex;
	align-items: baseline;
	gap: var(--space-sm);
	font-weight: 400;
}

label:has(input) + label:has(input) { --flow-spce: var(--space-sm); }


/* MARK: Fields
----------------------------------------------- */
:is(
	input:not(
		[type="checkbox"], [type="radio"], [type="color"], [type="file"], [type="range"], [type="submit"],[type="button"], [type="reset"], [type="image"], [type="hidden"]),
	select, textarea, .fui-input
) {
	border-color: var(--gray-lighter);
	border-radius: 0;
	background-color: white;
	padding: var(--space-sm);
	width: 100%;
	color: var(--gray);
	font-weight: 400;
	font-size: var(--fs--2);

	&::-moz-placeholder { color: var(--gray); }

	&::placeholder { color: var(--gray); }
	&:focus { background-color: white; }
	&.fui-error { border-color: var(--form-error-color); }
}

/* :is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea)::placeholder {
	opacity: 1;
	color: var(--color-mid, #eee);
} */

/* Slightly adjusts the vertical position of the check/radio */
/* label:has(input) input { transform: translateY(-0.1ex); } */
/* input:disabled { background: var(--color-mid); } */

/* input:disabled,
label input:disabled + * { cursor: not-allowed; } */

/* Sets a sensible height if textarea rows attribute is missing */
/* textarea:not([rows]) { min-height: 10rem; } */


/* MARK: Form block
----------------------------------------------- */
.form-block {
	--form-flow-space: 1.5rem;
	container: formBlock / inline-size;

	> * + * { margin-block-start: var(--form-flow-space) !important; }
}


/* MARK: Formie styles/overrides
----------------------------------------------- */
.fui-page-container > {
	.fui-row:not(.fui-row-empty) + .fui-row:not(.fui-row-empty) {
		margin-block-start: calc(var(--form-flow-space) + 16px);
	}
}

.fui-instructions {
	color: var(--gray);

	p {
		font-size: var(--fs--2);
		font-size: 400;
	}
}

:is(label.fui-radio-label, label.fui-checkbox-label) {
	font-weight: 400 !important;
}

.fui-type-html .fui-input-wrapper {
	font-size: var(--fs--1);

	> * + * { margin-block-start: 1rem; }
}

.fui-errors div {
	color: var(--form-error-color);
	font-size: var(--fs--2);
}

.fui-error :is(
	.fui-label,
	.fui-subfield-fieldset .fui-legend,
	.fui-type-radio .fui-fieldset .fui-legend
) {
	color: var(--form-error-color);
}

.fui-alert {
	font-family: var(--font-sans);
	margin-block-end: var(--space-lg) !important;
	border-radius: 0;

	p { font-size: var(--fs--2); }

	&.fui-alert-error {
		color: var(--form-error-color);

		p { color: inherit; }
	}
}

/* =========================================================
	IMAGE SLIDERS
========================================================= */

/* MARK: Side image slider
----------------------------------------------- */
aside.image-slider {
	--mi: auto;
	--max-width: 25rem;

	@media (width >= 768px) {
		--mi: var(--space-lg) 0;
		--max-width: 31.25rem;
	}

	position: relative;
	margin-inline: var(--mi);
	max-width: var(--max-width);

	@media (width >= 768px) {
		float: right;
		margin-block-end: var(--space-lg);
		width: 65%;
	}

	.uk-slideshow-items > div,
	.uk-slideshow-items > div img {
		border-radius: var(--radius-md);
	}

	a[uk-slideshow-item] {
		display: inline-block;
		position: absolute;
		background-image: url("/assets/images/quarter-semi-circle.svg");
		background-position: center;
		background-repeat: no-repeat;
		width: 2.5rem;
		height: 9rem;

		&::after {
			display: inline-block;
			position: absolute;
			content: "\203A";
			color: var(--salmon);
			font-size: var(--fs-6);
			line-height: 1;
		}
	}

	a[uk-slideshow-item="previous"] {
		left: 0;
		top: 50%;
		transform: translateY(-50%);

		&::after {
			rotate: 180deg;
			top: 50%;
			transform: translateY( calc(50% - 5px) );
		}
	}

	a[uk-slideshow-item="next"] {
		right: 0;
		rotate: 180deg;
		top: 50%;
		transform-origin: center;
		transform: translateY(50%);

		&::after {
			rotate: 180deg;
			top: 50%;
			transform-origin: center;
			transform: translateY( calc(50% - 5px) );
		}
	}

	ul[data-dot-navigation] {
		background-color: rgba(50, 50, 50, 0.8);
		border-radius: 6.25rem;
		bottom: 0;
		-moz-column-gap: var(--space-md);
		     column-gap: var(--space-md);
		display: flex;
		justify-content: center;
		left: 50%;
		padding: var(--space-2xs) 0.625rem;
		position: absolute;
		transform: translateX(-50%);
		width: -moz-fit-content;
		width: fit-content;
	}

	ul[data-dot-navigation] li {
		background-color: #888;
		border-radius: 100%;
		height: var(--space-xs);
		width: var(--space-xs);

		&::before { display: none; }
		&.uk-active { background-color: white; }
	}

	ul[data-dot-navigation] li a {
		display: block;
		width: 100%;
		height: 100%;
	}
}

/* =========================================================
	POST SLIDER
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
.scroller-block[data-page="50th-anniversary"] {
	--heading-font-size: var(--fs-6);
	--heading-font-weight: 400;
	--margin-block-start: clamp(2.5rem, 3.33vi + 1.83rem, 4.5rem);
	--media-item-border-radius: var(--radius-md);
	--media-item-width: clamp(15rem, 17.19vi + 11.56rem, 25.31rem);
	--scroller-instructions-color: var(--twilight);
	--scroller-instructions-font-size: 1.625rem;
	/* --scroller-padding-inline: clamp(50px, 20%, 364px); */
	--scroller-padding-inline: clamp(3.125rem, 20%, 22.75rem);
	--scroller-column-gap: var(--space-md);

	h2 {
		font-size: var(--heading-font-size);
		font-weight: var(--heading-font-weight);
	}

	.scroller-instructions {
		--flow-space: 3.625rem;

		color: var(--scroller-instructions-color);
		font-size: var(--scroller-instructions-font-size);
		line-height: 1.35;
		letter-spacing: 2.643px;
		text-transform: uppercase;
	}

	.media-scroller {
		box-sizing: border-box;
		margin-block-start: var(--margin-block-start);
		overflow: hidden;
		padding: 0;
		-webkit-user-select: none;
		   -moz-user-select: none;
		        user-select: none;
		width: 100%;

		.swiper-wrapper {
			align-items: center;
		}

		.media-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: var(--media-item-width);
			height: 100%;
			position: relative;
			box-sizing: border-box;

			img {
				width: var(--media-item-width);
			}
		}
	}
}

/* =========================================================
	MAP BACKGROUNDS
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
.map-contour-left,
.map-contour-right {
	position: fixed;
	top: 0;
	z-index: -10;
	background-size: 150% auto;
	background-repeat: no-repeat;
	width: calc((100% - 74.375rem) / 2);
	height: 62.5rem;

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

	@media screen and (width >=1700px) {
		background-size: 100% auto;
	}
}


/* MARK: Left side
----------------------------------------------- */
.map-contour-left {
	left: 0;
	background-position: right top;

	&.hood {
		background-image: url("/assets/images/map_bgs/left/mt_hood_1.svg");
	}

	&.st-helens {
		background-image: url("/assets/images/map_bgs/left/mt_st_helens_1.svg");
	}
}


/* MARK: Right side
----------------------------------------------- */
.map-contour-right {
	right: 0;
	background-position: left top;

	&.hood {
		background-image: url("/assets/images/map_bgs/right/mt_hood_1.svg");
	}

	&.st-helens {
		background-image: url("/assets/images/map_bgs/right/mt_st_helens_1.svg");
	}
}

/* =========================================================
	MODALS
========================================================= */

.no-scroll {
	overflow: hidden; /* Prevent scrolling */
	height: 100%; /* Optional, for some use cases */
}

.modal-overlay {
	align-items: center;
	background: rgba(34, 32, 32, 0.5);
	display: flex;
	height: 100vh;
	justify-items: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 99;
}

.modal-container {
	--width: 100vw;
	--height: 100vh;
	--max-width: none;
	--border-radius: 0;

	@media (width >= 992px) {
		--width: 80vw;
		--height: 80vh;
		--max-width: 62.8125rem;
		--border-radius: 1.5rem;
	}

	background: white;
	height: var(--height);
	margin: auto;
	overflow: scroll;
	width: var(--width);
	padding: 100px 40px;

	.modal-content {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
}

/* =========================================================
	NEWSLETTER SIGNUP FORMS
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
.newsletter-signup .ctct-inline-form {
	.ctct-form-footer { display: none; }

	.ctct-form-custom,
	.ctct-form-success {
		& label { font-size: var(--fs--2); }

		& input {
			border: none !important;
			outline: none !important;
			box-shadow: none !important;
			font-size: 15px !important;
			background-color: var(--neutral-100) !important;
			border-radius: var(--radius-lg) !important;
		}
	}

	& button.ctct-form-button {
		font-size: 18px !important;
		flex-basis: 15%;
		width: 100%;
		height: 35px;
		max-height: 35px;
		padding: 8px 0 !important;
		text-transform: uppercase !important;
		background-color: var(--twilight) !important;
	}
}


/* MARK: Home page
----------------------------------------------- */
.t-home .newsletter-signup .ctct-inline-form {
	margin-block-start: 1.5rem;

	div.ctct-form-defaults { padding: 1rem 1.5rem !important; }

	.ctct-form-custom,
	.ctct-form-success {
		display: inline-block;
		width: 100%;
		text-align: center;

		@media (width >= 768px) {
			display: flex;
			min-height: 0;
			align-items: center;
			flex-wrap: wrap;
			text-align: left;
		}

		@media (width >= 1000px) {
			flex-wrap: nowrap;
		}

		p.ctct-form-text {
			font-family: var(--font-callunasans);
			font-size: var(--fs--2);
			/* align-self: center; */
			/* padding-right: 1em; */
			line-height: 1;
			color: var(--twilight);
			margin-bottom: 1rem;
			padding-inline: 1rem;

			@media (width >= 768px) {
				margin-bottom: 0;
				/* flex-basis: clamp(150px, 230px, 230px); */
				flex-basis: clamp(9.375rem, 14.375rem, 14.375rem);
				min-height: 2.5rem;
				line-height: 1.5;
				padding-inline: 0;
			}

			@media (width >= 1000px) {
				flex-basis: 14.375rem;
			}
		}

	  .ctct-form-field {
		  position: relative;
		  padding-right: 0;
		  margin-bottom: 0.625rem !important;

		  @media (width >= 768px) {
				flex-basis: 23.125rem;
				padding-right: 1.25rem;
				margin-bottom: 0 !important;
			}

			@media (width >= 1000px) {
				flex-basis: 18.75rem;
			}

			label {
				display: none;
			}

			.ctct-form-errorMessage {
				font-size: var(--fs--3);
			}

			input {
				position: relative;
				z-index: 10;

			}
	  }

	  input.ctct-form-element {
		 height: 2.1875rem;
	  }
	}

	h2.ctct-form-header {
		font-size: var(--fs-3);
		line-height: 1;
		font-weight: 700;
		/* flex-basis: clamp(230px, 370px, 370px); */
		flex-basis: clamp(14.375rem, 23.125rem, 23.125rem);
		color: var(--twilight);
		margin-bottom: 0;
		padding-bottom: 0;
		font-family: var(--font-callunasans);
		text-transform: uppercase;
	}

	#gdpr_text { display: none; }
}


/* MARK: Other pages
----------------------------------------------- */
body:not(.t-home) .newsletter-signup .ctct-inline-form {
	h2.ctct-form-header,
	p.ctct-form-text { display: none; }
}

/* =========================================================
	QUARTERLY REPORT BY NUMBERS BLOCK
========================================================= */

.quarterly-report-by-numbers {
	display: grid;
	background-image: url("/assets/images/map_bgs/stats_universal.svg");
	background-position: center;
	/* background-size: 816px 816px; */
	background-size: 51rem 51rem;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 0;
	overflow: hidden;

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

	> div { padding: 4.375rem var(--space-md); }

	> div:first-child {
		position: relative;
		border-radius: 7px 7px 0 0;
		background-color: rgba(0, 181, 154, 0.64);

		@media (width >= 750px) {
			border-radius: 7px 0 0 7px;
			padding-inline-end: 9vw;
		}

		&::after {
			position: absolute;
			bottom: -2.5rem;
			left: calc(50% - 10px);
			rotate: 90deg;
			background-image: url("/assets/images/ar2021_lookback_arrow_left.svg");
			background-size: contain;
			background-repeat: no-repeat;
			width: var(--space-md);
			height: ;
			content: "";

			@media (width >= 750px) {
				top: 50%;
				right: 0;
				bottom: unset;
				left: unset;
				transform: translateY(-50%);
				rotate: unset;
			}
		}

		h2 {
			color: white;
			font-weight: 400;
			font-size: var(--fs-2);
			font-family: var(--font-serif);
			text-align: center;

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

		h2 span {
			display: block;
			margin-block-start: var(--space-xs);
			font-size: 3.125rem;
		}

		p.numbers {
			color: var(--twilight);
			font-weight: 700;
			font-size: 3.3125rem;
			line-height: 1;
			text-align: center;

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

			span:last-child {
				display: block;
				margin-block-start: var(--space-2xs);
				font-weight: 400;
				font-size: var(--fs--1);
			}
		}
	}

	> div.state-icon-list {
		border-radius: 0 0 7px 7px;
		background-color: rgba(80, 201, 181, 0.16);

		@media (width >= 750px) {
			display: grid;
			row-gap: 1rem;
			border-radius: 0 7px 7px 0;
		}
	}

	> div.state-icon-list > div.state {
		display: grid;
		grid-template-columns: var(--space-3xl) auto;
		-moz-column-gap: var(--space-md);
		     column-gap: var(--space-md);
		row-gap: var(--space-xs);
		justify-content: center;
		align-items: center;
		margin-inline: auto;
		max-width: 18.75rem;

		> div:first-child {
			width: 100%;
		}

		> div:first-child img {
			margin-inline: auto 0;
			margin-block-start: 0.625rem;
		}

		&:not(.state-outsidePNW) > div:first-child img { max-width: var(--space-2xl); }

		> div:last-child {
			color: var(--twilight);
			font-weight: 700;
			font-size: var(--fs-5);
			line-height: 1;
			letter-spacing: -2px;
		}
	}
}

/* =========================================================
	QUARTERLY REPORT GRANTEES
========================================================= */

.featured-grantees {
	& h2 {
		font-weight: 400;
	}

	& *:not(h2) + h3 { margin-block-start: 2.5rem; }

	& h3 {
		font-weight: 400;

		+ .grantees-grid { --flow-space: 0.625rem; }
	}

	& .grantees-grid {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: var(--space-md);

		+ .grantees-grid { --flow-space: var(--space-md); }

		@media (width >= 1000px) {
			grid-auto-columns: minmax(0, 1fr);
		}

		> div:nth-child(3) {
			@media (width < 1000px) {
				grid-column: span 2;
			}
		}
	}
}

/* =========================================================
	SEARCH COMPONENT & RESULTS PAGE
========================================================= */

/* MARK: Search results container
----------------------------------------------- */
.search-container {
	--h2-size: var(--fs-3);
	--h2-alignment: center;

	padding-block: var(--space-3xl) var(--space-2xl);
	width: 100%;

	@media (width >= 768px) {
		--h2-size: 2.5rem;
		--h2-alignment: left;
	}

	& h2 {
		color: #5e5e5f;
		font-weight: 500;
		font-size: var(--h2-size);
		text-align: var(--h2-alignment);
		text-transform: uppercase;

		+ .search-result-excerpt { margin-block-start: 1.875rem; }
	}

	& .show-all-link {
		position: relative;
		color: var(--gray);
		font-weight: 700;

		&:after {
			vertical-align: middle;
			margin-left: var(--space-2xs);
			content: "\2023";
			color: #e0684b;
			font-size: 1.875rem;
			line-height: 1.5;
		}
	}
}


/* MARK: Search results
----------------------------------------------- */
.search-results-text {
	text-transform: uppercase;

	& p strong {
		text-transform: none;
	}
}

.search-results-content {
	padding-block-start: 1.5rem !important; /* overrides uikit */
	div:has(.show-all-link) + h2 { margin-block-start: 2.375rem; }
}

.search-result-excerpt {
	display: grid;
	row-gap: var(--space-2xs);

	@media (width >= 768px) {
		display: flex;
		-moz-column-gap: 1.875rem;
		     column-gap: 1.875rem;
	}

	@media (width >= 992px) { max-width: 92%; }

	& figure.search-image {
		position: relative;
		width: 100%;
		height: 9.375rem;

		@media (width >= 768px) {
			flex-shrink: 0;
			width: 25%;
		}

		img {
			border-radius: var(--radius-md);
			width: 100%;
			height: 100%;
			-o-object-fit: cover;
			   object-fit: cover;
		}
	}

	& .search-content {
		h3 { font-weight: 500; }
		.post-category { margin-block-start: 1.125rem; }
		.prose { color: var(--twilight); }
	}

	+ .search-result-excerpt { margin-block-start: var(--space-xl); }
	+ div:has(.show-all-link) { margin-block-start: 1rem; }
	+ h2 { margin-block-start: 4.3125rem; }
}

.search-results-tabs {
	display: flex;
	flex-wrap: wrap;
	margin-inline: 0;
	padding: 0;

	font-weight: 700;
	font-size: 1.3125rem;
	list-style: none;
	text-transform: uppercase;

	@media (width >= 960px) {
		flex-wrap: nowrap;
	}

	& li {
		flex: 1;
	}

	& li.uk-active a {
		color: var(--gray);

		span { background-color: var(--gray); }

		@media (width >= 960px) {
			border-bottom: 3px solid var(--gray);
		}

	}

	& li a {
		display: flex;
		-moz-column-gap: var(--space-xs);
		     column-gap: var(--space-xs);
		justify-content: center;
		align-items: center;
		padding-inline: var(--space-xl);
		padding-block: 1rem;

		color: var(--salmon);
		@media (width >= 960px) {
			border-bottom: 1px solid var(--salmon);
		}
	}

	& li a span {
		display: inline-block;
		border-radius: 12px;
		background-color: var(--salmon);
		min-width: 2.75rem;
		height: 1.5rem;
		color: white;
		font-size: 0.875rem;
		text-align: center;
	}
}

/* =========================================================
	SOCIAL SHARING
========================================================= */

.social-sharing {
	padding-block-start: 3.75rem;
	padding-block-end: 13.4375rem;

	& .container {
		display: flex;
		-moz-column-gap: 4.6875rem;
		     column-gap: 4.6875rem;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	& h2 {
		display: inline-block;
		margin-inline-end: 20px;
		color: var(--gray);
		font-weight: normal;
		font-size: 1.25rem;
		letter-spacing: 1.5px;
		text-transform: uppercase;
	}

	& ul {
		display: flex;
		-moz-column-gap: 0.625rem;
		     column-gap: 0.625rem;

		& li:nth-child(2) {
			margin-inline-end: 2.1875rem;
		}

		& li img {
			width: var(--space-lg);
		}
	}
}

/* =========================================================
	STAT SQUARES COMPONENT
========================================================= */

.stat-squares {
	display: grid;
	gap: 2.5625rem;
	margin-inline: auto;
	padding-inline: 2.25rem;
	max-width: 108rem;

	& .square {
		padding: 0.6875rem;
		aspect-ratio: 1;
		width: 100%;

		&:first-child {
			background: linear-gradient(to bottom, var(--gold) 0%, #776F5D 80%);
			color: var(--gold);
		}

		&:nth-child(2) {
			background: linear-gradient(to bottom, #776F5D 0%, #5B7B77 80%);
			color: var(--gray)
		}

		&:nth-child(3) {
			background: linear-gradient(to bottom, #59847E 0%, var(--lake) 80%);
			color: var(--lake);
		}
	}

	.inner-square {
		--padding-inline: 1.5rem;
		display: grid;
		justify-content: center;
		align-items: center;
		container: squareContainer / inline-size;
		background-color: white;
		padding: var(--padding-inline);
		width: 100%;
		height: 100%;
	}

	.prose {
		font-size: 1.25rem;
		line-height: 1;
		text-align: center;

		p strong {
			font-weight: 600;
			font-size: 2.5rem;
			line-height: 1.3;
		}

		@container squareContainer (226px < width < 356px) {
			font-size: clamp(1.25rem, 6.45vi + 0.36rem, 2.5rem);
			p strong { font-size: clamp(2.5rem, 24.52vi + -2.12rem, 6rem); }
		}

		@container squareContainer (356px < width <= 545px) {
			font-size: clamp(2.5rem, 6.45vi + 1.61rem, 3.75rem);
			p strong { font-size: clamp(6rem, 10.32vi + 4.58rem, 7.625rem); }
		}
	}
}

@media (width >= 640px) {
	.stat-squares {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;

		.square {
			width: calc(33.33% - 41px);

			&:first-child { background: linear-gradient(to right, var(--gold) 0%, #776F5D 80%); }
			&:nth-child(2) { background: linear-gradient(to right, #776F5D 0%, #5B7B77 80%); }
			&:nth-child(3) { background: linear-gradient(to right, #59847E 0%, var(--lake) 80%); }
		}
	}
}

/* =========================================================
	STATE RESOURCES
	(i.e. Resources by State)
========================================================= */

.state-resources {
	margin-block-start: 2.5rem;

	@media (width >= 1530px) {
		max-width: 70% !important;
	}

	& h2 {
		font-weight: 500;
		font-size: 2.5rem;
		text-align: center;
	}

	& .prose {
		margin-block-start: 1.25rem;
		text-align: center;
	}

	& .states-grid {
		display: grid;
		row-gap: 3rem;
		margin-block-start: 3.5rem;

		@media (width >= 600px) {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--space-lg);
		}

		@media (width >= 992px) {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			-moz-column-gap: 4rem;
			     column-gap: 4rem;
		}
	}

	& .state .heading {
		display: grid;
		grid-template-columns: var(--space-2xl) auto;
		-moz-column-gap: 0.625rem;
		     column-gap: 0.625rem;
		justify-content: center;
		align-items: center;
		min-height: var(--space-2xl);

		& h3 {
			color: var(--salmon);
			font-weight: 500;
			font-size: 2.5rem;
		}

		& :is(img, svg) {
			max-height: var(--space-2xl);
		}
	}

	& .state ul {
		display: grid;
		row-gap: 1rem;
		font-size: var(--fs--1);
		text-align: center;
	}
}

/* =========================================================
	SUBCATEGORY SECTION
========================================================= */

.t-category .subcategory-section {
	margin-block-start: var(--space-2xl);
	background-color: var(--neutral-100);

	@media (width >= 1530px) {
		position: relative;
		z-index: -11;
	}

	&:has(.category-links) {
		padding-block-start: 0;
	}

	& .category-links {
		display: flex;
		-moz-column-gap: var(--space-lg);
		     column-gap: var(--space-lg);
		row-gap: 2.1875rem;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		a { max-width: -moz-fit-content; max-width: fit-content; }
		a.button { margin-inline-start: auto; }
	}

	& .category-card-grid {
		margin-block-start: 2.5rem;
		padding-inline: 0;
		max-width: 100%;
	}

	& .category-card-grid .card-post-preview {
		background-color: rgba(0, 0, 0, 0.05);
	}
}

/* =========================================================
	TEXT BLOCKS
========================================================= */

/* MARK: 50th text block
----------------------------------------------- */
.fiftieth-text-block {
	--heading-font-size: 2.375rem;
	--text-size: 1.5rem;
	--padding-block: 4.8125rem 5.25rem;

	padding-block: var(--padding-block);
	max-width: 62.5rem;

	h2 {
		font-weight: 400;
		font-size: var(--heading-font-size);
	}

	.prose :is(p, ul, li) {
		font-size: var(--text-size);
	}
}

@media (width >= 960px) {
	.fiftieth-text-block {
		--heading-font-size: var(--fs-6);
		--text-size: 2.125rem;
		--padding-block: 7.75rem 10.9375rem;
	}
}

/* MARK: Multi-column text
----------------------------------------------- */
.multi-column-text {
	--columns: 2;

	display: grid;
	gap: var(--space-md);

	@media (width >= 50rem) {
		grid-template-columns: repeat(var(--columns), 1fr);
	}
}

/* Variants */
.multi-column-text[data-variant="3up"] {
	--columns: 3;
}

/* =========================================================
	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%;
	}
}

/* =========================================================
	VIDEO SLIDER
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
.video-slider {
	background-color: var(--neutral-100);

	@media (width >= 650px) {
		position: relative;
		margin-inline: auto;
		border-radius: var(--radius-md);
		padding-inline: var(--space-xl);
		max-width: 61.25rem;
	}

	/* Full width for small */
	@media (width < 600px) {
		position: relative;
		right: 50%;
		left: 50%;
		margin-right: -50vw;
		margin-left: -50vw;
		width: 100vw;
		max-width: 100vw;
	}

	& h2 {
		padding: var(--space-md) 2.1875rem;
		color: var(--gray);
		font-weight: 200;
		font-size: var(--fs-2);
		letter-spacing: 0.3px;
		text-align: center;
		text-transform: uppercase;

		@media (width >= 650px) {
			padding-inline: 0;
			font-size: var(--fs-3);
			text-align: left;
		}
	}

	.video-container > iframe {
		aspect-ratio: 16 / 9;
		width: 100%;
		height: 100%;
		max-height: none; /* overrides previous wp styles */
	}

	.video-caption-max {
		@media (width < 650px) { display: none; }

		padding-block: 2.5rem;
	}
}


/* MARK: Mobile navigation
----------------------------------------------- */
.video-nav-min {
	@media (width >= 650px) { display: none; }
	position: relative;

	padding-block: var(--space-lg) var(--space-3xl);

	& .video-item {
		--inline-padding: var(--space-lg);
		transition: all 0.3s ease-in-out;
		background-color: transparent;
		padding: var(--space-xs) var(--inline-padding);
		width: 100%;
		color: var(--gray);
		font-size: var(--fs--3);
		line-height: 1.7;

		&:hover {
			cursor: pointer;
		}

		&.active {
			cursor: default;
			background-color: var(--lake);
			color: white;
		}
	}

	& .video-item :is(.video-thumbnail, .video-caption) { display: none; }

	& .video-item.active .video-caption {
		display: block;
		position: absolute;
		bottom: 0;
		inset-inline: 0;
		padding: 1.25rem var(--inline-padding);
		color: var(--gray);
	}
}


/* MARK: Desktop navigation
----------------------------------------------- */
.video-nav-max {
	@media (width < 650px) { display: none; }

	& .uk-slider-items { -moz-column-gap: 1rem; column-gap: 1rem; }

	& .video-item {
		width: 12.5rem;
		height: 8.875rem;

		&:hover { cursor: pointer; }

		& .video-title {
			position: absolute;
			bottom: 0;
			transition: max-height 0.5s ease-in-out;
			border-radius: 0 0 var(--radius-sm) var(--radius-sm);
			background-color: rgba(225, 225, 225, 0.9);
			padding: var(--space-2xs) 1rem var(--space-2xs);
			width: 100%;
			min-height: var(--space-lg);
			max-height: var(--space-lg);
			overflow: hidden !important;
			color: var(--gray);
			font-size: var(--fs-3);
			line-height: 1.4;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		&.active .video-title {
			background-color: var(--lake);
			color: white;
		}

		&:hover .video-title {
			max-height: 8.125rem;
			text-overflow: clip;
			white-space: normal;
		}
	}

	& a[uk-slider-item] {
		--arrow-inline-position: 10px;
		position: absolute;
		bottom: 9.1875rem;

		&.previous { left: var(--arrow-inline-position); }
		&.next { right: var(--arrow-inline-position); }

		& .triangle {
			clip-path: polygon(100% 0,0 50%,100% 100%);
			background-color: var(--lake);
			aspect-ratio: 1/2.5;
			height: 3.125rem;
		}

		&.next .triangle { rotate: 180deg; }
		&.uk-invisible .triangle { background-color: #888; }
	}
}

/* =========================================================
	CATEGORY LINKS
	Sit inside .page-header
========================================================= */

.page-header .category-links {
	display: flex;
	-moz-column-gap: var(--space-xs);
	     column-gap: var(--space-xs);
	row-gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-inline: 0;
	margin-block: var(--space-xl) 0;
	padding: 0;
	list-style: none;

	& li a {
		display: block;
		transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
		border: 2px solid var(--twilight);
		border-radius: var(--radius-md);
		background-color: var(--lake-lightest);
		padding: var(--space-xs) var(--space-sm);
		color: var(--twilight);
		font-weight: 500;
		font-size: var(--fs--1);
		line-height: 1;
		text-transform: uppercase;
	}

	& li a:hover,
	& li.active a {
		background-color: var(--twilight);
		color: white;
	}
}

/* =========================================================
	PAGINATION
========================================================= */

.t-category .pagination {
	display: flex;
	-moz-column-gap: 1.5rem;
	     column-gap: 1.5rem;
	justify-content: center;
	margin-block: 2.5rem;

	& a {
		transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
		border: 2px solid var(--twilight);
		border-radius: var(--radius-md);
		background-color: var(--lake-light-opaque);
		padding: var(--space-sm);
		color: var(--twilight);
		font-weight: 700;
		font-size: var(--fs--2);
		line-height: 1;
		text-transform: uppercase;

		&:hover {
			background-color: var(--twilight);
			color: white;
		}
	}
}

/* =========================================================
	CEO MESSAGE
	Used on 50th anniversary page (/50)
========================================================= */

.ceo-message-block[data-page="50th-anniversary"] {
	--padding-block: 3.5rem;
	--prose-radius: var(--radius-md) var(--radius-md) 0 0;
	--image-width: 100%;
	--image-height: auto;
	--image-radius: 0 0 var(--radius-sm) var(--radius-sm);

	@media (width >= 640px) {
		--prose-radius: var(--radius-md) 0 0 var(--radius-md);
		--image-width: auto;
		--image-height: 100%;
		--image-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	}

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

	position: relative;
	background-image: url("/assets/images/bg-50th-ceo-message.svg");
	background-position: bottom right;
	background-repeat: no-repeat;
	background-color: var(--gold-lightest);
	padding-block: var(--padding-block);

	& .center {
		display: grid;
		max-width: 1004px;

		@media (width >= 640px) {
			grid-template-columns: 71% auto;
			align-items: center;
		}
	}

	& .prose {
		border-radius: var(--prose-radius);
		background-color: white;
		padding: 2.5rem;
		font-size: var(--fs--2);

		@media (width >= 960px) {
			padding: 4.5rem;
			height: 100%;
		}

		& h2 {
			font-weight: 400;
			font-size: clamp(2rem, 1.82vi + 1.55rem, 3rem);
			line-height: 1.3;
			font-family: var(--font-serif);
		}

		& img.signature {
			margin-block-start: 2rem;
		}
	}

	& .image {
		width: var(--image-width);
		height: var(--image-height);

		& img {
			border-radius: var(--image-radius);
			width: 100%;

			@media (width >= 640px) {
				height: 100%;
				-o-object-fit: cover;
				   object-fit: cover;
			}
		}
	}
}

/* =========================================================
	ON JACK - 50th ANNIVERSARY COMPONENT
========================================================= */

.fiftieth-on-jack {
	--section-heading-font-size: clamp(2rem, 1.67vi + 1.67rem, 3rem);
	background-image: url("/assets/images/bg-50th-jack-texture.png");
	background-position: right top;
	background-size: cover;
	background-repeat: repeat-y;

	background-color: rgba(#5E5E5F, 0.4);
	padding-block-start: clamp(5.31rem, 8.85vi + 3.54rem, 10.63rem);

	& h2, h3 {
		color: white;
		font-weight: 400;
		font-size: var(--section-heading-font-size);
		font-family: var(--font-serif);
		text-align: center;
	}

	& .jack-intro.prose {
		color: white;
		font-size: var(--fs--2);
		line-height: 1.5;
		text-align: center;

		:not(h2) {
			margin-inline: auto;
			max-width: 39.75rem;
		}

		& h2 + * { margin-block-start: 2.1875rem; }
	}

	.scroller-block {
		--flow-space: clamp(3.75rem, 6.25vi + 2.5rem, 7.5rem);
	}

	.jack-video-block {
		--flow-space: clamp(4.06rem, 6.77vi + 2.71rem, 8.13rem);

		.video-embed {
			--flow-space: clamp(2.75rem, 4.27vi + 1.9rem, 5.31rem);
		}
	}
}

/* =========================================================
	CODE BLOCK
========================================================= */

.code-block {
	margin-block: 2rem;
}

/* =========================================================
	HOME PAGE
	Styles & blocks unique to the home page
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
[class^="home-"] {
	--home-section-z-index: var(--z-content);
	--home-bg-color: transparent;
	--home-text-color: var(--twilight);
	--home-section-padding-block: 3.75rem;
	--home-section-text-align: center;
	--home-section-card-group-margin-top: 4.375rem;

	@media (width >= 820px) {
		--home-section-text-align: left;
		--home-section-card-group-margin-top: var(--space-xl);
	}

	z-index: var(--home-section-z-index);
	background-color: var(--home-bg-color);
	padding-block: var(--home-section-padding-block);

	& header {
		display: grid;
		align-items: center;
		text-align: var(--home-section-text-align);

		@media (width >= 820px) {
			grid-template-columns: 65% auto;
			-moz-column-gap: 2rem;
			     column-gap: 2rem;
		}

		h2 {
			color: white;
			font-weight: 700;
			font-size: var(--fs-6);
			line-height: 1;
			text-transform: uppercase;
		}

		& > div:last-child {
			@media (width >= 820px) {
				padding-block-start: 0.5rem;
				text-align: right;
			}
		}
	}

	& header + .card-group {
		margin-block-start: var(--home-section-card-group-margin-top);
	}
}

/* MARK: About the trust
----------------------------------------------- */
.home-about {
	--home-bg-color: var(--neutral-100);
	--home-section-padding-block: 0;
	--about-position-top: calc( var(--space-md) * -1);
	--about-prose-text-align: center;
	--about-prose-icon-text-align: center;
	--about-prose-icon-text-mbs: 0.625rem;
	--about-prose-h2-size: var(--fs-5);
	--about-icon-width: 3.375rem;

	background-image: url("/assets/images/home_upper_shadow.png");
	background-size: auto 70px;
	background-repeat: repeat-x;

	@media (width >= 768px) {
		--about-prose-icon-text-align: left;
		--about-prose-icon-text-mbs: 0;
	}

	@media (width >= 960px) {
		--about-position-top: -2.5rem;
		--about-prose-text-align: right;
		--about-prose-h2-size: var(--fs-6);
	}

	@media (width >= 1170px) {
		--about-prose-h2-size: 3.375rem;
	}

	& .center {
		display: grid;
		position: relative;
		top: var(--about-position-top);
		row-gap: var(--space-xl);
		z-index: var(--z-content);
		border-radius: var(--radius-md);
		background-color: white;
		padding: 3.75rem var(--space-md) var(--space-2xl);
		font-weight: 100;
		font-size: var(--fs-1);
		line-height: 1.4;

		@media (width >= 960px) {
			--about-position-top: -40px;

			grid-template-columns: repeat(2, 1fr);
			-moz-column-gap: 90px;
			     column-gap: 90px;
			padding: 80px calc((var(--max-width) - var(--max-body-width)) / 2);
		}
	}

	& .center > .prose {
		text-align: var(--about-prose-text-align);

		@media (width >= 768px) and (width < 960px) {
			margin-inline: auto;
			max-width: 524px;
		}

		& h2 {
			color: var(--gold);
			font-weight: normal;
			font-size: var(--about-prose-h2-size);
			font-family: var(--font-serif);
			letter-spacing: -1.25px;
		}

		> *:not(h2, h3) {
			--prose-flow-space: var(--space-lg);
		}
	}

	& .center .icon-text-blocks {
		display: grid;
		row-gap: var(--space-xl);

		@media (width >= 768px) and (width < 960px) {
			margin-inline: auto;
			max-width: 32.75rem;
		}
	}

	& .center .icon-text-blocks > div {
		display: grid;
		font-size: var(--fs--1);
		line-height: 1.3;

		@media (width >= 768px) {
			grid-template-columns: 60px auto;
			-moz-column-gap: 16px;
			     column-gap: 16px;
		}
	}

	& .center .icon-text-blocks > div figure img,
	& .center .icon-text-blocks > div figure svg {
		margin-inline: auto;
		width: var(--about-icon-width);
		height: auto;
	}

	& .center .icon-text-blocks > div .prose {
		margin-block-start: var(--about-prose-icon-text-mbs);
		text-align: var(--about-prose-icon-text-align);
	}

	& .center .icon-text-blocks > div .prose h3 {
		color: var(--gold);
		font-weight: normal;
		font-size: var(--fs-4);
		font-family: var(--font-serif);
		letter-spacing: -0.75px;
	}

	& .center .icon-text-blocks > div .prose *:not(h2, h3, h4) {
		--prose-flow-space: 0.625rem;
	}
}


/* MARK: Areas of focus
----------------------------------------------- */
.home-focus-areas {
	--home-bg-color: var(--neutral-100);
	--heading-size: var(--fs-5);
	--list-sectors-col-gap: 2.5rem;
	--list-sectors-icon-size: 5rem;

	@media (width >= 960px) {
		--list-sectors-icon-size: 6.25rem;
	}

	padding: 3.75rem var(--space-lg);

	& > .prose {
		text-align: center;

		:is(h2, h3, h4) {
			margin: 0 auto var(--space-xs);
         /* color: var(--gray); */
         color: var(--twilight);
			font-weight: 400;
			font-size: var(--heading-size);
			font-family: var(--font-serif);
         letter-spacing: -1.5px;

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

	& > .container {
		max-width: 100%;
	}

	& ul.list-sectors {
		display: flex;
		-moz-column-gap: var(--list-sectors-col-gap);
		     column-gap: var(--list-sectors-col-gap);
		row-gap: 2.5rem;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: var(--space-xl);
		margin-inline: auto;
		padding: 0;
		list-style: none;
		text-align: center;

		& li {
			margin: 0;
			width: calc(50% - var(--col-gap));

			@media (width >= 768px) {
				width: calc(33.3333% - var(--list-sectors-col-gap));
			}

			@media (width >= 1060px) {
				width: calc(20% - var(--list-sectors-col-gap));
			}

			&::before { display: none; }
		}

		& li p {
			margin: 0 auto;
			font-weight: 400;
			line-height: 1.2;
			letter-spacing: -0.15px;
		}

		& li :is(svg, img) {
			margin-inline: auto;
			margin-block-end: 1rem;
			width: var(--list-sectors-icon-size);
			height: var(--list-sectors-icon-size);
		}
	}
}


/* MARK: Grant stories
----------------------------------------------- */
.home-grant-stories {
	--home-bg-color: var(--gold);

	& .card-group {
		--card-group-col-gap: var(--space-lg);
		--card-group-row-gap: var(--space-md);

		@media (width >= 820px) {
			grid-template-columns: repeat(3, 1fr);
			-moz-column-gap: var(--card-group-col-gap);
			     column-gap: var(--card-group-col-gap);
		}
	}

	& .card {
		--card-picture-height: 21.0625rem;
		--card-body-bg: var(--gold-lighter); /* was #e3decf */
		--card-title-color: var(--gray);
	}
}


/* MARK: What's new
----------------------------------------------- */
.home-whats-new {
	--home-bg-color: var(--twilight);

	& .card-group {
		@media (width >= 820px) {
			grid-template-columns: repeat(2, 1fr);
			-moz-column-gap: var(--card-group-col-gap);
			     column-gap: var(--card-group-col-gap);
		}
	}

	& .card-group .card-group__subgroup {
		--card-group-max-width: 100%;

		@media (width >= 820px) {
			display: flex;
			-moz-column-gap: var(--card-group-col-gap);
			     column-gap: var(--card-group-col-gap);
			flex-wrap: wrap;

			& .card:not(:first-child) {
				flex-basis: calc(50% - (var(--card-group-col-gap) / 2) );
			}
		}

		& .card {
			--card-body-bg: color-mix(in srgb, var(--twilight), black 20%);
			--card-title-color: white;

			@media (width < 820px) {
				--card-min-height: 26.25rem;
				--card-picture-height: 12.5rem;
			}
		}
	}

	& .card[data-variant="news-featured-lg"] {
		--card-min-height: 44rem;
		--card-picture-height: 100%;
		--card-picture-radius: var(--radius-md);
		--card-body-bg: var(--twilight-light);
		--card-body-min-height: 13.75rem;
		--card-title-color: white;
		--card-title-weight: 700;

		align-items: stretch;

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

		& .card__body {
			position: absolute;
			bottom: 0;
			inset-inline: 0;
			background-color: rgba(4 38 46 / .7);
		}
	}
}


/* MARK: Nonprofit resources
----------------------------------------------- */
.home-resources {
	--home-bg-color: var(--lake);

	& .card-group {
		@media (width >= 820px) {
			grid-template-columns: repeat(4, 1fr);
			-moz-column-gap: var(--card-group-col-gap);
			     column-gap: var(--card-group-col-gap);
		}
	}

	& .card {
		--card-body-bg: rgba(11 63 74 / 0.7);
		--card-title-color: white;
	}
}


/* MARK: Pathways & Explore grants
----------------------------------------------- */
.section-callout[data-variant="home-pathways"] {
	--section-bg: #eee9dc;
	--section-h2-color: var(--gold);
}

.section-callout[data-variant="home-explore-grants"] {
	--section-icon-link-color: var(--lake);
}

/* =========================================================
	STANDARD PAGE
	Styles & blocks unique to the standard page template
========================================================= */

.t-standardPage :is(.page-header, .breadcrumbs) + article.center {
	p + p { --flow-space: 1.1875rem; }
	li + li { margin-block-start: 1rem; }
	:is(h3, h4) { font-weight: 500; }
	h3 { font-size: 1.5rem; }
	h4 { font-size: 1.25rem; }
	p + :is(h2, h3, h4) { --flow-space: 1.5rem; }
	figure.video-embed + :is(h2, h3, h4) { --flow-space: 3.3125rem; }
	p + figure.video-embed { --flow-space: 1.25rem !important; }
}

.t-standardPage.t-pubs-reports .breadcrumbs + article.container p + p,
.t-standardPage.t-pubs-reports .breadcrumbs + article.container :is(h2, h3, h4) {
	/* client asked that this match the old wp site */
	--flow-space: 20px;
}

.t-standardPage.t-pubs-reports .breadcrumbs + article.container .manual-50-50 + span[id] + :is(h2, h3, h4),
.t-standardPage.t-pubs-reports .breadcrumbs + article.container .manual-50-50 + :is(h2, h3, h4, p, ul, ol) {
	--flow-space: 100px;
}

.t-standardPage main.main + footer {
	margin-block-start: 5.625rem;
}

/* =========================================================
	AWARD ADMIN TEMPLATE/PAGE/ENTRY TYPE
	/grant-application-process/grant-administration-reporting-resources

	This goes desktop first, then down to mobile due to
	how the design was created by design team.
========================================================= */

/* MARK: Containing block
----------------------------------------------- */
.award-admin {
	--section-gap: 1.875rem;
	--section-main-col-width: 71%;
	--section-column-pis: calc( (var(--max-width) - var(--max-body-width)) / 2 );

	@media (width < 1024px) {
		--section-column-pis: 0;
	}

	display: grid;
	position: relative;
	grid-template-columns: var(--section-main-col-width) auto;
	gap: var(--section-gap);
	margin-block: 5.125rem 8.75rem;

	@media (width < 1024px) {
		display: block;
		position: unset;
	}

	&.center {
		--container-max-width: var(--max-width);
	}

	& .award-admin__column {
		padding-inline-start: var(--section-column-pis);
	}

	& [id] {
		scroll-margin-block-start: 4.75rem;
	}
}


/* MARK: Welcome block
----------------------------------------------- */
.award-admin .welcome h2 {
	font-weight: 400;
	font-size: var(--fs-7);
	line-height: 1;
	letter-spacing: -3%;
}


/* MARK: Portal info block
----------------------------------------------- */
.award-admin .portal-info {
	container: portalInfo / inline-size;
	margin-block-start: 5.625rem;
	border-left: 10px solid var(--gray);
	border-radius: var(--radius-md);
	background-color: var(--neutral-100);
	padding: 2.5rem 3.125rem;

	& header {
		display: flex;
		-moz-column-gap: 0.5rem;
		     column-gap: 0.5rem;
		row-gap: 1.1875rem;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		@container portalInfo (width < 700px) {
			justify-content: center;
			text-align: center;
		}

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

		h2 {
			font-size: var(--fs-4);
		}
	}

	& details.collapsible-block {

		+ details.collapsible-block {
			margin-block-start: 3.125rem;
		}

		> summary {
			color: var(--twilight);

			&:hover svg {
				color: var(--twilight);
			}
		}

		> summary svg {
			color: var(--gray);
		}

		> summary + * {
			margin-block-start: 1.25rem;
		}
	}
}


/* MARK: Journey blocks
	(containers)
----------------------------------------------- */
.award-admin :is(.portal-info, .journey-block) + .journey-block {
	margin-block-start: 8.75rem;
}

.award-admin .journey-block {
	/* overrides legacy styles */
	/* padding: 0; */
	/* min-height: 0; */

	h2 {
		border-radius: var(--radius-md);
		background-color: var(--twilight);
		padding: 0.625rem;
		color: white;
		font-size: var(--fs-3);
		line-height: 1.15;
		letter-spacing: -2.5%;
		text-align: center;
	}

	> * + * {
		margin-block-start: 2.5rem;
	}
}


/* MARK: Highlighted sub-block
----------------------------------------------- */
.journey-highlighted-subBlock {
	border-left: 10px solid var(--gray);
	border-radius: var(--radius-md);
	background-color: var(--neutral-100);
	padding: 2.5rem 3.125rem;

	h3 {
		display: flex;
		align-items: baseline;
		gap: 1.25rem;
		font-weight: 400;
		font-size: var(--fs-3);
		line-height: 1;
		letter-spacing: -2.5%;

		& span {
			border-radius: var(--radius-md);
			background-color: rgba(2, 94, 110, 0.2);
			padding: 0.3125rem 0.625rem 0.625rem;
			font-weight: 700;
			font-size: var(--fs-4);
			line-height: 1.15;
			letter-spacing: -2.5%;
		}
	}

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

	.prose h4 {
		font-weight: 700;
		font-size: var(--fs-2);
		line-height: 1;
		letter-spacing: -2.5%;
	}
}


/* MARK: Text sub-block
----------------------------------------------- */
.journey-text-subBlock {
	> *:not(h4) + * {
		margin-block-start: 2.5rem;
	}

	& a:not(:has(strong)) {
		border-color: inherit;

		&:hover {
			border-color: transparent !important;
		}
	}

	& h3 {
		font-weight: 400;
		font-size: var(--fs-2);
		line-height: 1;
		letter-spacing: -2.5%;
	}

	& h4 {
		color: var(--gray);
		font-weight: 700;
		font-size: var(--fs-1);
		line-height: 1;
		letter-spacing: -2.5%;
	}

	& table {
		margin-block: 0;
		border: 0;
		border: 1px solid var(--table-border-dark);
		border-radius: var(--radius-sm);
		border-collapse: separate;
		border-spacing: 0;
	}

	/* Adjust table borders to show just 1px */
	& table :is(td, th) {
		border: 1px solid var(--table-border-dark);
		border-width: 0 1px 1px 0;

		&:last-child { border-right: 0; }
	}

	& table :is(tbody, thead, tfoot):last-child tr:last-child :is(td, th) { border-bottom: 0; }

	/* Table head background color */
	& table thead th {
		background-color: var(--table-header-bg-light);
	}

	/* Set border radius at for corner cells only */
	& table :is(thead, tbody):first-child tr:first-child :is(td, th):first-child {
		border-top-left-radius: var(--radius-sm);
	}

	& table :is(thead, tbody):first-child tr:first-child :is(td, th):last-child {
		border-top-right-radius: var(--radius-sm);
	}

	& table :is(tbody, tfoot):last-child tr:last-child td:first-child {
		border-bottom-left-radius: var(--radius-sm);
	}

	& table :is(tbody, tfoot):last-child tr:last-child td:last-child {
		border-bottom-right-radius: var(--radius-sm);
	}
}


/* MARK: Image block
----------------------------------------------- */
@media (width >= 1024px) {
	.journey-block picture img {
		margin-inline: auto;

		&[data-size="75"] { width: 75%; }
		&[data-size="50"] { width: 50%; }
		&[data-size="25"] { width: 25%; }
	}
}


/* MARK: Journey collapsible sub-block
----------------------------------------------- */
.journey-collapsible-subBlock {
	--bg: var(--lake-lightest);
	--border-color: var(--lake);

	margin-block-start: 2.5rem;
	border: 1px solid var(--border-color);
	border-width: 0 0 0 8px;
	border-radius: var(--radius-md);
	background-color: var(--bg);
	padding: 2.5rem;

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

	&[data-variant="dark-gray"] {
		--bg: var(--neutral-100);
		--border-color: var(--gray);
	}

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

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

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

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

	> summary:hover svg {
		color: var(--neutral-900);
	}

	> summary svg {
		color: var(--border-color);
	}

	> div.flow {
		--flow-space: 1.25rem;
		margin-block-start: 1.25rem;
	}

	> div.flow .callout {
		margin-block: var(--flow-space) 0;
	}

	& h5 {
		color: var(--neutral-900);
		font-weight: 700;
		font-size: var(--fs-1);
		line-height: 1;
		letter-spacing: -2.5%;
	}

	* + h5 {
		margin-block-start: 2rem;
	}
}


/* MARK: Collapsible blocks/sub-blocks shared styles
----------------------------------------------- */
.award-admin .portal-info details.collapsible-block,
.journey-collapsible-subBlock {
	> summary {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		font-weight: 400;
		font-size: var(--fs-2);
		line-height: 1;
		letter-spacing: -2.5%;
		list-style: none;

		& svg {
			flex-shrink: 0;
			transition: rotate var(--transition-base-fast), color var(--transition-base-fast);
			width: 1.5rem;
		}
	}

	&[open] > summary svg {
		rotate: 180deg;
	}
}


/* MARK: Page navigation
----------------------------------------------- */
.award-admin nav {
	--border-width: 0 0 0 8px;
	--distance-right: 10px;
	position: sticky;
	top: 100px;
	align-self: start;
	border: 8px solid var(--gray);
	border-width: var(--border-width);
	border-radius: var(--radius-md);
	background-color: var(--neutral-100);
	padding: 1.25rem 2.5rem;

	@media (width < 1024px) {
		--border-width: 8px 0 0 0;
		position: fixed;
		top: unset;
		right: var(--distance-right);
		bottom: 0;
		z-index: calc(var(--z-navigation) + 1);
		box-shadow: 0px 15px 15px 0px #00000040;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
		padding: 1rem;
		width: 9.75rem;
		max-height: calc(100dvh - 6rem);
		overflow-y: auto;
	}

	@media (width < 480px) {
		--distance-right: 20px;
	}

	& h2 {
		color: var(--neutral-900);
		font-weight: 700;
		font-size: var(--fs-1);
		line-height: 1;
		letter-spacing: -2.5%;

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

	& button {
		display: none;
		color: var(--neutral-900);
		font-weight: 700;
		font-size: var(--fs--1);
		line-height: 1;
		letter-spacing: -2.5%;
		text-align: left;

		@media (width < 1024px) {
			display: block;
		}
	}

	& ul {
		@media (width < 1024px) {
			font-size: var(--fs--1);
		}

		&[x-cloak] {
			@media (width < 1024px) {
				display: none;
			}
		}
	}

	& ul > li + li,
	& ul > li a + ul {
		margin-block-start: 1.25rem;

		@media (width < 1024px) {
			margin-block-start: 0.75rem;
		}
	}

	& li {
		@media (width < 1024px) {
			line-height: 1.2;
		}
	}

	& li a {
		color: var(--twilight);
	}
}

/* =========================================================
	SECTOR PAGES/TEMPLATES
========================================================= */

/* MARK: Base styles
----------------------------------------------- */
.sector-content {
	padding-block-start: var(--space-2xl);
	padding-block-end: var(--space-3xl);

	h2 + p.large {
		margin-block-start: var(--space-lg);
	}

	p.large {
		font-size: var(--fs-1);
		letter-spacing: -0.15px;
	}
}


/* MARK: Width variants
----------------------------------------------- */
.sector-content[data-content-width="is-narrow"] > *:not(section, div, figure) {
	margin-inline: auto;
	max-width: var(--max-body-width-narrow);
}


/* MARK: Stories section
----------------------------------------------- */
.t-sectorPage .stories {
	--flow-space: var(--space-3xl);

	padding-block: 0;

	& h2 {
		color: var(--lake);
		font-weight: 400;
		font-size: var(--fs-7);
		letter-spacing: -1.5px;
		text-align: center;
	}

	& p.instructional {
		margin-block-start: var(--space-lg);
		font-style: italic;
		font-size: var(--fs-3);
		text-align: center;
	}

	& .stories-grid {
		display: grid;
		gap: var(--space-md);
		margin-block-start: var(--space-xl);

		@media (width >= 768px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	+ :is(h2, h3, h4) {
		--flow-space: var(--space-3xl);
	}
}


/* MARK: Blockquote section
----------------------------------------------- */
.sector-content .quote {
	margin-block-start: var(--space-2xl);

	& figcaption {
		text-align: right;
	}
}

/* =========================================================
	CATEGORY PAGE
========================================================= */

/* MARK: News category grid
----------------------------------------------- */
.news-category-grid {
	--grid-gap: 1.875rem;

	& .card {
		--card-body-bg: var(--gray-lightest);
		--card-title-color: var(--salmon);
		--card-title-size: var(--fs-0);
		--card-title-font: var(--font-sans);
	}
}

.t-category .news-category-grid {
	margin-block-start: var(--space-2xl);
}


/* MARK: Resource category
----------------------------------------------- */
.resource-category {
	margin-block-start: var(--space-2xl);
	background-color: var(--neutral-100);
	padding-block: 0 var(--space-lg);

	+ .resource-category {
		margin-block-start: var(--space-xl);
	}

	& .resource-category__links {
		display: grid;
		gap: var(--space-xs);

		@media (width >= 768px) {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
		}

		& h2 {
			border-radius: 0 0 var(--radius-sm) var(--radius-sm);
			background-color: var(--gray);
			padding: var(--space-xs) 1rem;
			width: -moz-fit-content;
			width: fit-content;
			color: white;
			font-weight: 400;
			font-size: var(--fs-2);
			letter-spacing: normal;
			text-transform: uppercase;
		}

		& h2 a {
			color: currentColor;
		}
	}

	div:has([data-variant="featured-news"]) .card {
		--flow-space: var(--space-md);
		/* --card-picture-height: auto; */
		/* --card-picture-radius: var(--radius-md) 0 0 var(--radius-md); */
		/* --card-title-size: var(--fs-2); */
		/* --card-title-weight: 400; */
		/* --card-body-bg: transparent; */
		/* --card-body-size: var(--fs--1); */
		/* --card-body-border-width: 0; */



		/* & picture {
			contain: size;
		} */
	}

	& .grid {
		--flow-space: var(--space-2xl);
		--grid-min-col-size: 100%;

		@media (width >= 768px) {
			--grid-min-col-size: 200px;
		}

		& .card {
			--card-body-bg: var(--neutral-200);
			--card-title-color: var(--salmon);
			--card-title-size: var(--fs-0);
			--card-title-font: var(--font-sans);
		}
	}
}

/* =========================================================
	GRANTS AWARDED PAGE STYLES
========================================================= */

/* MARK: Custom properties
----------------------------------------------- */
.t-grantsAwarded {
	--column-gutter: 0.25rem;
	--container-inline-padding: 36px;
	--container-max-width: var(--max-body-width);
	@media (width >= 640px) { --container-inline-padding: 15px; }
	@media (width >= 992px) { --column-gutter: 0.5rem; }
}


/* MARK: Intro text
----------------------------------------------- */
.t-grantsAwarded .container {
	padding-inline: var(--container-inline-padding);
	max-width: var(--container-max-width);
}


/* MARK: Pre-header bas
	Search and totals statement
----------------------------------------------- */
.t-grantsAwarded .grants-pre-header {
	display: grid;
	gap: 1.5rem;
	margin-block-start: var(--space-2xl);
	padding-inline: var(--container-inline-padding);
	max-width: var(--container-max-width);

	@media (width >= 640px) {
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
		gap: 2.5rem;
	}

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


/* MARK: Pre-header totals
----------------------------------------------- */
.t-grantsAwarded .grants-pre-header .totals {
	order: 1;
	color: #ccc;

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

	& strong {
		color: #838282;
		font-weight: 500;
	}
}

/* MARK: Pre-header search
----------------------------------------------- */
.t-grantsAwarded .grants-pre-header .search {
	@media (width >= 640px) { order: 1; }
	display: flex;
	order: 2;
	border: 1px solid var(--salmon);
	border-radius: var(--radius-md);
	width: 100%;

	& input {
		outline: none; /* bad for a11y */
		border: 0;
		border-radius: var(--radius-md) 0 0 var(--radius-md);
		background-color: white;
		padding: var(--space-xs) var(--space-sm);
		width: 100%;
		font-size: var(--fs--3);

		&::-moz-placeholder { color: var(--neutral-400); }

		&::placeholder { color: var(--neutral-400); }
	}

	& button {
		border-radius: 0 7px 7px 0;
		background-color: var(--salmon);
		padding-inline: var(--space-sm);
	}
}


/* MARK: Slider container
----------------------------------------------- */
.t-grantsAwarded .slider-container {
	width: 100%;
}


/* MARK: Filter controls
----------------------------------------------- */
.t-grantsAwarded .filter-controls {
	display: none;
	-moz-column-gap: var(--column-gutter);
	     column-gap: var(--column-gutter);
	flex-direction: column;
	margin: var(--space-md) 0;
	background-color: var(--neutral-100);
	padding-inline: 1rem;

	@media (width > 992px) {
		display: grid;
		grid-template-columns: 20% 20% 52%;
		justify-content: space-between;
		background-color: white;
	}

	&.show-controls {
		display: flex;
	}

	& .filters-col2 {
		display: flex;
		flex-direction: column;

		@media (width > 992px) {
			margin-block-end: 3px;
		}

		& button.reset-button {
			order: 2;
			margin-inline-start: auto;
			margin-inline-end: 0.625rem;
		}

		& .pseudo-label {
			@media (width < 992px) {
				display: none;
			}

			order: 1;
			margin-block-start: var(--space-2xs);
			color: var(--netural-200);
			font-weight: 700;
			font-size: var(--fs--3);
			text-align: right;
			text-transform: uppercase;
		}
	}
}


/* MARK: Filters container
----------------------------------------------- */
.t-grantsAwarded .filters-container {
	display: grid;
	grid-template-columns: 28% 20% 22% 25%;
	-moz-column-gap: var(--column-gutter);
	     column-gap: var(--column-gutter);
	justify-content: space-between;
	align-items: self-end;
	background-color: white;

	@media (width <= 992px) {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		margin-right: auto;
		margin-left: auto;
		border: 0;
		background-color: #f5f5f5;
		padding: var(--space-lg) 1rem 1.25rem 1rem;
		max-width: 31.25rem;
		color: var(--salmon);
		font-size: var(--space--1);
		line-height: 1;
		text-transform: uppercase;
	}

	& .filter {
		display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      gap: var(--space-xs);
      border-radius: var(--radius-sm);
      background-color: var(--salmon);
		padding: 0.375rem var(--space-sm);
		width: 100%;
      min-width: 100px;
      color: white;
		font-weight: 400;
		font-size: var(--fs--2);

		@media (width >= 992px) {
			flex-direction: row;
			cursor: pointer;
			border-bottom: 4px solid #fff;
			padding: var(--space-2xs) var(--space-sm);
			font-weight: 900;
			font-size: var(--fs--3);
		}
	}

	@media (width >= 992px) {
		& .filter:hover .control {
			gap: var(--space-xs);

			& .sectors {
				display: grid;
				grid-template-columns: 1fr 1fr;
			}

			&.control {
				display: flex;
				flex-direction: column;
			}

			&.slider {
				display: block;
			}
		}
	}


	& .filter .control {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: var(--space-xs);
		z-index: 99;
		margin-left: 0;
		border-radius: var(--radius-sm);
		background-color: var(--salmon);
		padding-left: 0;
		width: 100%;
		color: white;
		font-weight: 900;
		list-style-type: none;
		text-indent: 0;

		@media (width >= 992px) {
			display: none;
			position: absolute;
			top: 1.8125rem;
			left: 0;
			padding: 0.625rem;

			&.projects {
				width: -moz-fit-content;
				width: fit-content;
			}

			&.sectors {
				left: -5.625rem;
				width: 21.25rem;
			}

			&.states > * {
				flex-basis: 100%;
			}
		}

		&.slider {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			gap: var(--space-xs);
			padding: 1.25rem;
			width: 100%;

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

		.input-group {
			display:flex;
			flex-direction: row;
			align-items: center;
			gap: var(--space-2xs);

			@media (width <= 992px) {
				display: block;
				padding: var(--space-2xs) 1rem;
				font-weight: 400;
				font-size: var(--fs--2);
			}
		}
	}
}


/* MARK: Mobile filter container
----------------------------------------------- */
.mobile-filter-container {
	margin: 1.25rem 0;
	background-color: #f5f5f5;

	& .filter-content {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-right: auto;
		margin-left: auto;
		padding: var(--space-lg) 1rem 1.25rem 1rem;
		max-width: 31.25rem;
	}

	& .filter {
		border-radius: var(--radius-md);
		background-color: var(--salmon);
		padding: 0.375rem var(--space-sm);
		color: white;
		font-size: var(--fs--2);

		& .label {
			text-align: center;
		}
	}
}


/* MARK: Close filters
----------------------------------------------- */
.t-grantsAwarded .close-filters {
	@media (width >= 992px) {
		display: none;
	}

	display: flex;
}


/* MARK: Mobile filters
----------------------------------------------- */
.t-grantsAwarded .mobile-filters {
	@media (width > 992px) {
		display: none;
	}

	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	border: 0;
	background-color: white;
	padding: 0;
	color: var(--salmon);
	font-size: var(--fs--1);
	line-height: 1;
	text-transform: uppercase;

	& span {
		display: block;
		margin-block-start: -0.625rem;
		font-weight: 400;
		font-size: 3.5rem;
	}
}


/* MARK: Data "table"
----------------------------------------------- */
.t-grantsAwarded .grant-table {
	margin-block-end: var(--space-lg);
	font-size: 0.9375rem;
	line-height: 1.2;

	@media (width >= 900px) { font-size: var(--fs--2); }

	.grant-row {
		position: relative;
		padding-inline: 1rem;
		padding-block: 0.625rem;

		@media (width >= 900) { padding-block: 1rem; }
		@media (width >= 1024px) { padding-block: 1.5rem; }
	}

	.grant-row .grant-info > * {
		padding-inline: 1rem;
	}
}


/* MARK: Table headers
----------------------------------------------- */
#grant-headers {
	color: var(--salmon);
	font-weight: 900;

	& .grant-row { border-bottom: 2px solid #e1e1e2; }

	.grant-row :is(.grantee, .grant-name) {
		display: none;

		@media (width >= 900px) {
			&.sort-by {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				gap: var(--space-2xs);

				&:hover {
					cursor: pointer;
					text-decoration: underline;
				}
			}
		}
	}

	.grant-row :is(.project-type, .sector, .grant-location, .grant-year, .grant-amount) {
		display: none;

		&.sort-by {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			gap: var(--space-2xs);

			&:hover {
				cursor: pointer;
				text-decoration: underline;
			}
		}
	}
}


/* MARK: Table body rows
----------------------------------------------- */
#grants {
	& .grant-row {
		color: var(--gray-light);
		&:nth-child(odd) { background-color: var(--neutral-100); }
		&:nth-child(even) { background-color: var(--netural-200); }
	}

	& .grantee {
		p:first-child {
			font-weight: 700;
			font-size: 0.9375rem;

			@media (width >= 900px) { font-size: var(--fs--2); }
		}

		& p:last-child {
			margin-block-start: 0.125rem;
			font-weight: 400;
			font-size: var(--fs--3);
		}

		&::after {
			position: absolute;
			top: 0.125rem;
			right: 0.625rem;
			content: "+";
			color: var(--salmon);
			font-size: var(--fs--1);

			@media (width >= 900px) {
				display: none;
			}
		}
	}

	/* hide until clicked */
	.details {
		display: none;
	}
}

/* Small (< 900px) */
@media (width < 900px) {
	.t-grantsAwarded .container.grant-table-container {
		margin-block-start: 1.25rem;
		padding-inline: 0;
	}

	.t-grantsAwarded .grant-row-inner {
		display: flex;
		-moz-column-gap: var(--column-gutter);
		     column-gap: var(--column-gutter);
		row-gap: var(--space-xs);
		flex-wrap: wrap;
		justify-content: space-between;

		:is(.grantee, .grant-name) {
			width: 100%;
		}

		.project-type { width: calc(26% - var(--column-gutter) ); }
		.sector { width: calc(23% - var(--column-gutter) ); }
		.grant-location { width: calc(18% - var(--column-gutter) ); }
		.grant-year { width: calc(15% - var(--column-gutter) ); }
		.grant-amount { width: calc(18% - var(--column-gutter) ); }
	}
}

/* Large (>= 900px) */
@media (width >= 900px) {
	.t-grantsAwarded .container.grant-table-container {
		margin-block-start: 2.5rem;
	}

	.t-grantsAwarded .grant-table .grant-row-inner {
		display: grid;
		grid-template-columns: 25% 22% 15% 10% 12% 12%;
		-moz-column-gap: var(--column-gutter);
		     column-gap: var(--column-gutter);
		row-gap: var(--space-sm);
		flex-wrap: wrap;
		justify-content: space-between;

		& .details {
			/* 11/25/25 - no details to show; this whole table needs to be redesigned and this won't work with css grid */
			display: none;
			/* width: 100%; */
		}
	}

	.t-grantsAwarded .grant-table .grant-text {
		padding-top: 1rem;

		&.show {
			display: block;
			padding-bottom: 1rem;
		}

		&.hide {
			display: none;
		}
	}
}

/* =========================================================
	POSTS ENTRY STYLES
========================================================= */

.t-posts article.container {
	padding-block: var(--space-2xl);
	max-width: var(--max-body-width-narrow);

	& h2 {
		font-weight: 400;
		font-size: var(--fs-3);
	}

	& h3 {
		font-size: var(--fs-2);
	}
}

/* =========================================================
	POTENTIAL MENTOR RESEARCH PROGRAMS
========================================================= */

/* MARK: Search field
----------------------------------------------- */
label.programs-search {
	display: flex;
	margin-block-start: var(--space-lg);
	border: 1px solid var(--salmon);
	border-radius: var(--radius-md);
	width: 100%;
	max-width: 31.25rem;

	& input {
		/* bad for a11y */
		outline: none;
		border: 0;
		border-radius: var(--radius-md) 0 0 var(--radius-md);
		padding: var(--space-xs) var(--space-sm);
		width: 100%;
		font-size: var(--fs--3);
	}

	& button {
		border-radius: 0 var(--radius-md) var(--radius-md) 0;
		background-color: var(--salmon);
		padding-inline: var(--space-sm);
	}
}


/* MARK: Table
----------------------------------------------- */
.programs-table {
	--column-padding: var(--space-sm);
	--row-padding: var(--space-sm);

	margin-block-start: 1.25rem;
	max-width: 100%;
	font-size: var(--fs--2);

	@media (width >= 1024px) {
		--column-padding: 1.25rem;
		--row-padding: 1.5rem;

		font-size: var(--fs-0);
	}
}

.programs-table .row {
	display: flex;
	flex-wrap: wrap;

	&.is-header {
		border-bottom: 2px solid var(--neutral-200);
		padding-block-end: 0.125rem;
		color: var(--salmon);
		font-weight: 700;
	}

	&.is-data:nth-child(even) {
		background-color: var(--neutral-100);
	}

	&.is-data:nth-child(odd) {
		background-color: var(--neutral-200);
	}
}

.programs-table .row.is-header .col {
	--row-padding: 0;
}

.programs-table .row .col {
	padding: var(--row-padding) var(--column-padding);

	&.state {
		width: 30%;
		font-weight: 700;
	}

	&.org {
		width: 70%;
	}

	&.contact {
		display: none;
	}

	&.full-data {
		display: none;
		padding-block-start: 0;
		width: 100%;
	}

	@media (width >= 640px) {
		&.org {
			width: 35%;
		}

		&.contact {
			display: block;
			width: 35%;
		}
	}
}

/* =========================================================
	VISION & CALL NETWORK PAGE
========================================================= */

.t-vision-call .accordion-table {
	--columns: repeat(2, 1fr);
	--column-gap: var(--space-md);
	--row-inline-padding: var(--space-md);

	& ul {
		margin-block: 0;
		border-bottom: 2px solid #e1e1e2;
	}

	/* Header */
	& ul.header li {
		display: grid;
		grid-template-columns: var(--columns);
		-moz-column-gap: var(--column-gap);
		     column-gap: var(--column-gap);
		padding-inline: var(--row-inline-padding);
		padding-block: 0.125rem;
		color: var(--salmon);

		p {
			color: inherit;
		}
	}

	/* Items */
	ul[uk-accordion] {
		li {
			margin-block: 0 !important;
			padding-inline: var(--row-inline-padding);
			padding-block: 1.5rem;

			&:nth-child(odd) {
				background-color: var(--neutral-100);
			}

			&:nth-child(even) {
				background-color: var(--neutral-200);
			}
		}

		li > a {
			display: grid;
			grid-template-columns: var(--columns);
			-moz-column-gap: var(--column-gap);
			     column-gap: var(--column-gap);
			color: var(--gray);
		}

		li div.inner {
			padding-block: 1.5rem;
		}

		li div.inner .prose > * + * {
			--prose-flow-space: 0;
		}
	}
}

/* =========================================================
	STYLES FOR /1billion PAGE
	Taken directly from previous dev
========================================================= */

.one_billion {
	figure {
	  margin: 0 auto;
	  max-width: 1000px;
	}

	img {
	  border-radius: 0 !important;
	}
 }

 p.share_graphics.bottom {
	display: block;
	margin: 3em auto !important;
	max-width: 1000px;
	text-align: center !important;
 }

 .share_graphics {
	display: inline-block;
	letter-spacing: -0.25px;
	text-align: left;
 }

 .share_graphics img {
	display: inline-block;
	margin: 0.75em 0.35em;
	width: 50px;
	height: 50px;
 }

 .sm_feeds img {
	display: inline-block;
	margin: 0.75em 0.35em;
	width: 50px;
	height: 50px;
 }

 .share_graphics img:hover {
	filter: brightness(1.2);
 }

 .share_graphics.small img {
	display: inline-block;
	margin: 0 0.25em;
	width: 30px;
	height: 30px;
 }

 .share_graphics.small a {
	white-space: nowrap;
 }

 p.share_graphics {
	margin-top: 5px;
 }

 .share_graphics.social_media {
	border-radius: 16px;
	background-color: #fff;
	padding: 0.65em 0.75em 0.35em;
 }

@media layer(vendors) {
:root{--table-shadow-color: rgba(0, 0, 0, 0.25);--table-shadow-size: 2em}.table-wrapper{position:relative}.table-wrapper .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.table-wrapper.has-shadow-left::before,.table-wrapper.has-shadow-right::after{position:absolute;content:"";display:block;border-radius:0;transition:opacity .2s;pointer-events:none;top:0;bottom:0;z-index:1;width:var(--table-shadow-size);border-top-left-radius:0;border-bottom-left-radius:0;background:radial-gradient(at 0 50%, var(--table-shadow-color), transparent 70%),linear-gradient(90deg, var(--table-shadow-color), transparent 50%);background-size:var(--table-shadow-size) 100%;background-repeat:no-repeat}.table-wrapper.has-shadow-right::after{right:0;transform:rotate(180deg)}.table-wrapper.has-shadow-left::before{left:0}
}
@media layer(vendors) {
/* =========================================================
	NOUI SLIDER
========================================================= */

/* Basic noUiSlider styling */
.noUi-target, .noUi-target * {
  box-sizing: border-box;
}

.noUi-horizontal {
  box-shadow: inset 0 0.2em 0.5em rgba(0,0,0,0.15); /* Inner shadow for a 3D effect */
  border-radius: 0.3em; /* Rounded edges for the track */
  background: #ddd; /* Track color */
  height: 0.4em; /* Adjust height for a thicker slider track */
}

/* Handle (slider thumb) styling */
.noUi-handle {
  cursor: pointer; /* Pointer cursor on hover */
  box-shadow: 0 0.3em 0.5em rgba(0,0,0,0.3); /* Shadow for the handle */
  border: 1px solid #aaa; /* Border to match jQuery UI */
  border-radius: 50%; /* Round handle */
  background: #f5f5f5; /* Handle color */
  width: 20px !important; /* Size of the handle */
  height: 20px !important;
}

.noUi-handle:before, .noUi-handle:after {
  display: none; /* Remove default decorations */
}

/* Styling for the active state (when dragging) */
.noUi-handle:active {
  border-color: #888; /* Darker border when active */
  background: #e5e5e5; /* Slightly darker background when active */
}

/* Styling for the range highlight (if applicable) */
.noUi-connect {
  background: #428bca; /* Blue color to match jQuery UI slider */
}

/* Hover effect on the handle */
.noUi-handle:hover {
  background: #e5e5e5;
}

/* Adding focus outline for accessibility */
.noUi-handle:focus {
  outline: 2px solid #007bff; /* Focus outline color */
}

}
/* =========================================================
	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
----------------------------------------------- */
/* @import "utilities/aspect-ratio.css"; */


/* MARK: Blocks
----------------------------------------------- */
/* @import "blocks/details-accordions.css"; */
/* @import "blocks/skip-link.css"; */


/* MARK: Pages
	This doesn't strictly follow CUBE CSS but
	extends it as it's necessary for this site
	due to some page-specific styles
----------------------------------------------- */


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

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


/*# sourceMappingURL=app.css.map*/