/* EloralintideResearch.com components.
   Every value comes from tokens.css or a theme.json preset. No hardcoded
   colours or sizes: the design system is the source, not this file. */

/* ---------------------------------------------------------------
   Base
   --------------------------------------------------------------- */

/* Site-wide horizontal-overflow guard. The mobile nav drawer sits just off
   the right edge of the screen (translateX(100%)) until it is opened, and
   some mobile browsers still count that off-screen content toward the
   page's scrollable width, letting a visitor drag the whole page sideways
   to reveal empty space. This was previously only guarded inside the
   max-width:1439px media query, which does not help if any other element
   (a dropdown, a wide table, a future addition) pushes past the edge at
   any width. Applying it unconditionally on both html and body is the
   standard, robust fix and costs nothing on a page that never overflows. */
html {
	overflow-x: hidden;
	max-width: 100%;
}

body {
	overflow-x: hidden;
	max-width: 100%;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Reading measure. The layout preset caps the column; this caps the line so a
   wide viewport does not produce 120-character lines of serif prose. */
.elr-prose > p,
.elr-prose > ul,
.elr-prose > ol,
.elr-prose > h2,
.elr-prose > h3,
.elr-prose > h4 {
	max-width: var(--content-measure);
}

.elr-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--space-3) var(--space-4);
	background: var(--ink-900);
	color: var(--white);
	font-family: var(--font-sans);
	text-decoration: none;
}

.elr-skip:focus {
	left: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Focus, visible on every background the design uses. Two rings: a light one
   and a dark offset, so the indicator survives petrol, paper and white alike. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--petrol-500);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(250, 251, 252, .9);
	border-radius: var(--radius-sm);
}

.elr-header :where(a, button):focus-visible {
	box-shadow: 0 0 0 4px rgba(18, 24, 28, .25);
}

/* On the petrol footer the pale halo would vanish, so the ring inverts. */
.elr-footer :where(a, button):focus-visible {
	outline-color: var(--amber-500);
	box-shadow: 0 0 0 4px rgba(6, 59, 64, .9);
}

/* Minimum target size. Applies to the controls, not to links inside prose,
   where an enlarged hit area would break the line box. */
.elr-nav__link,
.elr-nav__toggle,
.elr-drawer__open,
.elr-search__submit {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------
   Wordmark and the decorative trace
   --------------------------------------------------------------- */

.elr-mark {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	color: var(--ink-900);
}

.elr-mark__glyph {
	display: inline-flex;
	color: var(--petrol-700);
}

.elr-mark__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.elr-mark__name {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: var(--fw-semibold);
	letter-spacing: -0.012em;
}

.elr-mark__sub {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

.elr-mark:hover .elr-mark__name {
	color: var(--petrol-700);
}

/* Header-only: stack the trace glyph above the wordmark instead of beside it
   (design feedback 2026-09-20, matching Jon's reference concept). The
   side-by-side lockup made the header's brand block the widest thing fighting
   the nav for horizontal room; stacking it trades that width for a bit of
   extra height, which the two-tier header already has to spare, and frees up
   the row for the nav to sit on one line longer before wrapping. Footer and
   any other .elr-mark usage keep the original side-by-side layout. */
.elr-header .elr-mark {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.elr-header .elr-mark__glyph {
	margin-block-end: 1px;
}

/* The signature rule under the header. Decoration, and nothing about it
   suggests a measurement: no axes, no ticks, no labels. */
/* The signature rule under the header: a 2px petrol wash with a single clean
   polyline riding over it. Decoration only, and it says so in the markup: no
   axes, no ticks, no units, no sample identifier. */
.elr-rule {
	position: relative;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--petrol-100), transparent);
}

.elr-rule svg {
	position: absolute;
	inset-inline: 0;
	top: -9px;
	width: 100%;
	height: 20px;
	display: block;
	overflow: visible;
	pointer-events: none;
}

/* ---------------------------------------------------------------
   Header and navigation
   --------------------------------------------------------------- */

.elr-header {
	background: var(--white);
	border-block-end: 1px solid var(--ink-300);
	position: relative;
	z-index: 20;
}

/* Restructured 2026-09-20: "Research News" and the search box used to sit
   inside .elr-header__inner as extra flex children alongside the wordmark
   and the (now seven-item) primary nav. Once the nav grew past what fits on
   one line, the row wrapped unpredictably and left the utility items
   stranded on their own orphaned line below a half-empty nav row -
   technically not broken, but it read like something had come apart. A
   two-tier header removes the competition entirely: a slim, quiet utility
   bar (News + search, right-aligned) sits on its own full-width strip above
   the main header row, which now holds only the wordmark and the nav and is
   free to wrap on its own terms without dragging anything else down with it. */
.elr-header__utility-bar {
	background: var(--ink-100);
	border-block-end: 1px solid var(--ink-300);
}

.elr-header__utility {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-4);
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-2) var(--gutter);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
}

/* A flex item's default minimum width is its content's natural size, not 0,
   so without this the search form refused to shrink and pushed past the
   right edge of the bar at widths where the News link plus the form no
   longer both fit on one line (reported 2026-09-20: "the search field in
   the header ... running off to the right"). flex-wrap above is the primary
   fix (the form now drops to its own line instead), and min-width: 0 here
   is the backstop that lets it shrink first if there's room to avoid
   wrapping at all. */
.elr-header__utility .elr-search {
	min-width: 0;
}

.elr-header__utility > a {
	color: var(--ink-700);
	text-decoration: none;
}

.elr-header__utility > a:hover {
	color: var(--petrol-700);
	text-decoration: underline;
	text-decoration-color: var(--amber-700);
	text-underline-offset: 3px;
}

.elr-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	row-gap: var(--space-2);
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-4) var(--gutter);
}

/* Tester feedback 2026-09-20: wants the top-level clusters bolded and on one
   line at desktop width. Tightening the gap between items (space-4 to
   space-3) buys back the room the extra font-weight costs; flex-wrap stays
   on so nothing goes off-screen on a narrower desktop window, it just wraps
   as a last resort instead of a first one. */
.elr-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.elr-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.elr-nav__link {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--ink-700);
	text-decoration: none;
	padding-inline: var(--space-1);
}

.elr-nav__link:hover,
.elr-nav__link[aria-current="page"] {
	color: var(--petrol-700);
	text-decoration: underline;
	text-decoration-color: var(--amber-700);
	text-underline-offset: 4px;
}

.elr-nav__toggle {
	background: none;
	border: 0;
	padding: 0 var(--space-1);
	cursor: pointer;
	color: var(--ink-500);
}

.elr-nav__chev {
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--dur-fast) var(--ease);
}

.elr-nav__toggle[aria-expanded="true"] .elr-nav__chev {
	transform: rotate(225deg) translateY(-2px);
}

.elr-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 16rem;
	margin: 0;
	padding: var(--space-2) 0;
	list-style: none;
	background: var(--white);
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-2);
	display: none;
}

.elr-nav__item--open > .elr-nav__sub {
	display: block;
}

/* With JavaScript off the submenus are simply always available on hover and
   focus, so the navigation never becomes a dead end. */
.no-js .elr-nav__item--has-sub:hover > .elr-nav__sub,
.elr-nav__item--has-sub:focus-within > .elr-nav__sub {
	display: block;
}

.elr-nav__sub a {
	display: block;
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-700);
	text-decoration: none;
}

.elr-nav__sub a:hover {
	background: var(--ink-100);
	color: var(--petrol-700);
}

.elr-drawer__open {
	display: none;
	background: none;
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-md);
	cursor: pointer;
	color: var(--ink-700);
}

.elr-drawer__open span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}

.elr-nav__mobile-extra {
	display: none;
}

.elr-drawer__close {
	display: none;
}

