/*
 * MSR Record v2: site styles.
 *
 * Colors and fonts come from theme.json presets, so the MSR Identity style variation
 * restyles everything without touching this file. Hidden-until-revealed states only apply
 * under html.js, which the theme sets before first paint; the editor never has it, so
 * everything is visible while you edit.
 */

/* ---------------------------------------------------------------- tokens */

:root {
	--ground: var(--wp--preset--color--ground, #0a1326);
	--plate: var(--wp--preset--color--plate, #10203b);
	--well: var(--wp--preset--color--well, #070d1a);
	--ink: var(--wp--preset--color--ink, #f5f7fa);
	--muted: var(--wp--preset--color--muted, #9aa6b6);
	--accent: var(--wp--preset--color--accent, #5bc2f2);
	--accent-2: var(--wp--preset--color--accent-2, #1e6fa8);
	--line: var(--wp--preset--color--line, #24354f);
	--hair: color-mix(in srgb, var(--ink) 14%, transparent);
	--hair2: color-mix(in srgb, var(--ink) 22%, transparent);
	/* glass: a see-through plate that frosts whatever passes behind it, edged with a cool hairline.
	   --glass carries panels, --glass-hi panels dense with text, --glass-tint buttons and keys. */
	--glass: color-mix(in srgb, var(--plate) 56%, transparent);
	--glass-hi: color-mix(in srgb, var(--plate) 76%, transparent);
	--glass-tint: color-mix(in srgb, var(--ink) 5%, transparent);
	--glass-tint-hi: color-mix(in srgb, var(--ink) 10%, transparent);
	--glass-line: color-mix(in srgb, color-mix(in srgb, var(--ink) 70%, var(--accent)) 18%, transparent);
	--glass-blur: blur(18px) saturate(150%);
	--glass-blur-sm: blur(12px) saturate(140%);
	/* corner ticks, the instrument-panel marks on the featured glass panels */
	--tick: color-mix(in srgb, var(--accent) 80%, transparent);
	--ticks:
		linear-gradient(var(--tick) 0 0) left 10px top 10px / 13px 1px no-repeat,
		linear-gradient(var(--tick) 0 0) left 10px top 10px / 1px 13px no-repeat,
		linear-gradient(var(--tick) 0 0) right 10px top 10px / 13px 1px no-repeat,
		linear-gradient(var(--tick) 0 0) right 10px top 10px / 1px 13px no-repeat,
		linear-gradient(var(--tick) 0 0) left 10px bottom 10px / 13px 1px no-repeat,
		linear-gradient(var(--tick) 0 0) left 10px bottom 10px / 1px 13px no-repeat,
		linear-gradient(var(--tick) 0 0) right 10px bottom 10px / 13px 1px no-repeat,
		linear-gradient(var(--tick) 0 0) right 10px bottom 10px / 1px 13px no-repeat;
	--f-d: var(--wp--preset--font-family--display, Caladea, Cambria, Georgia, serif);
	--f-b: var(--wp--preset--font-family--body, Carlito, Calibri, system-ui, sans-serif);
	--f-m: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace);
	--tr-d: var(--wp--custom--tracking--display, -.03em);
	--tr-h: var(--wp--custom--tracking--heading, -.015em);
	--tr-t: var(--wp--custom--tracking--title, -.01em);
	--wt-d: var(--wp--custom--weight--display, 700);
	--wt-h: var(--wp--custom--weight--heading, 700);
	--ld-d: var(--wp--custom--leading--display, 1);
	--ld-h: var(--wp--custom--leading--heading, 1.04);
	--maxw: clamp(1280px, 92vw, 1520px);
	--gut: 56px;
	--sec: clamp(96px, 9vw, 152px);
	--bar: 88px;
	--e-out: cubic-bezier(.16, .84, .24, 1);
	--e-ui: cubic-bezier(.2, .8, .2, 1);
	--e-wipe: cubic-bezier(.65, 0, .25, 1);
	--e-swap: cubic-bezier(.3, .9, .2, 1);
	--e-spring: cubic-bezier(.2, 1.6, .4, 1);
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

@media (max-width: 1099px) {
	:root { --gut: 40px; --sec: 88px; }
}

@media (max-width: 809px) {
	:root { --gut: 20px; --sec: 68px; --bar: 68px; }
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	background: var(--ground);
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 84px;
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--f-b);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

::selection { background: var(--accent); color: var(--well); }

a { color: inherit; }

img,
svg,
video { max-width: 100%; }

img { height: auto; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

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

.site-main {
	position: relative;
	z-index: 1;
	background: var(--ground);
}

.sh-in {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.sh {
	position: relative;
	padding-block: var(--sec);
}

.mut { color: var(--muted); }

/* ---------------------------------------------------------------- headblocks */

.sh-head {
	display: grid;
	gap: 22px;
	max-width: 920px;
	align-content: start;
}

.sh-eb {
	margin: 0;
	font: 500 13px/1.5 var(--f-m);
	letter-spacing: .01em;
	color: var(--ink);
}

.sh-eb::before {
	content: "// ";
	color: var(--accent);
}

.sh-hd {
	margin: 0;
	font-family: var(--f-d);
	font-weight: var(--wt-h);
	font-size: var(--hs, clamp(40px, 4.3vw, 64px));
	line-height: var(--ld-h);
	letter-spacing: var(--tr-h);
	text-wrap: balance;
	color: var(--ink);
}

.sh-hd em { font-style: normal; }

/* the hero speaks the MSR way: bold words carry the MSR gradient, italic words fall back to steel */
.hero-title em {
	font-style: italic;
	font-weight: 400;
	color: var(--muted);
}

.hero-title strong,
.hero-title strong .w > span {
	font-weight: inherit;
	background-image: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
	background-size: 200% 100%;
	background-position: 0 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	caret-color: var(--ink);
}

/* section headings: italic or bold words carry the same gradient. A phrase rises one word at a
   time, so site.js gives each word its slice of one gradient (--gw, --gx); until then, or without
   script, each word carries the whole gradient. */
.sh-hd :is(em, strong),
.sh-hd :is(em, strong) .w > span {
	font-weight: inherit;
	background-image: linear-gradient(90deg, var(--accent), var(--accent-2));
	background-size: var(--gw, 100%) 100%;
	background-position: var(--gx, 0) 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	caret-color: var(--ink);
}

.hero-title strong:has(.w),
.sh-hd :is(em, strong):has(.w) { background-image: none; }

@media (forced-colors: active) {
	.hero-title strong,
	.hero-title strong .w > span,
	.sh-hd :is(em, strong),
	.sh-hd :is(em, strong) .w > span {
		background: none;
		color: CanvasText;
	}
}

.sh-lead {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	max-width: 34em;
	color: var(--muted);
	text-wrap: pretty;
}

.sh-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 32px 56px;
}

.sh-top > :last-child:not(:first-child) { justify-self: end; }

/* masked words: each word rises out of its own mask */
.w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: .08em .03em .16em;
	margin: -.08em -.03em -.16em;
}

.w > span { display: inline-block; }

.js .sh-hd .w > span {
	transform: translateY(110%);
	transition: transform .8s var(--e-out);
	transition-delay: calc(var(--wi, 0) * 42ms);
}

.js .sh-hd.in .w > span { transform: none; }

/* everything else that settles in as it arrives */
.js .rv {
	opacity: 0;
	translate: 0 16px;
	transition: opacity .7s var(--e-ui), translate .8s var(--e-ui);
	transition-delay: var(--d, 0ms);
}

.js .rv.in {
	opacity: 1;
	translate: none;
}

/* ---------------------------------------------------------------- buttons */

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wp-block-button__link,
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 54px;
	padding: 0 8px 0 22px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: var(--accent);
	color: var(--well);
	font: 600 14px/1 var(--f-b);
	letter-spacing: -.005em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .3s var(--e-ui), border-color .3s var(--e-ui), color .3s var(--e-ui), transform .2s var(--e-ui);
}

.wp-block-button__link::before,
.btn::before {
	content: "";
	order: 2;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	background: var(--well);
	transition: background-color .3s var(--e-ui);
}

.wp-block-button__link::after,
.btn::after {
	content: "";
	position: absolute;
	top: 7px;
	right: 7px;
	width: 38px;
	height: 38px;
	background-color: var(--accent);
	-webkit-mask: var(--arrow) 11px 11px / 16px 16px no-repeat, var(--arrow) -23px 11px / 16px 16px no-repeat;
	mask: var(--arrow) 11px 11px / 16px 16px no-repeat, var(--arrow) -23px 11px / 16px 16px no-repeat;
	transition: -webkit-mask-position .45s var(--e-swap), mask-position .45s var(--e-swap), background-color .3s var(--e-ui);
}

.wp-block-button__link:hover::after,
.btn:hover::after {
	-webkit-mask-position: 45px 11px, 11px 11px;
	mask-position: 45px 11px, 11px 11px;
}

.wp-block-button__link:hover,
.btn:hover { background: var(--ink); }

.wp-block-button__link:active,
.btn:active { transform: scale(.97); }

/* the main (solid cyan) buttons carry a faint cyan glow beneath, a touch warmer on hover */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.btn:not(.is-ghost) {
	box-shadow: 0 4px 18px -8px color-mix(in srgb, var(--accent) 45%, transparent);
	transition: background-color .3s var(--e-ui), border-color .3s var(--e-ui), color .3s var(--e-ui), transform .2s var(--e-ui), box-shadow .35s var(--e-ui);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.btn:not(.is-ghost):hover {
	box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.btn.is-ghost {
	padding: 0 8px 0 22px;
	border: 1px solid var(--glass-line);
	background: var(--glass-tint);
	-webkit-backdrop-filter: var(--glass-blur-sm);
	backdrop-filter: var(--glass-blur-sm);
	color: var(--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link::before,
.btn.is-ghost::before { background: color-mix(in srgb, var(--ink) 9%, transparent); }

.wp-block-button.is-style-outline > .wp-block-button__link::after,
.btn.is-ghost::after { background-color: var(--ink); }

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.btn.is-ghost:hover {
	border-color: color-mix(in srgb, var(--accent) 60%, transparent);
	background: var(--glass-tint-hi);
}

.btn-quiet {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--glass-line);
	border-radius: 12px;
	background: var(--glass-tint);
	-webkit-backdrop-filter: var(--glass-blur-sm);
	backdrop-filter: var(--glass-blur-sm);
	color: var(--ink);
	font: 600 13px/1 var(--f-b);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .3s var(--e-ui), border-color .3s var(--e-ui), color .3s var(--e-ui);
}

.btn-quiet:hover {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--well);
}

/* numbered link: "03 Open the full record ->" */
.sh-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-block: 6px;
	color: var(--ink);
	font: 500 13px/1.4 var(--f-m);
	text-decoration: none;
	white-space: nowrap;
}

.sh-more .n {
	color: var(--muted);
	transition: color .3s var(--e-ui);
}

.sh-more .t { position: relative; }

.sh-more .t::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: var(--accent);
	transform: scaleX(.35);
	transform-origin: left;
	transition: transform .35s var(--e-ui);
}

.sh-more svg {
	width: 14px;
	height: 14px;
	color: var(--accent);
	transition: transform .35s var(--e-ui);
}

.sh-more:hover .n { color: var(--accent); }
.sh-more:hover .t::after { transform: none; }
.sh-more:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- small parts */

.dot {
	position: relative;
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}

.dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--accent);
	border-radius: 50%;
	animation: msr-pulse 2.2s var(--e-ui) infinite;
}

@keyframes msr-pulse {
	0% { transform: scale(1); opacity: .9; }
	70%,
	100% { transform: scale(2.8); opacity: 0; }
}

.caret {
	display: inline-block;
	width: 9px;
	height: 17px;
	background: var(--accent);
	animation: msr-blink 1.15s steps(1) infinite;
}

@keyframes msr-blink {
	50% { opacity: 0; }
}

.chip {
	display: inline-flex;
	align-items: center;
	height: 26px;
	margin: 0;
	padding: 0 9px;
	border-radius: 7px;
	box-shadow: inset 0 0 0 1px var(--hair2);
	color: var(--ink);
	font: 500 12px/1 var(--f-m);
	letter-spacing: .01em;
	white-space: nowrap;
}

.chip.is-acc {
	color: var(--accent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.chip.is-fill {
	background: var(--accent);
	color: var(--well);
	box-shadow: none;
}

.chip.is-plain {
	background: color-mix(in srgb, var(--well) 70%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.plate {
	border-radius: 14px;
	background: var(--glass);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	box-shadow: inset 0 0 0 1px var(--glass-line);
}

.lbl {
	margin: 0;
	color: var(--muted);
	font: 500 12px/1.4 var(--f-m);
	letter-spacing: .01em;
}

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

/* WordPress prints the skip link; it surfaces as an accent pill */
.skip-link.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 10001;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip: auto !important;
	clip-path: none;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: none;
	color: var(--well);
	font: 600 14px/1 var(--f-b);
	text-decoration: none;
}

.site-hd {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.admin-bar .site-hd { top: var(--wp-admin--admin-bar--height, 32px); }

.hb {
	position: relative;
	z-index: 100;
	height: var(--bar);
	transition: height .45s var(--e-ui);
}

.hb::before {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--ground) 62%, transparent);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	opacity: 0;
	transition: opacity .45s var(--e-ui);
}

.hb::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--hair);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .6s var(--e-ui);
}

.site-hd.is-scrolled .hb { height: 72px; }
.site-hd.is-scrolled .hb::before { opacity: 1; }
.site-hd.is-scrolled .hb::after { transform: none; }

.menu-open .site-hd .hb::before,
.menu-open .site-hd .hb::after { opacity: 0; transform: scaleX(0); }

.hb-in {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gut);
}

.hb-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	text-decoration: none;
}

.hb-logo img {
	width: 30px;
	height: 30px;
	flex: none;
}

.hb-name {
	font: var(--wt-d) 20px/1 var(--f-d);
	letter-spacing: -.03em;
	white-space: nowrap;
}

.hb-logo .caret { margin-left: 1px; }

/* the links ride in a glass capsule; the current one lifts into its own pill */
.hb-nav ul {
	display: flex;
	gap: 2px;
	margin: 0;
	padding: 4px;
	list-style: none;
	border-radius: 999px;
	background: var(--glass-tint);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	-webkit-backdrop-filter: var(--glass-blur-sm);
	backdrop-filter: var(--glass-blur-sm);
}

.hb-nav a {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 12px 14px;
	border-radius: 999px;
	color: var(--ink);
	font: 500 13px/1 var(--f-b);
	text-decoration: none;
	transition: background-color .3s var(--e-ui), box-shadow .3s var(--e-ui);
}

.hb-nav a:hover { background: var(--glass-tint); }

.hb-nav a[aria-current] {
	background: var(--glass-tint-hi);
	box-shadow: inset 0 0 0 1px var(--glass-line);
}

.hb-nav .n {
	color: var(--muted);
	font: 500 11px/1 var(--f-m);
	transition: color .3s var(--e-ui);
}

.hb-nav a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--e-ui);
}

.hb-nav a:hover .n,
.hb-nav a[aria-current] .n { color: var(--accent); }

.hb-nav a:hover::after,
.hb-nav a[aria-current]::after { transform: none; }

.hb-end {
	display: flex;
	align-items: center;
	gap: 18px;
}

.hb-status {
	display: none;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--muted);
	font: 500 12.5px/1.3 var(--f-b);
	white-space: nowrap;
}

.hb-status.is-on { display: flex; }

.hb-burger {
	position: relative;
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--glass-line);
	border-radius: 12px;
	background: var(--glass-tint);
	-webkit-backdrop-filter: var(--glass-blur-sm);
	backdrop-filter: var(--glass-blur-sm);
	color: var(--ink);
	cursor: pointer;
}

.hb-burger i {
	position: absolute;
	left: 13px;
	right: 13px;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .45s var(--e-ui), top .45s var(--e-ui);
}

.hb-burger i:nth-of-type(1) { top: 17px; }
.hb-burger i:nth-of-type(2) { top: 24px; }

.hb-burger[aria-expanded="true"] i:nth-of-type(1) { top: 20.5px; transform: rotate(45deg); }
.hb-burger[aria-expanded="true"] i:nth-of-type(2) { top: 20.5px; transform: rotate(-45deg); }

@media (min-width: 1280px) {
	.hb-status { display: flex; }
}

@media (max-width: 1099px) {
	.hb-nav { display: none; }
	.hb-burger { display: inline-block; }
}

@media (max-width: 809px) {
	.site-hd.is-scrolled .hb { height: 60px; }
}

@media (max-width: 560px) {
	.hb-cta { display: none; }
}

/* full-screen menu sheet */
.menu {
	position: fixed;
	inset: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding: calc(var(--bar) + 28px) var(--gut) 28px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: color-mix(in srgb, var(--well) 76%, transparent);
	-webkit-backdrop-filter: blur(26px) saturate(140%);
	backdrop-filter: blur(26px) saturate(140%);
}

.admin-bar .menu { top: var(--wp-admin--admin-bar--height, 32px); }

.menu[hidden] { display: none; }

.menu-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair);
}

.menu-list li { border-bottom: 1px solid var(--hair); }

.menu-list a {
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: baseline;
	padding: 14px 0;
	color: var(--ink);
	text-decoration: none;
}

.menu-list .n {
	color: var(--muted);
	font: 500 12px/1 var(--f-m);
}

.menu-list b {
	font: var(--wt-d) clamp(28px, 8vw, 44px)/1.05 var(--f-d);
	letter-spacing: var(--tr-h);
	transition: color .3s var(--e-ui);
}

