/* ==========================================================================
   Design tokens — every color, space and radius on the site starts here.
   ========================================================================== */
:root {
  /* Brand, sampled from the Plinx Pro pinwheel's four sails */
  --brand-teal: #14b8a6;  /* 6.52:1 on ink-700 */
  --brand-teal-light: #2dd4bf;
  --brand-blue: #0876bb;  /* thread end only; 3.34:1 on ink-700 */
  --brand-purple: #8172d9;  /* arrival-node ring only: 4.13:1 on ink-700, 3.93:1 on white */
  --brand-thread: linear-gradient(90deg, var(--brand-teal) 0%, var(--brand-blue) 100%);
  --brand-thread-down: linear-gradient(180deg, var(--brand-teal) 0%, var(--brand-blue) 100%);

  /* Dark surface ramp: the shop floor the traveler moves across.
     ink-700 is the logo's navy sail. */
  --ink-900: #071631;
  --ink-800: #091a39;
  --ink-700: #0b1f44;
  --ink-400: #52617f;  /* UI marks on paper: 6.22:1 on white */
  --ink-300: #6a7ca0;  /* UI marks on the ink field: 3.87:1 on ink-700, 4.2:1 on white */

  /* Text on dark */
  --text-bright: #f5f8ff;
  --text-muted: #aab7d0;
  --text-dim: #8e9dbb;  /* 5.94:1 on ink-700, the lightest panel it sits on */

  --line-soft: rgba(20, 184, 166, 0.18);

  /* Traveler stock — cool white, never cream */
  --paper-100: #ffffff;
  --paper-200: #f4f6fa;

  /* Text on light. Muted clears 6.9:1 on paper-200 — comfortably AA for body. */
  --text-ink: #0b1f44;
  --text-ink-muted: #475570;

  --line-paper: rgba(11, 31, 68, 0.14);
  --rule-paper: #a7b2c6;  /* form-field underlines on traveler stock */

  /* Rubber-stamp ink, the logo blue darkened: 6.0:1 on white, 5.55:1 on paper-200 */
  --stamp-ink: #0767a6;
  --stamp-wash: rgba(7, 103, 166, 0.08);

  /* A form message that needs action: 6.57:1 on white, 6.08:1 on paper-200 */
  --alert-ink: #b42318;

  /* Type. Archivo's width axis does the work: expanded for display,
     condensed for form labels and stamps. */
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --step-display: clamp(2.5rem, 5vw, 4.25rem);
  --step-h2: clamp(1.875rem, 3.4vw, 2.875rem);
  --step-h3: clamp(1.375rem, 2.3vw, 1.875rem);
  --step-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
  --step-body: 1rem;
  --step-small: 0.875rem;
  --step-micro: 0.75rem;
  --step-record: 0.8125rem;  /* record numbers, results and muted figures */
  --step-stamp-field: 0.6875rem;  /* the smaller stamps on the ink field */

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;

  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;

  --shadow-lift: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.55);
  --shadow-sheet: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
  --shadow-paper: 0 0.75rem 2rem rgba(11, 31, 68, 0.1);
  --shadow-press: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.25);

  --header-h: 4.25rem;
  --measure: 46rem;
  --shell: 75rem;
}

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

body,
h1,
h2,
h3,
p,
figure,
figcaption,
ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.6;
  color: var(--text-bright);
  background-color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--brand-teal);
  color: var(--ink-700);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Anchor jumps land below the sticky header, not under it */
[id] {
  scroll-margin-top: calc(var(--header-h) + var(--space-md));
}

/* A single, consistent focus ring for every interactive element. Paper
   sections swap the ring to stamp ink, since teal fails 3:1 on white. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus-ring, var(--brand-teal));
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   Header — a flat bar on the shop floor
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line-soft);
  background-color: var(--ink-900);
  transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-lift);
}

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  max-width: var(--shell);
  min-height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--text-bright);
}

.nav-logo-img {
  width: auto;
  height: 1.75rem;
}

/* The wordmark's own face (Plus Jakarta Sans, subset to these letters),
   so the live text matches the logo artwork; Archivo is the fallback. */
.nav-logo-text {
  display: none;
  font-family: 'Plus Jakarta Sans', var(--font-sans);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.nav-logo-pro {
  font-weight: 400;
  color: var(--text-muted);
}

@media (min-width: 23rem) {
  .nav-logo-text {
    display: block;
  }
}

/* Mobile: panel drops below the bar. Desktop: display:contents dissolves it
   so its children lay out as direct flex items of the navbar. */
.nav-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--line-soft);
  z-index: 10;
  background-color: var(--ink-900);
  box-shadow: var(--shadow-lift);
}

.nav-panel.is-open {
  display: flex;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.nav-link {
  color: var(--text-muted);
  font-size: var(--step-small);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--text-bright);
}

/* You are here: an underline, so it doesn't rely on colour alone */
.nav-link[aria-current="page"] {
  color: var(--text-bright);
  text-decoration: underline;
  text-decoration-color: var(--brand-teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.btn-text {
  color: var(--text-muted);
  font-size: var(--step-small);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.btn-text:hover {
  color: var(--text-bright);
}

/* Solid teal with ink text: 6.52:1, and no halo */
.btn-primary {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-xs);
  background-color: var(--brand-teal);
  color: var(--ink-700);
  font-size: var(--step-small);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--brand-teal-light);
  box-shadow: var(--shadow-press);
}

/* Outline in ink-300 clears 3:1 on the ink field and on paper */
.btn-ghost {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-xs);
  color: var(--fg, var(--text-bright));
  font-size: var(--step-small);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-ghost:hover {
  border-color: var(--fg, var(--text-bright));
}

.btn-lg {
  padding: 0.85rem 1.4rem;
  font-size: var(--step-body);
}

/* Compact CTA in the collapsed bar; full size once there is room */
.nav-cta {
  padding: 0.5rem 0.75rem;
}

/* Hamburger — three bars that cross into an X when open */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.55rem;
  border: 1px solid var(--ink-400);
  border-radius: var(--radius-xs);
  background-color: transparent;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background-color: var(--text-bright);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(0.5rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-0.5rem) rotate(-45deg);
}

