@charset "utf-8";

/* ------------------------------------------------------------------
   HAIXOR LTD - stylesheet
   Registered custom properties, then the page. There is no reset here
   and none is wanted: the user agent's own margins, list markers,
   paragraph spacing, table rules and form sizing are kept deliberately,
   because a document about consents should read like a document. The
   only element restyled globally is h2, which is the stage title on the
   timeline; everything else is reached through a class, so an element
   dropped into this page without a class keeps the browser's defaults.
   ------------------------------------------------------------------ */

@property --hx-bg        { syntax: "<color>";  inherits: true;  initial-value: #201b17; }
@property --hx-ink       { syntax: "<color>";  inherits: true;  initial-value: #e8dfd3; }
@property --hx-accent    { syntax: "<color>";  inherits: true;  initial-value: #c0863c; }
@property --hx-accent2   { syntax: "<color>";  inherits: true;  initial-value: #6a7668; }
@property --hx-surface   { syntax: "<color>";  inherits: true;  initial-value: #2a2420; }
@property --hx-weft      { syntax: "<length>"; inherits: true;  initial-value: 7px; }
@property --hx-rail-x    { syntax: "<length>"; inherits: true;  initial-value: 0.62rem; }
@property --hx-t         { syntax: "<time>";   inherits: true;  initial-value: 200ms; }
@property --hx-t-slow    { syntax: "<time>";   inherits: true;  initial-value: 620ms; }
@property --hx-peel-step { syntax: "<time>";   inherits: true;  initial-value: 150ms; }

:root {
	--hx-bg: #201b17;
	--hx-ink: #e8dfd3;
	--hx-accent: #c0863c;
	--hx-accent2: #6a7668;
	--hx-surface: #2a2420;

	--hx-weft: 7px;
	--hx-rail-x: 0.62rem;
	--hx-t: 200ms;
	--hx-t-slow: 620ms;
	--hx-peel-step: 150ms;

	--hx-ease: cubic-bezier(.22, .61, .36, 1);
	--hx-ease-snap: cubic-bezier(.17, .89, .32, 1.28);

	--hx-quiet: color-mix(in srgb, var(--hx-ink) 75%, var(--hx-bg));
	--hx-faint: color-mix(in srgb, var(--hx-ink) 59%, var(--hx-bg));
	--hx-sage: color-mix(in srgb, var(--hx-accent2) 55%, var(--hx-ink));
	--hx-rule: color-mix(in srgb, var(--hx-ink) 17%, var(--hx-bg));
	--hx-rule-warm: color-mix(in srgb, var(--hx-accent) 34%, var(--hx-bg));
	--hx-sunk: color-mix(in srgb, var(--hx-bg) 76%, #000000);
	--hx-raised: color-mix(in srgb, var(--hx-surface) 82%, var(--hx-ink) 18%);
	--hx-ring: color-mix(in srgb, var(--hx-accent) 86%, var(--hx-ink));
	--hx-serif: "Unna", Georgia, "Times New Roman", serif;
	--hx-sans: "Yantramanav", "Segoe UI", Roboto, system-ui, sans-serif;

	scroll-behavior: smooth;
	color-scheme: dark;
	accent-color: var(--hx-accent);
	-webkit-text-size-adjust: 100%;
}

/* The one global element restyle: the stage title, set as a dotted-leader
   entry so that a stage reads as a line out of a contents list. */
h2 {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 0.55rem;
	margin: 0 0 0.7rem;
	font-family: var(--hx-serif);
	font-weight: 700;
	font-size: clamp(1.32rem, 1.06rem + 1.3vw, 1.86rem);
	line-height: 1.15;
	letter-spacing: 0.004em;
	color: var(--hx-ink);
}

/* ------------------------------------------------------------------ 1. page */

.hx-page {
	margin: 0;
	padding: 0;
	min-height: 100%;
	font-family: var(--hx-sans);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.66;
	color: var(--hx-ink);
	background-color: var(--hx-bg);
	/* woven weft: a warp and a weft of unequal duty cycle, plus one thread
	   run a half-degree off square so the cloth never reads as graph paper */
	background-image:
		repeating-linear-gradient(90deg,
			transparent 0 calc(var(--hx-weft) * 0.58),
			color-mix(in srgb, var(--hx-ink) 4%, transparent) calc(var(--hx-weft) * 0.58) var(--hx-weft)),
		repeating-linear-gradient(0deg,
			transparent 0 calc(var(--hx-weft) * 0.34),
			color-mix(in srgb, #000000 26%, transparent) calc(var(--hx-weft) * 0.34) var(--hx-weft)),
		repeating-linear-gradient(90.5deg,
			transparent 0 calc(var(--hx-weft) * 2.9),
			color-mix(in srgb, var(--hx-accent2) 7%, transparent) calc(var(--hx-weft) * 2.9) calc(var(--hx-weft) * 3.2));
	background-attachment: fixed;
	overflow-wrap: break-word;
}

.hx-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	max-width: 64.5rem;
	margin: 0 auto;
	padding: 0;
}

.hx-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 0 1rem;
}

.hx-main {
	min-width: 0;
	padding: 1.4rem 0 1.2rem;
}

::selection {
	background-color: color-mix(in srgb, var(--hx-accent) 40%, transparent);
	color: var(--hx-ink);
}

.hx-page :focus-visible {
	outline: 2px solid var(--hx-ring);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ------------------------------------------------------------------ 1b. skip link

   The rail never collapses, so this is the only way past it on a keyboard.
   Hidden by clip-rect rather than display:none, which would remove it from the
   tab order; everything that only matters once it is on screen is set in the
   focused state, and it is fixed there so it clears the rail whether the rail
   is stacked at the top of a phone or sticky beside the document.            */

.hx-skip {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	color: var(--hx-accent);
	text-decoration: none;
}

.hx-skip:focus {
	position: fixed;
	top: 0.55rem;
	left: 0.55rem;
	z-index: 40;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.58rem 0.9rem;
	overflow: visible;
	clip: auto;
	clip-path: none;
	font-family: var(--hx-sans);
	font-size: 0.8rem;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hx-accent);
	background-color: var(--hx-surface);
	border: 1px solid var(--hx-rule-warm);
	border-left: 3px solid var(--hx-accent);
	box-shadow: 0 8px 22px -10px color-mix(in srgb, #000000 88%, transparent);
	transition: color var(--hx-t) var(--hx-ease), background-color var(--hx-t) var(--hx-ease);
}

.hx-skip:focus:hover {
	color: var(--hx-ink);
	background-color: color-mix(in srgb, var(--hx-accent) 16%, var(--hx-surface));
}

/* the document region takes focus from the skip link but is not a control, so
   it does not wear the ochre ring the focusable elements wear */
.hx-main[tabindex]:focus {
	outline: none;
}

/* ------------------------------------------------------------------ 2. rail */

.hx-rail {
	border-bottom: 1px solid var(--hx-rule);
	background-color: color-mix(in srgb, var(--hx-surface) 72%, transparent);
	padding: 0.85rem 1rem 0.7rem;
}

.hx-rail__mark {
	display: block;
	margin: 0 0 0.7rem;
	font-family: var(--hx-serif);
	font-weight: 700;
	font-size: 1.04rem;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--hx-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--hx-t) var(--hx-ease), border-color var(--hx-t) var(--hx-ease);
}

.hx-rail__mark:hover {
	color: var(--hx-ink);
	border-bottom-color: var(--hx-rule-warm);
}

.hx-rail__sub {
	display: block;
	margin: -0.5rem 0 0.7rem;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hx-faint);
}

.hx-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: hx-stageno;
}

.hx-rail__item {
	margin: 0;
	padding: 0;
}

.hx-rail__link {
	display: grid;
	grid-template-columns: 1.55rem minmax(0, 1fr);
	align-items: baseline;
	gap: 0.3rem;
	padding: 0.26rem 0.35rem 0.3rem 0;
	font-size: 0.93rem;
	line-height: 1.26;
	color: var(--hx-quiet);
	text-decoration: none;
	border-left: 2px solid transparent;
	padding-left: 0.6rem;
	transition:
		color var(--hx-t) var(--hx-ease),
		border-color var(--hx-t) var(--hx-ease),
		background-color var(--hx-t) var(--hx-ease),
		padding-left var(--hx-t) var(--hx-ease);
}

.hx-rail__link:hover {
	color: var(--hx-ink);
	border-left-color: var(--hx-rule-warm);
	background-color: color-mix(in srgb, var(--hx-ink) 4%, transparent);
	padding-left: 0.78rem;
}

.hx-rail__link[aria-current="page"] {
	color: var(--hx-ink);
	border-left-color: var(--hx-accent);
	background-color: color-mix(in srgb, var(--hx-accent) 10%, transparent);
}

.hx-rail__no {
	font-family: var(--hx-serif);
	font-weight: 700;
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
	color: var(--hx-sage);
	transition: color var(--hx-t) var(--hx-ease);
}

.hx-rail__link:hover .hx-rail__no,
.hx-rail__link[aria-current="page"] .hx-rail__no {
	color: var(--hx-accent);
}

.hx-rail__what {
	display: block;
	font-size: 0.72rem;
	line-height: 1.2;
	color: var(--hx-faint);
}

@media (min-width: 56rem) {
	:root {
		--hx-rail-x: 13.7rem;
	}

	.hx-shell {
		grid-template-columns: 15.5rem minmax(0, 1fr);
		gap: 0 1.8rem;
		padding: 0 1.4rem;
	}

	.hx-rail {
		position: sticky;
		top: 0;
		align-self: start;
		max-height: 100vh;
		overflow-y: auto;
		border-bottom: 0;
		border-right: 1px solid var(--hx-rule);
		background-color: transparent;
		padding: 1.8rem 1.2rem 1.8rem 0;
	}

	.hx-col {
		padding: 0;
	}

	.hx-rail__link {
		padding: 0.4rem 0.35rem 0.42rem 0.6rem;
	}

	.hx-rail__what {
		line-height: 1.35;
	}

	.hx-main {
		max-width: 47rem;
		padding: 1.9rem 0 1.4rem;
	}
}

/* ------------------------------------------------------------------ 3. opener */

.hx-open {
	padding: 0.4rem 0 1.5rem;
	border-bottom: 1px solid var(--hx-rule);
	margin-bottom: 1.6rem;
}

.hx-dateline {
	margin: 0 0 1rem;
	font-size: 0.7rem;
	line-height: 1.7;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hx-sage);
}

.hx-dateline__sep {
	color: var(--hx-rule-warm);
	padding: 0 0.3em;
}

.hx-title {
	margin: 0 0 0.9rem;
	font-family: var(--hx-serif);
	font-weight: 700;
	font-size: clamp(1.7rem, 1.1rem + 3.1vw, 2.9rem);
	line-height: 1.07;
	letter-spacing: -0.005em;
	color: var(--hx-ink);
	max-width: 22ch;
}

.hx-statement {
	margin: 0 0 0.9rem;
	max-width: 54ch;
	font-size: 1.07rem;
	line-height: 1.6;
	color: var(--hx-ink);
}

.hx-p {
	margin: 0 0 0.85rem;
	max-width: 62ch;
}

.hx-p--tight {
	margin-bottom: 0.45rem;
}

.hx-small {
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--hx-quiet);
	max-width: 62ch;
}

.hx-a {
	color: var(--hx-accent);
	text-decoration-color: color-mix(in srgb, var(--hx-accent) 45%, transparent);
	text-underline-offset: 0.2em;
	transition: color var(--hx-t) var(--hx-ease), text-decoration-color var(--hx-t) var(--hx-ease);
}

.hx-a:hover {
	color: var(--hx-ink);
	text-decoration-color: var(--hx-ink);
}

/* in-page contents, which is what gives the stage ids their purpose */
.hx-contents {
	margin: 1.2rem 0 0;
}

.hx-contents__cap {
	margin: 0 0 0.4rem;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hx-faint);
}

.hx-contents__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.1rem;
	max-width: 36rem;
}

