@property --mkw-progress {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}
@property --mkw-lift {
  syntax: '<length>';
  initial-value: 0px;
  inherits: false;
}

/* steel-and-oxide ------------------------------------------------------- */
:root {
  --mkw-bg: #0E1417;
  --mkw-panel: #172126;
  --mkw-panel-up: #1E2A31;
  --mkw-panel-down: #111A1E;
  --mkw-field: #0A0F12;
  --mkw-ink: #E6EEF2;
  --mkw-muted: #8CA3AD;
  --mkw-accent: #E2621B;
  --mkw-accent2: #4F8FA6;
  --mkw-line: rgba(140, 163, 173, 0.24);
  --mkw-line-hard: rgba(140, 163, 173, 0.44);
  --mkw-ring: #E2621B;
  --mkw-head: 184px;
  --mkw-gutter: 0px;
  --mkw-measure: 62ch;
  /* ONE family for the whole page. The hierarchy is carried by size and
     weight alone — there is no second face anywhere, and the figures get
     tabular-nums rather than a monospace to keep columns aligned. */
  --mkw-face: 'Bricolage Grotesque', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --mkw-text: var(--mkw-face);
  color-scheme: dark;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  background: var(--mkw-bg);
  --mkw-progress: 0;
}

/* a short reset, written for this file only */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, ol, li, dl, dt, dd, figure, figcaption, form, output {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }
img, svg { max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }

.mkw-body {
  background: var(--mkw-bg);
  color: var(--mkw-ink);
  font-family: var(--mkw-text);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: -0.009em;
  font-variant-numeric: tabular-nums;
  padding-left: var(--mkw-gutter);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

/* skip link ------------------------------------------------------------- */
.mkw-skip {
  position: fixed;
  z-index: 90;
  top: 0.5rem;
  left: 0.5rem;
  transform: translateY(-180%);
  padding: 0.85rem 1.3rem;
  background: var(--mkw-accent);
  color: #120802;
  font-family: var(--mkw-face);
  font-weight: 700;
  text-decoration: none;
  transition: transform 180ms ease-out;
}
.mkw-skip:focus { transform: translateY(0); }

/* header and the tab strip --------------------------------------------- */
.mkw-top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--mkw-bg) 88%, transparent);
  backdrop-filter: blur(9px);
}
.mkw-top-in {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  align-items: flex-end;
  justify-content: space-between;
  width: min(1180px, 100% - 2.2rem);
  margin-inline: auto;
  padding: 1.1rem 0 0.7rem;
}
.mkw-mark {
  display: block;
  padding: 0.4rem 0.7rem 0.4rem 0;
  text-decoration: none;
}
.mkw-mark-name {
  display: block;
  font-family: var(--mkw-face);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.1;
}
.mkw-mark-sub {
  display: block;
  color: var(--mkw-muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mkw-mark:hover .mkw-mark-name { color: var(--mkw-accent); }

.mkw-tabrow {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mkw-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1rem 0.78rem;
  background: var(--mkw-panel);
  border-bottom: 3px solid transparent;
  color: var(--mkw-muted);
  text-decoration: none;
  transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease;
}
.mkw-tab-n {
  font-family: var(--mkw-face);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mkw-accent2);
}
.mkw-tab-t {
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mkw-tab:hover {
  background: var(--mkw-panel-up);
  color: var(--mkw-ink);
  border-bottom-color: var(--mkw-line-hard);
}
.mkw-tab.is-here {
  background: var(--mkw-panel-up);
  border-bottom-color: var(--mkw-accent);
  color: var(--mkw-ink);
}
.mkw-tab.is-here .mkw-tab-n { color: var(--mkw-accent); }

.mkw-hazard {
  height: 7px;
  background: repeating-linear-gradient(
    127deg,
    var(--mkw-accent) 0 11px,
    #130B04 11px 22px
  );
}
.mkw-hazard--foot { height: 5px; opacity: 0.8; }

/* the travelling indicator --------------------------------------------- */
.mkw-rail { display: none; }
.mkw-rail-line {
  position: relative;
  display: block;
  width: 3px;
  background: var(--mkw-panel-up);
}
.mkw-rail-fill {
  position: absolute;
  inset: 0 0 auto 0;
  display: block;
  height: calc(var(--mkw-progress) * 100%);
  background: linear-gradient(180deg, var(--mkw-accent2), var(--mkw-accent));
  transition: height 90ms linear;
}
.mkw-pips { display: grid; gap: 2px; }
.mkw-pip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.3rem 0.5rem;
  background: transparent;
  text-decoration: none;
  transition: background-color 170ms ease;
}
.mkw-pip-dot {
  border-radius: 50%;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: var(--mkw-panel-up);
  box-shadow: 0 0 0 2px var(--mkw-panel-down);
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.mkw-pip-txt {
  color: var(--mkw-muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mkw-pip:hover { background: var(--mkw-panel); }
.mkw-pip:hover .mkw-pip-dot {
  border-radius: 50%; background: var(--mkw-accent2); }
.mkw-pip.is-at .mkw-pip-dot {
  border-radius: 50%;
  background: var(--mkw-accent);
  box-shadow: 0 0 0 2px #2A1206;
  transform: scale(1.35);
}
.mkw-pip.is-at .mkw-pip-txt { color: var(--mkw-ink); }
.mkw-pip.is-done .mkw-pip-dot {
  border-radius: 50%; background: var(--mkw-line-hard); }

/* the narrow-screen version of the same indicator */
.mkw-bar {
  position: fixed;
  z-index: 39;
  top: var(--mkw-head);
  left: 0;
  right: 0;
  height: 3px;
  background: var(--mkw-panel-up);
}
.mkw-bar i {
  display: block;
  height: 100%;
  width: calc(var(--mkw-progress) * 100%);
  background: linear-gradient(90deg, var(--mkw-accent2), var(--mkw-accent));
  transition: width 90ms linear;
}

/* the stage strip ------------------------------------------------------- */
.mkw-slab {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--mkw-head));
  padding: clamp(2.4rem, 6vh, 5.2rem) 0;
  scroll-snap-align: start;
  scroll-margin-top: var(--mkw-head);
}
.mkw-slab-in {
  width: min(1180px, 100% - 2.2rem);
  margin-inline: auto;
}
.mkw-slab + .mkw-slab .mkw-slab-in { border-top: 1px solid var(--mkw-line); padding-top: clamp(1.6rem, 4vh, 3rem); }
.mkw-slab--arrival {
  scroll-snap-align: none;
  min-height: calc(100svh - var(--mkw-head));
  background-image:
    repeating-linear-gradient(90deg, rgba(230, 238, 242, 0.032) 0 1px, transparent 1px 4px),
    linear-gradient(176deg, #1C272D 0%, #131C21 48%, var(--mkw-bg) 100%);
}
.mkw-slab--tol { background: linear-gradient(180deg, var(--mkw-panel-down), transparent 60%); }
.mkw-slab--drive { background: linear-gradient(180deg, transparent, var(--mkw-panel-down)); }
.mkw-slab--firm { background: linear-gradient(176deg, var(--mkw-panel-down), transparent); }

.mkw-js .mkw-slab:not(.mkw-slab--arrival) {
  --mkw-lift: 30px;
  opacity: 0;
  transform: translateY(var(--mkw-lift));
}
.mkw-js .mkw-slab.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 760ms ease-out, transform 760ms cubic-bezier(0.18, 0.76, 0.2, 1);
}

/* stage heads: number over a hairline ---------------------------------- */
.mkw-stage {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'n rule' 'n word';
  gap: 0 0.9rem;
  align-items: center;
  margin-bottom: 1.1rem;
}
.mkw-stage-n {
  grid-area: n;
  align-self: start;
  font-family: var(--mkw-face);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--mkw-accent);
}
.mkw-stage-rule {
  grid-area: rule;
  height: 1px;
  background: linear-gradient(90deg, var(--mkw-line-hard), transparent);
}
.mkw-stage-w {
  grid-area: word;
  color: var(--mkw-muted);
  font-size: 0.76rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.mkw-h1 {
  font-family: var(--mkw-face);
  font-size: clamp(2.35rem, 6.6vw, 4.4rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.mkw-h1 em {
  font-style: normal;
  color: var(--mkw-accent);
}
.mkw-h2 {
  max-width: 34ch;
  margin-bottom: 1.3rem;
  font-family: var(--mkw-face);
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
}
.mkw-h3 {
  margin-bottom: 0.55rem;
  font-family: var(--mkw-face);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mkw-lead {
  max-width: 54ch;
  font-size: 1.08rem;
  line-height: 1.66;
  color: #D4E0E6;
}
.mkw-lead + .mkw-lead { margin-top: 1rem; }
.mkw-lead--second { color: var(--mkw-muted); font-size: 0.95rem; }
.mkw-h1 + .mkw-lead { margin-top: 1.5rem; }

.mkw-cols {
  display: grid;
  gap: 1.5rem 2.6rem;
}
.mkw-col > p { max-width: var(--mkw-measure); }
.mkw-col > p + p { margin-top: 0.95rem; }
.mkw-col > p + ul, .mkw-col > ul + p { margin-top: 1.1rem; }

.mkw-aside {
  padding-left: 0.9rem;
  border-left: 3px solid var(--mkw-accent2);
  color: var(--mkw-muted);
  font-size: 0.9rem;
}

.mkw-list { display: grid; gap: 1px; }
.mkw-list li {
  padding: 0.62rem 0.85rem;
  background: var(--mkw-panel);
  font-size: 0.88rem;
  color: var(--mkw-muted);
}
.mkw-list li:nth-child(odd) { background: var(--mkw-panel-down); }
.mkw-list span {
  display: block;
  color: var(--mkw-ink);
  font-family: var(--mkw-face);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mkw-mail {
  color: var(--mkw-accent);
  text-decoration-color: rgba(226, 98, 27, 0.45);
  text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.mkw-mail:hover { color: var(--mkw-ink); text-decoration-color: var(--mkw-ink); }
.mkw-col a:not(.mkw-mail), .mkw-prose a:not(.mkw-mail) {
  color: var(--mkw-accent2);
  text-underline-offset: 3px;
  transition: color 160ms ease;
}
.mkw-col a:not(.mkw-mail):hover, .mkw-prose a:not(.mkw-mail):hover { color: var(--mkw-ink); }

/* the arrival slab and the gears --------------------------------------- */
.mkw-arrive {
  display: grid;
  gap: 2.2rem;
  align-items: center;
}
.mkw-arrive-txt { animation: mkw-arrive-rise 900ms cubic-bezier(0.16, 0.8, 0.22, 1) both; }
@keyframes mkw-arrive-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.mkw-gears { align-self: center; }
.mkw-gears-svg { display: block; width: 100%; height: auto; }
.mkw-gear-body {
  fill: url(#mkw-steel);
  stroke: #7F99A4;
  stroke-width: 0.8;
  stroke-linejoin: round;
}
.mkw-gear--b .mkw-gear-body { fill: url(#mkw-steel-b); }
.mkw-gear-pitch {
  fill: none;
  stroke: var(--mkw-accent2);
  stroke-width: 0.6;
  stroke-dasharray: 3.2 3.2;
  opacity: 0.9;
}
.mkw-gear-hub { fill: #0F171B; stroke: #6B838D; stroke-width: 0.8; }
.mkw-gear-bore { fill: #060A0C; stroke: var(--mkw-accent); stroke-width: 1.8; }
.mkw-gear-key { fill: var(--mkw-accent); }
.mkw-gear-spoke { stroke: #5E757F; stroke-width: 0.8; }
.mkw-gear--a { transform-box: view-box; transform-origin: 54px 54px; animation: mkw-gear-cw 3900ms cubic-bezier(0.07, 0.79, 0.12, 1) both; }
.mkw-gear--b { transform-box: view-box; transform-origin: 126px 54px; animation: mkw-gear-ccw 3900ms cubic-bezier(0.07, 0.79, 0.12, 1) both; }
@keyframes mkw-gear-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(206deg); }
}
@keyframes mkw-gear-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-323.71deg); }
}
.mkw-gears-cap, .mkw-belt figcaption, .mkw-readout-cap {
  color: var(--mkw-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}
.mkw-gears-cap { margin-top: 0.9rem; max-width: 46ch; }

/* tolerance readout ---------------------------------------------------- */
.mkw-readout {
  padding: 1.1rem 1.1rem 1rem;
  background: var(--mkw-panel);
  box-shadow: inset 3px 0 0 var(--mkw-accent2);
}
.mkw-readout-cap {
  margin-bottom: 0.8rem;
  color: var(--mkw-ink);
  font-family: var(--mkw-face);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.mkw-ro-list { display: grid; gap: 1px; }
.mkw-ro-row {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: 0.4rem;
  padding: 0.42rem 0.6rem;
  background: var(--mkw-panel-down);
  font-size: 0.86rem;
}
.mkw-ro-row dt { color: var(--mkw-muted); letter-spacing: 0.04em; }
.mkw-ro-row dd { font-variant-numeric: tabular-nums; }
.mkw-ro-row--out { background: #2A1408; }
.mkw-ro-row--out dd { color: var(--mkw-accent); }
.mkw-readout-note {
  margin-top: 0.85rem;
  color: var(--mkw-muted);
  font-size: 0.79rem;
  line-height: 1.6;
}
.mkw-dial { margin-top: 0.9rem; max-width: 220px; }
.mkw-dial svg { display: block; width: 100%; height: auto; }
.mkw-dial-face { fill: var(--mkw-panel-up); stroke: var(--mkw-line); stroke-width: 1; }
.mkw-dial-tick { stroke: var(--mkw-muted); stroke-width: 1.4; }
.mkw-dial-limit { stroke: var(--mkw-accent2); stroke-width: 2.4; }
.mkw-dial-needle {
  stroke: var(--mkw-accent);
  stroke-width: 2.6;
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: mkw-dial-settle 1500ms 260ms cubic-bezier(0.2, 1.5, 0.3, 1) both;
}
@keyframes mkw-dial-settle {
  from { transform: rotate(-54deg); }
  to { transform: rotate(0deg); }
}
.mkw-dial-pin { fill: var(--mkw-muted); }

/* the drive calculator ------------------------------------------------- */
.mkw-drive-intro {
  max-width: 62ch;
  margin-bottom: 1.6rem;
  color: #D4E0E6;
}
.mkw-calc { display: grid; gap: 1.4rem; }
.mkw-calc-fields {
  display: grid;
  gap: 0.9rem 1.2rem;
  align-items: end;
}
.mkw-field { display: grid; gap: 0.3rem; }
.mkw-field label {
  font-family: var(--mkw-face);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mkw-muted);
}
.mkw-field label b { color: var(--mkw-accent2); font-weight: 700; }
.mkw-field small { color: var(--mkw-muted); font-size: 0.72rem; letter-spacing: 0.04em; }
.mkw-input { display: flex; align-items: stretch; }
.mkw-input input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0.5rem 0.7rem;
  background: var(--mkw-field);
  border: 1px solid var(--mkw-line);
  border-right: 0;
  color: var(--mkw-ink);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.mkw-input input:hover { border-color: var(--mkw-line-hard); }
.mkw-input input:focus { background: #0D1519; border-color: var(--mkw-accent2); }
.mkw-input i {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  background: var(--mkw-panel);
  border: 1px solid var(--mkw-line);
  color: var(--mkw-muted);
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.06em;
}
.mkw-input input.is-bad { border-color: var(--mkw-accent); background: #1D0E06; }
.mkw-field--go { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; }
.mkw-btn {
  min-height: 48px;
  padding: 0.6rem 1.25rem;
  background: var(--mkw-accent);
  border: 1px solid var(--mkw-accent);
  color: #150802;
  cursor: pointer;
  font-family: var(--mkw-face);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease;
}
.mkw-btn:hover { background: #F2762F; }
.mkw-btn--ghost {
  background: var(--mkw-panel);
  border-color: var(--mkw-line-hard);
  color: var(--mkw-muted);
}
.mkw-btn--ghost:hover { background: var(--mkw-panel-up); color: var(--mkw-ink); }

.mkw-out { display: block; }
.mkw-out-grid { display: grid; gap: 1px; }
.mkw-out-cell {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  background: var(--mkw-panel);
}
.mkw-out-k {
  font-family: var(--mkw-face);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mkw-muted);
}
.mkw-out-v {
  font-family: var(--mkw-face);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--mkw-accent);
  font-variant-numeric: tabular-nums;
}
.mkw-out-cell small { color: var(--mkw-muted); font-size: 0.74rem; }
.mkw-out-msg {
  padding: 0.7rem 1rem;
  background: var(--mkw-panel-down);
  box-shadow: inset 3px 0 0 var(--mkw-accent2);
  color: var(--mkw-muted);
  font-size: 0.85rem;
}
.mkw-out-msg.is-bad { box-shadow: inset 3px 0 0 var(--mkw-accent); color: #F0C0A0; }

.mkw-belt { background: var(--mkw-panel-down); padding: 0.9rem; }
.mkw-belt-svg { display: block; width: 100%; height: auto; }
.mkw-belt-base { stroke: var(--mkw-line); stroke-width: 2; stroke-dasharray: 7 5; }
.mkw-belt-band {
  fill: none;
  stroke: var(--mkw-ink);
  stroke-width: 5;
  stroke-linejoin: round;
  opacity: 0.92;
  transition: d 320ms ease;
}
.mkw-belt-wheel {
  fill: var(--mkw-panel-up);
  stroke: var(--mkw-accent2);
  stroke-width: 2;
  transition: r 320ms ease, cx 320ms ease;
}
.mkw-belt-boss { fill: var(--mkw-accent); transition: cx 320ms ease, r 320ms ease; }
.mkw-belt-ctr { stroke: var(--mkw-muted); stroke-width: 1; stroke-dasharray: 4 4; }
.mkw-belt figcaption { margin-top: 0.6rem; }

.mkw-maths { background: var(--mkw-panel); padding: 1rem 1.1rem; }
.mkw-maths-list { display: grid; gap: 0.35rem; margin-bottom: 0.8rem; }
.mkw-maths-list code {
  display: block;
  padding: 0.4rem 0.6rem;
  background: var(--mkw-field);
  color: var(--mkw-accent2);
  font-family: var(--mkw-text);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.mkw-maths-note, .mkw-noscript {
  max-width: 68ch;
  color: var(--mkw-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}
.mkw-noscript {
  display: block;
  margin-top: 0.8rem;
  padding: 0.6rem 0.8rem;
  background: var(--mkw-panel-down);
}

/* registered facts ----------------------------------------------------- */
.mkw-facts { display: grid; gap: 1px; }
.mkw-fact {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: 0.3rem 0.8rem;
  padding: 0.5rem 0.75rem;
  background: var(--mkw-panel-down);
  font-size: 0.85rem;
}
.mkw-fact:nth-child(even) { background: var(--mkw-panel); }
.mkw-fact dt {
  color: var(--mkw-muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mkw-fact dd { overflow-wrap: anywhere; }

/* sub-page prose ------------------------------------------------------- */
.mkw-page { padding: clamp(1.8rem, 5vh, 3.4rem) 0 clamp(2.4rem, 7vh, 4.6rem); }
.mkw-page-in { width: min(1180px, 100% - 2.2rem); margin-inline: auto; }
.mkw-prose p, .mkw-prose > ul { max-width: var(--mkw-measure); }
.mkw-prose p + p { margin-top: 0.95rem; }
.mkw-prose .mkw-lead { max-width: 56ch; }
.mkw-prose .mkw-h2 + p { margin-top: 0; }
.mkw-figure {
  max-width: 480px;
  margin-top: 1.4rem;
  padding: 0.9rem;
  background: var(--mkw-panel-down);
}
.mkw-figure svg { display: block; width: 100%; height: auto; }
.mkw-figure figcaption {
  margin-top: 0.6rem;
  color: var(--mkw-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}
.mkw-steps { max-width: 880px; }
.mkw-note { max-width: 70ch; }
.mkw-chapter { padding-top: clamp(1.6rem, 4vh, 2.8rem); scroll-margin-top: calc(var(--mkw-head) + 1rem); }
.mkw-chapter + .mkw-chapter { border-top: 1px solid var(--mkw-line); margin-top: clamp(1.6rem, 4vh, 2.8rem); }
.mkw-steps { display: grid; gap: 1px; margin-top: 1.1rem; }
.mkw-steps li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.2rem 0.9rem;
  padding: 0.8rem 0.9rem;
  background: var(--mkw-panel);
}
.mkw-steps li:nth-child(even) { background: var(--mkw-panel-down); }
.mkw-steps b {
  font-family: var(--mkw-face);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--mkw-accent);
}
.mkw-steps span { font-size: 0.92rem; }
.mkw-steps em {
  grid-column: 2;
  color: var(--mkw-muted);
  font-size: 0.82rem;
  font-style: normal;
}
.mkw-note {
  margin-top: 1.4rem;
  padding: 0.95rem 1.05rem;
  background: var(--mkw-panel);
  box-shadow: inset 3px 0 0 var(--mkw-accent);
  font-size: 0.9rem;
}
.mkw-onward {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.6rem;
}

/* footer --------------------------------------------------------------- */
.mkw-foot { margin-top: clamp(2rem, 6vh, 4rem); background: var(--mkw-panel-down); }
.mkw-foot-in {
  display: grid;
  gap: 1.3rem;
  width: min(1180px, 100% - 2.2rem);
  margin-inline: auto;
  padding: 1.6rem 0 2.2rem;
}
.mkw-footnav { display: flex; flex-wrap: wrap; gap: 5px; }
.mkw-chip {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  background: var(--mkw-panel);
  border-bottom: 3px solid transparent;
  color: var(--mkw-muted);
  font-size: 0.82rem;
  text-decoration: none;
  transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease;
}
.mkw-chip:hover { background: var(--mkw-panel-up); color: var(--mkw-ink); }
.mkw-chip.is-here { border-bottom-color: var(--mkw-accent); color: var(--mkw-ink); }
.mkw-foot-legal {
  color: var(--mkw-muted);
  font-size: 0.8rem;
  line-height: 1.85;
}
.mkw-foot-legal b {
  display: inline-block;
  color: var(--mkw-ink);
  font-family: var(--mkw-face);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* focus, always visible ------------------------------------------------ */
.mkw-body a:focus-visible,
.mkw-body button:focus-visible,
.mkw-body input:focus-visible,
.mkw-body [tabindex]:focus-visible {
  outline: 3px solid var(--mkw-ring);
  outline-offset: 2px;
}
.mkw-body .mkw-input input:focus-visible { outline-offset: 0; }
.mkw-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
@media (min-width: 560px) {
  .mkw-out-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mkw-calc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkw-foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: start; }
}

@media (min-width: 820px) {
  :root { --mkw-head: 104px; }
  .mkw-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkw-cols--tol { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .mkw-cols--firm { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .mkw-arrive { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: 3rem; }
  .mkw-calc-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mkw-field--go { grid-column: 1 / -1; }
  .mkw-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* the formulae belong under BOTH drawings, not in one column with the
     other left empty — that gap was 270px of nothing at 1440 */
  .mkw-calc-fields, .mkw-out, .mkw-maths { grid-column: 1 / -1; }
  .mkw-steps li { grid-template-columns: 3rem minmax(0, 1fr); }
}

@media (min-width: 1000px) {
  .mkw-chapter {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: 0 2.8rem;
  }
  .mkw-chapter > .mkw-h2 {
    grid-column: 1;
    grid-row: 1 / 99;
    position: sticky;
    top: calc(var(--mkw-head) + 1.4rem);
    align-self: start;
    max-width: none;
    margin-bottom: 0;
    font-size: clamp(1.75rem, 2.2vw, 2.1rem);
  }
  .mkw-chapter > :not(.mkw-h2) { grid-column: 2; }
  .mkw-page-in > .mkw-stage, .mkw-page-in > .mkw-h1, .mkw-page-in > .mkw-lead { padding-left: 0; }
}

@media (min-width: 1100px) {
  .mkw-body--strip { --mkw-gutter: 172px; }
  .mkw-rail {
    position: fixed;
    z-index: 38;
    top: var(--mkw-head);
    left: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr);
    gap: 0.9rem;
    width: 172px;
    padding: 1.2rem 0.9rem 1.2rem 1.4rem;
    align-content: start;
    background: linear-gradient(90deg,
      var(--mkw-bg) 0%,
      var(--mkw-bg) 78%,
      color-mix(in srgb, var(--mkw-bg) 93%, transparent) 100%);
    backdrop-filter: blur(5px);
  }
  .mkw-rail-line { height: 100%; }
  .mkw-bar { display: none; }
}

@media (min-width: 1100px) and (max-width: 1239px) {
  .mkw-pip-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .mkw-body--strip { --mkw-gutter: 86px; }
  .mkw-rail { width: 86px; }
}

@media (max-width: 1099px) {
  .mkw-rail { display: none; }
}

@media (max-width: 819px) {
  .mkw-top-in { align-items: flex-start; }
  .mkw-tab { padding: 0.75rem 0.8rem; }
  .mkw-tab-t { font-size: 0.84rem; }
  .mkw-tabs { width: 100%; }
  .mkw-slab { min-height: 0; }
  .mkw-slab--arrival { min-height: calc(100svh - var(--mkw-head)); }
}

@media (max-width: 639px) {
  .mkw-tabrow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .mkw-tab {
    align-items: center;
    padding: 0.6rem 0.7rem;
    line-height: 1.3;
  }
  .mkw-tab-t { white-space: normal; font-size: 0.8rem; }
  .mkw-lead { font-size: 1rem; }
  .mkw-top-in { padding-bottom: 0.4rem; }
}

@media (max-width: 420px) {
  .mkw-mark-name { font-size: 1.16rem; letter-spacing: 0.12em; }
  .mkw-tab-n { font-size: 0.72rem; }
  .mkw-ro-row, .mkw-fact { grid-template-columns: minmax(0, 1fr); }
  .mkw-fact dt { letter-spacing: 0.08em; }
  .mkw-out-v { font-size: 1.7rem; }
}

/* short viewports should not fight the snap */
@media (max-height: 640px) {
  :root { scroll-snap-type: none; }
  .mkw-slab { min-height: 0; }
}


/* =====================================================================
   FULL-BLEED BANDS — the one way a picture is placed on this site.
   No frame, no caption bar: the picture runs edge to edge of the page
   and the type sits ON it, over a scrim whose strength was measured on
   the composited pixels rather than guessed.
   ===================================================================== */
.mkw-band {
  position: relative;
  /* Edge to edge means the VIEWPORT edge, not the content edge. The body
     carries a left gutter for the fixed rail, so the bands step back out of
     it; the rail floats over the picture and keeps its own backdrop so its
     labels stay readable over a bright band. */
  margin-left: calc(var(--mkw-gutter) * -1);
  width: calc(100% + var(--mkw-gutter));
  isolation: isolate;
  overflow: clip;            /* clip, not hidden: hidden makes this a scroll
                                container and freezes scroll-linked motion */
}
.mkw-band-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the quiet plane these renders were commissioned with is on the LEFT, so
     every crop keeps the left edge and loses the right */
  object-position: left center;
}
.mkw-band-frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
}
/* The scrim. Two ramps: one across (the type sits left) and one up from the
   foot. The across-ramp reaches FULL strength at 34% and the text box ends
   at 56%, so no glyph ever crosses the part of the ramp that is still
   fading — the geometry failure that put tansolutions at alpha 0.38. */
.mkw-band-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(7, 11, 13, 0.94) 0%,
      rgba(7, 11, 13, 0.94) 34%,
      rgba(7, 11, 13, 0.74) 52%,
      rgba(7, 11, 13, 0.30) 74%,
      rgba(7, 11, 13, 0.12) 100%),
    linear-gradient(0deg,
      rgba(7, 11, 13, 0.72) 0%,
      rgba(7, 11, 13, 0.18) 38%,
      rgba(7, 11, 13, 0) 70%);
}
.mkw-band-over {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(56%, 46rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  padding: clamp(1.1rem, 3.2vw, 3rem) clamp(1.1rem, 3vw, 2.6rem)
           clamp(1.1rem, 3.2vw, 3rem)
           max(1.1rem, calc(var(--mkw-gutter) + (100% - var(--mkw-gutter) - 1180px) / 2));
}
.mkw-band--hero .mkw-band-frame { aspect-ratio: 68 / 25; min-height: 23rem; }
.mkw-band--seam .mkw-band-frame { aspect-ratio: 32 / 9; min-height: 16rem; }
.mkw-band--close .mkw-band-frame { aspect-ratio: 24 / 9; min-height: 19rem; }

/* a stage opener set over a picture loses the hairline — the picture is the
   ground the word needs, and the rule would only fight it */
.mkw-stage--on { margin-bottom: 0; }
.mkw-stage--on .mkw-stage-rule { background: linear-gradient(90deg, var(--mkw-accent), transparent); }
.mkw-stage--on .mkw-stage-w { color: #D9E6EC; }
.mkw-band-over .mkw-h1,
.mkw-band-over .mkw-h2 { text-shadow: 0 2px 26px rgba(5, 8, 10, 0.72); }
/* The accent reads at 2.97:1 against the scrimmed doorway — measured, not
   guessed — so a link inside a band keeps the note's own ink and carries the
   accent in its underline instead. */
.mkw-band-note .mkw-mail {
  color: #F0F6F9;
  text-decoration-color: var(--mkw-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.mkw-band-note .mkw-mail:hover { color: #FFFFFF; text-decoration-color: #FFB27A; }
.mkw-band-note {
  max-width: 44ch;
  color: #CBDAE1;
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.6;
  text-shadow: 0 1px 14px rgba(5, 8, 10, 0.8);
}

/* the closing band carries the mark at a size you can actually read it at */
.mkw-close-lock {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 1.6rem);
}
.mkw-close-mark {
  flex: none;
  width: clamp(76px, 12vw, 132px);
  height: auto;
}
.mkw-close-word {
  display: block;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
}
.mkw-close-word small {
  display: block;
  margin-top: 0.45rem;
  color: #BACBD3;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* --- the masthead lockup: the mark is a WATERMARK behind the wordmark ---
   Shown whole. A mark cropped at a container edge reads as an image that
   failed to load, not as a bleed (A22), so the header reserves the height
   its watermark needs instead of trimming it. */
.mkw-mark {
  position: relative;
  display: block;
  padding: 0.4rem 0.7rem 0.4rem 0;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
}
.mkw-mark-wash {
  position: absolute;
  z-index: 0;
  left: -0.45rem;
  top: 50%;
  width: 72px;
  height: auto;
  transform: translateY(-50%);
  opacity: 0.4;
  pointer-events: none;
}
.mkw-mark-name,
.mkw-mark-sub { position: relative; z-index: 1; }
.mkw-mark-name { text-shadow: 0 1px 10px rgba(14, 20, 23, 0.9); }

@media (min-width: 820px) {
  .mkw-mark { min-height: 86px; }
  .mkw-mark-wash { width: 92px; left: -1rem; }
  .mkw-mark-name { font-size: 1.5rem; }
}

@media (max-width: 760px) {
  /* 2.72:1 is 143px tall on a phone and no headline lives in that, so the
     crop goes portrait. object-position is NOT left here: a left crop of this
     banner keeps only the empty plane, and the 390 screenshot showed a black
     rectangle with no machine in it at all — A8, on the first screen a phone
     visitor sees. 74% brings the machine in; the type moves to the top of the
     frame, where the picture is still unlit wall. */
  .mkw-band--hero .mkw-band-frame { aspect-ratio: 20 / 19; min-height: 0; }
  .mkw-band--hero .mkw-band-img { object-position: 76% 62%; }
  .mkw-band--hero .mkw-band-over { justify-content: flex-start; }
  .mkw-band--seam .mkw-band-frame { aspect-ratio: 20 / 13; min-height: 0; }
  /* the closing lockup is taller than a 20:15 frame at this width and
     `overflow: clip` was eating 34.5% of the MARK — measured, A23. The frame
     is sized to hold its own lockup rather than trim it. */
  .mkw-band--close .mkw-band-frame { aspect-ratio: 20 / 27; min-height: 27rem; }
  .mkw-band-over { width: 100%; padding-right: 1.6rem; }
  /* The type runs full width on a phone, so a horizontal ramp buys nothing
     and only dims the picture — the first 390 pass came out as a black
     rectangle. One vertical ramp: opaque where the type is, clear where the
     machine is, and it reaches full strength well above the text box. */
  .mkw-band-scrim {
    background: linear-gradient(180deg,
      rgba(7, 11, 13, 0.94) 0%,
      rgba(7, 11, 13, 0.92) 44%,
      rgba(7, 11, 13, 0.52) 64%,
      rgba(7, 11, 13, 0.06) 88%,
      rgba(7, 11, 13, 0) 100%);
  }
}

/* =====================================================================
   MOTION — one kind, used everywhere: a DRAWING DRAWS ITSELF IN as its
   section arrives. Outlines run on, then the fill arrives behind them.
   transform and opacity and stroke-dashoffset only; nothing animates a
   layout property.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .mkw-js .mkw-draw [data-mkw-ink] {
    stroke-dasharray: var(--mkw-len, 900);
    stroke-dashoffset: var(--mkw-len, 900);
  }
  .mkw-js .mkw-draw.is-drawn [data-mkw-ink] {
    animation: mkw-ink 1500ms cubic-bezier(0.22, 0.72, 0.24, 1) forwards;
    animation-delay: calc(var(--mkw-i, 0) * 110ms);
  }
  .mkw-js .mkw-draw [data-mkw-fill] { opacity: 0; }
  .mkw-js .mkw-draw.is-drawn [data-mkw-fill] {
    animation: mkw-ink-fill 900ms ease-out forwards;
    animation-delay: calc(640ms + var(--mkw-i, 0) * 90ms);
  }
  @keyframes mkw-ink { to { stroke-dashoffset: 0; } }
  @keyframes mkw-ink-fill { to { opacity: 1; } }
}


/* ---- the hero slab now stacks a band over its prose ------------------- */
.mkw-slab--arrival {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(1.4rem, 4vh, 2.8rem);
  padding-top: 0;
  background-image: linear-gradient(178deg, #141D22 0%, var(--mkw-bg) 72%);
}
.mkw-slab--arrival .mkw-slab-in { border-top: 0; }
.mkw-arrive { display: block; }
.mkw-arrive-txt { max-width: 74ch; }
.mkw-arrive-txt .mkw-lead { max-width: none; }

/* the stage opener lost its numeral, so it is a rule over a word now */
.mkw-stage {
  display: block;
  margin-bottom: 1.1rem;
}
.mkw-stage-rule {
  display: block;
  height: 2px;
  width: clamp(54px, 9vw, 104px);
  margin-bottom: 0.6rem;
  background: linear-gradient(90deg, var(--mkw-accent), rgba(226, 98, 27, 0));
}
.mkw-stage-w {
  display: block;
  color: var(--mkw-muted);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* ---- the paper band: bright, full-bleed, and carrying no type ---------
   Its luminance map has no quiet cell — the worst 5% of every one of its
   70 cells sits between 50 and 80 — so a headline across it would need a
   scrim heavy enough to read as the caption bar A14 bans. The words go
   beside it on the page instead. */
.mkw-band--paper { margin-bottom: clamp(1.4rem, 4vh, 2.6rem); }
.mkw-band--paper .mkw-band-frame { aspect-ratio: 21 / 9; min-height: 15rem; }
.mkw-band--paper .mkw-band-img { object-position: center 52%; }
.mkw-band-cap {
  width: min(1180px, 100% - var(--mkw-gutter) - 2.2rem);
  margin: 0.8rem 0 0
    max(1.1rem, calc(var(--mkw-gutter) + (100% - var(--mkw-gutter) - 1180px) / 2));
  color: var(--mkw-muted);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.mkw-slab#parts { flex-direction: column; align-items: stretch; justify-content: center; }

/* ---- the closing band ------------------------------------------------- */
.mkw-closer { padding: 0 0 clamp(1rem, 3vh, 2rem); }
/* The doorway is bright in the middle four columns and near-black in the
   outer three each side, so the lockup stays inside the left third and the
   scrim stays light enough to leave the picture visible. */
.mkw-band-over--close { width: min(38%, 30rem); gap: 1.3rem; }
.mkw-band-scrim--close {
  background:
    linear-gradient(90deg,
      rgba(7, 11, 13, 0.90) 0%,
      rgba(7, 11, 13, 0.88) 26%,
      rgba(7, 11, 13, 0.52) 44%,
      rgba(7, 11, 13, 0.16) 62%,
      rgba(7, 11, 13, 0.34) 100%),
    linear-gradient(0deg, rgba(7, 11, 13, 0.56) 0%, rgba(7, 11, 13, 0) 56%);
}
.mkw-band-img--close { object-position: center 44%; }
.mkw-h2--close { max-width: 18ch; margin-bottom: 0; font-size: clamp(1.4rem, 2.3vw, 2rem); }
.mkw-close-lock { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

@media (max-width: 760px) {
  .mkw-band--paper .mkw-band-frame { aspect-ratio: 20 / 15; min-height: 0; }
  /* Same correction as the hero: the lockup runs full width on a phone, so a
     horizontal ramp only dims the doorway and the figure disappeared. One
     vertical ramp, lockup at the top, picture left alone at the foot. */
  .mkw-band-over--close { width: 100%; justify-content: flex-start; }
  .mkw-band--close .mkw-band-frame { aspect-ratio: 20 / 31; min-height: 30rem; }
  .mkw-band-img--close { object-position: center 40%; }
  .mkw-band-scrim--close {
    background: linear-gradient(180deg,
      rgba(7, 11, 13, 0.93) 0%,
      rgba(7, 11, 13, 0.91) 56%,
      rgba(7, 11, 13, 0.46) 72%,
      rgba(7, 11, 13, 0.04) 90%,
      rgba(7, 11, 13, 0) 100%);
  }
}

/* ---- the sub-page band ----------------------------------------------- */
.mkw-page--banded { padding-top: 0; }
.mkw-band--sub { margin-bottom: clamp(1.6rem, 5vh, 3rem); }
.mkw-band--sub .mkw-band-frame { aspect-ratio: 36 / 9; min-height: 11rem; }
.mkw-band--sub .mkw-band-img { object-position: center 56%; }
@media (max-width: 760px) {
  .mkw-band--sub .mkw-band-frame { aspect-ratio: 20 / 11; min-height: 0; }
}

/* ---- the gear pair, now beside the drive arithmetic ------------------- */
.mkw-gears--drive { max-width: 30rem; margin-bottom: 1.3rem; }

/* the line-draw needs strokes on shapes that were pure fills */
.mkw-gear-body { stroke: #87A1AC; stroke-width: 0.7; }
.mkw-belt-band, .mkw-belt-wheel, .mkw-dial-face { vector-effect: non-scaling-stroke; }

/* ---------------------------------------------------------------------
   Motion is an enhancement. This block is last on purpose and uses
   !important so nothing above it, including the id selector on the
   opening slab, can win the cascade.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { scroll-snap-type: none !important; scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .mkw-gear--a, .mkw-gear--b, .mkw-arrive-txt, .mkw-dial-needle {
    animation: none !important;
    transform: none !important;
  }
  /* the reduced state is the FINISHED drawing, never a half-drawn one */
  .mkw-js .mkw-draw [data-mkw-ink] {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .mkw-js .mkw-draw [data-mkw-fill] { opacity: 1 !important; animation: none !important; }
  .mkw-js .mkw-slab, .mkw-js .mkw-slab:not(.mkw-slab--arrival), .mkw-js .mkw-slab.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mkw-skip { transition: none !important; }
}