@media (max-width: 1439px) {
	/* Below this width the primary nav (now seven top-level clusters) does not
	   reliably fit beside the wordmark on one line, so the row collapses to
	   just the wordmark and the hamburger; the full nav, plus a repeated copy
	   of search and the News link, move into the drawer via
	   .elr-nav__mobile-extra below. The utility bar above the header (News +
	   search) is a separate full-width strip now, so it is hidden outright
	   here rather than picked apart child by child - it was never competing
	   with the hamburger for space in the first place, but showing a
	   standalone News-link-and-search bar with no nav beside it would look
	   just as stranded as the old wrapping bug did, so it comes down with
	   the rest of the desktop header.

	   Bumped from 1023 to 1279 on 2026-09-20 when a sixth nav cluster was
	   added, then to 1439 the same day when a seventh ("Community Reports")
	   was promoted to the top level and reproduced the identical overflow a
	   little higher up the width range, since a fixed pixel breakpoint has
	   to be re-tuned by hand every time an item is added or removed. As a
	   backstop against the next off-by-one-item repeat of this bug,
	   .elr-header__inner and .elr-nav__list both now carry flex-wrap: wrap
	   by default (see above), so if a future addition still overflows this
	   breakpoint, the nav wraps onto a second line instead of anything being
	   pushed invisibly off-screen. */
	.elr-header__utility-bar {
		display: none;
	}

	.elr-header__inner {
		flex-wrap: nowrap;
	}

	/* overflow-x: hidden now lives unconditionally on html/body near the top
	   of this file, so it no longer needs to be repeated here. */

	.elr-drawer__open {
		display: inline-flex;
	}

	.elr-nav__mobile-extra {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		padding-block-end: var(--space-6);
		margin-block-end: var(--space-6);
		border-block-end: 1px solid var(--ink-100);
	}

	.elr-nav__mobile-extra .elr-search {
		width: 100%;
	}

	.elr-nav__mobile-extra .elr-search input[type="search"] {
		flex: 1;
		min-width: 0;
		border-color: var(--ink-500);
		background: var(--ink-100);
	}

	.elr-nav__news-link {
		font-family: var(--font-sans);
		font-size: var(--fs-small);
		font-weight: var(--fw-medium);
		color: var(--ink-700);
		text-decoration: none;
	}

	.elr-drawer__close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: var(--space-4);
		right: var(--space-4);
		width: 44px;
		height: 44px;
		background: var(--ink-100);
		border: 1px solid var(--ink-300);
		border-radius: var(--radius-md);
		color: var(--ink-900);
		font-size: 1.5rem;
		line-height: 1;
		cursor: pointer;
	}

	.elr-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(88vw, 22rem);
		background: var(--white);
		border-inline-start: 1px solid var(--ink-300);
		padding: var(--space-16) var(--space-6) var(--space-8);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform var(--dur-base) var(--ease);
		z-index: 40;
	}

	.elr-nav[data-open="true"] {
		transform: translateX(0);
	}

	.elr-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2);
		padding-block-start: var(--space-2);
	}

	.elr-nav__item {
		flex-wrap: wrap;
		border-block-end: 1px solid var(--ink-100);
		padding-block: var(--space-2);
	}

	.elr-nav__link {
		flex: 1;
		font-size: var(--fs-body);
	}

	.elr-nav__sub {
		position: static;
		width: 100%;
		border: 0;
		box-shadow: none;
		padding-inline-start: var(--space-4);
	}
}

.elr-scrim {
	position: fixed;
	inset: 0;
	background: rgba(18, 24, 28, .45);
	z-index: 30;
	display: none;
}

.elr-scrim[data-open="true"] {
	display: block;
}

/* ---------------------------------------------------------------
   Breadcrumbs, contents
   --------------------------------------------------------------- */

.elr-crumbs {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-3) var(--gutter);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-500);
}

.elr-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.elr-crumbs__item + .elr-crumbs__item::before {
	content: "\203A";
	margin-inline-end: var(--space-2);
	color: var(--ink-300);
}

.elr-crumbs a {
	color: var(--ink-500);
}

.elr-crumbs [aria-current="page"] {
	color: var(--ink-900);
}

.elr-toc {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	border-inline-start: 2px solid var(--ink-300);
	padding-inline-start: var(--space-4);
	margin-block: var(--space-8);
}

.elr-toc__title {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
	margin: 0 0 var(--space-3);
}

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

.elr-toc__item {
	margin-block: var(--space-1);
}

.elr-toc__item--h3 {
	padding-inline-start: var(--space-4);
}

.elr-toc a {
	color: var(--ink-700);
	text-decoration: none;
}

.elr-toc a:hover {
	color: var(--petrol-700);
	text-decoration: underline;
}

@media (min-width: 1280px) {
	.elr-layout--railed {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 15rem;
		gap: var(--space-12);
		align-items: start;
		max-width: var(--container-wide);
		margin-inline: auto;
	}

	.elr-layout--railed .elr-rail {
		position: sticky;
		top: var(--space-8);
	}
}

/* ---------------------------------------------------------------
   Evidence tier chips
   --------------------------------------------------------------- */

/* Four signals at once: the letter code as text, a shape marker, the hue, and
   the plain-language label in the accessible name. Desaturate the page and the
   chip still reads; that is the test. Pill-shaped, per the approved concept:
   the restraint rule about never-pill chrome applies to buttons and cards, not
   to a data label that reads better as a token. */
.elr-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 9px;
	border-radius: 999px;
	background: var(--ink-500);
	color: var(--white);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: var(--fw-medium);
	line-height: 1.5;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
}

.elr-chip:hover,
.elr-chip:focus-visible {
	color: var(--white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.elr-chip__mark {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	color: currentColor;
}

.elr-chip__code {
	letter-spacing: 0.02em;
}

.elr-chip--p1 { background: var(--tier-p1); }
.elr-chip--p2 { background: var(--tier-p2); }
.elr-chip--p3 { background: var(--tier-p3); }
.elr-chip--p4 { background: var(--tier-p4); }
.elr-chip--p5 { background: var(--tier-p5); }
.elr-chip--q  { background: var(--tier-q); }

/* The shape attribute stays on the element even though the marker is drawn in
   SVG, so a stylesheet or a test can still assert which shape a tier carries. */
.elr-chip[data-shape="circle"],
.elr-chip[data-shape="ring"],
.elr-chip[data-shape="square"],
.elr-chip[data-shape="diamond"],
.elr-chip[data-shape="triangle"],
.elr-chip[data-shape="barred"] {
	background-clip: padding-box;
}

.elr-chip__label {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-700);
}

/* ---------------------------------------------------------------
   Evidence legend
   --------------------------------------------------------------- */

/* Design feedback 2026-09-20 (Jon): break long pages into contrasting bands
   so a dense page reads as distinct buckets instead of one long white scroll.
   The legend already bled full-width via its own border-block; giving it a
   neutral tint (rather than plain white) is what actually makes that band
   register as a section break instead of just a couple of rule lines. */
.elr-legend {
	background: var(--ink-100);
	border-block: 1px solid var(--ink-300);
	padding: var(--space-8) 0;
	margin-block: var(--space-12);
}

.elr-legend__title {
	max-width: var(--container-max);
	margin: 0 auto var(--space-4);
	padding-inline: var(--gutter);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

.elr-legend__rows {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Tester feedback 2026-09-20: the only hover feedback previously lived on
   the small chip badge inside each pill (.elr-chip:hover, further down this
   file) - barely visible since the chip is already white-on-colour, and easy
   to read as "only the first one does anything" when it is really just too
   subtle everywhere. Hovering the whole pill and inverting to a solid dark
   fill makes the affordance obvious on every row, not just one. */
.elr-legend__row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	border: 1px solid var(--ink-300);
	border-radius: 999px;
	padding: 5px 14px 5px 6px;
	background: var(--white);
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.elr-legend__row:hover {
	background: var(--ink-900);
	border-color: var(--ink-900);
}

.elr-legend__row:hover .elr-legend__label {
	color: var(--white);
}

.elr-legend__pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.elr-legend__label {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-700);
}

/* The one-line description is the hover and screen-reader detail; the pill row
   stays scannable rather than turning into a wall of definitions. */
.elr-legend__desc {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.elr-legend__more {
	max-width: var(--container-max);
	margin: var(--space-4) auto 0;
	padding-inline: var(--gutter);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
}

/* ---------------------------------------------------------------
   Notices
   --------------------------------------------------------------- */

/* The full-bleed investigational band, directly under the header rule. */
.elr-invest {
	display: block;
	background: var(--petrol-100);
	border-block: 1px solid #CFE4E5;
}

.elr-invest__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-2) var(--gutter);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--petrol-900);
}

.elr-invest__inner strong {
	font-weight: var(--fw-semibold);
}