/* The logo's thread along the header's bottom edge, drawn as you scroll */
.nav-thread {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-image: var(--brand-thread);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  transition: transform 0.1s linear;
}

/* ==========================================================================
   Skip link — first tab stop, hidden until focused
   ========================================================================== */
.skip-link {
  position: absolute;
  top: 0;
  left: var(--space-md);
  z-index: 200;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  background-color: var(--brand-teal);
  color: var(--ink-700);
  font-size: var(--step-small);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-110%);
  transition: transform 0.2s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ==========================================================================
   Section shell and type — shared by every band on every page.

   Each band declares its own surface via local custom properties, so the
   children below stay single-class selectors instead of growing
   `.section-paper .thing` descendant chains.
   ========================================================================== */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  --surface: var(--ink-900);
  --fg: var(--text-bright);
  --fg-muted: var(--text-muted);
  --fg-dim: var(--text-dim);
  --line: var(--line-soft);
  --field-label: var(--text-dim);
  --mark: var(--ink-300);           /* UI marks on the field (Mark-by-Surface Rule) */
  --node-fill: var(--brand-teal);   /* the station being read */
  --node-ink: var(--ink-700);
  --sheet-shadow: var(--shadow-sheet); /* Paper Casts Rule: the shadow follows the band */

  padding-block: clamp(4rem, 9vw, 7.5rem);
  background-color: var(--surface);
  color: var(--fg);
}

.section-field {
  --surface: var(--ink-700);
}

.section-paper {
  --surface: var(--paper-200);
  --fg: var(--text-ink);
  --fg-muted: var(--text-ink-muted);
  --fg-dim: var(--text-ink-muted);
  --line: var(--line-paper);
  --field-label: var(--text-ink-muted);
  --focus-ring: var(--stamp-ink);
  --mark: var(--ink-400);
  --node-fill: var(--stamp-ink);    /* teal fails 3:1 on paper; stamp ink clears 5.5:1 */
  --node-ink: var(--paper-100);
  --sheet-shadow: var(--shadow-paper);
}

.section-title {
  max-width: 22ch;
  font-size: var(--step-h2);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.section-lead {
  max-width: 60ch;
  margin-top: var(--space-md);
  color: var(--fg-muted);
  font-size: var(--step-lead);
  text-wrap: pretty;
}

.section-more {
  margin-top: var(--space-xl);
}

.link-thread {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--ink-300);
  color: var(--fg, var(--text-bright));
  font-size: var(--step-small);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.link-thread:hover {
  border-bottom-color: var(--fg, var(--text-bright));
}

/* A link inside running copy: same ink as the sentence, the underline in the
   band's mark colour is the cue, darkening to the foreground on hover */
.inline-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--mark, var(--ink-300));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s ease;
}

.inline-link:hover {
  text-decoration-color: currentColor;
}

/* Form-field label: condensed caps, the traveler's own small print */
.field-label {
  display: block;
  color: var(--field-label, var(--text-ink-muted));
  font-size: var(--step-micro);
  font-weight: 700;
  font-stretch: 75%;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* ==========================================================================
   Homepage — the job traveler
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.job-hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 8vw, 6.5rem);
}

.job-hero-grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.display {
  max-width: 18ch;
  font-size: var(--step-display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.job-hero-lead {
  max-width: 52ch;
  margin-top: var(--space-md);
  color: var(--text-muted);
  font-size: var(--step-lead);
  text-wrap: pretty;
}

.job-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Prefixed with the thread's terminal node: the result, already arrived */
.job-hero-proof {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  max-width: 44ch;
  margin-top: var(--space-lg);
  color: var(--text-muted);
  font-size: var(--step-small);
}

.job-hero-proof::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--brand-teal);
}

/* ---- The traveler card ---------------------------------------------------- */
.traveler {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background-color: var(--paper-100);
  color: var(--text-ink);
  box-shadow: var(--shadow-sheet);
  font-variant-numeric: tabular-nums;
  --field-label: var(--text-ink-muted);
  --focus-ring: var(--stamp-ink);
}

.traveler-head {
  padding: var(--space-md) var(--space-md) var(--space-sm);
  border-bottom: 2px solid var(--text-ink);
}

.traveler-kind {
  margin-bottom: var(--space-sm);
  font-size: var(--step-small);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.traveler-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-md);
}

.field {
  min-width: 0;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--rule-paper);
}

.field-wide {
  grid-column: 1 / -1;
}

.field-value {
  font-size: 0.9375rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* A blank field on the closing traveler: an underline waiting for a value */
.field-line {
  display: block;
  min-height: 1.5rem;
  color: var(--stamp-ink);
  font-weight: 800;
}

.traveler-caption {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--paper-200);
  color: var(--text-ink-muted);
  font-size: var(--step-micro);
}

/* ---- Routing: the thread runs down the op column -------------------------- */
.routing {
  position: relative;
}

/* The routing line sits at 1.75rem from the card edge on every routing */
.routing::before {
  content: "";
  position: absolute;
  left: calc(1.75rem - 1px);
  top: 1.5rem;
  bottom: 0;
  width: 2px;
  background-image: var(--brand-thread-down);
}

.op {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  grid-template-areas:
    "num station stamp"
    "num result  stamp";
  align-items: center;
  column-gap: var(--space-sm);
  padding: 0.65rem var(--space-md) 0.65rem 2.75rem;
  border-bottom: 1px solid var(--line-paper);
}

/* The logo's alternating half-circles, turned to run down a vertical line:
   odd stations bulge left, even stations bulge right. */
.op::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5rem);
  left: calc(1.75rem - 0.5rem);
  width: 0.5rem;
  height: 1rem;
  border-radius: 1rem 0 0 1rem;
  background-image: var(--brand-thread-down);
}

.op:last-child {
  border-bottom: 0;
}

.op:nth-child(even)::before {
  left: 1.75rem;
  border-radius: 0 1rem 1rem 0;
}

.op-num {
  grid-area: num;
  font-size: var(--step-small);
  font-weight: 800;
  font-stretch: 75%;
}

.op-station {
  grid-area: station;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.3;
}

