/* Danube Mechatronics — site stylesheet (homepage and 404).
   The page is an instrument: the live board is its probe view, everything
   else is the chassis around it. */

/* ---- Fonts: Barlow (OFL) for text, JetBrains Mono (OFL) for readouts ---- */
@font-face { font-family: Barlow; src: url('../fonts/Barlow/Barlow-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Barlow; src: url('../fonts/Barlow/Barlow-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Barlow; src: url('../fonts/Barlow/Barlow-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono/JetBrainsMono-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono/JetBrainsMono-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* ---- Tokens ---- */
:root {
  color-scheme: dark;
  --bg: #070b0a;
  --bg-2: #0a100e;
  --bg-3: #0e1613;
  --glass: rgba(7, 11, 10, 0.9);
  --line: rgba(168, 214, 190, 0.12);
  --line-2: rgba(168, 214, 190, 0.24);
  --text: #e9f1ed;
  --text-2: #b0c2ba;
  --text-3: #899c93;
  --amber: #f3b544;
  --amber-glow: rgba(243, 181, 68, 0.55);
  --cyan: #8fd3ee;
  --green: #6fe0a0;
  --layer-top: #e2b64f;
  --layer-bottom: #8c93ff;
  --layer-silk: #e6efe9;
  --sans: Barlow, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 1320px;
  --mast-h: 64px;
  /* Probe-view rulers, CSS px. js/probe.js reads this and draws nothing at 0. */
  --ruler: 18px;
}

/* No rulers where the band shows the board (see its media block) or on touch. */
@media (max-width: 959px), (max-aspect-ratio: 11/10) and (max-width: 1099px), (hover: none) {
  :root { --ruler: 0px; }
}

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

/* Only body sets a background: it propagates to the canvas, under the
   z-index -1 board layers. A background on html would paint over them.
   No smooth scrolling: a smooth jump to a #fragment aims at a position the
   lazily drawn board drawing then moves, where an instant one is held by scroll
   anchoring. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--mast-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 18px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--amber); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

h1, h2, h3, h4, p { margin: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nowrap { white-space: nowrap; }

.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--amber);
  color: #1a1204;
  font: 500 14px/1 var(--mono);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Instrument label: the small uppercase legend printed beside a control. */
.ilabel {
  font: 500 11px/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---- Masthead: the instrument's title bar, solid at every width ---- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--mast-h);
  padding: 0 var(--gutter) 0 calc(var(--ruler) + var(--gutter));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* Type-only wordmark; the mark is a fiducial, the copper dot a pick-and-place
   machine aligns a board by. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark {
  flex: none;
  width: 18px;
  height: 18px;
}
.brand-mark circle:first-child { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.brand-mark circle:last-child { fill: var(--layer-top); }
.brand:hover .brand-mark circle:first-child { stroke: var(--amber); }
.brand-name {
  font: 600 15px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-name span { font-weight: 400; color: var(--text-2); }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav a {
  padding: 10px 12px;
  text-decoration: none;
  color: var(--text-2);
}
.nav a:hover { color: var(--text); }
.nav .nav-cta {
  margin-left: 8px;
  color: var(--text);
  border: 1px solid var(--line-2);
  background: var(--glass);
  border-radius: 3px;
}
.nav .nav-cta:hover { border-color: var(--amber); color: var(--amber); }

/* ---- Probe view (hero) ---- */
.probe-view {
  position: relative;
  display: grid;
  /* One track the width of the view: the readout's live text never sizes it. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  min-height: calc(100vh - var(--mast-h));
  min-height: max(600px, calc(100svh - var(--mast-h)));
  padding: calc(var(--ruler) + 24px) var(--gutter) 0 calc(var(--ruler) + var(--gutter));
}

.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 11, 10, 0.95) 0, rgba(7, 11, 10, 0.9) min(720px, 58%), rgba(7, 11, 10, 0) min(1120px, 88%)),
    linear-gradient(0deg, rgba(7, 11, 10, 0.85) 0, rgba(7, 11, 10, 0) 190px);
}

.probe-field {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The probe's crosshair (js/probe.js, buildAim): elements moved by transform
   over the probe's reading and rulers, so a pointer move rasters nothing
   screen-sized. The clip boxes are sized from script: the reading's window and
   the visible hero. The layer scan's glow is a band moved the same way. */
.probe-aim { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.aim-clip { position: absolute; overflow: hidden; }
.aim-lines { position: absolute; inset: 0; }
.aim-line, .aim-reticle, .aim-tag, .aim-mark {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.aim-line { background: rgba(243, 181, 68, 0.3); }
.aim-reticle { overflow: visible; fill: none; stroke: rgba(243, 181, 68, 0.95); stroke-width: 1.5px; }
.aim-tag {
  height: 22px;
  padding: 0 7px;
  border-left: 2px solid var(--amber);
  background: rgba(7, 11, 10, 0.92);
  color: var(--text);
  font: 500 11px/22px var(--mono);
  white-space: nowrap;
}
.aim-mark { background: var(--amber); }
.probe-scan {
  position: fixed;
  top: 0;
  z-index: 1;
  height: 64.5px;
  pointer-events: none;
  background: linear-gradient(rgba(243, 181, 68, 0) 0, rgba(243, 181, 68, 0.16) 63px, rgba(243, 181, 68, 0.9) 63px);
  will-change: transform;
}
.aim-mark-x { width: 9px; height: 7px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.aim-mark-y { width: 7px; height: 9px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* Where the hero text takes the width: a clear band above it, where the
   board shows crisp and a tap probes it (see the band's media block). */
.probe-band, .band-point { display: none; }
.probe-field:focus-visible { outline-offset: -8px; }

/* Vertical rhythm follows the viewport height too, so the hero and its
   instrument strip share the first screen of a 768 px laptop. The box hugs
   its text column: beside it the board is exposed to the probe. */
.hero {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: start;
  max-width: 700px;
  padding: 24px 0 clamp(16px, 4vh, 40px);
}

.overline {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 13px/1.2 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}
.overline::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

h1 {
  margin-top: clamp(14px, 2.2vh, 22px);
  font: 600 clamp(46px, min(6.3vw, 10vh), 104px)/0.95 var(--sans);
  letter-spacing: -0.025em;
}

.lead {
  margin-top: clamp(16px, 2.6vh, 26px);
  max-width: 35em;
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.5;
  color: var(--text-2);
}

.byline {
  margin-top: 18px;
  font-size: 15.5px;
  color: var(--text-3);
}
.byline strong { color: var(--text); font-weight: 500; }
.byline .sep { margin: 0 4px; font-family: var(--mono); }

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 3vh, 30px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: rgba(14, 22, 19, 0.7);
  color: var(--text);
  font: 500 16px/1 var(--sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.btn:hover { border-color: var(--amber); color: var(--text); }
/* The primary action is the lit key: the instrument's own key, its LED on. */
.btn-mail {
  gap: 12px;
  padding-left: 18px;
  border-color: rgba(243, 181, 68, 0.55);
  background: linear-gradient(180deg, #111b17, #0b120f);
}
.btn-mail .led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 7px 1px rgba(243, 181, 68, 0.65);
}
.btn-mail:hover { color: var(--amber); }

.hero-credit {
  margin-top: clamp(20px, 4vh, 40px);
  padding-top: clamp(12px, 2vh, 18px);
  border-top: 1px solid var(--line);
  max-width: 34em;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-3);
}
.hero-credit .ilabel {
  display: block;
  margin-bottom: 6px;
  color: var(--text-2);
}
.hero-credit a { color: var(--text-2); }

/* ---- Instrument strip: layer keys + probe readout ---- */
.instrument {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  margin: 0 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--glass);
  font-family: var(--mono);
}

.layers {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-right: 1px solid var(--line);
}
.layers .ilabel { margin-right: 6px; }

.key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 11px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: linear-gradient(180deg, #111b17, #0b120f);
  color: var(--text-3);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.key:hover { color: var(--text); border-color: rgba(168, 214, 190, 0.4); }
.key[aria-pressed="true"] { color: var(--text); }
.key .led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #243029;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}
.key[data-layer="top"][aria-pressed="true"] .led { background: var(--layer-top); box-shadow: 0 0 7px 1px rgba(226, 182, 79, 0.65); }
.key[data-layer="bottom"][aria-pressed="true"] .led { background: var(--layer-bottom); box-shadow: 0 0 7px 1px rgba(140, 147, 255, 0.65); }
.key[data-layer="silk"][aria-pressed="true"] .led { background: var(--layer-silk); box-shadow: 0 0 7px 1px rgba(230, 239, 233, 0.5); }
.key[data-layer="xray"][aria-pressed="true"] .led { background: var(--cyan); box-shadow: 0 0 7px 1px rgba(143, 211, 238, 0.7); }
.key[data-layer="xray"][aria-pressed="true"] { border-color: rgba(143, 211, 238, 0.5); }
#motion-key[aria-pressed="true"] .led { background: var(--green); box-shadow: 0 0 7px 1px rgba(111, 224, 160, 0.65); }

.run {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-left: 1px solid var(--line);
  margin-left: auto;
}

.readout {
  display: flex;
  flex: 1;
  min-width: 0;
  margin: 0;
}
.ro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 8px 16px;
  border-right: 1px solid var(--line);
}
.ro dt {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ro dd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  min-width: 0;
  white-space: nowrap;
}
/* The reading keeps its width; its note gives way first. */
.ro output {
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 14px;
}
.ro small {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-3);
  font-size: 11.5px;
}
.ro-xy { flex: 0 0 108px; }
.ro-xy output { color: var(--amber); }
.ro-net { flex: 1.1 1 0; }
.ro-part { flex: 1.5 1 0; }
.ro-block { flex: 1 1 0; }
.ro.is-fresh output { color: var(--amber); }
/* A block that passes the proof gate carries a check mark; only
   there does the probe read out nets and parts (js/probe.js). */
.ro-block.is-proven output::after {
  content: " ✓";
  color: var(--green);
}

.probe-hint {
  align-self: center;
  max-width: 220px;
  padding: 8px 16px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-3);
}

/* ---- Chassis: the solid panels the page scrolls over the board ---- */
/* Left edge on the masthead's and the hero's, past the probe's ruler. */
.chassis {
  position: relative;
  padding: clamp(72px, 9vw, 132px) var(--gutter);
  padding-left: calc(var(--ruler) + var(--gutter));
  background-color: var(--bg);
  background-image: radial-gradient(rgba(168, 214, 190, 0.055) 1px, transparent 1.2px);
  background-size: 24px 24px;
  border-top: 1px solid var(--line);
}

.section-head,
.channels,
.credentials,
.work-grid,
.contact-grid {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.section-head { margin-bottom: 52px; }

.section-index {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.section-index span { color: var(--amber); }
/* The probe view's ruler, carried into every section head: a hairline with
   millimetre-style ticks, longer every fifth. */
.section-index::after {
  content: "";
  flex: 1;
  height: 7px;
  align-self: flex-end;
  background:
    linear-gradient(var(--line-2), var(--line-2)) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 10px) bottom / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 50px) bottom / 100% 7px no-repeat;
}

h2 {
  margin-top: 22px;
  max-width: 20ch;
  font: 600 clamp(32px, 4vw, 58px)/1.02 var(--sans);
  letter-spacing: -0.018em;
}

.section-lede {
  margin-top: 18px;
  max-width: 60ch;
  font-size: clamp(17px, 1.3vw, 20px);
  color: var(--text-2);
}

/* Capability channels: a hairline grid, one module per channel. */
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 1px;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}
.channel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px 24px;
  background: var(--bg-2);
  transition: background-color 180ms ease;
}
.channel:hover { background: var(--bg-3); }

/* Hover brackets: the corners the probe draws round an acquired part. */
.channel::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  --arm: 12px;
  --ink: var(--amber);
  background:
    linear-gradient(var(--ink), var(--ink)) top left / var(--arm) 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) top left / 1px var(--arm) no-repeat,
    linear-gradient(var(--ink), var(--ink)) top right / var(--arm) 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) top right / 1px var(--arm) no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left / var(--arm) 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left / 1px var(--arm) no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom right / var(--arm) 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom right / 1px var(--arm) no-repeat;
}
.channel:hover::after { opacity: 1; }
.channel h3 {
  font: 600 23px/1.15 var(--sans);
  letter-spacing: -0.005em;
}
.channel > p:not(.ch-id) {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.ch-id {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.ch-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2b3a33;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.channel:hover .ch-led { background: var(--amber); box-shadow: 0 0 8px var(--amber-glow); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: auto 0 0;
  padding: 10px 0 0;
  list-style: none;
  font: 400 12.5px/1.4 var(--mono);
  color: var(--text-3);
}
.tags .tag-strong { color: var(--text); font-weight: 500; }

.credentials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 1px;
  margin-top: 28px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cred {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 28px;
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 16.5px;
}
.cred .ilabel { margin-bottom: 4px; }
.cred strong { color: var(--text); font-weight: 600; }
/* The two tools' marks, the makers' own artwork, set small on one line. */
.tool-logos { display: flex; align-items: center; gap: 30px; margin-top: 8px; }
.tool-logos img { height: 30px; width: auto; }
.tool-logos .sw { height: 19px; }

/* ---- Work: named rows, each tag set flush right like a parts list ---- */
.work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.log-title {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.work-rows {
  margin: 0 0 56px;
  padding: 0;
  list-style: none;
}
.work-rows:last-child { margin-bottom: 0; }
.work-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 40px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.work-rows h4 { font: 600 21px/1.2 var(--sans); }
.work-rows p:not(.work-tag) { max-width: 62ch; font-size: 16.5px; color: var(--text-2); }
.work-tag {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding-top: 5px;
  font: 500 11.5px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  color: var(--text-3);
}


.side-note { margin: 20px 0 0; font-size: 16.5px; color: var(--text-2); }
.side-link {
  margin: 16px 0 0;
  font: 500 11.5px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.side-link a { color: var(--text-2); }

/* ---- The board, whole: drawn by js/overview.js, one hotspot per block ---- */
.board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  max-width: var(--measure);
  margin: 0 auto;
}
.overview { margin: 0; }
/* The canvas spans the padding too: the dimension lines are drawn in it,
   above and left of the board, and the board's shadow below it. */
.overview-shot {
  position: relative;
  padding: 34px 0 26px 34px;
}
.overview-shot canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.overview-board {
  position: relative;
  aspect-ratio: 21 / 16;
}
.overview figcaption {
  margin-top: 16px;
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.overview figcaption b { color: var(--amber); font-weight: 500; }
.hotspot {
  position: absolute;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.hotspot:hover {
  border-color: rgba(243, 181, 68, 0.8);
  background: rgba(243, 181, 68, 0.07);
}

/* The hero's window, in the probe's amber. */
.crop {
  position: absolute;
  border: 1px dashed rgba(243, 181, 68, 0.75);
  pointer-events: none;
}
/* The drawing's legend: a key beside each kind of mark, none on the board. */
.legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 8px; }
.legend span::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 9px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 1px dashed rgba(243, 181, 68, 0.75);
}
.legend .key-proven::before { border: 1.5px solid rgba(111, 224, 160, 0.9); background: rgba(111, 224, 160, 0.1); }
.board-side .spec { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 26px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.spec div:first-child { grid-column: 1 / -1; }
.spec div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--bg-2);
}
.spec dt {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.spec dd {
  margin: 0;
  font: 500 17px/1.1 var(--mono);
  color: var(--text);
}
.spec small { color: var(--text-3); font-size: 12px; }
.tool-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font: 500 13px/1 var(--mono);
}
.tool-links a {
  display: inline-block;
  padding: 10px 0;
  color: var(--text-2);
}
.tool-links li:first-child { flex-basis: 100%; }
.tool-links li:first-child a { color: var(--amber); font-size: 14px; }

/* ---- Contact ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.contact-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-mail {
  font: 600 clamp(24px, 3.2vw, 44px)/1.1 var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 12px;
  width: fit-content;
  max-width: 100%;
}
.contact-mail:hover { border-color: var(--amber); }
.phones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font: 400 19px/1.3 var(--mono);
}
.phones a { display: inline-block; padding: 8px 0; text-decoration: none; }
.phones .ilabel { margin-right: 6px; }

/* Imprint as the instrument's rating plate: four screws, engraved rows. */
.plate {
  position: relative;
  padding: 30px 34px 28px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background:
    radial-gradient(circle at 14px 14px, #2a3530 0 3px, #0b100e 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 14px) 14px, #2a3530 0 3px, #0b100e 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at 14px calc(100% - 14px), #2a3530 0 3px, #0b100e 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #2a3530 0 3px, #0b100e 3.5px 4.5px, transparent 5px),
    linear-gradient(160deg, #111a16, #0a0f0d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
}
.plate-head {
  text-wrap: balance;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
  font: 600 20px/1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.plate-rows { margin: 0; }
.plate-rows div {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--line-2);
}
.plate-rows div:last-child { border-bottom: 0; }
.plate-rows dt {
  font: 500 11px/1.9 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.plate-rows dd {
  margin: 0;
  font-size: 16px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.plate-rows a { text-decoration: none; }
.plate-rows a:hover { text-decoration: underline; }

/* ---- Footer ---- */
.footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 24px;
  padding: 32px var(--gutter) 36px calc(var(--ruler) + var(--gutter));
  border-top: 1px solid var(--line);
  background: var(--bg);
  font: 400 12.5px/1.4 var(--mono);
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.footer a { color: var(--text-2); text-decoration: none; }
/* The colophon: how the page is made, set as the drawing's fine print. */
.colophon {
  grid-column: 1 / -1;
  max-width: 76ch;
  padding-bottom: 18px;
  font: 400 14.5px/1.6 var(--sans);
  letter-spacing: 0;
  color: var(--text-3);
}

/* ---- 404 ---- */
.lost {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--gutter);
  text-align: center;
}
.lost-note {
  display: grid;
  justify-items: center;
  gap: 20px;
  max-width: 560px;
  padding: clamp(20px, 5vw, 48px);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--bg-2);
}
.lost h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); }
.lost .section-index { width: 100%; }

/* ---- Responsive ---- */
/* The instrument strip holds everything in one row from 1600 px. Down to
   1280 px the block keeps its name alone, and the keys' legend and the hint's
   first sentence give way; below 1366 px the hint too, before the net and
   part do. Below 1280 px the readout takes a row of its own. */
@media (max-width: 1599px) {
  .ro-block { flex: 0 0 auto; }
  .ro-block small { display: none; }
}
@media (min-width: 1280px) and (max-width: 1599px) {
  .layers .ilabel, .hint-point { display: none; }
  .ro { padding: 8px 12px; }
  .probe-hint { max-width: 132px; text-wrap: balance; }
  .hint-open { white-space: normal; }
}
@media (min-width: 1280px) and (max-width: 1365px) {
  .probe-hint { display: none; }
}
@media (max-width: 1279px) {
  .instrument { flex-wrap: wrap; }
  .readout { order: 1; flex-basis: 100%; border-top: 1px solid var(--line); }
}

@media (max-width: 1099px) {
  .work-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: 1fr; }
  .nav a:not(.nav-cta) { display: none; }
}

/* Below 768 px the board never animates (js/circuit-bg.js), so there is no
   motion to switch. */
@media (max-width: 767px) {
  .run { display: none; }
}

/* Where the hero text leaves no board beside it (below 960 px) or an upright
   or near-square window crops the board's sides (the board covers the view,
   so its scale follows the height), the board shows crisp through a slim band
   above the text, the layer keys on its lower edge under the board they switch
   (js/probe.js frames the band on a proven block and probes inside it). The band
   is slim so the headline and the email key share the first screen with it. */
@media (max-width: 959px), (max-aspect-ratio: 11/10) and (max-width: 1099px) {
  :root { --band: clamp(150px, 22svh, 280px); }
  .probe-view { grid-template-rows: auto auto 1fr; min-height: 0; padding-top: 0; }
  .probe-band {
    position: relative;
    display: block;
    height: var(--band);
    margin: 0 calc(-1 * var(--gutter));
    border-bottom: 1px solid var(--line-2);
  }
  /* A veil until the band frames a proven block (js/probe.js, frameBand). */
  .probe-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(7, 11, 10, 0.86);
    transition: opacity 420ms ease;
  }
  .is-framed .probe-band::before { opacity: 0; }
  .band-hint {
    position: absolute;
    left: var(--gutter);
    bottom: 10px;
    padding: 5px 8px;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    background: var(--glass);
    font: 500 10.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .instrument { grid-row: 2; margin: 0 calc(-1 * var(--gutter)); border-width: 0 0 1px; border-radius: 0; background: var(--bg); }
  .layers { flex: 1; flex-wrap: wrap; padding: 8px var(--gutter); border-right: 0; }
  .layers .ilabel, .readout, .probe-hint { display: none; }
  .key { flex: 1 1 0; justify-content: center; min-height: 44px; padding: 0 6px; }
  .run { padding-right: var(--gutter); }
  .hero { grid-row: 3; align-self: start; padding: 26px 0 28px; }
  .hero-scrim { top: var(--band); background: var(--bg); }
  .hero-credit { margin-top: 28px; }
}

@media (max-width: 699px) {
  body { font-size: 17px; }
  :root { --mast-h: 56px; }
  .brand { gap: 10px; }
  .brand-name { font-size: 12.5px; letter-spacing: 0.16em; }
  .byline .sep { display: none; }
  .byline .nowrap { display: block; }
  .work-rows li { grid-template-columns: 1fr; }
  .work-tag { grid-column: 1; grid-row: auto; flex-flow: row wrap; align-items: center; gap: 6px 14px; padding-top: 4px; text-align: left; }
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate { padding: 26px 22px 22px; }
  .plate-rows div { grid-template-columns: 1fr; gap: 2px; }
  /* The address sets 15.05 em wide: sized to stay one line down to 320 px. */
  .contact-mail { font-size: min(24px, (100vw - 2 * var(--gutter)) / 15.4); }
  .footer { grid-template-columns: 1fr; }
}

/* Narrower than the one-line wordmark and the contact key, the name stacks. */
@media (max-width: 359px) {
  .masthead { gap: 12px; }
  .brand-name { line-height: 1.25; }
  .brand-name span { display: block; }
  .overline { gap: 10px; font-size: 12px; letter-spacing: 0.06em; white-space: nowrap; }
  .overline::before { display: none; }
  .key { gap: 6px; padding: 0 4px; }
}

/* Touch screens have no hover, so the probe cannot follow them: the strip
   keeps its layer keys and drops the readout. */
@media (hover: none) {
  .readout, .probe-hint { display: none; }
  .layers { border-right: 0; }
}
@media (hover: hover) {
  .band-touch { display: none; }
  .band-point { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}