/*
 * Publications and Archives, plus the three generic routes that had no
 * template at all before this pass: archive.php, search.php and 404.php.
 *
 * One stylesheet rather than three, because all five surfaces are the same
 * object: a heading, an intro, a long list of dated rows, and the shared
 * closing call to action. Neither route has a Figma frame, so every value here
 * is copied from an already approved block:
 *
 *   hero            pages-fidelity.css .inner-hero, 852 band, 95px motto
 *   intro label     about-fidelity.css .about-statement span, 20 / 1.3
 *   intro body      about-fidelity.css .about-split p, 20 / 1.5 Geist 400
 *   list heading    pages-fidelity.css .team-heading h2, 80 / 1.04
 *   year heading    pages-fidelity.css .inner-cta h2 scale, stepped down to 44
 *                   which is the .about-statement p size already on the site.
 *                   It is an h2 on Archives and an h3 under the page's own h2
 *                   on Publications: the Archives page has no list heading, so
 *                   an h3 there skipped a level in the outline.
 *   row body        about-fidelity.css .about-split p, 20 / 1.5
 *   pill            main.css .tag, including the shared --tag-pill-padding
 *   closing CTA     pages-fidelity.css .inner-cta, untouched
 *
 * Enqueued in functions.php (ebiom_assets) for is_page('publications'),
 * is_page('archives') and every archive, search or 404 route, after ebiom-main
 * and ebiom-pages-fidelity, with a filemtime version.
 */

/*
 * SECTION: Hero legibility.
 *
 * The shared .inner-hero-shade is rgba(30,56,50,.2) on soft-light, which only
 * works because the About and Services photographs are dark to begin with. The
 * two new heroes are not. Measured behind the 20px lede with the text hidden,
 * cream #fffaf3 over the Archives marbled water ran a 4.87:1 median with 33%
 * of its pixels under 3:1 and a worst pixel of 1.00:1, so roughly a third of
 * the sentence was unreadable; the laboratory crop under the Publications lede
 * ran 9% under 3:1 and made the header nav labels hard to read as well.
 *
 * Two layers, both in the existing forest, no new colour and no new type size:
 * a flat wash that lifts the whole band including the header, and a soft
 * elliptical scrim centred on the copy block that carries the plate where the
 * type actually sits and fades out before the edges of the frame, so the
 * photograph is still a photograph. It tracks the copy box, so it holds at
 * every width without a breakpoint. A darker photograph from the client would
 * let both rules go.
 */
.record-index .inner-hero .inner-hero-shade {
	background: rgba(37, 52, 50, .40);
	mix-blend-mode: normal;
}
.record-index .inner-hero-copy::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -100px -140px -120px;
	/*
	 * closest-side, so the two radii are exactly half the box and the scrim
	 * reaches zero on the frame it is drawn in. An explicit radius is a radius,
	 * not a diameter: sized at 100% it ran past the box and the browser clipped
	 * it into a visible rectangle with hard edges.
	 */
	background: radial-gradient(ellipse closest-side at 50% 50%, rgba(37, 52, 50, .60) 0%, rgba(37, 52, 50, .58) 70%, rgba(37, 52, 50, .30) 88%, rgba(37, 52, 50, 0) 100%);
	pointer-events: none;
}

/*
 * SECTION: Intro band, retired in client review round 2.
 *
 * The flat cream intro that opened both pages is gone. On Publications its
 * three copy keys moved whole into the full bleed photographic band, and on
 * Archives its sentence moved into the first feature band's intro, so no copy
 * key was orphaned and none was invented. The rules that drew it are removed
 * with the markup rather than left behind: .publications-intro no longer
 * appears in any template, including archive.php, search.php and 404.php, so
 * keeping them would be dead code in a stylesheet five routes load.
 */

