/* ==========================================================================
   THE TWENTY FINTECH LTD - conduit.css
   Naming universe: CONDUIT. Every structural class is a noun borrowed from
   physical infrastructure (the things that carry a flow) and applied to
   financial infrastructure. terminus, junction, gauge, inlet, strand,
   crossing, manifest, derating, plot, stack, instrument, schedule, tap.
   Convention: block, block__element, block--variant. Held throughout.

   Art direction: LIGHT surface. HEAVY monospace. SERIF display.
   No photography. FLAT decoration. Zero corner radius everywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Measured WCAG 2.1 contrast ratios (sRGB relative luminance), computed:
     ink   #15171B on paper #F4F1EA = 15.91:1   AAA
     ink   #15171B on sunk  #E9E4D8 = 14.15:1   AAA
     mid   #4B4F57 on paper         =  7.29:1   AAA
     mid   #4B4F57 on sunk          =  6.48:1   AAA
     deep  #0F3A5C on paper         = 10.46:1   AAA
     deep  #0F3A5C on sunk          =  9.30:1   AAA
     sig   #9C3311 on paper         =  6.43:1   AAA (large) / AA (body)
     sig   #9C3311 on sunk          =  5.72:1   AA
     paper #F4F1EA on ink           = 15.91:1   AAA
     paper #F4F1EA on deep          = 10.46:1   AAA
     white #FFFFFF on deep          = 11.80:1   AAA
     white #FFFFFF on sig           =  7.25:1   AAA
   rule #CFC8B8 is decorative hairline only; it never carries meaning that
   is not also carried by text or spacing. Focus rings use deep and sig,
   both far above the 3:1 non-text threshold against every surface used.
   -------------------------------------------------------------------------- */

:root {
  --paper: #F4F1EA;
  --sunk: #E9E4D8;
  --ink: #15171B;
  --mid: #4B4F57;
  --deep: #0F3A5C;
  --sig: #9C3311;
  --rule: #CFC8B8;
  --rule-firm: #15171B;
  --white: #FFFFFF;

  /* Type scale. 1.25 minor third off a 17px root, capped so the serif
     display never exceeds a comfortable single-screen measure at 360px. */
  --t-xs: 0.735rem;
  --t-sm: 0.845rem;
  --t-base: 1rem;
  --t-md: 1.16rem;
  --t-lg: 1.42rem;
  --t-xl: 1.86rem;
  --t-2xl: 2.42rem;
  --t-3xl: 3.15rem;
  --t-4xl: clamp(2.6rem, 6.4vw, 4.35rem);

  --face-display: "Bodoni Moda", "Times New Roman", Times, serif;
  --face-text: "Spectral", Georgia, "Times New Roman", serif;
  --face-mono: "Azeret Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* One corner radius system: zero. There is no second value. */
  --corner: 0;

  --step-1: 0.5rem;
  --step-2: 0.85rem;
  --step-3: 1.35rem;
  --step-4: 2.1rem;
  --step-5: 3.4rem;
  --step-6: 5.2rem;
  --step-7: 7.4rem;

  --gauge: 74rem;
  --gauge-narrow: 45rem;
  --gauge-wide: 84rem;

  --hair: 1px solid var(--rule);
  --firm: 2px solid var(--ink);
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */

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

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--t-base);
  line-height: 1.62;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }

p { margin: 0 0 var(--step-3); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--step-3); padding-left: 1.35rem; }
ul:last-child, ol:last-child { margin-bottom: 0; }
li { margin-bottom: 0.4rem; }

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

strong, b { font-weight: 600; }

abbr[title] { text-decoration: underline dotted; cursor: help; }

hr { border: 0; border-top: var(--hair); margin: var(--step-4) 0; }

::selection { background: var(--deep); color: var(--paper); }