.op-record {
  margin-left: 0.3rem;
  color: var(--text-ink-muted);
  font-size: var(--step-record);
  font-weight: 600;
  white-space: nowrap;
}

.op-result {
  grid-area: result;
  color: var(--text-ink-muted);
  font-size: var(--step-record);
  line-height: 1.4;
}

/* The open row: the thread turns dashed past the last stamp, and the node is
   hollow until the job closes out. Doubled class so it outranks the
   even-row half-circle. */
.op.op-open::before {
  top: calc(50% - 0.45rem);
  left: calc(1.75rem - 0.45rem);
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--ink-400);
  border-radius: 50%;
  background-image: none;
  background-color: var(--paper-100);
  z-index: 1;
}

.op-open::after {
  content: "";
  position: absolute;
  left: calc(1.75rem - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  /* Top half: a dashed rule (one dash tiled down); bottom half: paper,
     masking the solid thread beneath */
  background:
    linear-gradient(180deg, transparent 50%, var(--paper-100) 50%),
    linear-gradient(180deg, var(--ink-400) 50%, var(--paper-100) 50%) 0 0 / 2px 0.6rem repeat-y;
}

/* ---- Stamps --------------------------------------------------------------- */
.stamp {
  --stamp-tilt: -4deg;
  grid-area: stamp;
  justify-self: end;
  padding: 0.2rem 0.45rem;
  border: 2px solid var(--stamp-ink);
  border-radius: var(--radius-xs);
  color: var(--stamp-ink);
  font-size: var(--step-micro);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  /* A second ruled line inside the border, like a real self-inking stamp */
  box-shadow: inset 0 0 0 2px var(--paper-100), inset 0 0 0 3px var(--stamp-ink);
  transform: rotate(var(--stamp-tilt));
}

.op:nth-child(even) .stamp:not(.stamp-open):not(.stamp-empty) {
  --stamp-tilt: 3deg;
}

.stamp-open {
  --stamp-tilt: 0deg;
  border-style: dashed;
  border-color: var(--ink-400);
  color: var(--text-ink-muted);
  box-shadow: none;
}

.stamp-empty {
  --stamp-tilt: 0deg;
  min-width: 4.5rem;
  min-height: 1.6rem;
  border: 2px dashed var(--rule-paper);
  box-shadow: none;
}

/* ---- The problem: one job's cost, three answers ---------------------------- */
.split-cost {
  width: 100%;
  margin-top: var(--space-xl);
  border-collapse: collapse;
  border-top: 2px solid var(--text-ink);
  background-color: var(--paper-100);
  box-shadow: var(--shadow-paper);
  font-variant-numeric: tabular-nums;
}

.split-cost-caption {
  padding-bottom: var(--space-sm);
  font-size: var(--step-small);
  font-weight: 700;
  text-align: left;
  caption-side: top;
}

.split-cost th,
.split-cost td {
  display: block;
  padding: 0.35rem var(--space-md);
  text-align: left;
  vertical-align: baseline;
}

.split-cost thead {
  display: none;
}

.split-cost tr {
  display: block;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--line-paper);
}

.split-cost th[scope="row"] {
  font-weight: 800;
}

.split-cost-figure {
  color: var(--stamp-ink);
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 800;
  font-stretch: 90%;
}

.split-cost td:last-child {
  color: var(--text-ink-muted);
}

.split-cost-note {
  margin-top: var(--space-sm);
  color: var(--text-ink-muted);
  font-size: var(--step-micro);
}

.slips-close {
  max-width: 34ch;
  margin-top: var(--space-xl);
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 104%;
  line-height: 1.3;
  text-wrap: balance;
}

/* ---- The stations ------------------------------------------------------------ */
.stations-grid {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

/* The sticky rail only appears where it has room to ride alongside */
.rail {
  display: none;
}

.rail-list {
  position: relative;
}

.rail-list::before {
  content: "";
  position: absolute;
  left: calc(0.875rem - 1px);
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background-image: var(--brand-thread-down);
}

.rail-link {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.55rem 0;
  color: var(--fg-muted);
  font-size: var(--step-small);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.rail-link:hover {
  color: var(--fg);
}

.rail-link[aria-current="step"] {
  color: var(--fg);
}

.rail-op {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--mark);
  border-radius: 50%;
  background-color: var(--surface);
  color: var(--fg);
  font-size: var(--step-micro);
  font-weight: 800;
  font-stretch: 75%;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.rail-link[aria-current="step"] .rail-op {
  border-color: var(--node-fill);
  background-color: var(--node-fill);
  color: var(--node-ink);
}

/* The terminal node: solid, the result */
.rail-op-end {
  border: 0;
  background-image: var(--brand-thread);
}

.rail-stamp {
  padding: 0.05rem 0.35rem;
  border: 2px solid var(--brand-teal);
  border-radius: var(--radius-xs);
  color: var(--brand-teal);
  font-size: var(--step-stamp-field);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.rail-stamp-open {
  border-style: dashed;
  border-color: var(--ink-300);
  color: var(--text-muted);
  transform: none;
}

/* script.js holds stamps back until their station is reached */
.rail-stamp.is-pending {
  opacity: 0;
  transform: scale(1.5) rotate(-10deg);
}

.station-list {
  position: relative;
}

/* The routing line through every station, from Op 10 to the terminal node */
.station-list::before {
  content: "";
  position: absolute;
  left: calc(1rem - 1px);
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background-image: var(--brand-thread-down);
}

.station {
  position: relative;
  padding: 0 0 clamp(3.5rem, 8vw, 6rem) 3rem;
}

.station-end {
  padding-bottom: 0;
}

/* The thread stops at the terminal node: mask the line below it */
.station-end::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2rem;
  bottom: 0;
  width: 2.5rem;
  background-color: var(--surface);
}

.station-node {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--node-fill);
  border-radius: 50%;
  background-color: var(--surface);
  color: var(--fg);
  font-size: var(--step-micro);
  font-weight: 800;
  font-stretch: 75%;
}

.station-node-end {
  top: 0.25rem;
  left: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  background-image: var(--brand-thread);
  box-shadow: 0 0 0 0.35rem var(--surface), 0 0 0 0.5rem var(--brand-purple);
}

.station-title {
  max-width: 26ch;
  padding-top: 0.15rem;
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 106%;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.station-body {
  max-width: 62ch;
  margin-top: var(--space-sm);
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* What leaves this station and arrives at the next one */
.carry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--mark);
  border-radius: var(--radius-xs);
}

.carry-value {
  color: var(--fg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- Interface recreations ----------------------------------------------------
   Stand-ins for demo-tenant captures. Swap .screen-ui for an <img>. */
.screen {
  /* Small screens: the recreated screen lays over the thread at full width,
     so its tables have room. From 48rem it sits back in the station column.
     Positioned so it paints above the end-station mask, not under it. */
  position: relative;
  margin: var(--space-md) 0 0 -3rem;
}

.screen-ui {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--paper-100);
  color: var(--text-ink);
  box-shadow: var(--shadow-sheet);
  font-size: var(--step-small);
  font-variant-numeric: tabular-nums;
}

.ui-bar {
  padding: 0.65rem var(--space-md);
  border-bottom: 1px solid var(--line-paper);
  background-color: var(--paper-200);
  font-size: var(--step-record);
  font-weight: 700;
}

.ui-note {
  margin: var(--space-sm) var(--space-md) 0;
  padding: 0.55rem var(--space-sm);
  border-radius: var(--radius-xs);
  background-color: var(--stamp-wash);
  color: var(--stamp-ink);
  font-size: var(--step-record);
}

.ui-table {
  width: 100%;
  border-collapse: collapse;
}

.ui-table th,
.ui-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line-paper);
  text-align: left;
  vertical-align: top;
}