/* SECTION: The list itself. */
.record-index .publication-list-section {
	padding: 96px max(53px, calc((100vw - 1334px) / 2)) 120px;
	background: var(--color-cream);
}
.record-index .publication-list-heading h2 {
	margin: 0 0 68px;
	font-size: 80px;
	line-height: 1.04;
}
.record-index .publication-year {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 54px;
	padding: 40px 0;
	border-top: 1px solid rgba(8, 12, 10, .18);
}
.record-index .publication-year > h2,
.record-index .publication-year > h3 {
	margin: 0;
	font-family: "Exposure Local", Exposure, "Nimbus Roman", serif;
	font-weight: 400;
	font-size: 44px;
	line-height: 1.17429;
}
.record-index .publication-list {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.record-index .publication-list > li {
	max-width: 880px;
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
}
/*
 * Links follow the house rule rather than the browser default. main.css sets
 * a { text-decoration: none } and the only underline anywhere on the site is
 * the footer's on hover, which is what these two pages now do as well. Before
 * this, 30 links on Archives and 25 on Publications were underlined at rest,
 * including the 35px entry titles, and no other route had a single one.
 *
 * The blanket .publication-list a rule was also what defeated the
 * text-decoration: none already declared on .archive-row-title: same two class
 * selectors, but the trailing element selector broke the tie.
 */
.record-index .publication-list a {
	text-decoration: none;
	text-underline-offset: 3px;
}
.record-index .publication-list a:hover,
.record-index .publication-list a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* SECTION: Archive index. Same list, plus a type pill, a linked title and a
 * date, and the filter row above it. */
.record-index .archive-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 54px;
}
/*
 * Point 54d70977 asked for one pill everywhere. Padding was already the shared
 * --tag-pill-padding token, but these two controls were still drawn at their
 * own size: the filter at 13px on a 34px pill and the row tag at 11px on a
 * 26px pill, against 14px on 31px everywhere else on the site. Type, leading,
 * height and the active fill now match the Insights feed's own filter row
 * exactly, which is the pill the client has already approved.
 */
.record-index .archive-filter {
	min-height: 31px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	padding: 0 var(--tag-pill-padding);
	background: var(--color-blue-light);
	color: var(--color-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.12;
	cursor: pointer;
	transition: background-color 300ms ease, color 300ms ease;
}
.record-index .archive-filter:hover,
.record-index .archive-filter:focus-visible,
.record-index .archive-filter.is-active {
	background: var(--color-ink);
	color: var(--color-cream);
}
.record-index .archive-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 6px 24px;
}
/*
 * The filter hides rows and year groups with the hidden attribute, and the
 * browser's own [hidden] { display: none } rule carries a single attribute
 * selector, so the two class selectors above outranked it and the control
 * looked dead while the markup was correct. These restate the same intent at
 * matching specificity.
 */
.record-index .archive-row[hidden],
.record-index .publication-year[hidden] {
	display: none;
}
.record-index .archive-row .tag {
	grid-column: 1 / -1;
	min-height: 31px;
	margin-top: 0;
	align-self: start;
	justify-self: start;
	font-size: 14px;
	line-height: 1.12;
}
.record-index .archive-row-title {
	font-family: "Exposure Local", Exposure, "Nimbus Roman", serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.2;
	text-decoration: none;
}
.record-index .archive-row-title:hover,
.record-index .archive-row-title:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.record-index .archive-row-body {
	grid-column: 1 / -1;
	margin: 0;
}
.record-index .archive-row-meta {
	font-size: 15px;
	line-height: 1.4;
	opacity: .6;
	white-space: nowrap;
}
.record-index .archive-empty {
	margin: 40px 0 0;
	font-size: 20px;
	line-height: 1.5;
}

/* SECTION: The generic listing routes. archive.php, search.php and 404.php had
 * no template at all before this pass, so they rendered index.php with no page
 * stylesheet attached. They open with this band instead of a photographic hero,
 * because none of them has an image of its own to be honest about. */
.record-index.listing-page {
	padding-top: 0;
}
.record-index .listing-lede {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	padding: calc(var(--site-header-height) + 120px) max(53px, calc((100vw - 1334px) / 2)) 96px;
	background: var(--color-blue);
	color: var(--color-ink);
}
.record-index .listing-lede h1 {
	margin: 0;
	font-size: 80px;
	line-height: 1.04;
}
.record-index .listing-lede p {
	max-width: 760px;
	margin: 0;
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
}
.record-index .listing-lede-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
/*
 * The lede band is a column with align-items: flex-start, so a nested flex row
 * shrinks to its own min-content and wraps the button under the field. The form
 * takes an explicit width instead, and only wraps once the field can no longer
 * hold its own minimum.
 */