.hx-contents__link {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	padding: 0.22rem 0;
	font-size: 0.86rem;
	color: var(--hx-quiet);
	text-decoration: none;
	transition: color var(--hx-t) var(--hx-ease), letter-spacing var(--hx-t) var(--hx-ease);
}

.hx-contents__link:hover {
	color: var(--hx-accent);
	letter-spacing: 0.012em;
}

.hx-contents__no {
	font-family: var(--hx-serif);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--hx-sage);
}

/* ------------------------------------------------------------------ 4. dotted leader */

.hx-lead__text {
	flex: 0 1 auto;
	min-width: 0;
}

.hx-lead__dots {
	flex: 1 1 1.6rem;
	min-width: 1.2rem;
	height: 2px;
	align-self: center;
	background-image: radial-gradient(circle at 1px 1px, currentColor 0.95px, transparent 1.3px);
	background-size: 7px 2px;
	background-repeat: repeat-x;
	background-position: left center;
	opacity: 0.4;
	transform: translateY(0.1em);
	transition: opacity var(--hx-t-slow) var(--hx-ease), background-size var(--hx-t-slow) var(--hx-ease);
}

.hx-lead__tail {
	flex: 0 0 auto;
	font-family: var(--hx-sans);
	font-weight: 400;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--hx-sage);
	white-space: normal;
	transition: color var(--hx-t-slow) var(--hx-ease);
}

