/* =========================================================
   DSAI-RC — BRAND SYSTEM
   Single source of truth for the whole site. Loaded everywhere,
   right after style.css, so no page can fall back to an older look.

       #082743  navy    headings, body copy, dark bands
       #005AA3  blue    the rounded slab, links, accent numerals
       #3D7597  steel   hairlines, borders, small controls
       #8CB716  lime    primary call-to-action
       #F2F4EF  paper   alternating section background
       #161616  ink     nav labels, hero gradient

   Type is Figtree throughout: 72 / 40 / 32 / 28 / 18 / 16 / 14 / 12.
   ========================================================= */

:root {
	--ev-navy: #082743;
	--ev-blue: #005AA3;
	--ev-steel: #3D7597;
	--ev-lime: #8CB716;
	--ev-paper: #F2F4EF;
	--ev-ink: #161616;
	--ev-line: rgba(61, 117, 150, 0.70);
	--ev-line-soft: rgba(61, 117, 151, 0.50);
	--ev-grey: #707070;

	--ev-lime-hover: #7BA113;
	--ev-blue-hover: #00487F;
	--ev-blue-light: #2E9BFF;

	/* One gutter for the whole site — header, bands and footer all line
	   up on it. It caps the content column at 1280px and collapses to a
	   20px margin once the window is narrower than that. 1280 (not the
	   1440 this started at) is what puts the left rule where it reads
	   right at 100% zoom — 1440 pushed it close enough to the edge that
	   it only looked correct once the page was zoomed out to ~90%. */
	--ev-content: 1280px;
	--ev-header-h: 67px;
	--ev-header-gap: 4px;
	--ev-header-inset: var(--ev-header-gap);
	--ev-header-ease: 0.3s ease;
	--ev-gutter: max(20px, calc((100vw - var(--ev-content)) / 2));
	--ev-radius: 12px;
	--ev-radius-lg: 18px;
	--ev-slab: 138px;
	--ev-pill: 22px;

	--ev-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/*
 * The theme's original blue tokens are still read by every rule in
 * style.css. Remapping them here rebrands the pages that have no skin
 * file of their own — search, 404, archive, contact — for free.
 */
:root {
	--dsairc-primary: var(--ev-navy);
	--dsairc-primary-deep: var(--ev-navy);
	--dsairc-accent: var(--ev-blue);
	--dsairc-accent-soft: var(--ev-steel);

	--dsairc-surface: var(--ev-paper);
	--dsairc-surface-tint: var(--ev-paper);
	--dsairc-navy: var(--ev-navy);
	--dsairc-navy-soft: var(--ev-blue);

	--dsairc-body: var(--ev-navy);
	--dsairc-muted: var(--ev-steel);
	--dsairc-line: var(--ev-line-soft);

	--dsairc-radius: var(--ev-radius);
	--dsairc-radius-sm: 8px;
	--dsairc-radius-lg: var(--ev-radius-lg);
	--dsairc-radius-pill: var(--ev-pill);

	--dsairc-shadow-sm: none;
	--dsairc-shadow: none;

	/* Kept so older rules that still name them keep resolving. */
	--dsairc-deep: var(--ev-navy);
	--dsairc-mid: var(--ev-blue);
	--dsairc-teal: var(--ev-steel);
	--dsairc-orange: var(--ev-lime);
	--dsairc-orange-hover: var(--ev-lime-hover);
	--dsairc-teal-tint: var(--ev-paper);
	--dsairc-deep-dark: var(--ev-navy);
	--dsairc-r: var(--ev-radius);
	--dsairc-gutter: 0px;
}


/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

body {
	/* The bar is fixed, so the document starts below it. One token, so
	   the offset can never drift away from the bar's real height. */
	padding-top: calc(var(--ev-header-h) + var(--ev-header-gap));
	background: #ffffff;
	color: var(--ev-navy);
	font-family: var(--ev-font);
}

/* WordPress' 1.2rem block gap shows up as a white seam wherever two
   coloured bands meet — at the top level and between the bands inside
   <main>. Every band on the site joins the next edge to edge. */
.wp-site-blocks > *,
.dsairc-home > *,
.dsairc-inner-page > * {
	margin-block: 0 !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	color: var(--ev-navy);
	font-family: var(--ev-font);
	letter-spacing: 0;
}

body a {
	color: var(--ev-blue);
}


/* ---------------------------------------------------------
   LAYOUT — the 390px gutter and the hairline grid
   Every band is edge-to-edge; the content sits inside the gutter,
   and a 1px steel rule runs down the left of the content column.
   --------------------------------------------------------- */

.ev-band {
	padding-inline: var(--ev-gutter);
}

.ev-band.is-paper {
	background: var(--ev-paper);
}

.ev-band.is-navy {
	background: var(--ev-navy);
	color: #ffffff;
}

.ev-section {
	position: relative;
	padding-block: 80px 60px;
}

/* Vertical hairline down the left edge of the content column. */
.ev-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: -40px;
	width: 1px;
	height: 100%;
	background: var(--ev-line);
}

