/*
	The modern pass.

	Asked for: something that reads like a well made app rather than a journal.
	A modern font style, easier on the eye, calmer, with the depth still there
	for anyone who wants it.

	This file is almost entirely TOKEN OVERRIDES, and that is deliberate. The
	theme's stylesheet is 336 KB and already routes nearly everything through
	`--lr-*` custom properties, so changing the type and the surfaces is a
	matter of changing about twenty values rather than hunting through
	thousands of rules. It also means this whole pass is reversible by not
	shipping one file.

	Loaded last, unlayered, so it wins. 90 percent of style.css sits inside
	@layer blocks and unlayered beats layered, which is the same mechanism
	Astra was using against us; here it is working for us.

	Verify with:  python measure.py snapshot --label modern
	              python lrmirror.py verify        <- proves no content moved
*/

:root {
	/* ---------------------------------------------------------------- type */

	/*
		One family, and it is the one already self hosted.

		This is the single biggest move in the file. Headings were Source Serif
		4, which is a fine typeface and reads as a journal: authoritative, a
		little formal, and slow. The applications this was measured against use
		one neo-grotesque sans throughout, and the site already ships Inter as a
		variable font at weights 300 to 800, so the change costs no new
		download and no new request.

		Source Serif 4 is NOT removed. It stays loaded and available as
		--lr-font-serif for anywhere a serif genuinely earns its place, for
		instance a pull quote. It simply stops being the default voice.
	*/
	--lr-font-serif: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif;
	--lr-font-heading: var(--lr-font-family);

	/*
		A calmer scale.

		The hero was clamped up to 56px and h1 to 44px. At those sizes a
		heading stops being a signpost and becomes an announcement, and on a
		page carrying six of them the reader is shouted at six times. Modern
		application typography runs headings much closer to body size and
		leans on weight, spacing and colour for hierarchy instead.

		Body goes the other way, 16px to 17px, because the thing that actually
		makes long text tiring is small type set tight.
	*/
	--lr-font-size-hero: clamp(30px, 3.6vw, 40px);
	--lr-font-size-h1: clamp(26px, 3vw, 33px);
	--lr-font-size-h2: clamp(21px, 2.2vw, 25px);
	--lr-font-size-h3: clamp(18px, 1.7vw, 19px);
	--lr-font-size-h4: 17px;
	--lr-font-size-body: 17px;
	--lr-font-size-lead: clamp(18px, 1.9vw, 20px);
	--lr-font-size-small: 15px;
	--lr-font-size-figcaption: 14px;
	--lr-font-size-label: 17px;

	/*
		Air. Line height is the cheapest readability improvement there is and
		the one most often left at the default.
	*/
	--lr-leading-body: 1.7;
	--lr-leading-ui: 1.55;
	--lr-leading-display: 1.16;
	--lr-leading-h2: 1.28;
	--lr-leading-h3: 1.4;

	/*
		Inter needs negative tracking as it gets larger or it looks loose. The
		serif did not, which is why these values were near zero.
	*/
	--lr-tracking-display: -0.022em;
	--lr-tracking-2xl: -0.016em;

	/* ------------------------------------------------------------ surfaces */

	/*
		Softer corners. 10px on a large card reads as a slightly rounded
		rectangle; 14px reads as a surface. The small radii move together so
		the family stays coherent.
	*/
	--lr-radius-small: 6px;
	--lr-radius-medium: 10px;
	--lr-radius-large: 14px;
	--lr-radius-image: 12px;
}

/* ------------------------------------------------------------- headings */

/*
	Weight and tracking carry the hierarchy now that size does less of it.
	600 rather than 700: at these sizes bold sans reads as heavy, and Inter's
	600 has the presence without the weight.
*/
h1,
h2,
h3,
h4,
h5,
h6,
.lr-hero-heading {
	font-weight: 600;
	letter-spacing: var(--lr-tracking-2xl);
	text-wrap: balance;
}

h1,
.lr-hero-heading {
	letter-spacing: var(--lr-tracking-display);
}

/*
	Body text that has somewhere to breathe. 68 characters is the low end of
	the classic measure and the right end of it for screens.
*/
.entry-content p,
.entry-content li {
	max-width: 68ch;
}

/*
	A paragraph followed immediately by another paragraph is where a wall of
	text comes from. Give consecutive paragraphs real separation.
*/
.entry-content p + p {
	margin-top: 1.1em;
}

