/*
 * EJF Canopy: front-end styles.
 *
 * Layers (lowest → highest priority):
 *   reset → tokens → base → layout → components → sections → utilities
 * Plugin CSS is unlayered, so it beats every layer here; forms.css (M4)
 * restyles Fluent Forms / Ultimate Member output deliberately.
 *
 * Colour rules (brief §2.3) are enforced through "surfaces": a section sets
 * .ejf-surface-{paper|ink|green|yellow|blue}, which defines --ejf-fg, --ejf-link
 * and --ejf-focus for everything inside it. Components only use those variables.
 */

@layer reset, tokens, base, layout, components, sections, utilities;

/* Fonts: self-hosted, Latin subset, weight axis (SIL OFL, see assets/fonts/). */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("../fonts/bricolage-grotesque-var.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-var-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback so the swap to Inter doesn't shift layout (CLS). */
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial");
	ascent-override: 90.49%;
	descent-override: 22.56%;
	line-gap-override: 0%;
	size-adjust: 107.06%;
}

/* ------------------------------------------------------------------ reset */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
	:is(ul, ol)[class*="ejf-"] { margin: 0; padding: 0; list-style: none; }
	img, picture, svg, video, canvas, iframe { display: block; max-width: 100%; }
	img, video { height: auto; }
	input, button, textarea, select { font: inherit; color: inherit; }
	button { cursor: pointer; }
	[hidden] { display: none !important; }
}

/* ----------------------------------------------------------------- tokens */
@layer tokens {
	:root {
		/* Brand colours: exact values from the brief (§2.2). Do not alter. */
		--ejf-paper: #F5F1E5;
		--ejf-ink: #172B25;
		--ejf-green: #22835E;
		--ejf-yellow: #E9D45B;
		--ejf-coral: #F2704D;
		--ejf-blue: #4758B8;
		--ejf-white: #FFFFFF;
		--ejf-ink-80: rgba(23, 43, 37, .80);
		--ejf-line: rgba(23, 43, 37, .14);
		--ejf-line-dark: rgba(245, 241, 229, .18);

		/* Derived (contrast-checked in dev/check-contrast.py). */
		--ejf-green-dark: #1C6E4F;   /* hover; white on it 6.2:1 */
		--ejf-coral-light: #F58A6C;  /* hover; ink on it 6.2:1 */
		--ejf-paper-deep: #EAE4D3;   /* placeholders, subtle fills */

		--ejf-font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		--ejf-font-display: "Bricolage Grotesque", "Inter", "Inter Fallback", system-ui, sans-serif;
		--ejf-font-serif: "Fraunces", Georgia, "Times New Roman", serif;

		--ejf-fs-h1: clamp(2.5rem, 5vw + 1rem, 4.75rem);
		--ejf-fs-h2: clamp(2rem, 3vw + 1rem, 3.25rem);
		--ejf-fs-h3: 1.5rem;
		--ejf-fs-h4: 1.1875rem;
		--ejf-fs-body: 1.0625rem;
		--ejf-fs-small: .9375rem;
		--ejf-fs-xs: .8125rem;
		--ejf-fs-eyebrow: .75rem;

		--ejf-wrap: 1240px;
		--ejf-gutter: clamp(1rem, 4vw, 2.5rem);
		--ejf-section-pad: clamp(4rem, 8vw, 8rem);
		--ejf-prose: 43rem;

		--ejf-radius: 6px;
		--ejf-radius-card: 18px;
		--ejf-radius-pill: 999px;

		--ejf-ease: cubic-bezier(.22, 1, .36, 1);
		--ejf-header-h: 4.5rem;
		--ejf-header-h-condensed: 3.75rem;

		/* Default surface: paper. */
		--ejf-bg: var(--ejf-paper);
		--ejf-fg: var(--ejf-ink);
		--ejf-fg-muted: rgba(23, 43, 37, .72);   /* 5.7:1 on paper */
		--ejf-link: var(--ejf-blue);             /* 5.5:1 on paper */
		--ejf-focus: var(--ejf-blue);
		--ejf-rule: var(--ejf-line);
		--ejf-dot: var(--ejf-green);
	}

	.ejf-surface-paper {
		--ejf-bg: var(--ejf-paper);
		--ejf-fg: var(--ejf-ink);
		--ejf-fg-muted: rgba(23, 43, 37, .72);
		--ejf-link: var(--ejf-blue);
		--ejf-focus: var(--ejf-blue);
		--ejf-rule: var(--ejf-line);
		--ejf-dot: var(--ejf-green);
	}
	.ejf-surface-ink {
		--ejf-bg: var(--ejf-ink);
		--ejf-fg: var(--ejf-paper);
		--ejf-fg-muted: rgba(245, 241, 229, .75); /* 8.1:1 on ink */
		--ejf-link: var(--ejf-paper);
		--ejf-focus: var(--ejf-yellow);
		--ejf-rule: var(--ejf-line-dark);
		--ejf-dot: var(--ejf-yellow);
	}
	.ejf-surface-green {
		--ejf-bg: var(--ejf-green);
		--ejf-fg: var(--ejf-white);               /* 4.7:1; never paper (4.15) */
		--ejf-fg-muted: var(--ejf-white);
		--ejf-link: var(--ejf-white);
		--ejf-focus: var(--ejf-white);
		--ejf-rule: rgba(255, 255, 255, .3);
		--ejf-dot: var(--ejf-yellow);
	}
	.ejf-surface-yellow {
		--ejf-bg: var(--ejf-yellow);
		--ejf-fg: var(--ejf-ink);
		--ejf-fg-muted: var(--ejf-ink);
		--ejf-link: var(--ejf-ink);
		--ejf-focus: var(--ejf-ink);
		--ejf-rule: var(--ejf-line);
		--ejf-dot: var(--ejf-ink);
	}
	.ejf-surface-blue {
		--ejf-bg: var(--ejf-blue);
		--ejf-fg: var(--ejf-white);
		--ejf-fg-muted: var(--ejf-white);
		--ejf-link: var(--ejf-white);
		--ejf-focus: var(--ejf-yellow);           /* a blue ring would vanish here */
		--ejf-rule: rgba(255, 255, 255, .3);
		--ejf-dot: var(--ejf-yellow);
	}
	[class*="ejf-surface-"] {
		background-color: var(--ejf-bg);
		color: var(--ejf-fg);
	}
}