@media (min-width: 34rem) {
	.hx-lead__tail {
		white-space: nowrap;
	}
}

.hx-stage:target h2 .hx-lead__dots,
.hx-block:hover h2 .hx-lead__dots {
	opacity: 0.74;
	background-size: 5px 2px;
}

.hx-stage:target h2 .hx-lead__tail {
	color: var(--hx-accent);
}

/* ------------------------------------------------------------------ 5. timeline + margin notes */

.hx-timeline {
	position: relative;
	margin: 0;
	padding: 0.2rem 0 0;
	view-timeline: --hx-run block;
}

.hx-spine {
	position: absolute;
	top: 0.5rem;
	bottom: 2.2rem;
	left: var(--hx-rail-x);
	width: 1px;
	background-color: var(--hx-rule);
	pointer-events: none;
}

.hx-spine__ink {
	display: block;
	width: 1px;
	height: 100%;
	background-image: linear-gradient(
		to bottom,
		var(--hx-accent) 0%,
		color-mix(in srgb, var(--hx-accent) 70%, var(--hx-accent2)) 62%,
		var(--hx-accent2) 100%);
	transform-origin: 50% 0;
	transform: scaleY(1);
}

.hx-stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.55rem 0;
	padding: 0 0 2.4rem 1.9rem;
	scroll-margin-top: 1rem;
}

.hx-stage::before {
	content: "";
	position: absolute;
	top: 0.62rem;
	left: calc(var(--hx-rail-x) - 0.3rem);
	width: 0.62rem;
	height: 0.62rem;
	box-sizing: border-box;
	border: 1px solid var(--hx-accent2);
	background-color: var(--hx-bg);
	transform: rotate(45deg);
	transition:
		background-color var(--hx-t) var(--hx-ease),
		border-color var(--hx-t) var(--hx-ease),
		transform var(--hx-t-slow) var(--hx-ease-snap);
}

.hx-stage:target::before {
	background-color: var(--hx-accent);
	border-color: var(--hx-accent);
	transform: rotate(45deg) scale(1.3);
}

.hx-note {
	grid-area: note;
	margin: 0;
	padding: 0.5rem 0 0.5rem 0.7rem;
	border-left: 2px solid var(--hx-accent2);
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--hx-quiet);
	transition: border-color var(--hx-t) var(--hx-ease);
}

.hx-note:hover {
	border-left-color: var(--hx-accent);
}

.hx-note__head {
	display: block;
	margin-bottom: 0.18rem;
	font-size: 0.64rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--hx-accent);
}

.hx-note__doc {
	display: block;
	margin-top: 0.35rem;
	padding-top: 0.3rem;
	border-top: 1px dotted var(--hx-rule-warm);
	font-size: 0.7rem;
	letter-spacing: 0.03em;
	color: var(--hx-faint);
}

.hx-body {
	grid-area: body;
	min-width: 0;
}

/* inside a stage the body column IS the measure, so a paragraph fills it
   rather than stopping short and leaving the dotted leader hanging */
.hx-body .hx-p,
.hx-body .hx-list,
.hx-body .hx-small {
	max-width: none;
}

.hx-stage {
	grid-template-areas:
		"note"
		"body";
}

@media (min-width: 56rem) {
	.hx-stage {
		grid-template-columns: 12.4rem 2.6rem minmax(0, 1fr);
		grid-template-areas: "note spine body";
		gap: 0 0;
		padding: 0 0 2.9rem 0;
	}

	.hx-note {
		padding: 0.1rem 1rem 0 0;
		border-left: 0;
		border-right: 1px solid transparent;
		text-align: right;
	}

	.hx-note:hover {
		border-right-color: var(--hx-accent);
	}

	.hx-note__doc {
		border-top-color: var(--hx-rule);
	}
}

/* ------------------------------------------------------------------ 6. hoarding peel */

.hx-hoard {
	position: relative;
	margin: 1.5rem 0 0;
	padding: 0;
	max-width: 40rem;
	perspective: 900px;
	perspective-origin: 50% 40%;
}

.hx-hoard__stage {
	position: relative;
	border: 1px solid var(--hx-rule);
	background-color: var(--hx-sunk);
	overflow: hidden;
}

.hx-plot {
	display: block;
	width: 100%;
	height: auto;
}

.hx-plot__ground {
	fill: color-mix(in srgb, var(--hx-surface) 70%, var(--hx-bg));
}