/* --------------------------------------------------------------- header */

/*
	The header becomes a thin, quiet bar that stays with the reader.

	Sticky is the app-like part: on a page 9,000 pixels long the way back is
	otherwise a scroll to the top. `backdrop-filter` keeps it from feeling
	like a lid, and there is a solid background underneath it for the
	browsers that do not support it.
*/
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/*
	One thin bar. The audit measured the header at 111px on every page at
	every width, 14 percent of a phone screen, from three paddings stacked:
	the bar, the identity block's `1em 0`, and style.css's own on
	.site-header. This is now the only vertical padding in the header.
*/
.site-header {
	padding-top: 0;
	padding-bottom: 0;
}

.lr-primary-header-bar {
	padding-top: 6px;
	padding-bottom: 6px;
}

#masthead .lr-site-identity {
	padding: 0;
}

/*
	Navigation links as pills. A hovered target that changes shape as well as
	colour is easier to hit and easier to read as interactive, and it removes
	the need for the underline that used to do that job.
*/
.main-header-menu > .menu-item > .menu-link {
	padding: 0.45em 0.85em;
	margin: 0 0.1em;
	border-radius: var(--lr-radius-pill);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.006em;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item > .menu-link:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
}

.main-header-menu > .menu-item.current-menu-item > .menu-link {
	background-color: rgba(255, 255, 255, 0.16);
}

/* --------------------------------------------------------- disclosures */

/*
	The shape progressive disclosure will take.

	Nothing on the site uses `.lr-disclosure` yet: this is the component the
	restructure will lean on, styled here so the pattern exists before the
	content is moved into it. A disclosure is a quiet horizontal rule with a
	label, not a box, because a page of boxes is the busy feeling all over
	again.

	The label has to say what is inside it. "Read more" tells a reader nothing
	they can decide on. See app/restructure/BRIEF.md.
*/
.lr-disclosure {
	border-top: 1px solid var(--lr-color-border-subtle, #dce6ec);
	margin: var(--lr-space-5) 0;
}

.lr-disclosure > summary {
	cursor: pointer;
	list-style: none;
	padding: var(--lr-space-3) 0;
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-weight: 500;
	font-size: 15px;
	color: var(--lr-color-text-muted, #55697d);
	transition: color 0.15s ease;
}

.lr-disclosure > summary::-webkit-details-marker {
	display: none;
}

.lr-disclosure > summary::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.18s ease;
	flex: none;
}

.lr-disclosure[open] > summary::before {
	transform: rotate(45deg);
}

.lr-disclosure > summary:hover {
	color: var(--lr-color-text, #1f374e);
}

.lr-disclosure > *:not(summary) {
	padding-bottom: var(--lr-space-4);
}

@media (prefers-reduced-motion: reduce) {
	.lr-disclosure > summary::before,
	.main-header-menu > .menu-item > .menu-link {
		transition: none;
	}
}

/* ------------------------------------------------------------- wordmark */

/*
	The way home. See the comment in header.php: the navigation drops its Home
	item and this replaces it, so it has to be visible and it has to be a link.
*/
.lr-wordmark {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.014em;
	white-space: nowrap;
}

.lr-wordmark a {
	text-decoration: none;
	color: inherit;
	padding: 0.3em 0;
	border-radius: var(--lr-radius-small);
}

.lr-wordmark a:hover {
	opacity: 0.85;
}

/*
	The header's left column: wordmark first, social second and smaller. The
	social links were the first thing in the header, which gave the loudest
	position on every page to three outbound links.
*/
#masthead .site-header-section-left,
#masthead .site-header-section:first-child {
	display: flex;
	align-items: center;
	gap: var(--lr-space-4);
}

#masthead [class*="social-wrap"] {
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

#masthead [class*="social-wrap"]:hover {
	opacity: 1;
}

/* ------------------------------------------------------------ the action */

