/*
 * 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;
	--wool: #c07c1c;
	--wool-deep: #8a5610;
	--panel: #e8e6e1;
	--timber: #a9682f;
	--rule: #d5d3cd;
	--rule-strong: #b3b1aa;

	/* Material fills referenced by the SVG hatch patterns. */
	--c-panel: #e2dfd9;
	--c-cement: #9e9a93;
	--c-wool: #d8a24a;
	--c-wool-deep: #8a5610;
	--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(--wool);
	color: #fff;
}

:focus-visible {
	outline: 2.5px solid var(--wool-deep);
	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(--wool-deep);
	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(--wool);
}

/* ---------- 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(--wool-deep);
}

/* ---------- 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: #e3b671; --end: #97601a; }
.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);
}

.mond-leaders {
	opacity: clamp(0, calc(1 - var(--k, 0) * 2.6), 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(1 - var(--k, 0) * 2.6), 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(--wool-deep);
}

.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(--wool-deep);
	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 Ochre 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 ochre 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(--wool-deep);
	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);
}

.mond-shot {
	margin: 0;
}

.mond-shot img {
	width: 100%;
	border: 1.5px solid var(--ink);
}

/*
 * Plate and margin.
 *
 * A photograph that has something to say becomes a plate on the sheet, and the
 * space beside it is not a void to be filled — it is the keynote margin, which
 * is where a drawing has always carried what it wants pointed out. The lead
 * render's lede claims the panel joint is the proof; this is the layout that
 * lets the drawing actually point at one instead of asserting it in prose.
 *
 * The plate never exceeds the render's own pixels. Blowing a 714px file up to
 * fill a 1232px sheet buys width and spends sharpness, and on a page arguing
 * for precision, a soft photograph argues the other way.
 */

.mond-shot--annotated {
	max-width: 1360px;
	margin-inline: auto;
	padding-inline: var(--pad);
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(14rem, 1fr);
	align-items: start;
	column-gap: clamp(1.5rem, 3.5vw, 3rem);
}

/*
 * The frame moves from the image to the plate, so the overlay's own box is the
 * image's box exactly. Left on the image, the 1.5px rule would offset every
 * annotation by its own width and the callout would sit off the joint it names.
 */
.mond-shot__plate {
	position: relative;
	max-width: var(--plate, 714px);
	border: 1.5px solid var(--ink);
	line-height: 0;
}

.mond-shot__plate img {
	border: 0;
}

.mond-shot--illustrative .mond-shot__plate {
	border-style: dashed;
	border-color: var(--cement);
}

.mond-shot__margin {
	position: relative;
	align-self: stretch;
}

/*
 * The mark: a detail callout box over the subject and a leader running out to
 * the plate's edge, where the keynote meets it. Both are drawn in the render's
 * own pixel coordinates, so the annotation stays registered to the building at
 * every width without a line of script.
 */

.mond-shot__mark {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.mond-shot__box {
	fill: none;
	stroke: var(--ground);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.mond-shot__box--under {
	stroke: var(--ink);
	stroke-width: 3.5;
	opacity: 0.5;
}

/* The tag rides the callout's top-left corner, sitting just above it the way a
   keynote bubble sits off the mark it belongs to. */
.mond-shot__tag {
	position: absolute;
	inset-inline-start: var(--tag-x, 22%);
	top: var(--tag-y, 39%);
	transform: translateY(-100%);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: var(--label-track);
	line-height: 1;
	color: var(--ground);
	background: var(--ink);
	padding: 0.22rem 0.36rem;
	margin-bottom: 2px;
}

/*
 * The margin entry, held level with the mark it names. Nothing is drawn between
 * them: the code is on both ends and the two sit at the same height, which is
 * how a keynote pairs with its mark on a sheet that will not tolerate a line
 * dragged across its own subject.
 */
.mond-shot__keynote {
	position: absolute;
	inset-inline-start: 0;
	top: var(--joint-y, 50%);
	transform: translateY(-50%);
	margin: 0;
	max-width: 26ch;
	border-top: 1.5px solid var(--ink);
	padding-top: 0.5rem;
}

.mond-shot__keynote b {
	display: block;
	margin-top: 0.3rem;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

/*
 * The gloss under a keynote is prose about the thing, not a dimension of it.
 * The Dimension Rule's own test is whether the string carries a number or a
 * code; "видлива фуга" carries neither, so it belongs in the reading face.
 */
.mond-shot__gloss {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--cement-ink);
}

/* Identification sits at the plate's foot, where a sheet has always put it. */
.mond-shot--annotated figcaption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	margin-top: 0;
}

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

.mond-shot__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;
}

