/*
Theme Name: RPA Theme
Description: Base theme for the Richardson-Plano Alumni Chapter site. Typography, colors and page templates; WP Custom Layout draws the header and footer, and the RPA Digital Headquarters plugin renders the homepage, events, programs and portal.
Author: Sanctus Solutions
Version: 0.2.2
Requires at least: 6.5
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: rpa-theme
*/

/* Tokens: docs/HOMEPAGE-MOCKUPS.md. Every text pair passes WCAG AA. */
:root {
	/* 0.2.0 (D29-1): Option B "Bold crimson". The source of truth; the plugin's public.css
	   :root carries the same names and values (tests/theme-tokens.php). */
	--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; /* 0.2.0 (integration): tile summaries, 7.3:1 on #8f0a0e */
	--rpa-muted: #5f5f5f;
	--rpa-muted-on-dark: #c9c9c9;
	--rpa-muted-on-night: #d9c9c9; /* 0.2.0 (integration): labels on the night band, 12.6:1 */
	--rpa-surface: #ffffff;
	--rpa-surface-alt: #f6f6f6;
	--rpa-line: #e2e2e2;
	--rpa-footer: #151515;
	--rpa-radius: 6px;
	--rpa-radius-btn: 2px;
	--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;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
}

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

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--rpa-red-text);
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--rpa-red);
}

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

h1,
h2,
h3,
h4 {
	color: var(--rpa-ink);
	font-family: var(--rpa-font-heading);
	font-weight: 700;
	line-height: 1.15;
	margin: 1.6em 0 0.5em;
}

h1,
h2 {
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

h1 {
	font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
	margin-top: 0;
}

h2 {
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

h3 {
	font-size: 1.3rem;
}

h4 {
	font-size: 1.1rem;
}

p,
ul,
ol {
	margin: 0 0 1.1em;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	left: 16px;
	top: 16px;
	z-index: 100000;
	padding: 12px 16px;
	background: var(--rpa-ink);
	color: #fff;
}

/* Layout */

/* 0.2.0 (D29-9): the page band runs edge to edge under the header, so the main element has no
   padding; templates put their content in .rpa-page-body (below). */
.site-main {
	padding: 0;
}

.site-main:focus {
	outline: none;
}

.entry {
	max-width: var(--rpa-content);
	margin: 0 auto;
}

.entry-content > .alignwide {
	max-width: var(--rpa-wide);
	margin-left: calc(50% - min(50vw - var(--rpa-gutter), var(--rpa-wide) / 2));
	margin-right: calc(50% - min(50vw - var(--rpa-gutter), var(--rpa-wide) / 2));
}

.entry-content > .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}

.entry-header {
	margin: 0 0 24px;
}

.entry-meta {
	color: var(--rpa-muted);
	font-size: 0.9375rem;
	margin: 0;
}

.entry-thumbnail img {
	display: block;
	width: 100%;
	border-radius: 0;
	margin: 0 0 24px;
}

/* Lists of posts */

.post-list {
	max-width: var(--rpa-wide);
	margin: 0 auto;
}

.post-list__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	margin: 24px 0;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--rpa-surface);
	border: 1px solid var(--rpa-line);
	border-radius: var(--rpa-radius);
	overflow: hidden;
}

.post-card img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.post-card__body {
	padding: 16px 20px 20px;
}

.post-card__title {
	font-size: 1.15rem;
	margin: 0 0 6px;
	text-transform: none;
}

.post-card__title a {
	color: var(--rpa-ink);
	text-decoration: none;
}

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

.pagination {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 32px 0 0;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--rpa-line);
	border-radius: 4px;
	text-decoration: none;
}

.pagination .current {
	background: var(--rpa-red);
	border-color: var(--rpa-red);
	color: #fff;
}

/* Blocks inside page content */

/* 0.2.0 (D29-5): block buttons take the .rpa-btn--crimson look; the outline style the
   .rpa-btn--outline look. The :hover rules keep the text white over `a:hover`. */
