/* Generated from src/global by scripts/build-theme.mjs — do not edit. */
/* Generated from tokens/typography.json (MD check) by scripts/build-theme.mjs — do not edit. */
/* Single SM→LG ramp would give: hero 54.5px (Figma MD 60px), h1 46.4px (Figma MD 54px), h2-large 44.7px (Figma MD 48px), h2-large-serif 44.7px (Figma MD 48px), h2 32.9px (Figma MD 36px), h2-serif 32.3px (Figma MD 38px), stat 50.4px (Figma MD 42px), stat-small 41.2px (Figma MD 36px) */
:root:root {
		--wp--preset--font-size--hero: clamp(32px, 8.421px + 7.3684vw, 60px);
		--wp--preset--font-size--h-1: clamp(30px, 9.789px + 6.3158vw, 54px);
		--wp--preset--font-size--h-2-large: clamp(30px, 14.842px + 4.7368vw, 48px);
		--wp--preset--font-size--h-2-large-serif: clamp(30px, 14.842px + 4.7368vw, 48px);
		--wp--preset--font-size--h-2: clamp(26px, 17.579px + 2.6316vw, 36px);
		--wp--preset--font-size--h-2-serif: clamp(28px, 19.579px + 2.6316vw, 38px);
		--wp--preset--font-size--stat: clamp(40px, 38.316px + 0.5263vw, 42px);
		--wp--preset--font-size--stat-small: 36px;
}
@media (min-width: 700px) {
	:root:root {
			--wp--preset--font-size--hero: clamp(60px, 26.4px + 4.8vw, 84px);
			--wp--preset--font-size--h-1: clamp(54px, 34.4px + 2.8vw, 68px);
			--wp--preset--font-size--h-2-large: clamp(48px, 25.6px + 3.2vw, 64px);
			--wp--preset--font-size--h-2-large-serif: clamp(48px, 25.6px + 3.2vw, 64px);
			--wp--preset--font-size--h-2: clamp(36px, 27.6px + 1.2vw, 42px);
			--wp--preset--font-size--h-2-serif: 38px;
			--wp--preset--font-size--stat: clamp(42px, 11.2px + 4.4vw, 64px);
			--wp--preset--font-size--stat-small: clamp(36px, 19.2px + 2.4vw, 48px);
	}
}

/* Generated from tokens/typography.json by scripts/build-theme.mjs — do not edit. */
.has-hero-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 400;
	line-height: 0.82;
}

.has-hero-serif-font-size {
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-weight: 700;
	line-height: 0.82;
}

.has-h-1-font-size {
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-weight: 700;
	line-height: 1.2;
}

.has-h-1-news-font-size {
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-weight: 700;
	line-height: 1.2;
}

.has-h-2-large-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 400;
	line-height: 1.05;
}

.has-h-2-large-serif-font-size {
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-weight: 700;
	line-height: 1.05;
}

.has-h-2-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 400;
	line-height: 1.1;
}

.has-h-2-serif-font-size {
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-weight: 700;
	line-height: 1.05;
}

.has-h-3-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 500;
	line-height: 1.2;
}

.has-h-4-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	line-height: 1.2;
}

.has-h-5-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	line-height: 1.2;
}

.has-h-6-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	line-height: 1.2;
}

.has-intro-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 400;
	line-height: 1.4;
}

.has-body-xl-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 500;
	line-height: 1.5;
}

.has-body-large-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 500;
	line-height: 1.7;
}

.has-body-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 500;
	line-height: 1.7;
}

.has-caption-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 500;
	line-height: 1.7;
}

.has-subtext-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.has-subtext-small-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 600;
	line-height: 1.43;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.has-stat-font-size {
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-weight: 700;
	line-height: 1;
}

.has-stat-small-font-size {
	font-family: var(--wp--preset--font-family--libre-baskerville);
	font-weight: 700;
	line-height: 1.04;
}

.has-quote-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 400;
	line-height: 1.2;
	font-style: italic;
}

.has-quote-small-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 400;
	line-height: 1.5;
	font-style: italic;
}

