/* ==========================================================================
   Empowering America — theme stylesheet
   Source: Figma "TEA Website Redesign", node 162:132 (homepage)

   Geometry is derived from the Figma frame's absolute coordinates
   (1440 x 5461). Content sits on an 80px margin / 1280px column grid,
   so at a 1440px viewport every block lands on its Figma pixel.
   ========================================================================== */

:root {
	--color-navy: #061e54;
	/* WCAG 2.1 AA: the Figma blue #407bfb is 3.86:1 under white text, short of
	   4.5:1. #2a6cfb is the smallest darkening (same hue and saturation) that
	   clears it, at 4.53:1. Do not restore the Figma value in a "match the deck"
	   pass: it fails on the nav's current item, every .btn--primary and the
	   newsletter submit. */
	--color-blue: #2a6cfb;
	--color-blue-soft: rgba(42, 108, 251, 0.92);
	--color-green: #5bae29;
	--color-orange: #f9a812;
	--color-teal: #34b7d1;
	--color-black: #000000;
	--color-white: #ffffff;
	--color-card-bg: rgba(230, 230, 230, 0.36);
	--color-overlay-90: rgba(0, 0, 0, 0.9);
	--color-overlay-40: rgba(0, 0, 0, 0.4);
	--color-header-bg: rgba(245, 245, 245, 0.55);
	--color-header-scrolled: rgba(255, 255, 255, 0.8);
	--color-border: #d9d9d9;
	--color-text: #000000;
	/* #848282 was 3.82:1 on white, under the 4.5:1 AA floor for text. #767676 is
	   the lightest grey that clears it (4.54:1), so muted rows stay muted. */
	--color-placeholder: #767676;
	--color-red: #b60000;
	--color-red-mobile: #b60000;
	--color-cyan: #5fd2e9;
	--color-cyan-mobile: #5fd2e9;

	/* Split-column CTA hover fills (Figma 182:1016 and 198:181). The design
	   layers each gradient at 90% opacity, folded into the stops here. Both run
	   left to right; the red one was vertical while it flooded a whole column. */
	--gradient-hover-red: linear-gradient(to right, rgba(182, 0, 0, 0.9) 23.077%, rgba(224, 0, 0, 0.9) 100%);
	--gradient-hover-blue: linear-gradient(to right, rgba(58, 153, 230, 0.864) 0%, rgba(95, 210, 233, 0.9) 100%);

	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-display: 'Roboto', 'Inter', sans-serif;

	--container-width: 1440px;
	--container-pad: 80px;
	/* Gutter between the two split columns; the hover fills bleed to its centre. */
	--split-gutter: 249px;
	/* Split section's vertical padding; the hover fills bleed over it. */
	--split-padding-y: 52px;
	--radius-lg: 20px;
	--radius-md: 10px;
}

/* -- Reset ----------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	/* The footer's Subscribe button is a jump-nav to the signup form. */
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-white);
}

img {
	max-width: 100%;
	display: block;
}

h1, h2, h3, p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Skip link: first thing in the tab order, visible only while focused. */
.skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 12px 20px;
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-navy);
	font-size: 18px;
	font-weight: 600;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

/* One explicit focus ring for everything focusable, instead of whatever the
   browser draws (an orange 1px "auto" ring here, 2.2:1 on white). Navy outside
   a white gap reads on light grounds, and the white gap itself reads against
   the navy, red and near-black bands. Components with a stronger rule of their
   own (statement panel links, the lightbox, the carousel) keep it. */
:focus-visible {
	outline: 3px solid var(--color-navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--color-white);
}

/* On the dark bands the navy ring all but vanishes (1.3:1 on the near-black
   footer), so the ring flips to white there. */
.newsletter :focus-visible,
.site-footer :focus-visible,
.statement-panel :focus-visible,
.gradient-intro :focus-visible,
.agenda :focus-visible,
.main-nav__list :focus-visible,
.deck-cards :focus-visible {
	outline-color: var(--color-white);
	box-shadow: none;
}

/* Content column: 80px margins, 1280px of content at a 1440px viewport. */
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

/* -- Shared components ------------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* 19px + 1px border reproduces the Figma 20px inset on a 68px-tall button. */
	padding: 19px 32px;
	border-radius: var(--radius-lg);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	border: 1px solid transparent;
	white-space: nowrap;
}

.btn--primary {
	background: var(--color-blue);
	color: var(--color-white);
	font-weight: 500;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.btn--outline {
	border-color: var(--color-black);
	color: var(--color-black);
	background: transparent;
	text-transform: uppercase;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn--outline-white {
	border: 2px solid var(--color-white);
	padding: 18px 32px;
	color: var(--color-white);
	background: transparent;
	text-transform: uppercase;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* The 186 x 43 filled pill. One geometry, five fills — Figma uses green on the
   homepage, near-black for Latest News, blue for Research, teal for Afternoon
   TEA and the deck cards, orange for TEA Takes. */
.btn--fill-green,
.btn--fill-ink,
.btn--fill-blue,
.btn--fill-teal,
.btn--fill-orange {
	color: var(--color-white);
	font-weight: 600;
	font-size: 16px;
	line-height: normal;
	padding: 0;
	width: 186px;
	height: 43px;
	border-radius: var(--radius-md);
}

.btn--fill-green {
	background: var(--color-green);
}

.btn--fill-ink {
	background: var(--color-overlay-90);
}

.btn--fill-blue {
	/* Solid, not --color-blue-soft: the 92% alpha lets a light page through and
	   drops white text to 3.99:1. Solid blue is 4.53:1. */
	background: var(--color-blue);
}

.btn--fill-teal {
	background: var(--color-teal);
}

.btn--fill-orange {
	background: var(--color-orange);
}

/* WCAG 2.1 AA: white on these three brand fills is 2.79:1 (green), 2.38:1 (teal)
   and 1.97:1 (orange). Darkening the fills would change the brand, so the label
   goes navy instead: 5.70:1, 6.69:1 and 8.05:1. Keep this if the fills are ever
   "matched to the deck" again. */
.btn--fill-green,
.btn--fill-teal,
.btn--fill-orange {
	color: var(--color-navy);
}

.link-underline {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 1.4;
}

.section-eyebrow {
	display: block;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.48px;
	text-transform: uppercase;
	color: var(--color-text);
}

.section-eyebrow--white {
	color: var(--color-white);
}

/* Black label box sitting on a 4px rule that spans the full content width. */
.section-label-row {
	border-bottom: 4px solid var(--color-black);
}

.section-label {
	width: 405px;
	max-width: 100%;
	height: 60px;
	background: var(--color-black);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.48px;
}

/* Thin rule + right-aligned button on a single row (the "View all" pattern). */
.view-all-row {
	display: flex;
	align-items: center;
}

.view-all-row::before {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

.view-all-row .btn {
	flex: none;
	width: 187px;
}

/* -- Button hover states (everything outside the split-columns, which have
   their own gradient-fill hover defined further down) -----------------------
   Filled buttons darken in place; outline buttons invert to a solid fill,
   matching the invert treatment the split-column CTAs already get from their
   parent's hover. Same pointer/motion gating as that pattern, for consistency. */

@media (hover: hover) and (pointer: fine) {
	.btn--primary,
	.btn--fill-green,
	.btn--fill-ink,
	.btn--fill-blue,
	.btn--fill-teal,
	.btn--fill-orange,
	.form-row--submit .btn {
		transition: filter 0.2s ease;
	}

	.btn--primary:hover,
	.btn--fill-green:hover,
	.btn--fill-ink:hover,
	.btn--fill-blue:hover,
	.btn--fill-teal:hover,
	.btn--fill-orange:hover,
	.form-row--submit .btn:hover {
		filter: brightness(0.9);
	}

	.view-all-row .btn {
		transition: color 0.2s ease, background-color 0.2s ease;
	}

	.view-all-row .btn:hover {
		background: var(--color-black);
		color: var(--color-white);
	}

	.btn--outline-white {
		transition: color 0.2s ease, background-color 0.2s ease;
	}

	.btn--outline-white:hover {
		background: var(--color-white);
		color: var(--color-overlay-90);
	}
}

@media (prefers-reduced-motion: reduce) {
	.btn--primary,
	.btn--fill-green,
	.form-row--submit .btn,
	.view-all-row .btn,
	.btn--outline-white {
		transition: none;
	}
}

/* -- Social icons (Font Awesome 6 brands) ---------------------------------- */

.social-icons {
	display: flex;
	align-items: center;
}

/* A fixed square box per icon holds the row on the design's width grid
   regardless of each glyph's own advance width. */
.social-icons__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.social-icons__link i {
	line-height: 1;
}

/* Network-specific hover color, straight on the glyph. */
@media (hover: hover) and (pointer: fine) {
	.social-icons__link i {
		transition: color 0.2s ease;
	}

	.social-icons__link--facebook:hover i,
	.social-icons__link--facebook:focus-visible i {
		color: #1877f2;
	}

	/* X's actual brand color is black, which disappears against the black
	   header icons and the near-black footer background alike. Using X's own
	   UI gray instead, since it reads on both. */
	.social-icons__link--x:hover i,
	.social-icons__link--x:focus-visible i {
		color: #71767b;
	}

	.social-icons__link--instagram:hover i,
	.social-icons__link--instagram:focus-visible i {
		color: #e4405f;
	}
}

@media (prefers-reduced-motion: reduce) {
	.social-icons__link i {
		transition: none;
	}
}

.social-icons--header {
	gap: var(--social-gap, 23px);
	color: var(--color-black);
	margin-left: 76px;
	flex: none;
	transition: gap 0.25s ease;
}

/* Where there is room, the icon cluster reserves the logo's 179px so the two
   flanking blocks weigh the same and the nav's auto margins land the pill on
   the header's true centre rather than the centre of the gap between them. */
@media (min-width: 1101px) {
	.social-icons--header {
		margin-left: 0;
		/* Reserves the logo's own width, so the two flanking blocks weigh the
		   same and the pill lands on the header's true centre. Follows the logo
		   as it shrinks, or the pill drifts off centre on scroll. */
		min-width: var(--logo-w, 138px);
		justify-content: flex-end;
	}
}

.social-icons--header .social-icons__link {
	width: var(--social-size, 30px);
	height: var(--social-size, 30px);
	font-size: var(--social-size, 30px);
	transition: width 0.25s ease, height 0.25s ease, font-size 0.25s ease;
}

.social-icons--footer {
	gap: 35px;
	color: var(--color-white);
}

.social-icons--footer .social-icons__link {
	width: 27px;
	height: 27px;
	font-size: 27px;
}

/* Rendered only inside the collapsed nav panel. */
.social-icons--mobile {
	display: none;
	gap: 28px;
	color: var(--color-white);
}

.social-icons--mobile .social-icons__link {
	width: 28px;
	height: 28px;
	font-size: 28px;
}

/* -- Site header ------------------------------------------------------------ */

/* Sticky so the nav stays reachable on these long pages. The bar is 80% white
   with a blur at rest and once scrolled; only its size steps down. */
.site-header {
	/* Everything the header sizes itself from lives here, so the scrolled state
	   is a different set of numbers rather than a second set of rules. Each
	   breakpoint re-states the pair it needs. */
	--header-h: 152px;
	/* The full SVG logo is 297.783 x 269.53 (1.105:1). Heights are the same as
	   they were for the old 1.23:1 PNG, so the header's depth does not move;
	   widths are height x 1.105, and the image is contained, never cropped.
	   The social cluster reserves --logo-w, so the nav pill stays centred. */
	--logo-w: 124px;
	--logo-h: 112px;
	--nav-track-h: 58px;
	--nav-item-h: 48px;
	--nav-item-pad: 20px;
	--nav-gap: 8px;
	--nav-font: 16px;
	--social-size: 30px;
	--social-gap: 23px;

	position: sticky;
	top: 0;
	z-index: 20;
	/* Same 80% white and blur at rest as once scrolled, so only size changes. */
	background: var(--color-header-scrolled);
	backdrop-filter: blur(8px);
	height: var(--header-h);
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--color-border);
	transition: background-color 0.3s ease, height 0.25s ease;
}

/* Once the page has moved the header gives back about a third of its depth:
   the logo and the pill step down with it rather than the bar simply cropping
   around them. The logo keeps its 1.105 box ratio at both sizes so it does
   not shift while it shrinks. */
.site-header--scrolled {
	--header-h: 104px;
	--logo-w: 84px;
	--logo-h: 76px;
	--nav-track-h: 46px;
	--nav-item-h: 38px;
	--nav-item-pad: 16px;
	--nav-gap: 6px;
	--nav-font: 15px;
	--social-size: 24px;
	--social-gap: 18px;

	background: var(--color-header-scrolled);
	backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__logo,
	.main-nav__list,
	.main-nav__list a,
	.social-icons--header,
	.social-icons--header .social-icons__link {
		transition: none;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	width: 100%;
}

.site-header__logo {
	flex: none;
	width: var(--logo-w);
	height: var(--logo-h);
	display: block;
	transition: width 0.25s ease, height 0.25s ease;
}

.site-header__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
}

/* Current page fills its pill, the way the frame shows Map on the map page.
   WordPress supplies these classes; current-menu-ancestor covers a child page
   highlighting its parent. */
.main-nav__list .current-menu-item > a,
.main-nav__list .current_page_item > a,
.main-nav__list .current-menu-ancestor > a,
.main-nav__list .current_page_parent > a {
	background: var(--color-blue);
}

/* Nav pill sits centred in the space left between the logo and the social
   cluster; the icons still hug the right edge of the content column. */
.main-nav {
	margin-left: auto;
	margin-right: auto;
}

/* Transparent on desktop so the pill lays out directly inside .main-nav;
   below 900px it becomes the collapsed drop-down panel. */
.main-nav__panel {
	display: contents;
}

/* Width follows the items rather than the Figma-measured 585px: each item now
   carries its own pill padding, so a fixed track would squeeze the gaps shut. */
.main-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--nav-gap, 8px);
	height: var(--nav-track-h, 58px);
	background: var(--color-navy);
	border-radius: 100px;
	padding: 5px;
	transition: height 0.25s ease;
}

/* 48px = the 58px track less its 5px padding, so the pill sits flush inside. */
.main-nav__list a {
	display: flex;
	align-items: center;
	height: var(--nav-item-h, 48px);
	padding: 0 var(--nav-item-pad, 20px);
	border-radius: 100px;
	color: var(--color-white);
	font-weight: 700;
	font-size: var(--nav-font, 16px);
	letter-spacing: -0.32px;
	white-space: nowrap;
	transition: height 0.25s ease, padding 0.25s ease, font-size 0.25s ease;
}

/* Hovered item fills with the brand blue the primary CTA and newsletter submit
   use elsewhere, so "interactive" reads consistently across the site. */
@media (hover: hover) and (pointer: fine) {
	.main-nav__list a {
		transition: background-color 0.2s ease, height 0.25s ease, padding 0.25s ease, font-size 0.25s ease;
	}

	.main-nav__list a:hover,
	.main-nav__list a:focus-visible {
		background-color: var(--color-blue);
		color: var(--color-white);
	}
}

@media (prefers-reduced-motion: reduce) {
	.main-nav__list a {
		transition: none;
	}
}

.main-nav__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	padding: 8px;
}

