/*
 * EU1144 Campaign — INNER-ROUTE SHELL.
 *
 * Loaded on every route EXCEPT the campaign gateway, which has a header region
 * and a hero instead of a chapter plate, and which uses none of the components
 * below. That is the whole of the per-route conditional CSS strategy: no route
 * pays for another route's components.
 *
 * WHAT THIS FILE IS FOR. Without it an inner page would be built from
 * page.html's constrained prose column and would look like a different website
 * — which is the single most likely way a portal expansion destroys the art
 * direction it inherited. The chapter plate, the locator and the editorial grid
 * exist so that an inner route reads as the same publication as the gateway.
 *
 * THE CHAPTER PLATE IS NOT A HERO. It does not fill the viewport, it does not
 * carry the mandatory signature, it is not sticky, and it never exceeds the
 * gateway's own display moment.
 */

/* ----------------------------------------------------- the chapter plate --- */

/*
 * NO background-color here. The ground comes from the plate's own
 * .eu-section--light / --stone / --dark class, which base.css owns, so a
 * register is declared in exactly one place. Declaring a default here would
 * silently override it: portal.css loads after base.css and both selectors are
 * one class deep, so the later file would win.
 */
.eu-plate {
	position: relative;
	padding: 0;
	margin: 0;
	max-inline-size: none;
	/* Reserve the fixed brand bar's height: the plate is the topmost block. */
	padding-block-start: var(--eu-header-h);
}

.eu-plate__inner {
	max-inline-size: var(--eu-container);
	margin-inline: auto;
	padding-inline: var(--eu-gutter);
	padding-block: var(--wp--preset--spacing--48, 48px);
}

@media (min-width: 1024px) {
	.eu-plate__inner {
		padding-block: var(--wp--preset--spacing--64, 64px);
	}
}

.eu-plate__media {
	max-inline-size: none;
	margin: 0;
	line-height: 0;
	background-color: var(--eu-stone);
}

/*
 * .eu-adi carries block-size: 100%, so an art-directed plate needs a declared
 * aspect to have any height at all — and it must switch at the SAME 1024px
 * breakpoint as the block's own <source media>, or a portrait original lands in
 * a landscape box and is hard-cropped.
 */
.eu-plate__media .eu-adi,
.eu-plate__media .eu-photo {
	aspect-ratio: 4 / 5;
	inline-size: 100%;
}

@media (min-width: 1024px) {
	.eu-plate__media .eu-adi,
	.eu-plate__media .eu-photo {
		aspect-ratio: 21 / 9;
	}
}

/*
 * --type: no photograph, type inside, on whichever register the caller chose.
 * The ground comes from the .eu-section--* class rather than from the variant,
 * so a compliance-sensitive route can put a typographic plate on --page.
 */
.eu-plate--type {
	display: grid;
	align-content: end;
	min-block-size: clamp(280px, 38vh, 420px);
}

@media (min-width: 1024px) {
	.eu-plate--type {
		min-block-size: calc(clamp(280px, 38vh, 420px) + var(--eu-header-h));
	}
}

/*
 * --photo: page ground, full-bleed photograph, TYPE BENEATH IT ON SOLID GROUND.
 *
 * Not a preference. Type over a photograph is a contrast measurement that has
 * to hold at every width, and setting the type beneath means every plate still
 * works when the photograph is absent — the same finding that produced the
 * gateway's stacked narrow header.
 */
.eu-plate--photo .eu-plate__inner {
	padding-block-start: var(--wp--preset--spacing--32, 32px);
}

