/* ============================================================
   Movement design system — 1:1 port of the SPA's src/index.css
   plus per-component CSS translated from the React components'
   Tailwind classes. Fonts come from theme.json fontFace; palette
   presets are aliased onto the SPA's --color-* custom props so
   the skin system works unchanged.
   ============================================================ */

:root {
	--color-primary: var(--wp--preset--color--primary);
	--color-primary-light: var(--wp--preset--color--primary-light);
	--color-gold: var(--wp--preset--color--gold);
	--color-mint: var(--wp--preset--color--mint);

	--color-bg: var(--wp--preset--color--bg);
	--color-surface: var(--wp--preset--color--surface);
	--color-surface-light: var(--wp--preset--color--surface-light);
	--color-surface-warm: var(--wp--preset--color--surface-warm);
	--color-text: var(--wp--preset--color--text);
	--color-text-muted: var(--wp--preset--color--text-muted);
	--color-text-on-light: var(--wp--preset--color--text-on-light);
	--color-eyebrow: var(--wp--preset--color--gold);
	--color-link: var(--wp--preset--color--primary-light);

	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);
	--font-mono: var(--wp--preset--font-family--mono);
	--font-accent: var(--font-mono);

	color-scheme: dark;
}

/* ============================================================
   SECTION SKINS
   ============================================================ */
.skin-base, .skin-raised, .skin-impact, .skin-ink,
.is-style-skin-base, .is-style-skin-raised, .is-style-skin-impact, .is-style-skin-ink {
	background-color: var(--color-bg);
	color: var(--color-text);
}

/* Skins derive every value from the editable palette presets (see
   inc/colors.php), so recoloring the palette re-themes the skins too.
   skin-base is the palette as-authored; raised lifts it a step; impact and
   ink are anchored to the `impact` and `ink` palette slugs. */
.skin-base, .is-style-skin-base {
	--color-bg: var(--wp--preset--color--bg);
	--color-surface: var(--wp--preset--color--surface);
	--color-surface-light: var(--wp--preset--color--surface-light);
	--color-surface-warm: var(--wp--preset--color--surface-warm);
	--color-text: var(--wp--preset--color--text);
	--color-text-muted: var(--wp--preset--color--text-muted);
	--color-eyebrow: var(--wp--preset--color--gold);
	--color-link: var(--wp--preset--color--primary-light);
}
.skin-raised, .is-style-skin-raised {
	--color-bg: color-mix(in srgb, var(--wp--preset--color--bg) 78%, var(--wp--preset--color--surface-light));
	--color-surface: color-mix(in srgb, var(--wp--preset--color--surface) 80%, var(--wp--preset--color--surface-light));
	--color-surface-light: color-mix(in srgb, var(--wp--preset--color--surface-light) 82%, #fff);
	--color-surface-warm: var(--wp--preset--color--bg);
	--color-text: var(--wp--preset--color--text);
	--color-text-muted: color-mix(in srgb, var(--wp--preset--color--text-muted) 86%, #fff);
	--color-eyebrow: var(--wp--preset--color--gold);
	--color-link: color-mix(in srgb, var(--wp--preset--color--primary-light) 85%, #fff);
}
.skin-impact, .is-style-skin-impact {
	--color-bg: var(--wp--preset--color--impact);
	--color-surface: color-mix(in srgb, var(--wp--preset--color--impact) 85%, #000);
	--color-surface-light: color-mix(in srgb, var(--wp--preset--color--impact) 72%, #fff);
	--color-surface-warm: color-mix(in srgb, var(--wp--preset--color--impact) 78%, #000);
	--color-text: color-mix(in srgb, #fff 94%, var(--wp--preset--color--impact));
	--color-text-muted: color-mix(in srgb, #fff 72%, var(--wp--preset--color--impact));
	--color-eyebrow: var(--wp--preset--color--gold);
	--color-link: color-mix(in srgb, var(--wp--preset--color--gold) 70%, #fff);
	--color-primary-light: color-mix(in srgb, var(--wp--preset--color--primary-light) 75%, #fff);
}
.skin-ink, .is-style-skin-ink {
	--color-bg: var(--wp--preset--color--ink);
	--color-surface: color-mix(in srgb, var(--wp--preset--color--ink) 68%, var(--wp--preset--color--surface));
	--color-surface-light: color-mix(in srgb, var(--wp--preset--color--ink) 52%, var(--wp--preset--color--surface-light));
	--color-surface-warm: color-mix(in srgb, var(--wp--preset--color--ink) 82%, #000);
	--color-text: var(--wp--preset--color--text);
	--color-text-muted: var(--wp--preset--color--text-muted);
	--color-eyebrow: var(--wp--preset--color--gold);
	--color-link: color-mix(in srgb, var(--wp--preset--color--primary-light) 85%, #fff);
}

/* ============================================================
   BUTTON / LINK / CARD LANGUAGE
   ============================================================ */
.btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 0.6rem;
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease,
	            background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:active,
.wp-block-button__link:active { transform: translateY(1px); }

.btn-primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--color-primary);
	color: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 12px 24px -10px rgba(155, 35, 53, 0.45);
}
.btn-primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--color-primary) 86%, #000);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), 0 18px 32px -12px rgba(155, 35, 53, 0.55);
}
.btn-secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--color-surface-light);
	color: var(--color-text);
	background: transparent;
	box-shadow: none;
}
.btn-secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--color-primary-light);
	color: var(--color-primary-light);
	background: transparent;
	transform: translateY(-2px);
}
.link-underline {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.25s ease;
	text-decoration: none;
}
.link-underline:hover { background-size: 100% 2px; }

.card,
.movement-steps > .wp-block-group,
.movement-subsections > .wp-block-details {
	background: var(--color-surface);
	border: 1px solid var(--color-surface-light);
	border-radius: 0.75rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--color-primary-light) 55%, var(--color-surface-light));
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), 0 20px 34px -12px rgba(0, 0, 0, 0.6);
}

/* Card titles: white at card scale, rose only on hover — post-title links
   must not pick up the global link color or page-heading sizes. */
h1 a, h2 a, h3 a, h4 a,
.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}
.card .wp-block-post-title {
	font-size: 1.25rem;
	line-height: 1.15;
	margin: 0 0 0.5rem;
	color: var(--color-text);
}
.card:hover .wp-block-post-title a { color: var(--color-primary-light); }
.card .wp-block-post-excerpt__excerpt,
.card p { line-height: 1.55; }

/* Source (provenance) badge — names the network site an aggregated item came
   from. Rendered by movement_source_badge() on the national view only. Compact,
   self-contained pill so it drops cleanly into any card/feed context. */