/* ------------------------------------------------------------------- base */
@layer base {
	html {
		color-scheme: light;
		scroll-padding-top: calc(var(--ejf-header-h) + 1rem);
	}
	body {
		background: var(--ejf-paper);
		color: var(--ejf-ink);
		font-family: var(--ejf-font-sans);
		font-size: var(--ejf-fs-body);
		font-weight: 400;
		line-height: 1.65;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}

	h1, h2, h3, h4, h5, h6 {
		color: inherit;
		font-weight: 400;
		line-height: 1.15;
		text-wrap: balance;
	}
	h1 { font-size: var(--ejf-fs-h1); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; }
	h2 { font-size: var(--ejf-fs-h2); font-weight: 300; line-height: 1.1; letter-spacing: -.015em; }
	h3 { font-size: var(--ejf-fs-h3); letter-spacing: -.01em; }
	h4 { font-size: var(--ejf-fs-h4); font-weight: 500; }
	h5, h6 { font-size: var(--ejf-fs-body); font-weight: 500; }
	p { text-wrap: pretty; }

	a {
		color: var(--ejf-link);
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: .18em;
	}
	a:hover { text-decoration-thickness: 2px; }

	:focus-visible {
		outline: 3px solid var(--ejf-focus);
		outline-offset: 3px;
	}
	:focus:not(:focus-visible) { outline: none; }
	.ejf-main:focus { outline: none; }

	::selection { background: var(--ejf-yellow); color: var(--ejf-ink); }

	hr { border: 0; border-top: 1px solid var(--ejf-rule); margin: 2.5rem 0; }
	strong, b { font-weight: 600; }
	small { font-size: var(--ejf-fs-small); }
	code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
	address { font-style: normal; }
	table { border-collapse: collapse; width: 100%; }
	svg { flex-shrink: 0; }
}

/* ----------------------------------------------------------------- layout */
@layer layout {
	.ejf-main { display: block; overflow-x: clip; }

	.ejf-wrap {
		width: 100%;
		max-width: calc(var(--ejf-wrap) + 2 * var(--ejf-gutter));
		margin-inline: auto;
		padding-inline: var(--ejf-gutter);
	}

	.ejf-section { padding-block: var(--ejf-section-pad); }
	.ejf-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

	.ejf-grid--cards {
		display: grid;
		gap: 2.5rem 1.5rem;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	}
}

