/*
 * Mond One Living — "The Open Wall"
 * See DESIGN.md at the project root. Two invariants hold everywhere:
 * zero corner radius, and no box-shadow. Depth is drawn, not lit.
 */

:root {
	scroll-padding-top: 5.5rem;
	scroll-padding-bottom: 5.5rem;
	--ground: #f2f1ee;
	--ink: #16191c;
	--anthracite: #2e3134;
	--zinc: #7e8b96;
	--zinc-ink: #55636f;
	--cement: #9e9a93;
	--cement-ink: #6b675f;
	/*
	 * Mineral wool, drawn in the accent's own hue rather than in the amber it
	 * used to carry. The layer is still the one warm thing in a sheet of
	 * greys — which is the whole of its job — but it is now warm in the
	 * sheet's colour, so the opened wall and the chrome that points at it are
	 * not two unrelated oranges arguing across the same screen.
	 *
	 * Kept as their own tokens, not aliases of --accent, because these are
	 * tuned against the black line work that sits on top of them: the massing
	 * volumes are outlined in ink at 1.4px, so the fills stay in the mid range
	 * where that line stays crisp. Only the hero slab, which is large and
	 * unhatched at its edges, goes as dark as the accent itself.
	 */
	--wool: #96775e;
	--wool-deep: #543c2c;

	/*
	 * The accent, which is the sheet's own colour and not a material's.
	 *
	 * Three values because the sheet has two grounds. --accent is for the pale
	 * sheet, where it reads as text at 6.5:1 and carries white at 7.3:1;
	 * --accent-lift is the same hue brought up to clear the black contact
	 * panel, where the accent itself sits at 2.4:1 and cannot be seen;
	 * --accent-deep is the press, one step down from the accent.
	 */
	--accent: #6e503b;
	--accent-deep: #543c2c;
	--accent-lift: #b08a68;
	--panel: #e8e6e1;
	--timber: #7f5f45;
	--rule: #d5d3cd;
	--rule-strong: #b3b1aa;

	/* Material fills referenced by the SVG hatch patterns. */
	--c-panel: #e2dfd9;
	--c-cement: #9e9a93;
	--c-wool: #b99b84;
	--c-wool-deep: #543c2c;
	--c-facade: #eceae5;
	--c-board: #f1efea;

	--sheet-inset: 12px;

	/* The sheet border and the title block are pinned to the physical edges of
	   the screen, so on a phone they have to clear the notch and the home
	   indicator rather than sit under them. Everywhere else these resolve to the
	   plain inset. */
	--edge-t: max(var(--sheet-inset), env(safe-area-inset-top));
	--edge-r: max(var(--sheet-inset), env(safe-area-inset-right));
	--edge-b: max(var(--sheet-inset), env(safe-area-inset-bottom));
	--edge-l: max(var(--sheet-inset), env(safe-area-inset-left));

	--head-h: 95px;
	--pad: clamp(1.25rem, 4vw, 4rem);
	--band: clamp(4.5rem, 10vw, 9rem);
	--measure: 64ch;

	/*
	 * The label role, as one value rather than as a habit.
	 *
	 * Every mono string on this sheet is the same kind of thing — a dimension, a
	 * material code, a drawing metadatum — so there is exactly one size for all
	 * of them, and DESIGN.md sets its floor at 0.6875rem. Written as a token
	 * because the alternative had already drifted to 9px in two places and 10px
	 * in two more, each defensible on its own and none of them the system.
	 *
	 * 11px is also the floor this audience needs: older buyers reading a phone
	 * outdoors in summer daylight. Nine-pixel lettering is not annotation, it is
	 * a rumour.
	 */
	--label-size: 0.6875rem;
	--label-track: 0.09em;

	/* Body, so the one paragraph that says what the company does is not set
	   smaller than the copy further down the page. */
	--body-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: Geologica, ui-sans-serif, system-ui, sans-serif;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.6;
	font-weight: 350;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

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

:focus-visible {
	outline: 2.5px solid var(--accent);
	outline-offset: 3px;
}

.mond-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ink);
	color: var(--panel);
	padding: 0.75rem 1.25rem;
}

.mond-skip:focus {
	left: var(--edge-l);
}

/*
 * A skip destination is focused, not operated, so it takes no ring of its own —
 * except the title block, where landing on the primary action deserves to be
 * visible. Both are tabindex="-1" and never appear in the tab order.
 */
.mond-main:focus {
	outline: none;
}

.mond-titleblock:focus-visible {
	outline: 2.5px solid var(--accent);
	outline-offset: 2px;
}

/* ---------- The sheet ---------- */

.mond-sheet {
	position: fixed;
	inset: var(--edge-t) var(--edge-r) var(--edge-b) var(--edge-l);
	border: 1.5px solid var(--zinc);
	pointer-events: none;
	z-index: 40;
}

.mond-sheet__tick {
	position: absolute;
	width: 13px;
	height: 13px;
	border: 0 solid var(--ink);
}

.mond-sheet__tick--tl { top: -1.5px; left: -1.5px; border-top-width: 3px; border-left-width: 3px; }
.mond-sheet__tick--tr { top: -1.5px; right: -1.5px; border-top-width: 3px; border-right-width: 3px; }
.mond-sheet__tick--bl { bottom: -1.5px; left: -1.5px; border-bottom-width: 3px; border-left-width: 3px; }
.mond-sheet__tick--br { bottom: -1.5px; right: -1.5px; border-bottom-width: 3px; border-right-width: 3px; }

.mond-wrap {
	max-width: 1360px;
	margin-inline: auto;
	padding-inline: var(--pad);
}

/* ---------- Head strip ---------- */

.mond-head {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: calc(var(--edge-t) + 0.7rem) var(--pad) 0.7rem;
	background: var(--ground);
	border-bottom: 1px solid var(--rule);
}

.mond-head__mark img {
	width: 132px;
	height: auto;
}

.mond-head__nav {
	display: flex;
	gap: clamp(0.9rem, 2.2vw, 2.1rem);
	font-size: 0.8125rem;
	letter-spacing: 0.01em;
}

