/* ==========================================================================
   Monolitt - report theme
   Standalone, no build step, no JavaScript required. Derived from the app's
   design system: the Radix scales in radix-custom-colors.css, the colour
   roles in brand-colors.md and the three-tier type system in the typography
   guide (GT Super is commercial and not used here; the wordmark SVG is the
   display tier).
   Namespace: everything this file owns is prefixed m- (tokens --m-*, classes
   .m-*), so a report's own custom properties and classes never collide.
   Layering: the document defaults (elements and .m-* components) live in
   @layer m-theme. A report's own unlayered <style> therefore always wins,
   whatever its specificity. The header, the footer and the theme switcher stay
   unlayered so a report's generic rules (a { color }) cannot restyle them.
   Themes: no attribute on <html> follows the OS; <html data-theme="light" |
   "dark"> is explicit and wins both ways. The Mose chrome (#1e281a) is the
   header band of a page without a cover. A cover page (html.has-cover) has no
   band: the header floats over the cover's scene - Stetind rendered from the
   Kartverket terrain model, the moon for the report's date, real stars by
   night and clouds by day, the Monolitt stone on the summit - a day scene in
   light and a night scene in dark, driven by the --m-cover-* tokens. The
   footer's faint pillar is the page's other bookend.
   Motion: the resting state of every element is fully visible. Only html.js
   may hide something, and /motion.js only marks elements below the fold, so a
   screenshot, a print and a no-JS browser all get the finished page. The
   reduced-motion and print blocks are load-bearing, not decoration.
   ========================================================================== */
@layer m-theme;

/* --------------------------------------------------------------------------
   0. Self-hosted fonts (latin subsets, variable files; OFL / Apache). No
   third-party request ever carries a report URL or a reader's IP.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Libre Baskerville";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/fonts/libre-baskerville-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Libre Baskerville";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/libre-baskerville-italic-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/fonts/roboto-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto Mono";
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url("/fonts/roboto-mono-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. Tokens - light is the base and lives on bare :root. Every colour is a
   step from the Monolitt Radix scales on the brand backgrounds: Lin paper
   #f8f6f0 in light, the night surface #0e140c in dark. Never pure black or
   white on screen.
   -------------------------------------------------------------------------- */