.elr-invest__inner a {
	color: var(--petrol-900);
	white-space: nowrap;
}

/* Kept for the in-content variant, where the band sits inside the measure. */
.elr-notice--investigational {
	background: var(--petrol-100);
	border-inline-start: 3px solid var(--petrol-700);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: var(--space-4) var(--space-6);
	margin-block: var(--space-6);
}

.elr-notice--registration {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-500);
	border-block-start: 1px solid var(--ink-100);
	margin: var(--space-4) 0 0;
	padding-block-start: var(--space-3);
}

.elr-limits {
	background: var(--ink-100);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	margin-block: var(--space-8);
}

.elr-limits__title {
	font-size: var(--fs-h4);
	margin: 0 0 var(--space-3);
}

.elr-limits__list {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-700);
	margin: 0;
	padding-inline-start: var(--space-6);
}

.elr-limits__list li + li {
	margin-block-start: var(--space-2);
}

/* ---------------------------------------------------------------
   Evidence callout
   --------------------------------------------------------------- */

.elr-callout {
	border: 1px solid var(--ink-300);
	border-inline-start: 4px solid var(--ink-500);
	background: var(--ink-100);
	border-radius: 10px;
	padding: var(--space-4) var(--space-6);
	margin-block: var(--space-6);
	max-width: 74ch;
}

.elr-callout--p1 { border-color: var(--tier-p1); background: var(--tier-p1-tint); }
.elr-callout--p2 { border-color: var(--tier-p2); background: var(--tier-p2-tint); }
.elr-callout--p3 { border-color: var(--tier-p3); background: var(--tier-p3-tint); }
.elr-callout--p4 { border-color: var(--tier-p4); background: var(--tier-p4-tint); }
.elr-callout--p5 { border-color: var(--tier-p5); background: var(--tier-p5-tint); }
.elr-callout--q  { border-color: var(--tier-q);  background: var(--tier-q-tint); }

.elr-callout__list {
	margin: 0;
	display: grid;
	gap: var(--space-2);
}

.elr-callout__row {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: var(--space-1) var(--space-4);
	align-items: baseline;
}

.elr-callout__key {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	color: var(--ink-700);
	margin: 0;
}

.elr-callout__val {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-small);
	color: var(--ink-900);
}

@media (max-width: 480px) {
	.elr-callout__row {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* ---------------------------------------------------------------
   Accordion (native details/summary)
   --------------------------------------------------------------- */

/* Design feedback 2026-09-20 (Jon): use accordions so the scroll on a long
   page isn't so long. Reserved for genuinely supplementary detail that
   already has a visible summary above it in the prose (a long reference
   table, a repeated appendix block) - never for a claim, a finding or a
   disclosure a reader needs to see, which always stays outside the
   accordion. Built on native <details>/<summary> rather than a JS toggle:
   works with JavaScript off, and keyboard/screen-reader behaviour comes
   free instead of having to be rebuilt by hand. */
.elr-accordion {
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-lg);
	margin-block: var(--space-6);
	background: var(--white);
}

.elr-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-6);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	color: var(--petrol-900);
	cursor: pointer;
	list-style: none;
}

/* The browser's own default marker (a triangle in most, nothing in Safari)
   is replaced with the site's own chevron so this matches the nav dropdown
   toggle rather than looking like an unstyled leftover. */
.elr-accordion__summary::-webkit-details-marker {
	display: none;
}

.elr-accordion__summary::marker {
	content: "";
}

.elr-accordion__summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--petrol-700);
	border-bottom: 1.5px solid var(--petrol-700);
	transform: rotate(45deg);
	transition: transform var(--dur-fast) var(--ease);
}

.elr-accordion[open] .elr-accordion__summary::after {
	transform: rotate(225deg);
}

.elr-accordion__summary:hover {
	background: var(--ink-100);
	border-radius: var(--radius-lg);
}

.elr-accordion__summary:focus-visible {
	outline: 2px solid var(--petrol-700);
	outline-offset: -2px;
	border-radius: var(--radius-lg);
}

.elr-accordion__body {
	padding: 0 var(--space-6) var(--space-6);
	border-block-start: 1px solid var(--ink-100);
	padding-block-start: var(--space-4);
}

/* The table card inside an accordion already carries its own border and
   radius; drop the accordion body's side padding there so the two frames
   don't nest into a visible double border. */
.elr-accordion__body > .elr-table__card {
	margin-inline: calc(var(--space-6) * -1);
}

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

/* ---------------------------------------------------------------
   Takeaways, byline, verified stamp
   --------------------------------------------------------------- */

/* Petrol tint plus a left accent bar rather than a plain white bordered box,
   so the "what matters here" summary reads as its own highlighted bucket
   against the surrounding prose, not just another paragraph in a frame. */
.elr-takeaways {
	border: 1px solid #CFE4E5;
	border-inline-start: 4px solid var(--petrol-700);
	border-radius: 12px;
	background: var(--petrol-100);
	padding: var(--space-4) var(--space-6);
	margin-block: var(--space-6);
	max-width: 74ch;
}

.elr-takeaways__title {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--petrol-700);
	margin: 0 0 var(--space-2);
}

.elr-takeaways__list {
	margin: 0;
	padding-inline-start: var(--space-6);
	font-size: var(--fs-body);
}

.elr-takeaways__list li + li {
	margin-block-start: var(--space-2);
}

.elr-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-500);
	border-block: 1px solid var(--ink-300);
	padding-block: var(--space-3);
	margin-block: var(--space-4) var(--space-6);
}

.elr-verified {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-500);
	margin-block: var(--space-2);
}

.elr-byline__author {
	color: var(--ink-700);
	font-weight: var(--fw-medium);
}

.elr-byline__sep {
	color: var(--ink-300);
}

.elr-verified__label {
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}

.elr-verified__date {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--ink-700);
}

/* ---------------------------------------------------------------
   Tables
   --------------------------------------------------------------- */

/* Table markup, 2026-09-20: the description text and its evidence-tier chip
   used to live inside the table's own <caption>, forced to display: block to
   stop it wrapping one word per line on mobile. That fix stopped the wrap bug
   but traded it for a worse one: a <caption> is still, structurally, part of
   the table's own box even with its display overridden, and on a wide screen
   some browsers still size and place it using the table's internal column
   layout instead of the full card width, so the description text rendered
   squeezed into the first column with the rest of the card empty beside it.
   The caption element is unfixable here; a <table> caption cannot be fully
   detached from the table's layout algorithm just by changing its display
   value. The real fix is not to use <caption> at all: the description and
   its chip are now a plain sibling <div class="elr-table__caption">, and the
   table's border/radius/tint move up to a new .elr-table__card wrapper that
   holds both the caption and the scrollable table as one visual unit. A div
   has no special table-layout participation, so this class of bug cannot
   recur regardless of viewport width or which browser renders it. */
.elr-table__card {
	margin-block: var(--space-6);
	border: 1px solid var(--ink-300);
	border-radius: 10px;
	background: var(--white);
	overflow: hidden;
}

.elr-table__caption {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	padding: var(--space-4) var(--space-4) var(--space-3);
	font-size: var(--fs-small);
	color: var(--ink-500);
	border-block-end: 1px solid var(--ink-100);
}

.elr-table__scroll {
	overflow-x: auto;
}

.elr-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
}

.elr-table th,
.elr-table td {
	padding: var(--space-3) var(--space-4);
	text-align: start;
	border-block-end: 1px solid var(--ink-100);
	vertical-align: top;
}