.movement-source-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	max-width: 100%;
	margin-top: 0.5rem;
	padding: 0.15em 0.6em 0.15em 0.45em;
	border-radius: 999px;
	border: 1px solid var(--color-surface-light);
	background: color-mix(in srgb, var(--color-surface-light) 45%, transparent);
	color: var(--color-text-muted);
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
	vertical-align: middle;
}
.movement-source-badge__icon {
	flex: none;
	width: 0.75em;
	height: 0.75em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.movement-source-badge__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Kind badge + source badge share a row at the top of an activity-stream card. */
.movement-latest__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.movement-latest__badges .movement-source-badge { margin-top: 0; }

/* Eyebrow label — small mono accent above headings */
.eyebrow {
	font-family: var(--font-accent);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.75rem;
	color: var(--color-eyebrow);
}

/* Mono badge base — severity/status/kind chips */
.mono-badge {
	font-family: var(--font-mono);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.7rem;
	padding: 0.25rem 0.625rem;
	white-space: nowrap;
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   AMBIENT DEPTH
   ============================================================ */
.bg-gradient-warm,
.bg-gradient-ember {
	background:
		radial-gradient(ellipse 55% 60% at 10% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
		radial-gradient(ellipse 55% 55% at 92% 8%, rgba(0, 0, 0, 0.22), transparent 60%),
		radial-gradient(ellipse 60% 55% at 85% 100%, rgba(217, 169, 63, 0.12), transparent 62%),
		radial-gradient(ellipse 70% 55% at 18% 100%, rgba(0, 0, 0, 0.25), transparent 60%);
}

.marquee {
	overflow: hidden;
	white-space: nowrap;
}
.marquee__track {
	display: inline-flex;
	will-change: transform;
	animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
}
/* Hover/focus pausing targets the track, not the wrapper — the pause
   button lives in the wrapper and must not hold the animation paused. */
.marquee__track:hover,
.marquee__track:focus-within,
.marquee.is-paused .marquee__track {
	animation-play-state: paused;
}
@keyframes marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.marquee { position: relative; }
.marquee__pause {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: color-mix(in srgb, var(--color-bg) 85%, transparent);
	border: 1px solid var(--color-surface-light);
	border-radius: 0.35rem;
	color: var(--color-text);
	font-family: var(--font-mono);
	font-size: 0.65rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.marquee__pause:hover { border-color: var(--color-primary-light); background: var(--color-surface); }
@media (prefers-reduced-motion: reduce) {
	/* The track never animates under reduced motion, so the toggle is moot. */
	.marquee__pause { display: none; }
}

.glass {
	background: color-mix(in srgb, var(--color-surface) 82%, transparent);
	backdrop-filter: blur(12px) saturate(130%);
	-webkit-backdrop-filter: blur(12px) saturate(130%);
	border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
}

.shadow-brutal {
	border-radius: 0.7rem;
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25), 0 12px 24px -10px rgba(0, 0, 0, 0.55);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.shadow-brutal:hover,
.shadow-brutal-hover:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.3), 0 20px 34px -12px rgba(0, 0, 0, 0.65);
}
.shadow-soft {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 14px 30px -14px rgba(0, 0, 0, 0.5);
}

.countdown-pulse {
	animation: countdown-pulse 1s ease-in-out infinite;
}
@keyframes countdown-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}

.grain { position: relative; }
.grain::after {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.06;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	pointer-events: none;
	mix-blend-mode: overlay;
}

.divider-burn,
hr.wp-block-separator.is-style-divider-burn {
	border: none;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
}

/* ============================================================
   SCROLL REVEAL + HERO ENTRANCE
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.6s cubic-bezier(0.22, 0.9, 0.3, 1),
		            transform 0.6s cubic-bezier(0.22, 0.9, 0.3, 1);
	}
	.reveal.is-revealed {
		opacity: 1;
		transform: none;
	}
	.reveal-delay-1 { transition-delay: 0.08s; }
	.reveal-delay-2 { transition-delay: 0.16s; }
	.reveal-delay-3 { transition-delay: 0.24s; }
	.reveal-delay-4 { transition-delay: 0.32s; }

	@keyframes hero-enter {
		from { opacity: 0; transform: translateY(22px); }
		to   { opacity: 1; transform: none; }
	}
	.hero-enter   { animation: hero-enter 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
	.hero-enter-2 { animation: hero-enter 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.12s both; }
	.hero-enter-3 { animation: hero-enter 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.24s both; }
	.hero-enter-4 { animation: hero-enter 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) 0.36s both; }
}

/* Editor canvas never hides reveal content (no scroll observer there) */
.editor-styles-wrapper .reveal { opacity: 1; transform: none; }

html { scroll-behavior: smooth; }

*:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}

/* Standard WP visually-hidden utility (not shipped by core on the front end) */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-surface-warm); }
::-webkit-scrollbar-thumb { background: var(--color-surface-light); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* ---- Map pins (React island) ---- */
@keyframes map-pin-pulse {
	0% { transform: scale(1); opacity: 0.6; }
	70% { transform: scale(2.4); opacity: 0; }
	100% { transform: scale(2.4); opacity: 0; }
}
.map-pin-pulse {
	transform-box: fill-box;
	transform-origin: center;
	animation: map-pin-pulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.map-pin { outline: none; }
.map-pin:focus-visible .map-pin-core {
	stroke: var(--color-gold);
	stroke-width: 3px;
}

/* ============================================================
   HEADER / NAVBAR — port of Navbar.tsx
   ============================================================ */
/* Mobile gutter — keep constrained content off the screen edges. On wide
   screens the content is already centered with empty side margins, so this
   padding only bites once the viewport is narrower than the content width.
   Scoped to the top-level constrained wrappers so full-bleed homepage bands
   (in the default-layout front-page main) stay edge-to-edge. The header pads
   its inner content row, not the header itself, so the full-bleed background,
   gradient rule (::before) and bottom border still reach the screen edges. */
.site-header .site-header__bar,
.site-footer,
main.is-layout-constrained,
.wp-block-post-content.is-layout-constrained {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
/* Single templates nest a constrained post-content inside a constrained main
   (both match above). The outer main already supplies the gutter, so zero the
   inner one to avoid doubling it. Page templates have a default-layout main, so
   their post-content keeps the gutter. */
main.is-layout-constrained .wp-block-post-content.is-layout-constrained {
	padding-left: 0;
	padding-right: 0;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--color-surface) 95%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 2px solid rgba(155, 35, 53, 0.5);
}
.site-header::before {
	content: '';
	display: block;
	height: 2px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
}
.site-header .site-header__bar {
	min-height: 4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.site-logo,
.site-logo a {
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary-light);
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}
.site-logo a:hover { opacity: 0.8; color: var(--color-primary-light); }
.site-logo__link--image { display: flex; align-items: center; }
.site-logo__img { height: 2.25rem; width: auto; max-width: 220px; display: block; }

/* Navigation block — Anton small caps, muted until hover, red underline */
.site-header .wp-block-navigation a {
	font-family: var(--font-display);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	padding: 0.5rem 0.75rem;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item > a {
	color: var(--color-text);
	border-bottom-color: color-mix(in srgb, var(--color-primary-light) 50%, transparent);
}
.site-header .wp-block-navigation__submenu-container {
	background: color-mix(in srgb, var(--color-surface) 96%, transparent) !important;
	backdrop-filter: blur(12px) saturate(130%);
	border: 1px solid var(--color-surface-light) !important;
	border-radius: 0.35rem;
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25), 0 12px 24px -10px rgba(0, 0, 0, 0.55);
	padding: 0.5rem 0;
	min-width: 15rem !important;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	color: var(--color-text-muted);
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.025em;
	padding: 0.625rem 1rem;
	border-bottom: none;
	border-left: 2px solid transparent;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover,
.site-header .wp-block-navigation .wp-block-navigation__submenu-container a:focus {
	background: rgba(155, 35, 53, 0.15);
	border-left-color: var(--color-primary-light);
	color: var(--color-text);
}
/* Current page inside a dropdown */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > a {
	color: var(--color-text);
	border-left-color: var(--color-primary);
}

/* Mobile nav overlay (hamburger open). Core's default open-menu state was
   unstyled here — a white sheet with invisible links that didn't cover the
   screen. Force a full-screen dark panel with readable, stacked links. */
/* .site-header uses backdrop-filter, and an ancestor with backdrop-filter
   becomes the containing block for position:fixed descendants — which pins the
   open overlay to the 66px header box instead of the viewport. Drop the filter
   while the menu is open so the fixed overlay escapes to full screen. */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	z-index: 200;
	background: var(--color-bg);
	padding: 4.5rem 0 2.5rem;
	overflow-x: hidden;
	overflow-y: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation {
	width: 100% !important;
	max-width: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	width: 100% !important;
	max-width: none !important;
	align-items: stretch !important; /* beats core's .items-justified-right (flex-end) */
	justify-content: flex-start !important;
	gap: 0;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-self: stretch !important;
	align-items: flex-start !important; /* left-align the column children */
	justify-content: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open a {
	box-sizing: border-box;
	width: 100% !important;
	text-align: left !important;
	justify-content: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--color-surface-light);
}
/* Top-level links: big Anton caps, always visible on the dark panel. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: var(--color-text) !important;
	font-family: var(--font-display);
	font-size: 1.35rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.9rem 1.5rem;
	border-bottom: 0;
}
/* Submenus: inline & indented inside the overlay, not a floating dropdown. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	min-width: 0 !important;
	padding: 0 0 0.5rem 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	font-size: 1rem !important;
	text-transform: none;
	padding: 0.45rem 1.5rem 0.45rem 2.75rem !important;
	color: var(--color-text-muted) !important;
}
/* The submenu expand arrow + the close (X) button, visible on dark. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container-close {
	color: var(--color-text) !important;
}
.wp-block-navigation__responsive-container.is-menu-open svg,
.wp-block-navigation__responsive-container-close svg { fill: currentColor; }
/* The hamburger (closed) button color in the header bar. */
.site-header .wp-block-navigation__responsive-container-open svg { fill: var(--color-text); }

/* Header search — compact dark field; the button-inside wrapper IS the
   field, so the input and icon button sit transparent inside it. */
.site-header .wp-block-search__inside-wrapper {
	background: var(--color-bg);
	border: 1px solid var(--color-surface-light) !important;
	border-radius: 0.35rem;
	padding: 0.125rem 0.25rem;
	transition: border-color 0.2s ease;
}
.site-header .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--color-primary-light) !important;
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}
.site-header .wp-block-search__input {
	background: transparent;
	border: none;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 0.875rem;
	padding: 0.375rem 0.75rem;
	width: 9rem;
}
.site-header .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}
.site-header .wp-block-search__input::placeholder { color: var(--color-text-muted); }
.site-header .wp-block-search__button {
	background: transparent;
	border: none;
	color: var(--color-text-muted);
	padding: 0.25rem 0.5rem;
	margin: 0;
	cursor: pointer;
	transition: color 0.15s ease;
}
.site-header .wp-block-search__button:hover { color: var(--color-primary-light); }
.site-header .wp-block-search__button svg { fill: currentColor; }
.site-header .wp-block-buttons .wp-block-button__link {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

/* ============================================================
   FOOTER — port of Footer.tsx
   ============================================================ */
.site-footer {
	border-top: 4px solid var(--color-primary);
}
.footer-signup {
	border-bottom: 2px solid rgba(155, 35, 53, 0.3);
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}
.footer-signup h2 {
	font-size: 2.25rem;
	line-height: 1;
	margin: 0;
}
.footer-signup .footer-signup__desc {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}
.footer-heading {
	font-family: var(--font-accent);
	font-size: 0.875rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-eyebrow);
	margin: 0 0 1rem;
}
.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.footer-links a {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.25s ease, color 0.15s ease;
}
.footer-links a:hover { color: var(--color-text); background-size: 100% 2px; }
.footer-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 2rem;
}
.footer-nav .footer-heading a {
	color: inherit;
	text-decoration: none;
}
.footer-nav .footer-heading a:hover { color: var(--color-text); }
.footer-brand-note {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	line-height: 1.625;
	max-width: 28rem;
}
.footer-copyright {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	margin: 0;
}
.footer-colophon {
	text-align: center;
}
.footer-message {
	font-size: 0.8125rem;
	line-height: 1.625;
	color: var(--color-text-muted);
	margin: 0 auto 0.75rem;
	max-width: 40rem;
}
.footer-message a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.footer-message a:hover { color: var(--color-text); }