.menu-list a:hover b { color: var(--accent); }

.menu-small {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 24px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.menu-small a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	color: var(--muted);
	font-size: 15px;
	text-decoration: none;
}

.menu-small a:hover { color: var(--ink); }

.ext {
	width: 12px;
	height: 12px;
	color: var(--muted);
}

.menu-foot {
	display: grid;
	gap: 18px;
	margin-top: auto;
}

.menu-mail {
	justify-self: start;
	color: var(--ink);
	font: 500 18px/1.3 var(--f-b);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 6px;
}

.menu-btn { justify-content: space-between; }

.js .menu.is-open .menu-list li,
.js .menu.is-open .menu-small,
.js .menu.is-open .menu-foot {
	animation: msr-rise .55s var(--e-out) both;
	animation-delay: calc(var(--i, 6) * 35ms + 60ms);
}

@keyframes msr-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

.menu-open,
.menu-open body { overflow: hidden; }

/* ---------------------------------------------------------------- loader and page cover */

.ld {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
}

.is-loading .ld,
.is-covered .ld,
.ld.is-close { display: block; }

.is-loading .ld,
.is-covered .ld { animation: msr-failsafe 0s 4.5s forwards; }

@keyframes msr-failsafe {
	to { visibility: hidden; }
}

.ld-ground {
	position: absolute;
	inset: 0;
	background: var(--ground);
	transform-origin: bottom;
}

.ld-scan {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--accent);
	opacity: 0;
}

.ld-box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(640px, calc(100% - 48px));
	transform: translate(-50%, -50%);
	transition: opacity .25s var(--e-ui);
}

.is-covered .ld-box,
.ld.is-close .ld-box { opacity: 0; }

.ld-line {
	margin: 0;
	color: var(--ink);
	font: 500 clamp(13px, 3.7vw, 15px)/1.5 var(--f-m);
}

.ld-p { color: var(--accent); }

.ld-t .g { color: var(--muted); }

.ld-caret {
	display: inline-block;
	width: .55em;
	height: 1.1em;
	margin-left: 2px;
	vertical-align: -.18em;
	background: var(--accent);
	animation: msr-blink 1.15s steps(1) infinite;
}

.ld-bar {
	position: relative;
	height: 1px;
	margin-top: 18px;
	background: color-mix(in srgb, var(--ink) 16%, transparent);
}

.ld-bar i {
	position: absolute;
	top: -.5px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .9s cubic-bezier(.3, .1, .3, 1);
}

.ld.is-run .ld-bar i { transform: none; }

.ld-sub {
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 12px;
}

.ld-skip {
	position: absolute;
	right: 24px;
	bottom: 24px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--hair2);
	border-radius: 12px;
	background: none;
	color: var(--ink);
	font: 500 13px/1 var(--f-b);
	cursor: pointer;
	transition: border-color .3s var(--e-ui), color .3s var(--e-ui);
}

.ld-skip:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.is-covered .ld-skip,
.ld.is-close .ld-skip { display: none; }

/* open: the ground lifts away downward, an accent line riding its top edge */
.ld.is-open .ld-ground {
	transform: scaleY(0);
	transition: transform .5s var(--e-wipe);
}

.ld.is-open .ld-scan {
	opacity: 1;
	transform: translateY(100vh);
	transition: transform .5s var(--e-wipe);
}

.ld.is-open .ld-box,
.ld.is-open .ld-skip { opacity: 0; transition: opacity .2s var(--e-ui); }

/* close (leaving the page): the ground falls in from the top behind the line */
.ld.is-close .ld-ground {
	transform-origin: top;
	animation: msr-close .5s var(--e-wipe) both;
}

.ld.is-close .ld-scan {
	opacity: 1;
	animation: msr-scan .5s var(--e-wipe) both;
}

@keyframes msr-close {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes msr-scan {
	from { transform: translateY(0); }
	to { transform: translateY(100vh); }
}

/* ---------------------------------------------------------------- site cursor */

.cur {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9990;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s var(--e-ui);
}

.cur.on { opacity: 1; }

.cur-dot {
	position: absolute;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 1.5px var(--well);
	transition: transform .25s var(--e-ui);
}

.cur.is-down .cur-dot { transform: scale(.7); }

.cur-lbl {
	position: absolute;
	top: 10px;
	left: 14px;
	padding: 7px 10px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--well) 58%, transparent);
	-webkit-backdrop-filter: var(--glass-blur-sm);
	backdrop-filter: var(--glass-blur-sm);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	color: var(--ink);
	font: 500 12px/1 var(--f-b);
	white-space: nowrap;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .25s var(--e-ui), transform .25s var(--e-ui);
}

.cur.has-lbl .cur-lbl {
	opacity: 1;
	transform: none;
}

.has-cur,
.has-cur a,
.has-cur button,
.has-cur summary,
.has-cur label,
.has-cur [data-cur] { cursor: none; }

.has-cur input[type="text"],
.has-cur input[type="search"],
.has-cur input[type="email"],
.has-cur textarea { cursor: text; }

.has-cur #wpadminbar,
.has-cur #wpadminbar * { cursor: auto; }

/* ---------------------------------------------------------------- hero: the compile */

.sh-hero {
	position: relative;
	min-height: max(720px, 100svh);
	overflow: hidden;
	isolation: isolate;
	background: var(--ground);
}

.hero-grid,
.cta-grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
	background-size: 72px 72px;
	background-position: -1px -1px;
	-webkit-mask-image: radial-gradient(120% 90% at 18% 70%, #000 0%, transparent 72%);
	mask-image: radial-gradient(120% 90% at 18% 70%, #000 0%, transparent 72%);
}

.hero-pic {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 52%;
	right: 0;
	z-index: 1;
	margin: 0;
	overflow: hidden;
	background: var(--well);
}

.hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 41% 20%;
	filter: saturate(.92) contrast(1.04);
}

.hero-cv {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.hero-pic::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to right, var(--ground) 0, color-mix(in srgb, var(--ground) 72%, transparent) 14%, transparent 42%),
		linear-gradient(to top, var(--ground) 0, transparent 26%),
		linear-gradient(to bottom, color-mix(in srgb, var(--ground) 82%, transparent) 0, transparent 18%);
}

.hero-hud {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 52%;
	right: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
	z-index: 3;
	pointer-events: none;
}

.hero-src {
	position: absolute;
	top: 112px;
	right: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 14px 0 6px;
	border: 1px solid var(--glass-line);
	border-radius: 11px;
	background: color-mix(in srgb, var(--ground) 38%, transparent);
	-webkit-backdrop-filter: var(--glass-blur-sm);
	backdrop-filter: var(--glass-blur-sm);
	color: var(--ink);
	font: 500 13px/1 var(--f-b);
	cursor: pointer;
	pointer-events: auto;
	transition: border-color .3s var(--e-ui);
}

.hero-src .pill {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 9px;
	border-radius: 8px;
	background: var(--accent);
	color: var(--well);
	font: 700 12px/1 var(--f-m);
}

.hero-src:hover,
.hero-src[aria-pressed="true"] { border-color: var(--accent); }

.commit {
	position: absolute;
	right: 0;
	bottom: 128px;
	width: 330px;
	padding: 18px 20px;
	border: 1px solid var(--glass-line);
	border-radius: 14px;
	background: var(--ticks), color-mix(in srgb, var(--plate) 62%, transparent);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	backdrop-filter: blur(22px) saturate(150%);
	font: 500 12px/1.5 var(--f-m);
	pointer-events: auto;
}

.commit p { margin: 0; }

.commit-l1 {
	display: flex;
	align-items: center;
	gap: 10px;
}

.commit-l1 b {
	color: var(--accent);
	font-weight: 500;
}

.commit-repo {
	margin-left: auto;
	color: var(--muted);
}

.commit-hash {
	margin: 10px 0 12px !important;
	color: var(--ink);
	font-size: 13.5px;
	line-height: 1.45;
	word-break: break-all;
}

.commit-hash code { font: inherit; }

.commit-l3 {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--hair);
}

.commit-verify {
	flex: none;
	height: 28px;
	padding: 0 10px;
	border: 0;
	border-radius: 7px;
	background: var(--accent);
	color: var(--well);
	font: 600 12px/1 var(--f-m);
	cursor: pointer;
	transition: background-color .3s var(--e-ui);
}

.commit-verify:hover { background: var(--ink); }
.commit-verify:disabled { opacity: .5; }

.commit-msg {
	color: var(--muted);
	font-size: 11.5px;
	line-height: 1.4;
}

.commit-msg.ok { color: var(--accent); }

.hero-hint {
	position: absolute;
	left: 14%;
	bottom: 64px;
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	transition: opacity .4s var(--e-ui);
}

.hero-hint.gone { opacity: 0; }

/* the hash, the toggle and the hint all need the script */
html:not(.js) .hero-hud { display: none; }

.hero-wrap {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	min-height: max(720px, 100svh);
	max-width: var(--maxw);
	margin: 0 auto;
	padding: var(--bar) var(--gut) 0;
	pointer-events: none;
}

.hero-copy {
	width: 64%;
	max-width: 900px;
	margin-top: auto;
	padding: 40px 0 60px;
	pointer-events: auto;
}

.hero-eb { margin-bottom: 26px; }

.hero-title {
	margin: 0;
	font-family: var(--f-d);
	font-weight: var(--wt-d);
	font-size: clamp(44px, 5.4vw, 88px);
	line-height: var(--ld-d);
	letter-spacing: var(--tr-d);
	text-wrap: balance;
	color: var(--ink);
}

.hero-title .w {
	padding: .06em .02em .14em;
	margin: -.06em -.02em -.14em;
}

/* italic overhangs (f, y) need room inside each word's mask */
.hero-title em .w {
	padding-inline: .14em;
	margin-inline: -.14em;
}

/* once the words are up, light runs across the gradient once */
.js .sh-hero.is-in .hero-title strong {
	animation: msr-sheen 2.2s cubic-bezier(.65, 0, .35, 1) 1.1s backwards;
}

@keyframes msr-sheen {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}

.hero-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	max-width: 780px;
	margin-top: 36px;
}

.hero-sub {
	max-width: 400px;
	margin: 0;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.6;
}

.hero-keys {
	flex: none;
	flex-wrap: nowrap;
}

.hero-stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	gap: 0 56px;
	max-width: 780px;
	margin: 52px 0 0;
	padding-top: 22px;
}

.hero-stats::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--hair);
	transform-origin: left;
}

.hero-stats > div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 8px;
}

.hero-stats dd {
	margin: 0;
	font: var(--wt-d) clamp(30px, 2.7vw, 42px)/1 var(--f-d);
	letter-spacing: -.04em;
}

.hero-stats dt {
	color: var(--muted);
	font: 500 12px/1.3 var(--f-m);
}

/* odometer digits */
.odo-roll {
	display: inline-flex;
	vertical-align: top;
}

.odo-d {
	display: inline-block;
	height: 1em;
	overflow: hidden;
	line-height: 1;
}

.odo-c {
	display: flex;
	flex-direction: column;
	transition: transform .55s cubic-bezier(.3, .9, .3, 1);
	transition-delay: calc(var(--di, 0) * 80ms + 650ms);
}

.odo-c > span {
	height: 1em;
	text-align: center;
}

.in .odo-c,
.sh-hero.is-in .odo-c { transform: translateY(calc(var(--to, 0) * -1em)); }

/* entrance: words rise, then the row and the stats */
.js .sh-hero .hero-title .w > span {
	transform: translateY(108%);
	opacity: 0;
	transition: transform 1s var(--e-out), opacity .6s var(--e-ui);
	transition-delay: calc(var(--wi, 0) * 45ms + 120ms);
}

.js .sh-hero .hero-eb,
.js .sh-hero .hero-row,
.js .sh-hero .hero-stats,
.js .sh-hero .hero-hud > * {
	opacity: 0;
	translate: 0 18px;
	transition: opacity .7s var(--e-ui), translate .9s var(--e-ui);
}

.js .sh-hero .hero-row { transition-delay: .5s; }
.js .sh-hero .hero-stats { transition-delay: .62s; }
.js .sh-hero .hero-hud > * { transition-delay: .8s; }

.js .sh-hero .hero-stats::before {
	transform: scaleX(0);
	transition: transform .9s var(--e-ui) .7s;
}

.js .sh-hero.is-in .hero-title .w > span {
	opacity: 1;
	transform: none;
}

.js .sh-hero.is-in .hero-eb,
.js .sh-hero.is-in .hero-row,
.js .sh-hero.is-in .hero-stats,
.js .sh-hero.is-in .hero-hud > * {
	opacity: 1;
	translate: none;
}

.js .sh-hero.is-in .hero-stats::before { transform: none; }

.js .sh-hero.is-in .hero-hint.gone { opacity: 0; }

/* the hash, the toggle and the hint all need the script */
html:not(.js) .hero-hud { display: none; }

@media (max-width: 1099px) {
	.hero-pic,
	.hero-hud { left: 44%; }
	.hero-copy { width: 74%; }
	.commit {
		top: 168px;
		bottom: auto;
		width: 270px;
	}
	.hero-hint { display: none; }
	.hero-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}

@media (max-width: 809px) {
	.sh-hero { min-height: 0; }
	.hero-pic {
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		right: auto;
		height: min(118vw, 560px);
	}
	.hero-pic::after {
		background:
			linear-gradient(to top, var(--ground) 0, color-mix(in srgb, var(--ground) 60%, transparent) 18%, transparent 44%),
			linear-gradient(to bottom, color-mix(in srgb, var(--ground) 70%, transparent) 0, transparent 22%);
	}
	.hero-hud {
		left: 0;
		bottom: auto;
		height: min(118vw, 560px);
	}
	.hero-src { top: calc(var(--bar) + 12px); }
	.commit { display: none; }
	.hero-wrap {
		min-height: 0;
		margin-top: -96px;
		padding-top: 0;
	}
	.hero-copy {
		width: 100%;
		padding: 0 0 52px;
	}
	.hero-eb { margin-bottom: 18px; font-size: 12px; }
	.hero-title {
		font-size: min(10.4vw, 52px);
		line-height: 1;
	}
	.hero-keys { flex-wrap: wrap; }
	.hero-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 16px;
		margin-top: 40px;
	}
}

/* ---------------------------------------------------------------- capabilities marquee */

.sh-marks {
	position: relative;
	padding-block: 44px;
}

.mk-top {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 40px;
}

.mk-eb { white-space: nowrap; }

.mk-view {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.mk-track {
	display: flex;
	width: max-content;
	animation: msr-marquee 60s linear infinite;
}

.mk-view:hover .mk-track { animation-play-state: paused; }

.mk-track ul {
	display: flex;
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-track li {
	display: flex;
	align-items: center;
	color: var(--muted);
	font: 500 27px/1.2 var(--f-d);
	letter-spacing: -.02em;
	white-space: nowrap;
	transition: color .3s var(--e-ui);
}

.mk-track li:hover { color: var(--ink); }

.mk-track li::after {
	content: "/";
	margin: 0 26px;
	color: var(--accent);
	opacity: .85;
	font: 500 15px/1 var(--f-m);
}

@keyframes msr-marquee {
	to { transform: translateX(-50%); }
}

.mk-facts {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 40px;
	margin: 30px 0 0;
	padding-top: 22px;
	font: 500 12.5px/1.4 var(--f-m);
}

.mk-facts::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--hair);
	transform-origin: left;
}

.js .mk-facts::before {
	transform: scaleX(0);
	transition: transform .9s var(--e-ui);
}

.js .mk-facts.in::before { transform: none; }

.mk-facts div {
	display: flex;
	gap: 8px;
}

.mk-facts dt { color: var(--muted); }
.mk-facts dd { margin: 0; color: var(--ink); }

@media (max-width: 809px) {
	.sh-marks { padding-block: 34px; }
	.mk-top {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.mk-track li { font-size: 22px; }
	.mk-track li::after { margin: 0 18px; font-size: 13px; }
	.mk-facts { flex-direction: column; }
}

/* ---------------------------------------------------------------- engagements: the deck */

.tag-legend {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font: 500 12px/1.4 var(--f-m);
}

.tag-legend li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tag-legend .chip { flex: none; }

.deck {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

.deck-i { position: relative; }

.deck.is-stacked .deck-i {
	position: sticky;
	top: calc(88px + var(--i, 0) * 14px);
	z-index: calc(1 + var(--i, 0));
}

.admin-bar .deck.is-stacked .deck-i { top: calc(88px + var(--wp-admin--admin-bar--height, 32px) + var(--i, 0) * 14px); }

.dk {
	position: relative;
	display: grid;
	grid-template-columns: .82fr 1fr;
	gap: 10px;
	padding: 10px;
	transform-origin: 50% 0;
	transform: scale(calc(1 - var(--k, 0) * .04));
}

/* the plates stack as glass: each one frosts the plate it slides over, so it carries a denser fill */
.dk.plate { background: var(--glass-hi); }

.dk::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
	background: var(--well);
	opacity: min(.62, calc(var(--k, 0) * .3));
	pointer-events: none;
}

.dk-body {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 26px 30px 26px 28px;
	opacity: calc(1 - min(1, var(--k, 0)) * .5);
}

.dk-meta {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	color: var(--ink);
	font: 500 12.5px/1.4 var(--f-m);
}

.dk-meta b {
	color: var(--accent);
	font-weight: 500;
}

.dk-main {
	display: grid;
	gap: 16px;
	margin-top: auto;
}

.dk-name {
	margin: 0;
	font-family: var(--f-d);
	font-weight: var(--wt-h);
	font-size: clamp(34px, 3.5vw, 54px);
	line-height: 1;
	letter-spacing: var(--tr-h);
	text-wrap: balance;
}

.dk-name .g { color: var(--accent); }

.dk-line {
	max-width: 30em;
	margin: 0;
	color: var(--muted);
	font-size: 17px;
	line-height: 1.5;
}

.dk-foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding-top: 24px;
	border-top: 1px solid var(--hair);
}