/*
 * --dark: type OVER a low-key photograph in warm off-white.
 *
 * The single exception to the rule above, and it was justified on the grounds
 * that a campaign only commits frames to this variant when they are the
 * flattest, quietest fields in its library, with a verified clean reserve at
 * both reference viewports. THE MEASUREMENT DISPROVED IT on both of the routes
 * using the variant: glyph-level contrast against the real photograph pixel
 * behind each glyph fell as low as 1.37:1 on a display h1 that requires 3:1,
 * and 1.81:1 on a 12px eyebrow that requires 4.5:1, with up to 22.6% of glyph
 * pixels below requirement. The full per-route table is recorded in
 * README.md — see "The dark plate's scrim is a measured value".
 *
 * The failure band was exactly >=1024px, i.e. exactly where this treatment
 * applies; below it the type falls onto flat ground and measures 15.51:1.
 *
 * TWO THINGS WERE WRONG, and they are fixed separately below because they are
 * separate faults.
 *
 * 1. THE TYPE WAS NOT WHERE THE RESERVE IS. `.eu-plate__inner` carries
 *    `margin-inline: auto` for container centring. In normal flow that centres
 *    a full-width box. As a GRID ITEM it does something else: auto inline
 *    margins suppress the default `justify-self: stretch`, so the box shrank to
 *    max-content — measured 486px wide at a 1440px viewport — and was then
 *    centred in the 1440px column at x=477. The type was therefore NOT in the
 *    container's left field, where the committed frames' clean reserve is; it
 *    was in the middle of the frame, on top of the lit subject. A layout bug
 *    that happened to look deliberate, and fixing it alone lifted one route's
 *    h1 from 1.48:1 to 17.04:1 with no scrim at all.
 *
 * 2. NO SCRIM AT ALL. Even correctly placed, a frame with NO dark reserve
 *    anywhere — mid-tone ground edge to edge — falsifies the premise of the
 *    no-scrim exception, and one of the two committed frames is exactly that.
 *    A measured directional scrim is therefore required, and it is bounded to
 *    the type field exactly as the gateway hero's is — see below.
 *
 * THE VARIANT NO LONGER DEPENDS ON THE PHOTOGRAPH BEING KIND. That is the
 * point of the change: a campaign can commit a frame to --dark without the
 * contrast outcome being a property of that frame's luminance histogram.
 */
.eu-plate--dark .eu-plate__media {
	background-color: color-mix(in srgb, var(--eu-page) 8%, var(--eu-dark));
}

