/* ==========================================================================
   VAIR LTD / vairworks.co.uk
   datasheet.css  Rev. A  2026-08-07

   The site is a datasheet, not a landing page. Hairline rules, numbered
   sections, key/value rows, revision marks. Monospace carries the texture;
   the serif appears only where a printed document would set a title.

   Naming universe: printed document plus build-system vocabulary.
   Blocks: manifest, headplate, frontmatter, plate, keytable, brief,
   procedure, schematic, pairs, notes, dispatch, imprint, well, press,
   contents, provision. Convention: BEM, block__element--modifier, held
   throughout. No block name is shared with a sibling site.

   Contrast ratios below are calculated from WCAG 2.1 relative luminance,
   not estimated. See section 1.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --paper:       #FCFBF7;  /* page surface */
  --panel:       #F1EFE8;  /* inset blocks, zebra, code wells. 1.11:1 on
                              paper, so it is texture and never a text
                              boundary. */

  /* Type. Ratios: value on paper / value on panel. */
  --ink:         #14161A;  /* 17.49 / 15.74  AAA */
  --ink-2:       #4A5058;  /* 7.86  / 7.08   AAA */
  --ink-3:       #6E6959;  /* 5.30  / 4.77   AA on BOTH surfaces.
                              The quiet tone. Deliberately clears 4.5 on
                              --panel as well as --paper, so a footnote or a
                              caption can sit on either without a caveat. */

  /* Non-text */
  --rule:        #C9C4B6;  /* 1.68 hairline rules, table borders. Decorative. */
  --rule-strong: #857F6B;  /* 3.87 / 3.48 input and button edges, focus ring.
                              Clears the 3:1 non-text minimum on both
                              surfaces, not just on paper. */

  /* The single accent. Under 3% of any viewport. */
  --signal:      #8F3520;  /* 7.52 on paper; paper on signal is also 7.52,
                              so it doubles as a filled button. */

  /* Faces */
  --serif: "Newsreader", "Iowan Old Style", Palatino, "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale. Fixed px, ratio about 1.25 above a 15px mono base. */
  --t-micro: 11px;
  --t-small: 13px;
  --t-body:  15px;
  --t-lead:  18px;
  --t-h3:    21px;
  --t-h2:    30px;
  --t-h1:    44px;

  /* Corner radius. One system, three tokens, no exceptions. */
  --r-0:    0px;    /* every structural surface */
  --r-1:    2px;    /* interactive elements only */
  --r-full: 999px;  /* the 7px status dot, and nothing else */

  /* Grid and spacing */
  --measure: 1152px;
  --gutter:  24px;
  --margin:  32px;
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

  --bar: 56px;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

@media (max-width: 720px) {
  :root { --margin: 20px; --s9: 64px; --s8: 48px; }
}


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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 24px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-body);
  line-height: 1.65;
  letter-spacing: 0;
  font-feature-settings: "zero" 1;
  -webkit-font-smoothing: antialiased;
  /* Defensive only. Every wide element (tables, code wells, the schematic,
     the nav) already scrolls inside its own container; this catches any
     single unbreakable token a future edit might introduce. */
  overflow-x: hidden;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;   /* the serif is never bold; 500 is the ceiling */
  margin: 0;
}

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

ul, ol { margin: 0 0 var(--s4); padding-left: 1.35em; }
li { margin-bottom: var(--s2); }
li:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: var(--signal); text-underline-offset: 3px; }
a:hover { color: var(--signal); }

strong, b { font-weight: 700; }

code, pre, samp, kbd { font-family: var(--mono); font-feature-settings: "zero" 1; }

img, svg { max-width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s7) 0;
}

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

/* Focus is never animated. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--rule-strong);
  outline-offset: 2px;
}


.jump {
  position: absolute;
  left: var(--margin); top: -100px;
  z-index: 200;
  background: var(--signal);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--r-1);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.jump:focus { top: 10px; color: var(--paper); }


/* --------------------------------------------------------------------------
   3. TYPE HELPERS
   -------------------------------------------------------------------------- */