.elr-table thead th {
	position: sticky;
	top: 0;
	background: var(--ink-100);
	color: var(--ink-700);
	font-size: 13px;
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

.elr-table tbody tr:nth-child(even) {
	background: #FCFDFD;
}

/* Reported figures read as data, not prose. */
.elr-table td[data-label="Randomized (n)"],
.elr-table td[data-label="Reported change"] {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	text-align: end;
}

.elr-table tbody th[scope="row"] {
	font-weight: var(--fw-medium);
	color: var(--ink-900);
}

.elr-table tfoot td {
	padding: var(--space-4);
	font-size: var(--fs-small);
	color: var(--ink-500);
	background: var(--white);
	border-block-end: 0;
}

/* The community table carries its own P5 tint and a dashed border, the same
   visual language the tier chips already use elsewhere on the page, so the
   card itself reads as "unverified community material" before a reader gets
   to a single row. :has() lets this target the outer card wrapper from the
   table's own modifier class without a second class on a second element.
   The caption and its chip are outside the <table> now (see the .elr-table__card
   comment above), so these target .elr-table__card's descendants directly
   rather than the old bare "caption"/".elr-chip" selectors, which matched
   only while both lived inside the table. */
.elr-table__card:has(.elr-table--community) {
	background: var(--tier-p5-tint);
	border: 1px dashed var(--tier-p5);
}

.elr-table__card:has(.elr-table--community) .elr-table__caption {
	border-block-end-color: var(--tier-p5);
	border-block-end-style: dashed;
}

.elr-table__card:has(.elr-table--community) .elr-table__caption .elr-chip {
	margin-inline-start: var(--space-2);
	vertical-align: middle;
}

.elr-table--community tbody tr:nth-child(even) {
	background: transparent;
}

.elr-table--community tr {
	border-block-end-color: var(--tier-p5);
}

/* The community-reports table's first column is just a short report number
   or label ("1", "Blinded A"). Left to auto layout, a 5-column table gives
   it as much width as the real content columns, which crowds the actual
   description and reliability text into a narrow strip and forces heavy
   wrapping even on short phrases. Pinning it narrow gives that room back. */
@media (min-width: 601px) {
	.elr-table--community th[scope="row"] {
		width: 4.5rem;
		white-space: nowrap;
	}
}

/* Below the small breakpoint the table stacks into labelled rows rather than
   scrolling sideways, because a two-finger horizontal scroll inside a page that
   also scrolls vertically is where mobile readers give up. */
@media (max-width: 600px) {
	.elr-table thead {
		display: none;
	}

	.elr-table,
	.elr-table tbody,
	.elr-table tr,
	.elr-table th,
	.elr-table td {
		display: block;
		width: 100%;
	}

	.elr-table tr {
		border-block-end: 1px solid var(--ink-300);
		padding-block: var(--space-6);
	}

	.elr-table tr:first-child {
		padding-block-start: var(--space-3);
	}

	.elr-table tr:last-child {
		border-block-end: 0;
	}

	/* First attempt put the label in a fixed 9rem column beside the value
	   (display: grid; grid-template-columns: 9rem minmax(0, 1fr)). That is
	   the layout most prone to this exact bug: a grid item's text content
	   has no element of its own to hang min-width/overflow-wrap off of (it
	   is an anonymous box CSS cannot select), so a long unbroken run inside
	   a squeezed 1fr track can still overflow the card edge instead of
	   wrapping ("Tirzepatide 10→7.5 mg/w" cut off mid-word) even with
	   min-width: 0 and overflow-wrap set on the cell itself. Stacking the
	   label above the value instead, both full width, sidesteps the whole
	   class of narrow-column overflow: the value always has the full card
	   width to wrap in, like the reference layout on peptideblog.net. */
	.elr-table td,
	.elr-table tbody th {
		display: block;
		border: 0;
		padding-block: 0;
		margin-block-end: var(--space-4);
		min-width: 0;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.elr-table td:last-child,
	.elr-table tbody th:last-child {
		margin-block-end: 0;
	}

	.elr-table td::before,
	.elr-table tbody th::before {
		content: attr(data-label);
		display: block;
		margin-block-end: 6px;
		font-size: 13px;
		letter-spacing: var(--tracking-eyebrow);
		text-transform: uppercase;
		color: var(--ink-500);
	}

	.elr-table td {
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		color: var(--ink-700);
	}

	/* One dose figure per entry carries the emphasis, matching the reference
	   layout's single bold anchor per record (its "DOSE ARMS" field) rather
	   than bolding every number and flattening the hierarchy. Eloralintide's
	   own dose is what a reader is here to find; what it was taken alongside
	   is supporting context. */
	.elr-table--community td[data-label="Eloralintide"] {
		font-weight: var(--fw-semibold);
		font-size: var(--fs-body-lg);
		color: var(--ink-900);
	}

	.elr-table--community td[data-label="Reliability"] {
		font-size: var(--fs-small);
		color: var(--ink-500);
	}
}

/* ---------------------------------------------------------------
   Figures
   --------------------------------------------------------------- */

.elr-figure {
	margin-block: var(--space-8);
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-lg);
	background: var(--white);
	padding: var(--space-6);
}

.elr-figure--illustrative {
	border-style: dashed;
}

.elr-figure__caption {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block-end: var(--space-4);
}

.elr-figure__title {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-medium);
	color: var(--ink-900);
}

.elr-figure__flag {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	color: var(--amber-700);
}

.elr-figure__alt {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-500);
}

.elr-figure__meta {
	display: grid;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	padding-block-start: var(--space-4);
	border-block-start: 1px solid var(--ink-100);
}

.elr-figure__row {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: var(--space-3);
	align-items: baseline;
}

.elr-figure__row dt {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
	margin: 0;
}

.elr-figure__row dd {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-900);
}

.elr-figure__data {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
}

.elr-figure__data caption {
	caption-side: top;
	text-align: start;
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
	padding-block-end: var(--space-2);
}

.elr-figure__data th,
.elr-figure__data td {
	padding: var(--space-2) var(--space-3);
	text-align: start;
	border: 1px solid var(--ink-100);
}

@media (max-width: 600px) {
	.elr-figure__row {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* ---------------------------------------------------------------
   Trial cards and the field panel
   --------------------------------------------------------------- */

.elr-trials__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: var(--space-6);
	margin-block: var(--space-8);
}

.elr-card {
	border: 1px solid var(--ink-300);
	border-radius: 12px;
	background: var(--white);
	padding: var(--space-4) var(--space-6) var(--space-6);
	box-shadow: var(--shadow-1);
}

.elr-card:hover {
	box-shadow: var(--shadow-2);
	border-color: var(--petrol-100);
}

.elr-card__title {
	font-size: 1.125rem;
	margin: var(--space-3) 0 var(--space-1);
}

.elr-card__title a {
	text-decoration: none;
}

.elr-card__title a:hover {
	text-decoration: underline;
}

.elr-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
}

.elr-card__phase,
.elr-pill {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ink-100);
	color: var(--ink-700);
}

.elr-pill--recruit {
	background: var(--tier-p1-tint);
	color: var(--tier-p1);
}

.elr-pill--complete {
	background: var(--petrol-100);
	color: var(--petrol-900);
}

.elr-pill--neutral {
	background: var(--ink-100);
	color: var(--ink-700);
}

/* The confirmation note split off a long trial-status field (see
   trial_card() in the plugin). Plain wrapping text, not a pill, so a
   multi-sentence confirmation note never gets stretched into an
   oversized oval. It takes the full row so it reads as a caption under
   the phase/status pills rather than another badge beside them. */
.elr-card__status-note {
	display: block;
	flex-basis: 100%;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: var(--fw-regular, 400);
	letter-spacing: normal;
	color: var(--ink-600, var(--ink-700));
	line-height: 1.4;
}

.elr-card__nct {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-500);
	margin: 0 0 var(--space-2);
}

.elr-card__verified,
.elr-card__unverified {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink-500);
	margin: var(--space-3) 0 0;
	padding-block-start: var(--space-3);
	border-block-start: 1px dashed var(--ink-300);
}

.elr-card__k {
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}

.elr-card__mono,
.elr-mono {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--ink-900);
}

.elr-card__pop {
	font-size: var(--fs-small);
	color: var(--ink-700);
	margin: 0 0 var(--space-2);
}

.elr-card__unverified {
	color: var(--amber-700);
}

.elr-fields {
	margin-block: var(--space-8);
}

.elr-fields__title {
	font-size: var(--fs-h3);
	margin: 0 0 var(--space-4);
}

.elr-fields__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	border: 1px solid var(--ink-300);
	border-radius: 12px;
	overflow: hidden;
	background: var(--white);
}

.elr-field {
	padding: var(--space-4);
	border-block-end: 1px solid var(--ink-100);
}

.elr-field:nth-child(odd) {
	border-inline-end: 1px solid var(--ink-100);
}

.elr-field__k {
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-500);
	margin: 0 0 3px;
}

.elr-field__v {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-900);
	margin: 0;
}

.elr-fields__none {
	color: var(--ink-500);
	font-style: italic;
}

