/* ==========================================================================
   CornellSoccer — Main Stylesheet
   Design tokens + shared components, built from Figma tokens.
   ========================================================================== */

:root {
	/* Brand */
	--cs-red:          #B31B1B;
	--cs-red-400:      #C24949;
	--cs-red-dark:     #8f1515;
	--cs-navy:         #101728;
	--cs-border-dark:  #374151;

	/* Neutrals */
	--cs-white:        #ffffff;
	--cs-border:       #e5e7eb;
	--cs-gray-50:      #f8fafc;
	--cs-gray-100:     #f3f4f6;
	--cs-gray-200:     #e5e7eb;
	--cs-gray-300:     #d1d5db;
	--cs-gray-400:     #9ca3af;
	--cs-gray-500:     #6b7280;
	--cs-gray-600:     #4b5563;
	--cs-gray-700:     #374151;
	--cs-gray-800:     #1f2937;
	--cs-black:        #000000;

	/* Typography */
	--font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body:    'Open Sans',  -apple-system, BlinkMacSystemFont, sans-serif;
	--font-btn:     'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Layout */
	--container-max: 1200px;
	--container-pad: 48px;
	--container-wide: 1440px;

	/* Radii */
	--radius-btn:    8px;
	--radius-card:   12px;
	--radius-card-lg:14px;
	--radius-pill:   9999px;

	/* Shadows */
	--shadow-sm:  0 4px 12px rgba(16, 23, 40, 0.06);
	--shadow-md:  0 10px 24px rgba(16, 23, 40, 0.10);
	--shadow-lg:  0 18px 40px rgba(16, 23, 40, 0.14);

	/* Motion */
	--ease:        cubic-bezier(.22,.61,.36,1);
	--dur-fast:   .2s;
	--dur-med:    .35s;
	--dur-slow:   .7s;

	/* Z-layers */
	--z-header:   50;
	--z-modal:    80;
	--z-toast:    90;
}

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

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--cs-gray-800);
	background: var(--cs-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
a:hover { opacity: .9; }

button {
	font: inherit;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: inherit;
}

ul, ol { list-style: none; margin: 0; padding: 0; }
p, figure, blockquote { margin: 0; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--cs-black);
	line-height: 1.2;
}

/* Accessibility helpers */
.sr-only {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0,0,0,0) !important;
	white-space: nowrap !important; border: 0 !important;
}
.skip-link:focus {
	position: fixed; top: 12px; left: 12px; width: auto; height: auto;
	clip: auto; padding: 10px 14px; background: var(--cs-red); color: #fff;
	border-radius: var(--radius-btn); z-index: 999;
}

:focus-visible { outline: 3px solid rgba(179,27,27,.4); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 16px;
	border-radius: var(--radius-btn);
	font-family: var(--font-btn);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .075px;
	line-height: 1;
	white-space: nowrap;
	transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	cursor: pointer;
}
.btn svg { width: 14px; height: 14px; flex: none; }

.btn--sm    { padding: 10px 12px; font-size: 14px; }
.btn--block { width: 100%; padding: 13px 17px; }

.btn--primary {
	background: var(--cs-red); color: var(--cs-white);
}
.btn--primary:hover {
	background: var(--cs-red-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(179,27,27,.28);
	opacity: 1;
}

.btn--outline {
	background: transparent; color: var(--cs-gray-800);
	border: 1px solid var(--cs-border);
}
.btn--outline:hover {
	border-color: var(--cs-gray-400);
	background: var(--cs-gray-50);
	opacity: 1;
}

.btn--ghost {
	background: transparent; color: var(--cs-gray-800);
}
.btn--ghost:hover { background: rgba(0,0,0,.05); opacity: 1; }

.btn--white {
	background: var(--cs-white); color: var(--cs-red);
	border: 1px solid var(--cs-white);
}
.btn--white:hover { background: var(--cs-gray-50); opacity: 1; }

/* Secondary — red outline (Figma 221290:8952). Used by the Extra Time sidebar CTAs. */
.btn--secondary {
	background: transparent; color: var(--cs-red);
	border: 1px solid var(--cs-red);
}
.btn--secondary:hover { background: rgba(179, 27, 27, .08); color: var(--cs-red); opacity: 1; }

/* ==========================================================================
   Badges
   ========================================================================== */
.badge {
	display: inline-flex; align-items: center;
	padding: 6px 10px; border-radius: 6px;
	font-family: var(--font-heading); font-weight: 500;
	font-size: 12px; line-height: 16px; letter-spacing: .06px;
	width: fit-content;
}
.badge--red  { background: var(--cs-red);  color: var(--cs-white); }
.badge--dark { background: var(--cs-navy); color: var(--cs-white); }
.badge--light { background: var(--cs-gray-100); color: var(--cs-gray-700); }

/* ==========================================================================
   Site header + primary nav
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: var(--z-header);
	background: var(--cs-white);
	border-bottom: 1px solid var(--cs-border);
}
.site-header__inner {
	max-width: var(--container-wide); margin: 0 auto;
	padding: 8px var(--container-pad);
	/* gap kept minimal — space-between already spreads logo/nav/button on wide
	   screens; a larger gap only forces the header to break near ~1120px. */
	display: flex; align-items: center; justify-content: space-between; gap: 4px;
}

.site-logo { display: inline-flex; align-items: center; gap: 6px; line-height: 0; }

/* Logo — whatever you upload via Customizer → Site Identity → Logo, OR the bundled fallback */
.site-logo .custom-logo,
.custom-logo-link img,
.site-logo__fallback {
	height: 48px; width: auto; max-width: 320px; object-fit: contain; display: block;
}

/* gap here is the real menu↔button spacing (the desktop CTA is a flex child of
   .primary-nav, since .primary-nav__panel is display:contents). Kept tight so the
   header doesn't break just above the ~1110px drawer breakpoint. */
.primary-nav { display: flex; align-items: center; gap: 12px; }
.primary-nav__list {
	display: flex; align-items: center; gap: 12px;
	font-family: var(--font-heading); font-weight: 500; font-size: 14px;
}
.primary-nav__list a {
	display: inline-flex; align-items: center;
	padding: 8px 4px;
	color: var(--cs-gray-800);
	border-radius: var(--radius-btn);
	position: relative;
}
.primary-nav__list a:hover { color: var(--cs-red); opacity: 1; }
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a,
.primary-nav__list .current-menu-parent > a { color: var(--cs-red); }
/* Active-page underline — uses ::before so ::after is free for the dropdown
   chevron below (a parent item can be both active AND have children). */
.primary-nav__list .current-menu-item > a::before,
.primary-nav__list .current_page_item > a::before,
.primary-nav__list .current-menu-parent > a::before {
	content: ""; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 2px;
	background: var(--cs-red); border-radius: 2px;
}

/* Dropdown chevron on items that have a submenu (e.g. About) — the downloaded
   chevron-down.svg, applied via CSS mask so it inherits currentColor (turns red
   on hover) while keeping its thin, light stroke. */
.primary-nav__list .menu-item-has-children > a::after {
	content: ""; display: inline-block; flex: 0 0 auto;
	width: 14px; height: 14px;
	margin-left: 4px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--dur-fast) var(--ease);
}
.primary-nav__list .menu-item-has-children:hover > a::after,
.primary-nav__list .menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}

/* Submenu (About dropdown etc.) */
.primary-nav__list .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 200px;
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: var(--radius-btn);
	box-shadow: var(--shadow-md);
	padding: 8px;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.primary-nav__list li { position: relative; }
.primary-nav__list li:hover > .sub-menu,
.primary-nav__list li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: none;
}
.primary-nav__list .sub-menu a {
	padding: 10px 12px; border-radius: 6px; width: 100%;
}
.primary-nav__list .sub-menu a:hover { background: var(--cs-gray-50); }

/* Drawer panel — flex contents inline on desktop, fullscreen overlay on mobile */
.primary-nav__panel { display: contents; }
.primary-nav__drawer-head,
.primary-nav__close,
.primary-nav__mobile-ctas,
.primary-nav__backdrop { display: none; }
.primary-nav__cta--desktop { display: inline-flex; }

