/* RPA Digital Headquarters: homepage, events, programs and leadership. Mobile first.
   Tokens from docs/HOMEPAGE-MOCKUPS.md; every text pair passes WCAG AA. */

:root {
	/* 0.15.0 (F8, D29-1): the same names and values as rpa-theme/style.css (the source of
	   truth; tests/theme-tokens.php), plus --rpa-shadow, so plugin pages work under any theme. */
	--rpa-red: #8f0a0e;
	--rpa-red-deep: #7a0103;
	--rpa-red-dark: #4a0002;
	--rpa-red-glow: #b0141b;
	--rpa-red-night: #1a0001;
	--rpa-red-text: #a41722;
	--rpa-red-on-dark: #ef4b4f;
	--rpa-gold: #c9a227;
	--rpa-gold-soft: #e7cf7a;
	--rpa-cream: #f7f1e6;
	--rpa-line-warm: #e4e0d8;
	--rpa-ink: #111111;
	--rpa-text: #393939;
	--rpa-text-on-dark: #f3e6e6;
	--rpa-text-on-tile: #f1dede;
	--rpa-muted: #5f5f5f;
	--rpa-muted-on-dark: #c9c9c9;
	--rpa-muted-on-night: #d9c9c9;
	--rpa-surface: #ffffff;
	--rpa-surface-alt: #f6f6f6;
	--rpa-line: #e2e2e2;
	--rpa-footer: #151515;
	--rpa-radius: 6px;
	--rpa-radius-btn: 2px;
	--rpa-shadow: 0 6px 20px rgba(17, 17, 17, 0.08);
	--rpa-shadow-card: 0 8px 24px rgba(74, 0, 2, 0.15);
	--rpa-shadow-lift: 0 24px 50px rgba(0, 0, 0, 0.55);
	--rpa-band-pad: clamp(48px, 4rem + 2vw, 72px);
	--rpa-band-crimson: radial-gradient(ellipse 70% 60% at 78% 45%, rgba(176, 20, 27, 0.85) 0, rgba(176, 20, 27, 0) 70%), linear-gradient(180deg, #7a0103 0, #4a0002 100%);
	--rpa-tile: linear-gradient(135deg, #8f0a0e, #4a0002);
	--rpa-font-heading: "Oswald", "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
	--rpa-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rpa-step--1: 0.875rem;
	--rpa-step-0: 1.0625rem;
	--rpa-step-1: 1.25rem;
	--rpa-step-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--rpa-step-3: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
	--rpa-step-4: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
	--rpa-step-5: clamp(2.75rem, 1.6rem + 5vw, 4.25rem);
	--rpa-content: 760px;
	--rpa-wide: 1200px;
	--rpa-gutter: 16px;
}

@media (min-width: 768px) {
	:root {
		--rpa-gutter: 28px;
	}
}

.rpahq-page {
	margin: 0;
	background: var(--rpa-surface);
	color: var(--rpa-text);
	font-family: var(--rpa-font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* 0.15.0 (integration, D29-2): the public wrapper adds no weight (:where), so the theme's band
   rules (:where(.rpa-band--x) h2, … a, … :focus-visible) win inside bands on plugin pages too. */
:where(.rpahq-public) :where(h1, h2, h3) {
	color: var(--rpa-ink);
	font-family: var(--rpa-font-heading);
	font-weight: 700;
	line-height: 1.15;
}

:where(.rpahq-public) a,
.rpahq-leaders a,
.rpahq-past-officers a {
	color: var(--rpa-red-text);
}

:where(.rpahq-public) :focus-visible,
.rpahq-leaders :focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-public img {
	max-width: 100%;
	height: auto;
}

.rpahq-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 16px;
	background: var(--rpa-ink);
	color: #fff;
}

.rpahq-skip-link:focus {
	left: 16px;
	top: 16px;
}

.rpahq-public:focus {
	outline: none;
}

.rpahq-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--rpa-gutter);
}

.rpahq-center {
	text-align: center;
}

.rpahq-muted {
	color: var(--rpa-muted);
}

.rpahq-small {
	font-size: 0.875rem;
}

.rpahq-eyebrow {
	margin: 0 0 6px;
	color: var(--rpa-red-text);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.rpahq-lead {
	font-size: 1.125rem;
	max-width: 46rem;
}

.rpahq-center .rpahq-lead {
	margin-left: auto;
	margin-right: auto;
}

.rpahq-rule::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: 12px auto 0;
	background: var(--rpa-red);
}

/* Buttons and links */

.rpahq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border: 2px solid var(--rpa-red);
	border-radius: 4px;
	background: var(--rpa-red);
	color: #fff !important;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.rpahq-btn:hover {
	background: var(--rpa-red-deep);
	border-color: var(--rpa-red-deep);
}

.rpahq-btn .rpahq-icon {
	width: 18px;
	height: 18px;
}

.rpahq-btn--ghost {
	background: transparent;
	border-color: #fff;
}

.rpahq-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}

.rpahq-btn--outline {
	background: transparent;
	color: var(--rpa-red-text) !important;
}

.rpahq-btn--outline:hover {
	background: var(--rpa-surface-alt);
	border-color: var(--rpa-red);
}

.rpahq-btn--dark {
	background: var(--rpa-footer);
	border-color: var(--rpa-footer);
}

.rpahq-btn--dark:hover {
	background: #000;
	border-color: #000;
}

.rpahq-btn--block {
	display: flex;
	width: 100%;
}

.rpahq-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--rpa-red-text);
}

.rpahq-link-arrow .rpahq-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

a.rpahq-link-arrow:hover .rpahq-icon,
.rpahq-pathway:hover .rpahq-link-arrow .rpahq-icon,
.rpahq-program-card:hover .rpahq-link-arrow .rpahq-icon {
	transform: translateX(3px);
}

.rpahq-icon {
	flex: none;
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

/* Sections */

.rpahq-section {
	padding: 48px 0;
}

@media (min-width: 900px) {
	.rpahq-section {
		padding: 72px 0;
	}
}

.rpahq-section--alt {
	background: var(--rpa-surface-alt);
}

.rpahq-section__title {
	margin: 0 0 16px;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* Hero: 0.15.0 (integration) removed the 0.14.0 .rpahq-hero rules; the Option B hero
   (.rpahq-hero-b) is in the 0.15.0 homepage block below. */

/* Purpose and values */

.rpahq-values {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.rpahq-values {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.rpahq-values {
		grid-template-columns: repeat(4, 1fr);
	}

	.rpahq-values__item + .rpahq-values__item {
		border-left: 1px solid var(--rpa-line);
	}
}

.rpahq-values__item {
	padding: 0 12px;
}

.rpahq-values__icon .rpahq-icon {
	width: 44px;
	height: 44px;
	color: var(--rpa-red);
}

.rpahq-values__title {
	margin: 12px 0 6px;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rpahq-values__item p {
	margin: 0;
	color: var(--rpa-muted);
	font-size: 0.9375rem;
}

/* Pathways */

.rpahq-pathways {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 800px) {
	.rpahq-pathways {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rpahq-pathway {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--rpa-surface);
	border: 1px solid var(--rpa-line);
	border-top: 4px solid var(--rpa-red);
	border-radius: var(--rpa-radius);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.rpahq-pathway:hover {
	box-shadow: var(--rpa-shadow);
	transform: translateY(-2px);
}

.rpahq-pathway__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.rpahq-pathway__body {
	padding: 20px 22px 24px;
}

.rpahq-pathway__title {
	margin: 0 0 8px;
	font-size: 1.35rem;
	text-transform: uppercase;
}

.rpahq-pathway__title a {
	color: var(--rpa-ink) !important;
	text-decoration: none;
}

.rpahq-pathway__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.rpahq-pathway p {
	margin: 0 0 12px;
}

/* Program cards */

.rpahq-program-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--rpa-surface);
	border-radius: 0;
	box-shadow: var(--rpa-shadow-card);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.rpahq-program-card:hover {
	box-shadow: var(--rpa-shadow);
	transform: translateY(-2px);
}

.rpahq-program-card__media {
	position: relative;
	min-height: 28px;
}

.rpahq-program-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

.rpahq-program-card__badge {
	position: absolute;
	left: 16px;
	bottom: -26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--rpa-red);
	color: #fff;
}

.rpahq-program-card__badge .rpahq-icon {
	width: 26px;
	height: 26px;
}

.rpahq-program-card__body {
	flex: 1;
	padding: 38px 20px 22px;
}

.rpahq-program-card__title {
	margin: 0 0 8px;
	font-size: 1.25rem;
	text-transform: uppercase;
	font-weight: 600;
}

.rpahq-program-card__title a {
	color: var(--rpa-ink) !important;
	text-decoration: none;
}

.rpahq-program-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.rpahq-program-card__body p {
	margin: 0 0 14px;
	font-size: 0.9375rem;
}

/* Events, news, contact columns */

.rpahq-columns {
	display: grid;
	gap: 40px;
}

@media (min-width: 1000px) {
	.rpahq-columns {
		grid-template-columns: 1.1fr 1fr 0.9fr;
		gap: 32px;
	}
}

.rpahq-column__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--rpa-line);
}

.rpahq-column__title {
	margin: 0;
	font-size: 1.35rem;
	text-transform: uppercase;
}

.rpahq-event-list,
.rpahq-news-list,
.rpahq-contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-event-list > li + li,
.rpahq-news-list > li + li {
	border-top: 1px solid var(--rpa-line);
}

.rpahq-event-row {
	display: grid;
	grid-template-columns: 58px 1fr;
	gap: 14px;
	align-items: start;
	padding: 14px 0;
}

.rpahq-event-row__image {
	display: none;
}

@media (min-width: 480px) {
	.rpahq-event-row {
		grid-template-columns: 58px 84px 1fr;
	}

	.rpahq-event-row__image {
		display: block;
		width: 84px;
		height: 64px;
		object-fit: cover;
		border-radius: 4px;
	}

	.rpahq-event-row:not(:has(.rpahq-event-row__image)) {
		grid-template-columns: 58px 1fr;
	}
}

.rpahq-event-list--wide .rpahq-event-row {
	padding: 18px 0;
}

@media (min-width: 700px) {
	.rpahq-event-list--wide .rpahq-event-row {
		grid-template-columns: 64px 160px 1fr;
	}

	.rpahq-event-list--wide .rpahq-event-row__image {
		width: 160px;
		height: 100px;
	}

	.rpahq-event-list--wide .rpahq-event-row:not(:has(.rpahq-event-row__image)) {
		grid-template-columns: 64px 1fr;
	}
}

.rpahq-date-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--rpa-line);
	border-radius: 4px;
	background: var(--rpa-surface);
	text-align: center;
}

