/*
Theme Name: SPPI 2026
Theme URI: https://southwestpolicy.com/
Author: Southwest Public Policy Institute
Description: The southwestpolicy.com theme, built on the SPPI Design System: navy, Crimson Pro and Source Sans 3, square corners, hairline rules. Requires the SPPI Core plugin.
Version: 1.7.33
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sppi-2026
Update URI: https://github.com/southwestpolicy/sppi-wordpress/tree/main/sppi-2026
*/

/* ---------- Tokens ---------- */
:root {
	--sppi-navy: var(--wp--preset--color--navy, #002856);
	--sppi-ink: var(--wp--preset--color--ink, #2C2E35);
	--sppi-gray: var(--wp--preset--color--gray, #65666B);
	--sppi-rule: var(--wp--preset--color--rule, #C9CACD);
	--sppi-quiet: var(--wp--preset--color--quiet, #F2F2F3);
	--sppi-serif: var(--wp--preset--font-family--serif);
	--sppi-sans: var(--wp--preset--font-family--sans);
	--sppi-hair: 1px solid var(--sppi-rule);
	--sppi-hair-navy: 1px solid var(--sppi-navy);
}

/* ---------- Base ---------- */
body {
	font-variant-ligatures: none; /* Design system: ligatures off everywhere. */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word; /* A word too long for its line breaks instead of widening the page. */
}
a { text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* Long URLs in notes and citations may break at any character, so they never push a phone screen wider. */
.wp-block-post-content a:not(.wp-element-button) { overflow-wrap: anywhere; }
/* The focus ring is for the keyboard: a click or a tap shows none (theme 1.7.32; theme.json's ring
   for :focus drew a navy box round the logo or a menu item after every click). */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--sppi-navy); outline-offset: 2px; }
.has-white-color :where(a, button):focus-visible, .sppi-hero :focus-visible, .sppi-paper-cover :focus-visible, .is-style-donor-hero :focus-visible { outline-color: #fff; }
img { height: auto; }
.sppi-sep { white-space: pre; }
.sppi-main { padding-bottom: 96px; }
.sppi-main > * + * { margin-block-start: 0; }
/* A page that opens with a full-width band (homepage hero, paper and page covers, donor pages) starts right under the header. */
.wp-site-blocks > .sppi-main:is(:has(> :is(.sppi-hero, .sppi-paper-cover):first-child), .sppi-donor-page) { margin-block-start: 0; }
.wp-site-blocks > .sppi-donor-page + * { margin-block-start: 0; } /* Its last section brings its own space above the footer. */
.sppi-editor-empty { font: 14px/1.4 var(--sppi-sans); color: var(--sppi-gray); border: 1px dashed var(--sppi-rule); padding: 12px; margin: 0; }

/* Labels from the design system */
.sppi-kicker {
	margin: 0;
	font: 700 12px/1.25 var(--sppi-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sppi-navy);
}
.sppi-issue-line {
	margin: 0;
	font: 600 15px/1.3 var(--sppi-serif);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sppi-meta, .sppi-meta p {
	margin: 0;
	font: 400 15px/1.45 var(--sppi-sans);
	color: var(--sppi-gray);
}
.sppi-meta a { color: inherit; }
.sppi-meta i { font-family: var(--sppi-serif); font-size: 16px; color: var(--sppi-ink); }

/*
 * Rules, one standard (design system spacing scale):
 * - a section heading has a navy rule 16px above its text and 32px below it to the first item,
 *   which has no rule of its own, so two rules never sit together;
 * - between items in a list, one gray rule with 24px above and 24px below it;
 * - a block topped by a rule (card, tile, issue) starts 16px under the rule;
 * - a band between two rules (release line, original publication, coalition facts) has 16px
 *   inside each rule.
 */

/* Section headings: caps, tracked, hairline above */
.sppi-section__title,
h2.sppi-section__title {
	margin: 0 0 8px;
	padding-top: 16px;
	border-top: var(--sppi-hair-navy);
	font: 600 20px/1.2 var(--sppi-serif);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sppi-navy);
}
.sppi-section { margin-block: 72px 0; }
.sppi-more { margin: 24px 0 0; font: 600 16px/1.3 var(--sppi-sans); }

/* Buttons */
.wp-element-button, .wp-block-button__link { transition: background-color 150ms ease, color 150ms ease; }
.wp-block-buttons:not([class*="is-layout-"]) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* rows the SPPI blocks print themselves */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	background: #fff;
	color: var(--sppi-navy);
	border: 1.5px solid var(--sppi-navy);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--sppi-navy); color: #fff; }
.wp-block-button.is-style-reverse > .wp-block-button__link { background: #fff; color: var(--sppi-navy); border-color: #fff; }
.wp-block-button.is-style-reverse > .wp-block-button__link:hover { background: transparent; color: #fff; }
/* Older buttons set with the retired "align centre" option: centred at their own width, not stretched across the column. */
body .wp-block-buttons.is-layout-flex > .wp-block-button.aligncenter { width: auto; margin-inline: auto; }

/* Giving tiles (Buttons block style): gift choices as squares, two across, terracotta corner to
   corner with teal and gold between. White text on all of them, as on the stat tiles: white on
   teal and gold (2.4:1, 2.5:1) is a brand decision, so the text never goes below 16px bold.
   Hover: white, keeping the tile's edge. */
.wp-block-buttons.is-style-giving-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: min(100%, 472px);
	margin-inline: auto;
}
/* Full size where the page's column is narrower and columns stand side by side (the donate site's "Your
   Gift" text sits in the middle half of four columns, the rest empty): the tiles reach into the empty
   columns either side, centred, rather than shrink until their words split (theme 1.7.28). Stacked on a
   phone, the column is the page's width already. */
@media (min-width: 782px) {
	.wp-block-buttons.is-style-giving-tiles { width: 472px; margin-inline: calc((100% - 472px) / 2); }
}
.wp-block-buttons.is-style-giving-tiles > .wp-block-button { width: 100%; margin: 0; }
.wp-block-buttons.is-style-giving-tiles > .wp-block-button > .wp-block-button__link {
	--tile: var(--wp--preset--color--terracotta-text);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1;
	padding: clamp(12px, 3vw, 20px);
	border: 1.5px solid var(--tile);
	background: var(--tile);
	color: #fff;
	font: 700 clamp(16px, 4.4vw, 20px)/1.2 var(--sppi-sans);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
	overflow-wrap: normal; /* Whole words only: */
	word-break: normal; /* WordPress's buttons have break-word, which split "RECURRIN-G" (theme 1.7.28). */
}
.wp-block-buttons.is-style-giving-tiles > .wp-block-button:nth-child(4n+2) > .wp-block-button__link { --tile: var(--wp--preset--color--teal); }
.wp-block-buttons.is-style-giving-tiles > .wp-block-button:nth-child(4n+3) > .wp-block-button__link { --tile: var(--wp--preset--color--gold); }
.wp-block-buttons.is-style-giving-tiles > .wp-block-button > .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--terracotta-text); }
.wp-block-buttons.is-style-giving-tiles > .wp-block-button:is(:nth-child(4n+2), :nth-child(4n+3)) > .wp-block-button__link:hover { color: var(--sppi-ink); }
.sppi-nowrap { white-space: nowrap; }

/* ---------- Header ---------- */
/* The header stays at the top of the screen as the page scrolls. On a page that opens with a photo
   header (the homepage hero; a white paper, brief, op-ed or page cover; a page whose text opens with a
   full-width Cover) it lies on the photo, transparent, with the white logo, links and icons, until the
   photo has scrolled past; then, and on every other page, it is white with the navy logo. Without
   JavaScript it lies on the photo and scrolls away with it. assets/js/header.js keeps --sppi-header-h
   (its height, which the photo header and anchor links allow for) and turns it white (theme 1.7.26). */
:root { --sppi-header-h: 89px; --sppi-header-top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) { :root { --sppi-header-top: 0px; } } /* there the admin bar scrolls away; header.js follows it with a fixed header */
html { scroll-padding-top: calc(var(--sppi-header-h) + var(--sppi-header-top) + 12px); } /* links to #anchors land just below it */
.wp-site-blocks { position: relative; }
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--sppi-header-top); z-index: 30; }
/* On the donate site, wider than a phone, the header is two rows (WooCommerce adds the account and cart),
   too tall to keep on screen over a gift or checkout form: there it scrolls away (theme 1.7.28). */
@media (min-width: 600px) { .sppi-donor .wp-site-blocks > header.wp-block-template-part { position: relative; top: auto; } }
.wp-site-blocks:has(> header.wp-block-template-part + .sppi-main > :is(.sppi-hero, .sppi-paper-cover):first-child, > header.wp-block-template-part + .sppi-main > .wp-block-post-content:first-child > .wp-block-cover.alignfull:first-child) > header.wp-block-template-part { position: absolute; top: 0; left: 0; right: 0; }
.sppi-js .wp-site-blocks:has(> header.wp-block-template-part + .sppi-main > :is(.sppi-hero, .sppi-paper-cover):first-child, > header.wp-block-template-part + .sppi-main > .wp-block-post-content:first-child > .wp-block-cover.alignfull:first-child) > header.wp-block-template-part { position: fixed; top: var(--sppi-header-top); }
.sppi-header {
	--sppi-head-bg: #fff;
	--sppi-head-rule: var(--sppi-rule);
	--sppi-head-ink: var(--sppi-ink);
	--sppi-head-icon: var(--sppi-navy);
	--sppi-head-white: 0; /* the white logo's opacity */
	border-bottom: 1px solid var(--sppi-head-rule);
	background: var(--sppi-head-bg);
	transition: background-color .25s ease-out, border-color .25s ease-out;
}
.wp-site-blocks:has(> header.wp-block-template-part + .sppi-main > :is(.sppi-hero, .sppi-paper-cover):first-child, > header.wp-block-template-part + .sppi-main > .wp-block-post-content:first-child > .wp-block-cover.alignfull:first-child) > header.wp-block-template-part:not(.is-solid, :has(.is-menu-open)) .sppi-header {
	--sppi-head-bg: transparent;
	--sppi-head-rule: transparent;
	--sppi-head-ink: #fff;
	--sppi-head-icon: #fff;
	--sppi-head-white: 1;
}
/* Scrolled, but still over the photo: a solid band in the photo header's colour, still with the white
   logo, so the photo header's title passes under the header rather than through the logo (theme
   1.7.27). Navy (terracotta on the donate site); the near-black of the Donor hero over one. */
.wp-site-blocks:has(> header.wp-block-template-part + .sppi-main > :is(.sppi-hero, .sppi-paper-cover):first-child, > header.wp-block-template-part + .sppi-main > .wp-block-post-content:first-child > .wp-block-cover.alignfull:first-child) > header.wp-block-template-part.is-scrolled:not(.is-solid, :has(.is-menu-open)) .sppi-header {
	--sppi-head-bg: var(--sppi-head-band, var(--sppi-navy));
	--sppi-head-rule: rgba(255, 255, 255, .14);
}
.wp-site-blocks:has(> header.wp-block-template-part + .sppi-main > .wp-block-post-content:first-child > .wp-block-cover.is-style-donor-hero:first-child) > header.wp-block-template-part .sppi-header { --sppi-head-band: #0b0b0d; }
.sppi-header__bar { padding-block: 16px; gap: 16px 32px; }
.sppi-brand { position: relative; display: block; line-height: 0; }
.sppi-brand picture { display: block; transition: opacity .25s ease-out; }
.sppi-brand__navy { opacity: calc(1 - var(--sppi-head-white)); }
.sppi-brand__white { position: absolute; inset: 0; opacity: var(--sppi-head-white); }
.sppi-brand img { display: block; height: 56px; width: auto; }
.sppi-header__tools { gap: 8px 20px; }
.sppi-header :focus-visible { outline-color: var(--sppi-head-icon); }
.sppi-nav .wp-block-navigation-item__content { color: var(--sppi-ink); text-decoration: none; }
.sppi-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.sppi-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon { color: var(--sppi-head-ink); transition: color .25s ease-out; }
.sppi-nav .wp-block-navigation-item__content:hover { color: var(--sppi-navy); text-decoration: underline; }
.sppi-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: var(--sppi-head-ink); }
.sppi-nav .wp-block-navigation__responsive-container-open { color: var(--sppi-head-icon); transition: color .25s ease-out; }
.sppi-nav__donate { display: none !important; } /* Donate: the header's button, or the phone menu's last item */
.sppi-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	border: var(--sppi-hair) !important;
	padding: 8px 0;
	min-width: 260px !important;
	font-size: 16px;
}
.sppi-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 16px; }
/* A drop-down that would run off the screen's left edge opens from its item's left edge instead
   (header.js marks the item; theme 1.7.32): on a tablet the menu wraps to its own row at the left. */