.dk-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, auto));
	gap: 10px 32px;
	margin: 0;
}

.dk-facts div {
	display: grid;
	gap: 6px;
}

.dk-facts dt {
	color: var(--muted);
	font: 500 12px/1.3 var(--f-m);
}

.dk-facts dd {
	margin: 0;
	color: var(--ink);
	font-size: 15px;
	line-height: 1.4;
}

.dk-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dk-media {
	position: relative;
	min-height: 260px;
	margin: 0;
	overflow: hidden;
	border-radius: 9px;
	background-color: var(--well);
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
	background-size: 24px 24px;
}

.dk-media svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: transform .9s var(--e-ui);
}

.dk:hover .dk-media svg { transform: scale(1.03); }

.dk-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
}

.dk-cap {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 10px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: var(--ink);
	font: 500 12px/1.3 var(--f-m);
}

.dk-cap .tc { color: var(--muted); }

/* plate drawings */
.p-bar { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.p-ring { fill: none; stroke: var(--accent); stroke-width: 2; }
.p-acc { fill: var(--accent); }
.p-acc-s { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.p-soft { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
.p-line { fill: none; stroke: color-mix(in srgb, var(--ink) 18%, transparent); stroke-width: 1.5; }
.p-screen { fill: var(--plate); stroke: var(--hair2); stroke-width: 1.5; }
.p-dash { fill: none; stroke: color-mix(in srgb, var(--accent-2) 70%, var(--ink)); stroke-width: 2; stroke-dasharray: 6 8; }
.p-txt { fill: var(--muted); font: 500 11px var(--f-m); }

.flow { animation: msr-flow 1.2s linear infinite; }

@keyframes msr-flow {
	to { stroke-dashoffset: -14; }
}

.js .rv .dr,
.js .dk .dr {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.1s var(--e-ui);
	transition-delay: calc(var(--k, 0) * 90ms + 150ms);
}

.js .pop,
.js .grow {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform .55s var(--e-spring);
	transition-delay: calc(var(--k, 0) * 90ms + 150ms);
}

.js .pop { transform: scale(0); }

.js .grow {
	transform-origin: left center;
	transform: scaleX(0);
	transition-timing-function: var(--e-ui);
}

.js .in .dr { stroke-dashoffset: 0; }
.js .in .pop,
.js .in .grow { transform: none; }

@media (max-width: 1099px) {
	.sh-top { grid-template-columns: 1fr; }
	.sh-top > :last-child:not(:first-child) { justify-self: start; }
	.dk { grid-template-columns: 1fr; }
	.dk-media {
		order: -1;
		aspect-ratio: 16 / 8;
	}
}

@media (max-width: 809px) {
	.dk { padding: 8px; }
	.dk-body {
		gap: 22px;
		padding: 18px 14px 14px;
	}
	.dk-name { font-size: clamp(28px, 8.6vw, 34px); }
	.dk-media { aspect-ratio: 4 / 3; min-height: 0; }
	.dk-foot {
		flex-direction: column;
		align-items: flex-start;
	}
	.dk-facts { grid-template-columns: 1fr; }
	.dk-chips { justify-content: flex-start; }
}

/* ---------------------------------------------------------------- about: the statement */

.ab-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 320px);
	align-items: end;
	gap: clamp(48px, 7vw, 120px);
}

.ab-copy {
	display: grid;
	gap: 30px;
	justify-items: start;
}

.ab-statement {
	max-width: 21em;
	margin: 0;
	color: var(--ink);
	font-family: var(--f-d);
	font-weight: 500;
	font-size: clamp(32px, 3.5vw, 54px);
	line-height: 1.1;
	letter-spacing: var(--tr-t);
	text-wrap: pretty;
}

/* italic words carry the MSR gradient; while the statement scrubs, a dim word covers it until lit */
.ab-statement em {
	font-style: normal;
	background-image: linear-gradient(90deg, var(--accent), var(--accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	caret-color: var(--ink);
}

.js .ab-statement.is-scrub .sw {
	color: color-mix(in srgb, var(--ink) 44%, var(--ground));
	transition: color .45s var(--e-ui);
}

.js .ab-statement.is-scrub .sw.lit { color: var(--ink); }
.js .ab-statement.is-scrub em .sw.lit { color: transparent; }

@media (forced-colors: active) {
	.ab-statement em,
	.js .ab-statement.is-scrub em .sw.lit { background: none; color: CanvasText; }
}

.ab-fig { margin: 0; }

.ab-fig .pic {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 14px;
	background: var(--well);
}

.ab-fig .pic::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--hair);
	pointer-events: none;
}

.ab-fig img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.92) contrast(1.04);
}

.ab-fig figcaption {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	color: var(--muted);
	font: 500 12px/1.4 var(--f-m);
}

.ab-fig figcaption i {
	width: 14px;
	height: 1px;
	background: var(--accent);
}

/* "um": the picture unmasks upward while it settles from a slight zoom */
.js .um .pic {
	clip-path: inset(100% 0 0 0 round 14px);
	transition: clip-path .9s cubic-bezier(.7, 0, .2, 1);
}

.js .um img {
	transform: scale(1.04) translateY(var(--py, 0%));
	transition: transform 1.2s var(--e-ui);
}

.js .um.in .pic { clip-path: inset(0 0 0 0 round 14px); }
.js .um.in img { transform: scale(1) translateY(var(--py, 0%)); }

/* the subject record reads as an instrument panel: glass, corner ticks, and the list's last
   rule tucked under the panel's edge */
.ab-now {
	margin-top: clamp(56px, 6vw, 96px);
	padding: 22px 28px 0;
	overflow: hidden;
	border-radius: 16px;
	background: var(--ticks), var(--glass);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	box-shadow: inset 0 0 0 1px var(--glass-line);
}

.ab-now .ab-list { margin-bottom: -1px; }

.ab-now-hd {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	padding-bottom: 16px;
	font: 500 12.5px/1.4 var(--f-m);
}

.ab-now-hd p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.ab-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 32px;
	margin: 0;
	border-top: 1px solid var(--hair);
}

.ab-list > div {
	display: grid;
	align-content: start;
	gap: 8px;
	padding: 20px 0 22px;
	border-bottom: 1px solid var(--hair);
}

.ab-list dt {
	color: var(--muted);
	font: 500 12px/1.3 var(--f-m);
}

.ab-list dd {
	margin: 0;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.45;
}

@media (max-width: 1099px) {
	.ab-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 809px) {
	.ab-top { grid-template-columns: 1fr; }
	.ab-fig { max-width: 320px; }
	.ab-list { grid-template-columns: 1fr; }
	.ab-list > div {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 12px;
		padding: 16px 0;
	}
}

/* ---------------------------------------------------------------- the accent band */

.sh-band {
	--ink-on: var(--well);
	--mut-on: color-mix(in srgb, var(--well) 80%, var(--accent));
	--hair-on: color-mix(in srgb, var(--well) 18%, transparent);
	--hair2-on: color-mix(in srgb, var(--well) 36%, transparent);
	background: var(--accent);
	color: var(--well);
}

.sh-band ::selection { background: var(--well); color: var(--accent); }

.sh-band :focus-visible { outline-color: var(--well); }

.sh-band .sh-eb,
.sh-band .sh-hd { color: var(--well); }

.sh-band .sh-eb::before { color: var(--well); }

.sh-band .sh-hd strong,
.sh-band .sh-hd strong .w > span {
	background: none;
	color: var(--well);
}

/* the italic words sit on a navy pill and keep the MSR gradient: two layers, one clipped to the text */
.sh-band .sh-hd em {
	white-space: nowrap;
	padding: 0 .12em;
	border-radius: .1em;
	background-image: linear-gradient(90deg, var(--accent), var(--accent-2)), linear-gradient(var(--well), var(--well));
	background-size: 100% 100%;
	background-origin: content-box, padding-box;
	-webkit-background-clip: text, padding-box;
	background-clip: text, padding-box;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* split into rising words on the front end, the words carry the gradient and the pill keeps its fill */
.sh-band .sh-hd em:has(.w) {
	background-image: linear-gradient(var(--well), var(--well));
	background-origin: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

@media (forced-colors: active) {
	.sh-band .sh-hd em,
	.sh-band .sh-hd em:has(.w) { background: none; color: CanvasText; }
}

.sh-band .sh-lead { color: var(--mut-on); }

.sh-band .sh-more,
.sh-band .sh-more svg { color: var(--well); }

.sh-band .sh-more .n { color: var(--mut-on); }
.sh-band .sh-more .t::after { background: var(--well); }

.lb-side {
	display: grid;
	justify-items: end;
	gap: 14px;
}

.lb-note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: 500 12.5px/1.4 var(--f-m);
}

.sh-band .dot { background: var(--well); }
.sh-band .dot::after { border-color: var(--well); }

.rings {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair2-on);
}

.rg {
	padding: 22px 28px 34px;
	border-left: 1px solid var(--hair2-on);
}

.rg:first-child {
	padding-left: 0;
	border-left: 0;
}

.rg-l {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 22px;
	font: 600 17px/1.3 var(--f-b);
	letter-spacing: -.01em;
}

.rg-l .ix {
	color: var(--mut-on);
	font: 500 12px/1 var(--f-m);
}

.ring {
	position: relative;
	width: 100%;
	max-width: 236px;
	aspect-ratio: 1;
	container-type: inline-size;
}

.ring svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.rg-ticks {
	fill: none;
	stroke: var(--hair2-on);
	stroke-width: 5;
	stroke-dasharray: .4 2.4;
}

.rg-track {
	fill: none;
	stroke: var(--hair-on);
	stroke-width: 11;
}

.rg-arc {
	fill: none;
	stroke: var(--well);
	stroke-width: 11;
	stroke-dasharray: 100 100;
	stroke-dashoffset: calc(100 - var(--p, 100));
}

.js .rg-arc {
	stroke-dashoffset: 100;
	transition: stroke-dashoffset .9s var(--e-ui) .15s;
}

.js .rg.in .rg-arc { stroke-dashoffset: calc(100 - var(--p, 100)); }

.rg-val {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 4px;
	margin: 0;
	text-align: center;
}

.rg-val b {
	font: var(--wt-d) 34cqw/.9 var(--f-d);
	letter-spacing: -.05em;
}

.rg-val span {
	max-width: 70cqw;
	color: var(--mut-on);
	font: 500 max(10px, 5.4cqw)/1.25 var(--f-m);
}

.vitals {
	margin-top: 28px;
	padding: 26px 32px 32px;
	border-radius: 14px;
	background: var(--ticks), color-mix(in srgb, var(--ground) 86%, transparent);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	color: var(--ink);
}

.vt-hd {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--hair);
	font: 500 13px/1.4 var(--f-m);
}

.vt-hd p { margin: 0; }

.vt-track {
	position: relative;
	height: 12px;
	margin-bottom: 26px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--ink) 10%, transparent);
}

.vt-track i {
	position: absolute;
	inset: 0;
	border-radius: 3px;
	background: var(--accent);
	transform-origin: left;
}

.js .vt-track i {
	transform: scaleX(0);
	transition: transform 1.2s var(--e-ui) .2s;
}

.js .vitals.in .vt-track i { transform: none; }

.vt-track span {
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: calc(var(--at) / 16 * 100%);
	width: 2px;
	margin-left: -1px;
	background: var(--accent-2);
}

.vt-track span:first-of-type { margin-left: 0; }
.vt-track span:last-of-type { margin-left: -2px; }

.vt-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.vt-list li {
	padding: 0 28px;
	border-left: 1px solid var(--hair);
}

.vt-list li:first-child {
	padding-left: 0;
	border-left: 0;
}

.vt-v {
	margin: 0 0 12px;
	font: var(--wt-d) clamp(34px, 3.2vw, 50px)/1 var(--f-d);
	letter-spacing: -.04em;
}

.vt-t {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.45;
}

@media (max-width: 1099px) {
	.lb-side { justify-items: start; }
	.rings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rg:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}
	.rg:nth-child(n + 3) { border-top: 1px solid var(--hair2-on); }
	.vt-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 24px;
	}
	.vt-list li:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 809px) {
	.rings { grid-template-columns: 1fr 1fr; }
	.rg { padding: 18px 14px 24px; }
	.vitals { padding: 22px 18px 24px; }
	.vt-list { grid-template-columns: 1fr; }
	.vt-list li {
		padding: 0;
		border-left: 0;
	}
}

/* ---------------------------------------------------------------- platforms: the keyboard */

.st-side {
	display: grid;
	justify-items: end;
	gap: 12px;
}

.st-count {
	margin: 0;
	color: var(--muted);
	font: 500 12.5px/1.4 var(--f-m);
}

.kb {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 384px;
	align-items: start;
	gap: 20px;
	margin-top: 64px;
}

.kb-board { padding: 12px 28px; }

.kb-row {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	align-items: center;
	gap: 20px;
	padding: 20px 0;
}

.kb-row + .kb-row { border-top: 1px solid var(--hair); }

.kb-g {
	display: grid;
	gap: 4px;
	margin: 0;
	font: 500 12.5px/1.3 var(--f-m);
}

.kb-g b {
	color: var(--ink);
	font-weight: 500;
}

.kb-g span { color: var(--muted); }

.kb-keys {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-left: calc(var(--r, 0) * 16px);
}

.key {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 82px;
	min-width: 86px;
	padding: 11px 20px 17px 15px;
	border: 0;
	border-radius: 12px;
	background: var(--glass-tint);
	box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 -5px 0 color-mix(in srgb, var(--ink) 9%, transparent);
	color: var(--ink);
	font-family: var(--f-b);
	text-align: left;
	cursor: pointer;
	transition: transform .15s var(--e-ui), background-color .2s var(--e-ui), box-shadow .2s var(--e-ui), color .2s var(--e-ui);
}

.key-lg {
	color: var(--muted);
	font: 500 12px/1 var(--f-m);
	transition: color .2s var(--e-ui);
}

.key-nm {
	font: 600 16px/1.1 var(--f-b);
	letter-spacing: -.01em;
	white-space: nowrap;
}

.key:hover { box-shadow: inset 0 0 0 1px var(--ink), inset 0 -5px 0 color-mix(in srgb, var(--ink) 9%, transparent); }

.key[aria-pressed="true"] {
	background: var(--accent);
	color: var(--well);
	transform: translateY(2px);
	box-shadow: inset 0 0 0 1px var(--accent), inset 0 -2px 0 color-mix(in srgb, var(--well) 30%, transparent);
}

.key[aria-pressed="true"] .key-lg { color: color-mix(in srgb, var(--well) 82%, transparent); }

.key:active { transform: translateY(3px); }

.kb-read {
	position: sticky;
	top: 100px;
	display: grid;
	gap: 22px;
	padding: 26px 28px 28px;
}

.kr-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--hair);
	color: var(--muted);
	font: 500 12.5px/1.3 var(--f-m);
}

.kr-top p { margin: 0; }
.kr-top b { color: var(--ink); font-weight: 500; }

.kr-swap {
	display: grid;
	gap: 10px;
}

.kr-mk {
	margin: 0;
	color: var(--accent);
	font: var(--wt-d) 84px/.9 var(--f-d);
	letter-spacing: -.05em;
}

.kr-name {
	margin: 0;
	font: var(--wt-h) clamp(30px, 2.6vw, 40px)/1 var(--f-d);
	letter-spacing: var(--tr-h);
}

.kr-rows { margin: 0; }

.kr-rows div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--hair);
	font-size: 14px;
}

.kr-rows div:last-child { border-bottom: 1px solid var(--hair); }

.kr-rows dt {
	color: var(--muted);
	font: 500 12.5px/1.5 var(--f-m);
}

.kr-rows dd {
	margin: 0;
	color: var(--ink);
	text-align: right;
}

.kr-desc {
	margin: 0;
	color: var(--ink);
	font-size: 18px;
	line-height: 1.55;
}

.js .kb-read .swap { animation: msr-swap .45s var(--e-ui); }

@keyframes msr-swap {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 1099px) {
	.st-side { justify-items: start; }
	.kb { grid-template-columns: 1fr; }
	.kb-read {
		position: static;
		order: -1;
	}
	.key { height: 72px; }
}

@media (max-width: 809px) {
	.kb-board { padding: 8px 16px; }
	.kb-row {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.kb-keys { padding-left: 0; gap: 8px; }
	.key {
		height: 62px;
		min-width: 62px;
		padding: 9px 14px 13px 12px;
	}
	.key-nm { font-size: 14px; }
	.kr-mk { font-size: 64px; }
}

/* ---------------------------------------------------------------- practice: services accordion */

.svc {
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--hair);
}

.svc-row { border-top: 1px solid var(--hair); }

.svc-h {
	margin: 0;
	font: inherit;
}

.svc-btn,
.svc-cols {
	display: grid;
	grid-template-columns: 76px minmax(0, 5fr) minmax(0, 6fr) 200px 44px;
	gap: 24px;
}