@media (min-width: 1024px) {
	.eu-plate--dark {
		display: grid;
		grid-template-rows: minmax(0, 1fr);

		/*
		 * The type field and the scrim are derived from ONE set of values, so
		 * they cannot drift apart — the same discipline base.css applies to the
		 * gateway hero. Both are container-aligned, because everything else on
		 * the page is.
		 *
		 * The field is capped at 46% of the viewport minus its own start, so it
		 * cannot slide rightwards into the lit subject above ~1600px, where the
		 * centred container stops growing and the frame does not.
		 */
		--eu-plate-field-start: max(var(--eu-gutter), calc((100% - var(--eu-container)) / 2 + var(--eu-gutter)));
		--eu-plate-field-w: max(320px, min(42%, calc(52% - var(--eu-plate-field-start))));
		--eu-plate-scrim-w: calc(var(--eu-plate-field-start) + var(--eu-plate-field-w) * 1.6);
	}

	.eu-plate--dark .eu-plate__media {
		grid-row: 1;
		grid-column: 1;

		/*
		 * Positioned so the scrim below can be inset to THIS box — the
		 * photograph's box — and not to .eu-plate, which is taller by the brand
		 * bar's reserved height and would put the ramp in the wrong place.
		 *
		 * The numeric z-index is not decoration: the lesson recorded in
		 * inc/blocks/art-directed-image/style.css is that a positioned element
		 * inside <main> with `z-index: auto` paints in the same layer as the
		 * header region and, being later in the document, wins. --eu-z-media is
		 * 0 against the region's 10, so this box cannot reach the brand bar.
		 */
		position: relative;
		z-index: var(--eu-z-media);
	}

	/*
	 * THE DIRECTIONAL SCRIM. One corner-anchored ramp — left-to-right crossed
	 * with bottom-to-top — and nothing else: no full-frame darkening, no panel
	 * or shape behind the text, no shadow, no blur.
	 *
	 * Its box is keyed to the type field (--eu-plate-scrim-w = field start plus
	 * 1.6 field widths) and to the type block's own height, so the ramp tracks
	 * the type at every width instead of being keyed to the viewport. The top
	 * of the frame and its right half therefore carry NO scrim gradient at all,
	 * which is what keeps the photograph a photograph: the lit subject and the
	 * upper two thirds of every committed frame are untouched.
	 *
	 * THE STOP VALUES ARE MEASURED, NOT CHOSEN. Every glyph pixel of the
	 * eyebrow, the locator, the h1 and the standfirst was composited against
	 * the real photograph and tested at 1024, 1180, 1280, 1440 and 1920 on both
	 * routes. Worst pixel after this change: 5.23:1 on a 12px eyebrow against a
	 * 4.5:1 requirement, and 6.93:1 on a display h1 against 3:1, with 0.0% of
	 * glyph pixels below requirement anywhere. Full table in README.md.
	 *
	 * Do not shallow these stops, reduce the scrim's height or widen the type
	 * field without repeating that measurement. One of the two committed frames
	 * has no dark reserve of its own, and this ramp is the whole of its
	 * compliance.
	 */
	.eu-plate--dark .eu-plate__media::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: var(--eu-z-scrim);
		background-image: linear-gradient(
			to top,
			rgba(16, 18, 14, 0.82) 0%,
			rgba(16, 18, 14, 0.78) 34%,
			rgba(16, 18, 14, 0.56) 58%,
			rgba(16, 18, 14, 0.16) 82%,
			rgba(16, 18, 14, 0) 100%
		);

		/*
		 * THE HORIZONTAL FALLOFF, and it is a mask rather than a second
		 * gradient layer for a reason that was visible in the first
		 * measurement pass: two stacked gradients sized to --eu-plate-scrim-w
		 * end at a hard boundary, and a 0.82-alpha ramp stopping abruptly
		 * mid-frame draws a VERTICAL EDGE across the photograph at exactly
		 * 1088px on a 1440px viewport. Masking the single vertical ramp with a
		 * horizontal one makes the result a true corner ramp with no boundary
		 * anywhere.
		 *
		 * Fully opaque across the type field, then falling to nothing by
		 * --eu-plate-scrim-w — so the type's own ground is unaffected by the
		 * falloff and the contrast measurement below does not depend on it.
		 */
		mask-image: linear-gradient(
			to right,
			#000 0%,
			#000 calc(var(--eu-plate-field-start) + var(--eu-plate-field-w)),
			transparent var(--eu-plate-scrim-w)
		);
		-webkit-mask-image: linear-gradient(
			to right,
			#000 0%,
			#000 calc(var(--eu-plate-field-start) + var(--eu-plate-field-w)),
			transparent var(--eu-plate-scrim-w)
		);
		pointer-events: none;
	}

	.eu-plate--dark .eu-plate__inner {
		grid-row: 1;
		grid-column: 1;
		align-self: end;
		position: relative;
		z-index: var(--eu-z-type);

		/*
		 * Stop the max-content collapse described above: an explicit
		 * inline-size restores stretch-equivalent behaviour, and the container
		 * cap plus auto margins then centre the CONTAINER rather than the text.
		 */
		inline-size: 100%;
		box-sizing: border-box;
	}

	/*
	 * The type sits in the left field, not across the frame. It is the same
	 * relationship the gateway hero has, and it is what puts the type on the
	 * part of the photograph that was verified clean.
	 */
	.eu-plate--dark .eu-plate__inner > * {
		max-inline-size: var(--eu-plate-field-w);
	}
}

/* ---------------------------------------------------------- the locator ---- */

/*
 * Portal orientation without breadcrumb furniture: one eyebrow paragraph, the
 * parent as a real link, an en dash IN TEXT as the separator. It reuses the
 * eyebrow style exactly and adds no type style, which is why this deliberately
 * spare design system needs no breadcrumb component at all.
 */
.eu-locator {
	margin-block-end: var(--wp--preset--spacing--16, 16px);
}

.eu-locator a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: var(--eu-accent);
	text-underline-offset: 4px;
}

.eu-plate--dark .eu-locator {
	color: var(--eu-page);
	opacity: 0.8;
}

/* ------------------------------------------------------- the title block --- */

.eu-masthead__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	max-width: 26ch;
	text-wrap: balance;
}

