/* ==========================================================================
   Evercomm reference build - DATUM edition
   The site as a drawing set, not a page.

   Structure, which is the point of this edition:
     - There is no menu bar. Navigation is an index: a sheet index for the
       drawing you are on and the drawing set for the site, held in a rail on
       the board at desktop widths and in a :target overlay on a phone.
     - Every `main > section` is a discrete sheet: bounded, bordered, corner
       ticked, stamped with its own sheet number, separated from the next by a
       fold of exposed board rather than by a change of background colour.
     - The title block is pinned to the foot of the viewport, because that is
       what a title block does. It carries the live sheet reference.
     - Each sheet is split into an annotation gutter and a drawing area. Labels
       live in the gutter, outside the content column. Wide work breaks out.

   Colour is rationed: drafting ink on vellum, one line blue for geometry, red
   only for a revision or an error, green only for a verified state, and one
   deep blue plate for reverse-printed sheets.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/spacemono-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/spacemono-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* sheet and board */
  --vellum: #EDEFEA;
  --sheet: #F5F6F1;
  --sunk: rgba(19, 42, 62, .055);
  --wash: rgba(19, 42, 62, .032);

  /* ink */
  --ink: #132A3E;
  --text: #24384A;
  --muted: #4A5E71;
  --faint: #55697C;

  /* hairlines, drawn not bordered */
  --rule: rgba(19, 42, 62, .19);
  --rule-soft: rgba(19, 42, 62, .11);
  --rule-strong: rgba(19, 42, 62, .38);
  --tick: rgba(31, 111, 168, .55);

  /* graph grid on the board */
  --grid-min: rgba(14, 42, 71, .032);
  --grid-maj: rgba(14, 42, 71, .07);

  /* geometry */
  --blue: #1F6FA8;
  --blue-deep: #1A5F91;
  --blue-wash: rgba(31, 111, 168, .075);

  /* status, used sparingly */
  --red: #C0392B;
  --green: #1B6E51;
  --amber: #8A5A12;

  /* blueprint plate */
  --plate: #0E2A47;
  --plate-2: #0A2039;
  --cyan: #7FD8F5;

  /* tokens the shared content refers to inline */
  --brand: var(--blue);
  --brand-deep: var(--blue-deep);
  --brand-bright: var(--cyan);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* drawing-set geometry */
  --board: clamp(12px, 1.4vw, 26px);   /* board margin around the set */
  --fold: 20px;                        /* exposed board between two sheets */
  --rail: 260px;                       /* sheet index rail */
  --pad: clamp(1.05rem, .55rem + 1.7vw, 2rem);  /* padding inside a sheet */
  --gut: 132px;                        /* annotation gutter inside a sheet */
  --gutgap: 26px;
  --tblk-h: 48px;                      /* pinned title block */
  --gutter: 20px;                      /* generic inline padding */
  --wrap: 1260px;

  /* the corner ticks that mark every drawn boundary in this edition */
  --ticks:
    linear-gradient(var(--tick), var(--tick)) top left/12px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top left/1px 12px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top right/12px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top right/1px 12px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom left/12px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom left/1px 12px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right/12px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right/1px 12px no-repeat;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  scroll-padding-bottom: calc(var(--tblk-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* the board: vellum with a real graph grid, visible between the sheets */
body {
  margin: 0;
  padding-bottom: calc(var(--tblk-h) + var(--fold));
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.66;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--vellum);
  background-image:
    linear-gradient(to right, var(--grid-min) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-min) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-maj) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-maj) 1px, transparent 1px);
  background-size: 12px 12px, 12px 12px, 96px 96px, 96px 96px;
  background-attachment: fixed;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.18;
}
h1 {
  font-size: clamp(1.9rem, 1.15rem + 2.2vw, 2.85rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.032em;
}
h2 { font-size: clamp(1.35rem, 1.05rem + 1.05vw, 1.85rem); font-weight: 700; letter-spacing: -.026em; }
h3 { font-size: 1.0625rem; letter-spacing: -.014em; }
h4 { font-size: .9375rem; }

p { margin: 0 0 1rem; }
p:last-child, ul:last-child, ol:last-child, dl:last-child { margin-bottom: 0; }

a { color: var(--blue-deep); text-underline-offset: .17em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

ul, ol { margin: 0 0 1rem; padding-left: 1.1rem; }
li { margin-bottom: .3rem; }
strong { color: var(--ink); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
table { border-collapse: collapse; width: 100%; }
small { font-size: .8125rem; }
::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 0;
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -70px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 18px;
  font-family: var(--mono); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .12em; text-decoration: none;
  transition: top .15s ease;
}
.skip:focus { top: 8px; color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 880px; }
.nowrap { white-space: nowrap; }
.balance { text-wrap: balance; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .8125rem; letter-spacing: .01em; }

/* ==========================================================================
   1. THE ISSUE STRIP
   Which of the three issues of the set this is. Full width, above the board.
   ========================================================================== */
.ed {
  background: var(--plate-2); color: #C3D5E4;
  font-family: var(--mono); font-size: .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.ed__in {
  display: flex; align-items: center; gap: .6rem 1.4rem; flex-wrap: wrap;
  min-height: 36px; padding: 7px var(--board);
  max-width: 1560px; margin: 0 auto; width: 100%;
}
.ed__note { margin: 0; color: #94AEC6; letter-spacing: .01em; }
.ed__note strong { color: #E4EDF5; font-weight: 700; }
.ed__now { color: var(--cyan); font-weight: 700; }
.ed__switch { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.ed__lbl { color: #7593AF; letter-spacing: .14em; text-transform: uppercase; font-size: .625rem; }
.ed__opt, .ed__all {
  display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .55rem;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #C3D5E4; white-space: nowrap; text-decoration: none;
  font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
}
.ed__opt:hover, .ed__all:hover { border-color: var(--cyan); color: #fff; }
.ed__all { border-style: dashed; }
.ed__dot { width: 7px; height: 7px; border: 1px solid rgba(255, 255, 255, .5); }
.ed__opt--console .ed__dot { background: #10B981; }
.ed__opt--logbook .ed__dot { background: #F4EEE1; }
.ed__opt--datum .ed__dot { background: var(--cyan); }
.ed__opt--aurora .ed__dot { background: linear-gradient(135deg, #10B981, #4F7CFF); }
.ed__opt--flux .ed__dot { background: #C8F542; }
@media (max-width: 900px) {
  .ed__note { flex: 1 1 100%; font-size: .6875rem; }
  .ed__switch { margin-left: 0; }
  .ed__lbl { display: none; }
}

/* ==========================================================================
   2. THE TITLE BLOCK, pinned to the viewport
   ========================================================================== */
.tblk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: stretch;
  min-height: var(--tblk-h);
  font-family: var(--mono);
  background: var(--plate);
  border-top: 1px solid var(--cyan);
  box-shadow: 0 -5px 0 -4px rgba(19, 42, 62, .35);
}
.tblk__l { display: flex; flex: 1 1 auto; min-width: 0; margin: 0; }
.tblk__i {
  display: flex; flex-direction: column; justify-content: center;
  padding: .25rem .85rem; min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, .13);
}
.tblk__i dt {
  font-size: .5rem; letter-spacing: .2em; text-transform: uppercase;
  color: #7593AF; line-height: 1.4;
}
.tblk__i dd {
  margin: 0; font-size: .6875rem; line-height: 1.35; color: #DCE9F4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tblk__i--dwg { flex: 0 1 auto; min-width: 0; }
.tblk__i--dwg dd { font-weight: 700; color: #fff; }
.tblk__i--sh dd { color: #A9C0D4; }
.tblk__i--sh b { color: var(--cyan); font-size: .875rem; letter-spacing: .04em; }

/* the index control: the only way into the rail on a phone */
.tblk__open {
  display: none; align-items: center; gap: .5rem; flex: none;
  padding: 0 .9rem; text-decoration: none; color: #082033;
  background: var(--cyan); font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.tblk__open:hover { background: #fff; color: var(--plate); }
.tblk__bars {
  width: 13px; height: 9px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) top left/13px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center left/13px 1px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left/13px 1px no-repeat;
}

/* sheet stepper, added by script only when there is more than one sheet */
.tblk__step { display: flex; flex: none; margin-left: auto; }
.tblk__b {
  width: 40px; border: 0; border-left: 1px solid rgba(255, 255, 255, .13);
  background: none; color: #A9C0D4; cursor: pointer;
  font-family: var(--mono); font-size: .8125rem; line-height: 1;
}
.tblk__b:hover:not(:disabled) { background: rgba(127, 216, 245, .14); color: #fff; }
.tblk__b:disabled { color: #4C6784; cursor: default; }

@media (max-width: 1000px) { .tblk__open { display: inline-flex; } }
@media (max-width: 860px) { .tblk__i--x { display: none; } }
@media (max-width: 560px) {
  .tblk__i--dwg { display: none; }
  .tblk__i { padding-inline: .7rem; }
}
/* a short window gets a thinner block and only the fields that change */
@media (max-height: 520px) {
  :root { --tblk-h: 36px; }
  .tblk__i--x { display: none; }
  .tblk__i dt { font-size: .45rem; }
}

/* ==========================================================================
   3. THE BOARD: index rail beside the sheets
   ========================================================================== */
.set {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--fold);
  align-items: start;
  width: 100%; max-width: 1560px; margin: 0 auto;
  padding: var(--fold) var(--board) 0;
}
.sheets { min-width: 0; }
.sheets > * + * { margin-top: var(--fold); }

.idx {
  position: sticky; top: var(--fold);
  max-height: calc(100vh - var(--fold) * 2 - var(--tblk-h));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--ticks), var(--sheet);
  border: 1px solid var(--rule-strong);
  padding: 0 0 .9rem;
}
.idx__hd {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem var(--gutter) .75rem;
  border-bottom: 1px solid var(--rule-strong);
  box-shadow: 0 3px 0 -2px var(--rule);
  position: sticky; top: 0; z-index: 2;
  background: var(--sheet);
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--ink); text-decoration: none; min-width: 0;
}
.brand__mark { color: var(--blue); flex: none; }
.brand__id { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand__word { font-weight: 800; font-size: 1.0625rem; letter-spacing: -.03em; color: var(--ink); }
.brand__sub {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin-top: 2px;
}
.brand:hover { color: var(--ink); }
.brand:hover .brand__mark { color: var(--blue-deep); }

.idx__x {
  display: none; align-items: center; margin-left: auto; flex: none;
  padding: .35rem .6rem; border: 1px solid var(--rule-strong);
  font-family: var(--mono); font-size: .625rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; background: var(--vellum);
}
.idx__x:hover { border-color: var(--blue); color: var(--blue-deep); }

.idx__b { padding: .9rem var(--gutter) 0; }
.idx__h {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .625rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 .55rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule-strong);
}
.idx__n { margin-left: auto; font-weight: 400; color: var(--faint); letter-spacing: .1em; }
.idx__non { font-size: .8125rem; color: var(--muted); margin: 0; }
/* the fallback line is only for pages the builder found no sections on */
.pidx ~ .idx__non { display: none; }

/* the sheet index itself */
.pidx { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.pidx__i { margin: 0; }
.pidx__a {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr);
  column-gap: .55rem; align-items: baseline;
  padding: .45rem .45rem .45rem .4rem;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  border-left: 2px solid transparent;
}
.pidx__i:last-child .pidx__a { border-bottom: 0; }
.pidx__n {
  font-family: var(--mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .04em; color: var(--faint);
}
.pidx__l { font-size: .8125rem; font-weight: 700; letter-spacing: -.012em; }
.pidx__t {
  grid-column: 2; font-size: .75rem; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.pidx__a:hover { background: var(--blue-wash); border-left-color: var(--blue); color: var(--ink); }
.pidx__a:hover .pidx__n { color: var(--blue-deep); }
.pidx__a.is-current {
  background: var(--blue-wash); border-left-color: var(--blue);
}
.pidx__a.is-current .pidx__n, .pidx__a.is-current .pidx__l { color: var(--blue-deep); }

/* the drawing set */
.idx__b--set { padding-top: 1.4rem; }
.sidx__g + .sidx__g { margin-top: .8rem; }
.sidx__h {
  font-family: var(--mono); font-size: .5625rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 .2rem;
}
.sidx__l { list-style: none; margin: 0; padding: 0; }
.sidx__l li { margin: 0; }
.sidx__a {
  display: block; padding: .28rem .45rem .28rem .4rem;
  font-size: .8125rem; color: var(--text); text-decoration: none;
  border-left: 2px solid transparent;
}
.sidx__a:hover { background: var(--blue-wash); border-left-color: var(--rule-strong); color: var(--ink); }
.sidx__a.is-active {
  color: var(--blue-deep); font-weight: 700;
  background: var(--blue-wash); border-left-color: var(--blue);
}

.idx__ft {
  margin-top: 1.4rem; padding: 1rem var(--gutter) 0;
  border-top: 1px solid var(--rule-strong);
}
.idx__meta {
  font-family: var(--mono); font-size: .625rem; line-height: 1.8;
  color: var(--faint); margin: .7rem 0 0;
}
.idx__meta a { color: var(--muted); }

/* on a phone the rail is not a rail: it is the index overlay, opened from the
   title block and closed by following anything in it. No script involved. */
@media (max-width: 1000px) {
  .set { grid-template-columns: minmax(0, 1fr); }
  .idx {
    display: none;
    position: fixed; inset: 0; z-index: 120;
    max-height: none; padding-bottom: 3rem;
    background-color: var(--vellum);
    border: 0;
  }
  .idx:target { display: block; }
  .idx__hd { background: var(--vellum); }
  .idx__x { display: inline-flex; }
  .idx__b, .idx__ft { padding-inline: max(var(--gutter), var(--board)); }
  .pidx__a, .sidx__a { padding-block: .6rem; }
}

/* ==========================================================================
   4. SHEETS
   Every top-level section is one sheet: bounded, stamped, tick-cornered, and
   separated from the next by a fold of exposed board.
   ========================================================================== */
main { counter-reset: sheet; display: block; }

main > section {
  position: relative;
  counter-reset: part;
  background: var(--ticks), var(--sheet);
  border: 1px solid var(--rule-strong);
}
main > section[id] { counter-increment: sheet; }
main > * + * { margin-top: var(--fold); }

/* the sheet stamp, in the top corner of the gutter */
main > section::before {
  content: "Ref";
  position: absolute; top: 0; left: 0; z-index: 2;
  padding: .28rem .5rem .24rem;
  font-family: var(--mono); font-size: .5625rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
  background: var(--wash);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
main > section[id]::before {
  content: "SH " counter(sheet, decimal-leading-zero) " / " var(--sheet-count);
  color: var(--blue-deep);
}
main > .hero::before { content: "Cover"; }
main > .cta::before { content: "Issue"; }

/* alternate sheets are drawn on tracing stock: the board's grid shows through,
   which separates them without printing a band of colour across the page */
main > .sec--alt, main > .sec--sunk { background: var(--ticks), transparent; }
/* a doubled rule is how a drawing marks a heavier division in the set */
main > .sec--line { outline: 1px solid var(--rule); outline-offset: 4px; }

/* ---------- the gutter grid inside a sheet ---------- */
main .sec > .wrap {
  max-width: none;
  padding: calc(var(--pad) + 14px) var(--pad) var(--pad);
  display: grid;
  grid-template-columns: var(--gut) minmax(0, 1fr);
  column-gap: var(--gutgap);
  align-items: start;
}
main .sec--tight > .wrap {
  padding-block: calc(var(--pad) * .68 + 14px) calc(var(--pad) * .68);
}
main .sec > .wrap.wrap--narrow { max-width: calc(880px + var(--gut) + var(--gutgap)); }

/* the drawing area is the default; labels are lifted out into the gutter */
main .sec > .wrap > * { grid-column: 2; min-width: 0; }
main .sec > .wrap > .eyebrow { grid-column: 1; }

main .sec > .wrap > .sec-head {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid; column-gap: var(--gutgap);
  align-items: start;
}
main .sec > .wrap > .sec-head > * { grid-column: 2; min-width: 0; }
main .sec > .wrap > .sec-head > .eyebrow { grid-column: 1; grid-row: 1; }
main .sec > .wrap > .sec-head--split > div { display: contents; }

@supports not (grid-template-columns: subgrid) {
  main .sec > .wrap > .sec-head { display: block; grid-column: 2; }
  main .sec > .wrap > .sec-head--split > div { display: block; }
}

/* wide work is drawn across the full sheet, gutter included: schedules,
   figures, the stamped wordmark wall, section drawings and 4- and 5-up grids */
main .sec > .wrap > .tablewrap,
main .sec > .wrap > .wall,
main .sec > .wrap > .pipe,
main .sec > .wrap > .fig,
main .sec > .wrap > .layers,
main .sec > .wrap > .ladder,
main .sec > .wrap > .journey,
main .sec > .wrap > .grid--4,
main .sec > .wrap > .grid--5 { grid-column: 1 / -1; }

/* Some sheets label a two-column split rather than a section head. The label is
   two levels down, so it cannot be lifted by the grid; it is drawn into the
   gutter from where it sits instead. Only the leftmost column may annotate into
   the gutter, because only the leftmost column has one. */
main .sec > .wrap > .split > div:first-child,
main .sec > .wrap > .grid--sidebar > div:first-child { position: relative; }
main .sec > .wrap > .split > div:first-child > .eyebrow:first-child,
main .sec > .wrap > .grid--sidebar > div:first-child > .eyebrow:first-child {
  position: absolute; top: .1rem; left: calc(-1 * (var(--gut) + var(--gutgap)));
  width: var(--gut); margin: 0;
}

/* below the rail breakpoint the gutter would leave nothing for the drawing,
   so the sheet returns to a single column and labels sit above their content */
@media (max-width: 900px) {
  main .sec > .wrap,
  main .sec > .wrap > .sec-head { display: block; }
  main .sec > .wrap > .sec-head--split > div { display: block; }
  main .sec > .wrap > .split > div:first-child > .eyebrow:first-child,
  main .sec > .wrap > .grid--sidebar > div:first-child > .eyebrow:first-child {
    position: static; width: auto; margin: 0 0 .9rem;
  }
}

.sec-head { max-width: none; margin-bottom: clamp(1.3rem, 1rem + 1vw, 1.8rem); }
.sec-head > h2, .sec-head > div > h2 { max-width: 22ch; }
.sec-head--split > .lede { max-width: 62ch; }

/* ---------- the eyebrow: a gutter annotation with a dimension rule ---------- */
.eyebrow {
  position: relative; display: block;
  font-family: var(--mono); font-size: .625rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-deep);
  margin: 0 0 .9rem; padding-bottom: .5rem;
}
.eyebrow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  opacity: .5;
}

.lede { font-size: 1.0625rem; line-height: 1.62; color: var(--muted); max-width: 68ch; }
.lede--lg { font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem); color: var(--text); }
.strip__lead { font-size: .875rem; color: var(--muted); max-width: 90ch; margin: 0 0 .9rem; }

/* ==========================================================================
   5. PLATE SHEETS
   The cover of each drawing, the reverse-printed sheets inside it, and the
   closing issue sheet. Every token flips, so nested components invert without
   a special case, and the light-on-dark inline styles in the shared content
   stay legible wherever they land.
   ========================================================================== */
.hero, .sec--dark, .cta, .fig--dark, .hero + .pagenav {
  --ink: #FFFFFF;
  --text: #C3D5E4;
  --muted: #A9C0D4;
  --faint: #8CA5BC;
  --sheet: rgba(255, 255, 255, .045);
  --vellum: var(--plate);
  --wash: rgba(255, 255, 255, .05);
  --sunk: rgba(0, 0, 0, .18);
  --rule: rgba(255, 255, 255, .18);
  --rule-soft: rgba(255, 255, 255, .1);
  --rule-strong: rgba(255, 255, 255, .34);
  --tick: rgba(127, 216, 245, .65);
  --blue: var(--cyan);
  --blue-deep: var(--cyan);
  --blue-wash: rgba(127, 216, 245, .1);
  --brand: var(--cyan);
  --brand-deep: var(--cyan);
  --red: #F0A79E;
  --green: #6FD3AA;
  --amber: #E0A44A;
  color: var(--text);
}

main > .hero, main > .sec--dark, main > .cta, main > .hero + .pagenav {
  background:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0/12px 12px repeat,
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0/12px 12px repeat,
    linear-gradient(to right, rgba(255, 255, 255, .085) 1px, transparent 1px) 0 0/96px 96px repeat,
    linear-gradient(to bottom, rgba(255, 255, 255, .085) 1px, transparent 1px) 0 0/96px 96px repeat,
    var(--ticks),
    var(--plate);
  overflow: hidden;
}
/* the drawn frame, inset from the plate edge */
main > .hero::after, main > .sec--dark::after, main > .cta::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .14);
}
/* the one piece of motion in the edition: the cover frame draws itself in */
@media (prefers-reduced-motion: no-preference) {
  main > .hero::after { animation: draw-frame .55s ease-out both; }
}
@keyframes draw-frame {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.hero h1, .hero h2, .hero h3,
.sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4,
.cta h2 { color: #fff; }
.sec--dark strong, .hero strong, .cta strong { color: #fff; }
.hero a, .sec--dark a, .cta a { color: var(--cyan); }
.hero a:hover, .sec--dark a:hover, .cta a:hover { color: #fff; }

/* ---------- the cover sheet ---------- */
.hero > .wrap { max-width: none; padding-inline: var(--pad); }
.hero__in {
  position: relative;
  padding-block: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem) clamp(1.4rem, 1rem + 1.4vw, 2rem);
}
/* the cover's own strip: what this drawing is and how many sheets follow */
.hero__in::after {
  content: "Cover / " var(--sheet-count) " sheets follow / scale 1:1";
  display: block; margin-top: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  padding-top: .55rem; border-top: 1px solid rgba(255, 255, 255, .22);
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .2em;
  text-transform: uppercase; color: #7593AF;
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(1.5rem, 1rem + 2.8vw, 3.25rem); align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__sub {
  color: #DCE9F4; font-size: clamp(1.0625rem, .95rem + .55vw, 1.3125rem);
  line-height: 1.4; max-width: 30ch; margin-bottom: 1rem; font-weight: 600; letter-spacing: -.018em;
}
.hero__body { color: var(--text); max-width: 62ch; }
.hero--page .hero__in { padding-block: clamp(1.8rem, 1.4rem + 1.5vw, 2.5rem) clamp(1.2rem, 1rem + 1vw, 1.7rem); }
.hero--page h1 { font-size: clamp(1.7rem, 1.15rem + 1.7vw, 2.45rem); }
.hero .eyebrow { color: var(--cyan); }

.crumbs {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: #8CA5BC;
}
.crumbs li { margin: 0; display: flex; gap: .4rem; align-items: center; }
.crumbs li + li::before { content: "/"; opacity: .55; }
.crumbs a { color: #B7CCDE; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* ---------- the contents strip, printed on the foot of the cover ---------- */
main > .pagenav {
  position: relative;
  border: 1px solid var(--rule-strong);
  background: var(--ticks), transparent;
}
main > .hero + .pagenav { margin-top: 0; border-top: 0; }
.pagenav > .wrap {
  max-width: none; padding: 0 var(--pad);
  display: flex; align-items: center; gap: .9rem;
}
.pagenav > .wrap::before {
  content: "Contents"; flex: none;
  font-family: var(--mono); font-size: .5625rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
}
.pagenav ul {
  display: flex; gap: 0; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; min-width: 0;
}
.pagenav li { margin: 0; }
.pagenav a {
  display: block; padding: .6rem .75rem;
  font-family: var(--mono); font-size: .625rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.pagenav a:hover { color: var(--ink); background: var(--blue-wash); }
.pagenav a.is-active { color: var(--blue-deep); font-weight: 700; border-bottom-color: var(--blue); }
@media (max-width: 620px) { .pagenav > .wrap::before { display: none; } }

/* ---------- the dimension chain ---------- */
/* the stat rail on a cover is already a measured run, so it is drawn as one:
   a continuous line, a terminator tick at every division, values on the line */
.rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
}
.rail__i {
  position: relative; padding: .85rem .9rem 0 .8rem;
  border-top: 1px solid rgba(255, 255, 255, .34);
}
.rail__i::before {
  content: ""; position: absolute; left: 0; top: -5px; width: 1px; height: 11px;
  background: rgba(255, 255, 255, .55);
}
.rail__i:first-child { padding-left: 0; }
.rail__i:nth-child(4n)::after, .rail__i:last-child::after {
  content: ""; position: absolute; right: 0; top: -5px; width: 1px; height: 11px;
  background: rgba(255, 255, 255, .55);
}
.rail__k {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: #8CA5BC; margin: 0 0 .25rem;
}
.rail__v {
  margin: 0; font-weight: 700; color: #fff; font-size: .9375rem;
  line-height: 1.3; letter-spacing: -.015em;
}
@media (max-width: 760px) {
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail__i { padding-left: .8rem; }
  .rail__i:nth-child(2n+1) { padding-left: 0; }
  .rail__i:nth-child(4n)::after { content: none; }
  .rail__i:nth-child(2n)::after {
    content: ""; position: absolute; right: 0; top: -5px; width: 1px; height: 11px;
    background: rgba(255, 255, 255, .55);
  }
  .rail__i:nth-child(n+3) { margin-top: .9rem; }
}
@media (max-width: 400px) {
  .rail { grid-template-columns: 1fr; }
  .rail__i { padding-left: 0; margin-top: .7rem; }
  .rail__i:first-child { margin-top: 0; }
  .rail__i::after, .rail__i:nth-child(2n)::after { content: none !important; }
}

/* ---------- the closing issue sheet ---------- */
.cta > .wrap { max-width: none; padding-inline: var(--pad); }
.cta__in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4rem 2.5rem;
  align-items: center; padding-block: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
}
.cta p { color: var(--text); margin: 0; max-width: 62ch; }
@media (max-width: 800px) { .cta__in { grid-template-columns: 1fr; } }

/* ---------- the instrument panel, drawn on the plate ---------- */
.panel {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(6, 20, 36, .55);
}
.panel::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background: var(--ticks);
}
.panel__bar {
  display: flex; align-items: center; gap: .3rem; padding: .5rem .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05);
}
.panel__dot { width: 6px; height: 6px; border: 1px solid rgba(255, 255, 255, .38); }
.panel__title {
  font-family: var(--mono); font-size: .6875rem; color: #8CA5BC;
  margin-left: .45rem; letter-spacing: .06em;
}
.panel__badge {
  margin-left: auto; font-family: var(--mono); font-size: .625rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cyan);
  border: 1px solid rgba(127, 216, 245, .45); padding: .1rem .4rem;
}
.panel__body { padding: .85rem .85rem .95rem; }
.panel__q {
  font-family: var(--mono); font-size: .75rem; color: #C3D5E4;
  margin: 0 0 .8rem; line-height: 1.55; word-break: break-word;
}
.panel__prompt {
  color: var(--cyan); margin-right: .5rem; text-transform: uppercase; letter-spacing: .1em;
}
.panel__tbl { font-family: var(--mono); font-size: .6875rem; width: 100%; }
.panel__tbl th, .panel__tbl td {
  text-align: left; padding: .36rem .3rem; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.panel__tbl thead th {
  color: #8CA5BC; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; font-size: .5625rem;
  border-bottom-color: rgba(255, 255, 255, .3);
}
.panel__tbl td { color: #B7CCDE; }
.panel__tbl td:last-child, .panel__tbl th:last-child { text-align: right; }
.panel__tbl .is-total td {
  color: #fff; font-weight: 700; border-bottom: 0; padding-top: .5rem;
  border-top: 1px solid rgba(255, 255, 255, .3);
}
.panel__foot {
  font-family: var(--mono); font-size: .6875rem; color: #A9C0D4;
  margin: .7rem 0 0; line-height: 1.7;
}
.panel__ok { color: var(--green); margin-right: .35rem; }

/* ==========================================================================
   6. COMPONENTS drawn on a sheet
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 700; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .72rem 1.1rem; border-radius: 0;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.btn--primary {
  background: var(--blue-deep); color: #fff; border-color: var(--blue-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--ghost { border-color: var(--rule-strong); color: var(--ink); background: var(--sheet); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue-deep); }
.btn--onDark {
  border-color: rgba(255, 255, 255, .38); color: #fff; background: rgba(255, 255, 255, .05);
}
.btn--onDark:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(127, 216, 245, .08); }
/* on a plate the primary button becomes cyan ground with plate-dark text */
.hero .btn--primary, .sec--dark .btn--primary, .cta .btn--primary {
  background: var(--cyan); border-color: var(--cyan); color: #082033;
  box-shadow: inset 0 0 0 1px rgba(8, 32, 51, .2);
}
.hero .btn--primary:hover, .sec--dark .btn--primary:hover, .cta .btn--primary:hover {
  background: #fff; border-color: #fff; color: var(--plate);
}
.btn--sm { padding: .52rem .8rem; font-size: .6875rem; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }

/* a link that extends its leader line on hover */
.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-weight: 700; font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--blue-deep);
}
.link-arrow::after {
  content: ""; flex: none; width: 18px; height: 1px; background: currentColor;
  transition: width .16s ease;
}
.link-arrow:hover::after { width: 30px; }
.card__foot.link-arrow { display: flex; justify-content: flex-start; }
.ext { font-size: .8em; opacity: .7; }

/* ---------- grids ---------- */
.grid { display: grid; gap: 12px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.4rem, 1rem + 1.8vw, 2.5rem); }
@media (max-width: 1240px) {
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .grid--sidebar { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
}

/* a card is a drawn part: hairline edge, corner ticks, a part number stamped
   in the corner as sheet-part */
.card {
  position: relative;
  counter-increment: part;
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: 1.05rem 1.15rem 1.15rem;
  transition: border-color .14s ease;
}
.card::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background: var(--ticks);
}
.card::after {
  /* The " / \"\"" suffix gives the generated text empty alternative text, so a
     screen reader does not read a part number before every card's content. */
  content: counter(sheet, decimal-leading-zero) "-" counter(part, decimal-leading-zero) / "";
  position: absolute; top: .55rem; right: .7rem; pointer-events: none;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .12em;
  color: var(--faint);
}
.card--pad { padding: 1.4rem 1.4rem 1.5rem; }
.card--hl { border-color: var(--blue); background: var(--blue-wash); }
.card--hl::before { --tick: var(--blue); }
.card--link { text-decoration: none; color: inherit; display: block; }
.card--link:hover { border-color: var(--blue); color: inherit; }
.card--link:hover::before { --tick: var(--blue); }
.card h3 { margin-bottom: .3rem; }
.card p { font-size: .875rem; color: var(--muted); }
.card p strong { color: var(--ink); }
/* keep the first line clear of the part number in the corner */
.card > :first-child:not(.card__num) { padding-right: 2.8rem; }
/* The key is an annotation, set in the same register as the gutter labels.
   It is a <p>, so it has to out-specify .card p to keep that register. */
.card .card__k, .card__k {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
  margin: 0 0 .6rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--rule-soft);
}
/* same reason: a lede set inside a card is still a lede */
.card .lede { font-size: 1.0625rem; line-height: 1.62; color: var(--muted); }
.card .lede--lg { font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem); color: var(--text); }
.card__foot { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--rule-soft); }

/* a numbered card carries a dimension callout instead of a plain numeral */
.card__num {
  position: relative; display: inline-block; min-width: 2.9rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  color: var(--blue-deep); margin-bottom: .85rem; padding-bottom: .45rem;
}
.card__num::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--blue); opacity: .55;
}
.card__num::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2.5px; height: 6px;
  border-left: 1px solid var(--blue); border-right: 1px solid var(--blue);
}

/* ---------- ladder: a graduated scale ---------- */
.ladder {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--rule);
}
.ladder__i {
  position: relative; padding: 1.05rem 1.05rem 1.15rem;
  border-right: 1px solid var(--rule); background: var(--sheet);
}
.ladder__i:last-child { border-right: 0; }
.ladder__i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.ladder__i:nth-child(1)::before { background: rgba(31, 111, 168, .22); }
.ladder__i:nth-child(2)::before { background: rgba(31, 111, 168, .42); }
.ladder__i:nth-child(3)::before { background: rgba(31, 111, 168, .68); }
.ladder__i:nth-child(4)::before { background: var(--blue); }
.ladder__n {
  font-family: var(--mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; color: var(--faint); margin: 0;
}
.ladder__t { margin: .3rem 0 .35rem; font-size: 1rem; }
.ladder__d { font-size: .8125rem; color: var(--muted); margin: 0; }
@media (max-width: 900px) {
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder__i:nth-child(2n) { border-right: 0; }
  .ladder__i:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .ladder { grid-template-columns: 1fr; }
  .ladder__i { border-right: 0; border-bottom: 1px solid var(--rule); }
  .ladder__i:last-child { border-bottom: 0; }
}

/* ---------- journey: stations on a construction line ---------- */
.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.journey__i {
  position: relative; padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--rule); background: var(--sheet);
}
.journey__i::before {
  content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px;
  border-top: 1px solid var(--tick); border-left: 1px solid var(--tick);
}
.journey__i::after {
  content: ""; position: absolute; right: -12px; top: 50%; width: 12px; height: 1px;
  background: var(--rule-strong); z-index: 1;
}
.journey__i:last-child::after { display: none; }
.journey__s {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-deep); margin: 0;
}
.journey__i h3 { margin: .3rem 0 .3rem; font-size: 1rem; }
.journey__i p { margin: 0; font-size: .8125rem; color: var(--muted); }
@media (max-width: 900px) {
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey__i:nth-child(2n)::after { display: none; }
}
@media (max-width: 520px) {
  .journey { grid-template-columns: 1fr; }
  .journey__i::after { display: none; }
}

/* ---------- layer stack: a section drawing, keyed in its own gutter ---------- */
.layers { display: grid; gap: 8px; }
.layer {
  display: grid; grid-template-columns: var(--gut) minmax(0, 1fr) auto;
  gap: var(--gutgap); align-items: center;
  border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong);
  background: var(--sheet); padding: .8rem 1.05rem;
}
.layer--hl { border-left-color: var(--blue); background: var(--blue-wash); }
.layer__k {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
}
.layer__t { font-weight: 700; color: var(--ink); font-size: .9375rem; letter-spacing: -.015em; }
.layer__d { font-size: .8125rem; color: var(--muted); margin: .15rem 0 0; }
.layer__tag { white-space: nowrap; }
@media (max-width: 760px) {
  .layer { grid-template-columns: 1fr; gap: .3rem; }
  .layer__tag { display: none; }
}

/* ---------- pipeline figure ---------- */
.pipe { margin: 0; }
.pipe__row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  list-style: none; margin: 0; padding: 0;
}
.pipe__i {
  position: relative; margin: 0; padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--rule); background: var(--sheet);
}
.pipe__i--hl { border-color: var(--blue); background: var(--blue-wash); }
.pipe__i::after {
  content: ""; position: absolute; right: -12px; top: 50%; width: 12px; height: 1px;
  background: var(--rule-strong); z-index: 1;
}
.pipe__i:last-child::after { display: none; }
.pipe__k {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin: 0;
}
.pipe__i h3 { margin: .35rem 0 .3rem; font-size: 1rem; }
.pipe__i p:last-child { font-size: .8125rem; color: var(--muted); margin: 0; }
.pipe__base {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  margin-top: 12px; padding: .75rem 1.05rem;
  border: 1px solid var(--rule); border-top: 2px solid var(--blue);
  background: var(--blue-wash);
}
.pipe__badge {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-deep); font-weight: 700;
}
.pipe__base p { margin: 0; font-size: .875rem; color: var(--muted); flex: 1 1 320px; }
.pipe figcaption, .fig figcaption {
  font-family: var(--mono); font-size: .6875rem; color: var(--faint);
  margin-top: .7rem; letter-spacing: .04em; line-height: 1.6;
}
.pipe figcaption::before, .fig figcaption::before {
  content: "FIG. "; color: var(--blue-deep); font-weight: 700; letter-spacing: .12em;
}
@media (max-width: 900px) {
  .pipe__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe__i:nth-child(2n)::after { display: none; }
}
@media (max-width: 520px) {
  .pipe__row { grid-template-columns: 1fr; }
  .pipe__i::after { display: none; }
}