.sppi-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child.sppi-opens-right > .wp-block-navigation__submenu-container { left: 0; right: auto; }

/* Phone menu, as ICLE's is (theme 1.7.26): the header stays above it, white, with the logo and search,
   the menu icon turned to a close button; each section is a small gray label over its pages in large
   serif type, and Donate, gone from the phone header, comes last. WordPress copies the navigation's
   classes (items-justified-right) onto its inner list, so the alignment is reset there too. */
.sppi-nav .wp-block-navigation__responsive-container.is-menu-open,
.sppi-nav .is-menu-open .wp-block-navigation__container.wp-block-navigation {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}
.sppi-nav .wp-block-navigation__responsive-container.is-menu-open {
	top: calc(var(--sppi-header-top) + var(--sppi-header-h)); /* below the header, which stays */
	padding: 12px clamp(20px, 6vw, 40px) 56px;
	background: #fff !important;
	animation: sppi-menu-in .15s ease-out both; /* WordPress's own slides it, which would carry the close button with it */
}
@keyframes sppi-menu-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sppi-nav .wp-block-navigation__responsive-container.is-menu-open { animation: none; } }
/* On paper the header is the plain white one, at the top of the first page only. */
@media print {
	.wp-site-blocks > header.wp-block-template-part { position: static !important; }
	.sppi-header { --sppi-head-bg: #fff !important; --sppi-head-ink: var(--sppi-ink) !important; --sppi-head-icon: var(--sppi-navy) !important; --sppi-head-white: 0 !important; }
}
.sppi-nav .is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0 !important; }
.sppi-nav .is-menu-open .wp-block-navigation__responsive-container-close { /* where the menu icon was */
	position: fixed;
	top: calc(var(--sppi-header-top) + (var(--sppi-header-h) - 44px) / 2);
	right: max(var(--wp--style--root--padding-right, 20px), calc((100% - 1240px) / 2)) !important;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	color: var(--sppi-navy);
}
.sppi-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open { visibility: hidden; }
.sppi-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0; gap: 0; }
.sppi-nav .is-menu-open .wp-block-navigation__container { width: 100%; gap: 0; }
.sppi-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; padding-block: 10px; }
.sppi-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child { padding-block: 22px 6px; }
.sppi-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child { padding-top: 4px; }
.sppi-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.sppi-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 6px 0 !important; font: 400 26px/1.15 var(--sppi-serif); letter-spacing: 0; text-transform: none; color: var(--sppi-ink); }
.sppi-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { padding: 0 0 6px !important; font: 600 12px/1.3 var(--sppi-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sppi-gray); }
.sppi-nav .is-menu-open .wp-block-navigation__submenu-container { min-width: 0; padding: 0 !important; gap: 0 !important; }
.sppi-nav .is-menu-open .wp-block-navigation-item__content:hover { color: var(--sppi-navy); }
.sppi-nav .is-menu-open .sppi-nav__donate { display: block !important; padding-top: 28px; }
.sppi-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.sppi-nav__donate > .wp-block-navigation-item__content { display: inline-block; padding: 14px 28px !important; background: var(--sppi-navy); font: 700 14px/1.3 var(--sppi-sans) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #fff !important; }
.sppi-search .wp-block-search__button { background: transparent; color: var(--sppi-head-icon); border: 0; padding: 8px; min-width: 44px; min-height: 44px; transition: color .25s ease-out; }
.sppi-search .wp-block-search__input { border: var(--sppi-hair); border-radius: 0; font: 16px var(--sppi-sans); }
.sppi-donate .wp-block-button__link { padding: 11px 18px; font-size: 14px; transition: background-color .25s ease-out, color .25s ease-out; }
.wp-site-blocks:has(> header.wp-block-template-part + .sppi-main > :is(.sppi-hero, .sppi-paper-cover):first-child, > header.wp-block-template-part + .sppi-main > .wp-block-post-content:first-child > .wp-block-cover.alignfull:first-child) > header.wp-block-template-part:not(.is-solid, :has(.is-menu-open)) .sppi-donate .wp-block-button__link { background: #fff; color: var(--sppi-navy); }

/* Phones: one row, as ICLE's header is: the stacked logo, then search and the menu icon (three lines). */
@media (max-width: 599px) {
	:root { --sppi-header-h: 69px; } /* its height with the 44px logo (Small screens), so header.js finds it already right and the page isn't restyled */
	.sppi-header__bar { flex-wrap: nowrap !important; padding-block: 12px; }
	.sppi-brand img { height: 48px; }
	.sppi-header__tools { gap: 0; margin-right: -8px; }
	.sppi-header__tools > .sppi-search { order: -1; }
	.sppi-header__tools > .sppi-nav { order: 9; } /* the menu icon last, after the donate site's account and cart too */
	.sppi-header__tools > .sppi-donate { display: none; }
	.sppi-nav .wp-block-navigation__responsive-container-open { display: grid; place-items: center; width: 44px; height: 44px; }
	.sppi-nav .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }
	/* Search opens as a full-width bar under the header, not in its row. */
	.sppi-header { position: relative; }
	.sppi-search, .sppi-search .wp-block-search__inside-wrapper { position: static; }
	.sppi-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto !important;
		margin: 0;
		padding: 14px max(var(--wp--style--root--padding-left, 20px), 20px);
		border: 0;
		border-bottom: var(--sppi-hair);
		background: #fff;
		color: var(--sppi-ink);
		box-shadow: 0 6px 12px rgba(0, 40, 86, .08);
	}
}

/* ---------- Homepage hero: the featured paper's image fills the band behind the text ---------- */
.sppi-hero {
	position: relative;
	background: var(--sppi-navy);
	color: #fff;
	margin-block-start: 0 !important;
}
.sppi-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 40, 86, 0.6); } /* strong wash: paragraphs over a photo */
.sppi-hero > .sppi-hero__photo { position: absolute; inset: 0; min-height: 0; }
.sppi-hero__text {
	position: relative;
	z-index: 1;
	padding-block: 56px;
	padding-inline: max(var(--wp--style--root--padding-left, 20px), calc((100% - 1240px) / 2));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}