.mond-head__nav a {
	display: flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	color: var(--zinc-ink);
	padding-bottom: 2px;
	border-bottom: 1.5px solid transparent;
	transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.mond-head__nav a:hover {
	color: var(--ink);
	border-bottom-color: var(--accent);
}

/* ---------- Type ---------- */

.mond-h2 {
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin: 0 0 0.65rem;
	text-wrap: balance;
}

.mond-h2--light {
	color: var(--panel);
}

.mond-lede {
	max-width: 52ch;
	margin: 0 0 clamp(2rem, 4vw, 3.25rem);
	color: var(--cement-ink);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
}

/* ---------- Hero ---------- */

.mond-hero {
	height: 230vh;
}

/* The wall opens on scroll, so the state at scroll zero is the closed one. The
   gate is exactly the one the script gates itself on — .mond-js is set in the
   head, and the two queries mirror main.js's own media checks. Fail any of them
   and the default stands: the drawing stays exploded and fully labelled, which is
   the readable state and the only one that carries the layer specifications. */
@media (min-width: 62rem) and (prefers-reduced-motion: no-preference) {
	.mond-js .mond-hero {
		--k: 1;
	}
}

.mond-hero__stage {
	position: sticky;
	top: var(--head-h);
	height: calc(100vh - var(--head-h));
	min-height: 560px;
	display: flex;
	flex-direction: column;
	padding: clamp(0.75rem, 2.2vh, 1.75rem) var(--pad) calc(var(--edge-b) + 5.25rem);
	max-width: 1360px;
	margin-inline: auto;
}

.mond-hero__intro {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: end;
	column-gap: clamp(1.5rem, 5vw, 5rem);
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--rule);
}

.mond-hero__title {
	font-size: clamp(2.25rem, 1rem + 5.1vw, 5.25rem);
	font-weight: 650;
	line-height: 0.98;
	letter-spacing: -0.038em;
	margin: 0;
	text-wrap: balance;
}

.mond-hero__aside {
	padding-bottom: 0.35rem;
}

/*
 * The deck is the only sentence in the first viewport that says what this
 * company does, and it was set two steps under the body copy further down the
 * page — smallest where it mattered most, on the screen most of this audience
 * reads outdoors. It takes the body token now, with no reduction of its own.
 */
.mond-hero__deck {
	margin: 0;
	max-width: 44ch;
	color: var(--cement-ink);
	font-size: var(--body-size);
	line-height: 1.55;
}

/*
 * The claim has to clear the deck it sits under. Left where it was, a 15px
 * claim would now be reading smaller than a 16px deck on a phone and the
 * hierarchy would run backwards, so it moves up a full step rather than a
 * fraction — the gap between them is what makes it read as the conclusion.
 */
.mond-hero__claim {
	margin: 0.7rem 0 0;
	max-width: 40ch;
	font-size: clamp(1.125rem, 1.04rem + 0.36vw, 1.375rem);
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

.mond-hero__state {
	flex: 0 0 auto;
	position: relative;
	margin: 0.85rem 0 0;
	order: -1;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--zinc-ink);
	min-height: 1.2em;
}

.mond-hero__state span {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
}

.mond-hero__state-open {
	opacity: clamp(0, calc(1 - var(--k, 0) * 2.4), 1);
}

.mond-hero__state-closed {
	opacity: clamp(0, calc((var(--k, 0) - 0.62) * 3.4), 1);
	color: var(--accent);
}

/* ---------- Assembly drawing ---------- */

.mond-assembly {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	margin-top: clamp(0.5rem, 2vh, 1.5rem);
}

.mond-assembly__svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* The material hatches are declared once and both projections paint from them,
   so neither drawing carries a duplicate set of pattern ids. */
.mond-assembly__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/*
 * Which projection is on the sheet.
 *
 * A sheet in landscape and a phone held upright are not the same sheet. Where
 * there is width for the leader column the wall is drawn in the system's own
 * 30° axonometric; held upright, it is redrawn near elevation with the layers
 * exploding down the page — the response a draughtsman makes, which is to turn
 * the view rather than to shrink it. Both are in the document and exactly one
 * is ever displayed, so the drawing can never double.
 */
.mond-assembly__svg--narrow {
	display: none;
}

@media (max-width: 61.999rem) and (max-aspect-ratio: 1 / 1) {
	.mond-assembly__svg--wide {
		display: none;
	}

	.mond-assembly__svg--narrow {
		display: block;
		max-width: 26rem;
		margin-inline: auto;
	}
}

.mond-face {
	stroke: var(--ink);
	stroke-width: 1.4;
	stroke-linejoin: miter;
	vector-effect: non-scaling-stroke;
}

.mond-face--front { fill: var(--face, var(--panel)); }
.mond-face--top { fill: var(--top, var(--panel)); }
.mond-face--end { fill: var(--end, var(--cement)); }

/* The closed wall also sits forward, holding the space the label column will
   need: as it opens it retreats and hands that space over.

   Written as translate → scale → un-translate about the wall's own centre, so
   the composition does not depend on transform-origin resolution. */
.mond-layers {
	transform-box: view-box;
	transform-origin: 0 0;
	transform:
		translate(
			calc(var(--cx, 0px) + var(--dx, 0px) * var(--k, 0)),
			calc(var(--cy, 0px) + var(--dy, 0px) * var(--k, 0))
		)
		scale(calc(1 + var(--zoom, 0.5) * var(--k, 0)))
		translate(
			calc(-1 * (var(--cx, 0px) + var(--dx, 0px) * var(--k, 0))),
			calc(-1 * (var(--cy, 0px) + var(--dy, 0px) * var(--k, 0)))
		)
		translate(
			calc(var(--dx, 0px) * var(--k, 0)),
			calc(var(--dy, 0px) * var(--k, 0))
		);
}

.mond-layer {
	transform-box: view-box;
	transform: translate(
		calc(var(--close-x, 0px) * var(--k, 0)),
		calc(var(--close-y, 0px) * var(--k, 0))
	);
}