.record-index .search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	width: min(640px, 100%);
}
.record-index .search-form input[type="search"] {
	flex: 1 1 260px;
}
.record-index .search-form input[type="search"] {
	min-width: 0;
	min-height: 52px;
	border: 1px solid rgba(8, 12, 10, .25);
	border-radius: 999px;
	padding: 0 24px;
	background: var(--color-cream);
	color: var(--color-ink);
	font-family: inherit;
	font-size: 16px;
}
.record-index.listing-page .publication-list-section {
	padding-top: 96px;
}
.record-index .pagination,
.record-index .navigation.pagination {
	margin-top: 54px;
	font-size: 16px;
}
.record-index .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ======================================================================
 * CLIENT REVIEW ROUND 2. Publications and Archives were formatted, not
 * designed: 4,405 and 5,790 pixels of one repeating row, no colour, no image
 * and no way to find anything, on a site whose other routes carry image cards,
 * periwinkle bands and photographic dividers.
 *
 * Every block added below is one already drawn and approved somewhere else in
 * this theme. What is new here is only the scoping and the geometry those
 * blocks need at this size, because the approved values live under
 * .ebiom-home, .about-page or .insights-page and none of those stylesheets
 * loads on these two routes. Nothing here is a new type size, a new colour, a
 * new radius or a new motion.
 * ====================================================================== */

/* SECTION: Full bleed photographic band. The homepage Research and Innovation
 * band, which is the one full bleed photographic moment each of these pages
 * was missing.
 *
 * The positioning rule exists only as .ebiom-home .driving-background, so
 * without this copy the photograph renders as a plain inline image at its own
 * size and the band is not a band. The stacking is stated too: main.css draws
 * its scrim in a ::before, and a generated first child paints under a
 * positioned <img> that comes after it in the DOM, so the scrim would sit
 * behind the photograph and do nothing. */
.record-index .driving-section {
	min-height: 560px;
	padding: 96px max(53px, calc((100vw - 1334px) / 2));
}
.record-index .driving-background {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}
/*
 * The packaged band photograph is an aerial with dark forest on one side and
 * bright open water on the other, and the box is wider than the frame, so
 * object-position cannot move which side is which: the image is scaled to the
 * width and cropped vertically. Mirroring it puts the dark half under the two
 * paragraph column, which is the 22px text that needs it, and leaves the bright
 * half under the 60px heading and a solid button, which carry a lower contrast
 * happily. The .inner-hero image in this theme already ships mirrored, so this
 * is a move the design already makes, and an aerial has no text or faces to
 * give it away. The Archives divider photograph is uniformly dark and is left
 * alone.
 */
.record-index .publications-band .driving-background {
	transform: scaleX(-1);
}
/*
 * Measured against cream on the band photograph, not guessed: the left half of
 * the frame is dark forest and the right half is bright open water, and the
 * copy column that lands on the bright half is the two paragraph one. A flat
 * wash heavy enough for the water flattens the forest, so the scrim leans
 * across the frame instead, in the existing forest and with no new colour.
 */
.record-index .driving-section::before {
	z-index: 1;
	background: linear-gradient(90deg, rgba(37, 52, 50, .64) 0%, rgba(37, 52, 50, .54) 45%, rgba(37, 52, 50, .46) 100%);
}
.record-index .driving-grid {
	grid-template-columns: minmax(0, 640fr) minmax(0, 638fr);
	gap: 64px;
	align-items: center;
}
.record-index .driving-grid h2 {
	max-width: 581px;
	margin: 0 0 40px;
	font-size: 60px;
	line-height: 1.04;
}
.record-index .driving-grid p {
	max-width: 654px;
	margin: 0;
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
}
.record-index .driving-grid p + p {
	margin-top: 25px;
}