/* Focus. Visible on every interactive element, on every surface. */
:focus-visible {
  outline: 3px solid var(--sig);
  outline-offset: 2px;
}
.run--sunk :focus-visible,
.tenor :focus-visible { outline-color: var(--deep); }
.junction :focus-visible,
.tap--live:focus-visible { outline-color: var(--paper); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. TYPE ROLES
   -------------------------------------------------------------------------- */

.readout {
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: 0.8em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.readout--plain { text-transform: none; letter-spacing: 0.02em; font-weight: 500; }

.tbc {
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: 0.02em;
  color: var(--sig);
  background: var(--sunk);
  border-bottom: 2px solid var(--sig);
  padding: 0.1em 0.4em;
  display: inline;
}

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

.notice {
  font-family: var(--face-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.62;
  color: var(--mid);
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   4. SHUNT (skip link)
   -------------------------------------------------------------------------- */

.shunt {
  position: absolute;
  left: var(--step-3);
  top: -100vh;
  z-index: 90;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.75rem 1.15rem;
  text-decoration: none;
  border-radius: var(--corner);
}
.shunt:focus {
  top: var(--step-3);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   5. GAUGE (width constraint) and RUN (vertical section rhythm)
   -------------------------------------------------------------------------- */

.gauge {
  width: 100%;
  max-width: var(--gauge);
  margin-inline: auto;
  padding-inline: var(--step-3);
}
.gauge--narrow { max-width: var(--gauge-narrow); }
.gauge--wide { max-width: var(--gauge-wide); }

.run { padding-block: var(--step-6); }
.run--tight { padding-block: var(--step-5); }
.run--slim { padding-block: var(--step-4); }
.run--open { padding-block: var(--step-7); }
.run--sunk { background: var(--sunk); }
.run--topline { border-top: var(--hair); }
.run--ink { background: var(--ink); color: var(--paper); }
.run--ink a { color: var(--paper); }
.run--ink .notice { color: #C8C4BB; }

/* --------------------------------------------------------------------------
   6. TERMINUS (site header)
   -------------------------------------------------------------------------- */

.terminus {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: var(--hair);
}

.terminus__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-3);
  min-height: 4.4rem;
}

.terminus__mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  padding-block: 0.35rem;
}
.terminus__mark:hover { color: var(--deep); }

.terminus__glyph {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-md);
  letter-spacing: -0.03em;
  color: var(--sig);
  align-self: center;
}

.terminus__word {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: 0.01em;
}

.terminus__suffix {
  font-family: var(--face-mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
}

.terminus__nav { display: none; }

.terminus__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: var(--step-3);
}
.terminus__list li { margin: 0; }

.terminus__link {
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: border-color 120ms linear, color 120ms linear;
}
.terminus__link:hover { color: var(--sig); border-bottom-color: var(--sig); }
.terminus__link[aria-current="page"] { border-bottom-color: var(--ink); }

.terminus__toggle {
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  border: var(--firm);
  border-radius: var(--corner);
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  transition: background-color 100ms linear, color 100ms linear;
}
.terminus__toggle:hover { background: var(--ink); color: var(--paper); }

.terminus__drop {
  display: none;
  border-top: var(--hair);
  background: var(--sunk);
}
.terminus__drop[data-open="true"] { display: block; }
.terminus__droplist {
  list-style: none;
  margin: 0; padding: var(--step-2) 0;
}
.terminus__droplist li { margin: 0; border-bottom: var(--hair); }
.terminus__droplist li:last-child { border-bottom: 0; }
.terminus__droplink {
  display: block;
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 0.85rem 0;
}
.terminus__droplink:hover { color: var(--sig); }

@media (min-width: 62rem) {
  .terminus__nav { display: block; }
  .terminus__toggle { display: none; }
  .terminus__drop { display: none !important; }
}

/* --------------------------------------------------------------------------
   7. FAMILY A - INLET (opening block: single column, mono slug, serif title)
   -------------------------------------------------------------------------- */

.inlet { padding-block: var(--step-6) var(--step-5); }

.inlet__slug {
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sig);
  margin: 0 0 var(--step-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.inlet__slug::after {
  content: "";
  flex: 1 1 3rem;
  height: 2px;
  background: var(--sig);
  min-width: 2rem;
}

.inlet__title {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-4xl);
  line-height: 1.03;
  letter-spacing: -0.018em;
  max-width: 19ch;
  margin: 0 0 var(--step-3);
}

.inlet__deck {
  font-size: var(--t-md);
  line-height: 1.6;
  max-width: 54ch;
  color: var(--ink);
}

.inlet__note {
  margin-top: var(--step-3);
  max-width: 62ch;
  font-family: var(--face-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.65;
  color: var(--mid);
  border-left: 3px solid var(--rule);
  padding-left: var(--step-2);
}

.inlet__rule {
  margin: var(--step-5) 0 0;
  border: 0;
  border-top: var(--firm);
}

/* --------------------------------------------------------------------------
   8. TAP (buttons) and PROBE (inline forward link)
   -------------------------------------------------------------------------- */

.tapset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step-2) var(--step-3);
  margin-top: var(--step-4);
}

.tap {
  display: inline-block;
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.5rem;
  border: var(--firm);
  border-radius: var(--corner);
  background: var(--paper);
  color: var(--ink);
  transition: background-color 100ms linear, color 100ms linear;
}
.tap:hover { background: var(--ink); color: var(--paper); }

.tap--live {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--white);
}
.tap--live:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.tap--signal {
  background: var(--sig);
  border-color: var(--sig);
  color: var(--white);
}
.tap--signal:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