.svc-btn {
	align-items: center;
	width: 100%;
	padding: 30px 0;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.svc-n {
	color: var(--muted);
	font: 500 13px/1 var(--f-m);
	transition: color .3s var(--e-ui);
}

.svc-name {
	font: var(--wt-h) clamp(28px, 2.7vw, 40px)/1.05 var(--f-d);
	letter-spacing: var(--tr-h);
	transition: transform .45s var(--e-ui);
}

.svc-line {
	max-width: 34em;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.5;
}

.svc-meta {
	color: var(--ink);
	font: 500 13px/1.3 var(--f-m);
	text-align: right;
}

.svc-seat {
	position: relative;
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 9px;
	box-shadow: inset 0 0 0 1px var(--hair2);
	color: var(--ink);
	transition: background-color .35s var(--e-ui), color .35s var(--e-ui), box-shadow .35s var(--e-ui), transform .45s var(--e-ui);
}

.svc-seat i {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	border-radius: 2px;
	background: currentColor;
}

.svc-seat i + i { transform: rotate(90deg); }

.svc-btn:hover .svc-n,
.svc-row.is-open .svc-n { color: var(--accent); }

.svc-btn:hover .svc-name { transform: translateX(6px); }

.svc-row.is-open .svc-seat {
	background: var(--accent);
	color: var(--well);
	box-shadow: none;
}

.svc-seat i { transition: transform .45s var(--e-ui); }
.svc-row.is-open .svc-seat i { transform: rotate(45deg); }
.svc-row.is-open .svc-seat i + i { transform: rotate(135deg); }

.svc-panel {
	display: grid;
	grid-template-rows: 1fr;
}

.js .svc-panel {
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows .55s var(--e-ui), visibility 0s linear .55s;
}

.js .svc-row.is-open .svc-panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows .55s var(--e-ui), visibility 0s;
}

.svc-inner {
	min-height: 0;
	overflow: hidden;
}

.svc-cols { padding: 6px 0 44px; }

.js .svc-cols {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .35s var(--e-ui), transform .5s var(--e-ui);
}

.js .svc-row.is-open .svc-cols {
	opacity: 1;
	transform: none;
	transition-delay: .12s;
}

.svc-body {
	grid-column: 2;
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 22px;
}

.svc-body p {
	max-width: 33em;
	margin: 0;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.6;
}

.svc-body .svc-fine {
	color: var(--muted);
	font-size: 14px;
}

.svc-inc { grid-column: 3; }

.svc-inc .lbl { margin-bottom: 14px; }

.svc-inc ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.svc-inc li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 10px;
	font-size: 15px;
	line-height: 1.45;
}

.svc-inc code {
	margin-right: 8px;
	color: var(--muted);
	font: 500 12px/1 var(--f-m);
}

.ck {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 5px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
	color: var(--accent);
}

.ck svg { width: 12px; height: 12px; }

.svc-spec {
	grid-column: 4 / span 2;
	align-self: start;
	margin: 0;
	padding: 6px 20px;
}

.svc-spec div {
	display: grid;
	gap: 4px;
	padding: 16px 0;
}

.svc-spec div + div { border-top: 1px solid var(--hair); }

.svc-spec dt {
	color: var(--muted);
	font: 500 12px/1.3 var(--f-m);
}

.svc-spec dd {
	margin: 0;
	color: var(--ink);
	font: 500 14px/1.4 var(--f-m);
}

@media (max-width: 1099px) {
	.svc-btn { grid-template-columns: 44px minmax(0, 1fr) auto 44px; }
	.svc-line { display: none; }
	.svc-cols { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); }
	.svc-body { grid-column: 2 / span 2; }
	.svc-inc { grid-column: 2; }
	.svc-spec { grid-column: 3; }
}

@media (max-width: 809px) {
	.svc-btn {
		grid-template-columns: 28px minmax(0, 1fr) 40px;
		gap: 14px;
		padding: 22px 0;
	}
	.svc-name { font-size: 25px; }
	.svc-meta { display: none; }
	.svc-seat { width: 40px; height: 40px; }
	.svc-cols {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: 0 0 32px;
	}
	.svc-body,
	.svc-inc,
	.svc-spec { grid-column: 1; }
}

/* each open row leads with its case file: a numbered tab, then a wide photo, or until one is
   added (assets/images/file-<ls|df|it>.webp) a drawn plate with the discipline's letters */
.svc-file {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 21 / 7;
	min-height: 190px;
	margin: 0 0 30px;
	overflow: hidden;
	border-radius: 14px;
	background:
		linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 28px 28px,
		radial-gradient(120% 120% at 70% 20%, var(--wp--preset--color--mid-navy, #16283f), var(--well));
	box-shadow: inset 0 0 0 1px var(--glass-line);
}

.svc-file img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.svc-mono {
	color: transparent;
	font: var(--wt-d) clamp(96px, 15vw, 230px)/.8 var(--f-d);
	letter-spacing: -.04em;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 55%, transparent);
	user-select: none;
}

.svc-tab {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	padding: 6px 10px;
	border-radius: 7px;
	background: var(--accent);
	color: var(--well);
	font: 500 11.5px/1 var(--f-m);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.svc-tab b { font-weight: 700; }

.svc-file figcaption {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 1;
}

@media (max-width: 809px) {
	.svc-file {
		aspect-ratio: 16 / 9;
		min-height: 0;
		margin-bottom: 22px;
	}
	.svc-file figcaption { right: 14px; }
	.svc-file .chip { white-space: normal; height: auto; padding-block: 6px; line-height: 1.3; }
}

@media (forced-colors: active) {
	.svc-mono { color: CanvasText; -webkit-text-stroke: 0; }
}

/* focus areas: portrait cards that float above the rows. Without script they are a row that scrolls
   sideways; site.js stacks them into a turning arc where the front card is sharp and the rest recede. */
.fa {
	margin-top: clamp(40px, 4.4vw, 64px);
	--fw: 250px;
	--fh: 334px;
}

.fa-stage {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
}

.fa-card {
	position: relative;
	flex: none;
	width: var(--fw);
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	scroll-snap-align: start;
}

.fa-float {
	display: block;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px var(--glass-line);
}

.fa-pic {
	position: relative;
	display: grid;
	place-items: center;
	height: calc(var(--fh) - 92px);
	overflow: hidden;
	background:
		linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 22px 22px,
		linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 22px 22px,
		radial-gradient(120% 90% at 50% 20%, var(--wp--preset--color--mid-navy, #16283f), var(--well));
}

.fa-pic img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fa-mark {
	width: 46%;
	height: auto;
	color: var(--accent);
	opacity: .85;
}

.fa-cap {
	display: grid;
	gap: 8px;
	align-content: start;
	height: 92px;
	padding: 14px 16px;
	border-top: 1px solid var(--glass-line);
	background: var(--glass-hi);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
}

.fa-t {
	font: 700 17px/1.2 var(--f-d);
	letter-spacing: var(--tr-t);
}

.fa-c {
	color: var(--muted);
	font: 500 11.5px/1 var(--f-m);
	letter-spacing: .02em;
}

.fa-card:focus-visible { outline: none; }
.fa-card:focus-visible .fa-float { outline: 2px solid var(--accent); outline-offset: 3px; }

.fa-bar {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 22px;
	color: var(--muted);
	font: 500 12px/1.4 var(--f-m);
}

.fa-bar p { margin: 0; }
.fa-now .n { color: var(--ink); }
.fa-hint { flex: 1; }
.fa-hint,
.fa-now { display: none; }

/* with script: the orbit. site.js turns the cards on a tilted ring and sets the stage height
   to fit it; the near side is full size and lit, the far side small and faint. */
.fa-ring { display: none; }

.js .fa-stage {
	position: relative;
	display: block;
	height: calc(var(--fh) + 240px);
	overflow: hidden;
	padding: 0;
	touch-action: pan-y;
}

.js .fa-ring {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.fa-ring ellipse {
	fill: none;
	stroke: url(#msrFaGrad);
	stroke-width: 1;
	opacity: .55;
}

.fa-ring .s1 { stop-color: var(--accent); }
.fa-ring .s2 { stop-color: var(--accent-2); }

.js .fa-card {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform, opacity;
}

.js .fa-float { position: relative; }

.js .fa-float::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--ground);
	opacity: var(--dim, 0);
	pointer-events: none;
}

.js .fa-float { animation: fa-float 6s ease-in-out calc(var(--fi, 0) * -1.1s) infinite alternate; }

.js .fa-card.is-front .fa-float { box-shadow: inset 0 0 0 1px var(--accent); }
.js .fa-card.is-front .fa-c { color: var(--accent); }

@keyframes fa-float {
	from { translate: 0 -6px; }
	to { translate: 0 6px; }
}

.js .fa-hint,
.js .fa-now { display: block; }

@media (max-width: 809px) {
	.fa { --fw: 196px; --fh: 270px; }
	.fa-t { font-size: 15px; }
	.fa-cap { padding: 12px 13px; }
	.js .fa { --fw: 168px; --fh: 238px; }
	.js .fa-t { font-size: 14px; }
}

@media (forced-colors: active) {
	.fa-ring ellipse { stroke: CanvasText; }
	.js .fa-card.is-front .fa-float { outline: 2px solid Highlight; }
}

/* ---------------------------------------------------------------- ask: questions before trial */

.tq-stage {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	aspect-ratio: 1392 / 752;
	min-height: 560px;
	margin-top: clamp(40px, 4.4vw, 64px);
	padding: clamp(20px, 2.6vw, 40px);
	overflow: hidden;
	border-radius: 20px;
	background: var(--well);
}

/* a navy scrim seats the card on the photo; a hairline sits over everything */
.tq-stage::before,
.tq-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.tq-stage::before {
	z-index: 1;
	background:
		linear-gradient(90deg, transparent 38%, color-mix(in srgb, var(--well) 58%, transparent) 100%),
		linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--well) 62%, transparent) 100%);
}

.tq-stage::after {
	z-index: 3;
	box-shadow: inset 0 0 0 1px var(--hair);
}

.tq-pic {
	position: absolute;
	inset: 0;
}

.tq-pic .pic {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.tq-pic img {
	position: absolute;
	top: -5%;
	left: 0;
	width: 100%;
	max-width: none;
	height: 110%;
	object-fit: cover;
	object-position: 40% 35%;
}

.tq-card {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 16px;
	width: min(440px, 100%);
	margin: 0;
	padding: 20px;
	border-radius: 18px;
	background: var(--ticks), color-mix(in srgb, var(--plate) 60%, transparent);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	backdrop-filter: blur(24px) saturate(160%);
	box-shadow: inset 0 0 0 1px var(--glass-line);
}

.tq-top {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tq-av {
	position: relative;
	flex: none;
	width: 40px;
	height: 40px;
}

.tq-av img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.tq-av .dot {
	position: absolute;
	right: 0;
	bottom: 1px;
	outline: 2px solid var(--plate);
}

.tq-who {
	display: grid;
	flex: 1;
	gap: 2px;
	min-width: 0;
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.3;
}

.tq-who b {
	color: var(--ink);
	font: 700 15.5px/1.25 var(--f-b);
}

.tq-pause {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--glass-tint);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	color: var(--muted);
	cursor: pointer;
	transition: box-shadow .25s var(--e-ui), color .25s var(--e-ui);
}

.tq-pause[hidden] { display: none; }
.tq-pause svg { width: 12px; height: 12px; }
.tq-pause .i-play,
.tq-pause[aria-pressed="true"] .i-pause { display: none; }
.tq-pause[aria-pressed="true"] .i-play { display: block; }

.tq-pause:hover {
	box-shadow: inset 0 0 0 1px var(--ink);
	color: var(--ink);
}

.tq-pause:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* the question: a real textarea, with the typed line drawn over it until someone writes */
.tq-box {
	display: grid;
	padding: 14px 16px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--well) 64%, transparent);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	color: var(--ink);
	font: 400 17px/1.5 var(--f-b);
	cursor: text;
	transition: box-shadow .25s var(--e-ui);
}

.tq-box:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }

.tq-input,
.tq-ghost,
.tq-sizer {
	grid-area: 1 / 1;
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.tq-input {
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	resize: none;
}

.tq-input:focus { outline: none; }

.tq-ghost,
.tq-sizer { pointer-events: none; }

.tq-sizer { visibility: hidden; }

.tq-ghost { display: none; }
.js .tq-ghost { display: block; }

.js .tq-card:not(.is-editing) .tq-input {
	overflow: hidden;
	color: transparent;
	caret-color: transparent;
}

.js .tq-card.is-editing .tq-ghost { visibility: hidden; }

.tq-caret {
	display: inline-block;
	width: 2px;
	height: 1.12em;
	margin-left: 2px;
	border-radius: 1px;
	background: var(--accent);
	vertical-align: -.2em;
	animation: tq-blink 1s steps(1) infinite;
}

.tq-card.is-busy .tq-ghost .tq-caret { animation: none; }

@keyframes tq-blink {
	0%,
	45% { opacity: 1; }
	55%,
	100% { opacity: 0; }
}

.tq-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tq-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 11px;
	border: 0;
	border-radius: 100px;
	background: var(--glass-tint);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	color: var(--ink);
	font: 400 13.5px/1 var(--f-b);
	cursor: pointer;
	transition: background-color .25s var(--e-ui), box-shadow .25s var(--e-ui), color .25s var(--e-ui);
}

.tq-chip svg {
	flex: none;
	width: 13px;
	height: 13px;
	color: var(--muted);
	transition: color .25s var(--e-ui);
}

.tq-chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }

.tq-chip[aria-pressed="true"] {
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	box-shadow: inset 0 0 0 1px var(--accent);
	color: var(--accent);
}

.tq-chip[aria-pressed="true"] svg { color: var(--accent); }

.tq-chip:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.tq-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.tq-note {
	display: flex;
	flex: 1 1 150px;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.35;
	text-wrap: balance;
}

.tq-note svg {
	flex: none;
	width: 13px;
	height: 13px;
}

.btn.tq-send {
	flex: none;
	height: 44px;
	gap: 12px;
	padding: 0 6px 0 18px;
}

.btn.tq-send::before {
	width: 30px;
	height: 30px;
	border-radius: 8px;
}

.btn.tq-send::after {
	top: 6px;
	right: 6px;
	width: 30px;
	height: 30px;
	-webkit-mask-position: 7px 7px, -23px 7px;
	mask-position: 7px 7px, -23px 7px;
}

.btn.tq-send:hover::after {
	-webkit-mask-position: 37px 7px, 7px 7px;
	mask-position: 37px 7px, 7px 7px;
}

/* the card settles in after the photo unmasks; the topics follow one by one */
.js .tq-card {
	opacity: 0;
	translate: 0 28px;
	transition: opacity .8s var(--e-ui) .5s, translate 1.1s var(--e-out) .5s;
}

.js .tq-stage.in .tq-card {
	opacity: 1;
	translate: none;
}

.js .tq-chip {
	opacity: 0;
	translate: 0 8px;
	transition-property: opacity, translate, background-color, box-shadow, color;
	transition-duration: .6s, .7s, .25s, .25s, .25s;
	transition-timing-function: var(--e-ui), var(--e-out), var(--e-ui), var(--e-ui), var(--e-ui);
	transition-delay: calc(.95s + var(--ci, 0) * 70ms), calc(.95s + var(--ci, 0) * 70ms), 0s, 0s, 0s;
}

.js .tq-stage.in .tq-chip {
	opacity: 1;
	translate: none;
}

@media (max-width: 1099px) {
	.tq-stage { aspect-ratio: 16 / 11; }
	.tq-card { width: min(410px, 100%); }
}

@media (max-width: 809px) {
	.tq-stage {
		display: block;
		aspect-ratio: auto;
		min-height: 0;
		padding: 0 10px 10px;
		border-radius: 18px;
	}

	.tq-stage::before { display: none; }

	.tq-pic {
		position: relative;
		inset: auto;
		aspect-ratio: 4 / 5;
		margin: 0 -10px;
	}

	.tq-pic::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent 42%, var(--well) 97%);
	}

	.tq-pic img { object-position: 36% 30%; }

	.tq-card {
		width: 100%;
		margin-top: -36%;
		padding: 16px;
	}

	.tq-foot {
		flex-direction: column;
		align-items: stretch;
	}

	.tq-note { flex: none; }
	.btn.tq-send { justify-content: space-between; }
}

@media (forced-colors: active) {
	.tq-chip[aria-pressed="true"] { outline: 2px solid Highlight; }
	.tq-caret { background: CanvasText; }
}

/* ---------------------------------------------------------------- record: the career log */

.lg-top {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	align-items: end;
	gap: 32px 56px;
}

.lg-side {
	display: grid;
	gap: 22px;
}

.lg-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.graph {
	--col: 176px;
	position: relative;
	margin: 72px 0 0;
	padding: 0;
	list-style: none;
}

.graph::before,
.graph::after {
	content: "";
	position: absolute;
	top: 22px;
	bottom: 22px;
	left: calc(var(--col) + 19px);
	width: 2px;
	border-radius: 2px;
	background: var(--hair2);
}

.graph::after {
	background: var(--accent);
	transform-origin: top;
	transform: scaleY(var(--lg, 1));
}

.js .graph::after { transform: scaleY(var(--lg, 0)); }

.gr {
	position: relative;
	display: grid;
	grid-template-columns: var(--col) 40px minmax(0, 1fr) auto;
	grid-template-areas: "when node what chips";
	padding: 22px 0 34px;
}

.gr-when {
	grid-area: when;
	display: grid;
	align-content: start;
	gap: 6px;
	margin: 0;
	color: var(--ink);
	font: 500 13px/1.4 var(--f-m);
}

.gr-when i {
	color: var(--muted);
	font-style: normal;
}

.gr-when code {
	color: var(--muted);
	font: 500 12px/1 var(--f-m);
}

