/**
 * Athena - Theme Styles (SHARED: identical in Athena, AthenaCalm, AthenaEnergetic)
 *
 * The impact-focused library theme for cause-driven organizations: a hero photo with a solid
 * white card over it, big impact numbers on coloured tiles, a photo collage beside a mission
 * card, cause cards, two feature rows, live events, a testimonials wall, a newsletter panel and
 * a dark footer. The page "builds itself" as you scroll (section 14), and the main bar sticks.
 * Spec: repo-docs/themes/client-assets/Athena/athena-handoff/README.md (+ tokens.css, comps/).
 *
 * THE FAMILY: three themes share this file. Each theme's styles/tokens.css holds its colour
 * scheme (brand colours, accents, tiles, bands, footer): the stock values, and the versions
 * derived from the client's Brand Look colours, all in CSS. Everything else is here. A fix here
 * goes into all three folders: run  bash _tools/check-theme-family.sh athena
 *
 * Contents
 *   1. Shared tokens (type, space, shape, motion) + derived colours + icons
 *   2. Base, focus, skip link, container, headings
 *   3. Admin bar
 *   4. Header: utility bar, sticky main bar, logo, header buttons, menu button
 *      - the nav itself is in nav-style.css
 *   5. Shared pieces: chip, eyebrow, highlight, buttons, arrow links, block heads, social, hints
 *   6. Home: hero
 *   7. Home: impact numbers
 *   8. Home: mission (collage + card)
 *   9. Home: causes
 *  10. Home: feature row + ways to get involved
 *  11. Home: upcoming events
 *  12. Home: testimonials
 *  13. Home: newsletter
 *  14. Motion (hero load-in, scroll reveal)
 *  15. Interior: title band
 *  16. Page layout + sidebar
 *  17. Rich text (styled by element)
 *  18. Tables
 *  19. Forms (incl. the platform donation form), alerts, pagination
 *  20. Buttons (incl. platform buttons)
 *  21. Platform channel typography
 *  22. Footer
 *  23. Reduced motion
 */

/* ========================================
   1. Shared tokens. Values from the handoff's tokens.css (SHARED block). Colours that differ
   per theme are in styles/tokens.css.
   ======================================== */