/* ---------- tables: drawing schedules ---------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--sheet); }
.tbl { font-size: .875rem; min-width: 640px; }
.tbl caption {
  text-align: left; padding: .8rem 1rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--faint); border-bottom: 1px solid var(--rule); line-height: 1.6;
}
.tbl th, .tbl td {
  text-align: left; padding: .65rem 1rem; border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.tbl thead th {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); font-weight: 400; white-space: nowrap;
  background: var(--wash); border-bottom: 1px solid var(--rule-strong);
  padding-block: .5rem;
}
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-bottom: 0; }
.tbl tbody th { font-weight: 700; color: var(--ink); }
.tbl td { color: var(--muted); }
.tbl tbody tr:hover td, .tbl tbody tr:hover th { background: var(--blue-wash); }
.tbl .yes { color: var(--green); font-weight: 700; }
.tbl .no { color: var(--faint); }
.tbl__hl th, .tbl__hl td { background: var(--blue-wash) !important; }
.tbl__hl th:first-child { box-shadow: inset 2px 0 0 var(--blue); }

/* ---------- chips, stamps, badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin: 0; }
.chips li { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em;
  padding: .22rem .5rem; border: 1px solid var(--rule);
  color: var(--muted); background: var(--sheet); white-space: nowrap;
}
.chip--brand { border-color: var(--blue); color: var(--blue-deep); background: var(--blue-wash); }
.chip--dark {
  border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .05); color: #C3D5E4;
}

/* the wordmark wall: stamped boxes across the full sheet */
.wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0; }
.wall__i {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 58px; padding: .55rem .5rem; margin: 0;
  border: 1px solid var(--rule); background: var(--sheet);
  font-size: .8125rem; font-weight: 600; color: var(--text); letter-spacing: -.012em;
}
@media (max-width: 900px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .5625rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; padding: .16rem .4rem; border: 1px solid currentColor;
  vertical-align: middle;
}
.badge--soon { color: var(--amber); }