.rpahq-date-badge__month {
	display: block;
	width: 100%;
	padding: 2px 0;
	background: var(--rpa-red);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.rpahq-date-badge__day {
	display: block;
	padding: 4px 0 6px;
	color: var(--rpa-ink);
	font-family: var(--rpa-font-heading);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
}

.rpahq-event-row__title {
	margin: 0 0 6px;
	font-family: var(--rpa-font-body) !important;
	font-size: 1rem;
	line-height: 1.3;
}

.rpahq-event-row__title a {
	color: var(--rpa-ink) !important;
	text-decoration: none;
}

.rpahq-event-row__title a:hover {
	color: var(--rpa-red-text) !important;
	text-decoration: underline;
}

.rpahq-event-row--cancelled .rpahq-event-row__title a {
	text-decoration: line-through;
}

.rpahq-meta {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

.rpahq-meta li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.rpahq-meta .rpahq-icon {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--rpa-red);
}

.rpahq-meta--stacked {
	gap: 12px;
	font-size: 1rem;
	color: var(--rpa-text);
}

.rpahq-meta--stacked .rpahq-icon {
	width: 20px;
	height: 20px;
}

.rpahq-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	font-family: var(--rpa-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.rpahq-badge--alert {
	background: #fdecec;
	color: var(--rpa-red-text);
}

.rpahq-news-item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	padding: 14px 0;
}

.rpahq-news-item:has(.rpahq-news-item__image) {
	grid-template-columns: 96px 1fr;
}

.rpahq-news-item__image {
	width: 96px;
	height: 72px;
	object-fit: cover;
	border-radius: 4px;
}

.rpahq-news-item__title {
	margin: 0 0 4px;
	font-family: var(--rpa-font-body) !important;
	font-size: 1rem;
	line-height: 1.3;
}

.rpahq-news-item__title a {
	color: var(--rpa-ink) !important;
	text-decoration: none;
}

.rpahq-news-item__title a:hover {
	color: var(--rpa-red-text) !important;
	text-decoration: underline;
}

.rpahq-news-item p {
	margin: 0;
}

.rpahq-photos__title {
	margin: 20px 0 10px;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rpahq-photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-photos img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 4px;
}

.rpahq-contact {
	align-self: start;
	padding: 20px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	box-shadow: 0 1px 3px rgba(17, 17, 17, 0.06);
}

.rpahq-contact-list li {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 12px;
	padding: 0 0 16px;
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.rpahq-contact-list strong {
	color: var(--rpa-ink);
}

.rpahq-contact-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--rpa-red);
	color: #fff;
}

.rpahq-contact-list__icon .rpahq-icon {
	width: 18px;
	height: 18px;
}

/* Impact */

.rpahq-impact {
	background: var(--rpa-footer);
	color: #fff;
}

.rpahq-impact .rpahq-section__title {
	color: #fff;
}

.rpahq-impact__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.rpahq-impact__value {
	display: block;
	color: var(--rpa-red-on-dark);
	font-family: var(--rpa-font-heading);
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.1;
}

.rpahq-impact__label {
	display: block;
	font-size: 0.9375rem;
}

/* Stay Connected band */

.rpahq-connect {
	background: var(--rpa-red-deep);
	color: #fff;
	--rpa-band-pad: 40px;
}

.rpahq-connect__inner {
	display: grid;
	gap: 16px;
	align-items: center;
	padding-top: 28px;
	padding-bottom: 28px;
}

@media (min-width: 800px) {
	.rpahq-connect__inner {
		grid-template-columns: auto 1fr auto;
		gap: 24px;
	}
}

.rpahq-connect__icon {
	display: none;
}

@media (min-width: 800px) {
	.rpahq-connect__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 64px;
		height: 64px;
		border-radius: 50%;
		background: #fff;
		color: var(--rpa-red-deep);
	}

	.rpahq-connect__icon .rpahq-icon {
		width: 32px;
		height: 32px;
	}
}

.rpahq-connect h2 {
	margin: 0 0 4px;
	color: #fff !important;
	font-size: 1.6rem;
	text-transform: uppercase;
}

.rpahq-connect p {
	margin: 0;
}

.rpahq-connect__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.rpahq-social {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 2px solid #fff;
	border-radius: 50%;
	color: #fff !important;
}

.rpahq-social a:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* Event and program pages */

.rpahq-page-body {
	padding-top: 32px;
	padding-bottom: 64px;
}

.rpahq-page-head {
	margin: 0 0 24px;
}

.rpahq-page-head h1,
.rpahq-event__title,
.rpahq-program h1 {
	margin: 0 0 12px;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	text-transform: uppercase;
}

.rpahq-filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.rpahq-filters a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius-btn);
	color: var(--rpa-text) !important;
	font-size: var(--rpa-step--1);
	text-decoration: none;
	border-color: var(--rpa-line-warm);
	font-family: var(--rpa-font-heading);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rpahq-filters a[aria-current="page"] {
	background: var(--rpa-red);
	border-color: var(--rpa-red);
	color: #fff !important;
}

.rpahq-year {
	margin: 32px 0 4px;
	font-size: 1.5rem;
}

.rpahq-empty {
	padding: 24px;
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface-alt);
}

.rpahq-back {
	margin: 0 0 16px;
	font-size: 0.9375rem;
}

.rpahq-back a {
	text-decoration: none;
}

.rpahq-notice {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid var(--rpa-text);
	background: var(--rpa-surface-alt);
}

.rpahq-notice--alert {
	border-left-color: var(--rpa-red);
	background: #fdecec;
	color: var(--rpa-ink);
	font-weight: 600;
}

.rpahq-event__layout {
	display: grid;
	gap: 32px;
}

@media (min-width: 900px) {
	.rpahq-event__layout {
		grid-template-columns: minmax(0, 1fr) 340px;
		align-items: start;
	}
}

.rpahq-event__image,
.rpahq-program__image {
	display: block;
	width: 100%;
	margin: 0 0 24px;
	border-radius: var(--rpa-radius);
}