.hx-plot__road {
	fill: color-mix(in srgb, var(--hx-bg) 80%, #000000);
}

.hx-plot__hatch {
	stroke: var(--hx-accent2);
	stroke-width: 0.8;
	opacity: 0.5;
}

.hx-plot__ghost {
	fill: none;
	stroke: var(--hx-accent2);
	stroke-width: 1.4;
	stroke-dasharray: 5 4;
	opacity: 0.62;
}

.hx-plot__dim {
	stroke: var(--hx-accent2);
	stroke-width: 1;
	fill: none;
}

.hx-plot__row {
	fill: none;
	stroke: var(--hx-accent2);
	stroke-width: 1;
	stroke-dasharray: 2 3;
}

.hx-plot__bound {
	fill: color-mix(in srgb, var(--hx-accent) 8%, transparent);
	stroke: var(--hx-accent);
	stroke-width: 2.2;
	stroke-linejoin: round;
	stroke-dasharray: 1260;
	stroke-dashoffset: 0;
}

.hx-plot__label {
	font-family: var(--hx-sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	fill: var(--hx-ink);
	opacity: 1;
}

.hx-plot__label--warm {
	fill: var(--hx-accent);
}

.hx-plot__n {
	fill: var(--hx-accent2);
	stroke: none;
}

.hx-hoard__panels {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	transform-style: preserve-3d;
	pointer-events: none;
}

.hx-hoard__panel {
	position: relative;
	display: block;
	/* plywood sheeting wrapped in scrim: the weft runs over the board, two
	   rails run across it, and each sheet butts the next on a dark joint */
	background-color: color-mix(in srgb, var(--hx-surface) 76%, var(--hx-ink));
	background-image:
		linear-gradient(0deg,
			transparent 0 14%,
			color-mix(in srgb, #000000 34%, transparent) 14% 16%,
			transparent 16% 80%,
			color-mix(in srgb, #000000 34%, transparent) 80% 82%,
			transparent 82%),
		repeating-linear-gradient(90deg,
			transparent 0 calc(var(--hx-weft) * 0.5),
			color-mix(in srgb, #000000 26%, transparent) calc(var(--hx-weft) * 0.5) var(--hx-weft)),
		repeating-linear-gradient(0deg,
			transparent 0 calc(var(--hx-weft) * 0.5),
			color-mix(in srgb, var(--hx-ink) 11%, transparent) calc(var(--hx-weft) * 0.5) var(--hx-weft));
	border-right: 2px solid color-mix(in srgb, #000000 56%, transparent);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--hx-accent2) 36%, transparent),
		inset 6px 0 14px -8px color-mix(in srgb, #000000 70%, transparent);
	transform-origin: left center;
	backface-visibility: hidden;
	transform: rotateY(-108deg);
	opacity: 0;
}

.hx-hoard__panel[data-hx_panel="2"],
.hx-hoard__panel[data-hx_panel="4"] {
	transform-origin: right center;
}

.hx-hoard__cap {
	margin: 0.6rem 0 0;
	font-size: 0.74rem;
	line-height: 1.5;
	color: var(--hx-faint);
	max-width: 44ch;
}

@keyframes hx-peel {
	0% {
		transform: rotateY(0deg);
		opacity: 1;
	}

	55% {
		transform: rotateY(-62deg);
		opacity: 1;
	}

	100% {
		transform: rotateY(-108deg);
		opacity: 0;
	}
}

@keyframes hx-trace {
	from {
		stroke-dashoffset: 1260;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes hx-snap {
	0% {
		opacity: 0;
		transform: translateY(5px) scale(0.86);
	}

	70% {
		opacity: 1;
		transform: translateY(0) scale(1.07);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes hx-spine {
	from {
		transform: scaleY(0.03);
	}

	to {
		transform: scaleY(1);
	}
}

@keyframes hx-settle {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hx-hoard__panel {
		transform: rotateY(0deg);
		opacity: 1;
		animation: hx-peel 760ms var(--hx-ease) both;
	}

	.hx-hoard__panel[data-hx_panel="1"] { animation-delay: calc(var(--hx-peel-step) * 1); }
	.hx-hoard__panel[data-hx_panel="2"] { animation-delay: calc(var(--hx-peel-step) * 2); }
	.hx-hoard__panel[data-hx_panel="3"] { animation-delay: calc(var(--hx-peel-step) * 3); }
	.hx-hoard__panel[data-hx_panel="4"] { animation-delay: calc(var(--hx-peel-step) * 4); }
	.hx-hoard__panel[data-hx_panel="5"] { animation-delay: calc(var(--hx-peel-step) * 5); }

	.hx-plot__bound {
		animation: hx-trace 1500ms var(--hx-ease) both;
		animation-delay: calc(var(--hx-peel-step) * 3);
	}

	.hx-plot__label {
		opacity: 0;
		transform-box: fill-box;
		transform-origin: 50% 50%;
		animation: hx-snap 420ms var(--hx-ease-snap) both;
		animation-delay: 1980ms;
	}

	.hx-plot__label--late {
		animation-delay: 2180ms;
	}

	.hx-hoard__cap {
		animation: hx-settle 700ms linear both;
		animation-delay: 2300ms;
	}

	@supports (animation-timeline: view()) {
		.hx-spine__ink {
			animation: hx-spine linear both;
			animation-timeline: --hx-run;
			animation-range: entry 100% exit 0%;
		}
	}
}

/* ------------------------------------------------------------------ 7. blocks + tables */

.hx-block {
	padding: 1.5rem 0 0;
	margin: 0 0 1.4rem;
	border-top: 1px solid var(--hx-rule);
}

.hx-block--plain {
	border-top: 0;
	padding-top: 0.4rem;
}

.hx-sub {
	margin: 1.3rem 0 0.5rem;
	font-family: var(--hx-serif);
	font-weight: 700;
	font-size: 1.04rem;
	line-height: 1.25;
	color: var(--hx-accent);
	letter-spacing: 0.01em;
}

.hx-list {
	margin: 0 0 0.9rem;
	padding-left: 1.1rem;
	max-width: 62ch;
}

.hx-item {
	margin: 0 0 0.4rem;
	padding-left: 0.2rem;
}

.hx-item::marker {
	color: var(--hx-accent2);
}

.hx-docs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.6rem 0 1rem;
	padding: 0;
	list-style: none;
}

.hx-doc {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	border: 1px solid var(--hx-rule-warm);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--hx-quiet);
	background-color: color-mix(in srgb, var(--hx-surface) 50%, transparent);
	transition: color var(--hx-t) var(--hx-ease), border-color var(--hx-t) var(--hx-ease), background-color var(--hx-t) var(--hx-ease);
}

.hx-doc:hover {
	color: var(--hx-ink);
	border-color: var(--hx-accent);
	background-color: color-mix(in srgb, var(--hx-accent) 12%, transparent);
}

.hx-table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0.4rem 0 1rem;
	font-size: 0.8rem;
}

@media (min-width: 40rem) {
	.hx-table {
		table-layout: auto;
		font-size: 0.86rem;
	}
}

.hx-table caption {
	text-align: left;
	padding-bottom: 0.4rem;
	font-size: 0.68rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--hx-faint);
}

.hx-th {
	text-align: left;
	padding: 0.35rem 0.45rem 0.35rem 0;
	border-bottom: 1px solid var(--hx-rule-warm);
	font-weight: 400;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hx-sage);
	vertical-align: bottom;
}

.hx-td {
	padding: 0.42rem 0.45rem 0.42rem 0;
	border-bottom: 1px solid var(--hx-rule);
	vertical-align: top;
	color: var(--hx-quiet);
	overflow-wrap: break-word;
}

.hx-td--key {
	color: var(--hx-ink);
	white-space: normal;
}

@media (min-width: 40rem) {
	.hx-td--key {
		white-space: nowrap;
	}
}

/* a short key/value register reads as a pair, not as two columns thrown to
   opposite edges of the measure */
.hx-table--pairs {
	max-width: 27rem;
}

.hx-td--num {
	font-variant-numeric: tabular-nums;
	text-align: right;
	padding-right: 0;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ 7b. the nine figures

   The body of the index is nine sections and no two of them are set the
   same way. The order is fixed: wide figure, margin annotation, step
   chain, stacked panels, pull quote, offset split, ledger, band, cards.
   Everything here is composition only - the palette, the leaders, the
   notes in the margin and the spine are unchanged and are shared with the
   sub-pages, which use none of these.                                    */

/* a section that sits on the spine but is not a stage: at the narrow width
   it clears the spine the way a stage does, and at the wide width it starts
   where the stage BODY starts, so the consent margin stays empty beside it */
.hx-run {
	position: relative;
	margin: 0 0 1.5rem;
	padding: 1.4rem 0 1.3rem 1.9rem;
	border-top: 1px solid var(--hx-rule);
}

@media (min-width: 56rem) {
	.hx-run {
		margin: 0 0 2rem 15rem;
		padding: 1.5rem 0 1.4rem;
	}
}

/* --- 1 - wide figure ------------------------------------------------- */

.hx-fig {
	margin: 0 0 1.9rem;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--hx-rule);
}

.hx-fig__frame {
	margin: 0.95rem 0 0;
	padding: 0;
}

.hx-fig__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 1px solid var(--hx-rule);
	background-color: var(--hx-sunk);
	filter: saturate(0.94);
	transition: filter var(--hx-t-slow) var(--hx-ease), border-color var(--hx-t) var(--hx-ease);
}

.hx-fig__frame:hover .hx-fig__img {
	filter: saturate(1.04);
	border-color: var(--hx-rule-warm);
}

.hx-fig__cap {
	display: grid;
	gap: 0.55rem 1.8rem;
	margin: 0.7rem 0 0;
	padding: 0.6rem 0 0;
	border-top: 1px solid var(--hx-rule-warm);
}

@media (min-width: 44rem) {
	.hx-fig__cap {
		grid-template-columns: 1.3fr 1fr;
		gap: 0 1.8rem;
	}
}

.hx-fig__lede {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.58;
	color: var(--hx-ink);
}

.hx-fig__side {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--hx-faint);
}

/* --- 2 - margin annotation ------------------------------------------- */

.hx-annot {
	display: grid;
	align-items: start;
	gap: 0 1.1rem;
	margin: 0;
}

.hx-annot__p {
	margin: 0 0 0.8rem;
}

.hx-annot__gloss {
	margin: -0.2rem 0 1.1rem;
	padding: 0.3rem 0 0.3rem 0.7rem;
	border-left: 1px solid var(--hx-rule-warm);
	font-size: 0.75rem;
	line-height: 1.48;
	color: var(--hx-faint);
	transition: border-left-color var(--hx-t) var(--hx-ease), color var(--hx-t) var(--hx-ease);
}

.hx-annot__gloss:hover {
	border-left-color: var(--hx-accent);
	color: var(--hx-quiet);
}

.hx-annot__key {
	display: block;
	font-weight: 400;
	font-size: 0.63rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hx-sage);
}

@media (min-width: 56rem) {
	.hx-annot {
		grid-template-columns: minmax(0, 1fr) 8.9rem;
	}

	.hx-annot__p {
		grid-column: 1;
		margin-bottom: 1.15rem;
	}

	.hx-annot__gloss {
		grid-column: 2;
		margin: 0.2rem 0 1.15rem;
		padding: 0 0 0 0.75rem;
		border-left-color: var(--hx-rule);
	}
}

/* --- 3 - step chain --------------------------------------------------- */

.hx-chain {
	list-style: none;
	display: grid;
	gap: 1.5rem 1.2rem;
	margin: 1.1rem 0 1.2rem;
	padding: 0;
}

@media (min-width: 22rem) {
	.hx-chain {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 56rem) {
	.hx-chain {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0 1.1rem;
	}

	/* a two-line name in one column must not drop that column's answer below
	   its neighbours: both text rows reserve the taller of the two */
	.hx-chain__name {
		min-height: 2.05rem;
	}

	.hx-chain__sum {
		min-height: 2.2rem;
	}
}

.hx-chain__link {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}

/* the link in the chain: a rule from this ring to the next one. Vertical
   while the steps are stacked, horizontal once they stand in a row. Drawn by
   POSITION - :not(:last-child) - so the last ring can never grow a tail into
   nothing, whatever the breakpoint does to the one before it. */
.hx-chain__link:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 0.72rem;
	top: 1.5rem;
	width: 1px;
	height: 1.3rem;
	background-color: var(--hx-rule-warm);
}

@media (min-width: 22rem) {
	.hx-chain__link:not(:last-child)::after {
		left: auto;
		right: -1.2rem;
		top: 0.73rem;
		width: 1.2rem;
		height: 1px;
	}

	/* two across: the second of a pair ends its row, so it links to nothing */
	.hx-chain__link:nth-child(2n)::after {
		content: none;
	}
}

@media (min-width: 56rem) {
	.hx-chain__link:nth-child(2n):not(:last-child)::after {
		content: "";
	}

	.hx-chain__link:not(:last-child)::after {
		right: -1.1rem;
		width: 1.1rem;
	}
}

.hx-chain__no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.45rem;
	height: 1.45rem;
	box-sizing: border-box;
	border: 1px solid var(--hx-accent2);
	border-radius: 50%;
	background-color: var(--hx-bg);
	font-family: var(--hx-serif);
	font-weight: 700;
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	color: var(--hx-sage);
	transition: border-color var(--hx-t) var(--hx-ease), color var(--hx-t) var(--hx-ease);
}

.hx-chain__link:hover .hx-chain__no {
	border-color: var(--hx-accent);
	color: var(--hx-accent);
}

.hx-chain__name {
	display: block;
	margin: 0.5rem 0 0.25rem;
	font-size: 0.68rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--hx-sage);
}

.hx-chain__sum {
	display: block;
	font-size: 0.78rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	color: var(--hx-quiet);
}

.hx-chain__val {
	display: block;
	margin-top: 0.22rem;
	font-family: var(--hx-serif);
	font-weight: 700;
	font-size: 1.22rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	color: var(--hx-ink);
}

.hx-chain__link--end .hx-chain__val {
	color: var(--hx-accent);
}

/* a sheet that is not boxed: the chain carries the eye, so a panel round it
   would only fight the rings. Two classes, because the panel it is undoing is
   declared further down the file and would otherwise win on source order. */
.hx-tool.hx-tool--open {
	border: 0;
	padding: 0;
	background-color: transparent;
}

.hx-draw--massing {
	max-width: 26rem;
	margin-top: 0.2rem;
}

/* --- 4 - stacked panels ---------------------------------------------- */

.hx-lap {
	position: relative;
	margin: 0.95rem 0 0.3rem;
}

.hx-lap__plate {
	position: relative;
	z-index: 0;
	margin: 0;
	padding: 0.5rem 0.5rem 2.2rem;
	border: 1px solid var(--hx-rule);
	background-color: var(--hx-sunk);
}

.hx-lap__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: saturate(0.9) contrast(1.02);
	transition: filter var(--hx-t-slow) var(--hx-ease);
}

.hx-lap__plate:hover .hx-lap__img {
	filter: saturate(1) contrast(1.02);
}

.hx-lap__cap {
	margin: 0.5rem 0 0;
	font-size: 0.72rem;
	line-height: 1.45;
	color: var(--hx-faint);
	max-width: 42ch;
}

.hx-lap__sheet {
	position: relative;
	z-index: 1;
	margin: -1.5rem 0 0 0.9rem;
	padding: 0.9rem 0.95rem 0.1rem;
	border: 1px solid var(--hx-rule-warm);
	background-color: color-mix(in srgb, var(--hx-surface) 96%, var(--hx-bg));
	box-shadow: -8px -8px 22px -14px color-mix(in srgb, #000000 86%, transparent);
	transition: border-color var(--hx-t) var(--hx-ease);
}

.hx-lap__sheet:hover {
	border-color: var(--hx-accent);
}

@media (min-width: 46rem) {
	.hx-lap__plate {
		margin-right: 2.6rem;
		padding-bottom: 2.6rem;
	}

	.hx-lap__sheet {
		margin: -2.6rem 0 0 2.8rem;
		padding: 1.15rem 1.25rem 0.3rem;
	}
}

/* --- 5 - pull quote --------------------------------------------------- */

.hx-quote {
	border-top-color: var(--hx-rule-warm);
}

.hx-quote__cue {
	margin: 0 0 0.6rem;
	font-size: 0.66rem;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--hx-sage);
}

.hx-quote__line {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.hx-quote__line p {
	margin: 0;
	font-family: var(--hx-serif);
	font-weight: 700;
	font-size: clamp(1.4rem, 1.02rem + 1.9vw, 2.18rem);
	line-height: 1.16;
	letter-spacing: -0.004em;
	color: var(--hx-ink);
	text-wrap: balance;
}

.hx-quote__line p::first-letter {
	color: var(--hx-accent);
}

/* --- 6 - offset split ------------------------------------------------- */

.hx-split {
	display: grid;
	gap: 1rem 0;
	margin: 0.6rem 0 0;
}

.hx-split__text > .hx-p:last-child {
	margin-bottom: 0.3rem;
}

.hx-split__fig {
	margin: 0;
}

.hx-split__cap {
	margin: 0.45rem 0 0;
	font-size: 0.72rem;
	line-height: 1.45;
	color: var(--hx-faint);
}

.hx-sect {
	display: block;
	width: 100%;
	max-width: 15rem;
	height: auto;
	background-color: var(--hx-sunk);
	border: 1px solid var(--hx-rule);
}

.hx-sect__sky {
	fill: color-mix(in srgb, var(--hx-bg) 88%, #000000);
}

.hx-sect__soil {
	stroke: var(--hx-accent2);
	stroke-width: 0.8;
	opacity: 0.45;
}

.hx-sect__grade {
	stroke: var(--hx-accent2);
	stroke-width: 1.4;
	fill: none;
}

.hx-sect__conc {
	fill: color-mix(in srgb, var(--hx-accent2) 36%, var(--hx-bg));
	stroke: var(--hx-accent2);
	stroke-width: 1;
}

.hx-sect__mass {
	fill: color-mix(in srgb, var(--hx-surface) 86%, var(--hx-ink));
	stroke: var(--hx-rule-warm);
	stroke-width: 1;
}

.hx-sect__course {
	stroke: var(--hx-rule);
	stroke-width: 0.8;
	fill: none;
}

.hx-sect__dpc {
	stroke: var(--hx-accent);
	stroke-width: 2.6;
	stroke-dasharray: 7 3;
	fill: none;
}

.hx-sect__slab {
	fill: color-mix(in srgb, var(--hx-accent2) 30%, var(--hx-bg));
	stroke: var(--hx-accent2);
	stroke-width: 1;
}

.hx-sect__wall {
	fill: color-mix(in srgb, var(--hx-surface) 92%, var(--hx-ink));
	stroke: var(--hx-rule-warm);
	stroke-width: 1;
}

.hx-sect__floor {
	stroke: var(--hx-accent2);
	stroke-width: 2;
	fill: none;
}

.hx-sect__roof {
	fill: none;
	stroke: var(--hx-accent);
	stroke-width: 2.2;
	stroke-linejoin: round;
}

.hx-sect__pipe {
	fill: color-mix(in srgb, var(--hx-accent) 30%, var(--hx-bg));
	stroke: var(--hx-accent);
	stroke-width: 1.4;
}

.hx-sect__fall {
	stroke: var(--hx-accent);
	stroke-width: 1.2;
	stroke-dasharray: 3 2;
	fill: none;
}

.hx-sect__tick {
	stroke: var(--hx-rule-warm);
	stroke-width: 0.8;
	stroke-dasharray: 2 2;
	fill: none;
}

.hx-sect__label {
	font-family: var(--hx-sans);
	font-size: 9px;
	letter-spacing: 0.1em;
	fill: var(--hx-quiet);
}

.hx-sect__label--warm {
	fill: var(--hx-accent);
}

@media (min-width: 56rem) {
	.hx-split {
		grid-template-columns: minmax(0, 1fr) 11.4rem;
		gap: 0;
		align-items: start;
	}

	.hx-split__text {
		padding-right: 1.9rem;
		border-right: 1px solid var(--hx-rule);
	}

	/* the narrow side hangs back across the gutter rule it was given */
	.hx-split__fig {
		margin-left: -1.6rem;
		margin-top: 0.35rem;
	}

	.hx-sect {
		max-width: none;
	}
}

/* --- 7 - ledger ------------------------------------------------------- */

.hx-ledger {
	width: 100%;
	/* fixed, so that a date control's intrinsic minimum width cannot push the
	   table past the measure - which is exactly what it did at 390 px */
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0.6rem 0 0.7rem;
	font-size: 0.82rem;
}

.hx-ledger caption {
	text-align: left;
	padding-bottom: 0.45rem;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hx-faint);
}

.hx-th--right {
	text-align: right;
	padding-right: 0;
}

.hx-ledger__row {
	transition: background-color var(--hx-t) var(--hx-ease);
}

.hx-ledger__row:hover {
	background-color: color-mix(in srgb, var(--hx-ink) 4%, transparent);
}

.hx-ledger__key {
	width: 34%;
	text-align: left;
	padding: 0.46rem 0.5rem 0.46rem 0;
	border-bottom: 1px dotted var(--hx-rule-warm);
	font-weight: 400;
	font-size: 0.68rem;
	/* tracked tight below the breakpoint: DETERMINATION is one word and the
	   page breaks words that do not fit, so the column has to hold it whole */
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--hx-sage);
	vertical-align: baseline;
}

@media (min-width: 34rem) {
	.hx-ledger__key {
		width: 9.4rem;
		letter-spacing: 0.1em;
		white-space: nowrap;
	}
}

.hx-ledger__sum {
	padding: 0.46rem 0.5rem 0.46rem 0;
	border-bottom: 1px dotted var(--hx-rule);
	font-variant-numeric: tabular-nums;
	color: var(--hx-quiet);
	vertical-align: baseline;
}

.hx-ledger__val {
	width: 34%;
	padding: 0.46rem 0 0.46rem 0.3rem;
	border-bottom: 1px dotted var(--hx-rule);
	text-align: right;
	font-family: var(--hx-serif);
	font-weight: 700;
	font-size: 0.96rem;
	font-variant-numeric: tabular-nums;
	color: var(--hx-ink);
	vertical-align: baseline;
	overflow-wrap: break-word;
}

@media (min-width: 34rem) {
	.hx-ledger__val {
		width: auto;
		white-space: nowrap;
	}
}

.hx-ledger__row--total .hx-ledger__key,
.hx-ledger__row--total .hx-ledger__sum,
.hx-ledger__row--total .hx-ledger__val {
	border-bottom: 0;
	border-top: 1px solid var(--hx-rule-warm);
	padding-top: 0.56rem;
}

.hx-ledger__row--total .hx-ledger__val {
	color: var(--hx-accent);
	font-size: 1.12rem;
}

/* the periods are entered ON the rule, as rows of the same ledger - there is
   no separate panel of boxes above it, because that is how the OTHER sheet on
   this page is set and two sheets that open the same way read as one figure */
.hx-ledger__entry {
	padding: 0.3rem 0.5rem 0.3rem 0;
	border-bottom: 1px dotted var(--hx-rule);
	vertical-align: middle;
}

.hx-field__input--cell {
	flex: 1 1 7.6rem;
	min-width: 0;
	margin-top: 0;
	padding: 0.26rem 0.4rem;
	font-size: 0.88rem;
	max-width: 9.5rem;
}

/* the entry cell spans the two working columns, so the control keeps its
   width at 320 px and the unit sits beside it instead of in a third column */
.hx-ledger__entrybox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0.5rem;
	min-width: 0;
}