.ui-table th[scope="col"] {
  color: var(--text-ink-muted);
  font-size: var(--step-micro);
  font-weight: 700;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ui-sum th,
.ui-sum td {
  border-top: 2px solid var(--text-ink);
  border-bottom: 0;
  font-weight: 800;
}

.num {
  text-align: right;
}

/* The table header cells inherit .num alignment too */
.ui-table .num {
  text-align: right;
}

.ui-totals,
.ui-calc {
  border-top: 1px solid var(--line-paper);
}

.ui-totals div,
.ui-calc div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem var(--space-sm);
  padding: 0.5rem var(--space-md);
  border-bottom: 1px solid var(--line-paper);
}

.ui-totals dt,
.ui-calc dt {
  color: var(--text-ink-muted);
}

.ui-totals dd,
.ui-calc dd {
  font-weight: 700;
}

.ui-calc {
  border-top: 0;
}

.ui-total {
  border-top: 2px solid var(--text-ink);
  font-weight: 800;
}

.ui-total dt {
  color: var(--text-ink);
  font-weight: 800;
}

.ui-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-figures div {
  margin: var(--space-sm) var(--space-md) 0;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--rule-paper);
}

.ui-figures dd {
  font-size: 1.0625rem;
  font-weight: 800;
}

/* The one reserved accent: the job's live margin */
.ui-figure-key dd {
  color: var(--stamp-ink);
}

.ui-figures + .ui-note {
  margin: var(--space-md);
}

.screen-caption {
  /* Indented past the thread while the screen overlaps it */
  margin-top: var(--space-xs);
  padding-left: 3rem;
  color: var(--text-dim);
  font-size: var(--step-micro);
}

/* ---- Alternate routings --------------------------------------------------- */
.alt-routings {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.mini-traveler {
  overflow: hidden;
  border: 1px solid var(--line-paper);
  border-radius: var(--radius-xs);
  background-color: var(--paper-100);
  color: var(--text-ink);
  box-shadow: var(--sheet-shadow, var(--shadow-paper));
}

.mini-title {
  display: grid;
  margin: 0;
  gap: 0.15rem;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 2px solid var(--text-ink);
  font-size: 1.125rem;
  font-weight: 800;
  font-stretch: 90%;
  font-variant-numeric: tabular-nums;
}

.mini-sub {
  color: var(--text-ink-muted);
  font-size: var(--step-record);
  font-weight: 600;
  font-stretch: 100%;
}

.routing-mini .op {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "station"
    "result";
}

.routings-note {
  margin-top: var(--space-sm);
  color: var(--text-ink-muted);
  font-size: var(--step-micro);
}

/* ---- Inspection record ---------------------------------------------------- */
.inspection-grid {
  display: grid;
  gap: var(--space-xl);
}

.inspection {
  border-top: 2px solid var(--text-muted);
}

.inspection-row {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--line-soft);
}

.inspection-item {
  /* Label left, stamp pinned right: every stamp sits on one vertical line */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  color: var(--brand-teal);
  font-size: var(--step-record);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Stamps on the ink field take teal: stamp-ink fails 3:1 on dark */
.stamp-dark {
  --stamp-tilt: -3deg;
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-color: var(--brand-teal);
  color: var(--brand-teal);
  font-size: var(--step-stamp-field);
  box-shadow: none;
}

.inspection-signoff {
  margin-top: var(--space-md);
  color: var(--text-muted);
  font-size: var(--step-small);
  text-wrap: pretty;
}

.inspection-finding {
  max-width: 62ch;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ---- Close: the blank traveler ---------------------------------------------- */
.close-grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.close-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.close-note {
  max-width: 52ch;
  margin-top: var(--space-md);
  color: var(--fg-muted);
  font-size: var(--step-small);
  text-wrap: pretty;
}

.traveler-blank {
  border: 1px solid var(--line-paper);
  box-shadow: var(--sheet-shadow, var(--shadow-paper));
}

/* The thread arrives: a solid terminal node, and nothing below it */
.op.op-end::before {
  top: calc(50% - 0.55rem);
  left: calc(1.75rem - 0.55rem);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  box-shadow: 0 0 0 0.2rem var(--paper-100), 0 0 0 0.32rem var(--brand-purple);
  z-index: 1;
}

.op-end::after {
  content: "";
  position: absolute;
  left: calc(1.75rem - 1px);
  top: 50%;
  bottom: 0;
  width: 2px;
  background-color: var(--paper-100);
}

/* ==========================================================================
   Product page — the drawing set: a sheet index, then one sheet per module
   ========================================================================== */

/* ---- Sheet index: a traveler whose rows are links ------------------------ */
.index-head,
.index-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-sm);
  padding: 0.45rem var(--space-md);
}