:root {
	color-scheme: light;

	/* Surfaces and ink */
	--m-paper: #f8f6f0; /* brand seed "Lin" - never pure white */
	--m-surface: #f1eeeb; /* gray-2 - a tint below the paper, never a white card */
	--m-surface-2: #e9e4e0; /* gray-3 */
	--m-ink: #291d13; /* gray-12 */
	--m-ink-head: #1e281a; /* headings take Mose */
	--m-ink-muted: #615448; /* gray-11 - captions, table heads, the footer */
	--m-ink-faint: #8e7b6b; /* gray-9 - 3.7:1, decorative numerals at 26px+ only, never body text */
	--m-hairline: #1e281a40; /* Mose at 25% - the app's separator recipe */
	--m-hairline-strong: #1e281a73; /* Mose at 45% */
	--m-rule: #291d13; /* an ink rule: under table heads, above the sources */

	/* Accent - jade. The light scale is non-monotonic: 9 is the solid fill, 11 the text step. */
	--m-accent: #2e3a26; /* jade-9 */
	--m-accent-ink: #f8f6f0; /* foreground on a filled accent surface */
	--m-accent-text: #526645; /* jade-11 - accent text on paper (5.8:1) */
	--m-accent-wash: #e2e9de; /* jade-3 */
	--m-accent-line: #b7cbaa; /* jade-6 */

	/* Contrast - Oker. The exception colour: the graded marks, the progress rule and the cover light, never body text. */
	--m-contrast: #824f10; /* amber-11 - text-safe step */
	--m-contrast-solid: #c47f30; /* amber-9 - the real Oker, non-text use only */
	--m-contrast-wash: #f2e2d3; /* amber-3 */
	--m-contrast-line: #e5bd98; /* amber-6 */

	/* Signals */
	--m-risk: #8a4d26; /* red-11, the brand seed is Rust - reads brown, not fire-red */
	--m-risk-wash: #f7e1d5; /* red-3 */
	--m-risk-line: #ecba9f; /* red-6 */
	--m-info: #3b5e86; /* sky-11 */
	--m-info-wash: #dee7f2; /* sky-3 */
	--m-info-line: #b6cae3; /* sky-6 */
	--m-positive: #4b673a; /* green-11 */
	--m-positive-wash: #deead8; /* green-3 */
	--m-positive-line: #b6d1a7; /* green-6 */
	/* Caution is deliberately the same Oker as contrast: the brand has exactly one warm signal. */
	--m-caution: var(--m-contrast);
	--m-caution-wash: var(--m-contrast-wash);
	--m-caution-line: var(--m-contrast-line);

	/* Chrome - Mose. Fixed in both themes on purpose: the dark mass the cream reads against. */
	--m-chrome: #1e281a;
	--m-chrome-hover: #17201a;
	--m-chrome-ink: #e7e4d8; /* bone */
	--m-chrome-ink-muted: #c0b0a2; /* the dark scale's gray-11: muted text on the Mose band (7.1:1) */
	--m-chrome-hairline: #e7e4d826;

	/* Links: ink with a warm underline, jade on hover - twenty links a page must not become soup */
	--m-link: #291d13;
	--m-link-underline: #baaa9c; /* gray-8 */
	--m-link-hover: #526645;

	--m-selection: #d7e2d0; /* jade-4 */
	--m-focus: #2e3a26; /* jade-9 - Radix's jade-8 default fails 3:1 on Lin */

	/* Footer pillar: the app's watermark, a faint sun-on-stone tilt in light */
	--m-pillar-opacity: 0.028;
	--m-pillar-top: #413326; /* amber-12 */
	--m-pillar-bottom: #291d13; /* gray-12 */

	/* Type */
	--m-font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--m-font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--m-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Space: a 4px base; steps 7-9 are wider than Radix's (48/64/96) because a document breathes more than a grid */
	--m-space-1: 0.25rem;
	--m-space-2: 0.5rem;
	--m-space-3: 0.75rem;
	--m-space-4: 1rem;
	--m-space-5: 1.5rem;
	--m-space-6: 2rem;
	--m-space-7: 3rem;
	--m-space-8: 4rem;
	--m-space-9: 6rem;

	/* Shape: an editorial page tops out at 8px; the pill radius is for tags only */
	--m-radius-1: 2px;
	--m-radius-2: 4px;
	--m-radius-3: 8px;
	--m-radius-pill: 999px;

	/* Layout */
	--m-measure: 40rem; /* 640px prose column: ~70 characters of Roboto 17px */
	--m-measure-wide: 58rem; /* 928px: the cover column, tables, kv grids, the footer */
	--m-gutter: clamp(20px, 4vw, 32px);
	--m-gutter-safe: max(var(--m-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

	/* Cover - the day scene. The night scene is the dark twin below. Declared here, not on the cover, because the
	   header overlay on a cover page (outside main) reads the ink and the sky too. */
	--m-cover-ink: #1e281a;
	--m-cover-ink-muted: #291d13; /* the document's ink: the day cover's muted text sits on the horizon blue and the slope, where gray-11 read 3.5:1 and 1.3:1 */
	--m-cover-focus: #1e281a;
	--m-cover-sky-top: #6a90c8; /* the reference day frame's periwinkle */
	--m-cover-sky-mid: #739ad0;
	--m-cover-sky-low: #97b6de;
	--m-cover-terrain-day: 1;
	--m-cover-terrain-night: 0;
	--m-cover-glow: 255 255 255; /* the moon's light on the click, as an rgb triplet */
	--m-cover-glow-blend: normal;
	--m-cover-glow-peak: 0.22;
	--m-cover-glow-trace: 0.12;
	--m-cover-moon-a: 0.72; /* the daytime moon is a pale disc */
	--m-cover-stars: none;
	--m-cover-clouds: block;
	--m-cover-cloud-a: 0.95;
	--m-cover-stone-face: linear-gradient(to right, #1a2318, #2a3527 55%, #161e15);
	--m-cover-title-shadow: none;

	/* Motion */
	--m-dur: 160ms; /* hovers */
	--m-dur-mid: 320ms;
	--m-dur-slow: 520ms; /* the reveal */
	--m-ease: cubic-bezier(0.25, 1, 0.5, 1);
	--m-ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
	--m-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--m-paper: #0e140c;
		--m-surface: #1b1916;
		--m-surface-2: #26221e;
		--m-ink: #f2ede9;
		--m-ink-head: #e7e4d8;
		--m-ink-muted: #c0b0a2;
		--m-ink-faint: #7b6a5a;
		--m-hairline: #ffffff2d;
		--m-hairline-strong: #ffffff54;
		--m-rule: #f2ede9;
		--m-accent: #c7deb9;
		--m-accent-ink: #0e140c;
		--m-accent-text: #c4dab5;
		--m-accent-wash: #20281b;
		--m-accent-line: #3f5132;
		--m-contrast: #ebb074;
		--m-contrast-solid: #c47f30;
		--m-contrast-wash: #2b2016;
		--m-contrast-line: #553b20;
		--m-risk: #f3ae86;
		--m-risk-wash: #321e11;
		--m-risk-line: #63371c;
		--m-info: #98bfec;
		--m-info-wash: #17283b;
		--m-info-line: #335173;
		--m-positive: #b4da9e;
		--m-positive-wash: #1f2919;
		--m-positive-line: #3c532e;
		--m-link: #f2ede9;
		--m-link-underline: #6c5d51;
		--m-link-hover: #c7deb9;
		--m-selection: #34432a;
		--m-focus: #c7deb9;
		--m-cover-ink: #e7e4d8;
		--m-cover-ink-muted: #c0b0a2;
		--m-cover-focus: #e7e4d8;
		--m-cover-sky-top: #070b07;
		--m-cover-sky-mid: #0e140c;
		--m-cover-sky-low: #1e281a;
		--m-cover-terrain-day: 0;
		--m-cover-terrain-night: 1;
		--m-cover-glow: 236 226 200; /* warm bone */
		--m-cover-glow-blend: screen;
		--m-cover-glow-peak: 0.28;
		--m-cover-glow-trace: 0.16;
		--m-cover-moon-a: 1;
		--m-cover-stars: block;
		--m-cover-clouds: none; /* hidden by display alone, so it never rests at opacity 0 */
		--m-cover-cloud-a: 1;
		--m-cover-stone-face: linear-gradient(to right, #0a0e09, #121812 55%, #0a0e09);
		--m-cover-title-shadow: 0 2px 24px rgb(0 0 0 / 0.18);
		--m-pillar-opacity: 0.026;
		--m-pillar-top: #f2ede9;
		--m-pillar-bottom: #f2ede9;
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--m-paper: #0e140c;
	--m-surface: #1b1916;
	--m-surface-2: #26221e;
	--m-ink: #f2ede9;
	--m-ink-head: #e7e4d8;
	--m-ink-muted: #c0b0a2;
	--m-ink-faint: #7b6a5a;
	--m-hairline: #ffffff2d;
	--m-hairline-strong: #ffffff54;
	--m-rule: #f2ede9;
	--m-accent: #c7deb9;
	--m-accent-ink: #0e140c;
	--m-accent-text: #c4dab5;
	--m-accent-wash: #20281b;
	--m-accent-line: #3f5132;
	--m-contrast: #ebb074;
	--m-contrast-solid: #c47f30;
	--m-contrast-wash: #2b2016;
	--m-contrast-line: #553b20;
	--m-risk: #f3ae86;
	--m-risk-wash: #321e11;
	--m-risk-line: #63371c;
	--m-info: #98bfec;
	--m-info-wash: #17283b;
	--m-info-line: #335173;
	--m-positive: #b4da9e;
	--m-positive-wash: #1f2919;
	--m-positive-line: #3c532e;
	--m-link: #f2ede9;
	--m-link-underline: #6c5d51;
	--m-link-hover: #c7deb9;
	--m-selection: #34432a;
	--m-focus: #c7deb9;
	--m-cover-ink: #e7e4d8;
	--m-cover-ink-muted: #c0b0a2;
	--m-cover-focus: #e7e4d8;
	--m-cover-sky-top: #070b07;
	--m-cover-sky-mid: #0e140c;
	--m-cover-sky-low: #1e281a;
	--m-cover-terrain-day: 0;
	--m-cover-terrain-night: 1;
	--m-cover-glow: 236 226 200; /* warm bone */
	--m-cover-glow-blend: screen;
	--m-cover-glow-peak: 0.28;
	--m-cover-glow-trace: 0.16;
	--m-cover-moon-a: 1;
	--m-cover-stars: block;
	--m-cover-clouds: none; /* hidden by display alone, so it never rests at opacity 0 */
	--m-cover-cloud-a: 1;
	--m-cover-stone-face: linear-gradient(to right, #0a0e09, #121812 55%, #0a0e09);
	--m-cover-title-shadow: 0 2px 24px rgb(0 0 0 / 0.18);
	--m-pillar-opacity: 0.026;
	--m-pillar-top: #f2ede9;
	--m-pillar-bottom: #f2ede9;
}

/* --------------------------------------------------------------------------
   2. Document defaults and components - layered, so a page's own styles win
   -------------------------------------------------------------------------- */
@layer m-theme {
	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		scroll-behavior: smooth;
		scroll-padding-top: var(--m-space-7);
		overflow-x: clip; /* clip, not hidden: hidden would make the root a scroll container and break sticky cells */
	}
	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}
	}
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	body {
		margin: 0;
		background: var(--m-paper);
		color: var(--m-ink);
		font-family: var(--m-font-sans);
		font-size: 1.0625rem; /* 17px: a reading page, one step above the app's grids */
		line-height: 1.6;
		font-variant-numeric: tabular-nums;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		overflow-x: clip;
		min-width: 0;
	}
	::selection {
		background: var(--m-selection);
		color: var(--m-ink);
	}
	:focus-visible {
		outline: 2px solid var(--m-focus);
		outline-offset: 3px;
		border-radius: var(--m-radius-1);
	}
	.m-main {
		min-width: 0;
	}
	.m-main:focus {
		outline: none;
	}

	h1,
	h2,
	h3,
	h4 {
		font-family: var(--m-font-serif);
		font-weight: 400;
		color: var(--m-ink-head);
		text-wrap: balance;
		margin: 0;
	}
	h1 {
		font-weight: 700;
		font-size: clamp(1.875rem, 1.1rem + 3.2vw, 3.5rem);
		line-height: 1.08;
		letter-spacing: -0.005em;
	}
	h2 {
		font-size: clamp(1.4375rem, 1.25rem + 0.7vw, 1.625rem); /* 23-26px */
		line-height: 1.25;
		margin-top: var(--m-space-8);
		padding-bottom: var(--m-space-3);
		border-bottom: 1px solid var(--m-hairline);
		margin-bottom: var(--m-space-5);
	}
	h3 {
		font-size: 1.125rem;
		line-height: 1.4;
		margin-top: var(--m-space-6);
		margin-bottom: var(--m-space-3);
	}
	h4 {
		font-family: var(--m-font-sans);
		font-size: 0.9375rem;
		font-weight: 600;
		margin-top: var(--m-space-5);
		margin-bottom: var(--m-space-2);
	}
	p,
	ul,
	ol,
	dl {
		margin: 0 0 1em;
	}
	ul,
	ol {
		padding-left: 1.35em;
	}
	li {
		margin-bottom: 10px;
	}
	li::marker {
		color: var(--m-ink-muted);
		font-family: var(--m-font-sans);
		font-weight: 500;
		font-variant-numeric: tabular-nums;
	}
	dd {
		margin: 0;
		text-wrap: pretty;
		overflow-wrap: break-word;
	}
	strong,
	b {
		font-weight: 700;
	}
	em {
		font-style: italic;
	}
	a {
		color: var(--m-link);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-decoration-color: var(--m-link-underline);
		text-underline-offset: 0.22em;
		transition:
			text-decoration-color var(--m-dur) var(--m-ease-out),
			color var(--m-dur) var(--m-ease-out);
	}
	a:hover {
		color: var(--m-link-hover);
		text-decoration-color: currentColor;
	}
	a.m-ext::after {
		content: "\2197";
		display: inline-block;
		margin-left: 0.15em;
		font-size: 0.8em;
		line-height: 1;
		vertical-align: 0.25em;
		color: var(--m-ink-faint);
	}
	hr {
		border: 0;
		border-top: 1px solid var(--m-hairline);
		margin: var(--m-space-7) 0;
	}
	blockquote {
		margin: var(--m-space-5) 0;
		padding-left: var(--m-space-4);
		border-left: 1px solid var(--m-hairline-strong);
		color: var(--m-ink-muted);
	}
	blockquote > * + * {
		margin-top: var(--m-space-3);
	}
	mark {
		background: var(--m-contrast-wash);
		color: var(--m-ink);
		padding: 0.05em 0.2em;
		border-radius: var(--m-radius-1);
	}
	small,
	.m-small {
		font-size: 0.875rem;
		color: var(--m-ink-muted);
	}
	.m-fine {
		font-size: 0.78125rem;
		line-height: 1.55;
		color: var(--m-ink-muted);
	}
	img,
	svg,
	video {
		max-width: 100%;
		height: auto;
	}
	figure {
		margin: 0;
		break-inside: avoid;
	}
	figure img {
		display: block;
		border-radius: var(--m-radius-2);
	}
	figcaption {
		margin-top: var(--m-space-3);
		font-family: var(--m-font-sans);
		font-size: 0.8125rem;
		line-height: 1.5;
		color: var(--m-ink-muted);
	}
	code,
	pre,
	samp {
		font-family: var(--m-font-mono);
		font-size: 0.92em;
		overflow-wrap: anywhere;
	}
	pre {
		padding: var(--m-space-4);
		background: var(--m-surface);
		border-radius: var(--m-radius-2);
		overflow-x: auto;
	}
	.m-term {
		font-family: var(--m-font-serif);
		font-style: italic;
	}
	.m-num {
		text-align: right;
		font-variant-numeric: tabular-nums;
	}
	.m-visually-hidden,
	.m-vh {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* eyebrow label: the app's tracked uppercase label */
	.m-eyebrow {
		font-family: var(--m-font-sans);
		font-size: 0.6875rem;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--m-ink-muted);
		margin: 0;
	}

	/* ---- the reading column for an HTML page: .m-column holds the measure; anything wide breaks out
	   on the same axis with .m-wide, and .m-bleed spans the viewport ---- */
	.m-column {
		max-width: var(--m-measure);
		margin: 0 auto;
		padding: 0 var(--m-gutter);
		min-width: 0;
	}
	.m-column > :not(.m-wide):not(.m-bleed) {
		max-width: 100%;
	}
	.m-column .m-wide {
		--m-w: min(var(--m-measure-wide), 100vw - 2 * var(--m-gutter));
		width: var(--m-w);
		margin-left: calc(50% - var(--m-w) / 2);
	}
	.m-column .m-bleed {
		width: 100vw;
		margin-left: calc(50% - 50vw);
	}

	/* ---- the reading grid for a Markdown page: text / wide / full columns, no classes to write ---- */
	.m-report {
		display: grid;
		grid-template-columns:
			[full-start] minmax(var(--m-gutter), 1fr)
			[wide-start] minmax(0, calc((var(--m-measure-wide) - var(--m-measure)) / 2))
			[text-start] min(var(--m-measure), 100% - (var(--m-gutter) * 2))
			[text-end] minmax(0, calc((var(--m-measure-wide) - var(--m-measure)) / 2))
			[wide-end] minmax(var(--m-gutter), 1fr) [full-end];
		padding-block: var(--m-space-6) var(--m-space-8);
	}
	.m-report > * {
		grid-column: text;
		margin-block: 0;
	}
	.m-report > .m-wide {
		grid-column: wide;
	}
	.m-report > .m-full {
		grid-column: full;
	}
	.m-report > * + * {
		margin-top: var(--m-space-4);
	}
	.m-report > h2 {
		margin-top: var(--m-space-7);
	}
	.m-report > h3 {
		margin-top: var(--m-space-6);
	}
	.m-report > h4 {
		margin-top: var(--m-space-5);
	}
	.m-report > hr {
		margin-top: var(--m-space-7);
	}
	.m-report > .m-full {
		margin-top: var(--m-space-6);
	}
	.m-report > h4 + * {
		margin-top: var(--m-space-3);
	}
	.m-report > :first-child {
		margin-top: 0;
	}
	@media (min-width: 960px) {
		.m-report {
			padding-block: var(--m-space-7) var(--m-space-8);
		}
	}

	/* ---- editorial components ---- */
	/* the lede: the author's voice, serif, one size up */
	.m-lede {
		font-family: var(--m-font-serif);
		font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
		line-height: 1.6;
		margin: var(--m-space-9) 0 var(--m-space-6);
	}
	@media (max-width: 720px) {
		.m-lede {
			margin-top: var(--m-space-6);
		}
	}
	/* a summary list with hanging serif numerals - the block a reader remembers */
	.m-summary {
		list-style: none;
		padding: 0;
		margin: 0 0 var(--m-space-5);
		counter-reset: m-summary;
	}
	.m-summary > li {
		counter-increment: m-summary;
		position: relative;
		padding-left: 2.75rem;
		margin-bottom: var(--m-space-5);
	}
	.m-summary > li::before {
		content: counter(m-summary);
		position: absolute;
		left: 0;
		top: -0.2em;
		font-family: var(--m-font-serif);
		font-size: 1.625rem;
		line-height: 1.2;
		color: var(--m-ink-faint);
		font-variant-numeric: lining-nums;
	}
	@media (min-width: 960px) {
		.m-summary > li {
			margin-left: -2.75rem;
		}
	}
	/* an aside in the author's voice: the whole paragraph changes tier, no line mixes faces */
	.m-aside {
		font-family: var(--m-font-serif);
		font-size: 1.0625rem;
		line-height: 1.65;
		margin: var(--m-space-6) 0;
	}
	.m-questions ul {
		font-family: var(--m-font-serif);
		font-size: 1.0625rem;
		line-height: 1.65;
	}
	.m-questions li {
		margin-bottom: var(--m-space-4);
	}
	/* a pull quote */
	.m-pull {
		margin: var(--m-space-6) 0;
		padding: 0;
		border: 0;
		font-family: var(--m-font-serif);
		font-size: 1.1875rem;
		font-style: italic;
		font-weight: 400;
		line-height: 1.45;
		color: var(--m-ink);
	}
	.m-pull cite {
		display: block;
		margin-top: var(--m-space-3);
		font-family: var(--m-font-sans);
		font-size: 0.8125rem;
		font-style: normal;
		letter-spacing: 0.04em;
		color: var(--m-ink-muted);
	}
	@media (min-width: 640px) {
		.m-pull {
			font-size: 1.3125rem;
		}
	}
	/* a quiet rule box: two hairlines, no fill, no radius, for a paragraph that will be edited or quoted */
	.m-note {
		padding: var(--m-space-5) 0;
		margin: var(--m-space-6) 0;
		border-top: 1px solid var(--m-hairline);
		border-bottom: 1px solid var(--m-hairline);
	}
	/* the legend: the graded marks shown inline in the sentence that explains them */
	.m-legend {
		font-size: 0.9375rem;
		color: var(--m-ink-muted);
		line-height: 1.7;
	}
	/* the sources: an ink rule above, running text a size down, links in ink */
	.m-sources {
		margin-top: var(--m-space-9);
		padding-top: var(--m-space-7);
		border-top: 1px solid var(--m-rule);
	}
	.m-sources h2 {
		margin-top: 0;
		border-bottom: 0;
		padding-bottom: 0;
		font-size: 1.375rem;
	}
	.m-sources p {
		font-size: 0.9375rem;
		line-height: 1.7;
		color: var(--m-ink-muted);
	}
	.m-sources a {
		color: var(--m-ink);
	}
	.m-sources a:hover {
		color: var(--m-link-hover);
	}
	/* the cover's attribution line, appended by the build to the last section */
	.m-cover-credit {
		margin-top: var(--m-space-5);
	}
	.m-sources p.m-cover-credit {
		font-size: 0.78125rem;
	}
	/* a toned callout with a title; tones from the signal tokens, the default is neutral */
	.m-callout {
		--m-tone: var(--m-ink-muted);
		--m-tone-wash: var(--m-surface);
		--m-tone-line: var(--m-hairline);
		padding: var(--m-space-4) var(--m-space-5);
		margin: var(--m-space-5) 0;
		background: var(--m-tone-wash);
		border: 1px solid var(--m-tone-line);
		border-left-width: 3px;
		border-left-color: var(--m-tone);
		border-radius: 0 var(--m-radius-2) var(--m-radius-2) 0;
		break-inside: avoid;
	}
	.m-callout[data-tone="accent"] {
		--m-tone: var(--m-accent);
		--m-tone-wash: var(--m-accent-wash);
		--m-tone-line: var(--m-accent-line);
	}
	.m-callout[data-tone="contrast"] {
		--m-tone: var(--m-contrast);
		--m-tone-wash: var(--m-contrast-wash);
		--m-tone-line: var(--m-contrast-line);
	}
	.m-callout[data-tone="risk"] {
		--m-tone: var(--m-risk);
		--m-tone-wash: var(--m-risk-wash);
		--m-tone-line: var(--m-risk-line);
	}
	.m-callout[data-tone="caution"] {
		--m-tone: var(--m-caution);
		--m-tone-wash: var(--m-caution-wash);
		--m-tone-line: var(--m-caution-line);
	}
	.m-callout[data-tone="info"] {
		--m-tone: var(--m-info);
		--m-tone-wash: var(--m-info-wash);
		--m-tone-line: var(--m-info-line);
	}
	.m-callout[data-tone="positive"] {
		--m-tone: var(--m-positive);
		--m-tone-wash: var(--m-positive-wash);
		--m-tone-line: var(--m-positive-line);
	}
	.m-callout-title {
		margin: 0 0 var(--m-space-2);
		font-family: var(--m-font-serif);
		font-size: 0.9375rem;
		font-weight: 700;
		line-height: 1.35;
		color: var(--m-tone);
	}
	.m-callout > :last-child {
		margin-bottom: 0;
	}
	/* tags and pills: small labels on a tone; the graded marks (A-D) are .grade below */
	.m-tag,
	.m-pill {
		--m-tone: var(--m-ink-muted);
		--m-tone-wash: var(--m-surface);
		--m-tone-line: var(--m-hairline-strong);
		display: inline-flex;
		align-items: center;
		gap: var(--m-space-1);
		padding: 0.15em 0.6em;
		background: var(--m-tone-wash);
		border: 1px solid var(--m-tone-line);
		border-radius: var(--m-radius-1);
		color: var(--m-tone);
		font-family: var(--m-font-sans);
		font-size: 0.75rem;
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: 0.04em;
		white-space: nowrap;
		vertical-align: 0.08em;
	}
	.m-pill {
		border-radius: var(--m-radius-pill);
	}
	.m-tag[data-tone="accent"],
	.m-pill[data-tone="accent"] {
		--m-tone: var(--m-accent-text);
		--m-tone-wash: var(--m-accent-wash);
		--m-tone-line: var(--m-accent-line);
	}
	.m-tag[data-tone="contrast"],
	.m-pill[data-tone="contrast"],
	.m-tag[data-tone="caution"],
	.m-pill[data-tone="caution"] {
		--m-tone: var(--m-contrast);
		--m-tone-wash: var(--m-contrast-wash);
		--m-tone-line: var(--m-contrast-line);
	}
	.m-tag[data-tone="risk"],
	.m-pill[data-tone="risk"] {
		--m-tone: var(--m-risk);
		--m-tone-wash: var(--m-risk-wash);
		--m-tone-line: var(--m-risk-line);
	}
	.m-tag[data-tone="info"],
	.m-pill[data-tone="info"] {
		--m-tone: var(--m-info);
		--m-tone-wash: var(--m-info-wash);
		--m-tone-line: var(--m-info-line);
	}
	.m-tag[data-tone="positive"],
	.m-pill[data-tone="positive"] {
		--m-tone: var(--m-positive);
		--m-tone-wash: var(--m-positive-wash);
		--m-tone-line: var(--m-positive-line);
	}
	/* an attachment mark beside the thing it documents, and the attachments line under the sources */
	.m-doc {
		display: inline-block;
		margin-left: 0.15em;
		padding: 1px 5px 0;
		border: 1px solid var(--m-hairline-strong);
		border-radius: var(--m-radius-1);
		font-family: var(--m-font-sans);
		font-size: 0.625rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		line-height: 1.5;
		vertical-align: 0.15em;
		color: var(--m-ink-muted);
		text-decoration: none;
		white-space: nowrap;
	}
	.m-doc:hover {
		color: var(--m-link-hover);
		border-color: currentColor;
	}
	.m-attachments {
		font-size: 0.9375rem;
		line-height: 1.7;
		color: var(--m-ink-muted);
	}
	/* key-value tiles */
	.m-kv {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
		gap: var(--m-space-4) var(--m-space-5);
		margin: 0 0 var(--m-space-5);
		break-inside: avoid;
	}
	.m-kv > div {
		padding-top: var(--m-space-3);
		border-top: 1px solid var(--m-hairline-strong);
		break-inside: avoid;
	}
	.m-kv dt {
		font-family: var(--m-font-sans);
		font-size: 0.6875rem;
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--m-ink-muted);
	}
	.m-kv dd {
		margin: var(--m-space-2) 0 0;
		font-family: var(--m-font-sans);
		font-size: 1.375rem;
		font-weight: 500;
		line-height: 1.2;
		font-variant-numeric: tabular-nums;
		color: var(--m-ink);
	}
	.m-kv .m-kv-note {
		display: block;
		margin-top: var(--m-space-1);
		font-size: 0.75rem;
		font-weight: 400;
		line-height: 1.45;
		color: var(--m-ink-muted);
	}
	@media (min-width: 640px) {
		.m-kv dd {
			font-size: 1.5rem;
		}
	}

	/* ---- tables ---- */
	/* a Markdown page's tables get this wrapper automatically: a real horizontal scroll instead of slivers */
	.m-table-wrap {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--m-hairline-strong) transparent;
	}
	.m-table-wrap > table {
		min-width: 34rem;
	}
	/* an HTML page's tables sit in a frame (the fade host) around the scroller; two elements on purpose,
	   a pseudo on the scroller would scroll away or be clipped */
	.m-table-frame {
		position: relative;
		margin-top: var(--m-space-4);
		margin-bottom: var(--m-space-6);
	}
	.m-table-scroll {
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: var(--m-hairline-strong) transparent;
	}
	.m-table-scroll:focus-visible {
		outline-offset: 4px;
	}
	table {
		border-collapse: separate; /* sticky cells keep their rules; collapse would leave them behind */
		border-spacing: 0;
		width: 100%;
		font-size: 0.875rem;
		line-height: 1.45;
	}
	.m-table-frame table {
		min-width: 640px;
	}
	caption {
		margin-bottom: var(--m-space-3);
		font-size: 0.8125rem;
		line-height: 1.5;
		text-align: left;
		color: var(--m-ink-muted);
	}
	th,
	td {
		text-align: left;
		vertical-align: top;
		padding: 10px 14px 10px 0;
		border-bottom: 1px solid var(--m-hairline);
		background-color: var(--m-paper);
	}
	th:last-child,
	td:last-child {
		padding-right: 0;
	}
	/* the ink rule under the head is a 1px background on each cell, so it can draw in cell by cell when the
	   table enters view (motion.js arms it below the fold only); the resting state is fully drawn */
	thead th {
		font-family: var(--m-font-sans);
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		color: var(--m-ink-muted);
		white-space: nowrap;
		padding-top: 6px;
		padding-bottom: 10px;
		border-bottom: 0;
		background-image: linear-gradient(var(--m-rule), var(--m-rule));
		background-repeat: no-repeat;
		background-position: left bottom;
		background-size: 100% 1px;
		transition: background-size 480ms var(--m-ease-out);
		transition-delay: calc(var(--i, 0) * 70ms);
	}
	html.js .m-table-frame.is-pre-rule thead th {
		background-size: 0% 1px;
	}
	html.m-arming thead th {
		transition: none !important;
	}
	@media (prefers-reduced-motion: reduce) {
		thead th,
		html.js .m-table-frame.is-pre-rule thead th {
			background-size: 100% 1px !important;
			transition: none !important;
		}
	}
	tbody th {
		font-weight: 500;
		color: var(--m-ink);
	}
	tbody tr:last-child th,
	tbody tr:last-child td {
		border-bottom: 0;
	}
	tfoot th {
		padding: var(--m-space-2) 0;
		border-top: 1px solid var(--m-hairline-strong);
		font-size: 0.75rem;
		color: var(--m-ink-muted);
	}
	th.num,
	td.num {
		text-align: right;
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
	}
	td.why {
		color: var(--m-ink-muted);
		min-width: 20rem;
	}
	/* sticky first column: no vertical rule at rest, a hairline and a soft shadow only once scrolled */
	.m-table-frame th:first-child,
	.m-table-frame td:first-child {
		position: sticky;
		left: 0;
		z-index: 2;
		padding-right: 16px;
	}
	.m-table-frame.is-scrolled th:first-child,
	.m-table-frame.is-scrolled td:first-child {
		box-shadow: 1px 0 0 0 var(--m-hairline);
	}
	.m-table-frame th:nth-child(2),
	.m-table-frame td:nth-child(2) {
		padding-left: 14px;
	}
	.m-table-frame th:first-child::after,
	.m-table-frame td:first-child::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 12px;
		transform: translateX(100%);
		pointer-events: none;
		opacity: 0;
		transition: opacity 300ms var(--m-ease-out);
		background: linear-gradient(to right, var(--m-hairline), transparent);
	}
	.m-table-frame.is-scrolled th:first-child::after,
	.m-table-frame.is-scrolled td:first-child::after {
		opacity: 1;
	}
	/* the right-edge fade exists only when motion.js can clear it: at rest it would hide the last words of a
	   wide table from a reader without JavaScript */
	html.m-motion .m-table-frame::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 48px;
		pointer-events: none;
		opacity: 1;
		transition: opacity 300ms var(--m-ease-out);
		background: linear-gradient(to right, transparent, var(--m-paper) 82%);
	}
	html.m-motion .m-table-frame.at-end::after {
		opacity: 0;
	}
	@media (prefers-reduced-motion: reduce) {
		.m-table-frame::after,
		.m-table-frame td:first-child::after,
		.m-table-frame th:first-child::after {
			transition: none;
		}
	}
	/* on a phone each row becomes a five-column grid with the reason underneath, so nothing needs a swipe;
	   the roles on the cells keep the table semantics when display changes. The scroll frame stays as the
	   safety net for very narrow screens. */
	@media screen and (max-width: 720px) {
		.m-table-frame table,
		.m-table-frame thead,
		.m-table-frame tbody {
			display: block;
			min-width: 0;
			width: 100%;
		}
		.m-table-frame tr {
			display: grid;
			/* every track definite: each row is its own grid, and an auto track would resolve per row */
			grid-template-columns: minmax(5.5rem, 1.4fr) 4.5rem 2.25rem 2.6rem 3.75rem;
			column-gap: 5px;
			align-items: baseline;
			padding: 10px 0;
			border-bottom: 1px solid var(--m-hairline);
		}
		.m-table-frame tbody tr:last-child {
			border-bottom: 0;
		}
		.m-table-frame th,
		.m-table-frame td {
			display: block;
			border: 0;
			padding: 0;
			background: transparent;
			position: static;
			box-shadow: none;
			min-width: 0;
		}
		.m-table-frame th:first-child::after,
		.m-table-frame td:first-child::after,
		.m-table-frame::after {
			display: none;
		}
		.m-table-frame thead tr {
			padding: 0 0 8px;
			border-bottom: 1px solid var(--m-rule);
		}
		.m-table-frame thead th {
			background-image: none;
			transition: none;
			font-size: 0.75rem;
		}
		.m-table-frame thead th.why {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
		}
		.m-table-frame td.why {
			grid-column: 1 / -1;
			padding-top: 4px;
			font-size: 0.8125rem;
			line-height: 1.45;
		}
		.m-table-frame td.grade-col {
			text-align: left;
			white-space: normal;
		}
		.m-table-frame .grade-note {
			display: block;
			white-space: normal;
			margin: 4px 0 0;
			font-size: 0.75rem;
		}
		.m-table-frame .grade-none {
			padding-right: 0;
		}
	}

	/* graded marks: A approved / B unclear / C one unit not approved / D a split half - the wash alone is
	   1.15:1 on Lin, so the line carries the shape; the letter keeps its hue at 12px */
	.grade,
	.m-grade {
		display: inline-block;
		font-family: var(--m-font-sans);
		font-size: 0.75rem;
		font-weight: 500;
		letter-spacing: 0.06em;
		line-height: 1;
		padding: 4px 7px 3px;
		border-radius: var(--m-radius-1);
		border: 1px solid var(--m-hairline-strong);
		white-space: nowrap;
		vertical-align: baseline;
		color: var(--m-ink-muted);
		background: var(--m-surface-2);
	}
	.grade-a {
		color: var(--m-positive);
		background: var(--m-positive-wash);
		border-color: var(--m-positive-line);
	}
	.grade-b {
		color: var(--m-caution);
		background: var(--m-caution-wash);
		border-color: var(--m-caution-line);
	}
	.grade-c {
		color: var(--m-risk);
		background: var(--m-risk-wash);
		border-color: var(--m-risk-line);
	}
	.grade-d {
		color: var(--m-ink-muted);
		background: var(--m-surface-2);
		border-color: var(--m-hairline-strong);
	}
	.grade-none {
		background: transparent;
		border-color: transparent;
		color: var(--m-ink-muted);
		padding-left: 0;
	}
	.grade-note {
		font-size: 0.8125rem;
		color: var(--m-ink-muted);
		margin-left: -4px; /* the comma sits against the mark's box */
		white-space: nowrap;
	}

	/* ---- the cover: a full-viewport scene, standard for every report. Stetind from the Kartverket terrain model,
	   the moon for the report's date, the real stars by night or drifting clouds by day, and the Monolitt stone
	   planted on the true summit. Every scene object is positioned inside a fixed 3:1 scene box in percent of the
	   panorama, so the resting picture is CSS alone (no-JS, screenshots and print all see it); the script adds only
	   the pointer parallax and the click. The build injects the art layer (docs/design/hero-v2/brief.md). ---- */
	@property --m-moon-x {
		syntax: "<length-percentage>"; /* a <percentage> registration rejects the calc() mix below */
		inherits: true;
		initial-value: 0%;
	}
	@property --m-moon-y {
		syntax: "<length-percentage>";
		inherits: true;
		initial-value: 0%;
	}
	@property --m-glow-a {
		syntax: "<number>";
		inherits: true;
		initial-value: 0;
	}
	@property --m-glow-k {
		syntax: "<number>";
		inherits: true;
		initial-value: 1;
	}
	.m-masthead {
		/* the summit pixel of the 3000x1000 panorama (1785.1, 222.6), the stone, the moon's two places */
		--m-summit-x: 59.5%;
		--m-summit-y: 22.26%;
		--m-stone-h: clamp(28px, 2.8vw, 38px); /* never taller than the title's cap height */
		--m-moon-d: clamp(64px, 6.4vw, 108px);
		--m-moon-rest-x: calc(var(--m-summit-x) - 12%);
		--m-moon-rest-y: 30%;
		--m-moon-align-x: var(--m-summit-x);
		--m-moon-align-y: calc(var(--m-summit-y) - 0.55 * var(--m-stone-h) - 0.22 * var(--m-moon-d));
		--m-moon-x: var(--m-moon-rest-x);
		--m-moon-y: var(--m-moon-rest-y);
		--m-glow-k: 1;
		--m-px: 0;
		--m-py: 0;
		--m-cover-pad-top: var(--m-space-8); /* one value: the phone band pulls itself up by exactly this much */
		position: relative;
		isolation: isolate;
		overflow: hidden;
		display: grid;
		grid-template-columns: minmax(0, 1fr); /* an auto track would grow to the contents list and overflow a phone */
		align-content: end;
		min-height: 100vh; /* the fallback; svh keeps the cover's bottom edge above the iOS toolbar */
		min-height: 100svh;
		padding: var(--m-cover-pad-top) var(--m-gutter-safe) clamp(var(--m-space-7), 9svh, 8rem);
		background-color: var(--m-cover-sky-low);
		background-image: linear-gradient(to bottom, var(--m-cover-sky-top) 0%, var(--m-cover-sky-mid) 48%, var(--m-cover-sky-low) 100%);
		color: var(--m-cover-ink);
		/* one declaration for every registered property: a second transition shorthand would replace the first */
		transition:
			--m-moon-x 1200ms var(--m-ease-in-out),
			--m-moon-y 1200ms var(--m-ease-in-out),
			--m-glow-k 900ms var(--m-ease-out) 1100ms;
	}
	.m-masthead-art {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
	}
	/* the text block spans the measure but must not swallow a click meant for the stone behind it: only its own
	   text and links take the pointer */
	.m-masthead-inner {
		position: relative;
		z-index: 1;
		pointer-events: none;
		width: 100%;
		max-width: var(--m-measure-wide);
		min-width: 0;
		margin: 0 auto;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--m-space-6);
	}
	.m-masthead-inner a,
	.m-masthead-inner h1,
	.m-masthead-inner p,
	.m-masthead-inner li {
		pointer-events: auto;
	}
	/* the parallax: the pointer's place in the cover (-1 to 1) moves the three layers against it, like weight */
	.m-masthead-layer {
		position: absolute;
		inset: 0;
		transition: transform 600ms var(--m-ease-out);
		will-change: transform;
	}
	.m-masthead-layer-far {
		transform: translate(calc(var(--m-px) * -3px), calc(var(--m-py) * -2px));
	}
	.m-masthead-layer-mid {
		transform: translate(calc(var(--m-px) * -6px), calc(var(--m-py) * -3px));
	}
	.m-masthead-layer-near {
		transform: translate(calc(var(--m-px) * -11px), calc(var(--m-py) * -5px));
	}
	/* the scene box: the panorama's 3:1 frame, as tall as the art layer, centred, overflowing at the sides on every
	   viewport narrower than 3:1; everything in it is placed in percent of the panorama */
	.m-masthead-scene {
		position: absolute;
		bottom: 0;
		left: 50%;
		height: 100%;
		aspect-ratio: 3 / 1;
		transform: translateX(-50%);
	}
	@media (min-aspect-ratio: 3 / 1) {
		/* wider than the panorama: the box follows the width instead and crops the summit at the top */
		.m-masthead-scene {
			height: auto;
			width: 100%;
		}
	}
	.m-masthead-sky {
		display: var(--m-cover-stars);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 66%;
		max-width: none;
		transition: opacity 1200ms var(--m-ease-out);
	}
	html.js .m-cover-twinkle {
		animation: m-twinkle var(--d, 10s) ease-in-out infinite alternate;
	}
	@keyframes m-twinkle {
		from {
			opacity: var(--o, 0.8);
		}
		to {
			opacity: calc(var(--o, 0.8) * 0.7);
		}
	}
	/* one wide cloud layer, never cropped in height, never stretched, drifting 2 percent over five minutes */
	.m-masthead-clouds {
		display: var(--m-cover-clouds);
		position: absolute;
		left: 50%;
		top: 0;
		width: max(104%, 2200px);
		max-width: none;
		height: auto;
		transform: translateX(-50%);
		opacity: var(--m-cover-cloud-a);
	}
	html.js .m-masthead-clouds {
		animation: m-drift 300s linear infinite alternate;
	}
	@keyframes m-drift {
		from {
			transform: translateX(-51%);
		}
		to {
			transform: translateX(-49%);
		}
	}
	/* the moon: NASA's rendering for the date, screen-blended so its dark limb melts into the sky; it rests left of
	   centre and travels to the aligned place on the click */
	.m-masthead-moon {
		position: absolute;
		left: var(--m-moon-x);
		top: var(--m-moon-y);
		width: var(--m-moon-d);
		height: auto;
		max-width: none;
		transform: translate(-50%, -50%);
		opacity: var(--m-cover-moon-a);
		mix-blend-mode: screen;
		z-index: 1;
		transition: filter 900ms var(--m-ease-out);
	}
	/* the only radial on the cover: one colour, centred on the moon, absent at rest */
	.m-masthead-glow {
		position: absolute;
		left: var(--m-moon-x);
		top: var(--m-moon-y);
		width: var(--m-moon-d);
		aspect-ratio: 1;
		transform: translate(-50%, -50%) scale(calc(3.4 * var(--m-glow-k)));
		border-radius: 50%;
		background: radial-gradient(
			circle,
			rgb(var(--m-cover-glow) / var(--m-glow-a)) 0%,
			rgb(var(--m-cover-glow) / calc(var(--m-glow-a) * 0.45)) 28%,
			rgb(var(--m-cover-glow) / calc(var(--m-glow-a) * 0.12)) 55%,
			transparent 72%
		);
		mix-blend-mode: var(--m-cover-glow-blend);
		transition:
			transform 900ms var(--m-ease-out),
			opacity 900ms var(--m-ease-out),
			--m-glow-a 900ms var(--m-ease-out);
	}
	.m-masthead-terrain {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
	}
	.m-masthead-terrain-day {
		opacity: var(--m-cover-terrain-day);
	}
	.m-masthead-terrain-night {
		opacity: var(--m-cover-terrain-night);
	}
	/* the stone: three surfaces, because a clip-path on an element clips its pseudo-elements and its hit-testing.
	   The element is the unclipped positioning box (the button, with the hit area on a child); ::before is the face
	   cut to the brand's 16-degree top; ::after is the moon's light on its top. No edge lines, no colour. */
	.m-masthead-stone {
		position: absolute;
		left: var(--m-summit-x);
		top: calc(var(--m-summit-y) + 3px); /* planted: the foot 3 px into the summit */
		height: var(--m-stone-h);
		aspect-ratio: 73 / 282;
		transform: translate(-46%, -100%);
		z-index: 3;
		display: block;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		appearance: none;
		font: inherit;
		color: inherit;
		overflow: visible;
		cursor: default; /* no hand: the stone goes nowhere */
		pointer-events: auto;
		outline-offset: 10px;
	}
	.m-masthead-stone::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--m-cover-stone-face);
		clip-path: polygon(0 7.4%, 100% 0, 100% 100%, 0 100%);
	}
	.m-masthead-stone::after {
		content: "";
		position: absolute;
		inset: 0;
		clip-path: polygon(0 7.4%, 100% 0, 100% 100%, 0 100%);
		background: linear-gradient(to bottom, rgb(var(--m-cover-glow) / 0.22) 0%, rgb(var(--m-cover-glow) / 0.06) 18%, transparent 45%);
	}
	.m-masthead-stone-hit {
		position: absolute;
		left: 50%;
		bottom: -8px;
		width: 44px;
		height: 64px;
		transform: translateX(-50%);
	}
	.m-masthead-stone-shadow {
		position: absolute;
		left: calc(var(--m-summit-x) + 1px);
		top: calc(var(--m-summit-y) + 2px);
		width: 26px;
		height: 7px;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background: rgb(0 0 0 / 0.5);
		filter: blur(2.5px);
	}
	/* the click: 0.25 s held, the moon travels 1.2 s to stand behind the stone, a small light comes up behind it,
	   the stars dim a little; at 3.2 s the script settles it to the trace, kept for the visit */
	.m-masthead.is-aligned {
		--m-moon-x: var(--m-moon-align-x);
		--m-moon-y: var(--m-moon-align-y);
		--m-glow-k: 1.8;
	}
	.m-masthead.is-aligned .m-masthead-glow {
		--m-glow-a: var(--m-cover-glow-peak);
		transition-delay: 1100ms;
	}
	.m-masthead.is-aligned .m-masthead-moon {
		filter: brightness(1.12);
		transition-delay: 1100ms;
	}
	.m-masthead.is-aligned .m-masthead-sky {
		opacity: 0.7;
		transition: opacity 1200ms var(--m-ease-out) 1100ms;
	}
	.m-masthead.is-aligned.is-settled {
		--m-glow-k: 1.4;
		transition-delay: 0ms; /* the 1.1 s delay belongs to the travel; the settle starts at once and ends at 4.1 s */
	}
	.m-masthead.is-aligned.is-settled .m-masthead-glow {
		--m-glow-a: var(--m-cover-glow-trace);
		transition-delay: 0ms;
	}
	.m-masthead.is-aligned.is-settled .m-masthead-moon {
		filter: brightness(1.06);
		transition-delay: 0ms;
	}
	.m-masthead.is-aligned.is-settled .m-masthead-sky {
		opacity: 0.85;
		transition-delay: 0ms;
	}
	/* Escape, or the cover leaving the viewport mid-sequence: the script applies the trace in one frame */
	.m-masthead.is-jump,
	.m-masthead.is-jump .m-masthead-glow,
	.m-masthead.is-jump .m-masthead-moon,
	.m-masthead.is-jump .m-masthead-sky {
		transition: none !important;
	}
	/* the text: cover ink, the theme's chrome bone would vanish on the day sky */
	.m-masthead .m-eyebrow {
		color: var(--m-cover-ink-muted);
	}
	.m-masthead h1 {
		color: var(--m-cover-ink);
		font-size: clamp(1.75rem, min(4.6vw, 8.2svh), 3.5rem); /* the svh term shrinks it in a short window */
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
		max-width: 100%;
		text-wrap: initial;
		text-shadow: var(--m-cover-title-shadow);
	}
	.m-masthead h1 .m-title-line {
		display: block;
		white-space: nowrap;
	}
	.m-masthead h1 .m-title-line-2 {
		align-self: flex-end;
	}
	@media (max-width: 720px) {
		.m-masthead h1 {
			font-size: min(calc(8vw - 4px), 2.5rem); /* sized so the first line stays whole down to 320px */
		}
		.m-masthead h1 .m-title-line {
			white-space: normal;
		}
		.m-masthead h1 .m-title-line-2 {
			align-self: flex-start;
			padding-left: 1.2em;
		}
	}
	.m-masthead :focus-visible {
		outline-color: var(--m-cover-focus); /* the jade ring is invisible on the night sky */
	}
	.m-masthead-foot {
		position: absolute;
		right: var(--m-gutter-safe);
		bottom: calc(var(--m-space-5) + env(safe-area-inset-bottom, 0px));
		font-size: 0.75rem;
		letter-spacing: 0.04em;
		color: var(--m-cover-ink-muted);
	}
	/* a short window: one height step, nothing hidden or truncated */
	@media screen and (max-height: 700px) and (min-width: 720px) {
		.m-masthead {
			--m-cover-pad-top: var(--m-space-5);
			padding-block: var(--m-cover-pad-top) var(--m-space-5);
		}
		.m-masthead-inner {
			gap: var(--m-space-4);
		}
		.m-masthead .m-toc {
			font-size: 0.875rem;
			line-height: 1.5;
		}
		.m-masthead h1 {
			font-size: clamp(1.5rem, 6.4svh, 2.25rem);
		}
	}
	/* phone portrait: the scene is a band above the text, not the layer behind it; screen only, because paper is
	   794 px wide under print media and would get the band's empty track */
	@media screen and (max-width: 899px) {
		.m-masthead {
			--m-moon-d: 52px;
			--m-stone-h: 24px;
			grid-template-rows: minmax(clamp(88px, 22svh, 260px), 1fr) auto;
			align-content: stretch;
			background-image: none; /* the text row sits on the horizon colour */
		}
		.m-masthead-art {
			position: relative;
			inset: auto;
			grid-row: 1;
			margin: calc(-1 * var(--m-cover-pad-top)) calc(-1 * var(--m-gutter-safe)) 0;
			overflow: hidden; /* the band clips: the cloud layer is 680 px tall and would paint over the text row */
			background-image: linear-gradient(to bottom, var(--m-cover-sky-top) 0%, var(--m-cover-sky-mid) 60%, var(--m-cover-sky-low) 100%);
		}
		.m-masthead-inner {
			grid-row: 2;
		}
		.m-masthead-sky {
			height: 60%;
		}
	}
	/* the cover entrance: the one JS-gated animation on visible content. Blur-in over 0.8 s, staggered by
	   --fx-order, only once html.js exists; a screenshot after a second sees the finished cover. */
	@keyframes m-enter {
		0% {
			opacity: 0;
			filter: blur(14px);
		}
		50% {
			opacity: 1;
		}
		100% {
			opacity: 1;
			filter: blur(0);
		}
	}
	html.js .m-masthead [data-enter] {
		animation: m-enter 0.8s var(--m-ease-out) both;
		animation-delay: calc(var(--fx-order, 0) * 0.18s);
	}
	/* the stagger order lives in a data attribute, not an inline style attribute */
	[data-fx-order="1"] {
		--fx-order: 1;
	}
	[data-fx-order="2"] {
		--fx-order: 2;
	}
	[data-fx-order="3"] {
		--fx-order: 3;
	}
	[data-fx-order="4"] {
		--fx-order: 4;
	}
	[data-fx-order="5"] {
		--fx-order: 5;
	}
	@media (prefers-reduced-motion: reduce) {
		html.js .m-masthead [data-enter],
		html.js .m-masthead-clouds,
		html.js .m-cover-twinkle {
			animation: none;
		}
		.m-masthead,
		.m-masthead-layer,
		.m-masthead-glow,
		.m-masthead-moon,
		.m-masthead-sky,
		.m-masthead.is-aligned .m-masthead-sky {
			transition: none;
		}
	}

	/* the contents list: dotted leaders; the rows you are not on dim and soften, radiating outward */
	.m-toc {
		list-style: none;
		margin: 0;
		padding: 0;
		max-width: min(30rem, 100%);
		font-family: var(--m-font-serif);
		font-size: 0.9375rem;
		line-height: 1.7;
	}
	.m-toc li {
		margin: 0;
	}
	.m-toc-row {
		display: flex;
		align-items: baseline;
		gap: 8px;
		color: inherit;
		text-decoration: none;
		transition:
			opacity 400ms var(--m-ease-out),
			filter 400ms var(--m-ease-out);
	}
	.m-toc-row:hover {
		color: inherit;
	}
	.m-toc-row > span {
		flex: none;
	}
	.m-toc-row > .m-toc-leader {
		flex: 1 1 0; /* the leader fills the gap so the label ends flush right; outranks the span rule above */
	}
	.m-toc-num {
		font-family: var(--m-font-sans);
		font-size: 0.8125rem;
		font-variant-numeric: tabular-nums;
		color: var(--m-cover-ink-muted);
		min-width: 2.2em;
	}
	.m-toc-leader {
		min-width: 16px;
		overflow: hidden;
		white-space: nowrap;
		letter-spacing: 2px;
		color: var(--m-cover-ink-muted);
		opacity: 0.6;
	}
	.m-toc-label {
		white-space: nowrap;
	}
	@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
		.m-toc:hover .m-toc-row:not(:hover) {
			opacity: 0.66;
			filter: blur(0.5px);
		}
		.m-toc:hover .m-toc-row:hover + li .m-toc-row,
		.m-toc:hover li:has(+ li .m-toc-row:hover) .m-toc-row {
			opacity: 0.9;
			filter: blur(0.15px);
		}
		.m-toc:hover .m-toc-row:hover .m-toc-leader {
			opacity: 1;
		}
	}
	@media (prefers-reduced-motion: reduce) {
		.m-toc-row {
			transition: none;
		}
		.m-toc:hover .m-toc-row:not(:hover),
		.m-toc:hover .m-toc-row:hover + li .m-toc-row,
		.m-toc:hover li:has(+ li .m-toc-row:hover) .m-toc-row {
			opacity: 1;
			filter: none;
		}
	}

	/* ---- reveal on scroll ---- */
	[data-reveal] {
		transition:
			opacity var(--m-dur-slow) var(--m-ease-out),
			transform var(--m-dur-slow) var(--m-ease-out);
		transition-delay: calc(var(--i, 0) * 40ms);
	}
	html.js [data-reveal].is-pre {
		opacity: 0;
		transform: translate3d(0, var(--m-reveal-dy, 8px), 0);
	}
	html.js h2[data-reveal].is-pre {
		--m-reveal-dy: 12px;
	}
	html.js tbody tr[data-reveal] {
		transition-delay: calc(var(--i, 0) * 26ms);
	}
	html.m-arming [data-reveal] {
		transition: none !important;
	}
	@media (prefers-reduced-motion: reduce) {
		[data-reveal],
		html.js [data-reveal].is-pre {
			opacity: 1 !important;
			transform: none !important;
			transition: none !important;
		}
	}

	/* ---- section ticks in the left margin (wide screens, JS only) and a 1px progress rule elsewhere ---- */
	.m-side-toc {
		display: none;
		position: fixed;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 30;
		margin: 0;
		padding: 0;
		opacity: 0;
		visibility: hidden; /* out of the tab order until shown: an invisible link must not take focus */
		pointer-events: none;
		transition:
			opacity 300ms var(--m-ease-out),
			visibility 0s linear 300ms;
	}
	@media (min-width: 1080px) {
		html.js .m-side-toc {
			display: block;
		}
	}
	.m-side-toc.is-visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition:
			opacity 300ms var(--m-ease-out),
			visibility 0s;
	}
	.m-side-toc a {
		position: relative;
		display: flex;
		align-items: center;
		width: 44px;
		height: 20px;
		text-decoration: none;
	}
	.m-side-toc a::before {
		content: "";
		flex: none;
		width: 16px;
		height: 1px;
		background: var(--m-ink-muted); /* 6.8:1 on Lin at rest; the faint gray at 60% read 2:1 */
		opacity: 0.85;
		transition:
			width var(--m-dur) var(--m-ease-out),
			opacity var(--m-dur) var(--m-ease-out),
			background var(--m-dur) var(--m-ease-out);
	}
	.m-side-toc a:hover::before {
		opacity: 1;
		background: var(--m-ink-muted);
	}
	.m-side-toc a.is-active::before {
		opacity: 1;
		background: var(--m-ink);
		width: 24px;
	}
	.m-side-toc .m-tick-label {
		position: absolute;
		top: 50%;
		left: 34px;
		padding: 4px 12px;
		border-radius: var(--m-radius-3);
		background: var(--m-ink);
		color: var(--m-paper);
		font-family: var(--m-font-sans);
		font-size: 0.75rem;
		line-height: 1.5;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-50%) translateX(-4px);
		transition:
			opacity var(--m-dur) var(--m-ease-out),
			transform var(--m-dur) var(--m-ease-out);
	}
	.m-side-toc a:hover .m-tick-label,
	.m-side-toc a:focus-visible .m-tick-label {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
	@media (prefers-reduced-motion: reduce) {
		.m-side-toc,
		.m-side-toc a::before,
		.m-side-toc .m-tick-label {
			transition: none;
		}
	}
	.m-progress {
		display: none;
	}
	@supports (animation-timeline: scroll()) {
		html.js .m-progress {
			display: block;
			position: fixed;
			inset: 0 0 auto 0;
			z-index: 40;
			height: 1px;
			background: var(--m-contrast-solid);
			transform-origin: 0 50%;
			animation: m-progress linear both;
			animation-timeline: scroll(root block);
		}
		@keyframes m-progress {
			from {
				transform: scaleX(0);
			}
			to {
				transform: scaleX(1);
			}
		}
		@media (min-width: 1080px), (prefers-reduced-motion: reduce) {
			html.js .m-progress {
				display: none;
			}
		}
	}

	/* ---- the blank root page ---- */
	.m-blank-main {
		min-height: 100svh;
		display: grid;
		place-content: center;
		justify-items: center;
		gap: var(--m-space-4);
		color: var(--m-ink-muted);
		font-size: 0.875rem;
	}
	.m-blank .m-pillar {
		height: 64px;
		width: auto;
		color: var(--m-ink);
	}

	/* ---- print ---- */
	@media print {
		:root {
			color-scheme: light;
			--m-paper: #fff;
			--m-surface: #fff;
			--m-surface-2: #fff;
			--m-ink: #111;
			--m-ink-head: #111;
			--m-ink-muted: #333;
			--m-hairline: #999;
			--m-hairline-strong: #666;
			--m-rule: #111;
			--m-link: #111;
			--m-link-underline: #999;
			--m-pillar-opacity: 0.07;
			--m-pillar-top: #111;
			--m-pillar-bottom: #111;
		}
		@page {
			margin: 18mm 16mm;
		}
		html {
			scroll-behavior: auto;
		}
		body {
			font-size: 10.5pt;
			line-height: 1.5;
			background: #fff;
			color: #111;
		}
		.m-header,
		.m-skip-link,
		.m-theme-switch,
		.m-side-toc,
		.m-progress,
		.m-masthead-foot,
		.m-masthead-art,
		.m-masthead-stone,
		.m-table-frame::after,
		.m-table-frame td:first-child::after,
		.m-table-frame th:first-child::after {
			display: none !important;
		}
		.m-column,
		.m-footer-inner {
			max-width: none;
			padding-left: 0;
			padding-right: 0;
		}
		.m-column .m-wide,
		.m-column .m-bleed {
			width: auto;
			margin-left: 0;
		}
		.m-report {
			display: block;
			padding-block: 12pt 0;
		}
		/* the cover prints as paper with ink, its contents kept, and takes the first page alone */
		.m-masthead {
			background: #fff !important;
			color: #111;
			min-height: 0;
			padding: 24pt 0 12pt;
			break-after: page;
			transition: none;
		}
		.m-masthead h1,
		.m-masthead .m-eyebrow,
		.m-toc-num,
		.m-toc-leader {
			color: #111;
			text-shadow: none;
		}
		html.js .m-masthead [data-enter],
		[data-reveal],
		html.js [data-reveal].is-pre {
			animation: none !important;
			opacity: 1 !important;
			transform: none !important;
			transition: none !important;
			filter: none !important;
		}
		.m-toc-row {
			opacity: 1 !important;
			filter: none !important;
		}
		.m-lede {
			margin-top: 0;
		}
		h2 {
			break-after: avoid;
			margin-top: 20pt;
		}
		tr,
		li,
		.m-note,
		.m-aside,
		.m-callout,
		.m-kv > div {
			break-inside: avoid;
		}
		.m-table-scroll,
		.m-table-wrap {
			overflow: visible;
		}
		table,
		.m-table-frame table,
		.m-table-wrap > table {
			min-width: 0;
			font-size: 8.5pt;
		}
		.m-table-frame th:first-child,
		.m-table-frame td:first-child {
			position: static;
			box-shadow: none;
		}
		td.why {
			min-width: 0;
		}
		thead th,
		html.js .m-table-frame.is-pre-rule thead th {
			background-size: 100% 1px !important;
			transition: none !important;
		}
		.grade,
		.m-grade,
		.m-tag,
		.m-pill {
			border-color: #666;
			color: #111;
			background: #fff;
			-webkit-print-color-adjust: exact;
			print-color-adjust: exact;
		}
		.grade-none {
			border-color: transparent;
		}
		a {
			color: inherit;
		}
		.m-sources a[href^="http"]::after,
		.m-report a[href^="http"]::after,
		a.finn[href^="http"]::after {
			content: " (" attr(href) ")";
			font-family: var(--m-font-mono);
			font-size: 7.5pt;
			color: #555;
			word-break: break-all;
		}
		/* inside a table the address is the identifier; a URL per row would wrap the narrow column into a mess */
		.m-table-frame a[href^="http"]::after,
		.m-table-wrap a[href^="http"]::after {
			content: "";
		}
		.m-report a.m-no-url::after {
			content: "";
		}
		.m-footer {
			margin-top: 32pt;
		}
		.m-footer-strip {
			height: 40pt;
		}
		.m-footer-rule-seg {
			background: #111;
		}
		.m-footer-inner {
			padding-top: 16pt;
			padding-bottom: 0;
		}
		.m-footer-email {
			text-decoration: none;
		}
	}
}