/* ---------- quote: an annotation on a dimension line ---------- */
.quote { position: relative; padding-left: 1.3rem; margin: 0; }
.quote::before {
  content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem; width: 1px;
  background: var(--blue);
}
.quote::after {
  content: ""; position: absolute; left: -3px; top: .35rem; bottom: .35rem; width: 7px;
  background:
    linear-gradient(var(--blue), var(--blue)) top left/7px 1px no-repeat,
    linear-gradient(var(--blue), var(--blue)) bottom left/7px 1px no-repeat;
}
.quote p {
  font-size: clamp(1.0625rem, .95rem + .6vw, 1.3125rem); line-height: 1.42;
  color: var(--ink); font-weight: 500; letter-spacing: -.022em;
}
.quote footer {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}

/* ---------- accordion: a folded schedule ---------- */
.acc { border: 1px solid var(--rule); background: var(--sheet); }
.acc details { border-bottom: 1px solid var(--rule-soft); }
.acc details:last-child { border-bottom: 0; }
.acc summary {
  cursor: pointer; padding: .75rem 1.05rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: .6rem; list-style: none;
  font-size: .9375rem; letter-spacing: -.015em;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-family: var(--mono); font-size: .8125rem; line-height: 1;
  color: var(--blue-deep); border: 1px solid var(--rule); padding: .22rem .38rem;
}
.acc details[open] summary::after { content: "\2212"; }
.acc summary:hover { background: var(--blue-wash); }
.acc__body { padding: 0 1.05rem 1.05rem; font-size: .875rem; color: var(--muted); }
.acc__body p:first-child { margin-top: 0; }