.mond-layer--facade { --face: url(#mond-hatch-facade); --top: #f3f1ec; --end: #cbc8c2; }
.mond-layer--panel  { --face: url(#mond-hatch-panel);  --top: #e6e3dd; --end: #b6b2ab; }
.mond-layer--steel  { --top: #bcc6ce; --end: #67757f; }
.mond-layer--wool   { --face: url(#mond-hatch-wool);   --top: #d0b8a4; --end: #6e503b; }
.mond-layer--board  { --face: url(#mond-hatch-board);  --top: #f4f2ed; --end: #c7c4be; }

/* Steel members are solids, so their three visible faces separate exactly the
   way the slab layers' do: top lightest, flange mid, end darkest. */
.mond-stud {
	stroke: var(--ink);
	stroke-width: 1.2;
	stroke-linejoin: miter;
	vector-effect: non-scaling-stroke;
}

.mond-stud--top { fill: var(--top); }
.mond-stud--front { fill: var(--zinc); }
.mond-stud--end { fill: var(--end); }

.mond-stud-fold {
	stroke: var(--zinc-ink);
	stroke-width: 1;
	fill: none;
	opacity: 0.75;
	vector-effect: non-scaling-stroke;
}

.mond-brace {
	stroke: var(--zinc-ink);
	stroke-width: 1.6;
	fill: none;
	vector-effect: non-scaling-stroke;
}

.mond-leader__line {
	fill: none;
	stroke: var(--zinc);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.mond-leader__dot {
	fill: var(--ink);
}

/*
 * The naming arrives while the wall is still coming apart, not once it has
 * finished: fully legible from a third closed, gone by the time the layers have
 * merged back into one solid. Held back to the very end, the labels — and the
 * reading they gate — only ever existed at the bottom of the scroll.
 */
.mond-leaders {
	opacity: clamp(0, calc(3.25 - var(--k, 0) * 5), 1);
}

.mond-assembly__labels {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 32%;
	max-width: 20rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75rem;
	pointer-events: none;
	opacity: clamp(0, calc(3.25 - var(--k, 0) * 5), 1);
}

.mond-alabel {
	position: relative;
	flex: 0 0 auto;
	padding-inline-start: 1.9rem;
	/* The column itself stays transparent to the pointer so it cannot cover the
	   drawing; the labels in it are pointed at, so they take it back. */
	pointer-events: auto;
}

/* Keynote number: what the properties section's "Слоеви 2–4" refers to. */
.mond-alabel__key {
	position: absolute;
	inset-inline-start: 0;
	top: 0.05rem;
	width: 1.35rem;
	height: 1.35rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.4px solid var(--ink);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	font-weight: 500;
	color: var(--ink);
	background: var(--ground);
}

/*
 * The Dimension Rule's escape hatch, in one place: a spec, band or anchor that
 * carries no number and no code is not a dimension, so it hands itself back to
 * the reading face rather than wearing the drawing's.
 */
.mond-alabel__spec--prose,
.mond-band__spec--prose,
.mond-srow__prose,
.mond-prop__anchor--prose {
	font-family: Geologica, ui-sans-serif, system-ui, sans-serif !important;
	font-size: 0.8125rem !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.mond-alabel__spec {
	display: block;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: clamp(0.6875rem, 0.62rem + 0.28vw, 0.875rem);
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--accent);
}

.mond-alabel__name {
	display: block;
	font-size: clamp(0.8125rem, 0.76rem + 0.24vw, 1rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.012em;
	margin-top: 0.1rem;
}

.mond-alabel__note {
	display: block;
	font-size: clamp(0.6875rem, 0.66rem + 0.14vw, 0.8125rem);
	color: var(--cement-ink);
	line-height: 1.35;
}

/* The wall as a section drawing: the phone reading, and the text alternative
   to the axonometric on every screen. */
.mond-section-drawing {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1.5px solid var(--ink);
}

.mond-band__key {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	font-weight: 500;
	color: var(--ink);
	border: 1.4px solid var(--ink);
	width: 1.35rem;
	height: 1.35rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.mond-band {
	display: grid;
	grid-template-columns: 1.35rem 26px 1fr auto;
	gap: 0.85rem;
	align-items: center;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--rule);
}

.mond-band__swatch {
	height: 100%;
	min-height: 2.4rem;
	border: 1.4px solid var(--ink);
	background: var(--sw, var(--panel));
}

.mond-band--facade .mond-band__swatch { --sw: var(--c-facade); }
.mond-band--panel .mond-band__swatch  { --sw: var(--c-panel); }
.mond-band--steel .mond-band__swatch  { --sw: repeating-linear-gradient(90deg, var(--zinc) 0 4px, var(--ground) 4px 9px); }
.mond-band--wool .mond-band__swatch   { --sw: var(--c-wool); }
.mond-band--board .mond-band__swatch  { --sw: var(--c-board); }

.mond-band__name {
	display: block;
	font-weight: 500;
	line-height: 1.25;
	font-size: 0.9375rem;
}

.mond-band__note {
	display: block;
	font-size: 0.8125rem;
	color: var(--cement-ink);
	line-height: 1.3;
}

.mond-band__spec {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--accent);
	text-align: end;
	white-space: nowrap;
}

/* ---------- Keynote pick ---------- */

/*
 * A layer and the keynote naming it are one thing, and until now only a leader
 * line said so. Pointing at either half of the pair — a layer of the drawing,
 * its label, its row in the schedule — screens the rest of the wall back and
 * leaves that pair at full ink: a highlighter drawn over a print, not a state
 * a visitor has entered. Nothing is chosen and nothing navigates, and letting
 * go puts the whole wall back.
 *
 * Both projections carry the same data-layer keys, so the pick lands on
 * whichever one the sheet is showing without either drawing knowing about it.
 */
.mond-layer,
.mond-alabel,
.mond-leader,
.mond-band {
	transition: opacity 0.16s ease;
}

.mond-assembly[data-pick] .mond-layer,
.mond-assembly[data-pick] .mond-alabel,
.mond-assembly[data-pick] .mond-leader,
.mond-assembly[data-pick] .mond-band {
	opacity: 0.22;
}

.mond-assembly[data-pick] .is-pick {
	opacity: 1;
}

/* The named part takes the sheet's own emphasis: the keynote box fills, the way
   a called-out number is filled on a print, and its leader goes to full ink. */
.mond-assembly[data-pick] .is-pick .mond-alabel__key,
.mond-assembly[data-pick] .is-pick .mond-band__key {
	background: var(--ink);
	color: var(--ground);
}

.mond-assembly[data-pick] .is-pick .mond-leader__line {
	stroke: var(--ink);
}

/* ---------- Properties ---------- */

.mond-props {
	padding-block: var(--band);
	border-top: 1px solid var(--rule);
}

.mond-props__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 0;
	margin: 0;
	border-top: 2.5px solid var(--ink);
}

.mond-prop {
	padding: 1.5rem 1.75rem 1.75rem 0;
	border-bottom: 1px solid var(--rule);
}

.mond-prop + .mond-prop {
	padding-inline-start: 1.75rem;
	border-inline-start: 1px solid var(--rule);
}

.mond-prop__title {
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin-bottom: 0.5rem;
}

.mond-prop__body {
	margin: 0;
}

.mond-prop__body p {
	margin: 0;
	color: var(--cement-ink);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.mond-prop__body .mond-prop__anchor {
	font-size: 0.6875rem;
}

.mond-prop__anchor {
	margin-top: 0.9rem !important;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--zinc-ink) !important;
}

/* A drawing carries its qualifications in a notes block, not a coloured bar. */
.mond-props__speed {
	position: relative;
	max-width: var(--measure);
	margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
	font-size: clamp(0.9375rem, 0.9rem + 0.28vw, 1.0625rem);
	line-height: 1.55;
	color: var(--ink);
	border: 1px solid var(--rule-strong);
	padding: 1.5rem 1.5rem 1.25rem;
}

.mond-props__speed::before {
	content: attr(data-note);
	position: absolute;
	top: -0.62em;
	inset-inline-start: 1.15rem;
	background: var(--ground);
	padding-inline: 0.5rem;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	font-weight: 500;
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--zinc-ink);
}

/* ---------- Build types ---------- */

.mond-types {
	padding-block: var(--band);
	border-top: 1px solid var(--rule);
}

/*
 * The list sits inside the sheet's own wrap rather than carrying its own inset,
 * so its heaviest rule starts and stops exactly where the volumes and the
 * heading above them do. Ruling the sheet wider than the thing it bounds is the
 * one misregistration a reader notices without being able to name it, and in a
 * system whose credibility rests on registration it cannot stand.
 */
.mond-types__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
	border-top: 2.5px solid var(--ink);
	border-inline-start: 1px solid var(--rule);
}

.mond-type {
	padding: 1.1rem 1.1rem 1.6rem;
	border-inline-end: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.mond-type__index {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: var(--label-track);
	color: var(--zinc-ink);
}

.mond-type__drawing {
	margin: 0.4rem 0 0.9rem;
}

.mond-mass {
	width: 100%;
	height: auto;
	overflow: visible;

	/* Three tones, named once: a plane turned up, a wall turned toward the
	   viewer, and the wall turned away. Every solid in the massing is one of
	   the three, so the roof slab and the paving separate by the same rule the
	   walls do. */
	--mass-plane: #f6f4f0;
	--mass-wall: #e6e3dd;
	--mass-away: #cbc7c0;
}

.mond-mass__front,
.mond-mass__roof { fill: var(--mass-wall); }
.mond-mass__end { fill: var(--mass-away); }
.mond-mass__top,
.mond-mass__roof--top { fill: var(--mass-plane); }

/* Paving is Cement, the tone the system assigns to it, which is also what keeps
   it from being read as more cladding: the volume stands on something. */
.mond-mass__paving { fill: var(--cement); }
.mond-mass__paving--top { fill: var(--rule-strong); }

.mond-mass polygon {
	stroke: var(--ink);
	stroke-width: 1.4;
	vector-effect: non-scaling-stroke;
}

/* Panel joints are a surface marking, so they are drawn at the lightest weight
   the sheet has — present when looked for, silent otherwise. */
.mond-mass__joints path {
	fill: none;
	stroke: var(--cement);
	stroke-width: 0.7;
	vector-effect: non-scaling-stroke;
}

/* The frame behind the cladding. Uncovered on hover; see below. */
.mond-mass__frame {
	opacity: 0;
}

/* Steel, so it is drawn harder than the cladding line it replaces: at this size
   the reveal has to be carried by weight and colour, not by the tone shift
   underneath it. */
.mond-mass__frame path {
	fill: none;
	stroke: var(--zinc-ink);
	stroke-width: 1.15;
	vector-effect: non-scaling-stroke;
}

.mond-mass__glazing {
	fill: var(--anthracite);
	stroke: var(--ink);
	stroke-width: 1.1;
}

.mond-mass__mullion {
	fill: none;
	stroke: var(--zinc);
	stroke-width: 0.9;
	vector-effect: non-scaling-stroke;
}

/*
 * The cutaway. The panels and their joints fade out, the frame behind them
 * fades in: the section's own claim — the same wall in a different volume —
 * demonstrated instead of asserted. It reveals, it does not navigate, so
 * nothing here may look like a control: no lift, no cursor change, no selected
 * state.
 *
 * Exactly one volume is ever open. On a drawing sheet, five variants sharing
 * one construction are not all flayed at once — one is cut away and labelled
 * typical, and the rest are left whole. Five stripped volumes at the same time
 * would read as a row of coloured shapes, which is the impression this product
 * exists to defeat, and it would break the Wool Flood Rule five times over.
 *
 * Which one is open comes from whichever hand is actually on the screen: a
 * pointer that can hover picks it, and a pointer that cannot is given the
 * cutaway travelling the row under its own scroll. Both land on this one class,
 * and main.js owns which element carries it — so "exactly one" is true by
 * construction rather than by a stack of selectors that have to agree.
 *
 * That is also why hover is not a CSS state here. Expressing it as
 * `:hover` alongside a resting cutaway needs `:has(.mond-type:hover)` to keep
 * the resting one from doubling up, and that pairing invalidates unreliably.
 * One state machine, one winner.
 *
 * The trigger is never a media query either. `(hover: hover)` and
 * `(hover: none)` describe a device's *primary* pointer, so a touchscreen
 * laptop answers "none" and a tablet with a trackpad answers "hover", and both
 * answer wrongly for the hand in use.
 *
 * With scripting off there is no state machine and no event to read — and no
 * media query is needed either, because :hover simply never fires on a pointer
 * that cannot hover. So the unscripted page takes plain hover and loses
 * nothing but the travel.
 */

.mond-type--open .mond-mass__frame,
html:not(.mond-js) .mond-type:hover .mond-mass__frame {
	opacity: 1;
}

.mond-type--open .mond-mass__joints,
html:not(.mond-js) .mond-type:hover .mond-mass__joints {
	opacity: 0;
}

/* Take the cement panel off an LGS wall and what is behind it is steel and
   mineral wool, so the stripped walls come up in the same umber the hero's
   insulation layer is drawn in — the one place the system allows that colour
   to flood, which is a wall that has been opened. The two walls keep two
   different values, so the volume stays a solid instead of washing out to
   one flat shape, and the frame stays legible in zinc over both. */
.mond-type--open .mond-mass__front,
html:not(.mond-js) .mond-type:hover .mond-mass__front {
	fill: var(--c-wool);
}

.mond-type--open .mond-mass__end,
html:not(.mond-js) .mond-type:hover .mond-mass__end {
	fill: var(--wool);
}

/*
 * The unscripted sheet. With no state machine there is still a typical unit
 * standing open, so a reader with scripting off — or a pointer that cannot
 * hover and no script to sweep for it — is never shown five closed boxes and
 * told nothing. Hover still uncovers any other volume, above.
 */
html:not(.mond-js) .mond-type:first-child .mond-mass__frame {
	opacity: 1;
}

html:not(.mond-js) .mond-type:first-child .mond-mass__joints {
	opacity: 0;
}

html:not(.mond-js) .mond-type:first-child .mond-mass__front {
	fill: var(--c-wool);
}

html:not(.mond-js) .mond-type:first-child .mond-mass__end {
	fill: var(--wool);
}

/*
 * The cutaway crossfades rather than cutting, because the reader should see one
 * cladding come back on as the next comes off — one thing travelling the row,
 * not five things blinking. Refused motion gets the state without the travel:
 * the class still lands, it just lands instantly, and main.js stops driving it
 * from scroll so nothing changes under a reader who did not ask it to.
 */
@media (prefers-reduced-motion: no-preference) {
	.mond-mass__frame,
	.mond-mass__joints {
		transition: opacity 0.42s var(--ease);
	}

	.mond-mass__front,
	.mond-mass__end {
		transition: fill 0.42s var(--ease);
	}
}

.mond-type__name {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 0.25rem;
}

.mond-type__desc {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--cement-ink);
}

/* ---------- Specification schedule ---------- */

.mond-spec {
	padding-block: var(--band);
	border-top: 1px solid var(--rule);
}

.mond-schedule {
	border-top: 2.5px solid var(--ink);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	column-gap: clamp(1.5rem, 4vw, 3.5rem);
}

.mond-sgroup {
	padding-block: 1.25rem 0.5rem;
	border-bottom: 1px solid var(--rule);
}

.mond-sgroup__head {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	margin: 0 0 0.6rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mond-sgroup__code {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	font-weight: 500;
	color: var(--ground);
	background: var(--ink);
	padding: 0.18rem 0.42rem;
	letter-spacing: var(--label-track);
}

.mond-sgroup__rows {
	margin: 0;
}

.mond-srow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.42rem 0;
	border-top: 1px dotted var(--rule-strong);
}

.mond-srow dt {
	font-size: 0.9375rem;
	line-height: 1.35;
}

.mond-srow dd {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--accent);
	white-space: nowrap;
}

.mond-spec__note {
	max-width: var(--measure);
	margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
	color: var(--cement-ink);
	font-size: 0.9375rem;
}

/* ---------- Project ---------- */

.mond-project {
	padding-block: var(--band);
	border-top: 1px solid var(--rule);
}

/*
 * Heading and set note.
 *
 * The note sits where a sheet puts what it is a sheet of: the trailing edge of
 * the title line, in the annotation face, ahead of the drawing rather than
 * under it. It is there to say out loud, before anything is scrolled, that one
 * of the four plates is not this company's building.
 */
.mond-project__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	column-gap: clamp(1.5rem, 4vw, 3rem);
}

.mond-project__head .mond-lede {
	margin-bottom: 0;
}

.mond-project__set {
	margin: 0.55rem 0 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--zinc-ink);
	text-align: end;
}

/*
 * The plate band.
 *
 * Plates in a band share a height because they share the number that sets both
 * their column and their crop: a column of `a` fractions is `a` units wide, and
 * a frame at `aspect-ratio: a` is therefore exactly one unit tall whatever `a`
 * is. So the top edges align, the bottom edges align, and the captions start on
 * one line — with no measurement, no subgrid, and no script.
 *
 * The band is ruled top and bottom the way a set of plates is ruled off on a
 * sheet, and the caption row sits inside those rules, because a plate's
 * identification belongs to the plate and not to the page beneath it.
 *
 * Each band is capped at the width where its largest plate reaches the source's
 * own pixels. Past that the band would be buying width and spending sharpness.
 */
.mond-plates {
	display: grid;
	grid-template-columns: var(--cols);
	column-gap: clamp(1rem, 2.5vw, 2rem);
	align-items: start;
	margin-top: clamp(2rem, 5vw, 3.25rem);
	padding-block: clamp(0.9rem, 2vw, 1.35rem);
	border-block: 1.5px solid var(--ink);
}

/* The support band is ruled off against the lead band above it, so it takes
   the lighter rule and does not repeat the heavy one it already sits under. */
.mond-plates--lead {
	max-width: 1032px;
}

.mond-plates--support {
	max-width: 863px;
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	border-top-width: 0;
	border-bottom-color: var(--rule-strong);
}

/* The gym band indexes a different building, so it is ruled off the same way
   the support band is and repeats neither the heavy rule above it nor a top
   edge it already has.

   Its width is the one number here that is not set by a source. The frames are
   1408px, which outruns anything this sheet can give them, so nothing caps the
   band from below and the lead band's width is taken instead: three plates
   sharing a height need the wider rule to keep the establishing render wide
   enough to establish something. */
.mond-plates--gym {
	max-width: 1032px;
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	border-top-width: 0;
	border-bottom-color: var(--rule-strong);
}

/* The range band, ruled the same way and capped the same way. Its two sources
   are 1320px, which the lead band's width does not reach either, so nothing
   caps it from below and it takes the sheet's width like the band above it. */
.mond-plates--range {
	max-width: 1032px;
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
	border-top-width: 0;
	border-bottom-color: var(--rule-strong);
}

.mond-plate {
	margin: 0;
	min-width: 0;
}

.mond-plate__frame {
	aspect-ratio: var(--a);
	border: 1.5px solid var(--ink);
	overflow: hidden;
	line-height: 0;
}

.mond-plate__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mond-plate figcaption {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	margin-top: 0.7rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--cement-ink);
}

.mond-plate__code {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: var(--label-track);
	color: var(--zinc-ink);
	border: 1px solid var(--rule-strong);
	padding: 0.1rem 0.35rem;
	flex: 0 0 auto;
}

/*
 * The illustrative plate.
 *
 * The one image on this page that is not this company's work, so the one image
 * that must not be mistaken for it: the narrowest plate in the set, the only
 * dashed rule, and the only one held back in saturation.
 *
 * These two are all that is left of that marking. A chip on the caption and a
 * sentence in the margin both said it in words, and both were removed on
 * request. What remains is graphic, and graphics do not translate: a reader who
 * does not already know what a dashed rule means on this sheet has not been
 * told anything. Project.astro carries the note on what that costs and the four
 * ways to close it.
 */
.mond-plate--illustrative .mond-plate__frame {
	border-style: dashed;
	border-color: var(--cement);
}

.mond-plate--illustrative img {
	filter: saturate(0.82);
}

/*
 * The plate lightbox.
 *
 * A plate index buys its common baseline by cropping, and a crop is the exact
 * thing a reader who leans in wants undone — so the overlay puts the source
 * back at its own proportion and adds nothing: no gallery, no arrows, no
 * counter. One plate, larger, with the caption it already had.
 *
 * None of this exists until main.js runs. The button is inserted around the
 * image and the dialog is built on the first press, so a visitor with no
 * scripting is never shown an affordance the page cannot honour.
 */
.mond-plate__zoom {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: zoom-in;
}

/* The dialog is the full viewport and paints nothing; the backdrop is what the
   page is read through, and the inner box is what holds the plate. Keeping the
   element itself transparent is what makes a press on the surround a press on
   the way out rather than a press on a black panel. */
.mond-lightbox {
	width: 100%;
	max-width: 100vw;
	height: 100%;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--panel);
	overflow: hidden;
}

/* Nearly opaque rather than a wash. At anything lighter the sticky header and
   the contact bar read straight through the top and bottom of the overlay, and
   a plate being examined ends up sharing the screen with the page it came
   from. */
.mond-lightbox::backdrop {
	background: rgb(22 25 28 / 0.985);
}

.mond-lightbox__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	width: 100%;
	height: 100%;
	padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1rem, 4vw, 3rem);
}

