/*
 * Campaign theme: XD "Pledge v3 Star" design (Nov 8, 2026).
 *
 * Colors, fonts, sizes, radii and motion timings come from theme.json:
 *   --wp--preset--color--{slug}        settings.color.palette
 *   --wp--preset--font-family--{slug}  settings.typography.fontFamilies
 *   --wp--custom--{group}--{key}       settings.custom (radius, motion, shadow…)
 * Rebrand in theme.json. The only literals here are the star crop geometry,
 * the error red and a few rgb() shadows/tints.
 *
 * Sections: base · header · buttons · hero · pledge card · forms (Gravity
 * Forms + built-in) · bands & footer · video dialog · motion.
 */

:root {
	--tp-pad: clamp(1.25rem, 5.1vw, 6.125rem);   /* side gutter: 98px at 1920 like the XD file */
	--tp-ease: var(--wp--custom--motion--ease, cubic-bezier(0.22, 1, 0.36, 1));
	--tp-spring: var(--wp--custom--motion--spring, cubic-bezier(0.34, 1.56, 0.64, 1));
	--tp-fast: var(--wp--custom--motion--fast, 160ms);
	--tp-base: var(--wp--custom--motion--base, 320ms);
	--tp-slow: var(--wp--custom--motion--slow, 700ms);
	--tp-error: #B3261E;
}

/* ---------- Base ---------- */
html { scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--campaign-focus, var(--wp--preset--color--focus));
	outline-offset: var(--wp--custom--focus--offset);
	border-radius: var(--wp--custom--radius--small);
}
.has-primary-background-color, .has-accent-background-color { --campaign-focus: var(--wp--preset--color--primary-contrast); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus, .skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	z-index: 100000;
}

.campaign-eyebrow {
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-text);
	margin: 0;
}
.campaign-section { scroll-margin-top: 5rem; }

/* ---------- Header ----------
 * Over a hero it floats on the photo (logo only, like the XD file). After the
 * hero scrolls away, motion.js adds .is-stuck: it slides in as a white bar
 * with the pledge / donate buttons. */
.site-header {
	position: relative;
	z-index: 60;
	padding: clamp(1rem, 2.4vw, 1.5rem) var(--tp-pad);
	background: var(--wp--preset--color--surface);
}
body:has(.campaign-hero) .site-header {
	position: absolute;
	inset: 0 0 auto 0;
	padding-top: clamp(1.25rem, 2.6vw, 3.1rem);
	background: transparent;
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.site-header__inner { align-items: center; gap: 1rem; }

.campaign-logo {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	line-height: 1;
}
.campaign-logo :is(svg, img) {
	display: block;
	width: auto;
	height: 3rem;
	transition: height var(--tp-base) var(--tp-ease), transform var(--tp-base) var(--tp-spring);
}
body:has(.campaign-hero) .site-header:not(.is-stuck) .campaign-logo :is(svg, img) { height: clamp(3.75rem, 6.6vw, 8rem); }
/* Uploaded logo (Site Settings → Logo): same box as the SVG, height-led. */
.campaign-logo img { max-width: min(var(--wp--custom--logo--max-width, 17rem), 72vw); object-fit: contain; object-position: left center; }
body:has(.campaign-hero) .site-header:not(.is-stuck) .campaign-logo img { max-width: min(26rem, 60vw); }
.campaign-logo__text { font-weight: 900; font-size: var(--wp--preset--font-size--large); }

.site-header__actions { gap: 0.75rem; flex-wrap: nowrap; transition: opacity var(--tp-base) var(--tp-ease), transform var(--tp-base) var(--tp-ease), visibility var(--tp-base); }
.site-header__actions .wp-block-button__link { font-size: 0.875rem; padding: 0.75em 1.25em; white-space: nowrap; }
html.js body:has(.campaign-hero) .site-header:not(.is-stuck) .site-header__actions {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.5rem);
}
.site-header.is-stuck {
	position: fixed !important;
	padding-top: 0.6rem !important;
	padding-bottom: 0.6rem;
	background: rgb(255 255 255 / 0.88);
	-webkit-backdrop-filter: saturate(1.5) blur(14px);
	backdrop-filter: saturate(1.5) blur(14px);
	box-shadow: 0 1px 0 rgb(0 39 103 / 0.12), 0 10px 30px -18px rgb(0 39 103 / 0.45);
	animation: tp-header-in 0.5s var(--tp-ease) both;
}
@keyframes tp-header-in { from { transform: translateY(-110%); } to { transform: none; } }
@media (max-width: 781px) {
	.site-header__actions .is-style-text, .site-header__actions .is-style-navy { display: none; }
}

/* ---------- Buttons ---------- */
.wp-block-button__link, .wp-element-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform var(--tp-fast) var(--tp-spring),
		box-shadow var(--tp-base) var(--tp-ease),
		background-color var(--tp-base) var(--tp-ease),
		color var(--tp-base) var(--tp-ease);
}
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--button); }
.wp-block-button__link:active { transform: translateY(0) scale(0.97); transition-duration: 80ms; }
/* Light sweep across solid buttons on hover. */
.wp-block-button:not(.is-style-video):not(.is-style-text) .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.32) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.7s var(--tp-ease);
}
.wp-block-button:not(.is-style-video):not(.is-style-text) .wp-block-button__link:hover::after { transform: translateX(120%); }

.wp-block-button.is-style-donate .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); }
.wp-block-button.is-style-donate .wp-block-button__link:hover { background: var(--wp--preset--color--accent-deep); }
.wp-block-button.is-style-navy .wp-block-button__link { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-contrast); }
.wp-block-button.is-style-navy .wp-block-button__link:hover { background: var(--wp--preset--color--primary-deep); box-shadow: 0 10px 20px -8px rgb(0 39 103 / 0.6); }
.wp-block-button.is-style-outline-light .wp-block-button__link { background: transparent; color: var(--wp--preset--color--primary); box-shadow: inset 0 0 0 2px currentColor; }

/* Text-only link button (header). */
.wp-block-button.is-style-text .wp-block-button__link {
	background: none;
	color: var(--wp--preset--color--primary);
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 2px;
	background-repeat: no-repeat;
	background-position: 0 85%;
	transition: background-size var(--tp-base) var(--tp-ease), color var(--tp-base);
}
.wp-block-button.is-style-text .wp-block-button__link:hover { background-size: 100% 2px; transform: none; box-shadow: none; }

/* "Watch our launch video": play-in-circle icon + text, opens the video dialog. */
.wp-block-button.is-style-video .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.4em 0;
	background: none;
	color: var(--wp--preset--color--primary);
	text-transform: none;
	letter-spacing: 0;
	font-size: clamp(1.0625rem, 0.75rem + 0.95vw, 1.875rem);
	box-shadow: none;
	overflow: visible; /* let the play-button ripple spread past the link */
	isolation: auto;
}
.wp-block-button.is-style-video .wp-block-button__link:focus-visible { outline-offset: 6px; }
.wp-block-button.is-style-video .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='none' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M16 12.5 28 20 16 27.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='none' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M16 12.5 28 20 16 27.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--tp-base) var(--tp-spring);
}
.wp-block-button.is-style-video .wp-block-button__link::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.35em;
	height: 1.35em;
	margin-top: -0.675em;
	border-radius: 50%;
	box-shadow: 0 0 0 0 currentColor;
	opacity: 0;
	pointer-events: none;
}
.wp-block-button.is-style-video .wp-block-button__link:hover { transform: none; box-shadow: none; color: var(--wp--preset--color--primary-deep); }
.wp-block-button.is-style-video .wp-block-button__link:hover::before { transform: scale(1.12); }
.wp-block-button.is-style-video .wp-block-button__link:hover::after { animation: tp-ping 1.1s var(--tp-ease) infinite; }
@keyframes tp-ping {
	0% { opacity: 0.45; box-shadow: 0 0 0 0 currentColor; }
	100% { opacity: 0; box-shadow: 0 0 0 0.9em currentColor; }
}

/* ---------- Hero (star crop) ---------- */
.campaign-hero--star {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(38rem, 51.7vw, 66rem);
	padding: 0 !important;
	margin-top: 0 !important;
}
.campaign-hero--star > .campaign-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
	padding: clamp(8.5rem, 15.5vw, 16rem) var(--tp-pad) clamp(3.5rem, 8vw, 9rem);
}
.campaign-hero__title {
	margin: 0;
	font-size: clamp(2.375rem, 0.9rem + 3.05vw, 4.6rem);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--primary);
}
.campaign-hero__sub {
	margin: clamp(1.25rem, 2.4vw, 2.6rem) 0 0;
	max-width: 36em;
	font-size: clamp(1.0625rem, 0.75rem + 0.95vw, 1.875rem);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}
.campaign-hero__actions {
	margin-top: clamp(1.75rem, 3.2vw, 3.6rem) !important;
	gap: clamp(1rem, 2.4vw, 2.75rem) !important;
	align-items: center;
}

/* The photo: right-hand panel cut to the left point of a star, with a coral
 * edge. ::before is the coral layer; the image sits 1.5% further right on the
 * left-facing edges so the coral shows as a stroke. Same point count in both
 * polygons so they can animate. Geometry measured from the 1920px XD file. */
.campaign-hero--star .campaign-hero__photo {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: 1;
	width: 43.75%;
	margin: 0 !important;
	--tp-star-c: polygon(52.5% 0, 37.6% 35.2%, 0.4% 42.5%, 26.2% 67.3%, 15.1% 100%, 100% 100%, 100% 0);
	--tp-star-p: polygon(54.1% 0, 38.7% 35.1%, 2.2% 42.7%, 28.1% 67.5%, 16.8% 100%, 100% 100%, 100% 0);
	--tp-star-c0: polygon(100% 0, 100% 35.2%, 100% 42.5%, 100% 67.3%, 100% 100%, 100% 100%, 100% 0);
}
.campaign-hero--star .campaign-hero__photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--accent);
	clip-path: var(--tp-star-c);
}
.campaign-hero--star .campaign-hero__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 30%;
	clip-path: var(--tp-star-p);
	translate: 0 var(--tp-parallax, 0px);
	scale: 1.04;
}

@media (min-width: 900px) {
	.campaign-hero--star > .campaign-hero__content { width: 57%; padding-right: 1.5rem; }
}
@media (max-width: 899px) {
	.campaign-hero--star { display: block; min-height: 0; }
	.campaign-hero--star > .campaign-hero__content { padding-bottom: clamp(2.5rem, 7vw, 3.5rem); }
	.campaign-hero--star .campaign-hero__photo {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 5 / 4;
		--tp-star-c: polygon(0 20%, 58% 9%, 72% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
		--tp-star-p: polygon(0 23%, 59% 12%, 74% 3%, 100% 3%, 100% 100%, 0 100%, 0 100%);
		--tp-star-c0: polygon(0 100%, 58% 100%, 72% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%);
	}
	.campaign-hero--star .campaign-hero__photo img { object-position: 60% 25%; }
}

/* RSVP and other simple heroes. */
.campaign-hero--event { padding-top: clamp(9.5rem, 15vw, 15rem) !important; }
.campaign-hero--event h1 { margin-top: var(--wp--preset--spacing--20); }
.campaign-hero--event .campaign-hero__sub { font-size: clamp(1.0625rem, 0.8rem + 0.6vw, 1.375rem); }

/* Placeholders kept for unused patterns. */
.wp-block-group.is-style-placeholder, .wp-block-group.is-style-media-placeholder {
	display: grid; place-items: center; min-height: 14rem;
	padding: var(--wp--preset--spacing--30);
	border: 2px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	text-align: center; font-weight: 700;
}

/* ---------- Pledge ---------- */
.campaign-pledge {
	padding: clamp(3.75rem, 6.5vw, 7rem) var(--wp--preset--spacing--20) clamp(4rem, 7vw, 7.5rem) !important;
	margin-top: 0 !important;
}
.campaign-pledge__title {
	font-size: clamp(2rem, 1rem + 2.2vw, 3.65rem) !important;
	line-height: 1;
	margin-top: 0 !important;
	margin-bottom: clamp(1.5rem, 3vw, 3rem) !important;
}
.campaign-card {
	position: relative;
	padding: clamp(2rem, 3.4vw, 3.25rem) clamp(1.25rem, 5vw, 6rem) clamp(2.25rem, 3.6vw, 3.25rem);
	border-radius: 4px;
	box-shadow: var(--wp--custom--shadow--card);
}
.campaign-pledge__quote {
	margin-top: 0 !important;
	margin-bottom: clamp(1.5rem, 3.2vw, 2.75rem) !important;
	margin-inline: auto;
	max-width: 31em;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.15rem, 0.8rem + 1vw, 1.875rem);
	line-height: 1.32;
	color: var(--wp--preset--color--primary);
	text-wrap: balance;
}
.campaign-card--lift { margin-top: calc(var(--wp--preset--spacing--50) * -1); }