.sppi-hero .sppi-issue-line { color: #fff; }
.sppi-hero__title { margin: 0; max-width: 14ch; font: 600 clamp(42px, 5.2vw, 68px)/1.03 var(--sppi-serif); color: #fff; text-transform: none; letter-spacing: 0; text-wrap: balance; }
.sppi-hero__dek { margin: 0; max-width: 34em; font-size: 21px; line-height: 1.5; }
.sppi-hero__byline { margin: 0; font-style: italic; }
.sppi-hero__byline a, .sppi-hero__pdf { color: #fff; }
.sppi-hero .wp-block-buttons { align-items: center; gap: 16px 28px; margin-top: 8px; }
.sppi-hero__pdf { font: 600 16px/1.3 var(--sppi-sans); }

/* Brand photo: solid navy with the grayscale photo screened at 35% (design system). */
.sppi-photo { position: relative; overflow: hidden; background: var(--sppi-navy); min-height: 420px; }
.sppi-photo img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; filter: grayscale(1); mix-blend-mode: screen; opacity: 0.35;
}
.wp-block-cover.is-style-brand-photo { background: var(--sppi-navy); }
.wp-block-cover.is-style-brand-photo .wp-block-cover__image-background { filter: grayscale(1); mix-blend-mode: screen; opacity: 0.35; }
.wp-block-cover.is-style-brand-photo .wp-block-cover__background { opacity: 0 !important; }

/* Fixed photos (the homepage hero, white paper and brief covers, and page heroes: a Donor hero, or a
   full-width cover that opens a page): the band clips a viewport-sized photo that stays put while the
   page scrolls. Unlike a "fixed background", this works on phones too. Not in the editor. */
.sppi-hero, .sppi-paper-cover,
.wp-site-blocks :is(.wp-block-cover.is-style-donor-hero, .wp-block-post-content > .wp-block-cover.alignfull:first-child) { clip-path: inset(0); }
.sppi-hero__photo, .sppi-paper-cover > .sppi-paper-cover__photo,
.wp-site-blocks :is(.wp-block-cover.is-style-donor-hero, .wp-block-post-content > .wp-block-cover.alignfull:first-child) > img.wp-block-cover__image-background { position: fixed !important; inset: 0; width: 100%; height: 100%; }
/* One height for every photo header: the homepage hero, the white paper, brief and op-ed covers, the
   photo-header page and a page that opens with a full-width Cover (the Donor hero). 640px, 600px on
   phones, with the text centred in the band; one that opens the page fills the screen (see below).
   Headlines step down with their length (functions.php marks them is-long, is-longer, is-longest),
   so even the longest title fits; only a very long title together with a very long subtitle makes a
   band taller. */
:root { --sppi-hero-height: 640px; }
.sppi-hero, .sppi-paper-cover,
.wp-site-blocks :is(.wp-block-cover.is-style-donor-hero, .wp-block-post-content > .wp-block-cover.alignfull:first-child) { box-sizing: border-box; min-height: var(--sppi-hero-height) !important; }
.sppi-hero, .sppi-paper-cover { display: flex; flex-direction: column; justify-content: center; }
.wp-site-blocks :is(.wp-block-cover.is-style-donor-hero, .wp-block-post-content > .wp-block-cover.alignfull:first-child) { padding-block: 56px !important; }
/* Where the page opens with it, the header lies over the band's top (see Header): the band grows by
   the header's height, its text kept below the header, so the photo still shows its full height under
   it. A photo header that opens the page fills the screen: the homepage's hero since theme 1.7.26, and
   since 1.7.29 the white paper, brief, op-ed and page covers and the Donor hero (Champions). On a screen
   shorter than the band and the header, it keeps that height. */
.wp-site-blocks > header.wp-block-template-part + .sppi-main > :is(.sppi-hero, .sppi-paper-cover):first-child,
.wp-site-blocks > header.wp-block-template-part + .sppi-main > .wp-block-post-content:first-child > .wp-block-cover.alignfull:first-child {
	min-height: max(calc(var(--sppi-hero-height) + var(--sppi-header-h)), calc(100vh - var(--sppi-header-top))) !important;
	min-height: max(calc(var(--sppi-hero-height) + var(--sppi-header-h)), calc(100svh - var(--sppi-header-top))) !important;
}
.wp-site-blocks > header.wp-block-template-part + .sppi-main > .sppi-hero:first-child { padding-top: var(--sppi-header-h); min-height: calc(100vh - var(--sppi-header-top)) !important; min-height: calc(100svh - var(--sppi-header-top)) !important; }
.wp-site-blocks > header.wp-block-template-part + .sppi-main > .sppi-paper-cover:first-child { padding-top: calc(56px + var(--sppi-header-h)); }
.wp-site-blocks > header.wp-block-template-part + .sppi-main > .wp-block-post-content:first-child > .wp-block-cover.alignfull:first-child { padding-top: calc(56px + var(--sppi-header-h)) !important; }
@media (prefers-reduced-motion: reduce) {
	.sppi-hero__photo, .sppi-paper-cover > .sppi-paper-cover__photo,
	.wp-site-blocks :is(.wp-block-cover.is-style-donor-hero, .wp-block-post-content > .wp-block-cover.alignfull:first-child) > img.wp-block-cover__image-background { position: absolute !important; }
}

/* ---------- Lists of work ---------- */
.sppi-home-latest { gap: 56px 72px; margin-top: 88px !important; }
.sppi-home-latest .sppi-section { margin-top: 0; }
.sppi-list { display: flex; flex-direction: column; }
.sppi-item { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; border-bottom: var(--sppi-hair); }
.sppi-item__title { margin: 0; font: 600 26px/1.2 var(--sppi-serif); font-style: normal; letter-spacing: 0; text-transform: none; }
.sppi-item__title a { color: var(--sppi-navy); text-decoration: none; }
.sppi-item__title a:hover { text-decoration: underline; }
.sppi-item__excerpt { margin: 0; max-width: 40em; font-size: 18px; line-height: 1.55; }
.sppi-item--tile { padding: 16px 0 0; border-bottom: 0; border-top: var(--sppi-hair); }
.sppi-list > .sppi-item--tile { padding: 24px 0; border-top: 0; border-bottom: var(--sppi-hair); } /* Stacked, tiles divide like rows: a person's recent work. */
.sppi-item--tile .sppi-item__title { font-size: 23px; }
.sppi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px 48px; margin-top: 28px; }

/* Op-ed cards (design system ArticleCard, navy) */
.sppi-cards { display: flex; flex-direction: column; gap: 32px; padding-top: 24px; }
.sppi-card { border-top: var(--sppi-hair-navy); padding-top: 16px; }
.sppi-card__outlet { margin: 0 0 6px; font: italic 700 15px/1.3 var(--sppi-serif); color: var(--sppi-ink); }
.sppi-card__title { margin: 0; font: 700 16px/1.25 var(--sppi-sans); text-transform: uppercase; letter-spacing: 0.02em; font-style: normal; }
.sppi-card__title a { color: var(--sppi-ink); text-decoration: none; }
.sppi-card__title a:hover { color: var(--sppi-navy); text-decoration: underline; }
.sppi-card .sppi-meta { margin-top: 6px; font-size: 14px; }

/* Op-ed placements (SPPI Core's block): a bar per year, a square per op-ed. Op-eds in the outlets
   "As published in" shows take the page's main colour (navy; terracotta on donor pages), the rest
   mid-blue, as in the design system's charts. The script fills the squares in once, on view. */
.sppi-placements { --u: clamp(8px, 2.4vw, 17px); --g: 2px; --sppi-placements-main: var(--sppi-navy); --sppi-placements-other: var(--wp--preset--color--blue-mid, #7797B4); position: relative; }
.sppi-placements__figure { margin: 0; font-family: var(--sppi-sans); font-variant-ligatures: none; container-type: inline-size; }
/* The chart fills the width it's given (the wide homepage and op-ed archive, or a post's column), and
   its squares grow with it: about a seventh of a year's width, so a bar takes under half its column. */
@supports (width: 1cqi) {
	.sppi-placements__figure { --u: clamp(7px, calc(100cqi / var(--years, 6) * .14), 32px); --g: clamp(2px, calc(100cqi / var(--years, 6) * .016), 4px); }
}
.sppi-placements .sppi-section__title + .sppi-placements__figure { margin-top: 20px; }
.sppi-placements__title { margin: 0; font-family: var(--sppi-serif); font-weight: 600; font-size: clamp(26px, 4.4vw, 38px); line-height: 1.12; color: var(--sppi-navy); font-variant-numeric: lining-nums tabular-nums; }
.sppi-placements__dek { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--sppi-gray); }
.sppi-placements__legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 20px 0 0; padding: 12px 0 0; border-top: var(--sppi-hair); list-style: none; font-size: 14px; line-height: 1.3; }
.sppi-placements__legend li { display: flex; align-items: center; gap: 8px; margin: 0; }
.sppi-placements__key { flex: none; width: 12px; height: 12px; }
.sppi-placements__key--f, .sppi-placements__unit--f { background: var(--sppi-placements-main); }
.sppi-placements__key--o, .sppi-placements__unit--o { background: var(--sppi-placements-other); }
/* A letter to the editor: the same square, outlined in its outlet's colour (version 1.7.23). */
.sppi-placements__unit--l { background: transparent; box-shadow: inset 0 0 0 2px var(--sppi-placements-main); }
.sppi-placements__unit--l.sppi-placements__unit--o { box-shadow: inset 0 0 0 2px var(--sppi-placements-other); }
.sppi-placements__key--l { box-shadow: inset 0 0 0 2px var(--sppi-gray); }
.sppi-placements__key--b, .sppi-placements__unit--b { background: var(--sppi-gray); }
.sppi-placements__unit--l.sppi-placements__unit--b { background: transparent; box-shadow: inset 0 0 0 2px var(--sppi-gray); }
.sppi-placements__col.is-before .sppi-placements__total { color: var(--sppi-gray); }
.sppi-placements__unit:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--sppi-ink); outline-offset: 1px; }
.sppi-placements__chart { display: grid; grid-template-columns: repeat(var(--years), minmax(0, 1fr)); align-items: end; margin: 28px 0 0; border-bottom: 1px solid var(--sppi-ink); }
.sppi-placements__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.sppi-placements__total { margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--sppi-ink); font-variant-numeric: tabular-nums; }
.sppi-placements__units { display: flex; flex-wrap: wrap-reverse; align-content: flex-start; gap: var(--g); width: calc(3 * var(--u) + 2 * var(--g)); margin-bottom: var(--g); }
.sppi-placements__unit { display: block; width: var(--u); height: var(--u); transition: opacity .15s ease-out; }
.sppi-placements__years { display: grid; grid-template-columns: repeat(var(--years), minmax(0, 1fr)); margin: 6px 0 0; padding: 0; list-style: none; text-align: center; font-size: 13px; color: var(--sppi-gray); font-variant-numeric: tabular-nums; }
.sppi-placements__years li { margin: 0; }
.sppi-placements__years small { display: block; font-size: 11px; line-height: 1.1; }
/* Wide charts: larger totals and years (after the rules above, which they override). */
@container (min-width: 900px) {
	.sppi-placements__total { font-size: 16px; }
	.sppi-placements__years { font-size: 15px; }
	.sppi-placements__years small { font-size: 12px; }
}
.sppi-placements__source { margin: 20px 0 0; padding-top: 8px; border-top: var(--sppi-hair); font-family: var(--sppi-serif); font-style: italic; font-size: 14px; line-height: 1.4; color: var(--sppi-gray); }
.sppi-placements__tip { position: absolute; z-index: 2; max-width: 260px; padding: 8px 10px; background: #fff; border: var(--sppi-hair); box-shadow: 0 2px 8px rgba(0, 40, 86, .12); font-size: 13px; line-height: 1.35; pointer-events: none; }
.sppi-placements__tip b { display: block; color: var(--sppi-navy); font-weight: 600; }
.sppi-placements__tip span { display: block; color: var(--sppi-gray); }
.sppi-placements__tip a { display: inline-block; margin-top: 4px; padding-block: 8px; font-weight: 600; color: var(--sppi-navy); }
/* A pointer passes through the note, so it never hides a square; a tapped note, with its "Read it" link,
   takes the tap itself (theme 1.7.30: the link fell through to the chart and did nothing). */
.sppi-placements.is-touch .sppi-placements__tip, .sppi-placements__tip a { pointer-events: auto; }
.sppi-placements__data { margin-top: 12px; font: 15px/1.45 var(--sppi-sans); }
.sppi-placements__data > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--sppi-navy); font-weight: 600; }
.sppi-placements__data table { width: 100%; max-width: 520px; margin-top: 8px; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.sppi-placements__data :is(th, td) { padding: 6px 16px 6px 0; border-bottom: 1px solid var(--sppi-rule); text-align: right; font-weight: 400; }
.sppi-placements__data thead th { border-bottom-color: var(--sppi-gray); font-weight: 700; color: var(--sppi-ink); }
.sppi-placements__data :is(thead th:first-child, th[scope="row"]) { text-align: left; }
.sppi-placements__data th[scope="row"] a { display: inline-block; padding-block: 4px; font-weight: 600; color: var(--sppi-navy); }
.sppi-placements__data th[scope="row"] span { color: var(--sppi-gray); }
.sppi-placements__tip[hidden] { display: none; }
.sppi-placements.is-filtered .sppi-placements__unit:not(.is-match) { opacity: .16; }
.sppi-placements.is-waiting .sppi-placements__unit { opacity: 0; }
.sppi-placements.is-playing .sppi-placements__unit { animation: sppi-placements-in .2s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes sppi-placements-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sppi-placements.is-playing .sppi-placements__unit { animation: none; } }
/* Donor pages (the donate site, the Donor page template, a Donor-style group): terracotta and a
   terracotta tint, the headline in ink as donor headlines are. */
:is(.sppi-donor, .sppi-donor-page, .is-style-donor) .sppi-placements { --sppi-placements-main: var(--wp--preset--color--terracotta, #D25B2F); --sppi-placements-other: #E6A58D; }
:is(.sppi-donor, .sppi-donor-page, .is-style-donor) .sppi-placements__title { color: var(--sppi-ink); font-weight: 700; }

/* As published in */
.sppi-outlets__list { margin: 22px 0 0; font: italic 400 24px/1.75 var(--sppi-serif); }
.sppi-outlets__item { color: var(--sppi-ink); text-decoration: none; }
.sppi-outlets__item:hover { color: var(--sppi-navy); text-decoration: underline; }
.sppi-outlet__logo { height: 30px; width: auto; vertical-align: middle; }

/* Issues: rule-topped cards. With the block's "photos" setting they are quiet panels with the
 * Issue's name and description, and under them its photo (assets/images/issues/{slug}.webp), run to
 * the card's edges so the object can run off them: four across, two on a tablet, one on a phone.
 * Pointing at a card or tabbing to it underlines the name and eases the photo 4% larger. The
 * homepage leaves photos off until they are final. The other Issues are listed under the cards, so
 * every Issue is a click away (theme 1.7.24). */
.sppi-issues__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, 22%)), 1fr)); gap: 48px 32px; margin-top: 32px; }
.sppi-issue { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: var(--sppi-hair); color: var(--sppi-ink); text-decoration: none; transition: border-color .2s ease-out; }
.sppi-issue__name { font: 600 28px/1.15 var(--sppi-serif); color: var(--sppi-navy); }
.sppi-issue__desc { font-size: 18px; line-height: 1.55; }
.sppi-issue:hover .sppi-issue__name { text-decoration: underline; }
.sppi-issue:is(:hover, :focus-visible) { border-top-color: var(--sppi-navy); }
.sppi-issue:focus-visible { outline: 2px solid var(--sppi-navy); outline-offset: 4px; }
.sppi-issues__grid--photos { grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 600px) { .sppi-issues__grid--photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sppi-issues__grid--photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sppi-issues__grid--photos .sppi-issue { gap: 8px; padding: 24px 24px 0; border-top: 0; background: var(--sppi-quiet); overflow: hidden; }
.sppi-issues__grid--photos .sppi-issue__name { font-size: 26px; }
.sppi-issues__grid--photos .sppi-issue__desc { font-size: 17px; line-height: 1.5; }
.sppi-issue__photo { display: block; margin: auto -24px 0; padding-top: 12px; }
.sppi-issue__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transform-origin: 100% 100%; transition: transform .2s ease-out; }
.sppi-issue:is(:hover, :focus-visible) .sppi-issue__photo img { transform: scale(1.04); }
.sppi-issues__more { margin-top: 56px; padding-top: 16px; border-top: var(--sppi-hair); }
.sppi-issues__more-title { margin: 0; font: 700 12px/1.25 var(--sppi-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sppi-navy); }
.sppi-issues__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px 32px; margin: 20px 0 0; padding: 0; list-style: none; }
.sppi-issues__list li { display: flex; flex-direction: column; margin: 0; }
.sppi-issues__list a { padding-block: 12px 6px; font: 600 21px/1.25 var(--sppi-serif); color: var(--sppi-navy); text-decoration: none; }
.sppi-issues__list a:hover { text-decoration: underline; }
.sppi-issues__list span { font-size: 16px; line-height: 1.45; color: var(--sppi-gray); }