/* Horizontal hairline closing a section. */
.ev-section.has-rule::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: -40px;
	width: 100vw;
	height: 1px;
	background: var(--ev-line);
}

@media (max-width: 1280px) {
	.ev-section::before,
	.ev-section.has-rule::after {
		left: -16px;
	}
}


/* ---------------------------------------------------------
   TYPE SCALE
   --------------------------------------------------------- */

.ev-eyebrow {
	margin: 0 0 16px;
	color: var(--ev-navy);
	font-size: 28px;
	font-weight: 700;
	line-height: 35px;
}

.ev-title {
	max-width: 778px;
	margin: 0;
	color: var(--ev-navy);
	font-size: clamp(28px, 2.3vw, 40px);
	font-weight: 400;
	line-height: 1.1;
}

/* The reference sets the opening phrase bold and lets the rest run
   regular inside the same sentence. */
.ev-title strong,
.ev-title b {
	font-weight: 700;
}

.ev-title-lg {
	font-size: clamp(36px, 4.2vw, 72px);
	font-weight: 700;
	line-height: 1;
}

.ev-lede {
	margin: 0;
	color: var(--ev-navy);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
}

.ev-meta {
	margin: 0;
	color: var(--ev-navy);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}


/* ---------------------------------------------------------
   BUTTONS — 206px minimum, 22px radius, three fills
   --------------------------------------------------------- */

.ev-btn,
body .dsairc-btn,
body .dsairc-link-arrow,
body .dsairc-post-card .wp-block-read-more,
body .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-width: 206px;
	padding: 12px 32px;
	border: 1px solid transparent;
	border-radius: var(--ev-pill);
	font-family: var(--ev-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease;
}

/* Lime — the primary action. */
.ev-btn,
body .dsairc-btn-primary,
body .dsairc-post-card .wp-block-read-more {
	background: var(--ev-lime);
	border-color: var(--ev-lime);
	color: var(--ev-navy) !important;
}

.ev-btn:hover,
body .dsairc-btn-primary:hover,
body .dsairc-post-card .wp-block-read-more:hover {
	background: var(--ev-lime-hover);
	border-color: var(--ev-lime-hover);
	color: var(--ev-navy) !important;
}

/* Navy — used on paper and white bands. */
.ev-btn-navy,
body .dsairc-btn-solid,
body .dsairc-link-arrow {
	background: var(--ev-navy);
	border-color: var(--ev-navy);
	color: #ffffff !important;
}

.ev-btn-navy:hover,
body .dsairc-btn-solid:hover,
body .dsairc-link-arrow:hover {
	background: var(--ev-blue);
	border-color: var(--ev-blue);
	color: #ffffff !important;
}

/* White — used inside the blue slab. */
.ev-btn-white,
body .dsairc-btn-ghost {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--ev-navy) !important;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.ev-btn-white:hover,
body .dsairc-btn-ghost:hover {
	background: var(--ev-paper);
	border-color: var(--ev-paper);
	color: var(--ev-navy) !important;
}

body .dsairc-btn svg,
body .ev-btn svg {
	flex-shrink: 0;
}


/* ---------------------------------------------------------
   SHARE + UPVOTE — home-grown replacement for Jetpack's Sharedaddy
   and Likes widgets (see inc/dsairc-social.php).
   --------------------------------------------------------- */

.dsairc-engagement {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 24px 0;
}

.dsairc-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	font-family: var(--ev-font);
}

.dsairc-share-label {
	font-weight: 600;
	color: var(--ev-navy);
}

.dsairc-share-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: var(--ev-pill);
	background: var(--ev-navy);
	color: #ffffff !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
}

.dsairc-share-btn:hover {
	background: var(--ev-blue);
}

.dsairc-upvote-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 18px;
	border: 1px solid var(--ev-line);
	border-radius: var(--ev-pill);
	background: transparent;
	color: var(--ev-navy);
	font-family: var(--ev-font);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dsairc-upvote-btn:hover {
	border-color: var(--ev-lime);
	color: var(--ev-lime-hover);
}