.hx-ledger__unit {
	min-width: 0;
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	line-height: 1.35;
	color: var(--hx-faint);
	/* the page breaks long words by default; a unit is not a long word */
	overflow-wrap: normal;
	word-break: keep-all;
}

.hx-ledger__row--entry .hx-ledger__key {
	color: var(--hx-quiet);
}

/* the heavy rule the caption names: entries above it, arithmetic below */
.hx-ledger__worked .hx-ledger__row:first-child .hx-ledger__key,
.hx-ledger__worked .hx-ledger__row:first-child .hx-ledger__sum,
.hx-ledger__worked .hx-ledger__row:first-child .hx-ledger__val {
	border-top: 2px solid var(--hx-rule-warm);
	padding-top: 0.6rem;
}

/* --- 8 - band --------------------------------------------------------- */

.hx-band {
	position: relative;
	z-index: 1;
	margin: 0.4rem -1rem 2rem;
	padding: 1.5rem 1rem 1.6rem;
	border-top: 1px solid var(--hx-rule-warm);
	border-bottom: 1px solid var(--hx-rule-warm);
	background-color: color-mix(in srgb, var(--hx-surface) 90%, var(--hx-bg));
	/* the weft runs on the diagonal here so the band reads as a different
	   cloth from the page it is laid across */
	background-image: repeating-linear-gradient(135deg,
		transparent 0 calc(var(--hx-weft) * 1.1),
		color-mix(in srgb, var(--hx-accent) 5%, transparent) calc(var(--hx-weft) * 1.1) calc(var(--hx-weft) * 1.6));
}