/* ---------- Forms: Gravity Forms (its own CSS is off; see inc/setup.php) ---------- */
.gform_wrapper { position: relative; color: var(--wp--preset--color--ink); }
.gform_wrapper form { margin: 0; }
.gform_wrapper .gform_validation_container,
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield--type-hidden,
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gform_ajax_spinner,
.gform_wrapper .gform-loader,
iframe[id^="gform_ajax_frame_"] { display: none !important; }
.gform_wrapper .gform_heading,
.gform_wrapper .gform_required_legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1rem, 2.4vw, 2.25rem);
	row-gap: clamp(1rem, 1.8vw, 1.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.gform_wrapper .gfield { grid-column: 1 / -1; position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
@media (min-width: 640px) {
	.gform_wrapper .gfield--width-half { grid-column: span 6; }
	.gform_wrapper .gfield--width-third { grid-column: span 4; }
	.gform_wrapper .gfield--width-quarter { grid-column: span 3; }
}

.gform_wrapper .gfield_label {
	display: block;
	margin: 0 0 0.25rem;
	padding: 0;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	line-height: 1.3;
}
.gform_wrapper .gfield_required { margin-left: 0.05em; color: inherit; }
.gform_wrapper .hidden_label > .gfield_label,
.gform_wrapper .hidden_label > legend.gfield_label {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.gform_wrapper .ginput_container { position: relative; }
.gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select, textarea) {
	box-sizing: border-box; /* same box for every field, including the county type-ahead */
	display: block;
	width: 100%;
	min-height: 2.25rem;
	margin: 0;
	padding: 0.2rem 0 0.3rem;
	font: inherit;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--ink);
	background-color: transparent;
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--tp-base) var(--tp-ease);
}
.gform_wrapper select {
	padding-right: 1.75rem;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23131D33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.15rem center;
	background-size: 1rem;
}
.gform_wrapper :is(input, select, textarea):focus { outline: none; }
.gform_wrapper :is(input, select, textarea):focus-visible { outline: none; }
/* Underline grows from the left in the accent color on focus (the visible focus indicator). */
.gform_wrapper .gfield:not(.gfield--type-checkbox):not(.gfield--type-radio) .ginput_container::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--tp-base) var(--tp-ease);
	pointer-events: none;
}
.gform_wrapper .gfield:focus-within .ginput_container::after { transform: scaleX(1); }

/* Floating labels (motion.js adds .campaign-float, .is-active and .is-filled). The
 * label sits on the line like the XD file and lifts above it once you type. */
.campaign-float .gfield:not(.gfield--type-checkbox):not(.gfield--type-radio):not(.gfield--type-consent) > .gfield_label {
	position: absolute;
	left: 0;
	top: 1.7rem;
	z-index: 1;
	margin: 0;
	transform-origin: left top;
	pointer-events: none;
	transition: transform var(--tp-base) var(--tp-ease), color var(--tp-base) var(--tp-ease);
}
.campaign-float .gfield:not(.gfield--type-checkbox):not(.gfield--type-radio) > .ginput_container { padding-top: 1.5rem; }
.campaign-float .gfield.is-active > .gfield_label,
.campaign-float .gfield.is-filled > .gfield_label { transform: translateY(-1.55rem) scale(0.76); }
.campaign-float .gfield.is-active > .gfield_label { color: var(--wp--preset--color--accent-deep); }
.campaign-float .gfield--type-select:not(.is-filled):not(.is-active) select { color: transparent; }
.campaign-float .gfield--type-select select option { color: var(--wp--preset--color--ink); }
.campaign-float .gfield--type-phone:not(.is-active):not(.is-filled) input::placeholder { color: transparent; }

/* Checkboxes (opt-ins). */
.gform_wrapper .gfield--type-checkbox:first-of-type,
.gform_wrapper .gfield--type-checkbox { margin-top: 0.35rem; }
.gform_wrapper .gfield_checkbox { margin: 0; padding: 0; list-style: none; }
.gform_wrapper .gchoice { display: flex; align-items: flex-start; gap: 0.85rem; }
.gform_wrapper .gchoice input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	display: grid;
	place-content: center;
	width: 1.75rem;
	height: 1.75rem;
	margin: 0;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	cursor: pointer;
	transition: background-color var(--tp-fast) var(--tp-ease), border-color var(--tp-fast) var(--tp-ease), transform var(--tp-fast) var(--tp-spring);
}
.gform_wrapper .gchoice input[type="checkbox"]::before {
	content: "";
	width: 0.95rem;
	height: 0.95rem;
	background: var(--wp--preset--color--primary-contrast);
	clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 37% 70%);
	transform: scale(0);
	transition: transform var(--tp-base) var(--tp-spring);
}
.gform_wrapper .gchoice input[type="checkbox"]:hover { border-color: var(--wp--preset--color--primary); }
.gform_wrapper .gchoice input[type="checkbox"]:active { transform: scale(0.9); }
.gform_wrapper .gchoice input[type="checkbox"]:checked { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); }
.gform_wrapper .gchoice input[type="checkbox"]:checked::before { transform: scale(1); }
.gform_wrapper .gchoice input[type="checkbox"]:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.gform_wrapper .gchoice label {
	padding-top: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.gform_wrapper .gchoice label a { color: inherit; }

/* Submit. */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	display: flex;
	justify-content: center;
	margin: clamp(1.75rem, 3vw, 2.6rem) 0 0;
	padding: 0;
}
.gform_wrapper .gform_button,
.gform_wrapper .gform_footer :is(button, input[type="submit"]) {
	position: relative;
	min-width: min(18rem, 100%);
	padding: 1.05em 2.4em;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.0625rem, 0.85rem + 0.6vw, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform var(--tp-fast) var(--tp-spring), background-color var(--tp-base) var(--tp-ease), box-shadow var(--tp-base) var(--tp-ease), color var(--tp-fast);
}
.gform_wrapper .gform_button:hover { background: var(--wp--preset--color--primary-deep); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgb(0 39 103 / 0.7); }
.gform_wrapper .gform_button:active { transform: scale(0.97); }
.gform_wrapper .gform_button:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.gform_wrapper .gform_button.is-loading { color: transparent; pointer-events: none; }
.gform_wrapper .gform_button.is-loading::after,
.campaign-btn-spinner {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.4rem;
	height: 1.4rem;
	margin: -0.7rem 0 0 -0.7rem;
	border: 3px solid rgb(255 255 255 / 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: tp-spin 0.7s linear infinite;
}
@keyframes tp-spin { to { transform: rotate(360deg); } }

/* Errors. */
.gform_wrapper .gform_validation_errors {
	margin: 0 0 1.5rem;
	padding: 0.85rem 1rem;
	border-left: 4px solid var(--tp-error);
	border-radius: 4px;
	background: #FDECEA;
	animation: tp-rise 0.4s var(--tp-ease) both;
}
.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .gform_submission_error {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: none;
	color: var(--tp-error);
}
.gform_wrapper .gform_validation_errors ol { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.875rem; }
.gform_wrapper .gform_validation_errors a { color: var(--tp-error); }
.gform_wrapper .gfield_error :is(input, select, textarea) { border-bottom-color: var(--tp-error); }
.gform_wrapper .gfield_error > .gfield_label { color: var(--tp-error); }
.gform_wrapper .gfield_validation_message {
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--tp-error);
}
.gform_wrapper .gfield_error .ginput_container { animation: tp-shake 0.42s var(--tp-ease) both; }
@keyframes tp-shake {
	15%, 55% { transform: translateX(-6px); }
	35%, 75% { transform: translateX(5px); }
	100% { transform: none; }
}
.gform_wrapper .gfield_description:not(.gfield_validation_message) { margin-top: 0.35rem; font-size: 0.8125rem; color: var(--wp--preset--color--muted); }

/* Thank-you message (the form's confirmation). */
.gform_confirmation_message { text-align: center; }
.campaign-gf-success { position: relative; padding: clamp(0.5rem, 2vw, 1.5rem) 0; }
.campaign-gf-success__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.75rem, 1rem + 2vw, 3rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.campaign-gf-success__lead { margin: 0.75rem 0 1.25rem; font-size: 1.0625rem; }
.campaign-gf-success__share { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.campaign-gf-success__share a {
	display: inline-block;
	padding: 0.7em 1.3em;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: transform var(--tp-fast) var(--tp-spring), background-color var(--tp-base), color var(--tp-base);
}
.campaign-gf-success__share a:hover { transform: translateY(-2px); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-contrast); }

/* Built-in form (fallback when Gravity Forms is off): match the underline look. */
.campaign-pledge .campaign-signup :is(input[type="text"], input[type="email"], input[type="tel"], select) {
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	border-radius: 0;
	background: transparent;
}
.campaign-pledge .campaign-signup label { color: var(--wp--preset--color--primary); }
.campaign-pledge .campaign-signup button[type="submit"] {
	display: block;
	margin-inline: auto;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
}

/* ---------- Bands, donate, footer ---------- */
.campaign-event-band { padding: clamp(3rem, 6vw, 5.5rem) var(--wp--preset--spacing--20) !important; margin-top: 0 !important; }
.campaign-event-band h2 { margin: 0.4rem 0 0.6rem; font-size: clamp(1.875rem, 1rem + 2vw, 3rem); }
.campaign-event-band p:not(.campaign-eyebrow) { margin: 0; font-size: 1.125rem; }
.campaign-event-band__inner { gap: var(--wp--preset--spacing--30); }
.campaign-event-band__text { max-width: 40rem; }

.campaign-donate-section { padding: clamp(3.5rem, 7vw, 6.5rem) var(--wp--preset--spacing--20) !important; margin-top: 0 !important; }
.campaign-donate-section h2 { margin-bottom: 0.5rem; }
.campaign-fineprint { max-width: 34rem; margin-inline: auto; }

.site-footer { font-size: var(--wp--preset--font-size--small); margin-top: 0 !important; }
.site-footer a { color: inherit; }
.site-footer .campaign-logo { color: var(--wp--preset--color--primary-contrast); }
.site-footer .campaign-logo :is(svg, img) { height: 4rem; }
.site-footer__mission { font-style: italic; font-weight: 600; font-size: var(--wp--preset--font-size--large); }
.site-footer__rule { border-color: rgb(255 255 255 / 0.22); opacity: 1; }
.site-footer .campaign-social { margin-top: var(--wp--preset--spacing--20); }

