/*
 Theme Name: PFOA
 Author: PFOA project
   Description: A conventional, accessible foundation for the PFOA website.
                       Version: 0.1.286
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pfoa-theme
*/

:root {
	/* Brand and surface tokens. */
	--pfoa-color-text: #302d2b;
	--pfoa-color-muted: #6f6963;
	--pfoa-color-background: #ffffff;
	--pfoa-color-outer: #ebe7dd;
	--pfoa-color-charcoal: #211e1d;
	--pfoa-color-brand: #934244;
	--pfoa-color-brand-dark: #713033;
	--pfoa-color-gold: #e9ad4e;
	--pfoa-color-gold-dark: #d29435;
	--pfoa-color-border: #c8c0b5;
	--pfoa-color-focus: #005fcc;

	/* Semantic color foundation (meaning-based roles). */
	/* PFOA 0.1.163 — Approved royal-blue header/footer (was structural/footer
	 * #D3D3FF with #302D2B text; now #002894 with #FFFFFF text for contrast). */
	--pfoa-surface-structural: #002894;
	--pfoa-surface-footer: #002894;
	--pfoa-surface-tinted: #E3E5FA;
	--pfoa-surface-subtle: #F0F1FB;
	--pfoa-surface-page: #FBFCFA;
	--pfoa-text-primary: #302D2B;
	--pfoa-text-muted: #525873;
	--pfoa-text-on-structural: #FFFFFF;
	--pfoa-text-on-structural-strong: #FFFFFF;
	--pfoa-text-on-action: #FFFFFF;
	--pfoa-action-primary: #434EBE;
	--pfoa-action-hover: #303873;
	--pfoa-action-active: #5B64D4;
	--pfoa-border-default: #CFD2EC;
	--pfoa-accent: #057205;
	--pfoa-focus-ring: #057205;
	--pfoa-cta-primary: var(--pfoa-accent);
	--pfoa-cta-hover: #045C04;
	--pfoa-cta-active: #034A03;

	/* Canvas and rhythm tokens. */
	--pfoa-content-width: 1200px;
	--pfoa-wide-width: 1280px;
	--pfoa-gutter: 40px;
	--pfoa-structural-gutter: var(--pfoa-gutter);
	--pfoa-section-space: clamp(4rem, 6vw, 5.5rem);
	--pfoa-space-1: 0.5rem;
	--pfoa-space-2: 0.75rem;
	--pfoa-space-3: 1rem;
	--pfoa-space-4: 1.5rem;
	--pfoa-space-5: 2rem;
	--pfoa-space-6: 3rem;
	--pfoa-space-7: 4rem;
	--pfoa-space-8: 5rem;
	--pfoa-radius: 5px;
	--pfoa-transition: 180ms ease;

	/* Shared typography foundation (Stage A). */
	--pfoa-font-display: Georgia, "Times New Roman", Times, serif;
	--pfoa-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pfoa-prose-width: 720px;
}

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

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

body {
	margin: 0;
	background: var(--pfoa-surface-subtle);
	color: var(--pfoa-text-primary);
	font-family: var(--pfoa-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.65;
	text-align: left;
	overflow-x: hidden;
}

button,
input,
select,
textarea {
	font: inherit;
}

img,
svg,
video,
iframe,
embed,
object {
	max-width: 100%;
}

img {
	height: auto;
	vertical-align: middle;
}

iframe {
	display: block;
	border: 0;
}

a {
	color: var(--pfoa-action-primary);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
	transition: color var(--pfoa-transition);
}

a:hover {
	color: var(--pfoa-action-hover);
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
	outline: 3px solid var(--pfoa-focus-ring);
	outline-offset: 3px;
}

::selection {
	background: var(--pfoa-color-gold);
	color: var(--pfoa-color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--pfoa-space-4);
	color: var(--pfoa-text-primary);
	font-family: var(--pfoa-font-display);
	font-weight: 700;
	text-align: left;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1.1;
}

h2 {
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	line-height: 1.15;
}

h3 {
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	line-height: 1.25;
}

h4 {
	font-size: clamp(1.15rem, 1.5vw, 1.4rem);
	line-height: 1.3;
}

h5 {
	font-size: 1.1rem;
	line-height: 1.4;
}

h6 {
	font-size: 0.95rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

p,
ul,
ol,
dl,
blockquote,
figure,
table,
pre {
	margin-block: 0 1.25rem;
}

ul,
ol {
	padding-inline-start: var(--pfoa-space-5);
}

li + li {
	margin-block-start: var(--pfoa-space-1);
}

strong,
b {
	font-weight: 700;
}

em,
i {
	font-style: italic;
}

blockquote {
	margin-inline: 0;
	border-inline-start: 4px solid var(--pfoa-color-brand);
	padding-inline: var(--pfoa-space-4);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.2rem;
}

blockquote > :last-child {
	margin-bottom: 0;
}

hr {
	margin-block: var(--pfoa-space-6);
	border: 0;
	border-top: 1px solid var(--pfoa-border-default);
}

small,
.entry-meta,
.entry-footer,
.wp-caption-text,
.gallery-caption {
	color: var(--pfoa-text-muted);
	font-size: 0.875rem;
}

pre,
code,
kbd,
samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

pre,
code {
	max-width: 100%;
	overflow-x: auto;
}

pre {
	padding: var(--pfoa-space-3);
	background: var(--pfoa-surface-subtle);
}

/* Shared canvas and content primitives. */
.site,
.site-canvas {
	min-height: 100vh;
	margin-inline: auto;
	background: var(--pfoa-surface-page);
}

.content-container,
.content-shell {
	width: min(calc(100% - (2 * var(--pfoa-gutter))), var(--pfoa-content-width));
	margin-inline: auto;
}

.site-header__inner,
.site-footer__inner {
	width: calc(100% - (2 * var(--pfoa-structural-gutter)));
	max-width: none;
	margin-inline: auto;
}

@media (min-width: 1320px) {
	:root {
		--pfoa-structural-gutter: clamp(2.5rem, 8vw - 3rem, 7rem);
	}
}

.wide-container {
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding-inline: var(--pfoa-structural-gutter);
}

.section {
	padding-block: var(--pfoa-section-space);
}

.section--compact {
	padding-block: var(--pfoa-space-6);
}

.site-main {
	min-height: 50vh;
}

.content-shell {
	padding-block: var(--pfoa-section-space);
}

.page-header,
.entry-header {
	margin-bottom: var(--pfoa-space-4);
}

.page-title,
.entry-title {
	margin-block: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	line-height: 1.1;
}

.page-title {
	font-size: clamp(2.25rem, 4vw, 3rem);
}

.entry-title {
	font-size: clamp(1.65rem, 3vw, 2.5rem);
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

.entry-content,
.entry-summary,
.archive-description {
	line-height: 1.65;
}

.entry-content > :first-child,
.entry-summary > :first-child,
.archive-description > :first-child {
	margin-top: 0;
}

.entry-content > :last-child,
.entry-summary > :last-child,
.archive-description > :last-child {
	margin-bottom: 0;
}

.entry-content > * {
	max-width: 100%;
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > dl,
.entry-content > blockquote,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > hr,
.entry-summary > p,
.archive-description > p {
	max-width: var(--pfoa-prose-width);
}

.entry-content a:not(.pfoa-button):not(.wp-element-button):not(.wp-block-button__link) {
	font-weight: 600;
}

/* Long-form Pages get a clear title boundary and a comfortable reading measure. */
.page-content .entry-header {
	max-width: var(--pfoa-prose-width);
	margin-bottom: var(--pfoa-space-6);
	border-bottom: 2px solid var(--pfoa-color-gold);
	padding-bottom: var(--pfoa-space-4);
}

.page-content .entry-title {
	font-size: clamp(2.25rem, 4vw, 3rem);
}

.page-content .entry-content {
	min-width: 0;
	overflow-wrap: anywhere;
}

.page-content .entry-content > :where(figure, .wp-caption, .gallery, table, form, .wp-block-embed, .wp-block-video, .wp-video, .wp-block-table) {
	max-width: 100%;
}

.page-content .entry-content > :where(h2, h3, h4, h5, h6) {
	margin-top: var(--pfoa-space-6);
}

.page-content .entry-content h2.wp-block-heading {
	font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.page-content .entry-content > :first-child {
	margin-top: 0;
}

/* Ordinary interior Pages share a narrower centered shell with tight top rhythm. */
body.page .content-shell {
	--pfoa-content-width: 960px;
	padding-top: var(--pfoa-space-5);
}

/* PFOA 0.1.146 — single-pfoa_cat centered container */
body.single-pfoa_cat main.pfoa-cat-single {
	width: min(calc(100% - (2 * var(--pfoa-gutter, 20px))), 960px);
	margin-inline: auto;
}

/* PFOA 0.1.147 — centered reading column for ordinary interior Pages.
 * Outer shell (.content-shell, 960px, margin-inline:auto) is untouched.
 * This only centers the narrow prose measure inside it: max-width stays
 * 720px (var(--pfoa-prose-width)), text stays left-aligned, H1-H6
 * hierarchy/spacing/gutters unchanged. Scoped strictly to
 * body.page .entry-content direct prose children + entry-header; never
 * main, .content-shell width, blanket .entry-content, figures/galleries,
 * compat gca-columns, front-page hero, cat rule, nav/footer/dialogs.
 * NOTE (Volunteering mixed-media exception): pages with floated media
 * (.alignright/.alignleft, e.g. Volunteering) keep their float rules
 * untouched. A centered 720px measure next to a right-floated figure
 * narrows the wrap lane (e.g. DIRECT ANIMAL CONTACT h2 may wrap to two
 * lines at 1440px) — that is the deliberate, preserved float-wrap
 * presentation, not a defect. No float, figure, gallery, or compat
 * rules are changed here. Small viewports: 720px measure yields to the
 * 100%-minus-gutters shell so prose becomes full available width.
 */
body.page .page-content .entry-header,
body.page .entry-content > p,
body.page .entry-content > ul,
body.page .entry-content > ol,
body.page .entry-content > dl,
body.page .entry-content > blockquote,
body.page .entry-content > h1,
body.page .entry-content > h2,
body.page .entry-content > h3,
body.page .entry-content > h4,
body.page .entry-content > h5,
body.page .entry-content > h6,
body.page .entry-content > hr {
	max-width: var(--pfoa-prose-width);
	margin-inline: auto;
}

/* PFOA 0.1.149 — Volunteering float-associated exception (page-id-4589
 * only): unwrap ONLY the h2 + ul immediately beside each floated figure
 * (adjacent-sibling + chain). Figure 1 (CherylHollandVolunteer) is directly
 * followed by h2 DIRECT ANIMAL CONTACT + its ul; Figure 2 (Aug2013Event1)
 * is directly followed by h2 FUNDRAISING + its ul — flat direct children
 * of div.entry-content, no wrappers. These four elements return to
 * max-width:100%; margin-inline:0 so they use the full shell lane beside
 * the float. Everything else on the page (intro 4x p, HELP / COMMUNITY /
 * RECORD / SAFE HAVEN h2+ul groups, closing 2x p) falls back to the 0.1.147
 * 720px centered rule above, restoring standalone prose. Page scoping
 * (body.page-id-4589) fixes the 0.1.148 over-widening on other pages
 * (/fromthehomefront-2/, /petestateplan/, /pettidings/, Contact) that share
 * the body.page shell but have no float-associated prose. Min-width:721px
 * guard preserves the mobile float-stack rule (float:none; max-width:100%).
 */
@media (min-width: 721px) {
	body.page-id-4589 .page-content .entry-content > figure.alignright + h2,
	body.page-id-4589 .page-content .entry-content > figure.alignright + h2 + ul {
		max-width: 100%;
		margin-inline: 0;
	}
}

/* PFOA 0.1.150 — Volunteering float clearance (page-id-4589 only,
 * browser-tested): place RECORD KEEPING AND GENERAL OFFICE WORK below
 * Volunteering's second right-floated photograph while preserving its
 * centered 720px reading measure. The target h2 is the direct sibling
 * chain figure.alignright:nth-of-type(2) + h2(FUNDRAISING) +
 * ul + h2(RECORD KEEPING). Clearance only — no width, typography,
 * margin, float, or figure geometry change. Min-width:721px guard
 * preserves mobile float-stack behavior.
 */
@media (min-width: 721px) {
	body.page-id-4589 .entry-content > figure.alignright:nth-of-type(2) + h2 + ul + h2 {
		clear: right;
	}
}

/* Buttons, action links, and form controls. */
.pfoa-button,
.button,
.wp-element-button,
.wp-block-button__link,
.site-header button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	border: 1px solid var(--pfoa-cta-primary);
	border-radius: var(--pfoa-radius);
	padding: 0.65rem 1.1rem;
	background: var(--pfoa-cta-primary);
	color: var(--pfoa-text-on-action);
	font-family: var(--pfoa-font-display);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--pfoa-transition), color var(--pfoa-transition), border-color var(--pfoa-transition), transform var(--pfoa-transition);
}

.pfoa-button:hover,
.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.site-header button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: var(--pfoa-cta-hover);
	background: var(--pfoa-cta-hover);
	color: var(--pfoa-text-on-action);
	transform: translateY(-1px);
}

.pfoa-button:active,
.button:active,
.wp-element-button:active,
.wp-block-button__link:active,
.site-header button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background: var(--pfoa-cta-active);
	border-color: var(--pfoa-cta-active);
	color: var(--pfoa-text-on-action);
	transform: translateY(0);
}

.pfoa-button--secondary,
.button--secondary {
	border-color: var(--pfoa-action-primary);
	background: transparent;
	color: var(--pfoa-action-primary);
	font-family: var(--pfoa-font-display);
	font-weight: 700;
}

.pfoa-button--secondary:hover,
.button--secondary:hover {
	border-color: var(--pfoa-action-hover);
	background: var(--pfoa-action-hover);
	color: var(--pfoa-text-on-action);
}

.pfoa-text-link,
.text-link,
.entry-footer a,
.page-links a,
.posts-navigation a {
	display: inline-flex;
	align-items: center;
	gap: var(--pfoa-space-1);
	font-weight: 700;
	text-decoration: none;
}

.pfoa-text-link::after,
.text-link::after,
.entry-footer a::after,
.page-links a::after,
.posts-navigation a::after {
	color: var(--pfoa-color-gold-dark);
	content: "→";
	font-size: 1.1em;
	line-height: 1;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

label,
legend {
	font-weight: 700;
}

fieldset {
	min-width: 0;
	margin: 0 0 var(--pfoa-space-4);
	border: 1px solid var(--pfoa-border-default);
	padding: var(--pfoa-space-4);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="datetime-local"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	min-height: 2.75rem;
	border: 1px solid var(--pfoa-border-default);
	border-radius: var(--pfoa-radius);
	padding: 0.6rem 0.75rem;
	background: var(--pfoa-surface-page);
	color: var(--pfoa-text-primary);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
	width: auto;
	min-height: 0;
	accent-color: var(--pfoa-color-brand);
}

/* B5 keyboard focus (forms): native checkbox/radio keep brand
 * accent-color and UA size; guarantee a visible 3px ring with
 * offset so :focus-visible never renders ring-less if a UA or
 * plugin stylesheet suppresses outlines. Global :focus-visible
 * (L134) already covers these; this explicit rule is a guard.
 * Offset is >= 0 so overflow-x clipping guard (body L94) is safe. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 3px solid var(--pfoa-focus-ring);
	outline-offset: 2px;
}

/* Keep the form ring legible on dark structural surfaces. */
.site-header input[type="checkbox"]:focus-visible,
.site-header input[type="radio"]:focus-visible,
.site-footer input[type="checkbox"]:focus-visible,
.site-footer input[type="radio"]:focus-visible {
	outline-color: var(--pfoa-text-on-structural);
}

input[type="range"] {
	accent-color: var(--pfoa-color-brand);
}

input[type="file"] {
	max-width: 100%;
}

::placeholder {
	color: var(--pfoa-text-muted);
	opacity: 1;
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--pfoa-space-2);
	max-width: 42rem;
}

.search-form label {
	flex: 1 1 18rem;
}

.search-form input[type="search"] {
	margin-top: var(--pfoa-space-1);
}

/* Content media, captions, galleries, embeds, and alignments. */
.entry-content figure,
.entry-content .wp-caption {
	max-width: 100%;
}

.entry-content figure {
	margin-inline: 0;
}

.entry-content figcaption,
.entry-content .wp-caption-text,
.entry-content .gallery-caption {
	margin-top: var(--pfoa-space-1);
	color: var(--pfoa-text-muted);
	font-family: var(--pfoa-font-body);
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.5;
	text-align: left;
}

.entry-content .wp-caption,
.entry-content .wp-caption img {
	max-width: 100% !important;
}

.entry-content img,
.entry-content video,
.entry-content embed,
.entry-content object {
	max-width: 100%;
}

.entry-content video {
	height: auto;
}

/* Known video sources may use a video-oriented aspect ratio. */
.entry-content iframe[src*="youtube.com/embed"],
.entry-content iframe[src*="youtube-nocookie.com/embed"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.entry-content .wp-block-embed,
.entry-content .wp-block-video,
.entry-content .wp-video {
	max-width: 100%;
}

.entry-content .wp-block-embed__wrapper {
	max-width: 100%;
}

.entry-content .wp-block-embed__wrapper iframe {
	width: 100%;
}

.entry-content .alignleft,
.entry-content .alignright {
	max-width: 50%;
}

.entry-content .alignleft {
	float: left;
	margin: 0.35rem var(--pfoa-space-4) var(--pfoa-space-3) 0;
}

.entry-content .alignright {
	float: right;
	margin: 0.35rem 0 var(--pfoa-space-3) var(--pfoa-space-4);
}

.entry-content .aligncenter {
	display: block;
	margin-inline: auto;
}

.entry-content > .alignwide,
.entry-content > .alignfull {
	width: calc(100% + (2 * var(--pfoa-gutter)));
	max-width: var(--pfoa-wide-width);
	margin-inline: calc(-1 * var(--pfoa-gutter));
}

.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pfoa-space-3);
	margin-block: var(--pfoa-space-5);
}

.entry-content .gallery-columns-1 {
	grid-template-columns: 1fr;
}

.entry-content .gallery-columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entry-content .gallery-columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.entry-content .gallery-columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.entry-content .gallery-columns-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.entry-content .gallery-columns-7,
.entry-content .gallery-columns-8,
.entry-content .gallery-columns-9 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.entry-content .gallery .gallery-item {
	width: auto !important;
	min-width: 0;
	margin: 0;
	float: none;
	text-align: center;
}

.entry-content .gallery-icon a,
.entry-content .gallery-icon img {
	display: block;
	max-width: 100%;
}

.entry-content .gallery-icon img {
	width: 100%;
	height: auto;
}

/* Adopted 2026 (page 22514) square thumbnails only. */
body.page-id-22514 .entry-content .gallery-icon img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

/* Adopted 2026 (page 22514) presentation. */
body.page-id-22514 .entry-content > h1:first-child {
	font-size: clamp(1.5rem, 2.5vw + 1rem, 2rem);
	line-height: 1.25;
	margin-top: 0;
	margin-bottom: var(--pfoa-space-3);
}

body.page-id-22514 .entry-content > p {
	max-width: 65ch;
	margin-inline: auto;
	margin-top: 0;
	margin-bottom: var(--pfoa-space-3);
	/* PFOA 0.1.147 — later-order 65ch intro keeps the centered reading
	 * column (ties body.page group at 0,2,2, wins by order): 65ch measure
	 * with auto inline margins centers at ~392-1047 on 1440px. Text stays
	 * left-aligned; gallery/compat/float rules untouched. */
}

/* PFOA 0.1.174 — Adopted 2026 header alignment (page 22514 scope only):
 * center H1 + intro over the full gallery content width/centerline;
 * heading text/typography, URL/links, cards/spacing/chronology untouched.
 */
body.page-id-22514 .entry-content > h1:first-child,
body.page-id-22514 .entry-content > p:first-of-type {
	max-width: 100%;
	text-align: center;
}

/* PFOA 0.1.129 — Adopted 2026 vertical rhythm (page 22514 scope only):
 * row gap 12px -> 28px for breathing room between event rows; column gap
 * keeps the shared 12px gutter so N-slot widths, spans, and filler
 * geometry are untouched.
 */
body.page-id-22514 .entry-content .gallery {
	max-width: 100%;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 28px var(--pfoa-space-2);
	align-items: stretch;
}

body.page-id-22514 .entry-content .gallery-item {
	min-width: 0;
	max-width: 100%;
	padding: var(--pfoa-space-2);
	background: var(--pfoa-surface-page);
	border: 1.5px solid #aeb4cd;
	border-radius: var(--pfoa-radius);
}

body.page-id-22514 .entry-content .gallery-icon {
	margin-bottom: var(--pfoa-space-2);
}

body.page-id-22514 .entry-content .gallery-icon img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: calc(var(--pfoa-radius) - 1px);
}

body.page-id-22514 .entry-content .gallery-caption {
	text-align: center;
	font-family: var(--pfoa-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--pfoa-text-muted);
}

/* PFOA 0.1.55 — Normalize ordinary single-cat captions to bonded title hierarchy.
 * Child combinator (gallery > gallery-item) automatically excludes bonded inner
 * captions inside div.pfoa-adopted-bonded-group. Scoped to body.page-id-22514.
 */
body.page-id-22514 .entry-content .gallery > .gallery-item .gallery-caption {
	margin: var(--pfoa-space-3) 0 0;
	color: var(--pfoa-action-primary);
	font-family: var(--pfoa-font-display);
	font-style: normal;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	text-align: center;
}

@media (max-width: 1319px) {
	body.page-id-22514 .entry-content .gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	body.page-id-22514 .entry-content .gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	body.page-id-22514 .entry-content .gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.entry-content .gallery-caption {
	text-align: center;
}

/* Tables stay readable and contain legacy fixed widths without deleting data. */
.entry-content .table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.entry-content table {
	max-width: 100%;
	border: 1px solid var(--pfoa-border-default);
	border-collapse: collapse;
	border-spacing: 0;
}

.entry-content th,
.entry-content td {
	padding: var(--pfoa-space-2) var(--pfoa-space-3);
	border: 1px solid var(--pfoa-border-default);
	vertical-align: top;
	text-align: start;
}

.entry-content th {
	background: var(--pfoa-surface-subtle);
	font-weight: 700;
}

/*
 * Temporary migration bridge for legacy-assigned Pages. This supports only
 * the observed Genesis Columns Advanced half/third classes, their first-row
 * marker, and common clearfix markers. It is not a replacement framework.
 */
.page-content-compatibility .entry-content {
	min-width: 0;
	overflow-wrap: anywhere;
}

/*
 * Legacy inline dimensions are authored content. Cap only the elements that
 * can escape the Page column; keep inline colors and typography intact until
 * content cleanup can make an editorial decision about them.
 */
.page-content-compatibility .entry-content :where(div, section, article, p, figure, table, img, iframe, video, embed, object, td, th)[style*="width"],
.page-content-compatibility .entry-content :where(div, section, article, p, figure, table, img, iframe, video, embed, object, td, th)[width] {
	max-width: 100%;
}

.page-content-compatibility .entry-content :where(div, section, article, p, figure, table, img, iframe, video, embed, object, td, th)[style*="min-width"] {
	min-width: 0 !important;
}

.page-content-compatibility .entry-content .gca-column {
	min-width: 0;
}

.page-content-compatibility .entry-content .gca-column.one-half,
.page-content-compatibility .entry-content .gca-column.one-third {
	float: left;
	margin-left: 0;
	margin-right: 0;
	padding-inline: var(--pfoa-space-2);
}

.page-content-compatibility .entry-content .gca-column.one-half {
	width: 50%;
}

.page-content-compatibility .entry-content .gca-column.one-third {
	width: 33.333%;
}

.page-content-compatibility .entry-content .gca-column.first,
.page-content-compatibility .entry-content .first,
.page-content-compatibility .entry-content .gca-column:first-child {
	clear: left;
}

.page-content-compatibility .entry-content .clear {
	clear: both;
}

.page-content-compatibility .entry-content :where(.clearfix, .gca-columns)::after,
.page-content-compatibility .entry-content::after {
	display: table;
	clear: both;
	content: "";
}

/* Legacy media stays contained; only the known video rule above assumes 16:9. */
.page-content-compatibility .entry-content :where(iframe, embed, object) {
	display: block;
	max-width: 100%;
}

/* Legacy content tables keep the table grid so multi-column weekly entries
 * stay readable. The previous display:block scroll surface destroyed the grid
 * and collapsed over-declared fixed-layout cells (4x width="50%") into
 * character-wide columns. Fixed layout with full width distributes those
 * cells evenly; long entries wrap via the inherited overflow-wrap on the
 * compat container. Native Table blocks keep their own wrapper behavior and
 * the normal table display model. */
.page-content-compatibility .entry-content table:not(.wp-block-table table) {
	display: table;
	table-layout: fixed;
	width: 100%;
	max-width: 100%;
}

/* Legacy bordered index tables (Pet Tidings Past Issues pattern).
 * Structural only: border="1", no th/thead, no images, width-declared cells.
 * Excludes consistent data tables (Events Calendar: border="1" but no
 * td[width]), photo-grids (no border="1", contains images), and Home Front
 * (border="0"). Fixed layout collapses these because the first row declares
 * fewer cells than later rows; auto layout restores the intended columns
 * while staying inside the content shell. */
.page-content-compatibility .entry-content table[border="1"]:not(:has(th)):not(:has(thead)):not(:has(td img)):has(td[width]) {
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	table-layout: auto;
}
.page-content-compatibility .entry-content table[border="1"]:not(:has(th)):not(:has(thead)):not(:has(td img)):has(td[width]) td {
	width: auto;
	overflow-wrap: normal;
	word-break: normal;
}
.page-content-compatibility .entry-content table[border="1"]:not(:has(th)):not(:has(thead)):not(:has(td img)):has(td[width]) td:first-child {
	white-space: nowrap;
}

/* Legacy photo-grid tables stay borderless and centered (staff/board/facilities).
 * Structural only: no th/thead, no explicit border="1", contains images.
 * Ordinary data tables (border="1", th/thead, wp-block-table) keep generic borders. */
.page-content .entry-content table:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead)):has(td img) {
	width: auto;
	max-width: 100%;
	table-layout: auto;
	margin-inline: auto;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}

.page-content .entry-content table:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead)):has(td img) td {
	border: 0;
	padding: 4px;
	background: transparent;
	vertical-align: top;
	text-align: center;
}

.page-content .entry-content table:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead)):has(td img) img {
	display: block;
	margin-inline: auto;
	height: auto;
}

/* PFOA 0.1.162 — Staff roster (page-id-4968, #staff-roster): remove persistent
 * underlines. Color is owned by page content (navy #000080); hover/focus
 * underline and theme focus ring preserve keyboard visibility. Scoped to
 * Staff only; ordinary content links keep global underline styling.
 * Consolidated in B3: decoration now owned by the 0.1.235 sitewide rule. */
body.page-id-4968 #staff-roster a:focus-visible {
	outline: 3px solid var(--pfoa-focus-ring);
	outline-offset: 3px;
}

/* Caption companion table immediately following a photo-grid (facilities pattern). */
.page-content .entry-content table:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead)):has(td img) + table:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead)) {
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}

.page-content .entry-content table:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead)):has(td img) + table:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead)) td {
	border: 0;
	background: transparent;
	text-align: center;
	vertical-align: top;
}

/* Legacy text-menu tables (Home Front Week-NNN pattern) + singleton video containment.
 * Structural only: border="0", no th/thead, no images. Data tables
 * (border="1", th/thead) and photo-grids (td img) are explicitly excluded. */
.page-content-compatibility .entry-content table[border="0"]:not(:has(th)):not(:has(thead)):not(:has(td img)):not(:has(iframe)) {
	width: auto;
	max-width: 100%;
	margin-inline: auto;
	table-layout: auto;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}
.page-content-compatibility .entry-content table[border="0"]:not(:has(th)):not(:has(thead)):not(:has(td img)):not(:has(iframe)) td {
	width: auto;
	border: 0;
	padding: var(--pfoa-space-1) var(--pfoa-space-3);
	background: transparent;
	text-align: center;
	vertical-align: top;
}
.page-content-compatibility .entry-content table[border="0"]:not(:has(th)):not(:has(thead)):not(:has(td img)):has(iframe) {
	width: min(100%, 35rem);
	max-width: 100%;
	margin-inline: auto;
	table-layout: auto;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}
.page-content-compatibility .entry-content table[border="0"]:not(:has(th)):not(:has(thead)):not(:has(td img)):has(iframe) td {
	border: 0;
	background: transparent;
	text-align: center;
	vertical-align: top;
}

.page-content-compatibility .entry-content :where(embed, object)[type="application/pdf"] {
	width: 100%;
	height: min(75vh, 48rem);
}

/*
 * Popup Maker compatibility bridge. Popup content and controls remain owned by
 * the plugin; these rules only keep observed legacy content inside its own
 * available width and preserve theme-visible keyboard focus.
 */
.pum-container .pum-content {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.pum-container .pum-content :where(div, section, article, p, figure, table, img, iframe, video, embed, object, td, th)[style*="width"],
.pum-container .pum-content :where(div, section, article, p, figure, table, img, iframe, video, embed, object, td, th)[width] {
	max-width: 100%;
}

.pum-container .pum-content :where(div, section, article, p, figure, table, img, iframe, video, embed, object, td, th)[style*="min-width"] {
	min-width: 0 !important;
}

.pum-container .pum-content :where(img, video, iframe, embed, object) {
	max-width: 100%;
}

.pum-container .pum-content :where(iframe, embed, object) {
	display: block;
}

/* Keep video treatment source-specific; arbitrary popup iframes keep authored dimensions. */
.pum-container .pum-content iframe[src*="youtube.com/embed"],
.pum-container .pum-content iframe[src*="youtube-nocookie.com/embed"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Tables without a content wrapper still get a local surface when authored wide. */
.pum-container .pum-content :where(table[width], table[style*="width"], table[style*="min-width"]) {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
}

.pum-container .pum-content :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], input[type="time"], input[type="month"], input[type="week"], input[type="datetime-local"], select, textarea) {
	max-width: 100%;
}

.pum-container .pum-content input[type="image"] {
	max-width: 100%;
	height: auto;
}

.pum-container :where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
	outline: 3px solid var(--pfoa-focus-ring);
	outline-offset: 3px;
}

/* Collection, error, and pagination surfaces. */
.post-list {
	display: grid;
	gap: var(--pfoa-space-5);
}

.post-summary,
.search-result {
	padding-bottom: var(--pfoa-space-4);
	border-bottom: 1px solid var(--pfoa-border-default);
}

.post-summary__thumbnail {
	display: block;
	margin-bottom: var(--pfoa-space-3);
}

.post-summary__thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}

.posts-navigation {
	display: flex;
	justify-content: space-between;
	margin-top: var(--pfoa-space-5);
}

.posts-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pfoa-space-3);
}

.not-found {
	max-width: 45rem;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed;
	top: var(--pfoa-space-3);
	left: var(--pfoa-space-3);
	z-index: 1000;
	width: auto;
	height: auto;
	padding: var(--pfoa-space-2) var(--pfoa-space-3);
	margin: 0;
	overflow: visible;
	clip: auto;
	background: var(--pfoa-surface-structural);
	color: var(--pfoa-text-on-structural);
	white-space: normal;
}

/* Site shell and Task 4A header/navigation. */
.skip-link {
	position: fixed;
	top: var(--pfoa-space-3);
	left: var(--pfoa-space-3);
	z-index: 1000;
	padding: var(--pfoa-space-2) var(--pfoa-space-3);
	transform: translateY(-200%);
	background: var(--pfoa-surface-structural);
	color: var(--pfoa-text-on-structural);
	font-weight: 700;
}

.skip-link:focus {
	transform: translateY(0);
	color: var(--pfoa-text-on-structural);
}

.site-header {
	position: relative;
	z-index: 30;
	background: var(--pfoa-surface-structural);
	color: var(--pfoa-text-on-structural);
}

.site-header__inner {
	/* The full menu needs the wide canvas; the compact header handles narrower widths. */
	width: calc(100% - (2 * var(--pfoa-structural-gutter)));
	max-width: none;
	margin-inline: auto;

	display: grid;
	align-items: center;
	grid-template-columns: minmax(9rem, 10rem) minmax(0, 1fr) auto;
	column-gap: var(--pfoa-space-3);
	min-height: 5.25rem;
}

.site-branding {
	grid-column: 1;
	min-width: 0;
	line-height: 1;
}

.site-branding a {
	display: inline-block;
	max-width: 100%;
	color: var(--pfoa-text-on-structural);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.35rem;
	font-weight: 700;
	text-decoration: none;
}

.site-branding .custom-logo-link {
	display: flex;
	align-items: center;
	max-width: 10rem;
}

.site-branding .custom-logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 3.5rem;
	object-fit: contain;
}

.main-navigation {
	grid-column: 2;
	min-width: 0;
	justify-self: end;
	font-family: var(--pfoa-font-display);
}

.primary-menu,
.primary-menu ul,
.site-footer .footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-menu {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

.primary-menu .menu-item {
	position: relative;
	margin: 0;
}

.primary-menu > .menu-item {
	display: flex;
	align-items: stretch;
}

.primary-menu > .menu-item + .menu-item {
	border-inline-start: 1px solid rgb(255 255 255 / 20%);
}

.primary-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0.65rem 0.6rem;
	color: var(--pfoa-text-on-structural);
	font-family: var(--pfoa-font-display);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.primary-menu > .menu-item > a:hover,
.primary-menu > .menu-item > a:focus-visible,
.primary-menu .current-menu-item > a,
.primary-menu > .menu-item:hover > a,
.primary-menu > .menu-item:focus-within > a,
.primary-menu > .menu-item.is-open > a {
	background: var(--pfoa-action-active);
	color: var(--pfoa-text-on-action);
}

@media (min-width: 1320px) {
	.primary-menu > .menu-item.current-menu-item > a {
		padding-inline: 0.35rem;
	}
}

/* Floating rounded-tab treatment (desktop only, >=1320px).
 * Highlighted top-level tabs float: 6px vertical + 4px horizontal inset
 * via margins on the highlighted <a> (margins live inside the stretch-
 * aligned flex item, so nav height / min-height are unchanged), with
 * 12px rounding on all four corners. Background + text colors come from
 * the base highlight rule above and are intentionally untouched.
 * Desktop hides .submenu-toggle (display:none), so the <a> is the whole
 * visible tab: no inner-edge squaring is applied. Dropdown anchoring is
 * preserved: .sub-menu is positioned against the <li> (top:100%), not
 * the <a>, so <a> margins do not move it. Mobile (<=1319px) untouched.
 * Single-highlight coordination below: while pointer/focus is elsewhere
 * in the nav, the current-page tab rests so exactly one blue tab shows.
 * PFOA 0.1.248: top-level current-menu-ancestor/parent alone no longer
 * takes the persistent highlight (Events Calendar lives under both HOW
 * TO HELP and ABOUT US, so ancestor status would light both parents at
 * rest). Ancestor selectors are intentionally absent here and in the base
 * highlight above; hover/focus-within/is-open and directly-current
 * (.current-menu-item) tabs keep the existing treatment. Sub-menu
 * ancestor/current highlighting below is unchanged, as are both Events
 * Calendar placements and the mobile (<=1319px) rules.
 */
@media (min-width: 1320px) {
	.primary-menu > .menu-item > a:hover,
	.primary-menu > .menu-item > a:focus-visible,
	.primary-menu > .menu-item.current-menu-item > a,
	.primary-menu > .menu-item:hover > a,
	.primary-menu > .menu-item:focus-within > a,
	.primary-menu > .menu-item.is-open > a {
		margin-block: 6px;
		margin-inline: 4px;
		border-radius: 12px;
	}

	/* While the nav carries hover/focus elsewhere, rest the current-page
	 * tab (transparent bg, resting text color, no float) so the blue tab
	 * follows the hovered/focused item. The :not guards keep the highlight
	 * when the current item itself is hovered, focused, or expanded —
	 * including submenu interaction, which keeps :hover/:focus-within on
	 * the parent <li>. Leaving the nav drops :hover/:focus-within, so the
	 * current-page highlight returns on its own. */
	.primary-menu:hover > .menu-item.current-menu-item:not(:hover):not(:focus-within):not(.is-open) > a,
	.primary-menu:focus-within > .menu-item.current-menu-item:not(:hover):not(:focus-within):not(.is-open) > a {
		background: transparent;
		color: var(--pfoa-text-on-structural);
		margin-block: 0;
		margin-inline: 0;
		border-radius: 0;
	}
}

.submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	min-width: 2rem;
	min-height: 3rem;
	margin: 0;
	border: 0;
	border-inline-start: 1px solid rgb(255 255 255 / 20%);
	border-radius: 0;
	padding: 0.5rem 0.35rem;
	background: transparent;
	color: var(--pfoa-text-on-structural);
	font-family: inherit;
	transform: none;
}