.index-head {
  padding-block: var(--space-xs) 0.3rem;
  color: var(--text-ink-muted);
  font-size: var(--step-micro);
  font-weight: 700;
  font-stretch: 75%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.index-row {
  border-top: 1px solid var(--line-paper);
  color: var(--text-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.index-row:hover {
  color: var(--stamp-ink);
}

.index-num {
  font-size: var(--step-small);
  font-weight: 800;
  font-stretch: 75%;
}

.index-name {
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.3;
}

.index-op {
  color: var(--text-ink-muted);
  font-size: var(--step-record);
  font-weight: 600;
  white-space: nowrap;
}

.caption-link,
.sheet-back {
  color: var(--text-ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-400);
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
}

.caption-link:hover,
.sheet-back:hover {
  color: var(--stamp-ink);
}

/* ---- The sheets ----------------------------------------------------------- */
.sheet-set {
  border-top: 2px solid var(--text-ink);
  background-color: var(--paper-100);
  box-shadow: var(--shadow-paper);
  font-variant-numeric: tabular-nums;
}

.sheet {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--line-paper);
}

.sheet:last-child {
  border-bottom: 0;
}

.sheet-title {
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 106%;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sheet-body {
  max-width: 62ch;
  margin-top: var(--space-sm);
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* A drawing's title block: the same three fields in the same slots on every
   sheet, so the eye runs one column down all twelve. It bleeds to the
   sheet's edges and rules its cells with hairlines, like the block in the
   corner of a print. */
.title-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 calc(var(--space-md) * -1) calc(var(--space-lg) * -1);
  border-top: 2px solid var(--text-ink);
}

.title-block .field {
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--line-paper);
}

.title-block .field:first-child {
  border-right: 1px solid var(--line-paper);
}

.title-block .field-wide {
  border-bottom: 0;
}

.sheet-note {
  margin-top: var(--space-sm);
  color: var(--text-ink-muted);
  font-size: var(--step-micro);
}

/* ==========================================================================
   Solutions page — one job's custody line, broken wherever a patchwork stack
   re-keys the record
   ========================================================================== */

/* The hero and the custody line share one ink field */
.solutions-hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--space-lg);
}

.custody-band {
  padding-top: var(--space-md);
}

.solutions-hero-grid {
  display: grid;
  gap: var(--space-lg);
}

.solutions-hero-side {
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
}

.firm-jump-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.custody-intro {
  display: grid;
  gap: var(--space-lg);
}

.custody-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.custody-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  color: var(--fg-dim);
  font-size: var(--step-micro);
  font-weight: 700;
  font-stretch: 75%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.legend-item[hidden] {
  display: none;
}

.legend-item::before {
  content: "";
  width: 1.75rem;
  height: 2px;
}

.legend-gap::before {
  background: linear-gradient(90deg, var(--mark) 50%, transparent 50%) 0 0 / 0.6rem 2px repeat-x;
}

.legend-record::before {
  background-image: var(--brand-thread);
}

/* A button that does nothing without JavaScript stays hidden without it */
.custody-toggle {
  background-color: transparent;
  font-family: inherit;
  cursor: pointer;
}

.custody-toggle[hidden] {
  display: none;
}

/* Pressed reads as pressed: filled, like the primary action */
.custody-toggle[aria-pressed="true"] {
  border-color: var(--brand-teal);
  background-color: var(--brand-teal);
  color: var(--ink-700);
}

/* ---- The line: vertical on small screens ---------------------------------- */
.custody {
  position: relative;
  margin-top: var(--space-lg);
}

.custody-stop {
  position: relative;
  padding: 0 0 var(--space-lg) 3rem;
}

.custody-stop:last-child {
  padding-bottom: 0;
}

.custody-node {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--brand-teal);
  border-radius: 50%;
  background-color: var(--surface);
}

/* The arrival: a solid terminal node inside a thin blue ring */
.custody-node-end {
  border-color: var(--brand-purple);
  background-image: var(--brand-thread);
  box-shadow: inset 0 0 0 0.3rem var(--surface);
}

/* The segment into the next station: dashed where the record is re-keyed;
   the solid thread draws over it once the job runs on one record */
.custody-line {
  position: absolute;
  top: 2rem;
  bottom: 0;
  left: calc(1rem - 1px);
  width: 2px;
  background: linear-gradient(180deg, var(--mark) 50%, transparent 50%) 0 0 / 2px 0.6rem repeat-y;
}

.custody-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--brand-thread-down);
  transform: scaleY(var(--draw, 0));
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-one-record {
  --draw: 1;
}

/* The thread draws station by station; reduced motion draws it at once */
@media (prefers-reduced-motion: no-preference) {
  .custody-stop:nth-child(2) .custody-line::after { transition-delay: 0.12s; }
  .custody-stop:nth-child(3) .custody-line::after { transition-delay: 0.24s; }
  .custody-stop:nth-child(4) .custody-line::after { transition-delay: 0.36s; }
  .custody-stop:nth-child(5) .custody-line::after { transition-delay: 0.48s; }
  .custody-stop:nth-child(6) .custody-line::after { transition-delay: 0.6s; }
}

.custody-station {
  padding-top: 0.3rem;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.4;
}