/* ============================================================
   HERO — port of Hero.tsx (feature-image backdrop + content stack)
   ============================================================ */
.movement-hero-mosaic {
	position: relative;
	overflow: hidden;
}
.movement-hero-mosaic__media {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.movement-hero-mosaic__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.movement-hero-mosaic__content {
	position: relative;
	z-index: 1;
}
.movement-hero-mosaic__content::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 34%;
	transform: translate(-50%, -50%);
	width: 80%;
	height: 55%;
	background: color-mix(in srgb, var(--color-surface-warm) 70%, transparent);
	filter: blur(64px);
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
}
.movement-hero-mosaic--editor { background: var(--color-surface-warm); }

/* Homepage hero fills the viewport on load, with the accountability ticker
   (a full-width sibling directly below) resting at the bottom edge. The hero is
   locked to exactly the viewport minus the ticker's height so the ticker lands
   right at the fold; its content is centered and clipped rather than allowed to
   push the ticker below the fold. Scrolling then moves the whole hero + ticker
   up like a normal page. */
/* --movement-above-hero is set by the inline script in inc/assets.php to the
   measured height of everything stacked above the hero (network bar + nav, plus
   the alert bar when enabled). The 6rem fallback keeps the first paint close
   before the script runs. */
:root { --hero-ticker-h: 3.4rem; }
.home .movement-hero-mosaic {
	height: calc(100vh - var(--movement-above-hero, 6rem) - var(--hero-ticker-h));
	height: calc(100svh - var(--movement-above-hero, 6rem) - var(--hero-ticker-h));
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}
.home .movement-hero-mosaic__content { width: 100%; }
/* Kill the block-gap between the hero and the ticker so the ticker sits flush at
   the bottom of the viewport rather than being nudged below the fold. */
.home .movement-shame-ticker { margin-top: 0 !important; }
/* The inner content group ships with large preset padding for the in-flow
   layout; inside the locked-height hero it's centered, so trim it to help the
   headline + card + signup all fit above the fold. */
.home .movement-hero-mosaic__content > .wp-block-group {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}
.home .hero-card { margin-top: 1.5rem !important; }
.home .hero-headline { margin-top: 0.25rem; }

/* ------------------------------------------------------------------
   Mobile cleanup (<=782px)
   ------------------------------------------------------------------ */
@media (max-width: 782px) {
	/* Header: drop the search box and Contribute button from the top bar so
	   above-the-fold is just the logo, the hamburger, and Donate — the nav
	   overlay and the hero carry the rest. Shrink the logo + Donate and push the
	   logo left so all three fit one row without the Donate overflowing. */
	.site-header__actions .wp-block-search { display: none; }
	/* Hide Contribute on mobile only when Donate is the visible CTA; when Donate
	   is turned off (body.movement-donate-off), Contribute becomes the CTA. */
	body:not(.movement-donate-off) .site-header__actions .wp-block-button.is-style-outline { display: none; }
	.site-header .site-header__bar { flex-wrap: nowrap; gap: 0.5rem; }
	.site-header__bar .site-logo { margin-right: auto; }
	.site-header .site-logo,
	.site-header .site-logo a { font-size: 1.15rem; }
	.site-header__actions .wp-block-button__link {
		padding: 0.5rem 0.85rem;
		font-size: 0.85rem;
		white-space: nowrap;
	}

	/* Hero: stop locking it to the viewport height. The tall signup card was
	   filling the screen and hiding the photo; let the hero flow with the image
	   full-bleed behind it, and make the card translucent enough to see through. */
	.home .movement-hero-mosaic {
		height: auto;
		min-height: 100svh;
		overflow: visible;
		justify-content: flex-start;
	}
	.home .hero-card {
		background: color-mix(in srgb, var(--color-surface) 58%, transparent);
		padding: 1.25rem !important;
		margin-top: 1.25rem !important;
	}
}

/* Events section stacks map-above-text by DOM order; on mobile we want the
   "events happening near you" copy first, then the map. (Chapters section is
   authored text-first, so it already stacks correctly and is left alone.) */
@media (max-width: 781px) {
	.movement-section--events .wp-block-column:first-child { order: 2; }
	.movement-section--events .wp-block-column:last-child { order: 1; }
}

.hero-headline {
	font-size: clamp(3.75rem, 10vw, 8rem) !important;
	line-height: 0.85 !important;
	letter-spacing: -0.025em;
	margin: 1rem 0 0;
}
.hero-cry {
	font-family: var(--font-accent);
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-eyebrow);
	margin-top: 1.5rem;
}
.hero-tagline {
	font-size: 1.25rem;
	color: var(--color-text-muted);
	line-height: 1.625;
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
}
.hero-card {
	border: 2px solid rgba(155, 35, 53, 0.4) !important;
	border-radius: 0;
	padding: 2rem;
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.hero-card__signup-divider {
	border-top: 1px solid var(--color-surface-light);
	margin-top: 1.5rem;
	padding-top: 1.25rem;
}
.hero-card__signup-label {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	margin: 0 0 0.5rem;
}
/* Hero panel — quick actions stacked at the left, signup at the right, inside
   one glass card. Narrows the inputs (no more full-width waste) and balances
   the four buttons against the signup's label + two fields + button. */
.hero-panel { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; align-items: stretch; }
.hero-panel__actions { flex: 0 0 15rem; display: flex; }
.hero-panel__actions .wp-block-buttons {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.6rem;
	width: 100%;
}
.hero-panel__actions .wp-block-button { width: 100%; }
.hero-panel__actions .wp-block-button__link { display: block; width: 100%; text-align: center; padding: 0.7rem 1rem; font-size: 1rem; }
/* Fill the signup column and spread its rows so "Alert Me" bottom-aligns with
   the last button, instead of stopping short of the taller button stack. */
.hero-panel__signup { flex: 1 1 18rem; display: flex; flex-direction: column; }
.hero-panel__signup .movement-signup { flex: 1 1 auto; align-content: space-between; }
@media (max-width: 640px) {
	.hero-panel__actions { flex-basis: 100%; }
	.hero-panel__signup { order: -1; }
	/* Stacked: no sibling column to match, so keep the form its natural height. */
	.hero-panel__signup .movement-signup { flex: 0 1 auto; align-content: start; }
}

/* ============================================================
   COUNTDOWN — port of CountdownTimer.tsx + Hero meta column
   ============================================================ */
.movement-countdown {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
.movement-countdown__meta { display: flex; flex-direction: column; }
.movement-countdown__label {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.125em;
	color: var(--color-link);
}
.movement-countdown__title {
	font-family: var(--font-display);
	font-size: 1.875rem;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	line-height: 1.25;
	color: var(--color-text);
	margin-top: 0.25rem;
}
.movement-countdown__location {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	margin-top: 0.25rem;
}
.movement-countdown__timer {
	display: flex;
	align-items: flex-end;
	gap: 0.75rem;
}
.movement-countdown__unit { display: flex; flex-direction: column; align-items: center; }
.movement-countdown__value {
	font-family: var(--font-display);
	font-size: 3rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--color-text);
	background: color-mix(in srgb, var(--color-surface) 70%, transparent);
	border: 1px solid var(--color-surface-light);
	padding: 0.5rem 0.75rem;
	min-width: 2.4ch;
	text-align: center;
}
.movement-countdown__unit-label {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.125em;
	color: var(--color-text-muted);
	margin-top: 0.375rem;
}
.movement-countdown__sep {
	font-family: var(--font-display);
	font-size: 2.25rem;
	color: var(--color-primary);
	padding-bottom: 1.5rem;
	align-self: flex-end;
}
.movement-countdown__now {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--color-primary);
	padding: 0.75rem 1.25rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: #fff;
	border-radius: 0.7rem;
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25), 0 12px 24px -10px rgba(0, 0, 0, 0.55);
}
.movement-countdown__now[hidden] { display: none; }
.movement-countdown__now-dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--color-bg);
}
@media (max-width: 640px) {
	.movement-countdown__value { font-size: 1.875rem; }
	.movement-countdown__sep { font-size: 1.5rem; padding-bottom: 1.4rem; }
}