/* --------------------------------------------------------------------------
   3. Chrome - unlayered on purpose: a report's generic rules cannot restyle
   the skip link, the header band, the switcher or the footer.
   -------------------------------------------------------------------------- */
.m-skip-link {
	position: absolute;
	left: var(--m-space-2);
	top: var(--m-space-2);
	z-index: 50;
	transform: translateY(-200%);
	padding: var(--m-space-2) var(--m-space-4);
	background: var(--m-paper);
	color: var(--m-ink);
	border: 1px solid var(--m-hairline-strong);
	border-radius: var(--m-radius-2);
	font-family: var(--m-font-sans);
	font-size: 0.8125rem;
	text-decoration: none;
}
.m-skip-link:focus {
	transform: translateY(0);
}
.m-skip-link:focus-visible {
	outline: 2px solid var(--m-chrome-ink);
}

.m-header {
	background: var(--m-chrome);
	color: var(--m-chrome-ink);
	font-family: var(--m-font-sans);
}
.m-header-inner {
	max-width: calc(var(--m-measure-wide) + 2 * var(--m-gutter));
	margin: 0 auto;
	padding: 18px var(--m-gutter) 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--m-space-3) var(--m-space-4);
	min-height: 56px;
}
.m-header .m-wordmark {
	order: 1;
	color: var(--m-chrome-ink);
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.m-header .m-wordmark:hover {
	color: var(--m-chrome-ink);
}
.m-header .m-wordmark svg {
	height: 22px;
	width: auto;
	display: block;
	fill: currentColor;
}
@media (max-width: 720px) {
	.m-header .m-wordmark svg {
		height: 18px;
	}
}
.m-header .m-header-actions {
	order: 2;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
}
/* the kicker: a per-report line under the wordmark, shown only when the report sets one */
.m-header .m-header-kicker {
	order: 3;
	flex: 1 1 100%;
	margin: 0;
	font-family: var(--m-font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--m-chrome-ink-muted);
}
.m-header .m-header-kicker:empty {
	display: none;
}
.m-header :focus-visible {
	outline: 2px solid var(--m-chrome-ink);
	outline-offset: 3px;
}
/* a page without a cover gets the band alone: the paper starts with air */
.m-header + .m-main > :first-child:not(.m-masthead) {
	margin-top: var(--m-space-7);
}
/* a cover page has no band: the header floats over the cover's first screen in the cover's ink, and the checked
   swatch's halo ring sits on the sky instead of the Mose band (unlayered on purpose: a layered rule would lose to
   the unlayered switch rules below) */
.has-cover body {
	position: relative;
}
.has-cover .m-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 5;
	background: transparent;
	pointer-events: none; /* the overlay's box would otherwise swallow the stone's hit area on a small phone */
	--m-chrome: transparent;
	--m-chrome-ink: var(--m-cover-ink);
	--m-chrome-ink-muted: var(--m-cover-ink-muted);
}
.has-cover .m-header .m-wordmark,
.has-cover .m-header .m-theme-switch {
	pointer-events: auto;
}
.has-cover .m-theme-switch input[type="radio"] {
	border-color: color-mix(in oklab, var(--m-chrome-ink) 70%, transparent); /* the band's 45% read 2.2:1 on the day sky */
}
.has-cover .m-theme-switch input:checked {
	box-shadow:
		0 0 0 2px var(--m-cover-sky-top),
		0 0 0 3.5px color-mix(in oklab, var(--m-chrome-ink) 70%, transparent);
}