/* `contain`, not `cover`: the whole argument for opening this is that the plate
   stops deciding what the image is. The rule stays, because the image is still
   on a sheet. */
.mond-lightbox__img {
	display: block;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border: 1.5px solid var(--cement);
}

/* The interior plate is not this company's building at any size, so the two
   marks it carries on the sheet travel into the overlay with it. */
.mond-lightbox__img--illustrative {
	border-style: dashed;
	filter: saturate(0.82);
}

.mond-lightbox__caption {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--zinc);
	text-align: start;
}

.mond-lightbox__caption .mond-plate__code {
	color: var(--zinc);
	border-color: var(--zinc-ink);
}

.mond-lightbox__close {
	position: absolute;
	top: clamp(0.75rem, 2.5vw, 1.5rem);
	inset-inline-end: clamp(0.75rem, 2.5vw, 1.5rem);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--panel);
	background: none;
	border: 1px solid var(--zinc-ink);
	padding: 0.4rem 0.7rem;
	cursor: pointer;
}

.mond-lightbox__close:hover {
	border-color: var(--panel);
}


/* ---------- Contact ---------- */

.mond-contact {
	background: var(--ink);
	color: var(--panel);
	padding-block: var(--band);
	padding-bottom: calc(var(--band) + 4.5rem);
	margin-bottom: 0;
}