.submenu-toggle:hover,
.submenu-toggle:focus-visible,
.primary-menu > .menu-item:hover > .submenu-toggle,
.primary-menu > .menu-item:focus-within > .submenu-toggle,
.primary-menu > .menu-item.is-open > .submenu-toggle {
	border-color: rgb(48 45 43 / 25%);
	background: var(--pfoa-action-active);
	color: var(--pfoa-text-on-action);
	transform: none;
}

.submenu-toggle__icon {
	position: relative;
	display: block;
	width: 0.8rem;
	height: 0.8rem;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY(-0.18rem) rotate(45deg);
	transition: transform var(--pfoa-transition);
}

.submenu-toggle[aria-expanded="true"] .submenu-toggle__icon {
	transform: translateY(0.18rem) rotate(225deg);
}

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 40;
	display: block;
	min-width: 15rem;
	margin: 0;
	border-top: 3px solid var(--pfoa-color-gold);
	padding: 0.25rem 0;
	background: var(--pfoa-surface-structural);
	box-shadow: 0 0.5rem 1.5rem rgb(33 30 29 / 22%);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-0.35rem);
	visibility: hidden;
	transition: opacity var(--pfoa-transition), transform var(--pfoa-transition), visibility var(--pfoa-transition);
}

.primary-menu .menu-item:not(.is-dismissed):hover > .sub-menu,
.primary-menu .menu-item:not(.is-dismissed):focus-within > .sub-menu,
.primary-menu .menu-item.is-open > .sub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
	visibility: visible;
}

.primary-menu .sub-menu .menu-item {
	display: flex;
	align-items: stretch;
}

.primary-menu .sub-menu .menu-item + .menu-item {
	border-top: 1px solid rgb(255 255 255 / 20%);
}

.primary-menu .sub-menu a {
	width: 100%;
	min-height: 2.8rem;
	padding: 0.65rem 1rem;
	font-family: var(--pfoa-font-display);
	font-size: 0.82rem;
	white-space: normal;
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible,
.primary-menu .sub-menu .current-menu-item > a,
.primary-menu .sub-menu .current-menu-ancestor > a,
.primary-menu .sub-menu .menu-item:hover > a,
.primary-menu .sub-menu .menu-item:focus-within > a,
.primary-menu .sub-menu .menu-item.is-open > a {
	background: var(--pfoa-action-hover);
	color: var(--pfoa-text-on-action);
}

.primary-menu .sub-menu .submenu-toggle {
	min-height: 2.8rem;
	border-inline-start-color: rgb(255 255 255 / 20%);
}

.primary-menu .sub-menu .sub-menu {
	top: -0.25rem;
	inset-inline-start: 100%;
}

/* Keep the deepest branch inside the viewport when it starts near the edge. */
.primary-menu > .menu-item:nth-last-child(-n + 3) .sub-menu .sub-menu {
	inset-inline-start: auto;
	inset-inline-end: 100%;
}

.site-header__donate {
	grid-column: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 5.25rem;
	min-height: 2.75rem;
	margin-inline-start: var(--pfoa-space-2);
	border: 1px solid var(--pfoa-cta-primary);
	border-radius: var(--pfoa-radius);
	padding: 0.65rem 0.95rem;
	background: var(--pfoa-cta-primary);
	color: var(--pfoa-text-on-action);
	font-family: var(--pfoa-font-display);
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--pfoa-transition), color var(--pfoa-transition), transform var(--pfoa-transition);
}

.site-header__donate:hover {
	border-color: var(--pfoa-cta-hover);
	background: var(--pfoa-cta-hover);
	color: var(--pfoa-text-on-action);
	transform: translateY(-1px);
}

/* Givebutter header widget: layout-only wrapper. Button styling comes from the plugin. */
/* PFOA volunteering scroll-anchor guard: the async <givebutter-widget>
 * custom element upgrades late (empty 0px slot at first paint, 48px once
 * its shadow DOM attaches). Reserve the measured rendered height so the
 * sticky header never changes size under late third-party load and the
 * browser has no height delta to scroll-anchor against. Width is left
 * unconstrained so the Donate button label can never wrap. */
.site-header__donate-widget {
	grid-column: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-inline-start: var(--pfoa-space-2);
}

/* Header utility navigation: transparent, secondary, above the main header row. */
.site-header__utility {
	background: transparent;
}

.site-header__utility .header-utility-navigation {
	width: calc(100% - (2 * var(--pfoa-structural-gutter)));
	max-width: none;
	margin-inline: auto;
}

.utility-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0.45rem 0 0;
	background: transparent;
	list-style: none;
}

.utility-menu .menu-item {
	margin: 0;
}

.utility-menu a {
	display: inline-block;
	padding: 0.25rem 0;
	color: var(--pfoa-action-primary);
	font-family: var(--pfoa-font-display);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
}

.utility-menu a:hover,
.utility-menu a:focus-visible,
.utility-menu .current-menu-item > a {
	color: var(--pfoa-action-hover);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* Desktop header utility: two restrained semantic groups rendered from the
 * same header_utility items (Follow us + Find us on). Text only, no icons,
 * same footprint and right-aligned position as the previous utility row.
 * Scoped to .site-header__utility so the mobile stacked utility is untouched.
 */
.utility-groups {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0.45rem 0 0;
	background: transparent;
	white-space: nowrap;
}

.utility-group {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 0.5rem;
	min-width: 0;
}

.utility-group__label {
	color: var(--pfoa-text-muted);
	font-family: var(--pfoa-font-display);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.4;
	text-transform: none;
	white-space: nowrap;
}

.utility-group__list {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: baseline;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.utility-group__item {
	display: inline-flex;
	align-items: baseline;
	margin: 0;
	white-space: nowrap;
}

.utility-group__item + .utility-group__item::before {
	content: "·";
	margin-inline: 0.5rem;
	color: var(--pfoa-text-muted);
}

.utility-group__list a {
	display: inline-block;
	padding: 0.25rem 0;
	color: var(--pfoa-action-primary);
	font-family: var(--pfoa-font-display);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.4;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}

.utility-group__list a:hover,
.utility-group__list a:focus-visible {
	color: var(--pfoa-action-hover);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* PFOA 0.1.163 — Approved royal-blue header/footer: utility row sits on the
 * royal header, so rest/hover/label/separator render white (was
 * action-primary/action-hover/muted, which fails on #002894). Hover keeps
 * underline; focus ring comes from the .site-header :focus-visible rule.
 * Scoped to .site-header so the mobile stacked utility stays consistent. */
.site-header .utility-menu a,
.site-header .utility-group__list a,
.site-header .utility-group__label {
	color: #FFFFFF;
}

.site-header .utility-group__item + .utility-group__item::before {
	color: #FFFFFF;
}

.site-header .utility-menu a:hover,
.site-header .utility-menu a:focus-visible,
.site-header .utility-menu .current-menu-item > a,
.site-header .utility-group__list a:hover,
.site-header .utility-group__list a:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.site-header__utility--mobile {
	display: none;
	background: transparent;
}

.menu-toggle {
	display: none;
	grid-column: 4;
	align-items: center;
	justify-content: center;
	width: 3rem;
	min-width: 3rem;
	min-height: 3rem;
	margin: 0;
	border-color: var(--pfoa-action-primary);
	border-radius: var(--pfoa-radius);
	padding: 0.5rem;
	background: var(--pfoa-action-primary);
	color: var(--pfoa-text-on-action);
	transform: none;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
	border-color: var(--pfoa-action-hover);
	background: var(--pfoa-action-hover);
	color: var(--pfoa-text-on-action);
	transform: none;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
	display: block;
	width: 1.2rem;
	height: 2px;
	background: currentColor;
	content: "";
	transition: transform var(--pfoa-transition), opacity var(--pfoa-transition);
}

.menu-toggle__icon {
	position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
	position: absolute;
	left: 0;
}

.menu-toggle__icon::before {
	top: -0.4rem;
}

.menu-toggle__icon::after {
	top: 0.4rem;
}

.site-header.is-menu-open .menu-toggle__icon {
	background: transparent;
}

.site-header.is-menu-open .menu-toggle__icon::before {
	transform: translateY(0.4rem) rotate(45deg);
}

.site-header.is-menu-open .menu-toggle__icon::after {
	transform: translateY(-0.4rem) rotate(-45deg);
}

/* With scripts disabled, all links remain visible and the buttons disappear. */
.no-js .submenu-toggle {
	display: none;
}

.no-js .menu-toggle {
	display: none;
}

/* Keep the navigation ring legible on structural and action surfaces. */
.site-header :where(a, button):focus-visible {
	outline: 3px solid var(--pfoa-text-on-structural);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--pfoa-surface-structural);
}

.site-footer {
	background: var(--pfoa-surface-footer);
	color: var(--pfoa-text-on-structural);
}

.site-footer__inner {
	padding-block: var(--pfoa-space-7) var(--pfoa-space-5);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pfoa-space-7) var(--pfoa-space-6);
}

.site-footer__group {
	min-width: 0;
}

.site-footer__heading {
	margin: 0 0 var(--pfoa-space-4);
	border-bottom: 2px solid var(--pfoa-color-gold);
	padding-bottom: var(--pfoa-space-2);
	color: var(--pfoa-text-on-structural);
	font-family: var(--pfoa-font-body);
	font-size: 1.05rem;
	letter-spacing: 0.035em;
	text-transform: uppercase;
}

.site-footer__brand {
	margin-bottom: var(--pfoa-space-4);
}

.site-footer__brand .custom-logo-link {
	display: inline-flex;
	max-width: 100%;
}

.site-footer__brand .custom-logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 5rem;
	object-fit: contain;
}

.site-footer__title {
	display: inline-block;
	color: var(--pfoa-text-on-structural);
	font-family: var(--pfoa-font-display);
	font-size: clamp(1.45rem, 2.5vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.site-footer__title:hover {
	background: var(--pfoa-action-hover);
	color: var(--pfoa-text-on-action);
}

.site-footer__description,
.site-footer__support-copy {
	color: var(--pfoa-text-on-structural);
	font-family: var(--pfoa-font-body);
}

.site-footer__description {
	max-width: 28ch;
	margin: 0;
}

.site-footer .footer-menu {
	display: grid;
	gap: var(--pfoa-space-2);
}

.site-footer .footer-menu .menu-item {
	margin: 0;
}

.site-footer .footer-menu .sub-menu {
	margin-block: var(--pfoa-space-1) 0;
	border-inline-start: 1px solid rgb(255 255 255 / 45%);
	padding-inline-start: var(--pfoa-space-3);
}

.site-footer .footer-menu a {
	display: inline;
	color: var(--pfoa-text-on-structural);
	font-family: var(--pfoa-font-body);
	line-height: 1.45;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	transition: color var(--pfoa-transition), background-color var(--pfoa-transition);
}

.site-footer .footer-menu a:hover {
	background: var(--pfoa-action-hover);
	color: var(--pfoa-text-on-action);
}

.site-footer__contact {
	margin: 0;
	font-family: var(--pfoa-font-body);
}

.site-footer__contact p {
	margin: 0 0 var(--pfoa-space-3);
}

.site-footer__contact p:last-child {
	margin-bottom: 0;
}

.site-footer__contact strong,
.site-footer__contact span,
.site-footer__contact a {
	display: block;
}

.site-footer__contact strong {
	margin-bottom: 0.15rem;
	color: var(--pfoa-text-on-structural);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.site-footer__contact span,
.site-footer__contact a {
	color: var(--pfoa-text-on-structural);
	font-style: normal;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.site-footer__contact a:hover {
	background: var(--pfoa-action-hover);
	color: var(--pfoa-text-on-action);
}

.site-footer__support-copy {
	margin-bottom: var(--pfoa-space-3);
}

.site-footer__donate {
	margin-bottom: var(--pfoa-space-5);
}

.site-footer__support-navigation,
.site-footer__social-navigation {
	margin-top: var(--pfoa-space-4);
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pfoa-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social li {
	margin: 0;
}

.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	border: 1px solid var(--pfoa-text-on-structural);
	border-radius: 999px;
	padding: 0.55rem 0.85rem;
	color: var(--pfoa-text-on-structural);
	font-family: var(--pfoa-font-body);
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	transition: color var(--pfoa-transition), background-color var(--pfoa-transition), border-color var(--pfoa-transition);
}

.site-footer__social-link:hover {
	border-color: var(--pfoa-text-on-structural);
	background: var(--pfoa-text-on-structural);
	color: var(--pfoa-action-hover);
}

.site-footer__legal-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--pfoa-space-4) var(--pfoa-space-6);
	margin-top: var(--pfoa-space-7);
	border-top: 1px solid rgb(255 255 255 / 45%);
	padding-top: var(--pfoa-space-4);
}

.site-footer .site-info {
	min-width: 0;
	font-family: var(--pfoa-font-body);
	font-size: 0.875rem;
}

.site-footer .site-info p {
	margin: 0;
}

.site-footer .site-info a {
	color: var(--pfoa-text-on-structural);
	font-weight: 700;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.site-footer__legal-navigation {
	max-width: 100%;
}

.site-footer__legal-menu.footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--pfoa-space-2) var(--pfoa-space-4);
}

.site-footer :where(a, button):focus-visible {
	outline: 3px solid var(--pfoa-text-on-structural);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--pfoa-surface-footer);
}

@media (max-width: 1319px) {
	:root {
		--pfoa-gutter: 24px;
		--pfoa-section-space: clamp(3.25rem, 6vw, 4rem);
	}

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-header__inner {
		width: calc(100% - (2 * var(--pfoa-gutter)));
		grid-template-columns: minmax(0, 1fr) auto auto;
		row-gap: var(--pfoa-space-3);
		padding-block: var(--pfoa-space-3);
	}

	.site-branding {
		grid-column: 1;
		grid-row: 1;
	}

	.site-branding .custom-logo-link {
		max-width: min(12rem, 100%);
	}

	.main-navigation {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		justify-self: stretch;
	}

	.site-header__donate {
		grid-column: 2;
		grid-row: 1;
		margin-inline-start: 0;
	}

	.site-header__donate-widget {
		grid-column: 2;
		grid-row: 1;
		margin-inline-start: 0;
	}

	.menu-toggle {
		display: inline-flex;
		grid-column: 3;
		grid-row: 1;
	}

	body.js .main-navigation[hidden] {
		display: none;
	}

	.site-header__utility {
		display: none;
	}

	.site-header__utility--mobile {
		display: block;
		border-top: 1px solid rgb(255 255 255 / 22%);
		margin-top: var(--pfoa-space-2);
		padding-top: var(--pfoa-space-2);
	}

	.site-header__utility--mobile .utility-menu {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 0;
	}

	.site-header__utility--mobile .utility-menu a {
		display: block;
		min-height: 2.75rem;
		padding: 0.7rem 1rem;
		font-size: 0.875rem;
		line-height: 1.4;
	}

	.primary-menu {
		align-items: stretch;
		flex-direction: column;
		width: 100%;
	}

	.primary-menu .menu-item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 8px;
	}

	.primary-menu > .menu-item + .menu-item,
	.primary-menu .sub-menu .menu-item + .menu-item {
		border-top: 1px solid rgb(255 255 255 / 22%);
		border-inline-start: 0;
	}

	.primary-menu a {
		min-height: 3.25rem;
		padding: 0.8rem 1rem;
		font-size: 0.875rem;
		line-height: 1.3;
		white-space: normal;
	}

	.primary-menu > .menu-item > a {
		background: var(--pfoa-surface-structural);
	}

	.primary-menu > .menu-item > a:hover,
	.primary-menu > .menu-item > a:focus-visible,
	.primary-menu > .menu-item:focus-within > a,
	.primary-menu > .menu-item.is-open > a,
	.primary-menu > .menu-item.current-menu-item > a,
	.primary-menu > .menu-item.current-menu-ancestor > a {
		background: var(--pfoa-action-hover);
		color: var(--pfoa-text-on-action);
	}

	.primary-menu .submenu-toggle {
		width: 2.75rem;
		min-width: 2.75rem;
		min-height: 2.75rem;
		margin-block: 4px;
		border: 0;
		border-radius: 8px;
		background: var(--pfoa-surface-structural);
	}

	.primary-menu .submenu-toggle:hover,
	.primary-menu .submenu-toggle:focus-visible,
	.primary-menu .menu-item.is-open > .submenu-toggle {
		border-color: rgb(255 255 255 / 22%);
		background: var(--pfoa-action-hover);
		color: var(--pfoa-text-on-action);
	}

	.primary-menu .sub-menu {
		position: static;
		grid-column: 1 / -1;
		width: 100%;
		min-width: 0;
		border-top: 0;
		padding: 0;
		background: var(--pfoa-action-hover);
		box-shadow: none;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		visibility: visible;
	}

	body.js .primary-menu .sub-menu[hidden] {
		display: none;
	}

	.primary-menu .sub-menu a {
		min-height: 3rem;
		border-inline-start: 2px solid rgb(233 173 78 / 40%);
		padding-block: 0.6rem;
		padding-inline-start: calc(2rem - 2px);
		font-size: 0.875rem;
		line-height: 1.3;
	}

	.primary-menu .sub-menu a:hover,
	.primary-menu .sub-menu a:focus-visible,
	.primary-menu .sub-menu .menu-item:hover > a,
	.primary-menu .sub-menu .menu-item:focus-within > a,
	.primary-menu .sub-menu .menu-item.is-open > a,
	.primary-menu .sub-menu .current-menu-item > a,
	.primary-menu .sub-menu .current-menu-ancestor > a {
		background: var(--pfoa-action-active);
		color: var(--pfoa-text-on-action);
	}

	/* Nested items use the same link + toggle grid as L1 so the L3
	 * submenu (grid-column 1 / -1 below) stays full-width in-flow
	 * beneath its parent instead of sharing a flex row with it. */
	.primary-menu .sub-menu .menu-item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 8px;
	}

	.primary-menu .sub-menu .submenu-toggle {
		width: 2.75rem;
		min-width: 2.75rem;
		min-height: 2.75rem;
		margin-block: 2px;
		border: 0;
		border-radius: 8px;
		background: var(--pfoa-action-hover);
	}

	.primary-menu .sub-menu .submenu-toggle:hover,
	.primary-menu .sub-menu .submenu-toggle:focus-visible,
	.primary-menu .sub-menu .menu-item.is-open > .submenu-toggle {
		border-color: transparent;
		background: var(--pfoa-action-active);
		color: var(--pfoa-text-on-action);
	}

	.primary-menu .sub-menu .sub-menu,
	.primary-menu > .menu-item:nth-last-child(-n + 3) .sub-menu .sub-menu {
		position: static;
		top: auto;
		inset: auto;
		inset-inline-start: auto;
		inset-inline-end: auto;
	}

	.primary-menu .sub-menu .sub-menu a {
		border-inline-start: 2px solid rgb(233 173 78 / 40%);
		padding-block: 0.6rem;
		padding-inline-start: calc(3rem - 2px);
		background: var(--pfoa-surface-footer);
	}

	.primary-menu .sub-menu .sub-menu .submenu-toggle {
		background: var(--pfoa-surface-footer);
	}

	.no-js .primary-menu .sub-menu {
		display: grid;
	}
}

@media (max-width: 720px) {
	:root {
		--pfoa-gutter: 20px;
		--pfoa-section-space: clamp(2.5rem, 8vw, 3rem);
	}

	.entry-content > .alignwide,
	.entry-content > .alignfull {
		width: 100%;
		margin-inline: 0;
	}

	.page-content-compatibility .entry-content .gca-column.one-half,
	.page-content-compatibility .entry-content .gca-column.one-third {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-inline: 0;
	}

	.entry-content .alignleft,
	.entry-content .alignright {
		float: none;
		max-width: 100%;
		margin-inline: auto;
	}

	.entry-content .gallery,
	.entry-content .gallery-columns-4,
	.entry-content .gallery-columns-5,
	.entry-content .gallery-columns-6,
	.entry-content .gallery-columns-7,
	.entry-content .gallery-columns-8,
	.entry-content .gallery-columns-9 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.entry-content .gallery-columns-1 {
		grid-template-columns: 1fr;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
	}

	.site-footer__legal-row {
		flex-direction: column;
	}

	.site-footer__legal-menu.footer-menu {
		align-items: flex-start;
		flex-direction: column;
		justify-content: flex-start;
	}

	body.page .content-shell {
		padding-top: var(--pfoa-space-3);
	}
}

@media (min-width: 1320px) {
	.site-header button.menu-toggle {
		display: none;
	}

	.primary-menu .submenu-toggle {
		display: none;
		width: 0;
		min-width: 0;
		min-height: 0;
		margin: 0;
		border: 0;
		padding: 0;
	}

	/* B5 keyboard reachability (desktop): the toggle stays
	 * display:none by design — dropdowns open via :hover AND
	 * :focus-within on the parent item (L1532-1539), so Tab reaches
	 * every submenu link through its top-level link with the white
	 * header ring (L1863) and no button is needed. Widening the
	 * 32px toggle to 44px would distort the floating-tab geometry,
	 * so it keeps a spacing-adjacent exception (WCAG 2.5.8).
	 * Safety net only: if a desktop toggle ever becomes focusable
	 * (JS/breakpoint edge), expose it at 44px min-target with the
	 * legible header ring instead of leaving it hidden-but-focused.
	 * No impact on mouse layout at rest. */
	.primary-menu .submenu-toggle:focus-visible {
		display: inline-flex;
		width: auto;
		min-width: 2.75rem;
		min-height: 2.75rem;
	}

	.site-header {
		position: sticky;
		top: 0;
	}

	.admin-bar .site-header {
		top: 32px;
	}

	:where(.site-main, .site-footer) [id] {
		scroll-margin-top: 6.5rem;
	}

	.admin-bar :where(.site-main, .site-footer) [id] {
		scroll-margin-top: 8.5rem;
	}
}

@media (max-width: 480px) {
	.entry-content .gallery,
	.entry-content .gallery-columns-2,
	.entry-content .gallery-columns-3,
	.entry-content .gallery-columns-4,
	.entry-content .gallery-columns-5,
	.entry-content .gallery-columns-6,
	.entry-content .gallery-columns-7,
	.entry-content .gallery-columns-8,
	.entry-content .gallery-columns-9 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.entry-content .gallery-columns-1 {
		grid-template-columns: 1fr;
	}
}

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

/* Homepage structure and Task 5B hero/pathway treatment. */
.front-page-content .homepage-section {
	padding-block: var(--pfoa-section-space);
}

.front-page-content .homepage-section__header {
	margin-bottom: var(--pfoa-space-5);
}

.front-page-content .homepage-section__title {
	margin: 0;
}

.front-page-content .homepage-section__header--light .homepage-section__title {
	color: #ffffff;
}

/* Hero */
.front-page-content .homepage-hero {
	position: relative;
	display: flex;
	padding-block: 0;
	min-height: clamp(17.5rem, 36.4vw, 30.1rem);
	isolation: isolate;
	background:
		radial-gradient(circle at 90% 12%, rgb(233 173 78 / 28%), transparent 28%),
		linear-gradient(135deg, var(--pfoa-color-charcoal), var(--pfoa-color-brand));
	color: #ffffff;
	overflow: hidden;
}

.front-page-content .homepage-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: var(--pfoa-color-charcoal);
}

.front-page-content .homepage-hero__scrim {
	position: absolute;
	inset: 0;
	display: block;
	/* PFOA 0.1.163 — Hero brightness (was 78%/36%/18%). */
	background: linear-gradient(90deg, rgb(33 30 29 / 55%), rgb(33 30 29 / 25%) 64%, rgb(33 30 29 / 12%));
}

.front-page-content .homepage-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pfoa-hero-position, center center);
}

.front-page-content .homepage-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: inherit;
	pointer-events: none;
}

.front-page-content .homepage-hero__actions a,
.front-page-content .homepage-hero__actions button,
.front-page-content .homepage-hero__controls,
.front-page-content .homepage-hero__controls button,
.front-page-content .homepage-hero__nav {
	pointer-events: auto;
}

.front-page-content .homepage-hero__content {
	max-width: 54rem;
	padding-block: clamp(3.5rem, 9vw, 8rem);
}

.front-page-content .homepage-hero__site-name {
	margin: 0 0 var(--pfoa-space-3);
	color: var(--pfoa-color-gold);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1rem, 1.6vw, 1.35rem);
	letter-spacing: 0.02em;
	font-style: italic;
	font-weight: 700;
}

.front-page-content .homepage-hero__title {
	max-width: 11ch;
	margin: 0;
	color: #ffffff;
	font-family: var(--pfoa-font-display);
	font-weight: 700;
	font-size: clamp(2.75rem, 7vw, 5rem);
	letter-spacing: -0.025em;
	line-height: 1.02;
	text-shadow: 0 0.1em 0.8em rgb(33 30 29 / 22%);
}

.front-page-content .homepage-hero__title.scale-50 {
	font-size: clamp(1.375rem, 3.5vw, 2.5rem);
}

.front-page-content .homepage-hero__title.scale-60 {
	font-size: clamp(1.65rem, 4.2vw, 3rem);
}

.front-page-content .homepage-hero__title.scale-70 {
	font-size: clamp(1.925rem, 4.9vw, 3.5rem);
}

.front-page-content .homepage-hero__title.scale-80 {
	font-size: clamp(2.2rem, 5.6vw, 4rem);
}

.front-page-content .homepage-hero__title.scale-90 {
	font-size: clamp(2.475rem, 6.3vw, 4.5rem);
}

.front-page-content .homepage-hero__title.scale-100 {
	font-size: clamp(2.75rem, 7vw, 5rem);
}

.front-page-content .homepage-hero__title.scale-110 {
	font-size: clamp(3.025rem, 7.7vw, 5rem);
}

.front-page-content .homepage-hero__title.scale-120 {
	font-size: clamp(3.3rem, 8.4vw, 5rem);
}

.front-page-content .homepage-hero__title.headline-white {
	color: #ffffff;
}

.front-page-content .homepage-hero__title.headline-black {
	color: #000000;
}

/* PFOA 0.1.95 — Widen desktop hero headline measure (~3x ch, raised content cap; mobile/tablet-small untouched). */
@media (min-width: 721px) {
	.front-page-content .homepage-hero__content {
		max-width: 76rem;
	}

	.front-page-content .homepage-hero__title {
		max-width: 33ch;
	}
}

.front-page-content .homepage-hero--no-image {
	background:
		radial-gradient(circle at 85% 20%, rgb(233 173 78 / 24%), transparent 25%),
		linear-gradient(135deg, var(--pfoa-color-charcoal) 0%, var(--pfoa-color-brand) 70%, var(--pfoa-color-brand-dark) 100%);
}

.front-page-content .homepage-hero--no-image::after {
	position: absolute;
	top: 12%;
	right: -8%;
	width: clamp(16rem, 34vw, 30rem);
	aspect-ratio: 1;
	border: 1px solid rgb(255 255 255 / 20%);
	border-radius: 50%;
	box-shadow: 0 0 0 2rem rgb(255 255 255 / 4%), 0 0 0 5rem rgb(255 255 255 / 3%);
	content: "";
	pointer-events: none;
}

.front-page-content .homepage-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pfoa-space-3);
	margin-top: var(--pfoa-space-5);
}

.front-page-content .homepage-hero__actions .pfoa-button {
	min-width: 7.5rem;
	min-height: 3.25rem;
	padding: 0.85rem 1.5rem;
	font-size: 1.05rem;
}

.front-page-content .homepage-hero__secondary {
	border-color: rgb(255 255 255 / 78%);
	background: rgb(33 30 29 / 20%);
	color: #ffffff;
	font-family: var(--pfoa-font-display);
	font-weight: 700;
}

.front-page-content .homepage-hero__secondary:hover,
.front-page-content .homepage-hero__secondary:focus-visible {
	border-color: #ffffff;
	background: #ffffff;
	color: var(--pfoa-color-text);
}

/* PFOA 0.1.245 — Carousel CTA dual-ring keyboard focus. Green-only ring
 * measured 1.17-1.35:1 on dark photos; white inner + black outer stays
 * visible on light and dark regions. Scoped to carousel CTAs only; resting
 * appearance, global focus tokens, and unrelated buttons untouched. */
.front-page-content .homepage-hero--carousel .homepage-hero__actions .pfoa-button:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px #000000;
}

/* Hero carousel. Single-image layout above is unchanged; these rules only
   apply in carousel mode. The overlay content stays fixed while slides
   crossfade behind it. */
.front-page-content .homepage-hero--carousel .homepage-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.front-page-content .homepage-hero--carousel .homepage-hero__slide.is-active {
	opacity: 1;
}

/* PFOA 0.1.93 — Per-image carousel brightness: image pixels only. The custom
   property lives on the slide wrapper; the filter applies to the img only so
   headline/CTAs/scrim/arrows are unaffected. Single-image mode untouched. */
.front-page-content .homepage-hero--carousel .homepage-hero__slide .homepage-hero__image {
	filter: brightness(var(--pfoa-hero-brightness, 1));
}

/* PFOA 0.1.201 — Per-slide hero zoom + position. Zoom is a
 * unitless factor on the slide wrapper (--pfoa-hero-zoom, 0.5-1.5, default
 * 1) driving width/height so the image stays centered with cover crop;
 * 100% computes to exactly the pre-zoom framing. Position
 * (--pfoa-hero-position, default center center) flows through the base
 * .homepage-hero__image object-position rule above. Zoom-out (factor < 1)
 * exposes slide edges, so the slide carries the same image as a blurred
 * fill via --pfoa-hero-bg (set inline by homepage-hero.php; ::before
 * cannot read img src). The fill is blurred, dimmed, and overscaled to
 * hide its own edges, and only renders on .is-zoom-out slides. DOM order
 * keeps paint order unchanged: fill, image, scrim, link. No fixed pixel
 * sizes are used, so the 1440px (~482px cap) and 390px (~352px) hero
 * heights behave as before. Single-image mode is untouched. */
.front-page-content .homepage-hero--carousel .homepage-hero__slide {
	overflow: hidden;
}

.front-page-content .homepage-hero--carousel .homepage-hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	display: none;
	background-image: var(--pfoa-hero-bg, none);
	background-size: cover;
	background-position: var(--pfoa-hero-position, center center);
	background-repeat: no-repeat;
	filter: blur(20px) brightness(0.7);
	transform: scale(1.1);
	pointer-events: none;
}

.front-page-content .homepage-hero--carousel .homepage-hero__slide.is-zoom-out::before {
	display: block;
}

.front-page-content .homepage-hero--carousel .homepage-hero__slide .homepage-hero__image {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% * var(--pfoa-hero-zoom, 1));
	height: calc(100% * var(--pfoa-hero-zoom, 1));
	transform: translate(-50%, -50%);
}

/* PFOA 0.1.285 — Mobile stacked carousel. Panoramic artwork center-cropped
 * ~53-65% of its width in the tall mobile hero, and the overlaid site name /
 * headline / CTAs sat on the art. On mobile widths the carousel stacks: the
 * media layer joins normal flow at full width with every slide rendered
 * contain (complete artwork, never distorted), while the site name,
 * per-slide headline, and shared CTAs render below the image on the section
 * background. Slides grid-stack (all in grid-area 1/1, inactive slides
 * hidden but space-holding) so media height stays stable across rotation
 * with no layout shift; shorter slides center in the leftover charcoal band.
 * The overlay scrim is retired here (nothing overlays the art anymore) and
 * the zoom-out blurred fill is hidden (art is fully visible, so the fill
 * would only muddy it). Zoom-driven crop sizing is neutralized on mobile
 * only so artwork is never cropped; the brightness filter is retained.
 * Controls join normal flow below the content, which also fixes clipping in
 * short landscape. Applies to every slide, including the former 0.1.215
 * Dine Out exception whose slide-specific contain rule is retired by this
 * general layout (the homepage-hero.php tagger stays as a harmless hook).
 * Stored brightness/zoom/position data, the slide contract, rotation,
 * keyboard operation, and desktop (>=769px, except short landscape) cover
 * presentation are unchanged. */
@media (max-width: 768px), (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
	.front-page-content .homepage-hero--carousel {
		flex-direction: column;
		min-height: 0;
	}

	.front-page-content .homepage-hero--carousel .homepage-hero__media {
		position: relative;
		inset: auto;
		display: grid;
		width: 100%;
	}

	.front-page-content .homepage-hero--carousel .homepage-hero__slide {
		grid-area: 1 / 1;
		position: relative;
		inset: auto;
		align-self: center;
		width: 100%;
		visibility: hidden;
		transition: opacity 0.6s ease, visibility 0s linear 0.6s;
	}

	.front-page-content .homepage-hero--carousel .homepage-hero__slide.is-active {
		visibility: visible;
		transition: opacity 0.6s ease, visibility 0s;
	}

	.front-page-content .homepage-hero--carousel .homepage-hero__slide .homepage-hero__image {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		transform: none;
		object-fit: contain;
		object-position: center center;
	}

	.front-page-content .homepage-hero--carousel .homepage-hero__slide.is-zoom-out::before {
		display: none;
	}

	.front-page-content .homepage-hero--carousel .homepage-hero__scrim {
		display: none;
	}

	.front-page-content .homepage-hero--carousel .homepage-hero__inner {
		width: 100%;
		min-height: 0;
	}

	.front-page-content .homepage-hero--carousel .homepage-hero__controls {
		position: static;
		align-self: flex-end;
		margin: 0 var(--pfoa-gutter, 1.5rem) var(--pfoa-space-4);
	}
}

/* PFOA 0.1.285 — Reduced motion keeps the mobile stacked carousel
 * transition-free (the stacked rules above carry a delayed-visibility fade
 * that would otherwise outrank the base reduced-motion override). */
@media (max-width: 768px) and (prefers-reduced-motion: reduce), (max-width: 960px) and (max-height: 500px) and (orientation: landscape) and (prefers-reduced-motion: reduce) {
	.front-page-content .homepage-hero--carousel .homepage-hero__slide,
	.front-page-content .homepage-hero--carousel .homepage-hero__slide.is-active {
		transition: none;
	}
}

.front-page-content .homepage-hero__controls {
	position: absolute;
	z-index: 2;
	right: var(--pfoa-gutter, 1.5rem);
	bottom: 1.25rem;
	display: flex;
	gap: 0.5rem;
}

.front-page-content .homepage-hero__nav {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 78%);
	border-radius: 50%;
	background: rgb(33 30 29 / 40%);
	color: #ffffff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.front-page-content .homepage-hero__nav:hover,
.front-page-content .homepage-hero__nav:focus-visible {
	border-color: #ffffff;
	background: #ffffff;
	color: var(--pfoa-color-text);
}

@media (prefers-reduced-motion: reduce) {
	.front-page-content .homepage-hero--carousel .homepage-hero__slide {
		transition: none;
	}
}

/* Primary pathways */
/* PFOA 0.1.164 — Marilyn revised five-card palette (was #6B97C0,
 * now #D5E1ED; cards remain #FFFFFF). */
.front-page-content .homepage-pathways {
	background: #D5E1ED;
	color: var(--pfoa-text-primary);
	/* No section heading remains; keep a modest hero-to-cards gap. */
	padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 4vw, 3.5rem);
}

/* PFOA 0.1.19 — Card row shares the header/footer structural gutters so its
   edges align with header/footer content (scoped; other .content-container
   sections are unaffected). */
.front-page-content .homepage-pathways .content-container {
	width: calc(100% - (2 * var(--pfoa-structural-gutter)));
	max-width: none;
}

.front-page-content .homepage-pathways__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--pfoa-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.front-page-content .homepage-pathways__item {
	min-width: 0;
	margin: 0;
}