.probe {
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  color: var(--deep);
  text-decoration: none;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 0.15rem;
  transition: border-color 120ms linear, color 120ms linear;
}
.probe:hover { color: var(--sig); border-bottom-color: var(--sig); }
.probe::after { content: " \2192"; }

/* --------------------------------------------------------------------------
   9. FAMILY B - TENOR (one centred sentence on a band, hairline top and foot)
   -------------------------------------------------------------------------- */

.tenor {
  border-top: var(--firm);
  border-bottom: var(--firm);
  padding-block: var(--step-5);
  text-align: center;
}

.tenor__line {
  font-family: var(--face-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  max-width: 27ch;
  margin-inline: auto;
  margin-bottom: 0;
}

.tenor__source {
  margin-top: var(--step-3);
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
}

/* --------------------------------------------------------------------------
   10. FAMILY C - STRANDSET (numbered full-width rows, mono index at left)
   -------------------------------------------------------------------------- */

.strandset {
  border-top: var(--firm);
  margin-top: var(--step-4);
}

.strand {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--step-2);
  padding-block: var(--step-4);
  border-bottom: var(--hair);
}
.strand:last-child { border-bottom: var(--firm); }

.strand__index {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  color: var(--sig);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.strand__name {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin-bottom: var(--step-2);
}

.strand__body { max-width: 62ch; color: var(--mid); }
.strand__body strong { color: var(--ink); }

.strand__tag {
  margin-top: var(--step-2);
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--deep);
  display: inline-block;
  border: 1px solid var(--deep);
  border-radius: var(--corner);
  padding: 0.25rem 0.55rem;
}

@media (min-width: 48rem) {
  .strand {
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: var(--step-3);
    column-gap: var(--step-4);
  }
  .strand__index { padding-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   11. FAMILY D - CROSSING (asymmetric: sticky anchor left, stacked body right)
   -------------------------------------------------------------------------- */

.crossing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--step-4);
}

.crossing__anchor { align-self: start; }

.crossing__label {
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sig);
  margin: 0 0 var(--step-2);
}

.crossing__title {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: var(--step-3);
}

/* Grid child that holds the prose side of a .crossing block. Needs an explicit
   min-width:0 so a long <code> string or a wide table cannot force the grid
   track wider than its share and push the page into horizontal overflow. */
.crossing__body { min-width: 0; }

.crossing__aside {
  font-family: var(--face-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.65;
  color: var(--mid);
  border-top: var(--hair);
  padding-top: var(--step-2);
  margin-top: var(--step-3);
}

.crossing__block { border-top: var(--hair); padding-top: var(--step-3); margin-bottom: var(--step-4); }
.crossing__block:first-child { border-top: var(--firm); }
.crossing__block:last-child { margin-bottom: 0; }

.crossing__head {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--step-2);
}

.crossing__text { max-width: 60ch; color: var(--mid); }
.crossing__text strong { color: var(--ink); }

@media (min-width: 56rem) {
  .crossing {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--step-6);
  }
  .crossing__anchor { position: sticky; top: 6.5rem; }
}

/* --------------------------------------------------------------------------
   12. FAMILY E - MANIFEST (key and value disclosure list, hairline rows)
   -------------------------------------------------------------------------- */