:root {
	color-scheme: light;

	/* Fonts: Brand Look's, else Bricolage Grotesque + Figtree */
	--font-head: var(--cs-font-heading, "Bricolage Grotesque", Georgia, serif);
	--font-body: var(--cs-font-body, "Figtree", "Segoe UI", system-ui, sans-serif);
	--head-weight: 300;          /* fonts without a 300 fall back to 400 automatically */
	--head-track: -0.015em;      /* Brand Look Oswald: header.cfm sets 0 */

	/* Derived from the primary ink and the brand colours (tokens.css); never set by hand */
	--link: var(--primary-ink);
	--primary-strong: color-mix(in srgb, var(--primary-ink) 80%, #000);   /* hover */
	--primary-deep: color-mix(in srgb, var(--primary-ink) 62%, #000);     /* text on soft tint, h4 labels */
	--primary-soft: color-mix(in srgb, var(--primary-ink) 14%, #fff);     /* selected, date blocks, current sub-page */
	--primary-light: color-mix(in srgb, var(--brand-primary) 45%, #fff);  /* marks on dark footers */
	--secondary-soft: color-mix(in srgb, var(--brand-secondary) 30%, #fff);
	--secondary-light: color-mix(in srgb, var(--brand-secondary) 45%, #fff);

	/* Fixed neutrals */
	--ink: #212529;              /* body text 16.1:1 on white */
	--muted: #5C636A;            /* secondary text, 5.6:1 or better on every band */
	--line: #DEE2E6;
	--field-border: #868E96;     /* form field edges 3.32:1 */
	--error: #CF2E3E;            /* required asterisk and errors, 5.1:1 */
	--white: #fff;

	/* Type */
	--fs-hero: 60px;  --fs-page-title: 54px;  --fs-h2: 44px;  --fs-prose-h2: 34px;
	--fs-h3: 26px;    --fs-stat: 76px;        --fs-body: 18px; --fs-lede: 19px;
	--fs-small: 16px; --fs-caption: 15px;     --fs-eyebrow: 14px; --fs-button: 16px;
	--lh-body: 1.6;   --lh-prose: 1.7;
	--tile-label-size: 17px; --tile-label-weight: 400;

	/* Layout */
	--container: 1320px;
	--gutter: 24px;
	--section-y: 112px;
	--hero-overlap: 80px;

	/* Shape */
	--r-control: 10px;  --r-radio-tile: 12px;  --r-card: 18px;  --r-panel: 22px;  --r-pill: 999px;
	--shadow-hero-card: 0 24px 60px -24px rgb(0 0 0 / .35);
	--shadow-dropdown: 0 24px 50px -20px rgb(0 0 0 / .28);
	--shadow-sticky: 0 8px 24px -14px rgb(0 0 0 / .3);
	--shadow-photo: 0 18px 40px -22px rgb(0 0 0 / .35);

	/* Header */
	--bar-h: 84px;  --bar-h-stuck: 68px;  --admin-offset: 0px;

	/* Motion */
	--motion-duration: .6s;
	--motion-ease: cubic-bezier(.2, .7, .2, 1);
	--motion-distance: 32px;
	--motion-stagger: .1s;
	--motion-hero-photo: 1.1s;
	--motion-hero-card: .9s;

	/* Icons (CSS masks, so they take the text colour) */
	--i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
	--i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
	--i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 3l3 3-3 3'/%3E%3C/svg%3E");
	--i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E");
	--i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");

	/* Platform channels (donation form header, calendar, documents) take their accent from
	   --cs-accent, which Brand Look sets when a site has a look (its block loads after this file,
	   so it wins). Without one they would fall back to the platform's teal #17a2b8. */
	--cs-accent: var(--primary-ink);
	--cs-accent-text: #fff;

	/* Aliases for the repo-wide names, so shared snippets pick up the palette */
	--theme-primary: var(--primary-ink);
	--theme-accent: var(--brand-secondary);
	--theme-dark: var(--ink);
	--theme-font-primary: var(--font-body);
	--theme-font-heading: var(--font-head);
}
@media (max-width: 991.98px) {
	:root { --fs-hero: 44px; --fs-page-title: 44px; --fs-h2: 36px; --fs-stat: 60px; --section-y: 80px; --bar-h: 72px; }
}
@media (max-width: 575.98px) {
	:root {
		--fs-hero: 34px; --fs-page-title: 36px; --fs-h2: 30px; --fs-prose-h2: 28px; --fs-h3: 23px; --fs-stat: 42px;
		--fs-body: 17px; --fs-lede: 17px; --gutter: 16px; --section-y: 64px; --hero-overlap: 56px; --r-card: 14px;
		--bar-h: 64px; --bar-h-stuck: 56px;
	}
}
@media (prefers-reduced-motion: reduce) {
	:root { --motion-duration: 0s; --motion-distance: 0px; --motion-stagger: 0s; --motion-hero-photo: 0s; --motion-hero-card: 0s; }
}
/* The admin toolbar is fixed at the top: the sticky main bar pins below it */
body.admin-bar-active { --admin-offset: 32px; }

/* ========================================
   2. Base, focus, skip link, container, headings
   ======================================== */
html { scroll-padding-top: calc(var(--admin-offset) + var(--bar-h-stuck) + 16px); }
body {
	background: #fff;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-strong); }
img { max-width: 100%; height: auto; }

/* Focus: a 3px ink ring with a 3px gap on every link and button (15:1 on white). On dark
   fills (footer, coloured bands) the ring turns white. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.at-on-dark :focus-visible { outline-color: #fff; }

.skip-link {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 100000;
	padding: 10px 16px;
	border-radius: var(--r-control);
	background: var(--primary-ink);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }
.at-main:focus { outline: none; }

/* The theme's container: fluid, 1320px outer width, 24px gutters (16px on phones) */
.at-container {
	width: 100%;
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* Headings in theme blocks (rich-text headings are in section 17) */
.at-main :is(.at-home, .at-ptitle) :is(h1, h2, h3, h4),
.at-sidebar :is(h2, h3),
.at-footer :is(h2, h3) {
	margin: 0;
	font-family: var(--font-head);
	font-weight: var(--head-weight);
	letter-spacing: var(--head-track);
	text-wrap: balance;
}
.at-main .at-home p { margin: 0; text-wrap: pretty; }
.at-main .at-home :is(ul, ol) { margin: 0; }

/* ========================================
   3. Admin bar (WordPress-style, roleID 3+)
   ======================================== */
#admin-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 32px;
	background-color: #1d2327;
	z-index: 99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 13px;
	line-height: 32px;
}
.admin-bar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	padding: 0 8px;
}
.admin-bar-left,
.admin-bar-right { display: flex; align-items: center; height: 100%; }
.admin-bar-item {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 8px;
	color: #c3c4c7;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.admin-bar-item:hover { background-color: #2c3338; color: #72aee6; text-decoration: none; }
.admin-bar-item i, .admin-bar-item svg { font-size: 14px; }
.admin-bar-label { margin-left: 6px; }
.admin-bar-logo { background-color: #2271b1; padding: 0 10px; }
.admin-bar-logo:hover { background-color: #135e96; color: #fff; }
.admin-bar-logout:hover { background-color: #b32d2e; color: #fff; }
body.admin-bar-active { padding-top: 32px; }
@media (max-width: 575.98px) {
	.admin-bar-label { display: none; }
}

/* ========================================
   4. Header
   The utility bar scrolls away; the main bar is sticky and shortens after 40px of scroll
   (theme.js adds .is-stuck). The menu panel is the DEFAULT layout; the desktop row applies at
   992px+ unless theme.js adds .is-compact because the row does not fit. Desktop rules are
   therefore written as  @media (min-width: 992px) { .at-mainbar:not(.is-compact) ... }
   ======================================== */

/* -- Utility bar (band, 40px): search, account, social. Hidden under 992px; its items are in
      the menu panel there. -- */
.at-utility {
	display: none;
	background: var(--band);
	color: var(--muted);
	font-size: 14px;
}
.at-utility__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	min-height: 40px;
}
.at-utility__sep { width: 1px; height: 16px; background: var(--line); }
.at-account { display: flex; align-items: center; gap: 16px; }
.at-account a { color: var(--ink); text-decoration: none; }
.at-account a:hover { color: var(--primary-ink); text-decoration: underline; }
.at-utility .at-social a { width: 28px; height: 28px; color: var(--muted); }
.at-utility .at-social a:hover { color: var(--primary-ink); }
.at-utility .at-social a i { font-size: 14px; }
@media (min-width: 992px) {
	.at-utility { display: block; }
}

/* -- Header search (simpleSearchHeaderWidget). One widget: theme.js moves it between the
      utility bar and the menu panel. -- */
.at-search .header-search-form {
	position: relative;
	display: flex;
	align-items: stretch;
	margin: 0;
}
.at-search .header-search-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.at-search .header-search-msg { display: none !important; }
/* main.css styles every text input (2px border, margins, height !important); the id lifts
   these rules above it. */
.at-search #headerSearchInput {
	flex: 1 1 auto;
	min-width: 0;
	height: 100% !important;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--field-border);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	box-shadow: none;
	background: #fff;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.2;
}
.at-search #headerSearchInput::placeholder { color: var(--muted); opacity: 1; }
.at-search #headerSearchInput:focus { outline: none; box-shadow: none; }
.at-search .header-search-form:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.at-search .btn-search {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--field-border);
	border-radius: 0 8px 8px 0;
	background: var(--primary-soft);
	color: var(--primary-deep);
	font-size: 0;   /* the word "Search" stays as the accessible name; the glyph is drawn */
	box-shadow: none;
	cursor: pointer;
}
.at-search .btn-search::before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: var(--i-search) center / contain no-repeat;
	        mask: var(--i-search) center / contain no-repeat;
}
.at-utility .at-search .header-search-form { height: 30px; }
.at-utility .at-search #headerSearchInput { width: 190px; }
/* Menu panel: a full-size field */
.at-menu__search .at-search .header-search-form { height: 50px; }
.at-menu__search .at-search #headerSearchInput {
	padding: 0 14px;
	border-width: 1.5px;
	border-radius: var(--r-control) 0 0 var(--r-control);
	font-size: 17px;
}
.at-menu__search .at-search .btn-search {
	width: 52px;
	border-width: 1.5px;
	border-radius: 0 var(--r-control) var(--r-control) 0;
	background: var(--band);
	color: var(--ink);
}
.at-menu__search .at-search .header-search-form:focus-within { border-radius: var(--r-control); }

/* -- Main bar (white, 84px, sticky). Pins below the admin toolbar. -- */
.at-mainbar {
	position: sticky;
	top: var(--admin-offset);
	z-index: 1030;
	background: #fff;
	border-bottom: 1px solid var(--line);
	transition: box-shadow .25s ease;
}
.at-mainbar.is-stuck { box-shadow: var(--shadow-sticky); }
.at-bar {
	position: relative;   /* the menu panel is positioned against this row */
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: var(--bar-h);
	transition: min-height .25s ease;
}
.at-mainbar.is-stuck .at-bar { min-height: var(--bar-h-stuck); }

/* -- Logo: three-bar mark + wordmark in the primary ink, or an uploaded image. Long names
      (over ~28 characters, .is-long from header.cfm) wrap to two lines. -- */
.at-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin-right: auto;
	padding: 6px 0;
	color: var(--primary-ink);
	text-decoration: none;
}
.at-logo:hover { color: var(--primary-ink); }
.at-logo__mark { flex: none; display: block; width: 38px; height: 38px; color: var(--brand-primary); }
.at-logo__mark--image { overflow: hidden; border-radius: 8px; }
.at-logo__mark--image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.at-logo__name {
	display: block;
	min-width: 0;
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.15;
	overflow-wrap: break-word;
}
.at-logo__name small {
	display: block;
	margin-top: 3px;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.at-logo.is-long .at-logo__name { max-width: 300px; font-size: 20px; }
/* An uploaded wide logo on its own */
.at-logo--wide img { display: block; width: auto; max-width: min(320px, 60vw); max-height: 56px; }

/* -- Header buttons: the quiet button (Header Button) and Donate (Donate Button). Each section
      holds one link. Under 992px only Donate stays in the bar; the quiet one is in the menu. -- */
.at-header-actions { flex: none; display: flex; align-items: center; gap: 10px; }
.at-header-actions p { margin: 0; }
.at-header-actions .at-header-quiet { display: none; }
.at-header-actions a,
.at-menu__quiet a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border: 1.5px solid transparent;
	border-radius: var(--r-control);
	font: 600 var(--fs-button)/1 var(--font-body);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.at-header-donate a { background: var(--primary-ink); color: #fff; }
.at-header-donate a:hover { background: var(--primary-strong); color: #fff; }
.at-header-quiet a,
.at-menu__quiet a {
	border-color: color-mix(in srgb, var(--ink) 30%, transparent);
	background: transparent;
	color: var(--ink);
}
.at-header-quiet a:hover,
.at-menu__quiet a:hover { border-color: var(--ink); color: var(--ink); }
.at-header-actions a + a,
.at-menu__quiet a + a { display: none; }

/* -- Menu button (44px): bars, then a close (x) while the panel is open -- */
.at-menu-toggle {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--line);
	border-radius: var(--r-control);
	background: #fff;
	color: var(--ink);
	font-size: 18px;
	cursor: pointer;
}
.at-menu-toggle:hover { border-color: var(--ink); }
.at-menu-toggle[aria-expanded="true"] { border-color: var(--ink); }
.at-menu-toggle .icon-close,
.at-menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.at-menu-toggle[aria-expanded="true"] .icon-close { display: inline; }

@media (min-width: 992px) {
	.at-bar { gap: 32px; }
	.at-logo { margin-right: 0; }
	/* The logo keeps its size on the desktop row, so theme.js can tell when the row overflows */
	.at-mainbar:not(.is-compact) .at-logo { flex: none; }
	.at-mainbar:not(.is-compact) .at-header-actions .at-header-quiet { display: block; }
	.at-mainbar:not(.is-compact) .at-menu-toggle { display: none; }
	.at-mainbar.is-compact .at-logo { margin-right: auto; }
}
@media (max-width: 575.98px) {
	.at-bar { gap: 10px; }
	.at-logo { gap: 10px; }
	.at-logo__mark { width: 32px; height: 32px; }
	.at-logo__name { font-size: 18px; }
	/* Long names: no mark, 16px, two lines */
	.at-logo.is-long .at-logo__mark { display: none; }
	.at-logo.is-long .at-logo__name { max-width: none; font-size: 16px; }
	.at-logo--wide img { max-height: 40px; max-width: 170px; }
	.at-header-actions a { min-height: 44px; padding: 0 16px; }
}
.at-hints { position: relative; z-index: 3; }
.at-hints:empty { display: none; }

/* ========================================
   5. Shared pieces
   ======================================== */
/* Chip: the short paragraph directly before the heading in the hero, impact and feature
   blocks. A pill in the secondary colour. */
.at-chip-host > p:has(+ :is(h1, h2)) {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: 5px 12px;
	border-radius: var(--r-pill);
	background: var(--brand-secondary);
	color: var(--on-secondary);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.4;
}
/* Eyebrow: the same paragraph in the causes and testimonials blocks. Small caps text. */
.at-eyebrow-host > p:has(+ h2) {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Highlighter stripe behind a phrase: the editor's <mark> (handoff ".mark") */
.at-main .at-home mark,
.at-main mark {
	padding: 0 2px;
	background: linear-gradient(transparent 62%, var(--brand-secondary) 62%, var(--brand-secondary) 92%, transparent 92%);
	color: inherit;
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
}

/* -- Buttons (theme blocks). Primary = the primary ink with white text; quiet = outline. -- */
.at-btn,
.at-buttons > .at-actions > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 22px;
	border: 1.5px solid transparent;
	border-radius: var(--r-control);
	font: 600 var(--fs-button)/1 var(--font-body);
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.at-btn--primary,
.at-buttons > .at-actions > a:first-child {
	background: var(--primary-ink);
	color: #fff;
}
.at-btn--primary:hover,
.at-buttons > .at-actions > a:first-child:hover { background: var(--primary-strong); color: #fff; }
.at-btn--quiet,
.at-buttons > .at-actions > a:not(:first-child),
.at-buttons--quiet > .at-actions > a:first-child {
	border-color: color-mix(in srgb, var(--ink) 30%, transparent);
	background: transparent;
	color: var(--ink);
}
.at-btn--quiet:hover,
.at-buttons > .at-actions > a:not(:first-child):hover,
.at-buttons--quiet > .at-actions > a:first-child:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.at-buttons > .at-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* -- Arrow links: a paragraph of links anywhere else (View all, Full calendar, About us) -- */
.at-arrow,
.at-home :where(.at-actions:not(.at-buttons > .at-actions)) > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--link);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
}
.at-arrow::after,
.at-home :where(.at-actions:not(.at-buttons > .at-actions)) > a::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--i-arrow) center / contain no-repeat;
	        mask: var(--i-arrow) center / contain no-repeat;
	transition: transform .15s ease;
}
.at-arrow:hover,
.at-home :where(.at-actions:not(.at-buttons > .at-actions)) > a:hover { text-decoration-color: currentColor; }
.at-arrow:hover::after,
.at-home :where(.at-actions:not(.at-buttons > .at-actions)) > a:hover::after { transform: translateX(3px); }
.at-home :where(.at-actions:not(.at-buttons > .at-actions)) { display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* -- Block head: eyebrow + h2 on the left, a "View all" link on the right -- */
.at-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px 24px;
	margin-bottom: 48px;
}
.at-head > * { flex: 0 0 100%; }
.at-head > h2 { flex: 1 1 0; min-width: min(100%, 320px); max-width: 680px; }
.at-head > .at-actions { flex: none; max-width: none; }
.at-main .at-head h2 { font-size: var(--fs-h2); line-height: 1.1; }
@media (max-width: 575.98px) {
	.at-head { margin-bottom: 32px; }
}

/* -- Social icons: the "Social Media Icons" section, a <ul> of icon links -- */
.at-social ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.at-social li { margin: 0; list-style: none; }
.at-social li::marker { content: none; }
.at-social a {
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* -- Admin-only reminder where a section is missing (deleted or renamed) -- */
.at-admin-hint {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 16px 0;
	padding: 12px 14px;
	border: 2px dashed var(--primary-ink);
	border-radius: var(--r-control);
	background: #fff;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
}
.at-admin-hint strong { color: var(--primary-ink); }
.at-admin-hint a { color: var(--primary-ink); font-weight: 600; }

/* -- Home bands. White sections that follow each other share one gap (the second loses its
      top padding); two band-coloured sections that end up adjacent get a hairline. -- */
.at-sec { padding: var(--section-y) 0; }
.at-band { background: var(--band); }
.at-band + .at-band { border-top: 1px solid var(--line); }
.at-sec--white + .at-sec--white { padding-top: 0; }

/* ========================================
   6. Home: hero. Full-bleed photo (560px) with a solid white card over it, starting 150px
   down. Text never sits on the photo. No photo: the slot becomes a soft primary band (360px,
   card 120px down). Under 992px the card overlaps the bottom of the photo by 80px (56px on
   phones) and goes full width.
   ======================================== */
.at-hero {
	position: relative;
	min-height: 560px;
	margin-bottom: 96px;
	padding-top: 150px;
}
.at-hero__photo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 560px;
	overflow: hidden;
	background: var(--primary-soft);
}
.at-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.at-hero--no-photo { min-height: 360px; padding-top: 120px; }
.at-hero--no-photo .at-hero__photo { height: 360px; }
.at-hero__inner { position: relative; }
.at-hero__card {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 620px;
	padding: 52px 52px 48px;
	border-radius: var(--r-card);
	background: #fff;
	box-shadow: var(--shadow-hero-card);
}
.at-hero__card > .cs-edit-marker { display: none; }
.at-main .at-hero h1 { font-size: var(--fs-hero); line-height: 1.06; }
.at-hero__card > h1 + p { max-width: 30em; color: var(--muted); font-size: var(--fs-lede); }
.at-hero__card > .at-actions { margin-top: 6px; }
/* Hero with text and no image card shadow is still needed on the soft band */
.at-hero + .at-sec--white { padding-top: 0; }
/* A hero with only a photo (no text): the photo alone, no card */
.at-hero--photo-only { min-height: 0; padding-top: 0; }
.at-hero--photo-only .at-hero__photo { position: relative; }

@media (max-width: 991.98px) {
	.at-hero { min-height: 0; margin-bottom: 80px; padding-top: 0; }
	.at-hero__photo { position: relative; height: 380px; }
	.at-hero--no-photo .at-hero__photo { height: 240px; }
	.at-hero__card { max-width: none; margin-top: calc(var(--hero-overlap) * -1); padding: 40px 40px 36px; }
}
@media (max-width: 575.98px) {
	.at-hero { margin-bottom: 64px; }
	.at-hero__photo { height: 260px; }
	.at-hero--no-photo .at-hero__photo { height: 180px; }
	.at-hero__card { gap: 18px; padding: 28px 22px 26px; }
	.at-hero__card > .at-actions > a { flex: 1 1 auto; }
}

/* ========================================
   7. Home: impact numbers. Heading column (chip, h2, text, arrow link) at 5/12, tiles at
   7/12, 2 x 2. Each tile fill carries its own text colour (tokens --tN-bg / -num / -fg).
   data-count: 1 = one wide tile beside the heading; 2 = two taller tiles; 3 = heading above,
   three tiles full width; 4 = 2 x 2 (default). No heading: the tiles span the width.
   ======================================== */
.at-impact__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 72px;
	align-items: center;
}
.at-impact__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.at-impact__head > .cs-edit-marker { display: none; }
.at-main .at-impact__head h2 { font-size: var(--fs-h2); line-height: 1.1; }
.at-impact__head > h2 + p { color: var(--muted); }
.at-impact__head > .at-actions { margin-top: 8px; }
.at-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.at-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 220px;
	margin: 0;
	padding: 32px;
	border-radius: var(--r-card);
	list-style: none;
}
.at-tile::marker { content: none; }
.at-tile__num {
	display: block;
	font-family: var(--font-head);
	font-size: var(--fs-stat);
	font-weight: var(--head-weight);
	letter-spacing: -0.03em;
	line-height: .95;
	overflow-wrap: anywhere;
}
.at-tile__label {
	display: block;
	font-size: var(--tile-label-size);
	font-weight: var(--tile-label-weight);
	line-height: 1.45;
}
.at-tile:nth-of-type(1) { background: var(--t1-bg); color: var(--t1-fg); }
.at-tile:nth-of-type(1) .at-tile__num { color: var(--t1-num); }
.at-tile:nth-of-type(2) { background: var(--t2-bg); color: var(--t2-fg); }
.at-tile:nth-of-type(2) .at-tile__num { color: var(--t2-num); }
.at-tile:nth-of-type(3) { background: var(--t3-bg); color: var(--t3-fg); }
.at-tile:nth-of-type(3) .at-tile__num { color: var(--t3-num); }
.at-tile:nth-of-type(4) { background: var(--t4-bg); color: var(--t4-fg); }
.at-tile:nth-of-type(4) .at-tile__num { color: var(--t4-num); }

.at-tiles[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.at-tiles[data-count="2"] .at-tile { min-height: 280px; }
.at-impact--stacked .at-impact__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.at-impact--stacked .at-impact__head { max-width: 760px; }
.at-impact--stacked .at-tiles[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.at-impact--stacked .at-tiles[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991.98px) {
	.at-impact__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.at-impact--stacked .at-tiles[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
	.at-tiles { gap: 12px; }
	.at-tile { min-height: 160px; gap: 16px; padding: 22px 18px; }
	.at-tiles[data-count="2"] .at-tile { min-height: 180px; }
	.at-impact--stacked .at-tiles[data-count="3"] { grid-template-columns: minmax(0, 1fr); }
	.at-impact--stacked .at-tiles[data-count="3"] .at-tile { min-height: 0; }
}

/* ========================================
   8. Home: mission. A collage of three photos (7/12) beside the mission card (5/12). The
   collage is a 720 x 560 frame; the photos sit at percentages inside it, each with a 6px
   white border and a soft shadow: 3:2 large top left, 3:2 medium right, 3:4 small bottom
   left. Fewer photos: two keep the large + medium pair; one is a single 3:2 photo.
   ======================================== */
.at-mission__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 64px;
	align-items: center;
}
.at-mission__grid--single { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.at-mission__grid--single .at-mission__card { max-width: 760px; }
.at-collage {
	position: relative;
	width: 100%;
	max-width: 720px;
	aspect-ratio: 720 / 560;
}
.at-collage figure {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border: 6px solid #fff;
	border-radius: var(--r-card);
	background: var(--band);
	box-shadow: var(--shadow-photo);
}
.at-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-collage__l { left: 0; top: 0; width: 58%; aspect-ratio: 3 / 2; }
.at-collage__m { right: 0; top: 35%; width: 48%; aspect-ratio: 3 / 2; z-index: 1; }
.at-collage__s { left: 12%; top: 53.6%; width: 26%; aspect-ratio: 3 / 4; z-index: 2; }
.at-collage[data-count="2"] { aspect-ratio: 720 / 440; }
.at-collage[data-count="2"] .at-collage__m { top: 42%; }
.at-collage[data-count="1"] { aspect-ratio: 3 / 2; }
.at-collage[data-count="1"] .at-collage__l { position: relative; width: 100%; height: 100%; border: 0; border-radius: var(--r-panel); }

.at-mission__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: 52px 48px;
	border-radius: var(--r-panel);
	background: var(--mission-bg);
	color: var(--mission-fg);
}
.at-mission__card > .cs-edit-marker { display: none; }
.at-main .at-mission__card h2 {
	color: var(--mission-eyebrow);
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
}
.at-mission__card > p:not(.at-actions) {
	font-family: var(--font-head);
	font-size: 32px;
	font-weight: var(--head-weight);
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.at-main .at-mission__card .at-actions > a { color: var(--mission-fg); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.at-main .at-mission__card .at-actions > a:hover { color: var(--mission-fg); text-decoration-color: currentColor; }
.at-mission__card :focus-visible { outline-color: var(--mission-fg); }

@media (max-width: 991.98px) {
	.at-mission__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.at-collage { max-width: 600px; }
}
@media (max-width: 575.98px) {
	.at-mission__card { gap: 18px; padding: 34px 26px; }
	.at-mission__card > p:not(.at-actions) { font-size: 25px; }
	.at-collage figure { border-width: 4px; }
}

/* ========================================
   9. Home: causes. Eyebrow + h2 + "View all", then white cards: 3:2 photo, h3, text,
   "Learn more" and a 6px coloured bottom edge. The whole card is one link (the h3 link is
   stretched over it). Flex-wrap, centred: a short last row is centred (5 = 3 + 2).
   ======================================== */
.at-causes .at-head > p:has(+ h2),
.at-causes .at-head .at-actions > a { color: var(--cause-eyebrow); }
.at-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
.at-card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 1 calc((100% - 48px) / 3);
	min-width: 0;
	overflow: hidden;
	border-bottom: 6px solid var(--card-edge);
	border-radius: var(--r-card);
	background: #fff;
	transition: box-shadow .2s ease;
}
.at-card:hover { box-shadow: 0 18px 40px -24px rgb(0 0 0 / .3); }
.at-cards[data-count="2"] .at-card,
.at-cards[data-count="4"] .at-card { flex-basis: calc((100% - 24px) / 2); }
.at-card__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--band); }
.at-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 28px;
}
.at-card__body > .cs-edit-marker { display: none; }
.at-main .at-card h3 { font-size: var(--fs-h3); line-height: 1.2; }
.at-card h3 a { color: var(--ink); text-decoration: none; }
.at-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.at-card:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.at-card h3 a:focus-visible { outline: none; }
.at-card:has(h3 a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.at-card__body > p:not(.at-actions) { color: var(--muted); font-size: 17px; }
.at-card__more { margin-top: auto; padding-top: 6px; color: var(--card-link); font-size: 16px; font-weight: 600; }
.at-card--no-img .at-card__body { padding: 36px 32px 32px; }
.at-main .at-card--no-img h3 { font-size: 28px; }
/* One cause: a wide card, photo left and text right */
.at-cards[data-count="1"] .at-card {
	flex-basis: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.at-cards[data-count="1"] .at-card__img { aspect-ratio: auto; min-height: 340px; }
.at-cards[data-count="1"] .at-card__body { justify-content: center; gap: 14px; padding: 48px; }
.at-main .at-cards[data-count="1"] .at-card h3 { font-size: 34px; }
.at-cards[data-count="1"] .at-card--no-img { display: flex; }
.at-cards[data-count="1"] .at-card__more { margin-top: 0; }

/* Tablet: each card is a horizontal row (photo 42%); phones: stacked */
@media (max-width: 991.98px) {
	.at-cards { flex-direction: column; gap: 20px; }
	.at-cards .at-card,
	.at-cards[data-count] .at-card {
		flex-basis: auto;
		display: grid;
		grid-template-columns: 42% minmax(0, 1fr);
	}
	.at-cards .at-card--no-img { display: flex; }
	.at-cards .at-card__img { aspect-ratio: auto; min-height: 220px; height: 100%; }
	.at-cards[data-count="1"] .at-card__body { padding: 32px; }
	.at-main .at-cards[data-count="1"] .at-card h3 { font-size: var(--fs-h3); }
}
@media (max-width: 575.98px) {
	.at-cards .at-card,
	.at-cards[data-count] .at-card { display: flex; }
	.at-cards .at-card__img,
	.at-cards[data-count="1"] .at-card__img { aspect-ratio: 3 / 2; min-height: 0; height: auto; }
	.at-card__body,
	.at-cards[data-count="1"] .at-card__body { padding: 22px 20px 24px; }
}

/* ========================================
   10. Home: feature row (16:10 photo left, chip + h2 + text + quiet button right) and
   "Ways to get involved" (numbered list left, photo right). Under 992px the photo goes first.
   ======================================== */
.at-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}
.at-split--text-only { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.at-split__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-panel); background: var(--band); }
.at-split__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-split__media > .cs-edit-marker { display: none; }
.at-split__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; }
.at-split__text > .cs-edit-marker { display: none; }
.at-main .at-split__text h2 { font-size: calc(var(--fs-h2) - 4px); line-height: 1.15; }
.at-split__text > h2 + p { color: var(--muted); }
.at-feature .at-split__text > .at-actions { margin-top: 6px; }