.rpahq-event__details {
	display: grid;
	gap: 20px;
	padding: 24px;
	border: 1px solid var(--rpa-line);
	border-top: 4px solid var(--rpa-red);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

@media (min-width: 900px) {
	.rpahq-event__details {
		position: sticky;
		top: 24px;
	}
}

.rpahq-event__details p {
	margin: 0;
}

.rpahq-calendar-menu summary {
	list-style: none;
}

.rpahq-calendar-menu summary::-webkit-details-marker {
	display: none;
}

.rpahq-calendar-menu ul {
	margin: 8px 0 0;
	padding: 8px 0;
	border: 1px solid var(--rpa-line);
	border-radius: 4px;
	list-style: none;
}

.rpahq-calendar-menu li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
}

.rpahq-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.rpahq-share__label {
	width: 100%;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rpahq-share__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--rpa-line);
	border-radius: 4px;
	background: var(--rpa-surface);
	color: var(--rpa-text) !important;
	font: inherit;
	font-size: 0.9375rem;
	text-decoration: none;
	cursor: pointer;
}

.rpahq-share__link[hidden] {
	display: none;
}

.rpahq-share__status {
	font-size: 0.875rem;
	color: var(--rpa-muted);
}

.rpahq-prose > :first-child {
	margin-top: 0;
}

.rpahq-program__header {
	position: relative;
	margin: 0 0 24px;
}

.rpahq-program__badge {
	position: static;
	margin: 0 0 12px;
}

.rpahq-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.rpahq-program__events {
	margin-top: 48px;
}

.rpahq-edit-link {
	margin: 32px 0 0;
	padding: 12px 16px;
	border: 1px dashed var(--rpa-red);
	border-radius: 4px;
	font-weight: 700;
}

/* Leadership */

.rpahq-leaders {
	display: grid;
	gap: 32px 24px;
	margin: 24px 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

.rpahq-leader {
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
}

.rpahq-leader__photo {
	display: block;
	width: 120px;
	aspect-ratio: 1;
	object-fit: cover;
	height: 120px;
	margin: 0 auto;
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--rpa-gold);
}

.rpahq-leader__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	background: var(--rpa-tile);
	color: var(--rpa-surface);
	font-family: var(--rpa-font-heading);
	font-size: 3rem;
	font-weight: 700;
	width: 120px;
	height: 120px;
	margin: 0 auto;
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--rpa-gold);
}

.rpahq-leader__body {
	padding: 16px 0 0;
}

.rpahq-leader__office {
	margin: 0 0 2px;
	color: var(--rpa-red-text);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-family: var(--rpa-font-heading);
}

.rpahq-leader__name {
	margin: 0 0 4px;
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step-1);
	color: var(--rpa-ink);
	font-weight: 600;
	text-transform: uppercase;
}

.rpahq-leader__body p {
	margin: 0 0 8px;
}

.rpahq-past-officers__list {
	columns: 2 220px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.rpahq-past-officers__list li {
	break-inside: avoid;
	padding: 6px 0;
	border-bottom: 1px solid var(--rpa-line);
}

.rpahq-past-officers__years {
	display: inline-block;
	min-width: 6.5em;
	color: var(--rpa-muted);
	font-variant-numeric: tabular-nums;
}

/* Forms: fields, errors and check boxes, shared by public forms and the portal
   (portal.css loads after this file and styles the portal's inputs). */

.rpahq-field {
	margin: 0 0 16px;
}

.rpahq-check {
	display: flex !important;
	gap: 8px;
	align-items: center;
	font-weight: 400 !important;
	min-height: 32px;
}

.rpahq-field__help {
	margin: 6px 0 0;
	font-size: 0.875rem;
	color: var(--rpa-muted);
}

.rpahq-field__error {
	margin: 6px 0 0;
	color: var(--rpa-red-text);
	font-weight: 600;
}

/* Specific enough to beat the portal's and the contact form's input borders. */
.rpahq-field.rpahq-field--invalid input:not([type="checkbox"]):not([type="radio"]),
.rpahq-field.rpahq-field--invalid select,
.rpahq-field.rpahq-field--invalid textarea {
	border-color: var(--rpa-red);
	border-width: 2px;
}

.rpahq-required {
	color: var(--rpa-red-text);
}

.rpahq-field fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.rpahq-field fieldset > legend {
	margin: 0 0 6px;
	padding: 0;
	font-weight: 600;
	color: var(--rpa-ink);
}

.rpahq-field--image fieldset > label {
	margin-top: 10px;
}

.rpahq-error-summary {
	margin: 0 0 24px;
	padding: 16px;
	border: 2px solid var(--rpa-red);
	background: #fff;
}

.rpahq-error-summary h2 {
	margin: 0 0 8px;
	font-size: 1.1rem;
	text-transform: none;
}

.rpahq-error-summary ul {
	margin: 0;
	padding-left: 20px;
}

.rpahq-error-summary a {
	color: var(--rpa-red-text);
}

.rpahq-notice--error {
	border-left-color: var(--rpa-red);
}

/* Contact form ([rpa_contact] and the homepage short form). Self-contained, so it looks
   right on a theme page too. */

.rpahq-contact-form {
	max-width: 40rem;
	color: var(--rpa-text);
}

.rpahq-contact-form label {
	display: block;
	margin: 0 0 6px;
	color: var(--rpa-ink);
	font-weight: 600;
}

.rpahq-contact-form input[type="text"],
.rpahq-contact-form input[type="email"],
.rpahq-contact-form input[type="tel"],
.rpahq-contact-form input[type="number"],
.rpahq-contact-form select,
.rpahq-contact-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #8a8a8a;
	border-radius: 4px;
	background: #fff;
	color: var(--rpa-ink);
	font: inherit;
}

.rpahq-contact-form textarea {
	min-height: 140px;
	resize: vertical;
}

.rpahq-contact-form :focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-contact-form__required,
.rpahq-contact-form__note {
	margin: 0 0 16px;
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

.rpahq-contact-form__actions {
	margin: 0;
}

.rpahq-contact-form button.rpahq-btn {
	font-family: inherit;
}

.rpahq-contact-form__sent p {
	margin: 0;
}

.rpahq-contact-form__sent p + p {
	margin-top: 4px;
}

/* The honeypot: off-screen rather than display:none, which some bots skip. */
.rpahq-contact__trap {
	position: absolute !important;
	left: -10000px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Homepage contact column: Details and Send a message. Without JavaScript both panels
   show, joined by the links; public.js turns the links into tabs. */

.rpahq-contact-tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--rpa-line);
}

.rpahq-contact-tabs li {
	flex: 1 1 0;
}

.rpahq-contact-tabs__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 10px;
	border-bottom: 3px solid transparent;
	color: var(--rpa-text) !important;
	font-weight: 700;
	font-size: 0.9375rem;
	text-align: center;
	text-decoration: none;
}

.rpahq-contact-tabs__tab:hover {
	background: var(--rpa-surface-alt);
}

.rpahq-contact-tabs__tab[aria-selected="true"] {
	border-bottom-color: var(--rpa-red);
	color: var(--rpa-ink) !important;
}

.rpahq-contact-panel:not([hidden]) + .rpahq-contact-panel {
	margin-top: 24px;
}

.rpahq-contact-panel[hidden] {
	display: none;
}

.rpahq-contact-panel:focus {
	outline: none;
}

.rpahq-contact-panel:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 4px;
}

.rpahq-contact .rpahq-contact-form {
	max-width: none;
}

.rpahq-contact-more {
	min-height: 44px;
}

/* Gentle reveal on scroll, only when JavaScript runs and motion is welcome. */

@media (prefers-reduced-motion: no-preference) {
	.rpahq-js .rpahq-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.5s ease, transform 0.5s ease;
	}

	.rpahq-js .rpahq-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rpahq-public *,
	.rpahq-public *::before,
	.rpahq-public *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Event RSVP (0.4.0) */

/* RSVP on the event page (views/public/partials/rsvp-form.php). The honeypot reuses the
   contact form's .rpahq-contact__trap rule, which is already in this file. */

/* A details column holding a form can be taller than the screen, and a sticky column would
   keep its end out of reach until the page ends, so it scrolls with the page instead. */
.rpahq-event__details:has(.rpahq-rsvp) {
	position: static;
}