/* ============================================================
   STATS ROW — port of Home stats + CountUpStat
   ============================================================ */
.movement-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem;
}
.movement-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem;
	text-align: center;
}
.movement-stats__value {
	font-family: var(--font-display);
	font-size: 3rem;
	color: var(--color-gold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.movement-stats__label {
	margin-top: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
}

/* ============================================================
   SECTION HEADERS — Home.tsx pattern
   ============================================================ */
.section-heading {
	font-size: clamp(2.25rem, 5vw, 3rem);
	margin: 0;
}
.section-heading .pulse-dot {
	color: var(--color-primary-light);
	font-size: 1.5rem;
	vertical-align: middle;
	margin-right: 0.5rem;
}
.see-all-link {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-link);
}

/* ============================================================
   LIVE UPDATE FEED — port of LiveUpdateCard.tsx
   ============================================================ */
.movement-update-feed {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1.5rem;
}
.movement-update { padding: 1.25rem; }
.movement-update__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.movement-update__avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--color-bg);
	flex: none;
}
.movement-update__avatar--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	color: #fff;
	font-family: var(--font-display);
	text-transform: uppercase;
}
.movement-update__info { min-width: 0; flex: 1; }
.movement-update__handle {
	font-family: var(--font-display);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: var(--color-text);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.movement-update__timestamp {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	margin: 0;
}
.movement-update__kind {
	font-family: var(--font-mono);
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.125rem 0.5rem;
	flex: none;
}
.movement-update__kind.is-post { background: var(--color-surface-light); color: var(--color-text-muted); }
.movement-update__kind.is-live { background: var(--color-primary); color: #fff; }
.movement-update__kind.is-arrest { background: var(--color-gold); color: var(--color-text-on-light); }
.movement-update__body { margin-top: 0.75rem; color: var(--color-text); line-height: 1.625; }
.movement-update__body p { margin: 0 0 0.5rem; }
.movement-update__body p:last-child { margin-bottom: 0; }
.movement-update__image {
	margin-top: 0.75rem;
	overflow: hidden;
	border: 1px solid var(--color-surface-light);
}
.movement-update__image img { width: 100%; height: 14rem; object-fit: cover; display: block; }
.movement-update__stream {
	margin-top: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 8rem;
	background: var(--color-bg);
	border: 1px solid rgba(155, 35, 53, 0.4);
	font-family: var(--font-mono);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
}

/* ============================================================
   DEMAND CARDS — port of DemandCard.tsx
   ============================================================ */
.movement-demand-grid {
	display: grid;
	/* min 21rem caps the grid at 3 columns inside the 80rem wide size,
	   matching the SPA's lg:grid-cols-3 — 4-up reads as a slammed wall. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
	gap: 1.75rem;
}
.movement-demand {
	background: var(--color-surface);
	padding: 1.5rem;
	border: 1px solid var(--color-surface-light);
	border-left-width: 4px;
	display: flex;
	flex-direction: column;
	transition: border-color 0.15s ease;
}
.movement-demand:hover { border-color: rgba(155, 35, 53, 0.6); }
.movement-demand.is-critical { border-left-color: var(--color-primary); }
.movement-demand.is-high { border-left-color: var(--color-gold); }
.movement-demand.is-medium { border-left-color: var(--color-text-muted); }
.movement-demand__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}
.movement-demand__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: var(--color-text);
	margin: 0;
}
.movement-demand__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}
.movement-demand__title a:hover,
.movement-demand__title a:focus-visible { color: var(--color-primary-light); }
.movement-demand__badge {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.25rem 0.625rem;
}
.movement-demand.is-critical .movement-demand__badge { background: var(--color-primary); color: #fff; }
.movement-demand.is-high .movement-demand__badge { background: var(--color-gold); color: var(--color-text-on-light); }
.movement-demand.is-medium .movement-demand__badge { border: 1px solid var(--color-text-muted); color: var(--color-text-muted); }
.movement-demand__body {
	color: var(--color-text-muted);
	line-height: 1.625;
	margin-bottom: 1rem;
	flex: 1;
}
.movement-demand__body p { margin: 0 0 0.5rem; }
.movement-demand__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary-light);
	text-decoration: none;
	transition: color 0.15s ease;
}
.movement-demand__link:hover { color: var(--color-gold); }
.movement-demand-grid__empty { color: var(--color-text-muted); }

/* ============================================================
   PILLAR CARDS — port of PillarCard.tsx (query-loop markup)
   ============================================================ */
.pillar-card {
	border-width: 2px !important;
	border-radius: 0 !important;
	padding: 1.5rem;
	height: 100%;
}
.pillar-card:hover { border-color: var(--color-primary) !important; transform: none; box-shadow: 0 2px 0 0 rgba(0,0,0,0.3), 0 20px 34px -12px rgba(0,0,0,0.65); }
.pillar-card .pillar-card__icon { font-size: 2.25rem; margin: 0 0 1rem; line-height: 1; }
.pillar-card h2, .pillar-card h3 { font-size: 1.25rem; margin: 0; }
.pillar-card h2 a, .pillar-card h3 a { color: var(--color-text); text-decoration: none; transition: color 0.15s ease; }
.pillar-card:hover h2 a, .pillar-card:hover h3 a { color: var(--color-primary-light); }
.pillar-card .pillar-card__desc { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.625; }

/* ============================================================
   TESTIMONIAL CAROUSEL — port of Carousel.tsx
   ============================================================ */
.movement-carousel { max-width: 48rem; margin-inline: auto; }
.movement-carousel__slide {
	position: relative;
	margin: 0;
	background: var(--color-surface);
	padding: 2.5rem;
	border: 1px solid var(--color-surface-light);
	border-left: 4px solid var(--color-gold);
}
.movement-carousel__accent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
}
.movement-carousel__mark {
	position: absolute;
	top: 0.75rem;
	left: 1.5rem;
	font-family: var(--font-display);
	font-size: 4.5rem;
	line-height: 1;
	color: color-mix(in srgb, var(--color-eyebrow) 30%, transparent);
	pointer-events: none;
}
.movement-carousel__quote {
	position: relative;
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	line-height: 1.375;
	color: var(--color-text);
	font-style: normal;
}
.movement-carousel__quote p { margin: 0; }
.movement-carousel__attribution {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.movement-carousel__avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-gold);
	background: var(--color-bg);
	flex: none;
}
.movement-carousel__avatar--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.125rem;
	border: none;
}
.movement-carousel__who { display: flex; flex-direction: column; }
.movement-carousel__author {
	font-style: normal;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--color-text);
}
.movement-carousel__role {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
}
.movement-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
}
.movement-carousel__btn {
	padding: 0.5rem;
	background: transparent;
	border: none;
	color: var(--color-text-muted);
	cursor: pointer;
	font-size: 1.1rem;
	transition: color 0.15s ease, background-color 0.15s ease;
}
.movement-carousel__btn:hover { color: var(--color-primary-light); background: var(--color-surface-light); }
.movement-carousel__dots { display: flex; gap: 0.5rem; }
.movement-carousel__dot {
	height: 0.5rem;
	width: 0.5rem;
	border: none;
	background: var(--color-surface-light);
	cursor: pointer;
	padding: 0;
	transition: all 0.15s ease;
}
.movement-carousel__dot:hover { background: var(--color-text-muted); }
.movement-carousel__dot.is-active { background: var(--color-primary); width: 2rem; }

/* ============================================================
   ROADMAP TRACKER — port of ProgressTracker.tsx
   ============================================================ */