.t-micro {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

.t-small { font-size: var(--t-small); line-height: 1.6; }

.t-lead {
  font-family: var(--serif);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
}

.t-prose { max-width: 62ch; }

.tbc {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--signal);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  padding: 1px 6px;
  display: inline-block;
  white-space: normal;
}


/* --------------------------------------------------------------------------
   4. LAYOUT SHELL
   -------------------------------------------------------------------------- */

.manifest {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: var(--margin);
  padding-right: var(--margin);
}

.manifest--narrow { max-width: 880px; }


/* --- 4.1 Masthead. Family 1: sticky 56px bar. --------------------------- */

.headplate {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--bar);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.headplate__inner {
  height: var(--bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.headplate__mark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.headplate__mark:hover { color: var(--ink); }

.headplate__glyph { display: block; flex: none; align-self: center; }

.headplate__word {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
}

.headplate__reg {
  font-size: var(--t-micro);
  color: var(--ink-3);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

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

/* Nav underline: background-size 0 to 100%, 140ms. */
.headplate__link {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 140ms ease-out, color 140ms ease-out;
}
.headplate__link:hover,
.headplate__link:focus-visible { color: var(--signal); background-size: 100% 1px; }
.headplate__link[aria-current="page"] { color: var(--signal); background-size: 100% 1px; }

/* The nav is allowed to scroll inside the 56px bar. At 360px five uppercase
   mono links plus the wordmark sit within about 3px of the viewport, which is
   too close to trust across font fallbacks, so any overflow is absorbed here
   rather than by the page. */
.headplate__inner > nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.headplate__inner > nav::-webkit-scrollbar { display: none; }

@media (max-width: 860px) {
  .headplate__reg { display: none; }
  .headplate__links { gap: var(--s4); }
  .headplate__link { letter-spacing: 0.08em; }
}
@media (max-width: 520px) {
  .headplate__inner { gap: var(--s3); }
  .headplate__links { gap: 10px; }
  .headplate__link { font-size: 10px; letter-spacing: 0.02em; }
  .headplate__word { font-size: 13px; letter-spacing: 0.1em; }
}


/* --- 4.2 Section plate. 104px top padding, 1px top rule, margin index. --- */

.plate {
  position: relative;
  padding-top: var(--s9);
  padding-bottom: var(--s2);
}

.plate::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease) 60ms;
}
.plate.is-drawn::before { transform: scaleX(1); }

/* No-JS and reduced-motion fallbacks: the rule is simply there. */
.no-js .plate::before { transform: scaleX(1); }


/* The marginal index column is 144px, not 88px. The longest eyebrow the site
   uses, "04 / Reference architecture", measures 127px on its widest word at
   11px/0.14em; at 88px the body's overflow-wrap broke it mid-word. The
   procedure spine below matches this track so the two stay aligned. */
.plate__head {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  gap: 0 var(--gutter);
  margin-bottom: var(--s6);
}

.plate__index {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  padding-top: 10px;
  /* Wrap between words, never inside one. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.plate__title {
  font-size: var(--t-h2);
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.plate__intro {
  grid-column: 2;
  margin-top: var(--s4);
  max-width: 62ch;
  color: var(--ink-2);
}

.plate__body { display: block; }

@media (max-width: 720px) {
  .plate__head { grid-template-columns: 1fr; gap: var(--s2); }
  .plate__index { padding-top: 0; }
  .plate__intro { grid-column: 1; }
}

/* Section reveal: 12px translateY plus opacity, 220ms, once. */
.reveal { opacity: 0; transform: translateY(12px); }
.js .reveal { transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }


/* --------------------------------------------------------------------------
   5. FRONT MATTER. Family A: document header, full bleed type, no columns.
   -------------------------------------------------------------------------- */

.frontmatter { padding-top: var(--s8); padding-bottom: var(--s2); }

.frontmatter__rev {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  color: var(--signal);
  margin-bottom: var(--s5);
}
.frontmatter__rev span:not(:first-child) { color: var(--ink-3); }

.frontmatter__title {
  font-size: var(--t-h1);
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.frontmatter__name {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-2);
  margin-bottom: var(--s4);
  max-width: none;
}

.frontmatter__abstract {
  font-family: var(--serif);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
  margin-top: var(--s5);
}

.frontmatter__strip {
  margin-top: var(--s8);
  border-top: 1px solid var(--rule);
}

.metarow {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 var(--gutter);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.metarow__key {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.metarow__val { color: var(--ink); font-size: var(--t-body); }
.metarow__val a { color: var(--ink); }

@media (max-width: 640px) {
  .metarow { grid-template-columns: 1fr; gap: var(--s1); }
}

/* Status dot. The only looping motion on the site, and the only use of
   --r-full anywhere in the stylesheet. */
.pulse {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: var(--signal);
  margin-right: 8px;
  vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(143, 53, 32, 0.45);
  animation: pulse 2.4s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { box-shadow: 0 0 0 0 rgba(143, 53, 32, 0.45); }
  to   { box-shadow: 0 0 0 2px rgba(143, 53, 32, 0.18); }
}


/* --------------------------------------------------------------------------
   6. KEYTABLE. Family B: ruled spec table.
   -------------------------------------------------------------------------- */

.tablewell {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: var(--r-0);
}

.keytable {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--t-small);
  text-align: left;
}

.keytable--wide { min-width: 780px; }

.keytable caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: var(--s3);
}

.keytable th,
.keytable td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.keytable thead th {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

.keytable tbody th {
  font-weight: 500;
  color: var(--ink);
}

.keytable td { color: var(--ink-2); }

.keytable tbody tr:nth-child(even) { background: var(--panel); }

/* Table row hover: tracking aid for dense ruled rows. */
.keytable tbody tr { transition: background-color 100ms linear; }
.keytable tbody tr:hover { background: var(--panel); }

.keytable__idx {
  width: 88px;
  min-width: 88px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--signal);
  padding-top: 15px;
}

.keytable tbody tr:nth-child(even) th,
.keytable tbody tr:nth-child(even) td { background: transparent; }

/* Zebra and hover both paint the row, so the cell paddings need the fill to
   sit on the row itself; keep cells transparent. */
.keytable th:first-child,
.keytable td:first-child { padding-left: var(--s3); }
.keytable th:last-child,
.keytable td:last-child { padding-right: var(--s3); }

.scrollnote {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--s3);
}
@media (min-width: 860px) { .scrollnote { display: none; } }


/* --------------------------------------------------------------------------
   7. BRIEF. Family C: ruled card grid, 4/4/4 of 12.
   -------------------------------------------------------------------------- */

.briefs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

.brief {
  border: 1px solid var(--rule);
  border-radius: var(--r-0);
  padding: var(--s5);
  background: var(--paper);
}

.brief__index {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--signal);
  display: block;
  margin-bottom: var(--s4);
}