/*
	Enquire is the one thing on the page that is asking for a decision, so it
	is the one thing that looks like a button. Everything else in the bar is a
	place to go.
*/
#primary-site-navigation .main-header-menu > .menu-item.lr-nav-cta > .menu-link {
	background-color: var(--lr-color-accent-on-ink, #d5f3ff);
	font-weight: 600;
	margin-left: 0.5em;
	/*
		Two variables, not one. The current-item rule in style.css reads
		--lr-color-on-ink-accent, not --lr-color-on-ink, so on /enquire/ the
		pill read pale blue on white at 1.16 to 1. Both are remapped here and
		in the two states below.
	*/
	--lr-color-on-ink-accent: var(--lr-color-ink, #002147);

	/*
		The colour is set by REMAPPING the variable, not by declaring `color`.

		style.css §adapter has
		    .site-header .menu-link { color: var(--lr-color-on-ink) !important }
		inside `@layer adapter`. For IMPORTANT declarations the cascade inverts
		layer order, so a layered important beats an unlayered one outright:
		this file loads last and still lost, and the button rendered cream on
		pale blue, which is invisible. Specificity never even gets consulted.

		Redefining the custom property on this element makes that important
		rule resolve to the value we want. The theme already uses this trick
		for `.lr-on-ink`, and its comment says the same thing: remapping the
		variable is the only lever.
	*/
	--lr-color-on-ink: var(--lr-color-ink, #002147);
}

#primary-site-navigation .main-header-menu > .menu-item.lr-nav-cta > .menu-link:hover,
#primary-site-navigation .main-header-menu > .menu-item.lr-nav-cta > .menu-link:focus-visible,
#primary-site-navigation .main-header-menu > .menu-item.lr-nav-cta.current-menu-item > .menu-link {
	background-color: #ffffff;
	--lr-color-on-ink: var(--lr-color-ink, #002147);
	--lr-color-on-ink-accent: var(--lr-color-ink, #002147);
}

/*
	In the mobile drawer the pill made the label invisible: ink text on the
	ink plate, because the pale background rule was scoped to the bar above.
	The audit called it a blocker on 19 pages at 375 and 768. In the drawer
	the call to action is a normal row with a bold label, and its text
	colour is left to the drawer.
*/
#lr-mobile-header-content .menu-item.lr-nav-cta > .menu-link {
	font-weight: 700;
	background: none;
	border-radius: 0;
	margin: 0;
}

/* Drawer rows are rows, not pills. */
#lr-mobile-header-content .menu-link {
	border-radius: 0;
	margin: 0;
	padding: 0 20px;
}

/* The old underline indicator, from style.css, showed under the new pill. */
.main-header-menu > .menu-item > .menu-link::after {
	content: none !important;
}

/* -------------------------------------------------------- footer sitemap */

/*
	Everything the primary bar no longer carries.

	The bar went from eight items to six, and Home, Projects and Contact came
	out of it. That is only defensible if they are still reachable from every
	page, and they were not: the footer rendered three legal links and nothing
	else, so Projects became reachable only from pages that happened to link
	to it. A footer index is the standard place for the long tail and it is
	what makes a short primary bar honest.
*/
.lr-footer-nav {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin-top: var(--lr-space-5);
	padding-top: var(--lr-space-5);
}

.lr-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0.5em var(--lr-space-5);
}

.lr-footer-nav a {
	display: inline-block;
	padding: 0.3em 0;
	font-size: 15px;
	text-decoration: none;
}

.lr-footer-nav a:hover {
	text-decoration: underline;
}

/* ================================================================ header

	The header lays itself out, and it does not ask JavaScript where the
	breakpoint is.

	Three faults were being reported as "the three lines and the icons are
	squeezed to the left", and they were all one shape of mistake.

	1. `.site-header-section` had no `display: flex`, so the
	   `justify-content: flex-end` on the right hand section did nothing at
	   all. Those elements carried Astra's `lr-flex` utility class in the
	   original markup and Astra's stylesheet was what made them flex. Both
	   are gone, so the sections were plain blocks and their contents sat at
	   the left edge of a 1,062 pixel wide column.

	2. The breakpoint was decided in JavaScript from `window.innerWidth` on
	   load, with a resize listener. Measured at a 1,280 pixel viewport the
	   body still carried `lr-narrow`, so the desktop navigation was hidden
	   and the hamburger was showing on a wide screen. **A layout that
	   depends on a class JavaScript remembered to set is a layout that will
	   be wrong sooner or later.** Media queries decide it now, JavaScript
	   only opens and closes the panel, and the class it still sets is kept
	   only because four rules in style.css select on it.

	3. The container's max-width never applied, so the bar ran the full width
	   of the window while the page content below it did not.

	Written as flex with space-between rather than the two column grid it
	replaces, because "one group left, one group right" is what this actually
	is, and a grid was an elaborate way to say it.
*/

#masthead .lr-container-outer {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lr-space-4);
}