@media (max-width: 700px) {
	.elr-fields__grid {
		grid-template-columns: 1fr;
	}

	.elr-field:nth-child(odd) {
		border-inline-end: 0;
	}
}

.elr-fields__endpoints {
	margin-block-start: var(--space-6);
}

.elr-fields__endpoints h3 {
	font-size: var(--fs-h4);
	margin: 0 0 var(--space-2);
}

.elr-fields__source {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	margin-block-start: var(--space-4);
}

/* ---------------------------------------------------------------
   Summaries, references, disclosure, related
   --------------------------------------------------------------- */

.elr-summary {
	margin-block: var(--space-6);
}

.elr-summary__note {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-500);
	border-inline-start: 2px solid var(--ink-300);
	padding-inline-start: var(--space-4);
	margin-block-start: var(--space-4);
}

/* Was a bare top rule with nothing to distinguish it from the prose above -
   the references list is exactly the kind of dense, scan-only block that
   benefits from its own quiet bucket rather than blending into body copy. */
.elr-references {
	margin-block: var(--space-12);
	padding: var(--space-6);
	background: var(--ink-100);
	border-radius: var(--radius-lg);
}

.elr-references__title {
	font-size: var(--fs-h3);
	margin: 0 0 var(--space-4);
}

.elr-references__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.elr-ref {
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-700);
	padding-block: var(--space-3);
	border-block-end: 1px solid var(--ink-300);
}

.elr-ref:last-child {
	border-block-end: none;
}

.elr-ref__n {
	font-family: var(--font-mono);
	color: var(--ink-500);
}

.elr-ref__ids {
	display: block;
	margin-block-start: var(--space-1);
}

.elr-ref__id {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	margin-inline-end: var(--space-3);
}

/* A slightly warmer neutral than the references block above, so two adjacent
   grey bands don't read as one undifferentiated block - this one is the
   compliance/commercial-relationship notice, not a scan list, and keeping it
   visually distinct from .elr-references matters given what it discloses. */
.elr-disclosure {
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-lg);
	background: #F5F3EF;
	padding: var(--space-6);
	margin-block: var(--space-8);
}

.elr-disclosure__title {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
	margin: 0 0 var(--space-3);
}

.elr-disclosure p {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-700);
}

/* "Explore more" gets the same petrol treatment as the homepage card grid
   (2026-09-20) rather than no background at all, so a page's last section is
   an inviting bucket instead of a list trailing off after the disclosure. */
.elr-related {
	margin-block: var(--space-12);
	padding: var(--space-6);
	background: var(--petrol-100);
	border-radius: var(--radius-lg);
}

.elr-related__title {
	font-size: var(--fs-h4);
	margin: 0 0 var(--space-3);
	color: var(--petrol-900);
}

.elr-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
}

.elr-related__list a {
	color: var(--petrol-700);
}

.elr-related__list a:hover {
	color: var(--petrol-900);
}

.elr-empty {
	font-family: var(--font-sans);
	color: var(--ink-500);
	padding: var(--space-8);
	border: 1px dashed var(--ink-300);
	border-radius: var(--radius-lg);
	text-align: center;
}

/* ---------------------------------------------------------------
   Latest updates (news cards)

   These classes were already rendered by the plugin's news module but
   never had matching CSS anywhere in the theme, so the section rendered
   completely unstyled: raw links and text with no card shape, no grid,
   and nothing to stop long titles or excerpts overflowing a narrow
   viewport. Modeled directly on .elr-trials__grid / .elr-card above so
   it matches the rest of the site, with explicit width and wrapping
   safeguards for mobile.
   --------------------------------------------------------------- */

.elr-news {
	margin-block: var(--space-8);
}

.elr-news__title {
	font-size: 1.5rem;
	margin: 0 0 var(--space-4);
}

.elr-news__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: var(--space-6);
	width: 100%;
}

.elr-news__card {
	box-sizing: border-box;
	max-width: 100%;
	border: 1px solid var(--ink-300);
	border-radius: 12px;
	background: var(--white);
	padding: var(--space-4) var(--space-6) var(--space-6);
	box-shadow: var(--shadow-1);
	overflow-wrap: break-word;
	word-break: break-word;
}

.elr-news__card:hover {
	box-shadow: var(--shadow-2);
	border-color: var(--petrol-100);
}

.elr-news__card .elr-news__title {
	font-size: 1.0625rem;
	margin: 0 0 var(--space-1);
}

.elr-news__card .elr-news__title a {
	text-decoration: none;
}

.elr-news__card .elr-news__title a:hover {
	text-decoration: underline;
}

.elr-news__meta {
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--ink-500);
	margin: 0 0 var(--space-2);
}

.elr-news__excerpt {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-700);
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 480px) {
	.elr-news__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------
   Home
   --------------------------------------------------------------- */

.elr-hero {
	padding-block: var(--space-16) var(--space-8);
}

.elr-hero .is-style-eyebrow {
	margin-block-end: var(--space-2);
}

.elr-hero h1 {
	max-width: 20ch;
}

.elr-hero .is-style-lead {
	max-width: 62ch;
}

.elr-hero__cta {
	display: flex;
	gap: var(--space-3);
	margin-block-start: var(--space-6);
	flex-wrap: wrap;
}

.elr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	cursor: pointer;
}

.elr-btn--primary {
	background: var(--petrol-700);
	border: 1px solid var(--petrol-700);
	color: var(--white);
}

.elr-btn--primary:hover {
	background: var(--petrol-900);
	border-color: var(--petrol-900);
	color: var(--white);
}

.elr-btn--ghost {
	background: transparent;
	border: 1px solid var(--petrol-700);
	color: var(--petrol-700);
}

.elr-btn--ghost:hover {
	background: var(--petrol-100);
}

/* The hero trace figure. Captioned as a brand element, because a mark that
   looks like a measurement gets read as one. */
.elr-hero__figure {
	margin: var(--space-8) 0 0;
	background: var(--white);
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-1);
	padding: var(--space-4) var(--space-6);
}

.elr-hero__figure svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--amber-500);
}

.elr-hero__figure figcaption {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink-500);
	margin-block-start: var(--space-3);
}

/* A light tint band behind the card grid. The page was previously white on
   white on white all the way down (body, hero, cards all the same near-white),
   which reads as one long undifferentiated scroll. This is the first of
   several planned section breaks (tester feedback, 2026-09-20); low-risk
   because it is self-contained inside the existing card grid's own box,
   nothing else on the page has to move. */
.elr-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--space-6);
	margin-block: var(--space-12);
	background: var(--petrol-100);
	border-radius: var(--radius-lg);
	padding: var(--space-8) var(--space-6);
}

.elr-cards .elr-cards__card {
	box-shadow: none;
}

.elr-cards__card {
	/* The card is an <a> (inline by default) wrapping four block-level
	   children (icon, h3, p, count). Most browsers auto-blockify that, but
	   not reliably everywhere, and when they do not, the inline box gets
	   split into a fragment per block child instead of laid out as one
	   column, which is what was throwing the icon and count off into their
	   own stack down the right edge of the page. Setting flex explicitly
	   removes the ambiguity instead of relying on that fallback behaviour. */
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-lg);
	background: var(--white);
	padding: var(--space-6);
	box-shadow: var(--shadow-1);
	transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.elr-cards__card:hover {
	box-shadow: var(--shadow-2);
	border-color: var(--petrol-100);
}

.elr-cards__icon {
	display: block;
	width: 34px;
	height: 34px;
	color: var(--petrol-700);
	margin-block-end: var(--space-3);
}

.elr-cards__count {
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--petrol-700);
	margin-block-start: var(--space-3);
}

.elr-cards__card h3 {
	margin-block: 0 var(--space-2);
	font-size: 1.25rem;
}

.elr-cards__card h3 a {
	text-decoration: none;
}

.elr-cards__card h3 a:hover {
	text-decoration: underline;
}

.elr-cards__card p {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-500);
}

/* ---------------------------------------------------------------
   Search
   --------------------------------------------------------------- */

.elr-search {
	display: flex;
	gap: var(--space-2);
}

.elr-search input[type="search"] {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-md);
	background: var(--white);
	color: var(--ink-900);
	min-height: 44px;
	width: 9rem;
	min-width: 0;
	flex-shrink: 1;
}