/* SECTION: Scale band. The Services page kit grid carrying three derived
 * numbers instead of five products.
 *
 * .kits-section is 1044px tall because it was drawn for five kits, and
 * .kit-card is 282px tall for the same reason, so both floors are released
 * here or the band renders as a yellow void with three small cards in it. The
 * 80px numeral is the ramp this file already declares for the list heading,
 * not a new size. No icon tile is emitted, so the 48px rounded square that
 * rule draws never appears. */
.record-index .publications-scale {
	min-height: 0;
	padding: 78px max(53px, calc((100vw - 1334px) / 2)) 82px;
}
.record-index .publications-scale .kit-card {
	min-height: 0;
	padding: 40px 24px 44px;
}
.record-index .publications-scale .kit-card h3 {
	margin: 0 0 14px;
	font-size: 80px;
	line-height: 1;
}
.record-index .publications-scale .kit-card p {
	font-size: 20px;
	line-height: 1.4;
}

/* SECTION: Feature band. The Insights page feature band, so somebody flipping
 * between /insights/ and these two routes meets the same module.
 *
 * Restated rather than borrowed. The unscoped .insights-feature rules in
 * content-fidelity.css are the pre round 2 draft, a 1296 centred container
 * with a 455px column and a 72px heading; the geometry the client actually
 * approved is the .insights-page block that overrides them. Enqueuing that
 * stylesheet here would have shipped the draft, which is the trap this copy
 * avoids. The values below are the approved ones. */
.record-index .insights-feature {
	width: 100%;
	max-width: none;
	display: grid;
	grid-template-columns: 490px minmax(0, 1fr);
	align-items: center;
	gap: 78px;
	margin: 0;
	padding: 58px max(53px, calc((100vw - 1334px) / 2)) 60px;
	background: var(--color-cream);
}
.record-index .insights-feature-article {
	background: var(--color-blue);
}
.record-index .insights-feature-intro {
	padding-left: 50px;
}
.record-index .insights-feature-intro h2 {
	max-width: 440px;
	margin: 0 0 35px;
	font-size: 60px;
	line-height: 1.04;
}
.record-index .insights-feature-intro p {
	max-width: 410px;
	margin: 0 0 35px;
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
}
.record-index .insights-feature-intro .button {
	width: 285px;
	min-height: 69px;
}
.record-index .insights-feature-card {
	width: 100%;
	max-width: 718px;
	justify-self: stretch;
}
/*
 * The card link, excluding the DOI pill, which is also a direct child anchor
 * and has to keep shrinking to its own content rather than stretching to the
 * card.
 */
.record-index .insights-feature-card > a:not(.publication-doi) {
	display: block;
	color: inherit;
	text-decoration: none;
}
.record-index .insights-feature-media {
	display: block;
	overflow: hidden;
	border-radius: 5px;
	background: var(--color-forest);
}
.record-index .insights-feature-image {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 1.722;
	object-fit: cover;
}
.record-index .insights-feature-card .tag {
	min-height: 31px;
	margin-top: 36px;
	font-size: 14px;
	line-height: 1.12;
}
.record-index .insights-feature-article .insights-feature-card .tag {
	background: var(--color-blue-light);
}
.record-index .insights-feature-card h3 {
	margin: 20px 0 7px;
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-weight: 600;
	font-size: 26px;
	line-height: 1.3;
}
.record-index .insights-feature-card p {
	max-width: 718px;
	margin: 20px 0 0;
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
}
.record-index .insights-feature-card h3 + p {
	margin-top: 0;
}

/* SECTION: Author rail. The About page team grid on the periwinkle values
 * band. About draws seven people three across at 636px tall, which would make
 * four author cards a 2544px section, so the grid runs four across at 420 and
 * the name steps down from 44 to 32. The About hover quote panel is not
 * emitted by the template, because that motion is styled only under
 * .about-page and the markup for it would be dead here. */