/* the switcher: two swatches that are the radios themselves (native focus, arrow keys, checked state);
   display:none until motion.js has wired it and set the checked state (html.m-motion), so neither a no-JS page
   nor a page whose script failed to load ever shows a dead control */
.m-theme-switch {
	display: none;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
html.m-motion .m-theme-switch {
	display: flex;
}
.m-theme-option {
	display: inline-flex;
	cursor: pointer;
}
.m-theme-switch input[type="radio"] {
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 1.5px solid color-mix(in oklab, var(--m-chrome-ink) 45%, transparent);
	border-radius: 50%;
	background: var(--m-swatch);
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
	cursor: pointer;
	transition:
		border-color var(--m-dur) var(--m-ease-out),
		transform var(--m-dur) var(--m-ease-out);
}
.m-theme-switch input[value="light"] {
	--m-swatch: #f8f6f0;
}
.m-theme-switch input[value="dark"] {
	--m-swatch: #0e140c;
}
.m-theme-switch input:hover {
	border-color: color-mix(in oklab, var(--m-chrome-ink) 85%, transparent);
}
.m-theme-switch input:checked {
	border-width: 2px;
	border-color: color-mix(in oklab, var(--m-chrome-ink) 92%, transparent);
	box-shadow:
		0 0 0 2px var(--m-chrome),
		0 0 0 3.5px color-mix(in oklab, var(--m-chrome-ink) 70%, transparent);
	transform: scale(1.06);
}
.m-theme-switch input:focus-visible {
	outline: 2px solid var(--m-chrome-ink);
	outline-offset: 3px;
}
@media (pointer: coarse) {
	.m-theme-switch input[type="radio"] {
		width: 22px;
		height: 22px;
	}
}
/* theme switch: a 250 ms colour crossfade that exists only around a switch, never at load. The shorthand would
   drop a reveal's own opacity and transform transitions, so they are restated for [data-reveal] elements and a
   reveal in flight keeps its curve. */
html.m-theme-anim,
html.m-theme-anim * {
	transition:
		background-color 250ms var(--m-ease-out),
		border-color 250ms var(--m-ease-out),
		color 250ms var(--m-ease-out) !important;
}
html.m-theme-anim [data-reveal] {
	transition:
		background-color 250ms var(--m-ease-out),
		border-color 250ms var(--m-ease-out),
		color 250ms var(--m-ease-out),
		opacity var(--m-dur-slow) var(--m-ease-out),
		transform var(--m-dur-slow) var(--m-ease-out) !important;
}
@media (prefers-reduced-motion: reduce) {
	html.m-theme-anim,
	html.m-theme-anim * {
		transition: none !important;
	}
}
/* the cover's two terrain renders and the moon cross-fade by opacity on a theme switch; the rule above would block
   an opacity fade for the 320 ms it is active */
html.m-theme-anim .m-masthead-terrain,
html.m-theme-anim .m-masthead-moon {
	transition: opacity 250ms var(--m-ease-out) !important;
}
@media (prefers-reduced-motion: reduce) {
	html.m-theme-anim .m-masthead-terrain,
	html.m-theme-anim .m-masthead-moon {
		transition: none !important;
	}
}

/* the footer: the app's own pattern - a giant faint pillar piercing a cut hairline, the identity block, the
   address, the confidentiality line as the italic colophon */
.m-footer {
	position: relative;
	overflow: hidden;
	margin-top: var(--m-space-9);
	--m-pillar-right: 64px;
	--m-pillar-width: 170px;
	--m-pillar-top-offset: 56px;
	color: var(--m-ink-muted);
	font-family: var(--m-font-sans);
}
.m-footer-strip {
	height: 150px;
}
.m-footer-rule {
	display: flex;
	align-items: center;
	height: 1px;
	width: 100%;
}
.m-footer-rule-seg {
	flex: 1 1 auto;
	height: 1px;
	background: var(--m-hairline);
}
.m-footer-rule-gap {
	flex: 0 0 auto;
	width: var(--m-pillar-width);
}
.m-footer-rule-end {
	flex: 0 0 auto;
	width: var(--m-pillar-right);
}
.m-footer-pillar {
	position: absolute;
	top: var(--m-pillar-top-offset);
	right: var(--m-pillar-right);
	bottom: 0;
	width: var(--m-pillar-width);
	pointer-events: none;
	z-index: 1;
	opacity: var(--m-pillar-opacity);
}
.m-footer-pillar svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}
.m-pillar-stop-top {
	stop-color: var(--m-pillar-top);
}
.m-pillar-stop-bottom {
	stop-color: var(--m-pillar-bottom);
}
.m-footer-inner {
	position: relative;
	z-index: 2;
	max-width: calc(var(--m-measure-wide) + 2 * var(--m-gutter));
	margin: 0 auto;
	padding: 48px var(--m-gutter) 40px;
	font-size: 0.875rem;
	line-height: 1.65;
}
.m-footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--m-space-8);
	margin-bottom: var(--m-space-7);
}
.m-footer p {
	margin: 0;
}
.m-footer-name {
	font-family: var(--m-font-serif);
	font-size: 1.0625rem;
	line-height: 1.25;
	letter-spacing: 0.005em;
	color: var(--m-ink);
}
.m-footer-meta {
	margin-top: 6px !important;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}