.custody-record {
  margin-left: 0.3rem;
  color: var(--fg-muted);
  font-size: var(--step-record);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.custody-start {
  margin-top: 0.25rem;
  color: var(--fg-muted);
  font-size: var(--step-small);
}

.custody-title {
  margin-top: var(--space-sm);
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 106%;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.custody-body {
  max-width: 60ch;
  margin-top: var(--space-xs);
  color: var(--fg-muted);
  font-size: var(--step-small);
  text-wrap: pretty;
}

.custody-note {
  margin-top: var(--space-xl);
  color: var(--fg-dim);
  font-size: var(--step-micro);
}

/* ---- Firm types: copy beside its kind of record ---------------------------- */
.firm-list {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.firm {
  display: grid;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--text-ink);
}

.firm-records {
  display: grid;
  gap: var(--space-md);
}

/* ==========================================================================
   Pricing page — the quote's own routing. Amounts are labelled blanks until
   published pricing exists; figures replace the text in place.
   ========================================================================== */
.field-yours {
  color: var(--stamp-ink);
  font-weight: 800;
}

/* A labelled blank: the amount field waiting for a published figure */
.field-blank {
  color: var(--text-ink-muted);
  font-size: var(--step-record);
  font-weight: 600;
}

.carry-blank {
  color: var(--fg-muted);
  font-weight: 600;
}

.drivers {
  max-width: 50rem;
}

/* Not reached yet: the quote is an open station, a hollow ring in the mark
   colour, never the solid terminal that means the job has arrived */
.station-node-open {
  border-color: var(--mark);
  border-style: dashed;
}

/* The segment into an open station is a dashed tail, drawn over the solid
   thread with the band's own surface between the dashes */
.station-before-open::after {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 0;
  left: calc(1rem - 1px);
  width: 2px;
  background: linear-gradient(180deg, var(--mark) 50%, var(--surface) 50%) 0 0 / 2px 0.6rem repeat-y;
}

.rail-op-open {
  border-style: dashed;
}

/* ==========================================================================
   Resources page — a terminal strip: every place you connect lands on one
   numbered terminal, its note hung beneath on a rule
   ========================================================================== */

/* A terminal: a square ruled cell in whatever ink surrounds it */
.terminal-cell {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid currentColor;
  border-radius: var(--radius-xs);
  font-size: var(--step-small);
  font-weight: 800;
  font-stretch: 75%;
  font-variant-numeric: tabular-nums;
}

/* ---- The strip on the hero traveler ------------------------------------- */
.terminal-row {
  display: grid;
  grid-template-columns: 2rem 1rem minmax(0, 1fr);
  grid-template-areas:
    "cell wire label"
    ".    .    tag";
  align-items: center;
  gap: 0.3rem var(--space-xs);
  padding: 0.5rem var(--space-md);
  border-top: 1px solid var(--line-paper);
  color: var(--text-ink);
  text-decoration: none;
  transition: color 0.2s ease;
}

.terminal-row:hover {
  color: var(--stamp-ink);
}

/* Hover and keyboard focus both underline the label, not colour alone */
.terminal-row:hover .terminal-label,
.terminal-row:focus-visible .terminal-label {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* The wire: a stub of the thread from the terminal to its label */
.terminal-row .terminal-cell {
  grid-area: cell;
}

.terminal-wire {
  grid-area: wire;
  height: 2px;
  background-image: var(--brand-thread);
}

.terminal-label {
  grid-area: label;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.3;
}

.terminal-row .stamp {
  grid-area: tag;
  justify-self: start;
}

/* ---- The notes, hung on rules -------------------------------------------- */
.terminal-notes {
  display: grid;
  margin-top: var(--space-xl);
  border-top: 2px solid var(--fg);
}

.terminal-note {
  display: grid;
  grid-template-columns: 2rem 1rem minmax(0, 1fr);
  grid-template-areas:
    "cell wire copy"
    ".    .    tag";
  gap: var(--space-sm) var(--space-xs);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--line);
}

.terminal-note .terminal-cell {
  grid-area: cell;
}

/* The same wire as the strip, from the terminal to its heading */
.terminal-note .terminal-wire {
  grid-area: wire;
  align-self: start;
  margin-top: calc(1rem - 1px);
}

.terminal-note-copy {
  grid-area: copy;
  max-width: 65ch;
}

/* The tag and the request sit in the same slot on every note */
.terminal-note-tag {
  display: grid;
  grid-area: tag;
  justify-items: start;
  align-content: start;
  gap: var(--space-xs);
}

.terminal-note-tag .stamp {
  grid-area: auto;
  justify-self: start;
}

.terminal-note-title {
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 106%;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.terminal-request {
  margin: 0;
}

/* ==========================================================================
   About page — the site logbook: numbered entries, each stamped with what
   is true about it
   ========================================================================== */
.log-row {
  align-items: center;
}

.log-row .stamp {
  grid-area: auto;
}

.log {
  border-top: 2px solid var(--fg);
}

/* A log row: numeral in the gutter beside the heading, never above it */
.log-entry {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-areas:
    "num copy"
    ".   tag";
  gap: var(--space-md) var(--space-sm);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--line);
}

.log-num {
  grid-area: num;
  padding-top: 0.2rem;
  color: var(--fg-muted);
  font-size: 1.25rem;
  font-weight: 800;
  font-stretch: 75%;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.log-copy {
  grid-area: copy;
  max-width: var(--measure);
}

.log-title {
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 106%;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.log-body {
  max-width: 62ch;
  margin-top: var(--space-sm);
  color: var(--fg-muted);
  text-wrap: pretty;
}

/* The stamp sits in the same slot on every entry */
.log-tag {
  grid-area: tag;
  justify-self: start;
}

.log-tag .stamp {
  display: inline-block;
}

/* Inked stamps alternate their tilt row by row, like the routing's */
.log-list li:nth-child(even) .stamp:not(.stamp-open),
.log-entry:nth-child(even) .stamp:not(.stamp-open) {
  --stamp-tilt: 3deg;
}

/* ==========================================================================
   Demo page — the request is a traveler the visitor fills in
   ========================================================================== */
.demo-steps {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  color: var(--text-muted);
  font-weight: 600;
}

.demo-step {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

/* Op numbers, as on a routing */
.demo-step-num {
  flex: none;
  min-width: 1.75rem;
  color: var(--brand-teal);
  font-size: var(--step-small);
  font-weight: 800;
  font-stretch: 75%;
  font-variant-numeric: tabular-nums;
}

/* Native controls render light on the white sheet */
.demo-form {
  color-scheme: light;
}

.demo-form-fields {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
}

.form-field {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
}

.form-field-wide {
  grid-column: 1 / -1;
}

.form-optional {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* A ruled field to write on: the underline is ink-400 (5.75:1 on its fill),
   so the control has a real boundary, unlike the printed form rule. 1rem
   text keeps iOS from zooming on focus. */
.form-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-bottom: 2px solid var(--ink-400);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background-color: var(--paper-200);
  color: var(--text-ink);
  font-family: inherit;
  font-size: var(--step-body);
  font-weight: 600;
  transition: border-color 0.2s ease;
}

.form-input:hover {
  border-bottom-color: var(--text-ink);
}

.form-input:focus-visible {
  outline: 2px solid var(--stamp-ink);
  outline-offset: 2px;
  border-bottom-color: var(--stamp-ink);
}

/* Native arrow replaced by a chevron drawn from two gradients */
.form-select {
  appearance: none;
  padding-right: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-ink) 50%),
    linear-gradient(135deg, var(--text-ink) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) 50%,
    calc(100% - 0.8rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.form-textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.form-hint {
  color: var(--text-ink-muted);
  font-size: var(--step-micro);
}

.demo-form-foot {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 1px solid var(--line-paper);
}

/* The button version of the primary action */
.demo-submit {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.demo-submit:disabled {
  opacity: 0.7;
  cursor: progress;
}

.demo-form-status {
  color: var(--text-ink);
  font-size: var(--step-small);
  font-weight: 600;
}

.demo-form-status:empty {
  display: none;
}

.demo-form-status.is-error {
  color: var(--alert-ink);
}

.demo-form-privacy {
  max-width: 48ch;
  color: var(--text-ink-muted);
  font-size: var(--step-micro);
}

/* ==========================================================================
   Legal pages — the privacy policy and terms, set for long reading on paper.
   The documents come from a generator and get re-imported, so their inner
   elements are styled one level under .legal instead of carrying classes.
   ========================================================================== */
.legal-hero {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.legal-updated {
  margin-top: var(--space-md);
  color: var(--text-dim);
  font-size: var(--step-small);
}

.legal {
  max-width: var(--measure);
  color: var(--text-ink);
  overflow-wrap: anywhere;  /* long URLs break instead of widening the page at 320px */
}

.legal h2 {
  margin-top: var(--space-xl);
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.legal h3 {
  margin-top: var(--space-lg);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.legal p,
.legal ul,
.legal ol,
.legal address {
  margin-top: var(--space-sm);
}

.legal ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.legal li + li {
  margin-top: var(--space-xs);
}

.legal address {
  font-style: normal;
}

/* The generator's "In short" line: the section's answer before its detail */
.legal-short {
  padding-left: var(--space-sm);
  border-left: 2px solid var(--stamp-ink);
  color: var(--text-ink-muted);
}

.legal-toc {
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  border: 1px solid var(--line-paper);
  border-radius: var(--radius-sm);
  background-color: var(--paper-100);
  list-style: decimal;
}

/* Scrolls inside itself on narrow screens, so the page never does */
.legal-table-wrap {
  margin-top: var(--space-md);
  overflow-x: auto;
}

.legal-table-wrap:focus-visible {
  outline: 2px solid var(--stamp-ink);
  outline-offset: 3px;
}

.legal-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  overflow-wrap: normal;  /* "anywhere" from .legal would let columns shrink to a letter */
  font-size: var(--step-small);
}

.legal-table th,
.legal-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--line-paper);
  text-align: left;
  vertical-align: top;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  padding-block: var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--line-soft);
  background-color: var(--ink-800);
}

.footer-top {
  display: grid;
  gap: var(--space-xl);
}

.footer-logo-text {
  display: block;
}

.footer-tagline {
  max-width: 34ch;
  margin-top: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--step-small);
  text-wrap: pretty;
}

.footer-nav {
  display: grid;
  gap: var(--space-lg);
}

.footer-heading {
  color: var(--text-bright);
  font-size: var(--step-micro);
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-list {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.footer-link {
  color: var(--text-muted);
  font-size: var(--step-small);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--brand-teal);
}

.footer-bottom {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-soft);
}

.footer-fine {
  color: var(--text-dim);
  font-size: var(--step-micro);
  text-wrap: pretty;
}

/* ==========================================================================
   Larger viewports
   ========================================================================== */
@media (min-width: 36rem) {
  .ui-figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .demo-form-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Room for the tag on the terminal's own line */
  .terminal-row {
    grid-template-columns: 2rem 1.25rem minmax(0, 1fr) auto;
    grid-template-areas: "cell wire label tag";
  }

  .terminal-row .stamp {
    justify-self: end;
  }

  .ui-table th,
  .ui-table td {
    padding: 0.55rem var(--space-md);
  }

  /* Figures stay on one line once a table has room for them */
  .num {
    white-space: nowrap;
  }

  .inspection-row {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: baseline;
  }

  .footer-nav {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-bottom {
    grid-template-columns: auto 1fr;
    gap: var(--space-lg);
    align-items: baseline;
  }
}

@media (min-width: 48rem) {
  /* Room for a real table: system, figure, reason */
  .split-cost thead {
    display: table-header-group;
  }

  .split-cost tr {
    display: table-row;
    padding: 0;
  }

  .split-cost th,
  .split-cost td {
    display: table-cell;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--line-paper);
  }

  .split-cost th[scope="col"] {
    color: var(--text-ink-muted);
    font-size: var(--step-micro);
    font-weight: 700;
    font-stretch: 75%;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .split-cost .num {
    text-align: right;
  }

  .alt-routings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .routing-mini .op {
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    grid-template-areas: "station result";
    column-gap: var(--space-md);
  }

  .station {
    padding-left: 4rem;
  }

  .sheet {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    column-gap: var(--space-lg);
    padding: var(--space-lg);
  }

  /* Pinned to the sheet's bottom-right corner, framed on two sides */
  .custody-intro {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .custody-stop {
    padding-left: 4rem;
  }

  /* A fixed tag column, so every stamp starts on one vertical line */
  .log-entry {
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 9rem);
    grid-template-areas: "num copy tag";
    column-gap: var(--space-lg);
  }

  .log-tag {
    padding-top: 0.4rem;
  }

  /* One strip of rules: copy, then a fixed column for the tag and request */
  .terminal-note {
    grid-template-columns: 2rem 1.25rem minmax(0, 1fr) minmax(0, 14rem);
    grid-template-areas: "cell wire copy tag";
    column-gap: var(--space-sm);
  }

  .terminal-note-tag {
    padding-top: 0.3rem;
    padding-left: var(--space-lg);
  }

  .custody-node {
    width: 2.5rem;
    height: 2.5rem;
  }

  .custody-line {
    top: 2.5rem;
    left: calc(1.25rem - 1px);
  }

  .custody-station {
    padding-top: 0.5rem;
  }

  .firm {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    column-gap: var(--space-2xl);
    align-items: start;
  }

  .title-block {
    align-self: end;
    margin: 0 calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) 0;
    border-left: 2px solid var(--text-ink);
  }

  .screen {
    margin-left: 0;
  }

  .screen-caption {
    padding-left: 0;
  }

  .station-list::before {
    left: calc(1.25rem - 1px);
  }

  .station-node {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--step-small);
  }

  .station-node-end {
    top: 0.5rem;
    left: 0.5rem;
  }

  .station-before-open::after {
    top: 2.5rem;
    left: calc(1.25rem - 1px);
  }

  .station-end::before {
    top: 2.5rem;
  }

  .footer-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-2xl);
  }
}

/* The horizontal bar needs room for five links, Login and the CTA before it
   can dissolve the panel; below this it stays a hamburger. Kept in sync with
   the `desktop` media query in script.js. */
@media (min-width: 60rem) {
  .nav-panel,
  .nav-panel.is-open {
    display: contents;
  }

  .nav-menu {
    flex-direction: row;
    gap: var(--space-lg);
    margin: 0 auto;
  }

  .nav-toggle {
    display: none;
  }

  .navbar {
    gap: var(--space-lg);
  }

  .nav-cta {
    padding: 0.6rem 1rem;
  }
}

@media (min-width: 64rem) {
  .job-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
    gap: var(--space-2xl);
  }

  /* The traveler rides alongside the stations it is stamped at */
  .stations-grid {
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  .rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--space-lg));
  }

  .inspection-grid {
    grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }

  .close-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: var(--space-2xl);
  }

  .solutions-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    column-gap: var(--space-2xl);
    align-items: end;
  }

  .firm-jump-list {
    flex-direction: column;
  }

  /* The custody line runs across the page. Notes alternate above and below
     it, like the mark's half-circles, so each gets four columns of measure:
     stations sit on every other column of sixteen. */
  .custody {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    grid-template-rows: auto 2.5rem auto;
  }

  .custody-stop {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    grid-row: 1 / 4;
    padding: 0;
  }

  .custody-stop:nth-child(1) { grid-column: 1 / span 4; }
  .custody-stop:nth-child(2) { grid-column: 3 / span 4; }
  .custody-stop:nth-child(3) { grid-column: 5 / span 4; }
  .custody-stop:nth-child(4) { grid-column: 7 / span 4; }
  .custody-stop:nth-child(5) { grid-column: 9 / span 4; }
  .custody-stop:nth-child(6) { grid-column: 11 / span 4; }
  .custody-stop:nth-child(7) { grid-column: 13 / span 4; }

  .custody-node {
    position: relative;
    top: auto;
    left: auto;
    grid-row: 2;
    grid-column: 1;
    align-self: center;
  }

  .custody-line {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    grid-row: 2;
    grid-column: 1;
    align-self: center;
    width: calc(50% - 2.5rem);
    height: 2px;
    margin-left: 2.5rem;
    background: linear-gradient(90deg, var(--mark) 50%, transparent 50%) 0 0 / 0.6rem 2px repeat-x;
  }

  .custody-line::after {
    background-image: var(--brand-thread);
    transform: scaleX(var(--draw, 0));
    transform-origin: left;
  }

  /* Odd stations print below the line, even stations above it. Either
     way the station name sits against its node, like a date on a
     provenance line, and the note reads away from the thread. */
  .custody-text {
    display: flex;
    flex-direction: column;
    grid-row: 3;
    padding: var(--space-xs) var(--space-md) 0 0;
  }

  .custody-stop:nth-child(even) .custody-text {
    grid-row: 1;
    align-self: end;
    padding: 0 var(--space-md) var(--space-xs) 0;
  }

  .custody-stop:nth-child(even) .custody-station {
    order: 1;
    margin-top: var(--space-sm);
  }

  .custody-station {
    padding-top: 0;
  }

  /* Four columns of measure: the Title role at its floor */
  .custody-title {
    font-size: 1.375rem;
  }
}