/* Logged-in user pill (replaces Sign-In/Join button when is_user_logged_in) */
.user-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 6px 4px 4px;
	border-radius: 9999px;
	background: var(--cs-gray-50);
	border: 1px solid var(--cs-border);
	max-width: 240px;
}
.user-pill__avatar {
	width: 28px; height: 28px; border-radius: 50%;
	overflow: hidden; flex-shrink: 0; line-height: 0;
	background: var(--cs-gray-200);
}
.user-pill__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-pill__name,
.user-pill__greeting {
	font-family: var(--font-heading); font-weight: 500; font-size: 14px;
	color: var(--cs-gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-pill__greeting strong { font-weight: 600; }
.user-pill__logout {
	width: 28px; height: 28px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--cs-gray-500);
	border-radius: 50%;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.user-pill__logout:hover {
	background: rgba(179,27,27,.08); color: var(--cs-red); opacity: 1;
}
/* Avatar + name combo becomes the clickable area linking to /my-profile/.
   The logout icon stays separate so a click on the user's name doesn't
   accidentally log them out. */
.user-pill__main {
	display: inline-flex; align-items: center; gap: 8px; min-width: 0;
	color: inherit; text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
.user-pill__main:hover { color: var(--cs-red); }
.user-pill__main:hover .user-pill__name { color: var(--cs-red); }
/* When the entire mobile pill is a link (mobile drawer), inherit colors
   and disable underline so it still looks like a banner card. */
.user-pill--link { color: inherit; text-decoration: none; }
.user-pill--link:hover { color: inherit; opacity: 1; }

/* Mobile drawer variant: use the full width as a banner instead of a pill */
.user-pill--mobile {
	display: flex; max-width: none; width: 100%;
	padding: 12px;
	background: var(--cs-gray-50);
	border-radius: 8px;
	border: 1px solid var(--cs-border);
}
.user-pill--mobile .user-pill__avatar { width: 32px; height: 32px; }
.user-pill--mobile .user-pill__greeting { font-size: 14px; line-height: 20px; white-space: normal; }

.primary-nav__toggle {
	display: none;
	width: 42px; height: 42px; border-radius: 8px;
	align-items: center; justify-content: center;
	background: transparent; border: 0; padding: 0; cursor: pointer;
}
.burger, .burger::before, .burger::after {
	display: block; width: 22px; height: 2px; background: var(--cs-gray-800);
	border-radius: 2px; transition: transform var(--dur-med) var(--ease), top var(--dur-med) var(--ease);
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -7px; }
.burger::after  { top:  7px; }
.primary-nav.is-open .burger { background: transparent; }
.primary-nav.is-open .burger::before { top: 0; transform: rotate(45deg); }
.primary-nav.is-open .burger::after  { top: 0; transform: rotate(-45deg); }

/* ==========================================================================
   Inner page banner (reusable)
   ========================================================================== */
.banner-inner {
	position: relative;
	min-height: 256px;
	display: flex; align-items: center; justify-content: center;
	background-color: var(--cs-red);
	background-image: var(--bg-desktop);
	background-size: cover; background-position: top;
	padding: 44px var(--container-pad);
	color: var(--cs-white);
	overflow: hidden;
	text-align: center;
}
/* Swap to the mobile image on small viewports — falls back to desktop when --bg-mobile is unset. */
@media (max-width: 768px) {
	.banner-inner { background-image: var(--bg-mobile, var(--bg-desktop)); }
}
/* When the banner uses a background photo, lay a #000000 60% overlay over it so
   the white title/subtitle stay readable (Figma 220842:9311). Red-only banners
   (no image) don't get the overlay. */
.banner-inner--photo::before {
	content: "";
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .6);
	z-index: 0;
}
.banner-inner__content {
	position: relative; z-index: 1;
	max-width: 1188px; width: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
}
/* CTA button keeps extra breathing room below the subtitle (the 8px gap is
   just for headline → subheading, per Figma 220955:43306). */
.banner-inner__content .btn { margin-top: 8px; }
.banner-inner__title {
	font-family: var(--font-heading); font-weight: 600;
	font-size: clamp(32px, 5vw, 60px); line-height: 1.15; letter-spacing: 0.3px;
	color: var(--cs-white);
}
.banner-inner__subtitle {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 20px; line-height: 28px; color: var(--cs-gray-200);
	max-width: 780px;
}

/* ==========================================================================
   Hero (Home only)
   ========================================================================== */
.hero {
	position: relative;
	min-height: 440px;
	display: flex; align-items: flex-start; justify-content: flex-start;
	background-image: var(--bg-desktop);
	background-size: cover; background-position: top;
	background-color: var(--cs-navy);
	padding: 32px var(--container-pad);
	overflow: hidden;
}
/* Swap to the mobile hero image on small viewports. */
@media (max-width: 768px) {
	.hero { background-image: var(--bg-mobile, var(--bg-desktop)); }
}
.hero__content {
	position: relative; z-index: 1;
	max-width: 890px; text-align: left;
	display: flex; flex-direction: column; gap: 8px;
}
.hero__title {
	color: var(--cs-white);
	font-family: var(--font-heading); font-weight: 500;
	font-size: clamp(28px, 4vw, 36px);
	line-height: 1.2; letter-spacing: .5px;
}
.hero__subtitle {
	color: var(--cs-gray-200);
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 24px;
	display: none; /* Hidden on desktop — visible on mobile per Figma */
}
.hero__cta {
	display: none; /* Hidden on desktop — CTA appears in intro section instead */
}

/* ==========================================================================
   Section headings (reusable)
   ========================================================================== */
.section-heading {
	text-align: center; max-width: 792px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 8px;
}
.section-heading h2 {
	font-family: var(--font-heading); font-weight: 600;
	font-size: clamp(24px, 3vw, 30px);
	letter-spacing: .15px; color: var(--cs-black);
}
.section-heading p {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 14px; line-height: 1.5;
	color: var(--cs-gray-500); letter-spacing: .07px;
}

/* ==========================================================================
   Home sections: intro, events, support, stats, gallery
   ========================================================================== */
.intro {
	padding: 64px var(--container-pad) 0;
}
.intro__inner {
	max-width: 890px; margin: 0 auto;
	display: flex; flex-direction: column; align-items: center; gap: 24px;
	text-align: center;
}
.intro__body { display: flex; flex-direction: column; gap: 16px; }
.intro__body p {
	font-family: var(--font-heading);
	font-size: 18px; line-height: 1.6;
	color: var(--cs-gray-800); letter-spacing: .09px;
}

.events { padding: 80px var(--container-pad) 0; }
.events__inner {
	max-width: var(--container-max); margin: 0 auto;
	display: flex; flex-direction: column; gap: 32px; align-items: center;
}
.events__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	width: 100%;
}
.events__more { margin-top: 8px; }

/* Contact page */
.contact {
	padding: 64px var(--container-pad);
}
.contact__inner {
	max-width: var(--container-max); margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;
}
.contact__card {
	background: var(--cs-white);
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 24px;
	display: flex; flex-direction: column; gap: 24px;
}
.contact__card-head {
	display: flex; flex-direction: column; gap: 8px;
	text-align: center;
}
.contact__card-title {
	font-family: var(--font-heading); font-weight: 600;
	font-size: 30px; line-height: 1.2; letter-spacing: 0.15px;
	color: var(--cs-black); margin: 0;
}
.contact__card-sub {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 14px; line-height: 20px;
	color: var(--cs-gray-500); margin: 0;
}
.contact__rows { display: flex; flex-direction: column; gap: 16px; }
.contact-row {
	display: flex; gap: 16px; align-items: flex-start;
	background: var(--cs-white);
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 17px;
}
.contact-row__icon {
	width: 48px; height: 48px; flex-shrink: 0;
	border-radius: var(--radius-pill);
	background: #f7e8e8; color: var(--cs-red);
	display: inline-flex; align-items: center; justify-content: center;
}
.contact-row__label {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 16px; line-height: 24px;
	color: var(--cs-gray-800); margin-bottom: 4px;
}
.contact-row__value {
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px;
	color: var(--cs-gray-500);
}
.contact-row__value a { color: inherit; }
.contact-row__value a:hover { color: var(--cs-red); text-decoration: underline; }
/* Right column stack (Contact Info card + Follow Us card) */
.contact__right {
	display: flex; flex-direction: column; gap: 24px;
}

/* Follow Us card variant (Figma 220855:121043 — 17px padding, 16px gap, 16px title) */
.contact__card--socials {
	padding: 17px;
	gap: 16px;
}
.contact__sub-title {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #1f2937; margin: 0;
}

.contact-socials { display: flex; gap: 16px; }
.contact-socials a {
	width: 48px; height: 48px; border-radius: var(--radius-pill);
	background: #f7e8e8; color: var(--cs-red);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.contact-socials a svg { width: 20px; height: 20px; }
.contact-socials a:hover { background: var(--cs-red); color: var(--cs-white); opacity: 1; }
/* Ninja Forms adds `.nf-form-cont .nf-multi-cell .nf-cell { padding: 0 12px }`,
   which insets every field 12px from the card padding. Pull the row out by 12px
   on each side so the fields sit flush with the card's padding while keeping the
   24px (12+12) gutter between multi-column cells. Scoped to the contact card. */
.contact__card .nf-form-cont .nf-multi-cell { margin-left: -12px; margin-right: -12px; }
@media (max-width: 960px) {
	.contact__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Events — index, card, single, propose modal
   Matches Figma 220851:115905 (index), 221069:77915 (detail), 221150:6708 (propose modal).
   ========================================================================== */

/* Single event page */
.event-single-page { background: #ffffff; }
.event-single {
	max-width: 1200px; margin: 0 auto;
	padding: 32px var(--container-pad) 96px;
	position: relative;
}
.event-single__hero {
	height: 280px; overflow: hidden;
	border-radius: 16px;
	margin-bottom: 24px;
	background: var(--cs-gray-100);
}
.event-single__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-single__hero--placeholder {
	display: flex; align-items: center; justify-content: center;
	color: var(--cs-gray-400, #9ca3af);
}
.event-single__hero--placeholder svg { width: 56px; height: 56px; }
.event-single__inner {
	display: flex; flex-direction: column; gap: 24px;
	background: var(--cs-white);
}
.event-single__head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.event-single__title {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 20px; line-height: 1.2; letter-spacing: 0.1px;
	color: #020617; margin: 0;
}

/* Meta strip — single gray panel with 2-col Date&Time / Location split */
.event-single__meta-strip {
	display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
	padding: 16px;
	background: #f3f4f6;
	border-radius: 12px;
}
.event-meta-cell { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.event-meta-cell__icon { color: #4a5565; flex: 0 0 20px; margin-top: 2px; }
.event-meta-cell__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event-meta-cell__label {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px; color: #4a5565;
}
.event-meta-cell__value {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 16px; line-height: 24px; color: #101828;
}
.event-meta-cell__note {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px; color: #4a5565;
	margin-top: 2px;
}

/* About / Additional sections */
.event-single__section { display: flex; flex-direction: column; gap: 8px; }
.event-single__section-title {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 20px; line-height: 1.2; letter-spacing: 0.1px;
	color: #1f2937; margin: 0;
}
.event-single__section-body {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #364153;
}
.event-single__section-body p { margin: 0 0 12px; }
.event-single__section-body p:last-child { margin-bottom: 0; }

/* Contact — own subtle card */
.event-single__contact-card {
	background: #f9fafb; border-radius: 12px;
	padding: 16px;
	display: flex; flex-direction: column; gap: 12px;
}
.event-contact-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 12px 24px;
}
.event-contact-list__item {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 20px;
	color: #6b7280;
}
.event-contact-list__item svg { color: #6b7280; flex: 0 0 16px; }
.event-contact-list__item a { color: inherit; }
.event-contact-list__item a:hover { color: var(--cs-red); }

/* Inline RSVP form section */
.event-single__rsvp { display: flex; flex-direction: column; gap: 12px; }

/* Sticky footer (Back + RSVP) */
.event-single__footer {
	position: sticky; bottom: 0; left: 0; right: 0;
	display: flex; gap: 24px;
	padding: 12px 24px;
	background: var(--cs-white);
	border-top: 1px solid var(--cs-border);
	box-shadow: 0 -3px 6px rgba(0,0,0,.06);
	margin-top: 16px;
	margin-left: calc(-1 * var(--container-pad));
	margin-right: calc(-1 * var(--container-pad));
	z-index: 10;
}
.event-single__footer-btn { flex: 1 1 0; }

/* cs-btn family — used by event single, gallery upload modal, propose modal, etc.
   Mirrors Figma 46px tall, 8px radius, 15px Inter SemiBold buttons. */
.cs-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	min-height: 46px; padding: 14px 16px;
	font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 15px; line-height: 1; letter-spacing: 0.075px;
	border-radius: 8px; border: 1px solid transparent;
	text-align: center; text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none; appearance: none;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
button.cs-btn[disabled] { opacity: 0.6; cursor: progress; }
.cs-btn--primary {
	background: var(--cs-red); color: var(--cs-white);
	border-color: var(--cs-red);
}
.cs-btn--primary:hover { background: var(--cs-red-dark); border-color: var(--cs-red-dark); color: var(--cs-white); opacity: 1; }
.cs-btn--ghost {
	background: transparent; color: var(--cs-gray-800);
	border-color: var(--cs-border);
}
.cs-btn--ghost:hover { background: var(--cs-gray-100); }
.cs-btn--ghost-red {
	background: transparent; color: var(--cs-red);
	border-color: var(--cs-red);
}
.cs-btn--ghost-red:hover { background: rgba(179,27,27,.08); color: var(--cs-red); }

@media (max-width: 768px) {
	/* Hero spans the full viewport width as a banner, flush below the header,
	   matching Figma 221071:81471 (mobile single-event is a full page).
	   Trim the desktop 96px bottom padding so there's no big gap below the
	   sticky RSVP bar before the footer. */
	.event-single { padding-top: 0; padding-bottom: 24px; }
	.event-single__hero {
		height: 280px;
		border-radius: 0;
		margin-left: calc(-1 * var(--container-pad));
		margin-right: calc(-1 * var(--container-pad));
	}
	.event-single__meta-strip { grid-template-columns: 1fr; gap: 16px; }
	.event-single__title { font-size: 18px; }
	.event-single__footer {
		padding: 12px 16px;
	}
	/* No "Back to events" button on mobile per Figma — RSVP fills the bar. */
	.event-single__footer .cs-btn--ghost-red { display: none; }
	/* Contact rows stack and align to the left (not centered), 16px apart. */
	.event-contact-list { flex-direction: column; align-items: flex-start; gap: 16px; }
	.event-contact-list__item { justify-content: flex-start; text-align: left; }
}

/* Archive Events page */
.archive-events { padding: 64px var(--container-pad); }
.archive-events__inner { max-width: 1200px; margin: 0 auto; }

/* Upcoming / Past view tabs on the Events archive (Issue #28). */
.events-view-tabs {
	display: flex; gap: 12px; flex-wrap: wrap;
	margin-bottom: 28px;
}
.events-view-tab {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
	color: #4b5563; background: transparent;
	border: 1px solid var(--cs-border);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.events-view-tab:hover { color: var(--cs-red); border-color: var(--cs-red); }
.events-view-tab.is-active {
	background: var(--cs-red); color: #ffffff; border-color: var(--cs-red);
}
.events-view-tab__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px; padding: 0 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	font-size: 12px; font-weight: 600; line-height: 1;
}
.events-view-tab.is-active .events-view-tab__count {
	background: rgba(255, 255, 255, 0.18); color: #ffffff;
}
.events-grid { display: grid; gap: 24px; }
.events-grid--3 { grid-template-columns: repeat(3, 1fr); }
.events-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) {
	.events-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
	.events-grid--3,
	.events-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.events-grid--3,
	.events-grid--4 { grid-template-columns: 1fr; }
}
/* Tighter top/bottom spacing under the banner on mobile (40px instead of 64px). */
@media (max-width: 768px) {
	.archive-events { padding-top: 40px; padding-bottom: 40px; }
}
.events__more .link-more {
	font-family: var(--font-btn); font-weight: 600; font-size: 15px;
	color: var(--cs-gray-800); padding: 10px 12px;
}

.gallery__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
	width: 100%;
}
.gallery__grid--4 { grid-template-columns: repeat(4, 1fr); }
.gallery__grid--3 { grid-template-columns: repeat(3, 1fr); }
.gallery__grid--landscape .gallery-card { aspect-ratio: 4 / 3; }

/* Gallery archive page — desktop: pills LEFT, search RIGHT (Figma node 220858:122561). */
.archive-gallery { padding: 40px var(--container-pad) 64px; }
.archive-gallery__inner { max-width: var(--container-max); margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.archive-gallery__toolbar {
	display: flex; flex-direction: row;
	align-items: flex-end; justify-content: space-between;
	gap: 24px; width: 100%;
}
.archive-gallery__search-group {
	display: flex; flex-direction: column; gap: 10px;
	flex: 0 0 400px; width: 400px; max-width: 100%;
}
.archive-gallery__search-label {
	font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
	color: var(--cs-gray-800); letter-spacing: .07px;
}
.archive-gallery__search {
	position: relative; width: 100%;
}
.archive-gallery__search input {
	width: 100%; height: 48px;
	padding: 0 16px 0 50px;
	font-family: var(--font-heading); font-weight: 500; font-size: 15px;
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: 8px;
	color: var(--cs-gray-800);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.archive-gallery__search input::placeholder { color: var(--cs-gray-500); }
.archive-gallery__search input:focus {
	border-color: var(--cs-red);
	box-shadow: 0 0 0 3px rgba(179,27,27,.15); outline: none;
}
.archive-gallery__search-icon {
	position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
	color: var(--cs-gray-500);
	pointer-events: none;
}

/* Filter pills (All / category buttons) — only rendered when gallery-category taxonomy has terms.
   order: -1 places the pills group to the LEFT of the toolbar on desktop, search-group to the RIGHT. */
.archive-gallery__filters {
	order: -1;
	display: flex; flex-wrap: wrap; gap: 10px;
	flex: 1 1 auto; min-width: 0;
}
.filter-pill {
	display: inline-flex; align-items: center;
	padding: 8px 12px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: var(--font-heading); font-weight: 500; font-size: 14px;
	line-height: 20px;
	color: var(--cs-gray-800);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filter-pill:hover { background: var(--cs-gray-100); }
.filter-pill.is-active {
	background: var(--cs-red);
	color: var(--cs-white);
}
.filter-pill.is-active:hover { background: var(--cs-red); }

/* Gallery card hidden when filter doesn't match */
.gallery-card.is-filtered-out { display: none !important; }

/* ----- Gallery page banner — solid red per Figma node 220858:122561 (desktop) ----- */
body.page-template-page-gallery-php .banner-inner,
body.post-type-archive-gallery-album .banner-inner {
	background: var(--cs-red) !important;
	background-image: none !important;
	min-height: 256px;
	padding-top: 58px; padding-bottom: 58px;
}
body.page-template-page-gallery-php .banner-inner__title,
body.post-type-archive-gallery-album .banner-inner__title {
	color: var(--cs-white);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(36px, 5vw, 60px);
	letter-spacing: 0.3px;
	line-height: 1.1;
}
body.page-template-page-gallery-php .banner-inner__subtitle,
body.post-type-archive-gallery-album .banner-inner__subtitle {
	color: var(--cs-white);
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.1px;
	max-width: 780px;
}

/* Gallery single (lightbox-style layout) */
.gallery-single {
	max-width: 1024px; margin: 0 auto;
	padding: 32px var(--container-pad) 64px;
	display: flex; flex-direction: column; gap: 24px;
}
.gallery-single__head {
	display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.gallery-single__title { font-size: 28px; font-weight: 600; color: var(--cs-black); }
.gallery-single__meta { font-size: 14px; color: var(--cs-gray-500); margin-top: 4px; }
.gallery-single__hero {
	position: relative;
	aspect-ratio: 4/3; overflow: hidden;
	border-radius: var(--radius-card-lg);
	background: var(--cs-gray-100);
}
.gallery-single__hero img { width: 100%; height: 100%; object-fit: cover; }
.gallery-single__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 48px; height: 48px; border-radius: var(--radius-pill);
	background: rgba(255,255,255,.9); color: var(--cs-gray-800);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background var(--dur-fast) var(--ease);
	cursor: pointer; z-index: 2;
}
.gallery-single__nav:hover { background: var(--cs-white); }
.gallery-single__nav--prev { left: 16px; }
.gallery-single__nav--next { right: 16px; }
.gallery-single__thumbs {
	display: flex; gap: 12px; flex-wrap: wrap;
}
.gallery-single__thumb {
	width: 120px; height: 90px; border-radius: 8px;
	overflow: hidden; background: var(--cs-gray-100);
	cursor: pointer; border: 2px solid transparent;
	transition: border-color var(--dur-fast) var(--ease);
}
.gallery-single__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-single__thumb.is-active { border-color: var(--cs-red); }

.support { padding: 80px var(--container-pad) 96px; }
/* Collapse Support's bottom padding when the Gallery section is the very
   next sibling — Gallery already adds 80px top, so we don't need to double up. */
.support:has(+ .gallery) { padding-bottom: 0; }
.support__inner {
	max-width: var(--container-max); margin: 0 auto;
	display: flex; flex-direction: column; align-items: center; gap: 32px;
}

.gallery { padding: 80px var(--container-pad) 96px; }
.gallery__inner {
	max-width: var(--container-max); margin: 0 auto;
	display: flex; flex-direction: column; gap: 32px; align-items: center;
}

/* ==========================================================================
   Cards
   ========================================================================== */
/* Event card */
.event-card {
	display: flex; flex-direction: column;
	width: 100%; /* always fill the grid cell — keeps placeholder cards as wide as image cards */
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Media is a <button> so it's keyboard-focusable and clickable to open the
   event-details modal. Reset native button chrome. */
.event-card__media {
	display: block; width: 100%;
	aspect-ratio: 4/3; overflow: hidden;
	background: var(--cs-gray-100);
	padding: 0; border: 0; margin: 0;
	cursor: pointer;
	font: inherit; color: inherit;
	text-align: center;
}
.event-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); display: block; }
.event-card:hover .event-card__media img { transform: scale(1.04); }
.event-card__media:focus-visible { outline: 2px solid var(--cs-red); outline-offset: -2px; }

/* Placeholder shown when an event has no featured image. width:100% is
   restated here because a <button> flex container can otherwise shrink to its
   icon content instead of filling the card. */
.event-card__media--placeholder {
	display: flex; align-items: center; justify-content: center;
	width: 100%;
	background: var(--cs-gray-100, #f3f4f6);
	color: var(--cs-gray-400, #9ca3af);
}
.event-card__media--placeholder svg { width: 48px; height: 48px; }
.event-card:hover .event-card__media--placeholder { background: var(--cs-gray-200, #e5e7eb); }
/* Figma 221064:75243 — three nested gap levels:
   body (gap 20px between content & button)
   └── head (gap 8px between title-wrap & meta)
       └── title-wrap (gap 4px between badge & title) */
.event-card__body { padding: 16px; display: flex; flex-direction: column; gap: 20px; }
.event-card__head { display: flex; flex-direction: column; gap: 8px; }
.event-card__title-wrap { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.event-card__title {
	margin: 0;
	font-family: var(--font-heading); font-weight: 500;
	font-size: 16px; line-height: 24px; letter-spacing: .08px;
	color: var(--cs-black);
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
	-webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
	min-height: 48px;
}
.event-card__meta { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.event-card__meta li {
	display: flex; align-items: center; gap: 8px;
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px; color: #6b7280;
}
.event-card__meta svg { width: 16px; height: 16px; flex: none; color: var(--cs-red); }

/* Card CTA (Figma 220851:115905 — full-width, 10px radius, 50px tall, Open Sans Regular 14px). */
.event-card__cta {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; height: 50px;
	padding: 13px 17px;
	background: var(--cs-red); color: var(--cs-white);
	border: 1px solid var(--cs-red); border-radius: 10px;
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px;
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease);
	margin-top: auto; /* sticks the CTA to the bottom of the card body */
}
.event-card__cta:hover { background: var(--cs-red-dark); color: var(--cs-white); opacity: 1; }

/* Gallery card — outer <article> wrapper holds the search/filter data attributes;
   the inner <a.gallery-card__link> is the navigable area; an optional heart
   <button.gallery-card__fav> sits on top for logged-in users. */
.gallery-card {
	position: relative; aspect-ratio: 1 / 1;
	border-radius: var(--radius-card-lg);
	overflow: hidden; display: block;
	transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.gallery-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); opacity: 1; }
.gallery-card__link {
	position: absolute; inset: 0;
	display: block;
	color: inherit; text-decoration: none;
	border-radius: inherit;
}
.gallery-card img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; transition: transform .8s var(--ease);
}
.gallery-card:hover img { transform: scale(1.06); }
.gallery-card__overlay {
	/* Full-card gradient that fades from 70% black at the bottom to transparent
	   toward the top, with the text anchored at the bottom (Figma 220972:9197). */
	position: absolute; inset: 0;
	padding: 20px; color: var(--cs-white);
	display: flex; flex-direction: column; gap: 4px;
	justify-content: flex-end;
	background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 70%);
	pointer-events: none;
}
.gallery-card__title {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 24px; color: var(--cs-white);
}
.gallery-card__meta {
	font-family: var(--font-body); font-size: 14px; line-height: 20px;
	color: var(--cs-gray-300);
}

/* Favorite (heart) button — logged-in users only. Sits in the top-right corner of the card,
   above the link. Outline by default, filled red when favorited. */
.gallery-card__fav {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .35);
	color: var(--cs-white);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gallery-card__fav:hover { background: rgba(0, 0, 0, .55); transform: scale(1.06); }
.gallery-card__fav svg { display: block; }
.gallery-card__fav.is-favorited {
	background: var(--cs-red);
	color: var(--cs-white);
}
.gallery-card__fav.is-favorited svg {
	fill: currentColor;
	stroke: currentColor;
}
.gallery-card__fav:disabled { opacity: .6; cursor: progress; }
.gallery-card__fav:focus-visible {
	outline: 3px solid rgba(255, 255, 255, .65);
	outline-offset: 2px;
}

/* Favorites filter pill — heart icon + label. Hidden when no logged-in user (PHP gate). */
.filter-pill--favorites {
	display: inline-flex; align-items: center; gap: 6px;
}
.filter-pill--favorites svg { color: var(--cs-red); flex: none; }
.filter-pill--favorites.is-active svg { color: var(--cs-white); }

/* Team member card — Figma 220868:125531 */
.member-card {
	display: flex; flex-direction: column; gap: 24px;
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: 16px;
	padding: 16px;
	transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.member-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.member-card__media {
	height: 262px; overflow: hidden;
	background: var(--cs-gray-100);
	border-radius: 8px;
}
.member-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) {
	.member-card__media { height: 220px; }
}
.member-card__body { display: flex; flex-direction: column; gap: 12px; }
.member-card__head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.member-card__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.member-card__name {
	font-family: var(--font-heading); font-weight: 600;
	font-size: 20px; line-height: 1.2; letter-spacing: 0.1px;
	color: var(--cs-gray-800); margin: 0;
}
.member-card__role {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: var(--cs-red); margin: 0;
}
.member-card__linkedin {
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 6px;
	transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.member-card__linkedin img { width: 24px; height: 24px; display: block; }
.member-card__linkedin:hover { background: rgba(0, 119, 183, .08); opacity: 1; }
.member-card__meta {
	display: flex; flex-direction: column; gap: 8px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px; line-height: 20px;
	margin: 0;
}
.member-card__meta > div {
	position: relative;
	padding-left: 28px; /* 20px icon + 8px gap — keeps wrapped value out of the icon column */
}
.member-card__meta-icon {
	position: absolute; left: 0; top: 0;
	width: 20px; height: 20px;
	color: var(--cs-red);
}
.member-card__meta dt { display: inline; font-weight: 400; color: #4b5563; margin: 0; }
.member-card__meta dd { display: inline; margin: 0; color: #101728; }
.member-card__bio  { font-size: 14px; color: var(--cs-gray-700); line-height: 1.55; }

/* In Memory card — Figma 220879:126091 */
.memorial-card {
	display: flex; flex-direction: column; gap: 24px;
	padding: 16px;
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: 16px;
	color: inherit; text-decoration: none;
	transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.memorial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); opacity: 1; }
.memorial-card__media {
	aspect-ratio: 384/264; overflow: hidden;
	border-radius: 8px; background: var(--cs-gray-100);
}
.memorial-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.memorial-card__body { padding: 0; display: flex; flex-direction: column; gap: 12px; }
.memorial-card__heading { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.memorial-card__name {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 20px; line-height: 1.2; letter-spacing: 0.1px;
	color: var(--cs-black); margin: 0;
}
.memorial-card__years {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 24px;
	color: var(--cs-gray-500); margin: 0;
}
.memorial-card__excerpt {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: var(--cs-gray-800); margin: 0;
}

/* In Memory archive */
.archive-memorial { padding: 64px var(--container-pad); }
.archive-memorial__inner { max-width: var(--container-max); margin: 0 auto; }
.archive-memorial__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 960px) { .archive-memorial__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .archive-memorial__grid { grid-template-columns: 1fr; } }

/* In Memory single */
.memorial-single {
	max-width: var(--container-max); margin: 0 auto;
	padding: 48px var(--container-pad);
}
.memorial-single__inner {
	display: grid; grid-template-columns: 384px 1fr; gap: 24px; align-items: start;
}
.memorial-single__photo {
	border-radius: 12px;
	overflow: hidden;
	background: var(--cs-gray-100);
	aspect-ratio: 4/3;
}
.memorial-single__photo img { width: 100%; height: 100%; object-fit: cover; }
.memorial-single__body { display: flex; flex-direction: column; gap: 24px; }
.memorial-single__name {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 24px; line-height: 1.2; letter-spacing: 0.12px;
	color: var(--cs-gray-800); margin: 0;
}
.memorial-single__meta {
	display: flex; flex-wrap: wrap; gap: 16px;
}
.memorial-meta-item {
	display: flex; flex-direction: column; gap: 4px;
	flex: 1 1 0; min-width: 140px;
}
.memorial-meta-item__label {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 24px; color: var(--cs-gray-500);
}
.memorial-meta-item__value {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 16px; line-height: 24px; color: var(--cs-gray-800);
}
.memorial-single__bio {
	font-size: 16px; line-height: 1.7; color: var(--cs-gray-800);
	/* The parent `.memorial-single__body` uses `gap: 24px`, which gives the
	   bio a natural breathing room below the meta strip. No further nudge
	   needed here. */
}
/* Paragraph rhythm inside the bio — no top margin on the first block so
   the image and text both start flush with the top of the bio area. */
.memorial-single__bio > p,
.memorial-single__bio > div > p { margin: 0 0 18px; }
.memorial-single__bio > p:first-child,
.memorial-single__bio > div > p:first-child { margin-top: 0; }
.memorial-single__bio > p:last-child,
.memorial-single__bio > div > p:last-child { margin-bottom: 0; }
/* When a paragraph contains only a floated image, drop its trailing margin
   so the next paragraph's text starts at the same Y as the image's top. */
.memorial-single__bio p:has(> img:only-child),
.memorial-single__bio p:has(> a > img:only-child) { margin-bottom: 0 !important; }

/* Inline images inside the bio rich-text — Issue #21.
   Every image floats LEFT (with text wrapping to the right). Any editor
   alignment class — alignleft / aligncenter / alignnone / alignright — is
   normalized to left float so the bio reads consistently as a magazine-
   style text-wrap layout. `!important` is used because WordPress core's
   own CSS for the alignment classes (`margin: 0 auto; display: block;`)
   would otherwise override the float we want. */
.memorial-single__bio::after { content: ''; display: block; clear: both; }
.memorial-single__bio img,
.memorial-single__bio img.alignleft,
.memorial-single__bio img.alignnone,
.memorial-single__bio img.aligncenter,
.memorial-single__bio img.alignright {
	float: left !important;
	max-width: 45%; height: auto;
	display: inline !important;
	/* top  right  bottom  left  — generous right gutter so wrapped text
	   has breathing room; bottom margin so the next paragraph clears
	   the image cleanly when the wrap ends mid-image. */
	margin: 4px 32px 24px 0 !important;
	border-radius: 14px;
	cursor: zoom-in;
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.memorial-single__bio img:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
/* Block-editor figure wrappers — mirror the same behavior at the figure level
   so the caption travels with the image. */
.memorial-single__bio figure,
.memorial-single__bio figure.alignleft,
.memorial-single__bio figure.alignnone,
.memorial-single__bio figure.aligncenter,
.memorial-single__bio figure.alignright {
	float: left !important;
	max-width: 45%;
	margin: 4px 32px 24px 0 !important;
}
.memorial-single__bio figure img {
	float: none !important;
	margin: 0 !important;
	max-width: 100% !important;
	border-radius: 14px;
	display: block !important;
}
.memorial-single__bio figcaption {
	margin-top: 8px; font-size: 13px; color: #6b7280; font-style: italic;
}
@media (max-width: 640px) {
	/* Drop floats on small screens — bio reads better stacked. */
	.memorial-single__bio img,
	.memorial-single__bio img.alignleft,
	.memorial-single__bio img.alignright,
	.memorial-single__bio img.aligncenter,
	.memorial-single__bio img.alignnone,
	.memorial-single__bio figure,
	.memorial-single__bio figure.alignleft,
	.memorial-single__bio figure.alignright,
	.memorial-single__bio figure.aligncenter,
	.memorial-single__bio figure.alignnone {
		float: none !important;
		margin: 12px auto !important;
		max-width: 100% !important;
		display: block !important;
	}
}

/* Image-zoom overlay — opened by clicking any image inside .memorial-single__bio.
   Lightweight: backdrop + centered image + close button; click anywhere to dismiss. */
.image-zoom {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: none; align-items: center; justify-content: center;
	padding: 24px;
	z-index: 99999;
	cursor: zoom-out;
}
.image-zoom.is-open { display: flex; }
.image-zoom__img {
	max-width: 100%; max-height: 100%; height: auto; width: auto;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.image-zoom__close {
	position: absolute; top: 16px; right: 16px;
	width: 40px; height: 40px;
	background: rgba(255, 255, 255, 0.92); color: #1f2937;
	border: 0; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.image-zoom__close:hover { background: var(--cs-red); color: #fff; }
.memorial-single__quote {
	background: #f3f4f6;
	border: 1px solid var(--cs-red);
	border-left-width: 4px;
	border-radius: 14px;
	padding: 25px 28px;
	display: flex; flex-direction: column; gap: 16px;
}
.memorial-single__quote p { font-size: 16px; line-height: 1.6; color: var(--cs-gray-800); }
.memorial-single__quote cite { font-size: 14px; color: var(--cs-gray-500); font-style: normal; }
@media (max-width: 768px) {
	.memorial-single__inner { grid-template-columns: 1fr; }
	/* Flex container — each item gets 50% width minus the gap so we get 2-up
	   even with fewer items, instead of stretching to fill the row. */
	.memorial-single__meta .memorial-meta-item { flex: 1 1 calc(50% - 16px); }
}

/* Accomplishments section */
.accomplishments {
	background: var(--cs-gray-100);
	padding: 40px var(--container-pad) 64px;
}
.accomplishments__inner {
	max-width: 792px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 32px; align-items: center;
}
.accomplishments__list {
	width: 100%; max-width: 588px;
	display: flex; flex-direction: column; gap: 12px;
}
.accomplishment-card {
	display: flex; align-items: flex-start; gap: 12px;
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: var(--radius-card-lg);
	padding: 17px;
}
.accomplishment-card__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--cs-red); flex-shrink: 0;
	align-self: flex-start; margin-top: 8px; /* sits on the first title line, not centered */
}
.accomplishment-card__title { flex: 1; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--cs-gray-800); }
.accomplishment-card__years { font-size: 16px; color: var(--cs-gray-500); align-self: center; /* date stays vertically centered */ }

/* Extra Time card — outer <article>.et-card wraps an inner <a>.et-card__link plus
   an optional <button>.et-card__fav heart toggle (logged-in users only). The button
   sits as a sibling of the link so click events don't bubble to the anchor. */
.et-card {
	position: relative;
	display: flex; flex-direction: column;
	border-radius: 12px;
	border: 0.8px solid #f3f4f6;
	background: var(--cs-white);
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
	transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.et-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); opacity: 1; }
.et-card__link {
	display: flex; flex-direction: column;
	color: inherit; text-decoration: none;
	height: 100%;
}

/* Heart toggle — top-right corner of the card, circular white pill with red filled state. */
.et-card__fav {
	position: absolute; top: 12px; right: 12px;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .92);
	border: 0; border-radius: 50%;
	color: #6b7280; cursor: pointer; z-index: 2;
	box-shadow: 0 1px 2px rgba(0,0,0,.10);
	transition: transform var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease),
	            background var(--dur-fast) var(--ease);
}
.et-card__fav:hover { transform: scale(1.05); color: var(--cs-red); background: var(--cs-white); }
.et-card__fav.is-favorited { color: var(--cs-red); }
.et-card__fav.is-favorited svg { fill: currentColor; }
.et-card__fav:disabled { opacity: .6; cursor: wait; }

/* Image variant */
.et-card__media { height: 256px; overflow: hidden; }
.et-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.et-card:hover .et-card__media img { transform: scale(1.04); }
/* Placeholder for image-variant cards with no featured image (matches event cards). */
.et-card__media--placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--cs-gray-100, #f3f4f6);
	color: var(--cs-gray-400, #9ca3af);
}
.et-card__media--placeholder svg { width: 48px; height: 48px; }
.et-card:hover .et-card__media--placeholder { background: var(--cs-gray-200, #e5e7eb); }

/* Body — both variants */
.et-card__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.et-card__date {
	display: flex; align-items: center; gap: 8px;
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px;
	color: #4b5563;
}
.et-card__date svg { color: #4b5563; flex: 0 0 16px; }

.et-card__title {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 18px; line-height: 1.3; color: var(--cs-gray-800);
	margin: 0;
}
.et-card--author .et-card__title {
	font-weight: 500; font-size: 18px; color: #111827;
}

.et-card__subline {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px;
	color: rgba(0, 0, 0, .8); margin: 4px 0 0;
}

.et-card__author { display: flex; flex-direction: column; gap: 0; }

.et-card__meta-rows {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 8px;
}
.et-card__meta-rows li {
	display: flex; align-items: center; gap: 8px;
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px; color: #4b5563;
}
.et-card__meta-rows svg { color: #4b5563; flex: 0 0 16px; }

.et-card__excerpt {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px;
	color: var(--cs-gray-500); margin: 0;
	display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
	-webkit-box-orient: vertical; overflow: hidden;
}

.et-card__cta {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px;
	color: var(--cs-red);
	margin-top: auto;
}
.et-card__cta svg { color: var(--cs-red); transition: transform var(--dur-fast) var(--ease); }
.et-card:hover .et-card__cta svg { transform: translateX(2px); }

/* ==========================================================================
   Stats: dark (home) vs light (about/support)
   ========================================================================== */
.stats-dark {
	width: 100%;
	background: var(--cs-navy);
	border-radius: var(--radius-card-lg);
	padding: 48px;
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 38px; align-items: center; justify-items: center;
}
.stats-dark__item {
	display: flex; flex-direction: column; gap: 8px;
	align-items: center; text-align: center;
}
.stats-dark__top { display: flex; align-items: center; gap: 8px; }
.stats-dark__icon { color: var(--cs-white); }
.stats-dark__icon svg, .stats-dark__icon img { width: 32px; height: 32px; }
.stats-dark__num {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 36px; letter-spacing: .18px; color: var(--cs-white);
}
.stats-dark__label {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 24px; color: var(--cs-gray-50); letter-spacing: .08px;
}

.stats-light {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	width: 100%; max-width: 1107px; margin: 0 auto;
}
.stats-light__item {
	display: flex; flex-direction: column; gap: 8px;
}
.stats-light__num {
	font-family: var(--font-heading); font-weight: 700;
	font-size: 48px; line-height: 1.1; color: var(--cs-red);
}
.stats-light__label {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 22px; color: var(--cs-gray-700);
}

/* ==========================================================================
   CTA band (reusable)
   ========================================================================== */
.cta-band {
	padding: 40px var(--container-pad);
	background: var(--cs-red);
}
/* Inner column: 24px between title and subtitle, then 8px+24px = 32px to buttons.
   Achieved via uniform 24px gap + 8px margin-top on the buttons row. */
.cta-band__inner {
	max-width: 1193px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 24px; align-items: center;
	text-align: center;
}
.cta-band__title {
	font-family: var(--font-heading); font-weight: 700;
	font-size: clamp(28px, 4vw, 48px); line-height: 1;
	color: var(--cs-white); margin: 0;
}
.cta-band__subtitle {
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 20px; line-height: 28px;
	color: var(--cs-white);
	max-width: 996px; margin: 0;
}
.cta-band__buttons {
	display: inline-flex; gap: 16px; flex-wrap: nowrap;
	justify-content: center; align-items: center;
	margin-top: 8px;
}
/* Inside the red band, flip the button colors: primary becomes white-on-red,
   secondary becomes transparent with white border. Override the global .btn rules.
   Note: the cta-band partial renders the secondary button with class .btn--outline
   (not .btn--ghost), so override both for safety. */
.cta-band .btn--primary,
.cta-band .btn--ghost,
.cta-band .btn--outline {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 156px; height: 60px;
	padding: 0 24px; border-radius: 10px;
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 24px;
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cta-band .btn--primary {
	background: var(--cs-white); color: var(--cs-red); border: 0;
}
.cta-band .btn--primary:hover {
	background: rgba(255, 255, 255, .9); color: var(--cs-red);
}
.cta-band .btn--ghost,
.cta-band .btn--outline {
	background: transparent; color: var(--cs-white);
	border: 2px solid var(--cs-white);
}
.cta-band .btn--ghost:hover,
.cta-band .btn--outline:hover {
	background: rgba(255, 255, 255, .12); color: var(--cs-white); border-color: var(--cs-white);
}

/* By-Laws page CTA — light slate-50 band with red button (Figma 220890:132333).
   Overrides the default red treatment scoped to this template only. */
body.page-template-page-bylaws-php .cta-band {
	background: #f9fafb;
	border-top: 1px solid #e5e7eb;
	padding: 40px var(--container-pad);
}
body.page-template-page-bylaws-php .cta-band__inner {
	gap: 32px;
}
/* Title → subtitle gap inside the heading cluster (Figma: 16px),
   subtitle → buttons gap inherited from .cta-band__inner gap (32px). */
body.page-template-page-bylaws-php .cta-band__inner > div:first-child {
	display: flex; flex-direction: column; gap: 16px;
}
body.page-template-page-bylaws-php .cta-band__title {
	font-family: 'Montserrat', sans-serif; font-weight: 600;
	font-size: 30px; line-height: 1.2; letter-spacing: 0.15px;
	color: #1f2937;
}
body.page-template-page-bylaws-php .cta-band__subtitle {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #1f2937;
	max-width: 720px;
}
body.page-template-page-bylaws-php .cta-band .btn--primary {
	background: var(--cs-red); color: var(--cs-white); border: 0;
	min-width: 0; height: auto;
	padding: 14px 16px; border-radius: 8px;
	font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 15px; line-height: 1; letter-spacing: 0.075px;
}
body.page-template-page-bylaws-php .cta-band .btn--primary:hover {
	background: #9a1717; color: var(--cs-white);
}
body.page-template-page-bylaws-php .cta-band .btn--outline {
	background: transparent; color: var(--cs-red);
	border: 1px solid var(--cs-red);
	min-width: 0; height: auto;
	padding: 14px 16px; border-radius: 8px;
	font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 15px; line-height: 1; letter-spacing: 0.075px;
}
body.page-template-page-bylaws-php .cta-band .btn--outline:hover {
	background: rgba(179, 27, 27, .06); color: var(--cs-red); border-color: var(--cs-red);
}

/* ==========================================================================
   Testimonials (Support page)
   ========================================================================== */
.testimonials {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	width: 100%;
}
/* Testimonial card — Figma 220887:131130: gray-50 quote bubble with triangle pointer,
   then avatar + name + role stacked centered below. */
.testimonial {
	display: flex; flex-direction: column;
	align-items: center;
	background: transparent; border: 0;
	padding: 0; gap: 8px;
}
.testimonial__bubble {
	background: var(--cs-gray-50);
	border-radius: 12px;
	padding: 32px 24px;
	min-height: 190px;
	width: 100%;
	display: flex; flex-direction: column;
	gap: 16px; align-items: center; justify-content: center;
	text-align: center;
}
.testimonial__quote-mark {
	color: #222;
	flex: none;
}
.testimonial__quote {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 18px; line-height: 1.45; letter-spacing: 0.09px;
	color: #222;
	margin: 0;
}
.testimonial__pointer {
	display: block;
	margin-top: -1px;
}
.testimonial__person {
	display: flex; flex-direction: column; align-items: center;
	gap: 4px;
	margin-top: 12px;
}
.testimonial__photo {
	width: 64px; height: 64px; border-radius: var(--radius-pill);
	overflow: hidden; background: var(--cs-gray-100);
	margin-bottom: 4px;
}
.testimonial__photo img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__name {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 16px; line-height: 24px;
	color: var(--cs-gray-800);
}
.testimonial__role {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 14px; line-height: 20px;
	color: var(--cs-gray-500);
}

/* ==========================================================================
   Donate tiers (Support page)
   ========================================================================== */
.donate-tiers {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	width: 100%;
}
.donate-tier {
	display: flex; flex-direction: column; gap: 16px;
	padding: 0;
	text-align: center;
	align-items: center;
}
.donate-tier__icon {
	width: 64px; height: 64px; border-radius: var(--radius-pill);
	background: #f7e8e8;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--cs-red);
	margin: 0 auto;
}
.donate-tier__icon img, .donate-tier__icon svg { width: 32px; height: 32px; }
.donate-tier__title {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 16px; line-height: 24px;
	color: var(--cs-gray-800);
}
.donate-tier__desc {
	font-family: var(--font-body);
	font-size: 14px; line-height: 20px;
	color: var(--cs-gray-800);
}

/* ==========================================================================
   Tabs (Extra Time)
   ========================================================================== */
.tabs {
	display: flex; gap: 10px; flex-wrap: wrap;
	border-bottom: 0;
}
.tabs__item {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	font-family: var(--font-heading); font-weight: 500;
	font-size: 14px; line-height: 20px; letter-spacing: 0.07px;
	color: #1f2937;
	background: transparent;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
}
.tabs__item:hover { color: var(--cs-red); opacity: 1; }
.tabs__item.is-active {
	background: var(--cs-red); color: var(--cs-white);
}

.tab-pane { display: none; }
.tab-pane.is-active { display: block; }

/* Extra Time tabs container + pane layout */
.extra-time {
	padding: 0;
}
.extra-time__inner {
	max-width: var(--container-max); margin: 0 auto;
	display: flex; flex-direction: column; gap: 32px;
}
.extra-time__tabs {
	overflow-x: auto; scrollbar-width: thin;
	padding-bottom: 4px;
}
.extra-time__head {
	display: flex; flex-direction: column; gap: 8px;
}
.extra-time__head h2 {
	font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 24px; line-height: 1.25; letter-spacing: 0.12px;
	color: var(--cs-black); margin: 0;
}
.extra-time__head p {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px;
	color: var(--cs-gray-500); margin: 0;
}
/* Cards loop sits 32px below the section head; 20px between cards, 24px between rows.
   Always 3-up regardless of post count (Figma 221285:6304). */
.et-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 20px;
	row-gap: 24px;
	margin-top: 32px;
}
.et-grid--2,
.et-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .et-grid, .et-grid--2, .et-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .et-grid, .et-grid--2, .et-grid--3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Single Extra Time
   Pattern A — Coach's Corner / From the Stands (Figma 221290:7790, 221389:8305):
     · Full-width dark banner with featured image + title + date
     · 794px content column inside 1200 wrapper
   Pattern B — Alum Spotlight / Player Voices (Figma 221290:8470, 221418:8450):
     · 794px main column + sidebar (Connect / Quick Facts / CTA)
   ========================================================================== */

/* Dark banner hero (Pattern A) — 256px tall, image bg + 60% black overlay,
   centered title (24px Montserrat Medium) and date row inside. */
.et-hero {
	position: relative;
	height: 256px;
	overflow: hidden;
	background: var(--cs-navy);
	color: var(--cs-white);
}
.et-hero__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.et-hero__overlay {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .6);
}
.et-hero__inner {
	position: relative; z-index: 1;
	max-width: 996px; margin: 0 auto;
	height: 100%;
	padding: 0 var(--container-pad);
	display: flex; flex-direction: column; gap: 20px;
	align-items: center; justify-content: center;
	text-align: center;
}
.et-hero__title {
	margin: 0;
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 24px; line-height: 1.25; letter-spacing: 0.12px;
	color: var(--cs-white);
}
.et-hero__meta {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px; letter-spacing: 0.07px;
	color: #f8fafc;
}
.et-hero__meta svg { color: #f8fafc; flex: 0 0 16px; }

/* Pattern A — article is a 1200px wrapper; the inner main column is 794px centered.
   Figma 221290:7790 / 221389:8305 wrap a 794px column inside a 1200px container.
   Adds horizontal padding via var(--container-pad) so the content gets breathing
   room on every viewport (the responsive variable already collapses to 15px on
   small screens). */
.et-single--wide {
	max-width: 1200px; margin: 0 auto;
	padding: 48px var(--container-pad) 60px;
}
.et-single--wide .et-main {
	max-width: 794px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 48px;
}
.et-single__body {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #374151;
}
.et-single__body p { margin: 0 0 1em; }
.et-single__body p:last-child { margin-bottom: 0; }
.et-section {
	display: flex; flex-direction: column; gap: 16px;
}
.et-section h2 {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 20px; line-height: 1.2; letter-spacing: 0.1px;
	color: #030712; margin: 0;
}
.et-bottom-images {
	display: flex; flex-direction: column; gap: 32px;
}
.et-bottom-images img {
	width: 100%; height: auto; display: block;
	border-radius: 14px;
}

/* Pattern B — main + sidebar grid. Uses minmax columns so the main column
   shrinks gracefully on mid-width viewports instead of pushing the sidebar
   off-screen. Sidebar caps at 360px so it never gets bigger than designed;
   main column gets the remainder via minmax(0, 1fr). Always padded via
   var(--container-pad) so the article has breathing room on every viewport.
   Figma 221290:8470 / 221418:8450. */
.et-single--sidebar {
	max-width: 1200px; margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: 24px; align-items: start;
	padding: 60px var(--container-pad);
}
.et-main { display: flex; flex-direction: column; gap: 40px; }

/* Author card — photo 256×256 + name/jersey-or-role + 3 meta rows. */
.et-author-card {
	display: flex; gap: 40px; align-items: center;
	padding: 12px;
	background: #f8fafc;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
}
.et-author-card__photo {
	width: 256px; height: 256px; flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden; background: var(--cs-gray-100);
}
.et-author-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.et-author-card__info {
	display: flex; flex-direction: column; gap: 12px;
	justify-content: center; flex: 1 1 0; min-width: 0;
	align-self: stretch;
}
.et-author-card__head { display: flex; flex-direction: column; gap: 4px; }
.et-author-card__name {
	font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 20px; line-height: 1.2; letter-spacing: 0.1px;
	color: var(--cs-gray-800); margin: 0;
}
.et-author-card__role {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: var(--cs-red);
}
.et-author-card__meta {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 8px;
	font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 20px;
}
.et-author-card__meta li { display: flex; gap: 8px; align-items: flex-start; color: #101728; }
.et-author-card__meta svg { color: var(--cs-red); width: 20px; height: 20px; flex: 0 0 20px; }
.et-author-card__meta img.et-author-card__icon { width: 20px; height: 20px; flex: 0 0 20px; display: block; }
.et-author-card__meta strong { color: #4b5563; font-weight: 400; margin-right: 4px; }

/* Pattern B inline feature image (between content and quote / panels). */
.et-feature-image {
	width: 100%; height: auto; display: block;
	border-radius: 14px;
}

/* Flexible Content — Image block (image + optional caption). */
.et-figure {
	margin: 0;
	display: flex; flex-direction: column; gap: 12px;
}
.et-figure figcaption {
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px; letter-spacing: 0.07px;
	color: #6a7282; text-align: center;
}

/* Flexible Content — Video block (oembed wrapper, 16:9, rounded 14px). */
.et-video {
	margin: 0;
	display: flex; flex-direction: column; gap: 12px;
}
.et-video__embed {
	position: relative; width: 100%;
	border-radius: 14px; overflow: hidden;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
}
.et-video__embed iframe,
.et-video__embed embed,
.et-video__embed object,
.et-video__embed video {
	width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; border: 0;
}
.et-video figcaption {
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px; letter-spacing: 0.07px;
	color: #6a7282; text-align: center;
}

.et-qa { padding: 8px 0; }
.et-qa h3 { font-size: 20px; margin-bottom: 8px; color: var(--cs-black); }
.et-qa p  { font-size: 15px; line-height: 1.7; color: var(--cs-gray-700); }

.et-this-or-that {
	padding: 24px;
	background: #a31919;
	border-radius: 14px;
	color: var(--cs-white);
}
.et-this-or-that h3 {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 24px; line-height: 1.2; letter-spacing: 0.12px;
	color: var(--cs-white); margin: 0 0 24px;
	display: flex; align-items: center; gap: 12px;
}
.et-this-or-that h3 svg,
.et-this-or-that__icon { width: 28px; height: 28px; flex: 0 0 28px; display: block; }
.et-this-or-that__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.et-tot-item {
	padding: 16px;
	background: rgba(255, 255, 255, .10);
	border-radius: 10px;
	display: flex; flex-direction: column; gap: 8px;
}
.et-tot-item__q {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: rgba(255, 255, 255, .8);
	margin: 0;
}
.et-tot-item__a {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: var(--cs-white);
	margin: 0;
}
@media (max-width: 640px) { .et-this-or-that__grid { grid-template-columns: 1fr; } }

.et-rapid-fire-section { display: flex; flex-direction: column; gap: 24px; }
.et-rapid-fire__title {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 20px; line-height: 1.2; letter-spacing: 0.1px;
	color: #020617; margin: 0;
}
.et-rapid-fire { display: flex; flex-direction: column; gap: 16px; }
.et-rapid-fire__item {
	padding: 12px 24px;
	background: #f8fafc;
	border: 0;
	border-left: 4px solid var(--cs-red);
	border-radius: 0;
}
.et-rapid-fire__q {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 16px; line-height: 24px;
	color: var(--cs-black); margin-bottom: 4px;
}
.et-rapid-fire__a {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px;
	color: #101828;
}

.et-message-card {
	background: #f9fafb;
	padding: 24px;
	border-radius: 14px;
	border: 1px solid #e5e7eb;
	border-left-width: 1px;
	display: flex; flex-direction: column; gap: 16px;
}
.et-message-card h3 {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 20px; line-height: 1.2; color: #020617;
	margin: 0;
	display: flex; align-items: center; gap: 8px;
}
/* Every quote-card heading now uses an inline <img class="et-message-card__icon">
   (assets/message_to_fans.svg), so suppress the legacy heart pseudo-element to
   avoid showing two icons. */
.et-message-card h3::before { content: none; display: none; }
.et-message-card__icon { width: 28px; height: 28px; flex: 0 0 28px; }
.et-message-card p,
.et-message-card { font-style: normal; }
.et-message-card > p,
.et-message-card > div p {
	font-family: 'Montserrat', sans-serif; font-style: italic;
	font-size: 18px; line-height: 1.45; letter-spacing: 0.09px;
	color: #334155; margin: 0;
}

/* Sidebar (Pattern B). 24px gap between cards per Figma. */
.et-sidebar { display: flex; flex-direction: column; gap: 24px; }
.et-sidebar__card {
	background: var(--cs-white);
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 24px 25px;
	box-shadow: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.05);
	display: flex; flex-direction: column; gap: 16px;
}
.et-sidebar__card h3 {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 18px; line-height: 28px;
	color: var(--cs-black); margin: 0;
}
.et-sidebar__card .btn--primary,
.et-sidebar__card .btn--outline {
	width: 100%; height: 50px; border-radius: 10px;
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
}
.et-sidebar__card--quick { background: #f9fafb; box-shadow: none; }
.et-sidebar__card--quick h3 {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 18px; line-height: 1.4; letter-spacing: 0.09px;
}
.et-sidebar__card--cta {
	background: rgba(179, 27, 27, .05);
	border: 1px solid rgba(179, 27, 27, .20);
	box-shadow: none;
	gap: 12px;
}
.et-sidebar__card--cta .btn--outline {
	height: 40px;
	background: var(--cs-white);
	border: 2px solid var(--cs-red); color: var(--cs-red);
	font-size: 14px; line-height: 20px;
}
.et-sidebar__card--center { text-align: center; align-items: center; }
.et-sidebar__card--center h3 {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 18px; line-height: 1.4; letter-spacing: 0.09px;
}
.et-sidebar__cta-text {
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px;
	color: #4a5565; margin: 0;
}

/* Quick Facts: label gray, value Montserrat Medium #101828. */
.et-quick-facts { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.et-quick-facts > div { display: flex; flex-direction: column; gap: 4px; }
.et-quick-facts dt {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #6a7282;
}
.et-quick-facts dd {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #101828;
	margin: 0;
}
/* Stack the sidebar UNDER the main column once the viewport gets too narrow
   to comfortably fit both at design widths. 1024px is the right cutoff:
   below it the 794px main + 360px sidebar + 24px gap + 2× 30px pad =
   1238px which won't fit, so we stack. */
@media (max-width: 1024px) {
	.et-single--sidebar {
		grid-template-columns: 1fr;
		padding: 32px var(--container-pad);
		gap: 24px;
	}
	.et-author-card { flex-direction: column; align-items: stretch; gap: 16px; }
	.et-author-card__photo { width: 100%; height: auto; aspect-ratio: 1; }
}
@media (max-width: 640px) {
	.et-hero { height: 200px; }
	.et-hero__title { font-size: 20px; }
	.et-single--wide,
	.et-single--sidebar { padding-top: 32px; padding-bottom: 48px; }
	.et-single--wide .et-main { gap: 32px; }
}

/* ==========================================================================
   Gallery lightbox (modal)
   ========================================================================== */
.modal {
	position: fixed; inset: 0; z-index: var(--z-modal);
	display: none;
	align-items: center; justify-content: center;
	padding: 20px;
	background: rgba(10, 15, 28, .72);
	backdrop-filter: blur(4px);
}
.modal.is-open { display: flex; }
.modal__panel {
	position: relative;
	width: 100%; max-width: 828px;
	max-height: 92vh; overflow: auto;
	background: var(--cs-white);
	border-radius: var(--radius-card-lg);
	box-shadow: var(--shadow-lg);
	padding: 24px;
}
.modal__close {
	position: absolute; top: 16px; right: 16px;
	width: 40px; height: 40px; border-radius: var(--radius-pill);
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--cs-gray-100);
}
.modal__close:hover { background: var(--cs-gray-200); }
.modal__title { font-size: 22px; font-weight: 600; color: var(--cs-black); margin-bottom: 8px; }
.modal__subtitle { font-size: 14px; color: var(--cs-gray-500); margin-bottom: 24px; }

/* --- Lightbox modal (Figma 220945:12327 / 220955:40913) --- */
.modal--lightbox .modal__panel { max-width: 800px; padding: 16px 24px 24px; }

/* Download confirmation modal — Issue #20. Sized like an alert card. */
.modal--download-confirm .modal__panel.download-confirm__panel {
	max-width: 460px; padding: 28px;
	display: flex; flex-direction: column; gap: 20px;
}
.download-confirm__header { display: flex; align-items: center; gap: 14px; }
.download-confirm__icon {
	flex: 0 0 36px; color: var(--cs-red);
	background: rgba(160, 0, 30, 0.08);
	border-radius: 50%; padding: 8px; box-sizing: content-box;
}
.download-confirm__title {
	font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 20px; line-height: 1.3; margin: 0; color: var(--cs-black);
}
.download-confirm__body { display: flex; flex-direction: column; gap: 10px; }
.download-confirm__lead {
	font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 1.5;
	color: #1f2937; margin: 0;
}
.download-confirm__note {
	font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 1.5;
	color: #6b7280; margin: 0;
}
.download-confirm__footer { display: flex; gap: 12px; }
.download-confirm__btn { flex: 1 1 0; min-width: 0; height: 46px; }
.lightbox__close { top: 16px; right: 16px; }

.lightbox__header { padding-right: 40px; /* leave room for close X */ margin-bottom: 12px; }
.lightbox__title {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 20px; line-height: 1.2; letter-spacing: 0.1px;
	color: #1f2937;
	margin: 0 0 4px;
}
.lightbox__sub { display: flex; align-items: center; gap: 12px; }
.lightbox__date {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #6b7280;
}
.lightbox__download {
	color: #6b7280; display: inline-flex; align-items: center; gap: 6px;
	transition: color var(--dur-fast) var(--ease);
	font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px;
	text-decoration: none;
}
.lightbox__download:hover { color: var(--cs-red); }
.lightbox__download.is-disabled {
	color: #c1c5cd;
	pointer-events: none;
}
.lightbox__download.is-shake { animation: cs-shake 0.4s ease-in-out; }
@keyframes cs-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}
/* Select-mode toggle button on the lightbox header. Same gray-on-default,
   red-on-hover pattern as the download link; flips to a red filled pill
   when active so it reads as "we're in select mode now". */
.lightbox__select-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid var(--cs-border);
	border-radius: 999px;
	color: #6b7280;
	font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13px;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lightbox__select-toggle:hover { color: var(--cs-red); border-color: var(--cs-red); }
.lightbox__select-toggle.is-active {
	background: var(--cs-red); color: var(--cs-white); border-color: var(--cs-red);
}
/* Checkmark overlay on each thumbnail — hidden by default, shown in select mode. */
.lightbox__thumb { position: relative; }
.lightbox__thumb-check {
	position: absolute; top: 6px; right: 6px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	border: 1.5px solid var(--cs-border);
	display: none; align-items: center; justify-content: center;
	color: transparent;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lightbox--selecting .lightbox__thumb-check { display: inline-flex; }
.lightbox--selecting .lightbox__thumb.is-selected .lightbox__thumb-check {
	background: var(--cs-red); border-color: var(--cs-red); color: #ffffff;
}
.lightbox--selecting .lightbox__thumb.is-selected {
	outline: 2px solid var(--cs-red); outline-offset: -2px;
}
/* In select mode, suppress the "active hero" outline (it conflicts visually). */
.lightbox--selecting .lightbox__thumb.is-active:not(.is-selected) { outline: none; }

/* Contextual helper bar — only visible while in select mode. Sits between the
   meta strip and the hero so users immediately see "tap to select" guidance. */
.lightbox__select-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 10px 14px;
	margin-bottom: 12px;
	background: rgba(160, 0, 30, 0.06);
	border: 1px solid rgba(160, 0, 30, 0.15);
	border-radius: 10px;
	font-family: 'Open Sans', sans-serif; font-size: 13px;
	color: #1f2937;
}
.lightbox__select-bar[hidden] { display: none; }
.lightbox__select-bar-hint {
	display: inline-flex; align-items: center; gap: 8px;
	color: #4b5563;
	min-width: 0;
}
.lightbox__select-bar-hint svg { color: var(--cs-red); flex: 0 0 14px; }
.lightbox__select-bar-hint strong { color: var(--cs-red); font-weight: 600; }
.lightbox__select-bar-actions {
	display: inline-flex; align-items: center; gap: 6px;
	flex-shrink: 0;
}
.lightbox__select-link {
	background: transparent; border: 0; padding: 4px 6px;
	color: var(--cs-red); font-weight: 600; cursor: pointer;
	font-family: 'Inter', sans-serif; font-size: 13px;
}
.lightbox__select-link:hover { text-decoration: underline; }
@media (max-width: 560px) {
	.lightbox__select-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
}

.lightbox__meta {
	background: #f8fafc; border-radius: 12px;
	padding: 12px; margin-bottom: 16px;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.lightbox__meta-cell { min-width: 0; }
.lightbox__meta-cell[hidden] { display: none; }
.lightbox__meta-label {
	display: flex; align-items: center; gap: 4px;
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px; letter-spacing: 0.07px;
	color: #64748b;
	margin-bottom: 4px;
}
.lightbox__meta-label svg { color: var(--cs-red); flex: 0 0 auto; }
.lightbox__meta-value {
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px; letter-spacing: 0.07px;
	color: #020617;
	margin: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lightbox__hero {
	position: relative; width: 100%; aspect-ratio: 4/3;
	overflow: hidden; border-radius: 12px;
	background: var(--cs-gray-100); margin-bottom: 16px;
}
.lightbox__hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	color: #ffffff; background: rgba(255, 255, 255, .12);
	backdrop-filter: blur(6px);
	transition: background var(--dur-fast) var(--ease);
	border: 0; cursor: pointer;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.lightbox__nav:disabled { opacity: .35; cursor: default; }
.lightbox__nav--prev { left: 10px; }
.lightbox__nav--next { right: 10px; }

.lightbox__thumbs {
	display: flex; gap: 16px; flex-wrap: wrap;
}
.lightbox__thumb {
	width: 120px; height: 90px; border-radius: 4px;
	overflow: hidden; background: var(--cs-gray-100);
	cursor: pointer; border: 1px solid transparent;
	padding: 0;
	transition: border-color var(--dur-fast) var(--ease);
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__thumb.is-active { border-color: var(--cs-red); }
.lightbox__thumb:focus-visible { outline: 2px solid var(--cs-red); outline-offset: 2px; }

/* Empty-album state — modal opens with title + meta but no photos yet. */
.modal--lightbox.is-empty .lightbox__hero-img,
.modal--lightbox.is-empty .lightbox__nav,
.modal--lightbox.is-empty .lightbox__thumbs { display: none; }
.modal--lightbox.is-empty .lightbox__hero {
	display: flex; align-items: center; justify-content: center;
	background: #f8fafc; border: 1px dashed #e5e7eb;
	color: #6b7280;
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px; letter-spacing: 0.07px;
}
.modal--lightbox.is-empty .lightbox__hero::before {
	content: "No photos uploaded for this album yet.";
}

/* --- Upload modal chrome (Figma 221424:35414) — form rendered by Ninja Forms inside .upload__body --- */
.modal--upload .modal__panel {
	max-width: 672px; padding: 32px;
	border-radius: 14px;
}
.upload__close { top: 16px; right: 16px; }

.upload__header { margin-bottom: 16px; }
.upload__title {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 20px; line-height: 1.2; color: #020617;
	margin: 0 0 8px;
}
.upload__note {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 1.5; color: #64748b;
	margin: 0;
}
.upload__note strong { color: #1f2937; font-weight: 500; }

.upload__body { /* Ninja Forms slot — let NF inherit container width. */ }
.upload__form-slot {
	min-height: 1px;
}
.upload__form-slot--missing {
	padding: 32px 24px;
	border: 1px dashed var(--cs-border);
	border-radius: 12px;
	background: #fffaf0;
	color: #92400e;
	font-size: 14px;
	text-align: center;
}
.upload__form-slot--missing strong { color: #78350f; }

.upload__signin-cta {
	padding: 32px 24px; text-align: center;
	border: 1px dashed var(--cs-border); border-radius: 12px;
	background: #f8fafc;
}
.upload__signin-cta p {
	font-family: 'Montserrat', sans-serif; font-size: 16px;
	color: #64748b; margin: 0 0 16px;
}

/* --- Mobile adaptations (Figma 220955:40913 / 220953:40665) --- */
@media (max-width: 768px) {
	.modal { padding: 12px; }
	.modal--lightbox .modal__panel { padding: 16px 16px 16px; max-width: 100%; }
	.modal--upload .modal__panel { padding: 24px 20px; max-width: 100%; }

	.lightbox__title { font-size: 16px; }
	.lightbox__date { font-size: 14px; }

	/* The mobile lightbox shows just the date • photos subline in the header —
	   the 4-cell Date/Location/Opponent/Uploaded-by grid is desktop-only. */
	.lightbox__meta { display: none; }
	.lightbox__hero { aspect-ratio: 4/3; }
	.lightbox__nav { width: 40px; height: 40px; }
	.lightbox__nav--prev { left: 6px; }
	.lightbox__nav--next { right: 6px; }
	.lightbox__thumb { width: 60px; height: 45px; }
	.lightbox__thumbs { gap: 8px; }

	.upload__title { font-size: 18px; }
	.upload__note { font-size: 14px; }
}

/* --- Propose Event modal chrome (Figma 221150:6708) --- */
.modal--propose .modal__panel {
	max-width: 672px; padding: 0;
	border-radius: 14px;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
	overflow: hidden;
	display: flex; flex-direction: column;
}
.propose__close { top: 16px; right: 16px; }
.propose__header { padding: 32px 32px 16px; }
.propose__title {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 20px; line-height: 1.2; letter-spacing: 0.1px;
	color: #020617; margin: 0 0 8px;
}
.propose__subtitle {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #64748b; margin: 0;
	max-width: 579px;
}
.propose__body { padding: 0 32px 32px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.propose__form-slot--missing {
	padding: 32px 24px;
	border: 1px dashed var(--cs-border);
	border-radius: 12px;
	background: #fffaf0;
	color: #92400e;
	font-size: 14px;
	text-align: center;
}
.propose__form-slot--missing strong { color: #78350f; }

@media (max-width: 720px) {
	.modal--propose .modal__panel { max-width: 100%; }
	.propose__header { padding: 24px 20px 12px; }
	.propose__body { padding: 0 20px 24px; }
}

/* --- Submit to Extra Time modal — same chrome family as Propose Event --- */
.modal--extra-time-submit .modal__panel {
	max-width: 720px; padding: 0;
	border-radius: 14px;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
	overflow: hidden;
	display: flex; flex-direction: column;
	max-height: 92vh;
}
.et-submit-modal__close { top: 16px; right: 16px; }
.et-submit-modal__header {
	padding: 32px 32px 16px;
	display: flex; flex-direction: column; gap: 8px;
}
.et-submit-modal__title {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 22px; line-height: 1.2; letter-spacing: 0.1px;
	color: #020617; margin: 0;
}
.et-submit-modal__sub {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px; letter-spacing: 0.07px;
	color: #64748b; margin: 0;
}
.et-submit-modal__as {
	margin-top: 8px;
	padding: 8px 12px;
	background: #f7e8e8; color: #1f2937;
	border-radius: 10px;
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 13px; line-height: 1.4;
	display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
	align-self: flex-start;
}
.et-submit-modal__as strong { font-weight: 600; color: var(--cs-red); }
.et-submit-modal__as-email { color: #64748b; }
.et-submit-modal__body {
	padding: 0 32px 32px;
	flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
@media (max-width: 720px) {
	.modal--extra-time-submit .modal__panel { max-width: 100%; max-height: 100vh; border-radius: 0; }
	.et-submit-modal__header { padding: 24px 20px 12px; }
	.et-submit-modal__body { padding: 0 20px 24px; }
}

/* ==========================================================================
   Event details modal — Figma node 221069:78462 ("Picture overview")
   Populated by main.js from .event-card data attributes.
   ========================================================================== */

/* When the JS hides a section/cell/list-item, the `hidden` attribute should win
   over our display:flex/grid rules below. Without !important the section
   header still renders with empty body text under it (bad UX). */
.modal--event [hidden] { display: none !important; }

.modal--event .modal__panel {
	max-width: 1200px;
	width: 100%;
	padding: 0;
	border-radius: 16px;
	overflow: hidden;
	display: flex; flex-direction: column;
	max-height: 92vh;
	background: #ffffff;
}

/* Close button — top-right corner of the modal, overlaid on hero. */
.event-modal__close {
	position: absolute; top: 16px; right: 16px;
	width: 36px; height: 36px; border-radius: var(--radius-pill);
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .9); color: #1f2937;
	border: 0; cursor: pointer; z-index: 3;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
	transition: background var(--dur-fast) var(--ease);
}
.event-modal__close:hover { background: #ffffff; }

/* Hero banner image (181px tall in Figma; capped on small screens). */
.event-modal__hero {
	width: 100%;
	height: 181px;
	overflow: hidden;
	flex-shrink: 0;
	background: #f3f4f6;
}
.event-modal__hero-img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}

/* Scrollable body wrapper — sits between hero and sticky footer. */
.event-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 24px;
	display: flex; flex-direction: column; gap: 24px;
}

/* Header: badge + title. */
.event-modal__header {
	display: flex; flex-direction: column; gap: 12px;
	align-items: flex-start;
}
.event-modal__badge { align-self: flex-start; }
.event-modal__title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0.1px;
	color: #000000;
	margin: 0;
}

/* Meta strip — single gray-100 (#f3f4f6) rounded container, 2 equal columns. */
.event-modal__meta-strip {
	background: #f3f4f6;
	border-radius: 12px;
	padding: 16px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
	align-items: start;
}
.event-meta-cell {
	display: flex; align-items: flex-start; gap: 12px;
	min-width: 0;
}
.event-meta-cell__icon {
	flex-shrink: 0; color: var(--cs-red);
	width: 20px; height: 20px;
	margin-top: 4px;
}
.event-meta-cell__body {
	min-width: 0;
	display: flex; flex-direction: column; gap: 4px;
}
.event-meta-cell__label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px; line-height: 24px;
	letter-spacing: 0.08px;
	color: #4a5565;
	text-transform: none;
}
.event-meta-cell__value {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px; line-height: 24px;
	letter-spacing: 0.08px;
	color: #101828;
	word-break: break-word;
}
.event-meta-cell__value--strong { font-weight: 500; }
.event-meta-cell__note {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px; line-height: 24px;
	letter-spacing: 0.08px;
	color: #4a5565;
	word-break: break-word;
}

/* About / Additional information sections (flat, no background). */
.event-modal__section {
	display: flex; flex-direction: column; gap: 12px;
}
.event-modal__section-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 0.1px;
	color: #1f2937;
	margin: 0;
}
.event-modal__section-body {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 16px; line-height: 24px;
	letter-spacing: 0.08px;
	color: #364153;
}
.event-modal__section-body p { margin: 0 0 8px; }
.event-modal__section-body p:last-child { margin-bottom: 0; }

/* Contact information — gray-50 (#f9fafb) rounded container, horizontal row. */
.event-modal__contact {
	background: #f9fafb;
	border-radius: 12px;
	padding: 16px;
	display: flex; flex-direction: column; gap: 12px;
}
.event-modal__contact .event-modal__section-title {
	font-size: 20px;
}
/* Scoped to the event-details MODAL only — the bare selector previously
   leaked `align-items: center` onto the single-event page's contact list. */
.event-modal__contact .event-contact-list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: 24px;
	align-items: center;
}
.event-modal__contact .event-contact-list__item {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 14px; line-height: 20px;
	letter-spacing: 0.07px;
	color: #6b7280;
}
.event-modal__contact .event-contact-list__item svg {
	flex-shrink: 0;
	width: 16px; height: 16px;
	color: var(--cs-red);
}
.event-modal__contact .event-contact-list__item a {
	color: #6b7280; text-decoration: none;
}
.event-modal__contact .event-contact-list__item a:hover { color: var(--cs-red); text-decoration: underline; }

/* Sticky footer — wraps to multiple rows on narrow viewports.
   Originally 2 equal-width buttons (Cancel + RSVP); now 4: Cancel, Copy link,
   Add to Calendar, RSVP. All share `flex: 1 1 0` so they stay equal-width. */
.event-modal__footer {
	flex-shrink: 0;
	display: flex; gap: 12px; flex-wrap: wrap;
	padding: 12px 24px;
	background: #ffffff;
	box-shadow: 0 -3px 3px rgba(0, 0, 0, .1), 0 2px 2px rgba(0, 0, 0, .1);
	position: relative; z-index: 1;
}
.event-modal__footer-btn {
	flex: 1 1 140px;
	min-width: 0;
	height: 46px;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 14px; letter-spacing: 0.075px;
	border-radius: 8px;
	padding: 14px 12px;
	white-space: nowrap;
}
/* Add-to-Calendar wrapper hosts the trigger + a popover menu. */
.event-modal__cal { position: relative; flex: 1 1 160px; display: flex; }
.event-modal__cal .event-modal__footer-btn { flex: 1 1 100%; }
.event-modal__cal-list {
	position: absolute; bottom: calc(100% + 8px); right: 0; left: auto;
	background: #ffffff; border: 1px solid var(--cs-border); border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	list-style: none; margin: 0; padding: 6px 0;
	min-width: 220px; z-index: 10;
}
.event-modal__cal-list li { margin: 0; }
.event-modal__cal-list li a {
	display: block; padding: 10px 14px;
	color: #1f2937; text-decoration: none;
	font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.3;
}
.event-modal__cal-list li a:hover,
.event-modal__cal-list li a:focus { background: var(--cs-gray-100); color: var(--cs-red); }

/* Mobile */
@media (max-width: 768px) {
	.modal--event { padding: 0; }
	.modal--event .modal__panel { max-width: 100%; max-height: 100vh; border-radius: 0; }
	.event-modal__hero { height: 140px; }
	.event-modal__body { padding: 20px; gap: 20px; }
	.event-modal__title { font-size: 18px; }
	.event-modal__meta-strip { grid-template-columns: 1fr; gap: 16px; }
	.event-modal__section-title { font-size: 18px; }
	.event-modal__footer { padding: 12px 16px; gap: 12px; }
}

/* ==========================================================================
   Event RSVP modal — opens on top of the event-details modal.
   Hosts the shared Ninja Forms RSVP form (one instance per page).
   ========================================================================== */
.modal--event-rsvp .modal__panel {
	max-width: 640px;
	width: 100%;
	padding: 0;
	border-radius: 16px;
	overflow: hidden;
	display: flex; flex-direction: column;
	max-height: 92vh;
	background: #ffffff;
}
.event-rsvp-modal__close {
	position: absolute; top: 16px; right: 16px;
	width: 36px; height: 36px; border-radius: var(--radius-pill);
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--cs-gray-100); color: #1f2937;
	border: 0; cursor: pointer; z-index: 3;
	transition: background var(--dur-fast) var(--ease);
}
.event-rsvp-modal__close:hover { background: var(--cs-gray-200); }

.event-rsvp-modal__header {
	padding: 24px 24px 0;
	padding-right: 64px; /* leave room for close X */
	display: flex; flex-direction: column; gap: 4px;
}
.event-rsvp-modal__title {
	font-family: 'Montserrat', sans-serif; font-weight: 600;
	font-size: 22px; line-height: 1.2; color: var(--cs-black);
	margin: 0;
}
.event-rsvp-modal__sub {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px; color: var(--cs-gray-500);
	margin: 0;
}
.event-rsvp-modal__sub:empty { display: none; }

.event-rsvp-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px 24px 24px;
}
/* NF form chrome inside the modal — keep margins tight so the form fills the body cleanly. */
.event-rsvp-modal__body .nf-form-cont { margin: 0; }

/* Disabled-state styling for NF submit buttons (Issue #31 sub-task —
   propose-event client-side validator disables submit while dates are
   invalid). NF doesn't ghost the button on `disabled` by default. */
.nf-form-cont input[type="submit"][disabled],
.nf-form-cont button[type="submit"][disabled],
.nf-form-cont .nf-element.is-disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
	pointer-events: none;
}
/* Injected date-error for the Propose-Event client-side validator. Styled
   to match NF's regular field-error look (red text, small font) but uses
   our own `.is-visible` toggle so we don't fight NF's `.nf-fail` ancestor
   requirement. Sits as a sibling between End-date wrap and Duration. */
.cs-date-error {
	display: none;
	margin: 6px 0 12px;
	color: #b31b1b;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px; line-height: 1.45;
}
.cs-date-error.is-visible { display: block; }

@media (max-width: 640px) {
	.modal--event-rsvp { padding: 0; }
	.modal--event-rsvp .modal__panel { max-width: 100%; max-height: 100vh; border-radius: 0; }
	.event-rsvp-modal__header { padding: 20px 20px 0; padding-right: 56px; }
	.event-rsvp-modal__body { padding: 12px 20px 20px; }
	.event-rsvp-modal__title { font-size: 20px; }
}

/* ==========================================================================
   Newsletter year/month list
   ========================================================================== */
.newsletter-year {
	display: flex; align-items: center; gap: 24px; flex-wrap: nowrap;
	padding: 32px;
	border-radius: 14px;
	background: var(--cs-white);
	box-shadow: 0 3px 1.5px rgba(0, 0, 0, .12);
}
.newsletter-year__label {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 20px; line-height: 1.2; letter-spacing: 0.1px;
	color: #101728; flex-shrink: 0;
}
/* Files stay in a single row that scrolls horizontally (Figma 220955:41792) —
   they do NOT wrap. The year label stays fixed; only this row scrolls. */
.newsletter-year__items {
	display: flex; flex-wrap: nowrap; gap: 12px;
	flex: 1 1 auto; min-width: 0;
	overflow-x: auto; overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, .25) transparent;
}
.newsletter-year__items::-webkit-scrollbar { height: 6px; }
.newsletter-year__items::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); border-radius: 3px; }
.newsletter-year__items::-webkit-scrollbar-track { background: transparent; }
.newsletter-item {
	display: inline-flex; align-items: center; gap: 8px;
	flex: 0 0 auto;
	height: 48px; padding: 0 24px;
	border: 0; border-radius: var(--radius-pill);
	background: var(--cs-red); color: var(--cs-white);
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px;
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease);
}
.newsletter-item:hover { background: var(--cs-red-dark); color: var(--cs-white); opacity: 1; }
.newsletter-item svg { width: 16px; height: 16px; color: currentColor; }

/* ==========================================================================
   Board page grid
   ========================================================================== */
.board {
	padding: 64px var(--container-pad);
}
.board__inner {
	max-width: var(--container-max); margin: 0 auto;
}
.board__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 960px) {
	.board__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.board__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   "Who We Are" intro (About page — Figma 220844:9796)
   ========================================================================== */
.about-intro {
	padding: 60px var(--container-pad);
	background: var(--cs-white);
	scroll-margin-top: 90px; /* clears the header when jumped to via #who-we-are */
}
.about-intro__inner {
	max-width: 1096px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 24px; align-items: center;
	text-align: center;
}
.about-intro__body {
	max-width: 1064px;
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 20px; line-height: 1.5; letter-spacing: 0.1px;
	color: #1f2937;
}
.about-intro__body p { margin: 0 0 1em; }
.about-intro__body p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
	.about-intro { padding: 40px var(--container-pad); }
	.about-intro__body { font-size: 16px; line-height: 1.6; }
}

/* ==========================================================================
   Mission cards (About page)
   ========================================================================== */
.mission {
	padding: 80px var(--container-pad);
	background: #f5f5f5;
}
.mission__inner {
	max-width: var(--container-max); margin: 0 auto;
	display: flex; flex-direction: column; gap: 32px; align-items: center;
}
.mission__cards {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	width: 100%;
}
.mission-card {
	display: flex; flex-direction: column; gap: 16px;
	padding: 25px;
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: 14px;
	text-align: center;
	box-shadow: 0 1px 1.5px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.10);
	transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.mission-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mission-card__icon {
	width: 64px; height: 64px; border-radius: var(--radius-pill);
	background: rgba(179, 27, 27, .10); color: var(--cs-red);
	display: inline-flex; align-items: center; justify-content: center;
	margin: 0 auto;
}
.mission-card__icon img { width: 32px; height: 32px; }
.mission-card__icon svg { color: var(--cs-red); }
.mission-card__title {
	font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 18px; line-height: 1; letter-spacing: 0.09px;
	color: #000; margin: 0;
}
.mission-card__body {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #1F2937; margin: 0;
}

/* Reusable dark stats band (About, Support) */
.stats-band {
	background: var(--cs-navy);
	padding: 32px var(--container-pad);
}
.stats-band__inner {
	max-width: var(--container-max); margin: 0 auto;
	display: flex; flex-wrap: nowrap;
	gap: clamp(16px, 3vw, 40px);
	align-items: center; justify-content: center;
}
.stats-band__item { flex: 1 1 0; min-width: 0; text-align: center; }
.stats-band__num {
	font-family: 'Inter', sans-serif; font-weight: 600;
	/* Scale down between the menu breakpoint and the stacking point so three
	   columns never crowd in the mid-range (matches the nav fix). */
	font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: 0.24px;
	color: var(--cs-white);
}
.stats-band__label {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: clamp(15px, 1.6vw, 18px); line-height: 1.2; letter-spacing: 0.09px;
	color: var(--cs-white);
}

/* Funding priorities tiles */
.priorities {
	padding: 64px var(--container-pad);
	background: var(--cs-gray-50);
}
.priorities__inner {
	max-width: var(--container-max); margin: 0 auto;
	display: flex; flex-direction: column; gap: 32px; align-items: center;
}
.priorities__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	width: 100%;
}
.priorities__tile {
	background: var(--cs-white);
	padding: 16px;
	min-height: 140px;
	border: 1px solid var(--cs-border);
	border-bottom: 1px solid var(--cs-red);
	border-radius: 8px;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 8px;
	text-align: center;
}
.priorities__tile-mark {
	font-family: var(--font-heading); font-weight: 700;
	font-size: 30px; line-height: 1;
	color: var(--cs-black);
}
.priorities__tile-body {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: var(--cs-black);
}
.priorities__tile-body p { margin: 0; }

/* Stewardship tiers (donate_tiers) override */
.donate-tiers { gap: 24px; }

/* Support contact form card (Figma 220887:131130 — 588px white card around the NF) */
.support-contact-card {
	max-width: 588px; width: 100%;
	margin: 0 auto;
	padding: 24px;
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: 14px;
}

/* Uppercase only the impact + priorities section headings (Figma) */
.support-section--impact .section-heading h2,
.priorities .section-heading h2 {
	text-transform: uppercase;
	letter-spacing: 0.15px;
}

/* Support sections general */
.support-section {
	padding: 64px var(--container-pad);
}
.support-section__inner {
	max-width: var(--container-max); margin: 0 auto;
	display: flex; flex-direction: column; gap: 32px; align-items: center;
}
.support-section--impact .section-heading p { max-width: 800px; font-size: 15px; line-height: 1.7; color: var(--cs-gray-600); }
.support-section--impact .support-section__body { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; }
.support-section--impact .support-section__body p { font-size: 15px; line-height: 1.7; color: var(--cs-gray-600); margin: 0 0 16px; }
.support-section--impact .support-section__body p:last-child { margin-bottom: 0; }

@media (max-width: 960px) {
	.mission__cards { grid-template-columns: 1fr; }
	.priorities__grid { grid-template-columns: 1fr; }
	/* Stats band stays 3-in-a-row down to 768px now (flex), so no 1-col collapse here. */
}

/* Newsletter archive (year-grouped) */
/* Sub-nav strip rendered on the Newsletter page so it visually belongs to
   the Extra Time tabset. Reuses .tabs / .tabs__item / .extra-time__tabs
   styling for the chips themselves; this wrapper just provides padding
   and the same max-width container the rest of the page uses. */
.extra-time-subnav { padding: 32px var(--container-pad) 0; }
.extra-time-subnav__inner {
	max-width: var(--container-max); margin: 0 auto;
}
/* Shrink the top padding on the newsletter list when the sub-nav is sitting
   above it so the two strips don't stack with double whitespace. */
.extra-time-subnav + .newsletter-archive { padding-top: 32px; }

.newsletter-archive { padding: 64px var(--container-pad); }
.newsletter-archive__inner {
	max-width: var(--container-max); margin: 0 auto;
	display: flex; flex-direction: column; gap: 32px;
}

/* ==========================================================================
   Bylaws (long-form content)
   ========================================================================== */
.bylaws {
	max-width: 792px; margin: 0 auto;
	padding: 64px var(--container-pad);
	display: flex; flex-direction: column; gap: 40px;
}
.bylaws__section { display: flex; flex-direction: column; gap: 8px; page-break-inside: avoid; break-inside: avoid; }
.bylaws__section-h {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px; font-weight: 500;
	line-height: 1.2; letter-spacing: 0.09px;
	color: #020617; margin: 0;
}
.bylaws__section-body {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #334155;
}
.bylaws__section-body p { margin: 0 0 16px; }
.bylaws__section-body p:last-child { margin-bottom: 0; }
.bylaws__section-body h4 {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px; font-weight: 500;
	line-height: 24px; margin: 24px 0 8px;
	color: #020617;
}
.bylaws__section-body h4:first-child { margin-top: 0; }
.bylaws__section-body ul,
.bylaws__section-body ol { margin: 0 0 16px; padding-left: 24px; }

.bylaws__footer {
	display: flex; flex-direction: column; gap: 16px;
	padding-top: 16px;
	border-top: 2px solid var(--cs-border);
}
.bylaws__adoption {
	font-family: 'Open Sans', sans-serif;
	font-style: italic; font-size: 16px; line-height: 26px;
	color: #4a5565; margin: 0;
}
.bylaws__revised {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px; line-height: 24px;
	color: #4a5565; margin: 0;
	font-style: normal;
	border-top: none; padding-top: 0;
}
.bylaws__actions {
	display: flex; justify-content: flex-end;
}

@media (max-width: 768px) {
	.bylaws { padding: 40px 16px; gap: 32px; }
	/* Download button hugs its content and stays right-aligned on mobile too
	   (Figma 220955:43777 — button is auto-width, not full width). */
	.bylaws__actions { justify-content: flex-end; }
}

/* ==========================================================================
   About / Board zig-zag timeline
   ========================================================================== */
/* Timeline section wrapper — gives the "Our Journey" heading breathing room
   from the gray Mission section above and the red CTA band below. */
.timeline-section {
	padding: 80px var(--container-pad);
	background: var(--cs-white);
}
.timeline-section .mission__inner {
	gap: 40px;
}
.timeline {
	max-width: 1024px; margin: 0 auto;
	position: relative; padding: 40px 0 0;
}
/* Red center line — Figma: solid red. */
.timeline::before {
	content: ""; position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 2px; background: var(--cs-red);
	transform: translateX(-1px);
}
.timeline__item {
	position: relative;
	display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center;
	gap: 24px; margin-bottom: 48px;
}
/* Timeline dot — exact Figma spec: 24px red center + 4px white border + soft drop-shadow.
   Absolutely-positioned at the true center of the row so it always aligns with
   the card regardless of grid row height (even rows had the dot drifting low). */
.timeline__dot {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 24px; height: 24px;
	border-radius: 9999px;
	background: var(--cs-red);
	border: 4px solid var(--cs-white);
	box-sizing: border-box;
	z-index: 1;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .10), 0 4px 6px -4px rgba(0, 0, 0, .10);
}
.timeline__card {
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: 14px;
	padding: 17px;
	box-shadow: var(--shadow-sm);
	width: 100%;
}
.timeline__item:nth-child(odd)  .timeline__card { grid-column: 1; }
.timeline__item:nth-child(odd)  .timeline__spacer { grid-column: 3; }
.timeline__item:nth-child(even) .timeline__card { grid-column: 3; }
.timeline__item:nth-child(even) .timeline__spacer { grid-column: 1; }
.timeline__year  {
	font-family: var(--font-heading); font-weight: 600;
	font-size: 30px; line-height: 1; letter-spacing: 0.15px;
	color: var(--cs-red); margin: 0 0 4px;
}
.timeline__title {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #1F2937; margin: 0 0 8px;
}
.timeline__body  {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #1F2937; margin: 0;
}

/* ==========================================================================
   Content area (for plain page.php / single.php)
   ========================================================================== */
.content-area {
	max-width: 840px; margin: 0 auto;
	padding: 80px var(--container-pad);
}
.content-area--center { text-align: center; }
.content-area h1, .content-area h2, .content-area h3 { margin: 1.2em 0 .5em; }
.content-area p, .content-area ul, .content-area ol { margin-bottom: 1.1em; line-height: 1.7; }
.content-area a { color: var(--cs-red); text-decoration: underline; }
.rich-text ul, .rich-text ol { padding-left: 1.25rem; }
.rich-text ul li { list-style: disc; }
.rich-text ol li { list-style: decimal; }

/* ==========================================================================
   Site footer
   ========================================================================== */
.site-footer { background: var(--cs-navy); color: var(--cs-white); }
.site-footer__inner {
	max-width: var(--container-wide); margin: 0 auto;
	padding: 48px var(--container-pad);
}
.site-footer__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 48px;
	padding-bottom: 48px;
}
.footer-col { display: flex; flex-direction: column; gap: 24px; }
.footer-col__title {
	font-family: var(--font-heading); font-weight: 400;
	font-size: 20px; line-height: 28px; color: var(--cs-red-400);
}
.footer-col__list { display: flex; flex-direction: column; gap: 12px; }
.footer-col__list a,
.footer-col__org,
.footer-col__email a {
	font-family: var(--font-body); font-size: 16px; line-height: 24px;
	color: var(--cs-white);
	transition: color var(--dur-fast) var(--ease);
}
.footer-col__list a:hover,
.footer-col__email a:hover { color: var(--cs-red-400); opacity: 1; }
.footer-col__email { display: flex; align-items: center; gap: 8px; }
.footer-col__email svg { width: 16px; height: 16px; flex: none; color: var(--cs-red-400); }

.social-list { display: flex; gap: 16px; }
.social-list__item {
	width: 48px; height: 48px; border-radius: var(--radius-pill);
	background: var(--cs-border-dark);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--cs-white);
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.social-list__item:hover {
	background: var(--cs-red); transform: translateY(-2px); opacity: 1;
}

.site-footer__bottom {
	border-top: 1px solid var(--cs-border-dark);
	padding-top: 20px; text-align: center;
}
.site-footer__bottom p {
	font-family: var(--font-heading); font-size: 14px; line-height: 20px;
	color: var(--cs-gray-400); letter-spacing: .07px;
}

/* ==========================================================================
   Forms (Ninja Forms minimal overrides)
   ========================================================================== */
.ninja-forms-form,
.nf-form-cont {
	font-family: var(--font-body);
}
.nf-form-content .list-select-wrap .nf-field-element > div,
.nf-form-content input[type=text],
.nf-form-content input[type=email],
.nf-form-content input[type=tel],
.nf-form-content input[type=url],
.nf-form-content input[type=number],
.nf-form-content input[type=password],
.nf-form-content textarea,
.nf-form-content select {
	border: 1px solid var(--cs-border) !important;
	border-radius: var(--radius-btn) !important;
	padding: 12px 14px !important;
	font-size: 14px !important;
	background: var(--cs-white) !important;
	color: var(--cs-gray-800) !important;
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease) !important;
}
.nf-form-content input:focus,
.nf-form-content textarea:focus,
.nf-form-content select:focus {
	border-color: var(--cs-red) !important;
	box-shadow: 0 0 0 3px rgba(179,27,27,.15) !important;
	outline: 0 !important;
}
.nf-form-content .nf-field-label label {
	font-family: var(--font-heading) !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	color: var(--cs-gray-800) !important;
}
.nf-form-content input[type=button],
.nf-form-content input[type=submit],
.nf-form-content button[type=submit] {
	background: var(--cs-red) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 14px 24px !important;
	border-radius: var(--radius-btn) !important;
	font-family: var(--font-btn) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease) !important;
}
.nf-form-content input[type=submit]:hover,
.nf-form-content button[type=submit]:hover {
	background: var(--cs-red-dark) !important;
	transform: translateY(-1px);
}
.nf-error .nf-field-element input,
.nf-error .nf-field-element textarea,
.nf-error .nf-field-element select {
	border-color: #dc2626 !important;
}

/* ==========================================================================
   Auth pages (Login, Signup)
   ========================================================================== */
.auth-wrapper {
	min-height: calc(100vh - 72px - 493px);
	display: flex; align-items: flex-start; justify-content: center;
	padding: 64px 20px;
	background: var(--cs-gray-50);
}
.auth-card {
	width: 100%; max-width: 558px;
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: 16px;
	padding: 48px;
	box-shadow: var(--shadow-sm);
}
.auth-card--wide { max-width: 788px; }
.auth-card__title {
	font-family: var(--font-heading); font-weight: 600;
	font-size: 30px; line-height: 1.15; letter-spacing: .15px;
	text-align: center; margin-bottom: 8px; color: var(--cs-black);
}
.auth-card__subtitle {
	text-align: center; color: var(--cs-gray-500); font-size: 14px;
	line-height: 20px; margin-bottom: 24px;
}
.auth-card__alt {
	text-align: center; margin-top: 24px; color: var(--cs-gray-600); font-size: 14px;
}
.auth-card__alt + .auth-card__alt { margin-top: 8px; }
.auth-card__alt--single { margin-top: 16px; }
.auth-card__alt a { color: var(--cs-red); font-weight: 600; }
.auth-card__alt a:hover { text-decoration: underline; }
/* Login card "Sign up" link is dark + bold (not red) per Figma 220957:67482. */
.auth-card__alt a.auth-card__alt-strong { color: var(--cs-black); font-weight: 700; }

/* Ninja Forms — generic input styling shared by all forms (auth, contact, RSVP, propose event, etc.) */
.nf-form-cont .nf-field-container { margin-bottom: 20px; }

/* Labels — covers every NF label structure (top-level, inside wrap, custom HTML, etc.)
   Flex with space-between so the field name sits left and any required/optional
   marker (the default NF asterisk, or the "Required"/"Optional" ::after on
   cs-required / cs-optional fields) is pushed flush right — matches Figma. */
.nf-form-cont .nf-field-label,
.nf-form-cont .nf-field-label label,
.nf-form-cont .nf-field-label .nf-label,
.nf-form-cont .nf-field-label > div,
.nf-form-cont label.label-above,
.nf-form-cont label.label-below,
.nf-form-cont label.label-left,
.nf-form-cont label.label-right,
.nf-form-cont .field-wrap > label {
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: var(--cs-gray-800) !important;
	margin-bottom: 10px !important;
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	letter-spacing: .07px !important;
	line-height: 1.4 !important;
}
.nf-form-cont .nf-field-label label { margin-bottom: 0 !important; width: 100%; }

/* Required asterisk */
.nf-form-cont .ninja-forms-req-symbol,
.nf-form-cont .ninja-forms-req,
.nf-form-cont .nf-required {
	color: var(--cs-red) !important;
	margin-left: 2px;
	font-weight: 600;
}

/* ----- Required / Optional label hint (right-aligned) -----
   In Ninja Forms admin → field → Display tab → Custom Class:
     - "cs-required"  to show a right-aligned "Required" hint
     - "cs-optional"  to show a right-aligned "Optional" hint
   Replaces the default asterisk on those fields and matches the Figma
   "First name … Required" / "Phone … Optional" pattern. */
/* Match cs-required / cs-optional on any wrapper — File Upload uses a custom
   container class (`.fileupload-container`) instead of `.nf-field-container`,
   so we drop the qualifier and rely solely on the cs-* class being on some
   ancestor of `.nf-field-label`. */
.nf-form-cont .cs-required .nf-field-label,
.nf-form-cont .cs-optional .nf-field-label {
	display: flex !important;
	width: 100%;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
/* Hide the default asterisk / required mark on tagged fields — the "Required"
   text replaces it. The [class*="req"] catch-all covers any req-symbol variant
   NF or its File Upload add-on may render. */
.nf-form-cont .cs-required .ninja-forms-req-symbol,
.nf-form-cont .cs-required .ninja-forms-req,
.nf-form-cont .cs-required .nf-required,
.nf-form-cont .cs-required .nf-field-label .ninja-forms-req-symbol,
.nf-form-cont .cs-required .nf-field-label [class*="req-symbol"],
.nf-form-cont .cs-optional .ninja-forms-req-symbol,
.nf-form-cont .cs-optional .ninja-forms-req,
.nf-form-cont .cs-optional .nf-required {
	display: none !important;
}
.nf-form-cont .cs-required .nf-field-label::after,
.nf-form-cont .cs-optional .nf-field-label::after {
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.07px;
	color: var(--cs-gray-500);
	flex: none;
	text-align: right;
}
.nf-form-cont .cs-required .nf-field-label::after {
	content: "Required";
}
.nf-form-cont .cs-optional .nf-field-label::after {
	content: "Optional";
}

.nf-form-cont .nf-field-element input[type="text"],
.nf-form-cont .nf-field-element input[type="email"],
.nf-form-cont .nf-field-element input[type="password"],
.nf-form-cont .nf-field-element input[type="tel"],
.nf-form-cont .nf-field-element input[type="number"],
.nf-form-cont .nf-field-element input[type="url"],
.nf-form-cont .nf-field-element textarea,
.nf-form-cont .nf-field-element select {
	width: 100% !important;
	padding: 14px 16px !important;
	border: 1px solid var(--cs-border) !important;
	border-radius: 8px !important;
	font-family: var(--font-heading) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--cs-gray-800) !important;
	background: var(--cs-white) !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.nf-form-cont .nf-field-element input::placeholder,
.nf-form-cont .nf-field-element textarea::placeholder {
	color: var(--cs-gray-500); opacity: 1;
	font-family: var(--font-heading); font-weight: 500;
}
/* Default textarea height across all NF forms (Figma 221424:14748). */
.nf-form-cont .nf-field-element textarea {
	min-height: 120px !important;
	resize: vertical;
}
.nf-form-cont .nf-field-element input:focus,
.nf-form-cont .nf-field-element textarea:focus,
.nf-form-cont .nf-field-element select:focus {
	border-color: var(--cs-red) !important;
	box-shadow: 0 0 0 3px rgba(179, 27, 27, .12) !important;
	outline: none !important;
}

/* Custom dropdown chevron for every <select> in NF forms — replaces the
   browser/OS default arrow with a clean down-chevron that matches Figma
   (gray-600 stroke, sits flush right with 16px from the edge). */
.nf-form-cont .nf-field-element select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 16px center !important;
	background-size: 14px 14px !important;
	padding-right: 40px !important;
}
.nf-form-cont .nf-field-element select::-ms-expand { display: none; }
.nf-form-cont .nf-field-description {
	font-family: var(--font-heading) !important;
	font-size: 14px !important;
	color: var(--cs-gray-400) !important;
	margin-top: 6px !important;
}

/* ----- Error states ----- */
/* Field with error → red border + soft red glow */
.nf-form-cont .nf-error .nf-field-element input,
.nf-form-cont .nf-error .nf-field-element textarea,
.nf-form-cont .nf-error .nf-field-element select,
.nf-form-cont .nf-field-element input.ninja-forms-field-error,
.nf-form-cont .nf-field-element textarea.ninja-forms-field-error,
.nf-form-cont .nf-field-element select.ninja-forms-field-error {
	border-color: var(--cs-red) !important;
	box-shadow: 0 0 0 3px rgba(179, 27, 27, .12) !important;
}

/* Inline error message under field */
.nf-form-cont .nf-error-msg,
.nf-form-cont .nf-error .nf-error-msg,
.nf-form-cont .ninja-forms-field-error,
.nf-form-cont .nf-error-wrap .nf-error-msg {
	color: var(--cs-red) !important;
	font-family: var(--font-heading) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	margin-top: 6px !important;
	display: flex; align-items: flex-start; gap: 4px;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}
.nf-form-cont .nf-error-msg::before {
	content: "⚠"; font-size: 13px; color: var(--cs-red); flex-shrink: 0;
}

/* User Management messages (e.g. "The password you entered … is incorrect.
   Lost your password?") are full sentences with a <strong> and an inline link.
   The flex layout above turns each into a separate flex item and wrecks the wrap,
   so render these as a normal flowing text block in a soft red box instead. */
.nf-form-cont .nf-error-msg.nf-error-user-management {
	display: block !important;
	margin-top: 8px !important;
	padding: 10px 12px !important;
	background: rgba(179, 27, 27, .06) !important;
	border: 1px solid rgba(179, 27, 27, .25) !important;
	border-radius: 8px !important;
	line-height: 1.45 !important;
}
.nf-form-cont .nf-error-msg.nf-error-user-management::before { content: none !important; }
.nf-form-cont .nf-error-user-management strong { font-weight: 700; }
.nf-form-cont .nf-error-user-management a {
	color: var(--cs-red); font-weight: 600; text-decoration: underline;
}

/* Top-of-form general error block — hidden until it has content */
.nf-form-cont .nf-form-errors,
.nf-form-cont .nf-error-fields-error {
	background: rgba(179, 27, 27, .06);
	border: 1px solid rgba(179, 27, 27, .2);
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 20px;
	font-family: var(--font-heading);
	font-size: 14px;
	color: var(--cs-red);
}
/* Collapse the error / response containers when Ninja Forms renders them
   empty (the default pre-submit state) OR with only an empty inner placeholder.
   `:empty` catches truly empty wrappers; `:not(:has(.nf-error-msg))` catches
   the case where NF renders an empty inner element (so the wrapper is technically
   not :empty). Together they cover every NF version we care about. */
.nf-form-cont .nf-form-errors:empty,
.nf-form-cont .nf-error-fields-error:empty,
.nf-form-cont .nf-response-msg:empty,
.nf-form-cont .nf-form-fields-success:empty,
.nf-form-cont .nf-error-msg:empty,
.nf-form-cont .ninja-forms-field-error:empty,
.nf-form-cont .nf-form-errors:not(:has(.nf-error-msg, .nf-error-wrap, p, li, span)),
.nf-form-cont .nf-error-fields-error:not(:has(.nf-error-msg, .nf-error-wrap, p, li, span)) {
	display: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* Honeypot must stay hidden */
.nf-form-cont .nf-field-container.html-container input[type="text"][name*="ninja_forms_field"] { display: none !important; }

/* ----- Success / response message ----- */
.nf-form-cont .nf-response-msg,
.nf-form-cont .nf-form-fields-success {
	background: rgba(34, 197, 94, .08);
	border: 1px solid rgba(34, 197, 94, .25);
	color: #15803d;
	border-radius: 8px;
	padding: 16px 20px;
	font-family: var(--font-heading);
	font-size: 14px;
	line-height: 1.55;
}
.nf-form-cont .nf-response-msg p { margin: 0; }

/* Checkbox (Remember me) */
.nf-form-cont .checkbox-wrap .nf-field-label {
	display: flex; align-items: center; gap: 8px;
}
.nf-form-cont input[type="checkbox"] {
	width: 16px; height: 16px;
	border: 1px solid var(--cs-border);
	border-radius: 4px;
	margin: 0;
	cursor: pointer;
}

/* Submit button */
.nf-form-cont input[type="button"],
.nf-form-cont input[type="submit"],
.nf-form-cont .submit-wrap input {
	width: 100% !important;
	padding: 14px 16px !important;
	background: var(--cs-red) !important;
	color: var(--cs-white) !important;
	border: 0 !important;
	border-radius: 8px !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	letter-spacing: .075px !important;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
/* ----- Reusable form section titles inside Ninja Forms HTML fields -----
   Paste in NF HTML field: <h4 class="cs-form-section-title">Section name</h4>
   Add `cs-divider-top` to any section title (or any element) that should
   show a gray horizontal divider above it. Omit it on the first section. */
.cs-form-section-title {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: var(--cs-red);
	margin: 0;
	padding: 0;
	border: 0;
}

/* Utility: top divider — works on any element. */
.cs-divider-top {
	border-top: 1px solid var(--cs-border) !important;
	padding-top: 16px !important;
	margin-top: 16px !important;
}

/* ----- Reusable Cancel + Submit 50/50 row -----
   Paste in NF HTML field placed LAST before Submit:
     <button type="button" class="cs-btn cs-btn--ghost-red cs-form-cancel-btn" data-modal-close>Cancel</button>
   Then in NF admin → that HTML field → Custom Class = "cs-form-cancel"
   And on the Submit field → Custom Class = "cs-form-submit". */
.cs-form-cancel-btn { width: 100%; }

.nf-form-cont .nf-field-container.cs-form-cancel,
.nf-form-cont .nf-field-container.cs-form-submit,
.nf-form-cont .nf-field-container.cs-form-cancel ~ .submit-container,
.nf-form-cont .nf-field-container.cs-form-cancel + .nf-field-container {
	display: inline-block;
	width: calc(50% - 8px);
	vertical-align: top;
	margin-bottom: 0;
}
.nf-form-cont .nf-field-container.cs-form-cancel { margin-right: 12px; }

@media (max-width: 480px) {
	.nf-form-cont .nf-field-container.cs-form-cancel,
	.nf-form-cont .nf-field-container.cs-form-submit,
	.nf-form-cont .nf-field-container.cs-form-cancel ~ .submit-container,
	.nf-form-cont .nf-field-container.cs-form-cancel + .nf-field-container {
		display: block; width: 100%;
	}
	.nf-form-cont .nf-field-container.cs-form-cancel { margin-right: 0; margin-bottom: 12px; }
}

.nf-form-cont input[type="submit"]:hover,
.nf-form-cont .submit-wrap input:hover { background: #9a1717 !important; }

/* Forgot password / inline action links inside forms */
.nf-form-cont .listcheckbox-container .nf-field-label,
.nf-form-cont .nf-form-fields-required { font-size: 13px; }
.nf-form-cont a { color: var(--cs-red); font-weight: 600; }

/* ----------------------------------------------------------------------------
   File-upload dropzone look (Figma 221424:14748)

   Apply `cs-form-fileupload` as the Custom CSS Class on a Ninja Forms
   File Upload field to render the dashed-border drop area shown in Figma.
   Native NF file inputs don't have drag-and-drop by default — this is a
   visual treatment of the existing field. (True drag-and-drop would need
   the NF File Upload add-on or a custom JS layer.)
---------------------------------------------------------------------------- */
.nf-form-cont .nf-field-container.cs-form-fileupload .nf-field-element {
	background: #ffffff;
	border: 1px dashed #e5e7eb;
	border-radius: 12px;
	padding: 24px;
	display: flex; flex-direction: column; align-items: center;
	text-align: center;
	transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nf-form-cont .nf-field-container.cs-form-fileupload .nf-field-element:hover,
.nf-form-cont .nf-field-container.cs-form-fileupload.dragover .nf-field-element {
	border-color: #b31b1b;
	background: rgba(179, 27, 27, .03);
}
.nf-form-cont .nf-field-container.cs-form-fileupload input[type="file"] {
	width: auto; max-width: 100%;
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #1f2937;
	border: 0; padding: 0; background: transparent;
	box-shadow: none;
}
.nf-form-cont .nf-field-container.cs-form-fileupload input[type="file"]::file-selector-button {
	background: transparent; color: #2563eb;
	border: 0; padding: 0 6px;
	font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 16px; cursor: pointer;
}
.nf-form-cont .nf-field-container.cs-form-fileupload .nf-field-description {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 14px; line-height: 20px; letter-spacing: 0.07px;
	color: #9ca3af; margin-top: 4px;
}

/* Progress bar — hidden in idle state. NF's JS sets the inner bar's width
   inline (0→100) as the upload runs; the :has() rule reveals the track only
   when there's actual progress, so no 20px slot or margin reserved at rest. */
.nf-form-cont .cs-form-fileupload .nf-fu-progress {
	display: none;
	width: 100%;
	margin: 0;
	background: #f1f5f9;
	border-radius: 9999px;
	overflow: hidden;
}
.nf-form-cont .cs-form-fileupload .nf-fu-progress:has(
	.nf-fu-progress-bar[style*="width"]:not([style*="width: 0%"]):not([style*="width:0%"]):not([style*="width: 0px"])
) {
	display: block;
	margin-top: 12px;
}
.nf-form-cont .cs-form-fileupload .nf-fu-progress-bar {
	height: 100%;
	background: var(--cs-red);
	transition: width .2s ease;
}

/* Override NF's default cell padding (0 5px) for multi-column rows so the
   gap between side-by-side fields matches our Figma spec (24px total: 12px
   on each cell). */
.nf-form-cont .nf-multi-cell .nf-cell {
	padding: 0 12px;
}

/* ----------------------------------------------------------------------------
   Per-field helper classes (apply via NF admin → field → Custom CSS Classes).
---------------------------------------------------------------------------- */

/* Date+Time picker (NF Date field in "Both Date & Time" mode) — Figma 221424:39371.
   Lays the pikaday date input + hour/minute/AM-PM selects on a single flex row
   with equal heights. Add `cs-form-datetime` to the field's Custom CSS Classes. */
.nf-form-cont .cs-form-datetime .nf-field-element {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}
.nf-form-cont .cs-form-datetime .pikaday__container {
	position: relative;
	flex: 1 1 200px;
	min-width: 200px;
}
/* Calendar icon prefix inside the date input. */
.nf-form-cont .cs-form-datetime .pikaday__container::before {
	content: "";
	position: absolute;
	left: 16px; top: 50%;
	transform: translateY(-50%);
	width: 16px; height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
	pointer-events: none;
	z-index: 1;
}
/* Date input: full-width inside its flex cell, left padding clears the icon. */
.nf-form-cont .cs-form-datetime .pikaday__container .pikaday__display {
	width: 100% !important;
	height: 100%;
	padding-left: 48px !important;
}
/* Time selectors: each compact, equal height to the date input via align-items: stretch. */
.nf-form-cont .cs-form-datetime .time-wrap {
	float: none !important;
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
}
.nf-form-cont .cs-form-datetime .time-wrap select {
	width: auto !important;
	min-width: 80px;
	height: 100%;
	padding: 0 36px 0 12px !important;
}

/* Compact 100px textarea — keeps vertical resize so users can drag taller.
   Add `cs-form-textarea-sm` to a Paragraph Text field's Custom CSS Classes. */
.nf-form-cont .cs-form-textarea-sm .nf-field-element textarea {
	height: 100px !important;
	min-height: 100px !important;
}

/* Scrollable Terms List / checkbox list — caps the field at 200px and lets the
   options scroll inside. Add `cs-form-terms-scroll` to a Terms List (or any
   checkbox list) field's Custom CSS Classes. */
.nf-form-cont .cs-form-terms-scroll .nf-field-element {
	max-height: 200px;
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--cs-border);
	border-radius: 8px;
	background: var(--cs-white);
}
.nf-form-cont .cs-form-terms-scroll .nf-field-element > * {
	padding: 8px 12px;
}
/* Thin scrollbar styling so it doesn't look heavy. */
.nf-form-cont .cs-form-terms-scroll .nf-field-element::-webkit-scrollbar {
	width: 6px;
}
.nf-form-cont .cs-form-terms-scroll .nf-field-element::-webkit-scrollbar-thumb {
	background: var(--cs-gray-300, #d1d5db);
	border-radius: 3px;
}
.nf-form-cont .cs-form-terms-scroll .nf-field-element::-webkit-scrollbar-thumb:hover {
	background: var(--cs-gray-500, #6b7280);
}

/* In-form section divider — drop the following HTML into a Ninja Forms
   "HTML" field anywhere you want to introduce a group of related fields:

     <div class="cs-form-section">
         <h3 class="cs-form-section__title">Quick Facts</h3>
         <p class="cs-form-section__sub">All optional — we'll use your profile defaults unless you fill these in.</p>
     </div>

   The .cs-form-section wrapper gives it consistent typography + spacing
   regardless of where in the form it lives. */
.nf-form-cont .cs-form-section {
	margin: 16px 0 8px;
	padding-top: 4px;
}
.nf-form-cont .cs-form-section__title {
	font-family: 'Montserrat', sans-serif; font-weight: 600;
	font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
	color: #1f2937;
	margin: 0 0 4px;
}
.nf-form-cont .cs-form-section__sub {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 13px; line-height: 20px; letter-spacing: 0.07px;
	color: var(--cs-gray-500, #6b7280);
	margin: 0;
}

/* Repeatable Fieldset (NF) — soft pink-tinted card per row with a light
   primary-tinted border, the auto-numbered legend in Cornell red, a small
   primary-filled "+ Add" button, and a circular red × remove control.
   Add `cs-form-repeater` to the Repeatable Fieldset field's Custom CSS Classes.
   DOM emitted by NF Repeatable Fieldset add-on (verified against form #8 #101):
     .cs-form-repeater                       (outer .nf-field-container)
       .nf-repeater.nf-repeater-fieldsets
         fieldset
           legend "Q&A 1"
           .nf-repeater-fieldset            (inner row content)
         fieldset / .nf-repeater-fieldset   (row 2, row 3, …)
         button.nf-add-fieldset "Add" */
/* Card per repeater row — universal (doesn't require the custom class), so
   the absolute-positioned remove × always has its own row as the positioning
   context. Without this, every × stacks at the top-right of the modal panel. */
.nf-form-cont .nf-repeater fieldset {
	background: #fdf7f7; /* soft pink — tints the primary, stays subtle */
	border: 1px solid rgba(179, 27, 27, .18); /* light primary shade */
	border-radius: 12px;
	padding: 12px 16px 4px;
	margin: 0 0 12px;
	position: relative;
}
.nf-form-cont .nf-repeater fieldset > legend {
	padding: 0 6px;
	margin-left: 4px;
	font-family: 'Montserrat', sans-serif; font-weight: 600;
	font-size: 13px; line-height: 20px; letter-spacing: 0.06px;
	text-transform: uppercase;
	color: var(--cs-red);
	background: transparent;
	border: 0;
	float: none;
	width: auto;
}
/* Ensure each row's inner div is also a positioning context, in case NF
   nests the remove button inside .nf-repeater-fieldset instead of <fieldset>. */
.nf-form-cont .nf-repeater-fieldset {
	position: relative;
}

/* Tighten field spacing inside each row. */
.nf-form-cont .cs-form-repeater .nf-repeater-fieldset .nf-field-container {
	margin-bottom: 8px;
}
.nf-form-cont .cs-form-repeater .nf-repeater-fieldset .nf-field-container:last-child {
	margin-bottom: 0;
}
.nf-form-cont .cs-form-repeater .nf-repeater-fieldset .nf-field-label label {
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 13px; line-height: 20px; color: var(--cs-gray-700, #4a5565);
	margin-bottom: 2px;
}
/* Inputs inside repeater rows — drop bg to white so they pop against the pink card. */
.nf-form-cont .cs-form-repeater .nf-repeater-fieldset input[type="text"],
.nf-form-cont .cs-form-repeater .nf-repeater-fieldset textarea {
	background: #ffffff;
}

/* Remove-row × — small red filled circle, top-right of each repeater row.
   NF emits <button class="nf-remove-fieldset"> inside each row. We target the
   class directly (no need for the user to add anything else) and bump key
   properties with !important so NF's default button reset doesn't reassert
   itself after a re-render. */
.nf-form-cont button.nf-remove-fieldset {
	position: absolute !important;
	top: 10px; right: 10px;
	width: 24px !important;
	height: 24px !important;
	min-height: 0 !important;
	display: inline-flex !important;
	align-items: center; justify-content: center;
	border: 0 !important;
	background: var(--cs-red) !important;
	color: #ffffff !important;
	border-radius: 50% !important;
	font-size: 14px; line-height: 1;
	font-weight: 500;
	cursor: pointer;
	padding: 0 !important;
	box-shadow: 0 1px 2px rgba(179, 27, 27, .25);
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.nf-form-cont button.nf-remove-fieldset:hover,
.nf-form-cont button.nf-remove-fieldset:focus {
	background: var(--cs-red-dark, #8b0000) !important;
	color: #ffffff !important;
	transform: scale(1.06);
	box-shadow: 0 2px 4px rgba(179, 27, 27, .35);
}

/* "+ Add another Q&A pair" — small primary-filled button. NF emits
   <button class="nf-add-fieldset"> directly after the last fieldset. */
.nf-form-cont button.nf-add-fieldset {
	display: inline-flex !important;
	align-items: center; justify-content: center;
	gap: 6px;
	min-height: 36px !important;
	height: auto !important;
	width: auto !important;
	padding: 6px 14px !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	line-height: 1 !important;
	letter-spacing: 0.07px;
	color: #ffffff !important;
	background: var(--cs-red) !important;
	border: 1px solid var(--cs-red) !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	cursor: pointer;
	margin-top: 4px;
	box-shadow: 0 1px 2px rgba(179, 27, 27, .25);
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.nf-form-cont button.nf-add-fieldset:hover,
.nf-form-cont button.nf-add-fieldset:focus {
	background: var(--cs-red-dark, #8b0000) !important;
	border-color: var(--cs-red-dark, #8b0000) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 4px rgba(179, 27, 27, .35);
}

/* Consent checkbox row — flips the checkbox left + label right and turns
   the long sentence into a compact, readable disclaimer.
   Add `cs-form-consent` (plus `cs-required` for the badge) to the field. */
.nf-form-cont .cs-form-consent .nf-field-element {
	display: flex; align-items: flex-start; gap: 10px;
}
.nf-form-cont .cs-form-consent .nf-field-element input[type="checkbox"] {
	margin-top: 4px; flex-shrink: 0;
	width: 18px; height: 18px;
	accent-color: var(--cs-red);
}
.nf-form-cont .cs-form-consent .nf-field-element label {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px; letter-spacing: 0.07px;
	color: var(--cs-gray-700, #4a5565);
	cursor: pointer;
}
/* Hide the field-wrapper label since the checkbox already has its own label. */
.nf-form-cont .cs-form-consent .nf-field-label {
	display: none;
}


/* ==========================================================================
   404 / Page Not Found
   ========================================================================== */
.not-found {
	min-height: 60vh;
	display: flex; align-items: center; justify-content: center;
	padding: 80px 20px;
}
.not-found__inner {
	max-width: 560px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.not-found__code {
	font-family: var(--font-heading); font-weight: 700;
	font-size: clamp(72px, 12vw, 120px); line-height: 1;
	color: var(--cs-red); margin: 0;
	letter-spacing: -2px;
}
.not-found__title {
	font-family: var(--font-heading); font-weight: 600;
	font-size: clamp(24px, 3vw, 32px); line-height: 1.25;
	color: var(--cs-black); margin: 0;
}
.not-found__lead {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 24px; color: var(--cs-gray-500);
	margin: 0 0 8px;
}
.not-found__cta {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 24px; height: auto;
	font-family: 'Open Sans', sans-serif; font-weight: 600;
	font-size: 15px; line-height: 20px;
	text-decoration: none;
}
.not-found__cta svg { color: currentColor; flex: 0 0 16px; }

/* ==========================================================================
   Empty state (per plan — one short line)
   ========================================================================== */
.empty-state {
	max-width: 720px; margin: 0 auto;
	padding: 48px 20px; text-align: center;
	color: var(--cs-gray-500); font-size: 15px;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.cs-pagination {
	display: flex; justify-content: center; gap: 6px;
	padding: 32px 0;
}
.cs-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border-radius: var(--radius-btn);
	border: 1px solid var(--cs-border);
	color: var(--cs-gray-700); font-weight: 500; font-size: 14px;
}
.cs-pagination .page-numbers.current {
	background: var(--cs-red); color: var(--cs-white); border-color: var(--cs-red);
}
.cs-pagination .page-numbers:not(.current):hover {
	background: var(--cs-gray-50); border-color: var(--cs-gray-400); opacity: 1;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal {
	opacity: 0; transform: translateY(18px);
	transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.events__grid .reveal.is-visible:nth-child(2),
.gallery__grid .reveal.is-visible:nth-child(2),
.testimonials .reveal.is-visible:nth-child(2),
.donate-tiers .reveal.is-visible:nth-child(2) { transition-delay: .10s; }
.events__grid .reveal.is-visible:nth-child(3),
.gallery__grid .reveal.is-visible:nth-child(3),
.testimonials .reveal.is-visible:nth-child(3),
.donate-tiers .reveal.is-visible:nth-child(3) { transition-delay: .18s; }
.gallery__grid .reveal.is-visible:nth-child(4) { transition-delay: .26s; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   Mobile responsive overrides — Figma 220955:* mobile nodes
   Newsletter, Contact, In Memory (index + single), By laws.
   The mobile nodes are 375px wide; desktop layouts already collapse to single
   columns at small widths via existing rules. These tweak typography, spacing,
   and a few row-specific behaviors to match the mobile Figmas precisely.
   ========================================================================== */
@media (max-width: 720px) {
	/* Newsletter — label stays fixed on the left; the file row scrolls
	   horizontally on small screens (matches Figma 220955:41174). */
	.newsletter-year { gap: 16px; padding: 20px 24px; }

	/* In Memory — already single-col grid via .archive-memorial__grid; tighten card padding. */
	.memorial-card { padding: 12px; gap: 16px; }
	.memorial-card__media { aspect-ratio: 343/240; }

	/* In Memory single — full-width hero photo at top, left-aligned text,
	   meta as a 2×2 grid, quote card (Figma 220955:43543). */
	.memorial-single { padding: 32px 16px; }
	.memorial-single__inner { grid-template-columns: 1fr; gap: 20px; }
	.memorial-single__photo { max-width: 100%; margin: 0; }
	.memorial-single__name { font-size: 22px; text-align: left; }
	.memorial-single__meta { gap: 16px; }
	.memorial-single__meta .memorial-meta-item { flex: 1 1 calc(50% - 16px); }
	.memorial-single__quote { padding: 20px; border-radius: 12px; }

	/* Contact — single-column, tighter card padding (Figma 220955:42890 → 16px). */
	.contact { padding: 32px 16px; }
	.contact__inner { gap: 16px; }
	.contact__card { padding: 16px; gap: 20px; }
	.contact__card-title { font-size: 24px; }
	.contact-row { padding: 14px; }
	.contact-row__icon { width: 40px; height: 40px; }
}

@media (max-width: 480px) {
	/* In Memory archive: revert to single column at the smallest viewport (already done globally,
	   but ensure card body stays comfortable). */
	.memorial-card__heading { gap: 6px; }
}


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
	:root { --container-pad: 30px; }
}
@media (max-width: 960px) {
	.events__grid,
	.testimonials,
	.donate-tiers { grid-template-columns: repeat(2, 1fr); }
	.gallery__grid { grid-template-columns: repeat(2, 1fr) !important; }
	.stats-dark,
	.stats-light { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
	/* Timeline at ≤960px is handled in detail by the ≤768px block below
	   per Figma 220945:9226 (mobile rail + dots on the RIGHT, card on the LEFT). */
}
/* The desktop horizontal menu runs out of room below ~1110px (too many top-level
   items), so the hamburger drawer takes over here rather than waiting for 768px.
   Only nav rules live in this block — container padding / hero stay at 768px. */
@media (max-width: 1110px) {
	/* Show hamburger, hide desktop CTA */
	.primary-nav__toggle { display: inline-flex; order: 2; }
	.primary-nav__cta--desktop { display: none; }

	/* Drawer slides in from the right. On tablet / mid-size screens it's a
	   capped-width panel; it goes full-width only below 768px (see that block). */
	.primary-nav__panel {
		position: fixed; top: 0; right: 0; bottom: 0;
		width: min(360px, 90vw);
		display: flex; flex-direction: column;
		background: var(--cs-white);
		z-index: 100;
		transform: translateX(100%);
		transition: transform .35s var(--ease);
		overflow-y: auto;
		padding: 0;
		box-shadow: -8px 0 24px rgba(0, 0, 0, .12);
	}
	.primary-nav.is-open .primary-nav__panel { transform: translateX(0); }

	/* Backdrop behind drawer */
	.primary-nav__backdrop {
		display: block;
		position: fixed; inset: 0;
		background: rgba(0, 0, 0, .45);
		opacity: 0; pointer-events: none;
		transition: opacity .3s var(--ease);
		z-index: 99;
	}
	.primary-nav.is-open .primary-nav__backdrop { opacity: 1; pointer-events: auto; }

	body.cs-nav-open { overflow: hidden; }

	/* Drawer header bar (logo + close X) */
	.primary-nav__drawer-head {
		display: flex; align-items: center; justify-content: space-between;
		padding: 12px 16px;
		border-bottom: 1px solid var(--cs-border);
		flex-shrink: 0;
	}
	.primary-nav__drawer-logo { display: inline-flex; align-items: center; }
	.primary-nav__drawer-logo img {
		height: 48px; width: auto; max-width: 240px; object-fit: contain;
	}
	.primary-nav__close {
		width: 40px; height: 40px;
		display: inline-flex; align-items: center; justify-content: center;
		color: var(--cs-gray-800);
		background: transparent; border: 0; padding: 0;
		border-radius: 6px; cursor: pointer;
		transition: background var(--dur-fast) var(--ease);
	}
	.primary-nav__close:hover { background: var(--cs-gray-100); }

	/* Menu list — vertical stack with bottom borders, per Figma 220972:10723.
	   8px gap between items + the per-item bottom border = the spacing the
	   design specifies between each menu row. */
	.primary-nav__list {
		flex: 1;
		display: flex; flex-direction: column; align-items: stretch;
		gap: 8px;
		padding: 8px 16px 0;
		font-family: var(--font-heading);
	}
	.primary-nav__list li { width: 100%; position: relative; }
	.primary-nav__list a {
		display: flex; align-items: center; justify-content: space-between;
		width: 100%;
		padding: 12px 16px 12px 8px;
		border-bottom: 1px solid var(--cs-border);
		font-weight: 600; font-size: 14px; line-height: 20px;
		color: #222;
		border-radius: 0;
	}
	.primary-nav__list a::before { content: none; } /* drop desktop active-underline */

	/* Items with children get a thin chevron on the right (chevron-down.svg). */
	.primary-nav__list .menu-item-has-children > a::after {
		content: ""; display: inline-block; flex: 0 0 auto;
		width: 18px; height: 18px;
		margin-left: 12px;
		background-color: #222;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		transition: transform var(--dur-fast) var(--ease);
	}
	.primary-nav__list .menu-item-has-children.is-expanded > a::after {
		transform: rotate(180deg);
	}

	/* Sub-menu — collapsed by default, expanded via JS toggle */
	.primary-nav__list .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		display: none; flex-direction: column;
		background: transparent; border: 0; box-shadow: none; padding: 0;
		min-width: 0;
	}
	.primary-nav__list .menu-item-has-children.is-expanded > .sub-menu {
		display: flex;
	}
	.primary-nav__list .sub-menu a {
		padding: 12px 16px 12px 20px;
		font-family: var(--font-body);
		font-weight: 400; font-size: 12px; line-height: 16px;
		color: #222;
		border-bottom: 1px solid var(--cs-border);
	}
	.primary-nav__list .sub-menu a::after { content: none !important; }

	/* Mobile sign-in + join buttons stack at bottom of drawer */
	.primary-nav__mobile-ctas {
		display: flex; flex-direction: column; gap: 8px;
		padding: 24px 16px;
		flex-shrink: 0;
	}
	.primary-nav__cta-mobile {
		width: 100%;
		display: inline-flex; align-items: center; justify-content: center;
		gap: 8px;
	}
	.primary-nav__cta-mobile--signin {
		background: var(--cs-white);
		border: 1px solid var(--cs-border);
		color: var(--cs-gray-800);
		box-shadow: 0 1px 1px rgba(0,0,0,.05);
	}
	.primary-nav__cta-mobile--signin:hover {
		background: var(--cs-gray-50);
	}
	.primary-nav__cta-mobile--signin svg { color: var(--cs-gray-800); flex: 0 0 14px; }
}

@media (max-width: 768px) {
	:root { --container-pad: 15px; }
	.hero, .banner-inner { padding-left: var(--container-pad); padding-right: var(--container-pad); }
	.hero { min-height: 360px; padding-top: 80px; padding-bottom: 80px; }

	/* Drawer goes full-width on phones (panel/max-width applies 769–1110px). */
	.primary-nav__panel { width: 100%; box-shadow: none; }

	/* ---------- Hero (matches Figma 220972:9124 mobile spec) ---------- */
	.hero { min-height: 274px; padding-top: 37px; padding-bottom: 37px; }
	.hero__title { font-size: 24px; line-height: 1.25; letter-spacing: .12px; }
	.hero__subtitle { display: block; font-size: 16px; line-height: 24px; margin-top: 8px; }

	/* CTA inside hero on mobile (outlined white-on-red, per Figma) */
	.hero__cta {
		display: inline-flex; align-items: center; justify-content: center;
		margin-top: 24px;
		padding: 10px 12px;
		background: transparent;
		color: var(--cs-white);
		border: 1px solid var(--cs-red-400, #c24949);
		border-radius: 8px;
		font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px;
		letter-spacing: .075px;
		transition: background var(--dur-fast) var(--ease);
		text-decoration: none;
	}
	.hero__cta:hover { background: rgba(195, 73, 73, .18); opacity: 1; }

	/* Intro section is hidden on mobile — its content lives inside the hero now */
	.intro { display: none; }

	/* ---------- Section headings stay at 30px on mobile per Figma ---------- */
	.section-heading h2 { font-size: 30px !important; line-height: 1.15; }

	/* ---------- Sections: tighter vertical padding ---------- */
	.events, .support, .gallery { padding-top: 40px; padding-bottom: 40px; }
	.events__inner,
	.support__inner,
	.gallery__inner { gap: 24px; }

	/* ---------- Events: single column ---------- */
	.events__grid { grid-template-columns: 1fr !important; gap: 24px; }
	.testimonials,
	.donate-tiers { grid-template-columns: 1fr !important; }

	/* ---------- Stats dark card: tighter padding, single column ---------- */
	.stats-dark {
		padding: 16px 24px !important;
		border-radius: 14px;
		gap: 16px;
	}
	.stats-dark__item { gap: 4px; }
	.stats-dark__num { font-size: 20px; }
	.stats-dark__label { font-size: 14px; line-height: 20px; }
	.stats-dark__icon svg, .stats-dark__icon img { width: 24px; height: 24px; }

	/* ---------- Gallery (HOME) — horizontal scroll snap, matches Figma ---------- */
	.gallery .gallery__grid {
		display: flex !important;
		grid-template-columns: none !important;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin-left: calc(-1 * var(--container-pad));
		margin-right: calc(-1 * var(--container-pad));
		padding: 4px var(--container-pad);
	}
	.gallery .gallery__grid::-webkit-scrollbar { display: none; }
	.gallery .gallery-card {
		flex: 0 0 282px;
		aspect-ratio: 1 / 1;
		scroll-snap-align: start;
	}

	/* ---------- Gallery ARCHIVE page — Figma node 220952:40327 (mobile, 375px frame) ---------- */
	.archive-gallery { padding: 40px 16px 48px; }
	.archive-gallery__inner { gap: 16px; }

	/* Toolbar back to column on mobile: search-group on TOP (DOM order), pills BELOW.
	   Reset desktop's `order: -1` on filters and the desktop's fixed 400px width on search. */
	.archive-gallery__toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.archive-gallery__search-group { width: 100%; flex: 1 1 auto; }
	.archive-gallery__filters {
		order: 0;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		gap: 10px;
	}
	.archive-gallery__filters::-webkit-scrollbar { display: none; }
	.filter-pill {
		font-size: 14px; padding: 8px 12px;
		white-space: nowrap; flex: 0 0 auto;
	}

	/* Single column grid, 343/257 aspect (Figma) */
	.archive-gallery .gallery__grid {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}
	.archive-gallery .gallery-card {
		aspect-ratio: 343 / 257;
		border-radius: 12px;
	}

	/* Gallery banner mobile overrides — beats the generic .banner-inner mobile rule below. */
	body.page-template-page-gallery-php .banner-inner,
	body.post-type-archive-gallery-album .banner-inner {
		min-height: 156px;
		padding: 36px 16px;
	}
	body.page-template-page-gallery-php .banner-inner__content,
	body.post-type-archive-gallery-album .banner-inner__content { gap: 8px; }
	body.page-template-page-gallery-php .banner-inner__title,
	body.post-type-archive-gallery-album .banner-inner__title {
		font-size: 24px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0.12px;
	}
	body.page-template-page-gallery-php .banner-inner__subtitle,
	body.post-type-archive-gallery-album .banner-inner__subtitle {
		font-size: 16px;
		line-height: 24px;
		letter-spacing: 0.08px;
	}

	/* ==========================================================================
	   About page mobile (Figma 220950:37144)
	   ========================================================================== */

	/* Banner — shorter on mobile */
	.banner-inner { min-height: 156px; padding: 24px var(--container-pad); }
	.banner-inner__title { font-size: 28px; line-height: 1.15; }
	.banner-inner__subtitle { font-size: 14px; line-height: 20px; }

	/* Stats band — wrap to 2 per row below 768px. Each item is a fixed half-width
	   (no grow) and rows align from the left, so a lone 3rd item sits in the left
	   column under the first stat instead of stretching/centering across the row. */
	.stats-band { padding: 16px !important; }
	.stats-band__inner {
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
		gap: 16px !important;
	}
	.stats-band__item { flex: 0 0 calc(50% - 8px) !important; }
	.stats-band__num   {
		font-family: 'Montserrat', sans-serif !important; font-weight: 500 !important;
		font-size: 20px !important; line-height: 1; letter-spacing: 0.1px;
	}
	.stats-band__label {
		font-size: 14px !important; line-height: 20px; letter-spacing: 0.07px;
		color: var(--cs-white);
	}

	/* Mission cards — horizontal scroll carousel of centered cards (Figma
	   220950:37144: 288px cards, full-bleed swipe with snap). */
	.mission { padding: 40px var(--container-pad); background: #f5f5f5; }
	.mission__cards {
		display: flex; flex-wrap: nowrap;
		grid-template-columns: none; /* drop the grid from wider breakpoints */
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin-left: calc(-1 * var(--container-pad));
		margin-right: calc(-1 * var(--container-pad));
		padding: 4px var(--container-pad);
	}
	.mission__cards::-webkit-scrollbar { display: none; }
	.mission-card {
		flex: 0 0 288px;
		scroll-snap-align: start;
		padding: 25px;
		border-radius: 14px;
		text-align: center; align-items: center; /* centered card content per design */
	}
	.mission-card__icon {
		width: 64px; height: 64px;
		background: rgba(179, 27, 27, .1);
		color: var(--cs-red);
		margin: 0 auto;
	}
	.mission-card__icon img { width: 32px; height: 32px; }
	.mission-card__title {
		font-family: 'Inter', sans-serif; font-weight: 600;
		font-size: 18px; line-height: 1.2; letter-spacing: 0.09px;
		color: #000;
	}
	.mission-card__body {
		font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
		color: #1F2937;
	}

	/* Mobile timeline — exact Figma 220945:9226 spec.
	   Layout: card on LEFT (flex-1), dot on RIGHT (24px), 8px gap between them.
	   Rail line runs through the dot centers near the right edge. */
	.timeline-section { padding: 16px; background: var(--cs-white); }
	.timeline-section .mission__inner { gap: 32px; align-items: center; }
	.timeline {
		max-width: 100%;
		padding: 0;
		display: flex; flex-direction: column; gap: 16px;
	}
	/* Rail line: 1px red, runs vertically through the right-side dot centers.
	   Dot is 24px right-anchored, so dot center sits 12px from the row's right edge. */
	.timeline::before {
		left: auto;
		right: 12px;
		transform: none;
		width: 1px;
	}
	.timeline__item {
		grid-template-columns: 1fr auto;
		gap: 8px;
		align-items: center;
		margin-bottom: 0;
	}
	/* Card always in column 1 on mobile (no zig-zag). */
	.timeline__item:nth-child(odd)  .timeline__card,
	.timeline__item:nth-child(even) .timeline__card { grid-column: 1; }
	.timeline__item:nth-child(odd)  .timeline__spacer,
	.timeline__item:nth-child(even) .timeline__spacer { display: none; }

	.timeline__card {
		padding: 17px;
		border: 1px solid var(--cs-border);
		border-radius: 14px;
		box-shadow: none;
	}
	.timeline__year  {
		font-family: var(--font-heading); font-weight: 600;
		font-size: 30px; line-height: 1; letter-spacing: 0.15px;
		color: var(--cs-red); margin-bottom: 4px;
	}
	.timeline__title {
		font-family: var(--font-heading); font-weight: 500;
		font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
		color: #1F2937; margin-bottom: 8px;
	}
	.timeline__body  {
		font-family: var(--font-heading); font-weight: 400;
		font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
		color: #1F2937;
	}
	/* Dot snaps to the right column (no longer absolute-positioned in middle). */
	.timeline__dot {
		position: static;
		left: auto; top: auto; transform: none;
		grid-column: 2;
		width: 24px; height: 24px;
		border-radius: 9999px;
		background: var(--cs-red);
		border: 4px solid var(--cs-white);
		box-sizing: border-box;
		box-shadow: 0 10px 15px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.10);
		margin: 0;
	}

	/* CTA band — red, heading 24px, buttons stacked horizontally but smaller */
	.cta-band {
		padding: 40px var(--container-pad);
		background: var(--cs-red);
	}
	.cta-band { padding: 40px 16px; }
	.cta-band__inner { gap: 16px; }
	.cta-band__title {
		font-weight: 500 !important;
		font-size: 24px !important; line-height: 1; letter-spacing: 0.12px;
		color: var(--cs-white);
	}
	.cta-band__subtitle {
		font-size: 16px; line-height: 24px; letter-spacing: 0.08px;
		color: var(--cs-white);
	}
	.cta-band__buttons {
		display: flex; flex-wrap: nowrap; gap: 16px;
		width: 100%; max-width: 343px;
		margin-top: 16px;
	}
	.cta-band .btn--primary,
	.cta-band .btn--ghost,
	.cta-band .btn--outline,
	.cta-band__buttons .btn {
		flex: 1 1 0; min-width: 0; padding: 0 12px;
		height: 56px; font-size: 16px; line-height: 24px;
		border-radius: 10px; white-space: nowrap;
	}
	.cta-band__buttons .btn--primary { background: var(--cs-white); color: var(--cs-red); border: 0; }
	.cta-band__buttons .btn--ghost,
	.cta-band__buttons .btn--outline { background: transparent; color: var(--cs-white); border: 2px solid var(--cs-white); }

	/* Footer — single column, tighter padding per Figma 220972:9201 mobile
	   (16px horizontal / 20px vertical, 24px between sections). */
	.site-footer__inner { padding: 20px 16px; }
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 24px;
		padding-bottom: 24px;
	}
	.footer-col { gap: 8px; } /* heading→content tighter on mobile per Figma */
	.footer-col__list { gap: 12px; }

	/* Auth pages (Sign-Up, Login, Contact card) — match Figma mobile spec (375px viewport) */
	.auth-wrapper { padding: 24px 16px; min-height: 0; }
	.auth-card,
	.auth-card--wide {
		max-width: 100%;
		padding: 24px;
		border-radius: 16px;
	}

	/* Force 2-column Ninja Forms rows to stack on mobile */
	.nf-row [class^="nf-cell"],
	.nf-row > div { width: 100% !important; }
}

/* ==========================================================================
   Networking page (page-networking.php) — Figma 221457:9218
   Skeleton CSS; visual polish lands here once the Figma node is reachable.
   ========================================================================== */
.networking-page section { padding: 64px var(--container-pad); }
.networking-page section + section { padding-top: 0; }

.networking-intro__inner,
.networking-pillars__inner,
.networking-committees__inner,
.networking-mentor__inner,
.networking-directory__inner,
.networking-join__inner,
.networking-content__inner,
.my-profile__inner {
	max-width: 1200px; margin: 0 auto;
}

/* My Profile page (Issue #26) — sits under the inner banner. */
.my-profile { padding: 64px var(--container-pad); }
.my-profile__header { text-align: center; margin-bottom: 32px; }
.my-profile__title {
	font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 28px; line-height: 1.2; color: var(--cs-black);
	margin: 0 0 8px;
}
.my-profile__sub {
	font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 1.6;
	color: var(--cs-gray-600); margin: 0;
}
.my-profile__badge {
	display: inline-flex; align-items: center; gap: 6px;
	margin: 0 0 12px;
	padding: 6px 12px;
	background: var(--cs-red, #b31b1b); color: #ffffff;
	border-radius: 999px;
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 12px; line-height: 1; letter-spacing: 0.4px;
	text-transform: uppercase;
}
.my-profile__badge svg { flex: 0 0 14px; }
.my-profile__body {
	max-width: 720px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 32px;
}
.my-profile__form-slot--missing {
	background: #fff8e1; border-left: 3px solid var(--cs-red); border-radius: 6px;
	padding: 14px 16px; color: #4b5563; font-size: 14px; line-height: 1.5;
}

/* Section headings inside the profile body. */
.profile-section-title {
	font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 18px; line-height: 1.3; color: var(--cs-black);
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--cs-border);
}

/* Avatar uploader block — large preview on the left, controls on the right. */
.profile-avatar__row {
	display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
}
.profile-avatar__img {
	width: 160px; height: 160px; border-radius: 50%;
	object-fit: cover; flex: 0 0 160px;
	border: 3px solid var(--cs-border);
	background: var(--cs-gray-100);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.profile-avatar__actions {
	display: flex; flex-direction: column; gap: 8px; flex: 1 1 280px;
}
.profile-avatar__upload-btn,
.profile-avatar__remove-btn {
	align-self: flex-start;
	min-height: 40px; padding: 8px 16px;
	cursor: pointer;
}
.profile-avatar__hint {
	font-size: 13px; color: var(--cs-gray-600); margin: 4px 0 0;
}
.profile-avatar__status {
	font-size: 13px; margin: 0; min-height: 18px;
	color: var(--cs-gray-600);
}
.profile-avatar__status.is-error { color: var(--cs-red); }

/* Read-only account info card. */
.profile-readonly__grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	background: var(--cs-gray-100); border-radius: 10px;
	padding: 18px 20px;
	margin: 0;
}
.profile-readonly__item dt {
	font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 13px; color: var(--cs-gray-600);
	text-transform: uppercase; letter-spacing: 0.4px;
	margin-bottom: 4px;
}
.profile-readonly__item dd {
	font-family: 'Open Sans', sans-serif; font-size: 15px;
	color: var(--cs-black); margin: 0 0 4px;
	word-break: break-word;
}
.profile-readonly__item small {
	display: block; font-size: 12px; color: var(--cs-gray-600);
}

@media (max-width: 640px) {
	.my-profile { padding: 40px 16px; }
	.my-profile__title { font-size: 22px; }
	.profile-readonly__grid { grid-template-columns: 1fr; }
	.profile-avatar__img { width: 128px; height: 128px; flex: 0 0 128px; }
}

/* Custom in-page confirm modal (used by the avatar remove flow today, but
   styled generically so other features can reuse `.cs-confirm-modal`). */
.cs-confirm-modal {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: none; align-items: center; justify-content: center;
	padding: 24px;
	z-index: 99999;
}
.cs-confirm-modal.is-open { display: flex; }
.cs-confirm-modal__panel {
	background: #ffffff; border-radius: 14px;
	max-width: 440px; width: 100%;
	padding: 28px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	display: flex; flex-direction: column; gap: 16px;
}
.cs-confirm-modal__title {
	font-family: 'Inter', sans-serif; font-weight: 600;
	font-size: 20px; line-height: 1.3; color: var(--cs-black); margin: 0;
}
.cs-confirm-modal__body {
	font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.6;
	color: var(--cs-gray-700); margin: 0;
}
.cs-confirm-modal__footer {
	display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap;
}
.cs-confirm-modal__footer .cs-btn { min-height: 42px; padding: 10px 18px; }

/* Intro */
.networking-intro__inner { text-align: center; max-width: 800px; }
.networking-intro__title {
	font-family: var(--font-heading); font-weight: 600;
	font-size: clamp(28px, 3vw, 40px); line-height: 1.2;
	color: var(--cs-black); margin: 0 0 16px;
}
.networking-intro__body { font-size: 16px; line-height: 1.6; color: var(--cs-gray-700, #4a5565); }
.networking-intro__body p { margin: 0 0 12px; }
.networking-intro__body p:last-child { margin-bottom: 0; }

/* Pillars — 3-col icon-card grid */
.networking-pillars__heading { margin-bottom: 32px; text-align: center; }
.networking-pillars__grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.networking-pillars__card {
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: 12px;
	padding: 24px;
	display: flex; flex-direction: column; gap: 12px;
	transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.networking-pillars__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}
.networking-pillars__icon {
	width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(179, 27, 27, .08);
	border-radius: 12px;
	color: var(--cs-red);
}
.networking-pillars__icon img { width: 32px; height: 32px; object-fit: contain; }
.networking-pillars__card-title {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 18px; color: var(--cs-black); margin: 0;
}
.networking-pillars__card-body {
	font-family: var(--font-body); font-size: 14px; line-height: 1.5;
	color: var(--cs-gray-500); margin: 0;
}

/* Committees — 2-col grid */
.networking-committees { background: #f9fafb; }
.networking-committees__heading { margin-bottom: 32px; }
.networking-committees__grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.committee-card {
	background: var(--cs-white);
	border: 1px solid var(--cs-border);
	border-radius: 12px;
	padding: 24px;
	display: flex; flex-direction: column; gap: 16px;
}
.committee-card__head { display: flex; flex-direction: column; gap: 8px; }
.committee-card__name {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 20px; line-height: 1.2; color: #020617; margin: 0;
}
.committee-card__description {
	font-family: var(--font-body); font-size: 14px; line-height: 1.5;
	color: var(--cs-gray-500); margin: 0;
}
.committee-card__lead {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--cs-border);
}
.committee-card__lead-photo {
	width: 40px; height: 40px; flex: none;
	border-radius: 999px; overflow: hidden;
	background: var(--cs-gray-100);
}
.committee-card__lead-photo img { width: 100%; height: 100%; object-fit: cover; }
.committee-card__lead-name {
	font-family: var(--font-heading); font-weight: 500;
	font-size: 14px; color: var(--cs-black); margin: 0;
}
.committee-card__lead-role {
	font-family: var(--font-body); font-size: 13px;
	color: var(--cs-gray-500); margin: 0;
}
.committee-card__members {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 8px;
	border-top: 1px solid var(--cs-border);
	padding-top: 12px;
}
.committee-card__member {
	font-family: var(--font-body); font-size: 14px; line-height: 1.4;
}
.committee-card__member a {
	display: flex; gap: 8px; align-items: baseline;
	color: var(--cs-black);
}
.committee-card__member a:hover { color: var(--cs-red); }
.committee-card__member-name { font-weight: 500; }
.committee-card__member-role {
	color: var(--cs-gray-500); font-size: 13px;
}

/* Mentorship — 2-col split */
.networking-mentor__inner {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 48px; align-items: center;
}
.networking-mentor__media {
	border-radius: 16px; overflow: hidden;
	aspect-ratio: 4/3; background: var(--cs-gray-100);
}
.networking-mentor__media img { width: 100%; height: 100%; object-fit: cover; }
.networking-mentor__copy { display: flex; flex-direction: column; gap: 16px; }
.networking-mentor__title {
	font-family: var(--font-heading); font-weight: 600;
	font-size: clamp(24px, 2.5vw, 36px); line-height: 1.2;
	color: var(--cs-black); margin: 0;
}
.networking-mentor__body { font-size: 16px; line-height: 1.6; color: var(--cs-gray-700, #4a5565); }
.networking-mentor__body p { margin: 0 0 12px; }
.networking-mentor__body p:last-child { margin-bottom: 0; }
.networking-mentor__ctas {
	display: flex; gap: 12px; flex-wrap: wrap;
	margin-top: 8px;
}

/* Directory — full-width band with external CTA */
.networking-directory { background: var(--cs-red); color: var(--cs-white); }
.networking-directory__inner {
	display: flex; flex-direction: column; align-items: center; gap: 16px;
	text-align: center; max-width: 800px;
}
.networking-directory__title {
	font-family: var(--font-heading); font-weight: 600;
	font-size: clamp(24px, 2.5vw, 32px); line-height: 1.2;
	color: var(--cs-white); margin: 0;
}
.networking-directory__body {
	font-family: var(--font-body); font-size: 16px; line-height: 1.5;
	color: rgba(255, 255, 255, .9); margin: 0;
}
.networking-directory__cta {
	background: var(--cs-white); color: var(--cs-red);
	border-color: var(--cs-white);
}
.networking-directory__cta:hover {
	background: rgba(255, 255, 255, .9); color: var(--cs-red);
	border-color: rgba(255, 255, 255, .9);
}

/* Join Committee form slot */
.networking-join__inner { max-width: 720px; }
.networking-join__form-slot { /* Ninja Forms inherits container width. */ }

/* Empty state */
.networking-empty__inner { max-width: 720px; margin: 0 auto; text-align: center; }

/* Responsive */
@media (max-width: 1024px) {
	.networking-page section { padding: 48px 24px; }
	.networking-pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.networking-mentor__inner { gap: 32px; }
}
@media (max-width: 720px) {
	.networking-page section { padding: 40px 16px; }
	.networking-pillars__grid,
	.networking-committees__grid,
	.networking-mentor__inner {
		grid-template-columns: 1fr; gap: 24px;
	}
	.networking-mentor__media { aspect-ratio: 16/9; }
	.networking-mentor__ctas .cs-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Calendar (mobile menu label → /events/) — tighten Events mobile spacing
   per Figma node 220952:37145 (16px gap, max-width 343px cards).
   ========================================================================== */
@media (max-width: 640px) {
	.events-grid--3,
	.events-grid--4 { gap: 16px; }
	.event-card { max-width: 343px; margin-inline: auto; }
}

/* ==========================================================================
   Mobile: unify inner-page content sections to 40px top/bottom padding
   (down from 64–80px). Horizontal padding (var(--container-pad)) is untouched.
   ========================================================================== */
@media (max-width: 768px) {
	.contact,
	.board,
	.priorities,
	.support-section,
	.bylaws,
	.mission,
	.timeline-section,
	.archive-memorial,
	.newsletter-archive,
	.accomplishments,
	.networking-page section {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	/* Keep adjacent networking sections flush (no doubled top gap). */
	.networking-page section + section { padding-top: 0; }
}


/* ==========================================================================
   Extra Time redesign — Figma 221905:79029 and category variants
   ========================================================================== */

/* --- Landing full-width red hero (Figma 221905:79034) --- */
.et-landing-hero {
	background: var(--cs-red, #b31b1b);
	color: #ffffff;
	padding: 58px var(--container-pad);
}
.et-landing-hero__inner {
	max-width: 900px; margin: 0 auto;
	display: flex; flex-direction: column; align-items: center; gap: 16px;
	text-align: center;
}
.et-landing-hero__title {
	font-family: 'Montserrat', sans-serif; font-weight: 600;
	font-size: 60px; line-height: 1.05; letter-spacing: 0.3px;
	color: #ffffff; margin: 0;
}
.et-landing-hero__subtitle {
	font-family: 'Montserrat', sans-serif; font-weight: 400;
	font-size: 20px; line-height: 1.4; letter-spacing: 0.1px;
	color: #ffffff; margin: 0;
	max-width: 780px;
}
.et-landing-hero__cta {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 10px 16px;
	background: #ffffff; color: var(--cs-red, #b31b1b);
	font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px;
	border-radius: 8px; border: 0;
	text-decoration: none; cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.et-landing-hero__cta:hover { background: var(--cs-gray-100); }

/* --- Landing tile grid (Figma 221905:79039) --- */
.et-tile-grid { padding: 60px var(--container-pad); }
.et-tile-grid__inner { max-width: 1200px; margin: 0 auto; }
.et-tile-grid__grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.et-tile {
	position: relative;
	display: block; overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 24px;
	background: var(--cs-gray-100);
	color: #ffffff; text-decoration: none;
	transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.et-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
.et-tile__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	display: block;
}
.et-tile__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 55%);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--dur-fast) var(--ease);
}
.et-tile__label {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 24px;
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 24px; line-height: 1.2; letter-spacing: 0.12px;
	color: #ffffff;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
/* Reveal overlay + label on hover / keyboard focus. */
.et-tile:hover .et-tile__overlay,
.et-tile:focus-visible .et-tile__overlay { opacity: 1; }
.et-tile:hover .et-tile__label,
.et-tile:focus-visible .et-tile__label { opacity: 1; transform: translateY(0); }

/* No-image tiles always show the label (there's no image to obscure). */
.et-tile--no-image { background: var(--cs-red, #b31b1b); }
.et-tile--no-image .et-tile__overlay { display: none; }
.et-tile--no-image .et-tile__label { opacity: 1; transform: none; }

@media (max-width: 900px) {
	.et-tile-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.et-landing-hero__title { font-size: 42px; }
	.et-landing-hero__subtitle { font-size: 17px; }
}
@media (max-width: 560px) {
	.et-tile-grid__grid { grid-template-columns: 1fr; }
	.et-landing-hero { padding: 40px var(--container-pad); }
	.et-landing-hero__title { font-size: 32px; }
	.et-landing-hero__subtitle { font-size: 15px; }
	.et-tile__label { font-size: 20px; padding: 20px; }
}

/* --- Shared Extra Time tab strip (used on category + newsletter pages) --- */
.et-tabs {
	display: flex; flex-wrap: wrap; gap: 8px;
	max-width: 1200px; margin: 0 auto;
	padding: 24px 0 0;
}
.et-tabs__item {
	display: inline-flex; align-items: center;
	padding: 8px 14px;
	border-radius: 8px;
	font-family: 'Montserrat', sans-serif; font-weight: 500;
	font-size: 14px; line-height: 20px; letter-spacing: 0.07px;
	color: #1f2937; background: transparent;
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.et-tabs__item:hover { color: var(--cs-red); }
.et-tabs__item.is-active {
	background: var(--cs-red); color: #ffffff;
}

/* --- Two-column category hero (Figma 221883:14508 red panel).
   Namespaced .et-cat-hero to avoid clashing with the pre-existing full-bleed
   .et-hero used on single-extra-time-post.php. --- */
.et-cat-hero {
	padding: 24px var(--container-pad) 0;
}
.et-cat-hero__inner {
	max-width: 1200px; margin: 0 auto;
	display: grid; grid-template-columns: 387px 1fr;
	gap: 0;
	background: var(--cs-red, #b31b1b);
	border-radius: 24px;
	overflow: hidden;
	min-height: 387px;
}
.et-cat-hero__image {
	position: relative; overflow: hidden;
	background: var(--cs-gray-200);
	width: 387px; height: 387px;
}
.et-cat-hero__image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.et-cat-hero__panel {
	display: flex; flex-direction: column; justify-content: center;
	gap: 12px;
	padding: 48px 56px;
	color: #ffffff;
}
.et-cat-hero__panel--full { grid-column: 1 / -1; }
.et-cat-hero__title {
	font-family: 'Montserrat', sans-serif; font-weight: 600;
	font-size: 48px; line-height: 1.1; letter-spacing: 0.24px;
	color: #ffffff; margin: 0;
}
.et-cat-hero__subtitle {
	font-family: 'Open Sans', sans-serif; font-weight: 400;
	font-size: 17px; line-height: 1.5; letter-spacing: 0.05px;
	color: #ffffff; margin: 0; opacity: 0.95;
}
@media (max-width: 900px) {
	.et-cat-hero__inner { grid-template-columns: 1fr; min-height: 0; }
	.et-cat-hero__image { width: 100%; height: auto; aspect-ratio: 4/3; }
	.et-cat-hero__panel { padding: 32px 24px; }
	.et-cat-hero__title { font-size: 32px; }
	.et-cat-hero__subtitle { font-size: 15px; }
}

/* --- Search + date filter row --- */
.et-category { padding: 40px var(--container-pad) 60px; }
.et-category__inner {
	max-width: 1200px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 32px;
}
.et-search-row {
	display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.et-search-row__search {
	flex: 1 1 320px; min-width: 0;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 14px;
	background: var(--cs-white, #ffffff);
	border: 1px solid var(--cs-border);
	border-radius: 10px;
	color: var(--cs-gray-500);
	transition: border-color var(--dur-fast) var(--ease);
}
.et-search-row__search:focus-within { border-color: var(--cs-red); }
.et-search-row__search-icon { flex: 0 0 16px; color: var(--cs-gray-500); }
.et-search-row__input {
	flex: 1 1 0; min-width: 0;
	border: 0; background: transparent; outline: none;
	font-family: 'Open Sans', sans-serif; font-size: 14px; color: #1f2937;
}
.et-search-row__date {
	position: relative;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 14px;
	background: var(--cs-white, #ffffff);
	border: 1px solid var(--cs-border);
	border-radius: 10px;
	color: var(--cs-gray-500);
	cursor: pointer;
	flex: 0 0 auto;
}
.et-search-row__date:focus-within { border-color: var(--cs-red); }
.et-search-row__date-icon { flex: 0 0 16px; color: var(--cs-gray-500); pointer-events: none; }

/* The <input type="date"> is the actual click target and fills the whole
   pill. We render it visibly (browsers refuse to open the picker on
   opacity:0 inputs in Firefox), but hide its own text/icon so the label
   span shows through. */
.et-search-row__date-input {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	margin: 0; padding: 0 14px 0 38px; /* room for icon on left */
	border: 0; background: transparent;
	color: transparent;
	font-family: inherit; font-size: 14px;
	cursor: pointer; outline: none;
	color-scheme: light;
	-webkit-appearance: none; appearance: none;
}
/* Make the native calendar-picker indicator span the entire input in Chrome/Safari
   so a click anywhere on the pill opens the picker. */
.et-search-row__date-input::-webkit-calendar-picker-indicator {
	position: absolute; inset: 0; width: 100%; height: 100%;
	margin: 0; padding: 0;
	background: transparent; color: transparent; opacity: 0;
	cursor: pointer;
}
/* Hide native spin buttons (Firefox) — we don't want up/down arrows. */
.et-search-row__date-input::-webkit-inner-spin-button,
.et-search-row__date-input::-webkit-clear-button { display: none; }

.et-search-row__date-label {
	position: relative; z-index: 1;
	font-family: 'Open Sans', sans-serif; font-size: 14px; color: var(--cs-gray-600);
	pointer-events: none;
}
.et-search-row__date.is-set .et-search-row__date-label { color: #1f2937; font-weight: 500; }

/* --- Card grid on category pages --- */
.et-grid { display: grid; gap: 24px; }
.et-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .et-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .et-grid--3 { grid-template-columns: 1fr; } }

/* --- Newsletter year rows with pill month buttons (Figma 221905:79088) --- */
.newsletter-year {
	display: grid; grid-template-columns: 88px 1fr;
	gap: 24px; align-items: center;
	padding: 20px 24px;
	background: var(--cs-white, #ffffff);
	border: 0;
	border-radius: 14px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
	margin-bottom: 16px;
}
.newsletter-year:last-child { margin-bottom: 0; }
.newsletter-year__label {
	font-family: 'Montserrat', sans-serif; font-weight: 600;
	font-size: 22px; line-height: 1; color: #1f2937;
	letter-spacing: 0.1px;
}
.newsletter-year__pills {
	display: flex; flex-wrap: wrap; gap: 10px;
}
.newsletter-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px;
	background: var(--cs-red, #b31b1b); color: #ffffff;
	border-radius: 999px;
	font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px;
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.newsletter-pill:hover { background: var(--cs-red-dark, #9a1717); transform: translateY(-1px); }
.newsletter-pill__icon { flex: 0 0 14px; color: #ffffff; }

@media (max-width: 640px) {
	.newsletter-year { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
	.newsletter-year__label { font-size: 18px; }
}

/* Hide the old extra-time tab UI (superseded by .et-tabs). */
.extra-time-subnav { display: none; }