.dsairc-upvote-btn.is-upvoted {
	background: var(--ev-lime);
	border-color: var(--ev-lime);
	color: var(--ev-navy);
	cursor: default;
}

.dsairc-upvote-icon {
	flex-shrink: 0;
}


/* ---------------------------------------------------------
   NEWS — "Popular" (by upvote) section. Cards reuse .dsairc-story-card
   (assets/css/listing-pages.css); only the grid/band need styling here.
   --------------------------------------------------------- */

.dsairc-story-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

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

.dsairc-popular-band {
	background: var(--ev-paper);
}

.dsairc-dataset-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 24px 0;
	padding: 20px 24px;
	border-radius: var(--ev-radius);
	background: var(--ev-paper);
}

.dsairc-dataset-license {
	margin: 0;
	color: var(--ev-navy);
	font-size: 15px;
}

@media (max-width: 782px) {
	.dsairc-story-grid {
		grid-template-columns: 1fr;
	}
}


/* ---------------------------------------------------------
   THE SLAB — signature motif: a #005AA3 block that bleeds off the
   left edge of the viewport and rounds 138px on its right side.
   --------------------------------------------------------- */

.ev-slab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: 60px 60px 60px 0;
	border-top-right-radius: var(--ev-slab);
	border-bottom-right-radius: var(--ev-slab);
	background: var(--ev-blue);
	color: #ffffff;
}

/* Carries the fill out to the left edge of the window. */
.ev-slab::before {
	content: "";
	position: absolute;
	top: 0;
	right: 100%;
	width: 100vw;
	height: 100%;
	background: var(--ev-blue);
}

.ev-slab-title {
	max-width: 545px;
	margin: 0;
	color: #ffffff;
	font-size: clamp(28px, 2.3vw, 40px);
	font-weight: 700;
	line-height: 1.1;
}

.ev-slab-title strong,
.ev-slab-title b {
	font-weight: 700;
}

.ev-slab-title.is-light {
	font-weight: 400;
}


/* ---------------------------------------------------------
   CARDS
   --------------------------------------------------------- */

.ev-card-media {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--ev-radius);
}

.ev-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ev-card-title {
	margin: 0;
	color: var(--ev-navy);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.ev-card-title a {
	color: var(--ev-navy);
	text-decoration: none;
}

.ev-card-title a:hover {
	color: var(--ev-blue);
}

.ev-card-title-sm {
	font-size: 18px;
	line-height: 1.2;
}


/* ---------------------------------------------------------
   HEADER — plain white bar, logo left, navigation right.
   The bar floats on a 4px inset at the top of the page and
   docks flush once theme.js adds body.is-scrolled.

   Only the FRAME moves. The bar grows downward by exactly the
   inset it loses, and its padding grows by exactly the inset
   its left edge loses, so the logo and the links keep the same
   x and y through the whole transition. Every property in that
   sum shares one duration and easing, or they cancel only at
   the endpoints and the logo jitters in between.
   --------------------------------------------------------- */

.dsairc-header-shell {
	top: var(--ev-header-inset) !important;
	left: var(--ev-header-inset) !important;
	right: var(--ev-header-inset) !important;
	width: auto !important;
	max-width: none !important;
	transform: none !important;
	transition:
		top var(--ev-header-ease),
		left var(--ev-header-ease),
		right var(--ev-header-ease);
}

body.is-scrolled .dsairc-header-shell {
	--ev-header-inset: 0px;
}

.dsairc-sticky-header {
	box-sizing: border-box;
	gap: 24px;
	min-height: calc(var(--ev-header-h) + var(--ev-header-gap) - var(--ev-header-inset));
	padding-top: calc(var(--ev-header-gap) - var(--ev-header-inset)) !important;
	padding-bottom: 0 !important;
	padding-inline: calc(var(--ev-gutter) - var(--ev-header-inset) - 1px) !important;
	background: #ffffff !important;
	border: 1px solid var(--ev-line-soft);
	border-radius: var(--ev-radius) !important;
	box-shadow: none !important;
	transition:
		min-height var(--ev-header-ease),
		padding-top var(--ev-header-ease),
		padding-left var(--ev-header-ease),
		padding-right var(--ev-header-ease),
		border-radius var(--ev-header-ease),
		border-color var(--ev-header-ease);
}

/* Docked: square corners, and only the underline separates it from the page. */
body.is-scrolled .dsairc-sticky-header {
	border-color: transparent transparent var(--ev-line-soft);
	border-radius: 0 !important;
}

.dsairc-header-logo img {
	filter: none !important;
	width: 150px !important;
	max-width: 150px;
	padding: 0;
	border-radius: 0;
	background: transparent;
}

/* Logo left, links right — the CTA that used to hold the right end is gone. */
.dsairc-header-navigation {
	flex: 0 0 auto !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	min-width: 0;
}

.dsairc-header-navigation .wp-block-navigation__container {
	flex-wrap: nowrap !important;
	gap: clamp(10px, 1.8vw, 32px) !important;
}

.dsairc-header-navigation .wp-block-navigation-item__content {
	padding-block: 20px 16px;
	border-bottom: 3px solid transparent;
	color: var(--ev-ink) !important;
	font-family: var(--ev-font);
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 20px;
	white-space: nowrap;
}

.dsairc-header-navigation .wp-block-navigation-item__content:hover,
.dsairc-header-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--ev-steel);
	color: var(--ev-ink) !important;
	opacity: 1;
}