.wp-block-button__link,
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 12px 20px;
	border: 2px solid transparent;
	border-radius: var(--rpa-radius-btn);
	background: var(--rpa-red);
	color: #fff;
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step--1);
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--rpa-red-deep);
	color: #fff;
}

.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--rpa-red-text);
	border: 2px solid currentColor;
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--rpa-red-text);
	border-color: var(--rpa-red-text);
	color: #fff;
}

.wp-block-image img {
	border-radius: var(--rpa-radius);
}

.wp-block-quote {
	border-left: 4px solid var(--rpa-gold);
	margin: 1.5em 0;
	padding: 0 0 0 20px;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--rpa-line);
	padding: 8px 12px;
}

.not-found {
	max-width: var(--rpa-content);
	margin: 0 auto;
	text-align: center;
}

/* =========================================================================================
 * 0.2.0 (D29-2…D29-10): the Option B "Bold crimson" design system. Classes only: no element
 * rule above changes, because this stylesheet also loads in the portal (tests/theme-css.php).
 * Descendants inside a band are written `:where(.rpa-band--x) h2` (the element's own weight),
 * so these band rules beat the element rules above and any one-class plugin rule beats them.
 * Bands and cards set custom properties their children read:
 *   --rpa-band-eyebrow, --rpa-band-link, --rpa-band-link-hover, --rpa-focus-ring.
 * ======================================================================================= */

/* Shared parts (D29-4, D29-6) */

.rpa-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;
}

.rpa-eyebrow {
	margin: 0 0 8px;
	color: var(--rpa-band-eyebrow, var(--rpa-red-text));
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step--1);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.rpa-rule {
	display: block;
	width: 72px;
	height: 4px;
	margin: 0 0 20px;
	background: var(--rpa-gold);
}

.rpa-band__title {
	margin: 0 0 12px;
	color: var(--rpa-ink);
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step-3);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rpa-band__lead {
	max-width: 640px;
	margin: 0 0 24px;
	font-size: var(--rpa-step-0);
	line-height: 1.6;
}

.rpa-lead {
	max-width: 640px;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
}

/* `a.` matches the weight of `a:hover` here and the plugin's `.rpahq-public a`, so the link
   keeps its band colour on every page. */
.rpa-link-arrow,
a.rpa-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 24px;
	color: var(--rpa-band-link, var(--rpa-red-text));
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step--1);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.rpa-link-arrow::after {
	content: "\2192";
	content: "\2192" / "";
}

