/* ==========================================================================
   TRAKCORP LTD  /  roadway.css
   Asset and fleet tracking software. Dark surface, sans display, flat
   decoration, sharp corners, photography leading.

   Naming universe: road telemetry. Every block name is taken from the
   vocabulary of vehicle tracking and depot operations.
     gantry     header               fixpoint    hero
     quadrant   capability row       haul        how it works
     odometer   platform detail      yardgrid    sectors
     layby      company stage        apron       call to action
     hardstand  footer               docket      legal document
     control    button               callsign    eyebrow
     readback   lead paragraph       reckoner    data table
     kitlist    dated record         handover    contact routes
     runline    a single route       livedot     status indicator
     sliproad   skip link            sweep       reveal hook
     numerals   tabular figures      scrollcue   scroll affordance
   Convention: block__element, block--modifier. No other convention appears.

   Corner radius is 0 everywhere. The only border-radius in this file is
   50% on status dots. Any other value is a bug.
   ========================================================================== */

/* --- 1. Tokens -----------------------------------------------------------
   Contrast ratios below are calculated from relative luminance per WCAG 2.1,
   not judged by eye.
     --ink      on --bg      17.7:1     on --surface   16.3:1   AAA
     --ink-mute on --bg       8.6:1     on --surface    7.9:1   AAA
     --accent   on --bg      10.6:1     on --surface    9.8:1   AAA
     --bg       on --accent  10.6:1                             AAA
     --live     on --bg       9.7:1                             AAA
     --hairline on --bg       1.3:1     decorative rules only, never a control
     --edge     on --bg       3.6:1     on --surface    3.3:1   borders of
                                        interactive controls, WCAG 1.4.11
   ------------------------------------------------------------------------ */

:root {
  --bg:          #0B0E11;
  --surface:     #14181D;
  --hairline:    #232A31;
  --edge:        #606B76;
  --ink:         #F2F5F7;
  --ink-mute:    #A3AEB8;
  --accent:      #FFB020;
  --accent-lit:  #FFC24D;
  --live:        #35D07F;

  --radius: 0;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --road-max: 1280px;
  --gutter: 24px;
  --rhythm: clamp(6rem, 9vw, 8rem);

  --t-xl:   clamp(2.75rem, 6.5vw, 4.25rem);
  --t-l:    clamp(2rem, 4vw, 3rem);
  --t-h3:   1.5rem;
  --t-h4:   1.1875rem;
  --t-body-l: 1.1875rem;
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-callsign: 0.8125rem;
}

/* --- 2. Reset and base --------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { border-radius: 0; border: 0; }

h1, h2, h3, h4 { margin: 0; font-family: var(--display); }
p, ul, ol, dl, table, figure { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-lit); text-decoration: underline; text-underline-offset: 0.22em; }

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

::selection { background: var(--accent); color: var(--bg); }

.sliproad {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
}
.sliproad:focus {
  left: 0;
  text-decoration: none;
}

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

/* --- 3. Shared type ------------------------------------------------------ */

.roadway {
  width: 100%;
  max-width: var(--road-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-width: 0;
}

.callsign {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-callsign);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.headline-xl {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 22ch;
}

.headline-l {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-l);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.headline-s {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.readback {
  font-size: var(--t-body-l);
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 62ch;
}

.numerals {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.tbc {
  display: inline;
  background: rgba(255, 176, 32, 0.14);
  border-bottom: 2px solid var(--accent);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.05em 0.35em;
}

.livedot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--live);
  vertical-align: 0.06em;
  margin-right: 0.5rem;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --- 4. Controls --------------------------------------------------------- */

.control {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--accent);
  border-radius: 0;
  text-decoration: none;
  transition: background-color 140ms linear, color 140ms linear, border-color 140ms linear;
}
.control:hover { text-decoration: none; }

.control--signal {
  background: var(--accent);
  color: var(--bg);
}
.control--signal:hover { background: var(--accent-lit); border-color: var(--accent-lit); color: var(--bg); }

.control--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--edge);
}
.control--ghost:hover { border-color: var(--accent); color: var(--ink); background: transparent; }

