/* =========================================================================
   netex · pages/side-roads.css · /marketing/side-roads/ (copy 15, bible §7.13)
   The side-road atlas: Indigo hero with the toll motorway and the side road, Road 00 on Ink,
   the index on Paper-2, 30 roads on the route (Paper) each with a C-22 mock cut open at 47°,
   rules on Ink-2, CTA on Indigo. Role tokens only; raw colour lives inside SVG art.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@property --v {
	syntax: "<number>";
	inherits: true;
	initial-value: 55;
}

@layer pages {


/* =========================================================================
   s1 · HERO (Indigo)
   ========================================================================= */
.sr-hero { }
.sr-hero__grid { row-gap: var(--s-6); }
.sr-hero__h1 { margin: 0; max-width: none; font-size: inherit; line-height: 1; letter-spacing: 0; }
.sr-hero__mega {
	--flar: 100; --volm: 100;
	display: block;
	font-size: min(var(--t-mega), 10.6vw, 6.6vw + 1rem);
	font-weight: 880;
	line-height: var(--lh-mega);
	letter-spacing: var(--tr-mega);
	text-transform: uppercase;
	color: var(--fg);
	font-variation-settings: "FLAR" 100, "VOLM" 100;
	max-width: none;
	width: fit-content; /* the slip-cut is placed on the words, not on the column */
}
.sr-hero__word { display: block; white-space: nowrap; }
.sr-hero__sub {
	display: block;
	margin-top: var(--s-5);
	max-width: 17em;
	font-size: var(--t-h1-sub);
	font-weight: 480;
	line-height: 1.14;
	letter-spacing: -.01em;
	color: var(--fg-2);
	text-wrap: balance;
}
.sr-hero__display {
	font: 400 var(--t-lead)/1.4 var(--f-serif);
	max-width: 20em;
	color: var(--fg);
}
/* The punchline gets its own line, marked by a short piece of the N-bar at 47° (not an underline: it is not a link). */
.sr-hero__kicker { position: relative; display: block; margin-top: .3em; padding-left: 1.15em; font-style: italic; color: var(--fg); }
.sr-hero__kicker::before {
	content: "";
	position: absolute;
	left: .28em;
	top: .16em;
	width: 4px;
	height: 1.05em;
	background: var(--n-grad);
	transform: rotate(43deg);
}
.sr-hero__lede { max-width: 33em; color: var(--fg-2); }
.sr-hero__honest {
	margin-top: var(--s-4);
	padding-left: var(--s-4);
	max-width: 30em;
	border-left: var(--bw-2) solid var(--fg);
	font: 500 .9375rem/1.45 var(--f-sans);
	color: var(--fg);
}
.sr-hero__actions { margin-top: var(--s-6); }
@media (max-width: 767px) {
	/* Keep Molten under 5% of a phone viewport next to the header CTA. */
	.sr-hero__actions .nx-btn--primary { min-height: 44px; padding: .55em 14px; font-size: .875rem; }
}
.sr-hero__art { position: relative; max-width: 420px; justify-self: center; }
.sr-art { width: 100%; max-width: 560px; margin-inline: auto; height: auto; overflow: visible; }
.sr-art--plan { display: none; }
.sr-art path, .sr-art rect { vector-effect: non-scaling-stroke; }
.sr-art__edge { fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-linecap: square; }
.sr-art__edge--far { stroke: var(--paper-78i); stroke-dasharray: 2 5; }
.sr-art__dash { fill: none; stroke: var(--paper-78i); stroke-width: 1; stroke-dasharray: 10 9; }
.sr-art__gantry { fill: none; stroke: var(--molten); stroke-width: 4; stroke-linecap: square; }
.sr-art__toll rect { fill: var(--indigo); stroke: var(--molten); stroke-width: 1.5; }
.sr-art__road { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.js:not(.rm) .sr-art__road { animation: sr-draw 900ms var(--ease-ink) 250ms both; }
@keyframes sr-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* The tall plan draws its side road with real lengths (the pathLength shortcut fails on paths that run
   out of the frame), scaled with the drawing. */
.sr-art--plan .sr-art__road { vector-effect: none; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: 0; }
/* backwards, not both: Chrome keeps a filled-forwards dash offset unpainted here; the base value is the end state anyway. */
html.js:not(.rm) .sr-art--plan .sr-art__road { animation: sr-draw-len 1000ms var(--ease-cut) 200ms backwards; }
html.js:not(.rm) .sr-art--plan .sr-art__road + .sr-art__road { animation-delay: 320ms; }
@keyframes sr-draw-len { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
.sr-art__sign rect { fill: var(--indigo); stroke: var(--cyan); stroke-width: 1.5; }
.sr-art__sign text { fill: var(--cyan); font: 600 13px/1 var(--f-mono); text-anchor: middle; }
.sr-art__label { fill: var(--paper-78i); font: 500 14px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.sr-art__label--side { fill: var(--cyan); }
.sr-art__label--end { text-anchor: end; }
.sr-art__dim path { fill: none; stroke: var(--paper-78i); stroke-width: 1; stroke-linecap: square; }
.sr-art__dim text { fill: var(--paper-78i); font: 500 13px/1 var(--f-mono); letter-spacing: .04em; }
.sr-counts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-3) var(--s-7);
	margin: var(--s-8) 0 0;
	padding: var(--s-4) 0 0;
	border-top: var(--bw) solid var(--rule);
	list-style: none;
	font: 500 var(--t-label)/1.3 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--fg-2);
}
.sr-counts__roads { color: var(--fg); }
.sr-counts__dot {
	display: inline-block;
	margin-right: .25em;
	font-family: var(--f-dot);
	font-weight: 500;
	font-size: var(--t-readout);
	line-height: .8;
	letter-spacing: .02em;
	font-variation-settings: "ELSH" 2;
	color: var(--sig);
	vertical-align: -.08em;
	transition: font-variation-settings var(--dur-ui) var(--ease-mech);
}
@media (hover: hover) { .sr-counts__roads:hover .sr-counts__dot { font-variation-settings: "ELSH" 8; } }
@media (min-width: 1024px) {
	/* The plan fills the right half from the mega to the counts rule and leaves the page at the right
	   edge (media bleeds off one edge, text never does). It never sizes the rows: the text does. */
	.sr-hero { overflow-x: clip; }
	.sr-hero__grid { row-gap: var(--s-7); }
	.sr-hero__head, .sr-hero__lead, .sr-hero__more { position: relative; z-index: 1; }
	.sr-hero__head { grid-column: 1 / span 8; grid-row: 1; }
	.sr-hero__lead { grid-column: 1 / span 6; grid-row: 2; }
	.sr-hero__more { grid-column: 1 / span 6; grid-row: 3; }
	.sr-hero__art {
		grid-column: 7 / -1;
		grid-row: 1 / span 3;
		align-self: stretch;
		justify-self: stretch;
		max-width: none;
		contain: size;
		margin-right: calc((100vw - min(100vw - 2 * var(--margin), var(--max))) / -2);
		pointer-events: none;
	}
	.sr-art:not(.sr-art--plan) { display: none; }
	.sr-art--plan { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: hidden; }
	.sr-hero__sub { margin-top: var(--s-4); }
}