#masthead .site-header-section {
	display: flex;
	align-items: center;
	gap: var(--lr-space-4);
	min-width: 0;
}

#masthead .lr-grid-right-section {
	justify-content: flex-end;
	flex: 1 1 auto;
}

#masthead .main-navigation {
	display: flex;
	align-items: center;
}

#masthead .main-header-menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- the breakpoint, decided by CSS ---- */

@media (min-width: 922px) {
	#primary-site-navigation {
		display: block;
	}

	.lr-menu-toggle {
		display: none;
	}

	#lr-mobile-header-content {
		display: none;
	}
}

@media (max-width: 921px) {
	#primary-site-navigation {
		display: none;
	}

	.lr-menu-toggle {
		display: flex;
	}

	/*
		The panel is still opened and closed by the button, through the
		`hidden` attribute, which is why this does not force it visible.
	*/
	#lr-mobile-header-content {
		flex-basis: 100%;
	}

	#masthead .lr-container-outer {
		flex-wrap: wrap;
	}

	#lr-mobile-header-content .main-header-menu {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		width: 100%;
	}
}

/* ================================================== audit fixes, 2026-09-04
	Every block below closes a finding from the eight group pre deploy audit
	(app/local/reports/audit/findings-merged.json). The finding is named so
	the rule can be judged against it later.
*/

/* "Cards running over the page" on /teaching/esat/: the router grid is an
   inline style in the page content, repeat(3, 1fr) above 760px, and 1fr is
   minmax(auto, 1fr), so the unbreakable button in each card forces the
   tracks past the container. auto-fit with minmax(0-ish, 1fr) lets it be
   three, two or one column without ever overflowing. */
.lr-esat-router__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
}

.lr-esat-router__card {
	min-width: 0;
}

/* Home "Current work" cards overflowed at 375 from a fixed 320px track. */
.entry-content [class*="lr-grid"] {
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.entry-content [class*="lr-grid"] > * {
	min-width: 0;
}

/* Home hero at phone and tablet widths showed only the photo; the name and
   heading were below the fold. Text first when the columns stack. */
@media (max-width: 921px) {
	#home-hero .lr-grid-equal > :first-child {
		order: 2;
	}
}

/* The folded intent guide on an ink plate: the plate remaps the text
   tokens to white and the guide's white surface inherited them, so it
   opened white on white. Belt: the fold is now inserted AFTER the plate
   (functions-next.php). Braces: on a light surface the tokens are light
   surface tokens whatever the plate says. */
.lr-disclosure--intent .lr-intent-guide,
.lr-section-centered .lr-disclosure--intent {
	--lr-color-on-ink: var(--lr-color-text, #1f374e);
	color: var(--lr-color-text, #1f374e);
}

.lr-section-centered .lr-disclosure > summary {
	justify-content: center;
}

/* Breadcrumb hugged the sticky header and then a 116 to 136px void opened
   before the hero. One rhythm: breadcrumb, breath, section. */
.entry-content > nav.lr-breadcrumb,
.entry-content > .lr-container > nav.lr-breadcrumb {
	margin: var(--lr-space-4) 0 var(--lr-space-3);
}

.entry-content > .lr-section-full:first-child,
.entry-content > nav.lr-breadcrumb + .lr-section-full,
.entry-content > .lr-container > nav.lr-breadcrumb + .lr-section-full {
	padding-top: var(--lr-space-6);
}

/* A <button class="lr-btn-primary"> rendered as a 137 by 20 browser default. */
button.lr-btn-primary,
.lr-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.65em 1.2em;
	border: 0;
	border-radius: var(--lr-radius-pill);
	background: var(--lr-color-ink, #002147);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Labels are not prose: the 68ch measure cap made the hero eyebrow wrap. */
.entry-content p:is(.lr-eyebrow, .lr-label, .lr-hero-subheading, .lr-project-meta, .lr-kicker) {
	max-width: none;
}

/* Phones: five nested insets squeezed body text to a 243px column at 375.
   Below 600px the container's 20px is the only outer gutter. */
@media (max-width: 600px) {
	.entry-content .lr-section-full,
	.entry-content .wp-block-group.alignfull {
		padding-left: 0;
		padding-right: 0;
	}

	/* The list item inset lives in lr-mobile.css now, inside @layer
	   primitives with !important, because the rule that used to sit here was
	   unlayered and lost to a layered important in style.css on every page. */

	/* The cookie banner covered 29 to 32 percent of a phone screen. */
	.lr-cookie-banner__inner {
		padding: 12px 16px;
	}

	.lr-cookie-banner__title {
		font-size: 15px;
		margin-bottom: 4px;
	}

	.lr-cookie-banner__intro {
		font-size: 14px;
		line-height: 1.45;
	}

	.lr-cookie-banner__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.lr-cookie-banner__actions > * {
		flex: 1 1 auto;
		min-height: 40px;
		padding: 0.5em 0.9em;
	}
}

/* Wide lines on ESAT small print, 137 characters at 13px. */
.entry-content .lr-esat-section p,
.entry-content .lr-details-content,
.entry-content .lr-esat-question-text {
	max-width: 72ch;
}

/* ----------------------------------------------------- footer, rebuilt */

/* The audit's most repeated finding, eight reports: three stacked footers,
   an index flush to x=0 on cream outside the colophon, copyright twice.
   The index now lives INSIDE #colophon on the ink ground, in the same
   container as everything else, and the secondary footer keeps only its
   legal links. */
#colophon .lr-footer-nav {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin-top: var(--lr-space-5);
	padding-top: var(--lr-space-5);
	padding-bottom: var(--lr-space-3);
}

#colophon .lr-footer-nav ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
	gap: 0.35em var(--lr-space-5);
}

#colophon .lr-footer-nav a {
	color: var(--lr-color-on-ink, #d5f3ff);
	font-size: 15px;
	padding: 0.35em 0;
	min-height: 24px;
}

#colophon .lr-footer-copyright p {
	margin: 0;
	font-size: 14px;
	opacity: 0.85;
}