.rpahq-rsvp {
	display: grid;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid var(--rpa-line);
}

.rpahq-rsvp__title {
	margin: 0;
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rpahq-rsvp__spots,
.rpahq-rsvp__going {
	color: var(--rpa-ink);
	font-weight: 700;
}

.rpahq-rsvp__full {
	color: var(--rpa-red-text);
	font-weight: 700;
}

.rpahq-rsvp__note,
.rpahq-rsvp__sign-in,
.rpahq-rsvp__list {
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

.rpahq-rsvp__sign-in a,
.rpahq-rsvp__list a {
	font-weight: 600;
}

.rpahq-rsvp__form {
	display: grid;
	gap: 12px;
	margin: 0;
}

.rpahq-rsvp .rpahq-field,
.rpahq-rsvp .rpahq-notice,
.rpahq-rsvp .rpahq-error-summary,
.rpahq-rsvp-cancel {
	margin: 0;
}

.rpahq-rsvp label {
	display: block;
	margin: 0 0 6px;
	color: var(--rpa-ink);
	font-weight: 600;
}

.rpahq-rsvp input[type="text"],
.rpahq-rsvp input[type="email"],
.rpahq-rsvp select {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid #8a8a8a;
	border-radius: 4px;
	background: #fff;
	color: var(--rpa-ink);
	font: inherit;
}

.rpahq-rsvp :focus-visible,
.rpahq-rsvp-cancel :focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-rsvp button.rpahq-btn,
.rpahq-rsvp-cancel button.rpahq-btn {
	font-family: inherit;
}

/* =========================================================================================
 * 0.5.0 Documents: [rpa_resources] on the public Resources page.
 * ======================================================================================= */

.rpahq-resources__group + .rpahq-resources__group {
	margin-top: 28px;
}

.rpahq-resources__title {
	margin: 0 0 8px;
	color: var(--rpa-red-text);
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step--1);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.rpahq-resources__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rpa-line);
	border-color: var(--rpa-line-warm);
}

.rpahq-resources__item {
	padding: 12px 0;
	border-bottom: 1px solid var(--rpa-line);
	overflow-wrap: anywhere;
	border-color: var(--rpa-line-warm);
}

.rpahq-resources__item > a {
	font-weight: 600;
}

.rpahq-resources__file {
	font-weight: 400;
	white-space: nowrap;
}

.rpahq-resources__summary {
	margin: 4px 0 0;
	color: var(--rpa-text);
}

/* =========================================================================================
 * 0.6.0 [rpa_gallery] and a news post's other photos.
 * ======================================================================================= */

/* [rpa_gallery] (the Photo Gallery page) and a news post's other photos under its text.
   Reuses .rpahq-photos (square, cover-cropped grid), .rpahq-btn*, .rpahq-muted and
   .rpahq-empty. Both sit inside the theme's own pages, so focus and image sizing are set here. */

.rpahq-gallery__post + .rpahq-gallery__post {
	margin-top: 40px;
}

.rpahq-gallery__title {
	margin: 0 0 4px;
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step-2);
	font-weight: 600;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rpahq-gallery__title a {
	color: inherit;
	text-decoration: none;
}

.rpahq-gallery__title a:hover {
	color: var(--rpa-red-text);
	text-decoration: underline;
}

.rpahq-gallery__date {
	margin: 0 0 12px;
}

.rpahq-gallery__photos {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rpahq-news-photos {
	margin: 24px 0;
}

.rpahq-gallery .rpahq-photos a,
.rpahq-news-photos a {
	display: block;
}

.rpahq-gallery img,
.rpahq-news-photos img {
	max-width: 100%;
	height: auto;
}

.rpahq-gallery :focus-visible,
.rpahq-news-photos :focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

/* .rpahq-pager is only in portal.css: the same rules for the gallery's pager. */
.rpahq-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 16px 0 0;
}

/* =========================================================================================
 * 0.6.0 Homepage: "Edit in portal" links and the impact numbers' source notes.
 * ======================================================================================= */

/* The "Edit in portal" links show to signed-in homepage editors only. */

/* Text for screen readers only (the same rule as portal.css, which public pages don't load). */
.rpahq-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* "Edit in portal" after each homepage section: inside the page width, between the bands. */
.rpahq-home-edit {
	padding-top: 12px;
	padding-bottom: 12px;
}

.rpahq-home-edit .rpahq-edit-link {
	margin: 0;
	background: #fff;
}

.rpahq-home-edit .rpahq-edit-link a {
	display: inline-block;
	min-height: 24px;
}

/* Impact numbers: the source note under a tile's label. */
.rpahq-impact__note {
	display: block;
	margin-top: 4px;
	font-size: 0.8125rem;
	opacity: 0.85;
}

/* =========================================================================================
 * 0.8.0 Contact form membership questions; the programs intro and "Support our programs".
 * ======================================================================================= */

/* Reuses .rpahq-field*, .rpahq-check, .rpahq-center, .rpahq-btn--outline and .rpahq-page-head.
   No fixed widths: holds at 375 px. */

/* Contact form: membership questions. public.js hides the group unless the topic is
   Membership; without JavaScript it shows, marked "Only for the Membership topic". */
.rpahq-contact-form__membership {
	min-width: 0;
	margin: 0 0 16px;
	padding: 12px 16px 0;
	border: 1px solid var(--rpa-line);
	border-radius: 4px;
}

.rpahq-contact-form__membership[hidden] {
	display: none;
}

.rpahq-contact-form__membership > legend {
	padding: 0 6px;
	color: var(--rpa-ink);
	font-weight: 700;
}

.rpahq-contact-form__membership > .rpahq-field__help {
	margin: 0 0 12px;
}

/* The year of initiation: a number box (it shares the form's box rules above), kept short. */
.rpahq-contact-form input[type="number"] {
	max-width: 10rem;
}

/* Programs intro, under the heading: centred on the homepage, left on /programs/. */
.rpahq-section__intro {
	max-width: 46rem;
	margin: 0 auto;
	font-size: 1.0625rem;
}

.rpahq-section__intro p {
	margin: 0 0 12px;
}

.rpahq-section__intro p:last-child {
	margin-bottom: 0;
}

.rpahq-page-head .rpahq-section__intro {
	margin: 12px 0 0;
}

/* "Support our programs", under the program grid. */
.rpahq-page-body > .rpahq-empty + .rpahq-center {
	margin: 32px 0 0;
}

/* =========================================================================================
 * 0.8.0 Event-type markers; "Edit in portal" on leadership cards and past officers.
 * ======================================================================================= */

/* 0.8.0: event-type markers (rpahq_event_type_marker()). The marker is the type's icon in
   the type's color (--rpahq-type-color, set inline on the marker), or a dot in that color
   when the type has no icon. It is decorative (aria-hidden); the type's name is always in
   the text beside it. public.css also loads in the portal, so the portal calendar's list
   rows and the Manage preview use these rules too. */

.rpahq-type-marker {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	color: var(--rpahq-type-color, currentColor);
	line-height: 1;
}

/* Beats ".rpahq-meta .rpahq-icon" (red, 16px, nudged down) and the button and link icons. */
.rpahq-type-marker .rpahq-icon,
.rpahq-meta .rpahq-type-marker .rpahq-icon {
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	color: inherit;
}

/* No icon: a dot. */
.rpahq-type-marker:empty {
	width: 0.75em;
	height: 0.75em;
	border-radius: 50%;
	background: currentColor;
}

@media (forced-colors: active) {
	.rpahq-type-marker:empty {
		forced-color-adjust: none;
		background: CanvasText;
	}
}

/* Event rows: the type line ("● Social") under the date, time and place. */
.rpahq-meta .rpahq-meta__type {
	align-items: center;
}

/* Event pages: the marker in the eyebrow, before the type name. */
.rpahq-eyebrow .rpahq-type-marker {
	margin-top: -2px;
}

/* /events/ type filters: the marker before each name. On the current (red) filter it
   follows the white text, so it stays visible. */
.rpahq-filters a .rpahq-type-marker {
	margin-right: 6px;
}

.rpahq-filters a[aria-current="page"] .rpahq-type-marker {
	color: inherit;
}

/* 0.8.0: "Edit in portal" on leadership cards and past-officer entries (signed-in editors
   only). Smaller than the page-level edit bar, and a 24px target. */