.main-nav__toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-black);
}

/* -- Hero -------------------------------------------------------------------- */

.hero {
	position: relative;
	background: var(--color-navy);
	height: 464px;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
}

/* The photo is 3:2 and the hero band is ~3.1:1, so something has to give.
   The design frame stretches it (object-fit: fill), which squashes the image
   ~2x vertically; `cover` keeps the true aspect and crops instead. The Y
   offset picks the band holding both the flag and the boy's head. */
.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.hero__content {
	position: relative;
	z-index: 1;
	/* The hero is a flex row, so the container must claim the full line. */
	width: 100%;
	padding-top: 70px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
}

.hero__title {
	color: var(--color-white);
	font-size: 64px;
	font-weight: 400;
	letter-spacing: -1.28px;
	line-height: 1.2;
	max-width: 767px;
}

.hero__content .btn {
	font-size: 24px;
	line-height: 1.5;
}

/* -- Who We Are intro banner ------------------------------------------------- */

.intro-banner {
	background: var(--color-navy);
	padding: 86px 0 76px;
}

.intro-banner__inner {
	display: grid;
	grid-template-columns: 405px 1fr;
	gap: 32px;
	align-items: start;
}

.intro-banner__text {
	display: flex;
	flex-direction: column;
	/* Reproduces the blank 24px line the design leaves before the link. */
	gap: 36px;
	color: var(--color-white);
	font-size: 24px;
	line-height: 1.3;
}

.intro-banner__text .link-underline {
	color: var(--color-white);
}

/* -- Split columns (energy security / roadmap) ------------------------------- */

.split-columns {
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding: var(--split-padding-y) 0;
	position: relative;
}

/* Full-bleed vertical rule down the centre of the gutter. */
.split-columns::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: var(--color-border);
}

.split-columns__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--split-gutter);
}

.split-column {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 42px;
	min-width: 0;
}

.split-column > * {
	position: relative;
	z-index: 1;
}

.split-column__title {
	font-family: var(--font-display);
	font-size: 48px;
	line-height: 56px;
	font-weight: 400;
}

.split-column__lead {
	font-size: 32px;
	line-height: 1.3;
}

/* Both CTAs sit on the section's bottom padding line. */
.split-column .btn {
	align-self: flex-start;
	width: 406px;
	max-width: 100%;
	margin-top: auto;
}

/* -- Split column CTA hover (Figma 182:1016 / 198:181) ----------------------
   Hovering a column's CTA fills that button with a left-to-right gradient,
   red on the first column and blue/cyan on the second. The effect is confined
   to the button: the column copy and the section background no longer change.
   Gated on a real pointer so it never sticks after a tap on touch devices.

   The fill rides on a pseudo-element rather than the button's own background
   because gradients cannot be interpolated, so a `background` transition would
   snap. Fading a layer's opacity gives the same 0.3s ease the rest of the
   section uses.

   CONTRAST: the 20px CTA label is not large text, so it needs 4.5:1. The
   design's bright red end (255,0,0) gave white 3.88:1, so that stop is
   (224,0,0), which clears 4.5:1. White can never clear the blue and cyan
   fill (2.60:1 and 1.67:1 at the ends), so the right-hand button's label
   goes navy on hover (6.1:1 or better). Recorded here so a later "match the
   deck exactly" pass does not undo it. */

@media (hover: hover) and (pointer: fine) {
	.split-column .btn--outline {
		/* .split-column > * already supplies position:relative and z-index:1,
		   which makes the button the stacking context the fill sits inside. */
		overflow: hidden;
		transition: color 0.3s ease, border-color 0.3s ease;
	}

	.split-column .btn--outline::before {
		content: '';
		position: absolute;
		/* -1px so the layer covers the border box, not just the padding box. */
		inset: -1px;
		z-index: -1;
		border-radius: inherit;
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
	}

	.split-column:nth-child(1) .btn--outline::before {
		background: var(--gradient-hover-red);
	}

	.split-column:nth-child(2) .btn--outline::before {
		background: var(--gradient-hover-blue);
	}

	.split-column .btn--outline:hover::before,
	.split-column .btn--outline:focus-visible::before {
		opacity: 1;
	}

	.split-column .btn--outline:hover,
	.split-column .btn--outline:focus-visible {
		border-color: transparent;
		color: var(--color-white);
	}

	.split-column:nth-child(2) .btn--outline:hover,
	.split-column:nth-child(2) .btn--outline:focus-visible {
		color: var(--color-navy);
	}
}

@media (prefers-reduced-motion: reduce) {
	.split-column .btn--outline,
	.split-column .btn--outline::before {
		transition: none;
	}
}

/* -- Real Clear Energy news grid --------------------------------------------- */

.news-grid-section {
	padding: 90px 0 103px;
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 42px 34px;
	padding: 54px 0 46px;
}

.news-card {
	background: var(--color-card-bg);
	border-radius: var(--radius-md);
	height: 312px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.news-card__tag {
	/* #5bae29 is 2.58:1 on white and worse on the card's grey tint. #3f791d is
	   the smallest darkening of the same hue that clears 4.5:1 on that tint
	   (4.53:1; 5.3:1 on white). */
	color: #3f791d;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.2;
	text-transform: uppercase;
}

.news-card__byline {
	font-weight: 600;
	font-size: 16px;
	line-height: normal;
	letter-spacing: -0.32px;
}

.news-card__title {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: -0.36px;
	line-height: 24px;
}

.news-card .btn--fill-green {
	margin-top: auto;
}

/* -- Newsletter signup -------------------------------------------------------- */

/* Figma 384:1603. The frame is 628px tall; the heading sits 108px down and the
   list and form both start at 269px, so the head spans both columns and the two
   lower blocks share a row. */
.newsletter {
	position: relative;
	height: 628px;
	overflow: hidden;
	background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-navy) 100%);
	color: var(--color-white);
}

/* main and .site-footer are direct siblings with nothing between them, so
   :last-child here means the signup is the page's final section, sitting
   flush against the footer. Match the footer's own background instead of
   the blue/navy gradient so the two blend into one band. */
.newsletter:last-child {
	background: var(--color-overlay-90);
}

.newsletter__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: grid;
	/* The form is a fixed 624px hugging the content column's right edge. */
	grid-template-columns: 1fr 624px;
	column-gap: 32px;
	row-gap: 59px;
	align-items: start;
	padding-top: 108px;
}

.newsletter__head {
	grid-column: 1 / -1;
}

.newsletter__title {
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 400;
	line-height: 56px;
}

.newsletter__receive {
	font-size: 24px;
	line-height: 1.98;
}

.newsletter__list {
	grid-column: 1;
	max-width: 295px;
	display: flex;
	flex-direction: column;
	/* The design separates entries with a blank 20px line. */
	gap: 28px;
}

.newsletter__list-name,
.newsletter__list-cadence {
	display: block;
	line-height: 1.4;
}

.newsletter__list-name {
	font-size: 24px;
	font-weight: 700;
}

.newsletter__list-cadence {
	font-size: 20px;
}

/* The form sits directly on the gradient — the white card is gone. */
.newsletter__form {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 23px;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr;
}

/* First / last name share one bordered box split by a hairline. */
.form-row--name {
	grid-template-columns: 47.5% 1fr;
	border: 1px solid var(--color-black);
	background: var(--color-white);
	height: 52px;
}

.form-row--name .form-group + .form-group {
	border-left: 1px solid var(--color-black);
}

.form-row input[type='text'],
.form-row input[type='email'] {
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	padding: 0 27px;
	font-size: 20px;
	line-height: 1.4;
	font-family: inherit;
	border-radius: 0;
}

.form-row--email {
	border: 1px solid var(--color-black);
	background: var(--color-white);
	height: 52px;
}

.form-row input::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

.form-row--submit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 23px;
}

.newsletter__captcha {
	width: 328px;
	height: 66px;
	object-fit: contain;
}

.form-row--submit .btn {
	width: 219px;
	height: 67px;
	padding: 0;
	border-radius: 0;
	background: var(--color-blue-soft);
	color: var(--color-white);
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	box-shadow: none;
}

/* -- News section (color tiles) ---------------------------------------------- */

.news-section {
	padding: 103px 0 0;
}

.news-section__intro {
	padding: 50px 0 60px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.news-section__intro h2 {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
}

.news-section__intro p {
	font-size: 24px;
	line-height: 1.3;
}

.news-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 31px;
}

.news-tile {
	height: 279px;
	display: flex;
	align-items: flex-end;
	padding: 0 28px 21px;
}

.news-tile span {
	color: var(--color-white);
	font-size: 24px;
	line-height: 1.3;
}

.news-tile--teal {
	background: var(--color-teal);
}

.news-tile--blue {
	background: var(--color-blue-soft);
}

.news-tile--orange {
	background: var(--color-orange);
}

/* White label on the teal and orange tiles was 2.38:1 and 1.97:1; navy is 6.69:1
   and 8.05:1. */
.news-tile--teal span,
.news-tile--orange span {
	color: var(--color-navy);
}

.news-tile--navy {
	background: var(--color-navy);
}

.news-section__footer {
	padding-top: 65px;
}

/* -- X / Twitter feed --------------------------------------------------------- */

/* The feed plugin sets the like and retweet counts in a pale grey (2.11:1 on its
   card). #595959 is 7:1 on white. */
.x-feed .ctf-action-count {
	color: #595959;
}

.x-feed {
	padding: 76px 0 83px;
}

.x-feed__title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
	/* Figma's text box is 8px tighter than its 1.4 leading, so the 66px
	   design gap becomes 58px measured from the rendered line box. */
	margin-bottom: 58px;
}

/* Track is 1245px wide (3 x 379 + 2 x 54) centred in the 1280 column. */
.x-feed__carousel {
	position: relative;
}

.x-feed__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 54px;
	max-width: 1245px;
	margin: 0 auto;
}

.x-feed__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Account row sits above the bordered screenshot box, per the design. */
.x-feed__card-header {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 32px;
	margin-bottom: 11px;
}