/* ---------- notes: a margin annotation, keyed in its own gutter ---------- */
/* The body of a note is inline text, so the note itself must stay a block box:
   made a grid, every bare string and every link inside it becomes its own
   grid item and the sentence comes apart. The heading is drawn out into the
   gutter instead, and only where the note is wide enough to have one. */
.note {
  position: relative;
  border: 1px solid var(--rule); border-left: 2px solid var(--ink);
  padding: .85rem 1.05rem; background: var(--sheet); font-size: .875rem;
}
.note::before {
  content: ""; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px;
  border-top: 1px solid var(--tick); border-right: 1px solid var(--tick);
}
.note--brand { border-left-color: var(--blue); }
.note--amber { border-left-color: var(--amber); }
.note p:last-child { margin-bottom: 0; }
.note__h {
  display: block; margin-bottom: .3rem;
  font-family: var(--mono); font-size: .625rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  line-height: 1.5;
}
/* a note drawn across the sheet keys itself in the gutter */
main .sec > .wrap > .note > .note__h {
  position: absolute; top: .8rem; margin: 0;
  /* the note's own 2px keyline sits between its padding box and the gutter */
  left: calc(-1 * (var(--gut) + var(--gutgap)) - 2px);
  width: var(--gut);
}
@media (max-width: 900px) {
  main .sec > .wrap > .note > .note__h {
    position: static; width: auto; margin-bottom: .3rem;
  }
}