.rpahq-leader .rpahq-edit-link {
	margin: 12px 0 0;
	padding: 6px 12px;
	font-size: 0.875rem;
}

.rpahq-past-officers__list .rpahq-edit-link {
	width: fit-content;
	max-width: 100%;
	margin: 6px 0 2px;
	padding: 2px 10px;
	font-size: 0.875rem;
}

.rpahq-leader .rpahq-edit-link a,
.rpahq-past-officers__list .rpahq-edit-link a {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

/* =========================================================================================
 * 0.9.0 Events (Builder C): the waitlist form on a full event and the volunteer shifts block
 * on an event page. Nothing scrolls sideways at 375 px.
 * ======================================================================================= */

.rpahq-rsvp__form--waitlist {
	padding-top: 4px;
}

.rpahq-shifts {
	display: grid;
	gap: 12px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--rpa-line);
}

.rpahq-shifts__title {
	margin: 0;
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rpahq-shifts__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-shifts__item {
	display: grid;
	gap: 6px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius, 6px);
	overflow-wrap: anywhere;
}

.rpahq-shifts__name,
.rpahq-shifts__note,
.rpahq-shifts__filled,
.rpahq-shifts__mine,
.rpahq-shifts__full,
.rpahq-shifts__sign-in,
.rpahq-shifts__form {
	margin: 0;
}

.rpahq-shifts__name {
	color: var(--rpa-ink);
}

.rpahq-shifts__times,
.rpahq-shifts__note,
.rpahq-shifts__filled,
.rpahq-shifts__sign-in {
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

.rpahq-shifts__mine {
	color: #14532d;
	font-weight: 700;
}

.rpahq-shifts__full {
	color: var(--rpa-red-text);
	font-weight: 700;
}

.rpahq-shifts__sign-in a {
	font-weight: 600;
}

.rpahq-shifts button.rpahq-btn {
	min-height: 44px;
	font-family: inherit;
}

.rpahq-shifts :focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

/* ===== 0.10.0: online payments through Stripe and Square (PLAN D21). Merged from work/0.10.0/css-checkout-public.css. ===== */

/* 0.10.0: [rpa_donate] and the event page's "Pay for this event" panel (forms and their result
   panels). The honeypot reuses .rpahq-contact__trap, already in this file. Phone first: the
   amount choices wrap and nothing is wider than the column at 375 px. */

.rpahq-pay {
	display: grid;
	gap: 12px;
	min-width: 0;
	margin: 24px 0;
	padding: 20px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
	overflow-wrap: anywhere;
}

.rpahq-event .rpahq-pay {
	margin: 0;
	padding: 20px 0 0;
	border: 0;
	border-top: 1px solid var(--rpa-line);
	border-radius: 0;
	background: transparent;
}

.rpahq-pay h2 {
	margin: 0;
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.rpahq-pay p,
.rpahq-pay .rpahq-notice {
	margin: 0;
}

.rpahq-pay__name {
	color: var(--rpa-ink);
	font-weight: 600;
}

.rpahq-pay__amount {
	color: var(--rpa-ink);
	font-size: 1.125rem;
	font-weight: 700;
}

.rpahq-pay .rpahq-pay-form {
	display: grid;
	gap: 10px;
	justify-items: start;
	margin: 0;
}

.rpahq-pay .rpahq-pay-item__button {
	min-height: 48px;
	max-width: 100%;
	white-space: normal;
	font-family: inherit;
}

.rpahq-pay-amounts {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.rpahq-pay-amounts legend {
	margin: 0 0 6px;
	padding: 0;
	color: var(--rpa-ink);
	font-weight: 600;
}

.rpahq-pay-amounts__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rpahq-pay-amounts__choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--rpa-line);
	border-radius: 4px;
	background: var(--rpa-surface);
	color: var(--rpa-ink);
	cursor: pointer;
}

.rpahq-pay-amounts__choice:has(input:checked) {
	border-color: var(--rpa-red);
	box-shadow: inset 0 0 0 1px var(--rpa-red);
}

.rpahq-pay-amounts__choice input {
	width: 18px;
	height: 18px;
	margin: 0;
}

.rpahq-pay .rpahq-pay-amounts__other {
	display: grid;
	gap: 4px;
	margin: 12px 0 0;
}

.rpahq-pay-amounts__other label {
	color: var(--rpa-ink);
	font-weight: 600;
}

.rpahq-pay-amounts__other input {
	width: 100%;
	max-width: 12em;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--rpa-muted);
	border-radius: 4px;
	font: inherit;
}

.rpahq-pay-amounts__other input[aria-invalid="true"] {
	border-color: var(--rpa-red-text);
}

.rpahq-pay .rpahq-muted {
	color: var(--rpa-muted);
}

.rpahq-pay .rpahq-small {
	font-size: 0.875rem;
}

.rpahq-pay--result h2:focus {
	outline: none;
}

/* 0.11.0: audit fixes (Builder A) ---------------------------------------------------- */
/* 0.11.0 (Builder A): "Did you mean …?" buttons under the contact form's and the visitor RSVP
   form's email field (rpahq-btn rpahq-btn--outline). Wraps at 375 px. */