/* ---------- Launch video dialog ---------- */
.tp-video {
	width: min(64rem, 92vw);
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: #000;
	overflow: visible;
}
.tp-video::backdrop { background: rgb(22 24 29 / 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tp-video[open] { animation: tp-pop 0.42s var(--tp-spring) both; }
.tp-video[open]::backdrop { animation: tp-fade 0.3s ease both; }
.tp-video__frame { aspect-ratio: 16 / 9; width: 100%; border-radius: 10px; overflow: hidden; }
.tp-video__frame iframe, .tp-video__frame video { display: block; width: 100%; height: 100%; border: 0; }
.tp-video__soon {
	display: grid;
	place-content: center;
	gap: 0.5rem;
	height: 100%;
	padding: 2rem;
	text-align: center;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}
.tp-video__soon strong { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem); text-transform: uppercase; line-height: 1; }
.tp-video__close {
	position: absolute;
	top: -0.9rem;
	right: -0.9rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 16px rgb(0 0 0 / 0.3);
	transition: transform var(--tp-fast) var(--tp-spring);
}
.tp-video__close:hover { transform: rotate(90deg) scale(1.06); }
@media (max-width: 600px) { .tp-video__close { top: -3.25rem; right: 0; } }

/* ---------- Motion ----------
 * Only with JS (html.js, set in <head>) and only when the visitor hasn't asked
 * for reduced motion. Without either, everything simply shows. */
@keyframes tp-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes tp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tp-pop { from { opacity: 0; transform: translateY(12px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes tp-drop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes tp-wipe-c { from { clip-path: var(--tp-star-c0); } to { clip-path: var(--tp-star-c); } }
@keyframes tp-wipe-p { from { clip-path: var(--tp-star-c0); } to { clip-path: var(--tp-star-p); } }
@keyframes tp-settle { from { scale: 1.16; } to { scale: 1.04; } }
@keyframes tp-flicker {
	0%, 100% { transform: scale(1, 1); }
	30% { transform: scale(0.94, 1.05) skewX(-3deg); }
	60% { transform: scale(1.04, 0.97) skewX(2deg); }
}

@media (prefers-reduced-motion: no-preference) {
	/* Page load: logo, headline, copy, buttons cascade in; the photo wipes in
	 * behind its coral edge and settles. */
	.js body:has(.campaign-hero) .site-header:not(.is-stuck) .campaign-logo { animation: tp-drop 0.8s var(--tp-ease) both; }
	.js .campaign-logo .logo-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: tp-flicker 2.8s ease-in-out 1.2s infinite; }
	.js .campaign-hero__title { animation: tp-rise 0.9s var(--tp-ease) 0.08s both; }
	.js .campaign-hero__sub { animation: tp-rise 0.9s var(--tp-ease) 0.22s both; }
	.js .campaign-hero__actions { animation: tp-rise 0.9s var(--tp-ease) 0.36s both; }
	.js .campaign-hero--star .campaign-hero__photo::before { animation: tp-wipe-c 1.05s var(--tp-ease) 0.1s both; }
	.js .campaign-hero--star .campaign-hero__photo img { animation: tp-wipe-p 1.05s var(--tp-ease) 0.24s both, tp-settle 2.2s var(--tp-ease) 0.24s both; }

	/* Scroll reveals: motion.js tags elements with data-reveal and adds
	 * .is-visible when they enter the viewport. --d staggers siblings. */
	.js [data-reveal] {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.8s var(--tp-ease), transform 0.8s var(--tp-ease);
		transition-delay: var(--d, 0ms);
	}
	.js [data-reveal="scale"] { transform: translateY(20px) scale(0.97); }
	.js [data-reveal].is-visible { opacity: 1; transform: none; }
	.js.tp-failsafe [data-reveal] { opacity: 1; transform: none; }

	.gform_confirmation_message { animation: tp-pop 0.6s var(--tp-spring) both; }
	.campaign-gf-success__share li { animation: tp-rise 0.6s var(--tp-ease) both; }
	.campaign-gf-success__share li:nth-child(2) { animation-delay: 0.08s; }
	.campaign-gf-success__share li:nth-child(3) { animation-delay: 0.16s; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	.campaign-hero--star .campaign-hero__photo img { translate: none; }
}

/* Autofilled fields lift their label too. */
.campaign-float .gfield:has(input:autofill) > .gfield_label { transform: translateY(-1.55rem) scale(0.76); }

/* Section titles use the condensed cut of the display font (TAKE THE FAMILY PLEDGE). */
:where(h2), .campaign-gf-success__title, .tp-video__soon strong { font-stretch: 72%; }

/* ---------- County type-ahead inside the pledge form ---------- */
.gform_wrapper .campaign-combo { position: relative; }
.gform_wrapper .campaign-combo__input { border: 0; border-bottom: 2px solid var(--wp--preset--color--primary); border-radius: 0; }
.campaign-float .gfield:not(.is-active) .campaign-combo__input::placeholder { color: transparent; }
.gform_wrapper .campaign-combo__input::placeholder { color: var(--wp--preset--color--muted); opacity: 1; transition: color var(--tp-base); }
.gform_wrapper .campaign-combo__list {
	position: absolute;
	z-index: 30;
	inset: calc(100% + 6px) 0 auto 0;
	max-height: 17rem;
	overflow-y: auto;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	background: var(--wp--preset--color--surface);
	border: 0;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgb(0 39 103 / 0.12), 0 18px 36px -12px rgb(0 39 103 / 0.38);
	transform-origin: top center;
	animation: tp-pop 0.22s var(--tp-ease) both;
}
.gform_wrapper .campaign-combo__list li {
	padding: 0.6rem 0.8rem;
	border-radius: 5px;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background-color var(--tp-fast), color var(--tp-fast);
}
.gform_wrapper .campaign-combo__list li[aria-selected="true"],
.gform_wrapper .campaign-combo__list li[role="option"]:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.gform_wrapper .campaign-combo__list .campaign-combo__none { cursor: default; color: var(--wp--preset--color--muted); }

/* Shown to logged-in admins only, when the built-in backup form is in use. */
.campaign-admin-note {
	margin: 0 auto 1rem;
	padding: 0.6rem 0.9rem;
	border-left: 4px solid var(--wp--preset--color--accent);
	background: #FAF5EA;
	font-size: 0.875rem;
}

/* The type-ahead hides the real county <select>; keep it hidden despite the field styles above. */
.gform_wrapper select[hidden], .gform_wrapper select[aria-hidden="true"][data-combo] { display: none !important; }

/* No footer on any page, just a 30px champagne edge at the bottom. */
.wp-site-blocks { border-bottom: 30px solid var(--wp--preset--color--secondary); }
.wp-site-blocks > :last-child { margin-bottom: 0; }

/* Gravity Forms' "0 of 5 max characters" counter isn't in the design. */
.gform_wrapper .ginput_counter, .gform_wrapper .charleft { display: none !important; }
.gform_wrapper .gform_fields { align-items: start; }
.gform_wrapper .campaign-combo__input { min-height: 2.25rem; padding: 0.2rem 0 0.3rem; }

/* ---------- Privacy Policy and other plain pages ---------- */
body:not(:has(.campaign-hero)) main .wp-block-post-title { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); margin-bottom: 0.5em; }
body:not(:has(.campaign-hero)) .wp-block-post-content h2 {
	margin: 2.2em 0 0.5em;
	font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
}
body:not(:has(.campaign-hero)) .wp-block-post-content p { line-height: 1.7; }
.campaign-policy__date { color: var(--wp--preset--color--muted); }

/* =====================================================================
 * Home: XD "Full Porch Light - v1" (Nov 10, 2026)
 * One rounded hero over a night porch photo: headline + subhead + video
 * link on the left, the navy pledge card on the right. Measured from the
 * 1920px artboard (frame inset 15px, radius ~22px, card 705px wide).
 * ===================================================================== */
/* --u is 1vw on wide screens and shrinks with the screen height on short ones,
 * so the whole hero (copy + card) fits in one screen on most laptops and desktops. */
:root { --u: min(1vw, 1.72vh); }
body:has(.campaign-hero--porch) { background: var(--wp--preset--color--canvas); }
body:has(.campaign-hero--porch) .wp-site-blocks { border-bottom: 0; } /* the design has no mint edge */

.campaign-hero--porch {
	--porch-gap: clamp(0.5rem, calc(0.8 * var(--u)), 1rem);
	--porch-pad: clamp(1.25rem, calc(2.9 * var(--u)), 3.5rem);
	--gold: var(--wp--preset--color--gold);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 48fr) minmax(1.5rem, 12fr) minmax(0, 40fr);
	align-items: center;
	min-height: calc(100svh - 2 * var(--porch-gap));
	/* Same cream gap on all four sides. The inline margins are measured from the
	 * viewport, so WordPress's side padding on the page content can't widen them. */
	margin: var(--porch-gap) calc(50% - 50vw + var(--porch-gap)) !important;
	max-width: none !important;
	width: auto !important;
	padding: clamp(1rem, calc(2.4 * var(--u)), 3rem) var(--porch-pad) !important;
	border-radius: clamp(14px, calc(1.2 * var(--u)), 22px);
	color: var(--wp--preset--color--primary-contrast);
}
.admin-bar .campaign-hero--porch { min-height: calc(100svh - 2 * var(--porch-gap) - 32px); }

/* Photo fills the frame; navy fades in from the left so the copy reads. */
.campaign-hero--porch .campaign-hero__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0 !important;
}
.campaign-hero--porch .campaign-hero__photo img {
	position: absolute;
	inset: 0 0 0 auto;
	width: 112%; /* nudges the lantern left, out from behind the card, like the XD crop */
	height: 100%;
	object-fit: cover;
	object-position: 60% 40%;
	translate: 0 var(--tp-parallax, 0px);
	scale: 1.04;
}
.campaign-hero--porch::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgb(0 39 103 / 0.94) 0%, rgb(0 39 103 / 0.8) 28%, rgb(0 39 103 / 0.3) 48%, rgb(0 39 103 / 0) 60%),
		linear-gradient(0deg, rgb(0 39 103 / 0.45) 0%, rgb(0 39 103 / 0) 30%);
	pointer-events: none;
}
/* Warm glow from the lantern that breathes slowly. */
.campaign-hero--porch::after {
	content: "";
	position: absolute;
	left: 61%;
	top: 26%;
	z-index: -1;
	width: calc(34 * var(--u));
	height: calc(34 * var(--u));
	margin: -calc(17 * var(--u)) 0 0 -calc(17 * var(--u));
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(255 190 110 / 0.28), rgb(255 170 80 / 0.1) 55%, transparent);
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Header: white logo inside the frame. */
body:has(.campaign-hero--porch) .site-header {
	padding: calc(var(--porch-gap, 1rem) + clamp(1.25rem, calc(2.5 * var(--u)), 3rem)) calc(clamp(0.5rem, calc(0.8 * var(--u)), 1rem) + clamp(1.25rem, calc(2.9 * var(--u)), 3.5rem)) 0;
}
body:has(.campaign-hero--porch) .campaign-logo { color: var(--wp--preset--color--primary-contrast); }
body:has(.campaign-hero--porch) .site-header .campaign-logo :is(svg, img) { height: clamp(4rem, calc(5.7 * var(--u)), 6.9rem); }