.record-index .publications-authors {
	padding: 90px max(55px, calc((100vw - 1330px) / 2)) 96px;
}
/*
 * About draws this heading as a 345px column because its own is two short
 * words. "The scientists behind the papers" broke to five lines in that width,
 * so the block is a row of two here: the heading on its own measure, the
 * sentence beside it, both on the ramp they already use.
 */
.record-index .publications-authors .values-heading {
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 640fr) minmax(0, 638fr);
	align-items: end;
	gap: 54px;
	margin-bottom: 56px;
	padding: 0;
}
.record-index .publications-authors .values-heading h2 {
	width: auto;
	max-width: 640px;
	margin: 0;
	font-size: 80px;
	line-height: 1.04;
}
.record-index .publications-authors .values-heading p {
	max-width: 560px;
	margin: 0;
	font-family: "Geist Local", Geist, Inter, Arial, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
}
.record-index .publications-authors .team-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 17px;
}
.record-index .publication-author {
	display: block;
	color: inherit;
	text-decoration: none;
}
.record-index .publications-authors .team-image {
	height: 420px;
	display: block;
	overflow: hidden;
	border-radius: 5px;
}
.record-index .publications-authors .team-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform 300ms ease;
}
.record-index .publication-author:hover .team-image img,
.record-index .publication-author:focus-visible .team-image img {
	transform: scale(1.03);
}
.record-index .publications-authors .team-card h3 {
	margin: 26px 0 8px;
	font-size: 32px;
	font-weight: var(--weight-emphasis);
	line-height: 1;
}
.record-index .publication-author:hover h3,
.record-index .publication-author:focus-visible h3 {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.record-index .publications-authors .team-card .team-role {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.3;
}
.record-index .publications-authors .team-card > p:last-child {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	opacity: .68;
}
.record-index .publications-authors-button {
	margin-top: 56px;
}

/* SECTION: Year chips and decade bands.
 *
 * Twenty six entries is exactly the size where scanning stops working, and the
 * page carried no jump, no filter and no search. The chip is the Insights
 * filter pill already on the sibling route, and the row is sticky because a
 * control that scrolls off after the first screen of a 4,405px list is not a
 * control. Nothing else in this theme is sticky, so the header token is read
 * here rather than a number typed. */
.record-index .publication-list-section.has-decades {
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
}
.record-index .publication-list-section.has-decades > .publication-list-heading {
	padding: 0 max(53px, calc((100vw - 1334px) / 2));
}
.record-index .publication-jump {
	position: sticky;
	top: var(--site-header-height);
	z-index: 5;
	margin-bottom: 0;
	padding: 16px max(53px, calc((100vw - 1334px) / 2));
	background: var(--color-cream);
	border-bottom: 1px solid rgba(8, 12, 10, .12);
}
.record-index .publication-jump .archive-filter {
	text-decoration: none;
}
/*
 * Without this every chip lands its target under the fixed header and the
 * sticky row on top of it. The 88 was a typed guess at one bar height, and the
 * bar wraps to two or three rows depending on width: at 768 the "2019" heading
 * landed entirely behind it and the first heading you could read was 2018, so
 * the jump looked like it went to the wrong year. --jump-bar-height is measured
 * from the bar itself on load and on resize, with the old value as the fallback
 * for the no JavaScript case.
 */
.record-index .publication-year {
	scroll-margin-top: calc(var(--site-header-height) + var(--jump-bar-height, 88px) + 36px);
}
.record-index .publication-decade {
	padding: 56px max(53px, calc((100vw - 1334px) / 2));
}
.record-index .publication-decade.is-cream {
	background: var(--color-cream);
}
.record-index .publication-decade.is-blue {
	background: var(--color-blue);
}
/* The first year in a band already has the band edge above it, so its own
 * hairline would read as a stray rule floating in the colour. */
.record-index .publication-decade > .publication-year:first-child {
	border-top: 0;
	padding-top: 0;
}

/* SECTION: Archives filter row and photographic divider.
 *
 * The filter is the one control this page had and it scrolled away after the
 * first screen of a 31 row index, so it is sticky under the fixed header on
 * the same offset token the year chips use. The counts inside the labels are
 * counted in PHP off the rows; the script keys on data-archive-filter and
 * never on the label text, so they cannot break the filter.
 *
 * The two [hidden] rules are not decoration. A class selector beats the
 * browser's own single attribute [hidden] rule, so main.css display: flex on
 * .driving-section and the padding on .publication-decade would both survive
 * being hidden: an empty band of colour under a type filter, and a full bleed
 * photograph floating in the middle of a filtered list. */
.record-index .archive-filters.is-sticky {
	position: sticky;
	top: var(--site-header-height);
	z-index: 5;
	margin-bottom: 0;
	padding: 20px max(53px, calc((100vw - 1334px) / 2));
	background: var(--color-cream);
	border-bottom: 1px solid rgba(8, 12, 10, .12);
}
.record-index .archive-filter-count {
	margin-left: 3px;
	opacity: .55;
	font-variant-numeric: tabular-nums;
}
.record-index .archive-filter:hover .archive-filter-count,
.record-index .archive-filter:focus-visible .archive-filter-count,
.record-index .archive-filter.is-active .archive-filter-count {
	opacity: .75;
}
.record-index .publication-decade[hidden],
.record-index .driving-section[hidden] {
	display: none;
}
.record-index .archives-divider {
	min-height: 460px;
}
.record-index .archives-divider .driving-grid h2 {
	margin: 0;
}
.record-index .archive-row .publication-doi {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: 10px;
}

/* SECTION: DOI pill. The hero promised a link and the page offered none: the
 * DOI was plain text buried mid sentence. This is the shared .tag, so the
 * shape, the radius and the --tag-pill-padding token are the approved ones and
 * only the arrow, the gap and the link behaviour are added. A row whose
 * citation carries no DOI gets no pill rather than a dead one. */
.record-index .publication-doi {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--color-ink);
	font-size: 14px;
	line-height: 1.12;
	min-height: 31px;
	text-decoration: none;
	transition: background-color 300ms ease, color 300ms ease;
}
.record-index .publication-doi img {
	width: 14px;
	height: 14px;
	display: block;
	transition: filter 300ms ease;
}
.record-index .publication-list a.publication-doi:hover,
.record-index .publication-list a.publication-doi:focus-visible,
.record-index a.publication-doi:hover,
.record-index a.publication-doi:focus-visible {
	background: var(--color-ink);
	color: var(--color-cream);
	text-decoration: none;
}
.record-index a.publication-doi:hover img,
.record-index a.publication-doi:focus-visible img {
	filter: invert(1);
}
.record-index .publication-list > li > p {
	margin: 0;
}