/* Documented results (SPPI Core's block): SPPI's record on one navy line, oldest first, each step
 * with its status and date, its headline (the post that documents it), its outcome and a link to
 * the public record. The steps run in a row that scrolls sideways: by touch or trackpad, by the
 * arrow keys once the row has focus, or by the Earlier and Later buttons beside the heading
 * (SPPI Core's results.js, which opens the row at the newest and fades whichever edge has more).
 * About three and a half steps show on a wide screen, two and a half on a tablet and one and a
 * bit on a phone, so the next is always in sight. The first time it scrolls into view the line
 * draws itself (0.5s) and the steps fade in after it; with reduced motion or without the script
 * it is simply there (theme 1.7.24). */
.sppi-results__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; border-top: var(--sppi-hair-navy); }
.sppi-results__head .sppi-section__title { margin: 0; padding-top: 6px; border-top: 0; }
.sppi-results__nav { display: flex; gap: 8px; }
.sppi-results__nav[hidden] { display: none; }
.sppi-results__nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--sppi-navy); border-radius: 0; background: transparent; color: var(--sppi-navy); cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.sppi-results__nav button:hover:not([aria-disabled="true"]) { background: var(--sppi-navy); color: #fff; }
.sppi-results__nav button[aria-disabled="true"] { border-color: var(--sppi-rule); color: var(--sppi-rule); cursor: default; }
.sppi-results__nav button:focus-visible { outline: 2px solid var(--sppi-navy); outline-offset: 2px; }
.sppi-results__scroller { --sppi-fade-l: 0px; --sppi-fade-r: 0px; margin-top: 24px; padding: 4px 0 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--sppi-rule) transparent; }
.sppi-results__scroller:focus-visible { outline: 2px solid var(--sppi-navy); outline-offset: 4px; }
.sppi-results.is-scrollable .sppi-results__scroller { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sppi-fade-l), #000 calc(100% - var(--sppi-fade-r)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--sppi-fade-l), #000 calc(100% - var(--sppi-fade-r)), transparent 100%); }
.sppi-results.is-scrollable:not(.at-start) .sppi-results__scroller { --sppi-fade-l: 56px; }
.sppi-results.is-scrollable:not(.at-end) .sppi-results__scroller { --sppi-fade-r: 56px; }
.sppi-results__list { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 24vw, 300px); gap: 32px; width: max-content; margin: 0; padding: 0; list-style: none; }
.sppi-results__list::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--sppi-navy); transform-origin: left center; }
.sppi-result { position: relative; margin: 0; padding-top: 36px; scroll-snap-align: start; }
.sppi-result::before { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border: 2px solid var(--sppi-navy); background: var(--wp--preset--color--white, #fff); }
.sppi-result__when { margin: 0; font: 700 12px/1.4 var(--sppi-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sppi-navy); }
.sppi-result__title { margin: 6px 0 0; font: 600 22px/1.25 var(--sppi-serif); letter-spacing: 0; text-transform: none; color: var(--sppi-navy); }
.sppi-result__title a { display: inline-block; padding-block: 6px; color: var(--sppi-navy); text-decoration: none; }
.sppi-result__title a:hover { text-decoration: underline; }
.sppi-result__outcome { margin: 4px 0 0; font-size: 17px; line-height: 1.5; }
.sppi-result__record { margin: 4px 0 0; font: 600 14px/1.4 var(--sppi-sans); }
.sppi-result__record a { display: inline-block; padding-block: 12px; color: var(--sppi-navy); }
@media (max-width: 760px) { .sppi-results__list { grid-auto-columns: min(78vw, 300px); gap: 24px; } }
.sppi-results__list.is-waiting::before { transform: scaleX(0); }
.sppi-results__list.is-revealed::before { animation: sppi-draw-x .5s ease-out both; }
@keyframes sppi-draw-x { from { transform: scaleX(0); } to { transform: none; } }
.sppi-results__list[data-sppi-reveal].is-revealed > * { animation-delay: calc(var(--sppi-reveal-delay, 0ms) + 200ms); }

/* The homepage's line about SPPI, under the featured paper, beside the blue Capitol (assets/images/
 * capitol-1400.webp, the design system's capitol-navy) with the white stacked logo in its sky
 * (logo-stacked-white.svg): decorative pictures kept apart from the text. Side by side on a wide
 * screen, the Capitol under the line on a phone. The photo swoops in from the right and the logo
 * from the left, once, as the photo comes into view (assets/js/home.js holds them until then), and
 * then they stay still (theme 1.7.25). The homepage's main column clips what crosses the screen's
 * edge, so the swoop never makes the page scroll sideways. */
.sppi-main:has(> .sppi-home-intro) { overflow-x: clip; }
.sppi-home-intro { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto; column-gap: 64px; align-items: end; margin-top: 64px !important; }
.sppi-home-intro > * { grid-column: 1; margin: 0 !important; }
.sppi-home-intro::after { content: ""; grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 2 / 1; background: var(--sppi-navy) url(assets/images/capitol-1400.webp) center 36% / cover no-repeat; animation: sppi-swoop-from-right 1s cubic-bezier(.16, 1, .3, 1) .1s both; }
/* The logo lies over the photo: a box the photo's size, at the foot of the photo's grid area (of
   the whole line on a phone, where the photo comes last), the logo in the sky at its upper left. */
.sppi-home-intro::before { content: ""; position: absolute; z-index: 1; grid-column: 2; grid-row: 1 / span 2; left: 0; bottom: 0; width: 100%; aspect-ratio: 2 / 1; background: url(assets/images/logo-stacked-white.svg) left 7% top 16% / clamp(150px, 34%, 300px) auto no-repeat; pointer-events: none; animation: sppi-swoop-from-left .8s cubic-bezier(.16, 1, .3, 1) .5s both; }
.sppi-home-intro.is-waiting::before,
.sppi-home-intro.is-waiting::after { animation: none; opacity: 0; }
@keyframes sppi-swoop-from-right { from { opacity: 0; transform: translateX(40%); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes sppi-swoop-from-left { from { opacity: 0; transform: translateX(-14%); } to { opacity: 1; transform: none; } }
.sppi-home-intro p:not(.sppi-more) { max-width: 40ch; font: 400 clamp(22px, 2.6vw, 30px)/1.32 var(--sppi-serif); color: var(--sppi-ink); }
.sppi-home-intro .sppi-more { margin-top: 16px !important; }
@media (max-width: 900px) {
	.sppi-home-intro { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
	.sppi-home-intro::after { grid-column: 1; grid-row: auto; margin-top: 32px; }
	.sppi-home-intro::before { grid-column: auto; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .sppi-home-intro::before, .sppi-home-intro::after { animation: none; } }
@media print { .sppi-home-intro::before, .sppi-home-intro::after { display: none; } }

/* Research spotlight (SPPI Core's block): one finding, its words beside one of the piece's own
 * figures, drawn as the piece draws it. Side by side on a wide screen, stacked below 900px. */
.sppi-spotlight__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; align-items: start; margin-top: 32px; }
@media (max-width: 900px) { .sppi-spotlight__body { grid-template-columns: minmax(0, 1fr); } }
.sppi-spotlight__headline { margin: 12px 0 0; font: 600 clamp(28px, 3.2vw, 40px)/1.12 var(--sppi-serif); letter-spacing: 0; text-transform: none; color: var(--sppi-navy); }
.sppi-spotlight__summary { margin: 16px 0 0; font-size: 19px; line-height: 1.55; }
.sppi-spotlight__piece { margin: 16px 0 0; font: italic 400 19px/1.4 var(--sppi-serif); color: var(--sppi-gray); }
.sppi-spotlight .wp-block-buttons { margin-top: 24px; }
.sppi-spotlight__figure > .sppi-exhibit { margin: 0 !important; }
/* On a phone the spotlight's chart runs to the screen's edges (theme 1.7.25). Since SPPI Core 1.7.43
   the chart block draws a chart for the phone's width, which fills them; a chart it can't draw
   narrower keeps a 440px floor (text about 9px) instead of the block's 520px and scrolls sideways,
   so a slope chart's two rankings' dots and values still show on a phone 360px wide or more. */
@media (max-width: 600px) {
	.sppi-spotlight__figure .sppi-chart__frame { margin-inline: calc(50% - 50vw); padding-inline: 8px; }
	.sppi-spotlight__figure .wp-block-sppi-chart .sppi-chart__frame > svg.sppi-chart:not(.sppi-chart--phone) { min-width: 440px; }
}

/* One-time reveals (SPPI Core's assets/reveal.js): a block's children fade and rise into place,
 * 50ms apart, the first time it scrolls into view. Nothing is hidden without the script. */
[data-sppi-reveal].is-waiting > * { opacity: 0; transform: translateY(10px); }
[data-sppi-reveal].is-revealed > * { animation: sppi-reveal .5s ease-out both; animation-delay: var(--sppi-reveal-delay, 0ms); }
@keyframes sppi-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media print { [data-sppi-reveal] > *, .sppi-placements.is-waiting .sppi-placements__unit { animation: none !important; opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
	[data-sppi-reveal] > * { animation: none !important; opacity: 1 !important; transform: none !important; }
	.sppi-results__list::before { animation: none !important; transform: none !important; }
	.sppi-results__nav button { transition: none; }
	.sppi-issue, .sppi-issue__photo img { transition: none; }
	.sppi-issue:is(:hover, :focus-visible) .sppi-issue__photo img { transform: none; }
}

/* Events */
.sppi-event { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 260px); gap: 8px 32px; align-items: baseline; padding: 22px 0; border-bottom: var(--sppi-hair); }
.sppi-event__date { margin: 0; font: 600 21px/1.3 var(--sppi-serif); color: var(--sppi-navy); }
.sppi-event__title { margin: 0; font: 600 22px/1.3 var(--sppi-serif); font-style: normal; letter-spacing: 0; text-transform: none; }
.sppi-event__title a { color: var(--sppi-ink); text-decoration: none; }
.sppi-event__where, .sppi-event__when { margin: 0; font: 16px/1.45 var(--sppi-sans); color: var(--sppi-gray); }
.sppi-events__empty { margin: 20px 0 0; }

/* Newsletter and support band */
.sppi-support { padding-block: 72px 80px; margin-top: 88px !important; }
.sppi-support .wp-block-columns { gap: 56px 96px; }

/* ---------- White paper ---------- */
.sppi-paper-cover {
	position: relative;
	overflow: hidden;
	background: var(--sppi-navy);
	color: #fff;
	padding-block: 56px;
	margin-block-start: 0 !important;
	align-items: center;
}
.sppi-paper-cover > .sppi-paper-cover__text { width: 100%; margin-block: 0 !important; } /* centred exactly: no block gap above it */
.sppi-paper-cover > .sppi-paper-cover__photo { position: absolute; inset: 0; max-width: none !important; margin: 0 !important; z-index: 0; background: var(--sppi-navy); } /* full width, past the layout's 1240px */
.sppi-paper-cover__photo img { width: 100% !important; height: 100% !important; object-fit: cover; filter: grayscale(1); mix-blend-mode: screen; opacity: 0.35; }
.sppi-paper-cover::after { content: ""; position: absolute; inset: 0; background: rgba(0, 40, 86, 0.6); z-index: 0; } /* strong wash: long text over a photo */
.sppi-paper-cover__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; }
.sppi-paper-cover .sppi-issue-line, .sppi-paper-cover__byline, .sppi-paper-cover__byline a { color: #fff; }
.sppi-paper-cover__title { margin: 0; max-width: 15ch; font: 600 clamp(42px, 5.6vw, 72px)/1.02 var(--sppi-serif); color: #fff; text-transform: none; letter-spacing: 0; text-wrap: balance; }
/* Longer headlines, smaller and wider: over 40, 65 and 90 characters. */
:is(.sppi-paper-cover__title, .sppi-hero__title).is-long { max-width: 20ch; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; }
:is(.sppi-paper-cover__title, .sppi-hero__title).is-longer { max-width: 24ch; font-size: clamp(32px, 3.9vw, 50px); line-height: 1.06; }
:is(.sppi-paper-cover__title, .sppi-hero__title).is-longest { max-width: 28ch; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.08; }
.sppi-paper-cover__dek { margin: 0; max-width: 34em; }
.sppi-paper-cover__dek p { margin: 0; font-size: 22px; line-height: 1.5; color: #fff; }
.sppi-paper-cover__byline { margin: 0; font-style: italic; font-size: 20px; }

.sppi-paper-bar { border-bottom: var(--sppi-hair); padding-block: 20px; margin-block-start: 0 !important; }
.sppi-paper-meta p { margin: 0; font: 400 16px/1.5 var(--sppi-sans); color: var(--sppi-gray); }
.sppi-paper-meta a { color: var(--sppi-navy); }

.sppi-paper-body {
	display: grid;
	grid-template-columns: minmax(200px, 260px) minmax(0, 700px);
	gap: 48px 88px;
	margin-top: 64px !important;
	align-items: start;
}
.sppi-paper-body:not(:has(.sppi-toc)) { grid-template-columns: minmax(0, 700px); justify-content: center; }
/* Side-by-side columns start level, so their top rules line up (an op-ed's "Originally published in"
   and "More on …"; a paper's contents and text). WordPress would give the second one the block gap. */
:is(.sppi-paper-body, .sppi-oped, .sppi-person) > * { margin-block: 0 !important; }
.sppi-paper-main { min-width: 0; }
.sppi-paper-main > .wp-block-post-content > :first-child { margin-top: 0; }

/* Contents navigator */
.sppi-toc { position: sticky; top: calc(var(--sppi-header-top) + var(--sppi-header-h) + 24px); max-height: calc(100vh - var(--sppi-header-top) - var(--sppi-header-h) - 48px); overflow: auto; } /* below the sticky header (theme 1.7.26) */
.admin-bar .sppi-toc { top: 56px; }
.sppi-toc summary { list-style: none; cursor: pointer; padding-bottom: 12px; }
.sppi-toc summary::-webkit-details-marker { display: none; }
.sppi-toc ol { list-style: none; margin: 0; padding: 0; font: 400 17px/1.35 var(--sppi-serif); }
.sppi-toc li { border-top: var(--sppi-hair); }
.sppi-toc li:first-child { border-top: var(--sppi-hair-navy); }
.sppi-toc li:last-child { border-bottom: var(--sppi-hair); }
.sppi-toc a { display: block; padding: 10px 0; color: var(--sppi-ink); text-decoration: none; }
.sppi-toc a:hover, .sppi-toc a[aria-current] { color: var(--sppi-navy); font-weight: 600; }
.sppi-toc li.is-part { border-top: var(--sppi-hair-navy); } /* H1 parts head their sections, as kickers */
.sppi-toc li.is-part > a { padding-top: 16px; font: 700 12px/1.4 var(--sppi-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sppi-navy); }
.sppi-toc li.is-part > a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }
:where(.sppi-paper-main, .sppi-article) :is(h1, h2, h3)[id] { scroll-margin-top: 24px; }

/* Long-form text */
.sppi-paper-main .wp-block-post-content, .sppi-article .wp-block-post-content { font-size: 19px; line-height: 1.58; }
.wp-block-post-content h2 { margin-top: 56px; margin-bottom: 20px; }
.wp-block-post-content h3 { margin-top: 36px; margin-bottom: 16px; }
/* An SPPI block placed under a page's own heading (the About page's Issues) follows it as text does,
   without the homepage's section spacing: the heading's 20px and 20px more to the first rule, as
   under a section title on the homepage. */
.wp-block-post-content > :is(h2, h3) + .sppi-section { margin-top: 0; }
.wp-block-post-content > :is(h2, h3) + .sppi-section > .sppi-issues__grid { margin-top: 20px; }
.wp-block-post-content p { margin-block: 0 22px; }

/* Policies SPPI Core reads from Termly (.sppi-legal): headings, paragraphs and lists in the site's type */
.sppi-legal > :first-child { margin-top: 0; }
.wp-block-post-content p.sppi-legal__updated { font: 400 16px/1.45 var(--sppi-sans); color: var(--sppi-gray); }
.sppi-legal :is(h2, h3)[id] { scroll-margin-top: 24px; }
.sppi-legal h2 { font-size: 20px; letter-spacing: 0.06em; } /* Long questions in capitals: a step below the site's section titles */
.sppi-legal :is(ul, ol) { margin-block: 0 22px; padding-left: 1.3em; }
.sppi-legal li + li { margin-top: 8px; }
.sppi-legal ul.sppi-legal__toc { list-style: none; padding-left: 0; font: 600 15px/1.35 var(--sppi-sans); letter-spacing: 0.02em; }
.sppi-legal ul.sppi-legal__toc li + li { margin-top: 10px; }

/* Forms SPPI Core draws (a Jetpack form block when Jetpack is off: the Expose Corruption tip line) */
.sppi-form { display: grid; gap: 18px; margin-block: 8px 32px; } /* The text column's width, so its left edge meets the paragraphs'. */
.wp-block-post-content .sppi-form p { margin: 0; }
.sppi-form__field { display: grid; gap: 6px; }
.sppi-form__field label { font: 600 16px/1.3 var(--sppi-sans); color: var(--sppi-ink); }
.sppi-form__req { font-weight: 400; color: var(--sppi-gray); }
.sppi-form :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=date], textarea) { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--sppi-gray); border-radius: 0; background: #fff; color: var(--sppi-ink); font: 400 17px/1.4 var(--sppi-sans); }
.sppi-form textarea { min-height: 160px; resize: vertical; }
.sppi-form :is(input, textarea):focus-visible { outline: 2px solid var(--sppi-navy); outline-offset: 1px; }
.sppi-form__field--check { display: flex; align-items: baseline; gap: 8px; }
.sppi-form__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sppi-form__error, .sppi-form__done { margin: 0; padding: 12px 16px; border-left: 3px solid var(--sppi-navy); background: var(--sppi-quiet); font: 600 17px/1.4 var(--sppi-sans); color: var(--sppi-ink); }
.sppi-form .wp-block-buttons { margin: 0; }

/* Older posts: pictures, videos and embedded maps never wider than the text column; a picture set beside the text stands on its own line on a phone */
.wp-block-post-content :where(img, video, iframe, embed, object) { max-width: 100%; }
.wp-block-post-content :where(img) { height: auto; }
.wp-block-post-content iframe[src*="youtube.com/embed"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.wp-block-post-content > div[style*="width"] { max-width: 100%; }
@media (max-width: 600px) {
	.wp-block-post-content :where(.alignleft, .alignright) { float: none; margin-inline: 0; max-width: 100%; }
}

/* Jetpack's tiled gallery, drawn without Jetpack: its rows and columns of photos */
.wp-block-jetpack-tiled-gallery .tiled-gallery__row { display: flex; gap: 8px; }
.wp-block-jetpack-tiled-gallery .tiled-gallery__row + .tiled-gallery__row { margin-top: 8px; }
.wp-block-jetpack-tiled-gallery .tiled-gallery__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wp-block-jetpack-tiled-gallery .tiled-gallery__item { margin: 0; }
.wp-block-jetpack-tiled-gallery img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) {
	.wp-block-jetpack-tiled-gallery .tiled-gallery__row { flex-direction: column; }
	.wp-block-jetpack-tiled-gallery .tiled-gallery__col { flex-basis: auto !important; }
}

/* Posts from X (Twitter), quoted rather than loaded from X (SPPI Core) */
.wp-block-embed-twitter.alignleft, .wp-block-embed-twitter.alignright { float: none; margin-inline: 0; }
.wp-block-post-content .sppi-tweet { box-sizing: border-box; max-width: 560px; margin: 0; padding: 16px 20px; border: var(--sppi-hair); background: #fff; font: 400 17px/1.5 var(--sppi-sans); color: var(--sppi-ink); }
.wp-block-post-content .sppi-tweet p { margin: 0 0 10px; font: inherit; overflow-wrap: anywhere; }
.sppi-tweet__by { display: block; font-size: 15px; color: var(--sppi-gray); }
.sppi-tweet a { color: var(--sppi-navy); }
.sppi-event-link a { font: 600 17px/1.3 var(--sppi-sans); }

/* Epigraphs set as covers or quotes in older papers */
.wp-block-post-content .wp-block-cover:not(.is-style-donor-hero) { min-height: 320px !important; }

/* Older posts' drop caps, which the design system doesn't use, read as ordinary first letters. */
body .has-drop-cap:not(:focus)::first-letter { float: none; margin: 0; font-size: inherit; font-weight: inherit; font-style: inherit; line-height: inherit; text-transform: inherit; }
body .has-drop-cap:not(:focus)::after { content: none; }

/* Notes (core footnotes), styled like the design system's Notes */
.wp-block-footnotes { margin-top: 48px; padding-top: 16px; border-top: var(--sppi-hair); font-style: italic; color: var(--sppi-ink); }
.wp-block-footnotes li { margin-bottom: 6px; }
.wp-block-footnotes li::marker { font-style: normal; }
.wp-block-footnotes :is(em, i) { font-style: normal; } /* Titles stand out from italic notes by going upright. */
:is(h2, h3) + .wp-block-footnotes { margin-top: 16px; padding-top: 0; border-top: 0; } /* Under its "Notes" heading it needs no rule of its own. */
/* References, the design system's works-cited list: no numbers, an 18pt hanging indent, titles in italic. */
.wp-block-list.is-style-references { list-style: none; padding-left: 0; font-size: 15px; line-height: 1.5; color: var(--sppi-ink); }
.wp-block-list.is-style-references > li { padding-left: 24px; text-indent: -24px; margin-bottom: 8px; }
sup.fn a, .wp-block-post-content sup a { text-decoration: none; font-size: 0.75em; }

/* Tables, styled like the design system's figure tables */
.wp-block-table table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.wp-block-table th, .wp-block-table td { border: 0; border-bottom: 0.5pt solid var(--sppi-rule); padding: 8px 12px 8px 0; text-align: left; vertical-align: top; }
.wp-block-table thead th, .wp-block-table thead td { border-bottom: 0.75pt solid var(--sppi-gray); font-weight: 700; color: var(--sppi-ink); }
.wp-block-table figcaption, .wp-block-table .wp-element-caption { margin-top: 8px; font: italic 14px/1.4 var(--sppi-serif); color: var(--sppi-gray); }
.wp-block-table { overflow-x: auto; }
.wp-block-table :is(thead, tfoot) { border: 0; } /* WordPress's own 3px rule; the header cells carry the hairline. */
.wp-block-table .has-text-align-right { text-align: right; } /* Column alignment set in the editor beats the left default above. */
.wp-block-table .has-text-align-center { text-align: center; }

/* White papers and charts: the styles the sppi-white-paper skill ships with its packages
   (assets/web/sppi-white-paper.css, package spec section 11), for the class names its importer
   writes. The SPPI chart block (sppi/chart) and tables and figures imported from Markdown use the
   same classes, so every exhibit has the design system's Figure frame: "FIGURE N" and the title
   above, the source note below, the data under a chart. */
/* ---------- Exhibits: "FIGURE N  Title" line above, source note below ---------- */
.sppi-exhibit { margin-block: 48px; }
.sppi-exhibit > .wp-block-image,
.sppi-exhibit > .wp-block-table { display: flex; flex-direction: column; margin: 0; }
.sppi-exhibit figcaption.wp-element-caption {
	order: -1;
	margin: 0 0 14px;
	padding-top: 8px;
	border-top: 1px solid var(--sppi-navy);
	font: 600 19px/1.35 var(--sppi-serif);
	font-style: normal;
	color: var(--sppi-navy);
	text-align: left;
}
.sppi-exhibit figcaption.wp-element-caption > strong:first-child {
	margin-right: 10px;
	font: 700 12px/1 var(--sppi-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	vertical-align: 2px;
}
.sppi-exhibit__media img { display: block; width: 100%; height: auto; }
.wp-block-post-content p.sppi-exhibit__source,
p.sppi-exhibit__source {
	margin: 12px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--sppi-rule);
	font: italic 400 15px/1.45 var(--sppi-serif);
	color: var(--sppi-gray);
}

/* ---------- Tables: Source Sans 3, tabular figures, a rule under the header and between panels only ---------- */
.sppi-exhibit__table table,
.sppi-exhibit__datatable table {
	width: 100%;
	border-collapse: collapse;
	font: 400 16px/1.4 var(--sppi-sans);
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--sppi-ink);
}
.sppi-exhibit__table :is(th, td),
.sppi-exhibit__datatable :is(th, td) { border: 0; padding: 6px 0 6px 16px; vertical-align: top; }
.sppi-exhibit__table :is(th, td):first-child,
.sppi-exhibit__datatable :is(th, td):first-child { padding-left: 0; }
.sppi-exhibit__table thead th,
.sppi-exhibit__datatable thead th {
	border-bottom: 1px solid var(--sppi-gray);
	font-size: 14px;
	font-weight: 700;
	vertical-align: bottom;
}
.sppi-exhibit__table td[colspan] { padding: 14px 0 4px; font: italic 400 17px/1.3 var(--sppi-serif); color: var(--sppi-navy); }
.sppi-exhibit__table tbody tr:not(:first-child) td[colspan] { border-top: 1px solid var(--sppi-rule); }
.sppi-has-total tbody tr:last-child td { font-weight: 700; border-top: 1px solid var(--sppi-gray); }

/* ---------- The data behind each chart ---------- */
.sppi-exhibit__data { margin-top: 12px; font: 15px/1.45 var(--sppi-sans); }
.sppi-exhibit__data > summary { cursor: pointer; color: var(--sppi-navy); font-weight: 600; }
.sppi-exhibit__data .wp-block-table { margin: 12px 0 0; }
.sppi-exhibit__datatable table { font-size: 15px; }
.wp-block-post-content p.sppi-exhibit__download { margin: 10px 0 0; font-size: 15px; }

/* ---------- Numbered points (bold lead-ins), references, chronology, epigraphs ---------- */
.wp-block-list.sppi-points { padding-left: 1.4em; }
.wp-block-list.sppi-points > li { padding-left: 0.4em; margin-bottom: 18px; }
.wp-block-list.sppi-references { font-size: 17px; line-height: 1.5; }
.wp-block-list.sppi-references > li { padding-left: 24px; text-indent: -24px; }
.sppi-chronology table { width: 100%; border-collapse: collapse; }
.sppi-chronology td { border: 0; padding: 0 24px 14px 0; vertical-align: top; font-size: 17px; line-height: 1.45; }
.sppi-chronology td:first-child { width: 10em; white-space: nowrap; font-size: 18px; color: var(--sppi-navy); }
.wp-block-quote.sppi-epigraph { max-width: 26em; margin: 32px auto; font-style: italic; }
.wp-block-quote.sppi-epigraph cite { text-align: right; }

@media (max-width: 781px) {
	.sppi-exhibit { margin-block: 36px; }
	.sppi-exhibit figcaption.wp-element-caption { font-size: 17px; }
	.sppi-chronology td:first-child { width: auto; white-space: normal; }
}

/* The chart block: its figure has no margins of its own, and a panel whose columns differ from
   the first restates them inside the data table. */
.sppi-exhibit :where(figure) { margin: 0; }
.sppi-exhibit__datatable tbody th { padding-top: 14px; font-size: 14px; }

/* ---------- Policy briefs (Claude's sppi-policy-brief skill), as on the PDF: three key figures
   between navy rules (Crimson Pro semibold numbers, Source Sans 3 caps labels), and the closing navy box that
   sends readers to the full paper. ---------- */
.sppi-brief-figures {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 28px;
	margin-block: 0 40px;
	padding-block: 22px;
	border-top: var(--sppi-hair-navy);
	border-bottom: var(--sppi-hair-navy);
}
/* Three across when the row is at least 500px wide, one under another when it isn't (the text
   column narrows beside the contents list as well as on phones). */
.sppi-brief-figures > .sppi-brief-figure { flex: 1 1 calc((500px - 100%) * 999); }
.sppi-brief-figures > *,
.sppi-brief-figure > * { margin: 0 !important; }
.wp-block-post-content p.sppi-brief-figure__value,
p.sppi-brief-figure__value { font: 600 44px/1 var(--sppi-serif); color: var(--sppi-navy); }
.sppi-brief-figure__value a { color: inherit; text-decoration: none; }
.wp-block-post-content p.sppi-brief-figure__label,
p.sppi-brief-figure__label {
	margin-top: 10px !important;
	font: 700 12px/1.45 var(--sppi-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sppi-gray);
}
.wp-block-post-content p.sppi-brief-more,
p.sppi-brief-more { margin-top: 48px; padding: 22px 26px; background: var(--sppi-navy); color: #fff; font: 600 20px/1.4 var(--sppi-serif); }
.sppi-brief-more a { color: #fff; }
@media (max-width: 600px) {
	.wp-block-post-content p.sppi-brief-figure__value,
	p.sppi-brief-figure__value { font-size: 38px; }
}

/* Quotes */
.wp-block-quote { border: 0; padding: 0 0 0 0; margin-inline: 0; }
.wp-block-quote cite, .wp-block-pullquote cite { display: block; margin-top: 8px; font: 400 15px/1.3 var(--sppi-serif); color: var(--sppi-gray); }
.wp-block-quote cite::before, .wp-block-pullquote cite::before { content: "— "; }
.wp-block-pullquote { padding: 24px 0; }

/* Citation, authors and tags */
.sppi-authors { margin-top: 56px; padding-top: 16px; border-top: var(--sppi-hair-navy); }
.sppi-authors__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 48px; margin-top: 14px; }
.sppi-authors__list p { margin: 0; font-size: 18px; line-height: 1.55; }
.sppi-authors__list a { font-weight: 600; text-decoration: none; }
.sppi-cite { margin-top: 40px; padding: 24px 28px; background: var(--sppi-quiet); scroll-margin-top: 24px; }
.sppi-cite__text { margin: 12px 0 0; font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.sppi-terms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.sppi-tag, .ttd-topics-display a {
	display: inline-block;
	padding: 3px 8px;
	border: 1px solid var(--sppi-navy);
	background: #fff;
	color: var(--sppi-navy);
	font: 600 11px/1.3 var(--sppi-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}
.sppi-tag.is-filled { background: var(--sppi-navy); color: #fff; }
.sppi-tag:hover, .ttd-topics-display a:hover { background: var(--sppi-navy); color: #fff; }
.sppi-tag.is-filled:hover { background: #fff; color: var(--sppi-navy); }

/* TopicalBoost's "Topics on this page" at the end of the text: its heading as a kicker, its topics as tags.
   The plugin keeps each topic on one line, so a long one (a case headnote) ran off a phone screen: here
   it wraps inside its tag. The topics it holds back until "+N more" stay hidden until then. */
.ttd-topics-display { display: block !important; margin: 40px 0 0 !important; padding: 0 !important; max-width: none !important; }
.ttd-topics-display::before { display: none !important; }
.ttd-topics-display .ttd-topics-content { display: block; min-width: 0; }
.ttd-topics-display .ttd-topics-content > :is(h1, h2, h3, h4, h5, h6) { display: block; margin: 0 0 12px; font: 700 12px/1.25 var(--sppi-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sppi-navy); }
.ttd-topics-display .ttd-topics-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ttd-topics-display .ttd-topics-links a { margin: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.ttd-topics-display .ttd-topics-links a.ttd-topics-display-hidden { display: none; }
.ttd-topics-display .ttd-topics-show-extra-button { display: inline-block; margin: 12px 0 0; font: 600 14px/1.3 var(--sppi-sans); letter-spacing: 0.04em; text-transform: none; color: var(--sppi-navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Op-ed ---------- */
/* Text and sidebar side by side while the sidebar keeps 300px (design: 560px + 96px + 300px); stacked below that. */
.sppi-oped { display: grid; grid-template-columns: minmax(0, 760px) minmax(300px, 1fr); gap: 56px 96px; margin-top: 80px !important; align-items: start; }
@media (max-width: 1020px) { .sppi-oped { grid-template-columns: minmax(0, 1fr); } }
.sppi-oped__main { min-width: 0; }
.sppi-oped__main .wp-block-post-title { margin: 18px 0 0; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.06; }
.sppi-byline { margin: 18px 0 0; font-style: italic; font-size: 20px; line-height: 1.4; }
.sppi-byline.sppi-meta { font-style: normal; font-size: 15px; margin: 0; }
.sppi-original { margin-top: 28px; }
.sppi-original.is-button { margin-top: 32px; }
.sppi-original__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0; padding: 16px 0; border-top: var(--sppi-hair); border-bottom: var(--sppi-hair); }
.sppi-original__label, .sppi-original__date { font: 400 16px/1.3 var(--sppi-sans); color: var(--sppi-gray); }
.sppi-original__outlet__name { font: italic 600 28px/1.2 var(--sppi-serif); color: var(--sppi-ink); }
.sppi-original__outlet__logo { height: 36px; width: auto; vertical-align: middle; }
.sppi-archive-list .sppi-original { margin: 0; }
.sppi-archive-list .sppi-original__line { border: 0; padding: 0; }
.sppi-archive-list .sppi-original__outlet__name { font-size: 17px; }
.sppi-archive-list .sppi-original__outlet__logo { height: 22px; }
.sppi-original__program { font: italic 400 20px/1.3 var(--sppi-serif); color: var(--sppi-ink); }
/* The subtitle: an op-ed's or interview's written excerpt (the outlet's dek), under the title. */
.sppi-dek { margin: 20px 0 0; max-width: 34em; }
.sppi-dek .wp-block-post-excerpt__excerpt { margin: 0; font: 400 22px/1.45 var(--sppi-serif); color: var(--sppi-ink); }
/* An op-ed with a featured image opens with the white paper's navy photo header; the column below starts at the outlet line. */
.sppi-oped-cover + .sppi-oped { margin-top: 64px !important; }
.sppi-oped__main > .sppi-original:first-child { margin-top: 0; }
/* TV & Radio: the recording, 16:9, under the outlet line. */
.sppi-recording { margin: 32px 0 0; }
.sppi-recording__frame { position: relative; aspect-ratio: 16 / 9; background: var(--sppi-navy); }
.sppi-recording__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sppi-recording iframe, .sppi-recording audio, .sppi-recording video { max-width: 100%; }
/* The sidebar mixes op-ed cards with papers and briefs, so it takes the homepage op-ed column's
   rhythm for all of them: 32px apart, each opening with a navy rule. */
.sppi-oped__aside .sppi-related { margin-top: 0; }
.sppi-oped__aside .sppi-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 0; padding-top: 24px; }
.sppi-oped__aside .sppi-item--tile { padding-top: 16px; border-top: var(--sppi-hair-navy); }

/* ---------- Default single, pages, archives ---------- */
.sppi-article, .sppi-page { margin-top: 72px !important; }
.sppi-article > .wp-block-post-title, .sppi-page > .wp-block-post-title { margin: 14px 0 0; }
.sppi-article .sppi-byline { font-size: 18px; }
.sppi-article__image { margin-block: 32px !important; }

/* Press release (design system: release line, media contact, ###, short boilerplate) */
.sppi-press-head { margin-top: 24px; padding: 16px 0; border-top: var(--sppi-hair); border-bottom: var(--sppi-hair); font: 16px/1.6 var(--sppi-sans); color: var(--sppi-gray); }
.sppi-press-head p { margin: 0; }
.sppi-press-head__label { font: 700 12px/1.25 var(--sppi-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sppi-navy); }
.sppi-press-head strong, .sppi-press-end strong { font-weight: 600; color: var(--sppi-ink); }
.sppi-press .wp-block-post-content { margin-top: 32px; }
.sppi-press-end { margin-top: 32px; }
.sppi-press-end p { margin: 0; }
.sppi-press-end__mark { text-align: center; letter-spacing: 0.3em; }
.sppi-press-end__about { margin-top: 28px !important; padding-top: 16px; border-top: var(--sppi-hair); font-size: 17px; line-height: 1.55; color: var(--sppi-gray); }
/* A release's pull quote (design system PullQuote: navy hairlines above and below, semibold italic,
   the attribution under it). Web only: the PDF has none. Older releases' quotes read the same way. */
.sppi-press :is(.wp-block-pullquote, .wp-block-quote) { margin-block: 40px; padding: 18px 0; border: 0; border-block: 1px solid var(--sppi-navy); font-size: inherit; font-style: normal; text-align: left; color: var(--sppi-navy); }
.sppi-press .wp-block-pullquote blockquote { margin: 0; }
.sppi-press :is(.wp-block-pullquote, .wp-block-quote) p { margin: 0; font: italic 600 26px/1.35 var(--sppi-serif); color: var(--sppi-navy); text-wrap: pretty; }
.sppi-press :is(.wp-block-pullquote, .wp-block-quote) cite { margin-top: 12px; font: 400 16px/1.4 var(--sppi-serif); color: var(--sppi-gray); }
@media (max-width: 600px) { .sppi-press :is(.wp-block-pullquote, .wp-block-quote) p { font-size: 22px; } }
.sppi-article > .sppi-paper-actions { margin-top: 32px; } /* The document's PDF, under a release or an article. */

/* Coalition letters: who it went to, who led it and who signed for SPPI, then the partners, each
   linked to its own website, the PDF and where the lead published it. */
.sppi-coalition__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; margin: 24px 0 0; padding: 16px 0; border-top: var(--sppi-hair); border-bottom: var(--sppi-hair); font: 16px/1.5 var(--sppi-sans); color: var(--sppi-ink); }
.sppi-coalition__facts > div { display: contents; }
.sppi-coalition__facts dt { font: 700 12px/2 var(--sppi-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sppi-navy); }
.sppi-coalition__facts dd { margin: 0; }
.sppi-coalition__facts dd a { color: inherit; }
.sppi-coalition-letter .wp-block-post-content { margin-top: 32px; }
.sppi-coalition--partners { margin-top: 48px; }
.sppi-coalition__partners { list-style: none; margin: 12px 0 0; padding: 0; columns: 2 16em; column-gap: 40px; font: 17px/1.45 var(--sppi-sans); }
.sppi-coalition__partners li { break-inside: avoid; padding: 8px 0; border-top: var(--sppi-hair); }
.sppi-coalition__lead { margin-left: 6px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sppi-gray); }
.sppi-coalition__actions { margin-top: 28px; }
/* Coalition partners (the directory block) */
.sppi-partners__list { list-style: none; margin: 16px 0 0; padding: 0; columns: 2 22em; column-gap: 48px; font: 17px/1.45 var(--sppi-sans); }
.sppi-partners__list li { display: flex; justify-content: space-between; gap: 16px; break-inside: avoid; padding: 10px 0; border-top: var(--sppi-hair); }
.sppi-partners__letters { flex: none; font-size: 14px; color: var(--sppi-gray); }
.sppi-partner__site { margin-top: 8px; font: 600 16px/1.3 var(--sppi-sans); }
@media (max-width: 600px) {
	.sppi-coalition__facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.sppi-coalition__facts dd + dt { margin-top: 10px; }
}

.sppi-archive-head { margin-top: 72px !important; display: flex; flex-direction: column; gap: 16px; }
.sppi-archive-head h1 { margin: 0; }
.wp-block-term-description { max-width: 46em; font-size: 20px; }
.sppi-type-filter ul { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 8px 0 0; padding: 12px 0; border-top: var(--sppi-hair-navy); border-bottom: var(--sppi-hair); font: 600 15px/1.3 var(--sppi-sans); }
.sppi-type-filter a { color: var(--sppi-ink); text-decoration: none; }
.sppi-type-filter a[aria-current], .sppi-type-filter a:hover { color: var(--sppi-navy); text-decoration: underline; }
.sppi-archive-list { margin-top: 24px !important; }
.sppi-archive-list .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.sppi-archive-list .wp-block-post { display: flex; flex-direction: column; gap: 8px; padding: 24px 0 26px; border-bottom: var(--sppi-hair); margin: 0; }
.sppi-archive-list .wp-block-post-title { margin: 0; font-size: 26px; font-style: normal; letter-spacing: 0; text-transform: none; }
.sppi-archive-list .wp-block-post-title a { color: var(--sppi-navy); text-decoration: none; }
.sppi-archive-list .wp-block-post-excerpt { margin: 0; }
.sppi-archive-list .wp-block-post-excerpt__excerpt { margin: 0; font-size: 18px; line-height: 1.55; }
.wp-block-query-pagination { margin-top: 40px; }

/* ---------- People ---------- */
.sppi-people__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 48px 40px; margin-top: 32px; }
.sppi-person-card { display: flex; flex-direction: column; gap: 6px; }
.sppi-person-card__photo { display: block; width: 200px; max-width: 100%; margin-bottom: 10px; }
.sppi-headshot { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; width: 100%; border-radius: 50%; overflow: hidden; background: var(--sppi-quiet); }
.sppi-headshot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.sppi-headshot.is-empty { font: 600 44px/1 var(--sppi-serif); color: var(--sppi-navy); }
.sppi-person-card__name { margin: 0; font: 600 24px/1.2 var(--sppi-serif); font-style: normal; letter-spacing: 0; text-transform: none; }
.sppi-person-card__name a { color: var(--sppi-navy); text-decoration: none; }
.sppi-person-card__title { margin: 0; font-style: italic; font-size: 18px; line-height: 1.4; }
.sppi-person-card__contact p, .sppi-person-card__affiliation { margin: 0; font: 15px/1.5 var(--sppi-sans); color: var(--sppi-gray); }

.sppi-person { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 720px); gap: 40px 72px; margin-top: 72px !important; align-items: start; }
.sppi-person-headshot .sppi-headshot { max-width: 300px; }
.sppi-person-headshot .sppi-headshot.is-empty { font-size: 72px; }
.sppi-headshot__download { margin: 16px 0 0; font: 600 15px/1.3 var(--sppi-sans); }
.sppi-person__main > .wp-block-post-title { margin: 0; }
.sppi-person__main > .sppi-person-group + .wp-block-post-title { margin-top: 14px; }
.sppi-person-title { margin-top: 10px; }
.sppi-person-title p { margin: 0; }
.sppi-person-title__role { font-style: italic; font-size: 24px; line-height: 1.35; }
.sppi-person-title__affiliation { font: 17px/1.5 var(--sppi-sans); color: var(--sppi-gray); }
.sppi-person-contact { margin: 18px 0 24px; padding: 14px 0; border-top: var(--sppi-hair); border-bottom: var(--sppi-hair); font: 17px/1.6 var(--sppi-sans); }
.sppi-person-contact p { margin: 0; }

/* ---------- Footer ---------- */
.sppi-footer { padding-block: 72px 40px; margin-block-start: 0 !important; }
.sppi-footer a { color: #fff; text-decoration: none; }
.sppi-footer a:hover { text-decoration: underline; }
.sppi-footer__top { gap: 48px 64px; }
.sppi-footer__brand { gap: 28px; flex: 1 1 320px; }
.sppi-brand--stacked img { height: 96px; width: auto; }
.sppi-contact { overflow-wrap: anywhere; }
.sppi-contact p { margin: 0; font: 16px/1.75 var(--sppi-serif); }
.sppi-footer__links { flex: 2 1 560px; gap: 32px 56px; }
.sppi-footer__col { flex: 1 1 140px; gap: 12px; }
.sppi-footer .sppi-kicker { color: #fff; }
.sppi-footer ul.is-style-plain { font: 16px/1.4 var(--sppi-sans); }
ul.is-style-plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sppi-footer__bottom { margin-top: 56px !important; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.35); font: 14px/1.5 var(--sppi-sans); gap: 12px 32px; }
.sppi-footer__bottom p { margin: 0; }
.sppi-footer__bottom a { text-decoration: underline; }

/* ---------- Donor pages (design system: donor-facing pieces use terracotta and Source Sans 3) ---------- */
.is-style-donor { font-family: var(--sppi-sans); }
.is-style-donor :where(h1, h2, h3) { font-family: var(--sppi-sans); font-weight: 700; font-style: normal; color: var(--sppi-ink); } /* Ink headlines, as on the donor sheet; */
.is-style-donor :where(h2) { color: var(--wp--preset--color--terracotta-text); } /* section heads are terracotta labels. */
/* White on terracotta passes only for large type, so buttons use terracotta text (#C1542B, 4.6:1). */
.is-style-donor .wp-block-button__link { background: var(--wp--preset--color--terracotta-text); border-color: var(--wp--preset--color--terracotta-text); }
.is-style-donor .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--terracotta-text); }

/* The Donor page template (Champions) takes the donor look inside its main column, leaving the
   shared header and footer as they are: terracotta where the site uses navy, Source Sans 3 throughout.
   In the editor, which shows the page without its template, a page opening with a Donor hero
   takes the same look. */
:is(.sppi-donor-page, .is-root-container:has(> :where(.is-style-donor-hero))) {
	--wp--preset--color--navy: var(--wp--preset--color--terracotta-text);
	--wp--preset--color--accent: var(--wp--preset--color--terracotta-text);
	--sppi-navy: var(--wp--preset--color--terracotta-text);
	--sppi-hair-navy: 1px solid var(--wp--preset--color--terracotta);
	--wp--preset--font-family--serif: var(--wp--preset--font-family--sans);
	--sppi-serif: var(--wp--preset--font-family--sans);
	font-family: var(--sppi-sans);
	font-size: 18px;
	line-height: 1.55;
}
.sppi-donor-page { padding-bottom: 0; }
:is(.sppi-donor-page .wp-block-post-content, .is-root-container:has(> :where(.is-style-donor-hero))) > * { margin-block: 0; } /* Sections meet edge to edge and set their own padding. */
:is(.sppi-donor-page, .is-root-container:has(> :where(.is-style-donor-hero))) :is(h1, h2, h3, h4, h5, h6) { font-family: var(--sppi-sans); font-style: normal; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--sppi-ink); }
:is(.sppi-donor-page, .is-root-container:has(> :where(.is-style-donor-hero))) h4 { font-size: 22px; line-height: 1.25; }
:is(.sppi-donor-page, .is-root-container:has(> :where(.is-style-donor-hero))) :is(.is-layout-flex, .is-layout-grid) > * { margin: 0; } /* Rows and grids space their blocks with the gap alone. */
:is(.sppi-donor-page, .is-root-container:has(> :where(.is-style-donor-hero))) :is(.wp-element-button, .wp-block-button__link) { padding: 14px 26px; font-size: 17px; font-weight: 700; transition: background-color 120ms cubic-bezier(.2, 0, 0, 1), color 120ms cubic-bezier(.2, 0, 0, 1); }

/* Donor hero (Cover): the full-colour photo under a dark wash, text at the left of the wide column. */
.wp-block-cover.is-style-donor-hero { padding-left: var(--wp--style--root--padding-left, 20px); padding-right: var(--wp--style--root--padding-right, 20px); background-color: #0b0b0d; }
.wp-block-cover.is-style-donor-hero h1 { margin: 0; font: 700 clamp(46px, 7vw, 100px)/0.95 var(--sppi-sans); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.wp-block-cover.is-style-donor-hero .is-style-kicker { color: #E8865F; } /* Terracotta light: small terracotta text on dark photography. */
.wp-block-cover.is-style-donor-hero .is-style-lead { max-width: 26em; font-size: 22px; color: #fff; }
.wp-block-cover.is-style-donor-hero .wp-block-buttons { margin-top: 12px; }

/* Band (Heading, the SectionBand): a full-width terracotta strip 32pt tall, its caps in line with the content column. */
.wp-block-heading.is-style-band {
	--band-h: 42.67px;
	box-sizing: border-box;
	height: var(--band-h);
	margin-block: 0; /* The sides stay WordPress's: a full-width block reaches the window's edges. */
	padding: 0 var(--wp--style--root--padding-right, 20px) 0 calc(var(--wp--style--root--padding-left, 20px) + max(0px, (100% - var(--wp--style--global--wide-size, 1240px)) / 2));
	overflow: hidden;
	background: var(--wp--preset--color--terracotta);
	color: #fff;
	font: 700 clamp(19px, 5vw, 24px)/var(--band-h) var(--sppi-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
}
@supports (text-box: trim-both cap alphabetic) {
	/* As in the component, the capitals are centred in the strip: the line is trimmed to their height. */
	.wp-block-heading.is-style-band { height: auto; padding-block: calc((var(--band-h) - 1cap) / 2); line-height: 1; text-box: trim-both cap alphabetic; }
}

/* Kicker (Paragraph or Heading): a tracked caps label, terracotta on donor pages and navy elsewhere. */
p.is-style-kicker, .wp-block-heading.is-style-kicker { margin: 0; font: 700 12px/1.25 var(--sppi-sans); letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; color: var(--sppi-navy); }
/* Display (Heading): a section's statement. Lead, Note and Amount (Paragraph). */
.wp-block-heading.is-style-display { max-width: 18em; font: 700 40px/1.12 var(--sppi-sans); letter-spacing: 0; text-transform: none; text-wrap: balance; }
p.is-style-lead { max-width: 34em; font-size: 21px; line-height: 1.5; text-wrap: pretty; }
p.is-style-note { font: 400 15px/1.4 var(--sppi-sans); color: var(--sppi-gray); }
p.is-style-amount { font: 700 30px/1.1 var(--sppi-sans); font-variant-numeric: lining-nums tabular-nums; color: var(--sppi-ink); }

/* Label row (Group): a 176px label column beside the content; on phones the label sits above it. */
.wp-block-group.is-style-label-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; }
.wp-block-group.is-style-label-row:has(> p:last-child) { align-items: baseline; } /* A paragraph alone lines up with the label's baseline. */
.wp-block-group.is-style-label-row:has(> .is-layout-grid) { row-gap: 16px; }
.wp-block-group.is-style-label-row > * { margin: 0; }
.wp-block-group.is-style-label-row > :first-child { flex: 0 0 176px; min-width: 0; }
.wp-block-group.is-style-label-row > :not(:first-child) { flex: 999 1 480px; min-width: 0; }
.wp-block-group.is-style-label-row > p:last-child:not(:first-child) { max-width: 40em; }
.wp-block-group.is-style-label-row > p.is-style-lead:last-child { max-width: 38em; }
/* Label rows (Group): rows with a rule between each, the first terracotta (navy off donor pages), the rest gray. */
.wp-block-group.is-style-label-rows > .is-style-label-row + .is-style-label-row { padding-top: 24px; border-top: var(--sppi-hair); }
.wp-block-group.is-style-label-rows > .is-style-label-row:first-child + .is-style-label-row { border-top: var(--sppi-hair-navy); }
/* Label list (Group): rows between hairlines, the top one terracotta (navy off donor pages). */
.wp-block-group.is-style-label-list { border-top: var(--sppi-hair-navy); }
.wp-block-group.is-style-label-list > * { margin: 0; padding-block: 24px; border-bottom: var(--sppi-hair); }
.wp-block-group.is-style-label-list > .is-style-label-row { row-gap: 8px; }

/* Stat tile (Group, the StatTile): a figure over its label, white on the tile's colour (teal, gold or
   terracotta, the group's background). White on teal and gold is a brand decision: keep these sizes. */
.wp-block-group.is-style-stat-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; box-sizing: border-box; min-height: 128px; color: #fff; }
.wp-block-group.is-style-stat-tile, .wp-block-group.is-style-stat-tile.has-background { padding: 18.67px 21.33px; }
.wp-block-group.is-style-stat-tile:not(.has-background) { background: var(--wp--preset--color--teal); }
.wp-block-group.is-style-stat-tile > * { margin: 0; color: inherit; }
.wp-block-group.is-style-stat-tile > :first-child { font: 700 40px/1 var(--sppi-sans); }
.wp-block-group.is-style-stat-tile > :last-child:not(:first-child) { font: 700 16px/1.15 var(--sppi-sans); letter-spacing: 0.04em; text-align: right; text-transform: uppercase; }
/* Groups given these styles lay out their own blocks, whatever layout the group was made with. */
:is(.is-style-label-row, .is-style-stat-tile).is-layout-constrained > * { max-width: none; margin-left: 0 !important; margin-right: 0 !important; }

/* Big quote (Quote, the BigQuote): a testimonial in large bold type with its credit set right, in the
   colour of the band it sits on. On wider screens it lines up with label rows' content. */
.wp-block-quote.is-style-big-quote { margin: 0; padding: 0; border: 0; color: inherit; font-style: normal; }
.wp-block-quote.is-style-big-quote p { max-width: 920px; margin: 0; font: 700 clamp(28px, 3.4vw, 48px)/1.2 var(--sppi-sans); color: inherit; text-wrap: pretty; }
.wp-block-quote.is-style-big-quote cite { display: block; max-width: 920px; margin-top: 32px; font: italic 400 clamp(24px, 2.2vw, 32px)/1.3 var(--sppi-sans); color: inherit; text-align: right; }
.wp-block-quote.is-style-big-quote cite::before { content: none; }
@media (min-width: 740px) { .wp-block-quote.is-style-big-quote { padding-left: 200px; } }

/* Text link (Button): reads as a bold underlined link beside a filled button. */
.wp-block-button.is-style-text-link > .wp-block-button__link { padding: 0; border: 0; background: none; color: inherit; font: 700 17px/1.3 var(--sppi-sans); letter-spacing: 0; text-transform: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wp-block-button.is-style-text-link > .wp-block-button__link:hover { background: none; color: inherit; text-decoration-thickness: 2px; }

/* ---------- Plugin blocks from the current site ---------- */
.wp-block-jetpack-mailchimp input[type="email"], .jetpack_subscription_widget input[type="email"] { border: var(--sppi-hair); border-radius: 0; padding: 10px 12px; font: 16px var(--sppi-sans); }

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:empty { display: none; } /* Empty columns only space things out side by side; stacked, they leave gaps. */
	.sppi-brand img { height: 44px; }
	:root { --sppi-hero-height: 600px; }
	.sppi-hero__text, .sppi-paper-cover { padding-block: 48px; }
	.wp-site-blocks > header.wp-block-template-part + .sppi-main > .sppi-paper-cover:first-child { padding-top: calc(48px + var(--sppi-header-h)); }
	.sppi-hero__dek, .sppi-paper-cover__dek p { font-size: 18px; line-height: 1.45; } /* so a long subtitle under a long title still fits the band */
	.sppi-paper-body, .sppi-oped, .sppi-person { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.sppi-toc { position: static; max-height: none; border: var(--sppi-hair); padding: 12px 16px; }
	.sppi-toc summary { padding-bottom: 0; }
	.sppi-toc summary::after { content: " +"; }
	.sppi-toc details[open] summary { padding-bottom: 12px; }
	.sppi-toc details[open] summary::after { content: " −"; }
	.sppi-event { grid-template-columns: 1fr; }
	.sppi-item__title, .sppi-archive-list .wp-block-post-title { font-size: 23px; }
	.sppi-outlets__list { font-size: 20px; }
	.sppi-person-headshot .sppi-headshot { max-width: 220px; }
}

/* The narrowest phones (320px) wrap long headlines and subtitles into more lines: a taller band for all. */
@media (max-width: 359px) { :root { --sppi-hero-height: 660px; } }

/* Phones: the footer's contact details stack, one per line, with a small gap between groups. */
@media (max-width: 600px) {
	.sppi-contact :is(.sppi-sep, wbr) { display: none; } /* A <wbr> left between stacked items shows as a blank line. */
	.sppi-contact__item { display: block; }
	.sppi-contact p + p { margin-top: 12px; }
}