/* Ways to get involved: an ordered list. Each item's first link (or bold text) is its title,
   the rest is the description; the number circles use tiles 1-3 (then 4). */
.at-involved .at-split__text { gap: 18px; }
.at-involved .at-split__text > h2 { margin-bottom: 8px; }
.at-involved ol {
	align-self: stretch;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--line);
	list-style: none;
	counter-reset: at-way;
}
.at-involved li {
	position: relative;
	min-height: 84px;
	margin: 0;
	padding: 20px 0 20px 62px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 17px;
	line-height: 1.5;
	list-style: none;
	counter-increment: at-way;
}
.at-involved li::marker { content: none; }
.at-involved li::before {
	content: counter(at-way);
	position: absolute;
	left: 0;
	top: 20px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--t4-bg);
	color: var(--t4-num);
	font-family: var(--font-head);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}
.at-involved li:nth-child(1)::before { background: var(--t1-bg); color: var(--t1-num); }
.at-involved li:nth-child(2)::before { background: var(--t2-bg); color: var(--t2-num); }
.at-involved li:nth-child(3)::before { background: var(--t3-bg); color: var(--t3-num); }
.at-involved li > :is(a, strong, b):first-child {
	display: block;
	margin-bottom: 4px;
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 24px;
	font-weight: var(--head-weight);
	letter-spacing: var(--head-track);
	line-height: 1.25;
	text-decoration: none;
}
.at-involved li > a:first-child::after { content: ""; position: absolute; inset: 0; }
.at-involved li:hover > a:first-child { color: var(--primary-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.at-involved li > a:first-child:focus-visible { outline: none; }
.at-involved li:has(> a:first-child:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

@media (max-width: 991.98px) {
	.at-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.at-split > .at-split__media { order: -1; }
	.at-split__media { max-width: 720px; }
}
@media (max-width: 575.98px) {
	.at-main .at-split__text h2 { font-size: var(--fs-h2); }
	.at-involved li > :is(a, strong, b):first-child { font-size: 21px; }
}

/* ========================================
   11. Home: upcoming events. Intro column (4/12) with "Full calendar"; up to three event
   rows (8/12): a 72px date block, title and a meta line. Each row is one link.
   The "Upcoming Events Static" fallback (a <ul>; each <li> = date <p>, <h3> title, then time
   and place <p>s) is styled the same.
   ======================================== */
.at-events__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 64px;
	align-items: start;
}
.at-events__grid--single { grid-template-columns: minmax(0, 1fr); }
.at-events__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.at-events__intro > .cs-edit-marker { display: none; }
.at-main .at-events__intro h2 { font-size: calc(var(--fs-h2) - 4px); line-height: 1.15; }
.at-events__intro > h2 + p { color: var(--muted); }
.at-events__list,
.at-events-static > ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.at-events__list > li,
.at-events-static > ul > li { margin: 0; list-style: none; }
.at-events__list > li::marker,
.at-events-static > ul > li::marker { content: none; }
.at-event,
.at-events-static > ul > li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 20px 24px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
	color: var(--ink);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.at-event:hover,
.at-events-static > ul > li:hover { border-color: color-mix(in srgb, var(--primary-ink) 40%, var(--line)); box-shadow: 0 12px 28px -22px rgb(0 0 0 / .35); color: var(--ink); }
.at-event__date {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 72px;
	height: 72px;
	border-radius: 12px;
	background: var(--date-bg);
	color: var(--date-fg);
	line-height: 1;
}
.at-event__mo { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.at-event__day { font-family: var(--font-head); font-size: 30px; font-weight: 400; }
.at-event__body { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.at-event__title { font-family: var(--font-head); font-size: 22px; font-weight: 400; line-height: 1.25; }
.at-event:hover .at-event__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.at-event__meta { color: var(--muted); font-size: 16px; line-height: 1.45; }

/* Static fallback rows */
.at-events-static > ul > li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 24px; align-items: center; }
.at-events-static > ul > li > p:first-child {
	grid-row: span 3;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	padding: 6px;
	border-radius: 12px;
	background: var(--date-bg);
	color: var(--date-fg);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
}
.at-main .at-events-static h3 { font-family: var(--font-head); font-size: 22px; font-weight: 400; line-height: 1.25; }
.at-events-static h3 a { color: var(--ink); text-decoration: none; }
.at-events-static h3 a::after { content: ""; position: absolute; inset: 0; }
.at-events-static li:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.at-events-static li > h3 ~ p { color: var(--muted); font-size: 16px; line-height: 1.45; }

.at-event:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 991.98px) {
	.at-events__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 575.98px) {
	.at-event,
	.at-events-static > ul > li { gap: 16px; padding: 16px; }
	.at-events-static > ul > li { grid-template-columns: 60px minmax(0, 1fr); gap: 2px 16px; }
	.at-event__date,
	.at-events-static > ul > li > p:first-child { width: 60px; height: 60px; }
	.at-event__day { font-size: 26px; }
	.at-event__title,
	.at-main .at-events-static h3 { font-size: 19px; }
	.at-event__meta { font-size: 15px; }
}

/* ========================================
   12. Home: testimonials wall. A coloured band; white quote cards in three columns (two on
   tablet, one on phones), top-aligned; a short last row is centred. Without a photo: a
   quote mark leads the card and the name sits under a short rule (skin "quote"), or an
   initials circle stands in for the photo (skin "initials").
   ======================================== */
.at-quotes { background: var(--quotes-bg); }
.at-quotes__head { display: flex; flex-direction: column; gap: 14px; max-width: 680px; margin-bottom: 48px; color: var(--quotes-fg); }
.at-quotes__head > .cs-edit-marker { display: none; }
.at-quotes__head > p:has(+ h2) { color: var(--quotes-eyebrow); }
.at-main .at-quotes__head h2 { color: var(--quotes-fg); font-size: var(--fs-h2); line-height: 1.1; }
.at-quotes__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
}
.at-quote {
	display: flex;
	flex: 0 1 calc((100% - 40px) / 3);
	flex-direction: column;
	gap: 22px;
	min-width: 0;
	margin: 0;
	padding: 30px;
	border-radius: var(--r-card);
	background: #fff;
	color: var(--ink);
}
.at-quotes__grid[data-count="2"] .at-quote,
.at-quotes__grid[data-count="4"] .at-quote { flex-basis: calc((100% - 20px) / 2); }
.at-quotes__grid[data-count="1"] .at-quote { flex-basis: min(100%, 640px); }
.at-quote > .cs-edit-marker { display: none; }
.at-quote blockquote { margin: 0; padding: 0; border: 0; font-size: 19px; line-height: 1.55; }
.at-quote blockquote p { margin: 0 0 .6em; }
.at-quote blockquote > :last-child { margin-bottom: 0; }
.at-quote figcaption { display: flex; align-items: center; gap: 14px; }
.at-quote__avatar { flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; background: var(--band); }
.at-quote__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.at-quote__initials {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--brand-secondary);
	color: var(--ink);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .02em;
}
.at-quote:nth-of-type(even) .at-quote__initials { background: var(--t3-bg); }
.at-quote__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.at-quote__who strong { font-size: 16px; font-weight: 600; }
.at-quote__who span { color: var(--muted); font-size: 15px; }
.at-quote--no-avatar::before {
	content: "\201C";
	display: block;
	height: 26px;
	color: var(--brand-secondary);
	font-family: var(--font-head);
	font-size: 64px;
	line-height: .6;
}
.at-quote--no-avatar figcaption { padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 991.98px) {
	.at-quote,
	.at-quotes__grid[data-count] .at-quote { flex-basis: calc((100% - 20px) / 2); }
	.at-quotes__grid[data-count="1"] .at-quote { flex-basis: min(100%, 640px); }
}
@media (max-width: 575.98px) {
	.at-quotes__head { margin-bottom: 32px; }
	.at-quotes__grid { gap: 14px; }
	.at-quote,
	.at-quotes__grid[data-count] .at-quote { flex-basis: 100%; padding: 24px 22px; }
	.at-quote blockquote { font-size: 18px; }
}