.mond-shotpair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-top: clamp(1.75rem, 4vw, 3rem);
}

/*
 * The illustrative interior is the one image on this page that is not this
 * company's work, so it is the one image that must not be the biggest. It takes
 * a plate the width of a supporting shot, and its margin carries the disclaimer
 * at full reading size rather than a caption running under a full-width band.
 * The image gets smaller and the sentence saying it is not ours gets larger,
 * which is the correct direction for both.
 */

.mond-shot--illustrative {
	--plate: 602px;
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

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

/* The disclaimer is held level with the middle of the plate it disclaims, so
   the two read as one statement rather than as a picture with small print. */
.mond-shot--illustrative .mond-shot__margin {
	display: grid;
	align-content: center;
	gap: 0.6rem;
}

.mond-shot--illustrative figcaption {
	position: static;
	margin: 0;
}

.mond-shot__disclaim {
	margin: 0;
	max-width: 34ch;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cement-ink);
	border-top: 1.5px solid var(--rule-strong);
	padding-top: 0.6rem;
}

.mond-shot__flag {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: var(--label-size);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--ground);
	background: var(--cement-ink);
	padding: 0.14rem 0.42rem;
	flex: 0 0 auto;
}

/* ---------- 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(--wool);
	padding-bottom: 0.1rem;
	transition: color 0.2s var(--ease);
}

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

.mond-contact__hours {
	margin: 0.9rem 0 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: #d8a24a;
}

/*
 * 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
 * ochre badge. Ochre 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: #d8a24a;
	border: 1px dashed #6b4410;
	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(--wool);
}

.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(--c-wool);
}

/*
 * A field that came back rejected. The border goes heavy in ochre — 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(--wool);
}

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

.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(--wool);
	outline: none;
}

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

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

.mond-submit {
	grid-column: span 2;
	justify-self: start;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--ink);
	background: var(--wool);
	border: 1.5px solid var(--wool);
	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(--wool);
}

/* In flight. Still legible, visibly not pressable again. */
.mond-submit:disabled {
	background: transparent;
	color: var(--c-wool);
	border-color: var(--wool-deep);
	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(--c-wool);
}

.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(--wool);
	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, ochre is the mark that wants attention. That is also why the
 * failed field borders and their messages are already ochre — 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 ochre the fields below it are marked in. */
.mond-note--bad {
	color: var(--c-wool);
	border-color: var(--wool);
	background: #2a1a05;
}

/* ---------- 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;
}

.mond-titleblock__id {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 0.1rem;
	padding: 0.5rem 0.9rem;
	border-inline-end: 1px solid var(--rule-strong);
	min-width: 8.5rem;
}

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

.mond-titleblock__v {
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
}

/*
 * 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(--wool);
}

.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(--wool);
	color: var(--ink);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.875rem;
	min-height: 52px;
	transition: background 0.18s var(--ease);
}

.mond-call:hover {
	background: var(--wool-deep);
	color: #fff;
}

.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 ochre-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, #e9c68d 0 6px, #f6e6cc 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(--wool);
}

.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(--wool);
	color: var(--ink);
	font-weight: 500;
	font-size: 0.875rem;
	padding-inline: 1.1rem;
	border-inline-start: none;
	min-height: 52px;
}

.mond-chan--lead:hover {
	background: var(--wool-deep);
	color: #fff;
}

.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-titleblock__id {
		display: flex;
	}

	.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 margin to keep, so the plate takes the full sheet
	 * and its keynote drops beneath it as a row. The callout box stays on the
	 * photograph — it is what identifies the joint — but the leader running out
	 * to an edge with nothing beside it would point at nothing, so it goes.
	 */
	.mond-shot--annotated {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1rem;
	}

	.mond-shot__plate {
		max-width: none;
	}

	.mond-shot__keynote,
	.mond-shot--annotated figcaption {
		position: static;
		transform: none;
		max-width: none;
	}

	.mond-shot--annotated figcaption {
		margin-top: 0.9rem;
	}

	.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.14) * 7), 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;
	}
}