.front-page-content .homepage-pathway {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	border: 1px solid var(--pfoa-border-default);
	border-radius: var(--pfoa-radius);
	padding: clamp(1rem, 2vw, 1.5rem) var(--pfoa-space-4);
	background: #FFFFFF;
	text-align: center;
}

.front-page-content .homepage-pathway__link {
	color: var(--pfoa-text-primary);
	text-decoration: none;
	transition: background-color var(--pfoa-transition), border-color var(--pfoa-transition), box-shadow var(--pfoa-transition), transform var(--pfoa-transition);
}

.front-page-content .homepage-pathway__link:hover {
	border-color: var(--pfoa-action-primary);
	background: var(--pfoa-surface-tinted);
	color: var(--pfoa-text-primary);
	transform: translateY(-2px);
	box-shadow: 0 0.75rem 1.5rem rgb(33 30 29 / 16%);
}

.front-page-content .homepage-pathway__link:focus-visible {
	position: relative;
	z-index: 1;
	border-color: var(--pfoa-action-primary);
	background: var(--pfoa-surface-tinted);
	color: var(--pfoa-text-primary);
	outline-color: var(--pfoa-focus-ring);
}

.front-page-content .homepage-pathway__media {
	display: block;
	width: clamp(5.2rem, 10vw, 7.8rem);
	aspect-ratio: 1;
	margin-bottom: var(--pfoa-space-4);
	border: 2px solid var(--pfoa-accent);
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, rgb(255 255 255 / 24%), transparent 24%),
		linear-gradient(145deg, rgb(255 255 255 / 16%), rgb(33 30 29 / 24%));
	box-shadow: inset 0 0 0 0.65rem rgb(33 30 29 / 10%);
}

.front-page-content .homepage-pathway__media-mark {
	display: grid;
	height: 100%;
	place-items: center;
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 0.1em 0.5em rgb(33 30 29 / 30%);
}

.front-page-content .homepage-pathway__media-image {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.front-page-content .homepage-pathway__title {
	margin: 0 0 var(--pfoa-space-3);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: calc(1.08em * 2);
	color: var(--pfoa-text-primary);
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	line-height: 1.08;
	overflow-wrap: break-word;
}

.front-page-content .homepage-pathway__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	margin-top: auto;
	border: 1px solid var(--pfoa-cta-primary);
	border-radius: var(--pfoa-radius);
	gap: var(--pfoa-space-2);
	padding: 0.65rem 1rem;
	background: var(--pfoa-cta-primary);
	color: var(--pfoa-text-on-action);
	font-family: var(--pfoa-font-display);
	font-weight: 700;
	line-height: 1.2;
}

.front-page-content .homepage-pathway__arrow {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.1em;
	line-height: 1;
}

.front-page-content .homepage-pathway--adoptable-cats .homepage-pathway__media {
	background:
		radial-gradient(circle at 35% 30%, rgb(255 255 255 / 28%), transparent 24%),
		linear-gradient(145deg, var(--pfoa-action-primary), var(--pfoa-surface-footer));
}

.front-page-content .homepage-pathway--home-front .homepage-pathway__media {
	background:
		radial-gradient(circle at 35% 30%, rgb(255 255 255 / 28%), transparent 24%),
		linear-gradient(145deg, var(--pfoa-action-active), var(--pfoa-surface-structural));
}

.front-page-content .homepage-pathway--potholders .homepage-pathway__media {
	background:
		radial-gradient(circle at 35% 30%, rgb(255 255 255 / 32%), transparent 24%),
		linear-gradient(145deg, var(--pfoa-surface-structural), var(--pfoa-action-hover));
}

.front-page-content .homepage-pathway--pet-tidings .homepage-pathway__media {
	background:
		radial-gradient(circle at 35% 30%, rgb(255 255 255 / 28%), transparent 24%),
		linear-gradient(145deg, var(--pfoa-surface-footer), var(--pfoa-action-primary));
}

.front-page-content .homepage-pathway--wishlist .homepage-pathway__media {
	background:
		radial-gradient(circle at 35% 30%, rgb(255 255 255 / 32%), transparent 24%),
		linear-gradient(145deg, var(--pfoa-action-hover), var(--pfoa-surface-structural));
}

.front-page-content .homepage-pathway--unavailable {
	border-color: var(--pfoa-border-default);
	background: var(--pfoa-surface-subtle);
}

.front-page-content .homepage-pathway--unavailable .homepage-pathway__media {
	opacity: 0.68;
}

.front-page-content .homepage-pathway__status,
.front-page-content .homepage-empty-state {
	color: var(--pfoa-text-muted);
	font-size: 0.9375rem;
}

.front-page-content .homepage-pathway__status {
	margin-top: auto;
	color: var(--pfoa-text-muted);
}

/* Adoption teaser */
.front-page-content .homepage-adoption {
	background: var(--pfoa-surface-page);
}

.front-page-content .homepage-adoption .homepage-section__eyebrow,
.front-page-content .homepage-news-events .homepage-section__eyebrow,
.front-page-content .homepage-adoption .homepage-card__eyebrow,
.front-page-content .homepage-news-events .homepage-card__eyebrow {
	margin: 0 0 var(--pfoa-space-2);
	color: var(--pfoa-color-brand);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.8125rem;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.front-page-content .homepage-adoption .homepage-section__header,
.front-page-content .homepage-news-events .homepage-section__header {
	max-width: 47rem;
}

.front-page-content .homepage-adoption .homepage-section__intro,
.front-page-content .homepage-news-events .homepage-section__intro {
	max-width: 42rem;
	margin: var(--pfoa-space-3) 0 0;
	color: var(--pfoa-text-muted);
}

.front-page-content .homepage-news-events .homepage-section__intro,
.front-page-content .homepage-promos .homepage-section__intro {
	color: var(--pfoa-text-primary);
}

.front-page-content .homepage-adoption__teaser {
	position: relative;
	display: grid;
	grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.1fr);
	align-items: stretch;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--pfoa-border-default);
	border-radius: var(--pfoa-radius);
	background: var(--pfoa-surface-page);
	box-shadow: 0 1rem 2.25rem rgb(48 45 43 / 7%);
}

.front-page-content .homepage-adoption__link {
	color: inherit;
	text-decoration: none;
	transition: border-color var(--pfoa-transition), box-shadow var(--pfoa-transition), transform var(--pfoa-transition);
}

.front-page-content .homepage-adoption__link:hover {
	border-color: var(--pfoa-action-primary);
	box-shadow: 0 1.25rem 2.5rem rgb(48 45 43 / 12%);
	color: inherit;
	transform: translateY(-2px);
}

.front-page-content .homepage-adoption__link:focus-visible {
	position: relative;
	z-index: 1;
	border-color: var(--pfoa-action-primary);
	box-shadow: 0 0 0 3px var(--pfoa-surface-page), 0 0 0 6px var(--pfoa-focus-ring);
}

.front-page-content .homepage-adoption__teaser--unavailable {
	background: linear-gradient(135deg, var(--pfoa-color-background), var(--pfoa-color-outer));
}

.front-page-content .homepage-adoption__media {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: clamp(17rem, 29vw, 24rem);
	overflow: hidden;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	background:
		radial-gradient(circle at 78% 24%, rgb(233 173 78 / 42%), transparent 21%),
		linear-gradient(145deg, var(--pfoa-color-brand-dark), var(--pfoa-color-charcoal));
	color: #ffffff;
}

.front-page-content .homepage-adoption__media::before,
.front-page-content .homepage-adoption__media::after {
	position: absolute;
	border: 1px solid rgb(255 255 255 / 24%);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.front-page-content .homepage-adoption__media::before {
	width: clamp(13rem, 24vw, 21rem);
	aspect-ratio: 1;
	right: -4rem;
	bottom: -5rem;
	box-shadow: 0 0 0 1.5rem rgb(255 255 255 / 4%), 0 0 0 3rem rgb(255 255 255 / 3%);
}

.front-page-content .homepage-adoption__media::after {
	width: 5rem;
	aspect-ratio: 1;
	right: 20%;
	top: 18%;
	border-color: rgb(233 173 78 / 66%);
}

.front-page-content .homepage-adoption__media-kicker,
.front-page-content .homepage-adoption__media-note {
	position: relative;
	z-index: 1;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.8rem;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.front-page-content .homepage-adoption__media-word {
	position: relative;
	z-index: 1;
	align-self: center;
	margin-block: auto;
	color: #ffffff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2.4rem, 6vw, 5rem);
	font-style: italic;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 0.95;
	text-shadow: 0 0.1em 0.7em rgb(33 30 29 / 30%);
}

.front-page-content .homepage-adoption__media-note {
	align-self: flex-end;
	color: var(--pfoa-color-gold);
	font-size: 0.75rem;
}

.front-page-content .homepage-adoption__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	padding: clamp(1.5rem, 4vw, 3.5rem);
}

.front-page-content .homepage-adoption__content .homepage-card__eyebrow {
	margin-bottom: var(--pfoa-space-3);
}

.front-page-content .homepage-adoption__title {
	margin: 0 0 var(--pfoa-space-3);
	font-size: clamp(1.65rem, 3vw, 2.45rem);
	line-height: 1.05;
}

.front-page-content .homepage-adoption__description {
	max-width: 34rem;
	margin: 0;
	color: var(--pfoa-text-muted);
}

.front-page-content .homepage-adoption__action {
	margin-top: var(--pfoa-space-5);
}

.front-page-content .homepage-adoption__teaser--unavailable .homepage-adoption__media {
	background:
		radial-gradient(circle at 78% 24%, rgb(233 173 78 / 24%), transparent 21%),
		linear-gradient(145deg, var(--pfoa-color-muted), var(--pfoa-color-charcoal));
}

.front-page-content .homepage-adoption__teaser--unavailable .homepage-adoption__media-word,
.front-page-content .homepage-adoption__teaser--unavailable .homepage-adoption__media-note {
	opacity: 0.72;
}

.front-page-content .homepage-adoption__content .homepage-empty-state {
	margin: var(--pfoa-space-5) 0 0;
}

/* News and events */
.front-page-content .homepage-news-events {
	background: var(--pfoa-surface-subtle);
}

.front-page-content .homepage-news-events__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.95fr);
	gap: var(--pfoa-space-4);
}

.front-page-content .homepage-teaser {
	display: flex;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--pfoa-border-default);
	border-radius: var(--pfoa-radius);
	background: var(--pfoa-surface-page);
	box-shadow: 0 0.75rem 1.75rem rgb(48 45 43 / 5%);
}

.front-page-content .homepage-teaser__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	color: inherit;
	text-decoration: none;
	transition: border-color var(--pfoa-transition), box-shadow var(--pfoa-transition), transform var(--pfoa-transition), background-color var(--pfoa-transition);
}

.front-page-content .homepage-teaser__link:hover {
	background: #fffdfa;
	box-shadow: inset 0 0 0 1px var(--pfoa-action-primary);
	color: inherit;
	transform: translateY(-2px);
}

.front-page-content .homepage-teaser__link:focus-visible {
	position: relative;
	z-index: 1;
	box-shadow: inset 0 0 0 1px var(--pfoa-action-primary), 0 0 0 3px var(--pfoa-surface-subtle), 0 0 0 6px var(--pfoa-focus-ring);
}

.front-page-content .homepage-teaser__link--static {
	background: var(--pfoa-surface-page);
}

.front-page-content .homepage-teaser__media {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 5 / 2;
	min-height: 10rem;
	overflow: hidden;
	padding: var(--pfoa-space-4) var(--pfoa-space-5);
	background:
		radial-gradient(circle at 84% 18%, rgb(233 173 78 / 48%), transparent 24%),
		linear-gradient(135deg, var(--pfoa-color-brand), var(--pfoa-color-brand-dark));
	color: #ffffff;
}

.front-page-content .homepage-teaser__media::after {
	position: absolute;
	right: 9%;
	bottom: -45%;
	width: 10rem;
	aspect-ratio: 1;
	border: 1px solid rgb(255 255 255 / 28%);
	border-radius: 50%;
	box-shadow: 0 0 0 1.25rem rgb(255 255 255 / 4%);
	content: "";
	pointer-events: none;
}

.front-page-content .homepage-events-teaser .homepage-teaser__media {
	background:
		repeating-linear-gradient(135deg, transparent 0 1.75rem, rgb(255 255 255 / 6%) 1.75rem 1.85rem),
		linear-gradient(135deg, var(--pfoa-color-charcoal), var(--pfoa-color-brand));
}

.front-page-content .homepage-events-teaser .homepage-teaser__media::after {
	right: -2rem;
	bottom: -4rem;
	border-color: rgb(233 173 78 / 55%);
	box-shadow: 0 0 0 1.25rem rgb(233 173 78 / 10%), 0 0 0 2.5rem rgb(233 173 78 / 5%);
}

.front-page-content .homepage-teaser__media-word,
.front-page-content .homepage-teaser__media-note {
	position: relative;
	z-index: 1;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 700;
}

.front-page-content .homepage-teaser__media-word {
	font-size: clamp(2rem, 4vw, 3.25rem);
	letter-spacing: -0.03em;
	line-height: 1;
}

.front-page-content .homepage-teaser__media-note {
	align-self: flex-end;
	color: var(--pfoa-color-gold);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.front-page-content .homepage-teaser__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.front-page-content .homepage-teaser__body .homepage-card__eyebrow {
	margin-bottom: var(--pfoa-space-3);
}

.front-page-content .homepage-teaser__title {
	margin: 0 0 var(--pfoa-space-3);
	font-size: clamp(1.45rem, 2.5vw, 2rem);
	line-height: 1.08;
}

.front-page-content .homepage-teaser__description {
	max-width: 36rem;
	margin: 0;
	color: var(--pfoa-text-muted);
}

.front-page-content .homepage-teaser__action {
	margin-top: auto;
	padding-top: var(--pfoa-space-5);
}

.front-page-content .homepage-teaser--unavailable {
	background: linear-gradient(135deg, var(--pfoa-color-background), #f5f1eb);
}

.front-page-content .homepage-teaser--unavailable .homepage-teaser__media {
	background:
		radial-gradient(circle at 84% 18%, rgb(233 173 78 / 20%), transparent 24%),
		linear-gradient(135deg, var(--pfoa-color-muted), var(--pfoa-color-charcoal));
}

.front-page-content .homepage-teaser--unavailable .homepage-teaser__media-word,
.front-page-content .homepage-teaser--unavailable .homepage-teaser__media-note {
	opacity: 0.7;
}

.front-page-content .homepage-teaser--unavailable .homepage-empty-state {
	margin-top: var(--pfoa-space-5);
	font-size: 0.9375rem;
}

/* Promotional rail */
.front-page-content .homepage-promos {
	background: var(--pfoa-surface-subtle);
}

.front-page-content .homepage-promos .homepage-section__header,
.front-page-content .homepage-partners .homepage-section__header {
	max-width: 47rem;
}

.front-page-content .homepage-promos .homepage-section__eyebrow,
.front-page-content .homepage-partners .homepage-section__eyebrow {
	margin: 0 0 var(--pfoa-space-2);
	color: var(--pfoa-color-brand);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.8125rem;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.front-page-content .homepage-promos .homepage-section__intro,
.front-page-content .homepage-partners .homepage-section__intro {
	max-width: 42rem;
	margin: var(--pfoa-space-3) 0 0;
	color: var(--pfoa-text-muted);
}

.front-page-content .homepage-promos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--pfoa-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.front-page-content .homepage-promos__item {
	min-width: 0;
	margin: 0;
}

.front-page-content .homepage-promo {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--pfoa-border-default);
	border-radius: var(--pfoa-radius);
	background: var(--pfoa-surface-page);
	box-shadow: 0 0.75rem 1.75rem rgb(48 45 43 / 5%);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--pfoa-transition), box-shadow var(--pfoa-transition), transform var(--pfoa-transition), background-color var(--pfoa-transition);
}

.front-page-content .homepage-promo:hover {
	border-color: var(--pfoa-action-primary);
	background: #fffdfa;
	box-shadow: 0 1rem 2rem rgb(48 45 43 / 11%);
	color: inherit;
	transform: translateY(-2px);
}

.front-page-content .homepage-promo:focus-visible {
	position: relative;
	z-index: 1;
	border-color: var(--pfoa-action-primary);
	box-shadow: 0 0 0 3px var(--pfoa-surface-subtle), 0 0 0 6px var(--pfoa-focus-ring);
	color: inherit;
}

.front-page-content .homepage-promo__media {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 5 / 2;
	min-height: 9rem;
	overflow: hidden;
	padding: var(--pfoa-space-4) var(--pfoa-space-5);
	background:
		radial-gradient(circle at 82% 18%, rgb(233 173 78 / 48%), transparent 25%),
		linear-gradient(135deg, var(--pfoa-color-brand), var(--pfoa-color-brand-dark));
	color: #ffffff;
}

.front-page-content .homepage-promo__media::after {
	position: absolute;
	right: -2rem;
	bottom: -5rem;
	width: 12rem;
	aspect-ratio: 1;
	border: 1px solid rgb(255 255 255 / 28%);
	border-radius: 50%;
	box-shadow: 0 0 0 1.5rem rgb(255 255 255 / 5%), 0 0 0 3rem rgb(255 255 255 / 4%);
	content: "";
	pointer-events: none;
}

.front-page-content .homepage-promo__media-word,
.front-page-content .homepage-promo__media-note {
	position: relative;
	z-index: 1;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 700;
}

.front-page-content .homepage-promo__media-word {
	font-size: clamp(1.8rem, 3.5vw, 2.8rem);
	letter-spacing: -0.03em;
	line-height: 1;
}

.front-page-content .homepage-promo__media-note {
	align-self: flex-end;
	color: var(--pfoa-color-gold);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.front-page-content .homepage-promo--donate .homepage-promo__media {
	background:
		radial-gradient(circle at 82% 18%, rgb(255 255 255 / 32%), transparent 25%),
		linear-gradient(135deg, var(--pfoa-color-gold-dark), var(--pfoa-color-brand));
}

.front-page-content .homepage-promo--wishlist .homepage-promo__media {
	background:
		repeating-linear-gradient(135deg, transparent 0 1.6rem, rgb(255 255 255 / 7%) 1.6rem 1.7rem),
		linear-gradient(135deg, var(--pfoa-color-charcoal), var(--pfoa-color-brand));
}

.front-page-content .homepage-promo__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.front-page-content .homepage-promo__body .homepage-card__eyebrow {
	margin-bottom: var(--pfoa-space-3);
	color: var(--pfoa-color-brand);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.8125rem;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.front-page-content .homepage-promo__title {
	margin: 0 0 var(--pfoa-space-3);
	font-size: clamp(1.45rem, 2.5vw, 2rem);
	line-height: 1.08;
}

.front-page-content .homepage-promo__description {
	color: var(--pfoa-text-muted);
}

.front-page-content .homepage-promo__action {
	margin-top: auto;
	padding-top: var(--pfoa-space-5);
}

/* Partners */
.front-page-content .homepage-partners {
	background: var(--pfoa-surface-page);
}

.front-page-content .homepage-partners__grid,
.front-page-content .homepage-partners__empty {
	margin: 0;
	border-block: 1px solid var(--pfoa-border-default);
	background: var(--pfoa-surface-page);
}

.front-page-content .homepage-partners__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	gap: 1px;
	padding: 1px;
	list-style: none;
}

.front-page-content .homepage-partners__item {
	min-width: 0;
	margin: 0;
	background: var(--pfoa-surface-page);
}

.front-page-content .homepage-partner__link {
	display: grid;
	min-height: 8rem;
	place-items: center;
	padding: var(--pfoa-space-4);
	color: var(--pfoa-text-primary);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--pfoa-transition), box-shadow var(--pfoa-transition), color var(--pfoa-transition);
}

.front-page-content .homepage-partner__link:hover {
	background: #fffdfa;
	box-shadow: inset 0 0 0 2px var(--pfoa-color-gold);
	color: var(--pfoa-color-brand-dark);
}

.front-page-content .homepage-partner__link:focus-visible {
	position: relative;
	z-index: 1;
	box-shadow: inset 0 0 0 2px var(--pfoa-action-primary), 0 0 0 3px var(--pfoa-surface-page), 0 0 0 6px var(--pfoa-focus-ring);
}

.front-page-content .homepage-partner__logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 5.5rem;
	object-fit: contain;
}

.front-page-content .homepage-partner__name {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.05rem;
	font-weight: 700;
}

.front-page-content .homepage-partners__empty {
	display: grid;
	min-height: 8rem;
	place-items: center;
	padding: var(--pfoa-space-5);
	text-align: center;
}

.front-page-content .homepage-partners__empty .homepage-empty-state {
	max-width: 42rem;
	margin: 0;
}

.front-page-content .homepage-partners__link-wrap {
	margin: var(--pfoa-space-4) 0 0;
	text-align: center;
}

@media (max-width: 1319px) {
	.front-page-content .homepage-pathways__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.front-page-content .homepage-pathway__media {
		width: clamp(4.8rem, 13vw, 6.4rem);
	}
}

@media (max-width: 720px) {
	.front-page-content .homepage-section__header {
		margin-bottom: var(--pfoa-space-4);
	}

	.front-page-content .homepage-hero {
		min-height: clamp(22rem, 88vw, 32rem);
	}

	.front-page-content .homepage-hero__inner {
		align-items: center;
	}

	.front-page-content .homepage-hero__content {
		padding-block: var(--pfoa-space-6);
	}

	.front-page-content .homepage-hero__title {
		font-size: clamp(2rem, 10vw, 3rem);
	}

	.front-page-content .homepage-hero__title.scale-50 {
		font-size: clamp(1rem, 5vw, 1.5rem);
	}

	.front-page-content .homepage-hero__title.scale-60 {
		font-size: clamp(1.2rem, 6vw, 1.8rem);
	}

	.front-page-content .homepage-hero__title.scale-70 {
		font-size: clamp(1.4rem, 7vw, 2.1rem);
	}

	.front-page-content .homepage-hero__title.scale-80 {
		font-size: clamp(1.6rem, 8vw, 2.4rem);
	}

	.front-page-content .homepage-hero__title.scale-90 {
		font-size: clamp(1.8rem, 9vw, 2.7rem);
	}

	.front-page-content .homepage-hero__title.scale-100 {
		font-size: clamp(2rem, 10vw, 3rem);
	}

	.front-page-content .homepage-hero__title.scale-110 {
		font-size: clamp(2.2rem, 11vw, 3rem);
	}

	.front-page-content .homepage-hero__title.scale-120 {
		font-size: clamp(2.4rem, 12vw, 3rem);
	}

	.front-page-content .homepage-hero__title.headline-white {
		color: #ffffff;
	}

	.front-page-content .homepage-hero__title.headline-black {
		color: #000000;
	}

	.front-page-content .homepage-pathways__grid,
	.front-page-content .homepage-adoption__teaser,
	.front-page-content .homepage-news-events__grid,
	.front-page-content .homepage-promos__grid {
		grid-template-columns: 1fr;
	}

	.front-page-content .homepage-pathway {
		padding: var(--pfoa-space-4);
	}

	.front-page-content .homepage-adoption__media {
		min-height: 0;
		aspect-ratio: 5 / 3;
	}

	.front-page-content .homepage-teaser__media {
		min-height: 8rem;
	}

	.front-page-content .homepage-teaser,
	.front-page-content .homepage-promo {
		min-height: 0;
	}

	.front-page-content .homepage-promo__media {
		aspect-ratio: 5 / 2;
	}

	.front-page-content .homepage-partner__link {
		min-height: 6.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.front-page-content .homepage-pathway__link,
	.front-page-content .homepage-adoption__link,
	.front-page-content .homepage-teaser__link,
	.front-page-content .homepage-promo,
	.front-page-content .homepage-partner__link {
		transition-duration: 0.01ms !important;
	}
}

/* PFOA 0.1.8 — Desktop enlarged logo with header/hero overlap (CSS-only, 1.5x visual via transform).
 * P1 fix: shrink-wrap the logo link to its artwork (inline-flex + width:auto) so the
 * transformed anchor no longer fills the full 17rem branding column with invisible hit area. */
@media (min-width: 1320px) {
	.site-header {
		overflow: visible;
	}

	.site-header__inner {
		position: relative;
		grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr) auto;
		column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
		min-height: 4.5rem;
		overflow: visible;
	}

	.site-branding {
		position: absolute;
		inset-inline-start: 0;
		top: 0;
		width: 17rem;
		overflow: visible;
	}

	.site-branding .custom-logo-link {
		position: relative;
		display: inline-flex;
		width: auto;
		max-width: 17rem;
		transform: translateY(1.9rem) scale(1.5);
		transform-origin: left center;
	}

	.site-branding .custom-logo {
		width: auto;
		height: auto;
		max-width: 17rem;
		max-height: 7.5rem;
		object-fit: contain;
		filter: drop-shadow(0 0.5rem 1rem rgb(0 0 0 / 35%));
	}

	/* Rebalance: nav fills the middle track and ends with breathing room. */
	.main-navigation {
		justify-self: stretch;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-inline-end: 0.5rem;
	}

	/* Nudge hero copy clear of the overlapping logo. */
	.front-page-content .homepage-hero__content {
		padding-top: clamp(4.5rem, 9vw, 9rem);
		padding-bottom: 4rem;
	}
}

/* PFOA 0.1.6 — Compact guard: desktop overlap must never leak below 1320px. */
@media (max-width: 1319px) {
	.site-header,
	.site-header__inner {
		overflow: visible;
	}

	.site-branding {
		position: static;
		overflow: visible;
	}

	.site-branding .custom-logo-link {
		position: static;
		max-width: min(12rem, 100%);
		transform: none;
	}

	.site-branding .custom-logo {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 4rem;
		object-fit: contain;
		filter: none;
	}
}

/* PFOA 0.1.17 — Compact footer: tighter rhythm for the four-area layout. */
.site-footer--compact .site-footer__inner {
	padding-block: var(--pfoa-space-5) var(--pfoa-space-4);
}

.site-footer--compact .site-footer__grid {
	gap: var(--pfoa-space-5) var(--pfoa-space-6);
}

.site-footer--compact .site-footer__text {
	margin: 0;
	color: var(--pfoa-text-on-structural);
	font-style: normal;
	line-height: 1.5;
	overflow-wrap: break-word;
}

.site-footer--compact .site-footer__map-note {
	color: var(--pfoa-text-on-structural);
}

.site-footer--compact .site-footer__legal-row {
	margin-top: var(--pfoa-space-5);
}

/* PFOA 0.1.35 — Compact desktop homepage pathway tiles (wide-desktop only, CSS-only). */
@media (min-width: 1320px) {
	.front-page-content .homepage-pathway {
		display: grid;
		grid-template-columns: 4.5rem minmax(0, min(8rem, calc(100% - 5.5rem)));
		grid-template-rows: auto auto;
		align-items: center;
		justify-content: center;
		column-gap: var(--pfoa-space-3);
		row-gap: 0.25rem;
		padding: 0.75rem 1rem;
		text-align: left;
	}

	.front-page-content .homepage-pathway__media {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 4.5rem;
		height: 3.75rem;
		aspect-ratio: auto;
		margin: 0;
		border: 2px solid var(--pfoa-accent);
		border-radius: var(--pfoa-radius);
		box-shadow: none;
	}

	.front-page-content .homepage-pathway__media-image {
		width: 100%;
		height: 100%;
		border-radius: calc(var(--pfoa-radius) - 1px);
		object-fit: contain;
	}

	.front-page-content .homepage-pathway__title {
		grid-column: 2;
		grid-row: 1;
		align-items: center;
		justify-content: flex-start;
		min-height: 0;
		margin: 0;
		font-size: 1.1rem;
		line-height: 1.15;
		text-align: left;
	}

	.front-page-content .homepage-pathway__action {
		grid-column: 2;
		grid-row: 2;
		justify-content: flex-start;
		min-height: 0;
		margin: 0;
		border: 0;
		padding: 0;
		background: transparent;
		color: var(--pfoa-cta-primary);
		font-size: 0.875rem;
		line-height: 1.2;
	}

	.front-page-content .homepage-pathway__link:hover,
	.front-page-content .homepage-pathway__link:focus-visible {
		border-color: var(--pfoa-cta-primary);
	}
}

/* PFOA 0.1.39 — Adoptable Cats card grid modernization (visual only, CSS-only, DEV scope).
 * Scoped strictly to existing Cat Profiles markup (div.pfoa-cat-cards and descendants).
 * Does not alter markup, data attributes, dialog hooks, bonded-pair model, or lifecycle behavior.
 * Tokens reused: --pfoa-color-background, --pfoa-color-border, --pfoa-color-muted,
 * --pfoa-action-primary/hover, --pfoa-focus-ring, --pfoa-radius, --pfoa-space-*, --pfoa-transition.
 * Breakpoints reused from theme system: 1319px / 720px / 480px.
 * Content width: standard body.page 960px shell (AG-12 reuse, 0.1.171) —
 * the 0.1.170 scoped 1400px widening is removed (no replacement rule).
 * Reduced motion is covered by the theme's existing global prefers-reduced-motion rule.
 */
/* PFOA 0.1.171 — Adoptable Cats 6-track centered projection (visual only, CSS-only).
 * AG-12 reuse: reuses the accepted Adopted 2026 (page-id-22514) visual geometry
 * so Adoptable Cats (page-id-20323) renders at the same scale in the standard
 * 960px page shell — the 0.1.170 scoped 1400px widening is removed, no
 * replacement. Host: gap 28px row / 12px col (space-2), card padding space-2
 * (12px), 1.5px border, 5px radius, square cover thumbs, centered 1.05rem/700
 * Georgia action-primary captions (unchanged). Track math: single occupies 1
 * track = (100% - 5*gap-col)/6, bonded spans 2 tracks + 1 host gap =
 * 2*single + gap = (200% - 4*gap-col)/6. Centered flex wrapping absorbs
 * partial-row remainders as symmetric side margins, keeps DOM = visual =
 * keyboard order (no dense backfill, no order overrides). Bonded internal 2-up
 * grid keeps the 0.1.58 track-alignment formula recomputed for adopted tokens:
 * internal column gap = host gap (12px) + 2 x card inset (12px padding + 1px
 * border = 13px each) = 12+13+13 = 38px (adopted .pfoa-adopted-bonded-group
 * parity; supersedes the 66px host-gap-32 value). Badge, typography, hover,
 * bonded footer, and 2-up photo grid untouched. Breakpoints mirror adopted:
 * 6-col default → 4-col @≤1319px → 3-col @≤720px → 2-col @≤480px, bonded
 * spans 2 throughout (full row at ≤480px where 2 tracks = 100%).
 * Slot check (960px shell): single (960-60)/6 = 150px, photo ~123px —
 * adopted parity. No markup/JS/plugin/data changes.
 */
div.pfoa-cat-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px var(--pfoa-space-2);
	align-items: flex-start;
	align-content: flex-start;
}

div.pfoa-cat-cards article.pfoa-cat-card {
	box-sizing: border-box;
	flex: 0 1 calc((100% - 5 * var(--pfoa-space-2)) / 6);
	max-width: calc((100% - 5 * var(--pfoa-space-2)) / 6);
	min-width: 0;
	margin: 0;
	border: 1.5px solid var(--pfoa-color-border);
	border-radius: var(--pfoa-radius);
	padding: var(--pfoa-space-2);
	background: var(--pfoa-color-background);
	box-shadow: 0 1px 2px rgb(33 30 29 / 6%);
	transition: box-shadow var(--pfoa-transition), transform var(--pfoa-transition);
}

/* PFOA 0.1.171 — bonded card spans 2 tracks + 1 host gap in the centered
 * 6-track projection: 2*single + gap = (200% - 4*gap-col)/6. Placed here
 * (before the 1319/720/480 overrides below) so equal-specificity breakpoint
 * rules win at ≤1319px.
 */
div.pfoa-cat-cards > article.pfoa-cat-bonded-card {
	box-sizing: border-box;
	flex: 0 1 calc((200% - 4 * var(--pfoa-space-2)) / 6);
	max-width: calc((200% - 4 * var(--pfoa-space-2)) / 6);
}

div.pfoa-cat-cards a.pfoa-cat-card-media {
	display: block;
	border-radius: calc(var(--pfoa-radius) - 1px);
	overflow: hidden;
}

div.pfoa-cat-cards img.pfoa-cat-card-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: calc(var(--pfoa-radius) - 1px);
}

div.pfoa-cat-cards h3.pfoa-cat-card-title {
	margin: var(--pfoa-space-3) 0 0;
	color: var(--pfoa-action-primary);
	font-style: normal;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	overflow-wrap: break-word;
}

div.pfoa-cat-cards p.pfoa-cat-card-status,
div.pfoa-cat-cards p.pfoa-cat-card-note {
	margin: 0.25rem 0 0;
	color: var(--pfoa-text-muted);
	font-family: var(--pfoa-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	overflow-wrap: break-word;
}

div.pfoa-cat-cards .pfoa-cat-pair-left,
div.pfoa-cat-cards .pfoa-cat-pair-right {
	min-width: 0;
	overflow-wrap: break-word;
}

div.pfoa-cat-cards article.pfoa-cat-card-incomplete {
	background: var(--pfoa-color-background);
	opacity: 1;
}

div.pfoa-cat-cards article.pfoa-cat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgb(33 30 29 / 10%);
}

div.pfoa-cat-cards a.pfoa-cat-card-media:focus-visible {
	outline: 3px solid var(--pfoa-focus-ring);
	outline-offset: 3px;
}

@media (max-width: 1319px) {
	/* PFOA 0.1.171 — 4-track centered projection (adopted parity):
	 * single = (100% - 3*gap)/4, bonded = 2*single + gap = (200% - 2*gap)/4. */
	div.pfoa-cat-cards article.pfoa-cat-card {
		flex-basis: calc((100% - 3 * var(--pfoa-space-2)) / 4);
		max-width: calc((100% - 3 * var(--pfoa-space-2)) / 4);
	}

	div.pfoa-cat-cards > article.pfoa-cat-bonded-card {
		flex-basis: calc((200% - 2 * var(--pfoa-space-2)) / 4);
		max-width: calc((200% - 2 * var(--pfoa-space-2)) / 4);
	}
}

@media (max-width: 720px) {
	/* PFOA 0.1.171 — 3-track centered projection (adopted parity):
	 * single = (100% - 2*gap)/3, bonded = 2*single + gap = (200% - gap)/3.
	 * Host gap stays 28px row / 12px col at every breakpoint (adopted has no
	 * narrow gap change); bonded internal gap stays the adopted 38px. */
	div.pfoa-cat-cards article.pfoa-cat-card {
		flex-basis: calc((100% - 2 * var(--pfoa-space-2)) / 3);
		max-width: calc((100% - 2 * var(--pfoa-space-2)) / 3);
	}

	div.pfoa-cat-cards > article.pfoa-cat-bonded-card {
		flex-basis: calc((200% - var(--pfoa-space-2)) / 3);
		max-width: calc((200% - var(--pfoa-space-2)) / 3);
	}
}