/* ========================================
   13. Home: newsletter. A contained band-coloured panel: heading (with a highlight) + text
   left, the platform's email signup widget right (styled, not rebuilt).
   ======================================== */
.at-news__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	padding: 44px 48px;
	border-radius: var(--r-panel);
	background: var(--band);
}
.at-news__panel--form-only { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; }
.at-news__text { display: flex; flex-direction: column; gap: 10px; }
.at-news__text > .cs-edit-marker { display: none; }
.at-main .at-news__text h2 { font-size: var(--fs-prose-h2); line-height: 1.15; }
.at-news__text > h2 + p { color: var(--muted); }
.at-news__label { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.at-news__form .footer-email-signup > h5 {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.at-news__form .footer-signup-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.at-news__form .footer-signup-form { margin: 0; }
.at-news__form .signup-input-group { display: flex; flex-wrap: wrap; gap: 10px; }
.at-news__form #footerEmailInput {
	flex: 1 1 240px;
	min-width: 0;
	height: 50px !important;
	margin: 0;
	padding: 0 16px;
	border: 1.5px solid var(--field-border);
	border-radius: var(--r-control);
	background: #fff;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	box-shadow: none;
}
.at-news__form #footerEmailInput::placeholder { color: var(--muted); opacity: 1; }
.at-news__form #footerEmailInput:focus { outline: 3px solid var(--primary-ink); outline-offset: 1px; border-color: var(--primary-ink); box-shadow: none; }
.at-news__form #footerSignupBtn {
	flex: none;
	min-height: 50px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: var(--r-control);
	background: var(--primary-ink);
	color: #fff;
	font: 600 var(--fs-button)/1 var(--font-body);
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
}
.at-news__form #footerSignupBtn:hover { background: var(--primary-strong); }
.at-news__form :is(.footer-signup-msg, .already-subscribed-msg) { margin: 10px 0 0; font-size: 16px; }
@media (max-width: 991.98px) {
	.at-news__panel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 575.98px) {
	.at-news__panel { padding: 30px 22px; }
	.at-news__form #footerSignupBtn { flex: 1 1 100%; }
}