/*
 * THE ONE-DISPLAY-MOMENT RULE, in CSS.
 *
 * The display preset is permitted only for a headline of one or two words;
 * anything longer takes the h2 preset as its h1. The rule is derived from the
 * content, not from taste, which is why it cannot be argued with: HEALTHY
 * SNACKING HABITS at 104px wraps to three lines and immediately reads as a
 * template.
 *
 * The gateway keeps its own display h1 and NO INNER PAGE EVER EXCEEDS IT. That
 * is the hierarchy of the whole portal expressed in one number.
 */
.eu-masthead__title--display {
	font-size: clamp(2.75rem, 7vw, 6.5rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	max-width: 14ch;
}

.eu-masthead__lead {
	margin: var(--wp--preset--spacing--24, 24px) 0 0;
}

.eu-plate--dark .eu-masthead__lead {
	color: var(--eu-page);
	opacity: 0.85;
}

/* The chapter heading on a prose section that is itself the route's h1. */
.eu-chapter__title {
	max-width: 26ch;
}

/* --------------------------------------------------- the editorial grid ---- */

/*
 * Twelve columns with a 24px gutter. Prose lands on columns 1-7 and a
 * supporting photograph on columns 7-12, so the two OVERLAP BY ONE COLUMN and
 * the page reads as a composed spread rather than as two stacked boxes.
 *
 * Below 1024px it collapses to one column and the photograph follows the prose.
 */
.eu-editorial {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--48, 48px);
}

.eu-editorial__prose {
	/* 68ch for editorial copy; approved campaign prose keeps its own 74ch. */
	max-width: 68ch;
}

.eu-editorial__detail {
	margin: 0;
}

.eu-editorial__detail .eu-photo,
.eu-editorial__detail .eu-adi {
	aspect-ratio: 4 / 5;
	inline-size: 100%;
}

@media (min-width: 1024px) {
	.eu-editorial {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: var(--wp--preset--spacing--48, 48px);
		align-items: start;
	}

	/*
	 * BOTH ITEMS ARE PLACED EXPLICITLY IN ROW 1, and they are ADJACENT rather
	 * than overlapping. Measured, that distinction is the whole layout.
	 *
	 * The intent is a composed spread: prose left, supporting photograph right,
	 * dropped a little to break the top line. Expressing the "offset one column
	 * into the prose field" as an actual grid OVERLAP — prose on lines 1-8 and
	 * detail on lines 7-13, sharing column 7 — does not produce that. Grid
	 * auto-placement refuses to put an auto-placed item into a row where it
	 * would collide with an explicitly-placed one, so the prose was pushed to
	 * row 2: photograph top-right, prose below-left, and a large empty void
	 * top-left. It read as two stacked boxes with a hole in it, which is
	 * exactly the outcome the offset exists to avoid.
	 *
	 * Adjacent columns plus the vertical offset give the composed spread the
	 * specification describes, with no collision and no void.
	 */
	.eu-editorial__prose {
		grid-column: 1 / 8;
		grid-row: 1;
	}

	.eu-editorial__detail {
		grid-column: 8 / 13;
		grid-row: 1;
		/* Dropped below the prose's first line so the spread has a diagonal. */
		margin-block-start: var(--wp--preset--spacing--88, 88px);
	}
}

/* ------------------------------------------------- the particulars rule ---- */

/*
 * One horizontal <dl> between two hairlines. THE SINGLE MOST EFFECTIVE
 * ANTI-CARD DEVICE IN THE SYSTEM, because a page's facts become a typographic
 * rule rather than a container. It replaces four would-be components with one:
 * the boxed recipe card, the event-details box, the "programme at a glance"
 * stat cards and the file-type badge row.
 *
 * It also enforces honesty by construction. A page with no particulars gets no
 * row, and the row never carries an empty or zero value — so an unsupplied
 * organisation name cannot be published as a visible placeholder.
 *
 * Real <dl>/<dt>/<dd>. Not a table, not a list of spans. No fills, no chips, no
 * icons, no borders beyond the two hairlines. Never a horizontal scroller.
 */
.eu-particulars__wrap {
	margin-block: var(--eu-rhythm);
}

.eu-particulars__heading {
	margin-block-end: var(--wp--preset--spacing--16, 16px);
}