.movement-tracker {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 42rem;
	text-align: left;
}
.movement-tracker__item {
	position: relative;
	display: flex;
	gap: 1.5rem;
	padding-bottom: 2rem;
}
.movement-tracker__item:not(.is-last)::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 2rem;
	width: 2px;
	height: 100%;
	background: var(--color-surface-light);
}
.movement-tracker__item.is-completed:not(.is-last)::before { background: var(--color-gold); }
.movement-tracker__item.is-in-progress:not(.is-last)::before { background: rgba(155, 35, 53, 0.4); }
.movement-tracker__marker {
	position: relative;
	z-index: 1;
	flex: none;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface-light);
	color: #fff;
}
.movement-tracker__item.is-completed .movement-tracker__marker { background: var(--color-gold); color: var(--color-text-on-light); }
.movement-tracker__item.is-in-progress .movement-tracker__marker { background: var(--color-primary); }
.movement-tracker__check { width: 1rem; height: 1rem; }
.movement-tracker__inner-dot {
	width: 0.75rem;
	height: 0.75rem;
	background: var(--color-bg);
}
.movement-tracker__content { flex: 1; min-width: 0; padding-top: 0.125rem; }
.movement-tracker__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}
.movement-tracker__title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: var(--color-text);
	margin: 0;
}
.movement-tracker__badge {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.125rem 0.5rem;
}
.movement-tracker__item.is-completed .movement-tracker__badge { background: var(--color-gold); color: var(--color-text-on-light); }
.movement-tracker__item.is-in-progress .movement-tracker__badge { background: var(--color-primary); color: #fff; }
.movement-tracker__item.is-upcoming .movement-tracker__badge { border: 1px solid var(--color-text-muted); color: var(--color-text-muted); }
.movement-tracker__desc {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	line-height: 1.625;
	margin: 0;
}
.movement-tracker__desc p { margin: 0 0 0.5em; }
.movement-tracker__desc p:last-child { margin-bottom: 0; }
.movement-tracker__date {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0.25rem 0 0;
	color: var(--color-text-muted);
}
.movement-tracker__item.is-completed .movement-tracker__date { color: var(--color-gold); }
.movement-tracker__item.is-in-progress .movement-tracker__date { color: var(--color-primary-light); }

/* ============================================================
   WALL OF SHAME — port of WallOfShame.tsx
   ============================================================ */
.movement-shame-ticker {
	display: flex;
	align-items: stretch;
	background: var(--color-bg);
	border-top: 2px solid rgba(155, 35, 53, 0.6);
	border-bottom: 2px solid rgba(155, 35, 53, 0.6);
}
.movement-shame-ticker__label {
	display: none;
	align-items: center;
	background: var(--color-primary);
	padding: 0 1rem;
	flex: none;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.125em;
	color: #fff;
	white-space: nowrap;
}
@media (min-width: 640px) { .movement-shame-ticker__label { display: flex; } }
.movement-shame-ticker__marquee { flex: 1; padding: 0.75rem 0; }
.movement-shame__group { display: inline-flex; align-items: center; }
.movement-shame__chip {
	margin: 0 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.75rem;
	background: var(--color-surface);
	border: 1px solid var(--color-surface-light);
	color: var(--color-text);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.movement-shame__chip:hover { border-color: var(--color-primary); background: var(--color-surface-light); }
.movement-shame__severity {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.125rem 0.375rem;
	background: var(--color-primary);
	color: #fff;
}
.movement-shame__name {
	font-family: var(--font-display);
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: -0.025em;
}
.movement-shame__cta {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--color-gold);
}

/* Wall of shame directory cards */
.movement-shame-directory {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.5rem;
}
.movement-shame-card {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
	border-left: 4px solid var(--color-surface-light);
	border-radius: 0;
}
.movement-shame-card.is-critical { border-left-color: var(--color-primary); }
.movement-shame-card.is-high { border-left-color: var(--color-gold); }
.movement-shame-card__severity {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.125rem 0.5rem;
	border: 1px solid var(--color-text-muted);
	color: var(--color-text-muted);
}
.movement-shame-card.is-critical .movement-shame-card__severity { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.movement-shame-card.is-high .movement-shame-card__severity { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-text-on-light); }
.movement-shame-card__name { margin: 0; font-size: 1.3rem; }
.movement-shame-card__title { margin: 0; color: var(--color-gold); font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.movement-shame-card__offense { margin: 0 0 1rem; color: var(--color-text-muted); line-height: 1.625; min-height: calc(3 * 1.625em); }
/* Pin the call-script CTA to the card bottom so buttons line up across a row
   (cards already stretch to equal height in the grid). */
.movement-shame-card .btn { margin-top: auto; }
.movement-shame-card__offense p,
.movement-shame-dialog__offense p,
.movement-shame-dialog__script p { margin: 0 0 0.5em; }
.movement-shame-card__offense p:last-child,
.movement-shame-dialog__offense p:last-child,
.movement-shame-dialog__script p:last-child { margin-bottom: 0; }

/* Call-script dialog */
.movement-shame-dialog {
	max-width: 32rem;
	border: 1px solid var(--color-surface-light);
	border-radius: 0.75rem;
	padding: 2rem;
	color: var(--color-text);
}
.movement-shame-dialog::backdrop { background: rgba(7, 13, 31, 0.75); backdrop-filter: blur(4px); }
.movement-shame-dialog__name { margin: 0; }
.movement-shame-dialog__title { color: var(--color-gold); font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0.25rem 0 0.75rem; }
.movement-shame-dialog__script {
	margin: 1rem 0;
	padding: 1rem;
	background: var(--color-surface-warm);
	border-left: 3px solid var(--color-primary);
	border-radius: 0.4rem;
	font-size: 0.95rem;
	line-height: 1.55;
}
.movement-shame-dialog__close-form { margin-top: 1rem; text-align: right; }

/* ============================================================
   INFOGRAPHICS
   ============================================================ */
.movement-infographics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.5rem;
}
.movement-infographic { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.movement-infographic__title { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); }
.movement-infographic__stat {
	font-family: var(--font-display);
	font-size: 3rem;
	color: var(--color-gold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.movement-infographic__caption { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.55; }
.movement-infographic__sources {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: baseline;
	margin-top: auto;
	padding-top: 0.75rem;
	font-size: 0.85rem;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.movement-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1.25rem;
	padding: 1.25rem 1.5rem;
	border-radius: 0.75rem;
	margin-bottom: 2rem;
}
.movement-filter-bar__field { display: flex; flex-direction: column; gap: 0.35rem; }
.movement-filter-bar select {
	background: var(--color-bg);
	color: var(--color-text);
	border: 2px solid var(--color-surface-light);
	border-radius: 0.5rem;
	padding: 0.55rem 0.75rem;
	min-width: 10rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
}
.movement-filter-bar select:focus { border-color: var(--color-primary-light); }
.movement-filter-bar__reset { color: var(--color-text-muted); font-size: 0.9rem; }

/* ============================================================
   SIGNUP FORM — port of SignupForm.tsx
   ============================================================ */
.movement-signup { display: grid; gap: 0.5rem; }
.movement-signup--stack { grid-template-columns: 1fr; }
.movement-signup--row { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
	.movement-signup--row { grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1fr) auto; }
	.movement-signup--row .movement-signup__input--email,
	.movement-signup--row .movement-signup__input--signal { grid-column: auto; }
}
.movement-signup__hp { position: absolute !important; left: -9999px !important; margin: 0; }
.movement-signup__input {
	min-width: 0;
	background: var(--color-bg);
	border: 2px solid var(--color-surface-light);
	border-radius: 0.5rem;
	padding: 0.75rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--color-text);
	transition: border-color 0.15s ease;
}
.movement-signup__input::placeholder { color: var(--color-text-muted); }
.movement-signup__input:focus {
	border-color: var(--color-primary-light);
	outline: none;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary-light) 50%, transparent);
}
.movement-signup__submit { font-size: 1rem; }
.movement-signup__success {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	background: color-mix(in srgb, var(--color-mint) 10%, transparent);
	border-left: 4px solid var(--color-mint);
	padding: 1rem 1.25rem;
}
.movement-signup__success[hidden] { display: none; }
.movement-signup__success-title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: var(--color-mint);
}
.movement-signup__success-message {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
}
.movement-signup__status { grid-column: 1 / -1; margin: 0; color: var(--color-primary-light); font-size: 0.875rem; }

/* Merch price is a bare number bound from post meta; prefix the currency. */
.merch-price::before { content: "$"; }
.merch-price { font-weight: 700; }
.movement-merch-buy { margin: 0.25rem 0 0.5rem; }

/* Merch card View + Buy buttons. View (core/read-more) is an outline pill; Buy
   (movement/merch-buy) is the filled button, sized to match. Buy self-hides when
   an item has no purchase URL, leaving View on its own. */