.manifest {
  margin: var(--step-4) 0 0;
  border-top: var(--firm);
}

.manifest__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding-block: var(--step-2);
  border-bottom: var(--hair);
}
.manifest__row:last-child { border-bottom: var(--firm); }

.manifest__key {
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 0;
}

.manifest__val {
  margin: 0;
  font-size: var(--t-base);
  color: var(--ink);
}

.manifest__val--mono {
  font-family: var(--face-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

@media (min-width: 44rem) {
  .manifest__row {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--step-3);
    align-items: baseline;
  }
}

/* --------------------------------------------------------------------------
   13. FAMILY F - DERATING (declared limits: bordered block, marker list)
   -------------------------------------------------------------------------- */

.derating {
  border: var(--firm);
  border-radius: var(--corner);
  background: var(--paper);
  padding: var(--step-4);
}

.derating__head {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sig);
  margin: 0 0 var(--step-2);
}

.derating__intro { max-width: 62ch; margin-bottom: var(--step-3); }

.derating__list { list-style: none; margin: 0; padding: 0; }

.derating__item {
  position: relative;
  padding-left: 2.1rem;
  padding-block: var(--step-2);
  border-top: var(--hair);
  color: var(--mid);
  margin: 0;
}
.derating__item:first-child { border-top: 0; padding-top: 0; }
.derating__item::before {
  content: "\00D7";
  position: absolute;
  left: 0;
  top: var(--step-2);
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-md);
  line-height: 1.3;
  color: var(--sig);
}
.derating__item:first-child::before { top: 0; }
.derating__item strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   14. FAMILY G - PLOT (flat CSS and SVG diagram, no photography)
   -------------------------------------------------------------------------- */

.plot { margin-top: var(--step-4); }

.plot__frame {
  border: var(--firm);
  border-radius: var(--corner);
  background: var(--paper);
  padding: var(--step-4) var(--step-3);
  overflow-x: auto;
}

.plot__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-width: 0;
}

.plot__node {
  border: 1px solid var(--ink);
  border-radius: var(--corner);
  padding: var(--step-3);
  background: var(--paper);
}
.plot__node--ours {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--white);
}
.plot__node--ours .plot__nodekey { color: var(--white); }
.plot__node--ours .plot__nodetext { color: #DCE6EE; }

.plot__nodekey {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sig);
  margin: 0 0 0.45rem;
}

.plot__nodename {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.14;
  margin: 0 0 0.5rem;
}

.plot__nodetext {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--mid);
}

.plot__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--step-2);
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-lg);
  color: var(--sig);
  line-height: 1;
}
.plot__link::before { content: "\2193"; }

.plot__caption {
  margin-top: var(--step-3);
  font-family: var(--face-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.65;
  color: var(--mid);
  max-width: 66ch;
}

@media (min-width: 54rem) {
  .plot__track {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
  }
  .plot__link { padding: 0 var(--step-2); }
  .plot__link::before { content: "\2192"; }
}

/* --------------------------------------------------------------------------
   15. FAMILY H - STACK (disclosure list, JS driven)
   -------------------------------------------------------------------------- */

.stack { border-top: var(--firm); margin-top: var(--step-4); }

.stack__item { border-bottom: var(--hair); }
.stack__item:last-child { border-bottom: var(--firm); }

.stack__trigger {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--step-3);
  background: none;
  border: 0;
  border-radius: var(--corner);
  padding: var(--step-3) 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.28;
  transition: color 120ms linear;
}
.stack__trigger:hover { color: var(--sig); }

.stack__sign {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-md);
  color: var(--sig);
  flex: 0 0 auto;
  line-height: 1;
}
.stack__trigger[aria-expanded="true"] .stack__sign::before { content: "\2212"; }
.stack__trigger[aria-expanded="false"] .stack__sign::before { content: "+"; }

.stack__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 220ms ease;
}
.stack__panel[data-open="true"] { max-height: 70rem; }

.stack__inner {
  padding: 0 0 var(--step-4);
  max-width: 64ch;
  color: var(--mid);
}
.stack__inner strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   16. FAMILY I - ROUTESET (contact routes, two up, never three)
   -------------------------------------------------------------------------- */