/* WordPress's own global styles (theme.json) put a preset background and
   color on every button[type="submit"] site-wide unless it carries the
   wp-element-button class, and that generated rule
   (.wp-site-blocks button[type="submit"]:not(.wp-element-button)) is more
   specific than a single class selector, so it silently beat this rule no
   matter what order the stylesheets loaded in. The contact-form submit
   button already had to solve the same fight with !important (see
   class-contact.php); doing the same here for consistency rather than
   relying on markup to carry an opt-out class. */
/* Tester feedback 2026-09-20: too tall for its text, font too large. The
   44px min-height/min-width in the shared target-size rule above is an
   accessibility minimum for the CLICKABLE area, not a mandate that the
   button visually looks that tall - min-width here keeps the tap target
   wide even though the button now reads much leaner. */
.elr-search__submit {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-medium);
	min-height: 2.25rem;
	min-width: 44px;
	padding-block: var(--space-1) !important;
	padding-inline: var(--space-6) !important;
	border: 0 !important;
	border-radius: var(--radius-md);
	background: var(--petrol-700) !important;
	color: var(--white) !important;
	cursor: pointer;
}

.elr-search__submit:hover {
	background: var(--petrol-900) !important;
}

/* ---------------------------------------------------------------
   Footer, petrol-900 as the concept specifies
   --------------------------------------------------------------- */

.elr-footer {
	margin-block-start: var(--space-24);
	background: var(--petrol-900);
	color: #CFE0E1;
	padding: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-small);
}

.elr-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-12) var(--gutter) var(--space-8);
	display: grid;
	gap: var(--space-8);
}

/* The wordmark reused in the footer (tester feedback, 2026-09-20: "the footer
   needs a logo at the top of it"). The default .elr-mark colours (near-black
   text, petrol glyph) are built for a white page and disappear against the
   petrol-900 footer, so they are overridden here rather than adding a second
   copy of the component. */
.elr-footer__brand {
	margin-block-end: var(--space-6);
}

.elr-footer .elr-mark {
	color: var(--white);
}

.elr-footer .elr-mark__glyph {
	color: var(--amber-500);
}

.elr-footer .elr-mark__sub {
	color: #8FB2B4;
}

.elr-footer .elr-mark:hover .elr-mark__name {
	color: var(--amber-500);
}

.elr-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--space-6);
}

.elr-footer__head {
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--white);
	margin: 0 0 var(--space-3);
}

.elr-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 3px;
}

.elr-footer__col a {
	display: block;
	color: #BDD3D4;
	text-decoration: none;
	padding-block: 3px;
}

.elr-footer__col a:hover {
	color: var(--white);
	text-decoration: underline;
}

.elr-footer__legal {
	border-block-start: 1px solid #0D4B51;
	padding-block-start: var(--space-6);
	display: grid;
	gap: var(--space-2);
	max-width: 80ch;
	font-size: 13px;
	color: #8FB2B4;
	line-height: 1.6;
}

.elr-footer__legal strong {
	color: #CFE0E1;
	font-weight: var(--fw-semibold);
}

.elr-footer__legal a {
	color: #BDD3D4;
}

/* ---------------------------------------------------------------
   Block style variations
   --------------------------------------------------------------- */

.is-style-lead {
	font-size: var(--fs-body-lg);
	color: var(--ink-700);
	line-height: 1.55;
}

.is-style-eyebrow {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--petrol-700);
	margin-block-end: var(--space-2);
}

.is-style-mono {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
}

.is-style-panel {
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-lg);
	background: var(--white);
	padding: var(--space-6);
}

.is-style-tint {
	background: var(--petrol-100);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.is-style-checks {
	list-style: none;
	padding-inline-start: var(--space-6);
}

.is-style-checks li {
	position: relative;
}

.is-style-checks li::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--space-6) * -1);
	inset-block-start: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--petrol-500);
}

.is-style-trace {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, var(--ink-300), var(--petrol-500) 50%, var(--ink-300));
	opacity: .7;
	margin-block: var(--space-12);
}

/* ---------------------------------------------------------------
   Forced colours and print
   --------------------------------------------------------------- */

@media (forced-colors: active) {
	.elr-chip {
		border: 1px solid CanvasText;
		background: Canvas;
		color: CanvasText;
		forced-color-adjust: none;
	}

	.elr-chip__mark {
		background: CanvasText;
	}

	.elr-callout,
	.elr-card,
	.elr-figure,
	.elr-takeaways,
	.elr-legend,
	.elr-disclosure {
		border: 1px solid CanvasText;
	}

	.elr-rule,
	.is-style-trace {
		background: CanvasText;
	}
}

@media print {
	.elr-header,
	.elr-footer__nav,
	.elr-toc,
	.elr-drawer__open,
	.elr-search {
		display: none;
	}

	.elr-table__scroll {
		overflow: visible;
	}

	a::after {
		content: " (" attr(href) ")";
		font-size: 0.75em;
		color: #555;
	}
}

/* ---------------------------------------------------------------
   Remaining component parts
   These finish the selectors the plugin's blocks emit. The theme
   integrity check fails the build if any of them is missing, which is
   how they got written rather than discovered as a blank area later.
   --------------------------------------------------------------- */

.elr-byline__review {
	color: var(--ink-500);
}

.elr-byline__date {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--ink-500);
}

.elr-verified__how {
	font-size: var(--fs-small);
}

.elr-trials {
	margin-block: var(--space-12);
}

.elr-trials__title {
	font-size: var(--fs-h3);
	margin: 0 0 var(--space-3);
}

.elr-ref__body {
	display: block;
}

.elr-disclosure__more {
	margin: var(--space-3) 0 0;
	font-size: var(--fs-small);
}

/* The standalone trace glyph, used inside the wordmark and anywhere a
   decorative mark is placed. Never carries axes, ticks or labels. */
.elr-trace {
	display: block;
	overflow: visible;
}

/* The condensed header on scroll. Sticky is opt-in via the part, so a long
   evidence page keeps the navigation reachable without the bar covering a
   third of a phone screen. */
.elr-header--sticky {
	position: sticky;
	top: 0;
}

.elr-header--sticky .elr-header__inner {
	padding-block: var(--space-3);
}

/* ---------------------------------------------------------------
   Corrections found by screenshotting the built pages
   --------------------------------------------------------------- */

/* A cluster card is one big link, so the global link underline was landing on
   the body copy and the count label as well as the title. Only the title
   carries the affordance, and only on hover. */
.elr-cards__card,
.elr-cards__card:hover,
.elr-cards__card h3 a,
.elr-cards__card p,
.elr-cards__card .elr-cards__count {
	text-decoration: none;
}

.elr-cards__card h3 a,
.elr-cards__card p {
	color: inherit;
}

.elr-cards__card h3 {
	color: var(--petrol-700);
}

.elr-cards__card:hover h3,
.elr-cards__card:focus-visible h3 {
	text-decoration: underline;
	text-decoration-color: var(--amber-700);
	text-underline-offset: 3px;
}

.elr-cards__card p {
	color: var(--ink-500);
}

/* Same problem on a trial card title, which is a link inside a heading. */
.elr-card__title a {
	text-decoration: none;
}

/* Below the rail breakpoint the reading column was left-aligned in a wide
   viewport, leaving an empty half-screen. Centre it until the rail appears. */
@media (max-width: 1279px) {
	.elr-layout--railed > main {
		max-width: 46rem;
		margin-inline: auto;
	}

	.elr-layout--railed > .elr-rail {
		max-width: 46rem;
		margin-inline: auto;
	}
}

/* ---------------------------------------------------------------
   Contact form

   The block editor's global styles strip the browser's default input
   border, so without this the form's fields render with no visible
   box at all, just floating labels. Same treatment as the search
   field, so it reads as part of the same site.
   --------------------------------------------------------------- */

.elr-contact-form {
	max-width: 32em;
	margin-block-start: var(--space-6);
}

.elr-contact-form__field {
	margin-block-end: var(--space-4);
}

.elr-contact-form__field label {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	color: var(--ink-900);
	margin-block-end: var(--space-2);
}