.x-feed__avatar {
	width: 31px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.x-feed__card-header > div {
	display: flex;
	align-items: center;
	gap: 32px;
	flex: 1;
	min-width: 0;
}

.x-feed__name {
	font-weight: 700;
	font-size: 11px;
	line-height: 1.2;
	text-decoration: underline;
	color: #454545;
	white-space: nowrap;
}

.x-feed__handle {
	font-weight: 700;
	font-size: 11px;
	line-height: 1.2;
	text-decoration: underline;
	color: #828282;
	white-space: nowrap;
}

.x-feed__badge {
	width: 34px;
	height: 31px;
	object-fit: contain;
	flex: none;
	margin-left: auto;
}

.x-feed__body {
	border: 1px solid var(--color-border);
	border-radius: 4px;
	height: 318px;
	padding: 14px 12px;
	overflow: hidden;
}

.x-feed__screenshot {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

/* Action bar strip — the bottom of the same screenshot, scaled and offset
   exactly as the design frames it, since the body box crops it off. */
.x-feed__actions {
	position: relative;
	height: 36px;
	margin-top: 13px;
	overflow: hidden;
}

.x-feed__actions img {
	position: absolute;
	left: -11.97%;
	top: -947.83%;
	width: 114.16%;
	height: 1048.32%;
	max-width: none;
}

/* Arrows overlay the track edges, centred on the screenshot boxes. */
.x-feed__arrow {
	position: absolute;
	top: 202px;
	transform: translateY(-50%);
	background: none;
	border: 0;
	padding: 0;
	width: 27px;
	height: 27px;
	z-index: 2;
}

.x-feed__arrow--prev {
	left: 0;
}

.x-feed__arrow--next {
	right: 0;
}

.x-feed__arrow img {
	width: 27px;
	height: 27px;
}

.x-feed__dots {
	width: 59px;
	height: 11px;
	margin: 49px auto 0;
}

/* -- X Feed: Custom Twitter Feeds Pro overrides ------------------------------- */
/* Plugin markup, not ours, so !important matches its own inline-style specificity. */

.ctf-tweet-content {
	margin-top: 1rem !important;
	border: 1px solid #D9D9D9 !important;
	padding: 0.5rem !important;
	border-radius: 4px;
}

.ctf-tweet-actions {
	justify-content: space-evenly !important;
	float: none !important;
}

/* -- Footer ------------------------------------------------------------------ */

.site-footer {
	background: var(--color-overlay-90);
	color: var(--color-white);
	padding: 53px 0 63px;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 437px 219px 328px 296px;
	align-items: start;
}

.footer__brand {
	grid-area: 1 / 1 / 2 / 2;
	width: 296px;
	height: 129px;
	display: flex;
	justify-content: flex-start;
}

/* The full logo has navy and dark-red type that disappears on the near-black
   footer, so it sits on a white plate. The plate fills the 129px slot, so the
   footer columns that line up with it do not move; the mark is contained in
   it, never cropped or recolored. */
.footer__brand img {
	height: 100%;
	width: auto;
	aspect-ratio: 297.783 / 269.53;
	box-sizing: border-box;
	padding: 8px;
	background: var(--color-white);
	border-radius: 8px;
	object-fit: contain;
}

.footer__contact {
	grid-area: 2 / 1 / 3 / 2;
	margin-top: 39px;
	width: 296px;
	min-height: 60px;
	font-size: 16px;
	line-height: normal;
	letter-spacing: -0.32px;
}

.footer__contact strong {
	font-weight: 600;
}

.footer__contact a {
	text-decoration: underline;
	text-underline-offset: 2px;
	color: var(--color-orange);
}

/* Rendered by wp_nav_menu, so this is a <ul>. padding-left and the marker go;
   padding-top stays, since it is what lines the columns up with the logo. */
.footer__col {
	display: flex;
	flex-direction: column;
	gap: 21px;
	padding-top: 44px;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

/* Flex, so each item is exactly as tall as its anchor. A list-item box adds
   about a pixel of its own, which compounded into 5px of drift by the bottom
   of the mobile column. */
.footer__col > li {
	display: flex;
}

.footer__col--links-1 {
	grid-area: 1 / 2 / 3 / 3;
}

.footer__col--links-2 {
	grid-area: 1 / 3 / 3 / 4;
}

.footer__col--newsletter {
	grid-area: 1 / 4 / 3 / 5;
}

/* :not(.btn) so the newsletter column's Subscribe button, which shares the
   .footer__col class, does not get the underlined-link treatment. */
.footer__col a:not(.btn),
.footer__link {
	color: var(--color-white);
	font-size: 16px;
	line-height: normal;
	letter-spacing: -0.32px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.footer__col--newsletter .footer__newsletter-label {
	font-size: 16px;
	line-height: normal;
	letter-spacing: -0.32px;
}

.footer__col--newsletter .btn {
	width: 100%;
	margin-top: 0;
}

.footer__divider {
	grid-area: 3 / 1 / 4 / 5;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	margin: 60px 0 0;
	width: 100%;
}

.footer__bottom-row {
	grid-area: 4 / 1 / 5 / 5;
	margin-top: 25px;
	display: flex;
	align-items: center;
}

.footer__bottom {
	display: flex;
	align-items: center;
}

.footer__copyright {
	width: 328px;
	flex: none;
	font-size: 16px;
	line-height: normal;
	letter-spacing: -0.32px;
}

.footer__bottom .footer__link {
	text-decoration: underline;
}

.footer__social {
	margin-left: auto;
}

.disclaimer-bar {
	background: var(--color-orange);
	text-align: center;
	height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.disclaimer-bar p {
	font-size: 16px;
	line-height: normal;
	letter-spacing: -0.32px;
	color: var(--color-black);
}

/* -- Page intro (Figma 201:280 / 201:215) ------------------------------------
   Page opener on white: two 624px columns, the display heading at x=80 and the
   lead at x=736. The frame puts the heading's top at 230px, 78px below the
   152px header.
   -------------------------------------------------------------------------- */

.page-intro {
	padding: 78px 0 63px;
}

.page-intro__inner {
	display: grid;
	grid-template-columns: 624px 624px;
	gap: 32px;
	align-items: start;
}

.page-intro__title {
	font-size: 64px;
	font-weight: 400;
	letter-spacing: -1.28px;
	/* Both frames say leading-[normal], which the mobile frame measures at
	   77px on 64px type — three lines to 231px, four to 308px. */
	line-height: 1.2;
}

/* The frame drops the lead 15px below the heading's own top. */
.page-intro__body {
	padding-top: 15px;
	font-size: 24px;
	line-height: 1.3;
}

.page-intro__body p + p {
	margin-top: 1.3em;
}

/* WCAG 1.4.10 reflow: the 64px heading's longest word ("Independence" on ARC
   Energy Security) is 434px wide, which spills past a 320px screen and still
   past a 390px phone. The mobile block further down scales it so the longest
   word fits the 288px column at 320px; any longer word breaks rather than
   scrolls. */
.page-intro__title {
	overflow-wrap: break-word;
}

/* .btn is nowrap, so a link button with a long label would be wider than a
   320px screen. In the page intro it may wrap inside the pill instead. */
.page-intro__buttons .btn {
	white-space: normal;
	text-align: center;
}

/* Link buttons under the lead copy. They wrap onto a second row rather than
   shrink, since .btn is nowrap at 20px. */
.page-intro__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.page-intro__body .page-intro__buttons {
	margin-top: 32px;
}


/* -- Gradient intro (Figma 185:2147 / 205:608) -------------------------------
   The About page opener. One navy-to-blue band running from under the header
   to the newsletter section, carrying the page heading, a labelled intro, the
   translucent goal card and a closing statement.

   Frame geometry at 1440: the band starts at the header's 152px and ends at
   1401; the heading sits at 222, the intro row at 483, the card at 771 (1280 x
   307) and the statement at 1180.
   -------------------------------------------------------------------------- */

.gradient-intro {
	background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-blue) 100%);
	color: var(--color-white);
	padding: 70px 0 109px;
}

.gradient-intro__title {
	max-width: 693px;
	font-size: 64px;
	font-weight: 400;
	letter-spacing: -1.28px;
	line-height: 1.2;
}

/* Label at x=80 and intro at x=517: 405 + 32 gutter + 842 fills the column. */
.gradient-intro__lead {
	display: grid;
	grid-template-columns: 405px 842px;
	gap: 32px;
	align-items: start;
	margin-top: 107px;
}

.gradient-intro__body {
	font-size: 24px;
	line-height: 1.3;
}

.gradient-intro__body p + p {
	margin-top: 1.3em;
}

/* 80% white over the gradient, so the band still reads through the card. */
.gradient-intro__card {
	margin-top: 70px;
	min-height: 307px;
	padding: 67px 24px 60px;
	border: 1px solid var(--color-white);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.8);
	color: var(--color-navy);
	text-align: center;
}

.gradient-intro__card-label {
	font-weight: 600;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: -0.48px;
	text-transform: uppercase;
}

.gradient-intro__card-body {
	max-width: 1062px;
	margin: 32px auto 0;
	font-size: 24px;
	line-height: 1.4;
}

.gradient-intro__card-body p + p {
	margin-top: 1.4em;
}

.gradient-intro__statement {
	margin-top: 102px;
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 400;
	line-height: 56px;
	text-align: center;
}

/* -- Statement panels (Figma 201:283 / 201:288 / 201:295) --------------------
   The Promise, The Fight and The Victory. Each is a 1280px band sitting on the
   content column rather than a full-bleed section, so the page's white margins
   stay visible down both sides.

   Every panel stops at the bottom edge of its photo: 27 + 31 + 29 + 338 =
   425px. Copy longer than 338px grows the band and the photo stretches with
   it, because a fixed-height text box clipped The Fight on laptop screens.
   -------------------------------------------------------------------------- */

.statement-panel {
	padding-top: 44px;
}

.statement-panel__band {
	background: var(--color-navy);
	padding-top: 27px;
}

.statement-panel--red .statement-panel__band {
	background: var(--color-red);
}

/* The label is inset from the band edge; the photo below it sits flush to it. */
.statement-panel__label {
	padding-left: 39px;
	color: var(--color-white);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.statement-panel__grid {
	display: grid;
	grid-template-columns: 623px 558px;
	gap: 37px;
	align-items: stretch;
	margin-top: 29px;
	min-height: 338px;
}

.statement-panel--no-media .statement-panel__grid {
	grid-template-columns: 1fr;
	padding: 0 39px;
}

.statement-panel__media {
	position: relative;
	min-height: 338px;
}

.statement-panel__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.statement-panel__text {
	padding-bottom: 29px;
	color: var(--color-white);
	font-size: 18px;
	line-height: 1.4;
}

/* The frame leaves a blank 24px line under the heading and between paragraphs. */
.statement-panel__heading {
	margin-bottom: 24px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
}

.statement-panel__body p + p,
.statement-panel__body p + ul,
.statement-panel__body ul + p {
	margin-top: 24px;
}

/* The global reset strips list styling; the definitions on ARC Energy
   Security are a real list, so give it its bullets back. */
.statement-panel__body ul {
	padding-left: 1.25em;
	list-style: disc;
}

.statement-panel__body li + li {
	margin-top: 12px;
}

/* Links in the copy. The global `a` rule strips colour and underline, and the
   text here is white on a navy or red band, so without this a link reads as
   plain text. Colour cannot carry it (the link and its neighbours are both
   white), so the underline does: always on, 2px, clear of descenders. There is
   deliberately no hover effect; the link looks the same whether or not the
   pointer is over it. The focus ring is the same white as the text, which is
   15.9:1 on navy and 7.0:1 on red. */
.statement-panel__body a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.statement-panel__body a:focus-visible {
	outline: 3px solid var(--color-white);
	outline-offset: 3px;
	border-radius: 2px;
}

/* -- Media split (Figma 201:278 / 201:281) -----------------------------------
   Declaration section: a 514px heading column at x=80 and a 729px rounded
   video at x=631, tops aligned, 87px below the panel above.
   -------------------------------------------------------------------------- */

.media-split {
	padding: 87px 0 120px;
}

/* If the block is the last element on the page, sit flush against the footer
   and match its background so they blend into one band. */
.media-split:last-child {
	padding-bottom: 0;
	background: var(--color-overlay-90);
	color: var(--color-white);
}

.media-split__inner {
	display: grid;
	grid-template-columns: 514px 729px;
	gap: 37px;
	align-items: start;
}

/* Center the video if the text column is empty or removed. */
.media-split__inner:not(:has(.media-split__text)) {
	grid-template-columns: minmax(0, 729px);
	justify-content: center;
}

/* Two videos side by side, the first on the left. Desktop only: from 900px down
   the base rule already stacks the grid to one column, and this must not
   outrank it. Players keep a true 16:9 so neither clip is cropped. */
@media (min-width: 901px) {
	.media-split__inner.media-split__inner--pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		gap: 32px;
	}

	.media-split__inner.media-split__inner--pair:has(.media-split__embed) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.media-split__inner--pair .media-split__text {
		grid-column: 1 / -1;
	}

	.media-split__inner--pair .media-split__player {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/* A YouTube video joins the players. Three across on desktop (see the pair
   rule above); on narrower screens the grid is one column and it stacks last. */
.media-split__embed {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.media-split__embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.media-split__title {
	font-size: 64px;
	font-weight: 400;
	letter-spacing: -1.28px;
	line-height: 1.2;
}

.media-split__body {
	/* The frame leaves 44px between the heading's last line and the lead. */
	margin-top: 44px;
	max-width: 404px;
	font-size: 24px;
	line-height: 1.3;
}

.media-split__media {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.media-split__image,
.media-split__player {
	display: block;
	width: 100%;
	height: 410px;
	object-fit: cover;
}

.media-split__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	cursor: pointer;
}

/* Triangle nudged past centre so it reads as centred inside the circle. */
.media-split__play::before {
	content: "";
	display: block;
	margin-left: 28px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 0 13px 20px;
	border-color: transparent transparent transparent var(--color-navy);
}

.media-split__media.is-playing .media-split__play {
	display: none;
}

/* -- Legal pages (Privacy Policy) --------------------------------------------
   Plain long-form copy, not a section block, so it brings its own reading
   column: the global reset zeroes paragraph margins and list styles, which left
   the policy edge to edge with no spacing and no heading hierarchy.
   -------------------------------------------------------------------------- */

.legal-page {
	max-width: calc(840px + 2 * var(--container-pad));
	margin: 0 auto;
	padding: 72px var(--container-pad) 120px;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.legal-page h1 {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.96px;
	margin-bottom: 40px;
}

.legal-page h2 {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	margin: 48px 0 16px;
}

.legal-page h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	margin: 32px 0 12px;
}

/* A heading straight after another heading keeps only the gap it needs. */
.legal-page h2 + h3 {
	margin-top: 16px;
}

.legal-page p {
	margin: 0 0 16px;
}

.legal-page ul {
	margin: 0 0 16px;
	padding-left: 24px;
	list-style: disc;
}

.legal-page li {
	margin-bottom: 12px;
}

.legal-page a {
	color: var(--color-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.legal-page a:hover,
.legal-page a:focus-visible {
	color: var(--color-navy);
}

@media (max-width: 900px) {
	.legal-page {
		padding: 48px var(--container-pad) 72px;
	}

	.legal-page h1 {
		font-size: 36px;
		margin-bottom: 28px;
	}

	.legal-page h2 {
		font-size: 24px;
		margin-top: 36px;
	}
}

/* -- Dev review 8/13: clickable columns, tile hover, jump target ------------
   Three items from the internal review that cut across existing blocks rather
   than belonging to a new one.
   -------------------------------------------------------------------------- */

/* Item 4 — the whole highlight column is a click target. The overlay sits
   below the column's own children, which `.split-column > *` lifts to z-index
   1, so the button keeps both its hover and its click while the rest of the
   box routes to the same destination. */
.split-column > .split-column__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* The column is a link surface now, so say so on the whole box. */
.split-column {
	cursor: pointer;
}

/* Item 9 — a subtle lift on the news category tiles. They are already anchors,
   so this needs no extra markup. */
@media (hover: hover) and (pointer: fine) {
	.news-tile {
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.news-tile:hover,
	.news-tile:focus-visible {
		transform: translateY(-4px);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
	}
}

@media (prefers-reduced-motion: reduce) {
	.news-tile {
		transition: none;
	}

	.news-tile:hover,
	.news-tile:focus-visible {
		transform: none;
	}
}

/* Item 7 — the sticky header would otherwise cover the signup heading when the
   footer's Subscribe button jumps to it. */
.newsletter {
	scroll-margin-top: var(--header-height, 152px);
}

/* -- Agenda (Figma 170:552 desktop / 201:479 mobile) -------------------------
   Numbered agenda points on navy. The markup is a plain stacked list — that is
   what mobile shows, what a reduced-motion visitor keeps, and what remains if
   the script never runs. main.js adds `is-pinned` above 900px, which turns the
   section into a sticky viewport that swaps one point per screen of scroll and
   runs a thumb down the bar in the left margin.

   This is scroll-linked pinning, not wheel hijacking. It reads section by
   section the way the frame intends while leaving native scroll physics,
   keyboard paging and trackpad momentum alone.

   Nothing between .agenda and .agenda__viewport may take overflow: hidden —
   that would give the sticky viewport a scrollport and kill the pinning.
   -------------------------------------------------------------------------- */

.agenda {
	background: var(--color-navy);
	color: var(--color-white);
	/* The frame opens the heading 78px under the 152px header. */
	padding-top: 78px;
}

/* Breathing room under the nav once the heading has scrolled away and the
   points are pinned on their own. */
.agenda__viewport {
	padding: 48px 0 40px;
}

.agenda__title {
	/* Margins, not padding: box-sizing is border-box, so padding would come out
	   of the 824px the frame gives the text rather than sitting beside it.
	   The frame leaves 102px between the heading and the first point. */
	margin: 0 var(--container-pad) 102px;
	max-width: 824px;
	font-size: 64px;
	font-weight: 400;
	letter-spacing: -1.28px;
	line-height: 1.2;
}

.agenda__stage {
	position: relative;
	display: grid;
	/* Copy column out to 845 (80 margin + 27 bar gutter + 82 number + 656
	   copy), then the photo, which runs to the right edge of the screen. */
	grid-template-columns: minmax(0, 845px) 1fr;
	align-items: start;
}

.agenda__bar {
	display: none;
	position: absolute;
	left: var(--container-pad);
	top: 0;
	width: 1px;
	height: 644px;
	background: rgba(255, 255, 255, 0.35);
}

.agenda__thumb {
	display: block;
	width: 1px;
	height: 26px;
	background: var(--color-cyan);
}

.agenda__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.agenda__item {
	display: grid;
	/* Bar gutter, number, copy. The photo is not in here — it lives beside the
	   list so it survives every swap. */
	grid-template-columns: 27px 82px 656px;
	padding-left: var(--container-pad);
	align-items: start;
}

.agenda__number {
	grid-column: 2;
	color: var(--color-cyan);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.agenda__text {
	grid-column: 3;
}

.agenda__heading {
	color: var(--color-cyan);
	font-size: 48px;
	font-weight: 400;
	line-height: 1.167;
}

.agenda__label {
	margin-top: 40px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
}

.agenda__why {
	margin-top: 31px;
	font-size: 24px;
	line-height: 1.3;
}

/* Pinned, the stage is capped to one screenful (100svh minus the header), and
   the longest point's copy is what has to fit inside it. Sizing the pinned
   copy off viewport HEIGHT instead of a fixed 24px means a short laptop
   window shrinks the text before it ever needs the scrollbar below, rather
   than the two competing for the same space. Unpinned (mobile, the stacked
   fallback) keeps the fixed sizes above — there's no capped stage to fit.

   vh only, no vw: the pinned stage's width doesn't change what fits — the
   text column is a fixed 656px past the 901px pin breakpoint, and the room
   sizeCopy() (main.js) measures for .agenda__text is the viewport's height,
   not its width. An earlier version of this mixed in vw and it made the
   type size drift with window WIDTH at a constant height (e.g. 48px at
   1440x900 but 44.6px at 1000x900, no vertical constraint changed) while
   doing nothing to help the case that actually overflows: a wide-but-short
   window, where vw held the heading and label near their max size instead
   of giving that room back to the copy below them. */
.agenda.is-pinned .agenda__heading {
	/* Same curve as the fixed-size original, scaled ~8% smaller top and
	   bottom (48px -> 44px, 32px -> 30px) so the point heading reads a
	   little less oversized against its own body copy. */
	font-size: clamp(30px, 5.5vh - 5.5px, 44px);
}

.agenda.is-pinned .agenda__label {
	font-size: clamp(22px, 4vh - 4px, 32px);
}

.agenda.is-pinned .agenda__why {
	font-size: clamp(16px, 2vh + 2px, 24px);
}

.agenda__why p + p {
	margin-top: 31px;
}

.agenda__cta {
	margin-top: 42px;
	width: 370px;
}

/* Second stage column, pinned to the right edge of the screen. */
.agenda__media {
	justify-self: end;
}

.agenda__image {
	width: 486px;
	height: 494px;
	object-fit: cover;
}

/* Stacked, the points need air between them instead of swapping in place. */
.agenda:not(.is-pinned) .agenda__item + .agenda__item {
	margin-top: 96px;
}

/* -- Agenda, pinned (desktop, added by script) ------------------------------ */

/* One step per screenful of the space below the nav. --header-height is
   measured and published by main.js, because the header's height changes with
   the breakpoint and is auto between 641 and 900. */
.agenda.is-pinned .agenda__track {
	height: calc(var(--agenda-steps, 1) * (100vh - var(--header-height, 0px)));
	height: calc(var(--agenda-steps, 1) * (100svh - var(--header-height, 0px)));
}

.agenda.is-pinned .agenda__viewport {
	position: sticky;
	/* Sit under the sticky header instead of behind it. */
	top: var(--header-height, 0px);
	height: calc(100vh - var(--header-height, 0px));
	height: calc(100svh - var(--header-height, 0px));
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.agenda.is-pinned .agenda__bar {
	display: block;
}

.agenda.is-pinned .agenda__thumb {
	transform: translateY(calc(var(--agenda-progress, 0) * (644px - 26px)));
	transition: transform 0.4s ease;
}

/* Every point sits in the same grid cell, so the stage is as tall as the
   longest one and nothing shifts as they swap. */
.agenda.is-pinned .agenda__items {
	display: grid;
}

.agenda.is-pinned .agenda__item {
	grid-area: 1 / 1;
	opacity: 0;
	/* visibility, not display, so the hidden points also leave the tab order. */
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.agenda.is-pinned .agenda__item[data-agenda-active] {
	opacity: 1;
	visibility: visible;
}

/* The frame draws the pinned region 1077px tall, which only exists on a very
   tall display — a 1440x900 window leaves 748px under the nav. So the pinned
   viewport keeps its cap and the copy scrolls inside it, rather than clipping
   the end of a long point.

   The stage is capped instead of the whole viewport so the section heading and
   the point number stay put while only the prose moves. */
.agenda.is-pinned .agenda__stage {
	min-height: 0;
}

.agenda.is-pinned .agenda__text {
	overflow-y: auto;
	/* Chains to the page once the copy reaches either end. Containing it made
	   the pointer a trap: over the text, the wheel stopped moving the page. */
	overscroll-behavior: auto;
	padding-right: 16px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.15);
}

.agenda.is-pinned .agenda__text::-webkit-scrollbar {
	width: 6px;
}

.agenda.is-pinned .agenda__text::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 3px;
}

.agenda.is-pinned .agenda__text::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.5);
	border-radius: 3px;
}

/* Recover what the frame's generous spacing costs on a laptop, so the copy has
   as much of the 748px as possible before it has to scroll. */
@media (max-height: 1100px) {
	.agenda {
		padding-top: 48px;
	}

	.agenda__title {
		margin-bottom: 56px;
	}

	.agenda__viewport {
		padding: 32px 0 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.agenda__thumb,
	.agenda.is-pinned .agenda__item {
		transition: none;
	}
}

/* -- State map (Figma 182:1292) ----------------------------------------------
   The frame's map is a placeholder, so the outlines come from the previous
   theme's own assets/new-maps/us_map.svg instead — the same drawing this site
   has always used, at its true 913 x 564 aspect rather than the placeholder's
   squarer one. Width follows the frame's 1044px; height follows the geometry.

   The heading and intro above come from a Page Intro block, which already
   matches the frame's two-column opener, so this block's own heading and intro
   fields normally stay empty.
   -------------------------------------------------------------------------- */

.state-map {
	/* The intro block closes at 447 and the map opens at 493. */
	padding: 46px 0 120px;
}

.state-map__heading {
	max-width: 624px;
	font-size: 64px;
	font-weight: 400;
	letter-spacing: -1.28px;
	line-height: 1.2;
}

.state-map__intro {
	margin-top: 24px;
	max-width: 624px;
	font-size: 24px;
	line-height: 1.3;
}

.state-map__figure {
	max-width: 1044px;
	margin: 0 auto;
}

.state-map__svg {
	display: block;
	width: 100%;
	height: auto;
	/* Several small-state labels are placed outside their own outline. */
	overflow: visible;
}

/* Geometry is in the SVG's own units, so stroke and type are too: at 1044px
   wide the 1010-unit viewBox is very close to 1:1.

   The fill is a navy tint with white borders rather than the frame's hairline
   outlines on white — at this size hairlines read as noise, and letting the
   land carry a little weight is what makes the shape of the country legible. */
.state-map__shape {
	fill: rgba(6, 30, 84, 0.07);
	stroke: var(--color-white);
	stroke-width: 1.1;
	transition: fill 0.18s ease;
}

.state-map__label {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	fill: var(--color-navy);
	text-anchor: middle;
	transition: fill 0.18s ease;
	/* The click belongs to the state; the label is already inside its link. */
	pointer-events: none;
	/* Keeps the abbreviation readable where it sits over a border. */
	paint-order: stroke;
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 2.4;
	stroke-linejoin: round;
}

/* The callout column reads as a list, so it starts on the column rather than
   centring on a point. Unlike the labels sitting on their own state, these are
   the only thing over that patch of the canvas, so they take the pointer. */
.state-map__label--callout {
	text-anchor: start;
	stroke: none;
	pointer-events: auto;
	cursor: pointer;
}

/* Invisible target behind each callout name, so the hit area is a comfortable
   box rather than two glyphs. */
.state-map__hit {
	fill: transparent;
	cursor: pointer;
}

.state-map__leader {
	stroke: rgba(6, 30, 84, 0.45);
	stroke-width: 0.7;
	fill: none;
	pointer-events: none;
}

.state-map__state {
	cursor: pointer;
}

/* Inert until a state has somewhere to go. */
.state-map__state--inert {
	cursor: default;
}

.state-map__state--inert .state-map__shape {
	fill: rgba(6, 30, 84, 0.04);
}

@media (hover: hover) and (pointer: fine) {
	.state-map__state:not(.state-map__state--inert):hover .state-map__shape {
		fill: var(--color-blue);
	}

	.state-map__state:not(.state-map__state--inert):hover .state-map__label {
		fill: var(--color-white);
		stroke: none;
	}

	.state-map__state:not(.state-map__state--inert):hover .state-map__label--callout {
		fill: var(--color-blue);
		text-decoration: underline;
	}

	.state-map__state:not(.state-map__state--inert):hover .state-map__leader {
		stroke: var(--color-blue);
		stroke-width: 1.2;
	}
}

/* Focus has to read on a shape with no box of its own. */
.state-map__state:focus {
	outline: none;
}

.state-map__state:focus-visible .state-map__shape {
	fill: var(--color-blue);
	stroke: var(--color-navy);
	stroke-width: 1.8;
}

.state-map__state:focus-visible .state-map__label {
	fill: var(--color-white);
	stroke: none;
}

.state-map__state:focus-visible .state-map__label--callout {
	fill: var(--color-blue);
}

@media (prefers-reduced-motion: reduce) {
	.state-map__shape,
	.state-map__label,
	.state-map__leader {
		transition: none;
	}
}

/* -- Mobile state picker (Figma 241:283) ------------------------------------
   What the map becomes below 640px. The frame draws a 370 x 353 rounded box,
   a hairline black border and a 0/1/2 shadow, holding a centred column of
   uppercase 20px names — grey, with the one at the centre of the box in black.

   The frame's rows are 28px (20px at 1.4 line-height), which is a 28px tap
   target for the one control the page has. That is the same problem the map
   had, so each row carries 8px of padding instead: the type and its rhythm are
   the frame's, the row is 44px. Six and a half states show rather than ten,
   which for a list you scroll costs nothing.

   It reads as a wheel: the highlight belongs to whichever name the centre of
   the box is over, and the list is padded top and bottom so every one of the
   51 can get there. What it is not is a wheel's interaction — each row is a
   link straight to its state, so one tap gets you there rather than a spin
   and then a confirm.
   -------------------------------------------------------------------------- */

/* The box is the wrapper and the scrolling is the list inside it, because the
   list is masked at its edges and a mask takes the border with it. Splitting
   them keeps the frame's 1px border crisp while the names fade under it. */
.state-picker {
	/* The map is the control until the map stops working. */
	display: none;
	max-width: 370px;
	height: var(--picker-height);
	margin: 0 auto;

	/* The box and a row, named because the list's lead-in below is derived
	   from both and a wrong number there silently costs you Alabama.
	   --picker-row is 20px of type at 1.4, plus the 8px a side that makes the
	   row a 44px target. */
	--picker-height: 353px;
	--picker-row: 44px;
	border: 1px solid var(--color-black);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	background: var(--color-white);
	overflow: hidden;
}

.state-picker__list {
	height: 100%;
	margin: 0;
	/* Half a box less half a row, above the first name and below the last, so
	   the centre line can reach every one of the 51. Without it the list stops
	   with Alabama still three rows above the centre and Wyoming three below,
	   and six states can never be the highlighted one. This is the lead-in a
	   physical wheel gets from being round. */
	padding: calc((var(--picker-height) - 2px - var(--picker-row)) / 2) 32px;
	list-style: none;
	overflow-y: auto;
	/* A name reaching the top or bottom of the box would otherwise be cut in
	   half by the border. Fading the frame's 32px inset turns that into an
	   edge names pass under, and doubles as the sign that there is more list
	   above and below. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
	/* Settles on a row rather than mid-name, without fighting a flick. */
	scroll-snap-type: y proximity;
	-webkit-overflow-scrolling: touch;
	/* The list scrolls, the page does not scroll with it. */
	overscroll-behavior: contain;
}

.state-picker__item {
	scroll-snap-align: center;
}

.state-picker__link {
	display: block;
	padding: 8px 0;
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-placeholder);
	transition: color 0.18s ease;
}

/* The frame's black row: whichever name is sitting at the centre of the box.
   main.js sets this as the list scrolls. */
.state-picker__link--active,
.state-picker__link--current {
	color: var(--color-black);
}

/* The state you are already on, and any state with nowhere to go. */
.state-picker__link--inert {
	cursor: default;
}

.state-picker__link:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
	border-radius: var(--radius-md);
}

@media (hover: hover) and (pointer: fine) {
	a.state-picker__link:hover {
		color: var(--color-blue);
	}
}

@media (prefers-reduced-motion: reduce) {
	.state-picker__link {
		transition: none;
	}
}

/* -- Article / prose (Figma 242:1024) ---------------------------------------
   The frame centres the article in an 842px column, 299px of margin either
   side of 1440. That measure is the point: the fallback template was running
   body copy the full 1280px content column, roughly 160 characters a line
   against the 45-85 that reads comfortably.

   The theme reset zeroes margins on h1-h3 and p, which is right for the block
   templates where every section sets its own spacing, and wrong for prose. So
   the vertical rhythm is put back inside .prose and nowhere else.
   -------------------------------------------------------------------------- */

.article {
	/* Frame opens the title at 287, which is 135 below the 152px header. */
	padding: 135px 0 120px;
}

.article__inner {
	max-width: 842px;
	margin: 0 auto;
}

.article__title {
	font-size: 64px;
	font-weight: 400;
	letter-spacing: -1.28px;
	line-height: 1.2;
}

.article__meta {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.4;
	/* --color-placeholder (#848282) is 3.82:1 on white, short of 4.5:1 for 16px
	   text. #595959 is 7:1. */
	color: #595959;
}

.article__content {
	margin-top: 48px;
}

/* Legacy content types (single-curated.php): the video or image above the copy,
   and the link out to the source below it. */
.article__embed,
.article__figure {
	margin: 0 0 32px;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.article__embed {
	aspect-ratio: 16 / 9;
}

.article__embed iframe,
.article__embed video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.article__figure img {
	display: block;
	width: 100%;
	height: auto;
}

.article__source {
	margin-top: 32px;
}

.article__source .btn {
	white-space: normal;
	text-align: center;
}


/* -- Prose ------------------------------------------------------------------
   Everything an editor can produce from the WordPress editor, scoped so it
   cannot leak into the block templates.
   -------------------------------------------------------------------------- */

.prose {
	font-size: 20px;
	line-height: 1.4;
	color: var(--color-text);
}

.prose > * + * {
	margin-top: 24px;
}

/* Section heading inside an article, e.g. "Common Sense". */
.prose h2 {
	margin-top: 48px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
}

/* Sub-heading, e.g. "LESS RED TAPE" — the frame sets these uppercase. */
.prose h3 {
	margin-top: 40px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.48px;
	text-transform: uppercase;
}

.prose h4,
.prose h5,
.prose h6 {
	margin-top: 32px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

/* A heading opening the flow should not push itself away from the title. */
.prose > :first-child {
	margin-top: 0;
}

.prose strong {
	font-weight: 700;
}

.prose a {
	color: var(--color-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.prose ul,
.prose ol {
	padding-left: 28px;
}

.prose li + li {
	margin-top: 12px;
}

.prose blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 4px 0 4px 28px;
	border-left: 4px solid var(--color-blue);
	font-size: 24px;
	line-height: 1.3;
}

.prose img,
.prose iframe,
.prose video {
	max-width: 100%;
	height: auto;
}

.prose figure {
	margin-left: 0;
	margin-right: 0;
}

.prose figcaption {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-placeholder);
}

.prose hr {
	border: 0;
	border-top: 1px solid var(--color-border);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
}

.prose th,
.prose td {
	padding: 12px;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

/* Older posts lean on <br> for spacing. Now that paragraphs carry their own
   margin, a trailing break just adds a stray blank line. */
.prose p > br:last-child {
	display: none;
}

/* -- Responsive -------------------------------------------------------------- */

@media (max-width: 1439px) {
	:root {
		--container-pad: 40px;
		--split-gutter: 120px;
	}

	.newsletter__inner {
		grid-template-columns: 1fr minmax(0, 624px);
	}

	.footer__brand,
	.footer__contact {
		width: auto;
		max-width: 296px;
	}

	.site-footer__inner {
		grid-template-columns: 1.4fr 0.8fr 1.1fr 1fr;
	}
}

@media (max-width: 1100px) {
	/* Item padding makes the pill ~42px wider than the old flat track, which is
	   enough to overflow the header just above the 900px collapse. Tighten the
	   pill rather than let the row break. Set on the header so the scrolled
	   state below tightens from these rather than from the desktop numbers. */
	.site-header {
		--nav-gap: 4px;
		--nav-item-pad: 14px;
		--logo-w: 110px;
		--logo-h: 100px;
	}

	.site-header--scrolled {
		--nav-gap: 3px;
		--nav-item-pad: 12px;
		--logo-w: 80px;
		--logo-h: 72px;
	}

	.social-icons--header {
		margin-left: 32px;
	}

	.newsletter {
		height: auto;
		padding: 80px 0;
	}

	.newsletter__inner {
		grid-template-columns: 1fr;
		row-gap: 40px;
		padding-top: 0;
	}

	/* The explicit placements would otherwise conjure an implicit second
	   column and keep the two-column layout alive here. */
	.newsletter__head,
	.newsletter__list,
	.newsletter__form {
		grid-column: auto;
	}

	.newsletter__list {
		max-width: none;
	}
}

@media (max-width: 900px) {
	:root {
		--container-pad: 24px;
	}

	/* Logo + nav pill + icons stop fitting on one row here, so the nav
	   collapses to the toggle and the icons move inside the panel. */
	.site-header {
		height: auto;
		padding: var(--header-pad, 20px) 0;
		transition: background-color 0.3s ease, padding 0.25s ease;
	}

	/* Height is auto from here down, so the padding is what gives the depth
	   back; the logo still steps down with it. */
	.site-header--scrolled {
		--header-pad: 10px;
	}

	.site-header__inner {
		position: relative;
	}

	.social-icons--header {
		display: none;
	}

	.main-nav__toggle {
		display: flex;
	}

	.main-nav__panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 5;
		margin-top: 12px;
		padding: 24px 32px;
		/* Fully opaque, unlike the desktop pill — the panel overlays hero
		   copy and text bleed-through makes the menu hard to read. */
		background: var(--color-black);
		border-radius: var(--radius-md);
		flex-direction: column;
		gap: 24px;
	}

	.main-nav__panel.is-open {
		display: flex;
	}

	.main-nav__list {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 18px;
		width: auto;
		height: auto;
		padding: 0;
		background: none;
		border-radius: 0;
	}

	/* Inside the drop-down panel the items are plain rows again, not pills. */
	.main-nav__list a {
		display: block;
		height: auto;
		padding: 0;
		border-radius: 0;
	}

	.social-icons--mobile {
		display: flex;
	}

	.hero {
		height: auto;
		min-height: 420px;
	}

	.hero__content {
		padding-bottom: 70px;
	}

	.hero__title {
		font-size: 44px;
		letter-spacing: -0.88px;
	}

	.intro-banner__inner,
	.split-columns__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.split-columns::before {
		display: none;
	}

	/* The fixed 406px CTA would otherwise force its grid track wider than
	   the viewport once the columns stack. */
	.split-column .btn {
		margin-top: 0;
		width: 100%;
	}

	/* Nowrap account name/handle would likewise widen the carousel track. */
	.x-feed__card-header > div {
		gap: 12px;
		min-width: 0;
	}

	.x-feed__name,
	.x-feed__handle {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.news-grid,
	.news-tiles,
	.x-feed__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.news-card {
		height: auto;
		min-height: 312px;
	}

	.x-feed__arrow {
		top: 50%;
	}

	.site-footer__inner {
		grid-template-columns: 1fr 1fr;
	}

	.footer__brand { grid-area: auto; }
	.footer__contact { grid-area: auto; }
	.footer__col--links-1 { grid-area: auto; }
	.footer__col--links-2 { grid-area: auto; }
	.footer__col--newsletter { grid-area: auto; }
	.footer__divider { grid-area: auto; grid-column: 1 / -1; }
	.footer__bottom-row { grid-area: auto; grid-column: 1 / -1; }

	.split-column__title,
	.newsletter__title {
		font-size: 36px;
		line-height: 44px;
	}

	.split-column__lead {
		font-size: 24px;
	}
}

/* Mobile — matches Figma "iPhone 17 - 2" frame, node 167:13 */
@media (max-width: 640px) {
	.site-header {
		--header-h: 137px;
		--logo-w: 110px;
		--logo-h: 100px;
	}

	/* Frame 201:341 gives the mobile header 137px, a 204 x 89 logo sitting on
	   the left margin and the toggle out at the right — not the centred logo
	   the wider breakpoint uses. */
	.site-header {
		height: var(--header-h);
		padding: 0;
	}

	/* 201:341 gives the resting mobile header 137px and a 204 x 89 logo. The
	   scrolled pair keeps that box ratio so the crop does not shift. */
	.site-header--scrolled {
		--header-h: 96px;
		--logo-w: 80px;
		--logo-h: 72px;
	}

	.site-header__inner {
		position: relative;
		justify-content: space-between;
	}

	.site-header__logo {
		position: static;
		left: auto;
		transform: none;
		width: var(--logo-w);
		height: var(--logo-h);
	}

	.btn {
		width: 100%;
	}

	.hero__title {
		font-size: 48px;
		letter-spacing: -0.96px;
	}

	/* Mobile-only solid CTA fills — the desktop frame uses black outline buttons
	   for these two, but the mobile frame swaps in solid brand colors. */
	.btn--energy-model {
		background: var(--color-red-mobile);
		border-color: var(--color-red-mobile);
		color: var(--color-white);
	}

	/* White on this cyan is 1.8:1. Black is 12:1 and keeps the brand fill. */
	.btn--why-matters {
		background: var(--color-cyan-mobile);
		border-color: var(--color-cyan-mobile);
		color: var(--color-black);
	}

	.news-grid,
	.news-tiles,
	.x-feed__grid {
		grid-template-columns: 1fr;
	}

	.view-all-row {
		display: block;
	}

	.view-all-row::before {
		display: none;
	}

	.view-all-row .btn {
		width: 100%;
	}

	/* The mobile frame splits first and last name into two separate boxes 26px
	   apart (y=5281 and y=5359), where the 1440 frame shares one box. */
	.form-row--name {
		grid-template-columns: 1fr;
		height: auto;
		row-gap: 26px;
		border: 0;
		background: none;
	}

	.form-row--name .form-group {
		height: 52px;
		border: 1px solid var(--color-black);
		background: var(--color-white);
	}

	.form-row--name .form-group + .form-group {
		border-left: 1px solid var(--color-black);
	}

	.form-row input[type='text'],
	.form-row input[type='email'] {
		height: 52px;
	}

	.form-row--submit {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.form-row--submit .btn {
		width: 100%;
	}

	.newsletter__receive {
		font-size: 20px;
	}

	.newsletter__list-name {
		font-size: 20px;
	}

	.newsletter__list-cadence {
		font-size: 18px;
	}

	.newsletter__captcha {
		width: 100%;
		max-width: 328px;
		height: auto;
	}

	.x-feed__arrow {
		display: none;
	}

	/* Footer: single stacked column — contact info near the top, no
	   newsletter column, social icons above the divider.

	   Frame 201:341's footer (240:129), measured from the footer's own top:
	   logo 21, contact 202, the eight links on a uniform 49px step from 291,
	   social 730, divider 794, copyright 815, privacy 846, and the dark region
	   closing at 932 where the yellow bar takes over.

	   Each step is set on the child rather than with one row-gap on the column,
	   because no two of those steps are the same. It also fixes the seam: the
	   links are two markup columns but one visual list, so links-2 has to open
	   on exactly the step used inside a column or the eighth link drifts. */
	.site-footer {
		padding-top: 21px;
		/* Privacy's line box ends at 876, the dark region closes at 932. */
		padding-bottom: 56px;
	}

	.site-footer__inner {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		row-gap: 0;
	}

	.footer__brand {
		order: 1;
		/* Frame centres the 296px logo: (402 - 296) / 2. */
		align-self: center;
	}

	.footer__brand {
		justify-content: center;
	}

	.footer__contact {
		order: 2;
		/* Logo ends at 150. */
		margin-top: 52px;
	}

	/* A link's line box is 29.5px at 24px/normal, so a 49px step needs 19.5px
	   of gap. The desktop columns also carry a 44px top pad to clear a heading
	   they do not have here, which is what was pushing the seam out. */
	.footer__col {
		padding-top: 0;
		gap: 19.5px;
	}

	.footer__col--links-1 {
		order: 3;
		/* Contact ends at 262, first link opens at 291. */
		margin-top: 29px;
	}

	.footer__col--links-2 {
		order: 4;
		/* Same 19.5px as inside a column, so the eighth link stays on the step. */
		margin-top: 19.5px;
	}

	.footer__col--newsletter {
		display: none;
	}

	.footer__bottom-row {
		display: contents;
	}

	.footer__social {
		order: 5;
		margin-left: 0;
		/* The eighth link's line box ends at 663.5. */
		margin-top: 66.5px;
	}

	.footer__divider {
		order: 6;
		margin-top: 23.5px;
	}

	.footer__bottom {
		order: 7;
		flex-direction: column;
		align-items: flex-start;
		gap: 11px;
		margin-top: 20px;
	}

	.footer__copyright {
		width: auto;
	}

	/* Menu anchors carry no .footer__link class, so the mobile size has to name
	   them too — without it the 49px step the frame sets collapses to 44. */
	.footer__col a:not(.btn),
	.footer__link {
		font-size: 24px;
	}

	.social-icons--footer .social-icons__link {
		width: 40px;
		height: 40px;
		font-size: 40px;
	}

	.disclaimer-bar p {
		font-size: 20px;
		letter-spacing: -0.4px;
	}

	/* --header-height covers this now; kept as the no-script fallback. */
	.newsletter {
		scroll-margin-top: var(--header-height, 137px);
	}

	.section-label {
		width: 100%;
	}
}

/* -- Responsive: ARC page sections -------------------------------------------
   Kept together here rather than folded into the breakpoint blocks above,
   so the three ARC sections can be read as one piece.
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
	/* The frame's fixed column widths only add up at 1440px. Below that they
	   go fractional on the same ratios: 624:624, 623:542, 514:729. */
	.page-intro__inner {
		grid-template-columns: 1fr 1fr;
	}

	/* The intro row holds the frame's 405:842 ratio below 1440. */
	.gradient-intro__lead {
		grid-template-columns: 1fr 2.08fr;
	}

	.statement-panel__grid {
		grid-template-columns: 1.12fr 1fr;
	}

	.statement-panel__image {
		width: 100%;
	}

	.media-split__inner {
		grid-template-columns: 1fr 1.42fr;
	}
}

@media (max-width: 900px) {
	.page-intro {
		padding: 48px 0 40px;
	}

	.page-intro__inner,
	.media-split__inner {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	.page-intro__body {
		padding-top: 0;
	}

	.gradient-intro {
		padding: 48px 0 64px;
	}

	.gradient-intro__title {
		max-width: none;
		font-size: 55px;
		letter-spacing: -1.1px;
	}

	/* Label above the intro rather than beside it. */
	.gradient-intro__lead {
		grid-template-columns: 1fr;
		row-gap: 32px;
		margin-top: 56px;
	}

	.gradient-intro__card {
		margin-top: 56px;
		padding: 48px 24px;
	}

	.gradient-intro__statement {
		margin-top: 64px;
	}

	/* Stacked, a scrollport inside a scrolling page is a trap, so the panel
	   goes back to growing with its copy. */
	.statement-panel__grid {
		grid-template-columns: 1fr;
		row-gap: 28px;
		padding: 0 24px;
		height: auto;
	}

	.statement-panel__media {
		height: auto;
		min-height: 0;
	}

	.statement-panel__image {
		position: static;
		height: auto;
		aspect-ratio: 623 / 338;
	}

	.statement-panel__text {
		height: auto;
		overflow-y: visible;
		padding-right: 0;
		padding-bottom: 24px;
	}

	.statement-panel__label {
		padding-left: 24px;
	}

	.media-split {
		padding: 56px 0 72px;
	}

	.media-split__body {
		max-width: none;
	}

	.media-split__image,
	.media-split__player {
		height: auto;
		aspect-ratio: 729 / 410;
	}
}

/* Mobile is its own frame — Figma 201:341, "ARC ES Mobile", 402 x 6774. It
   keeps every desktop type size (64px display, 32px panel heading, 24px body)
   and simply narrows the column to 370px, so nothing here shrinks type. The
   figures below are that frame's own offsets. */
@media (max-width: 640px) {
	.article {
		padding: 48px 0 64px;
	}

	.article__title {
		font-size: 40px;
		letter-spacing: -0.8px;
	}

	.article__content {
		margin-top: 32px;
	}

	.prose {
		font-size: 18px;
	}

	.prose h2 {
		margin-top: 36px;
		font-size: 26px;
	}

	.prose h3 {
		margin-top: 28px;
		font-size: 20px;
	}

	.prose blockquote {
		padding-left: 20px;
		font-size: 20px;
	}

	.state-map {
		padding: 24px 0 56px;
	}

	/* SVG font-size is in user units, so a 913-unit viewBox drawn 370px wide
	   scales type by 0.405. Even 24 units would only render at ~10px, and at
	   that size the abbreviations collide across the whole northeast. A US map
	   this narrow cannot carry 51 legible labels, and the outlines it leaves
	   behind are not tappable targets either. So the map comes off entirely
	   here and the picker from frame 241:283 takes its place.

	   display:none on the figure takes the SVG's 51 links out of the
	   accessibility tree with it, which is what keeps the picker below from
	   being a second pass through the same 51 states. */
	.state-map__figure {
		display: none;
	}

	.state-picker {
		display: block;
	}

	/* Frame 201:479 stacks the points in one column. The photo stops at the
	   content edge here — only the 1440 frame bleeds it off the right. */
	.agenda__item {
		grid-template-columns: 1fr;
		row-gap: 24px;
		padding-right: var(--container-pad);
	}

	/* Frame 201:479 order: heading, then the photo, then the points — the photo
	   opens at 711 and the first heading at 1140. */
	.agenda__stage {
		grid-template-columns: 1fr;
		row-gap: 53px;
	}

	.agenda__media {
		order: -1;
	}

	.agenda__number,
	.agenda__text {
		grid-column: 1;
	}

	.agenda__media {
		justify-self: stretch;
		padding: 0 var(--container-pad);
	}

	.agenda__image {
		width: 100%;
		height: auto;
		aspect-ratio: 486 / 494;
	}

	.agenda__cta {
		width: 100%;
	}

	/* Header closes at 137, the heading opens at 230 and its last line ends at
	   615, with the photo opening at 711. */
	.agenda {
		padding-top: 93px;
	}

	.agenda__title {
		margin-bottom: 96px;
	}

	.agenda__viewport {
		padding: 0 0 56px;
	}

	.newsletter__title {
		font-size: 47px;
		line-height: 1.1;
	}

	:root {
		/* 402 - 370 content, split either side. */
		--container-pad: 16px;
	}

	/* Frame: header ends at 137, the h1 starts at 173, its last line ends at
	   404, the lead starts at 420, and The Promise opens at 674. */
	.page-intro {
		/* 68px to the first panel, 26 of which is the panel's own top pad. */
		padding: 36px 0 42px;
	}

	.page-intro__inner {
		row-gap: 16px;
	}

	/* 64px on a 512px or wider screen, scaling down below that so a long word
	   fits a 320px screen (1.4.10); see the reflow note under .page-intro. */
	.page-intro__title,
	.media-split__title {
		font-size: clamp(32px, 12.5vw, 64px);
		letter-spacing: -0.02em;
	}

	.page-intro__body,
	.media-split__body {
		font-size: 24px;
	}

	/* Mobile frame: band from 137 to 2102, h1 at 222, label at 483, card at
	   1028 and the statement at 1638. The card grows with its copy here rather
	   than holding a fixed height. */
	.gradient-intro {
		padding: 85px 0 54px;
	}

	.gradient-intro__lead {
		margin-top: 63px;
	}

	.gradient-intro__card {
		margin-top: 48px;
		min-height: 0;
		padding: 65px 22px 60px;
	}

	.gradient-intro__card-body {
		max-width: 325px;
	}

	.gradient-intro__statement {
		margin-top: 55px;
	}

	/* The bands run edge to edge on mobile (frame x=0, w=401) rather than
	   sitting on the content column as they do at 1440. */
	.statement-panel > .container {
		padding: 0;
	}

	.statement-panel {
		padding-top: 26px;
	}

	.statement-panel__band {
		padding-top: 38px;
	}

	.statement-panel__label {
		padding-left: 16px;
		font-size: 24px;
	}

	/* Label ends at 70, photo opens at 95, photo ends at 296, copy opens at
	   339, and the band closes 56 under the copy. */
	.statement-panel__grid {
		margin-top: 25px;
		row-gap: 43px;
		padding: 0 16px;
	}

	.statement-panel__image {
		height: auto;
		aspect-ratio: 370 / 201;
	}

	.statement-panel__text {
		padding-bottom: 56px;
	}



	/* The mobile frame rules off the Declaration section before the newsletter
	   (Line 36 at y=4710); the 1440 frame runs them together. */
	.media-split {
		padding: 36px 0 59px;
		border-bottom: 1px solid var(--color-border);
	}

	.media-split:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.media-split__body {
		margin-top: 24px;
	}
}

/* -- Post cards (Figma 237:63 News & Research, plus all four archive frames)
   ---------------------------------------------------------------------------
   One card, five treatments. Geometry is taken off the archive frames, which
   all use the same three-column grid: 405px columns on a 32px gutter inside the
   1280px content column, rows on a 90px gutter.

   Every variant pins its CTA to the bottom of the card rather than to the
   frame's absolute y, so a one-line title and a three-line title still line
   their buttons up across a row. That is what the frames are drawing; they just
   draw it with coordinates because Figma has no grid stretch.
   -------------------------------------------------------------------------- */

.news-grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
	gap: 90px 33px;
}

.news-grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
	gap: 90px 33px;
}

.news-grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
	gap: 90px 33px;
}

/* The archive frames open the grid 104px under the heading and carry no
   section label, so the block's own 54px top pad does not apply. */
.news-grid--archive {
	padding: 104px 0 0;
}

.post-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.post-card__media {
	display: block;
	width: 100%;
	/* 404 x 195 in frame 191:2390, 406 x 228 in 388:241. */
	aspect-ratio: 404 / 195;
	overflow: hidden;
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__title {
	margin: 34px 0 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* No image above it, so the title opens the card. */
.post-card--research .post-card__title {
	margin-top: 0;
}

.post-card__date {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: -0.32px;
}

.post-card__excerpt {
	/* Guarantees a gap above the CTA once margin-top:auto has pushed it down. */
	margin: 22px 0 28px;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.36px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.post-card--afternoon-tea .post-card__excerpt {
	-webkit-line-clamp: 5;
}

/* Frame 388:235 gives TEA Takes two lines and no title above it. */
.post-card--tea-takes .post-card__excerpt {
	margin-top: 27px;
	-webkit-line-clamp: 2;
}

.post-card__cta {
	margin-top: auto;
}

/* -- Afternoon TEA panel (Figma 388:237) ------------------------------------
   A grey panel carrying the headline in the display face with the ATEA mark
   beside it. Every Afternoon TEA post in the database points its legacy ACF
   `image` field at that same mark, so the card gets it for free.
   -------------------------------------------------------------------------- */

.post-card__panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	aspect-ratio: 405 / 186;
	padding: 0 28px;
	background: #f5f5f5;
}

.post-card__panel-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 36px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.post-card__mark {
	flex: none;
	width: 99px;
	height: auto;
}

/* Two-up — the News & Research frame's 624px panels — is where the frame's
   48/56 display size actually fits. */
.news-grid--cols-2 .post-card__panel-title {
	font-size: 48px;
	line-height: 56px;
	-webkit-line-clamp: 4;
}

.news-grid--cols-2 .post-card__mark {
	width: 128px;
}

/* Two-up also widens the image, so it takes the frame's 624 x 301. */
.news-grid--cols-2 .post-card__media {
	aspect-ratio: 624 / 301;
}

/* -- Deck cards (Figma 237:53 and siblings) ---------------------------------
   Six navy cards, 404 wide on the three-column grid, each a centred 32px title
   over a teal CTA. The frame gives row one 202px and row two 189px; that is a
   text-height difference, so the grid stretches instead.
   -------------------------------------------------------------------------- */

.deck-cards {
	padding: 50px 0 130px;
}

.deck-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 41px 33px;
}

.deck-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
	min-height: 189px;
	padding: 33px 30px 31px;
	background: var(--color-navy);
	border-radius: var(--radius-md);
}

.deck-card__title {
	margin: 0;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-white);
}

.deck-card__cta {
	margin-top: auto;
	/* 344 of the card's 404, inset 30 either side. */
	width: 100%;
	max-width: 344px;
}

/* -- Fuel for Thought mosaic (Figma 237:256 onwards) ------------------------
   Three columns; the first tile spans two of them and two rows, which is
   exactly 2 x 405 + 33 wide and 2 x 289 + 24 tall.
   -------------------------------------------------------------------------- */

.cartoon-mosaic {
	padding: 0 0 90px;
}

.cartoon-mosaic__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 33px;
	padding: 54px 0 0;
}

.cartoon-tile {
	display: block;
	overflow: hidden;
	aspect-ratio: 405 / 289;
}

.cartoon-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cartoon-tile--feature {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: 843 / 602;
}

/* -- Archive pages ----------------------------------------------------------
   The frames put the 64px heading on the page's own top margin and open the
   grid 104px below it, with no section label in between.
   -------------------------------------------------------------------------- */

.page-intro--single {
	padding-bottom: 0;
}

.page-intro--single .page-intro__inner {
	grid-template-columns: 1fr;
}

.archive-page__empty {
	padding: 104px 0 120px;
	font-size: 24px;
	line-height: 1.3;
}

/* -- Pagination -------------------------------------------------------------
   None of the four archive frames draws one — each stops at nine cards — so
   this is the theme's own, built from the outline button the "view all" row
   already uses, squared off for the numbers.
   -------------------------------------------------------------------------- */

.pagination {
	padding: 72px 0 120px;
}

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	height: 52px;
	padding: 0 16px;
	border: 1px solid var(--color-black);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	font-size: 18px;
	line-height: 1.4;
	text-transform: uppercase;
}

.pagination__item .page-numbers.current {
	background: var(--color-black);
	color: var(--color-white);
}

/* The ellipsis is not a control, so it does not get a control's box. */
.pagination__item .page-numbers.dots {
	border-color: transparent;
	box-shadow: none;
	min-width: 0;
	padding: 0 4px;
}

@media (hover: hover) and (pointer: fine) {
	.pagination__item a.page-numbers {
		transition: color 0.2s ease, background-color 0.2s ease;
	}

	.pagination__item a.page-numbers:hover {
		background: var(--color-black);
		color: var(--color-white);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pagination__item a.page-numbers {
		transition: none;
	}
}

/* -- News & Research page ---------------------------------------------------
   Stacked card sections sit 70px apart in frame 237:63, where the News Grid
   block's standalone padding would put them 193px apart.
   -------------------------------------------------------------------------- */

.news-research .news-grid-section {
	padding: 0 0 68px;
}

.news-research .news-grid {
	padding: 56px 0 46px;
}

/* -- Responsive: cards, archives, mosaic ------------------------------------
   The archive frames are desktop-only, so the stacking below is inferred. It
   follows the breakpoints the rest of this stylesheet already uses.

   1100  three and four column grids drop to two, which is where a 405px card
         stops holding a 24px title on two lines. The mosaic's double tile
         stops spanning, because a 2 x 2 span in a two-column grid is a
         full-width tile with a hole punched next to it.
    640  everything goes to one column, matching the mobile frame (237:327),
         which stacks every card full width at 370 of 402.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.news-grid--cols-3,
	.news-grid--cols-4,
	.deck-cards__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cartoon-mosaic__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cartoon-tile--feature {
		grid-column: auto;
		grid-row: auto;
		aspect-ratio: 405 / 289;
	}

	.deck-cards {
		padding: 40px 0 80px;
	}

	.news-grid--archive {
		padding-top: 72px;
	}
}

@media (max-width: 640px) {
	.news-grid--cols-2,
	.news-grid--cols-3,
	.news-grid--cols-4,
	.deck-cards__grid,
	.cartoon-mosaic__grid {
		grid-template-columns: 1fr;
	}

	.news-grid--cols-2,
	.news-grid--cols-3,
	.news-grid--cols-4 {
		/* The mobile frame runs 30px between one card's CTA and the next
		   card's image; the 90px desktop row gutter is a three-column
		   measure. */
		row-gap: 46px;
	}

	/* Frame 241:504 draws the CTA the full 370px width of the card. */
	.post-card__cta,
	.deck-card__cta {
		width: 100%;
		max-width: none;
	}

	/* 241:499 is 370 x 178 — squarer than the desktop 404 x 195. */
	.post-card__media,
	.news-grid--cols-2 .post-card__media {
		aspect-ratio: 370 / 178;
	}

	/* 242:556: the mark drops below the headline and centres, rather than
	   sitting beside it, and the panel grows with its copy. */
	.post-card__panel,
	.news-grid--cols-2 .post-card__panel {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 16px;
		aspect-ratio: auto;
		min-height: 301px;
		padding: 32px 22px;
	}

	.post-card__mark,
	.news-grid--cols-2 .post-card__mark {
		width: 98px;
		align-self: center;
	}

	.news-grid--cols-2 .post-card__panel-title {
		font-size: 36px;
		line-height: 42px;
	}

	.news-grid--archive {
		padding-top: 48px;
	}

	.pagination {
		padding: 48px 0 80px;
	}

	.pagination__item .page-numbers {
		min-width: 44px;
		height: 44px;
		padding: 0 12px;
		font-size: 16px;
	}

	.archive-page__empty {
		padding: 48px 0 80px;
	}

	.cartoon-mosaic__grid {
		padding-top: 32px;
	}

	.news-research .news-grid {
		padding: 40px 0 32px;
	}
}

/* -- Card refinements -------------------------------------------------------
   Measured against the rendered page rather than the frame's coordinates.
   -------------------------------------------------------------------------- */

/* Frame 388:241 is 406 x 228 — sixteen-nine, not the 404 x 195 the standard
   card uses. */
.post-card--tea-takes .post-card__media,
.news-grid--cols-2 .post-card--tea-takes .post-card__media {
	aspect-ratio: 406 / 228;
}

.post-card__media--empty {
	background: var(--color-card-bg) url("../images/tea-logo.png") center / 45% auto no-repeat;
}

/* The ATEA mark in the frame is a crop of a wide banner logo — Figma renders
   the source at 286% and windows 128 x 140 out of the middle of it. Cover with
   a centred origin reproduces that; without it the card shows the banner's
   transparent margins and the mark reads tiny. */
.post-card__mark {
	width: 99px;
	height: 108px;
	object-fit: cover;
	object-position: 52% 49%;
}

.news-grid--cols-2 .post-card__mark {
	width: 128px;
	height: 140px;
}

/* Frame 237:63 opens the deck row 113px under the page heading. */
.deck-cards {
	padding-top: 113px;
}

/* The frames set the heading on a 624px measure, so a long archive name wraps
   where the design wraps it instead of running the full 1280px column. */
.page-intro--single .page-intro__title {
	max-width: 624px;
}

@media (max-width: 640px) {
	.post-card__mark,
	.news-grid--cols-2 .post-card__mark {
		width: 98px;
		height: 107px;
	}

	.deck-cards {
		padding-top: 56px;
	}
}

/* Two-up Afternoon TEA panels keep the frame's 48px display face only while
   the column is near its 624px measure. At 768 the same column is ~340px, where
   48px type outruns the panel's own height and the mark gets squeezed off the
   end, so both step down with the column.

   Floored at 641 rather than left open-ended: this block sits after the 640
   rules in the file, so an unbounded max-width would win on equal specificity
   and hand the phone the tablet's 186px panel and 32px face instead of the
   mobile frame's 301px and 36px (242:556). */
@media (min-width: 641px) and (max-width: 1100px) {
	.news-grid--cols-2 .post-card__panel-title {
		font-size: 32px;
		line-height: 38px;
	}

	.news-grid--cols-2 .post-card__mark {
		width: 99px;
		height: 108px;
	}

	.post-card__panel,
	.news-grid--cols-2 .post-card__panel {
		aspect-ratio: auto;
		min-height: 186px;
		padding: 24px;
	}
}

/* -- Cartoon lightbox --------------------------------------------------------
   Not in any frame. The mosaic's tiles crop to 405 x 289 and a cartoon is
   unreadable at that size, so opening one shows the artwork rather than the
   cartoon's own page, which holds nothing the picture does not.
   -------------------------------------------------------------------------- */

.cartoon-tile {
	cursor: zoom-in;
}

.lightbox {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 24px;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.lightbox::backdrop {
	background: rgba(0, 0, 0, 0.85);
}

/* The dialog fills the viewport so that a click anywhere off the picture lands
   on it and closes; the frame is what the picture is actually sized against. */
.lightbox__frame {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.lightbox__image {
	max-width: min(1200px, 100%);
	/* Room for the caption and the close button's own row. */
	max-height: calc(100% - 72px);
	width: auto;
	height: auto;
	object-fit: contain;
	background: var(--color-white);
}

.lightbox__caption {
	margin: 0;
	max-width: min(1200px, 100%);
	color: var(--color-white);
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
}

.lightbox__caption[hidden] {
	display: none;
}

.lightbox__close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 2px solid var(--color-white);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: var(--color-white);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.lightbox__close:hover {
		background: var(--color-white);
		color: var(--color-black);
	}
}

.lightbox__close:focus-visible {
	outline: 3px solid var(--color-orange);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.lightbox__close {
		transition: none;
	}
}

@media (max-width: 640px) {
	.lightbox {
		padding: 16px;
	}

	.lightbox__close {
		width: 40px;
		height: 40px;
		font-size: 24px;
	}
}

/* -- State page (Figma 198:63 desktop / 202:572 mobile) ----------------------
   The map, then the state's own navy panel, then the Green New Deal section.

   Two column measures are in play and the frame means both: the panel's copy
   and its stat card run 1062px (x=189 to 1251, centred), while the two fact
   cards run the full 1280px content column (x=79 to 1360). The narrower
   measure is what keeps a 24px intro readable across a 1440 viewport.
   -------------------------------------------------------------------------- */

.state-page .state-map--compact {
	padding: 0 0 40px;
}

.state-panel {
	background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-blue) 100%);
	color: var(--color-white);
	padding: 62px 0 96px;
}

/* The 1062px measure, as an inset on the page container rather than a second
   container, so the two share one set of gutters at every width. */
.state-panel__eyebrow,
.state-panel__intro,
.state-panel__label,
.state-carousel--stats {
	max-width: 1062px;
	margin-inline: auto;
}

.state-panel__eyebrow {
	/* auto, not 0: the shorthand would otherwise undo the margin-inline above
	   and leave this flush left while the intro and stat card sit inset. */
	margin: 0 auto 32px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.state-panel__intro {
	font-size: 24px;
	line-height: 1.3;
}

.state-panel__intro p {
	margin: 0;
}

.state-panel__intro p + p {
	margin-top: 1.3em;
}

.state-panel__label {
	margin: 86px auto 24px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* 198:163 centres the State Energy Facts label where 198:141 sets Economic
   Stats to the left. Both are h2 siblings, so the second one is the one to
   centre. Following the frame rather than levelling them up. */
.state-panel__label:nth-of-type(2) {
	text-align: center;
}

/* -- Carousels --------------------------------------------------------------
   A scroll-snapping list before it is a carousel: without JavaScript the track
   still scrolls and every card is still reachable by keyboard, and main.js
   only adds the dots and arrows on top.
   -------------------------------------------------------------------------- */

.state-carousel {
	position: relative;
}

/* Wraps the track so the stats arrows can be positioned over the card without
   being placed relative to the dots below it, and without living inside the
   scroller, where they would slide away with the cards. */
.state-carousel__viewport {
	position: relative;
}

.state-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.state-carousel__track:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 4px;
}

.state-carousel__track::-webkit-scrollbar {
	display: none;
}

.state-carousel__item {
	scroll-snap-align: start;
	min-width: 0;
}

/* Two fact cards to a screen (198:145 and 198:142 are 625 on a 31px gutter). */
.state-carousel--facts .state-carousel__track {
	grid-auto-columns: calc((100% - 32px) / 2);
}

/* 198:144 — a translucent white card, one to a screen. */
.state-stat {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: 253px;
	padding: 32px 48px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.75);
	color: var(--color-navy);
}

/* 198:156 centres the figure in a 440px column at the card's left, and 198:155
   holds the sentence to 512px so it wraps rather than running the full card. */
.state-stat__value {
	flex: 0 0 auto;
	min-width: 380px;
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

/* max-width rather than a 512px flex-basis: the card turns into a column on
   mobile, where a basis is read down the block axis and pins every stat card
   to 512px tall with the copy stranded at the top. */
.state-stat__label {
	flex: 0 1 auto;
	max-width: 512px;
	margin: 0;
	font-size: 24px;
	line-height: 1.3;
}

.state-stat__source {
	margin: 8px 0 0;
	font-size: 14px;
	opacity: 0.75;
}

/* 198:145 — bordered translucent panels on the band itself. */
.state-fact {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 408px;
	padding: 40px;
	border: 1px solid var(--color-white);
	/* The design's grey 36% wash lifted white text on the blue gradient to
	   3.0 to 3.5:1. A navy tint holds it above 4.5:1 down the whole gradient. */
	background: rgba(6, 30, 84, 0.34);
}

.state-fact__title {
	margin: 0;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.3;
}

.state-fact__body {
	font-size: 18px;
	line-height: 1.5;
}

.state-fact__body p {
	margin: 0;
}

.state-fact__body p + p {
	margin-top: 1em;
}

/* -- Carousel controls ------------------------------------------------------
   Added by main.js, so nothing here shows until the track can actually be
   driven. Dots for the stats (198:149), arrows for the facts (198:157/160).
   -------------------------------------------------------------------------- */

.state-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 36px;
}

.state-carousel__dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: background 0.2s ease;
}

.state-carousel__dot[aria-current="true"] {
	background: var(--color-white);
}

.state-carousel__arrows {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 40px;
}

/* -- Economic Stats arrows --------------------------------------------------
   Not in the frame, which gives Economic Stats dots only. They lie over the
   card and appear on hover so the resting state stays the frame's, and they
   come back on focus-within because a control that only exists under a pointer
   does not exist for a keyboard.
   -------------------------------------------------------------------------- */

.state-carousel__arrows--overlay {
	position: absolute;
	inset: 0;
	/* The buttons have a fixed height, so without this they sit at the top of
	   the card rather than level with the figure. */
	align-items: center;
	justify-content: space-between;
	gap: 0;
	margin: 0;
	padding: 0 20px;
	opacity: 0;
	/* The card underneath stays selectable; only the buttons take the pointer. */
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.state-carousel__arrows--overlay .state-carousel__arrow {
	width: 48px;
	height: 48px;
	border-color: transparent;
	/* The stat card is a light panel, so these read dark rather than white. */
	background: rgba(6, 30, 84, 0.7);
	color: var(--color-white);
	pointer-events: auto;
}

.state-carousel:hover .state-carousel__arrows--overlay,
.state-carousel:focus-within .state-carousel__arrows--overlay {
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.state-carousel__arrows--overlay .state-carousel__arrow:not([disabled]):hover {
		background: var(--color-navy);
		color: var(--color-white);
	}
}

/* A disabled arrow that is only visible on hover has nothing to say, so the
   pair simply stops showing the end it cannot go to. */
.state-carousel__arrows--overlay .state-carousel__arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.state-carousel__arrows--overlay {
		transition: none;
	}
}

/* Touch has no hover, so the arrows would never appear. The dots are the
   control there, and a swipe is the more natural one anyway. */
@media (hover: none) {
	.state-carousel__arrows--overlay {
		display: none;
	}
}

.state-carousel__arrow {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 2px solid var(--color-white);
	border-radius: 50%;
	background: transparent;
	color: var(--color-white);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.state-carousel__arrow svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.state-carousel__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

@media (hover: hover) and (pointer: fine) {
	.state-carousel__arrow:not([disabled]):hover {
		background: var(--color-white);
		color: var(--color-navy);
	}

	.state-carousel__dot:not([aria-current="true"]):hover {
		background: rgba(255, 255, 255, 0.7);
	}
}

.state-carousel__dot:focus-visible,
.state-carousel__arrow:focus-visible {
	outline: 3px solid var(--color-orange);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.state-carousel__track {
		scroll-behavior: auto;
	}

	.state-carousel__dot,
	.state-carousel__arrow {
		transition: none;
	}
}

/* -- Green New Deal ---------------------------------------------------------
   198:166 onwards. Numbered points hang off a rule down the left, and the
   numbers are drawn by the theme so editing the list cannot leave them wrong.
   -------------------------------------------------------------------------- */

.state-gnd {
	padding: 93px 0 120px;
}

.state-gnd__heading {
	margin: 0 0 56px;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.96px;
}

/* The intro lines up with the point bodies rather than being centred: the
   frame puts both at x=188, one number column in from the rule. */
.state-gnd__intro {
	padding-left: 108px;
	font-size: 18px;
	line-height: 1.6;
}

.state-gnd__intro h3 {
	margin: 0 0 20px;
	color: var(--color-blue);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.state-gnd__intro p {
	margin: 0 0 1em;
}

.state-gnd__intro small {
	font-size: 14px;
	opacity: 0.7;
}

.state-gnd__points {
	margin-top: 64px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.state-gnd__point {
	position: relative;
	display: grid;
	grid-template-columns: 108px 1fr;
	align-items: start;
	padding-left: 1px;
	border-left: 1px solid var(--color-border);
}

.state-gnd__point + .state-gnd__point {
	margin-top: 56px;
}

.state-gnd__number {
	padding-left: 27px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.state-gnd__body {
	font-size: 18px;
	line-height: 1.6;
}

.state-gnd__body p {
	margin: 0 0 1em;
}

.state-gnd__body p:last-child {
	margin-bottom: 0;
}

/* 241:343 sets the state's own figure in blue and the bold lead-in that opens
   each point in black. Colouring every <strong> blue inverted both. */
.state-gnd__highlight {
	color: var(--color-blue);
	font-weight: 700;
}

.state-gnd__point-title {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.state-gnd__body small {
	font-size: 14px;
	opacity: 0.7;
}

.state-page__content {
	padding: 0 0 40px;
}

/* The state you are looking at is marked rather than linked. */
.state-map__state--current .state-map__shape {
	fill: var(--color-blue);
}

/* Navy on this blue is 3.5:1; white is above 4.5:1. */
.state-map__state--current .state-map__label {
	fill: var(--color-white);
}

@media (max-width: 1100px) {
	.state-panel {
		padding: 48px 0 72px;
	}

	.state-stat {
		gap: 28px;
		padding: 28px 32px;
	}

	.state-stat__value {
		min-width: 240px;
	}

	.state-fact {
		min-height: 0;
		padding: 32px;
	}

	.state-fact__title {
		font-size: 28px;
	}

	.state-gnd {
		padding: 64px 0 88px;
	}

	.state-gnd__heading {
		font-size: 40px;
	}
}

/* 202:572 stacks everything to the 370px column, one card to a screen. */
@media (max-width: 640px) {
	.state-panel {
		padding: 40px 0 56px;
	}

	.state-panel__intro {
		font-size: 18px;
	}

	.state-panel__label {
		margin: 56px 0 20px;
	}

	.state-carousel--facts .state-carousel__track {
		grid-auto-columns: 100%;
	}

	/* 241:503 stacks the figure above its sentence rather than beside it. */
	.state-stat {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		min-height: 0;
		padding: 28px 24px;
	}

	.state-stat__value {
		min-width: 0;
		font-size: 40px;
		text-align: left;
	}

	.state-stat__label {
		font-size: 18px;
	}

	.state-fact {
		padding: 24px;
	}

	.state-fact__title {
		font-size: 24px;
	}

	.state-fact__body {
		font-size: 16px;
	}

	.state-carousel__arrow {
		width: 48px;
		height: 48px;
	}

	.state-gnd {
		padding: 48px 0 64px;
	}

	.state-gnd__heading {
		margin-bottom: 32px;
		font-size: 32px;
	}

	.state-gnd__point {
		grid-template-columns: 56px 1fr;
	}

	.state-gnd__intro {
		padding-left: 56px;
	}

	.state-gnd__number {
		padding-left: 16px;
		font-size: 16px;
	}

	.state-gnd__body,
	.state-gnd__intro {
		font-size: 16px;
	}
}

/* -- Newsletter signup: Gravity Forms ----------------------------------------
   The signup band is a real Gravity Form (see tools/create-newsletter-form.php).
   Gravity brings its own markup and its own "gravity-theme" stylesheet, so this
   section maps that markup back onto the Figma band rather than letting the
   plugin's defaults show through.

   The trick that makes the layout work is `display: contents` on .gform-body
   and .gform_fields: it dissolves Gravity's two wrapper divs so the fields and
   the footer button become direct children of one grid on the <form>. That is
   what puts the CAPTCHA and Submit on the same row, which they are in the
   design (desktop frame) but not in Gravity's own markup.
   ---------------------------------------------------------------------------- */

.newsletter .gform_wrapper {
	margin: 0;
}

.newsletter .gform_wrapper form {
	display: grid;
	grid-template-columns: 47.5% 1fr;
	row-gap: 23px;
	column-gap: 0;
}

.newsletter .gform_wrapper.gravity-theme .gform-body,
.newsletter .gform_wrapper.gravity-theme .gform_fields {
	display: contents;
}

/* Gravity's honeypot rides along in the field list. */
.newsletter .gform_validation_container {
	display: none !important;
}

.newsletter .gform_wrapper.gravity-theme .gfield.ea-nl-first {
	grid-column: 1;
}

.newsletter .gform_wrapper.gravity-theme .gfield.ea-nl-last {
	grid-column: 2;
}

.newsletter .gform_wrapper.gravity-theme .gfield.ea-nl-email,
.newsletter .gform_confirmation_message,
.newsletter .gform_submission_error,
.newsletter .gform-loader {
	grid-column: 1 / -1;
}

/* Every input sits in its own bordered white box, 52px tall. */
.newsletter .ea-nl-field .ginput_container {
	height: 52px;
	border: 1px solid var(--color-black);
	background: var(--color-white);
}

/* First and last name read as one box split by a hairline, so the left field
   gives up its right border and the right field's left border is the divider. */
.newsletter .ea-nl-first .ginput_container {
	border-right: 0;
}

.newsletter .ea-nl-field input[type='text'],
.newsletter .ea-nl-field input[type='email'] {
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	padding: 0 27px;
	font-size: 20px;
	line-height: 1.4;
	font-family: inherit;
	border-radius: 0;
	box-shadow: none;
}

.newsletter .ea-nl-field input::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

.newsletter .gform_wrapper.gravity-theme .gfield.ea-nl-captcha {
	grid-column: 1;
	align-self: center;
	margin-top: 23px;
}

.newsletter .gform_wrapper.gravity-theme .gform_footer {
	grid-column: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin: 23px 0 0;
	padding: 0;
}

.newsletter .gform_footer button {
	width: 219px;
	height: 67px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--color-blue-soft);
	color: var(--color-white);
	font-size: 20px;
	font-weight: 700;
	font-family: inherit;
	text-transform: uppercase;
	box-shadow: none;
	cursor: pointer;
}

/* Gravity's default (Required) red is 2.99:1 on the near-black band. The word
   "(Required)" carries the meaning, so white costs nothing. */
.newsletter .gform_wrapper.gravity-theme .gfield_required,
.newsletter .gform_wrapper.gravity-theme .gfield_required .gfield_required_text {
	color: var(--color-white);
}

/* Validation and confirmation copy sits on the gradient, so it needs its own
   contrast rather than Gravity's default light-background red. */
.newsletter .gfield_validation_message,
.newsletter .gform_submission_error {
	margin-top: 8px;
	padding: 8px 12px;
	border: 0;
	background: var(--color-white);
	color: #b3261e;
	font-size: 16px;
}

.newsletter .gform_confirmation_message {
	padding: 20px 0;
	color: var(--color-white);
	font-size: 24px;
	font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
	.newsletter .gform_footer button:hover {
		filter: brightness(0.9);
	}
}

/* The mobile frame stacks every field in its own box and runs the CAPTCHA and
   the button full width, one under the other. */
@media (max-width: 640px) {
	.newsletter .gform_wrapper form {
		grid-template-columns: 1fr;
		row-gap: 26px;
	}

	.newsletter .gform_wrapper.gravity-theme .gfield.ea-nl-first,
	.newsletter .gform_wrapper.gravity-theme .gfield.ea-nl-last,
	.newsletter .gform_wrapper.gravity-theme .gfield.ea-nl-captcha,
	.newsletter .gform_wrapper.gravity-theme .gform_footer {
		grid-column: 1;
	}

	.newsletter .ea-nl-first .ginput_container {
		border-right: 1px solid var(--color-black);
	}

	.newsletter .gform_wrapper.gravity-theme .gfield.ea-nl-captcha {
		margin-top: 0;
	}

	.newsletter .gform_wrapper.gravity-theme .gform_footer {
		margin-top: 0;
	}

	.newsletter .gform_footer button {
		width: 100%;
	}

	/* reCAPTCHA renders a fixed 304px widget; scale it down rather than let it
	   overflow the column on the narrowest phones. */
	.newsletter .ea-nl-captcha .ginput_recaptcha {
		transform: scale(0.9);
		transform-origin: left top;
	}
}

/* -- Search and 404 ----------------------------------------------------------
   Neither has a Figma frame. Both borrow the archive layout, the newsletter
   band's input treatment and the site's existing buttons, so they read as part
   of the same site without inventing a look for pages nobody designed.
   ---------------------------------------------------------------------------- */

.search-form {
	display: flex;
	gap: 16px;
	align-items: stretch;
	max-width: 620px;
	width: 100%;
}

.search-form__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	border: 1px solid var(--color-black);
	border-radius: 0;
	background: var(--color-white);
	padding: 0 20px;
	font-family: inherit;
	font-size: 18px;
	line-height: 1.4;
}

.search-form__input::placeholder {
	color: var(--color-placeholder);
	opacity: 1;
}

/* .btn is geometry only in this theme, so the submit carries .btn--primary for
   the fill and only overrides the height to match the input beside it. */
.search-form__submit {
	flex: 0 0 auto;
	height: 52px;
	padding: 0 32px;
	border-radius: 0;
	font-family: inherit;
	cursor: pointer;
}

.search-results__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 48px;
}

.search-results__count {
	margin: 0;
	font-size: 18px;
	color: var(--color-placeholder);
}

.error-404__inner {
	padding-bottom: 96px;
}

.error-404__body {
	margin: 0 0 32px;
	max-width: 620px;
	font-size: 20px;
	line-height: 1.5;
}

.error-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 40px;
}

/* The outline buttons shout by default, so the filled one matches them rather
   than sitting in sentence case in the middle of the row. */
.error-404__links .btn {
	text-transform: uppercase;
}

@media (max-width: 640px) {
	.search-form {
		flex-direction: column;
	}

	.search-form__submit {
		width: 100%;
	}

	.search-results__bar {
		align-items: stretch;
		margin-bottom: 32px;
	}

	.error-404__links .btn {
		width: 100%;
		text-align: center;
	}
}

/* -- Declaration page (/declaration/) ----------------------------------------
   Headline numbers in the page intro, the sign-up disclosures, and the signer
   list: about 1,100 names in 41 groups, set in columns so the page is a scroll
   of a few thousand pixels rather than tens of thousands.
   -------------------------------------------------------------------------- */

.page-intro__body .stat-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 24px 16px;
	margin-top: 32px;
}

.stat-list li {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.stat-list strong {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-navy);
}

.stat-list span {
	font-size: 16px;
}

.declaration-sign,
.declaration-signers {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 72px var(--container-pad) 0;
}

.declaration-signers {
	padding-bottom: 96px;
}

.declaration-sign > h2,
.declaration-signers > h2 {
	font-size: 48px;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.declaration-sign > p {
	margin-top: 16px;
	font-size: 20px;
}

.declaration-sign .wp-block-details {
	margin-top: 16px;
	max-width: 720px;
	border: 2px solid var(--color-navy);
	border-radius: var(--radius-md);
}

.declaration-sign .wp-block-details summary {
	padding: 18px 24px;
	font-size: 22px;
	font-weight: 600;
	color: var(--color-navy);
	cursor: pointer;
}

.declaration-sign .wp-block-details[open] summary {
	border-bottom: 2px solid var(--color-navy);
}

.declaration-sign .wp-block-details > :not(summary) {
	padding: 24px;
}

.declaration-signers > h3 {
	margin-top: 48px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-navy);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
}

.declaration-signers ul {
	column-width: 280px;
	column-gap: 40px;
	margin-top: 16px;
	padding: 0;
	list-style: none;
}

.declaration-signers li {
	break-inside: avoid;
	padding: 4px 0;
	font-size: 18px;
	line-height: 1.4;
}

@media (max-width: 900px) {
	.declaration-sign,
	.declaration-signers {
		padding-top: 48px;
	}

	.declaration-sign > h2,
	.declaration-signers > h2 {
		font-size: 36px;
	}

	.stat-list strong {
		font-size: 32px;
	}
}