.brief__name {
  font-size: var(--t-h3);
  line-height: 1.3;
  font-weight: 500;
  margin-bottom: var(--s3);
}

.brief__body { color: var(--ink-2); font-size: var(--t-small); }

.brief__foot {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 900px) { .briefs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .briefs { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   8. WELL. Code specimen on --panel.
   -------------------------------------------------------------------------- */

.well {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-0);
  padding: var(--s5);
  overflow-x: auto;
  margin-top: var(--s6);
}

.well__cap {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-bottom: var(--s4);
}

.well pre {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.75;
  color: var(--ink);
  white-space: pre;
}

.well__note {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-2);   /* the well sits on --panel; keep it at 7.08 */
}

.well .c { color: var(--ink-2); }
.well .k { color: var(--signal); }


/* --------------------------------------------------------------------------
   9. PROCEDURE. Family D: stepped spine, 1px vertical rule at x=88px.
   -------------------------------------------------------------------------- */

.procedure {
  position: relative;
  padding-left: 0;
}

.procedure::before {
  content: "";
  position: absolute;
  left: 144px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--rule);
}

.procedure__step {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  gap: 0 var(--gutter);
  padding: var(--s5) 0;
}
.procedure__step:first-child { padding-top: 0; }
.procedure__step:last-child { padding-bottom: 0; }