.m-footer-address {
	font-style: normal;
	color: var(--m-ink);
	font-weight: 400;
}
.m-footer-address .m-eyebrow {
	margin-bottom: var(--m-space-3);
}
.m-footer-place {
	font-family: var(--m-font-serif);
	letter-spacing: 0.005em;
}
.m-footer-email {
	display: inline-block;
	margin-top: 10px;
	color: var(--m-ink);
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-underline-offset: 4px;
}
.m-footer-email:hover {
	color: var(--m-link-hover);
}
.m-footer-confidential {
	font-family: var(--m-font-serif);
	font-style: italic;
	font-size: 0.875rem;
	line-height: 1.45;
	letter-spacing: 0.005em;
	max-width: 46rem;
}
@media (max-width: 900px) {
	.m-footer {
		--m-pillar-right: 40px;
		--m-pillar-width: 150px;
		--m-pillar-top-offset: 22px;
	}
	.m-footer-strip {
		height: 120px;
	}
	.m-footer-inner {
		padding-top: var(--m-space-6);
	}
	.m-footer-grid {
		gap: var(--m-space-6);
		margin-bottom: var(--m-space-6);
	}
}
@media (max-width: 560px) {
	.m-footer {
		--m-pillar-right: 24px;
		--m-pillar-width: 150px;
		--m-pillar-top-offset: 14px;
	}
	.m-footer-grid {
		grid-template-columns: 1fr;
	}
	.m-footer-name {
		font-size: 0.9375rem;
	}
}