.gr-node {
	grid-area: node;
	position: relative;
	z-index: 1;
	width: 14px;
	height: 14px;
	margin: 3px 0 0 13px;
	border-radius: 50%;
	background: var(--ground);
	box-shadow: inset 0 0 0 2px var(--muted);
	transition: background-color .45s var(--e-ui), box-shadow .45s var(--e-ui), transform .45s var(--e-spring), outline-color .45s var(--e-ui);
	outline: 5px solid transparent;
}

.gr.is-lit .gr-node,
html:not(.js) .gr-node {
	background: var(--accent);
	box-shadow: inset 0 0 0 2px var(--accent);
	outline-color: color-mix(in srgb, var(--accent) 16%, transparent);
	transform: scale(1.12);
}

.gr-what {
	grid-area: what;
	display: grid;
	align-content: start;
	gap: 10px;
	max-width: 760px;
	padding: 0 40px 0 16px;
}

.gr-refs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0;
	color: var(--ink);
	font: 500 12.5px/1.4 var(--f-m);
}

.gr-refs .head {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent);
}

.gr-refs .head::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

.gr-refs .init { color: var(--muted); }

.gr-role {
	margin: 0;
	font: var(--wt-h) 28px/1.08 var(--f-d);
	letter-spacing: var(--tr-t);
}

.gr-text {
	max-width: 38em;
	margin: 0;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.6;
}

.gr-chips {
	grid-area: chips;
	display: flex;
	flex-wrap: wrap;
	align-content: start;
	justify-content: flex-end;
	gap: 6px;
	max-width: 300px;
	margin: 0;
	padding: 26px 0 0;
	list-style: none;
}

@media (max-width: 1099px) {
	.lg-top { grid-template-columns: 1fr; }
	.gr {
		grid-template-columns: var(--col) 40px minmax(0, 1fr);
		grid-template-areas: "when node what" ". . chips";
	}
	.gr-chips {
		justify-content: flex-start;
		max-width: none;
		padding: 14px 0 0 16px;
	}
}

@media (max-width: 809px) {
	.graph::before,
	.graph::after { left: 6px; }
	.gr {
		grid-template-columns: 30px minmax(0, 1fr);
		grid-template-areas: "node when" ". what" ". chips";
		row-gap: 10px;
		padding: 18px 0 26px;
	}
	.gr-node { margin: 3px 0 0; }
	.gr-what { padding: 0; }
	.gr-role { font-size: 23px; }
	.gr-chips { padding: 4px 0 0; }
}

/* ---------------------------------------------------------------- credentials: the rail */

.lab-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.lab-arrows {
	display: flex;
	flex: none;
	gap: 10px;
}

.lab-arrows button {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	padding: 0;
	border: 1px solid var(--glass-line);
	border-radius: 14px;
	background: var(--glass-tint);
	-webkit-backdrop-filter: var(--glass-blur-sm);
	backdrop-filter: var(--glass-blur-sm);
	color: var(--ink);
	cursor: pointer;
	transition: background-color .3s var(--e-ui), border-color .3s var(--e-ui), color .3s var(--e-ui), opacity .3s var(--e-ui);
}

.lab-arrows svg { width: 18px; height: 18px; }

.lab-arrows button:hover {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--well);
}

.lab-arrows button:disabled {
	opacity: .38;
	pointer-events: none;
}

.lab-rail {
	--in: max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)));
	margin-top: 44px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
}

.lab-rail::-webkit-scrollbar { display: none; }

.lab-rail.is-drag {
	cursor: grabbing;
	user-select: none;
}

.lab-rail:focus-visible { outline-offset: -2px; }

.lab-list {
	display: flex;
	gap: 20px;
	width: max-content;
	margin: 0;
	padding: 12px var(--in);
	list-style: none;
}

.lab-card {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	width: min(400px, calc(100vw - 44px));
	padding: 8px;
	transition: transform .45s var(--e-ui), box-shadow .45s var(--e-ui);
}

.lab-card:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.lab-pic {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 9px;
	background-color: var(--well);
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
	background-size: 24px 24px;
}

.lab-badge {
	color: var(--ink);
	font: var(--wt-d) clamp(44px, 4.4vw, 64px)/.92 var(--f-d);
	letter-spacing: var(--tr-d);
	text-align: center;
	opacity: .62;
	transition: opacity .45s var(--e-ui), color .45s var(--e-ui);
}

.lab-card:hover .lab-badge,
.lab-card:focus-within .lab-badge {
	opacity: 1;
	color: var(--accent);
}

.lab-kind {
	position: absolute;
	top: 18px;
	left: 18px;
}

.lab-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 20px 14px 12px;
}

.lab-body h3 {
	margin: 0;
	font: var(--wt-h) 26px/1.05 var(--f-d);
	letter-spacing: var(--tr-t);
}

.lab-body p {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
}

.lab-body .lab-stats {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--hair);
	font: 500 12.5px/1.3 var(--f-m);
}

.lab-stats b {
	color: var(--ink);
	font-weight: 500;
}

.lab-stats .dot::after { display: none; }

.lab-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 28px;
}

.lab-pos {
	position: relative;
	width: 100%;
	max-width: 320px;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--hair2);
}

.lab-pos i {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--w, 30%);
	background: var(--accent);
	transform: translateX(var(--x, 0px));
}

@media (pointer: coarse) {
	.lab-rail { scroll-snap-type: x mandatory; scroll-padding-inline: var(--in); }
	.lab-card { scroll-snap-align: start; }
}

@media (max-width: 809px) {
	.lab-head { align-items: flex-start; flex-direction: column; gap: 24px; }
	.lab-card { width: 320px; }
	.lab-arrows button { width: 48px; height: 48px; }
}

/* ---------------------------------------------------------------- terms: the code file */

.cf {
	margin-top: 64px;
	overflow: hidden;
}

.cf-tabs {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	min-height: 52px;
	background: color-mix(in srgb, var(--well) 58%, transparent);
	border-bottom: 1px solid var(--glass-line);
	color: var(--muted);
	font: 500 12.5px/1.3 var(--f-m);
}

.cf-tab {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0 22px;
	border-right: 1px solid var(--glass-line);
	background: var(--glass-tint);
	box-shadow: inset 0 2px 0 var(--accent);
	color: var(--ink);
}

.cf-tab .sq {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}

.cf-sum {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0 22px;
	color: var(--ink);
}

.cf-sum svg {
	width: 14px;
	height: 14px;
	color: var(--accent);
}

.cf-sheet {
	--lh: 32px;
	--gw: 68px;
	position: relative;
	padding-left: var(--gw);
}

.cf-gutter {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--gw);
	margin: 0;
	padding: var(--lh) 14px 0 0;
	overflow: hidden;
	border-right: 1px solid var(--hair);
	color: var(--muted);
	font: 500 12px/var(--lh) var(--f-m);
	text-align: right;
	white-space: pre;
}

.cf-list {
	margin: 0;
	padding: var(--lh) 0;
	list-style: none;
}

.cf-item {
	position: relative;
	display: grid;
	grid-template-columns: 336px minmax(0, 1fr) auto;
	align-items: start;
	gap: 36px;
	padding: 0 32px 0 28px;
	transition: background-color .35s var(--e-ui);
}

.cf-item + .cf-item { margin-top: var(--lh); }

.cf-item + .cf-item::before {
	content: "";
	position: absolute;
	top: calc(var(--lh) / -2);
	left: 0;
	right: 0;
	height: 1px;
	background: var(--hair);
}

.cf-item::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
	width: 2px;
	background: var(--accent);
	transform: scaleY(0);
	transition: transform .35s var(--e-ui);
}

.cf-item:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cf-item:hover::after { transform: none; }

.cf-who {
	position: relative;
	display: grid;
	padding-left: 56px;
}

.cf-av {
	position: absolute;
	top: 12px;
	left: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--well);
	box-shadow: inset 0 0 0 1px var(--hair2);
	color: var(--accent);
	font: 600 13px/1 var(--f-m);
}

.cf-who b {
	font: 600 16px/var(--lh) var(--f-b);
}

.cf-who span:not(.cf-av) {
	color: var(--muted);
	font: 500 12.5px/var(--lh) var(--f-m);
}

.cf-q {
	max-width: 40em;
	margin: 0;
	color: var(--ink);
	font-size: 21px;
	line-height: var(--lh);
	letter-spacing: -.012em;
}

.cf-ok {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	margin-top: 4px;
	padding: 0 8px;
	border-radius: 7px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
	color: var(--accent);
	font: 500 12px/1 var(--f-m);
	white-space: nowrap;
}

.cf-ok svg { width: 12px; height: 12px; }

@media (max-width: 1099px) {
	.cf-sheet { --gw: 56px; }
	.cf-item {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 0;
	}
	.cf-q {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

@media (max-width: 809px) {
	.cf-sheet { --lh: 28px; --gw: 38px; }
	.cf-gutter { padding-right: 8px; font-size: 11px; }
	.cf-item {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 0 16px 0 16px;
	}
	.cf-q { grid-row: auto; font-size: 18px; }
	.cf-ok { justify-self: start; margin-top: 2px; }
	.cf-tabs { flex-direction: column; }
	.cf-tab { min-height: 48px; border-right: 0; }
	.cf-sum { min-height: 40px; }
}

/* ---------------------------------------------------------------- journal */

.wr-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 56px;
	margin-top: 64px;
}

.wr-big,
.wr-big .wp-block-post-template,
.wr-big .wp-block-post { height: 100%; }

.wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 8px;
	transition: transform .45s var(--e-ui), box-shadow .45s var(--e-ui);
}

.wr-card:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.wr-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: 9px;
	background: var(--well);
}

.wr-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.92) contrast(1.04);
}

.wr-flag {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 1;
}

.wr-card:not(:has(.wp-block-post-featured-image)) .wr-flag {
	position: static;
	align-self: flex-start;
	margin: 18px 0 0 18px;
}

.wr-cbody {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: 22px 18px 18px;
}

.wr-meta,
.pg-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	color: var(--muted);
	font: 500 12.5px/1.3 var(--f-m);
}

.wr-meta .wp-block-post-terms a,
.pg-meta .wp-block-post-terms a {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 9px;
	border-radius: 7px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
	color: var(--accent);
	font: 500 12px/1 var(--f-m);
	text-decoration: none;
}

.wp-block-post-terms__separator { display: none; }

.wr-card .wp-block-post-title {
	margin: 0;
	font: var(--wt-h) clamp(28px, 2.5vw, 38px)/1.04 var(--f-d);
	letter-spacing: var(--tr-h);
	text-wrap: balance;
}

.wr-card .wp-block-post-title a,
.wr-list .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wr-card .wp-block-post-title a::after,
.wr-list .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.wr-card .wp-block-post-excerpt,
.wr-card .wp-block-post-excerpt p {
	margin: 0;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.55;
}

.wp-block-post-excerpt__more-text { display: none; }

.wr-read {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: auto 0 0;
	color: var(--ink);
	font: 500 13px/1 var(--f-m);
}

.wr-read::after {
	content: "";
	width: 14px;
	height: 14px;
	background: var(--accent);
	-webkit-mask: var(--arrow) center / contain no-repeat;
	mask: var(--arrow) center / contain no-repeat;
	transition: transform .35s var(--e-ui);
}

.wr-card:hover .wr-read::after { transform: translateX(3px); }

.wr-side {
	display: flex;
	flex-direction: column;
}

.wr-cap {
	margin: 0 0 14px;
	color: var(--ink);
	font: 500 12.5px/1.4 var(--f-m);
}

.wr-cap::before {
	content: "// ";
	color: var(--accent);
}

.wr-list {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.wr-list .wp-block-post-template {
	display: grid;
	flex: 1;
	grid-auto-rows: minmax(84px, 1fr);
	border-bottom: 1px solid var(--hair);
}

.wr-list .wp-block-post {
	position: relative;
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto 20px;
	align-items: center;
	gap: 20px;
	padding: 16px 4px;
	border-top: 1px solid var(--hair);
	transition: padding .35s var(--e-ui), background-color .35s var(--e-ui);
}

.wr-list .wp-block-post::after {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--muted);
	-webkit-mask: var(--arrow) center / contain no-repeat;
	mask: var(--arrow) center / contain no-repeat;
	transition: background-color .35s var(--e-ui), transform .35s var(--e-ui);
}

.wr-list .wp-block-post:hover {
	padding-left: 14px;
	background: color-mix(in srgb, var(--plate) 70%, transparent);
}

.wr-list .wp-block-post:hover::after {
	background: var(--accent);
	transform: translateX(2px);
}

.wr-list .wp-block-post-date,
.wr-list .wp-block-post-time-to-read {
	color: var(--muted);
	font: 500 12.5px/1.3 var(--f-m);
}

.wr-list .wp-block-post-title {
	margin: 0;
	font: var(--wt-h) clamp(20px, 1.7vw, 25px)/1.12 var(--f-d);
	letter-spacing: var(--tr-t);
}

.wr-none {
	margin: 0;
	padding: 22px 0;
	border-top: 1px solid var(--hair);
	color: var(--muted);
}

@media (max-width: 1099px) {
	.wr-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 809px) {
	.wr-list .wp-block-post {
		grid-template-columns: minmax(0, 1fr) 20px;
		gap: 6px 14px;
	}
	.wr-list .wp-block-post-date { grid-column: 1; }
	.wr-list .wp-block-post-title { grid-column: 1; }
	.wr-list .wp-block-post-time-to-read { display: none; }
	.wr-list .wp-block-post::after { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------------------------------------------------------------- FAQ */

.faq-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: 72px;
}

.faq-side {
	position: sticky;
	top: 112px;
	display: grid;
	align-content: start;
	gap: 40px;
}

.ask {
	display: grid;
	justify-items: start;
	gap: 12px;
	max-width: 400px;
	padding: 24px;
}

.ask-t {
	margin: 0;
	font: var(--wt-h) 24px/1.1 var(--f-d);
	letter-spacing: var(--tr-t);
}

.ask-l {
	margin: 0 0 6px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.5;
}

.faq-list {
	border-bottom: 1px solid var(--hair);
	counter-reset: faq;
}

.faq-list .wp-block-details {
	margin: 0;
	border-top: 1px solid var(--hair);
	counter-increment: faq;
}

.faq-list summary {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 40px;
	align-items: center;
	gap: 16px;
	padding: 22px 4px;
	font: var(--wt-h) clamp(20px, 1.75vw, 26px)/1.14 var(--f-d);
	letter-spacing: var(--tr-t);
	list-style: none;
	cursor: pointer;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::before {
	content: counter(faq, decimal-leading-zero);
	color: var(--muted);
	font: 500 12.5px/1 var(--f-m);
	letter-spacing: 0;
	transition: color .3s var(--e-ui);
}

.faq-list summary::after {
	content: "";
	grid-column: 3;
	width: 40px;
	height: 40px;
	border-radius: 9px;
	box-shadow: inset 0 0 0 1px var(--hair2);
	background:
		linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat,
		linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat;
	transition: background-color .35s var(--e-ui), background-size .35s var(--e-ui), box-shadow .35s var(--e-ui);
}

.faq-list summary .q {
	display: block;
	transition: transform .45s var(--e-ui);
}

.faq-list summary:hover .q { transform: translateX(6px); }

.faq-list .wp-block-details[open] summary::before,
.faq-list summary:hover::before { color: var(--accent); }

.faq-list .wp-block-details[open] summary::after {
	background:
		linear-gradient(var(--well), var(--well)) center / 14px 2px no-repeat,
		linear-gradient(var(--well), var(--well)) center / 2px 0 no-repeat,
		var(--accent);
	box-shadow: none;
}

.js .faq-list .wp-block-details:not(.is-open) summary::after {
	background:
		linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat,
		linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat;
	box-shadow: inset 0 0 0 1px var(--hair2);
}

.faq-list .wp-block-details > p,
.faq-a-in > p {
	max-width: 44em;
	margin: 0;
	padding: 0 60px 26px 54px;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.6;
}

.faq-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .5s var(--e-ui);
}

.faq-a-in {
	min-height: 0;
	overflow: hidden;
}

.faq-a-in > * {
	opacity: 0;
	transition: opacity .35s var(--e-ui);
}

.is-open > .faq-a { grid-template-rows: 1fr; }

.is-open > .faq-a .faq-a-in > * {
	opacity: 1;
	transition-delay: .12s;
}

@media (max-width: 1099px) {
	.faq-grid { grid-template-columns: 1fr; gap: 48px; }
	.faq-side { position: static; }
}

@media (max-width: 809px) {
	.faq-list summary {
		grid-template-columns: 28px minmax(0, 1fr) 40px;
		gap: 12px;
		padding: 18px 0;
	}
	.faq-list .wp-block-details > p,
	.faq-a-in > p { padding: 0 0 22px 40px; }
}

/* ---------------------------------------------------------------- start a matter: the brief */

.sh-cta { overflow: hidden; }

.cta-grid {
	-webkit-mask-image: radial-gradient(90% 80% at 80% 30%, #000 0%, transparent 70%);
	mask-image: radial-gradient(90% 80% at 80% 30%, #000 0%, transparent 70%);
}

.sh-cta > .sh-in { position: relative; z-index: 1; }

.cta-head { max-width: 1040px; }

.brief {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 520px;
	align-items: start;
	gap: 72px;
	margin-top: 64px;
}

.brief-steps {
	display: grid;
	gap: 40px;
}

.step {
	display: grid;
	gap: 16px;
	padding-top: 22px;
	border-top: 1px solid var(--hair);
}

.step fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.step legend,
.step-l {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	color: var(--ink);
	font: 500 17px/1.3 var(--f-b);
}

.step-l { margin: 0; }

.step .n {
	color: var(--accent);
	font: 500 13px/1 var(--f-m);
}

.picks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pick {
	position: relative;
	display: inline-flex;
}

.pick input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.pick span {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px var(--hair2);
	color: var(--ink);
	font: 500 12.5px/1 var(--f-m);
	transition: background-color .25s var(--e-ui), box-shadow .25s var(--e-ui), color .25s var(--e-ui);
}

.pick:hover span { box-shadow: inset 0 0 0 1px var(--ink); }

.pick input:checked + span {
	background: var(--accent);
	color: var(--well);
	box-shadow: none;
}

.pick input:focus-visible + span {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.brief-in {
	width: 100%;
	height: 54px;
	padding: 0 18px;
	border: 0;
	border-radius: 14px;
	background: var(--glass-tint);
	-webkit-backdrop-filter: var(--glass-blur-sm);
	backdrop-filter: var(--glass-blur-sm);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	color: var(--ink);
	font: 400 16px/1 var(--f-b);
	transition: box-shadow .25s var(--e-ui);
}

.brief-in::placeholder { color: var(--muted); }
.brief-in:hover { box-shadow: inset 0 0 0 1px var(--ink); }

.brief-in:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--accent);
}

.brief-out {
	position: sticky;
	top: 110px;
	padding: 8px;
}

.bo-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px 14px;
	color: var(--muted);
	font: 500 12.5px/1 var(--f-m);
}

.bo-code {
	margin: 0;
	padding: 20px 20px 22px;
	overflow-x: auto;
	border-radius: 9px;
	background: var(--well);
	box-shadow: inset 0 0 0 1px var(--hair);
	color: var(--ink);
	font: 400 13.5px/1.7 var(--f-m);
	white-space: pre;
}

.bo-code code { font: inherit; }

.c-k { color: color-mix(in srgb, var(--accent-2) 45%, var(--ink)); }
.c-c { color: var(--muted); }

.bo-code .v {
	border-radius: 4px;
	color: var(--accent);
	font-weight: 500;
}

.bo-code .v.flash { animation: msr-flash .7s var(--e-ui); }

@keyframes msr-flash {
	from {
		background: color-mix(in srgb, var(--accent-2) 55%, transparent);
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 55%, transparent);
	}
	to {
		background: transparent;
		box-shadow: 0 0 0 2px transparent;
	}
}