/* ========================================
   14. Motion. The hero loads in (CSS only): the photo slides in leftwards from the right, the
   card rightwards from the left. Scroll reveal: an inline script at the top of <body> (home
   page only) adds .mo to <html> before the first paint, theme.js gives each [data-reveal]
   section .is-in once 15% of it is on screen, and its children marked .rv fade and rise. The
   hidden state applies at once (no transition), so nothing flashes; only the reveal animates.
   If theme.js has not started within 3 seconds the inline script removes .mo again, so content
   is never left hidden. prefers-reduced-motion: off.
   ======================================== */
@keyframes at-photo-in { from { opacity: 0; transform: translateX(6%) scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes at-card-in { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: none; } }
.at-hero__photo img { animation: at-photo-in var(--motion-hero-photo) var(--motion-ease) both; }
.at-hero__card { animation: at-card-in var(--motion-hero-card) var(--motion-ease) .35s both; }

.mo :is(.rv, .at-involved li) {
	opacity: 0;
	transform: translateY(var(--motion-distance));
}
.mo .rv.from-l { transform: translateX(calc(var(--motion-distance) * -1.25)); }
.mo .rv.from-r { transform: translateX(calc(var(--motion-distance) * 1.25)); }
.mo .is-in :is(.rv, .at-involved li),
.mo .at-involved.is-in li {
	opacity: 1;
	transform: none;
	transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
}
.mo .is-in .d1 { transition-delay: calc(var(--motion-stagger) * 1); }
.mo .is-in .d2 { transition-delay: calc(var(--motion-stagger) * 2); }
.mo .is-in .d3 { transition-delay: calc(var(--motion-stagger) * 3); }
.mo .is-in .d4 { transition-delay: calc(var(--motion-stagger) * 4); }
.mo .is-in .d5 { transition-delay: calc(var(--motion-stagger) * 5); }
/* Ways to get involved: the list items are editor content (no classes), so they rise one after
   another here */
.mo .at-involved.is-in li:nth-child(1) { transition-delay: calc(var(--motion-stagger) * 1); }
.mo .at-involved.is-in li:nth-child(2) { transition-delay: calc(var(--motion-stagger) * 2); }
.mo .at-involved.is-in li:nth-child(3) { transition-delay: calc(var(--motion-stagger) * 3); }
.mo .at-involved.is-in li:nth-child(n+4) { transition-delay: calc(var(--motion-stagger) * 4); }
/* Horizontal slides must not widen the page */
.at-home { overflow-x: clip; }

/* ========================================
   15. Interior: title band. Band background, breadcrumb, h1, and a 6px four-colour stripe
   along the bottom edge. Without a sidebar the title lines up with the centred 800px column.
   ======================================== */
.at-ptitle { position: relative; padding: 56px 0 52px; background: var(--band); }
.at-ptitle::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background: linear-gradient(90deg, var(--stripe-1) 0 25%, var(--stripe-2) 25% 50%, var(--stripe-3) 50% 75%, var(--stripe-4) 75% 100%);
}
.at-ptitle--narrow .at-ptitle__inner { max-width: 800px; margin: 0 auto; }
.at-main .at-ptitle h1 { max-width: 18em; font-size: var(--fs-page-title); line-height: 1.08; }
.at-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 0 18px;
	padding: 0;
	color: var(--muted);
	font-size: 15px;
	list-style: none;
}
.at-crumbs li { margin: 0; }
.at-crumbs li + li::before { content: "\203A"; margin-right: 10px; color: #6C757D; }
.at-crumbs a { color: var(--muted); text-decoration: none; }
.at-crumbs a:hover { color: var(--primary-ink); text-decoration: underline; }
@media (max-width: 575.98px) {
	.at-ptitle { padding: 32px 0 36px; }
	.at-crumbs ol { margin-bottom: 12px; font-size: 14px; }
}

/* ========================================
   16. Page layout + sidebar
   The CMS writes the page body inside .at-content: #primary-content for the div layouts,
   #C1TABLE td.content for the older table layouts - selectors cover both (gotcha 4).
   With a sidebar: content + 340px sidebar, 80px gap. Without: a centred 800px text column
   (only the editor's class-less elements are capped, so channels keep the full width).
   ======================================== */
.main-content { padding: 64px 0 112px; }
.at-content { min-width: 0; }
/* Home page: the bands above carry the page and the body is often empty (theme.js) */
body.is-homepage .main-content { padding: 0 0 var(--section-y); }
body.is-homepage .main-content.is-empty { display: none; }

@media (min-width: 992px) {
	.at-layout.has-sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 48px 64px;
		align-items: start;
	}
}
@media (min-width: 1200px) {
	.at-layout.has-sidebar { gap: 48px 80px; }
}
@media (max-width: 991.98px) {
	.main-content { padding: 48px 0 80px; }
}
@media (max-width: 575.98px) {
	.main-content { padding: 36px 0 64px; }
}