.elr-contact-form__field input[type="text"],
.elr-contact-form__field input[type="email"],
.elr-contact-form__field textarea {
	display: block;
	width: 100%;
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	padding: var(--space-2) var(--space-3);
	/* ink-300 (used for the search box) is too close to the paper
	   background to read as a box at rest; ink-500 holds up without a
	   cursor in the field. */
	border: 1.5px solid var(--ink-500);
	border-radius: var(--radius-md);
	background: var(--white);
	color: var(--ink-900);
}

.elr-contact-form__field input[type="text"]:focus,
.elr-contact-form__field input[type="email"]:focus,
.elr-contact-form__field textarea:focus {
	border-color: var(--petrol-700);
	outline: 2px solid var(--petrol-700);
	outline-offset: 1px;
}

.elr-contact-form__field textarea {
	resize: vertical;
}

.elr-contact-form button[type="submit"] {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	padding: var(--space-3) var(--space-6);
	border: 0;
	border-radius: var(--radius-md);
	background: var(--petrol-700);
	color: var(--white);
	cursor: pointer;
}

.elr-contact-form button[type="submit"]:hover,
.elr-contact-form button[type="submit"]:focus-visible {
	background: var(--petrol-800, var(--petrol-700));
}

.elr-contact-form__notice {
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-md);
	margin-block-end: var(--space-4);
}

.elr-contact-form__notice--success {
	background: var(--sage-50, #eef5f1);
	color: var(--ink-900);
	border: 1px solid var(--sage-300, #9fc6b3);
}

.elr-contact-form__notice--error {
	background: #fdecec;
	color: var(--ink-900);
	border: 1px solid #e2a2a2;
}


/* ---------------------------------------------------------------
   Site-wide width (1.3.0)

   The main column was capped at 45rem by theme.json (contentSize), which is
   what made every page read like a receipt: one narrow strip in a wide
   window, with grids forced to stack. contentSize is now 72rem (1152px),
   inside the 1200px container token, and the grid sections below already
   use auto-fit/auto-fill columns, so they now run two and three across at
   desktop width without any change to their own rules.

   Running prose is the exception. A 1152px line of text is unreadable, so
   paragraphs, lists and sub-headings keep a reading measure (80ch) and sit
   at the left edge of the wide column, like a journal page, while tables,
   cards, grids and figures use the full width. WordPress centres every
   child of a constrained group with !important margins, so the override
   has to be !important too.
   --------------------------------------------------------------- */

.elr-prose.is-layout-constrained > p,
.elr-prose.is-layout-constrained > ul,
.elr-prose.is-layout-constrained > ol,
.elr-prose.is-layout-constrained > h2,
.elr-prose.is-layout-constrained > h3,
.elr-prose.is-layout-constrained > h4 {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* ---------------------------------------------------------------
   Latest research (homepage module)
   --------------------------------------------------------------- */

.elr-latest {
	margin-block: var(--space-8) var(--space-12);
	background: var(--white);
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-1);
	padding: var(--space-6) var(--space-6) var(--space-4);
}

.elr-latest__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--petrol-700);
}

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

.elr-latest__item {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-2) var(--space-6);
	padding-block: var(--space-4);
	border-block-start: 1px solid var(--ink-100);
}

.elr-latest__item:first-child {
	border-block-start: 0;
}

.elr-latest__date {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--ink-500);
	padding-block-start: 0.2em;
}

.elr-latest__headline {
	font-family: var(--font-sans);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--ink-900);
	text-decoration: none;
}

.elr-latest__headline:hover {
	color: var(--petrol-700);
	text-decoration: underline;
	text-decoration-color: var(--amber-700);
	text-underline-offset: 3px;
}

.elr-latest__stat {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-3);
	margin: var(--space-2) 0 0;
	font-family: var(--font-sans);
	font-size: var(--fs-small);
}

.elr-latest__statvalue {
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--petrol-700);
}

.elr-latest__statlabel {
	color: var(--ink-500);
}

.elr-latest__more {
	margin: var(--space-2) 0 0;
	padding-block-start: var(--space-3);
	border-block-start: 1px solid var(--ink-100);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
}

.elr-latest__more a {
	color: var(--petrol-700);
	text-decoration: none;
}

.elr-latest__more a:hover {
	text-decoration: underline;
	text-decoration-color: var(--amber-700);
	text-underline-offset: 3px;
}

@media (max-width: 700px) {
	.elr-latest {
		padding-inline: var(--space-4);
	}

	.elr-latest__item {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------
   Research News archive and story page
   --------------------------------------------------------------- */

.elr-newsfilter__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
}

.elr-newsfilter__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 40px;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--ink-300);
	border-radius: 999px;
	background: var(--white);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-700);
	text-decoration: none;
}

.elr-newsfilter__link:hover {
	border-color: var(--petrol-700);
	color: var(--petrol-700);
}

.elr-newsfilter__link[aria-current="true"] {
	background: var(--petrol-700);
	border-color: var(--petrol-700);
	color: var(--white);
}

.elr-newsfilter__count {
	font-family: var(--font-mono);
	font-size: 12px;
	opacity: .8;
}

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

.elr-newsrow {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: var(--space-2) var(--space-8);
	padding-block: var(--space-6);
	border-block-start: 1px solid var(--ink-300);
}

/* display:grid above would otherwise beat the hidden attribute. */
.elr-newsrow[hidden],
.elr-newsindex__none[hidden] {
	display: none;
}

.elr-newsrow__date {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--ink-500);
	padding-block-start: 0.35em;
}

.elr-newsrow__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-h4);
	line-height: var(--lh-heading);
}

.elr-newsrow__title a {
	color: var(--ink-900);
	text-decoration: none;
}

.elr-newsrow__title a:hover {
	color: var(--petrol-700);
	text-decoration: underline;
	text-decoration-color: var(--amber-700);
	text-underline-offset: 3px;
}

.elr-newsrow__stat {
	margin: var(--space-3) 0 0;
	font-family: var(--font-sans);
	font-size: var(--fs-small);
}

.elr-newsrow__statvalue {
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--petrol-700);
}

.elr-newsrow__statlabel {
	color: var(--ink-500);
}

.elr-newsrow__summary {
	margin: var(--space-3) 0 0;
	max-width: var(--content-measure);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-700);
}

.elr-newsrow__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
}

@media (max-width: 700px) {
	.elr-newsrow {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Story page head */

.elr-newshead {
	margin-block: var(--space-4) var(--space-8);
}

.elr-newshead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	margin: 0 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-500);
}

.elr-newshead__date {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--ink-700);
}

.elr-newshead__summary {
	margin: 0;
	max-width: var(--content-measure);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	color: var(--ink-900);
}

.elr-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-4);
	margin-block-start: var(--space-8);
}

.elr-stat {
	margin: 0;
	padding: var(--space-4) var(--space-6) var(--space-6);
	background: var(--white);
	border: 1px solid var(--ink-300);
	border-inline-start: 4px solid var(--petrol-700);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-1);
}

.elr-stat__value {
	margin: 0;
	font-family: var(--font-sans);
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	font-variant-numeric: tabular-nums;
	color: var(--petrol-700);
}

.elr-stat__label {
	margin-block-start: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	line-height: 1.45;
	color: var(--ink-700);
}

/* Story page foot */

.elr-newslimits {
	margin-block: var(--space-8);
	padding: var(--space-6);
	background: var(--ink-100);
	border-inline-start: 4px solid var(--amber-700);
	border-radius: var(--radius-md);
}

.elr-newslimits__title,
.elr-newssource__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--ink-500);
}

.elr-newslimits p {
	max-width: var(--content-measure);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	color: var(--ink-700);
}

.elr-newslimits p:last-child {
	margin-block-end: 0;
}

.elr-newssource {
	margin-block: var(--space-8);
	padding-block-start: var(--space-6);
	border-block-start: 1px solid var(--ink-300);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
}

.elr-newssource p {
	margin-block: 0 var(--space-3);
	max-width: var(--content-measure);
}

.elr-newssource__cite {
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
}

.elr-newssource__cite a {
	overflow-wrap: anywhere;
}

.elr-newssource__checked,
.elr-newssource__trialkind {
	color: var(--ink-500);
}

/* ---------------------------------------------------------------
   Header at desktop width (1.3.0)

   Research News joined the primary nav as a top-level item, which is the
   eighth. At 1440px the row no longer fits inside the 1200px container, so
   from 1440 up the header row (not the page) uses a 1480px container and a
   slightly tighter gap. Below 1440 the drawer takes over, as before.
   --------------------------------------------------------------- */