.bo-code .caret {
	width: .55em;
	height: 1.1em;
	margin-left: 2px;
	vertical-align: -.2em;
}

.bo-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	padding: 20px 12px 6px;
}

.bo-acts p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

.bo-acts a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 5px;
}

.bo-note {
	margin: 0;
	padding: 12px 12px 6px;
	color: var(--muted);
	font-size: 13.5px;
	line-height: 1.5;
}

@media (max-width: 1099px) {
	.brief { grid-template-columns: 1fr; gap: 48px; }
	.brief-out { position: static; }
}

@media (max-width: 809px) {
	.bo-code { font-size: 12px; padding: 16px 14px; }
}

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

.site-ft {
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding: clamp(72px, 7vw, 112px) 0 28px;
	border-top: 1px solid var(--hair);
	background: var(--well);
}

.site-ft.is-curtain {
	position: sticky;
	bottom: 0;
}

.ft-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 72px;
}

.ft-id {
	display: grid;
	align-content: start;
	gap: 22px;
}

.ft-line {
	max-width: 14em;
	margin: 0;
	font: var(--wt-h) clamp(28px, 2.7vw, 40px)/1.06 var(--f-d);
	letter-spacing: var(--tr-h);
}

.ft-write {
	display: grid;
	gap: 8px;
}

.ft-lbl {
	margin: 0;
	color: var(--muted);
	font: 500 12.5px/1.3 var(--f-m);
}

.ft-mail {
	justify-self: start;
	color: var(--ink);
	font: 500 19px/1.3 var(--f-b);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	transition: text-decoration-thickness .3s var(--e-ui);
}

.ft-mail:hover { text-decoration-thickness: 3px; }

.ft-cols {
	display: grid;
	grid-auto-columns: minmax(132px, auto);
	grid-auto-flow: column;
	gap: 64px;
}

.ft-h {
	margin: 0;
	padding-bottom: 6px;
	color: var(--ink);
	font: 500 12.5px/1.3 var(--f-m);
}

.ft-h::before {
	content: "// ";
	color: var(--accent);
}

.ft-cols ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-cols a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	background: linear-gradient(var(--accent), var(--accent)) 0 calc(100% - 8px) / 0 1px no-repeat;
	color: var(--ink);
	font-size: 16px;
	text-decoration: none;
	transition: background-size .35s var(--e-ui);
}

.ft-cols a:hover { background-size: 100% 1px; }

.ft-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: clamp(56px, 6vw, 96px);
	padding-top: 20px;
	border-top: 1px solid var(--hair);
	font: 500 12.5px/1.4 var(--f-m);
}

.ft-meta p { margin: 0; }

.ft-time {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ft-time time { color: var(--ink); }

.ft-legal { color: var(--muted); }

.ft-wm-box {
	margin-top: clamp(20px, 2.4vw, 40px);
	container-type: inline-size;
}

.ft-wm {
	width: max-content;
	margin: 0;
	color: var(--ink);
	font-family: var(--f-d);
	font-weight: var(--wt-d);
	font-size: calc(100cqw / (16 * .58));
	line-height: .86;
	letter-spacing: var(--tr-d);
	white-space: nowrap;
	padding-bottom: .12em;
}

.ft-wm .c {
	position: relative;
	display: inline-block;
}

.ft-wm .c > b {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--accent);
	font: 500 .62em/1 var(--f-m);
	letter-spacing: 0;
	opacity: 0;
}

.js .ft-wm.is-compiling .c > i { opacity: 0; transition: opacity .3s var(--e-ui); }
.js .ft-wm.is-compiling .c > b { opacity: 1; }
.js .ft-wm .c.on > i { opacity: 1; }
.js .ft-wm .c.on > b { opacity: 0; transition: opacity .3s var(--e-ui); }

.ft-wm .c > i { font-style: normal; }

@media (max-width: 1099px) {
	.ft-top { grid-template-columns: 1fr; gap: 48px; }
	.ft-cols { justify-content: start; }
}

@media (max-width: 809px) {
	.ft-cols {
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: row;
		gap: 28px 24px;
	}
	/* room for the back-to-top button, so it never sits on the wordmark */
	.site-ft { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------- inner pages */

.pg-top { padding: clamp(156px, 13vw, 208px) 0 clamp(36px, 4vw, 60px); }

.pg-copy {
	display: grid;
	gap: 22px;
	max-width: 940px;
}

.pg-path {
	margin: 0;
	color: var(--muted);
	font: 500 12.5px/1.4 var(--f-m);
	word-spacing: .25em;
}

.pg-path a {
	color: var(--muted);
	text-decoration: none;
	transition: color .3s var(--e-ui);
}

.pg-path a:hover { color: var(--accent); }
.pg-path .here { color: var(--ink); }

.pg-title { --hs: clamp(44px, 5vw, 76px); }

.pg-lead,
.pg-lead p {
	max-width: 36em;
	margin: 0;
	color: var(--muted);
	font-size: clamp(17px, 1.3vw, 19px);
	line-height: 1.6;
}

.pg-body { padding: 0 0 clamp(72px, 7vw, 112px); }

.pg-figure {
	margin: 0 0 clamp(40px, 5vw, 72px);
	padding: 8px;
	border-radius: 14px;
	background: var(--plate);
	box-shadow: inset 0 0 0 1px var(--hair);
}

.pg-figure img {
	display: block;
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
	border-radius: 9px;
}

.pg-prose { max-width: 720px; }

.sh-md {
	color: color-mix(in srgb, var(--ink) 86%, transparent);
	font-size: 17px;
	line-height: 1.65;
}

.sh-md > * { margin: 0 0 1.15em; }
.sh-md > :last-child { margin-bottom: 0; }

.sh-md h2,
.sh-md h3,
.sh-md h4 {
	margin: 1.7em 0 .55em;
	color: var(--ink);
	font-family: var(--f-d);
	font-weight: var(--wt-h);
	letter-spacing: var(--tr-t);
}

.sh-md h2 { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.08; }
.sh-md h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; }

.sh-md a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
	text-underline-offset: 3px;
	transition: text-decoration-color .3s var(--e-ui);
}

.sh-md a:hover { text-decoration-color: var(--accent); }

.sh-md ul,
.sh-md ol { padding-left: 1.3em; }

.sh-md li + li { margin-top: .4em; }
.sh-md ul li::marker { color: var(--accent); }

.sh-md ol li::marker {
	color: var(--accent);
	font-family: var(--f-m);
	font-size: .86em;
}

.sh-md blockquote {
	margin-left: 0;
	margin-right: 0;
	padding-left: 18px;
	border-left: 2px solid var(--accent);
	color: var(--ink);
	font-size: 1.12em;
}

.sh-md blockquote p { margin: 0; }

.sh-md blockquote cite {
	display: block;
	margin-top: 10px;
	color: var(--muted);
	font: 500 12.5px/1.4 var(--f-m);
	font-style: normal;
}

.sh-md code {
	padding: .1em .35em;
	border-radius: 5px;
	background: color-mix(in srgb, var(--ink) 9%, transparent);
	font-family: var(--f-m);
	font-size: .86em;
}

.sh-md pre {
	padding: 16px 18px 18px;
	overflow-x: auto;
	border-radius: 12px;
	background: var(--well);
	box-shadow: inset 0 0 0 1px var(--hair);
	font: 400 13px/1.65 var(--f-m);
}

.sh-md pre code {
	padding: 0;
	background: none;
	font-size: inherit;
}

.sh-md img { border-radius: 9px; }

.sh-md figcaption,
.sh-md .wp-element-caption {
	margin-top: 10px;
	color: var(--muted);
	font: 500 12px/1.4 var(--f-m);
}

.sh-md hr {
	margin: 2.4em 0;
	border: 0;
	border-top: 1px solid var(--hair);
}

.sh-md table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.sh-md th,
.sh-md td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--hair);
	text-align: left;
}

.sh-md th {
	color: var(--muted);
	font: 500 12.5px/1.4 var(--f-m);
}

.pg-next {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 1040px;
	margin-top: clamp(56px, 6vw, 96px);
}

.pg-next .wp-block-post-navigation-link {
	position: relative;
	min-height: 120px;
	padding: clamp(20px, 2.4vw, 32px);
	border-radius: 14px;
	background: var(--glass);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	transition: transform .45s var(--e-ui), box-shadow .45s var(--e-ui);
}

.pg-next .wp-block-post-navigation-link:empty { display: none; }

.pg-next .wp-block-post-navigation-link:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.pg-next .wp-block-post-navigation-link a {
	display: block;
	color: var(--ink);
	font: var(--wt-h) clamp(22px, 2vw, 30px)/1.1 var(--f-d);
	letter-spacing: var(--tr-t);
	text-decoration: none;
}

.pg-next .wp-block-post-navigation-link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.post-navigation-link__label {
	display: block;
	margin-bottom: 12px;
	color: var(--accent);
	font: 500 12.5px/1 var(--f-m);
	letter-spacing: 0;
}

.post-navigation-link-next { grid-column: 2; text-align: right; }

/* post lists: date | title | line | arrow */
.pg-rows {
	border-bottom: 1px solid var(--hair);
}

.pg-rows .wp-block-post {
	position: relative;
	display: grid;
	grid-template-columns: minmax(120px, 2fr) minmax(0, 4fr) minmax(0, 5fr) 40px;
	align-items: center;
	gap: 8px 28px;
	min-height: 76px;
	padding: 22px 0;
	border-top: 1px solid var(--hair);
}

.pg-rows .wp-block-post-date {
	color: var(--muted);
	font: 500 12.5px/1.3 var(--f-m);
}

.pg-rows .wp-block-post-title {
	margin: 0;
	font: var(--wt-h) clamp(20px, 1.8vw, 26px)/1.12 var(--f-d);
	letter-spacing: var(--tr-t);
}

.pg-rows .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color .3s var(--e-ui);
}

.pg-rows .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pg-rows .wp-block-post:hover .wp-block-post-title a { color: var(--accent); }

.pg-rows .wp-block-post-excerpt,
.pg-rows .wp-block-post-excerpt p {
	margin: 0;
	color: var(--muted);
	font-size: 15.5px;
	line-height: 1.5;
}

.pg-rows .wp-block-post::after {
	content: "";
	justify-self: end;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	box-shadow: inset 0 0 0 1px var(--hair2);
	transition: background-color .35s var(--e-ui), box-shadow .35s var(--e-ui), transform .35s var(--e-ui);
}

.pg-rows .wp-block-post::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	z-index: 1;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: var(--accent);
	-webkit-mask: var(--arrow) center / contain no-repeat;
	mask: var(--arrow) center / contain no-repeat;
	pointer-events: none;
	transition: background-color .35s var(--e-ui), transform .35s var(--e-ui);
}

.pg-rows .wp-block-post:hover::after {
	background: var(--accent);
	box-shadow: none;
	transform: translateX(4px);
}

.pg-rows .wp-block-post:hover::before {
	background: var(--well);
	transform: translateX(4px);
}

.pg-pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: 32px;
	font: 500 13px/1 var(--f-m);
}

.pg-pages a,
.pg-pages .current {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px var(--hair2);
	color: var(--ink);
	text-decoration: none;
}

.pg-pages .current {
	background: var(--accent);
	color: var(--well);
	box-shadow: none;
}

.pg-none {
	margin: 0;
	padding: 28px 0;
	border-top: 1px solid var(--hair);
	color: var(--muted);
}

.pg-search { max-width: 640px; }

.pg-search .wp-block-search__inside-wrapper {
	display: flex;
	gap: 8px;
}

.pg-search .wp-block-search__input {
	flex: 1;
	height: 54px;
	padding: 0 18px;
	border: 0;
	border-radius: 14px;
	background: var(--glass-tint);
	-webkit-backdrop-filter: var(--glass-blur-sm);
	backdrop-filter: var(--glass-blur-sm);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	color: var(--ink);
	font: 400 16px/1 var(--f-b);
}

.pg-search .wp-block-search__input:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--accent);
}

.pg-search .wp-block-search__button {
	height: 54px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 14px;
	background: var(--accent);
	color: var(--well);
	font: 600 14px/1 var(--f-b);
	cursor: pointer;
}

/* 404 */
.nf {
	display: grid;
	align-items: center;
	min-height: min(92svh, 880px);
	padding: calc(var(--bar) + 56px) 0 72px;
}

.nf-in {
	display: grid;
	justify-items: start;
	gap: 22px;
}

.nf-acts { margin-top: 8px; }

.nf-code {
	width: min(640px, 100%);
	margin: 18px 0 0;
	padding: 18px 20px;
	overflow-x: auto;
	border-radius: 12px;
	background: var(--well);
	box-shadow: inset 0 0 0 1px var(--hair);
	color: var(--ink);
	font: 400 13px/1.7 var(--f-m);
}

.nf-code code { font: inherit; }
.nf-code .v { color: var(--accent); }
.nf-mark { color: var(--accent); }

.nf-places {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	width: min(640px, 100%);
	margin-top: 16px;
	padding-top: 18px;
	border-top: 1px solid var(--hair);
}

.nf-places a {
	display: inline-flex;
	gap: 8px;
	color: var(--ink);
	font: 500 13px/1.6 var(--f-b);
	text-decoration: none;
}

.nf-places .n {
	color: var(--muted);
	font: 500 11px/1.9 var(--f-m);
}

.nf-places a:hover .n { color: var(--accent); }

@media (max-width: 1099px) {
	.pg-rows .wp-block-post { grid-template-columns: minmax(0, 1fr) 40px; }
	.pg-rows .wp-block-post-date,
	.pg-rows .wp-block-post-title,
	.pg-rows .wp-block-post-excerpt { grid-column: 1; }
	.pg-rows .wp-block-post::after { grid-column: 2; grid-row: 1 / span 3; }
}

@media (max-width: 809px) {
	.pg-top { padding-top: 112px; }
	.pg-next { grid-template-columns: 1fr; }
	.post-navigation-link-next { grid-column: 1; text-align: left; }
}

/* ---------------------------------------------------------------- back to top, with the page progress */

.totop { display: none; }

.js .totop {
	position: fixed;
	right: max(24px, env(safe-area-inset-right));
	bottom: max(24px, env(safe-area-inset-bottom));
	z-index: 90;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 1px;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--glass);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	color: var(--ink);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	translate: 0 12px;
	transition: opacity .35s var(--e-ui), translate .35s var(--e-ui), visibility 0s linear .35s, background-color .25s var(--e-ui);
}

.js .totop.is-on {
	opacity: 1;
	visibility: visible;
	translate: none;
	transition: opacity .35s var(--e-ui), translate .35s var(--e-ui), visibility 0s, background-color .25s var(--e-ui);
}

.totop-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	rotate: -90deg;
}