/*
 * Two equal columns left the call side short and the form side long, so the
 * close ended on a quarter-screen of empty black. The route is a schedule and
 * reads fine narrow; the form has six fields and uses every pixel it is given.
 * Weighting the split to the form shortens it and lengthens the route, and the
 * two columns land close to level.
 */
.mond-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.mond-contact__lede {
	margin: 0 0 1.5rem;
	max-width: 44ch;
	color: #b9bcbd;
}

.mond-bignum {
	display: inline-block;
	font-size: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	text-decoration: none;
	color: var(--panel);
	border-bottom: 3px solid var(--accent-lift);
	padding-bottom: 0.1rem;
	transition: color 0.2s var(--ease);
}

.mond-bignum:hover {
	color: var(--accent-lift);
}

.mond-contact__hours {
	margin: 0.9rem 0 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--accent-lift);
}

/*
 * The route: what the reader hands over, what happens to it, what comes back.
 * Drawn as a schedule rather than as three cards, because the order is the
 * information and this system's container for ordered fact is a ruled list.
 */

.mond-route {
	list-style: none;
	margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
	padding: 0;
	max-width: 46ch;
	border-top: 1px solid #333d45;
}

/*
 * The steps carry more air than a dense list would, because this column stands
 * beside a six-field form and a schedule that ends halfway up its own column
 * reads as unfinished rather than as finished early.
 */