/* Submenus open below the bar, not stretched by the nowrap row. */
.dsairc-header-navigation .wp-block-navigation__submenu-container {
	gap: 0 !important;
}

.dsairc-header-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: 10px;
	border-bottom: 0;
	white-space: nowrap;
}


/* ---------------------------------------------------------
   MOBILE / TABLET OVERLAY
   Below 1024px the bar collapses to a hamburger and the menu
   opens full screen. Every desktop-bar rule above — the nowrap
   row, the 20/16 padding, the 3px underline — has to be undone
   here, or the panel inherits a 106px-tall row per link and an
   underline that reads as a stray divider.
   --------------------------------------------------------- */

.dsairc-header-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-wrap: nowrap !important;
	gap: 0 !important;
	padding: 88px 0 40px !important;
}

.dsairc-header-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--ev-line-soft);
}

.dsairc-header-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	min-height: 0 !important;
	padding: 16px 24px !important;
	border: 0 !important;
	border-left: 4px solid transparent !important;
	color: var(--ev-navy) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	white-space: normal !important;
}

.dsairc-header-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	border-left-color: var(--ev-lime) !important;
	background: var(--ev-paper);
}

/* Children sit indented under their parent, one weight lighter, so the
   panel reads as two levels instead of one flat list. */
.dsairc-header-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	gap: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.dsairc-header-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

.dsairc-header-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 12px 24px 12px 48px !important;
	color: var(--ev-steel) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
}

/* The submenu toggle is a button in the overlay — strip the chrome so it
   matches the plain links beside it. */
.dsairc-header-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	width: 100%;
	justify-content: flex-start;
}

/* The hamburger and the close button share the bar's own gutter. */
.dsairc-header-navigation .wp-block-navigation__responsive-container-close {
	top: 14px !important;
	right: var(--ev-gutter) !important;
}

/* Between 1024 and 1100 the row is still inline and needs the button's
   space; once the hamburger takes over there is room for it again. */
@media (max-width: 1100px) and (min-width: 1025px) {
	.dsairc-header-cta {
		display: none;
	}
}

/* The bar no longer floats, so nothing needs to be pulled up under it. */
.dsairc-home,
.dsairc-inner-page {
	margin-top: 0 !important;
}


/* ---------------------------------------------------------
   PAGE HERO — photo under a gradient that lands on #161616
   --------------------------------------------------------- */

/* Pull the band up under the fixed bar so the photo runs to the very top
   of the window; body's header offset would otherwise leave a white strip
   above it on every page but the home page. */
.dsairc-page-hero {
	position: relative;
	isolation: isolate;
	margin: calc(-1 * (var(--ev-header-h) + var(--ev-header-gap))) 0 0 !important;
	border-radius: 0 !important;
	background: var(--ev-ink);
	min-height: clamp(400px, 34vw, 560px);
}

/* The photo is a real <img> stack rather than a CSS background, so a spot
   holding several images can cross-fade between them. */
.dsairc-page-hero .dsairc-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.dsairc-page-hero-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(22, 22, 22, 0) 40%, var(--ev-ink) 99%);
	pointer-events: none;
}

.dsairc-page-hero-inner {
	position: relative;
	z-index: 2;
}

/* The band below rides 72px up over this one. Without the deeper foot the
   subtitle disappears underneath it. */
.dsairc-page-hero-inner {
	max-width: none;
	padding: calc(160px + var(--ev-header-h)) var(--ev-gutter) 140px;
}