/* ------------------------------------------------------------- components */
@layer components {

	/* Skip link -------------------------------------------------------- */
	.ejf-skip-link {
		position: absolute;
		top: -100px;
		left: 1rem;
		z-index: 1000;
		padding: .75rem 1.25rem;
		border-radius: var(--ejf-radius);
		background: var(--ejf-yellow);
		color: var(--ejf-ink);
		font-weight: 500;
		text-decoration: none;
	}
	.ejf-skip-link:focus { top: 1rem; outline-color: var(--ejf-ink); }

	/* Eyebrow ("● Label") ---------------------------------------------- */
	.ejf-eyebrow {
		display: flex;
		align-items: center;
		gap: .6em;
		margin-bottom: 1.25rem;
		color: var(--ejf-fg);
		font-size: var(--ejf-fs-eyebrow);
		font-weight: 500;
		letter-spacing: .08em;
		line-height: 1.4;
		text-transform: uppercase;
	}
	.ejf-eyebrow::before {
		content: "";
		width: .6em;
		height: .6em;
		border-radius: 50%;
		background: var(--ejf-dot);
	}

	/* Buttons ---------------------------------------------------------- */
	.ejf-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		min-height: 2.75rem;
		padding: .7rem 1.35rem;
		border: 1.5px solid transparent;
		border-radius: var(--ejf-radius);
		font-family: var(--ejf-font-sans);
		font-size: var(--ejf-fs-small);
		font-weight: 500;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ejf-ease);
	}
	.ejf-btn--primary { background: var(--ejf-green); color: var(--ejf-white); }
	.ejf-btn--primary:hover { background: var(--ejf-green-dark); color: var(--ejf-white); }
	.ejf-btn--outline { border-color: currentColor; background: transparent; color: var(--ejf-fg); }
	.ejf-btn--outline:hover { background: var(--ejf-fg); color: var(--ejf-bg); }
	.ejf-btn--coral { background: var(--ejf-coral); color: var(--ejf-ink); }      /* ink only: white fails */
	.ejf-btn--coral:hover { background: var(--ejf-coral-light); color: var(--ejf-ink); }
	.ejf-btn--ink { background: var(--ejf-ink); color: var(--ejf-paper); }
	.ejf-btn--ink:hover { background: #0E1D19; color: var(--ejf-paper); }
	.ejf-btn--pill { border-radius: var(--ejf-radius-pill); }
	.ejf-btn .ejf-svg { width: 1.1em; height: 1.1em; }

	/* Announcement bar (§0) -------------------------------------------- */
	.ejf-announcement {
		--ejf-focus: var(--ejf-yellow);
		background: var(--ejf-green);
		color: var(--ejf-white);
		font-size: var(--ejf-fs-small);
		line-height: 1.4;
	}
	.ejf-announcement-hidden .ejf-announcement { display: none; }
	.ejf-announcement__inner {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .75rem;
		min-height: 2.75rem;
		padding-block: .4rem;
	}
	.ejf-announcement__text { text-align: center; }
	.ejf-announcement__text a { color: inherit; font-weight: 500; }
	.ejf-announcement__close {
		display: none;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		margin-right: calc(-1 * (2.75rem - 1.25rem) / 2);
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: inherit;
	}
	.ejf-js .ejf-announcement__close { display: inline-flex; }
	.ejf-announcement__close:hover { background: rgba(255, 255, 255, .14); }
	.ejf-announcement__close .ejf-svg { width: 1.25rem; height: 1.25rem; }

	/* Header (§1) ------------------------------------------------------ */
	.ejf-header-sentinel {
		display: block;
		height: 24px;
		margin-bottom: -24px;
		pointer-events: none;
	}
	.ejf-header {
		position: sticky;
		top: 0;
		z-index: 100;
		border-bottom: 1px solid var(--ejf-line-dark);
	}
	.admin-bar .ejf-header { top: 32px; }
	@media (max-width: 782px) { .admin-bar .ejf-header { top: 46px; } }
	@media (max-width: 600px) { .admin-bar .ejf-header { top: 0; } }

	.ejf-header__bar {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		min-height: var(--ejf-header-h);
		transition: min-height .3s var(--ejf-ease);
	}
	.ejf-header.is-condensed .ejf-header__bar { min-height: var(--ejf-header-h-condensed); }

	.ejf-logo {
		display: inline-flex;
		align-items: center;
		gap: .75rem;
		color: var(--ejf-fg);
		font-size: var(--ejf-fs-small);
		font-weight: 500;
		line-height: 1.15;
		text-decoration: none;
	}
	.ejf-logo:hover .ejf-logo__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
	.ejf-logo__mark {
		display: block;
		width: 3rem;
		height: 3rem;
		transition: width .3s var(--ejf-ease), height .3s var(--ejf-ease);
	}
	.ejf-logo__mark--badge { padding: 4px; border-radius: 12px; background: var(--ejf-paper); }
	.ejf-logo__img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
	.ejf-logo__name { max-width: 11ch; }
	.ejf-header.is-condensed .ejf-logo__mark { width: 2.5rem; height: 2.5rem; }

	.ejf-header__toggle {
		display: none;
		align-items: center;
		gap: .6rem;
		min-height: 2.75rem;
		margin-left: auto;
		padding: .5rem .25rem .5rem .75rem;
		border: 0;
		background: transparent;
		color: var(--ejf-fg);
		font-size: var(--ejf-fs-small);
		font-weight: 500;
	}
	.ejf-header__toggle-icon,
	.ejf-header__toggle-icon span,
	.ejf-header__toggle-icon::before,
	.ejf-header__toggle-icon::after { display: block; width: 1.25rem; height: 1.5px; border-radius: 1px; background: currentColor; }
	.ejf-header__toggle-icon { position: relative; background: transparent; }
	.ejf-header__toggle-icon::before,
	.ejf-header__toggle-icon::after { content: ""; position: absolute; left: 0; transition: transform .25s var(--ejf-ease); }
	.ejf-header__toggle-icon::before { top: -6px; }
	.ejf-header__toggle-icon::after { top: 6px; }
	.ejf-header__toggle[aria-expanded="true"] .ejf-header__toggle-icon span { opacity: 0; }
	.ejf-header__toggle[aria-expanded="true"] .ejf-header__toggle-icon::before { transform: translateY(6px) rotate(45deg); }
	.ejf-header__toggle[aria-expanded="true"] .ejf-header__toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

	.ejf-header__panel { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }

	.ejf-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.4rem; }
	.ejf-nav__item { position: relative; display: flex; align-items: center; }
	.ejf-nav__link {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		min-height: 2.75rem;
		color: var(--ejf-fg);
		font-size: var(--ejf-fs-small);
		text-decoration: none;
	}
	.ejf-nav__item--depth-0 > .ejf-nav__link::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: currentColor;
		opacity: .45;
		transition: opacity .2s, background-color .2s;
	}
	.ejf-nav__link:hover .ejf-nav__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .45em; }
	.ejf-nav__item--depth-0.is-current > .ejf-nav__link::before { background: var(--ejf-yellow); opacity: 1; }
	.ejf-nav__item--depth-0.is-current > .ejf-nav__link .ejf-nav__label {
		text-decoration: underline;
		text-decoration-color: var(--ejf-yellow);
		text-decoration-thickness: 2px;
		text-underline-offset: .45em;
	}

	.ejf-nav__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: 2.75rem;
		margin-left: .1rem;
		border: 0;
		background: transparent;
		color: var(--ejf-fg);
	}
	.ejf-nav__toggle .ejf-svg { width: 1rem; height: 1rem; transition: transform .2s var(--ejf-ease); }
	.ejf-nav__toggle[aria-expanded="true"] .ejf-svg { transform: rotate(180deg); }

	.ejf-nav__sub {
		display: none;
		position: absolute;
		top: 100%;
		left: -1rem;
		z-index: 10;
		min-width: 16rem;
		padding: .5rem;
		border: 1px solid var(--ejf-line-dark);
		border-radius: var(--ejf-radius);
		background: var(--ejf-ink);
	}
	.ejf-nav__toggle[aria-expanded="true"] + .ejf-nav__sub { display: block; }
	@media (hover: hover) and (min-width: 1024px) {
		.ejf-nav__item.has-sub:hover > .ejf-nav__sub { display: block; }
	}
	.ejf-nav__sub .ejf-nav__item { display: block; }
	.ejf-nav__sub .ejf-nav__link {
		display: flex;
		min-height: 2.5rem;
		padding: .45rem .75rem;
		border-radius: 4px;
	}
	.ejf-nav__sub .ejf-nav__link:hover { background: rgba(245, 241, 229, .08); }
	.ejf-nav__sub .is-current > .ejf-nav__link { color: var(--ejf-yellow); }

	.ejf-header__actions { display: flex; align-items: center; gap: 1.25rem; }
	.ejf-header__account {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		color: var(--ejf-fg);
		font-size: var(--ejf-fs-small);
		text-decoration: none;
		white-space: nowrap;
	}
	.ejf-header__account:hover { text-decoration: underline; }
	.ejf-header__cta { white-space: nowrap; }

	/* Below 1024px: one nav, shown as a full-screen ink overlay (JS) or
	   stacked under the bar (no JS). */
	@media (max-width: 1023.98px) {
		.ejf-header__bar { flex-wrap: wrap; }
		.ejf-js .ejf-header__toggle { display: inline-flex; }
		.ejf-header__brand, .ejf-header__toggle { position: relative; z-index: 2; }

		.ejf-header__panel {
			flex-direction: column;
			align-items: stretch;
			gap: 2rem;
			width: 100%;
			margin-left: 0;
			padding-bottom: 1.5rem;
		}
		.ejf-js .ejf-header__panel { display: none; }
		.ejf-js .ejf-header__panel.is-open {
			display: flex;
			position: fixed;
			inset: 0;
			z-index: 1;
			overflow-y: auto;
			overscroll-behavior: contain;
			padding: calc(var(--ejf-panel-top, var(--ejf-header-h)) + 1.5rem) var(--ejf-gutter) 2.5rem;
			background: var(--ejf-ink);
			animation: ejf-fade-in .25s var(--ejf-ease);
		}

		.ejf-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
		.ejf-nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--ejf-line-dark); }
		.ejf-nav__item--depth-0 > .ejf-nav__link { flex: 1; min-height: 3.5rem; font-size: 1.5rem; font-weight: 300; }
		.ejf-nav__toggle { width: 3rem; height: 3.5rem; }
		.ejf-nav__toggle .ejf-svg { width: 1.25rem; height: 1.25rem; }
		.ejf-nav__sub {
			position: static;
			flex-basis: 100%;
			min-width: 0;
			margin: 0 0 .75rem;
			padding: 0 0 0 1.1rem;
			border: 0;
			background: transparent;
		}
		.ejf-nav__sub .ejf-nav__item { border: 0; }
		.ejf-nav__sub .ejf-nav__link { font-size: var(--ejf-fs-body); padding-inline: .5rem; }

		.ejf-header__actions { flex-direction: column; align-items: flex-start; gap: 1rem; }
		.ejf-header__cta { min-height: 3rem; padding-inline: 1.75rem; font-size: var(--ejf-fs-body); }
	}
	@media (min-width: 1024px) and (max-width: 1199.98px) {
		.ejf-nav__list { column-gap: 1rem; }
		.ejf-header__panel { gap: 1.25rem; }
	}
	html.ejf-menu-open { overflow: hidden; }

	/* Breadcrumbs ------------------------------------------------------ */
	.ejf-breadcrumbs { margin-bottom: 2rem; font-size: var(--ejf-fs-xs); color: var(--ejf-fg-muted); }
	.ejf-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }
	.ejf-breadcrumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
	.ejf-breadcrumbs a { color: inherit; }
	.ejf-breadcrumbs a:hover { color: var(--ejf-fg); }
	.ejf-breadcrumbs [aria-current] { color: var(--ejf-fg); }
	.ejf-breadcrumbs--rankmath p { margin: 0; }

	/* Inner-page hero --------------------------------------------------- */
	.ejf-page-hero { padding-block: clamp(2.25rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem); }
	.ejf-page-hero--overlap { padding-bottom: clamp(7rem, 16vw, 13rem); }
	.ejf-page-hero__title { max-width: 18ch; font-size: var(--ejf-fs-h1); }
	.ejf-page-hero__intro {
		max-width: 40ch;
		margin-top: 1.5rem;
		color: var(--ejf-fg-muted);
		font-family: var(--ejf-font-serif);
		font-size: clamp(1.125rem, 1vw + .9rem, 1.5rem);
		line-height: 1.45;
	}
	.ejf-page-hero__meta {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
		margin-top: 1.75rem;
		color: var(--ejf-fg-muted);
		font-size: var(--ejf-fs-small);
	}

	/* Entry (page/post body) ------------------------------------------ */
	.ejf-entry { padding-block: clamp(3rem, 6vw, 5rem) var(--ejf-section-pad); }
	.ejf-page-hero--overlap + .ejf-entry { padding-top: 0; }
	.ejf-entry__media { margin-top: calc(-1 * clamp(5rem, 12vw, 10rem)); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
	.ejf-entry__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ejf-radius); }
	.ejf-entry__media figcaption { margin-top: .75rem; color: var(--ejf-fg-muted); font-size: var(--ejf-fs-xs); }
	.ejf-entry__footer { max-width: var(--ejf-prose); margin: 4rem auto 0; padding-top: 2rem; border-top: 1px solid var(--ejf-rule); }

	.ejf-page-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; font-size: var(--ejf-fs-small); }

	/* Cards ----------------------------------------------------------- */
	.ejf-card { position: relative; display: flex; flex-direction: column; gap: 1.25rem; }
	.ejf-card__media img,
	.ejf-card__media .ejf-placeholder {
		width: 100%;
		aspect-ratio: 3 / 2;
		object-fit: cover;
		border-radius: var(--ejf-radius);
	}
	.ejf-card__meta { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--ejf-fg-muted); font-size: var(--ejf-fs-xs); }
	.ejf-card__title { margin-top: .5rem; font-size: 1.375rem; font-weight: 400; line-height: 1.25; }
	.ejf-card__link { color: var(--ejf-fg); text-decoration: none; }
	.ejf-card__link::after { content: ""; position: absolute; inset: 0; }
	.ejf-card:hover .ejf-card__link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
	.ejf-card__excerpt { margin-top: .6rem; color: var(--ejf-fg-muted); font-size: var(--ejf-fs-small); }

	/* Placeholder (line-art in place of a missing photo) ------------- */
	.ejf-placeholder {
		display: grid;
		place-items: center;
		background: var(--ejf-paper-deep);
		color: var(--ejf-green);
	}
	.ejf-placeholder .ejf-svg { width: 42%; max-width: 9rem; height: auto; }
	[class*="ejf-svg--art-"] * { vector-effect: non-scaling-stroke; }

	/* Pagination ------------------------------------------------------- */
	.ejf-pagination { margin-top: 4rem; }
	.ejf-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
	.ejf-pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
		padding-inline: .9rem;
		border: 1px solid var(--ejf-rule);
		border-radius: var(--ejf-radius-pill);
		color: var(--ejf-fg);
		font-size: var(--ejf-fs-small);
		text-decoration: none;
	}
	.ejf-pagination a.page-numbers:hover { border-color: var(--ejf-fg); }
	.ejf-pagination .current { background: var(--ejf-ink); border-color: var(--ejf-ink); color: var(--ejf-paper); }

	/* Post navigation and tags ---------------------------------------- */
	.ejf-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
	.ejf-tags a {
		display: inline-block;
		padding: .3rem .8rem;
		border: 1px solid var(--ejf-rule);
		border-radius: var(--ejf-radius-pill);
		color: var(--ejf-fg);
		font-size: var(--ejf-fs-xs);
		text-decoration: none;
	}
	.ejf-post-nav .nav-links { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
	.ejf-post-nav a { display: block; color: var(--ejf-fg); text-decoration: none; }
	.ejf-post-nav .nav-next { text-align: right; }
	.ejf-post-nav__label { display: block; color: var(--ejf-fg-muted); font-size: var(--ejf-fs-xs); text-transform: uppercase; letter-spacing: .08em; }
	.ejf-post-nav__title { display: block; margin-top: .25rem; font-size: 1.125rem; line-height: 1.35; }
	.ejf-post-nav a:hover .ejf-post-nav__title { text-decoration: underline; }

	/* Search form ------------------------------------------------------ */
	.ejf-search { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; max-width: 32rem; }
	.ejf-search__input {
		flex: 1 1 14rem;
		min-height: 2.75rem;
		padding: .6rem 1rem;
		border: 1px solid var(--ejf-line);
		border-radius: var(--ejf-radius);
		background: var(--ejf-white);
		color: var(--ejf-ink);
	}
	.ejf-search__input:focus-visible { outline-offset: 0; }

	/* Empty states ---------------------------------------------------- */
	.ejf-empty { display: grid; justify-items: center; gap: 1.5rem; padding-block: 2rem; text-align: center; }
	.ejf-empty__art { width: 7rem; height: 7rem; color: var(--ejf-green); }

	/* Comments -------------------------------------------------------- */
	.ejf-comments { padding-bottom: var(--ejf-section-pad); }
	.ejf-comments__title { font-size: var(--ejf-fs-h3); margin-bottom: 1.5rem; }
	.ejf-comments__list .comment { padding-block: 1.25rem; border-top: 1px solid var(--ejf-rule); }
	.ejf-comments__list .children { margin-left: 1.5rem; }
	.ejf-comments .comment-form { display: grid; gap: 1rem; }
	.ejf-comments .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
		width: 100%;
		padding: .6rem 1rem;
		border: 1px solid var(--ejf-line);
		border-radius: var(--ejf-radius);
		background: var(--ejf-white);
	}

	/* Admin-only notes (never seen by visitors) ----------------------- */
	.ejf-admin-note {
		margin-block: 1rem;
		padding: .75rem 1rem;
		border: 1px dashed var(--ejf-ink);
		border-radius: var(--ejf-radius);
		background: var(--ejf-yellow);
		color: var(--ejf-ink);
		font-size: var(--ejf-fs-xs);
	}
	.ejf-admin-note a { color: var(--ejf-ink); }

	/* Footer (§14) ---------------------------------------------------- */
	.ejf-footer { padding-top: clamp(3.5rem, 7vw, 6rem); font-size: var(--ejf-fs-small); }
	.ejf-footer__top { display: grid; gap: 2.75rem 2rem; }
	@media (min-width: 640px) { .ejf-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ejf-footer__brand { grid-column: 1 / -1; } }
	@media (min-width: 1024px) {
		.ejf-footer__top { grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.35fr); }
		.ejf-footer__brand { grid-column: auto; padding-right: 2rem; }
	}
	.ejf-footer__tagline {
		max-width: 22ch;
		margin: 1.75rem 0 1rem;
		font-family: var(--ejf-font-serif);
		font-size: clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
		font-style: italic;
		line-height: 1.3;
	}
	.ejf-footer__blurb { max-width: 40ch; color: var(--ejf-fg-muted); }
	.ejf-footer__newsletter { margin-top: 1.75rem; }
	.ejf-footer__heading {
		margin-bottom: 1rem;
		color: var(--ejf-fg-muted);
		font-size: var(--ejf-fs-eyebrow);
		font-weight: 500;
		letter-spacing: .08em;
		text-transform: uppercase;
	}
	.ejf-footer__links { display: grid; gap: .15rem; }
	.ejf-footer__links a,
	.ejf-footer__contact a {
		display: inline-flex;
		align-items: center;
		min-height: 2.25rem;
		color: var(--ejf-fg);
		text-decoration: none;
	}
	.ejf-footer__links a:hover,
	.ejf-footer__contact a:hover { text-decoration: underline; }
	.ejf-footer__contact { display: grid; gap: .25rem; line-height: 1.5; }
	.ejf-footer__contact span { padding-block: .4rem; color: var(--ejf-fg-muted); }

	.ejf-social { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: 1.5rem; margin-left: -.6rem; }
	.ejf-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--ejf-fg); }
	.ejf-social a:hover { background: rgba(245, 241, 229, .1); }
	.ejf-social .ejf-svg { width: 1.25rem; height: 1.25rem; }

	.ejf-footer__bottom { margin-top: clamp(3rem, 6vw, 5rem); padding-block: 1.25rem; border-top: 1px solid var(--ejf-rule); color: var(--ejf-fg-muted); font-size: var(--ejf-fs-xs); }
	.ejf-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; }
	.ejf-footer__legal-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
	.ejf-footer__legal-links a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--ejf-fg-muted); }
	.ejf-footer__legal-links a:hover { color: var(--ejf-fg); }
	.ejf-views { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
	.ejf-views .ejf-svg { width: 1.1rem; height: 1.1rem; }
	.ejf-views__page:not([hidden]) + .ejf-views__total::before { content: "·"; margin-inline: .1rem .5rem; }
	@media (max-width: 639.98px) { .ejf-views { margin-left: 0; } }
}