/* ---------- figures ---------- */
.fig {
  border: 1px solid var(--rule); background: var(--sheet);
  padding: .9rem; box-shadow: inset 0 0 0 1px var(--rule-soft);
}
.fig svg { width: 100%; height: auto; font-family: var(--sans); }
.fig svg .m { font-family: var(--mono); }
.fig--dark { background: var(--plate-2); border-color: rgba(255, 255, 255, .2); box-shadow: none; }

/* ---------- people ---------- */
/* people are not parts, so they carry no part number */
.person { text-align: left; }
.person::after { content: none; }
.person > :first-child:not(.card__num) { padding-right: 0; }
.person__av {
  width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--mono); font-size: .8125rem; font-weight: 700; letter-spacing: .06em;
  background: var(--blue-wash); color: var(--blue-deep);
  border: 1px solid var(--blue); margin: 0 0 .7rem;
}
.person h3 { margin-bottom: .1rem; font-size: .9375rem; }
.person__r { font-size: .8125rem; color: var(--muted); margin: 0; }
.person__o {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin: .35rem 0 0;
}

/* ---------- forms ---------- */
.form { display: grid; gap: .85rem; }
.field { display: grid; gap: .3rem; }
.field label {
  font-family: var(--mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.field .req { color: var(--red); }
.field .hint { font-size: .75rem; color: var(--faint); margin: 0; }
.input, .select, .textarea {
  font-family: var(--sans); font-size: .9375rem; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: 0;
  padding: .6rem .7rem; width: 100%;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--blue); outline: 2px solid var(--blue); outline-offset: -2px;
}
.textarea { min-height: 116px; resize: vertical; line-height: 1.6; }
.field--err .input, .field--err .select, .field--err .textarea { border-color: var(--red); }
.err {
  font-family: var(--mono); font-size: .6875rem; color: var(--red);
  margin: 0; letter-spacing: .04em;
}
.err:empty { display: none; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.consent { display: flex; gap: .55rem; align-items: flex-start; font-size: .8125rem; color: var(--muted); }
.consent input { margin-top: .25rem; accent-color: var(--blue); }
.formmsg {
  border: 1px solid var(--rule); border-left: 2px solid var(--red);
  background: var(--sheet); padding: .8rem 1rem; font-size: .875rem;
}
.formmsg--ok { border-left-color: var(--green); }

/* ---------- lists ---------- */
/* the tick is a survey point: a small cross, not a bullet */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.ticks li {
  position: relative; padding-left: 1.35rem; font-size: .875rem;
  color: var(--muted); margin: 0;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px;
  background:
    linear-gradient(var(--blue), var(--blue)) center/9px 1px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center/1px 9px no-repeat;
  opacity: .8;
}
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.5rem; }
@media (max-width: 640px) { .ticks--2 { grid-template-columns: 1fr; } }

/* a schedule field: the name in its own column, the value beside it */
.deflist { display: grid; gap: 0; margin: 0; }
.deflist > div {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: .1rem .9rem;
  padding: .5rem 0; border-bottom: 1px solid var(--rule-soft);
}
.deflist > div:first-child { border-top: 1px solid var(--rule); }
.deflist > div:last-child { border-bottom: 0; }
.deflist dt {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); margin: .2rem 0 0;
}
.deflist dd { margin: 0; font-size: .875rem; color: var(--text); line-height: 1.55; }
@media (max-width: 520px) { .deflist > div { grid-template-columns: 1fr; } }