.control--inverse {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--bg);
}
.control--inverse:hover { background: #000000; border-color: #000000; color: var(--accent-lit); }

.control--slim {
  padding: 0.55rem 1rem;
  font-size: var(--t-small);
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* --- 5. Gantry (header) -------------------------------------------------- */

.gantry {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms linear, border-color 200ms linear;
}
.gantry--laid,
.gantry[data-scrollrule="off"] {
  background: var(--bg);
  border-bottom-color: var(--hairline);
}

.gantry__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.gantry__lockup {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
  flex-wrap: wrap;
}
.gantry__lockup:hover { text-decoration: none; color: var(--ink); }
.gantry__word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3125rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.gantry__descriptor {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-left: 1px solid var(--hairline);
  padding-left: 0.7rem;
}

.gantry__nav ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gantry__link {
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms linear, color 160ms linear;
}
.gantry__link:hover,
.gantry__link[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

.gantry__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  border-radius: 0;
  transition: border-color 160ms linear;
}
.gantry__toggle:hover { border-color: var(--accent); }

/* --- 6. Fixpoint (hero) -------------------------------------------------- */

.fixpoint {
  position: relative;
  margin-top: -4.75rem;
  min-height: clamp(600px, 84vh, 820px);
  /* Column, not row. As a row the strip became a sibling column beside the
     copy and, under 560px, sat on top of the buttons. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}

.fixpoint__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(0.95) brightness(0.82);
  animation: settle 900ms cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes settle { from { transform: scale(1.04); } to { transform: scale(1); } }

.fixpoint__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #0B0E11 0%, rgba(11, 14, 17, 0.35) 60%, transparent 100%),
    linear-gradient(to bottom, rgba(11, 14, 17, 0.72) 0%, rgba(11, 14, 17, 0.55) 45%, rgba(11, 14, 17, 0.85) 100%);
}

.fixpoint__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  padding-top: 11rem;
  padding-bottom: 4.5rem;
}
.fixpoint__copy { grid-column: 1 / span 7; min-width: 0; }
.fixpoint__sub { margin-top: 1.6rem; color: var(--ink); max-width: 54ch; }

.fixpoint__strip {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hairline);
  background: rgba(11, 14, 17, 0.92);
}
.fixpoint__strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5rem;
  list-style: none;
  margin: 0;
  padding: 1rem 0;
  font-size: var(--t-small);
  color: var(--ink-mute);
}

/* --- 7. Zone shell ------------------------------------------------------- */

.zone { padding-block: var(--rhythm); }
.zone--tight { padding-block: clamp(4rem, 6vw, 5.5rem); }
.zone--ruled { border-top: 1px solid var(--hairline); }
.zone--panel { background: var(--surface); }

.zone__head { margin-bottom: 3.25rem; max-width: 68ch; }
.zone__head .readback { margin-top: 1.25rem; }

/* --- 8. Quadrant (ruled quartet) ----------------------------------------- */

.quadrant {
  background: var(--surface);
  border-block: 1px solid var(--hairline);
}
.quadrant__set {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: 3.5rem;
}
.quadrant__cell {
  padding: 0 2rem;
  border-left: 1px solid var(--hairline);
  min-width: 0;
}
.quadrant__cell:first-child { border-left: 0; padding-left: 0; }
.quadrant__cell:last-child { padding-right: 0; }
.quadrant__index {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-bottom: 1rem;
}
.quadrant__title { margin-bottom: 0.7rem; }
.quadrant__note {
  font-size: var(--t-small);
  color: var(--ink-mute);
  line-height: 1.55;
}

/* --- 9. Haul (split diptych) --------------------------------------------- */

.haul { margin-top: clamp(2rem, 4vw, 3rem); }

.haul__leg {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
  padding-block: clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid var(--hairline);
}
.haul__text { grid-column: 1 / span 6; min-width: 0; }
.haul__figure { grid-column: 7 / span 6; min-width: 0; }
.haul__leg--flip .haul__text { grid-column: 7 / span 6; }
.haul__leg--flip .haul__figure { grid-column: 1 / span 6; }

.haul__numeral {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
  display: block;
  margin-bottom: 1.1rem;
}
.haul__title { margin-bottom: 1rem; }
.haul__body { color: var(--ink-mute); max-width: 52ch; }
.haul__body p + p { margin-top: 1rem; }

.haul__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.8) contrast(0.95) brightness(0.88);
}

.haul__wire {
  grid-column: 7 / span 6;
  border-left: 1px solid var(--hairline);
  padding-left: 2rem;
  min-width: 0;
}
.haul__wire dl { margin: 0; }
.haul__wire dt {
  font-size: var(--t-callsign);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 1.4rem;
}
.haul__wire dt:first-child { margin-top: 0; }
.haul__wire dd {
  margin: 0.35rem 0 0;
  color: var(--ink);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- 10. Odometer (sticky ledger) ---------------------------------------- */

.odometer {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.odometer__anchor {
  position: sticky;
  top: 7.5rem;
  align-self: start;
  min-width: 0;
}
.odometer__anchor .readback { margin-top: 1.25rem; font-size: var(--t-body); }
.odometer__rows { min-width: 0; }
.odometer__row {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 0.5rem var(--gutter);
  padding-block: 1.4rem;
  border-top: 1px solid var(--hairline);
}
.odometer__row:last-child { border-bottom: 1px solid var(--hairline); }
.odometer__key {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.odometer__value {
  font-size: var(--t-small);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.odometer__value em { font-style: normal; color: var(--ink); }

/* --- 11. Yardgrid (photo mosaic) ----------------------------------------- */

.yardgrid { margin-top: clamp(2rem, 4vw, 3rem); }

.yardgrid__set {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.yardgrid__tile {
  position: relative;
  min-width: 0;
  background: var(--bg);
  overflow: hidden;
}
.yardgrid__tile:nth-child(1),
.yardgrid__tile:nth-child(2),
.yardgrid__tile:nth-child(3) { grid-column: span 2; }
.yardgrid__tile:nth-child(4) { grid-column: span 4; }
.yardgrid__tile:nth-child(5) { grid-column: span 2; }

.yardgrid__photo {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.8) contrast(0.95) brightness(0.7);
}
.yardgrid__tile:nth-child(4) .yardgrid__photo { aspect-ratio: 16 / 6; }

/* Flat plate, not a gradient. A fading overlay put the first line of the label
   over bare photograph at roughly 1.5:1; a uniform 0.94 plate measures 16.2:1
   for --ink and 8.1:1 for --ink-mute against the brightest pixel in the set. */
.yardgrid__label {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 1.15rem 1.25rem 1.1rem;
  background: rgba(11, 14, 17, 0.94);
  border-top: 1px solid var(--hairline);
}
.yardgrid__name {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.yardgrid__what {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--t-small);
  color: var(--ink-mute);
  line-height: 1.45;
}

/* --- 12. Layby (statement column) ------------------------------------- */

.layby {
  max-width: 68ch;
  margin-inline: auto;
  text-align: left;
}
.layby .headline-l { max-width: none; }
.layby__body { margin-top: 1.75rem; color: var(--ink-mute); }
.layby__body p + p { margin-top: 1.1rem; }
.layby__body strong { color: var(--ink); font-weight: 600; }
.layby__cut {
  margin-top: 2rem;
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
  font-size: var(--t-body-l);
  line-height: 1.55;
  color: var(--ink);
}

/* --- 13. Apron (inverted slab) ------------------------------------------ */

.apron {
  background: var(--accent);
  color: var(--bg);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.apron__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: end;
}
.apron__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-l);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bg);
  max-width: 20ch;
}
.apron__note { margin-top: 1.1rem; color: var(--bg); max-width: 52ch; font-weight: 500; }
.apron__act { justify-self: start; }
.apron .control-row { margin-top: 0; }
.apron a { color: var(--bg); }

/* --- 14. Hardstand (footer) ----------------------------------------------- */

.hardstand {
  border-top: 1px solid var(--hairline);
  background: var(--bg);
  padding-block: clamp(3rem, 5vw, 4.25rem) 2rem;
}
.hardstand__set {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
}
.hardstand__col { min-width: 0; }
.hardstand__word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
}
.hardstand__what {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-small);
  color: var(--ink-mute);
  max-width: 32ch;
}
.hardstand__head {
  font-family: var(--sans);
  font-size: var(--t-callsign);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1rem;
}
.hardstand__col ul { list-style: none; margin: 0; padding: 0; }
.hardstand__col li + li { margin-top: 0.6rem; }
.hardstand__col a {
  color: var(--ink);
  font-size: var(--t-small);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hardstand__col a:hover { color: var(--ink); border-bottom-color: var(--accent); text-decoration: none; }

.hardstand__legal {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 78ch;
}
.hardstand__legal p + p { margin-top: 0.6rem; }
.hardstand__legal a { color: var(--ink-mute); text-decoration: underline; text-underline-offset: 0.2em; }
.hardstand__legal a:hover { color: var(--accent); }

/* --- 15. Docket (legal pages) -------------------------------------------- */

.docket__masthead {
  border-bottom: 1px solid var(--hairline);
  padding-block: clamp(4.5rem, 8vw, 6.5rem) clamp(2.5rem, 4vw, 3.5rem);
}
.docket__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.docket__stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.docket__body {
  display: grid;
  grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

.docket__toc {
  position: sticky;
  top: 6.5rem;
  align-self: start;
  min-width: 0;
  border-left: 1px solid var(--hairline);
  padding-left: 1.25rem;
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
}
.docket__toc h2 {
  font-family: var(--sans);
  font-size: var(--t-callsign);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.docket__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.docket__toc li { counter-increment: toc; }
.docket__toc li + li { margin-top: 0.5rem; }
.docket__toc a {
  display: block;
  color: var(--ink-mute);
  font-size: var(--t-small);
  line-height: 1.4;
  text-decoration: none;
}
.docket__toc a::before {
  content: counter(toc) ". ";
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.docket__toc a:hover { color: var(--ink); text-decoration: none; }

.docket__text { min-width: 0; }
.docket__part { padding-top: 2.75rem; }
.docket__part:first-child { padding-top: 0; }
.docket__part > h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.4rem;
  scroll-margin-top: 6.5rem;
}
.docket__part h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.65rem;
  color: var(--ink);
  scroll-margin-top: 6.5rem;
}
.docket__part h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-body);
  margin-top: 1.5rem;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.docket__part p,
.docket__part li { color: var(--ink-mute); max-width: 72ch; }
.docket__part p + p { margin-top: 0.95rem; }
.docket__part ul,
.docket__part ol { margin: 0.9rem 0 0; padding-left: 1.25rem; }
.docket__part li + li { margin-top: 0.5rem; }
.docket__part strong { color: var(--ink); font-weight: 600; }
.docket__part a { text-decoration: underline; text-underline-offset: 0.2em; }

/* No monospace anywhere in this system. Inline literals keep Inter and are
   distinguished by a hairline and a surface fill instead of by a mono face. */
code {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9375em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 0.05em 0.35em;
  color: var(--ink);
  word-break: break-word;
}

.docket__role {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--t-callsign);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.docket__note {
  border-left: 2px solid var(--accent);
  background: var(--surface);
  padding: 1.1rem 1.25rem;
  margin-top: 1.4rem;
}
.docket__note p { max-width: none; color: var(--ink); }

/* --- 16. Tables ---------------------------------------------------------- */

.scrollframe {
  margin-top: 1.4rem;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  -webkit-overflow-scrolling: touch;
}
.reckoner {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: var(--t-small);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.reckoner caption {
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-small);
  border-bottom: 1px solid var(--hairline);
}
.reckoner th,
.reckoner td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--hairline);
}
.reckoner thead th {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-callsign);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.reckoner tbody th { color: var(--ink); font-weight: 600; }
.reckoner td { color: var(--ink-mute); }
.reckoner tbody tr:last-child th,
.reckoner tbody tr:last-child td { border-bottom: 0; }
.scrollcue {
  margin-top: 0.5rem;
  font-size: var(--t-callsign);
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* --- 17. Handover (contact page) ------------------------------------------ */

.handover {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.handover__side {
  border-left: 1px solid var(--hairline);
  padding-left: clamp(1.25rem, 3vw, 2rem);
  min-width: 0;
}
.handover__side dl { margin: 0; }
.handover__side dt {
  font-size: var(--t-callsign);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 1.6rem;
}
.handover__side dt:first-child { margin-top: 0; }
.handover__side dd { margin: 0.4rem 0 0; color: var(--ink); font-size: var(--t-small); line-height: 1.55; }

.runline {
  border: 1px solid var(--hairline);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: border-color 160ms linear;
  min-width: 0;
}
.runline + .runline { margin-top: var(--gutter); }
.runline:hover { border-color: var(--accent); }
.runline__title { margin-bottom: 0.7rem; }
.runline__note { color: var(--ink-mute); font-size: var(--t-small); }
.runline__note p + p { margin-top: 0.7rem; }
.runline ol { margin: 0.9rem 0 0; padding-left: 1.2rem; color: var(--ink-mute); font-size: var(--t-small); }
.runline ol li + li { margin-top: 0.4rem; }

/* --- 18. Kitlist (about page alternating record) --------------------------- */

.kitlist { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.kitlist__entry {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
  padding-block: 1.75rem;
  border-top: 1px solid var(--hairline);
}
.kitlist__entry:last-child { border-bottom: 1px solid var(--hairline); }
.kitlist__when {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: 0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.kitlist__what { min-width: 0; }
.kitlist__what h3 { margin-bottom: 0.5rem; }
.kitlist__what p { color: var(--ink-mute); max-width: 62ch; }
.kitlist__what p + p { margin-top: 0.8rem; }

.wideshot {
  width: 100%;
  height: auto;          /* without this the height attribute beats aspect-ratio */
  aspect-ratio: 21 / 9;
  object-fit: cover;
  filter: saturate(0.8) contrast(0.95) brightness(0.8);
}

/* --- 19. Motion ---------------------------------------------------------- */

.sweep {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms cubic-bezier(0.2, 0, 0, 1), transform 420ms cubic-bezier(0.2, 0, 0, 1);
  will-change: opacity, transform;
}
.sweep--acquired { opacity: 1; transform: none; }
.no-js .sweep { opacity: 1; transform: none; }

/* --- 20. Responsive ------------------------------------------------------ */

@media (max-width: 1080px) {
  .quadrant__set { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .quadrant__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .quadrant__cell:nth-child(even) { padding-right: 0; }
  .hardstand__set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .gantry__toggle { display: inline-block; }
  .gantry {
    background: var(--bg);
    border-bottom-color: var(--hairline);
  }
  .gantry__inner { flex-wrap: wrap; }
  .gantry__nav {
    display: none;
    width: 100%;
    border-top: 1px solid var(--hairline);
    padding-block: 0.75rem 1.25rem;
  }
  .gantry__nav--open { display: block; }
  .gantry__nav ul { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .gantry__link { display: block; padding: 0.6rem 0; font-size: var(--t-body); }

  .fixpoint { margin-top: 0; min-height: 0; }
  .fixpoint__inner { padding-top: clamp(3.5rem, 12vw, 5rem); padding-bottom: 3rem; }
  .fixpoint__copy { grid-column: 1 / -1; }
  .fixpoint__scrim {
    background:
      linear-gradient(to bottom, rgba(11, 14, 17, 0.86) 0%, rgba(11, 14, 17, 0.78) 50%, rgba(11, 14, 17, 0.94) 100%);
  }

  .odometer { grid-template-columns: minmax(0, 1fr); }
  .odometer__anchor { position: static; }

  .haul__leg { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .haul__text,
  .haul__figure,
  .haul__wire,
  .haul__leg--flip .haul__text,
  .haul__leg--flip .haul__figure { grid-column: 1 / -1; }
  .haul__leg--flip .haul__figure { order: 2; }
  .haul__wire { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; padding-top: 1.5rem; }

  .apron__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }

  .docket__body { grid-template-columns: minmax(0, 1fr); }
  .docket__toc {
    position: static;
    max-height: none;
    border-left: 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 1.5rem 0;
  }

  .handover { grid-template-columns: minmax(0, 1fr); }
  .handover__side { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; padding-top: 1.75rem; }

  .kitlist__entry { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .yardgrid__set { grid-template-columns: minmax(0, 1fr); }
  .yardgrid__tile:nth-child(1),
  .yardgrid__tile:nth-child(2),
  .yardgrid__tile:nth-child(3),
  .yardgrid__tile:nth-child(4),
  .yardgrid__tile:nth-child(5) { grid-column: 1 / -1; }
  .yardgrid__tile:nth-child(4) .yardgrid__photo { aspect-ratio: 4 / 3; }
  .fixpoint__strip ul { gap: 0.5rem 1.5rem; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .quadrant__set { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .quadrant__cell { border-left: 0; padding-inline: 0; }
  .quadrant__cell + .quadrant__cell { border-top: 1px solid var(--hairline); padding-top: 2rem; }
  .hardstand__set { grid-template-columns: minmax(0, 1fr); }
  .odometer__row { grid-template-columns: minmax(0, 1fr); }
  .control { display: block; text-align: center; }
  .control-row { flex-direction: column; align-items: stretch; }
  .headline-xl { letter-spacing: -0.02em; }
}

/* --- 21. Reduced motion and print ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .sweep { opacity: 1; transform: none; }
  .fixpoint__photo { animation: none; }
  .livedot { animation: none; }
}

@media print {
  .gantry, .apron, .fixpoint__photo, .fixpoint__scrim { display: none; }
  body { background: #ffffff; color: #000000; }
}