.rpahq-email-choice {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.rpahq-email-choice .rpahq-btn {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* ==== 0.13.0: Builder A, calendar subscribe buttons (merged from work/0.13.0) ==== */

/* 0.13.0 (Builder A): the calendar subscribe buttons, rpahq_cal_subscribe_html() (PLAN D25 scope 1).
   /events/: a <details> disclosure "Add to your calendar" (works without JavaScript);
   portal calendar: the same buttons inside the existing "Subscribe in your calendar app" panel.
   Buttons are links at least 44 px tall, one per row at 375 px, then as many as fit. Nothing is
   fixed or sticky; no fixed widths; no sideways scroll at 320 px. Text pairs use the public tokens
   (--rpa-red-text on --rpa-surface, white on --rpa-red), both above 4.5:1. */

.rpahq-cal-subscribe {
	margin: 0 0 24px;
	max-width: 100%;
}

.rpahq-cal-subscribe--portal {
	margin: 0 0 16px;
}

/* The summary keeps display: list-item so the browser's open/closed triangle stays. */
.rpahq-cal-subscribe__toggle {
	min-height: 44px;
	padding: 10px 4px;
	box-sizing: border-box;
	color: var(--rpa-red-text);
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
}

.rpahq-cal-subscribe__toggle .rpahq-icon {
	width: 20px;
	height: 20px;
	margin: 0 4px 0 2px;
	vertical-align: -4px;
}

.rpahq-cal-subscribe__toggle:focus-visible,
.rpahq-cal-subscribe a.rpahq-cal-subscribe__button:focus-visible,
.rpahq-cal-subscribe__feed a:focus-visible {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-cal-subscribe__body {
	margin: 8px 0 0;
	padding: 16px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface-alt);
}

.rpahq-cal-subscribe__label {
	margin: 0 0 12px;
	color: var(--rpa-ink);
	font-weight: 600;
}

.rpahq-cal-subscribe__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.rpahq-cal-subscribe__list li {
	margin: 0;
}

.rpahq-cal-subscribe a.rpahq-cal-subscribe__button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 8px 16px;
	border: 2px solid var(--rpa-red);
	border-radius: 4px;
	background: var(--rpa-surface);
	color: var(--rpa-red-text);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.rpahq-cal-subscribe a.rpahq-cal-subscribe__button:hover {
	background: var(--rpa-red);
	color: #fff;
}

.rpahq-cal-subscribe__help {
	margin: 0 0 8px;
	color: var(--rpa-muted);
	font-size: 0.9375rem;
}

.rpahq-cal-subscribe__feed {
	margin: 0;
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

@media (forced-colors: active) {
	.rpahq-cal-subscribe a.rpahq-cal-subscribe__button {
		border-color: LinkText;
		color: LinkText;
	}

	.rpahq-cal-subscribe__body {
		border-color: CanvasText;
	}
}

@media print {
	.rpahq-cal-subscribe {
		display: none;
	}
}

/* ==== end 0.13.0: Builder A, calendar subscribe buttons ==== */


/* ==== 0.14.0: Builder C, portrait-aware event cards (merged from work/0.14.0/css-c-public.css) ==== */

/* 0.14.0 (D26-24): a portrait photo (a flyer) is shown whole in the card's photo box, on the
   brand background, at the same size as before (84×64, 160×100 in wide lists), so the card's
   height doesn't change. Landscape and square photos keep `cover`. Phones under 480 px still
   hide the card photo, as before. The card uses the `medium` size, not the 150×150 crop. */
.rpahq-event-row[data-rpahq-orient="portrait"] .rpahq-event-row__image {
	object-fit: contain;
	background: var(--rpa-red-deep);
}

/* The event's own page: a portrait flyer is shown whole and no taller than the window. */
.rpahq-event__image[data-rpahq-orient="portrait"] {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 80vh;
	margin-inline: auto;
}

/* ==== end 0.14.0: Builder C, portrait-aware event cards ==== */


/* 0.15.0 (integration): the builders' rules for selectors public.css already had were folded
   into those rules above: .rpahq-connect, .rpahq-filters a, .rpahq-gallery__photos,
   .rpahq-gallery__title, .rpahq-leader, .rpahq-leader__body, .rpahq-leader__name,
   .rpahq-leader__office, .rpahq-leader__photo, .rpahq-leader__placeholder, .rpahq-leaders,
   .rpahq-program-card, .rpahq-program-card__image, .rpahq-program-card__title,
   .rpahq-resources__item, .rpahq-resources__item > a, .rpahq-resources__list,
   .rpahq-resources__title. */

/* ==== 0.15.0: Builder B, the Option B homepage (merged from work/0.15.0/css-b-public.css) ==== */

/* =========================================================================================
 * 0.15.0 (Builder B, D29-12…21): the Option B homepage: hero and slideshow, numbers strip,
 * Join us rail, priorities, program tiles, pull quote, Stay Connected, legacy band tweaks.
 * The bands themselves (.rpa-band*) are the theme's; these rules lay out what's inside.
 * ======================================================================================= */

/* 0.15.0 (integration): the band-colour restatements that were here are gone: public.css's
   base rules now use :where(.rpahq-public), so the theme's band and button rules win. */

/* Hero (D29-13): copy left, deck right from 900px; one column below. */
.rpahq-public .rpahq-hero-b {
	padding-block: 32px 56px;
}

.rpahq-hero-b .rpahq-hero-b__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	opacity: 0.22;
	mix-blend-mode: luminosity;
	pointer-events: none;
}

.rpahq-hero-b__inner {
	display: grid;
	gap: 32px;
	align-items: center;
}

.rpahq-hero-b__copy {
	max-width: 560px;
	min-width: 0;
}

.rpahq-hero-b__title {
	margin: 0 0 20px;
	color: white;
	font-family: var(--rpa-font-heading);
	font-size: min(var(--rpa-step-5), 13.5vw); /* 320px: "BROTHERHOOD." stays on one line */
	font-weight: 700;
	line-height: 0.95;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rpahq-hero-b__line {
	display: block;
}

.rpahq-hero-b__line--accent {
	color: var(--rpa-gold-soft);
}

.rpahq-hero-b__text {
	max-width: 520px;
	margin: 0 0 28px;
	color: var(--rpa-text-on-dark);
	font-size: var(--rpa-step-0);
	line-height: 1.6;
}

.rpahq-hero-b__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

@media (min-width: 900px) {
	.rpahq-public .rpahq-hero-b {
		padding-block: 56px 72px;
	}

	.rpahq-hero-b__inner {
		grid-template-columns: 1.2fr 1fr;
	}

	.rpahq-hero-b__text {
		font-size: 1.125rem;
	}
}

/* Deck (D29-14/15): the controls come first in the DOM and sit under the slides. The frame
   has a fixed width and aspect ratio per breakpoint, the caption two reserved lines and the
   controls a reserved row, so nothing shifts. */
.rpahq-deck {
	display: grid;
	grid-template-areas: "slides" "controls";
	gap: 12px;
	justify-items: center;
	min-width: 0;
}

.rpahq-deck__slides {
	grid-area: slides;
	width: 100%;
}

.rpahq-deck__slide {
	display: grid;
	justify-items: center;
}

.rpahq-deck__slide[hidden] {
	display: none;
}

.rpahq-public .rpahq-deck__link {
	display: grid;
	justify-items: center;
	gap: 14px;
	width: 100%;
	color: var(--rpa-gold-soft);
	text-decoration: none;
}

.rpahq-deck__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(100%, 300px);
	aspect-ratio: 4 / 5;
}

.rpahq-deck--landscape .rpahq-deck__frame {
	width: min(100%, 520px);
	aspect-ratio: 4 / 3;
}

.rpahq-deck .rpahq-deck__img {
	display: block;
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	border: 6px solid white;
	background: white;
	box-shadow: var(--rpa-shadow-lift);
}

.rpahq-deck__cap {
	display: -webkit-box;
	max-width: 360px;
	min-height: 2.7em;
	overflow: hidden;
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step--1);
	letter-spacing: 0.06em;
	line-height: 1.35;
	text-align: center;
	text-transform: uppercase;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.rpahq-public .rpahq-deck__link:hover .rpahq-deck__cap {
	text-decoration: underline;
}

.rpahq-deck__controls {
	grid-area: controls;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	color: white;
	visibility: hidden;
}

.rpahq-deck.is-live .rpahq-deck__controls {
	visibility: visible;
}

@media (scripting: none) {
	.rpahq-deck__controls {
		display: none;
	}
}

.rpahq-deck__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.rpahq-deck__btn:hover {
	background: rgba(255, 255, 255, 0.12);
}

.rpahq-deck__icon {
	width: 20px;
	height: 20px;
}

.rpahq-deck__icon--play,
.rpahq-deck.is-paused .rpahq-deck__icon--pause {
	display: none;
}

.rpahq-deck.is-paused .rpahq-deck__icon--play {
	display: block;
}

.rpahq-deck__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.rpahq-deck__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.rpahq-deck__dot::before {
	content: "";
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: 2px solid white;
	border-radius: 50%;
}

.rpahq-deck__dot[aria-current="true"]::before {
	border-color: var(--rpa-gold-soft);
	background: var(--rpa-gold-soft);
}

.rpahq-deck--seal .rpahq-deck__frame {
	width: min(70%, 320px);
	aspect-ratio: 549 / 600;
}

.rpahq-deck .rpahq-deck__seal {
	width: 100%;
	height: auto;
}

@media (min-width: 900px) {
	.rpahq-deck--portrait .rpahq-deck__frame {
		width: min(100%, 360px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.rpahq-deck.is-moved .rpahq-deck__slide.is-current {
		animation: rpahq-deck-fade 0.6s ease;
	}
}

@keyframes rpahq-deck-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (forced-colors: active) {
	.rpahq-deck__btn {
		border-color: ButtonText;
	}

	.rpahq-deck__dot::before {
		border-color: CanvasText;
	}

	.rpahq-deck__dot[aria-current="true"]::before {
		background: CanvasText;
	}
}

/* Numbers strip (D29-16): as many equal columns as numbers, two under 700px. */
.rpahq-stats {
	--rpa-band-pad: 8px;
}

.rpahq-stats__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block: 0;
}

.rpahq-stats__list[data-count="1"] {
	grid-template-columns: minmax(0, 1fr);
}

.rpahq-stats__item {
	display: flex;
	flex-direction: column;
	padding: 20px 16px;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.rpahq-stats__item:nth-child(odd) {
	border-left: 0;
}

.rpahq-stats__value {
	order: -1;
	margin: 0;
	color: var(--rpa-gold-soft);
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step-3);
	font-weight: 600;
	line-height: 1;
	overflow-wrap: anywhere;
}

.rpahq-stats__label {
	margin-top: 6px;
	color: var(--rpa-muted-on-night);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (min-width: 700px) {
	.rpahq-stats__list[data-count="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rpahq-stats__list[data-count="4"] {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.rpahq-stats__item:nth-child(odd) {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}

	.rpahq-stats__item:first-child {
		border-left: 0;
	}
}

/* Join us rail (D29-17): scrolls sideways inside the page; a short vertical list under 360px. */
.rpahq-join__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: 24px;
}

.rpahq-join__head .rpa-band__title {
	margin: 0;
}

.rpahq-rail {
	display: grid;
	grid-auto-columns: 78vw;
	grid-auto-flow: column;
	gap: 20px;
	margin: 0;
	padding: 4px 0 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	list-style: none;
	scroll-padding-inline: var(--rpa-gutter);
	scroll-snap-type: x mandatory;
}

.rpahq-rail__item {
	display: flex;
	scroll-snap-align: start;
}

.rpahq-rail__item > * {
	flex: 1;
}

.rpahq-join__empty {
	max-width: 640px;
	margin: 0;
}

@media (min-width: 480px) {
	.rpahq-rail {
		grid-auto-columns: 260px;
	}
}

@media not all and (min-width: 360px) {
	.rpahq-rail {
		grid-auto-columns: auto;
		grid-auto-flow: row;
		overflow: visible;
		scroll-snap-type: none;
	}

	.rpahq-rail__item:nth-child(n + 4) {
		display: none;
	}
}

/* Four priorities (D29-18). */
.rpahq-priorities {
	display: grid;
	gap: 24px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.rpahq-priorities__item {
	padding-top: 18px;
	border-top: 3px solid var(--rpa-gold);
}

.rpahq-priorities__title {
	margin: 0 0 8px;
	color: white;
	font-size: var(--rpa-step-1);
	font-weight: 600;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rpahq-priorities__text {
	margin: 0;
	color: var(--rpa-muted-on-dark);
	line-height: 1.55;
}

.rpahq-priorities__more {
	margin: 28px 0 0;
}

@media (min-width: 480px) {
	.rpahq-priorities {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.rpahq-priorities {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Program tiles (D29-19): photo under a crimson scrim, or the tile gradient; the title's
   link is stretched over the tile and the ring is drawn on the whole tile. */
.rpahq-programs-band__head {
	max-width: 720px;
	margin-bottom: 28px;
}

.rpahq-tiles {
	display: grid;
	gap: 20px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.rpahq-tiles__item {
	display: flex;
}

.rpahq-tiles__item > .rpahq-tile {
	flex: 1;
}

.rpahq-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 230px;
	padding: 28px;
	overflow: hidden;
	background: var(--rpa-tile);
	color: white;
}

.rpahq-tile--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(74, 0, 2, 0.92) 0, rgba(74, 0, 2, 0.55) 55%, rgba(74, 0, 2, 0.25) 100%);
}

.rpahq-tile .rpahq-tile__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.rpahq-tile[data-rpahq-focus="top"] .rpahq-tile__img {
	object-position: center top;
}

.rpahq-tile[data-rpahq-focus="bottom"] .rpahq-tile__img {
	object-position: center bottom;
}

.rpahq-tile__icon {
	position: absolute;
	top: 16px;
	right: 16px;
	color: var(--rpa-gold-soft);
}

.rpahq-tile__title {
	margin: 0 0 6px;
	color: white;
	font-family: var(--rpa-font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.75rem);
	line-height: 1.1;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rpahq-public .rpahq-tile__link {
	color: white;
	text-decoration: none;
}

.rpahq-tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.rpahq-public .rpahq-tile__link:focus-visible {
	outline: none;
}

.rpahq-tile:focus-within {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 3px;
}

.rpahq-tile__text {
	max-width: 420px;
	margin: 0;
	color: var(--rpa-text-on-tile);
	line-height: 1.5;
}

@media (min-width: 700px) {
	.rpahq-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rpahq-tiles__item--wide {
		grid-column: 1 / -1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.rpahq-tile {
		transition: transform 0.2s ease;
	}

	.rpahq-tile:hover {
		transform: translateY(-2px);
	}
}

@media (forced-colors: active) {
	.rpahq-tile {
		border: 2px solid CanvasText;
	}
}

/* Pull quote (D29-20): the seal beside the quote from 700px. */
.rpahq-quote {
	display: grid;
	gap: 24px;
	align-items: center;
}

.rpahq-quote .rpahq-quote__seal {
	width: 96px;
	height: auto;
}

.rpahq-quote .rpa-quote {
	margin: 0;
}

.rpahq-quote__after {
	max-width: 640px;
	margin: 16px 0 0;
}

.rpahq-quote__actions {
	margin: 20px 0 0;
}

@media (min-width: 700px) {
	.rpahq-quote {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 32px;
	}

	.rpahq-quote--no-seal {
		grid-template-columns: minmax(0, 1fr);
	}

	.rpahq-quote .rpahq-quote__seal {
		width: 160px;
	}
}

/* Stay Connected (D29-21): the crimson band; light gold social icons. */
.rpahq-public .rpahq-connect__inner {
	padding-block: 0;
}

/* !important: public.css's .rpahq-social a sets color: #fff !important. */
.rpahq-connect .rpahq-social a {
	border-color: currentColor;
	color: var(--rpa-gold-soft) !important;
}

/* Legacy sections on their bands (behaviour unchanged). */
.rpahq-public .rpahq-impact {
	color: var(--rpa-muted-on-dark);
}

.rpahq-impact .rpahq-impact__value {
	color: var(--rpa-gold-soft);
}

.rpahq-impact .rpahq-impact__label {
	color: var(--rpa-muted-on-night);
}

/* "Edit in portal" (editors only): the numbers strip's hidden count. */
.rpahq-home-edit__note {
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

/* ==== end 0.15.0: Builder B, the Option B homepage ==== */


/* ==== 0.15.0: Builder C, inner pages (D29-28 … D29-30) ==== (merged from work/0.15.0/css-c-public.css)
   The page band itself is the theme's (.rpa-page-band, style.css; its link, focus and title
   colours win since public.css's base rules use :where(.rpahq-public)); these rules style the
   band's action links, the shared Option B event card (also the homepage rail's), the
   /events/ card grid and filters, the event and program pages, and the public lists the
   theme's pages hold (gallery, leadership, resources, the contact card).
   Tokens only; works at 320 px; breakpoints 480, 700, 900, 1100, 1200 (min-width). */

/* The band's action links ("Subscribe to the calendar"): Oswald, 44 px tall. */
.rpahq-band-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.rpahq-band-link .rpahq-icon {
	width: 18px;
	height: 18px;
}

.rpahq-public .rpahq-page-body {
	padding-top: 40px;
}

/* /events/ type filters: square chips; the current one crimson (as before). */
/* The card grid (/events/, a program's events): 1, 2, 3 then 4 columns. */
.rpahq-card-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.rpahq-card-grid > li {
	display: flex;
	min-width: 0;
}

@media (min-width: 480px) {
	.rpahq-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.rpahq-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.rpahq-card-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* The Option B event card (§5.1): photo box 4:5; a portrait flyer shown whole on dark
   crimson, a landscape or square photo cropped; the title's link stretched over the card. */
.rpahq-event-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	border-radius: 0;
	background: var(--rpa-surface);
	box-shadow: var(--rpa-shadow-card);
}

.rpahq-event-card__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--rpa-red-dark);
}

/* Two classes: .rpahq-public img (height: auto) must not undo the fill. */
.rpahq-event-card .rpahq-event-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rpahq-event-card[data-rpahq-orient="portrait"] .rpahq-event-card__img {
	object-fit: contain;
}

.rpahq-event-card__media--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--rpa-tile);
	color: var(--rpa-surface);
	font-family: var(--rpa-font-heading);
	line-height: 1;
	text-transform: uppercase;
}

.rpahq-event-card__month {
	color: var(--rpa-gold-soft);
	font-size: var(--rpa-step-1);
	letter-spacing: 0.14em;
}

.rpahq-event-card__day {
	margin-top: 8px;
	font-size: clamp(3rem, 2.4rem + 3vw, 4.5rem);
	font-weight: 700;
}

.rpahq-event-card__body {
	flex: 1;
	padding: 16px;
}

.rpahq-event-card__date {
	margin: 0 0 6px;
	color: var(--rpa-red);
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rpahq-public .rpahq-event-card__title {
	margin: 0 0 6px;
	color: var(--rpa-ink);
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step-1);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rpahq-event-card .rpahq-event-card__link {
	color: var(--rpa-ink);
	text-decoration: none;
}

.rpahq-event-card .rpahq-event-card__link:hover {
	color: var(--rpa-red-text);
	text-decoration: underline;
}

.rpahq-event-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.rpahq-event-card .rpahq-event-card__link:focus-visible {
	outline: none;
}

.rpahq-event-card:focus-within {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-event-card__title .rpahq-badge {
	vertical-align: middle;
}

.rpahq-event-card__where {
	margin: 0 0 4px;
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

.rpahq-event-card__type {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--rpa-muted);
	font-size: 0.875rem;
}

@media (prefers-reduced-motion: no-preference) {
	.rpahq-event-card {
		transition: transform 0.2s ease;
	}

	.rpahq-event-card:hover {
		transform: translateY(-2px);
	}
}

@media (forced-colors: active) {
	.rpahq-event-card {
		border: 1px solid CanvasText;
	}
}

/* An event's page: notices under the band; the details panel as an Option B card (public
   pages only: the Manage preview in the portal keeps its look until 0.16.0). */
.rpahq-event__notices {
	margin: 0 0 24px;
}

.rpahq-public .rpahq-event__details {
	border-color: var(--rpa-line-warm);
	border-top-color: var(--rpa-red);
	border-radius: 0;
	box-shadow: var(--rpa-shadow-card);
}

.rpahq-public .rpahq-event__image,
.rpahq-public .rpahq-program__image {
	border-radius: 0;
}

/* Programs: the page's tiles (B's .rpahq-tiles), then the support button; a program's body in
   the text column, its events as cards. */
.rpahq-tiles--page {
	margin: 0;
}

.rpahq-tiles--page + .rpahq-center {
	margin: 40px 0 0;
}

.rpahq-program--in-band {
	max-width: var(--rpa-content);
}

.rpahq-public .rpahq-program__events > h2 {
	margin: 0 0 4px;
	color: var(--rpa-red-dark);
	font-size: var(--rpa-step-3);
	font-weight: 600;
	text-transform: uppercase;
}

/* The older program card (kept for anything still using it), matched to Option B. */
/* Empty lists on public pages: the shared coach panel (D26-19) on cream. */
.rpahq-public .rpahq-empty,
.entry-content > .rpahq-empty {
	border-radius: 0;
	background: var(--rpa-cream);
}

.rpahq-empty--coach p {
	margin: 0;
}

.rpahq-empty--coach p + p {
	margin-top: 12px;
}

.rpahq-public .rpahq-empty--coach .rpahq-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 2px solid currentColor;
	border-radius: var(--rpa-radius-btn);
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step--1);
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

/* [rpa_gallery]: square photos, 3, 4 then 6 across; Oswald story titles; dates muted. */
@media (min-width: 700px) {
	.rpahq-gallery__photos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.rpahq-gallery__photos {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.rpahq-gallery .rpahq-photos img {
	border-radius: 0;
}

/* [rpa_leadership]: round 120 px photos, the office as an eyebrow, Oswald names. */
/* [rpa_resources]: each type's name as an eyebrow over a clean list. */
/* The Contact page's form ([rpa_contact], the full form): a white card on cream. */
.rpahq-contact-form:not(.rpahq-contact-form--short) {
	margin-block: clamp(12px, 3vw, 32px);
	padding: clamp(20px, 4vw, 32px);
	background: var(--rpa-surface);
	box-shadow: 0 0 0 clamp(12px, 3vw, 32px) var(--rpa-cream), var(--rpa-shadow-card);
}

@media print {
	.rpahq-event-card,
	.rpahq-contact-form:not(.rpahq-contact-form--short) {
		box-shadow: none;
	}
}

/* ==== end 0.15.0: Builder C, inner pages ==== */

/* ==== 0.18.5: staging audit fixes (work/ux-audit-2026-11-03/AUDIT.md) ==== */

/* #13 Leadership: a short list sits in the middle instead of leaving the row's right side empty. */
.rpahq-leaders {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 240px));
	justify-content: center;
}

/* #18 The slideshow dots are 44px touch targets on touch screens (the dot itself stays small). */
@media (pointer: coarse) {
	.rpahq-deck__dot {
		width: 44px;
		height: 44px;
	}
}

/* #15 A news photo smaller than the column shows at its own size instead of stretching soft. */
.single-post main img.wp-post-image,
.single-post main .wp-block-image img {
	width: auto;
	max-width: 100%;
	height: auto;
}

.single-post main img.wp-post-image {
	display: block;
	margin-inline: auto;
}

.single-post main .wp-block-image:not(.alignleft):not(.alignright) {
	text-align: center;
}

/* 0.18.5 (audit #6): the homepage Latest news band (Builder: work/0.18.5/css/news-band.css). */
/* 0.18.5: Latest news band on the homepage (views/public/home/news.php). For public.css,
   after the Join us rail rules. The band itself (.rpa-band--white, padding) and the head row
   (.rpahq-join__head: title left, "View all news" right, 24px under) are shared with Join us;
   these rules lay out the cards, matching the News page's .post-card (theme pages.css):
   white surface, card shadow, square corners, 16:10 photo, eyebrow, uppercase heading-font
   title, muted date; the whole card is the link. One column on phones, two from 600px,
   three from 960px; minmax(0, 1fr) and overflow-wrap keep 390px free of sideways scroll. */

.rpahq-home-news__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rpahq-home-news__grid > li {
	display: flex;
	min-width: 0;
	margin: 0;
}

@media (min-width: 600px) {
	.rpahq-home-news__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.rpahq-home-news__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rpahq-news-card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	background: var(--rpa-surface, #fff);
	border: 0;
	border-radius: 0;
	box-shadow: var(--rpa-shadow-card, 0 8px 24px rgba(74, 0, 2, 0.15));
}

.rpahq-news-card__media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
}

.rpahq-news-card__body {
	padding: 16px 20px 20px;
}

.rpahq-news-card__eyebrow {
	margin: 0 0 8px;
}

.rpahq-news-card__title {
	margin: 0 0 8px;
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step-1, 1.25rem);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* Over the band's link colour (:where(.rpa-band) a). */
.rpahq-news-card__title .rpahq-news-card__link {
	color: var(--rpa-ink);
	text-decoration: none;
}

/* The whole card is the link (stretched over it); the ring goes round the card. */
.rpahq-news-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.rpahq-news-card__title .rpahq-news-card__link:hover {
	color: var(--rpa-red-text);
	text-decoration: underline;
}

.rpahq-news-card__link:focus-visible {
	outline: none;
}

.rpahq-news-card:focus-within {
	outline: 3px solid var(--rpa-red-text);
	outline-offset: 2px;
}

.rpahq-news-card__date {
	margin: 0;
	color: var(--rpa-muted, #5f5f5f);
	font-size: 0.9375rem;
}

@media print {
	.rpahq-news-card {
		box-shadow: none;
		border: 1px solid #999;
	}
}

/* #10 History's "On this page" list and #12 Contact's three detail columns (page content classes). */
.entry-content .rpa-jump-list {
	padding: 12px 16px;
	border-left: 3px solid var(--rpa-red);
	background: var(--rpa-surface-alt);
	line-height: 1.9;
}

.entry-content :is(h2, h3)[id] {
	scroll-margin-top: 96px;
}

.entry-content .rpa-contact-details {
	gap: 16px;
	/* The form's cream mat is a 32px shadow: clear it. */
	margin-block: 0 56px;
}

/* Each detail takes the width its text needs (the email address never breaks mid-word). */
.entry-content .rpa-contact-details > .wp-block-column {
	flex: 1 1 auto;
	min-width: 0;
}

.entry-content .rpa-contact-details a[href^="mailto:"] {
	overflow-wrap: normal;
	word-break: keep-all;
}

.entry-content .rpa-contact-details > .wp-block-column {
	padding: 16px;
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	background: var(--rpa-surface);
}

.entry-content .rpa-contact-details p {
	margin: 0;
}

/* ==== 0.20.1: Leadership's full slate (15 officers from the old site) ==== */

/* Smaller cards, three to a row in the text column; from 1000px the grid uses the wide frame
   (up to five across) so a long slate isn't eight rows of two. */
.rpahq-leaders {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 220px));
}

@media (min-width: 1000px) {
	.entry-content > .rpahq-leaders {
		margin-inline: calc(50% - min(550px, 50vw - 40px));
		grid-template-columns: repeat(auto-fit, minmax(180px, 200px));
	}
}

/* 0.21.0 (D35): "Invite to the portal" under a leadership card (signed-in Roster officers only,
   beside "Edit in portal"); a 44px target on touch screens. */
.rpahq-leader .rpahq-edit-link--invite {
	margin-top: 6px;
}

@media (pointer: coarse) {
	.rpahq-leader .rpahq-edit-link a {
		min-height: 44px;
		line-height: 44px;
	}
}