/* =========================================================================
   s2 · SIDE ROAD 00 (Ink)
   ========================================================================= */
.sr-origin__grid { row-gap: var(--s-7); }
.sr-origin__film { margin: 0; order: 2; }
.sr-origin__text { order: 1; }
/* Phones and tablets: the strip runs left to right under the story; desktop: the tall strip, sticky. */
.sr-origin__film:not(.sr-origin__film--h) { display: none; }
.sr-origin__film--h { margin-top: var(--s-6); }
.sr-origin__film--h .sr-origin__filmcap { text-align: left; }
.sr-film { width: 100%; max-width: 300px; height: auto; margin-inline: auto; }
.sr-film--h { max-width: 640px; margin-inline: 0; }
.sr-film--h .sr-film__no { font-size: 15px; }
.sr-film * { vector-effect: non-scaling-stroke; }
.sr-film__body { fill: var(--ink-2); stroke: var(--silver); stroke-width: 1.5; }
.sr-film__hole { fill: var(--ink); stroke: var(--steel); stroke-width: 1; }
.sr-film__frame { fill: var(--ink); stroke: var(--steel); stroke-width: 1; }
.sr-film__frame.is-hot { stroke: var(--molten); stroke-width: 2.5; }
.sr-film__no { fill: var(--steel); font: 500 9px/1 var(--f-mono); letter-spacing: .06em; }
.sr-film__speed { stroke: var(--silver); stroke-width: 1.5; stroke-linecap: square; opacity: .5; }
.sr-film__ticket path { fill: none; stroke: var(--paper); stroke-width: 1.5; }
.sr-film__ticket path:first-child { fill: var(--ink-3); }
.sr-film__perf { stroke-dasharray: 3 3; }
.sr-film__pause path { stroke: var(--molten); stroke-width: 3; }
.sr-origin__filmcap { margin-top: var(--s-4); font: 400 var(--t-micro)/1.5 var(--f-mono); color: var(--fg-2); text-align: center; }
.sr-origin__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.sr-real {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 8px;
	background: var(--paper);
	color: var(--ink);
	font: 600 .6875rem/1.25 var(--f-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
}
.sr-origin__platform { font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.sr-origin__title { --flar: 100; --volm: 100; font-size: var(--t-h2); max-width: 16ch; }
.sr-origin__body { margin-top: var(--s-5); }
.sr-origin__intro { margin-top: var(--s-7); color: var(--fg-2); max-width: 52ch; }
.sr-origin__formula { margin-top: var(--s-2); font: 600 .875rem/1.4 var(--f-mono); letter-spacing: .04em; color: var(--sig); }
.sr-layers { margin: var(--s-4) 0 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.sr-layers__row { display: grid; gap: var(--s-1) var(--s-5); padding: var(--s-4) 0; border-top: var(--bw) solid var(--rule); }
.sr-layers__label { font: 600 var(--t-label)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--sig); }
.sr-layers__body { max-width: 60ch; }
.sr-layers__body .sr-src { display: inline; margin-left: .3em; }
.sr-origin__h3 { margin-top: var(--s-7); font-size: var(--t-h4); font-weight: var(--w-h3); }
.sr-origin__rules { margin-top: var(--s-3); padding-left: 1.4em; display: grid; gap: var(--s-3); max-width: 60ch; }
.sr-origin__rules li::marker { font-family: var(--f-mono); color: var(--fg-2); }
.sr-origin__story { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); background: var(--bg-2); max-width: 60ch; }
.sr-story-label { display: inline-block; margin-bottom: var(--s-2); padding: 2px 6px; border: var(--bw) solid var(--fg-3); font: 500 .6875rem/1.25 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.sr-origin__story p { color: var(--fg-2); font-size: var(--t-small); }
.sr-origin__actions { margin-top: var(--s-6); }
.sr-sibs { margin: var(--s-3) 0 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.sr-sibs__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 52px;
	padding: var(--s-3) 0;
	border-top: var(--bw) solid var(--rule);
	color: var(--fg);
	text-decoration: none;
	font: var(--w-ui) 1rem/1.3 var(--f-sans);
}
.sr-sibs__ic { flex: none; width: 18px; height: 18px; transition: transform var(--dur-ui) var(--ease-mech); }
@media (hover: hover) { .sr-sibs__link:hover { text-decoration: underline; text-underline-offset: .2em; } .sr-sibs__link:hover .sr-sibs__ic { transform: translateY(3px); } }
@media (min-width: 768px) {
	.sr-layers__row { grid-template-columns: 9rem minmax(0, 1fr); }
}
@media (min-width: 1024px) {
	.sr-origin__film:not(.sr-origin__film--h) { display: block; order: 0; grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; }
	.sr-origin__film--h { display: none; }
	.sr-origin__text { order: 0; grid-column: 6 / -1; }
}


.sr-index { padding-bottom: calc(var(--s-8) + var(--ch-v)); }

/* The register: every road by its catalogue number, like the index page of a notebook. The filters
   above thin it live, so a choice shows its roads right where it was made. Columns run top to bottom. */
.sr-register { margin-top: var(--s-6); border-top: var(--bw-2) solid var(--fg); }
.sr-register[hidden] { display: none; }
.sr-empty--index { margin: var(--s-6) 0 0; }
.sr-register__list { margin: 0; padding: 0; list-style: none; }
.sr-register__item { break-inside: avoid; }
.sr-register__item[hidden] { display: none; }
.sr-register__row {
	position: relative;
	display: grid;
	grid-template-columns: 2.6em minmax(0, 1fr);
	align-items: baseline;
	gap: var(--s-3);
	min-height: 44px;
	padding: .66em var(--s-2) .62em 0;
	border-bottom: var(--bw) solid var(--rule);
	color: var(--fg);
	font: var(--w-ui) .9375rem/1.3 var(--f-sans);
	text-decoration: none;
	transition: background-color var(--dur-ui) var(--ease-mech), padding var(--dur-ui) var(--ease-mech);
}
.sr-register__no { font: 600 .8125rem/1.3 var(--f-mono); letter-spacing: .04em; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.sr-register__row:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
	.sr-register__row:hover { background: var(--bg-2); padding-left: var(--s-2); }
	.sr-register__row:hover .sr-register__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
	.sr-register__row:hover .sr-register__no { color: var(--fg); }
}
@media (min-width: 768px) { .sr-register__list { columns: 2; column-gap: var(--gutter); } }
@media (min-width: 1024px) { .sr-register__list { columns: 3; } }
/* Phones: the route below is the index; the register appears as the result list of a filter. */
@media (max-width: 767px) { html.js .sr-register:not([data-sr-filtered]) { display: none; } }

/* Shown only with «Less motion» on: the plates are parked on their final frame. */
.sr-rm-note { display: none; margin-top: var(--s-4); font: 500 var(--t-label)/1.5 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
html.rm .sr-rm-note { display: block; }

/* =========================================================================
   s4 · THE ROUTE (Paper): 30 roads on one spine
   ========================================================================= */
.sr-roads { padding-top: calc(var(--sec-y) + var(--ch-v)); }
.sr-route {
	--spine-x: 6px;
	--lane: calc(var(--spine-x) + 18px); /* text starts this far right of the route's edge */
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sr-route::before {
	content: "";
	position: absolute;
	left: var(--spine-x);
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--ink);
}
.sr-road { position: relative; padding: var(--s-7) 0 var(--s-7) var(--lane); border-top: var(--bw) solid var(--rule); scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.sr-road:first-child { border-top: 0; padding-top: var(--s-4); }
.sr-road[hidden] { display: none; }
/* Thirty plates: let the browser skip rendering the roads far off screen (it remembers their size).
   Paint containment clips to the card's box, so nothing in a card may hang outside it: the lane
   padding lives on the card itself, and the road sign sits inside it, on the spine. */
/* Estimates measured on the rendered cards (tools/qa/side-roads-heights.mjs: ≈ 870 / 1110 / 570 px), so the
   page barely changes height as cards render for the first time ("auto" then remembers the real size). */
.sr-road { content-visibility: auto; contain-intrinsic-size: auto 870px; }
@media (min-width: 768px) { .sr-road { contain-intrinsic-size: auto 1110px; } }
@media (min-width: 1024px) { .sr-road { contain-intrinsic-size: auto 570px; } }
.sr-road__in { display: grid; gap: var(--s-5); align-items: start; }
.sr-road__sign {
	position: relative;
	justify-self: start;
	display: inline-flex;
	align-items: baseline;
	gap: .4em;
	margin-left: calc(-1 * var(--lane) + var(--spine-x) - 6px);
	padding: 4px calc(var(--ch-ui) + 8px) 4px 8px;
	color: var(--paper);
	font: 500 var(--t-label)/1.2 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	isolation: isolate;
}
.sr-road__sign::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); clip-path: var(--clip-ui); }
.sr-road__sign b { font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; }
.sr-road__platform { font: 500 var(--t-label)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--sig); }
.sr-road__title { --flar: 100; --volm: 100; margin-top: var(--s-2); font-size: var(--t-h3); font-weight: 720; line-height: 1.08; max-width: 20ch; }
.sr-road__goals { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.sr-road__goals li { padding: 1px 7px; border: var(--bw) solid var(--rule); font: 500 .6875rem/1.5 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
.sr-road__lede { margin-top: var(--s-5); font-family: var(--f-serif); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.5; max-width: 52ch; }
/* Phones: the bend reads in four lines until the card is opened (the full text is in the DOM). */
@media (max-width: 767px) {
	.js .sr-road:not(.is-open) .sr-road__lede { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
	.js .sr-road:not(.is-open) .sr-road__lede .sr-lab { display: block; }
}

@media (min-width: 768px) {
	.sr-route { --spine-x: 10px; --lane: calc(var(--spine-x) + 40px); }
}
@media (min-width: 1024px) {
	.sr-route { --spine-x: 12px; --lane: 0px; }
	.sr-road { padding: var(--s-7) 0; }
	.sr-road__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-4); }
	.sr-road__sign { grid-column: 1 / span 1; grid-row: 1 / span 2; margin-left: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px calc(var(--ch-ui) + 6px) 10px 10px; }
	.sr-road__sign b { font-size: 1.5rem; line-height: 1; }
	.sr-road__text { grid-column: 2 / span 6; grid-row: 1; padding-right: var(--s-5); }
	.sr-road__mock { grid-column: 8 / -1; grid-row: 1 / span 2; }
	.sr-road__more { grid-column: 2 / -1; }
}

/* Stations on the route: the platform family a group of roads leaves from. */
.sr-junction {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-4);
	padding: var(--s-6) 0 var(--s-2) var(--lane);
	border-top: var(--bw-2) solid var(--fg);
	font: 600 .8125rem/1.3 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}
.sr-junction:first-child { border-top: 0; padding-top: 0; }
.sr-junction::before {
	content: "";
	position: absolute;
	left: calc(var(--spine-x) - 5px);
	top: calc(var(--s-6) + .1em);
	width: 12px;
	height: 12px;
	background: var(--paper);
	border: 2.5px solid var(--ink);
}
.sr-junction:first-child::before { top: .1em; }
.sr-junction__n { font-weight: 500; color: var(--fg-2); }
.sr-junction + .sr-road { border-top: 0; padding-top: var(--s-4); }
@media (min-width: 1024px) {
	.sr-junction { padding-left: calc((100% - 11 * var(--gutter)) / 12 + var(--gutter)); }
	.sr-junction::before { left: calc(var(--spine-x) - 5px); }
}

/* =========================================================================
   C-22 · THE CUT-OPEN MOCK (layer A paper surface · layer B X-ray · 47° seam)
   ========================================================================= */
.sr-mock { margin: 0; display: grid; gap: var(--s-2); }
.sr-mock__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-4); }
/* «Δοκιμάστε το» (decisions.md #9): an invitation, not a button. Its mark is a miniature of the grip on the
   seam (a piece of the N-bar at 47°), so the eye finds what to drag. Nothing to try without JS. */