.has-cta-font-size {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

/*
 * Back to top — Figma: Back to Top 23889:47533, Focus States 1740:656.
 * Fixed bottom-right once the reader has scrolled a screen. Dark purple circle, yellow ring
 * (3px on hover), "TOP" label. It straddles backgrounds, so its focus ring is drawn inside.
 */

.acc-back-to-top {
	position: fixed;
	right: var(--wp--custom--gutter);
	bottom: 40px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--white);
	font: inherit;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--wp--custom--transition), visibility var(--wp--custom--transition);
}

.acc-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.acc-back-to-top::before {
	content: "";
	width: 49px;
	height: 49px;
	border-radius: 50%;
	background: var(--wp--preset--color--dark-purple);
	box-shadow: inset 0 0 0 var(--wp--custom--border--default) var(--wp--preset--color--yellow);
	transition: box-shadow var(--wp--custom--transition);
}

.acc-back-to-top::after {
	content: "";
	position: absolute;
	top: 16px;
	left: 50%;
	width: 16px;
	height: 18px;
	margin-left: -8px;
	background: currentcolor;
	mask: url(../icons/arrow.svg) center / contain no-repeat;
	transform: rotate(-90deg);
}

.acc-back-to-top:hover::before {
	box-shadow: inset 0 0 0 var(--wp--custom--border--hover) var(--wp--preset--color--yellow);
}

.acc-back-to-top span {
	padding: 3px 4px;
	border-radius: 2px;
	background: var(--wp--preset--color--dark-purple);
	font-size: var(--wp--preset--font-size--subtext-small);
	font-weight: 600;
	line-height: 15px;
}

.acc-back-to-top:focus-visible {
	outline-offset: var(--wp--custom--focus--inset-offset);
}

/*
 * Base element styles and background context.
 *
 * Interactive accents depend on the background they sit on (Figma: Hover States 1740:616,
 * Focus States 1740:656). Light backgrounds use orange accents and a black focus ring;
 * dark backgrounds use yellow accents and a white focus ring. Components read the
 * --acc-* custom properties below instead of hard-coding either palette.
 */

:root,
.has-white-background-color,
.has-light-grey-background-color,
.has-yellow-background-color,
.has-lime-background-color,
.wp-block-cover.is-light {
	--acc-accent: var(--wp--preset--color--orange);
	--acc-focus: var(--wp--preset--color--black);
	--acc-fg: var(--wp--preset--color--black);
	--acc-fg-muted: var(--wp--preset--color--dark-grey);
	--acc-field-bg: transparent;
	--acc-tint: var(--wp--preset--color--white);
	--acc-marker: var(--wp--preset--color--purple);
}

.has-purple-background-color,
.has-dark-purple-background-color,
.has-black-background-color,
.has-dark-grey-background-color,
.has-purple-gradient-background,
.wp-block-cover:not(.is-light),
.is-style-dark {
	--acc-accent: var(--wp--preset--color--yellow);
	--acc-focus: var(--wp--preset--color--white);
	--acc-fg: var(--wp--preset--color--white);
	--acc-fg-muted: var(--wp--preset--color--white);
	--acc-field-bg: var(--wp--custom--color--white-05);
	--acc-tint: var(--wp--custom--color--white-10);
	--acc-marker: var(--wp--preset--color--yellow);
	color: var(--acc-fg);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
}

/* In-text link: 1px accent underline grows to 3px. */
:where(p, li, td, dd, figcaption, .wp-block-table) a:where(:not(.wp-element-button)) {
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-color: var(--acc-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-thickness var(--wp--custom--transition);
}

:where(p, li, td, dd, figcaption, .wp-block-table) a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 3px;
}