/* --------------------------------------------- Youth Movement scope (.ejf-c) */
@layer sections {
	.ejf-c :is(h1, h2, h3) {
		font-family: var(--ejf-font-display);
		font-weight: 700;
		letter-spacing: -.02em;
		line-height: 1.02;
	}
	.ejf-c .ejf-btn { border-radius: var(--ejf-radius-pill); }
	.ejf-c .ejf-card { border-radius: var(--ejf-radius-card); }
}

/* -------------------------------------------------------------- utilities */
@layer utilities {
	.screen-reader-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
		word-wrap: normal !important;
	}
	.screen-reader-text:focus {
		position: static !important;
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}

	/* Scroll reveal: only elements below the fold at load get .is-pending
	   (modules/reveal.js), so nothing visible ever blinks out. */
	.ejf-reveal { transition: opacity .6s var(--ejf-ease), transform .6s var(--ejf-ease); }
	.ejf-reveal.is-pending { opacity: 0; transform: translateY(24px); }

	@keyframes ejf-fade-in { from { opacity: 0; } to { opacity: 1; } }

	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			animation-duration: .01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: .01ms !important;
			scroll-behavior: auto !important;
		}
		.ejf-reveal.is-pending { opacity: 1; transform: none; }
	}
}

/* ------------------------------------------------- block content (unlayered)
 * WordPress core's block-library and global styles are unlayered, and
 * unlayered CSS beats every @layer. Rules that must win over core block
 * styles therefore live here, outside the layers, scoped to .ejf-prose.
 */