.dsairc-page-hero-title {
	max-width: 22ch;
	color: #ffffff;
	font-size: clamp(32px, 3.4vw, 56px);
	font-weight: 700;
	line-height: 1.05;
	text-shadow: none;
}

.dsairc-page-hero-subtitle {
	color: rgba(255, 255, 255, 0.92);
	font-size: 18px;
	line-height: 1.3;
}

.dsairc-page-hero .dsairc-section-eyebrow,
.dsairc-section-eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	color: var(--ev-navy);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 35px;
	text-transform: none;
}

.dsairc-page-hero .dsairc-section-eyebrow {
	color: #ffffff;
}

.dsairc-section-eyebrow::before,
.dsairc-section-eyebrow::after {
	display: none !important;
}

.dsairc-page-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin: 18px 0 0;
}

.dsairc-page-hero-date {
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;
}

.dsairc-page-hero-term {
	padding: 8px 20px;
	border-radius: var(--ev-pill);
	background: var(--ev-lime);
	color: var(--ev-navy) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
}

.dsairc-page-hero-term:hover {
	background: var(--ev-lime-hover);
}


/* ---------------------------------------------------------
   SHARED TITLES / TEXT used by the existing markup
   --------------------------------------------------------- */

.dsairc-section-title,
.dsairc-section-title-sm {
	max-width: 778px;
	color: var(--ev-navy);
	font-size: clamp(28px, 2.3vw, 40px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
}

.dsairc-section-title-center {
	margin-inline: 0;
	text-align: left;
}

.dsairc-section-text {
	max-width: 778px;
	color: var(--ev-navy);
	font-size: 18px;
	line-height: 1.5;
}

.dsairc-block-title {
	margin: 0 0 22px;
	color: var(--ev-navy);
	font-size: 28px;
	font-weight: 700;
	line-height: 35px;
}

.dsairc-chip,
.dsairc-chip-terms a,
.dsairc-category-ribbon a,
.dsairc-projects-category {
	display: inline-block;
	padding: 6px 16px;
	border-radius: var(--ev-pill);
	background: var(--ev-paper);
	color: var(--ev-navy) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	text-transform: none !important;
}

.dsairc-category-ribbon a:hover {
	background: var(--ev-navy);
	color: #ffffff !important;
}


/* ---------------------------------------------------------
   POST CARDS — flat, no border, 12px image radius
   --------------------------------------------------------- */

.dsairc-post-card {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible;
}

.dsairc-post-card:hover {
	transform: none;
	box-shadow: none !important;
}

.dsairc-post-card .wp-block-post-featured-image {
	margin: 0 0 22px !important;
}

.dsairc-post-card .wp-block-post-featured-image img {
	border-radius: var(--ev-radius) !important;
}

.dsairc-post-card .wp-block-group {
	padding: 0 !important;
}

.dsairc-post-card .wp-block-post-title {
	margin: 0 0 12px !important;
}

.dsairc-post-card .wp-block-post-title a {
	color: var(--ev-navy) !important;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.dsairc-post-card .wp-block-post-title a:hover {
	color: var(--ev-blue) !important;
}

.dsairc-post-card .wp-block-post-date {
	color: var(--ev-navy) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
}

.dsairc-post-card .wp-block-post-excerpt {
	color: var(--ev-navy);
	font-size: 18px;
	line-height: 1.3;
}

.dsairc-post-card svg {
	display: none;
}

.dsairc-card-separator {
	display: none;
}

.dsairc-post-card .wp-block-read-more {
	margin-top: 16px;
}


/* ---------------------------------------------------------
   PAGINATION
   --------------------------------------------------------- */

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.page-numbers {
	min-width: 0;
	padding: 10px 20px;
	border-radius: var(--ev-pill);
	background: var(--ev-paper);
	color: var(--ev-navy) !important;
	font-weight: 600;
	text-decoration: none !important;
}

.page-numbers.current {
	background: var(--ev-navy);
	color: #ffffff !important;
}


/* ---------------------------------------------------------
   FOOTER — paper band, steel rules, navy type
   --------------------------------------------------------- */

footer.wp-block-template-part > .wp-block-group {
	margin: 0 !important;
	padding: 40px var(--ev-gutter) !important;
	border-radius: 0 !important;
	border-top: 1px solid var(--ev-steel);
	border-bottom: 1px solid var(--ev-steel);
	background: var(--ev-paper) !important;
	color: var(--ev-navy) !important;
}

footer.wp-block-template-part h4 {
	color: var(--ev-navy);
	font-size: 18px;
	font-weight: 700;
	line-height: 18px;
}

footer.wp-block-template-part p,
footer.wp-block-template-part a,
footer.wp-block-template-part li {
	color: var(--ev-navy) !important;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
}

footer.wp-block-template-part .wp-block-navigation-item__content {
	color: var(--ev-navy) !important;
	font-size: 18px;
	font-weight: 400;
}

footer.wp-block-template-part .wp-block-separator {
	border-color: var(--ev-steel) !important;
}

footer.wp-block-template-part .wp-block-social-links .wp-social-link {
	background: transparent;
}

footer.wp-block-template-part .wp-block-image img {
	background: transparent !important;
	padding: 0 !important;
}


/* ---------------------------------------------------------
   FOOTER EXTRAS — the dynamic Popular Post list and the
   dataset call to action.
   --------------------------------------------------------- */

.dsairc-footer-posts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dsairc-footer-posts li + li {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--ev-line-soft);
}

.dsairc-footer-post-date {
	display: block;
	margin-bottom: 4px;
	color: var(--ev-navy) !important;
	font-size: 12px !important;
	font-weight: 700;
	line-height: 1.2;
}

.dsairc-footer-post-title {
	color: var(--ev-navy) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.3;
	text-decoration: none !important;
}

.dsairc-footer-post-title:hover {
	color: var(--ev-blue) !important;
}

.dsairc-footer-cta {
	margin-top: 20px;
}

.dsairc-footer-highlight-label {
	margin: 0 0 8px;
	color: var(--ev-lime);
	font-size: 13px;
	font-weight: 700;
}

.dsairc-footer-highlight-label:not(:first-child) {
	margin-top: 20px;
}


/* ---------------------------------------------------------
   PARTNERS marquee — sits on paper like the rest of the system
   --------------------------------------------------------- */

.dsairc-partners {
	background-color: var(--ev-paper) !important;
	padding-inline: var(--ev-gutter) !important;
}

.dsairc-partners-title {
	color: var(--ev-navy);
	font-size: clamp(28px, 2.3vw, 40px);
	font-weight: 700;
	line-height: 1.1;
}


/* ---------------------------------------------------------
   LIST CARDS — the FAQ accordion's shape, reused everywhere.
   White card, hairline border, 15px radius, and the same 30px
   lime ring the FAQ uses for its +/− affordance. Every bullet
   on the site now reads as one family.
   --------------------------------------------------------- */

.ev-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ev-list > li::before,
.ev-list > li::marker {
	content: none;
}

.ev-list > li,
.ev-card-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	box-sizing: border-box;
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--ev-line);
	border-radius: 15px;
	background: #ffffff;
	color: var(--ev-navy);
	font-size: 18px;
	line-height: 1.4;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.ev-list > li:hover,