.merch-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.85rem; }
.merch-card__actions .movement-merch-buy { margin: 0; }
.merch-card__actions .wp-block-button__link { padding: 0.5rem 1.1rem; font-size: 0.85rem; }
.merch-card__view.wp-block-read-more {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border: 2px solid var(--color-surface-light);
	border-radius: 0.4rem;
	color: var(--color-text);
	text-decoration: none;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.85rem;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.merch-card__view.wp-block-read-more:hover,
.merch-card__view.wp-block-read-more:focus-visible { border-color: var(--color-gold); color: var(--color-gold); }

/* Network-aggregated events archive list (movement/event-list). */
.movement-event-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1.25rem;
}
.movement-event-card { display: flex; flex-direction: column; padding: 1.25rem; }
.movement-event-card__media { display: block; margin-bottom: 0.75rem; }
.movement-event-card__media img { width: 100%; height: 180px; object-fit: cover; border-radius: 0.5rem; display: block; }
.movement-event-card__title { font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: -0.02em; margin: 0 0 0.35rem; }
.movement-event-card__title a { color: inherit; text-decoration: none; transition: color 0.15s ease; }
.movement-event-card__title a:hover { color: var(--color-primary-light); }
.movement-event-card__excerpt { color: var(--color-text-muted); margin: 0.35rem 0; }
.movement-event-card__time { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-muted); margin: 0.4rem 0 0; }
.movement-signup__status:empty { display: none; }

/* Event registration reuses the signup styles; a short hint sits above the inputs. */
.movement-register__hint { grid-column: 1 / -1; margin: 0 0 0.25rem; color: var(--color-text-muted); font-size: 0.875rem; }
.movement-register__hint[hidden] { display: none; }

/* Event venue map — embedded OpenStreetMap iframe on the single event page. */
.movement-event-map { margin: 0 0 1.5rem; }
.movement-event-map__frame {
	display: block;
	width: 100%;
	border: 1px solid var(--color-surface-light);
	border-radius: 0.75rem;
}
.movement-event-map__link { margin: 0.5rem 0 0; font-size: 0.875rem; }

/* ============================================================
   SINGLE EVENT PAGE — summary / action panel / meta sections
   ============================================================ */
/* When / where panel under the title. Compact, non-interactive (no card hover). */
.event-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 2.5rem;
	background: var(--color-surface);
	border: 1px solid var(--color-surface-light);
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}
.event-summary__item { display: flex; flex-direction: column; gap: 0.15rem; }
.event-summary__value { font-size: 1rem; }
.event-summary__link { margin-left: auto; font-size: 0.9rem; align-self: center; }

/* Right-hand action panel — holds the registration form, sticky on desktop. */
.event-action {
	background: var(--color-surface);
	border: 1px solid var(--color-surface-light);
	border-radius: 0.75rem;
}
@media (min-width: 782px) {
	.event-action { position: sticky; top: 1.5rem; }
}
.event-action .movement-signup__submit { width: 100%; }

.event-accessibility { margin-top: 2rem; }
.event-accessibility h2 { margin-bottom: 0.5rem; }
.event-accessibility p { margin: 0 0 0.75rem; }

/* Contact-for-questions line inside the action panel. */
.event-contact { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; }
.event-contact__lines { display: flex; flex-direction: column; gap: 0.15rem; }
.event-contact__signal { color: var(--color-text-muted); font-size: 0.9rem; }

/* ============================================================
   ROLE CTA — port of RoleCTA.tsx (markup lives in front-page)
   ============================================================ */
.role-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 0.25rem;
	padding: 1.25rem;
	border-radius: 0.75rem;
	background: var(--color-surface);
	border: 2px solid var(--color-surface-light);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 14px 30px -14px rgba(0, 0, 0, 0.5);
	text-decoration: none;
	transition: all 0.15s ease;
	height: 100%;
}
.role-card:hover { border-color: var(--color-gold); transform: translateY(-0.25rem); }
.role-card__label {
	font-family: var(--font-display);
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: var(--color-text);
}
.role-card__label a { text-decoration: none; color: inherit; }
/* Stretch the label's link across the whole card so the entire tile is
   clickable, not just the heading text. */
.role-card__label a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.role-card__sub {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	transition: color 0.15s ease;
}
.role-card:hover .role-card__sub { color: var(--color-text); }

/* ============================================================
   GUIDE STEPS / PILLAR SUBSECTIONS
   ============================================================ */
/* Guide steps live in post_content as group blocks inside .movement-steps.
   Element selectors (not classnames) skin them so steps editors duplicate in
   the editor pick up the look; the number circle is a CSS counter so steps
   renumber themselves when added or reordered. */
.movement-steps { counter-reset: movement-step; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.movement-steps > .wp-block-group {
	position: relative;
	padding: 1.5rem 1.5rem 1.5rem 5.25rem;
}
.movement-steps > .wp-block-group::before {
	counter-increment: movement-step;
	content: counter(movement-step);
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.25rem;
	border-radius: 50%;
}
.movement-steps__title,
.movement-steps > .wp-block-group h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.movement-steps__text,
.movement-steps > .wp-block-group p { margin: 0; color: var(--color-text-muted); line-height: 1.625; }

/* Pillar principles: core details blocks inside .movement-subsections,
   seeded into post_content. Same element-selector rule as steps. */
.movement-subsections { display: flex; flex-direction: column; gap: 1rem; }
.movement-subsections > .wp-block-details,
.movement-subsections__item { padding: 0; overflow: hidden; }
.movement-subsections > .wp-block-details > summary,
.movement-subsections__summary {
	padding: 1.15rem 1.5rem;
	cursor: pointer;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.05rem;
	list-style: none;
	position: relative;
}
.movement-subsections > .wp-block-details > summary::-webkit-details-marker,
.movement-subsections__summary::-webkit-details-marker { display: none; }
.movement-subsections > .wp-block-details > summary::after,
.movement-subsections__summary::after {
	content: '+';
	position: absolute;
	right: 1.5rem;
	color: var(--color-gold);
	font-size: 1.3rem;
}
.movement-subsections details[open] > summary::after,
details[open] > .movement-subsections__summary::after { content: '–'; }
.movement-subsections > .wp-block-details > :not(summary),
.movement-subsections__content { margin: 0; padding: 0 1.5rem 1.25rem; color: var(--color-text-muted); line-height: 1.625; }

/* ============================================================
   MARQUEE / MAP
   ============================================================ */
.movement-marquee__group { display: inline-flex; align-items: center; gap: 3rem; padding-right: 3rem; }
/* Let the map area inherit its section's background instead of painting its own
   (surface-warm) shade, so it blends into whatever skin it's placed in. The map
   graphic keeps its own framed panel (ActionMap), and the chapter list below it
   now sits flush on the section background. */
.movement-map [data-movement-map] { background: transparent; }

/* ============================================================
   REDUCED MOTION — kill all decorative motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; }
	.countdown-pulse { animation: none; }
	.map-pin-pulse { animation: none; opacity: 0; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   BLOG — classic posts index + single with comments
   ============================================================ */
.blog-card {
	overflow: hidden;
	margin-bottom: 1.75rem;
	max-width: 52rem;
}
.blog-card .wp-block-post-featured-image img { display: block; width: 100%; object-fit: cover; }
.blog-card__body { padding: 1.75rem; }
.blog-card__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
}
.blog-card__meta .wp-block-post-date { color: var(--color-gold); }
.blog-card__meta a { color: var(--color-text-muted); text-decoration: none; }
.blog-card__meta a:hover { color: var(--color-primary-light); }
.blog-card .wp-block-post-title { font-size: 1.75rem; margin: 0.5rem 0; }
.blog-card .wp-block-post-excerpt__more-link {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary-light);
	text-decoration: none;
}
.blog-card .wp-block-post-excerpt__more-link:hover { color: var(--color-gold); }

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers,
.wp-block-comments-pagination a {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	text-decoration: none;
	padding: 0.35rem 0.6rem;
}
.wp-block-query-pagination a:hover,
.wp-block-comments-pagination a:hover { color: var(--color-primary-light); }
.wp-block-query-pagination .page-numbers.current { color: var(--color-gold); }