/* Prose: Gutenberg content ---------------------------------------- */
.ejf-prose { max-width: var(--ejf-prose); margin-inline: auto; }
.ejf-split .ejf-prose { margin-inline: 0; }
.ejf-prose > * + * { margin-top: 1.25em; }
.ejf-prose > :is(h2, h3, h4) { margin-top: 2.25em; }
.ejf-prose > :is(h2, h3, h4) + * { margin-top: .75em; }
.ejf-prose h2 { font-size: clamp(1.75rem, 1.5vw + 1.2rem, 2.375rem); font-weight: 300; }
.ejf-prose h3 { font-size: var(--ejf-fs-h3); }
.ejf-prose > p:first-child { margin-top: 0; }
.ejf-prose ul, .ejf-prose ol { padding-left: 1.4em; }
.ejf-prose li + li { margin-top: .4em; }
.ejf-prose li::marker { color: var(--ejf-green); }
.ejf-prose img { border-radius: var(--ejf-radius); }
.ejf-prose figcaption, .ejf-prose .wp-element-caption {
	margin-top: .6rem;
	color: var(--ejf-fg-muted);
	font-size: var(--ejf-fs-xs);
	text-align: left;
}
.ejf-prose .alignwide {
	width: min(var(--ejf-wrap), 100vw - 2 * var(--ejf-gutter));
	max-width: none;
	margin-inline: calc((100% - min(var(--ejf-wrap), 100vw - 2 * var(--ejf-gutter))) / 2);
}
.ejf-prose .alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
.ejf-prose .alignfull img { border-radius: 0; }
.ejf-prose .alignleft { float: left; margin: .3em 1.5em 1em 0; max-width: 50%; }
.ejf-prose .alignright { float: right; margin: .3em 0 1em 1.5em; max-width: 50%; }
.ejf-prose .aligncenter { margin-inline: auto; }

.ejf-prose blockquote, .ejf-prose .wp-block-quote {
	padding-left: 1.5rem;
	border-left: 3px solid var(--ejf-green);
	font-family: var(--ejf-font-serif);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.5;
}
.ejf-prose blockquote cite, .ejf-prose .wp-block-quote cite {
	display: block;
	margin-top: .75rem;
	color: var(--ejf-fg-muted);
	font-family: var(--ejf-font-sans);
	font-size: var(--ejf-fs-small);
	font-style: normal;
}
.ejf-prose .wp-block-pullquote {
	padding: 2.5rem 0;
	border-block: 1px solid var(--ejf-ink);
	text-align: left;
}
.ejf-prose .wp-block-pullquote blockquote { padding: 0; border: 0; font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); line-height: 1.3; }
.ejf-prose .wp-block-pullquote p { font-size: inherit; }