.ev-card-row:hover {
	border-color: var(--ev-steel);
	background: var(--ev-paper);
}

.ev-list.is-2col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ev-list-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ev-list-title {
	color: var(--ev-navy);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.ev-list-text {
	color: var(--ev-navy);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
}

@media (max-width: 700px) {
	.ev-list.is-2col {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ev-ring {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	border: 3px solid var(--ev-lime);
	border-radius: 50%;
	background: transparent;
	color: var(--ev-navy);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}


/* ---------------------------------------------------------
   ACCORDION — every <details> on the site, not just the FAQ
   page, wears the FAQ look.
   --------------------------------------------------------- */

.wp-block-details {
	padding: 0;
	border: 1px solid var(--ev-line);
	border-radius: 15px;
	background: #ffffff;
}

.wp-block-details[open] {
	border-color: var(--ev-steel);
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 15px;
	color: var(--ev-navy);
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	list-style: none;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "+";
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	border: 3px solid var(--ev-lime);
	border-radius: 50%;
	color: var(--ev-navy);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}

.wp-block-details[open] > summary {
	background: var(--ev-paper);
	border-radius: 15px 15px 0 0;
}

.wp-block-details[open] > summary::after {
	content: "\2212";
	border-color: var(--ev-steel);
}

.wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 20px 20px;
	color: var(--ev-navy);
	font-size: 18px;
	line-height: 1.5;
}


/* ---------------------------------------------------------
   PROSE BULLETS — editor content on every page and post gets
   the lime ring instead of the browser disc.
   --------------------------------------------------------- */

.wp-block-post-content ul,
.wp-block-post-content ol {
	padding-left: 0;
	list-style: none;
}

.wp-block-post-content ul > li,
.wp-block-post-content ol > li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 38px;
	color: var(--ev-navy);
	line-height: 1.6;
}

.wp-block-post-content ul > li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 4px;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border: 3px solid var(--ev-lime);
	border-radius: 50%;
}