@media (max-width: 1100px) {
	.record-index .publication-list-heading h2,
	.record-index .listing-lede h1 { font-size: 62px; }
	.record-index .publication-year {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 980px) {
	.record-index .publication-list-section { padding: 64px 24px 90px; }
	.record-index .listing-lede { padding: calc(var(--site-header-height) + 80px) 24px 68px; }
}

@media (max-width: 620px) {
	.record-index .publication-list-heading h2,
	.record-index .listing-lede h1 { font-size: 44px; }
	.record-index .publication-year > h2,
	.record-index .publication-year > h3 { font-size: 32px; }
	.record-index .archive-row-title { font-size: 24px; }
	.record-index .archive-row {
		grid-template-columns: 1fr;
	}
	.record-index .archive-row-meta { white-space: normal; }
}

/* ======================================================================
 * Responsive twins for the round 2 blocks. Each one exists because the
 * scoped rule above outranks the unscoped breakpoint rule it would
 * otherwise inherit, so leaving it out is a desktop value stuck on a
 * phone rather than a missing refinement.
 * ====================================================================== */

@media (max-width: 1280px) {
	.record-index .insights-feature {
		grid-template-columns: 420px minmax(0, 1fr);
		gap: 48px;
	}
	.record-index .insights-feature-intro { padding-left: 0; }
}

@media (max-width: 1100px) {
	.record-index .driving-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}
	/*
	 * Stacked, both copy blocks sit over the whole width of the frame, so the
	 * left to right lean that carries the two column layout no longer maps to
	 * anything. Measured at 390 with the copy hidden, the leaning scrim left
	 * 12% of the pixels behind the paragraph under 4.5:1; a flat wash at this
	 * weight takes that to zero without touching the desktop band.
	 */
	.record-index .driving-section::before {
		background: rgba(37, 52, 50, .60);
	}
	.record-index .driving-grid h2 { font-size: 48px; }
	.record-index .publications-scale .kit-card h3 { font-size: 62px; }
	.record-index .publications-authors .values-heading {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 20px;
	}
	.record-index .publications-authors .values-heading h2 { font-size: 62px; }
	.record-index .publications-authors .team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 17px;
	}
	.record-index .insights-feature {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding: 72px 24px;
	}
	.record-index .insights-feature-intro h2,
	.record-index .insights-feature-intro p { max-width: 600px; }
	.record-index .insights-feature-card { max-width: none; }
}