.ejf-prose .wp-block-separator { border: 0; border-top: 1px solid var(--ejf-rule); margin-block: 3rem; opacity: 1; }
.ejf-prose .wp-block-separator.is-style-dots::before { color: var(--ejf-green); }

.ejf-prose table { font-size: var(--ejf-fs-small); }
.ejf-prose th, .ejf-prose td { padding: .65rem .75rem; border: 0; border-bottom: 1px solid var(--ejf-rule); text-align: left; vertical-align: top; }
.ejf-prose thead { border-bottom: 1px solid var(--ejf-ink); }
.ejf-prose .wp-block-table table { width: 100%; }
.ejf-prose th { font-weight: 600; }
.ejf-prose .wp-block-table { overflow-x: auto; }
.ejf-prose pre { overflow-x: auto; padding: 1rem 1.25rem; border-radius: var(--ejf-radius); background: var(--ejf-paper-deep); }

.ejf-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.ejf-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: .7rem 1.35rem;
	border: 1.5px solid transparent;
	border-radius: var(--ejf-radius);
	background: var(--ejf-green);
	color: var(--ejf-white);
	font-size: var(--ejf-fs-small);
	font-weight: 500;
	text-decoration: none;
}
.ejf-prose .wp-block-button__link:hover { background: var(--ejf-green-dark); }
.ejf-prose .is-style-outline .wp-block-button__link { border-color: currentColor; background: transparent; color: var(--ejf-ink); }
.ejf-prose .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--ejf-rule); border-radius: var(--ejf-radius); }
.ejf-prose .wp-block-file__button { padding: .5rem 1rem; border-radius: var(--ejf-radius); background: var(--ejf-green); color: var(--ejf-white); text-decoration: none; }
.ejf-prose .wp-block-gallery { gap: .75rem; }
.ejf-prose .wp-block-embed iframe { width: 100%; }
.ejf-prose::after { content: ""; display: table; clear: both; }

/* Palette classes for Gutenberg (editor-color-palette). */
.has-ink-color { color: var(--ejf-ink) !important; }
.has-paper-color { color: var(--ejf-paper) !important; }
.has-green-color { color: var(--ejf-green) !important; }
.has-yellow-color { color: var(--ejf-yellow) !important; }
.has-coral-color { color: var(--ejf-coral) !important; }
.has-blue-color { color: var(--ejf-blue) !important; }
.has-white-color { color: var(--ejf-white) !important; }
.has-ink-background-color { background-color: var(--ejf-ink) !important; }
.has-paper-background-color { background-color: var(--ejf-paper) !important; }
.has-green-background-color { background-color: var(--ejf-green) !important; }
.has-yellow-background-color { background-color: var(--ejf-yellow) !important; }
.has-coral-background-color { background-color: var(--ejf-coral) !important; }
.has-blue-background-color { background-color: var(--ejf-blue) !important; }
.has-white-background-color { background-color: var(--ejf-white) !important; }
.has-background { padding: 1.5rem 1.75rem; border-radius: var(--ejf-radius); }
.has-small-font-size { font-size: var(--ejf-fs-small) !important; }
.has-normal-font-size { font-size: var(--ejf-fs-body) !important; }
.has-large-font-size { font-size: 1.5rem !important; line-height: 1.4; }
.has-huge-font-size { font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem) !important; line-height: 1.2; }

