/* Fluid layouts, device insets and offline/install access. */
html {
	scroll-padding-top: calc(var(--nav-height) + 18px);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
#main,
.nav-shell,
footer {
	min-width: 0;
}
:where(
	.section,
	.page-header,
	.projects-hero,
	.cta-section,
	.premium-footer,
	.donation-section,
	.atlas
) {
	max-width: 100%;
}
:where(
		.intro,
		.program-grid,
		.story-grid,
		.value-grid,
		.welcome-editorial-grid,
		.welcome-paths,
		.purpose-layout,
		.achievement-layout,
		.community-layout,
		.care-layout,
		.contact-section,
		.faq-section,
		.donation-section,
		.footer-directory,
		.projects-filter-main,
		.project-region-overview,
		.executive-grid,
		.portfolio-showcase,
		.purpose-workspace
	)
	> * {
	min-width: 0;
}
:where(h1, h2, h3, p, a, dd) {
	overflow-wrap: break-word;
}
:where(input, select, textarea) {
	max-width: 100%;
	min-width: 0;
}
:where(button, .button) {
	touch-action: manipulation;
}
:where(dialog) {
	max-width: calc(100% - 24px);
	max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	overscroll-behavior: contain;
}
:where(.report-table-scroll) {
	max-width: 100%;
	overflow: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
}
:where(.page-header, .section, .donation-section, .projects-hero, .premium-footer) {
	scroll-margin-top: calc(var(--nav-height) + 18px);
}
.nav.nav-signature {
	padding-left: max(20px, env(safe-area-inset-left), calc((100% - 1536px) / 2));
	padding-right: max(20px, env(safe-area-inset-right), calc((100% - 1536px) / 2));
}
#support-toggle {
	bottom: max(18px, env(safe-area-inset-bottom));
}
#back-to-top {
	bottom: max(18px, env(safe-area-inset-bottom));
	right: max(18px, env(safe-area-inset-right));
}
.pwa-access {
	padding: 32px max(var(--gutter), calc((100% - var(--content)) / 2));
	background: #e6efff;
	border-top: 1px solid #d3e3fc;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	color: #102d55;
}
.pwa-access-identity {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}
.pwa-access-identity img {
	width: 64px;
	height: 64px;
	border-radius: 15px;
	flex-shrink: 0;
	border: 1px solid #d3e3fc;
}
.pwa-access .eyebrow {
	font-size: 9px;
	letter-spacing: 0.1em;
	margin: 0 0 8px;
	display: block;
	color: #52667f;
}
.pwa-access h2 {
	font:
		400 clamp(24px, 2.3vw, 34px)/1.15 Georgia,
		serif;
	letter-spacing: -0.025em;
	margin: 0 0 9px;
}
.pwa-access p {
	font-size: 12px;
	line-height: 1.8;
	margin: 0;
	color: #52667f;
}
.pwa-access-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	justify-content: flex-end;
	max-width: 430px;
	min-width: 0;
}
#pwa-connection {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	white-space: nowrap;
	color: #52667f;
}
#pwa-connection:before {
	content: "";
	height: 6px;
	width: 6px;
	border-radius: 50%;
	background: #52667f;
}
#pwa-connection.is-offline:before {
	background: #ac7537;
}
.pwa-access button {
	min-height: 46px;
	border: 1px solid #bdd8ff;
	background: #102d55;
	color: #f0f5ff;
	padding: 12px 18px;
	border-radius: 8px;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.pwa-access button:disabled {
	background: #e6efff;
	color: #52667f;
}
.pwa-access button[hidden] {
	display: none;
}
.pwa-access #pwa-update {
	background: #f7f9fd;
	color: #23466c;
}
.pwa-access #pwa-status {
	width: 100%;
	text-align: right;
	font-size: 11px;
}
.pwa-access :is(a, button):focus-visible,
.pwa-install-dialog button:focus-visible {
	outline: 3px solid #52667f;
	outline-offset: 4px;
}
.pwa-install-dialog {
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(540px, calc(100% - 24px));
	padding: 44px clamp(22px, 5vw, 42px) 30px;
	border: 1px solid #bdd8ff;
	border-radius: 16px;
	background: #ffffff;
	color: #102d55;
	overflow: auto;
	box-shadow: 0 30px 90px #102d5540;
}
.pwa-install-dialog::backdrop {
	background: #0b2445cc;
	backdrop-filter: blur(6px);
}
.pwa-install-close {
	position: absolute;
	right: 12px;
	top: 12px;
	width: 44px;
	height: 44px;
	background: #e6efff;
	color: #23466c;
	border: 1px solid #d3e3fc;
	border-radius: 50%;
	font-size: 26px;
}
.pwa-install-dialog .eyebrow {
	font-size: 9px;
	max-width: calc(100% - 35px);
	display: block;
	color: #52667f;
	margin: 0 0 20px;
}
.pwa-install-dialog h2 {
	font:
		400 34px/1.2 Georgia,
		serif;
	letter-spacing: -0.025em;
	margin: 0 0 22px;
}
.pwa-install-dialog p,
.pwa-install-dialog li {
	font-size: 14px;
	line-height: 1.8;
	color: #52667f;
}
.pwa-install-dialog ul {
	padding-left: 20px;
	margin: 20px 0;
}
.pwa-install-dialog li {
	margin-bottom: 10px;
}
.pwa-install-dialog .pwa-cache-note {
	font-size: 11px;
	line-height: 1.7;
	background: #f0f5ff;
	border: 1px solid #d3e3fc;
	padding: 14px;
	border-radius: 6px;
	margin: 0;
}
@media (min-width: 1920px) {
	:root {
		--gutter: 5%;
	}
	.home-page .hero.hero-slider {
		max-height: 1100px;
	}
	.content-page .story-grid.all-projects-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 980px) {
	.pwa-access {
		align-items: flex-start;
		flex-direction: column;
		gap: 22px;
	}
	.pwa-access-actions {
		max-width: none;
		justify-content: flex-start;
	}
	.pwa-access #pwa-status {
		text-align: left;
	}
	.hero-slider .hero-actions {
		flex-wrap: wrap;
	}
}
@media (max-width: 680px) {
	.nav.nav-signature {
		padding-left: max(10px, env(safe-area-inset-left));
		padding-right: max(10px, env(safe-area-inset-right));
	}
	.pwa-access {
		padding: 27px max(20px, env(safe-area-inset-left));
	}
	.pwa-access-identity {
		gap: 14px;
	}
	.pwa-access-identity img {
		width: 52px;
		height: 52px;
		border-radius: 12px;
	}
	.pwa-access h2 {
		font-size: 27px;
	}
	.pwa-access p {
		font-size: 12px;
	}
	.pwa-access-actions {
		width: 100%;
	}
	.pwa-access-actions button {
		flex: 1;
		justify-content: center;
		gap: 12px;
	}
	.pwa-access #pwa-connection {
		width: 100%;
	}
	input:not([type="checkbox"]):not([type="radio"]),
	select,
	textarea {
		font-size: 16px !important;
	}
	.hero-slider .hero-footprint {
		max-width: 100%;
		width: 100%;
		gap: 12px;
	}
	.hero-slider .hero-footprint > div {
		min-width: 0;
	}
	.atlas-heading-meta {
		flex-wrap: wrap;
		justify-content: flex-start;
		max-width: 100%;
	}
	.report-download-control {
		max-width: 100%;
	}
	.project-detail-actions .button {
		white-space: normal;
		text-align: center;
	}
	.portfolio-reader-header {
		flex-wrap: wrap;
		gap: 12px;
	}
	.contact-channels a {
		overflow-wrap: anywhere;
	}
	.premium-footer {
		padding-bottom: max(28px, env(safe-area-inset-bottom));
	}
}
@media (max-width: 380px) {
	.nav-signature .brand-wordmark {
		font-size: 18px;
	}
	.nav-signature .brand-wordmark span {
		font-size: 20px;
	}
	.nav-signature .brand-caption small {
		font-size: 8px;
	}
	.nav-signature .nav-shell {
		padding-inline: 9px;
		gap: 8px;
	}
	.nav-signature .brand-premium {
		gap: 8px;
	}
	.hero-slider .hero-actions {
		grid-template-columns: 1fr;
		max-width: 100%;
	}
	.hero-slider .hero-actions .button {
		width: 100%;
		justify-content: center;
		white-space: normal;
	}
	.hero-slider .hero-footprint {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.home-page .hero-slider h1 {
		font-size: clamp(34px, 10.3vw, 42px);
	}
	.hero-carousel-controls {
		gap: 8px;
		flex-wrap: wrap;
	}
	.project-division-option strong {
		font-size: 11px;
	}
	.project-division-option small {
		font-size: 9px;
	}
	.project-region-overview {
		padding: 17px;
	}
	.projects-sort-controls {
		flex-wrap: wrap;
	}
	.executive-preview-label {
		white-space: normal;
	}
	.pwa-access h2 {
		font-size: 24px;
	}
	.footer-signoff {
		flex-wrap: wrap;
	}
}
@media (max-height: 500px) and (orientation: landscape) {
	:root {
		--nav-height: 78px;
	}
	.nav.nav-signature {
		padding-block: 6px;
	}
	.nav-signature .nav-shell {
		height: 66px;
	}
	.nav-signature .brand-wordmark {
		flex-direction: row;
		align-items: baseline;
	}
	.nav-signature .brand-caption {
		gap: 6px;
	}
	.nav-signature nav {
		max-height: calc(100dvh - 94px);
		padding-block: 14px;
	}
	.nav-signature nav > a {
		min-height: 48px;
		padding-block: 8px;
		font-size: 22px;
	}
	.nav-signature .nav-intro {
		padding-bottom: 9px;
		margin-bottom: 0;
	}
	.nav-signature .nav-mobile-note {
		padding-top: 10px;
	}
	.nav-signature .nav-actions {
		margin-top: 15px;
	}
	.home-page .hero.hero-slider {
		min-height: 600px;
	}
	.pwa-install-dialog {
		max-height: calc(100dvh - 16px);
	}
}
@media (display-mode: standalone) {
	body {
		padding-top: env(safe-area-inset-top);
	}
	.nav.nav-signature {
		top: env(safe-area-inset-top);
	}
	.premium-footer {
		padding-bottom: max(28px, env(safe-area-inset-bottom));
	}
}
@media print {
	.pwa-access,
	.pwa-install-dialog {
		display: none !important;
	}
}

#project-directory {
	scroll-margin-top: calc(var(--nav-height) + 18px);
}

/* Shared interaction polish across every route. */
body:has(dialog[open]) {
	overflow: hidden;
}
:where(button, summary) {
	min-height: 44px;
}
:where([id]) {
	scroll-margin-top: calc(var(--nav-height) + 18px);
}
:where(main[tabindex="-1"]):focus {
	outline: none;
}
:where(.project-detail-actions, .donation-review-actions, .portfolio-reader-header) {
	flex-wrap: wrap;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}
@media (forced-colors: active) {
	:focus-visible {
		outline: 3px solid Highlight !important;
		outline-offset: 3px !important;
	}
	:where(button, select, input, textarea, summary) {
		border-color: CanvasText;
	}
	.division-label {
		forced-color-adjust: auto;
	}
}