.at-layout:not(.has-sidebar) :where(.at-content, .at-content > div, .at-content td.content) > :is(p, ul, ol, dl, h2, h3, h4, h5, h6, blockquote, figure, hr):not([class]),
.at-layout:not(.has-sidebar) :where(.at-content, .at-content > div, .at-content td.content) > :is(.lead, .at-table-wrap, .at-table-hint, table.table, .card) {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.has-sidebar :where(.at-content, .at-content > div, .at-content td.content) > :is(p, ul, ol, dl, h2, h3, h4, h5, h6, blockquote, figure):not([class]) { max-width: 760px; }

/* -- Sidebar: "In this section" + the Donate card. Sticky on desktop (below the sticky bar);
      static under 992px, below the content. -- */
.at-sidebar { display: flex; flex-direction: column; gap: 24px; min-width: 0; margin-top: 48px; }
@media (min-width: 992px) {
	.at-sidebar {
		position: sticky;
		top: calc(var(--admin-offset) + var(--bar-h-stuck) + 24px);
		margin-top: 0;
	}
}
.at-side-nav { padding: 24px; border: 1px solid var(--line); border-radius: 16px; }
.main-content .at-side-nav__label {
	margin: 0 0 10px;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
}
.at-side-nav ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.at-side-nav li { margin: 0; list-style: none; }
.at-side-nav li::marker { content: none; }
.at-side-nav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: var(--r-control);
	color: var(--ink);
	font-size: 17px;
	line-height: 1.35;
	text-decoration: none;
}
.at-side-nav a:hover { background: var(--band); color: var(--primary-ink); }
.at-side-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-deep); font-weight: 600; }
.at-side-nav ul ul a { padding-left: 28px; font-size: 16px; }

/* Donate card ("Sidebar Donate"): soft secondary, heading, text, primary button */
.at-donate-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 28px 24px;
	border-radius: 16px;
	background: var(--secondary-soft);
	color: var(--ink);
}
.at-donate-card > .cs-edit-marker { display: none; }
.main-content .at-donate-card :is(h2, h3) { margin: 0; font-size: 28px; line-height: 1.15; }
.main-content .at-donate-card p { margin: 0; font-size: 16px; line-height: 1.55; }
.at-donate-card > .at-actions { margin-top: 4px; }

.admin-edit-link { margin-bottom: 16px; text-align: right; }

/* ========================================
   17. Rich text - styled by element, no classes needed. Scoped to the content area; every
   rule carries .main-content so it outranks single-class rules (gotcha 1).
   ======================================== */
.main-content .at-content { font-size: var(--fs-body); line-height: var(--lh-prose); }
.main-content .at-content :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ink);
	font-family: var(--font-head);
	font-weight: var(--head-weight);
	letter-spacing: var(--head-track);
	text-wrap: balance;
}
.main-content .at-content h1 { margin: 0 0 24px; font-size: var(--fs-page-title); line-height: 1.08; }
.main-content .at-content h2 { margin: 1.7em 0 .55em; font-size: var(--fs-prose-h2); line-height: 1.2; }
.main-content .at-content h3 { margin: 1.6em 0 .5em; font-size: 25px; font-weight: 400; line-height: 1.3; }
.main-content .at-content h4 {
	margin: 1.8em 0 .5em;
	color: var(--primary-deep);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
}
.main-content .at-content :is(h5, h6) { margin: 1.6em 0 .5em; font-size: 19px; font-weight: 400; }
@media (max-width: 575.98px) {
	.main-content .at-content h3 { font-size: 22px; }
}
/* First thing in the body: no top margin (an edit marker can come first, gotcha 4) */
:where(.at-content, .at-content > div, .at-content td.content) > :is(h1, h2, h3, h4, h5, h6):first-child,
.at-content .cs-edit-marker:first-child + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0 !important; }

.main-content .at-content p { margin: 0 0 1.15em; }
.main-content .at-content .lead { font-size: 20px; line-height: 1.6; color: var(--muted); }