@media (max-width: 480px) {
	/* PFOA 0.1.171 — 2-track centered projection (adopted parity):
	 * single = (100% - gap)/2; bonded spans 2 tracks = full row, matching
	 * adopted count-2 at ≤480px. Bonded 2-up photos retained (see
	 * .pfoa-cat-bonded-photos below); DOM = visual = keyboard order kept. */
	div.pfoa-cat-cards article.pfoa-cat-card {
		flex-basis: calc((100% - var(--pfoa-space-2)) / 2);
		max-width: calc((100% - var(--pfoa-space-2)) / 2);
	}

	div.pfoa-cat-cards > article.pfoa-cat-bonded-card {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* PFOA 0.1.40 — Bonded-pair combined card (presentation only).
 * Scoped strictly to incoming bonded markup (article.pfoa-cat-bonded-card and
 * descendants .pfoa-cat-bonded-photos, .pfoa-cat-bonded-footer) inside
 * div.pfoa-cat-cards. Presentation only: single white object, two side-by-side
 * square photos, centered shared name + relationship line. Reuses 0.1.39 tokens
 * and interaction treatment. Reduced motion relies on the existing global rule.
 */
/* PFOA 0.1.171 — bonded 2-track sizing lives with the base card rule
 * above (before the breakpoint overrides) so the cascade holds.
 */

div.pfoa-cat-cards article.pfoa-cat-bonded-card {
	min-width: 0;
	margin: 0;
	border: 1.5px solid var(--pfoa-color-border);
	border-radius: var(--pfoa-radius);
	padding: var(--pfoa-space-2);
	background: var(--pfoa-color-background);
	box-shadow: 0 1px 2px rgb(33 30 29 / 6%);
	transition: box-shadow var(--pfoa-transition), transform var(--pfoa-transition);
}

div.pfoa-cat-cards .pfoa-cat-bonded-photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* PFOA 0.1.171 — Track-align bonded member images with single-card tracks
	 * (adopted .pfoa-adopted-bonded-group parity, AG-12 reuse). Bonded card
	 * spans 2 host tracks: internal column gap = host gap (12px) + 2 x card
	 * inset (12px padding + 1px border = 13px each) = 12+13+13 = 38px.
	 * Supersedes the 0.1.58 66px value (host gap 32px era). Row gap stays
	 * 16px. No hard-coded image widths; squares derive from grid.
	 */
	row-gap: var(--pfoa-space-3);
	column-gap: calc(var(--pfoa-space-2) + 2 * (var(--pfoa-space-2) + 1px)); /* 12+13+13 = 38px */
}

div.pfoa-cat-cards .pfoa-cat-bonded-photos a,
div.pfoa-cat-cards .pfoa-cat-bonded-photos a.pfoa-cat-card-media {
	display: block;
	min-width: 0;
	border-radius: calc(var(--pfoa-radius) - 1px);
	overflow: hidden;
}

div.pfoa-cat-cards .pfoa-cat-bonded-photos img,
div.pfoa-cat-cards .pfoa-cat-bonded-photos img.pfoa-cat-card-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: calc(var(--pfoa-radius) - 1px);
}

div.pfoa-cat-cards .pfoa-cat-bonded-footer {
	text-align: center;
}

div.pfoa-cat-cards h3.pfoa-cat-bonded-title,
div.pfoa-cat-cards .pfoa-cat-bonded-footer h3 {
	margin: var(--pfoa-space-3) 0 0;
	color: var(--pfoa-action-primary);
	font-style: normal;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	text-align: center;
	overflow-wrap: break-word;
}

div.pfoa-cat-cards .pfoa-cat-bonded-title a,
div.pfoa-cat-cards .pfoa-cat-bonded-footer h3 a {
	color: inherit;
}

/* PFOA 0.1.91 — Adoptables names use adopted-card typography (DEV page 20323):
 * match Adopted2026 captions (1.05rem/700/1.3/action-primary/centered/plain
 * body sans, no underline at rest). Scoped to adoptables cards only; resting
 * state only so :focus-visible outline (green ring) remains fully visible. */
div.pfoa-cat-cards h3.pfoa-cat-card-title,
div.pfoa-cat-cards h3.pfoa-cat-bonded-title,
div.pfoa-cat-cards .pfoa-cat-bonded-footer h3 {
	font-family: var(--pfoa-font-display);
	font-style: normal;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--pfoa-action-primary);
	text-align: center;
}

div.pfoa-cat-cards h3.pfoa-cat-card-title a:not(:focus-visible),
div.pfoa-cat-cards h3.pfoa-cat-bonded-title a:not(:focus-visible),
div.pfoa-cat-cards .pfoa-cat-bonded-footer h3 a:not(:focus-visible) {
	color: inherit;
	text-decoration: none;
}

div.pfoa-cat-cards p.pfoa-cat-bonded-relationship,
div.pfoa-cat-cards .pfoa-cat-bonded-footer p {
	margin: 0.25rem 0 0;
	color: var(--pfoa-text-muted);
	font-family: var(--pfoa-font-body);
	font-style: normal;
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
	overflow-wrap: break-word;
}

div.pfoa-cat-cards article.pfoa-cat-bonded-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgb(33 30 29 / 10%);
}

div.pfoa-cat-cards .pfoa-cat-bonded-photos a:focus-visible,
div.pfoa-cat-cards .pfoa-cat-bonded-footer a:focus-visible {
	outline: 3px solid var(--pfoa-focus-ring);
	outline-offset: 3px;
}

/* PFOA 0.1.85 — shared bonded-pair badge straddling the BOTTOM border of
 * Adoptables bonded cards (mirrors 0.1.83 top-straddle logic, moved to bottom).
 * The outer bonded card is the containing block; the pill is absolutely
 * positioned at bottom:0 with translate(-50%,50%), so it straddles the bottom
 * border and lives in the row gap below the card (absolute = zero flow, so no
 * new card height). No footer padding reservation, no title containing block.
 * white-space:nowrap plus a max-width ellipsis guard keeps every breakpoint
 * overflow-free with no per-breakpoint rules needed. Badge SIZE LOCKED to
 * 0.1.83 values — do not change (font-size 0.72rem, line-height 1.4,
 * font-weight 800, padding 0.15rem 0.65rem, 1px border, radius 999px).
 * Existing p.pfoa-cat-bonded-relationship CSS left untouched (deprecated,
 * unrendered).
 */
div.pfoa-cat-cards > article.pfoa-cat-bonded-card {
	position: relative;
}

div.pfoa-cat-cards .pfoa-cat-bonded-badge {
	position: absolute;
	bottom: 0;
	top: auto;
	left: 50%;
	z-index: 2;
	display: inline-block;
	max-width: calc(100% - 1rem);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transform: translate(-50%, 50%);
	padding: 0.15rem 0.65rem;
	background: var(--pfoa-color-brand);
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(33, 30, 29, 0.35);
	font-family: var(--pfoa-font-body);
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: center;
}

/* PFOA 0.1.171 — ≤480px needs no bonded-photos column-gap override: the
 * adopted 38px internal gap holds at every breakpoint (adopted parity). */

/* PFOA 0.1.44 — Native Page media/text split */
.page-content .entry-content .pfoa-media-text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
	gap: var(--pfoa-space-5);
	align-items: start;
}

.page-content .entry-content .pfoa-media-text__text {
	min-width: 0;
}

.page-content .entry-content .pfoa-media-text__media {
	max-width: 19rem;
	justify-self: center;
}

.page-content .entry-content .pfoa-media-text__media img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 720px) {
	.page-content .entry-content .pfoa-media-text {
		grid-template-columns: 1fr;
	}

	.page-content .entry-content .pfoa-media-text__text {
		order: -1;
	}

	.page-content .entry-content .pfoa-media-text__media {
		margin-inline: auto;
		max-width: min(100%, 22rem);
	}
}

/* PFOA 0.1.51 — Adopted bonded-pair unified card (presentation only, CSS-only).
 * Scoped strictly beneath body.page-id-22514 to the incoming bonded wrapper
 * (div.pfoa-adopted-bonded-group, one direct child of .gallery) and its two
 * nested figure.gallery-item children. Reuses adopted-gallery tokens/visual
 * recipes only (--pfoa-surface-page, --pfoa-border-default, --pfoa-radius,
 * --pfoa-space-2, --pfoa-text-muted); does not reuse .pfoa-cat-card or
 * .pfoa-cat-bonded-* selectors. No heavy shadow, no hover lift/transform, no
 * profile-card affordance, no combined title styles, no visible "Bonded pair"
 * text styling (aria-label stays accessible-only).
 */
body.page-id-22514 .pfoa-adopted-bonded-group {
	grid-column: span 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* PFOA 0.1.58 — Track-align bonded member slots with single-card tracks.
	 * Internal COLUMN gap = host gap (12px) + 2 x card inset (12px padding +
	 * 1px border = 13px each) = 12+13+13 = 38px. Row gap stays 12px so
	 * image-to-shared-title = 12px row gap + 4px title top margin = 16px.
	 * No hard-coded image widths; slot widths derive from grid geometry.
	 */
	row-gap: var(--pfoa-space-2);
	column-gap: calc(var(--pfoa-space-2) + 2 * (var(--pfoa-space-2) + 1px)); /* 12+13+13 = 38px */
	min-width: 0;
	max-width: 100%;
	margin: 0;
	border: 1.5px solid #aeb4cd;
	border-radius: var(--pfoa-radius);
	padding: var(--pfoa-space-2);
	background: var(--pfoa-surface-page);
	box-shadow: none;
	transform: none;
	box-sizing: border-box;
}

body.page-id-22514 .pfoa-adopted-bonded-group .gallery-item {
	min-width: 0;
	max-width: 100%;
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
}

body.page-id-22514 .pfoa-adopted-bonded-group .gallery-item .gallery-icon {
	margin: 0;
}

body.page-id-22514 .pfoa-adopted-bonded-group .gallery-item .gallery-icon a {
	display: block;
	max-width: 100%;
}

body.page-id-22514 .pfoa-adopted-bonded-group .gallery-item .gallery-icon img {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: calc(var(--pfoa-radius) - 1px);
}