.procedure__ord {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--signal);
  position: relative;
  padding-top: 6px;
}
.procedure__ord::after {
  content: "";
  position: absolute;
  right: -12px; top: 12px;
  width: 24px; height: 1px;
  background: var(--rule);
}

.procedure__name {
  font-size: var(--t-h3);
  line-height: 1.3;
  font-weight: 500;
  margin-bottom: var(--s2);
}

.procedure__body { color: var(--ink-2); max-width: 62ch; }

@media (max-width: 720px) {
  .procedure::before { left: 0; }
  .procedure__step { grid-template-columns: 1fr; gap: var(--s2); padding-left: var(--s5); }
  .procedure__ord::after { display: none; }
}


/* --------------------------------------------------------------------------
   10. SCHEMATIC. Family E: the one split, 7/5 asymmetric.
   -------------------------------------------------------------------------- */

.schematic {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s7);
  align-items: start;
}

.schematic__figure {
  border: 1px solid var(--rule);
  border-radius: var(--r-0);
  background: var(--paper);
  padding: var(--s5);
  margin: 0;
  min-width: 0;
}

.schematic__figure svg { display: block; width: 100%; height: auto; }

.schematic__caption {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-2);
}

.schematic__notes { list-style: none; margin: 0; padding: 0; min-width: 0; }

.schematic__note {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 var(--s3);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.schematic__note:first-child { border-top: 1px solid var(--rule-strong); }

.schematic__ref {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--signal);
  padding-top: 4px;
}

.schematic__text { font-size: var(--t-small); color: var(--ink-2); }
.schematic__text b { color: var(--ink); font-weight: 500; }

@media (max-width: 860px) {
  .schematic { grid-template-columns: 1fr; gap: var(--s6); }
}


/* --------------------------------------------------------------------------
   11. PAIRS. Family F: definition list, two-column key/value rows.
   -------------------------------------------------------------------------- */

.pairs {
  margin: 0;
  border-top: 1px solid var(--rule-strong);
}

.pairs__row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0 var(--gutter);
  border-bottom: 1px solid var(--rule);
  padding: var(--s4) 0;
  align-items: baseline;
  min-height: 32px;
}

.pairs__key {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.pairs__val { margin: 0; font-size: var(--t-body); color: var(--ink); }
.pairs__val .t-small { color: var(--ink-2); display: block; margin-top: var(--s1); }

@media (max-width: 640px) {
  .pairs__row { grid-template-columns: 1fr; gap: var(--s1); }
}


/* --------------------------------------------------------------------------
   12. NOTES. Family G: footnote block, two columns to one.
   -------------------------------------------------------------------------- */

.notes {
  columns: 2;
  column-gap: var(--s7);
  font-size: var(--t-small);
  color: var(--ink-3);         /* 5.30 on paper. See token note. */
  list-style: none;
  margin: 0;
  padding: 0;
}

.notes__item {
  break-inside: avoid;
  margin-bottom: var(--s5);
  padding-left: 26px;
  position: relative;
}

.notes__ref {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--signal);
  font-variant-position: super;
}

.notes__item b { color: var(--ink-2); font-weight: 500; }

@media (max-width: 720px) { .notes { columns: 1; } }


/* --------------------------------------------------------------------------
   13. DISPATCH. Centred single column, 480px, one filled mailto.
   -------------------------------------------------------------------------- */

.dispatch {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: var(--s7);
}

.dispatch__title {
  font-size: var(--t-h2);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin-bottom: var(--s4);
}

.dispatch__body { color: var(--ink-2); font-size: var(--t-small); }

.dispatch__act { margin-top: var(--s5); }