#colophon .site-footer-section {
	padding: 0;
}

/* Wide tables on phones are NOT a defect of this theme. style.css gives
   tables min-width: 480px and wraps them in a div with overflow-x: auto, so
   a data table scrolls sideways inside its own box and the page never
   widens (docW stayed 375). An earlier version of this file forced
   display: block on tables to "fix" the instrument's reading; that broke
   table semantics and changed nothing visible. The instrument now ignores
   elements inside a scrolling ancestor instead. */

/* Sticky, second cause. body was fixed to overflow-x: clip, and the header
   still scrolled away, because #page.site ALSO carries overflow-x: hidden
   from style.css. A sticky element sticks to the nearest scrolling ancestor,
   and an overflow-x: hidden box is one even though it never scrolls, so the
   header was pinned to a box that moved with the document. clip on #page
   too. (html's overflow-x: hidden is fine: on the root it propagates to the
   viewport and does not create an inner scroll container.) */
#page.site,
#page {
	overflow-x: clip;
}

/* The footer index was inside the colophon but outside its 1200px row, so
   it ran edge to edge. Same width and gutters as the row above it. */
#colophon .lr-footer-nav {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* ------------------------------------------------ the space before the footer

	Measured: 0px between the last content block and the colophon. Content
	needs somewhere to end. */
#content {
	padding-bottom: var(--lr-space-9);
}

/* ---------------------------------------------------- the footer bar itself

	Three sections in one padded, centred row: an empty first column, the
	social icons in the middle, the copyright on the right. The copyright
	had wrapped to x=0 with no gutter because the header's column rule had
	leaked onto this row (see lr-chrome.css). */
#colophon .site-primary-footer-wrap .lr-grid-row {
	grid-template-columns: 1fr auto 1fr;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: var(--lr-space-6) 20px var(--lr-space-4);
	min-height: 0;
}

#colophon .site-footer-section-1 {
	grid-column: 1;
}

#colophon .site-footer-section-2 {
	grid-column: 2;
	justify-content: center;
}

#colophon .site-footer-section-3 {
	grid-column: 3;
	justify-self: end;
	justify-content: flex-end;
}

@media (max-width: 700px) {
	#colophon .site-primary-footer-wrap .lr-grid-row {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		row-gap: var(--lr-space-3);
	}

	#colophon .site-footer-section-1 {
		display: none;
	}

	#colophon .site-footer-section-2,
	#colophon .site-footer-section-3 {
		grid-column: 1;
		justify-self: center;
	}
}