.eu-particulars {
	margin: 0;
	border-top: 1px solid var(--eu-hair-strong);
	border-bottom: 1px solid var(--eu-hair-strong);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.eu-particulars__pair {
	padding-block: var(--wp--preset--spacing--12, 12px);
	padding-inline-end: var(--wp--preset--spacing--24, 24px);
	min-block-size: 48px;
}

.eu-particulars__label {
	margin: 0 0 var(--wp--preset--spacing--4, 4px);
	font-family: var(--wp--preset--font-family--text, inherit);
	font-size: var(--wp--preset--font-size--eyebrow, 0.8125rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
}

.eu-particulars__value {
	margin: 0;
	font-size: var(--wp--preset--font-size--body, 1.0625rem);
	font-weight: 500;
	line-height: 1.4;
}

.eu-particulars__value a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: var(--eu-accent);
	text-underline-offset: 3px;
}

@media (min-width: 768px) {
	/* The inline form distributes its pairs evenly across the container. */
	.eu-particulars--inline {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		min-block-size: 48px;
	}

	.eu-particulars--inline .eu-particulars__pair {
		flex: 1 1 0;
		min-inline-size: 10rem;
		display: flex;
		align-items: baseline;
		gap: var(--wp--preset--spacing--12, 12px);
		padding-block: var(--wp--preset--spacing--12, 12px);
	}

	.eu-particulars--inline .eu-particulars__label {
		margin: 0;
	}

	/* The list form keeps one pair per row with the hairlines between. */
	.eu-particulars--list {
		grid-template-columns: 1fr;
	}

	.eu-particulars--list .eu-particulars__pair {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--24, 24px);
		align-items: baseline;
		border-top: 1px solid var(--eu-hair);
	}

	.eu-particulars--list .eu-particulars__pair:first-child {
		border-top: 0;
	}

	.eu-particulars--list .eu-particulars__label {
		margin: 0;
	}
}

/* ------------------------------------------------------- the filter row ---- */

/*
 * Real URLs, zero JavaScript, no dropdown, no chip UI, no pill buttons and no
 * "showing 4 of 12" counter. The active term is NOT a link and carries
 * aria-current="page", so the state is never conveyed by colour alone.
 *
 * The height is FIXED regardless of item count — 48px, 88px when it wraps at
 * narrow widths — so the row cannot reflow the page as content grows.
 */
.eu-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--16, 16px) var(--wp--preset--spacing--24, 24px);
	border-bottom: 1px solid var(--eu-hair-strong);
	min-block-size: 88px;
	margin-block-end: var(--wp--preset--spacing--32, 32px);
}

@media (min-width: 768px) {
	.eu-filter {
		min-block-size: 48px;
		flex-wrap: nowrap;
	}
}

.eu-filter__item {
	font-family: var(--wp--preset--font-family--text, inherit);
	font-size: var(--wp--preset--font-size--eyebrow, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--eu-ink) 74%, var(--eu-page));
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-block-size: 44px;
}

.eu-filter__item[style*="--eu-marker"]::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 4px;
	block-size: 4px;
	background-color: var(--eu-marker, var(--eu-accent));
}

.eu-filter__item:hover,
.eu-filter__item:focus-visible {
	color: var(--eu-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--eu-accent);
	text-underline-offset: 6px;
}

/* The current term: ink at full contrast plus a 2px ink rule. Never colour alone. */
.eu-filter__item.is-current {
	color: var(--eu-ink);
	border-bottom: 2px solid var(--eu-ink);
}

/* -------------------------------------------------------- the pagination --- */