/* Comments */
.blog-comments .wp-block-comments-title { margin-top: 2rem; }
.blog-comment { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.blog-comment__meta { display: flex; align-items: center; gap: 0.75rem; }
.blog-comment__meta .wp-block-avatar img { border-radius: 50%; }
.blog-comment__meta .wp-block-comment-author-name,
.blog-comment__meta .wp-block-comment-author-name a {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--color-text);
	text-decoration: none;
}
.blog-comment__meta .wp-block-comment-date,
.blog-comment__meta .wp-block-comment-date a {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-muted);
	text-decoration: none;
}
.blog-comment .wp-block-comment-content { margin-top: 0.5rem; color: var(--color-text); line-height: 1.625; }
.blog-comment .wp-block-comment-reply-link a {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary-light);
	text-decoration: none;
}
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	background: var(--color-bg);
	border: 2px solid var(--color-surface-light);
	border-radius: 0.5rem;
	color: var(--color-text);
	font-family: var(--font-body);
	padding: 0.65rem 0.85rem;
	width: 100%;
	box-sizing: border-box;
}
.comment-respond input:focus,
.comment-respond textarea:focus { border-color: var(--color-primary-light); }
.comment-respond .form-submit input[type="submit"] {
	width: auto;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: 0.6rem;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.75rem 1.5rem;
	cursor: pointer;
}
.comment-respond .form-submit input[type="submit"]:hover { background: color-mix(in srgb, var(--color-primary) 86%, #000); }
.comment-reply-title { font-size: 1.5rem; }
.logged-in-as, .comment-notes { color: var(--color-text-muted); font-size: 0.85rem; }

/* ============================================================
   PILLAR DETAIL — sidebar nav + breadcrumb (port of PillarDetail)
   ============================================================ */
.pillar-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}
@media (min-width: 1024px) {
	.pillar-layout { grid-template-columns: 17rem 1fr; }
	.pillar-layout__sidebar { position: sticky; top: 5.5rem; }
}

.movement-pillar-nav__heading {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-text-muted);
	text-decoration: none;
	margin-bottom: 1rem;
}
.movement-pillar-nav__heading:hover { color: var(--color-primary-light); }
.movement-pillar-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.movement-pillar-nav__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 0.9rem;
	color: var(--color-text-muted);
	text-decoration: none;
	border-left: 2px solid transparent;
	border-radius: 0 0.4rem 0.4rem 0;
	font-size: 0.95rem;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.movement-pillar-nav__item:hover {
	color: var(--color-text);
	background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.movement-pillar-nav__item.is-current {
	color: var(--color-text);
	background: var(--color-surface);
	border-left-color: var(--color-primary);
	font-weight: 600;
}
.movement-pillar-nav__icon { font-size: 1.1rem; line-height: 1; flex: none; }

.movement-pillar-breadcrumb__trail {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	display: flex;
	gap: 0.5rem;
}
.movement-pillar-breadcrumb__trail a { color: var(--color-text-muted); text-decoration: none; }
.movement-pillar-breadcrumb__trail a:hover { color: var(--color-primary-light); }
.movement-pillar-breadcrumb__current { color: var(--color-text); }
.movement-pillar-breadcrumb__count {
	margin: 1.5rem 0 0;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-primary-light);
}

.pillar-header { gap: 1rem; margin-top: 0.25rem; }
.pillar-header__icon { font-size: 3rem; margin: 0; line-height: 1; }
.pillar-header .wp-block-post-title { margin: 0; }
.pillar-principles-label { color: var(--color-primary-light); margin-bottom: 1rem; }

/* Top-level template parts (header / main / footer) must touch — WP's
   global block-gap otherwise leaves a page-background strip between them. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Secondary actions in the hero panel — filled enough to read clearly on the
   card's dark glass, without competing with the primary "Find an Event". */
.hero-panel__actions .wp-block-button.is-style-outline .wp-block-button__link {
	background: color-mix(in srgb, var(--color-surface-light) 55%, transparent);
	border-color: color-mix(in srgb, var(--color-text) 22%, transparent);
	color: var(--color-text);
}
.hero-panel__actions .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--color-surface-light) 85%, transparent);
	border-color: var(--color-primary-light);
}

/* If the countdown is hidden (no next-action date set), the signup is the
   hero card's first element — drop the now-orphaned divider. */
.hero-card .hero-card__signup-divider:first-child {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

/* Organization cards */
.org-card { text-align: center; }
.org-card__logo { margin: 0 auto 0.75rem; }
.org-card__logo img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.org-card__logo img[src=""] { display: none; }

/* Chapter directory — browsable, state-grouped list beneath the map. */
.movement-chapter-directory__lead {
	color: var(--color-text-muted);
	font-family: var(--font-mono);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 1.25rem;
}
.movement-chapter-directory__grid {
	columns: 280px;
	column-gap: 1rem;
}
.movement-chapter-directory__state {
	padding: 1.25rem 1.25rem 0.75rem;
	break-inside: avoid;
	margin-bottom: 1rem;
}
.movement-chapter-directory__state-name {
	font-family: var(--font-display);
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	color: var(--color-text);
	margin: 0 0 0.75rem;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	border-bottom: 1px solid var(--color-surface-light);
	padding-bottom: 0.5rem;
}
.movement-chapter-directory__count {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--color-text-muted);
}
.movement-chapter-directory__list { list-style: none; margin: 0; padding: 0; }
.movement-chapter-directory__item { margin: 0; }
.movement-chapter-directory__link {
	display: block;
	padding: 0.5rem 0.5rem;
	margin: 0 -0.5rem;
	border-radius: 0.375rem;
	text-decoration: none;
	color: inherit;
	transition: background 0.15s ease;
}
.movement-chapter-directory__link:hover,
.movement-chapter-directory__link:focus-visible { background: var(--color-surface-light); }
.movement-chapter-directory__chapter {
	display: block;
	font-weight: 600;
	color: var(--color-text);
}
.movement-chapter-directory__link:hover .movement-chapter-directory__chapter { color: var(--color-primary-light); }
.movement-chapter-directory__meta {
	display: block;
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

/* Chapter links — a compact, wrapping row of outbound social/contact icons per
   chapter. Overflow beyond the first few collapses into a native <details>. */
.movement-chapter-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: 0.4rem 0 0.15rem;
	padding-left: 0.5rem;
}
.movement-chapter-links__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 0.375rem;
	color: var(--color-text-muted);
	transition: color 0.15s ease, background 0.15s ease;
}
.movement-chapter-links__icon:hover,
.movement-chapter-links__icon:focus-visible {
	color: var(--color-primary-light);
	background: var(--color-surface-light);
}
.movement-chapter-links__icon svg { width: 1.05rem; height: 1.05rem; display: block; }
.movement-chapter-links__more { display: inline; }
.movement-chapter-links__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	padding: 0 0.4rem;
	border-radius: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-muted);
	cursor: pointer;
	list-style: none;
	transition: color 0.15s ease, background 0.15s ease;
}
.movement-chapter-links__toggle::-webkit-details-marker { display: none; }
.movement-chapter-links__toggle:hover,
.movement-chapter-links__toggle:focus-visible {
	color: var(--color-primary-light);
	background: var(--color-surface-light);
}
.movement-chapter-links__more[open] .movement-chapter-links__toggle { color: var(--color-primary-light); }
.movement-chapter-links__extra {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin-left: 0.25rem;
	vertical-align: middle;
}

/* Network bar — global traversal between national site and chapter subsites. */
.movement-netbar--top {
	margin: 0;
	background: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--color-surface);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
}
.movement-netbar__inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0.4rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem 1rem;
	flex-wrap: wrap;
}
.movement-netbar__home {
	color: var(--color-text);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.movement-netbar__home--link { transition: color 0.15s ease; }
.movement-netbar__home--link:hover,
.movement-netbar__home--link:focus-visible { color: var(--color-gold); }
.movement-netbar__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-gold);
	display: inline-block;
}
.movement-netbar__context {
	color: var(--color-text-muted);
	text-transform: uppercase;
}
.movement-netbar__context strong { color: var(--color-text); font-weight: 700; }
.movement-netbar--top .movement-netbar__link {
	margin-left: auto;
	color: var(--color-gold);
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.movement-netbar--top .movement-netbar__link:hover,
.movement-netbar--top .movement-netbar__link:focus-visible { color: var(--color-text); }

/* Alert bar — sits between the network bar and the theme header. Same slim
   height as the top network bar; background color is set inline per-site. */
.movement-alert-bar {
	position: relative;
	background: var(--movement-alert-bg, #cc0000);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
}
.movement-alert-bar[hidden] { display: none; }
.movement-alert-bar__inner {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0.45rem 3rem 0.45rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-align: center;
}
.movement-alert-bar__icon { font-size: 0.95rem; line-height: 1; }
.movement-alert-bar__message { font-weight: 700; }
.movement-alert-bar__close {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
	padding: 0 0.25rem;
}
.movement-alert-bar__close:hover,
.movement-alert-bar__close:focus-visible { opacity: 1; }

.movement-netbar--footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 0.75rem;
	padding: 0 1.5rem 1.25rem;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	text-align: center;
	color: var(--color-text-muted);
}
.movement-netbar--footer .movement-netbar__label strong { color: var(--color-text); }
.movement-netbar--footer .movement-netbar__link {
	color: var(--color-gold);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.movement-netbar--footer .movement-netbar__link:hover,
.movement-netbar--footer .movement-netbar__link:focus-visible { color: var(--color-text); }

/* Equal-height cards in core Query Loop grids (Action Hub guides, resources,
   organizations, blog, …). Core's grid layout stretches each post <li> to the
   row height, but the .card group inside doesn't fill it — leaving ragged
   trailing gaps under short cards. Make the li a flex box so the card stretches
   to fill. Custom card blocks (demands, infographics, wall-of-shame) already
   stretch via their own flex-column rules, so this only touches core grids. */
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template.is-layout-grid > li > .card { width: 100%; display: flex; flex-direction: column; }
/* Lay the card out as a column so a trailing CTA (resources, guides, …) drops
   to the card bottom, keeping the "Open Resource" buttons aligned across a row
   regardless of excerpt length. Only bites on cards that have a buttons block. */
.wp-block-post-template.is-layout-grid > li > .card .wp-block-buttons { margin-top: auto; }
/* Normalize excerpts to a fixed block of lines (clamp long ones, reserve the
   space for short ones) so cards in a row are near-equal height and the pinned
   CTAs don't leave a big void under the shortest card. */
.wp-block-post-template.is-layout-grid > li > .card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	min-height: calc(4 * 1.55em);
	margin-bottom: 1.5rem;
}

/* ============================================================
   NATIONAL AGGREGATE HOMEPAGE — momentum / latest content / social
   All colors flow through the editable palette variables.
   ============================================================ */

/* Momentum counters */
.movement-momentum {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1rem;
}
.movement-momentum__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.5rem 1rem;
	gap: 0.25rem;
}
.movement-momentum__value {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	color: var(--color-gold);
}
.movement-momentum__label {
	font-size: 0.9rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.movement-momentum__delta {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--color-mint);
}