/* Left column. */
.campaign-hero--porch > .campaign-hero__content {
	grid-column: 1;
	position: relative;
	margin: 0 !important;
	padding: clamp(5rem, calc(8.5 * var(--u)), 10rem) 0 0; /* room for the logo above */
	max-width: 54rem !important;
}
.campaign-hero--porch .campaign-hero__title {
	font-size: clamp(2.125rem, 0.45rem + calc(2.85 * var(--u)), 3.75rem);
	font-weight: 800;
	line-height: 1.3;
	text-wrap: wrap;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary-contrast);
}
.campaign-hero--porch .campaign-hero__title mark { background: none; color: var(--gold); }
.campaign-hero--porch .campaign-hero__sub {
	margin-top: clamp(1.5rem, calc(3.4 * var(--u)), 4rem);
	max-width: 30em;
	font-size: clamp(1.0625rem, 0.55rem + calc(1.15 * var(--u)), 2rem);
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--primary-contrast);
}
.campaign-hero--porch .campaign-hero__actions { margin-top: clamp(2rem, calc(5.2 * var(--u)), 6rem) !important; }

/* "Watch our launch video": gold ring with a play arrow, white text, gold swoosh under the words. */
.campaign-hero--porch .is-style-video .wp-block-button__link {
	--ring: clamp(3.25rem, calc(4 * var(--u)), 4.9rem);
	gap: clamp(1.25rem, calc(1.8 * var(--u)), 2.1rem);
	padding: 0 0 0.35em;
	color: var(--wp--preset--color--primary-contrast);
	font-weight: 600;
	font-size: clamp(1.125rem, 0.6rem + calc(1.1 * var(--u)), 1.95rem);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5 C 90 3.5 250 2.5 358 6' fill='none' stroke='%23D8BF7C' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: calc(100% - var(--ring) - clamp(1.25rem, calc(1.8 * var(--u)), 2.1rem) + 0.2em) 0.42em;
	transition: background-size var(--tp-base) var(--tp-ease), color var(--tp-base);
}
.campaign-hero--porch .is-style-video .wp-block-button__link::before {
	width: var(--ring);
	height: var(--ring);
	margin-top: -0.35em;
	border: 2px solid var(--gold);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M16 12.5 28 20 16 27.5Z' fill='%23D8BF7C'/%3E%3C/svg%3E") 54% 50% / 60% no-repeat;
	-webkit-mask: none;
	mask: none;
	box-sizing: border-box;
	transition: transform var(--tp-base) var(--tp-spring), background-color var(--tp-base) var(--tp-ease);
}
.campaign-hero--porch .is-style-video .wp-block-button__link::after {
	width: var(--ring);
	height: var(--ring);
	margin-top: calc(var(--ring) / -2 - 0.175em);
	color: var(--gold);
}
.campaign-hero--porch .is-style-video .wp-block-button__link:hover { color: var(--wp--preset--color--primary-contrast); }
.campaign-hero--porch .is-style-video .wp-block-button__link:hover::before { transform: none; background-color: rgb(179 149 81 / 0.14); }
.campaign-hero--porch .is-style-video .wp-block-button__link::after { content: none; } /* no ripple */
.campaign-hero--porch .is-style-video .wp-block-button__link:focus-visible { outline-color: var(--gold); }

/* Right column: the navy pledge card. */
.campaign-hero--porch > .campaign-card--porch {
	grid-column: 3;
	margin: 0 !important;
	padding: clamp(1.75rem, calc(2.5 * var(--u)), 3rem) clamp(1.25rem, calc(2.5 * var(--u)), 3rem) clamp(2rem, calc(2.5 * var(--u)), 3rem);
	border: 0;
	border-radius: var(--gb-radius, 20px);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--primary-contrast);
	box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.65);
	scroll-margin-top: 1.5rem;
	--campaign-focus: var(--gold);
}
.campaign-card--porch .campaign-pledge__title {
	margin: 0 0 clamp(0.75rem, calc(1.2 * var(--u)), 1.25rem) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 0.9rem + calc(1.5 * var(--u)), 3.1rem) !important;
	font-weight: 800;
	font-stretch: normal;
	text-transform: none;
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-align: left;
	color: var(--wp--preset--color--primary-contrast);
}
.campaign-card--porch .campaign-pledge__quote {
	max-width: none;
	margin: 0 0 clamp(0.75rem, calc(1.4 * var(--u)), 1.5rem) !important;
	font-size: clamp(1.0625rem, 0.6rem + calc(0.95 * var(--u)), 1.75rem);
	font-weight: 500;
	line-height: 1.47;
	text-align: left;
	text-wrap: pretty;
	color: var(--wp--preset--color--primary-contrast);
}

/* Form on navy: white labels and lines, gold focus, gold button. */
.campaign-card--porch .gform_wrapper { color: var(--wp--preset--color--primary-contrast); }
.campaign-card--porch .gform_wrapper .gform_fields { row-gap: clamp(0.6rem, calc(1 * var(--u)), 1rem); column-gap: clamp(1rem, calc(2 * var(--u)), 2.4rem); }
.campaign-card--porch .gform_wrapper .gfield_label { color: var(--wp--preset--color--primary-contrast); font-size: clamp(1rem, 0.85rem + calc(0.25 * var(--u)), 1.1875rem); }
.campaign-card--porch .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea),
.campaign-card--porch .gform_wrapper .campaign-combo__input {
	color: var(--wp--preset--color--primary-contrast);
	border-bottom-color: rgb(255 255 255 / 0.92);
	caret-color: var(--gold);
}
.campaign-card--porch .gform_wrapper .gfield:not(.gfield--type-checkbox):not(.gfield--type-radio) .ginput_container::after { background: var(--gold); }
.campaign-card--porch.campaign-card--porch .campaign-float .gfield.is-active > .gfield_label { color: var(--gold); }
.campaign-card--porch .gform_wrapper :is(input, textarea)::placeholder { color: rgb(255 255 255 / 0.55); }
.campaign-card--porch .gform_wrapper .campaign-combo__input::placeholder { color: rgb(255 255 255 / 0.55); }
.campaign-card--porch.campaign-card--porch .campaign-float .gfield:not(.is-active) .campaign-combo__input::placeholder { color: transparent; }
.campaign-card--porch .gform_wrapper select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.campaign-card--porch .gform_wrapper select option { color: var(--wp--preset--color--ink); }
/* Chrome autofill paints fields pale yellow; keep them navy. */
.campaign-card--porch .gform_wrapper input:autofill,
.campaign-card--porch .gform_wrapper input:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	box-shadow: 0 0 0 100px var(--wp--preset--color--navy) inset;
	transition: background-color 9999s;
}

.campaign-card--porch .gform_wrapper .gfield--type-checkbox { margin-top: 0.15rem; }
.campaign-card--porch .gform_wrapper .gchoice { gap: 0.7rem; }
.campaign-card--porch .gform_wrapper .gchoice input[type="checkbox"] {
	width: 1.5rem;
	height: 1.5rem;
	border: 0;
	border-radius: 3px;
	background: #fff;
}
.campaign-card--porch .gform_wrapper .gchoice input[type="checkbox"]::before { background: var(--wp--preset--color--navy); }
.campaign-card--porch .gform_wrapper .gchoice input[type="checkbox"]:hover { box-shadow: 0 0 0 3px rgb(179 149 81 / 0.45); }
.campaign-card--porch .gform_wrapper .gchoice input[type="checkbox"]:checked { background: var(--gold); }
.campaign-card--porch .gform_wrapper .gchoice input[type="checkbox"]:focus-visible { outline-color: var(--gold); }
.campaign-card--porch .gform_wrapper .gchoice label {
	padding-top: 0;
	font-size: clamp(0.8125rem, 0.72rem + calc(0.22 * var(--u)), 1rem);
	line-height: 1.15;
	color: rgb(255 255 255 / 0.94);
}
.campaign-card--porch .gform_wrapper .gchoice label a { text-decoration-color: rgb(255 255 255 / 0.5); text-underline-offset: 2px; }
.campaign-card--porch .gform_wrapper .gchoice label a:hover { color: var(--gold); }