@media (max-width: 980px) {
	.record-index .driving-section {
		min-height: 0;
		padding: 80px 24px;
	}
	.record-index .publications-scale { padding: 72px 24px 76px; }
	.record-index .publications-authors { padding: 72px 24px 80px; }
	.record-index .publication-list-section.has-decades > .publication-list-heading { padding: 0 24px; }
	.record-index .publication-jump { padding: 14px 24px; }
	.record-index .publication-decade { padding: 44px 24px; }
}

@media (max-width: 620px) {
	.record-index .driving-section { padding: 70px 18px; }
	.record-index .driving-grid h2 { font-size: 40px; }
	.record-index .driving-grid p { font-size: 18px; }
	.record-index .publications-scale { padding: 62px 18px 66px; }
	.record-index .publications-scale .kit-card { padding: 30px 0; }
	.record-index .publications-scale .kit-card h3 { font-size: 54px; }
	.record-index .publications-authors { padding: 62px 18px 70px; }
	.record-index .publications-authors .values-heading h2 { font-size: 44px; }
	.record-index .publications-authors .team-grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}
	.record-index .publications-authors .team-image { height: min(460px, 110vw); }
	.record-index .insights-feature { padding: 60px 18px; }
	.record-index .insights-feature-intro h2 { font-size: 44px; }
	.record-index .insights-feature-intro .button { width: min(285px, 100%); }
	.record-index .publication-list-section.has-decades > .publication-list-heading { padding: 0 18px; }
	/*
	 * Fifteen chips wrap to five rows at this width, and a sticky control that
	 * holds 230px under a 95px fixed header owns 39% of the screen for the
	 * whole page. It becomes one scrolling row instead, which is the same
	 * treatment main.css already gives .partner-row on a phone.
	 */
	.record-index .publication-jump {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 12px 18px;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}
	.record-index .publication-jump::-webkit-scrollbar { display: none; }
	.record-index .publication-jump .archive-filter {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
	.record-index .publication-decade { padding: 36px 18px; }
}

/*
 * In citation author links were invisible: same ink as the surrounding text,
 * no underline until hover, so on a touch screen there was nothing at all to
 * say the 29 bolded names were links. They now carry a permanent underline in
 * the house style, offset so it does not collide with the descenders in the
 * citation, and they darken on hover rather than appearing from nothing.
 */
.record-index .publication-list a[href*="about"],
.record-index .insights-feature-card p a[href*="about"] {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(8, 12, 10, .38);
	transition: text-decoration-color 160ms ease;
}

.record-index .publication-list a[href*="about"]:hover,
.record-index .publication-list a[href*="about"]:focus-visible,
.record-index .insights-feature-card p a[href*="about"]:hover {
	text-decoration-color: var(--color-ink);
}

/*
 * The Publication pill on the periwinkle decade band. The default pill ground
 * is #d4daf9 against a #aabbff band, which measures 1.36:1, so sixteen pills
 * dissolved into the field on the lower half of Archives while their labels
 * stayed readable. Cream carries the same label ink and reads as the same
 * component, at 2.6:1 against the band.
 */
.record-index .publication-decade.is-blue .tag {
	background: var(--color-cream);
}