.office { font-style: normal; font-size: .875rem; color: var(--muted); line-height: 1.65; }

/* ---------- split layouts ---------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 1rem + 2vw, 2.75rem); align-items: start;
}
.split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
@media (max-width: 1000px) {
  .split, .split--wide-left { grid-template-columns: 1fr; }
}
.sticky { position: sticky; top: calc(var(--fold) + 8px); }
@media (max-width: 1000px) { .sticky { position: static; } }

/* ==========================================================================
   7. THE ISSUE AND REVISION SHEET
   The last sheet in the set. It does not repeat the pinned title block: that
   carries the live sheet reference, this carries the set-level record.
   ========================================================================== */
.ftr {
  position: relative;
  background: var(--ticks), var(--sheet);
  border: 1px solid var(--rule-strong);
  outline: 1px solid var(--rule); outline-offset: 4px;
}
.ftr::before {
  content: "Rev";
  position: absolute; top: 0; left: 0;
  padding: .28rem .5rem .24rem;
  font-family: var(--mono); font-size: .5625rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red);
  background: var(--wash);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.ftr__in { padding: calc(var(--pad) + 14px) var(--pad) var(--pad); }

.tblock {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0; margin: 0 0 1.1rem;
  border: 1px solid var(--rule);
}
.tblock__f { padding: .55rem .7rem; border-right: 1px solid var(--rule); min-width: 0; }
.tblock__f:last-child { border-right: 0; }
.tblock dt {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .2rem;
}
.tblock dd {
  margin: 0; font-size: .8125rem; font-weight: 700; color: var(--ink);
  letter-spacing: -.012em; line-height: 1.35;
}
.tblock__key {
  font-family: var(--mono); font-size: .625rem; font-weight: 400;
  letter-spacing: .06em; color: var(--blue-deep);
}
@media (max-width: 1000px) {
  .tblock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tblock__f:nth-child(3n) { border-right: 0; }
  .tblock__f:nth-child(-n+3) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 520px) {
  .tblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tblock__f { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .tblock__f:nth-child(2n) { border-right: 0; }
  .tblock__f:nth-child(n+5) { border-bottom: 0; }
}

.revs { font-family: var(--mono); font-size: .6875rem; table-layout: fixed; }
.revs caption {
  text-align: left; padding-bottom: .45rem;
  font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint);
}
.revs th, .revs td {
  text-align: left; padding: .4rem .6rem .4rem 0;
  border-bottom: 1px solid var(--rule-soft); vertical-align: top;
}
.revs thead th {
  font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); font-weight: 400; border-bottom: 1px solid var(--rule-strong);
}
.revs td { color: var(--muted); line-height: 1.6; }
.revs tbody tr:last-child th, .revs tbody tr:last-child td { border-bottom: 0; }
.revs th:first-child, .revs td:first-child { width: 42px; color: var(--red); font-weight: 700; }
.revs th:nth-child(2), .revs td:nth-child(2) { width: 62px; }
.revs__by { width: 82px; }
@media (max-width: 620px) { .revs__by { display: none; } }