.press {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: var(--r-1);
  border: 1px solid var(--signal);
  background: var(--signal);
  color: var(--paper);
  text-decoration: none;
  transition: transform 90ms var(--ease);
}
.press:hover { color: var(--paper); background: #7C2D1B; border-color: #7C2D1B; }
.press:active { transform: translateY(1px); }


.dispatch__route {
  margin-top: var(--s5);
  font-size: var(--t-small);
  color: var(--ink-2);
}


/* --------------------------------------------------------------------------
   14. IMPRINT. Colophon footer, --panel strip, three mono columns.
   -------------------------------------------------------------------------- */

.imprint {
  margin-top: var(--s9);
  background: var(--panel);
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--s7);
  padding-bottom: var(--s7);
}

.imprint__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6) var(--gutter);
}

.imprint__col h2 {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);   /* the footer sits on --panel; keep it at 7.08 */
  margin-bottom: var(--s4);
}

.imprint__col p,
.imprint__col li {
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.7;
}

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

.imprint__col a { color: var(--ink-2); }
.imprint__col a:hover { color: var(--signal); }

.imprint__legal {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-2);
  line-height: 1.7;
}

@media (max-width: 780px) {
  .imprint__cols { grid-template-columns: 1fr; gap: var(--s5); }
}


/* --------------------------------------------------------------------------
   15. LEGAL DOCUMENTS. contents + provision.
   -------------------------------------------------------------------------- */

.docmast { padding-top: var(--s8); padding-bottom: var(--s6); }

.docmast__kicker {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: var(--s4);
}

.docmast__title {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--s5);
}

.docmast__meta {
  border-top: 1px solid var(--rule);
  margin-top: var(--s6);
}

.contents {
  border: 1px solid var(--rule);
  border-radius: var(--r-0);
  padding: var(--s5);
  margin: var(--s7) 0;
  background: var(--paper);
}

.contents__title {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s4);
}

.contents__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--s7);
  font-size: var(--t-small);
}

.contents__list li { break-inside: avoid; margin-bottom: var(--s2); }

.contents__list a {
  color: var(--ink-2);
  text-decoration: none;
  background-image: linear-gradient(var(--rule), var(--rule));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}
.contents__list a:hover { color: var(--signal); background-image: linear-gradient(var(--signal), var(--signal)); }

.contents__num {
  color: var(--signal);
  display: inline-block;
  min-width: 2.6em;
}

@media (max-width: 640px) { .contents__list { columns: 1; } }

.provision {
  padding-top: var(--s7);
  border-top: 1px solid var(--rule);
  margin-top: var(--s7);
}
.provision:first-of-type { margin-top: 0; }

.provision__title {
  font-size: var(--t-h2);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin-bottom: var(--s5);
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0 var(--gutter);
  align-items: baseline;
}

.provision__num {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--signal);
}

.provision__body { color: var(--ink-2); max-width: 74ch; }
.provision__body h3 {
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--ink);
  margin: var(--s6) 0 var(--s3);
}
.provision__body h4 {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--s5) 0 var(--s3);
}
.provision__body .tablewell { margin: var(--s5) 0; max-width: 100%; }
.provision__body .keytable { font-size: var(--t-small); }

.rolebadge {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  padding: 2px 8px;
  margin-bottom: var(--s4);
}

.callout {
  border-left: 2px solid var(--signal);
  background: var(--panel);
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
  color: var(--ink-2);
  font-size: var(--t-small);
  border-radius: var(--r-0);
}

.backtop {
  display: inline-block;
  margin-top: var(--s4);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.backtop:hover { color: var(--signal); }

@media (max-width: 720px) {
  .provision__title { grid-template-columns: 1fr; gap: var(--s2); }
}


/* --------------------------------------------------------------------------
   16. MOTION SUPPRESSION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .plate::before { transform: scaleX(1); }
  .pulse { animation: none; box-shadow: 0 0 0 2px rgba(143, 53, 32, 0.18); }
}


/* --------------------------------------------------------------------------
   17. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .headplate, .jump, .press { display: none; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
  .plate::before { transform: scaleX(1); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}