.totop-ring circle { fill: none; stroke-width: 2.5; }
.totop-ring .tr { stroke: var(--line); }
.totop-ring .tp {
	stroke: url(#msrTopGrad);
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: calc(100 - var(--p, 0));
}
.totop-ring .s1 { stop-color: var(--accent); }
.totop-ring .s2 { stop-color: var(--accent-2); }

.totop-arrow {
	width: 16px;
	height: 16px;
	transition: translate .25s var(--e-ui);
}

.totop-pc {
	font: 500 10px/1 var(--f-m);
	letter-spacing: 0;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.totop:hover { background: var(--glass-hi); }
.totop:hover .totop-arrow { translate: 0 -2px; }
.totop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.js.menu-open .totop.is-on { visibility: hidden; opacity: 0; }

@media (max-width: 809px) {
	.js .totop {
		right: max(16px, env(safe-area-inset-right));
		bottom: max(16px, env(safe-area-inset-bottom));
		width: 54px;
		height: 54px;
	}
}

@media (forced-colors: active) {
	.totop { border: 1px solid ButtonText; }
	.totop-ring .tp { stroke: Highlight; }
}

/* ---------------------------------------------------------------- replay: a hot-seat moment, line by line */

.rp {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: clamp(32px, 4vw, 64px);
}

.rp-side {
	position: sticky;
	top: 120px;
	display: grid;
	justify-items: start;
	gap: 22px;
}

.rp-hd { --hs: clamp(36px, 3.6vw, 54px); }
.rp-tag { margin: 0; }

.rp-marks {
	justify-self: stretch;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair);
}

.rp-marks li {
	display: grid;
	grid-template-columns: 12px 84px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--hair);
	font-size: 15px;
	transition: opacity .4s var(--e-ui);
}

.rp-marks i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ink);
}

.rp-marks .hot i { background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 25%, transparent); }
.rp-marks .ok i { background: var(--accent); }

.rp-marks b {
	color: var(--muted);
	font: 500 12.5px/1 var(--f-m);
}

.rp-marks .ok b { color: var(--accent); }

.rp-term {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	background: color-mix(in srgb, var(--well) 82%, transparent);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	font: 500 13px/1.6 var(--f-m);
}

.rp-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 0 14px 0 20px;
	border-bottom: 1px solid var(--glass-line);
	color: var(--ink);
	font-size: 12.5px;
}

.rp-bar p { margin: 0; }
.rp-bar b { color: var(--accent); font-weight: 600; }

.rp-again {
	height: 30px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: var(--glass-tint);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	color: var(--ink);
	font: 500 12px/1 var(--f-m);
	cursor: pointer;
}

.rp-again:hover { box-shadow: inset 0 0 0 1px var(--accent); }

.rp-body {
	padding: 20px 22px 24px;
	min-height: 360px;
}

.rp-cmd,
.rp-cur { margin: 0; color: var(--ink); }
.rp-p { color: var(--accent); }
/* a code element, so WordPress leaves the double hyphen alone */
.rp-c { font: inherit; }

.rp-log {
	margin: 14px 0;
	padding: 0;
	list-style: none;
}

.rp-log li {
	display: grid;
	grid-template-columns: 74px 70px minmax(0, 1fr);
	gap: 12px;
	padding: 3px 0;
	color: var(--ink);
}

.rp-log time { color: var(--muted); }
.rp-log b { color: var(--muted); font-weight: 500; }
.rp-log .hot span { color: var(--ink); font-weight: 600; }
.rp-log .say span { color: color-mix(in srgb, var(--ink) 80%, var(--accent)); font-style: italic; }
.rp-log .ok b { color: var(--accent); }
.rp-log .ok span::after { content: " ✓"; color: var(--accent); }

.rp-cur .caret {
	width: 8px;
	height: 15px;
	vertical-align: -2px;
}

.rp-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	padding: 14px 22px;
	border-top: 1px solid var(--glass-line);
	color: var(--muted);
	font-size: 12px;
}

.rp-foot b { color: var(--ink); font-weight: 500; }

/* with script the log types itself out when it comes into view */
.js .rp.is-armed .rp-log li:not(.on),
.js .rp.is-armed .rp-cur:not(.on) { visibility: hidden; }
.js .rp.is-armed .rp-marks li:not(.on) { opacity: .32; }

@media (max-width: 1099px) {
	.rp { grid-template-columns: 1fr; }
	.rp-side { position: static; }
}

@media (max-width: 809px) {
	.rp-term { font-size: 12px; }
	.rp-body { padding: 16px 14px 18px; min-height: 0; }
	.rp-log li {
		grid-template-columns: 62px minmax(0, 1fr);
		gap: 2px 10px;
		padding: 5px 0;
	}
	.rp-log span { grid-column: 2; }
	.rp-marks li { grid-template-columns: 12px 74px minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- endings: one thread, two trials */

.en {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	align-items: start;
	gap: 48px;
	margin-top: clamp(40px, 4.4vw, 64px);
}

.en-side {
	position: sticky;
	top: 120px;
	display: grid;
	justify-items: start;
	gap: 18px;
}

.en-tag { margin: 0; }

.en-clock {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
}

.en-clock b {
	font: var(--wt-d) clamp(96px, 10vw, 148px)/.9 var(--f-d);
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
}

.en-clock span {
	color: var(--muted);
	font: 500 14px/1 var(--f-m);
}

.en-cap {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.55;
}

.en-runs {
	display: grid;
	gap: 16px;
}

.en-run { padding: 24px 28px 28px; }

.en-hd {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}

.en-hd h3 {
	margin: 0;
	font: var(--wt-h) 22px/1.15 var(--f-d);
	letter-spacing: var(--tr-t);
}

.en-out {
	margin: 0;
	color: var(--muted);
	font: 500 12px/1.3 var(--f-m);
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
}

.is-with .en-out { color: var(--accent); }

.en-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* the track, and on the checked run a cyan line that fills as the days pass */
.en-steps::before,
.is-with .en-steps::after {
	content: "";
	position: absolute;
	top: 7px;
	left: 8px;
	right: 8px;
	height: 1px;
	background: var(--hair2);
}

.is-with .en-steps::after {
	background: var(--accent);
	transform: scaleX(var(--p, 1));
	transform-origin: left;
	transition: transform .7s var(--e-ui);
}

.en-steps li {
	position: relative;
	z-index: 1;
	display: grid;
	align-content: start;
	gap: 6px;
	transition: opacity .5s var(--e-ui);
}

.en-steps i {
	width: 16px;
	height: 16px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--ground);
	box-shadow: inset 0 0 0 1.5px var(--muted);
	transition: background-color .4s var(--e-ui), box-shadow .4s var(--e-ui), transform .5s var(--e-spring);
}

.is-with .en-steps i {
	background: var(--accent);
	box-shadow: inset 0 0 0 4px var(--accent), inset 0 0 0 16px var(--well);
}

.en-steps b {
	color: var(--muted);
	font: 500 12px/1.3 var(--f-m);
}

.is-with .en-steps b { color: var(--accent); }

.en-steps span {
	font: 600 15px/1.3 var(--f-b);
	text-wrap: balance;
}

.en-steps small {
	color: var(--muted);
	font-size: 13.5px;
	line-height: 1.45;
}

.en-steps code {
	justify-self: start;
	margin-top: 4px;
	color: var(--accent);
	font: 500 11.5px/1 var(--f-m);
}

/* with script, the checked run plays one step at a time */
.js .is-with.is-armed .en-steps li:not(.on) { opacity: .26; }
.js .is-with.is-armed .en-steps li:not(.on) i { transform: scale(.6); }

@media (max-width: 1099px) {
	.en { grid-template-columns: 1fr; gap: 28px; }
	.en-side {
		position: static;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: end;
		column-gap: 28px;
	}
	.en-tag,
	.en-replay { grid-column: 1 / -1; }
}

@media (max-width: 809px) {
	.en-side { grid-template-columns: 1fr; }
	.en-run { padding: 20px 18px 22px; }
	.en-hd { flex-direction: column; gap: 6px; margin-bottom: 20px; }
	.en-steps {
		grid-template-columns: 1fr;
		gap: 18px;
		padding-left: 30px;
	}
	.en-steps::before,
	.is-with .en-steps::after {
		top: 8px;
		bottom: 8px;
		left: 7px;
		right: auto;
		width: 1px;
		height: auto;
	}
	.is-with .en-steps::after {
		transform: scaleY(var(--p, 1));
		transform-origin: top;
	}
	.en-steps i {
		position: absolute;
		top: 1px;
		left: -30px;
		margin: 0;
	}
}

/* ---------------------------------------------------------------- how I work: the video */

.vf {
	margin-top: clamp(40px, 4.4vw, 64px);
	padding: 8px;
	border-radius: 20px;
	background: var(--glass);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	transform-origin: 50% 0;
}

/* with script the player settles to full size as it comes up the screen */
.js .vf { transform: scale(var(--vs, 1)); }

.vf-bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 10px 18px;
	min-height: 48px;
	padding: 2px 4px 8px 12px;
	font: 500 12.5px/1.3 var(--f-m);
}

.vf-bar p {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin: 0;
}

.vf-tc { font-variant-numeric: tabular-nums; }

.vf-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px 0 10px;
	border: 0;
	border-radius: 9px;
	background: var(--glass-tint);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	color: var(--ink);
	font: 500 12px/1 var(--f-m);
	cursor: pointer;
}

.vf-toggle[hidden] { display: none; }
.vf-toggle:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.vf-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vf-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.vf-toggle .i-play,
.vf-toggle.is-paused .i-pause { display: none; }
.vf-toggle.is-paused .i-play { display: inline; }

.msr-vid { margin: 0; }

.msr-vid video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 13px;
	background: var(--well);
	object-fit: cover;
}

.msr-vid figcaption {
	margin: 12px 8px 4px;
	color: var(--muted);
	font: 500 12px/1.5 var(--f-m);
	text-align: left;
}

@media (max-width: 809px) {
	.vf { padding: 6px; border-radius: 16px; }
	.vf-bar {
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 2px 2px 8px 8px;
	}
	.vf-tags {
		grid-row: 2;
		grid-column: 1 / -1;
	}
	.msr-vid video { border-radius: 11px; }
}

/* ---------------------------------------------------------------- exhibit: one page, annotated */

.xh {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: start;
	gap: clamp(32px, 4vw, 64px);
	margin-top: clamp(40px, 4.4vw, 64px);
}

/* the courtroom screen: a glass bezel around a paper page */
.xh-doc {
	margin: 0;
	padding: 8px;
	border-radius: 20px;
	background: var(--glass);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	box-shadow: inset 0 0 0 1px var(--glass-line);
}

.xh-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	min-height: 40px;
	margin: 0;
	padding: 0 12px 6px;
	font: 500 12.5px/1.3 var(--f-m);
}

.xh-page {
	--pg: color-mix(in srgb, var(--ink) 97%, var(--accent));
	--pg-ink: var(--well);
	--pg-mut: color-mix(in srgb, var(--well) 60%, var(--pg));
	--hl: color-mix(in srgb, var(--accent) 34%, transparent);
	--hl-line: color-mix(in srgb, var(--accent-2) 75%, transparent);
	position: relative;
	overflow: hidden;
	padding: 22px 28px 20px 58px;
	border-radius: 13px;
	background: var(--pg);
	color: var(--pg-ink);
}

.xh-pt {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.xh-pm {
	margin: 0;
	color: var(--pg-mut);
	font: 500 11.5px/1.4 var(--f-m);
	letter-spacing: .02em;
}

/* the exhibit sticker */
.xh-stk {
	display: grid;
	justify-items: center;
	gap: 3px;
	margin: 0;
	padding: 7px 12px 8px;
	border: 1.5px solid var(--accent-2);
	border-radius: 6px;
	color: var(--accent-2);
	font: 600 9.5px/1 var(--f-m);
	letter-spacing: .14em;
	text-transform: uppercase;
	rotate: -3deg;
}

.xh-stk b {
	color: var(--pg-ink);
	font: var(--wt-d) 18px/1 var(--f-d);
	letter-spacing: 0;
}

.xh-lines {
	display: grid;
	gap: 7px;
	font: 400 13px/1.7 var(--f-m);
}

/* folded header lines hang under the field name, the way a mail client prints them */
.xh-l {
	position: relative;
	margin: 0;
	padding-left: 2ch;
	text-indent: -2ch;
	overflow-wrap: anywhere;
}

.xh-k { font-weight: 600; }

.xh-m {
	margin: 0 -2px;
	padding: 0 2px;
	border-radius: 3px;
	background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 0 / 100% 100%;
	box-shadow: inset 0 0 0 1.5px var(--hl-line);
	color: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size .8s var(--e-ui), box-shadow .3s var(--e-ui);
}

.xh-pin {
	position: absolute;
	top: 1px;
	left: -38px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--accent-2);
	color: var(--pg);
	font: 600 11px/1 var(--f-m);
	font-style: normal;
	text-indent: 0;
	transition: scale .5s var(--e-spring), opacity .3s var(--e-ui);
}

/* the body of the email, too far away to read */
.xh-body {
	display: grid;
	gap: 11px;
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid color-mix(in srgb, var(--pg-ink) 12%, transparent);
}

.xh-body i {
	width: 94%;
	height: 8px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--pg-ink) 9%, transparent);
}

.xh-body i:nth-child(2) { width: 86%; }
.xh-body i:nth-child(3) { width: 97%; }
.xh-body i:nth-child(4) { width: 72%; }
.xh-body i:nth-child(5) { width: 90%; }
.xh-body i:nth-child(6) { width: 81%; }
.xh-body i:nth-child(7) { width: 38%; }

/* the callout: the Date line blown up over the body, in local time */
.xh-zoom {
	position: absolute;
	right: 24px;
	bottom: 52px;
	width: min(340px, 64%);
	padding: 14px 16px 16px;
	border-radius: 10px;
	background: var(--pg);
	box-shadow: inset 0 0 0 1.5px var(--accent-2);
	transform-origin: 100% 100%;
	transition: opacity .5s var(--e-ui), scale .6s var(--e-spring);
}

.xh-zoom-k {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	color: var(--pg-mut);
	font: 500 11px/1.3 var(--f-m);
}

.xh-zoom .xh-pin { position: static; flex: none; }

.xh-zoom-v {
	margin: 0;
	font: 500 12.5px/1.45 var(--f-m);
}

.xh-zoom-v b {
	display: block;
	font: var(--wt-d) clamp(26px, 2.3vw, 34px)/1.1 var(--f-d);
	letter-spacing: -.02em;
}

.xh-bates {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 24px 0 0;
	color: var(--pg-mut);
	font: 500 11px/1.3 var(--f-m);
	letter-spacing: .04em;
}

.xh-cap {
	margin: 12px 10px 4px;
	color: var(--muted);
	font: 500 12px/1.5 var(--f-m);
}

.xh-side {
	position: sticky;
	top: 120px;
	display: grid;
	justify-items: start;
	gap: 22px;
}

.xh-tag { margin: 0; }

.xh-notes {
	justify-self: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair);
}

.xh-notes li {
	padding: 16px 0 18px;
	border-bottom: 1px solid var(--hair);
	transition: opacity .3s var(--e-ui);
}

.xh-nh {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font: 500 13px/1.3 var(--f-m);
	text-align: left;
}

button.xh-nh { cursor: pointer; }
button.xh-nh:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.xh-nh b {
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
	color: var(--accent);
	font: 600 11.5px/1 var(--f-m);
	transition: background-color .25s var(--e-ui), color .25s var(--e-ui);
}

.xh-nt {
	margin: 0;
	padding-left: 36px;
	color: var(--muted);
	font-size: 15.5px;
	line-height: 1.55;
	transition: color .25s var(--e-ui);
}

.xh-hint {
	display: none;
	margin: 0;
	font: 500 12px/1.5 var(--f-m);
}

.js .xh-hint { display: block; }

/* one note at a time: its line, pin and note stay lit, the rest step back */
.xh-notes .is-hot .xh-nh b { background: var(--accent); color: var(--well); }
.xh-notes .is-hot .xh-nt { color: var(--ink); }
.xh.has-hot .xh-notes li:not(.is-hot) { opacity: .45; }
.xh.has-hot .xh-l .xh-pin:not(.is-hot) { opacity: .3; }
/* the callout keeps its paper, so the body lines never show through it */
.xh-zoom > * { transition: opacity .3s var(--e-ui); }
.xh.has-hot .xh-zoom:not(.is-hot) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pg-ink) 16%, transparent); }
.xh.has-hot .xh-zoom:not(.is-hot) > * { opacity: .3; }
.xh.has-hot .xh-m:not(.is-hot) {
	--hl: transparent;
	--hl-line: color-mix(in srgb, var(--pg-ink) 16%, transparent);
}
.xh .xh-m.is-hot {
	--hl: color-mix(in srgb, var(--accent) 52%, transparent);
	--hl-line: var(--accent-2);
}

/* with script the marks sweep in one by one, then the pins, then the callout */
.js .xh:not(.is-drawn) .xh-m {
	background-size: 0 100%;
	box-shadow: inset 0 0 0 1.5px transparent;
}
.js .xh:not(.is-drawn) .xh-pin { scale: 0; }
.js .xh:not(.is-drawn) .xh-zoom { opacity: 0; scale: .9; }
.js .xh.is-drawing .xh-m { transition-delay: calc(var(--k, 1) * 280ms); }
.js .xh.is-drawing .xh-l .xh-pin { transition-delay: calc(var(--k, 1) * 280ms + 120ms); }
.js .xh.is-drawing .xh-zoom { transition-delay: 1.5s; }

@media (max-width: 1099px) {
	.xh { grid-template-columns: 1fr; }
	.xh-side { position: static; }
}