.ftr__note {
  font-family: var(--mono); font-size: .6875rem; color: var(--faint);
  line-height: 1.7; margin: 1.1rem 0 0; padding-top: .8rem;
  border-top: 1px solid var(--rule);
  max-width: 82ch;
}
.ftr__bottom {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--rule-strong);
  margin-top: 1rem; padding-top: .85rem;
}
.ftr__bottom p {
  margin: 0; font-family: var(--mono); font-size: .6875rem;
  color: var(--faint); letter-spacing: .02em;
}
.ftr__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ftr__meta a { color: var(--muted); text-decoration: none; }
.ftr__meta a:hover { color: var(--blue-deep); text-decoration: underline; }

/* ==========================================================================
   8. PRINT
   On paper the pinned title block and the index rail are not needed: the
   sheets themselves are the drawing.
   ========================================================================== */
@media print {
  .ed, .idx, .tblk, .pagenav { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
  .set { display: block; padding: 0; }
  main > section { break-inside: avoid; }
  .hero, .sec--dark, .cta, main > .hero, main > .sec--dark, main > .cta {
    background: #fff !important; color: #000; background-image: none !important;
  }
  main > .hero::after, main > .sec--dark::after, main > .cta::after { display: none; }
  .hero h1, .hero h2, .sec--dark h2, .cta h2 { color: #000; }
  .hero__body, .hero__sub, .cta p, .sec--dark p { color: #222; }
}