/* Latest-from-the-network content card grid */
.movement-latest {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1rem;
}
.movement-latest__card { display: flex; }
.movement-latest__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-surface-light);
	border-radius: 0.75rem;
	overflow: hidden;
	text-decoration: none;
	color: var(--color-text);
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.movement-latest__link:hover {
	transform: translateY(-3px);
	border-color: var(--color-primary-light);
}
.movement-latest__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--color-surface-warm);
}
.movement-latest__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.movement-latest__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1rem 1.1rem 1.15rem;
	flex: 1;
}
.movement-latest__badge {
	align-self: flex-start;
	font-family: var(--font-mono);
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-gold) 18%, transparent);
	color: var(--color-gold);
}
.movement-latest__badge--event {
	background: color-mix(in srgb, var(--color-primary-light) 20%, transparent);
	color: var(--color-primary-light);
}
.movement-latest__badge--demand {
	background: color-mix(in srgb, var(--color-primary) 24%, transparent);
	color: var(--color-primary-light);
}
.movement-latest__badge--resource {
	background: color-mix(in srgb, var(--color-mint) 18%, transparent);
	color: var(--color-mint);
}
.movement-latest__badge--press_release {
	background: color-mix(in srgb, var(--color-text-muted) 22%, transparent);
	color: var(--color-text-muted);
}
.movement-latest__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.1;
}
.movement-latest__excerpt {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}
.movement-latest__meta {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--color-text-muted);
}
.movement-latest__context::after { content: "·"; margin-left: 0.5rem; }

/* Social RSS feeds (Bluesky / Reddit) */
.movement-social__list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.85rem;
}
.movement-social__link {
	display: flex;
	gap: 0.75rem;
	height: 100%;
	padding: 0.9rem 1rem;
	background: var(--color-surface);
	border: 1px solid var(--color-surface-light);
	border-radius: 0.65rem;
	text-decoration: none;
	color: var(--color-text);
	transition: border-color 0.15s ease;
}
.movement-social__link:hover { border-color: var(--color-primary-light); }
.movement-social__media img {
	width: 3rem;
	height: 3rem;
	border-radius: 0.4rem;
	object-fit: cover;
	display: block;
}
.movement-social__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
/* Break long unbroken URLs so a post can't overflow its card into the next. */
.movement-social__title,
.movement-social__excerpt { overflow-wrap: anywhere; }
/* Clamp both so cards keep uniform heights and the grid rows line up. */
.movement-social__title {
	font-weight: 600;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.movement-social__excerpt {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.movement-social__time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-text-muted); }
/* Header row: eyebrow + heading on the left, "Follow" link right-aligned on the
   same line (mirrors the Latest-from-the-network section). */
.movement-social__header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1.5rem;
}
.movement-social__heading .eyebrow { margin: 0 0 0.25rem; }
.movement-social__heading .section-heading { margin: 0; }
.movement-social__follow { white-space: nowrap; }

/* Social-icon bar (movement/social-links) — settings-driven, hides unset icons. */
.movement-social-bar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}
.movement-social-bar__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--color-surface-light);
	color: var(--color-text-muted);
	transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.movement-social-bar__link:hover {
	color: var(--color-text);
	background: var(--color-primary);
	transform: translateY(-2px);
}
.movement-social-bar__link svg { width: 1.4rem; height: 1.4rem; display: block; }
/* In the footer the column is left-aligned and can hold many platforms, so the
   bar wraps left-to-right (not centered) with room under the heading. */
.site-footer .movement-social-bar { margin-top: 0.75rem; }
.site-footer .movement-social-bar__list { justify-content: flex-start; max-width: 18rem; }

/* ============================================================
   LINK TREE — per-site link-in-bio page (movement/link-tree)
   Configured under the Links admin menu (inc/links.php).
   ============================================================ */
.movement-link-tree {
	--link-tree-btn-radius: 0.75rem;
	padding: 2.5rem 1.25rem 3rem;
	border-radius: 0.75rem;
}
.movement-link-tree--shape-square { --link-tree-btn-radius: 0; }
.movement-link-tree--shape-rounded { --link-tree-btn-radius: 0.75rem; }
.movement-link-tree--shape-pill { --link-tree-btn-radius: 999px; }

.movement-link-tree__header {
	text-align: center;
	max-width: 34rem;
	margin: 0 auto 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}
.movement-link-tree__avatar img {
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-primary-light);
}
.movement-link-tree__title {
	font-family: var(--font-display);
	font-size: 1.9rem;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0;
}
.movement-link-tree__intro {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}

.movement-link-tree__cat {
	max-width: 34rem;
	margin: 0 auto 1.75rem;
}
/* Multi-column: categories flow into a responsive grid. */
.movement-link-tree--multi .movement-link-tree__cat {
	max-width: 72rem;
}
@media (min-width: 40rem) {
	.movement-link-tree--multi .movement-link-tree__links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 60rem) {
	.movement-link-tree--multi .movement-link-tree__links {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* A heading with a rule underneath — not a filled band/button. */
.movement-link-tree__cat-title {
	font-family: var(--font-accent);
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	text-align: center;
	color: var(--color-eyebrow);
	margin: 1.5rem 0 1rem;
	padding: 0 0 0.55rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-surface-light);
	border-radius: 0;
}
.movement-link-tree__cat:first-child .movement-link-tree__cat-title { margin-top: 0; }
.movement-link-tree__links {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}
.movement-link-tree__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3.25rem;
	padding: 0.85rem 1.25rem;
	border-radius: var(--link-tree-btn-radius);
	background: var(--color-surface-light);
	color: var(--color-text);
	font-family: var(--font-accent);
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.movement-link-tree__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
	filter: brightness(1.06);
}
.movement-link-tree__btn:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: 2px;
}
.movement-link-tree__icon {
	display: inline-flex;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}
.movement-link-tree__icon svg { width: 100%; height: 100%; }
.movement-link-tree__label { min-width: 0; }

/* Unlock prompt for hidden private links. */
.movement-link-tree__unlock {
	max-width: 34rem;
	margin: 1.5rem auto 0;
	padding: 1.25rem;
	border: 1px dashed var(--color-surface-light);
	border-radius: var(--link-tree-btn-radius);
	text-align: center;
}
.movement-link-tree__unlock-label {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin: 0 0 0.75rem;
}
.movement-link-tree__unlock-error {
	color: var(--color-primary-light);
	font-size: 0.85rem;
	margin: 0 0 0.75rem;
}
.movement-link-tree__unlock-row {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
}
.movement-link-tree__unlock-row input[type="password"] {
	flex: 1;
	min-width: 12rem;
	padding: 0.6rem 0.85rem;
	border-radius: var(--link-tree-btn-radius);
	border: 1px solid var(--color-surface-light);
	background: var(--color-bg);
	color: var(--color-text);
}
.movement-link-tree__unlock-btn { min-height: 0; padding: 0.6rem 1.25rem; }