.mond-route__step {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: 1.15rem 0;
	border-bottom: 1px dotted #333d45;
}

/*
 * The step code, drawn as the specification's own code chip rather than as an
 * wool badge. That umber is stone wool in this system — it either floods a region
 * or it is absent, and a numbered pill is exactly the sprinkle the palette rule
 * exists to forbid. On the light sheet that chip is graphite on mineral; here
 * the ground is already graphite, so it inverts and stays the same component.
 */

.mond-route__n {
	flex: 0 0 auto;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	font-weight: 500;
	letter-spacing: var(--label-track);
	color: var(--ink);
	background: var(--panel);
	padding: 0.18rem 0.42rem;
}

.mond-route__t {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--panel);
}

/*
 * The editor's copy of an unset slot. Never rendered to a visitor: being handed
 * the vendor's own admin instructions is the one thing this page cannot afford
 * to say to someone deciding whether the company is real.
 */

.mond-contact__todo {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--accent-lift);
	border: 1px dashed var(--accent);
	padding: 0.7rem 0.85rem;
	margin: 1.75rem 0 0;
	max-width: 44ch;
}

.mond-contact__todo-k {
	display: block;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	margin-bottom: 0.3rem;
}

.mond-contact__chans {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 1.5rem 0 0;
	padding: 0;
	font-size: 0.9375rem;
}

.mond-contact__chans a {
	color: var(--panel);
	text-decoration: none;
	border-bottom: 1.5px solid #4a4e51;
	padding-bottom: 2px;
}

.mond-contact__chans a:hover {
	border-bottom-color: var(--accent-lift);
}

.mond-formhead {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	color: #9aa0a4;
	margin: 0.5rem 0 1.1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #3a3e41;
}

.mond-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem;
}

.mond-field {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.mond-field--half {
	grid-column: span 1;
}

.mond-field--full {
	grid-column: span 2;
}

.mond-field label {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.01em;
	color: #9aa0a4;
}

/*
 * Required is stated, not implied. An asterisk is a convention this audience has
 * no reason to know, and colour alone says nothing to a screen reader — so the
 * word is in the label and the word is what is announced.
 */

/* A form's required marker is an instruction to the visitor, not a drawing
   annotation — no number, no code, so it is not the mono face's to set. */
.mond-field__req {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent-lift);
}

/*
 * A field that came back rejected. The border goes heavy in the accent — the weight
 * hierarchy the system already uses for an active outline — and the reason sits
 * under the field in words. The focus ring stays an offset outline, so focus
 * and error never read as the same mark.
 */

.mond-field--bad input,
.mond-field--bad select,
.mond-field--bad textarea {
	border-width: 2.5px;
	border-color: var(--accent-lift);
}

.mond-field__err {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--accent-lift);
}

.mond-field input,
.mond-field select,
.mond-field textarea {
	font: inherit;
	font-size: 0.9375rem;
	color: var(--panel);
	background: #202427;
	border: 1.5px solid #41464a;
	padding: 0.62rem 0.7rem;
	width: 100%;
	min-height: 48px;
}

.mond-field textarea {
	resize: vertical;
}

.mond-field input::placeholder {
	color: #7f8589;
}

.mond-field input:focus,
.mond-field select:focus,
.mond-field textarea:focus {
	border-color: var(--accent-lift);
	outline: none;
}

.mond-field input:focus-visible,
.mond-field select:focus-visible,
.mond-field textarea:focus-visible {
	outline: 2.5px solid var(--accent-lift);
	outline-offset: 1px;
}

.mond-hp {
	position: absolute;
	left: -9999px;
}

/*
 * The primary. It is the same act as the title block's "request a quote", so it
 * is drawn in the same colour: the accent, carrying white at 7.3:1.
 *
 * The border is the reason this works on black. A filled --accent panel sits at
 * 2.4:1 against the contact ground, which is below the 3:1 a control's own edge
 * needs — the button would be a floating word rather than a button. The lift
 * keeps the boundary at 6.5:1, so the shape is unmistakably a shape and the
 * fill is unmistakably the accent.
 */
.mond-submit {
	grid-column: span 2;
	justify-self: start;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--accent);
	border: 1.5px solid var(--accent-lift);
	padding: 0.8rem 1.9rem;
	min-height: 48px;
	cursor: pointer;
	margin-top: 0.4rem;
	transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.mond-submit:hover {
	background: transparent;
	color: var(--accent-lift);
}