.wp-block-post-content ol {
	counter-reset: ev-num;
}

.wp-block-post-content ol > li {
	counter-increment: ev-num;
}

.wp-block-post-content ol > li::before {
	content: counter(ev-num);
	position: absolute;
	top: 0.1em;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	border: 3px solid var(--ev-lime);
	border-radius: 50%;
	color: var(--ev-navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

/* Nested lists keep the ring but drop back to a plain dot weight. */
.wp-block-post-content li > ul,
.wp-block-post-content li > ol {
	margin-top: 10px;
}


/* ---------------------------------------------------------
   THE LEFT RULE
   A 1px steel hairline running down every band, 40px outside
   the content column. Painted as a background stripe rather
   than a pseudo-element so it never collides with the ::before
   and ::after a section already uses.
   --------------------------------------------------------- */

.dsairc-home > *:not(.dsairc-hero),
.dsairc-inner-page > *:not(.dsairc-page-hero) {
	background-image: linear-gradient(var(--ev-line), var(--ev-line));
	background-repeat: no-repeat;
	background-position: calc(var(--ev-gutter) - 40px) 0;
	background-size: 1px 100%;
}

/* The hero photo is fixed to the viewport, so it lives in a paint layer of
   its own. Every band after it has to be positioned too, or a static band
   would paint underneath and let the photo bleed through it. */
.dsairc-home > *,
.dsairc-inner-page > * {
	position: relative;
	z-index: 1;
}

.dsairc-home > .dsairc-hero {
	z-index: 0;
}

@media (max-width: 1280px) {
	.dsairc-home > *:not(.dsairc-hero),
	.dsairc-inner-page > *:not(.dsairc-page-hero) {
		background-position: calc(var(--ev-gutter) - 16px) 0;
	}
}


/* ---------------------------------------------------------
   BAND HEAD / BODY
   The shared skeleton every listing band uses: a 28px eyebrow
   over a 40px title, then a narrow blurb column beside the
   cards.
   --------------------------------------------------------- */

.dsairc-band-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 778px;
	margin-bottom: 40px;
}

.dsairc-band-head .ev-eyebrow {
	margin: 0;
}

.dsairc-band-head .ev-title {
	font-size: clamp(28px, 2.3vw, 40px);
	font-weight: 400;
	line-height: 1.1;
}

.dsairc-band-body {
	display: grid;
	grid-template-columns: 253px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.dsairc-band-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.dsairc-band-aside-text {
	margin: 0;
	color: var(--ev-navy);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
}


/* ---------------------------------------------------------
   TILE — portrait image, bold title, plain date
   --------------------------------------------------------- */

.dsairc-tile-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.dsairc-tile {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.dsairc-tile-media {
	display: block;
	overflow: hidden;
	border-radius: var(--ev-radius);
}

.dsairc-tile-media img {
	display: block;
	width: 100%;
	aspect-ratio: 256 / 320;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.dsairc-tile:hover .dsairc-tile-media img {
	transform: scale(1.03);
}

.dsairc-tile-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.dsairc-tile-title a {
	color: var(--ev-navy);
	text-decoration: none;
}

.dsairc-tile-title a:hover {
	color: var(--ev-blue);
}

.dsairc-tile-meta {
	margin: 0;
	color: var(--ev-navy);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
}


/* ---------------------------------------------------------
   SLAB BAND — the blue slab with the media panel overlapping
   its right edge. The slab bleeds off the left of the window;
   the panel is lifted out of flow so the two overlap.
   --------------------------------------------------------- */

.dsairc-slab-band {
	position: relative;
}

.dsairc-slab-inner {
	display: flex;
	flex-direction: column;
	gap: 120px;
	width: 855px;
	max-width: 100%;
}

.dsairc-slab-media {
	position: absolute;
	top: 140px;
	left: calc(var(--ev-gutter) + 524px);
	z-index: 2;
	width: 616px;
	max-width: calc(100% - var(--ev-gutter) - 524px);
	margin: 0;
	overflow: hidden;
	border-radius: var(--ev-radius-lg);
}

.dsairc-slab-media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.dsairc-slab-note {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.dsairc-slab-note .dsairc-block-title {
	margin: 0;
	font-size: 18px;
	line-height: 18px;
}

.dsairc-slab-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.dsairc-slab-logos img {
	width: auto;
	height: 56px;
	object-fit: contain;
}

/* Below the point where the panel would sit on top of the copy it
   drops back into the flow underneath the slab. */
@media (max-width: 1500px) {
	figure.dsairc-slab-media {
		position: static;
		width: 100%;
		max-width: 855px;
		margin-top: 40px;
	}

	.dsairc-slab-inner {
		gap: 40px;
	}
}


/* ---------------------------------------------------------
   PROJECT CARD — photo card, gradient at the top, meta over it
   --------------------------------------------------------- */

.dsairc-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	isolation: isolate;
	min-height: 300px;
	padding: 24px;
	overflow: hidden;
	border-radius: var(--ev-radius);
	background-color: var(--ev-navy);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff !important;
	text-decoration: none !important;
}

.dsairc-pcard.is-featured {
	min-height: 520px;
}

.dsairc-pcard-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg,
			rgba(8, 39, 67, 0) 25%,
			rgba(8, 39, 67, 0.5) 50%,
			var(--ev-navy) 100%);
	pointer-events: none;
}

.dsairc-pcard-body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}

.dsairc-pcard-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding: 6px 16px;
	border-radius: var(--ev-pill);
	background: #ffffff;
	color: var(--ev-navy);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.dsairc-pcard-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ev-lime);
}