/* Focus: 1px ring, 2px offset, colored for the background. */
:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--acc-focus);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Elements that straddle two backgrounds draw the ring inside themselves. */
.acc-focus-inset:focus-visible {
	outline-offset: var(--wp--custom--focus--inset-offset);
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/*
 * Shared controls: round arrow buttons (tables, carousels, galleries) and the "Top" button.
 * Figma: Table 1842:5071 (Arrows), Hover States 1740:616.
 * 49px circle on LG/MD, 40px on SM. Yellow 1.5px ring grows to 3px on hover.
 */

.acc-arrow {
	--acc-arrow-size: clamp(40px, 36.727px + 1.0227vw, 49px);
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--acc-arrow-size);
	height: var(--acc-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 var(--wp--custom--border--default) var(--wp--preset--color--yellow);
	cursor: pointer;
	transition: box-shadow var(--wp--custom--transition), opacity var(--wp--custom--transition);
}

.acc-arrow:hover {
	box-shadow: inset 0 0 0 var(--wp--custom--border--hover) var(--wp--preset--color--yellow);
}

.acc-arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.acc-arrow::before {
	content: "";
	width: 8px;
	height: 13px;
	background: currentcolor;
	mask: url(../icons/chevron.svg) center / contain no-repeat;
}

.acc-arrow--prev::before {
	transform: scaleX(-1);
}

.acc-arrow--up::before {
	transform: rotate(-90deg);
}

.acc-arrow--down::before {
	transform: rotate(90deg);
}

/*
 * Department sites (Department page / Department home templates). Migrated department
 * content is mostly running text — headings, paragraphs, lists, tables — so post content
 * uses a reading rhythm instead of the 80/60/40px section rhythm. Full-width or wide
 * sections inside it (patterns) still get section spacing.
 */
main > .acc-dept-nav.alignfull {
	margin-block-start: 0;
}

/* Beats the flush rule for back-to-back full-width bands: the bar is a band, the content isn't. */
main > .acc-dept-nav.alignfull + .acc-dept-content.alignfull {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-post-content.acc-dept-content > :not(style, script) + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-post-content.acc-dept-content > :not(style, script) + :is(h2, h3, h4, .alignwide, .alignfull) {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wp-block-post-content.acc-dept-content > :is(h2, h3, h4) + * {
	margin-block-start: 16px;
}

.wp-block-post-content.acc-dept-content > :is(.alignwide, .alignfull) + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wp-block-post-content.acc-dept-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

.acc-dept-content > .wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* A short statement set apart (the department mission). */
.wp-block-group.acc-statement {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--light-grey);
	font-size: var(--wp--preset--font-size--body-large);
}

.acc-statement > * {
	margin-block: 0;
}

.acc-statement > * + * {
	margin-block-start: 16px;
}

/*
 * Form fields — Figma: Components / Form Elements 305:1017, Hover States 1740:616.
 * Applies to plain HTML form controls, so form plugins (Gravity Forms, WPForms, core's
 * form blocks) pick it up. Labels are bold. Text fields have a 1.5px accent bottom border
 * (textareas top and bottom) that grows to 3px on hover; on dark backgrounds fields get a
 * 5% white fill and yellow borders. Checkboxes and radios are 14px with an accent stroke.
 * Submit buttons look like the primary CTA.
 */

:where(form) label,
:where(form) legend {
	font-weight: 700;
	line-height: 1.7;
}

:where(form) :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="file"], [type="range"]), select, textarea):not(.wp-block-search__input) {
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	padding: 10px 16px;
	border: 0;
	border-radius: 0;
	background-color: var(--acc-field-bg);
	color: var(--acc-fg);
	font: inherit;
	box-shadow: inset 0 calc(var(--wp--custom--border--default) * -1) 0 var(--acc-accent);
	transition: box-shadow var(--wp--custom--transition);
	appearance: none;
}

:where(form) textarea {
	min-height: 170px;
	box-shadow:
		inset 0 calc(var(--wp--custom--border--default) * -1) 0 var(--acc-accent),
		inset 0 var(--wp--custom--border--default) 0 var(--acc-accent) !important;
}

:where(form) :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), select):not(.wp-block-search__input):hover {
	box-shadow: inset 0 calc(var(--wp--custom--border--hover) * -1) 0 var(--acc-accent);
}

:where(form) textarea:hover {
	box-shadow:
		inset 0 calc(var(--wp--custom--border--hover) * -1) 0 var(--acc-accent),
		inset 0 var(--wp--custom--border--hover) 0 var(--acc-accent) !important;
}

:where(form) :is(input, select, textarea)::placeholder {
	color: var(--acc-fg-muted);
	opacity: 1;
}

:where(form) select {
	padding-right: 48px;
	border-radius: 10px 10px 0 0;
	background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%), linear-gradient(135deg, currentcolor 50%, transparent 50%);
	background-position: calc(100% - 26px) 50%, calc(100% - 19px) 50%;
	background-size: 7px 7px;
	background-repeat: no-repeat;
}