/* In flight. Still legible, visibly not pressable again. */
.mond-submit:disabled {
	background: transparent;
	color: var(--accent-lift);
	border-color: var(--accent);
	cursor: default;
}

.mond-form__reply {
	grid-column: 1 / -1;
	margin: 0.2rem 0 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: 0.04em;
	color: var(--accent-lift);
}

.mond-note {
	font-size: 0.875rem;
	line-height: 1.45;
	padding: 0.7rem 0.85rem;
	margin: 0 0 1rem;
	border: 1.5px solid;
}

/* The note is moved to on arrival, so it must show where it is when it lands. */
.mond-note:focus-visible {
	outline: 2.5px solid var(--accent-lift);
	outline-offset: 2px;
}

.mond-note__sub {
	display: block;
	margin-top: 0.3rem;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: 0.04em;
}

/*
 * Confirmation and failure, in this system's own materials.
 *
 * A green success and a red error are the web's convention, not this sheet's —
 * they were the only two hues on the page that could not be named as something
 * Mond One Living buys, which is the one test the palette sets itself. So the
 * pair is redrawn on the axis the drawing already has: zinc is the line-work
 * that records, the accent is the mark that wants attention. That is also why
 * the failed field borders and their messages are already in the accent — the
 * note and the fields it refers to now speak with one voice instead of two.
 *
 * Losing red and green loses nothing legible: each note carries an explicit
 * sentence and its own role, so the colour was never the message. It gains the
 * readers for whom red against green was never a distinction at all.
 */

/* Recorded. Zinc, the face the sheet keeps its own notes in. */
.mond-note--ok {
	color: #c0c9cf;
	border-color: #46535d;
	background: #20262b;
}

/* Wants attention — the same accent the fields below it are marked in. */
.mond-note--bad {
	color: var(--accent-lift);
	border-color: var(--accent-lift);
	background: #241a13;
}

/* ---------- Title block ---------- */

.mond-titleblock {
	position: fixed;
	inset-block-end: var(--edge-b);
	inset-inline-end: var(--edge-r);
	z-index: 45;
	display: flex;
	align-items: stretch;
	background: var(--ground);
	border: 1.5px solid var(--ink);
	border-inline-end: none;
	border-block-end: none;
	font-size: 0.75rem;
}

/*
 * Language, in the corner a drawing keeps its sheet metadata. Set in the
 * dimension face because that is what it is: metadata about the sheet, not
 * reading matter. Only languages with a catalogue on disk are rendered, so this
 * strip is two items today and three the moment Albanian lands.
 */

.mond-titleblock__lang {
	display: flex;
	align-items: stretch;
	border-inline-end: 1px solid var(--rule-strong);
}