/* ---------------------------------------------- content types (M2 components) */
@layer components {
	/* Section scaffolding */
	.ejf-section-title { margin-bottom: 2rem; font-size: clamp(1.5rem, 1.5vw + 1rem, 2.125rem); font-weight: 300; }
	.ejf-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 2rem; }
	.ejf-section-head .ejf-section-title { margin-bottom: 0; }
	.ejf-section--rule { border-top: 1px solid var(--ejf-rule); }
	.ejf-section--deep { background: var(--ejf-paper-deep); }
	.ejf-empty-line { color: var(--ejf-fg-muted); }
	.ejf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; }
	.ejf-prose--lead { font-size: 1.1875rem; }
	.ejf-lead { max-width: 46ch; margin-top: 1.25rem; color: var(--ejf-fg-muted); font-size: 1.1875rem; }
	.ejf-lead p + p { margin-top: 1em; }

	/* Badges */
	.ejf-badge {
		display: inline-flex;
		align-items: center;
		padding: .2rem .65rem;
		border: 1px solid transparent;
		border-radius: var(--ejf-radius-pill);
		font-size: var(--ejf-fs-eyebrow);
		font-weight: 500;
		letter-spacing: .02em;
		line-height: 1.4;
		white-space: nowrap;
	}
	.ejf-badge--green { background: var(--ejf-green); color: var(--ejf-white); }
	.ejf-badge--blue { background: var(--ejf-blue); color: var(--ejf-white); }
	.ejf-badge--yellow { background: var(--ejf-yellow); color: var(--ejf-ink); }
	.ejf-badge--coral { background: var(--ejf-coral); color: var(--ejf-ink); }
	.ejf-badge--ink { background: var(--ejf-ink); color: var(--ejf-paper); }
	.ejf-badge--outline { border-color: currentColor; color: var(--ejf-fg); }
	.ejf-card__meta, .ejf-page-hero__meta { align-items: center; }

	/* Grids */
	.ejf-grid--team { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
	.ejf-grid--events { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; }
	.ejf-grid--compact { gap: 0 2rem; }
	.ejf-grid--compact .ejf-card { padding-block: 1.5rem; border-top: 1px solid var(--ejf-rule); }
	.ejf-team-group + .ejf-team-group { margin-top: 4rem; }

	/* Card variants */
	.ejf-card__standfirst { margin-top: .6rem; color: var(--ejf-fg-muted); font-family: var(--ejf-font-serif); font-size: 1.0625rem; line-height: 1.45; }
	.ejf-card__role { margin-top: .25rem; color: var(--ejf-fg-muted); font-size: var(--ejf-fs-small); }
	.ejf-card__links { position: relative; margin-top: .75rem; font-size: var(--ejf-fs-small); }
	.ejf-card--team .ejf-card__media img,
	.ejf-card--team .ejf-card__media .ejf-placeholder { aspect-ratio: 1; }
	.ejf-card--team .ejf-card__title { font-size: 1.1875rem; }

	.ejf-card--event {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 1.25rem;
		padding: 1.25rem;
		border: 1px solid var(--ejf-line);
		border-radius: var(--ejf-radius-card);
		background: var(--ejf-white);
		transition: transform .25s var(--ejf-ease);
	}
	.ejf-card--event:hover { transform: translateY(-4px); }
	.ejf-card--event .ejf-card__title { margin-top: .6rem; font-size: 1.3125rem; }
	.ejf-card__when, .ejf-card__where { margin-top: .4rem; font-size: var(--ejf-fs-small); }
	.ejf-card__where { color: var(--ejf-fg-muted); }
	.ejf-card__cta { min-height: 2.25rem; margin-top: 1rem; padding-block: .45rem; }
	.ejf-card--event.is-past .ejf-date { background: var(--ejf-paper-deep); }

	/* Coral date block (DD / MON) */
	.ejf-date {
		display: grid;
		place-content: center;
		width: 4.5rem;
		height: 4.75rem;
		border-radius: 14px;
		background: var(--ejf-coral);
		color: var(--ejf-ink);
		line-height: 1;
		text-align: center;
	}
	.ejf-date__day { font-family: var(--ejf-font-display); font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
	.ejf-date__month { margin-top: .3rem; font-size: var(--ejf-fs-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

	/* Topic filter */
	.ejf-filter { margin-bottom: 2.5rem; }
	.ejf-filter__list { display: flex; flex-wrap: wrap; gap: .5rem; }
	.ejf-filter__link {
		display: inline-flex;
		align-items: center;
		min-height: 2.5rem;
		padding: .4rem 1rem;
		border: 1px solid var(--ejf-line);
		border-radius: var(--ejf-radius-pill);
		color: var(--ejf-fg);
		font-size: var(--ejf-fs-small);
		text-decoration: none;
	}
	.ejf-filter__link:hover { border-color: var(--ejf-ink); }
	.ejf-filter__link[aria-current] { border-color: var(--ejf-ink); background: var(--ejf-ink); color: var(--ejf-paper); }

	/* Two-column detail layout (event, petition, project, contact) */
	.ejf-split { display: grid; gap: 2.5rem; }
	@media (min-width: 960px) {
		.ejf-split { grid-template-columns: 20rem minmax(0, 1fr); gap: 4rem; align-items: start; }
		.ejf-split--end { grid-template-columns: minmax(0, 1fr) 22rem; }
		.ejf-split--center { grid-template-columns: minmax(0, 1fr) 16rem; align-items: center; }
		.ejf-split__aside { position: sticky; top: calc(var(--ejf-header-h-condensed) + 1.5rem); }
		.ejf-split--center .ejf-split__aside { position: static; }
	}
	.ejf-panel { display: grid; gap: 1.25rem; justify-items: start; padding: 1.5rem; border: 1px solid var(--ejf-line); border-radius: var(--ejf-radius); background: var(--ejf-white); }
	.ejf-c .ejf-panel { border-radius: var(--ejf-radius-card); }
	.ejf-panel__title { font-size: 1.375rem; }
	.ejf-panel > :not(.ejf-date, .ejf-btn) { width: 100%; }
	.ejf-panel, .ejf-details dd, .ejf-form-fallback { overflow-wrap: anywhere; }
	.ejf-footer__contact a { overflow-wrap: break-word; }
	.ejf-section--deep .ejf-placeholder { background: var(--ejf-paper); }
	.ejf-details { display: grid; gap: .2rem; margin: 0; }
	.ejf-details dt { color: var(--ejf-fg-muted); font-size: var(--ejf-fs-eyebrow); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
	.ejf-details dd { margin: 0 0 .9rem; }
	.ejf-details__note { display: block; color: var(--ejf-fg-muted); font-size: var(--ejf-fs-xs); }
	.ejf-register { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--ejf-rule); scroll-margin-top: var(--ejf-header-h); }
	.ejf-register__title { margin-bottom: 1rem; font-size: var(--ejf-fs-h3); }

	/* Briefing download box */
	.ejf-download { display: grid; gap: 1rem 1.5rem; align-items: center; margin-bottom: 2rem; padding: 1.5rem; border: 1px solid var(--ejf-line); border-radius: var(--ejf-radius); background: var(--ejf-white); }
	@media (min-width: 640px) { .ejf-download { grid-template-columns: auto minmax(0, 1fr) auto; } }
	.ejf-download__art { width: 3.5rem; height: 3.5rem; color: var(--ejf-green); }
	.ejf-download__title { font-size: 1.1875rem; font-weight: 500; }
	.ejf-download p + p { color: var(--ejf-fg-muted); font-size: var(--ejf-fs-small); }

	/* Log-in prompt for gated resources */
	.ejf-login-prompt { display: grid; gap: 1rem 2rem; align-items: center; margin-bottom: 3rem; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--ejf-radius); background: var(--ejf-paper-deep); }
	@media (min-width: 640px) { .ejf-login-prompt { grid-template-columns: auto minmax(0, 1fr); } }
	.ejf-login-prompt__art { width: 5rem; height: 5rem; color: var(--ejf-green); }
	.ejf-login-prompt__title { margin-bottom: .5rem; font-size: var(--ejf-fs-h3); }
	.ejf-login-prompt .ejf-actions { margin-top: 1.25rem; }

	/* Initiatives page */
	.ejf-initiative { padding-block: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--ejf-rule); scroll-margin-top: var(--ejf-header-h); }
	.ejf-initiative__inner { display: grid; gap: 2rem 4rem; align-items: center; }
	@media (min-width: 900px) {
		.ejf-initiative__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.ejf-initiative--flip .ejf-initiative__media { order: 2; }
	}
	.ejf-initiative__media img, .ejf-initiative__media .ejf-placeholder { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ejf-radius); }
	/* Green text is allowed at 24px and up (brief 2.3). */
	.ejf-initiative__number { color: var(--ejf-green); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; }
	.ejf-initiative__title { margin-top: .75rem; font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); }
	.ejf-initiative__text { max-width: 46ch; margin-top: 1.25rem; }
	.ejf-initiative__text p + p { margin-top: 1em; }
	.ejf-initiative__subhead { margin-top: 2rem; color: var(--ejf-fg-muted); font-size: var(--ejf-fs-eyebrow); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
	.ejf-linklist { margin-top: .5rem; }
	.ejf-linklist li { border-bottom: 1px solid var(--ejf-rule); }
	.ejf-linklist a { display: block; padding-block: .6rem; color: var(--ejf-fg); text-decoration: none; }
	.ejf-linklist a:hover { text-decoration: underline; }

	/* Get Involved tiles (yellow, Youth Movement) */
	.ejf-tiles { display: grid; gap: 1.25rem; }
	@media (min-width: 768px) { .ejf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
	.ejf-tile { display: grid; align-content: start; justify-items: start; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--ejf-radius-card); background: var(--ejf-paper); color: var(--ejf-ink); scroll-margin-top: var(--ejf-header-h); }
	.ejf-tile__title { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); }
	.ejf-tile__text p + p { margin-top: 1em; }

	/* Ink call-to-action band and ornament */
	.ejf-cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
	.ejf-cta-band__title { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); }
	.ejf-cta-band .ejf-actions { margin-top: 0; }
	.ejf-ornament { color: var(--ejf-yellow); }
	.ejf-ornament .ejf-svg { width: 100%; max-width: 14rem; height: auto; margin-inline: auto; }

	/* Petition progress */
	.ejf-progress { display: grid; gap: .5rem; }
	.ejf-progress__count strong { font-size: 1.5rem; font-weight: 600; }
	.ejf-progress__target { color: var(--ejf-fg-muted); }
	.ejf-progress__bar { height: .625rem; overflow: hidden; border-radius: var(--ejf-radius-pill); background: var(--ejf-paper-deep); }
	.ejf-progress__bar span { display: block; height: 100%; border-radius: inherit; background: var(--ejf-green); }
	.ejf-progress--compact { margin-top: 1rem; }
	.ejf-petition-target { margin-top: .75rem; color: var(--ejf-fg-muted); font-size: var(--ejf-fs-small); }
	.ejf-form-fallback { padding: 1rem 1.25rem; border-left: 3px solid var(--ejf-coral); background: var(--ejf-paper-deep); }
}