.main-content .at-content :is(p, li, td, dd, figcaption, blockquote) a:not(.btn) {
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.main-content .at-content :is(p, li, td, dd, figcaption, blockquote) a:not(.btn):hover {
	color: var(--primary-strong);
	text-decoration-thickness: 2px;
}
.main-content .at-content :is(strong, b) { font-weight: 600; }

/* Lists: primary markers */
/* Top and bottom only: the centred 800px column sets the side margins (section 16) */
.main-content .at-content :is(ul, ol):not([class]) { margin-top: 0; margin-bottom: 1.3em; padding-left: 1.4em; }
.main-content .at-content :is(ul, ol):not([class]) li { margin: .35em 0; padding-left: .3em; }
.main-content .at-content ul:not([class]) { list-style: disc; }
.main-content .at-content ul:not([class]) li::marker { color: var(--brand-primary); font-size: 1.1em; }
.main-content .at-content ol:not([class]) li::marker { color: var(--primary-ink); font-weight: 600; }
.main-content .at-content :is(ul, ol):not([class]) :is(ul, ol) { margin: .35em 0 0; }

/* Figure: 16:9, rounded, caption below */
.main-content .at-content figure { margin: 2em 0; }
.main-content .at-content figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.main-content .at-content p > img:only-child { display: block; width: 100%; height: auto; border-radius: 14px; }
.main-content .at-content figcaption { margin-top: 10px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; }

/* Blockquote: heading font 300, a large secondary quote mark, cite below */
.main-content .at-content blockquote {
	margin: 2em 0;
	padding: 0;
	border: 0;
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 27px;
	font-weight: var(--head-weight);
	letter-spacing: -0.01em;
	line-height: 1.4;
}
.main-content .at-content blockquote::before {
	content: "\201C";
	display: block;
	height: 30px;
	color: var(--brand-secondary);
	font-family: var(--font-head);
	font-size: 72px;
	font-weight: 400;
	line-height: .5;
}
.main-content .at-content blockquote p { margin: 0 0 .5em; font-size: inherit; line-height: inherit; }
.main-content .at-content blockquote :is(cite, footer) {
	display: block;
	margin-top: 10px;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
}
.main-content .at-content blockquote footer::before { content: none; }
@media (max-width: 575.98px) {
	.main-content .at-content blockquote { font-size: 22px; }
	.main-content .at-content figure img,
	.main-content .at-content p > img:only-child { border-radius: 10px; }
}

/* hr: a hairline (editor content only) */
.main-content :where(.at-content, .at-content > div, .at-content td.content) > hr {
	height: 0;
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid var(--line);
	opacity: 1;
}

/* Bootstrap card (the "Contact card" snippet) */
.main-content .at-content .card {
	margin: 0 0 1.4em;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
	font-size: 16px;
	line-height: 1.55;
}
.main-content .at-content .card-body { padding: 24px; }
.main-content .at-content .card-body > :last-child { margin-bottom: 0; }
.main-content .at-content .card :is(.card-title, h2, h3, h4) { margin: 0 0 10px; font-size: 22px; font-weight: 400; }

/* ========================================
   18. Tables. Deliberately NOT a bare "table, th, td" rule: core renders several channels as
   layout tables, and the table page layout (#C1TABLE) contains the editor's table (gotcha 4).
   Styled: tables with their OWN header cells, and anything with class="table". theme.js wraps
   them for sideways scrolling (with a hint on phones).
   ======================================== */
.main-content :is(.at-content table:has(> thead > tr > th, > tbody > tr > th, > tr > th), table.table) {
	width: 100%;
	min-width: 560px;
	margin: 0;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	--bs-table-bg: transparent;
}
.main-content :is(.at-content table:has(> thead > tr > th, > tbody > tr > th, > tr > th), table.table) th {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--band);
	color: var(--ink);
	font-weight: 600;
	text-align: left;
	vertical-align: bottom;
}
.main-content :is(.at-content table:has(> thead > tr > th, > tbody > tr > th, > tr > th), table.table) td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.main-content :is(.at-content table:has(> thead > tr > th, > tbody > tr > th, > tr > th), table.table) tr:last-child > td { border-bottom: 0; }
.main-content :is(.at-content table:has(> thead > tr > th, > tbody > tr > th, > tr > th), table.table) caption {
	caption-side: top;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	background: #fff;
	color: var(--ink);
	font-weight: 600;
	text-align: left;
}
.main-content .at-content :is(td, th).num { text-align: right; font-variant-numeric: tabular-nums; }
.at-table-wrap {
	overflow-x: auto;
	overflow-y: hidden;
	margin: 1.5em 0 2em;
	border: 1px solid var(--line);
	border-radius: 12px;
}
.at-table-hint { display: none; margin: 1.5em 0 -1.3em; color: var(--muted); font-size: 14px; }
@media (max-width: 575.98px) {
	.at-table-hint.is-needed { display: block; }
}

/* ========================================
   19. Forms. Styled by element inside the content area; no classes needed from the platform.
   main.css styles every input/select/textarea (2px #ccc border, bottom margin; text inputs get
   "height: inherit !important"). The :is(..., #at-form-scope) scope reaches one-ID strength
   so these win; #at-form-scope itself matches nothing.
   ======================================== */