@media (min-width: 56rem) {
	.hx-band {
		margin: 0.6rem -1.2rem 2.4rem;
		padding: 2rem 2.2rem 2.1rem;
	}
}

.hx-band__inner {
	max-width: 33rem;
	margin: 0 auto;
	text-align: center;
}

@media (min-width: 46rem) {
	.hx-band__head {
		flex-wrap: nowrap;
		max-width: 38rem;
		margin-left: auto;
		margin-right: auto;
	}
}

.hx-band__head {
	justify-content: center;
	text-align: center;
	margin-bottom: 1rem;
}

.hx-band__head .hx-lead__dots {
	flex: 0 1 4.5rem;
	min-width: 1.6rem;
}

.hx-band__figure {
	margin: 0 0 0.9rem;
}

.hx-band__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 1px solid var(--hx-rule-warm);
	filter: saturate(0.92);
	transition: filter var(--hx-t-slow) var(--hx-ease);
}

.hx-band__figure:hover .hx-band__img {
	filter: saturate(1.05);
}

@media (min-width: 46rem) {
	.hx-band__img {
		aspect-ratio: 21 / 9;
	}
}

.hx-band__cap {
	margin: 0.5rem 0 0;
	font-size: 0.71rem;
	line-height: 1.45;
	color: var(--hx-faint);
}