body.page-id-22514 .pfoa-adopted-bonded-group .gallery-item .gallery-caption {
	display: block;
	width: 100%;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	color: var(--pfoa-text-muted);
	font-family: var(--pfoa-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
}

/* PFOA 0.1.54 — Bonded-pair shared footer (presentation only, CSS-only).
 * Replaces the 0.1.52 first-caption prefix: member captions are visually
 * hidden but remain in the DOM (accessible-only, no display:none, no
 * :focus reveal); one shared footer spans both columns with the combined
 * title and relationship line. Scoped strictly to body.page-id-22514;
 * stored captions unchanged.
 */
body.page-id-22514 .pfoa-adopted-bonded-group .pfoa-adopted-bonded-member-caption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body.page-id-22514 .pfoa-adopted-bonded-footer {
	grid-column: 1 / -1;
	margin: 0;
	text-align: center;
}

body.page-id-22514 .pfoa-adopted-bonded-title {
	margin: 0.25rem 0 0;
	color: var(--pfoa-action-primary);
	font-family: var(--pfoa-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	text-align: center;
}

body.page-id-22514 .pfoa-adopted-bonded-relationship {
	margin: 0.25rem 0 0;
	color: var(--pfoa-text-muted);
	font-family: var(--pfoa-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
}

@media (max-width: 1319px) {
	body.page-id-22514 .pfoa-adopted-bonded-group {
		grid-column: span 2;
		max-width: 100%;
	}
}

@media (max-width: 720px) {
	body.page-id-22514 .pfoa-adopted-bonded-group {
		grid-column: span 2;
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	body.page-id-22514 .pfoa-adopted-bonded-group {
		grid-column: 1 / -1;
		grid-template-columns: 1fr 1fr;
		max-width: 100%;
	}
}

/* PFOA 0.1.61 — Optional per-image hero destination link. The overlay covers
 * only the hero media layer (which sits at z-index -1), so the headline and
 * .homepage-hero__actions (z-index 1) plus carousel controls (z-index 2)
 * stay above it and remain independently clickable. No link layer renders
 * when an image has no destination.
 */
.front-page-content .homepage-hero__scrim {
	pointer-events: none;
}

.front-page-content .homepage-hero__media-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
}

.front-page-content .homepage-hero__media-link:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -2px;
}

.front-page-content .homepage-hero--carousel .homepage-hero__slide .homepage-hero__media-link {
	pointer-events: none;
}

.front-page-content .homepage-hero--carousel .homepage-hero__slide.is-active .homepage-hero__media-link {
	pointer-events: auto;
}

/* PFOA 0.1.203 — bonded-pair spotlight.
 * Focused destination for bonded-pair hero slides at the top of the
 * Adoptable Cats listing (?bonded-pair=<a>-<b>#bonded-pair-spotlight).
 * Card-like container with both members side by side; server-rendered so it
 * works with JS disabled (the companion script only moves keyboard focus).
 * Reuses existing .pfoa-button styles for the action link.
 */
.pfoa-bonded-spotlight {
	max-width: 880px;
	margin: 0 auto 2rem;
	padding: 1.5rem clamp(1rem, 3vw, 2rem);
	background: #ffffff;
	border: 1px solid var(--pfoa-color-border, #c8c0b5);
	border-radius: 12px;
	text-align: center;
}

.pfoa-bonded-spotlight:focus {
	outline: none;
}

.pfoa-bonded-spotlight:focus-visible {
	outline: 3px solid var(--pfoa-color-focus, #005fcc);
	outline-offset: 3px;
}

.pfoa-bonded-spotlight__kicker {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pfoa-color-muted, #6f6963);
}

.pfoa-bonded-spotlight__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.4rem, 3.5vw, 2rem);
	line-height: 1.2;
}

.pfoa-bonded-spotlight__members {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.pfoa-bonded-spotlight__members {
		grid-template-columns: 1fr 1fr;
	}
}

.pfoa-bonded-spotlight__member {
	margin: 0;
	padding: 0;
}

.pfoa-bonded-spotlight__photo-link {
	display: block;
	border-radius: 8px;
}

.pfoa-bonded-spotlight__photo-link:focus-visible,
.pfoa-bonded-spotlight__profile-link:focus-visible,
.pfoa-bonded-spotlight__actions .pfoa-button:focus-visible {
	outline: 3px solid var(--pfoa-color-focus, #005fcc);
	outline-offset: 2px;
}

.pfoa-bonded-spotlight__photo {
	width: 100%;
	max-width: 320px;
	height: auto;
	border-radius: 8px;
}

.pfoa-bonded-spotlight__name {
	margin: 0.75rem 0 0.25rem;
	font-size: 1.15rem;
	font-weight: 700;
}

.pfoa-bonded-spotlight__profile-link {
	display: inline-block;
	padding: 0.25rem 0.25rem;
	font-weight: 600;
}

.pfoa-bonded-spotlight__actions {
	margin: 0;
}

/* PFOA 0.1.64 — Homepage pathway card polish (CSS-only, DEV scope).
 * Equal-height 5-card row, consistent 2-line title allowance, bottom-aligned
 * Explore links, modest padding/thumbnail lift. Scoped strictly to
 * .front-page-content .homepage-pathways and descendants. No markup, text,
 * link, image, order, color, typography, or responsive-structure changes.
 * Base centered-card rules already provide flex-column equal height,
 * margin-top:auto link pinning, and 2-line title min-height; this block only
 * guarantees item stretch, lifts padding/thumbnail, and carries the same
 * alignment guarantees into the >=1320px compact tile override.
 */
.front-page-content .homepage-pathways__item {
	display: flex;
	align-self: stretch;
}

.front-page-content .homepage-pathway {
	flex: 1 1 auto;
	width: 100%;
}

@media (min-width: 721px) and (max-width: 1319px) {
	.front-page-content .homepage-pathway {
		padding: clamp(1.25rem, 2.4vw, 1.75rem) var(--pfoa-space-4);
	}

	.front-page-content .homepage-pathway__media {
		width: clamp(5.75rem, 11vw, 8.5rem);
	}
}

@media (min-width: 1320px) {
	.front-page-content .homepage-pathway {
		grid-template-columns: 4.75rem minmax(0, min(8rem, calc(100% - 5.75rem)));
		grid-template-rows: 1fr auto;
		padding: 1rem 1.25rem;
	}

	.front-page-content .homepage-pathway__media {
		width: 4.75rem;
		height: 4rem;
	}

	.front-page-content .homepage-pathway__title {
		min-height: calc(1.15em * 2);
	}

	.front-page-content .homepage-pathway__action {
		align-self: end;
	}
}

/* PFOA 0.1.145 Stage B — Desktop nav uses base rules above
 * (var(--pfoa-font-display), uppercase, 0.025em, 0.76rem/0.82rem).
 * Retired 0.1.71 Palatino stack + 1.15/1.05/1.20/1.10rem enlargements.
 */

/* PFOA 0.1.72 — Transitional adoption-event rendering (presentation only).
 * Scoped strictly to body.page-id-22514. Renders immutable
 * pfoa_adoption_event snapshots above the legacy gallery: one neutral
 * event block per event (UUID identity, no post IDs), one card per member
 * in canonical stored order with its own snapshot image/caption. Reuses
 * adopted-gallery tokens/visual recipes only (--pfoa-surface-page,
 * --pfoa-action-primary, --pfoa-text-muted, --pfoa-radius, --pfoa-space-2,
 * --pfoa-space-4, card border #aeb4cd); no .gallery/.gallery-item
 * selectors, no relationship wording, no header/homepage/global changes.
 */
/* PFOA 0.1.79 — Retired separate .pfoa-adoption-events grid. The DEV
 * Adopted2026 event (page 22514, trio Spencer/Thompson/Wilbur) now renders
 * as a direct child div.pfoa-adoption-event inside the legacy .gallery
 * grid, so the gallery stays the single grid container. This outer wrapper,
 * if still emitted elsewhere, stays a plain block and creates no columns,
 * no gaps, and no separate grid.
 */
body.page-id-22514 .pfoa-adoption-events {
	display: block;
	margin: 0 0 var(--pfoa-space-4);
}

/* PFOA 0.1.77 — Normalize adoption-event title to adopted card typography
 * (1.05rem/700/1.3, same color/center) to match ordinary captions and
 * bonded titles. Margins/placement below thumbnails unchanged.
 */
body.page-id-22514 .pfoa-adoption-event-title {
	margin: 0 0 var(--pfoa-space-2);
	color: var(--pfoa-action-primary);
	font-family: var(--pfoa-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	text-align: center;
}

body.page-id-22514 .pfoa-adoption-event-members {
	display: grid;
	gap: var(--pfoa-space-2);
	align-items: start;
	margin: 0;
}

body.page-id-22514 .pfoa-adoption-event-members-1 {
	grid-template-columns: minmax(0, 300px);
	justify-content: center;
}

body.page-id-22514 .pfoa-adoption-event-members-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 100%;
	max-width: 660px;
	margin-inline: auto;
}

body.page-id-22514 .pfoa-adoption-event-members-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.page-id-22514 .pfoa-adoption-event-members-n {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.page-id-22514 .pfoa-adoption-event-member {
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: var(--pfoa-space-2);
	background: var(--pfoa-surface-page);
	border: 1.5px solid #aeb4cd;
	border-radius: var(--pfoa-radius);
	text-align: center;
}

body.page-id-22514 .pfoa-adoption-event-thumb {
	display: block;
	margin-bottom: var(--pfoa-space-2);
}

body.page-id-22514 .pfoa-adoption-event-thumb a {
	display: block;
	max-width: 100%;
}

body.page-id-22514 .pfoa-adoption-event-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: calc(var(--pfoa-radius) - 1px);
}

body.page-id-22514 .pfoa-adoption-event-caption {
	margin: 0;
	color: var(--pfoa-text-muted);
	font-family: var(--pfoa-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
}

body.page-id-22514 .pfoa-adoption-event-thumb-missing {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border: 1px dashed var(--pfoa-color-border);
	border-radius: calc(var(--pfoa-radius) - 1px);
}

body.page-id-22514 .pfoa-adoption-event-missing-text {
	color: var(--pfoa-text-muted);
	font-family: var(--pfoa-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
}

@media (max-width: 1319px) {
	body.page-id-22514 .pfoa-adoption-event-members-n {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	body.page-id-22514 .pfoa-adoption-event-members-3,
	body.page-id-22514 .pfoa-adoption-event-members-n {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	body.page-id-22514 .pfoa-adoption-event-members-2,
	body.page-id-22514 .pfoa-adoption-event-members-3,
	body.page-id-22514 .pfoa-adoption-event-members-n {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.page-id-22514 .pfoa-adoption-event-members-2 {
		max-width: none;
	}
}

/* PFOA 0.1.79 — Adoption event as a direct .gallery grid child (DEV scope,
 * page 22514 only). The trio event (Spencer/Thompson/Wilbur) is inserted by
 * the PHP lane as div.pfoa-adoption-event inside the legacy .gallery, after
 * Thunder and before Frost. The gallery stays the single grid container
 * (6 cols desktop, 4 at <=1319px, 3 at <=720px, 2 at <=480px — same
 * breakpoints as the adopted cards above). The event wrapper is one grid
 * item with a bounded column span, never display:contents, so the title,
 * figures, links, and data attribute stay grouped for assistive tech.
 * Single-member events span 1 track; pairs span 2; trios and larger span 3
 * on desktop so ROW2 packs as Thunder (1) + trio (3) + Frost (1) +
 * Lightning (1) with no forced row break and no empty gap. The outer card
 * shell below applies to multi-member events, and (PFOA 0.1.125) to solo
 * events via the dedicated solo shell — singles carry the border on the
 * outer wrapper with a borderless inner member, never a doubled frame. Inner
 * members stay an equal-thumbnail grid with the shared title below the
 * images; narrow breakpoints mirror the gallery columns with no horizontal
 * overflow and no blank row.
 */
body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-1 {
	grid-column: span 1;
}

body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-2 {
	grid-column: span 2;
}

body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-3,
body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-n {
	grid-column: span 3;
}

body.page-id-22514 .pfoa-adoption-event-multi {
	max-width: 100%;
	margin: 0;
	padding: var(--pfoa-space-2);
	background: var(--pfoa-surface-page);
	border: 1.5px solid #aeb4cd;
	border-radius: var(--pfoa-radius);
	box-sizing: border-box;
}

body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-members-2 {
	max-width: none;
	margin: 0;
}

body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-members-n {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-member {
	border: 0;
	padding: 0;
	background: transparent;
}

/* PFOA 0.1.75 — Multi-member events no longer render per-member figcaptions
 * (combined heading only, presentation only). Zero the now-unneeded thumb
 * caption gap inside multi-member cards so the card stays visually balanced.
 * Single-member caption rules above are untouched; no thumbnail sizing change.
 */
body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-thumb {
	margin-bottom: 0;
}

/* PFOA 0.1.76 — Multi-member combined title now renders below the
 * member-image grid (presentation only, DEV scope). Same element/class and
 * typography as the single-cat title above; only the multi spacing flips
 * from margin-bottom to margin-top with zero bottom margin. Single-cat
 * title rules above are untouched; no grid/sizing change.
 */
body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-title {
	margin: 10px 0 0;
}

@media (max-width: 1319px) {
	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-1 {
		grid-column: span 1;
	}

	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-2 {
		grid-column: span 2;
	}

	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-3,
	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-n {
		grid-column: span 3;
	}
}

@media (max-width: 720px) {
	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-1 {
		grid-column: span 1;
	}

	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-2 {
		grid-column: span 2;
	}

	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-3,
	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-n {
		grid-column: span 3;
	}
}

@media (max-width: 480px) {
	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-1 {
		grid-column: span 1;
	}

	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-2 {
		grid-column: span 2;
	}

	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-3,
	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-n {
		grid-column: 1 / -1;
	}
}

/* PFOA 0.1.80 — Superseded by the shared N-slot card geometry below
 * (AG-121 block reuses --pfoa-adopted-photo / --pfoa-adopted-gap /
 * --pfoa-adopted-card-shell with explicit outer widths). The inner member
 * grids below stay full-width so content sums to the shared shell; the
 * outer N-slot width carries the shell. Title gap below the member row was
 * space-3 alone (PFOA 0.1.81 margin-collapse correction): the singleton 28px
 * stack (icon margin-bottom space-2 + caption margin-top space-3) collapses
 * to the 16px max, while the multi members grid carries margin 0 so nothing
 * collapses — space-2 + space-3 would sit titles ~12px low and leave
 * events ~11.5px taller. PFOA 0.1.129 tightens photo-to-name to 10px and
 * name-to-date to 8px in the title/date rules below. No markup, span,
 * typography, image, or breakpoint change.
 */
body.page-id-22514 .pfoa-adoption-event-members-2,
body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-members-2 {
	width: 100%;
	margin: 0;
}

body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-members-3,
body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-members-n {
	width: 100%;
	margin: 0;
}

body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-title {
	margin-top: 10px;
}

/* PFOA 0.1.86 — Bonded-pair + adopted-together pills straddling the BOTTOM
 * border of multi-cat Adoption Events (DEV scope, page 22514 only; mirrors
 * Adoptables bottom straddle). Shared base keeps 0.1.85 geometry EXACTLY;
 * only the background differs per modifier (bonded red vs together green).
 * The outer bonded/together card is the containing block; the pill is
 * absolutely positioned at bottom:0 with translate(-50%,50%), so it straddles
 * the bottom border and lives in the gallery row gap below the card
 * (absolute = zero flow, so the 0.1.80/0.1.81 equal outer-height work is
 * untouched — no new vertical row, no title shift, no member image
 * size/grid-span change). No card padding reservation, no title containing
 * block. white-space:nowrap plus a max-width ellipsis guard keeps every
 * breakpoint (1024/720/390) overflow-free with no per-breakpoint rules
 * needed. Badge SIZE LOCKED to 0.1.83 values — do not change (font-size
 * 0.72rem, line-height 1.4, font-weight 800, padding 0.15rem 0.65rem, 1px
 * border, radius 999px).
 */
body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event--bonded,
body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event--together {
	position: relative;
}

body.page-id-22514 .pfoa-adoption-event-bonded-badge,
body.page-id-22514 .pfoa-adoption-event-together-badge {
	position: absolute;
	bottom: 0;
	top: auto;
	left: 50%;
	z-index: 2;
	display: inline-block;
	max-width: calc(100% - 1rem);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transform: translate(-50%, 50%);
	padding: 0.15rem 0.65rem;
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(33, 30, 29, 0.35);
	font-family: var(--pfoa-font-body);
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: center;
}

body.page-id-22514 .pfoa-adoption-event-bonded-badge {
	background: var(--pfoa-color-brand);
}

body.page-id-22514 .pfoa-adoption-event-together-badge {
	background: var(--pfoa-cta-primary);
}

/* PFOA 0.1.89 — Board Documents & Resources cards */
.pfoa-board-resources {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pfoa-space-3);
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.pfoa-board-card {
	display: flex;
	flex-direction: column;
	gap: var(--pfoa-space-2);
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: var(--pfoa-space-4);
	background: #ffffff;
	border: 1px solid var(--pfoa-border-default);
	border-left: 4px solid var(--pfoa-accent);
	border-radius: 10px;
	color: var(--pfoa-color-text);
	overflow-wrap: break-word;
}

a.pfoa-board-card {
	text-decoration: none;
	color: var(--pfoa-color-text);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

a.pfoa-board-card:hover {
	border-color: var(--pfoa-accent);
	box-shadow: 0 4px 14px rgba(5, 114, 5, 0.12);
	transform: translateY(-2px);
}

a.pfoa-board-card:focus-visible {
	outline: 3px solid var(--pfoa-focus-ring);
	outline-offset: 3px;
}

.pfoa-board-card__title {
	display: block;
	margin: 0;
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.35;
	color: var(--pfoa-color-text);
}

.pfoa-board-card__desc {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--pfoa-color-muted);
}

.pfoa-board-card.is-unavailable {
	cursor: default;
}

/* PFOA 0.1.89 — parity override: the theme's generic [aria-disabled="true"]
   rule (opacity 0.55, not-allowed cursor) matches non-clickable board cards.
   Restore every resting property to the exact active-card values. */
.pfoa-board-resources .pfoa-board-card.is-unavailable,
.pfoa-board-resources .pfoa-board-card[aria-disabled="true"] {
	background: #ffffff;
	border: 1px solid var(--pfoa-border-default);
	border-left: 4px solid var(--pfoa-accent);
	border-radius: 10px;
	box-shadow: none;
	opacity: 1;
	filter: none;
	cursor: default;
	color: var(--pfoa-color-text);
}

.pfoa-board-resources .pfoa-board-card.is-unavailable .pfoa-board-card__title {
	color: var(--pfoa-color-text);
}

.pfoa-board-resources .pfoa-board-card.is-unavailable .pfoa-board-card__desc {
	color: var(--pfoa-color-muted);
}

/* PFOA 0.1.256 — Board biography dialogs (T-04): shared .pfoa-board-dialog
   presentation relocated verbatim from the page-4264 embedded stylesheet.
   Generic component selectors only: no page-ID scope, no !important. */
.pfoa-board-bio-trigger{background:none;border:0;padding:0;cursor:pointer;display:inline-block;line-height:0}
.pfoa-board-bio-trigger img{display:block;max-width:100%;height:auto}
.pfoa-board-bio-trigger:focus-visible{outline:3px solid #000080;outline-offset:3px}
dialog.pfoa-board-dialog{border:1px solid #000080;border-radius:8px;padding:0;color:var(--pfoa-text-primary,#302D2B);max-width:min(660px,calc(100vw - 2rem));width:660px}
dialog.pfoa-board-dialog::backdrop{background:rgba(0,0,0,.55)}
.pfoa-board-dialog__inner{padding:20px 22px;max-height:80vh;max-height:80dvh;overflow:auto}
.pfoa-board-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 8px}
.pfoa-board-dialog__title{margin:0;font-family:var(--pfoa-font-display,Georgia,"Times New Roman",serif);font-size:1.25rem;font-weight:700;line-height:1.25;color:var(--pfoa-text-primary,#302D2B)}
.pfoa-board-dialog__body{font-family:var(--pfoa-font-body,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);font-size:1rem;font-weight:400;line-height:1.65;color:var(--pfoa-text-primary,#302D2B)}
.pfoa-board-dialog__close{flex:none;cursor:pointer;background:#fff;border:2px solid #000080;border-radius:4px;color:#000080;font-weight:700;padding:6px 12px;font-size:.95rem}
.pfoa-board-dialog__close:focus-visible,.pfoa-board-dialog__close:hover{outline:3px solid #000080;outline-offset:2px;background:#000080;color:#fff}
.pfoa-board-dialog a{color:var(--pfoa-action-primary,#434EBE)}
.pfoa-board-dialog a:hover{color:var(--pfoa-action-hover,#303873)}
.pfoa-board-dialog a:focus-visible{outline:3px solid var(--pfoa-focus-ring,#057205);outline-offset:2px}
.pfoa-board-dialog .pfoa-board-role{margin:0 0 12px}
.pfoa-board-dialog .pfoa-board-portrait{max-width:225px;width:auto;height:auto;margin:4px 16px 12px 0;float:left}
@media only screen and (max-width:600px){.pfoa-board-dialog .pfoa-board-portrait{float:none;display:block;margin:0 auto 12px;max-width:65%}}

@media (min-width: 640px) {
	.pfoa-board-resources {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pfoa-space-4);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	a.pfoa-board-card {
		transition: none;
	}

	a.pfoa-board-card:hover {
		transform: none;
	}
}

/* PFOA 0.1.121 — Adopted Gallery presentation contract (AG-01..AG-12,
 * DEV scope page 22514 only). Chronology-first sequential packing with
 * uniform photographs, indivisible event cards, visible historical dates,
 * and one decorative filler panel per incomplete row.
 *
 * Reuse recipe for future Adopted YYYY galleries: copy this block and scope
 * it to the new page id (body.page-id-XXXXX); activation is separate and no
 * rule below depends on hardcoded historical Event IDs.
 *
 * --pfoa-adopted-photo is the single shared displayed-photograph dimension
 * for every Adopted cat photograph (legacy singles + every event member) at
 * the current viewport. It derives from the gallery content width, track
 * count, gaps, and card shell (2 x space-2 padding + 3px combined border),
 * matching the Sol baseline (6-slot 123px, 4-slot 204px, 3-slot ~191px,
 * 2-slot 142px). Container-query width units keep the value proportional at
 * any container width; pixel fallbacks below apply where cqw is
 * unsupported. Square geometry + object-fit:cover are preserved everywhere.
 */
body.page-id-22514 .entry-content .gallery {
	container-type: inline-size;
	container-name: pfoa-adopted-gallery;
	--pfoa-adopted-photo: 123px;
	--pfoa-adopted-gap: var(--pfoa-space-2);
	--pfoa-adopted-card-shell: calc(var(--pfoa-space-2) * 2 + 3px);
}

@supports (width: 1cqw) {
	body.page-id-22514 .entry-content .gallery {
		--pfoa-adopted-photo: calc((100cqw - 5 * var(--pfoa-space-2)) / 6 - (var(--pfoa-space-2) * 2 + 3px));
	}
}

/* Uniform legacy + event photographs: identical width/height at any given
 * viewport, centered in their cards. Aspect-ratio/object-fit stay as backup.
 */
body.page-id-22514 .entry-content .gallery-icon {
	display: flex;
	justify-content: center;
}

body.page-id-22514 .entry-content .gallery-icon img,
body.page-id-22514 .pfoa-adoption-event-thumb img {
	width: var(--pfoa-adopted-photo);
	height: var(--pfoa-adopted-photo);
}

body.page-id-22514 .pfoa-adoption-event-thumb a {
	display: flex;
	justify-content: center;
}

body.page-id-22514 .pfoa-adoption-event-thumb-missing {
	width: var(--pfoa-adopted-photo);
	height: var(--pfoa-adopted-photo);
	margin-inline: auto;
}

/* Event cards are indivisible layout units (AG-06): card width follows its
 * uniformly sized photographs + spacing + decoration (AG-07), left-aligned
 * in their grid span. Sparse grid flow packs chronologically fit-or-next-row
 * with no skip-ahead (AG-04/AG-08); cards never stretch photographs.
 */
body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event {
	justify-self: start;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* Shared N-slot card geometry (AG-07 left-align kept, PFOA 0.1.124 track
 * allocation correction): every event shell uses one formula so the outer
 * width equals its full N-track grid allocation. width(N) = N * (photo +
 * shell) + (N-1) * gap, where shell = 2 x space-2 pad + 3px combined border
 * (1.5px x 2) and one track == photo + shell. At 1440px (photo 123, gap 12,
 * shell 27) this yields 150/312/474/636, matching N*150+(N-1)*12. Legacy
 * .gallery-item keeps the identical shell (12px pad + 1.5px border,
 * border-box), so N=1 matches singles exactly; multis carry the same shell
 * per track around N uniformly sized photos + (N-1) inner gaps.
 */
body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-1 {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 1);
}

body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-2 {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 2 + var(--pfoa-adopted-gap));
}

body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-3 {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 3 + var(--pfoa-adopted-gap) * 2);
}

body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-n {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 4 + var(--pfoa-adopted-gap) * 3);
}

body.page-id-22514 .pfoa-adoption-event-members {
	justify-content: center;
	gap: var(--pfoa-adopted-gap);
}

/* Single-member event inner grid fills the outer content box: the lone
 * member keeps its singleton shell (padding + border, not stripped like
 * multis), so a fixed photo track would leave the member content one shell
 * short and shrink the photograph via max-width:100%. 1fr lets the track
 * derive from the N=1 outer width (photo + shell), giving member content ==
 * photo exactly at every viewport — uniform with legacy singles.
 */
body.page-id-22514 .pfoa-adoption-event-members-1 {
	grid-template-columns: minmax(0, 1fr);
}

body.page-id-22514 .pfoa-adoption-event-members-2 {
	grid-template-columns: repeat(2, var(--pfoa-adopted-photo));
	max-width: 100%;
}

body.page-id-22514 .pfoa-adoption-event-members-3 {
	grid-template-columns: repeat(3, var(--pfoa-adopted-photo));
}

/* 4+ member events: flexible wrap rows of uniformly sized photographs, so
 * any participant count stays inside its own card at uniform dimensions.
 */
body.page-id-22514 .pfoa-adoption-event-members-n {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pfoa-adopted-gap);
}

body.page-id-22514 .pfoa-adoption-event-members-n > .pfoa-adoption-event-member {
	flex: 0 0 var(--pfoa-adopted-photo);
	width: var(--pfoa-adopted-photo);
	box-sizing: border-box;
}

/* Inner member grids fill the outer content box (PFOA 0.1.124): outer
 * N-slot width minus the one outer shell equals N photos + (N-1) gaps +
 * (N-1) shells of centered slack, so width:100% with the shared gap never
 * narrows or shrink-wraps short of the shell. No max-content shrink, no
 * auto-centering change.
 */
body.page-id-22514 .pfoa-adoption-event-members-2,
body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-members-2 {
	width: 100%;
	max-width: 100%;
	margin: 0;
	justify-content: center;
	gap: var(--pfoa-adopted-gap);
}

body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-members-3 {
	grid-template-columns: repeat(3, var(--pfoa-adopted-photo));
	width: 100%;
	max-width: 100%;
	margin: 0;
	justify-content: center;
	gap: var(--pfoa-adopted-gap);
}

body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-members-n {
	width: 100%;
	max-width: 100%;
	margin: 0;
	justify-content: center;
	gap: var(--pfoa-adopted-gap);
}

body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-members-n {
	display: flex;
}

/* Card spans: singles 1, pairs 2, trios 3, quads+ 4 tracks at desktop, so a
 * quad sits 4-across in one indivisible card.
 */
body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-n {
	grid-column: span 4;
}

/* Visible historical adoption date beneath the event title (AG metadata).
 * Restrained muted treatment keeps the title/caption hierarchy primary;
 * badge geometry (absolute, zero flow) is untouched.
 */
body.page-id-22514 .pfoa-adoption-event-date {
	margin: 8px 0 0;
	color: var(--pfoa-text-muted);
	font-family: var(--pfoa-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
}

body.page-id-22514 .pfoa-adoption-event-count-1 .pfoa-adoption-event-date {
	margin: 0 0 8px;
}

/* PFOA 0.1.125 — Solo event outer card shell (defect correction): the
 * count-1 outer wrapper is the bordered card (same shell as multi), so
 * photo + title + date all sit inside one border-box. The inner singleton
 * member drops its own frame (no doubled border), mirroring the multi
 * member reset; thumb gap is zeroed and title/date stack below the photo
 * with the shared multi spacing. Redundant solo captions stay in markup
 * for lightbox/a11y via screen-reader-text (zero flow); non-redundant
 * captions keep a muted centered visible treatment. Photo dims, N-slot
 * outer widths, spans, gaps, and breakpoints are untouched.
 */
body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-1 {
	max-width: 100%;
	margin: 0;
	padding: var(--pfoa-space-2);
	background: var(--pfoa-surface-page);
	border: 1.5px solid #aeb4cd;
	border-radius: var(--pfoa-radius);
	box-sizing: border-box;
}

body.page-id-22514 .pfoa-adoption-event-count-1 .pfoa-adoption-event-member {
	border: 0;
	padding: 0;
	background: transparent;
}

body.page-id-22514 .pfoa-adoption-event-count-1 .pfoa-adoption-event-thumb {
	margin-bottom: 0;
}

body.page-id-22514 .pfoa-adoption-event-count-1 .pfoa-adoption-event-title {
	margin: 10px 0 0;
}

body.page-id-22514 .pfoa-adoption-event-count-1 .pfoa-adoption-event-date {
	margin: 8px 0 0;
}

body.page-id-22514 .pfoa-adoption-event-count-1 .pfoa-adoption-event-caption:not(.screen-reader-text) {
	margin: var(--pfoa-space-2) 0 0;
}

/* PFOA 0.1.127 — Adopted Gallery equal-height row shells (card-height
 * regression correction): the gallery grid stretches every direct card to
 * its row height, so same-row shells share tops AND bottoms. Narrow
 * single-cat cards wrap long dates (e.g. "September 15, 2026") to two
 * lines while wider pair cards keep one line; without this the singles
 * grew ~19px taller than their row neighbours. The date keeps its full
 * text on two lines via a two-line min-height reserve (0.85rem x 1.45 x 2
 * = 2.9em), so wrapped dates never grow a card and one-line dates hold
 * the same space. Cards are flex columns with the photo grid fixed at the
 * top, so any residual stretch whitespace settles below the date inside
 * the border. Badges stay absolute (zero flow), photos stay uniform via
 * --pfoa-adopted-photo, N-slot widths/spans/gaps/breakpoints untouched.
 */
body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event,
body.page-id-22514 .entry-content .gallery > .gallery-item {
	align-self: stretch;
}

body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

body.page-id-22514 .entry-content .gallery > .gallery-item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
}

body.page-id-22514 .pfoa-adoption-event-members {
	flex: 0 0 auto;
}

body.page-id-22514 .pfoa-adoption-event-title {
	flex: 0 0 auto;
}

body.page-id-22514 .pfoa-adoption-event-date {
	min-height: 2.9em;
	flex: 0 0 auto;
}

/* Decorative filler panel (AG-09): exactly one per incomplete row, placed
 * by pfoa-adopted-gallery-filler.js with an explicit remainder span. Outside
 * event cards, noninteractive, aria-hidden, excluded from counts/lightbox (no
 * gallery-item class, no links). Never tiled: the script inserts at most one
 * per row and removes all fillers before every re-placement.
 */
body.page-id-22514 .entry-content .gallery > .pfoa-adopted-filler {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	justify-self: start;
	min-width: 0;
	max-width: 100%;
	min-height: var(--pfoa-adopted-photo);
	margin: 0;
	padding: var(--pfoa-space-2);
	background: #fff;
	border: 1.5px solid #aeb4cd;
	border-radius: var(--pfoa-radius);
	box-sizing: border-box;
	overflow: hidden;
	pointer-events: none;
}

/* Filler N-slot convergence (AG-09, PFOA 0.1.124 track allocation
 * correction): the filler spans the row remainder via JS (span N) and
 * left-aligns with the identical N-slot outer width as the equivalent real
 * event card — width(N) = N * (photo + shell) + (N-1) * gap — so filler-1
 * == single (150), filler-2 == pair (312), filler-3 == trio (474),
 * filler-4 == quad (636) at 1440px, with no unused interior column. Same
 * pad/border/shell, same photo/gap tokens; the paw never stretches (clamp
 * below). JS span logic is untouched — geometry converges purely through
 * these shared vars.
 */
body.page-id-22514 .entry-content .gallery > .pfoa-adopted-filler[data-pfoa-filler-span="1"] {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 1);
}

body.page-id-22514 .entry-content .gallery > .pfoa-adopted-filler[data-pfoa-filler-span="2"] {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 2 + var(--pfoa-adopted-gap));
}

body.page-id-22514 .entry-content .gallery > .pfoa-adopted-filler[data-pfoa-filler-span="3"] {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 3 + var(--pfoa-adopted-gap) * 2);
}

body.page-id-22514 .entry-content .gallery > .pfoa-adopted-filler[data-pfoa-filler-span="4"] {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 4 + var(--pfoa-adopted-gap) * 3);
}

body.page-id-22514 .entry-content .gallery > .pfoa-adopted-filler[data-pfoa-filler-span="5"] {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 5 + var(--pfoa-adopted-gap) * 4);
}

body.page-id-22514 .entry-content .gallery > .pfoa-adopted-filler svg {
	width: clamp(56px, 55%, 110px);
	height: auto;
	aspect-ratio: 1 / 1;
}

/* Legacy wordmark hook retained as an empty stub (tests may reference the
 * selector); the filler now renders an inline paw and never creates it. */
body.page-id-22514 .pfoa-adopted-filler-wordmark {
}

@media (max-width: 1319px) {
	body.page-id-22514 .entry-content .gallery {
		--pfoa-adopted-photo: 204px;
	}

	@supports (width: 1cqw) {
		body.page-id-22514 .entry-content .gallery {
			--pfoa-adopted-photo: calc((100cqw - 3 * var(--pfoa-space-2)) / 4 - (var(--pfoa-space-2) * 2 + 3px));
		}
	}
}

@media (max-width: 720px) {
	body.page-id-22514 .entry-content .gallery {
		--pfoa-adopted-photo: 191px;
	}

	@supports (width: 1cqw) {
		body.page-id-22514 .entry-content .gallery {
			--pfoa-adopted-photo: calc((100cqw - 2 * var(--pfoa-space-2)) / 3 - (var(--pfoa-space-2) * 2 + 3px));
		}
	}

	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-3,
	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-n {
		grid-column: 1 / -1;
		width: 100%;
	}

	/* Trios wrap 2+1, quads+ sit 2x2 inside their own full-row card. */
	body.page-id-22514 .pfoa-adoption-event-members-3 {
		grid-template-columns: repeat(2, var(--pfoa-adopted-photo));
	}

	body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-members-3 {
		grid-template-columns: repeat(2, var(--pfoa-adopted-photo));
	}

	body.page-id-22514 .pfoa-adoption-event-members-n {
		width: 100%;
		max-width: calc(var(--pfoa-adopted-photo) * 2 + var(--pfoa-adopted-gap));
		margin-inline: auto;
	}
}

@media (max-width: 480px) {
	body.page-id-22514 .entry-content .gallery {
		--pfoa-adopted-photo: 142px;
	}

	@supports (width: 1cqw) {
		body.page-id-22514 .entry-content .gallery {
			--pfoa-adopted-photo: calc((100cqw - 1 * var(--pfoa-space-2)) / 2 - (var(--pfoa-space-2) * 2 + 3px));
		}
	}

	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-2,
	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-3,
	body.page-id-22514 .entry-content .gallery > .pfoa-adoption-event-count-n {
		grid-column: 1 / -1;
		width: 100%;
	}

	body.page-id-22514 .pfoa-adoption-event-members-2,
	body.page-id-22514 .pfoa-adoption-event-multi .pfoa-adoption-event-members-2 {
		grid-template-columns: repeat(2, var(--pfoa-adopted-photo));
	}
}

/* PFOA 0.1.90 — Board director name typography (adopted-card treatment) */
body.page-id-4264 .pfoa-board-member-name {
	display: inline;
	color: var(--pfoa-action-primary);
	font-style: normal;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

body.page-id-4264 .pfoa-board-member-role {
	display: inline;
	color: var(--pfoa-text-muted);
	font-style: normal;
	font-weight: 400;
	font-size: 0.85rem;
	line-height: 1.45;
	text-align: center;
	text-decoration: none;
}

/* PFOA Recently Adopted (page 20323 only) — reuses Adopted 2026 geometry.
 * Strict scope: every selector below starts with
 * body.page-id-20323 .pfoa-recently-adopted, so Adopted 2026 (page 22514),
 * the paw filler, and all global rules are untouched. No new card/badge
 * system: same square photos, blue centered names, card shell, green pill,
 * and responsive language as the accepted Adopted language. Cards use the
 * functions.php event markup (div.pfoa-adoption-event, members grid,
 * captions, badge, date; lightbox via wp_get_attachment_link, no .gallery
 * classes) rendered inside .pfoa-recently-adopted as a standalone row.
 * PFOA 0.1.172 — compact centered flex (Adoptable Cats parity, visual only,
 * CSS-only, DEV scope): flex-wrap + justify-content:center mirrors
 * div.pfoa-cat-cards so all four events (7 photos) fit one centered desktop
 * row at 1440px and incomplete rows center at smaller widths. DOM = visual
 * = keyboard order kept (no order overrides, no dense backfill). Card width
 * still follows content per AG-07 (photo + shell formula); events stay
 * indivisible per AG-06. Compact photo fits 7 units in the 960px shell:
 * 7*photo + 6*gap + 7*shell <= 100cqw, i.e.
 * photo = (100cqw - 6*gap - 7*shell)/7 (fallback 99px).
 */
body.page-id-20323 .pfoa-recently-adopted {
	container-type: inline-size;
	--pfoa-adopted-photo: 99px;
	--pfoa-adopted-gap: var(--pfoa-space-2);
	--pfoa-adopted-card-shell: calc(var(--pfoa-space-2) * 2 + 3px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px var(--pfoa-space-2);
	align-items: flex-start;
	align-content: flex-start;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

@supports (width: 1cqw) {
	body.page-id-20323 .pfoa-recently-adopted {
		--pfoa-adopted-photo: calc((100cqw - 6 * var(--pfoa-adopted-gap) - 7 * var(--pfoa-adopted-card-shell)) / 7);
	}
}

/* If events arrive inside an intermediate section wrapper, let them join
 * the single outer flex row instead of forming a nested layout. */
body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-events {
	display: contents;
}

/* Independent Event cards: each Event carries its own border/shell, so
 * neighbouring Events stay visually separate horizontally and vertically. */
body.page-id-20323 .pfoa-recently-adopted > .pfoa-adoption-event {
	align-self: flex-start;
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	justify-content: flex-start;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: var(--pfoa-space-2);
	background: var(--pfoa-surface-page);
	border: 1.5px solid #aeb4cd;
	border-radius: var(--pfoa-radius);
	box-sizing: border-box;
	overflow-wrap: break-word;
}

body.page-id-20323 .pfoa-recently-adopted > .pfoa-adoption-event-count-1 {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 1);
}

body.page-id-20323 .pfoa-recently-adopted > .pfoa-adoption-event-count-2 {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 2 + var(--pfoa-adopted-gap));
}

body.page-id-20323 .pfoa-recently-adopted > .pfoa-adoption-event-count-3 {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 3 + var(--pfoa-adopted-gap) * 2);
}

body.page-id-20323 .pfoa-recently-adopted > .pfoa-adoption-event-count-n {
	width: calc((var(--pfoa-adopted-photo) + var(--pfoa-adopted-card-shell)) * 4 + var(--pfoa-adopted-gap) * 3);
}

/* Multi-cat participants sit inside one shared card; inner members are
 * borderless so the single outer border reads as the Event boundary. */
body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-members {
	display: grid;
	gap: var(--pfoa-adopted-gap);
	justify-content: center;
	align-items: start;
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-members-1 {
	grid-template-columns: minmax(0, 1fr);
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-members-2 {
	grid-template-columns: repeat(2, var(--pfoa-adopted-photo));
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-members-3 {
	grid-template-columns: repeat(3, var(--pfoa-adopted-photo));
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-members-n {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-members-n > .pfoa-adoption-event-member {
	flex: 0 0 var(--pfoa-adopted-photo);
	width: var(--pfoa-adopted-photo);
	box-sizing: border-box;
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-member {
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	text-align: center;
	box-sizing: border-box;
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-thumb {
	display: block;
	margin-bottom: 0;
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-thumb a {
	display: flex;
	justify-content: center;
	max-width: 100%;
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-thumb img {
	display: block;
	width: var(--pfoa-adopted-photo);
	height: var(--pfoa-adopted-photo);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: calc(var(--pfoa-radius) - 1px);
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-thumb-missing {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pfoa-adopted-photo);
	height: var(--pfoa-adopted-photo);
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	border: 1px dashed var(--pfoa-color-border);
	border-radius: calc(var(--pfoa-radius) - 1px);
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-missing-text {
	color: var(--pfoa-text-muted);
	font-family: var(--pfoa-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Names sit below the correct photos in the shared blue centered style. */
body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-title {
	flex: 0 0 auto;
	margin: 10px 0 0;
	color: var(--pfoa-action-primary);
	font-family: var(--pfoa-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	text-align: center;
	overflow-wrap: break-word;
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-date {
	flex: 0 0 auto;
	min-height: 2.9em;
	margin: 8px 0 0;
	color: var(--pfoa-text-muted);
	font-family: var(--pfoa-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-caption:not(.screen-reader-text) {
	margin: var(--pfoa-space-2) 0 0;
	color: var(--pfoa-text-muted);
	font-family: var(--pfoa-font-body);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
}

/* Badge straddles the bottom border in the row gap (absolute = zero flow),
 * so card height and title position are unchanged. */
body.page-id-20323 .pfoa-recently-adopted > .pfoa-adoption-event--bonded,
body.page-id-20323 .pfoa-recently-adopted > .pfoa-adoption-event--together {
	position: relative;
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-bonded-badge,
body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-together-badge {
	position: absolute;
	bottom: 0;
	top: auto;
	left: 50%;
	z-index: 2;
	display: inline-block;
	max-width: calc(100% - 1rem);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transform: translate(-50%, 50%);
	padding: 0.15rem 0.65rem;
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(33, 30, 29, 0.35);
	font-family: var(--pfoa-font-body);
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: center;
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-bonded-badge {
	background: var(--pfoa-color-brand);
}

body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-together-badge {
	background: var(--pfoa-cta-primary);
}

@media (max-width: 1319px) {
	/* PFOA 0.1.172 — flex wrapping centers partial rows; photo returns to
	 * the accepted Adopted readable scale once one-row fit is no longer
	 * the goal. No grid tracks in this scope. */
	body.page-id-20323 .pfoa-recently-adopted {
		--pfoa-adopted-photo: 204px;
	}

	@supports (width: 1cqw) {
		body.page-id-20323 .pfoa-recently-adopted {
			--pfoa-adopted-photo: calc((100cqw - 3 * var(--pfoa-space-2)) / 4 - (var(--pfoa-space-2) * 2 + 3px));
		}
	}
}

@media (max-width: 720px) {
	body.page-id-20323 .pfoa-recently-adopted {
		--pfoa-adopted-photo: 191px;
	}

	@supports (width: 1cqw) {
		body.page-id-20323 .pfoa-recently-adopted {
			--pfoa-adopted-photo: calc((100cqw - 2 * var(--pfoa-space-2)) / 3 - (var(--pfoa-space-2) * 2 + 3px));
		}
	}

	body.page-id-20323 .pfoa-recently-adopted > .pfoa-adoption-event-count-3,
	body.page-id-20323 .pfoa-recently-adopted > .pfoa-adoption-event-count-n {
		flex-basis: 100%;
		width: 100%;
	}

	body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-members-3 {
		grid-template-columns: repeat(2, var(--pfoa-adopted-photo));
	}

	body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-members-n {
		width: 100%;
		max-width: calc(var(--pfoa-adopted-photo) * 2 + var(--pfoa-adopted-gap));
		margin-inline: auto;
	}
}

@media (max-width: 480px) {
	body.page-id-20323 .pfoa-recently-adopted {
		--pfoa-adopted-photo: 142px;
	}

	@supports (width: 1cqw) {
		body.page-id-20323 .pfoa-recently-adopted {
			--pfoa-adopted-photo: calc((100cqw - 1 * var(--pfoa-space-2)) / 2 - (var(--pfoa-space-2) * 2 + 3px));
		}
	}

	body.page-id-20323 .pfoa-recently-adopted > .pfoa-adoption-event-count-2,
	body.page-id-20323 .pfoa-recently-adopted > .pfoa-adoption-event-count-3,
	body.page-id-20323 .pfoa-recently-adopted > .pfoa-adoption-event-count-n {
		flex-basis: 100%;
		width: 100%;
	}

	body.page-id-20323 .pfoa-recently-adopted .pfoa-adoption-event-members-2 {
		grid-template-columns: repeat(2, var(--pfoa-adopted-photo));
	}
}
/* PFOA Recently Adopted intro (page 20323 only, theme 0.1.133) — compact
 * centered heading + CTA directly above [pfoa_recently_adopted] output.
 * Reuses plain h2 type (Georgia 700) and .pfoa-button tokens; neutralizes
 * page-context h2/p margins inside the wrapper so wpautop spacing does not
 * stack above the grid. No new button design, no navy.
 * 0.1.133: +48px desktop / +32px mobile top separation from the final
 * Adoptable Cats card row (margin-top calc below; all other gaps untouched).
 * 0.1.265: center the h2 itself — the global h1..h6 rule sets
 * text-align:left directly on the element, which beats the inherited
 * center from .pfoa-recently-adopted-intro; the scoped text-align below
 * restores the shared heading/CTA centerline with no other changes.
 */
body.page-id-20323 .pfoa-recently-adopted-intro {
	margin: calc(var(--pfoa-space-5) + 48px) auto var(--pfoa-space-4);
	padding: 0 var(--pfoa-space-3);
	text-align: center;
}
body.page-id-20323 .pfoa-recently-adopted-intro .pfoa-recently-adopted-heading {
	margin: 0 0 var(--pfoa-space-3);
	text-align: center;
}
body.page-id-20323 .pfoa-recently-adopted-intro .pfoa-recently-adopted-cta {
	margin: 0;
}
/* wpautop wraps the shortcode comment + grid in an auto <p> with injected
 * <br>s; collapse that wrapper so the grid sits tight under the CTA. */
body.page-id-20323 .pfoa-recently-adopted-intro + p {
	margin: 0;
}
body.page-id-20323 .pfoa-recently-adopted-intro + p > br {
	display: none;
}
body.page-id-20323 .pfoa-recently-adopted-intro + .pfoa-recently-adopted,
body.page-id-20323 .pfoa-recently-adopted-intro + p .pfoa-recently-adopted {
	margin-top: 0;
}
@media (max-width: 480px) {
	body.page-id-20323 .pfoa-recently-adopted-intro {
		margin: calc(var(--pfoa-space-4) + 32px) auto var(--pfoa-space-3);
	}
}
/* PFOA Adoptable Cats intro (page 20323 only, theme 0.1.138) — centered
 * intro above the adoptable cat cards. Strict scope: every selector below
 * starts with body.page-id-20323 .pfoa-adoptable-intro, so the card grid,
 * dialog, and recently-adopted styles are untouched.
 */
body.page-id-20323 .pfoa-adoptable-intro {
	box-sizing: border-box;
	width: 100%;
	max-width: 720px;
	margin: 0 auto var(--pfoa-space-4);
	padding: 0 var(--pfoa-space-3, 18px);
	overflow-wrap: break-word;
}
body.page-id-20323 .pfoa-adoptable-heading {
	margin: 0 0 18px;
	padding: 0;
	color: var(--pfoa-text-primary, #302d2b);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.75rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	text-wrap: balance;
}
body.page-id-20323 .pfoa-adoptable-text p {
	margin: 0 0 14px;
	color: var(--pfoa-text-primary, #302d2b);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.125rem;
	line-height: 1.55;
	text-align: left;
}
body.page-id-20323 .pfoa-adoptable-text p:last-child {
	margin-bottom: 0;
}
@media (max-width: 480px) {
	body.page-id-20323 .pfoa-adoptable-intro {
		padding-inline: 16px;
	}
	body.page-id-20323 .pfoa-adoptable-text p {
		font-size: 1rem;
	}
}
/* Pet Tidings Concept A (page 4799 only, theme 0.1.189) — five expandable
 * date-range sections.
 * Supports markup contract: div.wp-block-group.pfoa-pt-page >
 * div.pfoa-pt-intro (Wills photo + one-sentence intro) +
 * div.pfoa-pt-current (h2#current-edition "Current Edition — Fall/Winter
 * 2026" + info paragraph + green PDF button, same Fall/Winter 2026 PDF URL) +
 * p.pfoa-pt-nav (secondary links to #past-issues + #newsletter-preferences) +
 * h2#past-issues.pfoa-pt-title "Past Issues" +
 * p.pfoa-pt-archive-intro ("Available issues ...", PT-02 sentence absent) +
 * 5 × details.pfoa-pt-range (first open; summary = date range + issue count
 * + indicator; content = unchanged __row/__year/__links rows, newest first,
 * year + PDF format in accessible link names) +
 * div.pfoa-pt-prefs (h2#newsletter-preferences "Newsletter Delivery
 * Preferences" + explainer + details.pfoa-pt-disclosure > shortcode,
 * behavior unchanged, auto-open on feedback preserved) +
 * div.pfoa-pt-about (h2 "About Pet Tidings" + two verbatim paragraphs,
 * no photo — the photo lives with the intro).
 * Native disclosure only: no archive JS, no tabs, no nested scrolling, no
 * fixed heights. Supersedes the 0.1.185–0.1.187 two-column archive rules.
 * Strict scope: every selector below starts with body.page-id-4799, so other
 * pages stay untouched.
 */
body.page-id-4799 .entry-content div.wp-block-group.pfoa-pt-page {
	max-width: min(60rem, 100%);
	margin-inline: auto;
	overflow-wrap: break-word;
}
body.page-id-4799 .entry-content div.pfoa-pt-page {
	max-width: min(60rem, 100%);
	margin-inline: auto;
}
/* Page rhythm: neutralize the 24px WP block-gap between top-level groups. */
body.page-id-4799 .entry-content div.pfoa-pt-page.is-layout-flow > * {
	margin-block-start: 1.5rem;
	margin-block-end: 0;
}
body.page-id-4799 .entry-content div.pfoa-pt-page.is-layout-flow > :first-child {
	margin-block-start: 0;
}
/* Section headings: Georgia, ~28px desktop / 24px mobile. */
body.page-id-4799 .entry-content h2.pfoa-pt-title,
body.page-id-4799 .entry-content h2.pfoa-pt-section {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.75rem;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
	scroll-margin-top: 5rem;
	margin-block: 0 0.75rem;
}
/* Intro: Wills' photograph alongside the one-sentence intro. */
body.page-id-4799 .entry-content div.pfoa-pt-intro {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
body.page-id-4799 .entry-content div.pfoa-pt-intro.is-layout-flow > figure,
body.page-id-4799 .entry-content div.pfoa-pt-intro.is-layout-flow > p {
	margin-block-start: 0;
}
body.page-id-4799 .entry-content figure.pfoa-pt-intro__photo {
	flex: 0 0 120px;
	width: 120px;
	margin: 0;
}
body.page-id-4799 .entry-content figure.pfoa-pt-intro__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pfoa-radius);
}
body.page-id-4799 .entry-content p.pfoa-pt-intro__text {
	margin-block: 0;
	min-width: 0;
	font-size: 1.0625rem;
}
/* Current Edition: centered info + prominent green PDF button. */
body.page-id-4799 .entry-content div.pfoa-pt-current {
	text-align: center;
}
body.page-id-4799 .entry-content p.pfoa-pt-current__info {
	margin-block: 0 1rem;
	font-size: 1rem;
}
body.page-id-4799 .entry-content div.pfoa-pt-current div.wp-block-buttons {
	justify-content: center;
	margin-block: 0;
}
body.page-id-4799 .entry-content div.pfoa-pt-current .wp-block-button__link {
	font-size: 1.125rem;
	padding: 0.9rem 2rem;
}
/* Secondary navigation to Past Issues + Newsletter Preferences. */
body.page-id-4799 .entry-content p.pfoa-pt-nav {
	text-align: center;
	margin-block: 0;
	font-size: 1rem;
}
body.page-id-4799 .entry-content p.pfoa-pt-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
/* Archive helper copy: available issues, not every historical issue. */
body.page-id-4799 .entry-content p.pfoa-pt-archive-intro {
	text-align: center;
	max-width: 40rem;
	margin-inline: auto;
	margin-block: 0;
	font-size: 1rem;
}
/* Date-range disclosures: subtle border, pale-tinted summaries. */
body.page-id-4799 .entry-content details.pfoa-pt-range {
	border: 1px solid var(--pfoa-border-default);
	border-radius: var(--pfoa-radius);
	background: var(--pfoa-color-background);
	margin-block: 0.75rem 0;
}
body.page-id-4799 .entry-content details.pfoa-pt-range > summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	min-height: 48px;
	list-style: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	padding: 0.75rem 1.25rem;
	border-radius: var(--pfoa-radius);
	background: var(--pfoa-surface-subtle);
}
body.page-id-4799 .entry-content details.pfoa-pt-range > summary::-webkit-details-marker {
	display: none;
}
body.page-id-4799 .entry-content details.pfoa-pt-range > summary::marker {
	content: "";
}
body.page-id-4799 .entry-content span.pfoa-pt-range__count {
	font-weight: 400;
	color: var(--pfoa-color-muted);
}
body.page-id-4799 .entry-content details.pfoa-pt-range > summary::after {
	content: "+";
	margin-inline-start: auto;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
}
body.page-id-4799 .entry-content details.pfoa-pt-range[open] > summary::after {
	content: "–";
}
body.page-id-4799 .entry-content details.pfoa-pt-range > summary:hover {
	text-decoration: underline;
}
body.page-id-4799 .entry-content details.pfoa-pt-range > summary:focus-visible {
	outline: 2px solid var(--pfoa-color-brand);
	outline-offset: 2px;
}
body.page-id-4799 .entry-content div.pfoa-pt-range__content {
	padding: 0.5rem 1.25rem 1rem;
}
/* Year rows: 64px year column on desktop; stacked on mobile. */
body.page-id-4799 .entry-content div.pfoa-pt-archive__row {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--pfoa-border-default);
}
body.page-id-4799 .entry-content div.pfoa-pt-archive__row:last-child {
	border-bottom: 0;
}
body.page-id-4799 .entry-content span.pfoa-pt-archive__year {
	flex: 0 0 64px;
	font-weight: 700;
}
body.page-id-4799 .entry-content span.pfoa-pt-archive__links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	min-width: 0;
}
/* PFOA 0.1.235 — sitewide hyperlink standard: text links rest without a
 * permanent underline (rest none + underline on hover/focus-visible, matching
 * Staff 4968 / In Memoriam 5421); no seasonal pills. Consolidated in B3:
 * decoration now owned by the 0.1.235 sitewide rule. */
body.page-id-4799 .entry-content span.pfoa-pt-archive__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 1rem;
	text-underline-offset: 0.15em;
	overflow-wrap: anywhere;
}
/* Visible keyboard focus across archive links, summaries, nav + button. */
body.page-id-4799 .entry-content span.pfoa-pt-archive__links a:focus-visible,
body.page-id-4799 .entry-content p.pfoa-pt-nav a:focus-visible,
body.page-id-4799 .entry-content div.pfoa-pt-current .wp-block-button__link:focus-visible {
	outline: 2px solid var(--pfoa-color-brand);
	outline-offset: 2px;
}
/* Delivery preferences (unchanged behavior, feedback auto-open preserved). */
body.page-id-4799 .entry-content div.pfoa-pt-prefs {
	max-width: min(60rem, 100%);
	margin-inline: auto;
}
body.page-id-4799 .entry-content div.pfoa-pt-prefs p.pfoa-pt-prefs-explainer {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
	font-size: 1rem;
}
body.page-id-4799 .entry-content details.pfoa-pt-disclosure {
	border: 1px solid var(--pfoa-border-default);
	border-radius: var(--pfoa-radius);
	background: var(--pfoa-color-background);
	padding: 0;
	margin-block: 1rem 0;
}
body.page-id-4799 .entry-content details.pfoa-pt-disclosure > summary {
	list-style: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--pfoa-radius);
	background: var(--pfoa-surface-subtle);
}
body.page-id-4799 .entry-content details.pfoa-pt-disclosure > summary::-webkit-details-marker {
	display: none;
}
body.page-id-4799 .entry-content details.pfoa-pt-disclosure > summary::marker {
	content: "";
}
body.page-id-4799 .entry-content details.pfoa-pt-disclosure > summary::after {
	content: "+";
	display: inline-block;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
}
body.page-id-4799 .entry-content details.pfoa-pt-disclosure[open] > summary::after {
	content: "–";
}
body.page-id-4799 .entry-content details.pfoa-pt-disclosure > summary:hover {
	text-decoration: underline;
}
body.page-id-4799 .entry-content details.pfoa-pt-disclosure > summary:focus-visible {
	outline: 2px solid var(--pfoa-color-brand);
	outline-offset: 2px;
}
body.page-id-4799 .entry-content details.pfoa-pt-disclosure > div.pfoa-pt-disclosure__content {
	padding: 0 1.25rem 1.5rem;
}
/* About: full substantive copy below preferences, no duplicated photo. */
body.page-id-4799 .entry-content div.pfoa-pt-about {
	font-size: 1rem;
}
body.page-id-4799 .entry-content div.pfoa-pt-about.is-layout-flow > * {
	margin-block-start: 1rem;
	margin-block-end: 0;
}
body.page-id-4799 .entry-content div.pfoa-pt-about.is-layout-flow > :first-child {
	margin-block-start: 0;
}
@media (max-width: 600px) {
	body.page-id-4799 .entry-content h2.pfoa-pt-title,
	body.page-id-4799 .entry-content h2.pfoa-pt-section {
		font-size: 1.5rem;
	}
	body.page-id-4799 .entry-content div.wp-block-group.pfoa-pt-page,
	body.page-id-4799 .entry-content div.pfoa-pt-page {
		max-width: 100%;
		overflow-x: visible;
		box-sizing: border-box;
		min-width: 0;
	}
	body.page-id-4799 .entry-content figure.pfoa-pt-intro__photo {
		flex-basis: 80px;
		width: 80px;
	}
	body.page-id-4799 .entry-content div.pfoa-pt-intro {
		gap: 1rem;
	}
	body.page-id-4799 .entry-content div.pfoa-pt-archive__row {
		flex-direction: column;
		gap: 0.25rem;
	}
	body.page-id-4799 .entry-content span.pfoa-pt-archive__year {
		flex-basis: auto;
	}
	body.page-id-4799 .entry-content div.pfoa-pt-range__content {
		padding: 0.25rem 1rem 0.75rem;
	}
	body.page-id-4799 .entry-content details.pfoa-pt-range > summary {
		padding-inline: 1rem;
	}
}
/* Print exposes the complete historical archive. Blink hides closed-details
 * content inside an internal wrapper that author display rules on the light
 * DOM cannot reach, so force it visible via ::details-content (supported by
 * modern Chromium/Safari/Firefox); the display fallback covers engines that
 * hide closed content with a plain UA display rule. */
@media print {
	body.page-id-4799 .entry-content details.pfoa-pt-range::details-content {
		content-visibility: visible !important;
	}
	body.page-id-4799 .entry-content details.pfoa-pt-range:not([open]) > div.pfoa-pt-range__content {
		display: block;
	}
	body.page-id-4799 .entry-content details.pfoa-pt-range:not([open]) > summary::after {
		content: "–";
	}
}
@media (min-width: 1320px) {
	body.page-id-4799 .site-header {
		position: relative;
		top: auto;
	}
}
/* Pet Tidings PT-01 spacing polish (page 4799 only, theme 0.1.190) — compact
 * the introductory composition so the first Past Issues date-range control
 * sits ~150–200px higher on desktop without touching approved structure.
 * Scope: every selector below starts with body.page-id-4799, so other pages
 * stay untouched. Preserves: H1 style + gold divider, Wills photo, intro
 * sentence, Current Edition heading/info/PDF URL, all 5 ranges + 71 links,
 * native disclosures, responsive stacking, prefs form behavior, About copy.
 * Changes vs Concept A (0.1.189): (a) page-top rhythm tightened (shell +
 * entry-header overrides); (b) top-level block gap 1.5rem → 1rem with stable
 * per-section overrides (no positional :nth-child selectors); (c) Current
 * Edition internals compacted (heading/info margins, button padding);
 * (d) redundant p.pfoa-pt-nav jump-link row removed from markup — replaced
 * by an unobtrusive p.pfoa-pt-prefs-link inside the current-edition group
 * (same #newsletter-preferences anchor, existing 5rem scroll-margin kept);
 * (e) Past Issues transition kept intentional (slightly larger top margin on
 * h2#past-issues + tighter archive-intro/range gaps).
 */
body.page-id-4799 .content-shell {
	padding-top: 1.25rem;
}
body.page-id-4799 .page-content .entry-header {
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
}
/* Page rhythm: tighten the 24px WP block-gap between top-level groups. */
body.page-id-4799 .entry-content div.pfoa-pt-page.is-layout-flow > * {
	margin-block-start: 1rem;
	margin-block-end: 0;
}
body.page-id-4799 .entry-content div.pfoa-pt-page > div.pfoa-pt-current {
	margin-block-start: 0.75rem;
}
/* Current Edition: compact heading/info/button, keep centered composition. */
body.page-id-4799 .entry-content div.pfoa-pt-current > h2.pfoa-pt-section {
	margin-block: 0 0.375rem;
}
body.page-id-4799 .entry-content p.pfoa-pt-current__info {
	margin-block: 0 0.625rem;
}
body.page-id-4799 .entry-content div.pfoa-pt-current .wp-block-button__link {
	font-size: 1rem;
	padding: 0.65rem 1.5rem;
}
/* Replacement secondary link: unobtrusive prefs link inside current edition. */
body.page-id-4799 .entry-content p.pfoa-pt-prefs-link {
	text-align: center;
	margin-block: 0.5rem 0;
	font-size: 0.9375rem;
}
body.page-id-4799 .entry-content p.pfoa-pt-prefs-link a:focus-visible,
body.page-id-4799 .entry-content p.pfoa-pt-prefs-link a:hover {
	text-underline-offset: 0.15em;
}
body.page-id-4799 .entry-content p.pfoa-pt-prefs-link a:focus-visible {
	outline: 2px solid var(--pfoa-color-brand);
	outline-offset: 2px;
}
/* Past Issues transition: intentional separation, then tight archive stack. */
body.page-id-4799 .entry-content div.pfoa-pt-page > h2.pfoa-pt-title#past-issues {
	margin-block-start: 1.25rem;
	margin-block-end: 0;
}
body.page-id-4799 .entry-content div.pfoa-pt-page > p.pfoa-pt-archive-intro {
	margin-block-start: 0.5rem;
}
body.page-id-4799 .entry-content div.pfoa-pt-page > details.pfoa-pt-range {
	margin-block-start: 0.5rem;
}
/* Pet Tidings PT-01 Marilyn revised design (page 4799 only, theme 0.1.192) —
 * compact two-column intro, single current-issue button, narrow archive.
 * Supports markup contract: div.wp-block-group.pfoa-pt-page >
 * div.pfoa-pt-intro (div.pfoa-pt-intro__copy with the substantive newsletter
 * paragraphs + figure.pfoa-pt-intro__photo Wills, text left / photo right) +
 * div.pfoa-pt-current (one centered green button "Read current issue:
 * Fall/Winter 2026", same verified Fall/Winter 2026 PDF URL) +
 * h2#past-issues.pfoa-pt-title "Past Issues" +
 * p.pfoa-pt-archive-intro (unchanged helper copy) +
 * 5 x details.pfoa-pt-range (2021-2025 open with 4 issues; 2016-2020 with
 * 10; 2011-2015, 2006-2010, 2001-2005 with 19 each; 71 links / 23 years
 * total, newest first, unchanged row/year/link markup and PDF URLs) +
 * div.pfoa-pt-prefs (h2#newsletter-preferences "Delivery Preferences" +
 * unchanged explainer + details.pfoa-pt-disclosure > shortcode, behavior
 * unchanged, auto-open on feedback preserved).
 * Preserves: centered Georgia H1 + gold divider, all PDF destinations and
 * labels, native disclosures, prefs shortcode/form behavior, print rules.
 * Supersedes the 0.1.185-0.1.190 full-width archive and left-photo intro
 * rules below only via later equal-specificity overrides; every selector
 * stays scoped to body.page-id-4799.
 */
body.page-id-4799 .entry-content div.pfoa-pt-intro {
	align-items: flex-start;
	gap: 1.5rem;
}
body.page-id-4799 .entry-content div.pfoa-pt-intro__copy {
	flex: 1 1 auto;
	min-width: 0;
}
body.page-id-4799 .entry-content div.pfoa-pt-intro__copy > * + * {
	margin-block-start: 0.875rem;
	margin-block-end: 0;
}
body.page-id-4799 .entry-content p.pfoa-pt-intro__text {
	font-size: 1rem;
	line-height: 1.6;
}
body.page-id-4799 .entry-content figure.pfoa-pt-intro__photo {
	flex: 0 0 180px;
	width: 180px;
}
/* Current edition: one centered button that adapts to narrow widths. */
body.page-id-4799 .entry-content div.pfoa-pt-current .wp-block-button__link {
	max-width: 100%;
	white-space: normal;
	text-wrap: balance;
}
/* Compact centered archive column (~448px) for heading helper + ranges. */
body.page-id-4799 .entry-content div.pfoa-pt-page > p.pfoa-pt-archive-intro {
	max-width: min(28rem, 100%);
	margin-inline: auto;
}
body.page-id-4799 .entry-content div.pfoa-pt-page > details.pfoa-pt-range {
	max-width: min(28rem, 100%);
	margin-inline: auto;
}
/* Delivery preferences mirrors the compact centered archive column. */
body.page-id-4799 .entry-content div.pfoa-pt-prefs {
	max-width: min(28rem, 100%);
}
@media (max-width: 600px) {
	body.page-id-4799 .entry-content div.pfoa-pt-intro {
		flex-direction: column;
		gap: 1rem;
	}
	body.page-id-4799 .entry-content figure.pfoa-pt-intro__photo {
		flex: none;
		width: 160px;
		margin-inline: auto;
	}
}
/* Pet Tidings PT-01 Marilyn mockup alignment (page 4799 only, theme 0.1.193)
 * — match the supplied mockup: wide flat serif current-issue button; pale
 * blue centered range bars without +/- indicators; plain divider-free year
 * rows; hyphenated ranges; wide left-aligned Delivery Preferences explainer;
 * pale-blue centered preferences bar without indicator.
 * Copy (intro paragraph, archive helper, prefs explainer) is Marilyn's
 * verbatim mockup text in page 4799 content. Preserves: centered Georgia H1
 * + gold divider, Wills photo, verified PDF URLs/labels (71 + current), 23
 * years newest-first, native disclosures, shortcode/form behavior, print
 * full-archive exposure. Every selector stays scoped to body.page-id-4799.
 */
body.page-id-4799 .entry-content div.pfoa-pt-current div.wp-block-button {
	width: min(30rem, 100%);
}
body.page-id-4799 .entry-content div.pfoa-pt-current .wp-block-button__link {
	display: block;
	width: 100%;
	border-radius: 2px;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.3;
	padding: 0.8rem 1.5rem;
}
/* Pale-blue centered range bars; dates bold, counts regular, same ink. */
body.page-id-4799 .entry-content details.pfoa-pt-range > summary {
	display: block;
	text-align: center;
	min-height: 0;
	padding: 0.65rem 1rem;
	background: #e8f0fa;
}
body.page-id-4799 .entry-content span.pfoa-pt-range__count {
	color: inherit;
}
/* No disclosure indicators anywhere on this page (mockup shows none);
 * native disclosure semantics and keyboard focus are unchanged. */
body.page-id-4799 .entry-content details.pfoa-pt-range > summary::after,
body.page-id-4799 .entry-content details.pfoa-pt-range[open] > summary::after,
body.page-id-4799 .entry-content details.pfoa-pt-disclosure > summary::after {
	content: "";
	margin: 0;
}
/* Plain year rows without dividers. */
body.page-id-4799 .entry-content div.pfoa-pt-archive__row {
	border-bottom: 0;
	padding: 0.3rem 0;
}
/* Delivery preferences: full-width readable explainer + centered bar. */
body.page-id-4799 .entry-content div.pfoa-pt-prefs {
	max-width: min(60rem, 100%);
}
body.page-id-4799 .entry-content div.pfoa-pt-prefs p.pfoa-pt-prefs-explainer {
	max-width: none;
	text-align: left;
	line-height: 1.6;
}
body.page-id-4799 .entry-content details.pfoa-pt-disclosure {
	max-width: min(22rem, 100%);
	margin-inline: auto;
	border: 0;
	background: transparent;
}
body.page-id-4799 .entry-content details.pfoa-pt-disclosure > summary {
	display: block;
	text-align: center;
	min-height: 0;
	padding: 0.8rem 1.5rem;
	border-radius: 2px;
	background: #e8f0fa;
	color: inherit;
}
@media print {
	body.page-id-4799 .entry-content details.pfoa-pt-range:not([open]) > summary::after {
		content: "";
	}
}
@media (max-width: 600px) {
	body.page-id-4799 .entry-content div.pfoa-pt-current .wp-block-button__link {
		font-size: 1.125rem;
	}
}
/* PFOA 0.1.158 — In Memoriam float containment + Spatzi video.
 * (a) Ordinary .page-content entries (e.g. Spatzi page-id-25036) carry floated
 * genesis-columns-advanced columns but lack the .page-content-compatibility
 * clearfix scope and the trailing <div class="clear"> that PROD has, so floats
 * escape .entry-content (which computes overflow:visible, ::after content:none)
 * and #colophon starts above the float bottoms. Extend the existing compat
 * clearfix pattern (above) to plain page-content entries. No plugin CSS, float/
 * width, footer-grid, or global overflow changes.
 * (b) Restore the compact PROD Spatzi sidebar video (180x95) inside its
 * one-third column; the generic 16:9 rule above expands it to full column
 * width. Scoped to page-id-25036 only. */
.page-content .entry-content::after {
	display: table;
	clear: both;
	content: "";
}

body.page-id-25036 .entry-content .gca-column.one-third iframe[src*="youtube.com/embed"],
body.page-id-25036 .entry-content .gca-column.one-third iframe[src*="youtube-nocookie.com/embed"] {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	display: block;
}

/* PFOA 0.1.161 — In Memoriam parent gallery mobile caption correction
 * (page-id-5421 only, https://dev.safehavenpfoa.org/inmemoriam/).
 * Root cause: global `.page-content .entry-content { overflow-wrap: anywhere; }`
 * fragments caption words inside the fixed 6-column photo table
 * (`table.aligncenter[table-layout:fixed]` + `td[width="16%"]`), which leaves
 * only ~47px of caption width at 390px. At narrow widths restore word-boundary
 * wrapping and reflow the six columns into three so intact names fit.
 * Scope is strictly body.page-id-5421 + table.aligncenter photo-grid markup;
 * desktop (>600px) keeps the accepted 6-column fixed presentation untouched.
 * No markup, link, lightbox, or biography changes. */
@media (max-width: 600px) {
	body.page-id-5421 .page-content .entry-content table.aligncenter td span,
	body.page-id-5421 .page-content .entry-content table.aligncenter td span a {
		overflow-wrap: break-word;
		word-break: normal;
	}
	body.page-id-5421 .page-content .entry-content table.aligncenter,
	body.page-id-5421 .page-content .entry-content table.aligncenter tbody,
	body.page-id-5421 .page-content .entry-content table.aligncenter tr {
		display: block;
		width: 100%;
	}
	body.page-id-5421 .page-content .entry-content table.aligncenter tr {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px 4px;
	}
	body.page-id-5421 .page-content .entry-content table.aligncenter td {
		display: block;
		width: auto;
		padding: 4px;
	}
	body.page-id-5421 .page-content .entry-content table.aligncenter td img {
		width: 100%;
		height: auto;
		max-width: 150px;
	}
}

/* PFOA 0.1.167 — Fundraisers hub mobile caption correction
 * (page-id-4511 only, https://dev.safehavenpfoa.org/fundraisers/).
 * Root cause: global `.page-content .entry-content { overflow-wrap: anywhere; }`
 * fragments caption words inside the fixed 4-column tile table (content-authored
 * `table[style*="table-layout: fixed"]` + `td[width="25%"]`; the inline fixed
 * layout wins over the theme photo-grid `table-layout: auto`), leaving ~80px
 * caption lanes at 390px (~62px at 320px) where 17px words such as
 * "fundraising" cannot fit intact. At narrow widths restore word-boundary
 * wrapping, tighten the theme-owned cell padding (4px wins over the
 * presentation-attribute cellpadding, so it needs a page-scoped override),
 * and scale caption type (content-authored inline 17px, hence !important)
 * so the longest caption word fits its lane whole: 13px at <=600px and
 * 11.5px at <=360px (verified zero mid-word splits at 390/360/320px).
 * Scope is strictly body.page-id-4511 + photo-grid (`:has(td img)`) tile
 * tables; photos, order, links, lightbox behavior, and desktop (>600px)
 * presentation are untouched. The four-column baseline is preserved. */
@media (max-width: 600px) {
	body.page-id-4511 .page-content .entry-content table:has(td img) td {
		padding: 2px !important;
	}
	body.page-id-4511 .page-content .entry-content table:has(td img) td span,
	body.page-id-4511 .page-content .entry-content table:has(td img) td span a {
		overflow-wrap: break-word;
		word-break: normal;
	}
	body.page-id-4511 .page-content .entry-content table:has(td img) td span {
		font-size: 13px !important;
	}
}
@media (max-width: 360px) {
	body.page-id-4511 .page-content .entry-content table:has(td img) td span {
		font-size: 11.5px !important;
	}
}

/* PFOA 0.1.173 — P1-03 page-title wrap safety net + P1-04 Events table mobile fix
 * (About https://dev.safehavenpfoa.org/missionandobjectives/ page-id-6738,
 *  Lifetime https://dev.safehavenpfoa.org/lifetimecare/ page-id-5574,
 *  Events https://dev.safehavenpfoa.org/eventscalendar/ page-id-4657).
 * P1-03 root cause: the theme renders raw post_title as h1.entry-title and
 * three titles lack spaces (MissionAndObjectives / LifetimeCare /
 * EventsCalendar). The title rule computed overflow-wrap:normal +
 * max-width:none, so About overflowed 44px @390 / 114px @320. Content lane
 * owns titles (no DB writes here); this is a scoped safety net on the
 * page-title rule only (NOT global *): unspaced titles break mid-word instead
 * of escaping the viewport, spaced titles keep natural word wrapping.
 * P1-04 root cause: global `.page-content .entry-content
 * { overflow-wrap:anywhere; }` fragments the Events Calendar wp-block-table
 * headers/cells mid-word at 390/320 ("Dat es", "Locatio n", "Tim es").
 * At <=600px the table wrapper owns its horizontal scroll surface and cells
 * return to word-boundary wrapping: headers stay on one whole-word line,
 * body cells wrap whole words only, and wide tables scroll internally with
 * zero page-level overflow. Native table semantics are kept; the scroll
 * region is keyboard-focusable via the PFOA 0.1.173 render_block filter in
 * functions.php. Desktop (>600px) presentation is untouched. */
.page-content .entry-title,
.page-title {
	max-width: 100%;
	overflow-wrap: anywhere;
}

@media (max-width: 600px) {
	.page-content .entry-content figure.wp-block-table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.page-content .entry-content figure.wp-block-table th {
		white-space: nowrap;
		overflow-wrap: normal;
		word-break: normal;
	}

	.page-content .entry-content figure.wp-block-table td {
		overflow-wrap: break-word;
		word-break: normal;
	}
}

/* PFOA 0.1.177 — In Memoriam heading + gallery link correction
 * (page-id-5421 only, https://dev.safehavenpfoa.org/inmemoriam/).
 * Heading root cause: the page's primary heading is content-owned (theme
 * title suppressed for inmemoriam via pfoa_should_render_page_title
 * exclusion, so no duplicate H1). Content carries a single H1 preceded by
 * a legacy empty top-anchor paragraph (<p><a name="top"></a></p>), so the
 * selector uses :first-of-type (not :first-child); the anchor paragraph is
 * preserved untouched. The standard interior H1 is large dark
 * left-aligned with a gold entry-header divider (centered full-shell
 * variant on Home Front, page-id-11290). Pair with the one-time content
 * edit promoting the old navy H4 to a plain <h1>IN MEMORIAM</h1> (no inline
 * color/size): this rule centers it over the full gallery content width
 * with the gold divider and consistent vertical rhythm. Intro paragraph
 * and photo-grid table markup untouched.
 * Link root cause: persistent underlines come from the theme-owned global
 * treatment (theme.json elements.link textDecoration underline +
 * style.css `a` thickness/offset), NOT the gallery component
 * (pfoa-gallery-lightbox owns .pfoa-cat-gallery/lightbox only and does not
 * target this legacy table.aligncenter photo-grid) and NOT a separate
 * gallery stylesheet. Page content owns the navy #000080 caption color via
 * inline styles, which is preserved. Following the Staff roster precedent
 * (page-id-4968 #staff-roster), remove the persistent underline from
 * caption links only (td span a; image links untouched), keep authored
 * navy color and theme font-weight:600 for distinguishability, restore
 * underline on hover/focus-visible, and leave the global focus-ring
 * outline intact for keyboard visibility. Desktop grid and mobile 600px
 * reflow (0.1.161) untouched. Consolidated in B3: decoration now owned by
 * the 0.1.235 sitewide rule. */
body.page-id-5421 .page-content .entry-content > h1:first-of-type {
	max-width: 100%;
	margin-top: 0;
	margin-bottom: var(--pfoa-space-6);
	border-bottom: 2px solid var(--pfoa-color-gold);
	padding-bottom: var(--pfoa-space-4);
	text-align: center;
}

/* PFOA 0.1.178 — Standardized page title presentation (recommendations A + C).
 * Visual reference: accepted Home Front (page-id-11290, theme-owned H1 with
 * entry-header max-width:100% + centered text) and In Memoriam (page-id-5421,
 * content-owned H1 with gold divider, centered).
 * (A) Standard pages: every Page rendering the shared theme title now uses
 * the centered full-shell heading container. Typography (Georgia 700,
 * clamp(2.25rem,4vw,3rem), 1.1, primary color), gold divider, and vertical
 * rhythm come from the existing .page-content .entry-header rule untouched;
 * only alignment and container change here. Scoped to body.page so posts
 * (body.single, content-single.php), archives/home/search (.page-title),
 * Cat Profiles (body.single-pfoa_cat), and the homepage hero
 * (front-page.php owns .front-page-content, no entry-header) keep their own
 * heading systems. Pages with content-owned H1s render no entry-header, so
 * this rule does not touch them; they are covered below. Home Front keeps
 * its identical page-specific centering (now redundant, preserved).
 * (C) Four landing pages keep their single content-owned H1 (theme title
 * stays suppressed via pfoa_should_render_page_title, so no duplicate H1)
 * and gain the standard centered presentation with divider. 4159/5656 pair
 * with the one-time content edit promoting each navy H4 to a plain <h1>
 * (same precedent as In Memoriam 0.1.176); :first-of-type tolerates the
 * legacy top-anchor markup. 20323 reuses its .pfoa-adoptable-heading hook
 * (stays inside the 720px intro, centered on the same centerline); 22514
 * reuses its first-child hook (intro/gallery rules untouched). Galleries,
 * cards, intro copy, links, and layouts are untouched. */
body.page .page-content .entry-header {
	max-width: 100%;
	text-align: center;
}

body.page .page-content .entry-header .entry-title {
	text-align: center;
}

body.page-id-4159 .page-content .entry-content > h1:first-of-type,
body.page-id-5656 .page-content .entry-content > h1:first-of-type {
	max-width: 100%;
	margin-top: 0;
	margin-bottom: var(--pfoa-space-6);
	border-bottom: 2px solid var(--pfoa-color-gold);
	padding-bottom: var(--pfoa-space-4);
	text-align: center;
}

body.page-id-20323 .pfoa-adoptable-intro .pfoa-adoptable-heading {
	max-width: 100%;
	margin-bottom: var(--pfoa-space-6);
	border-bottom: 2px solid var(--pfoa-color-gold);
	padding-bottom: var(--pfoa-space-4);
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1.1;
}

/* PFOA 0.1.266 — Adoptable Cats leading-spacer collapse (page-id-20323 only).
 * Root cause: template_builder suppresses the theme title and page content
 * owns <div class="pfoa-adoptable-intro"><p>&nbsp;</p><h1 ...>; the stray
 * leading <p> holds a &nbsp; so it is NOT :empty (the shared
 * .entry-content>:first-child null misses it — it is not a direct child)
 * and it contributes a ~27px line box plus paragraph bottom margin stacked
 * on the shared 32px body.page .content-shell top padding. Collapse that
 * leading spacer to zero height and pin the heading top so the gap matches
 * theme-titled pages (e.g. /volunteering/). Scoped strictly to
 * body.page-id-20323 .pfoa-adoptable-intro; heading typography/alignment/
 * divider (above), body copy, header, hero, and mobile rules untouched. */
body.page-id-20323 .pfoa-adoptable-intro > p:first-child {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0;
	line-height: 0;
	min-height: 0;
}
body.page-id-20323 .pfoa-adoptable-intro > h1.pfoa-adoptable-heading {
	margin-top: 0;
}

body.page-id-22514 .page-content .entry-content > h1:first-child {
	max-width: 100%;
	margin-top: 0;
	margin-bottom: var(--pfoa-space-6);
	border-bottom: 2px solid var(--pfoa-color-gold);
	padding-bottom: var(--pfoa-space-4);
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1.1;
	text-align: center;
}

/* PFOA 0.1.179 — Home Front mobile H1 single-line fit
 * (page-id-11290 only, https://dev.safehavenpfoa.org/fromthehomefront-2/).
 * Root cause: the shared title safety net (0.1.173)
 * `.page-content .entry-title { overflow-wrap: anywhere; }` fragments the
 * single-word H1 FromTheHomeFront mid-word at 390px (leaving `ont` on a
 * second line). At <=600px neutralize that behavior page-scoped
 * (overflow-wrap:normal + word-break:normal) and scale the title down just
 * enough to fit one line: clamp(1.75rem,8vw,2.25rem) yields ~31px at 390px
 * (~274px word in a 350px lane) and 28px at 320px (~246px word in a 280px
 * lane). Centered alignment, Georgia 700, dark color, and gold divider come
 * from the existing entry-header rules untouched; desktop (>600px) keeps
 * the standard clamp(2.25rem,4vw,3rem). All other pages keep the shared
 * anywhere safety net (P1-03 unspaced-title protection) untouched. */
@media (max-width: 600px) {
	body.page-id-11290 .page-content .entry-header .entry-title {
		overflow-wrap: normal;
		word-break: normal;
		font-size: clamp(1.75rem, 8vw, 2.25rem);
	}
}

/* PFOA 0.1.183 — From The Home Front layout correction (consolidated,
 * page-id-11290 only, https://dev.safehavenpfoa.org/fromthehomefront-2/).
 * SUPERSEDES 0.1.175 + 0.1.182 (both prior blocks removed and folded in
 * here — no additional competing override).
 * (a) H1: the old page-specific centering is REMOVED as redundant — the
 * global body.page .entry-header rule (0.1.178) already centers every page
 * title on the shared centerline. Mobile single-line fit (0.1.179) stays
 * untouched. Typography, wording, and heading hierarchy are untouched.
 * (b) Week 276 CTA (the page's only div.wp-block-buttons): keeps the
 * accepted symmetric 24px margin-block + centering for even spacing above
 * and below. The old `clear:both` is REMOVED as ineffective — the intro is
 * native columns with no floats left to clear.
 * (c) Intro: hooked on the stable `.pfoa-homefront-intro` Additional CSS
 * class (not fragile :first-child). Top-aligned (flex-start) so unequal
 * column heights add no centering slack. Core columns bottom margin is
 * neutralized (margin-bottom:0) and the following catch-up paragraph
 * ("If you missed any of my weekly columns...") carries an explicit 30px
 * top margin, giving a predictable ~30px separation instead of the old
 * combined columns-margin + paragraph-flow stack. Photo capped at ~280px,
 * centered in its column (width:100% height:auto preserves aspect).
 * Preserved untouched: 960px shell, 720px prose, full-width weekly
 * four-column links, shared centerline, H1, gold divider, copy, links,
 * image, and CTA styling. Mobile (max-width:720px): core
 * isStackedOnMobile stacks intro + weekly links naturally with centered
 * CTA and paragraph rhythm; the guard only prevents overflow. */
body.page-id-11290 .page-content .entry-content div.wp-block-buttons {
	margin-block: 24px;
	justify-content: center;
}

body.page-id-11290 .page-content .entry-content .wp-block-columns.pfoa-homefront-intro {
	align-items: flex-start;
	column-gap: 32px;
	margin-bottom: 0;
}

body.page-id-11290 .page-content .entry-content .wp-block-columns.pfoa-homefront-intro > .wp-block-column {
	min-width: 0;
}

body.page-id-11290 .page-content .entry-content .wp-block-columns.pfoa-homefront-intro + p {
	margin-top: 30px;
}

body.page-id-11290 .page-content .entry-content .wp-block-columns.pfoa-homefront-intro figure.wp-block-image {
	max-width: 280px;
	margin-inline: auto;
}

body.page-id-11290 .page-content .entry-content .wp-block-columns.pfoa-homefront-intro figure.wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 720px) {
	body.page-id-11290 .page-content .entry-content .wp-block-columns.pfoa-homefront-intro > .wp-block-column {
		min-width: 0;
		max-width: 100%;
	}
}

/* PFOA 0.1.195 — PT-01 compact archive disclosure (page-id-4799 only,
 * https://dev.safehavenpfoa.org/pettidings/).
 * Replaces the oversized individual year rows with a compact wrapping link
 * list while preserving Marilyn's approved layout (centered Georgia H1 +
 * gold divider, Wills photo, single green current-issue button, pale-blue
 * centered range bars, wide left-aligned Delivery Preferences explainer and
 * centered preferences bar, native disclosures, prefs shortcode/form
 * behavior, print full-archive exposure).
 * Markup contract: 5 x details.pfoa-pt-range, ALL COLLAPSED (no open
 * attribute) — summary = date range + accurate issue count + visible
 * expand/collapse indicator; content = p.pfoa-pt-archive__list of
 * independent PDF links whose visible text identifies both year and season
 * (e.g. "2025 Summer"), separated by aria-hidden middots, newest first
 * (71 links / 23 years total, verified PDF URLs unchanged).
 * Supersedes the 0.1.189–0.1.194 __row/__year/__links year-row rules below
 * only via later equal-specificity overrides; legacy row selectors are left
 * in place (inert) for backward compatibility. Every selector stays scoped
 * to body.page-id-4799.
 */
/* Visible expand/collapse indicator on range summaries (restores the
 * 0.1.189 +/– treatment that 0.1.193–0.1.194 suppressed for the mockup):
 * collapsed shows "+", open shows "–", inline after the issue count. */
body.page-id-4799 .entry-content details.pfoa-pt-range > summary::after {
	content: "+";
	margin-inline-start: 0.5rem;
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1;
}
body.page-id-4799 .entry-content details.pfoa-pt-range[open] > summary::after {
	content: "–";
	margin-inline-start: 0.5rem;
}
/* Compact wrapping issue list: modest gaps, natural line wrapping, no
 * large row heights, no empty slots, no nested scrolling. Consolidated in
 * B3: decoration now owned by the 0.1.235 sitewide rule. */
body.page-id-4799 .entry-content p.pfoa-pt-archive__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.6rem;
	margin: 0;
	padding: 0.5rem 0 0.25rem;
	font-size: 1rem;
	line-height: 1.5;
}
body.page-id-4799 .entry-content p.pfoa-pt-archive__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-underline-offset: 0.15em;
	overflow-wrap: break-word;
}
body.page-id-4799 .entry-content p.pfoa-pt-archive__list a:hover,
body.page-id-4799 .entry-content p.pfoa-pt-archive__list a:focus-visible {
	text-underline-offset: 0.25em;
}
body.page-id-4799 .entry-content p.pfoa-pt-archive__list a:focus-visible {
	outline: 2px solid var(--pfoa-color-brand);
	outline-offset: 2px;
}
body.page-id-4799 .entry-content span.pfoa-pt-archive__sep {
	color: var(--pfoa-color-muted);
	user-select: none;
}
@media (max-width: 600px) {
	body.page-id-4799 .entry-content p.pfoa-pt-archive__list {
		gap: 0.1rem 0.5rem;
	}
}

/* PFOA 0.1.196 — From The Home Front Pet-Tidings alignment (page-id-11290 only, https://dev.safehavenpfoa.org/fromthehomefront-2/).
 * Pairs with the one-time content edit replacing the legacy columns-based
 * intro (0.1.183 .pfoa-homefront-intro) and the 3x wp:columns weekly-grid
 * with Pet-Tidings-aligned .pfoa-hf-* hooks (flex intro, centered latest
 * button, pale-blue archive bar with wrapping link list, centered caption,
 * 16/9 video). Legacy 0.1.183 selectors are left in place above (inert for
 * the new markup); the rules below win for the new classes by later order
 * and equal-or-higher specificity. H1/gold divider, global rules, and PT
 * 4799 rules are untouched. Every selector below starts with
 * body.page-id-11290. */
body.page-id-11290 .page-content .entry-content div.pfoa-hf-page {
	max-width: min(60rem, 100%);
	margin-inline: auto;
	box-sizing: border-box;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-intro {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
	margin-block: 1.5rem 1rem;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-intro__copy {
	flex: 1;
	min-width: 0;
	text-align: left;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-intro__copy p {
	margin-block: 0 0.75rem;
}

body.page-id-11290 .page-content .entry-content figure.pfoa-hf-intro__photo {
	flex: 0 0 180px;
	width: 180px;
	margin: 0;
}

body.page-id-11290 .page-content .entry-content figure.pfoa-hf-intro__photo img {
	width: 100%;
	height: auto;
	display: block;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-latest {
	display: flex;
	justify-content: center;
	margin-block: 1rem 1.5rem;
}

/* Higher specificity than the legacy 0.1.183 div.wp-block-buttons rule
 * above (extra .pfoa-hf-latest class) plus later order, so the new
 * markup's symmetric margin wins. */
body.page-id-11290 .page-content .entry-content div.pfoa-hf-latest div.wp-block-buttons {
	margin-block: 1rem 1.5rem;
	justify-content: center;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-latest .wp-block-button__link {
	display: inline-block;
	width: min(30rem, 100%);
	box-sizing: border-box;
	border-radius: 2px;
	font-family: Georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.3;
	padding: 0.8rem 1.5rem;
	text-align: center;
}

body.page-id-11290 .page-content .entry-content h2.pfoa-hf-archive__heading {
	text-align: center;
	background: #e8f0fa;
	padding: 0.65rem 1rem;
	margin-block: 1.5rem 0.75rem;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-archive {
	max-width: min(28rem, 100%);
	margin-inline: auto;
	text-align: center;
}

body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.15rem 0.6rem;
	margin-block: 0 1rem;
}

/* PFOA 0.1.235 — sitewide hyperlink standard: rest without a permanent
 * underline; hover/focus-visible underline is owned by the 0.1.221 rules
 * below (plain-list path) and the 0.1.233 card-grid rules (JS grid path).
 * Consolidated in B3: decoration now owned by the 0.1.235 sitewide rule. */
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list span[aria-hidden="true"] {
	display: inline-flex;
	align-items: center;
}

body.page-id-11290 .page-content .entry-content p.pfoa-hf-caption {
	text-align: center;
	margin: 0.75rem;
}

/* Defensive: neutralize legacy weekly-grid column gaps if old 3x
 * wp:columns markup is ever reintroduced (new markup has no columns). */
body.page-id-11290 .page-content .entry-content .wp-block-columns:not(.pfoa-homefront-intro) {
	margin-bottom: 0;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-video {
	max-width: min(40rem, 100%);
	margin-inline: auto;
	aspect-ratio: 16 / 9;
	margin-block: 0 1.5rem;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 720px) {
	body.page-id-11290 .page-content .entry-content div.pfoa-hf-intro {
		flex-direction: column;
	}

	body.page-id-11290 .page-content .entry-content figure.pfoa-hf-intro__photo {
		flex: 0 0 auto;
		width: 160px;
		margin-inline: auto;
	}
}

@media (max-width: 600px) {
	body.page-id-11290 .page-content .entry-content div.pfoa-hf-latest .wp-block-button__link {
		font-size: 1.125rem;
	}

	body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list {
		gap: 0.15rem 0.5rem;
	}

	body.page-id-11290 .page-content .entry-content div.pfoa-hf-video {
		max-width: 100%;
	}
}

/* PFOA 0.1.197 — From The Home Front “Letter from Wills” redesign
 * (page-id-11290 only, https://dev.safehavenpfoa.org/fromthehomefront-2/).
 * Unified editorial feature (warm card: Wills welcome + Week 276 story),
 * companion video with an explicit Week 276 association, and a compact
 * left-aligned previous-columns archive (4 recent + native disclosure for
 * the older 8). New hooks (.pfoa-hf-feature, .pfoa-hf-welcome,
 * .pfoa-hf-portrait, .pfoa-hf-story, .pfoa-hf-video__frame,
 * .pfoa-hf-archive__recent/older/more) are styled below; the 0.1.183 and
 * 0.1.196 selectors above whose markup was retired stay in place inert.
 * Reused hooks (.pfoa-hf-page, .pfoa-hf-video, .pfoa-hf-archive,
 * .pfoa-hf-archive__heading) are restated here with equal-or-higher
 * specificity so the redesign wins by later order. H1/gold divider, global
 * rules, and PT 4799 rules are untouched. Every selector below starts with
 * body.page-id-11290. */
body.page-id-11290 .page-content .entry-content div.pfoa-hf-page {
	max-width: min(64rem, 100%);
	margin-inline: auto;
	box-sizing: border-box;
}

/* PFOA 0.1.222 — Home Front eyebrow hierarchy: larger/bolder subordinate
 * heading (clamp 18px to 22px, weight 800) that stays below the Pet Tidings
 * 1.75rem section heading; main H1 and all other rules untouched. */
body.page-id-11290 .page-content .entry-content p.pfoa-hf-eyebrow {
	margin-block: 0 1rem;
	color: var(--pfoa-text-muted);
	font-size: clamp(1.125rem, 1rem + 1vw, 1.375rem);
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-feature {
	margin-block: 0 2rem;
	border: 1px solid var(--pfoa-border-default);
	border-top: 3px solid var(--pfoa-color-gold);
	border-radius: var(--pfoa-radius);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: #faf5ec;
	box-sizing: border-box;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-welcome {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	margin-block: 0 1.5rem;
}

body.page-id-11290 .page-content .entry-content figure.pfoa-hf-portrait {
	flex: 0 0 140px;
	width: 140px;
	margin: 0;
}

body.page-id-11290 .page-content .entry-content figure.pfoa-hf-portrait img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--pfoa-border-default);
	border-radius: var(--pfoa-radius);
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-welcome__copy {
	flex: 1;
	min-width: 0;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-welcome__copy p:last-child {
	margin-bottom: 0;
}

body.page-id-11290 .page-content .entry-content p.pfoa-hf-story__kicker {
	margin-block: 0 0.35rem;
	color: var(--pfoa-text-muted);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-transform: uppercase;
}

body.page-id-11290 .page-content .entry-content h2.pfoa-hf-story__title {
	margin-block: 0 0.75rem;
}

body.page-id-11290 .page-content .entry-content p.pfoa-hf-story__teaser {
	margin-block: 0;
}

/* PFOA 0.1.198 — Center the featured-story actions (page-id-11290 only).
 * The primary button and the secondary archive link stack vertically and
 * share the card's horizontal center on desktop and mobile. */
body.page-id-11290 .page-content .entry-content div.pfoa-hf-story__actions {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-block: 1.5rem 0;
	text-align: center;
}

body.page-id-11290 .page-content .entry-content p.pfoa-hf-story__browse {
	margin: 0;
}

body.page-id-11290 .page-content .entry-content p.pfoa-hf-story__browse a {
	font-weight: 700;
}

body.page-id-11290 .page-content .entry-content p.pfoa-hf-story__browse a::after {
	color: var(--pfoa-color-gold-dark);
	content: "→";
	margin-inline-start: 0.35em;
}

/* The 0.1.196 video container assumed an iframe-only box (aspect-ratio on
 * the container). The redesign adds a heading + copy, so the ratio moves to
 * an inner frame and the container only constrains width. Later order plus
 * equal specificity overrides the earlier container rule. */
body.page-id-11290 .page-content .entry-content div.pfoa-hf-video {
	max-width: min(45rem, 100%);
	margin-inline: auto;
	margin-block: 0 2rem;
	aspect-ratio: auto;
	box-sizing: border-box;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-video__frame {
	aspect-ratio: 16 / 9;
}

body.page-id-11290 .page-content .entry-content div.pfoa-hf-video div.pfoa-hf-video__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The 0.1.196 archive was a centered pale-blue bar with a wrapping link
 * paragraph. The redesign is a compact left-aligned list archive; the new
 * hooks below use <ul> rows with dividers, so the retired
 * p.pfoa-hf-archive__list rule stays inert. The container and heading rules
 * are restated here (later order wins). */
body.page-id-11290 .page-content .entry-content div.pfoa-hf-archive {
	max-width: min(46rem, 100%);
	margin-inline: auto;
	text-align: left;
	box-sizing: border-box;
}

body.page-id-11290 .page-content .entry-content h2.pfoa-hf-archive__heading {
	margin-block: 0 0.5rem;
	border: 0;
	background: transparent;
	padding: 0;
	text-align: left;
}

body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__note {
	margin-block: 0 1rem;
}

body.page-id-11290 .page-content .entry-content ul.pfoa-hf-archive__recent,
body.page-id-11290 .page-content .entry-content ul.pfoa-hf-archive__older {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.page-id-11290 .page-content .entry-content ul.pfoa-hf-archive__recent {
	margin-block: 0 0.5rem;
}

body.page-id-11290 .page-content .entry-content ul.pfoa-hf-archive__recent > li,
body.page-id-11290 .page-content .entry-content ul.pfoa-hf-archive__older > li {
	margin: 0;
	border-top: 1px solid var(--pfoa-border-default);
}

body.page-id-11290 .page-content .entry-content ul.pfoa-hf-archive__recent > li:last-child,
body.page-id-11290 .page-content .entry-content details.pfoa-hf-archive__more[open] ul.pfoa-hf-archive__older > li:last-child {
	border-bottom: 1px solid var(--pfoa-border-default);
}

body.page-id-11290 .page-content .entry-content ul.pfoa-hf-archive__recent > li > a,
body.page-id-11290 .page-content .entry-content ul.pfoa-hf-archive__older > li > a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.6rem 0.25rem;
	font-weight: 600;
}

body.page-id-11290 .page-content .entry-content details.pfoa-hf-archive__more {
	margin-block: 0.5rem 0;
}

body.page-id-11290 .page-content .entry-content details.pfoa-hf-archive__more > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	border-radius: var(--pfoa-radius);
	padding: 0.6rem 0.25rem;
	color: var(--pfoa-action-primary);
	font-weight: 700;
	cursor: pointer;
}

body.page-id-11290 .page-content .entry-content details.pfoa-hf-archive__more > summary:hover {
	color: var(--pfoa-action-hover);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

body.page-id-11290 .page-content .entry-content details.pfoa-hf-archive__more > summary::marker {
	color: var(--pfoa-color-gold-dark);
}

@media (max-width: 600px) {
	body.page-id-11290 .page-content .entry-content div.pfoa-hf-feature {
		padding: 1.25rem 1rem;
	}

	body.page-id-11290 .page-content .entry-content div.pfoa-hf-welcome {
		gap: 1rem;
	}

	body.page-id-11290 .page-content .entry-content figure.pfoa-hf-portrait {
		flex-basis: 80px;
		width: 80px;
	}

	body.page-id-11290 .page-content .entry-content div.pfoa-hf-video {
		max-width: 100%;
	}
}

/* PFOA 0.1.214 — Pet Tidings Wills photo constraint (page-id-4799 only,
 * https://dev.safehavenpfoa.org/pettidings/).
 * Root cause: figure.pfoa-pt-intro__photo used a fixed flex-basis/width
 * (180px desktop, 160px mobile) with flex-shrink:0 and no max-width guard,
 * so the native-size Wills upload could overflow its flex lane on narrow
 * widths and visually dwarf the intro paragraph. The img had width:100% /
 * height:auto but no max-width cap relative to the figure.
 * Fix (presentation only, later equal-specificity overrides win): allow the
 * figure to shrink, cap it at 180px desktop / 160px mobile and 100% of its
 * lane, and cap the img at 100% with aspect preserved. Intro copy, Current
 * Edition button, archive, prefs, About, print rules, and all other pages
 * (Home Front 11290, Dine Out, Potholders) are untouched. Every selector
 * below starts with body.page-id-4799. */
body.page-id-4799 .entry-content figure.pfoa-pt-intro__photo {
	flex: 0 1 180px;
	width: min(180px, 100%);
	max-width: 100%;
}
body.page-id-4799 .entry-content figure.pfoa-pt-intro__photo img {
	max-width: 100%;
}
@media (max-width: 600px) {
	body.page-id-4799 .entry-content figure.pfoa-pt-intro__photo {
		flex: none;
		width: min(160px, 100%);
		max-width: 100%;
	}
}

/* PFOA 0.1.217 — Potholders gallery matte (page-id-17894 only,
 * https://dev.safehavenpfoa.org/potholders-2/). The legacy gallery ships
 * full-scene product photos whose tabletop surroundings distract at thumb
 * size (neighbouring fabric intruding at the frame edges). Smallest
 * presentation-only correction: a neutral matte behind each frame plus a
 * uniform square crop (object-fit: cover) so the tiles read as product
 * tiles. No images removed, replaced, or reordered by CSS; every selector
 * below starts with body.page-id-17894. */
body.page-id-17894 .page-content .entry-content div[id^="gallery-"] figure {
	background: #f4f1ea;
}

body.page-id-17894 .page-content .entry-content div[id^="gallery-"] figure img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: #f4f1ea;
}

/* PFOA 0.1.220 — Pet Tidings Wills photo floor (page-id-4799 only,
 * https://dev.safehavenpfoa.org/pettidings/).
 * Root cause: 0.1.214 changed the desktop figure to shrinkable
 * flex:0 1 180px with width:min(180px,100%). In the flex-row intro the copy
 * (flex:1 1 auto, min-width:0) claims free space, so the figure shrank from
 * its 180px basis to ~42px and img{width:100%} collapsed with it (aspect
 * preserved, hence ~42x47). Fix (presentation only, later equal-specificity
 * override wins): restore a non-shrinking 180px desktop floor with a 100%
 * lane guard so narrow lanes cannot overflow; mobile column rule untouched.
 * Content unchanged; CTA, archive, prefs, nav, and all other pages untouched.
 * Every selector below starts with body.page-id-4799. */
body.page-id-4799 .entry-content figure.pfoa-pt-intro__photo {
	flex: 0 0 180px;
	width: 180px;
	max-width: 100%;
}
body.page-id-4799 .entry-content figure.pfoa-pt-intro__photo img {
	width: 100%;
	height: auto;
	max-width: 100%;
}
@media (max-width: 600px) {
	body.page-id-4799 .entry-content figure.pfoa-pt-intro__photo {
		flex: none;
		width: 160px;
		max-width: 100%;
	}
}

/* PFOA 0.1.221 — From the Home Front Pet-Tidings archive parity
 * (page-id-11290 only, https://dev.safehavenpfoa.org/fromthehomefront-2/).
 * Replaces the flat 4-recent + "Show 8 more" previous-columns list with the
 * same expandable date-range disclosure pattern used by Pet Tidings
 * (page 4799, 0.1.195): bordered card, pale-tinted summary bar, date range +
 * accurate column count + visible +/– affordance, wrapping underline link
 * list with middot separators, native <details> keyboard/touch behavior.
 * Markup contract: p.pfoa-hf-archive__intro helper copy +
 * 1 x details.pfoa-hf-range (2026, ALL COLLAPSED, no open attribute) —
 * summary = span.pfoa-hf-range__dates + span.pfoa-hf-range__count; content =
 * div.pfoa-hf-range__content > p.pfoa-hf-archive__list of independent GIF
 * links whose visible text preserves the exact Week NNN titles, newest first
 * (12 previous columns: Weeks 275-263, Week 264 absent on disk; featured
 * Week 276 stays in the story card above and is not duplicated in the
 * archive). Only populated groups are rendered; historical five-year ranges
 * (2021-2025 etc.) are added only when corresponding columns exist.
 * Pet Tidings 4799 rules are untouched; legacy ul.pfoa-hf-archive__recent /
 * older / details.pfoa-hf-archive__more selectors above stay inert.
 * Every selector below starts with body.page-id-11290. */
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__intro {
	text-align: center;
	max-width: 40rem;
	margin-inline: auto;
	margin-block: 0 0.25rem;
	font-size: 1rem;
}
body.page-id-11290 .page-content .entry-content details.pfoa-hf-range {
	border: 1px solid var(--pfoa-border-default);
	border-radius: var(--pfoa-radius);
	background: var(--pfoa-color-background);
	margin-block: 0.75rem 0;
}
body.page-id-11290 .page-content .entry-content details.pfoa-hf-range > summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	min-height: 48px;
	list-style: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	padding: 0.75rem 1.25rem;
	border-radius: var(--pfoa-radius);
	background: var(--pfoa-surface-subtle);
}
body.page-id-11290 .page-content .entry-content details.pfoa-hf-range > summary::-webkit-details-marker {
	display: none;
}
body.page-id-11290 .page-content .entry-content details.pfoa-hf-range > summary::marker {
	content: "";
}
body.page-id-11290 .page-content .entry-content span.pfoa-hf-range__count {
	font-weight: 400;
	color: var(--pfoa-color-muted);
}
body.page-id-11290 .page-content .entry-content details.pfoa-hf-range > summary::after {
	content: "+";
	margin-inline-start: auto;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1;
}
body.page-id-11290 .page-content .entry-content details.pfoa-hf-range[open] > summary::after {
	content: "–";
}
body.page-id-11290 .page-content .entry-content details.pfoa-hf-range > summary:hover {
	text-decoration: underline;
}
body.page-id-11290 .page-content .entry-content details.pfoa-hf-range > summary:focus-visible {
	outline: 2px solid var(--pfoa-color-brand);
	outline-offset: 2px;
}
body.page-id-11290 .page-content .entry-content div.pfoa-hf-range__content {
	padding: 0.5rem 1.25rem 1rem;
}
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.6rem;
	margin: 0;
	padding: 0.5rem 0 0.25rem;
	font-size: 1rem;
	line-height: 1.5;
}
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-underline-offset: 0.15em;
	overflow-wrap: break-word;
}
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a:hover,
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a:focus-visible {
	text-underline-offset: 0.25em;
}
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a:focus-visible {
	outline: 2px solid var(--pfoa-color-brand);
	outline-offset: 2px;
}
body.page-id-11290 .page-content .entry-content span.pfoa-hf-archive__sep {
	color: var(--pfoa-color-muted);
	user-select: none;
}
@media (max-width: 600px) {
	body.page-id-11290 .page-content .entry-content div.pfoa-hf-range__content {
		padding: 0.25rem 1rem 0.75rem;
	}
	body.page-id-11290 .page-content .entry-content details.pfoa-hf-range > summary {
		padding-inline: 1rem;
	}
	body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list {
		gap: 0.1rem 0.5rem;
	}
}
@media print {
	body.page-id-11290 .page-content .entry-content details.pfoa-hf-range::details-content {
		content-visibility: visible !important;
	}
	body.page-id-11290 .page-content .entry-content details.pfoa-hf-range:not([open]) > div.pfoa-hf-range__content {
		display: block;
	}
	body.page-id-11290 .page-content .entry-content details.pfoa-hf-range:not([open]) > summary::after {
		content: "–";
	}
}

/* PFOA 0.1.233 — From the Home Front archive article-row grid
 * (page-id-11290 only, https://dev.safehavenpfoa.org/fromthehomefront-2/).
 * Restyles the 0.1.221 expandable date-range disclosure content as a 2-column
 * grid of consistently styled clickable article rows: the grid replaces the
 * wrapping underline link list, while the bordered card, pale-tinted summary
 * bar, 2026 date range + count + +/– affordance, and native <details>
 * behavior are untouched. Each row is the <a> itself (ordering, exact Week
 * NNN titles, hrefs, and new-tab behavior preserved): bold "Week NNN" badge
 * prefix (span.pfoa-hf-week, added by pfoa-home-front-archive.js without
 * changing visible text order or DB content) in brand-dark on a tinted pill,
 * left-aligned title (span.pfoa-hf-title), subtle border + light background,
 * comfortable 52px click targets at ~17px for older readers. The small "↗"
 * external indicator is a CSS ::after (never in the accessibility tree, so
 * screen-reader aria-labels are unaffected) in muted tone. Middot separators
 * stay in the DOM but are hidden — the grid rows remain fully readable with
 * CSS on and without JS (unwrapped links render as plain full-text rows);
 * print keeps the open-details behavior from 0.1.221 with a single-column
 * row stack. Palette vars only; Pet Tidings 4799 rules untouched.
 * Every selector below starts with body.page-id-11290. */
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 0.6rem;
}
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 52px;
	margin: 0;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--pfoa-border-default);
	border-radius: var(--pfoa-radius);
	background: var(--pfoa-surface-subtle);
	color: var(--pfoa-text-primary);
	font-size: 1.0625rem;
	line-height: 1.4;
	text-decoration: none;
}
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a:hover {
	background: var(--pfoa-color-background);
}
/* PFOA 0.1.235 — sitewide hyperlink standard, card-grid path: a JS-enhanced
 * row (a:has(span.pfoa-hf-title)) never underlines the whole card on
 * hover/focus (badge + arrow stay clean); only the title underlines, on both
 * hover and keyboard focus. Plain-list rows without spans keep the full-link
 * hover/focus underline from the 0.1.221 rules above. */
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a:has(span.pfoa-hf-title):hover,
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a:has(span.pfoa-hf-title):focus-visible {
	text-decoration: none;
}
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a:hover span.pfoa-hf-title,
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a:focus-visible span.pfoa-hf-title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a::after {
	content: "↗";
	flex: none;
	margin-inline-start: auto;
	color: var(--pfoa-color-muted);
	font-size: 0.9em;
	line-height: 1;
}
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list span.pfoa-hf-week {
	flex: none;
	white-space: nowrap;
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--pfoa-color-brand-dark);
	background: var(--pfoa-surface-tinted);
	border: 1px solid var(--pfoa-border-default);
	border-radius: calc(var(--pfoa-radius) - 1px);
	padding: 0.15rem 0.5rem;
}
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list span.pfoa-hf-title {
	flex: 1 1 auto;
	min-width: 0;
}
/* PFOA 0.1.234 — stronger selector hides the middot separators: the 0.1.196
 * inline-list rule (p.pfoa-hf-archive__list span[aria-hidden="true"],
 * display:inline-flex) outranks a plain class selector, so without the
 * p.pfoa-hf-archive__list + [aria-hidden="true"] qualifiers the separators
 * render as visible grid items beside each row. */
body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list span.pfoa-hf-archive__sep[aria-hidden="true"] {
	display: none;
}
@media (max-width: 640px) {
	body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list {
		grid-template-columns: minmax(0, 1fr);
	}
	body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a {
		min-height: 48px;
	}
}
@media print {
	body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.4rem;
	}
	body.page-id-11290 .page-content .entry-content p.pfoa-hf-archive__list a {
		background: transparent;
	}
}

/* PFOA 0.1.225 — Roadster justified continuous flow (page-id-25515 ONLY).
 * 860px article measure, justified narrative with hyphenation, true floats
 * with 24px gutters, clears at story transitions. Global align/float rules
 * and the 720px mobile stack are untouched (outranked by page scope).
 * Reuse pattern: wrap a future story article in a Gutenberg Group with class
 * "pfoa-story-editorial", then re-scope this block from body.page-id-25515
 * to .pfoa-story-editorial. Content (wording/captions/order) untouched.
 */
body.page-id-25515 .content-shell {
	max-width: 1000px;
}
body.page-id-25515 .page-content .entry-header {
	max-width: 860px;
	margin-inline: auto;
}
body.page-id-25515 .entry-content {
	max-width: 860px;
	margin-inline: auto;
	padding-inline: 20px;
}
body.page-id-25515 .entry-content > h1,
body.page-id-25515 .entry-content > p,
body.page-id-25515 .entry-content > h2,
body.page-id-25515 .entry-content > blockquote {
	max-width: 100%;
}
body.page-id-25515 .entry-content > p:not(.has-text-align-center):not(.has-small-font-size):not(:has(+ blockquote)) {
	text-align: justify;
	-moz-text-align-last: left;
	text-align-last: left;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
	hyphenate-limit-chars: 6 3 2;
	-webkit-hyphenate-limit-before: 3;
	-webkit-hyphenate-limit-after: 2;
	hyphenate-limit-lines: 2;
}
body.page-id-25515 .entry-content .alignright {
	float: right;
	width: 300px;
	max-width: 42%;
	margin: 0.25rem 0 1rem 1.5rem;
}
body.page-id-25515 .entry-content .alignleft {
	float: left;
	width: 320px;
	max-width: 42%;
	margin: 0.25rem 1.5rem 1rem 0;
}
body.page-id-25515 .entry-content figure:has(img[src*="roadster-new-home"]) {
	width: 250px;
}
body.page-id-25515 .entry-content img {
	height: auto;
	border-radius: 10px;
}
body.page-id-25515 .entry-content figcaption {
	font-size: 0.82rem;
	font-style: italic;
	text-align: left;
	color: var(--pfoa-text-muted);
}
body.page-id-25515 .entry-content > h2 {
	clear: both;
	padding-top: 1.5rem;
}
body.page-id-25515 .entry-content > p:has(+ blockquote) {
	clear: both;
	padding-top: 0.5rem;
}
body.page-id-25515 .entry-content > blockquote {
	clear: both;
	background: #faf7f1;
	border-left: 4px solid var(--pfoa-color-brand);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	font-family: Georgia, serif;
	font-size: 1.12rem;
	line-height: 1.65;
	margin: 2rem auto;
}
body.page-id-25515 .entry-content .wp-block-buttons {
	clear: both;
	padding-top: 1.5rem;
}
@media (max-width: 781px) {
	body.page-id-25515 .entry-content .alignright {
		float: right;
		width: 240px;
		max-width: 44%;
		margin: 0.25rem 0 1rem 1rem;
	}
	body.page-id-25515 .entry-content .alignleft {
		float: left;
		width: 240px;
		max-width: 44%;
		margin: 0.25rem 1rem 1rem 0;
	}
	body.page-id-25515 .entry-content figure:has(img[src*="roadster-new-home"]) {
		width: 200px;
	}
}
@media (max-width: 600px) {
	body.page-id-25515 .entry-content .alignleft,
	body.page-id-25515 .entry-content .alignright,
	body.page-id-25515 .entry-content figure:has(img[src*="roadster-new-home"]) {
		float: none;
		width: 100%;
		max-width: 420px;
		margin: 1rem auto;
	}
	body.page-id-25515 .entry-content > p {
		text-align: left;
		-moz-text-align-last: auto;
		text-align-last: auto;
		hyphens: none;
		-webkit-hyphens: none;
	}
}

/* PFOA 0.1.251 RETIRED (superseded by the 0.1.252 shared .pfoa-featured-story
 * component below) — Recent Adoption Stories featured-story block scoped to
 * body.page-id-5656. Retired because the content moved to a reusable Group
 * wrapper (class "pfoa-featured-story", kicker replaces the standalone h2,
 * 250px photo lane), so page-ID selectors must not compete with the shared
 * component. No rules from this block remain in effect.
 */

/* PFOA 0.1.252 — Shared featured-story component (.pfoa-featured-story).
 * Reusable by editors via duplicate: a Gutenberg Group with class
 * "pfoa-featured-story" wrapping core wp:columns (photo column first:
 * is-resized 250px figure; text column second: kicker p, h3 linked title,
 * excerpt p, Read Story button). Content-owned via the_content(); no
 * body.page-id-* selectors here, no new colors, no framework/plugin hooks.
 * Composition: one centered ~860px card on the existing subtle surface
 * (var(--pfoa-surface-subtle)), 250px photo lane + fluid text lane, locked
 * 32px gap (existing token --pfoa-space-5), vertically centered text beside
 * the photo. Kicker is small understated uppercase in the existing muted
 * tone. The h3 link reuses the global a + h3 rules (size/balance only, no
 * color override). The image keeps its natural aspect (width 100%, height
 * auto; no crop, no object-fit lock). Padding/radius use existing tokens.
 * Mobile (<=781px): core stacks photo above text; the photo centers capped
 * at 250px so nothing overflows or h-scrolls.
 */
.pfoa-featured-story {
	max-width: 860px;
	margin-inline: auto;
	margin-bottom: var(--pfoa-space-4);
	background: var(--pfoa-surface-subtle);
	border-radius: var(--pfoa-radius);
	padding: var(--pfoa-space-4) var(--pfoa-space-5);
}
.pfoa-featured-story > .wp-block-columns {
	margin-bottom: 0;
	align-items: center;
	column-gap: var(--pfoa-space-5);
}
@media (min-width: 782px) {
	.pfoa-featured-story > .wp-block-columns > .wp-block-column:first-child {
		flex: 0 0 250px;
		max-width: 250px;
	}
	.pfoa-featured-story > .wp-block-columns > .wp-block-column:last-child {
		flex: 1 1 auto;
		min-width: 0;
	}
}
.pfoa-featured-story figure.wp-block-image {
	margin: 0;
	max-width: 250px;
}
.pfoa-featured-story figure.wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}
.pfoa-featured-story__kicker {
	margin: 0 0 var(--pfoa-space-1);
	color: var(--pfoa-text-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pfoa-featured-story h3.wp-block-heading {
	font-size: 1.375rem;
	text-wrap: balance;
}
@media (max-width: 781px) {
	.pfoa-featured-story figure.wp-block-image {
		margin-inline: auto;
		max-width: 250px;
	}
}

/* PFOA 0.1.235 — Sitewide hyperlink standard (visitor content only).
 * Root cause: the global `a` rule sets color/thickness/offset but never
 * `text-decoration-line`, so the UA permanent underline survives on ordinary
 * body links. Following the accepted Staff (page-id-4968 #staff-roster) and
 * In Memoriam (page-id-5421) precedents, ordinary visitor-content links rest
 * without an underline and underline on :hover and :focus-visible.
 * Scope is strictly article.page-content prose (.page-content
 * .entry-content), so wp-admin, SeedProd, header/nav, footer, dialogs, and
 * form controls are untouched. Buttons (.pfoa-button/.button/
 * .wp-element-button/.wp-block-button__link), arrow links
 * (.pfoa-text-link/.text-link), and image/lightbox links (:has(img)) are
 * structurally excluded, so button/nav/card/pill presentation is preserved.
 * :where() keeps the added specificity at zero, so page-scoped component
 * rules (e.g. the 0.1.233 Home Front card grid) still outrank this default.
 * Link colors/contrast (vars --pfoa-action-*), the :hover color shift, and
 * the global focus ring are unchanged; thickness/offset come from the global
 * `a` rule. Content-authored inline style="text-decoration:underline" (e.g.
 * page 20323 backup) is content-owned and out of scope — reported, not
 * overridden.
 * PFOA 0.1.243 (B4/N4) — heading-anchor completion: h2/h3 join the context
 * list so linked article/teaser headings (e.g. the /adoptionstories/ h3
 * teaser, previously resting underlined on the UA default) follow the same
 * rest-none / hover+focus-underline topology as prose links (Role 9). The
 * adoptable card-title resting state is unchanged (its 0.1.91
 * a:not(:focus-visible) rule already rests none and outranks this default);
 * card hover keeps the intentional card-lift affordance (no forced hover
 * underline — that rule still wins where it applies). */
.page-content .entry-content :where(p, li, blockquote, dd, dt, td, th, figcaption, span, h2, h3) a:where(:not(.pfoa-button):not(.button):not(.wp-element-button):not(.wp-block-button__link):not(.pfoa-text-link):not(.text-link):not(:has(img))) {
	text-decoration: none;
}
.page-content .entry-content :where(p, li, blockquote, dd, dt, td, th, figcaption, span, h2, h3) a:where(:not(.pfoa-button):not(.button):not(.wp-element-button):not(.wp-block-button__link):not(.pfoa-text-link):not(.text-link):not(:has(img))):hover,
.page-content .entry-content :where(p, li, blockquote, dd, dt, td, th, figcaption, span, h2, h3) a:where(:not(.pfoa-button):not(.button):not(.wp-element-button):not(.wp-block-button__link):not(.pfoa-text-link):not(.text-link):not(:has(img))):focus-visible {
	text-decoration: underline;
}

/* PFOA 0.1.235 — Facilities thumbnail consistency (directory 4419 + detail
 * pages 25066-25070; one shared standard, theme tokens only).
 * Directory 4419 is custom flex markup (div#facilities-directory >
 * div.pfoa-facility > a>img + span.pfoa-facility-name>a); the details are
 * legacy [gallery columns=N link=file] (.gallery.gallery-columns-N >
 * .gallery-item > .gallery-icon>a>img + .gallery-caption). Column counts are
 * preserved: the directory keeps its flex 5-across wrap (2-across at
 * <=600px, 1-across at <=400px) and each detail gallery keeps its shortcode
 * columns (25066: 4, 25067: 5, 25068: 5, 25069: 4, 25070: 5) — there are no
 * grid-template-columns rules here, and the page-id-22514 square
 * aspect-ratio/object-fit treatment is deliberately NOT applied. What is
 * standardized: horizontal gutters and vertical row spacing
 * (var(--pfoa-space-3), tightened to var(--pfoa-space-2) at <=600px),
 * image-to-caption separation (var(--pfoa-space-1), keeping captions glued
 * to their photos), caption typography/alignment (0.875rem/1.5 body rhythm,
 * centered), and image sizing (width-bounded with height:auto — no stretch,
 * distortion, cropping, or forced fixed heights, so mixed ratios render
 * naturally). The hooks are facilities-unique and the selectors outrank the
 * content-embedded <style> blocks; the legacy table bridge (:has(td img))
 * is unused by this markup and is left untouched. */
.page-content .entry-content #facilities-directory {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pfoa-space-3);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: var(--pfoa-space-2) 0;
}
.page-content .entry-content #facilities-directory .pfoa-facility {
	flex: 1 1 150px;
	max-width: 200px;
	min-width: 140px;
	box-sizing: border-box;
	text-align: center;
}
.page-content .entry-content #facilities-directory .pfoa-facility img {
	display: block;
	width: 200px;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	box-sizing: border-box;
}
.page-content .entry-content #facilities-directory .pfoa-facility-name {
	display: block;
	margin-top: var(--pfoa-space-1);
	text-align: center;
	font-size: 0.875rem;
	line-height: 1.5;
	font-weight: 600;
}
.page-content .entry-content .pfoa-facility-detail .gallery {
	gap: var(--pfoa-space-3);
	max-width: 100%;
	margin: 0 auto var(--pfoa-space-3);
}
.page-content .entry-content .pfoa-facility-detail .gallery .gallery-item {
	min-width: 0;
}
.page-content .entry-content .pfoa-facility-detail .gallery-icon img {
	display: block;
	width: 100%;
	height: auto;
}
.page-content .entry-content .pfoa-facility-detail .gallery-caption {
	margin-top: var(--pfoa-space-1);
	text-align: center;
	font-size: 0.875rem;
	line-height: 1.5;
}
/* PFOA 0.1.237 — R2 interactive photograph label (Facilities directory 4419
 * + Safe Haven detail 25066 only; shared source + two thin adapters).
 * Shared semantic source: .pfoa-photo-label owns the full interactive-label
 * contract — system-ui body stack, 1rem (16px, up from 0.875rem/14px), 600,
 * never italic, 1.5 rhythm, action-primary rest, centered, rest
 * text-decoration none; hover/focus-visible underline + hover color. The
 * global :focus-visible 3px var(--pfoa-focus-ring) outline is untouched (no
 * outline removal here). Image-to-label gap stays on the containers above
 * (margin-top var(--pfoa-space-1) = 8px on .pfoa-facility-name and
 * .gallery-caption), NOT on the shared label, and typography/alignment of
 * static figcaptions without anchors is unchanged (still italic 0.875rem via
 * :691-701 and the containers above — Role 3 preserved). The label activates
 * the same target as the photo (directory anchor / runtime
 * a.pfoa-facility-caption-link wrapping, Photobox-owned); no JS click owner
 * is added here. Hooks are facilities-unique; no page-ID selectors, no
 * .pfoa-cat-gallery changes, no Georgia (page 22514) title changes. */
.page-content .entry-content .pfoa-photo-label {
	font-family: var(--pfoa-font-body);
	font-size: 1rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	color: var(--pfoa-action-primary);
	text-align: center;
	text-decoration: none;
}
.page-content .entry-content .pfoa-photo-label:hover,
.page-content .entry-content .pfoa-photo-label:focus-visible {
	color: var(--pfoa-action-hover);
	text-decoration: underline;
}
/* Adapter 1/2 — directory 4419 label anchor (div#facilities-directory >
 * div.pfoa-facility > span.pfoa-facility-name > a). .page-content prefix beats
 * the :691-701 italic cascade without !important; font-style normal + full
 * 16px/600 metrics live on the ANCHOR so the container keeps its gap/center
 * role. */
/* PFOA 0.1.238 — B1 directory photo-anchor block: the content-embedded
 * `#facilities-directory .pfoa-facility a { display:inline-block; }` leaves
 * ~7.4px inline baseline leading below the thumbnail, so margin-top:8px on
 * `.pfoa-facility-name` rendered as 15.4px. Block removes the leading so the
 * rendered img-bottom → label-top geometry is the canonical 8px. Scoped to
 * the direct photo child only; the label anchor below is untouched. */
.page-content .entry-content #facilities-directory .pfoa-facility > a {
	display: block;
}
.page-content .entry-content #facilities-directory .pfoa-facility-name a {
	font-family: var(--pfoa-font-body);
	font-size: 1rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	color: var(--pfoa-action-primary);
	text-align: center;
	text-decoration: none;
}
.page-content .entry-content #facilities-directory .pfoa-facility-name a:hover,
.page-content .entry-content #facilities-directory .pfoa-facility-name a:focus-visible {
	color: var(--pfoa-action-hover);
	text-decoration: underline;
}
/* Adapter 2/2 — Safe Haven detail caption anchor (legacy gallery
 * figcaption.gallery-caption > a.pfoa-facility-caption-link, wrapped at
 * runtime with the sibling thumbnail href). Supersedes the 0.1.236
 * color/weight-only rule with the full 16px non-italic contract on the
 * ANCHOR; the figcaption container above stays italic 0.875rem so static
 * captions without anchors are unaffected. */
.page-content .entry-content .pfoa-facility-detail .gallery-caption a.pfoa-facility-caption-link {
	font-family: var(--pfoa-font-body);
	font-size: 1rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	color: var(--pfoa-action-primary);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.page-content .entry-content .pfoa-facility-detail .gallery-caption a.pfoa-facility-caption-link:hover,
.page-content .entry-content .pfoa-facility-detail .gallery-caption a.pfoa-facility-caption-link:focus-visible {
	color: var(--pfoa-action-hover);
	text-decoration: underline;
}
@media (max-width: 600px) {
	.page-content .entry-content #facilities-directory .pfoa-facility {
		flex: 1 1 40%;
		max-width: 46%;
		min-width: 0;
	}
	.page-content .entry-content .pfoa-facility-detail .gallery {
		gap: var(--pfoa-space-2);
	}
}
@media (max-width: 400px) {
	.page-content .entry-content #facilities-directory .pfoa-facility {
		flex: 1 1 100%;
		max-width: min(280px, 100%);
	}
}
/* PFOA 0.1.239 — B2 interactive photograph labels, Adapter 3/4 (Staff
 * page-id-4968 #staff-roster) + Adapter 4/4 (In Memoriam page-id-5421
 * table.aligncenter). Shared .pfoa-photo-label source at :7761-7775; these
 * are thin adapters only, no independent visual definitions.
 * Each label anchor shares its destination with the sibling photo anchor
 * (same bio / memorial href), so the label carries the canonical R2
 * contract: system-ui body stack, 1rem (16px), 600, never italic, 1.5
 * rhythm, action-primary rest, centered, rest text-decoration none;
 * hover/focus-visible hover color + underline. Geometry stays on the
 * wrappers, not the shared label. The global :focus-visible 3px
 * var(--pfoa-focus-ring) outline is untouched (no outline removal here),
 * and photo proportions are untouched (no width/height/object-fit changes;
 * height:auto from the legacy table bridge is preserved).
 * Scope is label anchors ONLY: photo anchors (td > a wrapping img),
 * static spans without anchors (e.g. Priya img+span cell), the Wills
 * editorial line, memorial detail pages, and In Memoriam body typography
 * are all outside these selectors and render unchanged. Table/grid
 * arrangements are preserved: no grid-template-columns, column-count, or
 * width rules here, so desktop 6-col (memoriam) / fixed 4-col (staff) and
 * the 0.1.161 <=600px 3-col memoriam reflow are untouched. */
/* PFOA 0.1.239 — B2 photo-anchor block (B1 0.1.238 precedent): an inline
 * photo anchor leaves inline baseline leading below the thumbnail, so the
 * label gap would render larger than declared. Block removes the leading
 * so the rendered img-bottom → label-top geometry is the canonical 8px.
 * Scoped to the direct photo child only (td > a:has(> img)); label anchors
 * below are untouched by this rule. The legacy table bridge (:1087-1091)
 * already gives the img itself display:block + margin-inline:auto +
 * height:auto and is reused, not repeated. */
body.page-id-4968 .page-content .entry-content #staff-roster td > a:has(> img),
body.page-id-5421 .page-content .entry-content table.aligncenter td > a:has(> img) {
	display: block;
}
/* PFOA 0.1.239 — B2 label gap lives on the label wrapper span
 * (display:block + margin-top var(--pfoa-space-1) = 8px), NOT on the
 * anchor, mirroring the facilities .pfoa-facility-name / .gallery-caption
 * containers. :has(> a) limits the gap to spans that own a label anchor,
 * so static spans without anchors keep their existing rendering. */
body.page-id-4968 .page-content .entry-content #staff-roster td span:has(> a),
body.page-id-5421 .page-content .entry-content table.aligncenter td span:has(> a[href*="/inmemoriam/"]) {
	display: block;
	margin-top: var(--pfoa-space-1);
}
/* Adapter 3/4 — Staff roster label anchors (page-id-4968 #staff-roster td
 * span a: text labels sharing the photo destination). .page-content
 * .entry-content prefix outranks the legacy 0.1.162 navy/underline rules
 * (:1093-1109, left in place — superseded, not deleted) without
 * !important; the full 16px non-italic contract lives on the ANCHOR.
 * Bare photo anchors (td > a > img), the static Priya img+span cell (no
 * anchor), and the Wills editorial line are outside td span a and are
 * unaffected. */
body.page-id-4968 .page-content .entry-content #staff-roster td span a {
	font-family: var(--pfoa-font-body);
	font-size: 1rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	color: var(--pfoa-action-primary);
	text-align: center;
	text-decoration: none;
}
body.page-id-4968 .page-content .entry-content #staff-roster td span a:hover,
body.page-id-4968 .page-content .entry-content #staff-roster td span a:focus-visible {
	color: var(--pfoa-action-hover);
	text-decoration: underline;
}
/* Adapter 4/4 — In Memoriam parent-gallery label anchors (page-id-5421
 * table.aligncenter td span a[href*="/inmemoriam/"]: text labels sharing
 * the photo destination to a memorial detail page). The href filter +
 * .page-content prefix outrank the legacy 0.1.177 navy/underline rules
 * (:6582-6589, left in place — superseded, not deleted) without
 * !important. Image boxes (td > a), bare static span cells (no anchor),
 * memorial detail pages, and body typography are outside this selector
 * and render unchanged. */
body.page-id-5421 .page-content .entry-content table.aligncenter td span a[href*="/inmemoriam/"] {
	font-family: var(--pfoa-font-body);
	font-size: 1rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	color: var(--pfoa-action-primary);
	text-align: center;
	text-decoration: none;
}
body.page-id-5421 .page-content .entry-content table.aligncenter td span a[href*="/inmemoriam/"]:hover,
body.page-id-5421 .page-content .entry-content table.aligncenter td span a[href*="/inmemoriam/"]:focus-visible {
	color: var(--pfoa-action-hover);
	text-decoration: underline;
}
/* PFOA 0.1.240 — B2 live-DEV follow-up (Staff page-id-4968 + In Memoriam
 * page-id-5421). Two genuine deviations found on synced 0.1.239; this block
 * adjusts ONLY the B2 label color (In Memoriam) and the B2 label-gap
 * declarations (same selectors as 0.1.239). B1 blocks, legacy rules, the
 * global :focus-visible ring, static selectors, and detail pages are NOT
 * altered here. Content bytes are untouched — presentation-only CSS. */
/* PFOA 0.1.240 — Fix 1, In Memoriam label color: live DOM carries
 * content-authored inline style="color:#000080" directly on the label
 * ANCHOR (e.g. <span style="color:#000080;..."><a style="color:#000080;"
 * href="/inmemoriam/...">), which outranks every non-!important stylesheet
 * rule at rest, hover, AND focus (inline style has no pseudo-class
 * awareness). That is why labels stayed navy rgb(0,0,128) while Staff —
 * whose anchors carry NO inline color (verified: bare <a href="/staff-2/…">
 * under a styled span) — normalized fine and needs no change here.
 * Fix: re-state color with !important, scoped STRICTLY to the Adapter 4/4
 * label selector + hover/focus-visible. A stylesheet !important beats a
 * non-!important inline style, so rest renders action-primary #434EBE and
 * hover/focus-visible render action-hover #303873 + underline. !important
 * appears ONLY on these color declarations (typography, gap, and geometry
 * stay !important-free); static spans, image boxes, detail pages, and body
 * typography are outside the selector and unchanged. */
body.page-id-5421 .page-content .entry-content table.aligncenter td span a[href*="/inmemoriam/"] {
	color: var(--pfoa-action-primary) !important;
}
body.page-id-5421 .page-content .entry-content table.aligncenter td span a[href*="/inmemoriam/"]:hover,
body.page-id-5421 .page-content .entry-content table.aligncenter td span a[href*="/inmemoriam/"]:focus-visible {
	color: var(--pfoa-action-hover) !important;
}
/* PFOA 0.1.241 — Correction A, structural 8px image-to-label geometry:
 * the wrapper span keeps margin-top: var(--pfoa-space-1) = 8px (container
 * top exactly 8px below the photo) and stays display:block, matching the
 * 0.1.239 baseline (:7880-7884). A column-flex wrapper was rejected here:
 * it blockifies the authored <a>Name</a><br>Title into three flex items
 * and the empty <br> item plus the td font strut renders as a blank line
 * between name and title. Block preserves the normal <br> line-break, so
 * the name sits directly above the title with no blank line. Same two
 * span:has() selectors, later position wins; supersedes the 0.1.240 calc()
 * baseline compensation (deleted, no magic numbers). */
body.page-id-4968 .page-content .entry-content #staff-roster td span:has(> a),
body.page-id-5421 .page-content .entry-content table.aligncenter td span:has(> a[href*="/inmemoriam/"]) {
	margin-top: var(--pfoa-space-1);
	display: block;
}
/* PFOA 0.1.242 — Staff roster row separation (page-id-4968 #staff-roster):
 * add ~32px clear vertical space between the first-row titles and the
 * second-row photographs. Applied at the row boundary (tr + tr td
 * padding-top) so all eight photo positions and horizontal alignment are
 * preserved, the compact name/title <br> stacking is untouched, the approved
 * 8px photo-to-name gap and R2 label typography above are untouched, and In
 * Memoriam (page-id-5421) is outside the selector. Table layout stays
 * collapsed/fixed 4-col; second-row top padding replaces the generic 4px
 * with the 32px token (var(--pfoa-space-5) = 2rem), yielding ~36px clear
 * (4px row-1 bottom + 32px row-2 top). Responsive-safe: tr-based, no
 * per-cell or per-label rules, no width/column changes. */
body.page-id-4968 .page-content .entry-content #staff-roster tr + tr td {
	padding-top: var(--pfoa-space-5);
}

/* PFOA 0.1.247 — Fundraisers hub spacing + linked-photo labels
 * (page-id-4511 only, https://dev.safehavenpfoa.org/fundraisers/).
 * Pairs with the one-time content edit wrapping each bare tile caption in
 * <span><a href="same-as-photo">…</a></span> (destinations unchanged).
 * (1) Vertical section break: the kitties paragraph (p:has(+ table), the
 * only paragraph directly preceding a table on this page) drops its 20px
 * bottom margin and the photo-grid table takes margin-top
 * var(--pfoa-space-7) = 64px, so the rendered paragraph-to-grid gap is
 * exactly 64px with tokens only (no calc/magic numbers; adjoining margins
 * collapse to the 64px maximum). Table bottom margin and other pages
 * untouched. (Nested :has(+ table:has(td img)) is rejected: that compound
 * relative selector is invalid in Chromium, so the match uses the simple
 * p:has(+ table) form scoped to this single-table page.)
 * (2) Horizontal gutters: tile cells go from 4px to 4px vertical +
 * var(--pfoa-space-2) = 12px horizontal, so adjacent gutters render
 * 12px + 12px = 24px. The selector repeats the theme photo-grid :not()
 * chain with the page-id prefix so it outranks the generic photo-grid td
 * rule (same chain + page class, later order, no !important). Inline
 * width:100% table-layout:fixed wins over the theme photo-grid auto rule,
 * so 4 desktop columns, fixed widths, photo proportions (height:auto),
 * reading order, and destinations are preserved.
 * The 0.1.167 <=600px 2px !important rule still wins at mobile, keeping the
 * narrow 4-column fit sensible (accepted mobile correction preserved).
 * (3) Labels Adapter 5/5: thin mirror of the shared .pfoa-photo-label
 * contract (system-ui body stack, 1rem/16px, 600, non-italic, 1.5 rhythm,
 * action-primary rest, centered, rest none; hover/focus-visible hover color
 * + underline). Photo anchors (td > a:has(img)) are display:block only
 * (B1 0.1.238 precedent) so the declared 8px gap renders exactly; label gap
 * lives on the wrapper span (display:block + margin-top var(--pfoa-space-1)
 * = 8px), NOT on the anchor. Scoped to label anchors only (td span a);
 * photo boxes, static text, and the global :focus-visible ring are outside
 * these selectors and unchanged. At <=600px/<=360px the label anchors step
 * down to the accepted 0.1.167 13px/11.5px sizes (same specificity, later
 * order) so the longest caption word keeps its verified whole-word fit;
 * the existing span !important covers the wrapper while these rules cover
 * the explicitly-sized anchors. */
body.page-id-4511 .page-content .entry-content > p:has(+ table) {
	margin-bottom: 0;
}
body.page-id-4511 .page-content .entry-content table:has(td img) {
	margin-top: var(--pfoa-space-7);
}
body.page-id-4511 .page-content .entry-content table:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead)):has(td img) td {
	padding: 4px var(--pfoa-space-2);
}
body.page-id-4511 .page-content .entry-content table:has(td img) {
	margin-top: var(--pfoa-space-7);
}
body.page-id-4511 .page-content .entry-content table:has(td img) td {
	padding: 4px var(--pfoa-space-2);
}
body.page-id-4511 .page-content .entry-content table:has(td img) td > a:has(> img) {
	display: block;
}
body.page-id-4511 .page-content .entry-content table:has(td img) td span:has(> a) {
	display: block;
	margin-top: var(--pfoa-space-1);
}
body.page-id-4511 .page-content .entry-content table:has(td img) td span a {
	font-family: var(--pfoa-font-body);
	font-size: 1rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	color: var(--pfoa-action-primary);
	text-align: center;
	text-decoration: none;
}
body.page-id-4511 .page-content .entry-content table:has(td img) td span a:hover,
body.page-id-4511 .page-content .entry-content table:has(td img) td span a:focus-visible {
	color: var(--pfoa-action-hover);
	text-decoration: underline;
}
@media (max-width: 600px) {
	body.page-id-4511 .page-content .entry-content table:has(td img) td span a {
		font-size: 13px;
	}
}
@media (max-width: 360px) {
	body.page-id-4511 .page-content .entry-content table:has(td img) td span a {
		font-size: 11.5px;
	}
}

/* PFOA 0.1.249 — Volunteers heading + linked-photo labels (page-id-5006
 * only, https://dev.safehavenpfoa.org/volunteers-2/). Pairs with the
 * one-time DEV content edit on post 5006: the legacy navy all-caps
 * `<h4 style="text-align:center;"><span style="color:#000080;"><strong>OUR
 * VOLUNTEERS</strong></span></h4>` becomes plain `<h2>Our Volunteers</h2>`,
 * the navy `<span style="color:#000080;">` intro wrapper is removed (plain
 * `<p>` wording unchanged), the inert gallery `color="#000080"` attribute
 * is dropped, and each of the 12 native-gallery attachment captions
 * (post_excerpt on ids 10945,8878,8871,5009,5010,5015,10024,5018,5020,6661,
 * 6765,7684) is wrapped in `<a href="same-as-sibling-photo-href">`
 * (destinations unchanged, full-size file URLs, order preserved).
 * (1) Heading normalize: h2 (plus an h4 fallback in the same selector so
 * a legacy h4 cannot resurface navy) takes the section-heading treatment
 * mirroring the page-id-4799 precedent (Georgia, 1.75rem/28px, 1.2, 700,
 * centered, dark --pfoa-text-primary). Base h2 clamp, grid, lightbox
 * untouched.
 * (2) Intro guard: plain system-ui 1rem/16px, 400, 1.65 rhythm, dark
 * --pfoa-text-primary. Mostly served by the content edit removing the navy
 * span; this only outranks any residual inline span. Readable width and
 * alignment preserved (theme prose rules untouched).
 * (3) Labels Adapter 5/5: thin mirror of the shared .pfoa-photo-label
 * contract (system-ui --pfoa-font-body, 1rem/16px, 600, non-italic, 1.5
 * rhythm, action-primary #434EBE rest, centered, rest none; hover/
 * focus-visible action-hover #303873 + underline). Photo anchors
 * (.gallery-icon > a) are display:block only (B1 0.1.238 precedent) so the
 * declared 8px gap renders exactly; the gap lives on the figcaption wrapper
 * (margin-top var(--pfoa-space-1) = 8px from the theme caption rule),
 * NOT on the anchor. Scoped to label anchors ONLY (figcaption a); photo
 * boxes, static text, and the global :focus-visible 3px ring are outside
 * these selectors and unchanged. No grid-template/width/object-fit changes,
 * so 4 desktop columns, proportions, grid spacing, and lightbox preserved. */
body.page-id-5006 .page-content .entry-content h2,
body.page-id-5006 .page-content .entry-content h4 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--pfoa-text-primary);
	text-align: center;
	text-wrap: balance;
}
body.page-id-5006 .page-content .entry-content > p {
	font-family: var(--pfoa-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.65;
	color: var(--pfoa-text-primary);
}
body.page-id-5006 .page-content .entry-content .gallery .gallery-item .gallery-icon > a {
	display: block;
}
body.page-id-5006 .page-content .entry-content .gallery .gallery-item figcaption.gallery-caption {
	font-style: normal;
	text-align: center;
}
body.page-id-5006 .page-content .entry-content .gallery .gallery-item figcaption.gallery-caption a {
	font-family: var(--pfoa-font-body);
	font-size: 1rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	color: var(--pfoa-action-primary);
	text-align: center;
	text-decoration: none;
}
body.page-id-5006 .page-content .entry-content .gallery .gallery-item figcaption.gallery-caption a:hover,
body.page-id-5006 .page-content .entry-content .gallery .gallery-item figcaption.gallery-caption a:focus-visible {
	color: var(--pfoa-action-hover);
	text-decoration: underline;
}

/* PFOA 0.1.250 — Shared photo-grid caption standardization (structural, no page-ID).
 * Root cause: legacy photo-grid captions carry per-cell inline presentation
 * (span style="color:#000080; font-size:90%; text-align:...; line-height:1.2",
 * a style="color:#000080", td style="text-align:right/left") so apparently
 * equivalent text computes differently: linked labels receive the global
 * .entry-content a 600 weight at 16px while static spans stay 400 at 90%
 * (~14.4px) navy, with varying alignment/line-height. The render filter
 * pfoa_normalize_photo_grid_captions() strips those inline presentation
 * declarations at render (stored bytes untouched) so this shared structural
 * styling owns every photo-grid caption uniformly.
 * Contract (mirrors shared .pfoa-photo-label R2): system-ui body stack,
 * 1rem/16px, 600, normal (never italic), 1.5 rhythm, centered block wrapper
 * with the canonical 8px image-to-caption gap and word-boundary wrapping.
 * Interactive labels (span > a, same destination as the sibling photo) use
 * action-primary rest with hover/focus-visible hover color + underline;
 * static captions (span without an anchor) use text-primary with no
 * underline/hover so they stay noninteractive yet typographically
 * consistent. Photo anchors, grid geometry (columns/widths/padding),
 * lightbox, order, and editorial figcaption/gallery-caption rules are
 * outside these selectors and unchanged.
 * PFOA 0.1.257 — Board exclusion (shared, semantic, no page-ID):
 * .pfoa-board-member-name/.pfoa-board-member-role stay owned by the
 * Board component rules (0.1.90); the generic caption contract skips them.
 */
.page-content .entry-content table:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead)):has(td img) td span:not(.pfoa-board-member-name):not(.pfoa-board-member-role):has(> a),
.page-content .entry-content table:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead)):has(td img) td span:not(.pfoa-board-member-name):not(.pfoa-board-member-role):not(:has(a)) {
	display: block;
	margin-top: var(--pfoa-space-1);
	font-family: var(--pfoa-font-body);
	font-size: 1rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	color: var(--pfoa-text-primary);
	text-align: center;
	text-decoration: none;
	overflow-wrap: break-word;
	word-break: normal;
}
/* PFOA 0.1.258 — Shared photo-grid anchor specificity hygiene (T-05, semantic, no page-ID):
 * shared guards zeroed via :where() so the existing 13px/11.5px mobile exception wins; desktop unchanged. */
.page-content .entry-content table:where(:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead))):has(td img) td span a {
	font-family: var(--pfoa-font-body);
	font-size: 1rem;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5;
	color: var(--pfoa-action-primary);
	text-align: center;
	text-decoration: none;
	overflow-wrap: break-word;
	word-break: normal;
}
.page-content .entry-content table:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead)):has(td img) td span a:hover,
.page-content .entry-content table:not(.wp-block-table table):not([border="1"]):not(:has(th)):not(:has(thead)):has(td img) td span a:focus-visible {
	color: var(--pfoa-action-hover);
	text-decoration: underline;
}

/* PFOA 0.1.255 — Shared legacy inline-typography normalization (T-03, structural, no page-ID).
 * No new CSS rules here: the render filter pfoa_normalize_legacy_typography()
 * strips obsolete inline declarations (navy #000080, link-child magenta
 * #993366, 17/18/24px sizes, stray font-family, 1.2/18px line-height,
 * link text-decoration) at render time (stored bytes untouched), so the
 * existing theme tokens already own legacy prose — body system-ui 16px/400
 * with 1.65 rhythm in #302D2B, links #434EBE 600 rest with hover/focus
 * underline, and the Georgia heading hierarchy. Photo-grid captions (E1),
 * gotmail letters (E2), Comic Sans letters (E3), 12px sponsor captions (E4),
 * promo background boxes (E5), and destination anchors (E6) stay exempt.
 */

/* PFOA 0.1.261 — We've Got Mail gold letter dividers (DEV only, structural, no page-ID).
 * Divider-only change: the 1px gray separator becomes the site's established
 * gold section treatment (3px var(--pfoa-color-gold, #e9ad4e), same as the
 * sub-menu top edge and Home Front feature top edge). Applies between all
 * letters, never above the first. Spacing, full-width flow, typography,
 * photos, captions, and mobile behavior unchanged.
 */
.pfoa-gotmail-letter {
	display: flow-root;
	min-width: 0;
	max-width: none;
	margin-block: 0;
	padding-block: var(--pfoa-space-lg, 1.5rem);
	padding-inline: 0;
	border-top: 3px solid var(--pfoa-color-gold, #e9ad4e);
	color: var(--pfoa-text-primary, #302D2B);
	overflow-wrap: break-word;
}
.pfoa-gotmail-letter:first-of-type {
	border-top: 0;
	padding-block-start: 0;
}
.pfoa-gotmail-letter + .pfoa-gotmail-letter {
	margin-block-start: 0;
}
/* PFOA 0.1.262 — Gotmail heading gap fix (DEV only, structural, no page-ID).
 * The 0.1.259 heading rule used a three-value margin-block, which is not a
 * valid form — measured computed gap above photos/body text was 0px on all
 * 14 letters. Replaced with the valid two-value form on the defined
 * --pfoa-space-3 token: 0 top, 1rem (16px) bottom, inside the 12–16px target.
 * Nothing else touched.
 */
.pfoa-gotmail-letter-heading {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	line-height: 1.25;
	color: var(--pfoa-text-primary, #302D2B);
	margin-block: 0 var(--pfoa-space-3, 1rem);
	text-wrap: balance;
}
.pfoa-gotmail-letter-body {
	display: flow-root;
	min-width: 0;
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--pfoa-text-primary, #302D2B);
}
.pfoa-gotmail-letter-body p {
	margin-block: 0 var(--pfoa-space-md, 1rem);
}
.pfoa-gotmail-letter-body p:last-child {
	margin-block-end: 0;
}
.pfoa-gotmail-letter-body strong {
	font-weight: 700;
	color: inherit;
}
.pfoa-gotmail-letter-body em {
	font-style: italic;
	color: inherit;
}
.pfoa-gotmail-letter-body a {
	color: #434EBE;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.pfoa-gotmail-letter-body a:hover {
	color: #303873;
}
.pfoa-gotmail-letter-body a:focus-visible,
.pfoa-gotmail-letter-heading a:focus-visible {
	outline: 3px solid #057205;
	outline-offset: 2px;
	border-radius: 2px;
}
.pfoa-gotmail-letter-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--pfoa-radius-sm, 6px);
}
.pfoa-gotmail-letter-body img.alignleft {
	float: left;
	width: min(280px, 35%);
	max-width: 35%;
	height: auto;
	margin: 0 var(--pfoa-space-md, 1rem) var(--pfoa-space-md, 1rem) 0;
}
.pfoa-gotmail-letter-body img.alignright {
	float: right;
	width: min(280px, 35%);
	max-width: 35%;
	height: auto;
	margin: 0 0 var(--pfoa-space-md, 1rem) var(--pfoa-space-md, 1rem);
}
.pfoa-gotmail-letter-body img.aligncenter,
.pfoa-gotmail-letter-body img:not([class*="align"]) {
	display: block;
	margin-inline: auto;
	margin-block: var(--pfoa-space-md, 1rem);
}
.pfoa-gotmail-caption {
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.5;
	color: #525873;
	margin-block: var(--pfoa-space-sm, 0.75rem) 0;
}
.pfoa-gotmail-caption em {
	font-style: inherit;
}
.pfoa-gotmail-caption a {
	color: inherit;
}
@media (max-width: 720px) {
	.pfoa-gotmail-letter-body img.alignleft,
	.pfoa-gotmail-letter-body img.alignright {
		float: none;
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		margin-inline: auto;
		margin-block: 0 var(--pfoa-space-md, 1rem);
	}
}
@media (max-width: 390px) {
	.pfoa-gotmail-letter {
		padding-block: var(--pfoa-space-md, 1rem);
	}
	.pfoa-gotmail-letter-body img {
		width: auto;
		max-width: 100%;
		height: auto;
	}
}

/* PFOA 0.1.263 — We've Got Mail duplicate content heading (DEV only).
 * The stored page content opens with its own centered "WE'VE GOT MAIL!" h2,
 * which duplicates the theme page title rendered in the title header above
 * the gold rule. Hide that single content-owned duplicate (first child of the
 * entry content on page 25080 only) so the page shows one title. Stored
 * bytes untouched; the theme title, gold rule, intro, and all 14 letters
 * are unchanged. Page-ID scope is deliberate: the duplicate exists only here.
 */
body.page-id-25080 .page-content .entry-content > h2:first-child {
	display: none;
}

/* PFOA 0.1.264 — Staff roster role typography (page-id-4968 #staff-roster only,
 * DEV correction to the Board convention).
 * Root cause: each Staff cell renders `<span><a>Name</a><br>Title</span>`, so
 * the bare title text inherits the shared photo-grid wrapper contract
 * (:8302-8316: 600 weight, dark var(--pfoa-text-primary)). Board roles avoid
 * this with their own component spans (0.1.90
 * body.page-id-4264 .pfoa-board-member-role: 400 weight, muted
 * var(--pfoa-text-muted) #525873, 0.85rem).
 * Correction: restyle the Staff label wrapper to the equivalent Board
 * treatment — regular 400 weight, muted var(--pfoa-text-muted) — reusing the
 * shared theme token (no new color, no !important). The name anchors keep
 * their own Adapter 3/4 rule (:8027-8041: 600 action-primary, later order
 * untouched), so names stay bold blue; the #staff-roster ID outranks the
 * shared wrapper without !important. Font size (1rem), centering,
 * image-to-label gap, row separation, grid, photos, wrapping, and the Board
 * component itself are untouched.
 */
body.page-id-4968 .page-content .entry-content #staff-roster td span:has(> a) {
	font-weight: 400;
	color: var(--pfoa-text-muted);
}

/* PFOA 0.1.268 — Mission and Objectives section-heading scale (page-id-6738 only,
 * https://dev.safehavenpfoa.org/missionandobjectives/).
 * Root cause: the six flat content-owned h2.wp-block-heading sections inherit
 * the large display treatment (Georgia 700, clamp up to 1.75rem long-form /
 * 2.5rem global) plus the shared long-form 3rem (space-6) top margin, so the
 * section labels render oversized with excessive vertical separation.
 * Correction: scale the six section headings to the H3 step (1.25rem, 1.3
 * line-height; Georgia 700 inherited untouched) and tighten vertical rhythm
 * to the spacing scale (2rem top / 1rem bottom; the first heading keeps
 * margin-top:0 per the shared :first-child null). Paragraph/list bottom
 * rhythm eases 1.25rem to 1rem on this page only. H1 page title + gold
 * entry-header divider, body copy, prose measure, header, and footer
 * untouched. No fixed heights, no new colors, no !important, no horizontal
 * overflow risk (rem margins + fluid prose only); the body.page-id-6738
 * guard outranks the shared zero-specificity :where() and element rules
 * without touching any other page. */
body.page-id-6738 .page-content .entry-content > h2.wp-block-heading {
	font-size: 1.25rem;
	line-height: 1.3;
	margin-top: 2rem;
	margin-bottom: 1rem;
}
body.page-id-6738 .page-content .entry-content > h2.wp-block-heading:first-child {
	margin-top: 0;
}
body.page-id-6738 .page-content .entry-content > p,
body.page-id-6738 .page-content .entry-content > ul,
body.page-id-6738 .page-content .entry-content > ol {
	margin-bottom: 1rem;
}

/* PFOA 0.1.272 — Week 277 structural layout correction (page-id-25816 only,
 * https://dev.safehavenpfoa.org/from-the-home-front-week-277/).
 * Root causes confirmed live: (1) the 3-col div.wp-block-columns.pfoa-hf-adopted
 * and 2-col div.wp-block-columns.pfoa-hf-picasso are direct .entry-content
 * children, so they use the full 960px shell lane while prose (p/h1/h2)
 * centers at 720px (var(--pfoa-prose-width)) — photo groups ran wider than
 * the text; (2) the content-owned h1.pfoa-hf-article__title inherits the
 * theme default H1 clamp(2.25rem,4vw,3rem), larger than the prior article
 * heading; (3) the closing paragraph wraps its link in a legacy post-content
 * <u> that doubles the global underlined-link treatment (removed from post
 * 25816 content itself, not fought in CSS).
 * Correction: constrain both column groups to the prose measure (max-width
 * + margin-inline:auto via existing tokens, no fixed px caps, no
 * !important), keep images fluid (height:auto, aspect/arrangement/captions
 * untouched), scale the content-owned H1 down to the normal page-heading
 * step (Mission h2 clamp 1.35-1.75rem — at/below prior article size, well
 * under the 2.25-3rem display default; markup stays in content, no
 * entry-header move), and leave the closing p on ordinary body rhythm
 * (1rem/1.65, 1.25rem spacing inherited — no pfoa-hf size overrides exist).
 * Paw-bullet rules from 0.1.271 preserved exactly below (broken 18x18 imgs
 * hidden, emoji paw via ::before). Mobile: WP core stacks the columns at
 * <=781px per theme convention; the 720px cap yields to the
 * 100%-minus-gutters shell so there is no horizontal overflow. Scoped
 * strictly to body.page-id-25816; no globals, no TEST/prod impact. */
body.page-id-25816 .page-content .entry-content > div.wp-block-columns.pfoa-hf-adopted,
body.page-id-25816 .page-content .entry-content > div.wp-block-columns.pfoa-hf-picasso {
	max-width: var(--pfoa-prose-width);
	margin-inline: auto;
}
body.page-id-25816 .page-content .entry-content > div.wp-block-columns.pfoa-hf-adopted img,
body.page-id-25816 .page-content .entry-content > div.wp-block-columns.pfoa-hf-picasso img {
	height: auto;
}
body.page-id-25816 .page-content .entry-content > h1.wp-block-heading.pfoa-hf-article__title {
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	line-height: 1.25;
}
@media (max-width: 781px) {
	body.page-id-25816 .page-content .entry-content > div.wp-block-columns.pfoa-hf-adopted,
	body.page-id-25816 .page-content .entry-content > div.wp-block-columns.pfoa-hf-picasso {
		max-width: 100%;
	}
}

/* PFOA 0.1.271 — Week 277 paw bullets only (page-id-25816 only,
 * https://dev.safehavenpfoa.org/from-the-home-front-week-277/).
 * Replaces the removed 0.1.269 typography pins + 0.1.270 scale pins: H1/H2/p/
 * figcaption/width/margin now inherit the ordinary theme rhythm (body 1rem/1.65
 * system-ui, p margin-block 0 1.25rem, Georgia headings, shell 960px / prose
 * 720px) because the pfoa-hf-page/bullets/ps wrapper divs were removed from post
 * 25816 so p/h1/h2/columns/figures are direct .entry-content children. Only the
 * Michael-liked paw-bullet markers remain: broken paw-bullet-277.png imgs hidden,
 * emoji paw via ::before. Scoped strictly to body.page-id-25816; no globals,
 * no !important, no pixel caps. */
body.page-id-25816 .entry-content img[src*="paw-bullet-277"] {
	display: none;
}
body.page-id-25816 .entry-content p.pfoa-hf-bullet::before,
body.page-id-25816 .entry-content p.pfoa-hf-article__signoff::before {
	content: "🐾";
	font-size: 14px;
	margin-right: 8px;
}

/* PFOA 0.1.273 — Week 277 Wills signature restoration (page-id-25816 only,
 * https://dev.safehavenpfoa.org/from-the-home-front-week-277/).
 * Signoff markup (in post content, untouched): p.pfoa-hf-article__signoff
 * with text "Wills" + paw-bullet-277.png img already positioned to the RIGHT.
 * No Ink Free webfont exists (Microsoft/Monotype proprietary, Win10+/Office
 * bundled, absent on Mac, not on Google Fonts or safe CDNs — never
 * @font-face/self-host/convert). Handwritten stack names it first so licensed
 * Windows/Office machines render true Ink Free; all others fall back through
 * Segoe Print / Bradley Hand / Chalkboard SE / Comic Sans MS / cursive.
 * Signature blue reuses the theme action token (var(--pfoa-action-primary)
 * = #434EBE) with hex fallback. Size 1.625rem/1.3 sits between body 1rem and
 * the content H1 clamp, with top/bottom margins so it sits intentionally in
 * the flow. The shared LEFT emoji ::before from 0.1.271 is suppressed for the
 * signoff only (later rule, equal specificity, wins); bullets keep their
 * emoji treatment untouched. The blanket 0.1.271 img hide
 * (body.page-id-25816 .entry-content img[src*="paw-bullet-277"]) is overridden
 * for the signoff img only via higher specificity (extra p class in the
 * chain — no !important): inline-block, 22px wide, height auto (93x90 source
 * aspect kept), 8px left margin, baseline-aligned to the handwritten text.
 * Note: the asset is navy rgb(0,0,128)/#000080 vs signature #434EBE — kept
 * natural per plan; slight hue delta is expected. Scoped strictly to
 * body.page-id-25816 signoff; no globals, no bullet changes. */
body.page-id-25816 .entry-content p.pfoa-hf-article__signoff {
	font-family: "Ink Free", "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;
	color: var(--pfoa-action-primary, #434EBE);
	font-size: 1.625rem;
	line-height: 1.3;
	margin-top: 0.75rem;
	margin-bottom: 1.5rem;
}
body.page-id-25816 .entry-content p.pfoa-hf-article__signoff::before {
	content: none;
}
body.page-id-25816 .entry-content p.pfoa-hf-article__signoff img[src*="paw-bullet"] {
	display: inline-block;
	width: 22px;
	height: auto;
	margin-left: 8px;
	vertical-align: baseline;
}

/* PFOA 0.1.279 — Board roster mobile reflow (QA-05) + Pawsome sponsor
 * tables mobile reflow (QA-04). DEV only, CSS-only, no content edits.
 * Board (page-id-4264 only, https://dev.safehavenpfoa.org/boardofdirectors/):
 * Root cause: content-authored table.aligncenter[style*="table-layout: fixed"]
 * + td[width="20%"] keeps a rigid 5-column fixed row (~56px lanes at 390px),
 * and the compat overflow-wrap:anywhere fragments names/roles mid-word
 * (board spans are exempt from the shared caption break-word rescue).
 * At <=600px restore word-boundary wrapping and reflow each 5-cell row into
 * a 2-across grid (display change sidesteps the inline fixed layout; no
 * !important). DOM/visual/keyboard order kept within each row; photo
 * buttons, dialog triggers, and desktop (>600px) 5-column presentation
 * untouched. Limitation: markup uses two rows (5 photos, then 5 names), so
 * CSS-only yields a photo group followed by a name group rather than five
 * photo+name cards; names/roles are intact and readable, satisfying the
 * bounded correction. True per-member cards would need a one-time content
 * transpose of post-4264 (out of scope here).
 * Pawsome (page-id-19273 only, https://dev.safehavenpfoa.org/atrulypawsomeevent/):
 * Root cause: sponsor text tables declare 142px/284px/426px cell widths with
 * table-layout:fixed; the generic compat cap is max-width:100% only and the
 * caption-companion rule keeps width:auto on the table but not table-layout
 * or td widths, so the fixed minima expand the 390px document to ~1015px.
 * Base page-scoped rule (all widths) neutralizes the fixed minima while
 * keeping single-row desktop presentation; the <=600px grid reflows the two
 * text tables 2-across so labels stay readable with zero page overflow.
 * Logo (photo-grid :has(td img)) tables are excluded and untouched; navy
 * 12px captions, order, links, and desktop rows preserved. */
body.page-id-19273 .page-content .entry-content table.aligncenter:not(:has(td img)) {
	table-layout: auto;
	width: 100%;
	max-width: 100%;
}
body.page-id-19273 .page-content .entry-content table.aligncenter:not(:has(td img)) td {
	width: auto !important;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
}
@media (max-width: 600px) {
	body.page-id-4264 .page-content .entry-content table.aligncenter td span.pfoa-board-member-name,
	body.page-id-4264 .page-content .entry-content table.aligncenter td span.pfoa-board-member-role {
		overflow-wrap: break-word;
		word-break: normal;
	}
	body.page-id-4264 .page-content .entry-content table.aligncenter,
	body.page-id-4264 .page-content .entry-content table.aligncenter tbody {
		display: block;
		width: 100%;
	}
	body.page-id-4264 .page-content .entry-content table.aligncenter tr {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 8px;
		width: 100%;
	}
	body.page-id-4264 .page-content .entry-content table.aligncenter td {
		display: block;
		width: auto;
		padding: 4px;
	}
	body.page-id-4264 .page-content .entry-content table.aligncenter td img,
	body.page-id-4264 .page-content .entry-content table.aligncenter .pfoa-board-bio-trigger {
		width: 100%;
		max-width: 160px;
		margin-inline: auto;
	}
	body.page-id-4264 .page-content .entry-content table.aligncenter .pfoa-board-bio-trigger img {
		max-width: 100%;
	}
	body.page-id-19273 .page-content .entry-content table.aligncenter:not(:has(td img)),
	body.page-id-19273 .page-content .entry-content table.aligncenter:not(:has(td img)) tbody {
		display: block;
		width: 100%;
	}
	body.page-id-19273 .page-content .entry-content table.aligncenter:not(:has(td img)) tr {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		width: 100%;
	}
	body.page-id-19273 .page-content .entry-content table.aligncenter:not(:has(td img)) td {
		display: block;
		width: auto;
		padding: 4px;
	}
}

/* PFOA 0.1.280 — Board roster narrow-width type scale (page-id-4264 only,
 * <=360px follow-up to 0.1.279). At 320px the 2-across lanes are ~108px and
 * 1.05rem/0.85rem leaves "Magenheimer" and "Treasurer/Media Manager"
 * one mid-word split short of intact. Scale to 15px/12px so the longest
 * words fit whole at 320px; 390px+ and desktop untouched. */
/* PFOA 0.1.281 — Board roster 320px final fit (page-id-4264 only, <=360px
 * tightening of 0.1.280). 15px still splits "Magenheimer" (~102px) in a
 * ~100px content lane; 14px (~95px) + 2px cell padding fits it whole with
 * zero page overflow. 390px+ and desktop untouched. */
@media (max-width: 360px) {
	body.page-id-4264 .page-content .entry-content table.aligncenter td {
		padding: 2px;
	}
	body.page-id-4264 .page-content .entry-content table.aligncenter td span.pfoa-board-member-name {
		font-size: 14px;
	}
	body.page-id-4264 .page-content .entry-content table.aligncenter td span.pfoa-board-member-role {
		font-size: 12px;
	}
}

/* PFOA 0.1.282 — Board per-member card grid (QA-05 structural).
 * Scope: body.page-id-4264 only (DEV page 4264). No gallery/lightbox,
 * functions.php, template, staff-2 (4968), memoriam, facilities,
 * footer-map, or QA-04 Pawsome (19273) selectors touched; 0.1.279-0.1.281
 * table fallback + Pawsome rules above kept verbatim.
 * New content lane transposes the two-row table (5 photos, then 5 names)
 * into <div class="pfoa-board-roster"> with 5x <div class="pfoa-board-card">
 * (photo button/img + div.pfoa-board-card__text with
 * span.pfoa-board-member-name + span.pfoa-board-member-role). Each card is
 * one grid item, so photo/name/role can never detach into separate groups.
 * Global overflow-wrap:anywhere (:396-399/:988-991, inherited) is
 * neutralized on cards to break-word so "Magenheimer" / "Treasurer/Media
 * Manager" wrap only at word boundaries. No fixed table-layout/widths,
 * no !important (new markup has no inline styles), no horizontal overflow
 * (roster + cards min-width:0, max-width:100%). Dialog rules untouched. */
body.page-id-4264 .pfoa-board-roster {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px 12px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
body.page-id-4264 .pfoa-board-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
	max-width: 100%;
}
body.page-id-4264 .pfoa-board-card .pfoa-board-bio-trigger {
	display: block;
	width: 100%;
	max-width: 180px;
	margin-inline: auto;
}
body.page-id-4264 .pfoa-board-card img {
	display: block;
	width: 100%;
	max-width: 180px;
	height: auto;
	margin-inline: auto;
}
body.page-id-4264 .pfoa-board-card .pfoa-board-bio-trigger img {
	max-width: 100%;
}
body.page-id-4264 .pfoa-board-card__text {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}
body.page-id-4264 .pfoa-board-card span.pfoa-board-member-name,
body.page-id-4264 .pfoa-board-card span.pfoa-board-member-role {
	display: block;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}
body.page-id-4264 .pfoa-board-card span.pfoa-board-member-name {
	line-height: 1.3;
}
body.page-id-4264 .pfoa-board-card span.pfoa-board-member-role {
	line-height: 1.45;
}
@media (max-width: 900px) {
	body.page-id-4264 .pfoa-board-roster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	body.page-id-4264 .pfoa-board-roster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 12px;
	}
}
/* PFOA 0.1.283 — Board roster <=360px single column (page-id-4264 only).
 * Verified screenshots at 320px showed 2-col ~100px lanes still splitting
 * "Magenheim/er" and "Me/dia Manager" mid-word; 390px 2-col stays whole-word
 * and is unchanged. Single column gives ~280px lanes so 14px/12px type wraps
 * only at word boundaries; cards centered at max ~260px so photos keep their
 * scale with photo-above-name per card. <=900px 3-col, <=600px 2-col, and
 * base 5-col untouched. */
@media (max-width: 360px) {
	body.page-id-4264 .pfoa-board-roster {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	body.page-id-4264 .pfoa-board-card {
		width: 100%;
		max-width: 260px;
		margin-inline: auto;
	}
	body.page-id-4264 .pfoa-board-card span.pfoa-board-member-name {
		font-size: 14px;
	}
	body.page-id-4264 .pfoa-board-card span.pfoa-board-member-role {
		font-size: 12px;
	}
}

/* PFOA 0.1.284 — QA-07 authored emphasis-text contrast (CSS-only, no
 * content edits, DEV only).
 * Root cause: page-authored inline styles set lime #79be27 on Pawsome
 * (page-id-19273, https://dev.safehavenpfoa.org/atrulypawsomeevent/) and
 * pure red #ff0000 on Wish List (page-id-5027,
 * https://dev.safehavenpfoa.org/wishlist/). On the #fbfcfa site background
 * #79be27 measures ~2.22:1 (needs 3:1 for the 26px/20px-bold poster type,
 * and one 16px-bold line needs 4.5:1) and #ff0000 measures ~3.89:1 (needs
 * 4.5:1 for 16px-bold list type).
 * Correction: page-scoped overrides darken the same hues in place --
 * #79be27 -> #4a7a15 (~4.99:1, passes both thresholds) and #ff0000 ->
 * #cc0000 (~5.72:1, passes 4.5:1). !important is required to beat the
 * inline style attribute; the [style*="..." i] match covers hex-case and
 * spacing variants. Children inherit the corrected color, so nested
 * font-size spans need no separate rule. Wording, sizes, weights,
 * alignment, layout, and every other page are untouched; these hues occur
 * nowhere else in either page's content. The legacy-typography normalizer
 * exemption for green poster type is unchanged (markup is byte-identical;
 * only the rendered color is corrected). */
body.page-id-19273 .entry-content [style*="79be27" i] {
	color: #4a7a15 !important;
}
body.page-id-5027 .entry-content [style*="ff0000" i] {
	color: #cc0000 !important;
}