.eu-pagination {
	margin-block-start: var(--wp--preset--spacing--48, 48px);
	padding-block-start: var(--wp--preset--spacing--24, 24px);
	border-top: 1px solid var(--eu-hair-strong);
	gap: var(--wp--preset--spacing--16, 16px);
	font-family: var(--wp--preset--font-family--text, inherit);
	font-size: var(--wp--preset--font-size--eyebrow, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.eu-pagination a,
.eu-pagination .page-numbers {
	color: color-mix(in srgb, var(--eu-ink) 74%, var(--eu-page));
	text-decoration: none;
	min-block-size: 44px;
	min-inline-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.eu-pagination a:hover,
.eu-pagination a:focus-visible {
	color: var(--eu-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--eu-accent);
	text-underline-offset: 6px;
}

.eu-pagination [aria-current="page"],
.eu-pagination .current {
	color: var(--eu-ink);
	border-bottom: 2px solid var(--eu-ink);
}

/* -------------------------------------------------------- the lead item ---- */

/*
 * One lead item on page one of an archive, and never on page two. When the lead
 * item has no photograph the plate is typographic at the same height, so a day
 * on which the newest item is a press notice does not produce a broken page.
 */
.eu-lead-item {
	border-bottom: 1px solid var(--eu-hair-strong);
	padding-block-end: var(--eu-rhythm);
	margin-block-end: var(--eu-rhythm);
}

.eu-lead-item__media {
	margin: 0 0 var(--wp--preset--spacing--32, 32px);
	line-height: 0;
	background-color: var(--eu-stone);
}

.eu-lead-item__media img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.eu-lead-item__title {
	margin: 0 0 var(--wp--preset--spacing--16, 16px);
	font-family: var(--wp--preset--font-family--display, inherit);
	max-width: 30ch;
}

.eu-lead-item__title a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 6px;
}

.eu-lead-item__title a:hover,
.eu-lead-item__title a:focus-visible {
	text-decoration-color: var(--eu-accent);
}

/* ------------------------------------------------------------ the shell ---- */

/*
 * An inner route's <main> begins with the plate, which reserves the bar's height
 * itself. Without this the bar's height would be counted twice.
 */
.eu-main--inner {
	padding-block-start: 0;
}

.eu-chapter {
	padding-block: var(--eu-rhythm);
	padding-inline: var(--eu-gutter);
}

.eu-chapter > * {
	max-width: var(--eu-container);
	margin-inline: auto;
}

/*
 * THE PROSE FIELD KEEPS ITS OWN MEASURE INSIDE A CHAPTER CONTAINER.
 *
 * The rule above is (0,1,0) and so was .eu-editorial__prose, so source order
 * decided and the CONTAINER won: measured, the approved paragraphs on a chapter
 * route were running to the full 1280px field instead of their measure, which
 * made inner-page prose wider than the same paragraphs on the gateway. These
 * selectors are (0,2,0) and settle it by specificity rather than by ordering.
 *
 * 74ch for approved campaign prose, 68ch for editorial copy — the two measures
 * the specification distinguishes.
 */
.eu-chapter > .eu-prose {
	max-width: 74ch;
}

.eu-chapter > .eu-editorial__prose,
.eu-editorial > .eu-editorial__prose {
	max-width: 68ch;
}

/* A narrow prose route (policy pages) keeps the measure without the grid. */
.eu-prose--narrow {
	max-width: var(--eu-container-narrow);
	margin-inline: auto;
}

/* ------------------------------------------------------------------ print --- */

/*
 * THE DARK CHAPTER PLATE IN PRINT, and this was broken before the scrim was
 * ever added — found while re-testing print after it.
 *
 * base.css's print block turns `.eu-section--dark` white and its text black
 * with !important. The h1 inherits that, so it printed correctly. But the
 * locator and the standfirst carry their OWN cream colour declaration, and an
 * element's own normal declaration beats an inherited !important one — so on
 * the two dark-register routes the eyebrow and the standfirst printed
 * #F7F3EE ON WHITE. Invisible. Measured, not assumed.
 *
 * The photograph is removed with it. The plate is a grid overlay at >=1024px,
 * so leaving a full-bleed image under black type on a white ground puts the
 * type over whatever the printer renders of the photograph — and a scrim is a
 * background, which browsers drop in print by default. Type on paper, then.
 * The photographs on the page BODY still print; only the plate's does not.
 */
@media print {
	.eu-plate--dark .eu-plate__media {
		display: none;
	}

	.eu-plate--dark .eu-locator,
	.eu-plate--dark .eu-locator a,
	.eu-plate--dark .eu-masthead__lead {
		color: #000 !important;
		opacity: 1 !important;
	}
}