/* Checkboxes and radios. */
:where(form) :is(input[type="checkbox"], input[type="radio"]) {
	display: inline-grid;
	place-content: center;
	width: 14px;
	height: 14px;
	margin: 0 10px 0 0;
	border: 0;
	border-radius: 2px;
	background: transparent;
	vertical-align: -1px;
	box-shadow: inset 0 0 0 var(--wp--custom--border--default) var(--acc-accent);
	cursor: pointer;
	transition: box-shadow var(--wp--custom--transition);
	appearance: none;
}

:where(form) input[type="radio"] {
	border-radius: 50%;
}

:where(form) :is(input[type="checkbox"], input[type="radio"]):hover,
:where(form) label:hover > :is(input[type="checkbox"], input[type="radio"]) {
	box-shadow: inset 0 0 0 var(--wp--custom--border--hover) var(--acc-accent);
}

:where(form) input[type="checkbox"]:checked {
	background: var(--acc-accent);
	box-shadow: none;
}

:where(form) input[type="checkbox"]:checked::before {
	content: "";
	width: 8px;
	height: 5px;
	margin-top: -2px;
	border-bottom: 2px solid var(--wp--preset--color--white);
	border-left: 2px solid var(--wp--preset--color--white);
	transform: rotate(-45deg);
}

:where(form) input[type="radio"]:checked {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--dark-grey);
}

:where(form) input[type="radio"]:checked::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--acc-accent);
}

:where(form) :is(input[type="checkbox"], input[type="radio"]):disabled {
	opacity: 0.5;
	cursor: default;
}

/* Submit = primary CTA. */
:where(form) :is(input[type="submit"], button[type="submit"]):not(.wp-block-search__button) {
	min-height: var(--wp--custom--control--height);
	padding: 0 30px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--cta);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: inset 0 0 0 0 var(--wp--preset--color--orange);
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

:where(form) :is(input[type="submit"], button[type="submit"]):not(.wp-block-search__button):hover {
	background: var(--acc-tint);
	color: var(--acc-fg);
	box-shadow: inset 0 0 0 var(--wp--custom--border--hover) var(--wp--preset--color--orange);
}

/*
 * Linked headings in link lists get the trailing orange arrow from the Link List spec
 * (Figma 15896:15508): on hover the arrow slides right (300ms). Yellow on dark backgrounds.
 */
.acc-links .wp-block-heading a {
	text-decoration: none;
}

.acc-links .wp-block-heading a::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.6em;
	margin-left: 0.3em;
	background: var(--acc-accent);
	mask: url(../icons/arrow.svg) center / contain no-repeat;
	transition: transform var(--wp--custom--transition);
}

.acc-links .wp-block-heading a:hover::after {
	transform: translateX(6px);
}

/* Program pieces shared by the program patterns: tag rows and linked program cards. */
.acc-tags {
	gap: 8px;
}

.wp-block-group.is-style-card.acc-program-row {
	padding: 20px 24px;
	gap: 12px;
}

.wp-block-group.is-style-card.acc-program-row > * {
	padding: 0 !important;
	margin: 0;
}

/* Full-width section bands: 80/60/40px top and bottom (LG/MD/SM). */
.wp-block-group.alignfull.acc-section {
	padding-block: var(--wp--preset--spacing--80);
}

/* Purple band behind the lower part of a section (carousels, tab news). */
.acc-purple-band {
	background: linear-gradient(to bottom, transparent var(--acc-band-start, 55%), var(--wp--preset--color--purple) var(--acc-band-start, 55%));
}

/*
 * Page rhythm: top-level sections in page content sit 80/60/40px apart (LG/MD/SM).
 * Back-to-back full-width bands (heroes, purple sections) carry their own padding and stay flush.
 */
:is(main, .wp-block-post-content) > :not(style, script) + * {
	margin-block-start: var(--wp--preset--spacing--80);
}

:is(main, .wp-block-post-content) > .alignfull + .alignfull,
:is(main, .wp-block-post-content) > .alignfull:has(+ .alignfull) + .alignfull {
	margin-block-start: 0;
}

:is(main, .wp-block-post-content) > .alignfull:last-child {
	margin-block-end: 0;
}