/* ================================================================ card hover

	ONE hover, not two.

	The theme had two: whole card destinations (.lr-card-white,
	.lr-project-card) shifted up and left over a hard Oxford blue slab, and
	cards that contain links (grid tiles, enquiry panels) took a colour wash
	with an inset accent edge and no movement. Lucas preferred the first and
	said it reads too close to TutorCruncher's format, which is a dark hard
	offset shadow under a lifted card. So: the lift is kept, smaller, and the
	slab is the site's own pale accent blue with a fine ink border rather than
	a black block, over a soft depth shadow. Same family, not the same card.

	What moves: anything that is a destination or holds destinations. What
	does NOT move: a prose section wearing the card class. There are 2,041 of
	those and displacing a full width ESAT section because a pointer crossed
	it is worse than no hover at all, which the theme's own comments already
	record. Those keep no rule here, so they keep no hover.

	Unlayered, so it beats the two layered originals on every declaration.
*/
.lr-card-white,
.lr-project-card,
.lr-grid-equal > .lr-card,
.lr-card-grid > .lr-card,
.lr-enquiry-panel,
a.lr-module-card,
.lr-esat-router__card {
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	will-change: transform;
}

.lr-card-white:hover,
.lr-project-card:hover,
.lr-grid-equal > .lr-card:hover,
.lr-card-grid > .lr-card:hover,
.lr-enquiry-panel:hover,
a.lr-module-card:hover,
.lr-esat-router__card:hover,
.lr-card-white:focus-within,
.lr-project-card:focus-within,
.lr-grid-equal > .lr-card:focus-within,
.lr-card-grid > .lr-card:focus-within,
.lr-enquiry-panel:focus-within,
a.lr-module-card:focus-visible,
.lr-esat-router__card:focus-within {
	transform: translate(-3px, -3px);
	border-color: var(--lr-color-ink, #002147);
	background-color: var(--lr-color-bg-card, #ffffff);
	box-shadow:
		5px 5px 0 0 var(--lr-color-accent-on-ink, #d5f3ff),
		6px 6px 0 0 var(--lr-color-ink, #002147),
		0 14px 28px -16px rgba(0, 33, 71, 0.35);
}

/* The old tier 2 inset edge and wash are withdrawn where the new rule
   applies, otherwise the two would stack. */
.lr-grid-equal > .lr-card:hover,
.lr-card-grid > .lr-card:hover,
.lr-enquiry-panel:hover {
	background-image: none;
}

/* Prose sections that happen to hold a focused link were lifted 2px by the
   generic focus-within rule; that is keyboard only and harmless, but it is
   a second kind of movement, so it goes too. */
.entry-content .lr-card:not(.lr-card-white):not(.lr-project-card):focus-within {
	transform: none;
	box-shadow: none;
}

.lr-grid-equal > .lr-card:focus-within,
.lr-card-grid > .lr-card:focus-within {
	transform: translate(-3px, -3px);
	box-shadow:
		5px 5px 0 0 var(--lr-color-accent-on-ink, #d5f3ff),
		6px 6px 0 0 var(--lr-color-ink, #002147),
		0 14px 28px -16px rgba(0, 33, 71, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	.lr-card-white,
	.lr-project-card,
	.lr-grid-equal > .lr-card,
	.lr-card-grid > .lr-card,
	.lr-enquiry-panel,
	a.lr-module-card,
	.lr-esat-router__card {
		transition: none;
	}
}

/* On touch there is no hover; the theme's mobile pop script handles the
   pressed state. Keep the resting card still. */
@media (hover: none) {
	.lr-card-white:hover,
	.lr-project-card:hover,
	.lr-grid-equal > .lr-card:hover,
	.lr-card-grid > .lr-card:hover,
	.lr-enquiry-panel:hover,
	a.lr-module-card:hover,
	.lr-esat-router__card:hover {
		transform: none;
	}
}

/* ------------------------------------------------ policies and disclaimers

	One fold on every page, rendered by lr_chrome_policies_fold between the
	footer index and the legal bar. It is .lr-disclosure unchanged; these
	lines only place it at the footer's width and set it in the footer's
	small muted type. */
.lr-disclosure--policies {
	max-width: 1200px;
	margin: var(--lr-space-4) auto 0;
	padding: 0 20px;
	font-size: 14px;
	color: var(--lr-color-text-muted, #55697d);
}

.lr-disclosure--policies > summary {
	font-size: 14px;
	justify-content: center;
}

.lr-disclosure--policies > ol {
	list-style: none;
	max-width: 72ch;
	margin: 0 auto;
	padding: 0 0 var(--lr-space-4);
}

.lr-disclosure--policies li {
	margin: 0 0 0.6em;
}