a.rpa-link-arrow:hover {
	color: var(--rpa-band-link-hover, var(--rpa-red));
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.rpa-card {
	--rpa-band-eyebrow: var(--rpa-red-text);
	--rpa-band-link: var(--rpa-red-text);
	--rpa-band-link-hover: var(--rpa-red);
	--rpa-focus-ring: var(--rpa-red-text);
	padding: 24px;
	background: var(--rpa-surface);
	box-shadow: var(--rpa-shadow-card);
	color: var(--rpa-text);
}

.rpa-card :where(h1, h2, h3, h4) {
	color: var(--rpa-ink);
}

.rpa-card :where(a) {
	color: var(--rpa-red-text);
}

.rpa-seal {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Buttons (D29-5). The variant sets three properties; `a.rpa-btn` carries the colour at the
   weight of `a:hover` and `.rpahq-public a`, so a button's text never takes the link colour. */

.rpa-btn {
	--rpa-btn-bg: var(--rpa-red);
	--rpa-btn-fg: #fff;
	--rpa-btn-border: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 12px 20px;
	border: 2px solid var(--rpa-btn-border);
	border-radius: var(--rpa-radius-btn);
	background: var(--rpa-btn-bg);
	color: var(--rpa-btn-fg);
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step--1);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

a.rpa-btn,
a.rpa-btn:hover {
	color: var(--rpa-btn-fg);
	text-decoration: none;
}

.rpa-btn:hover {
	--rpa-btn-bg: var(--rpa-red-deep);
}

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

.rpa-btn--crimson {
	--rpa-btn-bg: var(--rpa-red);
	--rpa-btn-fg: #fff;
}

.rpa-btn--crimson:hover {
	--rpa-btn-bg: var(--rpa-red-deep);
}

/* Ink on gold 7.8:1. */
.rpa-btn--gold {
	--rpa-btn-bg: var(--rpa-gold);
	--rpa-btn-fg: var(--rpa-ink);
}

.rpa-btn--gold:hover {
	--rpa-btn-bg: var(--rpa-gold-soft);
}

/* For crimson, dark and night bands: white text and border (11.5:1 on #7a0103). */
.rpa-btn--outline-light {
	--rpa-btn-bg: transparent;
	--rpa-btn-fg: #fff;
	--rpa-btn-border: #fff;
}

.rpa-btn--outline-light:hover {
	--rpa-btn-bg: rgba(255, 255, 255, 0.1);
}

/* For white and cream bands (#a41722: 7.0:1 on white, 6.9:1 on cream). */
.rpa-btn--outline {
	--rpa-btn-bg: transparent;
	--rpa-btn-fg: var(--rpa-red-text);
	--rpa-btn-border: var(--rpa-red-text);
}

.rpa-btn--outline:hover {
	--rpa-btn-bg: var(--rpa-red-text);
	--rpa-btn-fg: #fff;
}

/* Section bands (D29-6): <section class="rpa-band rpa-band--{variant}">. The page band
   (D29-9) shares the crimson, dark and cream looks and the seal. */

.rpa-band,
.rpa-page-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
}

.rpa-band {
	padding-block: var(--rpa-band-pad);
}

/* Crimson: the gradient's top row is exactly --rpa-red-deep, the solid WPCL header (D29-7).
   #f3e6e6 text 9.4:1 at the top, 5.8:1 on the highlight; white headings 7.1:1 or more;
   gold-soft accents 4.6:1 or more. */
.rpa-band--crimson,
.rpa-page-band--crimson {
	--rpa-band-eyebrow: var(--rpa-gold-soft);
	--rpa-band-link: var(--rpa-gold-soft);
	--rpa-band-link-hover: #fff;
	--rpa-focus-ring: var(--rpa-gold-soft);
	background: var(--rpa-red-dark);
	background: var(--rpa-band-crimson);
	color: var(--rpa-text-on-dark);
}

/* Dark: #c9c9c9 text 11.4:1, gold-soft 12.2:1 on #111. */
.rpa-band--dark,
.rpa-page-band--dark {
	--rpa-band-eyebrow: var(--rpa-gold-soft);
	--rpa-band-link: var(--rpa-gold-soft);
	--rpa-band-link-hover: #fff;
	--rpa-focus-ring: var(--rpa-gold-soft);
	background: var(--rpa-ink);
	color: var(--rpa-muted-on-dark);
}

/* Night (numbers strip): #d9c9c9 labels 12.6:1, gold-soft values 13.0:1 on #1a0001. */
.rpa-band--night {
	--rpa-band-eyebrow: var(--rpa-gold-soft);
	--rpa-band-link: var(--rpa-gold-soft);
	--rpa-band-link-hover: #fff;
	--rpa-focus-ring: var(--rpa-gold-soft);
	background: var(--rpa-red-night);
	color: var(--rpa-muted-on-night);
}

/* Cream: #4a0002 headings 14.5:1, #8f0a0e eyebrows 8.4:1, #393939 text, #a41722 links 6.9:1. */
.rpa-band--cream,
.rpa-page-band--cream {
	--rpa-band-eyebrow: var(--rpa-red);
	--rpa-band-link: var(--rpa-red-text);
	--rpa-band-link-hover: var(--rpa-red-dark);
	--rpa-focus-ring: var(--rpa-red-text);
	background: var(--rpa-cream);
	color: var(--rpa-text);
}

.rpa-band--white {
	--rpa-band-eyebrow: var(--rpa-red-text);
	--rpa-band-link: var(--rpa-red-text);
	--rpa-band-link-hover: var(--rpa-red);
	--rpa-focus-ring: var(--rpa-red-text);
	background: var(--rpa-surface);
	color: var(--rpa-text);
}

:where(.rpa-band--crimson, .rpa-band--dark, .rpa-band--night, .rpa-page-band--crimson, .rpa-page-band--dark) h1,
:where(.rpa-band--crimson, .rpa-band--dark, .rpa-band--night, .rpa-page-band--crimson, .rpa-page-band--dark) h2,
:where(.rpa-band--crimson, .rpa-band--dark, .rpa-band--night, .rpa-page-band--crimson, .rpa-page-band--dark) h3,
:where(.rpa-band--crimson, .rpa-band--dark, .rpa-band--night) .rpa-band__title {
	color: #fff;
}

:where(.rpa-band--cream, .rpa-page-band--cream) h2,
:where(.rpa-band--cream) .rpa-band__title {
	color: var(--rpa-red-dark);
}

:where(.rpa-band, .rpa-page-band) a {
	color: var(--rpa-band-link, var(--rpa-red-text));
}

:where(.rpa-band, .rpa-page-band) a:hover {
	color: var(--rpa-band-link-hover, var(--rpa-red));
}

:where(.rpa-band, .rpa-page-band) :focus-visible {
	outline: 3px solid var(--rpa-focus-ring, var(--rpa-red-text));
	outline-offset: 2px;
}

/* The seal watermark (D29-6, D29-11): a CSS background, never announced. The mark is a white
   silhouette; on cream and white it's darkened to a faint ink shape instead. */
.rpa-band--seal::before,
.rpa-page-band--seal::before {
	content: "";
	position: absolute;
	inset-block-start: -40px;
	inset-inline-end: -120px;
	z-index: -1;
	width: 360px;
	aspect-ratio: 549 / 600;
	background: url("assets/img/rpa-seal-mark.webp") no-repeat center / contain;
	opacity: 0.1;
	pointer-events: none;
}

:where(.rpa-band--cream, .rpa-band--white, .rpa-page-band--cream).rpa-band--seal::before,
:where(.rpa-page-band--cream).rpa-page-band--seal::before {
	filter: brightness(0);
	opacity: 0.05;
}

@media (min-width: 700px) {
	.rpa-band--seal::before,
	.rpa-page-band--seal::before {
		inset-block-start: -60px;
		inset-inline-end: -80px;
		width: 560px;
	}
}

/* 0.2.2 (D41, UX audit #11): a page's featured photo behind the band. The photo fills the
   band; a crimson veil (86% at its lightest) keeps white headings above 7:1 and the gold-soft
   crumb and eyebrow above 4.5:1 over a white photo. The seal sits above the veil. */
.rpa-page-band__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.rpa-page-band__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgb(74 0 2 / 0.94) 0%, rgb(74 0 2 / 0.9) 55%, rgb(74 0 2 / 0.86) 100%);
}