/* ------------------------------------- shared by homepage and inner pages (M3) */
@layer components {
	.ejf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

	.ejf-arrow-link {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		color: var(--ejf-link);
		font-weight: 500;
		text-underline-offset: .25em;
	}
	.ejf-arrow-link .ejf-svg { width: 1.15em; height: 1.15em; transition: transform .2s var(--ejf-ease); }
	.ejf-arrow-link:hover .ejf-svg { transform: translateX(4px); }

	/* Approach flow: Identify → Understand → Engage → Advocate → Act */
	.ejf-approach { position: relative; margin-top: 3rem; }
	.ejf-approach__steps { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
	.ejf-approach__step { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
	.ejf-approach__dot {
		grid-row: 1 / span 2;
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		border-radius: 50%;
		background: var(--ejf-green);
		color: var(--ejf-white);
		font-weight: 600;
	}
	.ejf-approach__label { font-size: 1.375rem; font-weight: 400; line-height: 1.2; align-self: center; }
	.ejf-approach__sub { color: var(--ejf-fg-muted); font-size: var(--ejf-fs-small); }
	.ejf-approach__line { display: none; }
	/* Vertical connector (small screens): drawn with scaleY, staggered. */
	.ejf-approach__step:not(:last-child)::before {
		content: "";
		position: absolute;
		top: 2.75rem;
		bottom: -2rem;
		left: calc(1.375rem - 1px);
		width: 2px;
		background: var(--ejf-green);
		transform-origin: top;
		transition: transform .6s var(--ejf-ease) calc(var(--i) * .25s);
	}
	.ejf-approach.is-armed:not(.is-drawn) .ejf-approach__step::before { transform: scaleY(0); }

	@media (min-width: 768px) {
		.ejf-approach__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
		.ejf-approach__step { display: block; padding-inline: .75rem; text-align: center; }
		.ejf-approach__step::before { content: none !important; }
		.ejf-approach__dot { margin: 0 auto 1.25rem; position: relative; z-index: 1; }
		.ejf-approach__label { font-size: 1.25rem; }
		.ejf-approach__line {
			display: block;
			position: absolute;
			top: calc(1.375rem - 1px);
			left: 0;
			width: 100%;
			height: 2px;
			overflow: visible;
		}
		.ejf-approach__line line { stroke: var(--ejf-green); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ejf-ease); }
		.ejf-approach.is-armed:not(.is-drawn) .ejf-approach__line line { stroke-dashoffset: 1; }
	}

	/* Impact numbers: yellow numerals, on ink only (yellow fails on paper). */
	.ejf-stats { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); margin: 0; padding: 0; list-style: none; }
	.ejf-stat__figure { color: var(--ejf-fg); font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; }
	.ejf-surface-ink .ejf-stat__figure { color: var(--ejf-yellow); }
	.ejf-stat__label { margin-top: .75rem; color: var(--ejf-fg-muted); }
}

/* ------------------------------------------------------ forms context (M4) */
@layer components {
	.ejf-register__subtitle { margin-top: 2.5rem; font-size: 1.25rem; }
	.ejf-checklist { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
	.ejf-checklist li { position: relative; padding-left: 1.6rem; }
	.ejf-checklist li::before { content: ""; position: absolute; left: .15rem; top: .55em; width: .6rem; height: .35rem; border-bottom: 2px solid var(--ejf-green); border-left: 2px solid var(--ejf-green); transform: rotate(-45deg); }
	.ejf-form-fallback { margin-top: 1rem; padding: 1rem 1.25rem; border-left: 4px solid var(--ejf-coral); background: var(--ejf-paper-deep); }
}

/* ------------------------------------------- core classes WordPress can output */
@layer components {
	.wp-caption { max-width: 100%; }
	.wp-caption img { display: block; }
	.wp-caption-text, .gallery-caption { margin-top: .6rem; color: var(--ejf-fg-muted); font-size: var(--ejf-fs-xs); }
	.sticky .ejf-card__title::before { content: "★ "; color: var(--ejf-green); }
	.bypostauthor > .comment-body .fn::after { content: "Author"; margin-left: .5rem; padding: .1rem .5rem; border-radius: var(--ejf-radius-pill); background: var(--ejf-ink); color: var(--ejf-paper); font-size: var(--ejf-fs-eyebrow); font-weight: 500; }
}

/* ------------------------------------------------ footer newsletter form (M5)
 * Shown in the footer of every page except where the homepage band already has it.
 * Unlayered on purpose: MailPoet's own stylesheet is unlayered, and an unstyled
 * button here was paper text on a light grey default (1:1). */
.ejf-footer__newsletter form { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; }
.ejf-footer__newsletter p { margin: 0; padding: 0; }
.ejf-footer__newsletter input[type="email"],
.ejf-footer__newsletter input[type="text"] {
	flex: 1 1 11rem;
	min-width: 0;
	min-height: 2.75rem;
	padding: .55rem .9rem;
	border: 1px solid var(--ejf-field-border, rgba(23, 43, 37, .6));
	border-radius: var(--ejf-radius);
	background: var(--ejf-white);
	color: var(--ejf-ink);
	font: inherit;
}
.ejf-footer__newsletter input[type="submit"],
.ejf-footer__newsletter button[type="submit"] {
	min-height: 2.75rem;
	padding: .55rem 1.4rem;
	border: 0;
	border-radius: var(--ejf-radius);
	background: var(--ejf-yellow);
	color: var(--ejf-ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ejf-footer__newsletter input[type="submit"]:hover,
.ejf-footer__newsletter button[type="submit"]:hover { background: var(--ejf-paper); }
.ejf-footer__newsletter input:focus-visible,
.ejf-footer__newsletter button:focus-visible { outline: 3px solid var(--ejf-yellow); outline-offset: 2px; }
.ejf-footer__newsletter .mailpoet_validate_error,
.ejf-footer__newsletter .mailpoet_validate_success,
.ejf-footer__newsletter .mailpoet_message { color: var(--ejf-paper); font-size: var(--ejf-fs-small); }