.routeset {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--firm);
  margin-top: var(--step-4);
}

.route {
  padding-block: var(--step-4);
  border-bottom: var(--hair);
}

.route__label {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sig);
  margin: 0 0 var(--step-2);
}

.route__name {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.15;
  margin: 0 0 var(--step-2);
}

.route__text { color: var(--mid); max-width: 46ch; margin-bottom: var(--step-2); }

.route__addr {
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
  word-break: break-word;
  color: var(--deep);
}

@media (min-width: 50rem) {
  .routeset {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--step-5);
  }
  .route { border-bottom: var(--hair); }
}

/* --------------------------------------------------------------------------
   17. FAMILY J - MARGINAL (hanging annotation)
   -------------------------------------------------------------------------- */

.marginal {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--step-2);
  border-left: 3px solid var(--sig);
  padding-left: var(--step-3);
  margin-block: var(--step-4);
}

.marginal__label {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sig);
  margin: 0;
}

.marginal__text { margin: 0; max-width: 62ch; color: var(--mid); }

@media (min-width: 56rem) {
  .marginal {
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: var(--step-4);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   18. SECTION HEADINGS (shared)
   -------------------------------------------------------------------------- */

.runhead { max-width: 60ch; }

.runhead__label {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sig);
  margin: 0 0 var(--step-2);
}

.runhead__title {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--step-3);
}

.runhead__text { color: var(--mid); max-width: 58ch; }

/* --------------------------------------------------------------------------
   19. INSTRUMENT (legal document shell) and SCHEDULE (tables)
   -------------------------------------------------------------------------- */

.instrument { padding-block: var(--step-5) var(--step-6); }

.instrument__masthead { border-bottom: var(--firm); padding-bottom: var(--step-4); }

.instrument__kind {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sig);
  margin: 0 0 var(--step-2);
}

.instrument__title {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 var(--step-3);
}

.instrument__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-2) var(--step-4);
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 0;
  list-style: none;
  padding: 0;
}
.instrument__meta li { margin: 0; }

.instrument__recital {
  margin-top: var(--step-4);
  border-left: 3px solid var(--rule);
  padding-left: var(--step-3);
  max-width: 66ch;
  color: var(--mid);
}

.instrument__toc {
  margin-top: var(--step-5);
  border: var(--firm);
  border-radius: var(--corner);
  padding: var(--step-3) var(--step-4) var(--step-4);
  background: var(--sunk);
}

.instrument__toctitle {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 var(--step-2);
}

.instrument__toclist {
  list-style: none;
  margin: 0; padding: 0;
  columns: 1;
  column-gap: var(--step-5);
}
.instrument__toclist li {
  margin: 0;
  break-inside: avoid;
  border-bottom: 1px solid var(--rule);
}
.instrument__toclist a {
  display: block;
  padding: 0.45rem 0;
  font-family: var(--face-mono);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.instrument__toclist a:hover { color: var(--sig); }
.instrument__toclist a[data-here="true"] { font-weight: 800; color: var(--sig); }

@media (min-width: 46rem) { .instrument__toclist { columns: 2; } }
@media (min-width: 68rem) { .instrument__toclist { columns: 3; } }

.instrument__body { margin-top: var(--step-5); }

.instrument__sec { margin-bottom: var(--step-5); scroll-margin-top: 6rem; }

.instrument__sec > h2 {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 var(--step-3);
  padding-top: var(--step-3);
  border-top: var(--firm);
}

.instrument__sec h3 {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: var(--step-4) 0 var(--step-2);
}

.instrument__sec h4 {
  font-family: var(--face-text);
  font-weight: 600;
  font-size: var(--t-base);
  margin: var(--step-3) 0 var(--step-1);
}

.instrument__sec p,
.instrument__sec li { max-width: 74ch; }

.instrument__role {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: 0.62em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--deep);
  border-radius: var(--corner);
  padding: 0.25em 0.5em;
  vertical-align: middle;
  white-space: nowrap;
}
.instrument__role--proc { background: var(--sig); }

.schedule__wrap {
  overflow-x: auto;
  border: var(--firm);
  border-radius: var(--corner);
  margin-block: var(--step-3) var(--step-4);
  -webkit-overflow-scrolling: touch;
}