.rpa-page-band--dark .rpa-page-band__photo::after {
	background: linear-gradient(100deg, rgb(17 17 17 / 0.94) 0%, rgb(17 17 17 / 0.86) 100%);
}

.rpa-page-band--cream .rpa-page-band__photo::after {
	background: rgb(250 245 236 / 0.92);
}

.rpa-page-band__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 35%;
}

.rpa-page-band.rpa-page-band--photo {
	padding-block: clamp(56px, 9vw, 112px) clamp(40px, 6vw, 72px);
}

/* The page band (D29-9): the one h1 of every inner page, edge to edge under the header. */

.rpa-page-band {
	padding-block: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 56px);
}

.rpa-page-band__inner {
	max-width: var(--rpa-wide);
	margin-inline: auto;
	padding-inline: var(--rpa-gutter);
}

.rpa-page-band__crumbs {
	margin: 0 0 12px;
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step--1);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rpa-page-band__crumbs a {
	display: inline-block;
	padding-block: 4px;
	color: var(--rpa-band-link, var(--rpa-red-text));
	text-decoration: none;
}

.rpa-page-band__crumbs a::before {
	content: "\2039\00a0";
	content: "\2039\00a0" / "";
}

.rpa-page-band__crumbs a:hover {
	color: var(--rpa-band-link-hover, var(--rpa-red));
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.rpa-page-band__eyebrow {
	margin-bottom: 10px;
}

.rpa-page-band__title {
	max-width: 22ch;
	margin: 0;
	color: #fff;
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step-4);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.rpa-page-band--cream .rpa-page-band__title {
	color: var(--rpa-red-dark);
}

.rpa-page-band__lead {
	max-width: 640px;
	margin: 16px 0 0;
	color: var(--rpa-text-on-dark);
	font-size: var(--rpa-step-0);
	line-height: 1.6;
}

.rpa-page-band--dark .rpa-page-band__lead {
	color: var(--rpa-muted-on-dark);
}

.rpa-page-band--cream .rpa-page-band__lead {
	color: var(--rpa-text);
}

.rpa-page-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-top: 24px;
}