.mond-lang {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 0 0.55rem;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: var(--label-track);
	text-decoration: none;
	color: var(--zinc-ink);
	transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.mond-lang + .mond-lang {
	border-inline-start: 1px solid var(--rule);
}

.mond-lang:hover {
	color: var(--ink);
	background: var(--panel);
}

/* The active language is drawn as underlined, the way a drawing marks the
   sheet it is on — not by colour alone, which says nothing at 11px in daylight
   and nothing at all to a screen reader. aria-current carries the same fact. */
.mond-lang--on {
	color: var(--ink);
	font-weight: 500;
	border-block-end: 2.5px solid var(--accent);
}

.mond-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mond-titleblock__actions {
	display: flex;
	align-items: stretch;
}

.mond-call {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.05rem;
	padding: 0.5rem 1.1rem;
	background: var(--accent);
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	font-size: 0.875rem;
	min-height: 52px;
	transition: background 0.18s var(--ease);
}

.mond-call:hover {
	background: var(--accent-deep);
}

.mond-call__num {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: 0.02em;
}

/*
 * The unfilled slot, and only an editor ever sees it — so it is a link to the
 * control that fills it, not a dead box. Hatching carries the "unassigned"
 * meaning the way a drawing does, which frees the lettering to sit in ink and
 * stay legible; the earlier colour-on-hatch pairing fell under 4.5:1 on the
 * darker stripe, and a warning nobody can read is not a warning.
 */

.mond-call--empty {
	background: repeating-linear-gradient(45deg, #d9c7b8 0 6px, #f2eae3 6px 12px);
	color: var(--ink);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: 0.04em;
	text-align: center;
	text-decoration: none;
}

.mond-call--empty:hover {
	background: var(--accent);
}

.mond-chan {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.9rem;
	text-decoration: none;
	font-size: 0.8125rem;
	color: var(--ink);
	border-inline-start: 1px solid var(--rule-strong);
	transition: background 0.18s var(--ease);
}

.mond-chan:hover {
	background: var(--panel);
}

/*
 * With no number on the sheet the written request is not the second channel,
 * it is the only one — so it takes the primary's own treatment rather than
 * sitting as a quiet link where a call used to be.
 */

.mond-chan--lead {
	background: var(--accent);
	color: #fff;
	font-weight: 500;
	font-size: 0.875rem;
	padding-inline: 1.1rem;
	border-inline-start: none;
	min-height: 52px;
}

.mond-chan--lead:hover {
	background: var(--accent-deep);
}

.mond-foot {
	/* Inline padding belongs to the wrap now, so the line registers with the
	   same left edge as every section above it. */
	padding: 1.25rem 0 calc(var(--edge-b) + 5.5rem);
	border-top: 1px solid var(--rule);
}

.mond-foot__line {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--cement-ink);
	/* The sheet is 1360px wide; a line of text is not. The wrap holds the
	   sheet's own alignment and this holds the measure, so the line starts
	   where every other line on the page starts and stops where a line should. */
	max-width: var(--measure);
}

/* ---------- Wide ---------- */

@media (min-width: 62rem) {
	.mond-foot {
		padding-bottom: calc(var(--edge-b) + 2rem);
	}
}

/* ---------- Narrow: the axonometric gives way to the section drawing ---------- */

@media (max-width: 61.999rem) {
	.mond-hero {
		height: auto;
	}

	.mond-hero__stage {
		position: static;
		height: auto;
		min-height: 0;
		padding-block: 2rem 3rem;
	}

	.mond-assembly__labels,
	.mond-hero__state {
		display: none;
	}

	.mond-assembly__svg {
		height: auto;
		margin-bottom: 1.5rem;
	}

	.mond-hero__intro {
		display: block;
		padding-bottom: 1.35rem;
	}

	.mond-hero__aside {
		padding: 1rem 0 0;
	}

	.mond-assembly {
		display: block;
		margin-top: 1.5rem;
	}

	.mond-section-drawing {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
		border-top-width: 2.5px;
	}

	.mond-prop + .mond-prop {
		padding-inline-start: 0;
		border-inline-start: none;
	}

	.mond-prop {
		padding-inline-end: 0;
	}

	/*
	 * Held upright there is no band to hold a baseline across, so the plates
	 * stack and each takes the full sheet. A crop that exists to make two plates
	 * agree on a height has nothing left to agree with — a detail strip a whole
	 * screen wide is not a detail, it is a slot — so every frame relaxes to its
	 * upright proportion and the set reads as a column of plates instead.
	 */
	.mond-project__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.mond-project__set {
		margin-top: 1.1rem;
		text-align: start;
	}

	.mond-plates {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(1.75rem, 5vw, 2.5rem);
	}

	.mond-plate__frame {
		aspect-ratio: var(--an);
	}

	.mond-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mond-form {
		grid-template-columns: 1fr;
	}

	.mond-field,
	.mond-field--half,
	.mond-field--full,
	.mond-submit {
		grid-column: span 1;
	}

	.mond-titleblock {
		inset-inline: var(--sheet-inset);
		border-inline-end: 1.5px solid var(--ink);
	}

	/* The bar spans the sheet, so the actions take whatever the language strip
	   beside them does not. `width: 100%` here would push that strip out. */
	.mond-titleblock__actions {
		flex: 1 1 auto;
		min-width: 0;
	}

	.mond-call,
	.mond-call--empty {
		flex: 1 1 auto;
		align-items: center;
		text-align: center;
	}

	.mond-chan--form {
		flex: 0 0 auto;
	}

	/* With no call on the strip the request takes the width the call had, so
	   the bar is still one full-width primary rather than a link floating at
	   its trailing edge. */
	.mond-chan--lead {
		flex: 1 1 auto;
		justify-content: center;
	}

	/* The language strip stays at every width — it is the only route an
	   Albanian- or English-speaking reader has, and a phone is where most of
	   this audience is. It leads the bar so the primary keeps the wide end. */
	.mond-titleblock__lang {
		order: -1;
		flex: 0 0 auto;
	}
}

/* ---------- Portrait: the wall opens as it travels up the screen ---------- */

/*
 * The wide sheet pins the drawing and opens it on scroll. A phone cannot spare
 * a viewport to pin, and a hijacked scroll on a phone is a broken scroll — so
 * here the same opening is driven by the drawing's own passage up the screen.
 * The visitor scrolls normally and the wall comes apart in their hands. main.js
 * maps that position to the same --k, so one property still drives everything.
 *
 * The gate is the script's own: scripting present, motion not refused. Fail
 * either and the stylesheet's default of 0 stands — the exploded drawing with
 * every row of its schedule present, which is the readable state.
 */
@media (max-width: 61.999rem) and (max-aspect-ratio: 1 / 1) and (prefers-reduced-motion: no-preference) {
	.mond-js .mond-hero {
		--k: 1;
	}
}

@media (max-width: 61.999rem) and (max-aspect-ratio: 1 / 1) {
	/* Every line above the drawing is a line of the first screen the wall does
	   not get, so the intro is set tight here: headline, the sentence naming
	   what is built, the claim, then the wall. */
	.mond-hero__stage {
		padding-block: 1.1rem 2.5rem;
	}

	.mond-hero__intro {
		padding-bottom: 0.9rem;
	}

	.mond-hero__aside {
		padding-top: 0.75rem;
	}

	.mond-assembly {
		margin-top: 0.9rem;
	}

	/* The section drawing is the labelling here, and it is dimensioned the way
	   a drawing is dimensioned: a row arrives as its own layer comes away from
	   the wall, outside in. At --k 1 the wall is one solid and nothing is
	   labelled yet; the stylesheet's own default of 0 leaves every row present,
	   which is the state a visitor without scripting is given. */
	.mond-band {
		opacity: clamp(0, calc(((1 - var(--k, 0)) - var(--i, 0) * 0.1) * 8), 1);
	}
}

/* ---------- Phone ---------- */

@media (max-width: 32rem) {
	/*
	 * Four section anchors will not sit beside the mark at this width — today
	 * the first one is simply hidden behind it. A drawer for four anchors on a
	 * single scrolling page is a control the visitor does not need, so they
	 * take their own line and become the sheet's index.
	 */
	/*
	 * The head is not pinned here. Wrapped, it is a quarter of a phone screen,
	 * and it would be charging that on every screen of a long argument for four
	 * anchors a visitor uses once. What has to stay reachable is the phone
	 * number, and that is the title block's job — it is the corner of a drawing
	 * that carries the maker and how to reach them, and it stays fixed.
	 */
	:root {
		scroll-padding-top: 1.5rem;
	}

	.mond-head {
		position: static;
		flex-wrap: wrap;
		gap: 0.35rem 1rem;
		padding-top: calc(var(--edge-t) + 0.4rem);
		padding-bottom: 0;
	}

	.mond-head__mark img {
		width: 100px;
	}

	/* Four entries in two columns: an index block, not a line of navigation that
	   ran out of room. Ruled columns hold their shape whatever the strings are,
	   which is what a layout has to do when the same head sets in Macedonian,
	   Albanian and English. */
	.mond-head__nav {
		flex: 1 0 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 1.25rem;
		font-size: 0.8125rem;
		border-top: 1px solid var(--rule);
	}

	/* A three-line material name and a right-aligned dimension were fighting
	   for the same line. The dimension drops under the name, where a schedule
	   puts it when the column runs out. */
	.mond-band {
		grid-template-columns: 1.35rem 18px minmax(0, 1fr);
		gap: 0.3rem 0.7rem;
		padding: 0.85rem 0;
		align-items: start;
	}

	.mond-band__key,
	.mond-band__text {
		grid-row: 1;
	}

	.mond-band__swatch {
		grid-row: 1 / span 2;
		min-height: 100%;
	}

	.mond-band__spec {
		grid-column: 3;
		grid-row: 2;
		text-align: start;
	}

	.mond-chan:not(.mond-chan--form) {
		display: none;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.mond-hero {
		height: auto;
	}

	.mond-hero__stage {
		position: static;
		height: auto;
		min-height: 0;
	}

	.mond-hero__state-closed {
		display: none;
	}

	/* The revealed section drawing stacks under the axonometric. Without this the
	   assembly is still a flex row at wide widths and the schedule is laid out
	   beside the drawing, off the edge of the sheet. */
	.mond-assembly {
		display: block;
	}

	.mond-assembly__svg {
		height: auto;
	}

	/* The schedule takes over the labelling, exactly as it does on a phone. The
	   leader-line column would otherwise stretch the full height of the assembly
	   and print itself over the schedule rows. */
	.mond-assembly__labels,
	.mond-leaders {
		display: none;
	}

	/* Nothing is revealed in step here, so the schedule is simply present. */
	.mond-band {
		opacity: 1;
	}

	.mond-section-drawing {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
		margin-top: 2rem;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}