@media (min-width: 1440px) {
	.elr-header__inner,
	.elr-header__utility {
		max-width: 1480px;
	}

	.elr-nav__list {
		gap: var(--space-1) var(--space-2);
	}
}

/* ---------------------------------------------------------------
   1.3.1  Compact header (2026-10-01)
   The header was about 280px tall before any content: a grey search strip,
   then the logo alone on a row, then the menu on its own row. Now the logo
   sits beside its wordmark, the search shares the logo's row on desktop, and
   the menu follows directly under it. Nothing changes in the markup, so a
   saved copy of the header template part cannot hold this back.
   --------------------------------------------------------------- */
.elr-header .elr-mark {
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
}

.elr-header .elr-mark__glyph {
	margin: 0;
}

.elr-header .elr-mark__text {
	line-height: 1.05;
}

.elr-header .elr-mark__name {
	font-size: 1.45rem;
}

.elr-hero {
	padding-block-start: var(--space-8);
}

@media (min-width: 1440px) {
	.elr-header {
		--elr-row: 64px;
	}

	.elr-header__utility-bar {
		position: absolute;
		inset: 0 0 auto 0;
		background: transparent;
		border: 0;
		pointer-events: none;
		z-index: 2;
	}

	.elr-header__utility {
		height: var(--elr-row);
		padding-block: 0;
		align-items: center;
	}

	.elr-header__utility .elr-search {
		pointer-events: auto;
	}

	.elr-header__inner {
		padding-block: 0;
		row-gap: 0;
	}

	.elr-header .elr-mark {
		min-height: var(--elr-row);
	}

	.elr-header .elr-nav {
		flex: 1 0 100%;
		border-top: 1px solid var(--ink-100);
		padding-block: var(--space-2);
	}
}

@media (max-width: 1439px) {
	.elr-header__inner {
		padding-block: var(--space-3);
	}
}

/* Two stray gaps found while measuring: WordPress puts a 24px top margin on the first block inside the header
   (a grey strip above the logo), and an empty <p> that wpautop leaves behind inside the nav adds 34px. */
.elr-header > .elr-header__inner,
.elr-header .elr-header__utility-bar {
	margin-block-start: 0;
}

.elr-header p:empty,
.elr-header .elr-nav > p:empty {
	display: none;
	margin: 0;
}

.elr-header__inner > p {
	margin: 0;
}

/* Footer lockup with the 1.3.1 mark: white trace, lighter petrol bowl, amber dot (the dot colour comes from the markup). */
.elr-footer .elr-mark__glyph {
	color: var(--white);
	--elr-ring: var(--petrol-500);
}

/* 1.3.2: the logo is now the supplied lockup artwork (PNG, transparent). The light version shows in the header, the reversed version in the footer. */
.elr-mark__img { display: block; height: auto; }
.elr-mark__img--reversed { display: none; }
.elr-header .elr-mark__img--light { width: 224px; max-width: 100%; }
@media (max-width: 600px) { .elr-header .elr-mark__img--light { width: 172px; } }
.elr-footer .elr-mark__img--light { display: none; }
.elr-footer .elr-mark__img--reversed { display: block; width: 220px; max-width: 100%; }

/* 1.3.3: the one-row desktop menu had about 4px to spare at 1440px, so on some screens and browser zoom levels the last items (Ask, About) wrapped onto a second row. A slightly smaller type size and tighter padding give it real room, and nothing wraps until the drawer takes over below 1440px. */
@media (min-width: 1440px) {
	.elr-header .elr-nav__list {
		flex-wrap: nowrap;
		gap: var(--space-1) 2px;
	}

	.elr-header .elr-nav__link {
		font-size: 0.875rem;
		padding-inline: 6px;
		white-space: nowrap;
	}

	.elr-header .elr-nav__toggle {
		padding-inline: 2px;
	}
}


/* ---------------------------------------------------------------
   1.4.0 header: dark band, six items, search icon and Ask button
   (matches the approved mockup; the old utility bar is gone)
   --------------------------------------------------------------- */

.elr-header {
	background: var(--petrol-900);
	border-block-end: 1px solid rgba(255, 255, 255, .12);
	color: var(--white);
}

.elr-header .elr-header__inner {
	flex-wrap: nowrap;
	gap: var(--space-6);
	max-width: var(--container-wide);
	padding: var(--space-3) var(--gutter);
}

.elr-header .elr-mark {
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	color: var(--white);
}

.elr-mark__img {
	display: block;
	height: auto;
}

.elr-header .elr-mark__img {
	width: 224px;
	max-width: 100%;
}

.elr-footer .elr-mark__img {
	width: 220px;
	max-width: 100%;
}

.elr-mark__tag {
	font-family: var(--font-sans);
	font-size: 9.5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #9CC9CD;
}

@media (max-width: 600px) {
	.elr-header .elr-mark__img {
		width: 172px;
	}

	.elr-mark__tag {
		font-size: 8px;
	}
}

.elr-btn--mint {
	background: var(--mint);
	border: 1px solid var(--mint);
	color: #04282C;
}

.elr-btn--mint:hover {
	background: #8DF0DE;
	border-color: #8DF0DE;
	color: #04282C;
}

.elr-header .elr-drawer__open {
	border-color: rgba(255, 255, 255, .5);
	color: var(--white);
}

.elr-htools {
	display: none;
}

.elr-hsearch {
	position: relative;
}

.elr-hsearch summary {
	display: flex;
	padding: var(--space-2);
	border-radius: 50%;
	list-style: none;
	cursor: pointer;
	color: var(--white);
}

.elr-hsearch summary::-webkit-details-marker {
	display: none;
}

.elr-hsearch summary:hover,
.elr-hsearch[open] summary {
	background: rgba(255, 255, 255, .12);
}

.elr-hsearch__form {
	position: absolute;
	inset: calc(100% + 8px) 0 auto auto;
	z-index: 50;
	display: flex;
	gap: var(--space-2);
	width: 21rem;
	padding: var(--space-3);
	border: 1px solid var(--ink-300);
	border-radius: var(--radius-md);
	background: var(--white);
	box-shadow: var(--shadow-2);
}

.elr-hsearch__form input {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	border: 1.5px solid var(--ink-500);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: 16px;
}

.elr-hsearch__form button {
	padding: 9px 16px;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--petrol-700);
	color: var(--white);
	font: inherit;
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.elr-nav__ask-mobile {
	width: 100%;
}

@media (min-width: 1100px) {
	.elr-htools {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		margin-inline-start: auto;
	}

	.elr-hbtn {
		min-height: 40px;
		padding-block: var(--space-2);
	}

	.elr-header .elr-nav {
		position: static;
		flex: 1 1 auto;
		width: auto;
		padding: 0;
		border: 0;
		background: none;
		overflow: visible;
		transform: none;
		z-index: auto;
	}

	.elr-header .elr-nav__list {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: var(--space-1) var(--space-4);
		padding: 0;
	}

	.elr-header .elr-nav__item {
		flex-wrap: nowrap;
		padding: 0;
		border: 0;
	}

	.elr-header .elr-nav__link {
		flex: none;
		padding-inline: var(--space-1);
		font-size: .95rem;
		white-space: nowrap;
		color: var(--white);
	}

	.elr-header .elr-nav__link:hover,
	.elr-header .elr-nav__link[aria-current="page"] {
		color: var(--mint);
		text-decoration-color: var(--mint);
	}

	.elr-header .elr-nav__toggle {
		color: #9CC9CD;
	}

	.elr-header .elr-nav__sub {
		position: absolute;
		width: auto;
		min-width: 16rem;
		padding: var(--space-2) 0;
		border: 1px solid var(--ink-300);
		box-shadow: var(--shadow-2);
	}

	.elr-header .elr-nav__mobile-extra,
	.elr-header .elr-drawer__close,
	.elr-header .elr-drawer__open {
		display: none;
	}

	.elr-scrim {
		display: none !important;
	}
}

@media (min-width: 1100px) and (max-width: 1279px) {
	.elr-header .elr-nav__list {
		gap: var(--space-1) var(--space-2);
	}

	.elr-header .elr-nav__link {
		font-size: .9rem;
	}

	.elr-mark__tag {
		display: none;
	}
}