.dsairc-pcard-title {
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.dsairc-pcard.is-featured .dsairc-pcard-title {
	font-size: 28px;
	line-height: 1.2;
}

.dsairc-pcard-date {
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}


/* ---------------------------------------------------------
   PARTNERS — a fixed label on the left, logos scrolling past
   --------------------------------------------------------- */

.dsairc-partners-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: none;
	margin: 0;
	text-align: left;
}

.dsairc-partners-label {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 320px;
}

.dsairc-partners-title {
	max-width: none;
	margin: 0;
	color: var(--ev-navy);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 35px;
	text-align: left;
	text-transform: none;
}

/* The corner tick that closes the label block in the reference. */
.dsairc-partners-tick {
	width: 1px;
	height: 64px;
	border-right: 1px solid var(--ev-steel);
	border-bottom: 1px solid var(--ev-steel);
}

.dsairc-partners-marquee {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

@media (max-width: 900px) {
	.dsairc-partners-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.dsairc-partners-marquee {
		width: 100%;
	}
}


/* ---------------------------------------------------------
   OVERLAPS — the band after the hero rides up over it, and the
   footer rides up over the last band.
   --------------------------------------------------------- */

.dsairc-hero + *,
.dsairc-page-hero + * {
	position: relative;
	z-index: 2;
	margin-top: -72px !important;
	border-radius: 32px 32px 0 0;
	background-color: #ffffff;
}

.wp-site-blocks > footer.wp-block-template-part {
	position: relative;
	z-index: 2;
	margin-top: -72px !important;
}

footer.wp-block-template-part > .wp-block-group {
	border-radius: 32px 32px 0 0 !important;
}

/* Room for whatever now sits underneath the overlap. */
.dsairc-home > :last-child,
.dsairc-inner-page > :last-child {
	padding-bottom: 152px !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 900px) {
	:root {
		--ev-slab: 60px;
	}

	.ev-section {
		padding-block: 48px 40px;
	}

	.ev-slab {
		padding: 40px 32px 40px 0;
	}

	.dsairc-page-hero-inner {
		padding-top: 120px;
		padding-bottom: 120px;
	}
}


/* ---------------------------------------------------------
   SITE IMAGES
   The hero photo layer, the fixed photo slots and the About
   strip all come from wp-admin (Site Images). A spot holding
   one image renders flat; several cross-fade on a 6s cycle
   driven by assets/js/theme.js.
   --------------------------------------------------------- */

.dsairc-hero-media {
	display: block;
	overflow: hidden;
}

.dsairc-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Stacked slides. Every slide sits on top of the first, and only the
   active one is opaque — so with JavaScript off the first image still
   shows, rather than the stack collapsing to nothing. */
.dsairc-hero-media.is-slider {
	position: relative;
}

.dsairc-hero-media.is-slider img {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}

.dsairc-hero-media.is-slider img.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.dsairc-hero-media.is-slider img {
		transition: none;
	}
}

/* A fixed slot and a strip both just hand their images to whatever
   layout class the template passed in. */
.dsairc-slot {
	margin: 0;
}

.dsairc-slot img {
	display: block;
	width: 100%;
}