.schedule {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
  line-height: 1.5;
  background: var(--paper);
}

.schedule caption {
  caption-side: top;
  text-align: left;
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink);
  padding: 0.65rem var(--step-2);
}

.schedule th,
.schedule td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem var(--step-2);
  border-bottom: 1px solid var(--rule);
}

.schedule thead th {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--sunk);
  border-bottom: var(--firm);
  color: var(--ink);
}

.schedule tbody th {
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  color: var(--ink);
  width: 13rem;
}

.schedule tbody tr:last-child th,
.schedule tbody tr:last-child td { border-bottom: 0; }

.schedule td { color: var(--mid); }

.instrument__back {
  display: inline-block;
  margin-top: var(--step-2);
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deep);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.instrument__back:hover { color: var(--sig); border-bottom-color: var(--sig); }

/* --------------------------------------------------------------------------
   20. JUNCTION (footer). The statutory disclosure block inside it is byte
   identical on every page of this site.
   -------------------------------------------------------------------------- */

.junction {
  background: var(--ink);
  color: var(--paper);
  border-top: 4px solid var(--sig);
  padding-block: var(--step-5) var(--step-4);
}

.junction__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--step-4);
  padding-bottom: var(--step-4);
  border-bottom: 1px solid #3A3D44;
}

.junction__word {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.1;
  margin: 0 0 var(--step-2);
  color: var(--paper);
}

.junction__blurb {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: #CFCBC2;
  max-width: 42ch;
  margin: 0;
}

.junction__navtitle {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8D9199;
  margin: 0 0 var(--step-2);
}

.junction__list { list-style: none; margin: 0; padding: 0; }
.junction__list li { margin-bottom: 0.55rem; }

.junction__link {
  font-family: var(--face-mono);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms linear, color 120ms linear;
}
.junction__link:hover { color: #F0A88A; border-bottom-color: #F0A88A; }

.junction__disclosure {
  padding-top: var(--step-4);
}

.junction__discname {
  font-family: var(--face-mono);
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8D9199;
  margin: 0 0 var(--step-2);
}

.junction__line {
  font-family: var(--face-mono);
  font-weight: 500;
  font-size: var(--t-xs);
  line-height: 1.75;
  color: #CFCBC2;
  margin: 0;
  max-width: 78ch;
}
.junction__line b { color: var(--paper); font-weight: 800; }
.junction__line a { color: var(--paper); }
.junction__line a:hover { color: #F0A88A; }

.junction__stamp {
  margin-top: var(--step-3);
  font-family: var(--face-mono);
  font-weight: 500;
  font-size: var(--t-xs);
  color: #8D9199;
}

@media (min-width: 50rem) {
  .junction__top { grid-template-columns: minmax(0, 2fr) 1fr 1fr; gap: var(--step-5); }
}

/* --------------------------------------------------------------------------
   21. MOTION INVENTORY
   Four transitions exist on this site. Each is listed with its reason.
     1. .terminus__link border-color 120ms
        Reason: the nav underline has to arrive fast enough to feel like a
        response to the pointer, and a colour change moves no layout.
     2. .tap / .terminus__toggle background 100ms
        Reason: a flat button with zero radius needs a state change that is
        unmistakably a button press affordance rather than a text link.
     3. .stack__panel max-height 220ms
        Reason: an answer that appears instantly reads as a page jump; a
        short slide tells the reader where the new text came from.
     4. .probe border-color 120ms
        Reason: keeps the forward link consistent with the nav underline so
        the whole site has one hover language.
   There is no scroll-triggered, parallax or entrance animation anywhere.
   -------------------------------------------------------------------------- */

@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;
  }
  .stack__panel[data-open="true"] { max-height: none; }
}

/* --------------------------------------------------------------------------
   22. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .terminus, .shunt, .instrument__toc, .tapset { display: none; }
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }
  .junction { background: #FFFFFF; color: #000000; border-top: 2px solid #000000; }
  .junction__line, .junction__blurb, .junction__stamp { color: #000000; }
  .schedule__wrap { overflow: visible; }
  .schedule { min-width: 0; }
}