.hx-band__p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--hx-ink);
	text-wrap: pretty;
}

/* --- 9 - cards -------------------------------------------------------- */

.hx-cards {
	list-style: none;
	display: grid;
	gap: 0.7rem;
	margin: 0.85rem 0 0.3rem;
	padding: 0;
}

@media (min-width: 24rem) {
	.hx-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 56rem) {
	.hx-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.6rem;
	}
}

.hx-card {
	margin: 0;
	padding: 0.55rem 0.65rem 0.7rem;
	border: 1px solid var(--hx-rule);
	border-top: 2px solid var(--hx-accent2);
	background-color: color-mix(in srgb, var(--hx-surface) 50%, transparent);
	transition: border-top-color var(--hx-t) var(--hx-ease), background-color var(--hx-t) var(--hx-ease);
}

.hx-card:hover {
	border-top-color: var(--hx-accent);
	background-color: color-mix(in srgb, var(--hx-surface) 78%, transparent);
}

.hx-card__no {
	display: block;
	font-family: var(--hx-serif);
	font-weight: 700;
	font-size: 0.74rem;
	color: var(--hx-sage);
}

.hx-card__key {
	display: block;
	margin: 0.1rem 0 0.3rem;
	font-weight: 400;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hx-accent);
}

.hx-card__fact {
	display: block;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--hx-quiet);
}

/* ------------------------------------------------------------------ 8. widgets */

.hx-tool {
	margin: 1.2rem 0 0;
	padding: 1rem;
	border: 1px solid var(--hx-rule-warm);
	background-color: color-mix(in srgb, var(--hx-surface) 64%, transparent);
}