/* ==========================================================================
   Motion — one authored moment: the stamps land on the traveler in order
   ========================================================================== */
@keyframes stamp-land {
  0% {
    opacity: 0;
    transform: scale(1.6) rotate(-12deg);
  }

  60% {
    opacity: 1;
    transform: scale(0.94) rotate(var(--stamp-tilt));
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(var(--stamp-tilt));
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Only the hero routings and the site log play it; stamps further down a
     page sit still rather than landing out of view */
  .op .stamp,
  .log-list .stamp {
    animation: stamp-land 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .op .stamp-empty {
    animation: none;
  }

  .op:nth-child(1) .stamp { animation-delay: 0.45s; }
  .op:nth-child(2) .stamp { animation-delay: 0.65s; }
  .op:nth-child(3) .stamp { animation-delay: 0.85s; }
  .op:nth-child(4) .stamp { animation-delay: 1.05s; }
  .op:nth-child(5) .stamp { animation-delay: 1.25s; }
  .op:nth-child(6) .stamp { animation-delay: 1.6s; }

  .log-list li:nth-child(1) .stamp { animation-delay: 0.45s; }
  .log-list li:nth-child(2) .stamp { animation-delay: 0.7s; }
  .log-list li:nth-child(3) .stamp { animation-delay: 0.95s; }
  .log-list li:nth-child(4) .stamp { animation-delay: 1.3s; }
}

/* Reduced motion: every keyframe animation above already lives inside
   no-preference, so only the transitions that move something switch off */
@media (prefers-reduced-motion: reduce) {
  .nav-thread {
    transform: scaleX(1);
    transition: none;
  }

  .nav-toggle-bar,
  .skip-link,
  .rail-stamp,
  .custody-line::after {
    transition: none;
  }
}