.rpa-page-body {
	padding: 40px var(--rpa-gutter) 64px;
}

/* Content blocks (D29-10): the About page's pull quote, priorities list and signature. */

.wp-block-pullquote,
.rpa-quote {
	margin: 2em 0;
	padding: 0;
	border: 0;
	text-align: start;
	font-size: inherit;
	line-height: inherit;
	quotes: "\201C" "\201D";
}

.rpa-quote {
	margin: 0;
}

.wp-block-pullquote::before,
.rpa-quote::before {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	margin: 0 0 20px;
	background: var(--rpa-gold);
}

.wp-block-pullquote blockquote,
.rpa-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
}

.wp-block-pullquote blockquote p,
.rpa-quote__text p {
	margin: 0 0 12px;
	color: var(--rpa-red-dark);
	font-family: var(--rpa-font-heading);
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.875rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.wp-block-pullquote blockquote p:first-child::before,
.rpa-quote__text p:first-child::before {
	content: open-quote;
}

.wp-block-pullquote blockquote p:last-of-type::after,
.rpa-quote__text p:last-of-type::after {
	content: close-quote;
}

.wp-block-pullquote cite,
.rpa-quote__cite {
	display: block;
	margin: 0;
	color: var(--rpa-muted);
	font-family: var(--rpa-font-body);
	font-size: var(--rpa-step--1);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rpa-quote__cite cite {
	font-style: normal;
}

.rpa-signature {
	padding-left: 16px;
	border-left: 3px solid var(--rpa-gold);
	color: var(--rpa-muted);
	line-height: 1.55;
}

.rpa-signature strong {
	color: var(--rpa-ink);
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step-1);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* The list keeps its semantics in Safari: a zero-width marker stands in for the bullet. */
.rpa-priorities {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 1.5em 0;
	padding: 0;
	list-style: none;
}

.rpa-priorities li {
	position: relative;
	margin: 0;
	padding-top: 16px;
	border-top: 3px solid var(--rpa-gold);
}

.rpa-priorities li::before {
	content: "\200B";
	position: absolute;
}

.rpa-priorities strong {
	display: block;
	margin: 0 0 6px;
	color: var(--rpa-ink);
	font-family: var(--rpa-font-heading);
	font-size: var(--rpa-step-1);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

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

/* Forced colours (Accessibility 8): the watermark goes; buttons keep a visible border. */
@media (forced-colors: active) {
	.rpa-band--seal::before,
	.rpa-page-band--seal::before,
	.rpa-page-band__photo {
		display: none;
	}

	.rpa-btn,
	.wp-block-button__link {
		border-color: ButtonText;
	}

	.rpa-rule,
	.wp-block-pullquote::before,
	.rpa-quote::before {
		background: CanvasText;
	}
}

/* Print: bands become white with ink text, no watermark. */
@media print {
	.rpa-band,
	.rpa-page-band {
		background: #fff !important;
		color: var(--rpa-ink) !important;
		padding-block: 16px;
	}

	:where(.rpa-band, .rpa-page-band) :where(h1, h2, h3, h4, p, a, li, dt, dd, span) {
		color: var(--rpa-ink) !important;
	}

	.rpa-band--seal::before,
	.rpa-page-band--seal::before,
	.rpa-page-band__photo {
		display: none;
	}

	.rpa-btn {
		--rpa-btn-bg: #fff;
		--rpa-btn-fg: var(--rpa-ink);
		--rpa-btn-border: var(--rpa-ink);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}