@media (max-width: 809px) {
	.xh-doc { padding: 6px; border-radius: 16px; }
	.xh-bar { padding: 0 8px 6px; }
	.xh-page { padding: 16px 14px 16px 40px; border-radius: 11px; }
	.xh-pt { margin-bottom: 16px; }
	.xh-stk { padding: 6px 9px 7px; }
	.xh-stk b { font-size: 15px; }
	.xh-lines { gap: 5px; font-size: 11.5px; }
	.xh-pin {
		left: -30px;
		width: 20px;
		height: 20px;
		font-size: 10px;
	}
	.xh-zoom {
		left: 40px;
		right: 14px;
		bottom: 44px;
		width: auto;
	}
	.xh-nt { font-size: 15px; }
}

/* ---------------------------------------------------------------- method: preserve, examine, present */

.pep {
	display: grid;
	gap: 28px;
	margin-top: clamp(40px, 4.4vw, 64px);
}

/* with script the stages become tabs beside one panel */
.pep.is-tabbed {
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	align-items: start;
	gap: clamp(32px, 4vw, 64px);
}

.pep-side {
	display: grid;
	justify-items: start;
	gap: 22px;
}

.pep.is-tabbed .pep-side {
	position: sticky;
	top: 120px;
}

.pep-tabs {
	justify-self: stretch;
	display: grid;
	border-top: 1px solid var(--hair);
}

.pep-tabs[hidden] { display: none; }

.pep-tab {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 20px 0 22px;
	border: 0;
	border-bottom: 1px solid var(--hair);
	background: none;
	color: var(--muted);
	font: var(--wt-h) clamp(30px, 3vw, 46px)/1.05 var(--f-d);
	letter-spacing: var(--tr-h);
	text-align: left;
	cursor: pointer;
	transition: color .3s var(--e-ui);
}

.pep-tab b {
	color: var(--muted);
	font: 500 12.5px/1 var(--f-m);
	letter-spacing: 0;
	transition: color .3s var(--e-ui);
}

.pep-tab:hover,
.pep-tab[aria-selected="true"] { color: var(--ink); }
.pep-tab[aria-selected="true"] b { color: var(--accent); }
.pep-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

/* the run line under the chosen stage; while the stages step on their own it fills toward the next */
.pep-run {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
}

.pep-tab[aria-selected="true"] .pep-run { transform: none; }
.pep-tab.is-running .pep-run { animation: pep-run var(--dwell, 6.5s) linear both; }

@keyframes pep-run {
	from { transform: scaleX(0); }
}

.pep-tag { margin: 0; }

/* without script the stages stack; with it they share one cell, so switching never moves the page */
.pep-panels {
	display: grid;
	gap: 24px;
}

.pep.is-tabbed .pep-p { grid-area: 1 / 1; }
.pep.is-tabbed .pep-p:not(.is-on) { visibility: hidden; }
.pep.is-tabbed .pep-p.is-on { animation: pep-in .55s var(--e-ui) both; }

@keyframes pep-in {
	from { opacity: 0; translate: 0 12px; }
}

.pep-p {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 22px;
	padding: 28px 30px 26px;
	border-radius: 18px;
	background: var(--ticks), var(--glass);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	box-shadow: inset 0 0 0 1px var(--glass-line);
}

.pep-p:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pep-hd {
	display: grid;
	gap: 10px;
	max-width: 48ch;
}

.pep-h {
	margin: 0;
	color: var(--ink);
	font: 500 12.5px/1.3 var(--f-m);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pep-h b { margin-right: 6px; color: var(--accent); font-weight: 500; }

.pep-lede {
	margin: 0;
	color: var(--ink);
	font: var(--wt-h) clamp(20px, 1.7vw, 25px)/1.3 var(--f-d);
	letter-spacing: var(--tr-t);
}

/* the instrument well */
.pep-ins {
	padding: 18px 20px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--well) 78%, transparent);
	box-shadow: inset 0 0 0 1px var(--glass-line);
	color: var(--ink);
	font: 500 12.5px/1.6 var(--f-m);
}

.pep-out {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--hair);
	color: var(--ink);
	font-size: 16px;
}

.pep-out span {
	color: var(--accent);
	font: 500 11.5px/1 var(--f-m);
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* preserve: the acquisition log. The command is a code element, so WordPress leaves its double
   hyphens alone. */
.pep-cmd { margin: 0 0 12px; }
.pep-cmd code { font: inherit; }
.pep-pr { color: var(--accent); }

.pep-meter {
	display: inline-block;
	width: min(220px, 58%);
	height: 6px;
	margin-right: 12px;
	overflow: hidden;
	vertical-align: middle;
	border-radius: 3px;
	background: color-mix(in srgb, var(--ink) 10%, transparent);
}

.pep-meter i {
	display: block;
	height: 100%;
	background: var(--accent);
	transform-origin: left;
}

.pep-pc { color: var(--accent); }

.pep-cust {
	display: grid;
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pep-cust time { margin-right: 6px; color: var(--muted); }

.pep-log {
	display: grid;
	gap: 6px;
	margin: 0;
}

.pep-log div {
	display: grid;
	grid-template-columns: 9ch minmax(0, 1fr);
	gap: 12px;
}

.pep-log dt { color: var(--muted); }
.pep-log dd { margin: 0; overflow-wrap: anywhere; }
.pep-log code { font: inherit; }
.pep-ok code { color: var(--accent); }

.pep-match {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 4px;
	padding: 1px 8px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--accent) 16%, transparent);
	color: var(--accent);
	font-weight: 600;
}

.pep-match::before { content: "\2713"; }

/* examine: the device's thread, filtered to what the screenshots left out */
.pep-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
}

.pep-f {
	color: var(--accent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.pep-count {
	display: grid;
	margin-left: auto;
	font-weight: 500;
}

.pep-count > span { grid-area: 1 / 1; text-align: right; }
.pep-count .c-all { opacity: 0; }

.pep-tbl {
	width: 100%;
	border-collapse: collapse;
}

.pep-tbl th {
	padding: 0 10px 8px;
	border-bottom: 1px solid var(--hair);
	color: var(--muted);
	font-weight: 500;
	text-align: left;
}

.pep-tbl td {
	padding: 7px 10px;
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
	vertical-align: top;
}

.pep-tbl td:first-child { width: 7ch; color: var(--muted); }
.pep-tbl td:nth-child(2) { width: 5ch; }
.pep-tbl :is(th, td):last-child { text-align: right; white-space: nowrap; }
.pep-tbl tr:not(.is-flag) td { opacity: .32; }
.pep-tbl .is-flag td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pep-tbl .is-flag td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.pep-tbl .is-flag td:last-child { color: var(--accent); }

/* present: the courtroom screen and its feeds */
.pep-scr {
	display: grid;
	align-content: start;
	gap: 14px;
}

.pep-mon {
	padding: 10px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--ink) 5%, var(--well));
	box-shadow: inset 0 0 0 1px var(--glass-line);
}

.pep-sheet {
	--pg: color-mix(in srgb, var(--ink) 97%, var(--accent));
	display: grid;
	padding: 14px 16px 16px;
	border-radius: 6px;
	background: var(--pg);
	color: var(--well);
	font: 500 11.5px/1.5 var(--f-m);
}

.pep-sk {
	margin: 0 0 10px;
	color: color-mix(in srgb, var(--well) 60%, var(--pg));
	font-size: 10.5px;
	letter-spacing: .04em;
}

.pep-sl {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pep-sl li {
	display: grid;
	grid-template-columns: 6ch 2ch minmax(0, 1fr);
	gap: 8px;
	padding: 1px 6px;
	border-radius: 3px;
}

.pep-sl time { color: color-mix(in srgb, var(--well) 60%, var(--pg)); }

.pep-sl .is-call {
	background: linear-gradient(color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 34%, transparent)) no-repeat 0 0 / 100% 100%;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-2) 75%, transparent);
}

.pep-call {
	justify-self: end;
	width: min(320px, 78%);
	margin: 14px 0 0;
	padding: 10px 14px 12px;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1.5px var(--accent-2);
	font: var(--wt-h) clamp(17px, 1.5vw, 21px)/1.25 var(--f-d);
	letter-spacing: var(--tr-t);
}

.pep-call span {
	display: block;
	margin-bottom: 6px;
	color: color-mix(in srgb, var(--well) 60%, var(--pg));
	font: 500 10.5px/1.3 var(--f-m);
	letter-spacing: .02em;
}

.pep-feeds {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	padding: 0 4px;
	list-style: none;
}

.pep-feeds li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pep-feeds i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}

/* with script each instrument runs when its stage comes up: until then it waits blank */
.pep.is-anim .pep-p:not(.is-live) :is(.pep-cmd, .pep-log > div, .pep-tbl tbody tr, .pep-sheet, .pep-call, .pep-feeds li) { opacity: 0; }
.pep.is-anim .pep-p.is-live :is(.pep-cmd, .pep-log > div, .pep-cust li) { animation: pep-row .45s var(--e-ui) calc(var(--k, 0) * 200ms) both; }
.pep.is-anim .pep-p.is-live .pep-tbl tbody tr { animation: pep-row .45s var(--e-ui) calc(var(--k, 0) * 110ms) both; }
/* imaging fills, the hash compiles (site.js), the match lands, then custody signs off */
.pep.is-anim .pep-p.is-live .pep-meter i { animation: pep-fill .9s var(--e-ui) .9s both; }
.pep.is-anim .pep-p.is-live .pep-pc { animation: pep-row .3s var(--e-ui) 1.8s both; }
.pep.is-anim .pep-p.is-live .pep-match { animation: pep-pop .5s var(--e-spring) 3s both; }
/* the filter applies once the rows are in */
.pep.is-anim .pep-p.is-live .pep-f { animation: pep-f .4s var(--e-ui) 1.3s both; }
.pep.is-anim .pep-p.is-live .pep-tbl tr:not(.is-flag) td { animation: pep-dim .5s var(--e-ui) 1.4s both; }
.pep.is-anim .pep-p.is-live .pep-tbl .is-flag td { animation: pep-flag .5s var(--e-ui) 1.4s both; }
.pep.is-anim .pep-p.is-live .pep-count .c-all { animation: pep-dim-out .3s var(--e-ui) 1.4s both; }
.pep.is-anim .pep-p.is-live .pep-count .c-hit { animation: pep-row .3s var(--e-ui) 1.5s both; }
/* the page goes up, the line is marked, the callout pops, the feeds go live */
.pep.is-anim .pep-p.is-live .pep-sheet { animation: pep-row .5s var(--e-ui) .1s both; }
.pep.is-anim .pep-p.is-live .pep-sl .is-call { animation: pep-sweep .7s var(--e-ui) .7s both; }
.pep.is-anim .pep-p.is-live .pep-call { animation: pep-pop .55s var(--e-spring) 1.3s both; }
.pep.is-anim .pep-p.is-live .pep-feeds li { animation: pep-row .45s var(--e-ui) calc(1.8s + var(--k, 0) * 160ms) both; }

@keyframes pep-row {
	from { opacity: 0; translate: 0 6px; }
}

@keyframes pep-pop {
	from { opacity: 0; scale: .9; }
}

@keyframes pep-fill {
	from { transform: scaleX(0); }
}

@keyframes pep-f {
	from { color: var(--muted); box-shadow: inset 0 0 0 1px var(--hair2); }
}

@keyframes pep-dim {
	from { opacity: 1; }
}

@keyframes pep-dim-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes pep-flag {
	from { background-color: transparent; box-shadow: none; }
}

@keyframes pep-sweep {
	from { background-size: 0 100%; box-shadow: inset 0 0 0 1.5px transparent; }
}

@media (max-width: 1099px) {
	.pep.is-tabbed { grid-template-columns: 1fr; }
	.pep.is-tabbed .pep-side { position: static; }
	.pep-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pep-tab {
		flex-direction: column;
		gap: 8px;
		padding: 14px 0 16px;
		font-size: clamp(22px, 4vw, 32px);
	}
}

@media (max-width: 809px) {
	.pep-p {
		gap: 18px;
		padding: 20px 16px 18px;
		border-radius: 16px;
	}
	.pep-ins { padding: 14px 12px; font-size: 11.5px; }
	.pep-log div { grid-template-columns: 8ch minmax(0, 1fr); gap: 8px; }
	.pep-count { margin-left: 0; }
	.pep-count > span { text-align: left; }
	.pep-tbl :is(th, td) { padding-inline: 6px; }
	.pep-tbl td:first-child { width: 6ch; }
	.pep-tbl td:nth-child(2) { width: 3ch; }
	.pep-sheet { padding: 12px 10px 14px; font-size: 10.5px; }
	.pep-sl li { grid-template-columns: 5ch 1.5ch minmax(0, 1fr); gap: 6px; padding-inline: 4px; }
	.pep-call { width: 92%; }
}

/* ---------------------------------------------------------------- the field behind the glass */

/* functions.php prints .fx as the first thing in main. It spans main and clips to it, so nothing
   reaches the footer; inside, a one-screen layer sticks to the top and holds still while the
   sections scroll over it. A faint blueprint grid (none on phones), and two reticle rings drawn in the accent. */
.fx {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	overflow: clip;
	pointer-events: none;
}

.fx-in {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--ink) 4.5%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--ink) 4.5%, transparent) 1px, transparent 1px);
	background-position: -1px -1px;
	background-size: 96px 96px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 140px);
	mask-image: linear-gradient(to bottom, transparent 0, #000 140px);
}

.fx-ring {
	position: absolute;
	top: -18vh;
	right: -14vw;
	width: min(1180px, 88vw);
	height: auto;
	fill: none;
	stroke: var(--accent);
	opacity: .42;
}

.fx-ring-2 {
	top: auto;
	right: auto;
	bottom: -26vh;
	left: -12vw;
	width: min(640px, 60vw);
	opacity: .3;
}

/* the outer bands carry the detail; the middle stays quiet because content scrolls over it */
.fx-ring .h {
	stroke-width: 1;
	opacity: .45;
	vector-effect: non-scaling-stroke;
}

.fx-ring .h-in { opacity: .26; }

.fx-ring .tk {
	stroke-width: 9;
	stroke-dasharray: .3 2.7;
	opacity: .5;
}

.fx-ring .tk-l {
	stroke-width: 22;
	stroke-dasharray: .8 29.2;
	stroke-dashoffset: .4;
	opacity: .6;
}

.fx-ring .arc {
	stroke-width: 3;
	stroke-linecap: round;
	opacity: .85;
}

.fx-ring .dt {
	stroke-width: 2;
	stroke-dasharray: 2 10;
	opacity: .4;
}

@media (max-width: 809px) {
	.fx-in { background-image: none; }
	.fx-ring {
		top: -6vh;
		right: -40vw;
		width: 120vw;
	}
	.fx-ring-2 { display: none; }
}

/* a visitor who asks for less transparency gets solid plates and no field */
@media (prefers-reduced-transparency: reduce) {
	:root {
		--glass: var(--plate);
		--glass-hi: var(--plate);
		--glass-tint: color-mix(in srgb, var(--ink) 5%, var(--plate));
		--glass-tint-hi: color-mix(in srgb, var(--ink) 10%, var(--plate));
		--glass-blur: none;
		--glass-blur-sm: none;
	}
	.fx { display: none; }
	.hb::before,
	.hero-src { background: var(--ground); }
	.menu,
	.tq-box,
	.cf-tabs,
	.cur-lbl { background: var(--well); }
	.commit,
	.tq-card { background: var(--ticks), var(--plate); }
	.vitals { background: var(--ticks), var(--ground); }
}

/* forced colors drop the hairlines drawn as shadows, so the glass panels get real outlines */
@media (forced-colors: active) {
	.fx { display: none; }
	.plate,
	.ab-now,
	.commit,
	.tq-card,
	.vitals,
	.fa-float,
	.hb-nav ul,
	.cur-lbl,
	.vf,
	.xh-doc,
	.xh-zoom,
	.pep-p,
	.pep-ins,
	:is(.key, .tq-chip, .tq-pause, .brief-in, .vf-toggle):not(:focus-visible) {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}
	.xh-m,
	.pep-sl .is-call { outline: 2px solid Highlight; }
}

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	.mk-track {
		flex-wrap: wrap;
		width: auto;
		animation: none;
	}

	.mk-track ul { flex-wrap: wrap; row-gap: 8px; }
	.mk-track ul + ul { display: none; }
	.mk-view { -webkit-mask-image: none; mask-image: none; }
	.dot::after,
	.caret,
	.ld-caret { animation: none; }
}

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

@media print {
	.site-hd,
	.ld,
	.cur,
	.fx,
	.hero-cv,
	.hero-hud,
	.menu { display: none !important; }

	.js .rv,
	.js .sh-hero .hero-eb,
	.js .sh-hero .hero-row,
	.js .sh-hero .hero-stats { opacity: 1 !important; translate: none !important; }

	.js .sh-hd .w > span,
	.js .sh-hero .hero-title .w > span { opacity: 1 !important; transform: none !important; }

	/* on paper: every stage of the method, every mark on the exhibit */
	.pep-tabs { display: none !important; }
	.pep.is-tabbed { grid-template-columns: 1fr; }
	.pep.is-tabbed .pep-p { grid-area: auto; visibility: visible !important; }
	.pep.is-anim .pep-p * { animation: none !important; }
	.pep.is-anim .pep-p :is(.pep-cmd, .pep-log > div, .pep-tbl tbody tr, .pep-sheet, .pep-call, .pep-feeds li) { opacity: 1 !important; }
	.js .xh:not(.is-drawn) .xh-m { background-size: 100% 100% !important; box-shadow: inset 0 0 0 1.5px var(--hl-line) !important; }
	.js .xh:not(.is-drawn) :is(.xh-pin, .xh-zoom) { opacity: 1 !important; scale: none !important; }
	.js .vf { transform: none !important; }
}