.hx-tool__head {
	margin: 0 0 0.2rem;
	font-family: var(--hx-serif);
	font-weight: 700;
	font-size: 1rem;
	color: var(--hx-ink);
}

.hx-tool__note {
	margin: 0 0 0.9rem;
	font-size: 0.76rem;
	line-height: 1.5;
	color: var(--hx-faint);
	max-width: 56ch;
}

.hx-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.7rem;
	margin: 0 0 1rem;
	border: 0;
	padding: 0;
}

@media (min-width: 34rem) {
	.hx-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.hx-fields--four {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.hx-field {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hx-sage);
}

.hx-field__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.25rem;
	padding: 0.42rem 0.5rem;
	font-family: var(--hx-sans);
	font-size: 0.98rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hx-ink);
	background-color: var(--hx-sunk);
	border: 1px solid var(--hx-rule);
	border-radius: 0;
	transition: border-color var(--hx-t) var(--hx-ease), background-color var(--hx-t) var(--hx-ease);
}

.hx-field__input:hover {
	border-color: var(--hx-rule-warm);
}

.hx-field__input:focus {
	border-color: var(--hx-accent);
	background-color: color-mix(in srgb, var(--hx-bg) 80%, var(--hx-accent));
}

.hx-field__hint {
	display: block;
	margin-top: 0.22rem;
	font-size: 0.66rem;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--hx-faint);
}

.hx-draw {
	display: block;
	width: 100%;
	max-width: 30rem;
	height: auto;
	margin: 0.3rem 0 0.9rem;
	background-color: var(--hx-sunk);
	border: 1px solid var(--hx-rule);
}

.hx-draw__plot {
	fill: color-mix(in srgb, var(--hx-surface) 80%, var(--hx-bg));
	stroke: var(--hx-accent2);
	stroke-width: 1;
}

.hx-draw__foot {
	fill: color-mix(in srgb, var(--hx-accent) 26%, transparent);
	stroke: var(--hx-accent);
	stroke-width: 1.2;
	transition: all var(--hx-t-slow) var(--hx-ease);
}

.hx-draw__storey {
	fill: color-mix(in srgb, var(--hx-accent) 18%, transparent);
	stroke: var(--hx-accent);
	stroke-width: 1;
	transition: all var(--hx-t-slow) var(--hx-ease);
}

.hx-draw__axis {
	stroke: var(--hx-rule-warm);
	stroke-width: 1;
	fill: none;
}

.hx-draw__text {
	font-family: var(--hx-sans);
	font-size: 8px;
	fill: var(--hx-quiet);
	letter-spacing: 0.08em;
}

/* the section through the foundation is drawn on a 560-unit viewBox, so it
   is allowed more width and carries its labels at the larger size */
.hx-draw--wide {
	max-width: 44rem;
}

.hx-draw--wide .hx-draw__text {
	font-size: 10px;
}

.hx-draw__text--ink {
	fill: var(--hx-ink);
}

/* section through a foundation: the construction page draws the notified
   points on it, so the fills are earth, concrete, slab and marker */

.hx-draw__ground {
	fill: color-mix(in srgb, var(--hx-bg) 82%, #000000);
}

.hx-draw__slab {
	fill: color-mix(in srgb, var(--hx-accent2) 34%, var(--hx-bg));
	stroke: var(--hx-accent2);
	stroke-width: 1;
}

.hx-draw__lead {
	fill: none;
	stroke: var(--hx-rule-warm);
	stroke-width: 1;
	stroke-dasharray: 3 3;
}

.hx-draw__mark {
	fill: var(--hx-accent);
	stroke: none;
	transition: fill var(--hx-t) var(--hx-ease);
}

.hx-draw:hover .hx-draw__mark {
	fill: var(--hx-ink);
}

.hx-draw__markno {
	font-family: var(--hx-sans);
	font-size: 11px;
	font-weight: 400;
	fill: var(--hx-bg);
	letter-spacing: 0;
}

.hx-guide {
	margin: 0;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hx-sage);
}

/* ------------------------------------------------------------------ 9. footer */

.hx-foot {
	margin-top: 2.4rem;
	padding: 1.4rem 0 3.2rem;
	border-top: 2px solid var(--hx-rule-warm);
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--hx-quiet);
}

.hx-foot__name {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--hx-serif);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.1em;
	color: var(--hx-ink);
}

.hx-foot__addr {
	margin: 0 0 0.7rem;
	font-style: normal;
}

.hx-foot__line {
	display: block;
}

.hx-foot__reg {
	display: block;
	font-size: 0.76rem;
	color: var(--hx-faint);
}

.hx-foot__mail {
	color: var(--hx-accent);
	text-decoration-color: color-mix(in srgb, var(--hx-accent) 40%, transparent);
	text-underline-offset: 0.2em;
	transition: color var(--hx-t) var(--hx-ease), text-decoration-color var(--hx-t) var(--hx-ease);
}

.hx-foot__mail:hover {
	color: var(--hx-ink);
	text-decoration-color: var(--hx-ink);
}

.hx-foot__note {
	margin: 0.8rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px dotted var(--hx-rule);
	font-size: 0.76rem;
	line-height: 1.55;
	color: var(--hx-quiet);
	max-width: 62ch;
}

.hx-foot__sic {
	margin: 0.7rem 0 0;
	font-size: 0.72rem;
	color: var(--hx-faint);
	max-width: 60ch;
}

/* ------------------------------------------------------------------ 10. reduced motion

   Everything that moves is opted into above, inside
   (prefers-reduced-motion: no-preference). This block is the landing: the
   durations that drive every transition are set to zero at the root, where
   they are inherited from, and the set-piece is put in its finished state -
   hoarding gone, boundary closed, dimension labels placed - rather than
   being made faster.                                                      */

@media (prefers-reduced-motion: reduce) {
	:root {
		--hx-t: 0s;
		--hx-t-slow: 0s;
		--hx-peel-step: 0s;
		scroll-behavior: auto;
	}

	.hx-hoard__panels {
		display: none;
	}

	.hx-plot__bound {
		stroke-dashoffset: 0;
		animation: none;
	}

	.hx-plot__label {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.hx-hoard__cap {
		opacity: 1;
		animation: none;
	}

	.hx-spine__ink {
		transform: scaleY(1);
		animation: none;
	}
}

/* ------------------------------------------------------------------ 11. print */

@media print {
	.hx-page {
		background-image: none;
		background-color: #ffffff;
		color: #000000;
	}

	.hx-rail,
	.hx-hoard__panels {
		display: none;
	}

	.hx-shell {
		display: block;
		max-width: none;
	}
}