:is(.main-content, #at-form-scope) :is(
	input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
	input[type="number"], input[type="password"], input[type="search"],
	input[type="date"], input[type="time"], select, textarea, .form-control, .form-select
):where(:not(.hasDatepicker, .currency, .footer-email-input, [type="checkbox"], [type="radio"])) {
	min-height: 50px;
	padding: 10px 14px;
	border: 1.5px solid var(--field-border);
	border-radius: var(--r-control);
	background-color: #fff;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.4;
	box-shadow: none;

	&:focus {
		border-color: var(--primary-ink);
		outline: 3px solid var(--primary-ink);
		outline-offset: 1px;
		box-shadow: none;
	}
	&:is([aria-invalid="true"], .is-invalid, .error) { border-width: 2px; border-color: var(--error); }
}
:is(.main-content, #at-form-scope) textarea { min-height: 120px; resize: vertical; }
:is(.main-content, #at-form-scope) :is(select, .form-select) { padding-right: 44px; }

.main-content :is(label, .form-label) {
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}
.main-content .form-label { display: block; margin-bottom: 6px; }
.main-content :is(.form-text, .help-block, small.text-muted) { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; }
.main-content :is(.invalid-feedback, .error-message, .errorMsg) { margin-top: 6px; color: var(--error); font-size: 15px; font-weight: 500; }
.main-content .is-invalid ~ .invalid-feedback,
.main-content .was-validated :invalid ~ .invalid-feedback { display: block; }
.main-content :is(.required, .req) { color: var(--error); }
.main-content :is(input[type="checkbox"], input[type="radio"], .form-check-input) {
	width: 20px;
	height: 20px;
	accent-color: var(--primary-ink);
	vertical-align: -4px;
	cursor: pointer;
}
.main-content .form-check-input:checked { border-color: var(--primary-ink); background-color: var(--primary-ink); }
.main-content .form-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; margin: 0; }
.main-content .form-check .form-check-input { flex: none; float: none; margin: 2px 0 0; }
.main-content .form-check-label { font-size: 17px; font-weight: 400; line-height: 1.45; cursor: pointer; }
.main-content fieldset:not([class]) { min-width: 0; margin: 0 0 40px; padding: 0; border: 0; }
.main-content fieldset:not([class]) > legend {
	float: none;
	width: 100%;
	margin: 0 0 18px;
	padding: 0;
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: var(--head-track);
	line-height: 1.25;
}
.main-content .mb-3 { margin-bottom: 20px !important; }

/* Radio groups as tiles. Generic forms: a fieldset whose labels wrap their radios. 3 columns
   (2 on phones), 60px tall, heading-font labels, the native radio visible; the checked tile
   gets a 2px primary border, a soft fill and deep text. */
.main-content fieldset:not([class]):has(> label > input[type="radio"]) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.main-content fieldset:not([class]):has(> label > input[type="radio"]) > legend { grid-column: 1 / -1; margin-bottom: 6px; }
/* Class-less fieldsets and labels only (what a generic form prints): channels that style their
   own radio rows, such as the calendar search (fieldset.cs-cal-dates), stay as they are */
.main-content fieldset:not([class]) > label:not([class]):has(> input[type="radio"]) {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 60px;
	margin: 0;
	padding: 0 18px;
	border: 1.5px solid var(--field-border);
	border-radius: var(--r-radio-tile);
	background: #fff;
	font: 400 22px/1 var(--font-head);
	cursor: pointer;
}
.main-content fieldset:not([class]) > label:not([class]):has(> input[type="radio"]:checked) { border: 2px solid var(--primary-ink); background: var(--primary-soft); color: var(--primary-deep); }

/* The platform donation form (core donation/dsp_donationform.cfm, "Donation Form" channel with
   suggested amounts): rows of .radio-container, each an <input> followed by its <label>, and an
   "Other" text box. main.css styles it with three-ID selectors and hides the radio; the same
   selectors here (this file loads later) turn the amounts into the tiles above, with the native
   radio visible inside each tile. */
#donationform table#donationformtable tr td #form-container { gap: 12px; max-width: 680px; }
#donationform table#donationformtable tr td #form-container .radio-group { gap: 12px; }
#donationform table#donationformtable tr td #form-container .radio-container {
	position: relative;
	flex: 1 1 0;
	margin: 0;
	border: 0;
	border-radius: var(--r-radio-tile);
	background: transparent;
}
#donationform table#donationformtable tr td #form-container .radio-container:hover { background: transparent; }
#donationform table#donationformtable tr td #form-container .radio-container input[type="radio"] {
	display: block;
	position: absolute;
	left: 18px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0;
	accent-color: var(--primary-ink);
	pointer-events: none;   /* the label is the click target */
}
#donationform table#donationformtable tr td #form-container .radio-container label {
	display: flex;
	align-items: center;
	min-height: 60px;
	margin: 0;
	padding: 0 18px 0 50px;
	border: 1.5px solid var(--field-border);
	border-radius: var(--r-radio-tile);
	background: #fff;
	color: var(--ink);
	font: 400 22px/1 var(--font-head);
}
#donationform table#donationformtable tr td #form-container .radio-container label:hover { border-color: var(--ink); }
#donationform table#donationformtable tr td #form-container .radio-container input[type="radio"]:checked + label {
	border: 2px solid var(--primary-ink);
	background: var(--primary-soft);
	color: var(--primary-deep);
}
#donationform table#donationformtable tr td #form-container .radio-container input[type="radio"]:focus-visible + label { outline: 3px solid var(--primary-ink); outline-offset: 1px; }
#donationform table#donationformtable tr td #form-container .text-box-container { margin: 0; }
#donationform table#donationformtable tr td #form-container .text-box-container input[type="text"] {
	min-height: 60px;
	padding: 10px 14px;
	border: 1.5px solid var(--field-border);
	border-radius: var(--r-radio-tile);
	font-size: 17px;
}
@media (max-width: 575.98px) {
	.main-content fieldset:not([class]):has(> label > input[type="radio"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.main-content fieldset:not([class]) > label:not([class]):has(> input[type="radio"]),
	#donationform table#donationformtable tr td #form-container .radio-container label { min-height: 56px; font-size: 20px; }
	.main-content fieldset:not([class]) > legend { font-size: 23px; }
}

/* Alerts */
.main-content .alert {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 28px;
	padding: 16px 20px;
	border: 1px solid transparent;
	border-radius: var(--r-control);
	font-size: 16px;
	line-height: 1.5;
}
.main-content .alert-danger { border-color: #F5C2C7; background: #FDF0F1; color: #842029; }
.main-content .alert-success { border-color: #BADBCC; background: #EEF8F2; color: #0F5132; }
.main-content .alert-info { border-color: var(--primary-soft); background: color-mix(in srgb, var(--primary-ink) 5%, #fff); color: var(--ink); }
.main-content .alert-warning { border-color: #FFE69C; background: #FFF8E1; color: #664D03; }

/* Pagination: 44px square links, active = primary fill */
.main-content .pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.main-content .pagination .page-link {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-control) !important;
	background: #fff;
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: none;
}
.main-content .pagination .page-link:hover { border-color: var(--primary-ink); background: #fff; color: var(--primary-ink); }
.main-content .pagination :is(.active > .page-link, .page-link.active) { border-color: var(--primary-ink); background: var(--primary-ink); color: #fff; }
.main-content .pagination .disabled > .page-link { color: var(--muted); opacity: .55; pointer-events: none; }

/* ========================================
   20. Buttons. Primary = the primary ink with white text; secondary = the secondary colour
   with its text colour; outline = quiet. Submit buttons in forms: 56px, radius 12, 18px.
   main.css paints every .btn / .submit / .appInputButton green through one shared rule (and
   some of its button rules are id-scoped), so the scope below reaches one-ID strength.
   #at-button-scope matches nothing. Left alone: .btn-close, store colour variants.
   ======================================== */
:is(.main-content, #at-button-scope) :is(
	.btn,
	.submit,
	.appInputButton,
	input[type="submit"]:where(:not([class])),
	input[type="button"]:where(:not([class])),
	button[type="submit"]:where(:not([class])),
	.form-actions button
):where(:not(.btn-close, .btn-link, .button-green, .button-gray, .button-red, .button-blue, .button-burgundy)) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 22px;
	border: 1.5px solid var(--primary-ink);
	border-radius: var(--r-control);
	background-color: var(--primary-ink);
	background-image: none;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--fs-button);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;

	&:hover,
	&:focus-visible,
	&:active,
	&.active {
		background-color: var(--primary-strong);
		border-color: var(--primary-strong);
		color: #fff;
	}
	&:disabled, &.disabled {
		background-color: var(--line);
		border-color: var(--line);
		color: var(--muted);
		cursor: not-allowed;
		opacity: 1;
	}
	&.btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
	&.btn-lg { min-height: 56px; padding: 0 30px; font-size: 18px; }

	/* Secondary: the secondary colour with its own text colour */
	&:is(.btn-secondary, .btn-default, .btn-light, .btn-warning) {
		background-color: var(--brand-secondary);
		border-color: var(--brand-secondary);
		color: var(--on-secondary);

		&:hover, &:focus-visible, &:active, &.active {
			background-color: color-mix(in srgb, var(--brand-secondary) 86%, #000);
			border-color: color-mix(in srgb, var(--brand-secondary) 86%, #000);
			color: var(--on-secondary);
		}
	}
	/* Outline = the quiet button */
	&:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark) {
		background-color: transparent;
		border-color: color-mix(in srgb, var(--ink) 30%, transparent);
		color: var(--ink);

		&:hover, &:focus-visible, &:active, &.active {
			background-color: transparent;
			border-color: var(--ink);
			color: var(--ink);
		}
	}
}
/* Form submit: 56px tall, radius 12, 18px; full width on phones */
:is(.main-content, #at-button-scope) form :is(button[type="submit"], input[type="submit"], .appInputButton):where(:not(.btn-sm, .footer-signup-btn)) {
	min-height: 56px;
	padding: 0 32px;
	border-radius: 12px;
	font-size: 18px;
}
:is(.main-content, #at-button-scope) .btn.btn-link {
	min-height: 44px;
	padding: 0 6px;
	border-color: transparent;
	background: transparent;
	color: var(--link);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;

	&:hover, &:focus-visible { background: transparent; color: var(--primary-strong); }
}
/* The one core button rule stronger than the scope above (1,3,0). Same selector here, so load
   order decides. */
#showdocumentlist span.pull-right .btn-success:hover {
	background-color: var(--primary-strong);
	border-color: var(--primary-strong);
	color: #fff;
}
/* A paragraph of buttons (the "Button pair" snippet); full width on phones */
.main-content .at-content p:has(> .btn + .btn) { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5em; }
@media (max-width: 575.98px) {
	.main-content .at-content p:has(> .btn + .btn) > .btn,
	.main-content .at-content form :is(button[type="submit"], input[type="submit"], .appInputButton) { width: 100%; }
}

/* ========================================
   21. Platform channel typography
   Channels mark their text with shared classes (.appTitle1-3, .appOutput, .appLinkInline);
   main.css only gives them grey em sizes. Channel BOXES are styled by Brand Look tokens;
   channel TEXT is mapped here.
   ======================================== */
.appTitle1,
.main-content .appTitle1 {
	color: var(--ink);
	font-family: var(--font-head);
	font-size: var(--fs-prose-h2);
	font-weight: var(--head-weight);
	letter-spacing: var(--head-track);
	line-height: 1.2;
}
.appTitle2,
.main-content .appTitle2 {
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.3;
}
.appTitle3,
.main-content .appTitle3 {
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}
.appOutput { color: var(--ink); line-height: 1.6; }
a.appLinkInline,
.appLinkInline a { color: var(--link); }
a.appLinkInline:hover,
.appLinkInline a:hover { color: var(--primary-strong); }

/* ========================================
   22. Footer. Dark; columns 1.4fr / 1fr / 1fr / 1fr: brand (mark + name, Footer Contact,
   44px social circles) then three link columns headed in --fh1..3. Legal row underneath.
   Tablet: the brand column spans, the link columns go three across. Phones: one column with
   44px link rows. An empty column drops out and the rest reflow.
   ======================================== */
.at-footer {
	padding: 80px 0 32px;
	background: var(--footer);
	color: var(--footer-text);
	font-size: 16px;
	line-height: 1.6;
}
.at-footer a { color: var(--footer-text); text-decoration: none; }
.at-footer a:hover { color: #fff; text-decoration: underline; }
.at-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 48px;
	margin-bottom: 56px;
}
.at-footer__grid--3 { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.at-footer__grid--2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.at-footer__grid--1 { grid-template-columns: minmax(0, 1fr); }
.at-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.at-footer .at-logo { margin: 0; padding: 0; color: #fff; }
.at-footer .at-logo:hover { color: #fff; text-decoration: none; }
.at-footer .at-logo__mark { width: 34px; height: 34px; color: var(--footer-mark); }
.at-footer .at-logo__name { color: #fff; font-size: 21px; }
.at-footer__contact { line-height: 1.7; }
.at-footer__contact p { margin: 0 0 12px; }
.at-footer__contact > :last-child { margin-bottom: 0; }
.at-footer__social ul { gap: 8px; }
.at-footer__social a { width: 44px; height: 44px; border: 1px solid var(--footer-ring); color: #fff; }
.at-footer__social a:hover { border-color: #fff; background: #fff; color: var(--footer); text-decoration: none; }
.at-footer__social a i { font-size: 16px; }
.at-footer__links { display: flex; flex-direction: column; }
.at-footer__links :is(h2, h3, h4) {
	margin: 0 0 12px;
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
}
.at-footer__links:nth-of-type(1) :is(h2, h3, h4) { color: var(--fh1); }
.at-footer__links:nth-of-type(2) :is(h2, h3, h4) { color: var(--fh2); }
.at-footer__links:nth-of-type(3) :is(h2, h3, h4) { color: var(--fh3); }
.at-footer__links ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.at-footer__links li { margin: 0; list-style: none; }
.at-footer__links li::marker { content: none; }
.at-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 16px;
	padding-top: 24px;
	border-top: 1px solid var(--footer-rule);
	font-size: 14px;
}
.at-footer__legal p { margin: 0; }
.at-footer__legal p:last-child:not(:first-child) { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.at-footer .at-admin-hint { margin: 0 0 12px; }

@media (max-width: 991.98px) {
	.at-footer { padding-top: 64px; }
	.at-footer__grid,
	.at-footer__grid--3,
	.at-footer__grid--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
	.at-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
	.at-footer { padding-top: 56px; }
	.at-footer__grid,
	.at-footer__grid--3,
	.at-footer__grid--2 { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 40px; }
	.at-footer__links ul { gap: 0; }
	.at-footer__links a { display: flex; align-items: center; min-height: 44px; }
	.at-footer__legal { flex-direction: column; }
	.at-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ========================================
   23. Reduced motion: every animation and transition off
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	.at-hero__photo img,
	.at-hero__card { animation: none; }
	.mo :is(.rv, .at-involved li) { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}