.sr-mock__tag { display: inline-flex; align-items: center; gap: .65em; font: 600 .6875rem/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }
.sr-mock__tag::before { content: ""; flex: none; width: 4px; height: 14px; margin-left: 3px; background: var(--n-grad); transform: rotate(43deg); }
.no-js .sr-mock__tag { visibility: hidden; }
.sr-mock__legend { display: inline-flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
.sr-mock__key { display: inline-flex; align-items: center; gap: .5em; }
.sr-mock__key::before { content: ""; width: 12px; height: 12px; border: var(--bw) solid var(--fg); background: var(--paper); }
.sr-mock__key--b::before { background: var(--ink-2); border-color: var(--ink-2); }
.sr-mock__stage {
	--run: 69.94%; /* 4:3 plate: the 47° line runs 0.75 × 93.25% of the width top to bottom */
	--c: calc(100% + var(--run) / 2 - var(--v) * (100% + var(--run)) / 100);
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	container-type: inline-size;
	background: var(--paper);
	outline: var(--bw) solid var(--rule);
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
.sr-mock__stage.is-sweep { transition: --v 1100ms var(--ease-cut); }
.mk { position: absolute; inset: 0; font: 400 clamp(8.5px, 2.55cqi, 14.5px)/1.25 var(--f-sans); letter-spacing: 0; }
.mk--a {
	--mk-line: var(--ink); --mk-fill: var(--paper); --mk-scr: var(--paper); --mk-bar: var(--paper-3); --mk-bar2: var(--steel-dark);
	--mk-dim: var(--steel-dark); --mk-hi: var(--cyan-deep); --mk-img: var(--paper-2); --mk-leak: var(--molten-deep); --mk-text: var(--ink); --mk-card: var(--paper);
	background: var(--paper);
	color: var(--ink);
	clip-path: polygon(-2% -2%, calc(var(--c) + var(--run) / 2) -2%, calc(var(--c) - var(--run) / 2) 102%, -2% 102%);
}
.mk--b {
	--mk-line: var(--silver); --mk-fill: var(--ink-2); --mk-scr: var(--ink); --mk-bar: var(--ink-3); --mk-bar2: var(--steel);
	--mk-dim: var(--steel); --mk-hi: var(--cyan); --mk-img: var(--ink-3); --mk-leak: var(--molten); --mk-text: var(--paper); --mk-card: var(--ink);
	background-color: var(--ink-2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 0H0V20' fill='none' stroke='%23F1EEE6' stroke-opacity='.06'/%3E%3C/svg%3E");
	background-size: 5cqi 5cqi;
	color: var(--paper);
	clip-path: polygon(calc(var(--c) + var(--run) / 2) -2%, 102% -2%, 102% 102%, calc(var(--c) - var(--run) / 2) 102%);
}
.sr-mock__seam {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--n-grad);
	clip-path: polygon(calc(var(--c) + var(--run) / 2 - 2px) -2%, calc(var(--c) + var(--run) / 2 + 2px) -2%, calc(var(--c) - var(--run) / 2 + 2px) 102%, calc(var(--c) - var(--run) / 2 - 2px) 102%);
}
.sr-mock__handle {
	position: absolute;
	left: var(--c);
	top: 50%;
	width: 34px;
	height: 44px;
	margin: -22px 0 0 -17px;
	z-index: 2;
	cursor: grab;
	touch-action: none;
}
.sr-mock__handle i {
	/* The grip is a short, thick piece of the N-bar laid on the seam (47°). */
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 46px;
	margin: -23px 0 0 -4px;
	background: var(--n-grad);
	box-shadow: 0 0 0 2px var(--paper);
	transform: rotate(43deg);
	transition: transform var(--dur-ui) var(--ease-mech);
}
.sr-mock__handle:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: 0; }
.sr-mock__stage.is-drag { cursor: grabbing; }
.sr-mock__stage.is-drag .sr-mock__handle i, .sr-mock__handle:hover i { transform: rotate(43deg) scale(1.15); }
.sr-mock__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.sr-mock__cap { flex: 1 1 22ch; font: 400 var(--t-small)/1.45 var(--f-sans); color: var(--fg-2); }
.sr-mock__again { flex: none; }
.sr-mock__again-ic { transform: rotate(0); }

/* ---- kit: SVG strokes (1.5px, square caps, non-scaling) ---------------- */
.mk-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk-svg * { vector-effect: non-scaling-stroke; }
.mk-dev { fill: var(--mk-fill); stroke: var(--mk-line); stroke-width: 1.5; }
.mk-scr { fill: var(--mk-scr); stroke: var(--mk-line); stroke-width: 1; }
.mk-cam { fill: var(--mk-line); }
.mk-l { fill: none; stroke: var(--mk-line); stroke-width: 1.5; stroke-linecap: square; }
.mk-l2 { fill: none; stroke: var(--mk-dim); stroke-width: 1; stroke-linecap: square; }
.mk-nofill { fill: none; }
.mk-l.is-hi, .mk-edge.is-hi { stroke: var(--mk-hi); }
.mk-bar { fill: var(--mk-bar); }
.mk-bar--strong { fill: var(--mk-bar2); }
.mk-img { fill: var(--mk-img); stroke: var(--mk-line); stroke-width: 1; }
.mk-img.is-hi { stroke: var(--mk-hi); stroke-width: 2; }
.mk-imgg.is-dim, .mk-img.is-dim, .is-dim { opacity: .45; }
.mk-faint { opacity: .5; }
.mk-card { fill: var(--mk-card); stroke: var(--mk-line); stroke-width: 1.5; }
.mk-card.is-hi { stroke: var(--mk-hi); stroke-width: 2; }
.mk-card.is-leak { stroke: var(--mk-leak); stroke-dasharray: 4 3; }
.mk-field { fill: var(--mk-scr); stroke: var(--mk-line); stroke-width: 1; }
.mk-field.is-hi { stroke: var(--mk-hi); stroke-width: 2; }
.mk-field-bar { fill: none; stroke: var(--mk-line); stroke-width: 1; }
.mk-prog { fill: none; stroke: var(--mk-bar); stroke-width: 2.5; }
.mk-prog.is-on { stroke: var(--mk-line); }
.mk-dot { fill: var(--mk-bar); }
.mk-dot.is-on { fill: var(--mk-hi); }
.mk-cell { fill: var(--mk-img); stroke: var(--mk-line); stroke-width: 1; }
.mk-cell.is-dashed { fill: none; stroke-dasharray: 3 3; }
.mk-cell.is-on { fill: none; stroke: var(--mk-hi); stroke-width: 2.5; }
.mk-slot { fill: none; stroke: var(--mk-line); stroke-width: 1; }
.mk-slot.is-on { fill: var(--mk-hi); stroke: var(--mk-hi); }
.mk-win { fill: none; stroke: var(--mk-hi); stroke-width: 2; }
.mk-arrow { fill: none; stroke: var(--mk-hi); stroke-width: 1.5; stroke-dasharray: 4 3; }
.mk-lead { fill: none; stroke: var(--mk-hi); stroke-width: 1; }
.mk-lead-end { fill: var(--mk-hi); }
.mk-aud { fill: none; stroke: var(--mk-line); stroke-width: 1; stroke-dasharray: 3 3; }
.mk-aud.is-hi { fill: var(--mk-hi); fill-opacity: .12; stroke: var(--mk-hi); stroke-dasharray: none; }
.mk-av { fill: var(--mk-scr); stroke: var(--mk-line); stroke-width: 1.2; }
.mk-av.is-hi { stroke: var(--mk-hi); }
.mk-node { fill: var(--mk-card); stroke: var(--mk-line); stroke-width: 1; }
.mk-node.is-hi { stroke: var(--mk-hi); stroke-width: 2; }
.mk-edge { fill: none; stroke: var(--mk-dim); stroke-width: 1; }
.mk-obj { fill: var(--mk-fill); stroke: var(--mk-line); stroke-width: 1.5; stroke-linejoin: round; }
.mk-seed { stroke: var(--mk-line); stroke-width: 1.2; stroke-linecap: round; }
.mk-label { fill: var(--mk-scr); stroke: var(--mk-line); stroke-width: 1; }
.mk-wheel { fill: var(--mk-scr); stroke: var(--mk-line); stroke-width: 1.5; }
.mk-map { fill: var(--mk-img); stroke: var(--mk-line); stroke-width: 1; }
.mk-street { fill: none; stroke: var(--mk-scr); stroke-width: 5; }
.mk--b .mk-street { stroke: var(--ink-3); }
.mk-motorway { fill: none; stroke: var(--mk-line); stroke-width: 7; }
.mk-route { fill: none; stroke: var(--mk-hi); stroke-width: 2; stroke-dasharray: 5 4; }
.mk-pin { stroke: var(--mk-line); stroke-width: 1.5; }
.mk-pinhead { fill: var(--mk-line); }
.mk-pinhead.is-hi { fill: var(--mk-hi); }
.mk-ghost { fill: none; stroke: var(--mk-line); stroke-width: 1.5; stroke-dasharray: 3 4; }
.mk-ghost.is-hi { stroke: var(--mk-hi); }
.mk-ring { fill: none; stroke: var(--mk-bar); stroke-width: 2; }
.mk-ring.is-on { stroke: var(--mk-hi); }
.mk-msg { fill: var(--mk-card); stroke: var(--mk-hi); stroke-width: 1.5; }
.mk-badge { fill: var(--mk-hi); }
.mk-frame { fill: var(--mk-scr); stroke: var(--mk-line); stroke-width: 1.5; }
.mk-frame.is-hi { stroke: var(--mk-hi); stroke-width: 2; }
.mk-seamline { stroke: var(--mk-hi); stroke-width: 1; stroke-dasharray: 2 3; }
.mk-seamtick { fill: var(--mk-hi); }
.mk-tick { fill: var(--mk-line); }
.mk-crumb { fill: var(--mk-hi); }
.mk-lens { fill: none; stroke: var(--mk-hi); stroke-width: 2; }
.mk-strike { stroke: var(--mk-leak); stroke-width: 1.5; }
.mk-glass { fill: none; stroke: var(--mk-hi); stroke-width: 1.5; }
.mk-logo { fill: var(--mk-card); stroke: var(--mk-hi); stroke-width: 2; }
.mk-initial { fill: var(--mk-bar); }
.mk-thumb { fill: var(--mk-img); stroke: var(--mk-hi); stroke-width: 1; }
.mk-srcchip { fill: none; stroke: var(--mk-line); stroke-width: 1; }
.mk-srcchip.is-hi { stroke: var(--mk-hi); stroke-width: 2; }
.mk-tabline { stroke: var(--mk-line); stroke-width: 2.5; }
.mk-tabline.is-hi { stroke: var(--mk-hi); }
.mk-reticle { fill: none; stroke: var(--mk-line); stroke-width: 2; }
.mk-reticle.is-hi { stroke: var(--mk-hi); }
.mk-sheet { fill: var(--mk-card); stroke: var(--mk-hi); stroke-width: 1.5; }
.mk-barcode { stroke: var(--mk-text); stroke-width: 1.5; }
.mk-receipt { fill: var(--mk-scr); stroke: var(--mk-line); stroke-width: 1.2; }
.mk-qr { fill: var(--mk-bar); }
.mk-qr.is-on { fill: var(--mk-text); }
.mk-key { fill: var(--mk-card); stroke: var(--mk-line); stroke-width: 1; }
.mk-key.is-hi { stroke: var(--mk-hi); stroke-width: 2; }
.mk-stop { fill: var(--mk-hi); }
.mk-needle { stroke: var(--mk-hi); stroke-width: 2.5; stroke-linecap: square; }
.mk-nfc { fill: var(--mk-scr); stroke: var(--mk-hi); stroke-width: 1.5; }
.mk-ripple { fill: none; stroke: var(--mk-hi); stroke-width: 1.5; }
.mk-tickmark { fill: none; stroke: var(--mk-hi); stroke-width: 2; }
.mk-island { fill: var(--mk-img); stroke: var(--mk-line); stroke-width: 1.2; stroke-linejoin: round; }
.mk-bub { fill: var(--mk-card); stroke: var(--mk-hi); stroke-width: 1.5; }
.mk-block { fill: var(--mk-img); stroke: var(--mk-line); stroke-width: 1; }
.mk-locker { fill: var(--mk-card); stroke: var(--mk-line); stroke-width: 1.5; }
.mk-lockdoor { fill: none; stroke: var(--mk-dim); stroke-width: 1; }
.mk-door { fill: none; stroke: var(--mk-hi); stroke-width: 2; }
.mk-walker { fill: var(--mk-hi); }
.mk-lorry .mk-obj { stroke-linejoin: miter; }
.mk-grid { }

/* ---- kit: HTML text boxes ------------------------------------------------ */
.mk-box { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: .35em; color: var(--mk-text); }
.mk-box.mk-c { align-items: center; text-align: center; }
.mk-s { display: contents; }
.mk-t { display: block; font-size: .92em; line-height: 1.22; overflow-wrap: anywhere; }
.mk-t--s { font-size: .8em; }
.mk-t--b { font-weight: 640; }
.mk-t--xl { font-size: 1.35em; font-weight: 760; line-height: 1.05; --flar: 100; font-variation-settings: "FLAR" 100, "VOLM" 60; }
.mk-mono { font: 500 .78em/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.mk-dim { color: var(--mk-dim); }
.mk-hl { color: var(--mk-hi); }
.mk-ellip { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-pill { display: inline-block; padding: .25em .7em; border: 1px solid var(--mk-line); border-radius: 999px; background: var(--mk-scr); font: 500 .75em/1.2 var(--f-mono); letter-spacing: .03em; }
.mk-pill--hi { border-color: var(--mk-hi); color: var(--mk-hi); }
.mk-tag { display: inline-block; padding: .2em .5em; border: 1px solid var(--mk-line); font: 600 .74em/1.25 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.mk-tag--hi { border-color: var(--mk-hi); color: var(--mk-hi); }
.mk-tag--leak { border-color: var(--mk-leak); color: var(--mk-leak); }
.mk-btn { display: inline-block; margin-top: .3em; padding: .35em .8em; background: var(--mk-line); color: var(--mk-scr); font-weight: 600; font-size: .82em; line-height: 1.2; }
.mk-btn--wide { display: block; width: 100%; text-align: center; }
.mk-btn--hi { background: var(--mk-hi); color: var(--ink); }
.mk-chips { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .35em; }
.mk-chip { display: inline-block; padding: .15em .5em; border: 1px solid var(--mk-line); border-radius: 999px; font: 500 .72em/1.2 var(--f-mono); }
.mk-chip--hi { border-color: var(--mk-hi); color: var(--mk-hi); }
.mk-bubble { display: inline-block; max-width: 100%; padding: .45em .65em; border: 1px solid var(--mk-line); background: var(--mk-card); font-size: .8em; line-height: 1.3; }
.mk-bubble--out { border-color: var(--mk-hi); }
.mk-bubble--in { }
.mk-code { color: var(--mk-hi); font-family: var(--f-mono); font-weight: 600; letter-spacing: .02em; outline: 1px solid var(--mk-hi); outline-offset: 1px; }
.mk-code-big { font: 700 2.1em/1 var(--f-mono); letter-spacing: .04em; color: var(--mk-text); }
.mk-code-s { font: 600 .82em/1.2 var(--f-mono); letter-spacing: .04em; color: var(--mk-hi); }
.mk-hook { font: 760 2em/1 var(--f-sans); color: var(--mk-text); }
.mk-stamp { display: inline-flex; flex-direction: column; gap: .15em; }
.mk-stamp__l { font: 500 .68em/1.25 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--mk-dim); }
.mk-stamp b { font: 600 1.25em/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--mk-text); }
.mk-hl .mk-stamp b, .mk-stamp.mk-hl b { color: var(--mk-hi); }
.mk-stamp.is-flat b { font-size: 1em; }
.mk-big b { font-size: 1.7em; }
.mk-sample { display: inline-block; padding: .1em .4em; border: 1px solid var(--mk-dim); font: 500 .68em/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mk-dim); }
.mk-opt { display: block; width: 100%; padding: .4em .5em; border: 1px solid var(--mk-line); font-size: .8em; line-height: 1.2; background: var(--mk-card); }
.mk-opt.is-on { border-color: var(--mk-hi); color: var(--mk-hi); font-weight: 600; }
.mk-ok { font: 600 .74em/1.2 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--mk-hi); }
.mk-okmark { display: inline-block; width: 1.05em; height: .9em; margin-right: .35em; vertical-align: -.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }
.mk-time { font: 300 2.4em/1 var(--f-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mk-rank { display: inline-block; padding: .1em .35em; background: var(--mk-hi); color: var(--ink); font: 700 .8em/1.2 var(--f-mono); }
.mk-qs { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .3em; }
.mk-q { display: inline-block; padding: .15em .45em; border: 1px solid var(--mk-line); font-size: .78em; }
.mk-lang { font: 600 .72em/1 var(--f-mono); padding: .2em .35em; background: var(--mk-hi); color: var(--ink); }
.mk-langs { display: inline-flex; gap: .3em; }
.mk-log { display: block; padding: .5em .6em; border-left: 2px solid var(--mk-hi); font: 500 .78em/1.4 var(--f-mono); color: var(--mk-hi); }
.mk-card-t { display: flex; align-items: center; gap: .45em; padding: .45em .55em; border: 1px solid var(--mk-hi); background: var(--mk-card); font-size: .8em; line-height: 1.25; }
.mk-pinmark { flex: none; width: .7em; height: .7em; background: var(--mk-hi); }
.mk-badge-t { font: 700 .72em/1.2 var(--f-mono); color: var(--ink); }
.mk-field-t { display: block; width: 100%; padding: .45em .6em; border: 1px solid var(--mk-line); border-radius: 999px; font-size: .78em; color: var(--mk-dim); }
.mk-field-t.mk-hl { border-color: var(--mk-hi); color: var(--mk-hi); }
.mk-prow { display: flex; justify-content: space-between; gap: 1em; width: 100%; padding: .45em .6em; border: 1px solid var(--mk-line); background: var(--mk-card); font-size: .85em; }
.mk-prow b { font-family: var(--f-mono); font-weight: 600; }
.mk-prow.is-hi { border: 2px solid var(--mk-hi); color: var(--mk-hi); }
.mk-blur, .mk-clear { display: block; width: 100%; }
.mk-blur { filter: blur(5px); opacity: .8; }
.mk-ringart { width: 100%; height: auto; fill: none; stroke: var(--mk-line); stroke-width: 2.5; }
.mk-clear .mk-ringart { stroke: var(--mk-hi); }
.mk-sticker { width: 100%; height: auto; }
.mk-sticker .st-o { fill: var(--mk-scr); stroke: var(--mk-line); stroke-width: 2.5; }
.mk-sticker .st-l { fill: none; stroke: var(--mk-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk--b .mk-sticker .st-l { stroke: var(--mk-hi); }
.mk-bar-t { display: block; width: 70%; height: .55em; margin-top: .3em; background: var(--mk-bar); }

/* Stamps arm only while the cut sweeps (engine); otherwise final. */
.mk-stamp.is-stamping { animation: nx-stamp var(--dur-stamp) var(--ease-stamp) both; }

/* =========================================================================
   s5 · RULES OF THE ROAD (Ink-2)
   ========================================================================= */
.sr-tests { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: var(--bw) solid var(--rule); }
.sr-tests__row { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-content: start; gap: var(--s-2) var(--s-4); padding: var(--s-5) 0; border-bottom: var(--bw) solid var(--rule); }
.sr-tests__glyph { grid-row: 1 / span 2; width: 40px; height: 40px; }
.sr-tests__title { font-size: var(--t-h4); font-weight: var(--w-h3); max-width: none; }
.sr-tests__body { color: var(--fg-2); max-width: 46ch; }
.sr-never { margin-top: var(--s-9); row-gap: var(--s-5); }
.sr-never__title { font-size: var(--t-h3); max-width: 14ch; }
.sr-never__list { margin: 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--rule); }
.sr-never__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; border-bottom: var(--bw) solid var(--rule); }
.sr-never__x { position: relative; width: 16px; height: 16px; margin-top: .25em; }
.sr-never__x::before { content: ""; position: absolute; left: -2px; top: 7px; width: 20px; height: 2px; background: var(--leak); transform: rotate(-47deg); }
.sr-never__list .sr-src { margin-left: .35em; }
.sr-closed { margin-top: var(--s-9); }
.sr-closed__head { display: grid; gap: var(--s-3); max-width: 56ch; }
.sr-closed__title { font-size: var(--t-h3); }
.sr-closed__intro { color: var(--fg-2); }
.sr-closed__list { margin: var(--s-6) 0 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--rule); }
.sr-closed__item { display: grid; gap: var(--s-2) var(--s-5); padding: var(--s-5) 0; border-bottom: var(--bw) solid var(--rule); }
.sr-closed__glyph { width: 32px; height: 32px; stroke: var(--steel); }
.sr-closed__name { font: var(--w-h3) var(--t-h4)/1.25 var(--f-sans); }
.sr-closed__item p { color: var(--fg-2); max-width: 60ch; }
.sr-closed__item .sr-closed__lesson { color: var(--fg); font-family: var(--f-serif); font-style: italic; }
.sr-closed__upkeep { margin-top: var(--s-6); font: 500 var(--t-label)/1.5 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); max-width: 70ch; }
/* The four tests are a test sheet: ruled rows (deck 15 s5), glyph · test · what it means. */
@media (min-width: 768px) {
	.sr-tests__row { grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: var(--s-2) var(--s-6); padding: var(--s-5) 0; }
	.sr-tests__glyph { grid-row: auto; }
	.sr-tests__title { padding-top: .35em; }
	.sr-tests__body { padding-top: .45em; max-width: 58ch; }
}
@media (min-width: 1024px) {
	.sr-tests__row { grid-template-columns: 64px minmax(0, 4fr) minmax(0, 7fr); }
	.sr-never__title { grid-column: 1 / span 4; }
	.sr-never__list { grid-column: 6 / -1; }
	.sr-closed__item { grid-template-columns: 32px minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); align-items: start; }
	.sr-closed__item > * { grid-row: 1; }
	.sr-closed__glyph { grid-column: 1; }
	.sr-closed__name { grid-column: 2; }
	.sr-closed__item > p:not(.sr-closed__lesson) { grid-column: 3; }
	.sr-closed__lesson { grid-column: 4; }
	.sr-closed__item > .sr-src { grid-column: 2; grid-row: 2; }
}


} /* end @layer pages */