.campaign-card--porch .gform_wrapper .gform_footer { justify-content: flex-start; margin-top: clamp(1.25rem, calc(2 * var(--u)), 2.25rem); }
.campaign-card--porch .gform_wrapper .gform_footer .gform_button {
	--bx: 30%;
	--by: 0%;
	--bshine: 0;
	min-width: 0;
	padding: 0.78em 1.35em;
	border-radius: 6px;
	/* Polished gold with a soft reflection that follows the cursor (gold-border.js
	 * sets --bx/--by); it fades in on hover. No lift, no drop shadow. */
	background:
		radial-gradient(9rem circle at var(--bx) var(--by), rgb(246 236 213 / calc(var(--bshine) * 0.75)) 0%, rgb(246 236 213 / 0) 70%),
		linear-gradient(180deg, var(--wp--preset--color--gold-light, #D5C090) 0%, var(--wp--preset--color--gold, #B39551) 55%, var(--wp--preset--color--gold-deep, #AE8E47) 100%);
	color: var(--wp--preset--color--navy);
	font-size: clamp(1.0625rem, 0.75rem + calc(0.6 * var(--u)), 1.5rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), inset 0 -1px 0 rgb(87 72 38 / 0.35);
	transform: none;
	transition: --bshine 0.45s var(--tp-ease), transform 0.12s var(--tp-ease);
}
.campaign-card--porch .gform_wrapper .gform_footer .gform_button:hover,
.campaign-card--porch .gform_wrapper .gform_footer .gform_button:focus-visible {
	--bshine: 1;
	transform: none;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -1px 0 rgb(87 72 38 / 0.35);
}
.campaign-card--porch .gform_wrapper .gform_footer .gform_button:active { transform: scale(0.985); }
@property --bshine { syntax: "<number>"; inherits: false; initial-value: 0; }
.campaign-card--porch .gform_wrapper .gform_button:focus-visible { outline-color: var(--gold); }
.campaign-card--porch .gform_wrapper .gform_button.is-loading::after { border-color: rgb(0 39 103 / 0.3); border-top-color: var(--wp--preset--color--navy); }

/* Errors stay readable on navy. */
.campaign-card--porch .gform_wrapper .gform_validation_errors { background: rgb(255 255 255 / 0.08); border-left-color: #FF8A7A; }
.campaign-card--porch .gform_wrapper :is(.gform_validation_errors h2, .gform_submission_error, .gform_validation_errors a, .gfield_validation_message, .gfield_error > .gfield_label) { color: #FFB1A6; }
.campaign-card--porch .gform_wrapper .gfield_error :is(input, select, textarea, .campaign-combo__input) { border-bottom-color: #FF8A7A; }
.campaign-card--porch .gform_wrapper .gfield_description:not(.gfield_validation_message) { color: rgb(255 255 255 / 0.7); }

/* Thank-you message on navy. */
.campaign-card--porch .gform_confirmation_message { color: #fff; }
.campaign-card--porch .campaign-gf-success__title { color: var(--gold); }
.campaign-card--porch .campaign-gf-success__share a { background: var(--gold); color: var(--wp--preset--color--navy); }
.campaign-card--porch .campaign-gf-success__share a:hover { background: #fff; color: var(--wp--preset--color--navy); }
.campaign-card--porch .campaign-admin-note { color: var(--wp--preset--color--ink); }
/* Built-in backup form on navy. */
.campaign-card--porch .campaign-signup label { color: #fff; }
.campaign-card--porch .campaign-signup :is(input[type="text"], input[type="email"], input[type="tel"], select) { color: #fff; border-bottom-color: #fff; }
.campaign-card--porch .campaign-signup button[type="submit"] { margin-inline: 0; background: var(--gold); color: var(--wp--preset--color--navy); }

/* Short laptop screens (768–860px tall): tighten the card so it fits without scrolling. */
@media (min-width: 1024px) and (max-height: 860px) {
	.campaign-hero--porch { grid-template-columns: minmax(0, 47fr) minmax(1.5rem, 7fr) minmax(0, 46fr); }
	.campaign-card--porch .campaign-pledge__title { font-size: clamp(1.5rem, 0.6rem + 1.5vw, 2.25rem) !important; margin-bottom: 0.5rem !important; }
	.campaign-card--porch .campaign-pledge__quote { font-size: clamp(0.95rem, 0.6rem + 0.6vw, 1.25rem); line-height: 1.4; margin-bottom: 0.5rem !important; }
	.campaign-card--porch .gform_wrapper .gform_fields { row-gap: 0.35rem; }
	.campaign-card--porch .campaign-float .gfield:not(.gfield--type-checkbox):not(.gfield--type-radio) > .ginput_container { padding-top: 1.3rem; }
	.campaign-card--porch .campaign-float .gfield:not(.gfield--type-checkbox):not(.gfield--type-radio):not(.gfield--type-consent) > .gfield_label { top: 1.45rem; }
	.campaign-card--porch .campaign-float .gfield.is-active > .gfield_label,
	.campaign-card--porch .campaign-float .gfield.is-filled > .gfield_label { transform: translateY(-1.35rem) scale(0.76); }
	.campaign-card--porch .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], select),
	.campaign-card--porch .gform_wrapper .campaign-combo__input { min-height: 2rem; }
	.campaign-card--porch .gform_wrapper .gchoice label { font-size: 0.75rem; }
	.campaign-card--porch .gform_wrapper .gchoice input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
	.campaign-card--porch .gform_wrapper .gform_footer { margin-top: 0.9rem; }
	.campaign-card--porch .gform_wrapper .gform_footer .gform_button { padding: 0.65em 1.3em; font-size: 1rem; }
	.campaign-hero--porch .campaign-hero__sub { margin-top: clamp(1rem, 2.4vh, 2rem); }
	.campaign-hero--porch .campaign-hero__actions { margin-top: clamp(1.25rem, 3.5vh, 3rem) !important; }
}

/* Tablet and phone: stack the copy over the card. */
@media (max-width: 1023px) {
	.campaign-hero--porch {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		row-gap: clamp(2.25rem, 7vw, 3.5rem);
		min-height: 0;
		padding-top: clamp(7rem, 22vw, 9.5rem) !important;
		padding-bottom: var(--porch-pad) !important;
	}
	.campaign-hero--porch > .campaign-hero__content,
	.campaign-hero--porch > .campaign-card--porch { grid-column: 1; }
	.campaign-hero--porch > .campaign-hero__content { padding-top: 0; }
	.campaign-hero--porch > .campaign-card--porch { width: 100%; max-width: 40rem; }
	.campaign-hero--porch .campaign-hero__photo img { width: 100%; object-position: 58% 20%; height: min(100%, 60rem); }
	.campaign-hero--porch::before {
		background: linear-gradient(180deg, rgb(0 39 103 / 0.86) 0%, rgb(0 39 103 / 0.72) 30%, rgb(0 39 103 / 0.55) 55%, rgb(0 39 103 / 0.95) 75%, var(--wp--preset--color--navy) 100%);
	}
	.campaign-hero--porch::after { left: 62%; top: 9rem; width: 70vw; height: 70vw; margin: -35vw 0 0 -35vw; }
}
@media (max-width: 639px) {
	.campaign-hero--porch { --porch-pad: 1.25rem; border-radius: 14px; }
	.campaign-hero--porch > .campaign-card--porch { padding: 1.75rem 1.25rem 2rem; }
	body:has(.campaign-hero--porch) .site-header .campaign-logo :is(svg, img) { height: 3.75rem; }
}

/* Motion: photo eases in from a slow zoom, the card rises in after the copy, the glow breathes. */
@keyframes tp-porch-in { from { scale: 1.14; opacity: 0.4; } to { scale: 1.04; opacity: 1; } }
@keyframes tp-glow { 0%, 100% { opacity: 0.75; transform: scale(1); } 45% { opacity: 1; transform: scale(1.06); } 70% { opacity: 0.85; transform: scale(0.98); } }
@keyframes tp-card-in { from { opacity: 0; transform: translateY(36px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.js .campaign-hero--porch .campaign-hero__photo img { animation: tp-porch-in 2.4s var(--tp-ease) both; }
	.js .campaign-hero--porch::after { animation: tp-glow 5.5s ease-in-out 1s infinite; }
	.js .campaign-hero--porch > .campaign-card--porch { animation: tp-card-in 1s var(--tp-ease) 0.45s both; }
	.js .campaign-hero--porch > .campaign-card--porch[data-reveal] { opacity: 1; transform: none; transition: none; }
	.campaign-hero--porch .is-style-video .wp-block-button__link:hover { background-size: calc(100% - var(--ring) - clamp(1.25rem, 1.8vw, 2.1rem) + 0.6em) 0.42em; }
}

/* =====================================================================
 * Metallic gold border (pledge card). Progressive enhancement: CSS draws a
 * static 2px antique-to-champagne gold edge; assets/js/gold-border.js moves a
 * soft reflection (--gb-x / --gb-y) toward the pointer, finger or tilt.
 * Everything is painted on ::before and masked to the border ring, so the shine
 * never crosses the form. Works on any element with .tp-gold-border.
 * ===================================================================== */
@property --gb-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.campaign-card--porch, .tp-gold-border {
	--gb-width: 2px;
	--gb-radius: 20px;
	--gb-dark: #806A37;
	--gb-base: #BFA56B;
	--gb-light: #E6D3A9;
	--gb-bright: #F6ECD5;
	--gb-x: 22%;   /* reflection centre, resting at the upper left */
	--gb-y: 0%;
	--gb-shine: 0.65;
	--gb-size: 14rem;
	position: relative;
	border-radius: var(--gb-radius);
}
.campaign-card--porch::before, .tp-gold-border::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: var(--gb-width);
	border-radius: inherit;
	pointer-events: none;
	background:
		/* moving reflection, faded by --gb-shine */
		radial-gradient(var(--gb-size) circle at var(--gb-x) var(--gb-y),
			rgb(246 236 213 / var(--gb-shine)) 0%,
			rgb(230 211 169 / calc(var(--gb-shine) * 0.55)) 30%,
			transparent 62%),
		/* optional ambient shimmer: one slow, soft band of light */
		conic-gradient(from var(--gb-angle), transparent 0deg 300deg, rgb(246 236 213 / 0.0) 318deg, rgb(246 236 213 / var(--gb-ambient, 0)) 336deg, transparent 354deg),
		/* static metal: even, low-contrast gold so the edge reads the same all round */
		linear-gradient(135deg,
			var(--gb-light) 0%, var(--gb-base) 16%, var(--gb-dark) 34%, var(--gb-base) 50%,
			var(--gb-light) 64%, var(--gb-base) 80%, var(--gb-dark) 100%);
	/* Keep only the ring between the outer edge and the padding box. */
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tp-gold-border--shimmer { --gb-ambient: 0.55; }
@keyframes tp-gb-spin { to { --gb-angle: 360deg; } }
@media (prefers-reduced-motion: no-preference) {
	.tp-gold-border--shimmer::before { animation: tp-gb-spin 7s linear infinite; }
	.tp-gold-border--paused::before { animation-play-state: paused; }
}
/* Optional "tilt to shine" control (only added when gyroscope is on and iOS needs permission). */
.tp-gold-border__motion {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgb(230 211 169 / 0.45);
	border-radius: 50%;
	background: transparent;
	color: #E6D3A9;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
.tp-gold-border__motion:hover { border-color: #E6D3A9; }

/* ---------- Launch video pop-up in the site colors ---------- */
.tp-video { background: var(--wp--preset--color--navy); box-shadow: 0 0 0 2px #BFA56B, 0 40px 80px -30px rgb(0 0 0 / 0.8); }
.tp-video::backdrop { background: rgb(0 39 103 / 0.82); }
.tp-video__soon { background: var(--wp--preset--color--navy); color: #fff; }
.tp-video__soon strong { color: var(--wp--preset--color--gold); font-family: var(--wp--preset--font-family--heading); font-stretch: normal; font-weight: 800; text-transform: none; letter-spacing: -0.01em; }
.tp-video__soon span { color: rgb(255 255 255 / 0.85); }
.tp-video__close { background: linear-gradient(180deg, var(--wp--preset--color--gold-light, #D5C090) 0%, var(--wp--preset--color--gold-deep) 100%); color: var(--wp--preset--color--navy); font-weight: 700; }
.tp-video__close:focus-visible { outline-color: #fff; }

/* =====================================================================
 * County type-ahead on the navy card (Nov 11, 2026): navy list with a gold
 * edge, white names, gold highlight. Replaces the old white/mint list.
 * ===================================================================== */
.campaign-card--porch .gform_wrapper .campaign-combo__list {
	padding: 0.4rem;
	background: #093171;
	border-radius: 10px;
	box-shadow: 0 0 0 1px rgb(179 149 81 / 0.6), 0 24px 44px -16px rgb(0 0 0 / 0.75);
	scrollbar-width: thin;
	scrollbar-color: rgb(179 149 81 / 0.6) transparent;
}
.campaign-card--porch .gform_wrapper .campaign-combo__list li { color: rgb(255 255 255 / 0.92); font-weight: 500; }
.campaign-card--porch .gform_wrapper .campaign-combo__list li[aria-selected="true"],
.campaign-card--porch .gform_wrapper .campaign-combo__list li[role="option"]:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}
.campaign-card--porch .gform_wrapper .campaign-combo__list .campaign-combo__none { color: rgb(255 255 255 / 0.65); }

/* =====================================================================
 * RSVP page (Nov 11, 2026): an event page in the Home "Porch Light" layout.
 * Hero: headline + subhead + date / time / location on the left (gold ring
 * icons, like Home's video link); navy RSVP card on the right (title, italic
 * note, form). Below: "About the evening" on off-white with a gold RSVP button.
 * ===================================================================== */
.campaign-hero--rsvp .campaign-hero__title { font-size: clamp(2.5rem, 0.5rem + calc(3.6 * var(--u)), 4.75rem); line-height: 1.08; }
.campaign-hero--rsvp .campaign-hero__sub { font-size: clamp(1.0625rem, 0.55rem + calc(1 * var(--u)), 1.75rem); }
/* Keep "Launch Party" together on its own line. */
.campaign-hero--rsvp .campaign-hero__title mark { display: inline-block; }
/* Date and time share a line; the location gets its own. */
.campaign-event-details .campaign-rsvp__details { display: flex !important; flex-wrap: wrap; column-gap: clamp(1.5rem, calc(2.5 * var(--u)), 3rem); }
.campaign-event-details .campaign-rsvp__detail--place { flex-basis: 100%; }

/* Date / time / location. Left column: big white text with gold rings. */
.campaign-event-details { margin-top: clamp(1.5rem, calc(2.8 * var(--u)), 3.25rem); }
.campaign-hero--rsvp .campaign-hero__sub { margin-top: clamp(1rem, calc(2 * var(--u)), 2.25rem); }
.campaign-hero__body {
	max-width: 34em;
	margin-top: clamp(0.9rem, calc(1.5 * var(--u)), 1.75rem);
	font-size: clamp(1rem, 0.6rem + calc(0.62 * var(--u)), 1.3rem);
	font-weight: 500;
	line-height: 1.6;
	color: rgb(255 255 255 / 0.86);
}
.campaign-event-details .campaign-rsvp__details {
	display: grid;
	gap: clamp(0.7rem, calc(1.1 * var(--u)), 1.25rem);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: clamp(1.0625rem, 0.6rem + calc(0.8 * var(--u)), 1.5rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--primary-contrast);
}
.campaign-rsvp__details .campaign-rsvp__detail { display: flex; align-items: center; gap: clamp(0.75rem, calc(1 * var(--u)), 1.15rem); }
.campaign-rsvp__detail dd { margin: 0; }
.campaign-rsvp__detail::before {
	content: "";
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--ring, 2.6rem);
	height: var(--ring, 2.6rem);
	border: 2px solid var(--wp--preset--color--gold);
	border-radius: 50%;
	background: var(--icon) center / 50% no-repeat;
}
.campaign-event-details .campaign-rsvp__detail { --ring: clamp(2.4rem, calc(2.9 * var(--u)), 3.5rem); }
@media (max-width: 639px) { .campaign-event-details .campaign-rsvp__detail { --ring: 2.4rem; } .campaign-event-details { margin-top: 1.5rem; } }
/* "(location sent with your confirmation)" style text wraps under the place, not under the ring. */
.campaign-rsvp__detail--place dd { max-width: 22em; }
.campaign-rsvp__detail--date { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8BF7C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.campaign-rsvp__detail--time { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8BF7C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.campaign-rsvp__detail--place { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8BF7C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); }

/* The card matches the pledge card; the note uses the pledge-quote style. */
.campaign-rsvp__card .campaign-rsvp { max-width: none; }
.campaign-rsvp__card .campaign-pledge__quote { font-style: italic; font-size: clamp(1rem, 0.6rem + calc(0.7 * var(--u)), 1.375rem); }
/* The long "Number attending (including you)" label stays on one line when it floats up. */
.campaign-rsvp__card .campaign-float .gfield > .gfield_label { white-space: nowrap; }

/* About the evening. */
.campaign-event-about {
	padding: clamp(3.5rem, 8vw, 7.5rem) var(--wp--preset--spacing--20) clamp(2.5rem, 5vw, 4.5rem) !important;
	margin-top: 0 !important;
	text-align: center;
}
.campaign-event-about .campaign-eyebrow { margin-bottom: 1rem; }
.campaign-event-about__text {
	margin-top: 0 !important;
	font-size: clamp(1.1875rem, 0.85rem + 1.05vw, 1.875rem);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--primary);
	text-wrap: pretty;
}
.campaign-event-about__actions { justify-content: center; margin-top: clamp(1.75rem, 3.5vw, 2.75rem) !important; }
.campaign-rsvp__pledge-link { margin-top: clamp(2rem, 4vw, 3.25rem) !important; text-align: center; }
.campaign-rsvp__pledge-link a { color: var(--wp--preset--color--primary); font-weight: 600; }

/* Gold button, same metal as the card's form button. */
.wp-block-button.is-style-gold .wp-block-button__link {
	padding: 0.78em 2.4em;
	border-radius: 6px;
	background: linear-gradient(180deg, var(--wp--preset--color--gold-light, #D5C090) 0%, var(--wp--preset--color--gold, #B39551) 55%, var(--wp--preset--color--gold-deep, #AE8E47) 100%);
	color: var(--wp--preset--color--navy);
	font-size: clamp(1.0625rem, 0.8rem + 0.5vw, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), inset 0 -1px 0 rgb(87 72 38 / 0.35);
}
.wp-block-button.is-style-gold .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 12px 24px -12px rgb(128 106 55 / 0.7); }
.wp-block-button.is-style-gold .wp-block-button__link:focus-visible { outline-color: var(--wp--preset--color--focus); }

/* Short laptop screens: tighten the left column so it fits beside the card. */
@media (min-width: 1024px) and (max-height: 860px) {
	.campaign-hero--rsvp .campaign-hero__title { font-size: clamp(2.25rem, 0.5rem + 3vw, 3.75rem); }
	.campaign-hero--rsvp .campaign-hero__sub { font-size: clamp(1rem, 0.6rem + 0.7vw, 1.375rem); margin-top: 0.9rem; }
	.campaign-hero--rsvp .campaign-hero__body { font-size: clamp(0.9375rem, 0.7rem + 0.35vw, 1.0625rem); margin-top: 0.75rem; line-height: 1.5; }
	.campaign-hero--rsvp .campaign-event-details { margin-top: 1.25rem; }
	.campaign-event-details .campaign-rsvp__details { font-size: 1.0625rem; row-gap: 0.6rem; }
	.campaign-event-details .campaign-rsvp__detail { --ring: 2.25rem; }
	.campaign-hero--rsvp > .campaign-hero__content { padding-top: 5.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
	.js .campaign-hero__body { animation: tp-rise 0.9s var(--tp-ease) 0.3s both; }
	.js .campaign-hero--rsvp .campaign-event-details { animation: tp-rise 0.9s var(--tp-ease) 0.4s both; }
}

/* =====================================================================
 * XD "Full Porch Light - v4" (approved Nov 11, 2026). Overrides the v1
 * look above: full-bleed photo (no cream frame), gold logo, Playfair
 * Display headlines, a GOLD pledge card with navy type and a navy button.
 * Applies to every porch page (Home and RSVP, Nov 11: Jonathan asked RSVP to match).
 * ===================================================================== */
body:has(.campaign-hero--porch) .campaign-hero--porch {
	--porch-gap: 0px;
	--serif: var(--wp--preset--font-family--serif, "Playfair Display", Georgia, serif);
	border-radius: 0;
}
@media (min-width: 1024px) {
body:has(.campaign-hero--porch) .campaign-hero--porch {
		grid-template-columns: minmax(0, 47fr) minmax(1.5rem, 11fr) minmax(0, 42fr);
		padding-left: clamp(1.25rem, calc(6.25 * var(--u)), 7.5rem) !important;
		padding-right: clamp(1.25rem, calc(6.9 * var(--u)), 8.25rem) !important;
	}
}
body:has(.campaign-hero--porch) .site-header {
	padding: clamp(1.25rem, calc(3.2 * var(--u)), 3.9rem) clamp(1.25rem, calc(6.25 * var(--u)), 7.5rem) 0;
}
body:has(.campaign-hero--porch) .campaign-logo { color: var(--wp--preset--color--gold); }
body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__title {
	font-family: var(--serif);
	font-size: clamp(2.125rem, 0.5rem + calc(3.12 * var(--u)), 4.4rem);
	font-weight: 700;
	line-height: 1.17;
	letter-spacing: -0.005em;
}
body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__title mark { font-style: italic; font-weight: 700; }
body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__sub {
	max-width: 33em;
	margin-top: clamp(1.25rem, calc(3.6 * var(--u)), 4.25rem);
	font-size: clamp(1rem, 0.45rem + calc(1.05 * var(--u)), 1.75rem);
	font-weight: 400;
	line-height: 1.4;
}
body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__sub + .campaign-hero__sub { margin-top: clamp(0.9rem, calc(1.9 * var(--u)), 2.25rem); }
body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__actions { margin-top: clamp(1.75rem, calc(3.4 * var(--u)), 4rem) !important; }
body:has(.campaign-hero--porch) .campaign-hero--porch .is-style-video .wp-block-button__link { font-weight: 700; }

/* Gold card. */
body:has(.campaign-hero--porch) .campaign-hero--porch > .campaign-card--porch {
	padding: clamp(1.75rem, calc(2.2 * var(--u)), 2.75rem) clamp(1.25rem, calc(2.5 * var(--u)), 3rem) clamp(2rem, calc(1.8 * var(--u)), 2.25rem);
	background: linear-gradient(180deg, #CEB680 0%, #C2A870 48%, #B39551 100%);
	color: var(--wp--preset--color--navy);
	box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.7);
	--campaign-focus: var(--wp--preset--color--navy);
	/* Metallic edge in paler golds so it reads against the gold fill. */
	--gb-dark: #BCA164;
	--gb-base: #D6BF8C;
	--gb-light: #EBDAB3;
	--gb-bright: #F9F2E2;
}
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-pledge__title {
	font-size: clamp(1.875rem, 0.8rem + calc(2 * var(--u)), 3.4rem) !important;
	font-family: var(--serif);
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--navy);
}
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-pledge__quote { color: var(--wp--preset--color--navy); }

/* Form on gold: navy labels, lines and text. */
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper,
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield_label { color: var(--wp--preset--color--navy); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea),
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .campaign-combo__input {
	color: var(--wp--preset--color--navy);
	border-bottom-color: var(--wp--preset--color--navy);
	caret-color: var(--wp--preset--color--navy);
}
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield:not(.gfield--type-checkbox):not(.gfield--type-radio) .ginput_container::after { background: var(--wp--preset--color--navy); }
body:has(.campaign-hero--porch) .campaign-card--porch.campaign-card--porch .campaign-float .gfield.is-active > .gfield_label { color: var(--wp--preset--color--navy); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper :is(input, textarea)::placeholder,
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .campaign-combo__input::placeholder { color: rgb(0 39 103 / 0.55); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23111F35' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper input:autofill,
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper input:-webkit-autofill {
	-webkit-text-fill-color: var(--wp--preset--color--navy);
	box-shadow: 0 0 0 100px #C5AD75 inset;
}
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gchoice input[type="checkbox"] { background: #fff; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gchoice input[type="checkbox"]::before { background: var(--wp--preset--color--navy); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gchoice input[type="checkbox"]:checked { background: #fff; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gchoice input[type="checkbox"]:hover { box-shadow: 0 0 0 3px rgb(0 39 103 / 0.18); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gchoice input[type="checkbox"]:focus-visible { outline-color: var(--wp--preset--color--navy); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gchoice label { color: var(--wp--preset--color--navy); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gchoice label a { text-decoration-color: rgb(0 39 103 / 0.45); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gchoice label a:hover { color: var(--wp--preset--color--navy); text-decoration-color: currentColor; }

/* Navy button; same quiet sheen as before, now a soft pale light on navy. */
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_footer .gform_button {
	background:
		radial-gradient(9rem circle at var(--bx) var(--by), rgb(246 236 213 / calc(var(--bshine) * 0.16)) 0%, rgb(246 236 213 / 0) 70%),
		linear-gradient(180deg, #0E377C 0%, var(--wp--preset--color--navy) 100%);
	color: #fff;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
}
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_footer .gform_button:hover,
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_footer .gform_button:focus-visible { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_footer .gform_button:focus-visible { outline-color: var(--wp--preset--color--navy); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_button.is-loading::after { border-color: rgb(255 255 255 / 0.3); border-top-color: #fff; }

/* Errors and thanks on gold. */
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_validation_errors { background: rgb(255 255 255 / 0.35); border-left-color: #8E1B12; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper :is(.gform_validation_errors h2, .gform_submission_error, .gform_validation_errors a, .gfield_validation_message, .gfield_error > .gfield_label) { color: #8E1B12; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield_error :is(input, select, textarea, .campaign-combo__input) { border-bottom-color: #8E1B12; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield_description:not(.gfield_validation_message) { color: rgb(0 39 103 / 0.75); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_confirmation_message { color: var(--wp--preset--color--navy); }
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-gf-success__title { color: var(--wp--preset--color--navy); font-family: var(--serif); text-transform: none; font-stretch: normal; }
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-gf-success__share a { background: var(--wp--preset--color--navy); color: #fff; }
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-gf-success__share a:hover { background: #fff; color: var(--wp--preset--color--navy); }
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-signup label { color: var(--wp--preset--color--navy); }
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-signup :is(input[type="text"], input[type="email"], input[type="tel"], select) { color: var(--wp--preset--color--navy); border-bottom-color: var(--wp--preset--color--navy); }
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-signup button[type="submit"] { background: var(--wp--preset--color--navy); color: #fff; }

/* Video pop-up title in Playfair too. */
.tp-video__soon strong { font-family: var(--wp--preset--font-family--serif, "Playfair Display", Georgia, serif); font-weight: 700; }

@media (max-width: 1023px) {
body:has(.campaign-hero--porch) .campaign-hero--porch { padding-top: clamp(7rem, 22vw, 9.5rem) !important; }
}
@media (max-width: 639px) {
body:has(.campaign-hero--porch) .campaign-hero--porch { border-radius: 0; padding-inline: 1.25rem !important; }
}

/* v4 on short laptop screens: a little tighter so copy + card fit one screen. */
@media (min-width: 1024px) and (max-height: 860px) {
body:has(.campaign-hero--porch) .campaign-hero--porch > .campaign-hero__content { padding-top: clamp(4.5rem, 10vh, 6rem); }
body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__title { font-size: clamp(2rem, 0.4rem + calc(2.9 * var(--u)), 3.5rem); }
body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__sub { font-size: clamp(0.95rem, 0.5rem + calc(0.8 * var(--u)), 1.25rem); margin-top: clamp(0.9rem, 2.2vh, 1.5rem); }
body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__sub + .campaign-hero__sub { margin-top: 0.75rem; }
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-pledge__title { font-size: clamp(1.6rem, 0.6rem + 1.5vw, 2.4rem) !important; }
}
/* Keep the hidden-until-active trick for a plain county dropdown (when the type-ahead isn't running). */
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-float .gfield--type-select:not(.is-filled):not(.is-active) select { color: transparent; }

/* RSVP in the v4 style: Playfair title (bigger, it's short), body copy in the
 * subhead weight, event details on white. */
body:has(.campaign-hero--porch) .campaign-hero--rsvp .campaign-hero__title { font-size: clamp(2.5rem, 0.5rem + calc(3.9 * var(--u)), 5.25rem); line-height: 1.08; }
body:has(.campaign-hero--porch) .campaign-hero--rsvp .campaign-hero__sub { margin-top: clamp(1rem, calc(2.2 * var(--u)), 2.5rem); }
body:has(.campaign-hero--porch) .campaign-hero--rsvp .campaign-hero__body {
	max-width: 33em;
	font-size: clamp(0.95rem, 0.5rem + calc(0.75 * var(--u)), 1.375rem);
	font-weight: 400;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.88);
}
body:has(.campaign-hero--porch) .campaign-rsvp__card .campaign-pledge__quote { font-size: clamp(1rem, 0.6rem + calc(0.75 * var(--u)), 1.5rem); }
@media (min-width: 1024px) and (max-height: 860px) {
	body:has(.campaign-hero--porch) .campaign-hero--rsvp .campaign-hero__title { font-size: clamp(2.25rem, 0.5rem + 3vw, 3.75rem); }
	body:has(.campaign-hero--porch) .campaign-hero--rsvp .campaign-hero__body { font-size: clamp(0.9rem, 0.7rem + 0.3vw, 1.0625rem); }
}
/* "Number attending (including you)" is long: give it a wider column than
 * "Club or organization" and a slightly smaller label so the two don't touch. */
@media (min-width: 640px) {
	body:has(.campaign-hero--porch) .campaign-rsvp__card .gform_wrapper .gfield.campaign-attending { grid-column: span 6; }
	body:has(.campaign-hero--porch) .campaign-rsvp__card .gform_wrapper .gfield.campaign-org { grid-column: span 6; }
	body:has(.campaign-hero--porch) .campaign-rsvp__card .gform_wrapper .gfield.campaign-attending > .gfield_label { font-size: clamp(0.75rem, 0.45rem + 0.38vw, 1.0625rem); }
}

/* =====================================================================
 * Launch video link, Nov 11, 2026 (Jonathan's SVGs; sources in assets/img/src/).
 * Play icon: his ring + rounded triangle replaces the CSS border ring.
 * Underline: his brush swoosh, revealed left to right like a pen stroke
 * (slow pen-down, quick middle, eases off at the tail). It draws after the
 * link rises in, replays on hover, and is simply shown with reduced motion
 * or no JS.
 * ===================================================================== */
.campaign-hero--porch .is-style-video .wp-block-button__link {
	position: relative;
	background-image: none;
	padding-bottom: 0.45em;
}
.campaign-hero--porch .is-style-video .wp-block-button__link::before {
	border: 0;
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 78'%3E%3Cpath fill='%23d8bf7c' d='M39,78C17.5,78,0,60.5,0,39S17.5,0,39,0s39,17.5,39,39-17.5,39-39,39ZM39,3C19.15,3,3,19.15,3,39s16.15,36,36,36,36-16.15,36-36S58.85,3,39,3Z'/%3E%3Cpath fill='%23d8bf7c' d='M49.96,37.26c.96.55,1.29,1.77.74,2.73-.18.31-.43.57-.74.74l-14.97,8.55c-.96.55-2.18.21-2.73-.74-.17-.3-.26-.64-.26-.99v-17.11c0-1.1.9-2,2-2,.35,0,.69.09.99.26l14.97,8.55Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.campaign-hero--porch .is-style-video .wp-block-button__link:hover::before {
	transform: scale(1.06);
	background-color: rgb(179 149 81 / 0.14);
}
.campaign-hero--porch .is-style-video .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: auto;
	bottom: 0;
	left: calc(var(--ring) + clamp(1.25rem, calc(1.8 * var(--u)), 2.1rem) - 0.1em);
	right: 0;
	width: auto;
	height: 0.5em;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	animation: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350.87 17.13' preserveAspectRatio='none'%3E%3Cpath fill='%23d8bf7c' d='M1.5,11.19c-11.47-3.04,47.08-5.35,50.68-5.49,69.77-2.64,169.84-2.87,240.5-.3,9.08.33,58.43,2.75,58.11,5.53-.36,3.13-31.32-.03-38.31-.23-67.6-1.91-139.55-2.81-207.25-1.87-34.69.48-68.83,2.4-103.72,2.36'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
	pointer-events: none;
	will-change: clip-path;
}
/* The pen: one continuous wipe from the left. Only two keyframes and a single
 * easing curve, so the speed never restarts mid-stroke (no stepping). */
@keyframes tp-write {
	from { clip-path: inset(-20% 100% -20% 0); }
	to   { clip-path: inset(-20% 0 -20% 0); }
}
@keyframes tp-write-again {
	from { clip-path: inset(-20% 100% -20% 0); }
	to   { clip-path: inset(-20% 0 -20% 0); }
}
/* motion.js adds .is-written when the first stroke ends, so hover can replay it
 * without the load animation restarting on mouse-out. */
@media (prefers-reduced-motion: no-preference) {
	.js .campaign-hero--porch .is-style-video .wp-block-button__link:not(.is-written)::after {
		animation: tp-write 1.7s cubic-bezier(0.37, 0.1, 0.3, 1) 1.05s both;
	}
	@media (hover: hover) {
		.js .campaign-hero--porch .is-style-video .wp-block-button__link.is-written:hover::after {
			animation: tp-write-again 1s cubic-bezier(0.37, 0.1, 0.3, 1) both;
		}
	}
}

/* Event details are core paragraphs now (Nov 11, 2026), so they are edited right on the RSVP page. */
.campaign-rsvp__details > *, .campaign-rsvp__detail > p { margin: 0 !important; }
.campaign-rsvp__detail--place > p { max-width: 22em; }
.campaign-rsvp__detail > p:empty { display: none; }
.campaign-rsvp__detail:not(:has(p:not(:empty))) { display: none !important; }

/* Gold card background blur, from XD (Nov 11, 2026): blur 2, brightness 0, 93%.
 * XD's 93% is how much of the blurred backdrop is used, so the fill is the same
 * gold at 93% and the 2px-blurred porch photo faintly shows through. Brightness 0
 * means no change. Home and RSVP share this card. */
body:has(.campaign-hero--porch) .campaign-hero--porch > .campaign-card--porch {
	background: linear-gradient(180deg, rgb(206 182 128 / 0.93) 0%, rgb(194 168 112 / 0.93) 48%, rgb(179 149 81 / 0.93) 100%);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* Inner pages (Privacy Policy etc.), Nov 11, 2026: no champagne edge at the bottom,
 * and the header bar is the page background color with the logo centered. */
body:not(:has(.campaign-hero)) .wp-site-blocks { border-bottom: 0; padding-top: 0; }
body:not(:has(.campaign-hero)) .site-header {
	margin: 0;
	background: var(--wp--preset--color--paper);
	box-shadow: none;
	border: 0;
}
body:not(:has(.campaign-hero)) .site-header__inner { display: flex; justify-content: center !important; }

/* RSVP row: the attending number reads like the other fields (same size and
 * ink as typed text) and sits on the same baseline as "Club or organization". */
body:has(.campaign-hero--porch) .campaign-rsvp__card .gform_wrapper .gfield.campaign-attending select {
	font-size: inherit; color: var(--wp--preset--color--navy); opacity: 1;
}
@media (min-width: 640px) {
	body:has(.campaign-hero--porch) .campaign-rsvp__card .gform_wrapper .gfield.campaign-attending,
	body:has(.campaign-hero--porch) .campaign-rsvp__card .gform_wrapper .gfield.campaign-org { align-self: end; }
}

/* "Watch our launch video": the words fade to light gold on hover / keyboard focus (Nov 11, 2026). */
.campaign-hero--porch .is-style-video .wp-block-button__link {
	transition: color 0.45s var(--tp-ease), text-decoration-color 0.45s var(--tp-ease), transform var(--tp-fast) var(--tp-spring), box-shadow var(--tp-base) var(--tp-ease);
}
.campaign-hero--porch .is-style-video .wp-block-button__link:hover,
.campaign-hero--porch .is-style-video .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--gold-light, #D5C090);
	text-decoration-color: var(--wp--preset--color--gold-light, #D5C090);
}

/* Errors, compact (Nov 11, 2026): a slim one-line note on top, and each
 * field's message sits small in the gap under its line instead of pushing
 * the rows apart, so the card keeps its height when validation fails. */
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_validation_errors {
	margin: 0 0 0.6rem; padding: 0.4rem 0.75rem; border-left-width: 3px;
}
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_validation_errors :is(h2, .gform_submission_error) {
	font-size: 0.8125rem; line-height: 1.3; font-weight: 600; letter-spacing: 0; max-width: none; margin: 0;
}
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield_error { position: relative; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield_validation_message {
	position: absolute; left: 0; top: 100%; margin: 0.15rem 0 0; padding: 0;
	font-size: 0.75rem; line-height: 1.2; font-weight: 600; background: none; border: 0;
}
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield_error .ginput_container { animation: none; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper:has(.gfield_validation_message) .gfield--type-checkbox:first-of-type { margin-top: 0.7rem; }

/* Tablet windows (640-1023px): the card spans the full content width instead of
 * a 40rem column with empty space beside it, and the copy runs wider. */
@media (min-width: 640px) and (max-width: 1023px) {
	body:has(.campaign-hero--porch) .campaign-hero--porch > .campaign-card--porch { max-width: none; }
	body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__content { max-width: none; }
	body:has(.campaign-hero--porch) .campaign-hero--porch :is(.campaign-hero__sub, .campaign-hero__body) { max-width: 46rem; }
	body:has(.campaign-hero--porch) .campaign-hero--porch { row-gap: clamp(1.5rem, 4vw, 2.5rem); }
}
@media (min-width: 640px) and (max-width: 1023px) {
	body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__sub { font-size: clamp(1.1875rem, 0.85rem + 0.9vw, 1.5rem); line-height: 1.5; }
	body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__body { font-size: clamp(1.0625rem, 0.8rem + 0.55vw, 1.25rem); }
	body:has(.campaign-hero--porch) .campaign-hero--porch :is(.campaign-hero__sub, .campaign-hero__body) { max-width: 50rem; }
}

/* Field underlines on any host (Nov 12, 2026). GoDaddy's managed WordPress
 * (the "WP Site Designer" plugin, data-sd-* attributes) prints an inline style
 * `body .wp-site-blocks input:not([type=submit]):not(...)...` with very high
 * specificity that sets `border: 1px solid color-mix(... var(--wp--preset--color--contrast) ...)`.
 * This theme has no "contrast" colour, so that border becomes invalid and the
 * fields lose their underline. These !important rules put the underline back
 * on any host; card and error colours are repeated so they still win. */
.gform_wrapper .gfield :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select, textarea),
.gform_wrapper .gfield .campaign-combo__input {
	border-style: none none solid !important;
	border-width: 0 0 2px !important;
	border-bottom-color: var(--wp--preset--color--primary) !important;
	border-radius: 0 !important;
}
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select, textarea),
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield .campaign-combo__input {
	border-bottom-color: var(--wp--preset--color--navy) !important;
}
.gform_wrapper .gfield.gfield_error.gfield_error :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select, textarea, .campaign-combo__input) { border-bottom-color: var(--tp-error) !important; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield.gfield_error.gfield_error :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], select, textarea, .campaign-combo__input) { border-bottom-color: #8E1B12 !important; }

/* Brand colours + logo setting (Nov 13, 2026): Navy #002767 / Golden #B39551
 * (palette in theme.json). Pages without a hero (Privacy Policy, 404) show the
 * navy logo from Site Settings → Logo; the bundled SVG fallback is navy there. */
body:not(:has(.campaign-hero)) .campaign-logo { color: var(--wp--preset--color--primary); }
body:not(:has(.campaign-hero)) .campaign-logo img { object-position: center; }

/* Share buttons: white text (Nov 12, 2026). On staging GoDaddy's inline link
 * styles painted the label navy on the navy button, so the colour is forced
 * here for every link state. Hover keeps navy text on white. */
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-gf-success__share li a:is(:link, :visited, :focus, :active) {
	color: #fff !important;
}
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-gf-success__share li a:is(:hover, :focus-visible):hover {
	color: var(--wp--preset--color--navy) !important;
}

/* Quiet button hover (Nov 12, 2026). Replaces the cursor-following glow on the
 * pledge / RSVP submit buttons, the lift on the share buttons and the light
 * sweep on block buttons with one plain, short tone change. */
.campaign-card--porch .gform_wrapper .gform_footer .gform_button {
	transition: filter 0.15s ease, transform 0.12s ease;
}
.campaign-card--porch .gform_wrapper .gform_footer .gform_button:is(:hover, :focus-visible) {
	--bshine: 0;
	filter: brightness(1.07);
}
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_footer .gform_button:is(:hover, :focus-visible) {
	--bshine: 0;
	filter: brightness(1.35);
}
.campaign-gf-success__share a,
.campaign-card--porch .campaign-gf-success__share a {
	transition: background-color 0.15s ease, color 0.15s ease;
}
.campaign-gf-success__share a:hover,
.campaign-card--porch .campaign-gf-success__share a:hover,
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-gf-success__share a:hover {
	transform: none;
}
.wp-block-button .wp-block-button__link::after { display: none; }
.wp-block-button__link:hover,
.wp-block-button.is-style-gold .wp-block-button__link:hover { transform: none; }

/* Launch video pop-up on phones (Nov 12, 2026): the "Coming November 16" note
 * was a 16:9 box with a lot of empty navy. Let it shrink to its text, tighten the
 * padding, and keep the close button inside the screen edge. */
@media (max-width: 600px) {
	.tp-video { width: calc(100vw - 2rem); border-radius: 14px; }
	.tp-video__frame:has(.tp-video__soon) { aspect-ratio: auto; border-radius: 14px; }
	.tp-video__soon { height: auto; gap: 0.75rem; padding: 3.25rem 1.5rem 2.5rem; }
	.tp-video__soon strong { font-size: clamp(1.6rem, 7.4vw, 2rem); line-height: 1.12; text-wrap: balance; }
	.tp-video__soon span { font-size: 1rem; line-height: 1.5; max-width: 22em; margin-inline: auto; text-wrap: balance; }
	.tp-video__close { top: 0.6rem; right: 0.6rem; width: 2.5rem; height: 2.5rem; font-size: 1.35rem; box-shadow: 0 4px 12px rgb(0 0 0 / 0.35); }
}

/* Form on narrower cards (Nov 12, 2026). The two-up rows switch on by window
 * width, but on a 1024-1100px window the hero puts the card in a ~380-400px
 * column, so each field is only ~150px wide. The form measures its own card and
 * scales the label and typed text down to fit ("Club or organization" and the
 * rest stay side by side). The long "Number attending" label can't fit a half
 * column at any readable size, so on a narrow card it and "Club or organization"
 * each get their own row. */
.gform_wrapper { container: campaign-form / inline-size; }
@supports (width: 1cqw) {
	.campaign-card--porch .gform_wrapper .gfield_label { font-size: clamp(0.75rem, 4.3cqw, clamp(1rem, 0.85rem + calc(0.25 * var(--u)), 1.1875rem)); }
	.gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea),
	.gform_wrapper .campaign-combo__input { font-size: clamp(0.8125rem, 4.6cqw, 1.0625rem); }
}
@container campaign-form (max-width: 29.99rem) {
	body:has(.campaign-hero--porch) .campaign-rsvp__card .gform_wrapper .gfield.campaign-attending,
	body:has(.campaign-hero--porch) .campaign-rsvp__card .gform_wrapper .gfield.campaign-org { grid-column: 1 / -1; }
	body:has(.campaign-hero--porch) .campaign-rsvp__card .gform_wrapper .gfield.campaign-attending > .gfield_label { font-size: 0.8125rem; }
}

/* "Watch our launch video" underline (Nov 12, 2026). The quiet-hover rule
 * `.wp-block-button .wp-block-button__link::after { display: none }` also hid this
 * link's hand-drawn underline, which is drawn with ::after. Show it again. */
.campaign-hero--porch .is-style-video .wp-block-button__link::after { display: block; }

/* Footer bar (Nov 12, 2026): when the one-line navy bar is on, the hero ends on it
 * with no cream band in between. */
body:has(.campaign-hoverfooter) .campaign-hero--porch { margin-bottom: 0 !important; }

/* Client edits (Nov 13, 2026): a more compact pledge card on every screen so more
 * of the porch shows, and on phones a clear "porch strip" at the top (logo over the
 * lantern) with the navy building up under the headline. Plain lightening of the
 * whole overlay was tried and failed AA for the subhead, so the navy stays behind
 * the paragraphs. Applies to Home and RSVP (they share the card). */
/* --- Card: compact on every screen --- */
body:has(.campaign-hero--porch) .campaign-hero--porch > .campaign-card--porch {
	padding: clamp(1.25rem, calc(1.7 * var(--u)), 2rem) clamp(1.25rem, calc(1.8 * var(--u)), 2.1rem) clamp(1.25rem, calc(1.6 * var(--u)), 1.9rem);
}
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-pledge__title { font-size: clamp(1.5rem, 0.7rem + calc(1.35 * var(--u)), 2.4rem) !important; margin-bottom: 0.5rem !important; }
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-pledge__quote { font-size: clamp(0.95rem, 0.55rem + calc(0.6 * var(--u)), 1.2rem); line-height: 1.4; margin-bottom: 0.6rem !important; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_fields { row-gap: 0.2rem; column-gap: 1.25rem; }
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-float .gfield:not(.gfield--type-checkbox):not(.gfield--type-radio) > .ginput_container { padding-top: 1.2rem; }
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-float .gfield:not(.gfield--type-checkbox):not(.gfield--type-radio):not(.gfield--type-consent) > .gfield_label { top: 1.35rem; }
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-float .gfield.is-active > .gfield_label,
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-float .gfield.is-filled > .gfield_label,
body:has(.campaign-hero--porch) .campaign-card--porch .campaign-float .gfield:has(input:autofill) > .gfield_label { transform: translateY(-1.3rem) scale(0.76); }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper :is(input[type="text"], input[type="email"], input[type="tel"], select),
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .campaign-combo__input { min-height: 2rem; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield--type-checkbox:first-of-type { margin-top: 0.6rem; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gchoice label { font-size: 0.75rem; line-height: 1.35; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gchoice input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_footer { margin-top: 1rem; }
body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_footer .gform_button { padding: 0.7em 1.4em; font-size: 1rem; }

/* Desktop: cap the card width and push it right so more porch shows between copy and card. */
@media (min-width: 1024px) {
	body:has(.campaign-hero--porch) .campaign-hero--porch { grid-template-columns: minmax(0, 50fr) minmax(1.5rem, 14fr) minmax(0, 36fr); }
	body:has(.campaign-hero--porch) .campaign-hero--porch > .campaign-card--porch { width: 100%; max-width: 32rem; justify-self: end; }
}

/* Phones/tablets: first+last and zip+county side by side, quote hidden (title carries it). */
@media (max-width: 1023px) {
	body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield.campaign-first,
	body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield.campaign-last,
	body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield.campaign-zip,
	body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gfield.campaign-county { grid-column: span 6; }
	body:has(.campaign-hero--porch) .campaign-card--porch .campaign-pledge__quote { font-size: 0.95rem; }

}
@media (max-width: 639px) {
	body:has(.campaign-hero--porch) .campaign-hero--porch > .campaign-card--porch { padding: 1.25rem 1.1rem 1.4rem; }
	body:has(.campaign-hero--porch) .campaign-card--porch .gform_wrapper .gform_fields { column-gap: 0.9rem; }
}

@media (max-width: 639px) {
	body:has(.campaign-hero--porch) .campaign-hero--porch { padding-top: 15.5rem !important; }
	body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__photo img { height: 36rem; width: 100%; object-position: 64% 45%; scale: 1; }
	body:has(.campaign-hero--porch) .campaign-hero--porch::before {
		background: linear-gradient(180deg, rgb(0 39 103 / 0.45) 0, rgb(0 39 103 / 0.05) 6rem, rgb(0 39 103 / 0.05) 11rem, rgb(0 39 103 / 0.7) 16rem, rgb(0 39 103 / 0.86) 24rem, rgb(0 39 103 / 0.95) 34rem, var(--wp--preset--color--navy) 36rem);
	}
	body:has(.campaign-hero--porch) .campaign-hero--porch::after { top: 6rem; left: 60%; }
	body:has(.campaign-hero--porch) .campaign-hero--porch :is(.campaign-hero__title, .campaign-hero__sub) { text-shadow: 0 1px 2px rgb(0 20 60 / 0.5), 0 2px 16px rgb(0 20 60 / 0.6); }
}
@media (min-width: 1024px) {
	body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__photo img { width: 126%; /* was 112%: scales the photo up from the right edge so the lantern clears the narrower card */ }
}

/* Phones (Nov 13, 2026, Jonathan): show more of the whole porch photo instead of a close-up on the lantern.
 * A shorter photo box scales the image down so more of its width fits; it fades into the navy at the bottom. */
@media (max-width: 639px) {
	body:has(.campaign-hero--porch) .campaign-hero--porch .campaign-hero__photo img {
		height: 22rem;
		object-position: 60% 50%;
		-webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
	}
	body:has(.campaign-hero--porch) .campaign-hero--porch::before {
		background: linear-gradient(180deg, rgb(0 39 103 / 0.45) 0, rgb(0 39 103 / 0.05) 5rem, rgb(0 39 103 / 0.05) 10rem, rgb(0 39 103 / 0.72) 15.5rem, rgb(0 39 103 / 0.9) 19rem, var(--wp--preset--color--navy) 22rem);
	}
	body:has(.campaign-hero--porch) .campaign-hero--porch::after { top: 4.5rem; left: 58%; width: 50vw; height: 50vw; margin: -25vw 0 0 -25vw; }
}