/* ==========================================================================
   Evercomm reference build - LOGBOOK edition

   A bound document, not a page. The architecture, in five decisions:

   1. No menu bar. A contents rail down the left carries the whole document at
      once, with the current sheet marked. On a phone the same markup becomes a
      front-matter <details>, open on arrival, working with no script.
   2. The body is a measure with a margin. Every .wrap is a two-column grid:
      a reading column of about 63 characters, and a margin column beside it
      carrying everything that is not the argument (part numbers, eyebrows,
      card keys, rail metadata, asides, captions, notes, pull quotes). Wide
      tables, figures and wordmark walls break out and take the full width,
      because a table squeezed into 63 characters is worse than no marginalia.
   3. No bands. Sections run continuously, separated by rules and by a part
      number set in the margin, counted through the sheet.
   4. Card grids are not grids. .grid--2/3/4/5 set as numbered ruled entries,
      one per row, each with its key or number in the margin.
   5. A running head, one line, pinned: document, sheet, part in view.

   The visual language is unchanged and deliberately so: Warden's cream stock
   and naval ink, Libre Caslon Display for the wordmark and the h1 only,
   Newsreader for prose, IBM Plex Mono for every label and value, letterspaced
   small-caps eyebrows, hairline rules instead of cards, no radius, no shadow,
   signal colour only where something has a status, and the assistive highlight
   (fast warm-in, slow warm-out, ease-out, never a spring).

   Signature element, once per sheet: the graduated measure at the foot of the
   title block. Its ticks thicken from coarse on the left to fine on the right,
   ending in an amber index mark. That is the granular shift drawn as an
   instrument scale. It draws itself once on load and never again.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Libre Caslon Display";
  src: url("/assets/fonts/librecaslondisplay-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-var-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-var-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plexmono-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plexmono-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* paper and ink */
  --paper: #F4EEE1;
  --paper-raised: #FAF6EC;
  --paper-sunk: #EDE6D6;
  --paper-deep: #E6DECB;
  --rule: #DBD2BF;
  --rule-strong: #C4B9A2;
  --ink: #19232F;
  --ink-soft: #2A3644;
  --ink-muted: #5A6472;
  --ink-faint: #6E6659;
  --notsounded: #8B8377;

  /* signal, used only where something has a state */
  --clear: #2E7D52;
  --clear-deep: #276845;
  --clear-bright: #5FBE8E;
  --caution: #BE851E;
  --caution-deep: #8A5F14;
  --hazard: #B03A30;
  --hazard-bright: #E08A80;

  /* the ink plate: the two places this edition still goes dark */
  --band: #19232F;
  --band-raised: #212D3C;
  --band-rule: rgba(244, 238, 225, .18);
  --band-rule-soft: rgba(244, 238, 225, .1);
  --band-ink: #F1EBDD;
  --band-muted: #A8B3C1;
  --band-faint: #7F8B9A;

  /* the assistive highlight: soft warm light, never a hard selection colour */
  --bloom: rgba(190, 133, 30, .13);
  --bloom-strong: rgba(190, 133, 30, .2);
  --bloom-band: rgba(190, 133, 30, .16);

  /* aliases the shared content markup writes inline, mapped into this palette */
  --brand: var(--ink);
  --brand-bright: var(--clear-bright);
  --brand-deep: var(--clear-deep);
  --amber: #D6A03A;
  --muted: var(--ink-muted);
  --faint: var(--ink-faint);
  --line: var(--rule);
  --info: #2F5D8C;

  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --serif: "Newsreader", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* the page geometry: rail, measure, margin. The measure holds the reading
     column at about 64 characters; the rail, the margin and the gutters take
     whatever the viewport offers, so a wide window widens the document
     instead of framing it with emptiness. */
  --rail-w: clamp(15.5rem, 17vw, 22rem);
  /* 28.5rem at the 17px reading size is about 64 characters of Newsreader. */
  --measure: 28.5rem;
  --mgap: clamp(2.4rem, 4vw, 5rem);
  --margin-w: clamp(15.5rem, 22vw, 28rem);
  --gutter: clamp(26px, 5vw, 96px);
  --rh-h: 38px;

  /* tight between blocks, generous inside prose */
  --sec: clamp(1.9rem, 1.3rem + 1.7vw, 2.7rem);

  /* motion: fast warm-in, slow warm-out. Ease-out only, never a spring. */
  --in: 160ms;
  --out: 850ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--rh-h) + 14px);
  background: var(--paper);
}

body {
  margin: 0;
  padding-top: var(--rh-h);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .45em;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.004em;
}
/* The display face is spent on the wordmark and the single largest headline. */
h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.95rem, 1.2rem + 2.2vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -.012em;
}
h2 { font-size: clamp(1.3rem, 1.06rem + .85vw, 1.7rem); }
h3 { font-size: 1.0625rem; font-weight: 600; }
h4 { font-size: .9375rem; font-weight: 600; }

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

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: .16em;
  transition: text-decoration-color var(--out) ease-out, color var(--out) ease-out;
}
a:hover { color: var(--ink); text-decoration-color: var(--caution); transition-duration: var(--in); }

ul, ol { margin: 0 0 .85rem; padding-left: 1.1rem; }
li { margin-bottom: .22rem; }
strong, b { color: var(--ink); font-weight: 650; }
em, i { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1.6rem 0; }
table { border-collapse: collapse; width: 100%; }
small { font-size: .8125rem; }
code { font-family: var(--mono); font-size: .875em; }
::selection { background: rgba(190, 133, 30, .28); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(190, 133, 30, .38);
  border-radius: 1px;
}

.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: fixed; left: 10px; top: -70px; z-index: 300;
  background: var(--ink); color: var(--paper); padding: 9px 16px;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .09em;
  text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 8px; color: var(--paper); }

/* ==========================================================================
   1. THE RUNNING HEAD
   One line, pinned, hairline bottom. Which document, which sheet, which part.
   It does not grow, it does not carry navigation, and nothing hides behind it.
   ========================================================================== */
.rh {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; gap: .8rem;
  height: var(--rh-h); padding: 0 var(--gutter);
  background: rgba(244, 238, 225, .95);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: .6875rem; line-height: 1;
  letter-spacing: .04em; color: var(--ink-muted);
}
.rh p { margin: 0; }
.rh__doc { display: flex; align-items: baseline; gap: .5rem; flex: none; }
.rh__mark {
  font-family: var(--display); font-size: 1.0625rem; color: var(--ink);
  letter-spacing: .004em; line-height: 1;
}
.rh__ed {
  font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--caution); padding-bottom: 1px;
}
.rh__pg {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-soft); border-left: 1px solid var(--rule-strong); padding-left: .8rem;
}
.rh__sec {
  flex: none; display: flex; align-items: baseline; gap: .45rem;
  max-width: 34%; overflow: hidden;
  color: var(--ink-faint);
}
.rh__sec[data-count="00"] { display: none; }
.rh__n {
  font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--caution);
}
.rh__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .rh__sec { display: none; } }
@media (max-width: 520px) { .rh__pg { display: none; } }

/* ==========================================================================
   2. THE DOCUMENT FRAME: contents rail plus body
   ========================================================================== */
.doc {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  align-items: start;
  /* rail plus sheet, centred as one object, so the text block sits against the
     rail the way a page sits against its spine rather than drifting away. */
  max-width: calc(var(--rail-w) + var(--measure) + var(--mgap) + var(--margin-w) + 4 * var(--gutter));
  margin: 0 auto;
}
.doc__body { min-width: 0; }

/* ---------- the contents rail ---------- */
.toc {
  position: sticky; top: var(--rh-h);
  max-height: calc(100vh - var(--rh-h));
  overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--rule);
  padding: 1.1rem 1rem 2rem var(--gutter);
  font-family: var(--mono);
}
.toc__d > summary { list-style: none; }
.toc__d > summary::-webkit-details-marker { display: none; }
.toc__sum {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding-bottom: .35rem; margin-bottom: .8rem;
  border-bottom: 2px solid var(--ink);
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); font-weight: 500; cursor: default;
}
.toc__sumt { flex: none; }
.toc__sumn { margin-left: auto; color: var(--ink-faint); letter-spacing: .12em; }

.toc__sidx { margin: 0; }
.toc__home { font-variant: small-caps; letter-spacing: .04em; }
.sidx__g { margin-bottom: .85rem; }
.sidx__h {
  margin: 0 0 .2rem; padding-bottom: .15rem;
  border-bottom: 1px solid var(--rule);
  font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
.sidx__l { list-style: none; margin: 0; padding: 0; }
.sidx__l li { margin: 0; }
.sidx__a {
  display: block; padding: .22rem .35rem .22rem .5rem;
  font-family: var(--serif); font-size: .875rem; line-height: 1.3;
  color: var(--ink-soft); text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color var(--out) ease-out, color var(--out) ease-out;
}
.sidx__a:hover, .sidx__a:focus-visible {
  background: var(--bloom); color: var(--ink); transition-duration: var(--in);
}
.sidx__a.is-active, .sidx__a[aria-current="page"] {
  color: var(--ink); font-weight: 650;
  border-left-color: var(--caution); background: var(--paper-raised);
}

.toc__pidx { margin-top: 1.1rem; }
.toc__pidx[data-count="00"] { display: none; }
.toc__h {
  display: flex; align-items: baseline; gap: .5rem;
  margin: 0 0 .35rem; padding-bottom: .2rem;
  border-bottom: 1px solid var(--ink);
  font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
}
.toc__hn { margin-left: auto; color: var(--ink-faint); letter-spacing: .1em; }
.pidx { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.pidx__i { margin: 0; border-bottom: 1px solid var(--rule); }
.pidx__i:last-child { border-bottom: 0; }
.pidx__a {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0 .35rem;
  padding: .28rem .3rem .3rem 0; text-decoration: none; color: var(--ink-soft);
  border-left: 2px solid transparent;
  transition: background-color var(--out) ease-out, color var(--out) ease-out;
}
.pidx__a:hover, .pidx__a:focus-visible { background: var(--bloom); transition-duration: var(--in); }
.pidx__a.is-active { border-left-color: var(--caution); background: var(--paper-raised); }
.pidx__n { font-size: .625rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-left: .35rem; }
.pidx__a.is-active .pidx__n { color: var(--caution-deep); }
.pidx__l {
  font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.pidx__t {
  grid-column: 2; font-family: var(--serif); font-size: .8125rem;
  line-height: 1.25; color: var(--ink-soft);
}
.pidx__a.is-active .pidx__t { color: var(--ink); font-weight: 650; }

/* ---------- the edition switch, right end of the running head ----------
   The same links every setting carries, set as issue markers: a dot in the
   setting's colour and its name on wide heads, dots only as the head narrows.
   The switch is the one resident of the running head that is not about this
   sheet, so it is also the quietest. */
.rh__switch { display: flex; align-items: center; gap: .15rem; flex: none; }
.rh__switch .ed__opt, .rh__switch .ed__all {
  display: inline-flex; align-items: center; gap: .35rem; padding: 4px 7px;
  border: 1px solid transparent;
  color: var(--ink-muted); text-decoration: none; white-space: nowrap;
  letter-spacing: .04em; line-height: 1;
  transition: background-color var(--out) ease-out, border-color var(--out) ease-out, color var(--out) ease-out;
}
.rh__switch .ed__opt:hover, .rh__switch .ed__all:hover,
.rh__switch .ed__opt:focus-visible, .rh__switch .ed__all:focus-visible {
  background: var(--bloom); border-color: var(--caution); color: var(--ink);
  transition-duration: var(--in);
}
.rh__switch .ed__all { border: 1px dashed var(--rule-strong); }
.rh__switch .ed__dot { width: 7px; height: 7px; flex: none; border: 1px solid rgba(25, 35, 47, .35); }
.rh__switch .ed__opt--console .ed__dot { background: #0E9F73; }
.rh__switch .ed__opt--logbook .ed__dot { background: #F4EEE1; }
.rh__switch .ed__opt--datum .ed__dot { background: #4FA3E3; }
.rh__switch .ed__opt--aurora .ed__dot { background: linear-gradient(135deg, #10B981, #4F7CFF); }
.rh__switch .ed__opt--flux .ed__dot { background: #C8F542; border-color: rgba(25, 35, 47, .55); }
/* Narrow heads keep the markers and drop the names. */
@media (max-width: 1360px) {
  .rh__switch .ed__opt { font-size: 0; gap: 0; padding: 6px 5px; }
}
@media (max-width: 640px) {
  .rh__switch .ed__all { display: none; }
}

/* ---------- the rail on a phone: front matter, not a sidebar ----------
   Same markup, no script involved. The <details> ships open, so the contents
   are readable on arrival and can be folded away by hand. */
@media (max-width: 1080px) {
  .doc { grid-template-columns: minmax(0, 1fr); }
  .toc {
    position: static; max-height: none; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--rule-strong);
    padding: .9rem var(--gutter) 1.2rem;
    max-width: calc(var(--measure) + var(--mgap) + var(--margin-w) + 2 * var(--gutter));
    margin: 0 auto;
  }
  .toc__sum { cursor: pointer; }
  .toc__sum::after {
    content: "+"; margin-left: .4rem; color: var(--ink-faint);
    font-size: .9rem; line-height: 1; letter-spacing: 0;
  }
  .toc__d[open] > .toc__sum::after { content: "\2013"; }
  .toc__in {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 0 1.5rem; align-items: start;
  }
  .toc__pidx { margin-top: .6rem; grid-column: 1 / -1; }
  /* Front matter, so it is set tight: the contents of a document, not a page
     of its own. The parts list drops its eyebrow and keeps the titles. */
  .sidx__g { margin-bottom: .6rem; }
  .sidx__a { font-size: .8125rem; padding: .13rem .35rem .13rem .5rem; }
  .pidx__l { display: none; }
  .pidx__a { grid-template-columns: 1.5rem minmax(0, 1fr); padding: .16rem .3rem .18rem 0; }
  .pidx__t { grid-column: 2; font-size: .8125rem; }
}

/* ==========================================================================
   3. THE MEASURE AND ITS MARGIN
   Every .wrap is the same two-column grid. The reading column runs to about
   63 characters; the margin column beside it carries the apparatus. Items
   default to the measure and are moved out one component at a time below.
   ========================================================================== */
.wrap, .wrap--narrow {
  width: 100%;
  max-width: calc(var(--measure) + var(--mgap) + var(--margin-w) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns:
    [full-start measure-start] minmax(0, var(--measure))
    [measure-end] var(--mgap)
    [margin-start] minmax(0, var(--margin-w)) [margin-end full-end];
  align-content: start;
}
.wrap > *, .wrap--narrow > * { grid-column: measure-start / measure-end; min-width: 0; }

/* Things that belong in the margin, wherever they are a direct child. */
.wrap > .note,
.wrap > .crumbs { grid-column: margin-start / margin-end; align-self: start; }
/* A note that is the whole point of its section stays in the measure. */
.wrap > .note:only-child { grid-column: measure-start / measure-end; }

/* Things that break out of the measure and take the full width. */
.wrap > .tablewrap,
.wrap > .wall,
.wrap > .grid,
.wrap > .split,
.wrap > .sec-head,
.wrap > .journey,
.wrap > .layers,
.wrap > .pipe,
.wrap > .fig,
.wrap > .card,
.wrap > figure { grid-column: full-start / full-end; }

/* ==========================================================================
   4. TYPE HELPERS
   ========================================================================== */
/* Eyebrows are small plaques: mono, letterspaced, preceded by a short rule. */
.eyebrow {
  display: flex; align-items: baseline; gap: .5rem;
  font-family: var(--mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 .55rem;
}
.eyebrow::before {
  content: ""; width: 16px; height: 1px; background: var(--rule-strong);
  flex: none; transform: translateY(-.28em);
}
.eyebrow--plain::before { display: none; }

.lede { font-size: 1.0625rem; line-height: 1.58; color: var(--ink-muted); }
.lede--lg { font-size: clamp(1.0625rem, .96rem + .45vw, 1.1875rem); color: var(--ink-soft); }
.muted { color: var(--ink-muted); }
.mono { font-family: var(--mono); font-size: .8125rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.measure { max-width: none; }
.balance { text-wrap: balance; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.divider { height: 1px; background: var(--rule); margin: 1.4rem 0; }
.stack > * + * { margin-top: .85rem; }

/* ---------- the section head ----------
   Eyebrow into the margin, on the heading's own line. Everything else reads
   down the measure. The split variant is set the same way: a document does not
   put its standfirst in a second column. */
.sec-head { display: grid; grid-template-columns: subgrid; margin-bottom: 1.15rem; }
.sec-head > * { grid-column: measure-start / measure-end; min-width: 0; }
.sec-head--split > div { display: contents; }
.sec-head > .eyebrow,
.sec-head--split > div > .eyebrow {
  grid-column: margin-start / margin-end; grid-row: 1;
  align-self: start; margin: .35rem 0 0;
}
.sec-head > h2, .sec-head--split > div > h2 { grid-column: measure-start / measure-end; }
.sec-head > .lede { margin-top: .2rem; }

/* ==========================================================================
   5. THE TITLE BLOCK
   Not a full-bleed hero. A rule, an eyebrow, the title in Caslon, the
   standfirst, and the metadata pushed into the margin. The one dark element is
   the specimen plate: the second column of the shared hero markup, which
   carries panels, pull quotes and notes whose light-on-dark colours are
   hardcoded inline in the content and must stay legible.
   ========================================================================== */
.hero { background: transparent; border: 0; }
.hero__in {
  position: relative;
  border-top: 3px solid var(--ink);
  padding-block: 1.5rem clamp(3.2rem, 2.6rem + 1.6vw, 4rem);
}
.hero__in > *, .hero__grid > *, .hero__grid > *:first-child > * {
  grid-column: measure-start / measure-end; min-width: 0;
}
/* The shared hero puts its text block and its plate in two divs. Dissolve the
   wrappers so both land on the sheet grid directly. */
.hero__grid { display: contents; }
.hero__grid > *:first-child { display: contents; }

.hero__in > .crumbs { grid-column: margin-start / margin-end; grid-row: 1; align-self: start; }
/* The metadata line runs down the margin beside the title. The long row span
   keeps the plate below the taller of the two columns; empty rows collapse. */
.hero__in > .rail { grid-column: margin-start / margin-end; grid-row: 2 / span 40; align-self: start; }

.hero h1 { margin-bottom: .5rem; }
.hero__sub {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem); line-height: 1.38;
  color: var(--ink); margin-bottom: .7rem;
}
.hero__body { color: var(--ink-muted); font-size: 1.0625rem; line-height: 1.56; }
.hero--page h1 { font-size: clamp(1.7rem, 1.15rem + 1.6vw, 2.4rem); }
.hero .btn-row { margin-top: 1.2rem; }

.crumbs {
  list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0 0 .6rem;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.crumbs li { margin: 0; display: flex; gap: .3rem; align-items: center; }
.crumbs li + li::before { content: "/"; opacity: .55; }
.crumbs a { color: var(--ink-muted); text-decoration-color: var(--rule); }
.crumbs a:hover { color: var(--ink); text-decoration-color: var(--caution); }

/* The metadata rail: keys over values, one per line, ruled. */
.rail {
  display: grid; grid-template-columns: minmax(0, 1fr);
  border-top: 2px solid var(--ink); margin-top: .4rem;
}
.rail__i { padding: .45rem 0 .4rem; border-bottom: 1px solid var(--rule); }
.rail__i:last-child { border-bottom: 0; }
.rail__k {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .12rem;
}
.rail__v {
  margin: 0; font-family: var(--mono); font-size: .75rem; font-weight: 500;
  color: var(--ink); line-height: 1.4; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* --- THE SIGNATURE: the graduated measure -------------------------------
   Coarse ticks on the left, fine ticks on the right, an amber index at the
   dense end. Each background layer is clipped by its own background-size, so
   the density ramp is real and needs no extra markup. One per sheet, drawn
   once on load, never on scroll. Absolutely positioned, so it takes no part
   in the sheet grid. */
.hero__in::before {
  content: "";
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.1rem;
  height: 15px; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--caution), var(--caution)),
    repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 60px),
    linear-gradient(var(--ink), var(--ink));
  background-size: 2px 15px, 26% 5px, 60% 8px, 100% 11px, 100% 1px;
  background-position: right bottom, right bottom, right bottom, left bottom, left bottom;
  animation: measure-draw 1s var(--ease) both;
}
.hero__in::after {
  content: "granular";
  position: absolute; right: var(--gutter); bottom: calc(1.1rem + 19px);
  font-family: var(--mono); font-size: .5625rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--caution-deep);
  pointer-events: none;
  animation: measure-label 520ms ease-out 620ms both;
}
@keyframes measure-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes measure-label {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 420px) {
  .hero__in::after { font-size: .5rem; letter-spacing: .14em; }
}

/* ==========================================================================
   6. SECTIONS: continuous flow, numbered in the margin
   No alternating bands. A hairline and a part number separate one part from
   the next. The counter is driven off sections that carry an id, which is the
   same set the builder counts for {{section_count}}, so the two never disagree.
   ========================================================================== */
main { counter-reset: part; }
.sec { padding: var(--sec) 0; border-top: 1px solid var(--rule); }
.sec--tight { padding: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem) 0; }
.sec--alt, .sec--sunk { background: transparent; }
.sec--line { border-top: 1px solid var(--rule); }
.sec[id] { counter-increment: part; }
.sec[id] > .wrap::before {
  content: counter(part, decimal-leading-zero);
  grid-column: margin-start / margin-end; grid-row: 1;
  align-self: start;
  font-family: var(--mono); font-size: .8125rem; font-weight: 500;
  letter-spacing: .06em; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  border-top: 2px solid var(--ink); padding-top: .3rem; margin-bottom: .5rem;
}

/* ---------- the ink plate ----------
   Two places still go dark: the specimen plate in the title block, and
   .sec--dark. Both are bounded blocks inside the sheet, never full-bleed
   bands. Content hardcodes light-on-dark inline colours inside both, so the
   dark ground has to stay. */
.sec--dark { background: transparent; border-top: 1px solid var(--rule); }
.sec--dark > .wrap {
  background: var(--band); color: var(--band-muted);
  padding-block: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}
.hero__grid > *:last-child:not(:first-child) {
  grid-column: full-start / full-end;
  background: var(--band); color: var(--band-muted);
  padding: 1rem 1.1rem 1.15rem; margin-top: 1.5rem;
}
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) :is(h1, h2, h3, h4, strong, b) { color: var(--band-ink); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) :is(p, li, dd, address) { color: var(--band-muted); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) a { color: var(--band-ink); text-decoration-color: rgba(244, 238, 225, .38); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) a:hover { text-decoration-color: var(--caution); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) :is(.lede, .muted) { color: var(--band-muted); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .eyebrow { color: var(--band-faint); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .eyebrow::before { background: var(--band-rule); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .mono { color: var(--band-faint); }
.sec--dark > .wrap::before { color: var(--band-faint); border-top-color: var(--band-rule); }

/* ==========================================================================
   7. ENTRIES: what used to be card grids
   .grid--2/3/4/5 are not grids here. Each card is one ruled entry running the
   width of the sheet, its key or its number set in the margin. A document does
   not put its points in a three-across card layout.
   ========================================================================== */
.grid {
  display: grid; grid-template-columns: subgrid;
  border-top: 1px solid var(--ink);
}
.grid > * { grid-column: full-start / full-end; min-width: 0; }
.grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: subgrid; }

/* Paragraph defaults sit on the card itself rather than on `.card p`, because a
   descendant type selector would outrank every label class inside the card. */
.card {
  position: relative; background: transparent;
  border-bottom: 1px solid var(--rule);
  padding: .75rem 0 .9rem;
  font-size: .9375rem; line-height: 1.55; color: var(--ink-muted);
  transition: background-color var(--out) ease-out;
}
.grid > .card, .wrap > .card {
  display: grid; grid-template-columns: subgrid;
}
.grid > .card > *, .wrap > .card > * { grid-column: measure-start / measure-end; min-width: 0; }
.grid > .card > :is(.card__k, .card__num, .person__av),
.wrap > .card > :is(.card__k, .card__num, .person__av) {
  grid-column: margin-start / margin-end; grid-row: 1; align-self: start;
}
/* The initials plaque is taller than a heading line, so it spans the name and
   the role rather than stretching the name's row. */
.grid > .card > .person__av, .wrap > .card > .person__av { grid-row: 1 / span 2; }
.grid > .card:last-child { border-bottom: 0; }
.card strong { color: var(--ink); }
.card h3, .card h4 { color: var(--ink); margin-bottom: .25rem; }
.card--pad { padding: .8rem 0 1rem; }
.card--flat { border-color: var(--rule); }
.card--hl { background: var(--paper-raised); box-shadow: inset 2px 0 0 var(--ink); padding-left: .8rem; }
.card--link { text-decoration: none; color: inherit; }
.card--link:hover, .card--link:focus-within { background: var(--bloom); transition-duration: var(--in); }
.card--link:hover { color: inherit; }
.card--link:hover .link-arrow, .card--link:hover .link-arrow::after { color: var(--caution-deep); }
.card a { text-decoration-color: var(--rule-strong); }
.card__k {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin: .3rem 0 .45rem;
  line-height: 1.5;
}
.card__foot { margin-top: .7rem; padding-top: .55rem; border-top: 1px solid var(--rule); }
.card__foot.link-arrow { display: flex; }
.card__num {
  display: block; font-family: var(--mono); font-size: 1rem; font-weight: 500;
  color: var(--ink-faint); letter-spacing: .04em; margin: .35rem 0 .4rem;
  font-variant-numeric: tabular-nums;
}
.card--dark {
  background: var(--band); color: var(--band-muted);
  border-color: var(--band-rule); padding-left: .9rem; padding-right: .9rem;
}
.card--dark h3, .card--dark strong { color: var(--band-ink); }
.card--dark, .card--dark p { color: var(--band-muted); }
.card--dark .card__k { color: var(--band-faint); }

/* A card inside the ink plate keeps the plate's foreground colours. */
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .card { border-color: var(--band-rule); color: var(--band-muted); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .card__k { color: var(--band-faint); }

/* A card set in the margin column (an aside) is a marginal block, not an
   entry: no subgrid, key above the heading, quieter type. */
.split > aside.card, .grid--sidebar aside .card, .split > aside .card {
  font-size: .875rem; line-height: 1.5;
}

.tile { display: flex; flex-direction: column; gap: .3rem; }
.tile__v {
  font-family: var(--mono); font-size: 1.35rem;
  font-weight: 500; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.tile__k { font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.tile__n { font-size: .8125rem; color: var(--ink-muted); }

/* ---------- content plus aside ---------- */
.split, .grid--sidebar {
  display: grid; grid-template-columns: subgrid; align-items: start;
}
.split > *, .grid--sidebar > * { grid-column: measure-start / measure-end; min-width: 0; }
.split > * + *, .grid--sidebar > * + * { margin-top: 1.1rem; }
.split > aside, .split > .quote, .grid--sidebar > aside {
  grid-column: margin-start / margin-end; grid-row: 1;
  align-self: start; margin-top: 0;
}
.split--wide-left, .split--wide-right { grid-template-columns: subgrid; }
.sticky { position: sticky; top: calc(var(--rh-h) + 14px); }

/* ---------- sequences: the same rule, one step per row ---------- */
.journey, .layers, .pipe, .pipe__row, .journey__i, .layer, .pipe__i {
  display: grid; grid-template-columns: subgrid;
}
.journey, .layers, .pipe { border-top: 1px solid var(--ink); }
.journey > *, .layers > *, .pipe > *, .pipe__row > * { grid-column: full-start / full-end; min-width: 0; }

.journey__i { border-bottom: 1px solid var(--rule); padding: .7rem 0 .8rem; }
.journey__i > * { grid-column: measure-start / measure-end; }
.journey__s {
  grid-column: margin-start / margin-end; grid-row: 1; align-self: start;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin: .3rem 0 0;
}
.journey__i h3 { margin: 0 0 .25rem; font-size: 1rem; }
.journey__i p { margin: 0; font-size: .9375rem; color: var(--ink-muted); }

.layer {
  border-bottom: 1px solid var(--rule); padding: .7rem 0 .8rem;
  transition: background-color var(--out) ease-out;
}
.layer:hover { background: var(--bloom); transition-duration: var(--in); }
.layer > * { grid-column: measure-start / measure-end; }
.layer__k {
  grid-column: margin-start / margin-end; grid-row: 1; align-self: start;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: .3rem;
}
.layer--hl { background: var(--paper-raised); box-shadow: inset 2px 0 0 var(--ink); }
.layer__t { font-weight: 650; color: var(--ink); font-size: 1rem; }
.layer__d { font-size: .9375rem; color: var(--ink-muted); margin: .2rem 0 0; }
.layer__tag { justify-self: start; margin-top: .4rem; }

.pipe { margin: 0; }
.pipe__row { list-style: none; margin: 0; padding: 0; }
.pipe__i {
  margin: 0; padding: .7rem 0 .8rem; border-bottom: 1px solid var(--rule);
}
.pipe__i > * { grid-column: measure-start / measure-end; }
.pipe__k {
  grid-column: margin-start / margin-end; grid-row: 1; align-self: start;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin: .3rem 0 0;
}
.pipe__i--hl { background: var(--paper-raised); box-shadow: inset 2px 0 0 var(--ink); }
.pipe__i h3 { margin: 0 0 .25rem; font-size: 1rem; }
.pipe__i p:last-child { font-size: .9375rem; color: var(--ink-muted); margin: 0; }
.pipe__base {
  grid-column: measure-start / measure-end;
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  padding: .6rem 0 .65rem; border-bottom: 1px solid var(--ink);
}
.pipe__badge {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
  border: 1px solid var(--ink); padding: .14rem .4rem;
}
.pipe__base p { margin: 0; font-size: .875rem; color: var(--ink-muted); flex: 1 1 260px; }
.pipe > figcaption { grid-column: margin-start / margin-end; align-self: start; }

/* The four-stage ladder lives inside an accordion body, out of reach of the
   sheet grid, so it is set as its own ruled list. */
.ladder { display: grid; }
.ladder__i {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 .9rem;
  border-top: 1px solid var(--rule); padding: .55rem 0;
}
.ladder__i:first-child { border-top: 0; }
.ladder__n {
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  color: var(--ink-faint); margin: 0; font-variant-numeric: tabular-nums;
}
.ladder__t { grid-column: 2; margin: 0 0 .15rem; font-size: 1rem; }
.ladder__d { grid-column: 2; font-size: .9375rem; color: var(--ink-muted); margin: 0; }

/* ==========================================================================
   8. TABLES, WALLS, CHIPS, BADGES
   Wide tables break the measure and take the whole sheet. Squeezing a
   five-column comparison into 63 characters would be worse than no marginalia.
   ========================================================================== */
.tablewrap {
  overflow-x: auto;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: transparent;
}
.tbl { font-size: .9375rem; min-width: 620px; }
.tbl caption {
  text-align: left; padding: .6rem .1rem; font-size: .875rem; font-style: italic;
  color: var(--ink-muted); border-bottom: 1px solid var(--rule);
}
.tbl th, .tbl td { text-align: left; padding: .6rem 1rem .6rem .1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl th:last-child, .tbl td:last-child { padding-right: .1rem; }
.tbl thead th {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; background: transparent; white-space: nowrap;
  border-bottom: 1px solid var(--ink); padding-top: .5rem; padding-bottom: .45rem;
}
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-bottom: 0; }
.tbl tbody th { font-weight: 650; color: var(--ink); }
.tbl td { color: var(--ink-muted); }
.tbl tbody tr { transition: background-color var(--out) ease-out; }
.tbl tbody tr:hover { background: var(--bloom); transition-duration: var(--in); }
.tbl .yes { color: var(--clear-deep); font-weight: 650; }
.tbl .no { color: var(--ink-faint); }
.tbl__hl th, .tbl__hl td { background: var(--paper-raised) !important; box-shadow: inset 0 -1px 0 var(--rule-strong); }
.tbl__hl th { box-shadow: inset 2px 0 0 var(--ink), inset 0 -1px 0 var(--rule-strong); }

.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: .625rem; letter-spacing: .04em;
  padding: .2rem .45rem; border: 1px solid var(--rule-strong); border-radius: 1px;
  color: var(--ink-muted); background: var(--paper-raised); white-space: nowrap;
}
.chip--brand { border-color: var(--clear-deep); color: var(--clear-deep); background: transparent; }
.chip--dark { border-color: var(--band-rule); background: rgba(244, 238, 225, .04); color: var(--band-muted); }

/* Wordmarks in a hairline grid. Collapsed borders rather than a background
   showing through gaps, so a part-filled last row leaves no orphan cells. */
.wall {
  display: flex; flex-wrap: wrap;
  list-style: none; padding: 0; margin: 0; background: transparent;
}
.wall__i {
  flex: 1 1 148px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 50px; padding: .5rem .55rem;
  margin: -1px 0 0 -1px; border: 1px solid var(--rule);
  background: var(--paper-raised);
  font-size: .8125rem; font-weight: 550; color: var(--ink-soft); line-height: 1.3;
  transition: background-color var(--out) ease-out;
}
.wall__i:hover { background: var(--bloom); transition-duration: var(--in); }

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .5625rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; padding: .14rem .38rem; border: 1px solid currentColor;
  vertical-align: .12em;
}
.badge--new { color: var(--clear-deep); }
.badge--soon { color: var(--caution-deep); }
.badge--info { color: var(--info); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .badge { color: var(--band-muted); }

/* ==========================================================================
   9. BUTTONS AND LINKS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--mono); font-size: .6875rem; font-weight: 500; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .65rem 1rem; border-radius: 1px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color var(--out) ease-out, border-color var(--out) ease-out,
              color var(--out) ease-out, box-shadow var(--out) ease-out;
}
.btn:hover { transition-duration: var(--in); }
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 -2px 0 var(--caution); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--bloom); color: var(--ink); }
/* btn--onDark is written into content beside a primary button. In this setting
   most of those pairs now sit on cream, so it is drawn as a quiet outline and
   re-lit only where it genuinely lands on the ink plate. */
.btn--onDark { border-color: var(--rule-strong); color: var(--ink-soft); background: transparent; }
.btn--onDark:hover { border-color: var(--caution); background: var(--bloom); color: var(--ink); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .btn--onDark {
  border-color: rgba(244, 238, 225, .42); color: var(--band-ink);
}
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .btn--onDark:hover {
  border-color: var(--caution); background: var(--bloom-band); color: var(--band-ink);
}
.btn--sm { padding: .45rem .75rem; font-size: .625rem; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Warden rule 11e: nothing slides. The arrow warms, it does not travel. */
.link-arrow {
  display: inline-flex; align-items: baseline; gap: .4rem;
  font-family: var(--mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  transition: color var(--out) ease-out;
}
.link-arrow::after { content: "\2192"; color: var(--ink-faint); transition: color var(--out) ease-out; }
.link-arrow:hover, .link-arrow:hover::after { color: var(--caution-deep); transition-duration: var(--in); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .link-arrow { color: var(--band-ink); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .link-arrow:hover { color: var(--caution); }
.ext { font-size: .8em; color: var(--ink-faint); }

/* ==========================================================================
   10. THE REST OF THE VOCABULARY
   ========================================================================== */
/* An instrument readout etched on the plate. */
.panel { border: 1px solid var(--band-rule); background: rgba(244, 238, 225, .035); }
.panel__bar {
  display: flex; align-items: center; gap: .3rem; padding: .45rem .7rem;
  border-bottom: 1px solid var(--band-rule-soft);
}
.panel__dot { width: 5px; height: 5px; background: rgba(244, 238, 225, .3); }
.panel__title {
  font-family: var(--mono); font-size: .625rem; color: var(--band-faint);
  margin-left: .45rem; letter-spacing: .03em;
}
.panel__badge {
  margin-left: auto; font-family: var(--mono); font-size: .5rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--caution);
  border: 1px solid rgba(190, 133, 30, .5); padding: .1rem .35rem;
}
.panel__body { padding: .75rem .8rem .85rem; }
.panel__q {
  font-family: var(--mono); font-size: .6875rem; color: var(--band-ink);
  margin: 0 0 .7rem; line-height: 1.55; word-break: break-word;
}
.panel__prompt { color: var(--caution); margin-right: .5rem; text-transform: uppercase; letter-spacing: .1em; font-size: .5625rem; }
.panel__tbl { font-family: var(--mono); font-size: .625rem; width: 100%; font-variant-numeric: tabular-nums; }
.panel__tbl th, .panel__tbl td { text-align: left; padding: .3rem .28rem; border-bottom: 1px solid var(--band-rule-soft); }
.panel__tbl thead th {
  color: var(--band-faint); font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; font-size: .5rem;
  border-bottom-color: var(--band-rule);
}
.panel__tbl td { color: var(--band-muted); }
.panel__tbl td:last-child, .panel__tbl th:last-child { text-align: right; }
.panel__tbl .is-total td { color: var(--band-ink); font-weight: 500; border-bottom: 0; padding-top: .4rem; }
.panel__foot { font-family: var(--mono); font-size: .625rem; color: var(--band-muted); margin: .6rem 0 0; line-height: 1.7; }
.panel__ok { color: var(--clear-bright); margin-right: .35rem; }

.strip__lead { font-size: .9375rem; color: var(--ink-muted); margin: 0 0 .8rem; }

/* Pull quote. In the margin it is set small; in the measure it keeps its size.
   Newsreader italic, never the display face: that is spent on the wordmark and
   the one largest headline, and a sheet has only one of each. */
.quote { border-left: 2px solid var(--ink); padding-left: .9rem; margin: 0; }
.quote p {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 1.0625rem; line-height: 1.42; color: var(--ink); letter-spacing: 0;
}
.quote footer { font-family: var(--mono); font-size: .625rem; letter-spacing: .06em; color: var(--ink-faint); }
.split > .quote { border-left-width: 1px; }
.split > .quote p { font-size: .9375rem; line-height: 1.45; }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .quote { border-left-color: var(--band-rule); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .quote p { color: var(--band-ink); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .quote footer { color: var(--band-faint); }

.tabs__list {
  display: flex; flex-wrap: wrap; gap: 0; list-style: none;
  border-bottom: 1px solid var(--ink); margin: 0 0 1rem; padding: 0;
}
.tabs__btn {
  font-family: var(--mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .5rem .75rem; cursor: pointer; margin-bottom: -1px;
  transition: background-color var(--out) ease-out, color var(--out) ease-out;
}
.tabs__btn:hover { color: var(--ink); background: var(--bloom); transition-duration: var(--in); }
.tabs__btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--caution); }
.tabs__panel[hidden] { display: none; }

.acc { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.acc details { border-bottom: 1px solid var(--rule); }
.acc details:last-child { border-bottom: 0; }
.acc summary {
  cursor: pointer; padding: .65rem .1rem; font-weight: 650; color: var(--ink);
  display: flex; align-items: center; gap: .6rem; list-style: none; font-size: 1rem;
  transition: background-color var(--out) ease-out;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; margin-left: auto; color: var(--ink-faint);
  font-family: var(--mono); font-weight: 400; font-size: 1rem; line-height: 1;
}
.acc details[open] summary::after { content: "\2013"; }
.acc summary:hover { background: var(--bloom); transition-duration: var(--in); }
.acc__body { padding: 0 .1rem .9rem; font-size: .9375rem; color: var(--ink-muted); }
.acc__body p:first-child { margin-top: 0; }

/* A marginal note: ruled, quiet, set small because it sits in the margin. */
.note {
  border-top: 1px solid var(--ink); border-left: 0;
  padding: .5rem 0 .1rem; background: transparent; font-size: .8125rem;
  line-height: 1.5; color: var(--ink-muted);
}
.note--brand { border-top-color: var(--clear); }
.note--amber { border-top-color: var(--caution); }
.note p:last-child { margin-bottom: 0; }
.note__h {
  display: block; margin-bottom: .2rem;
  font-family: var(--mono); font-size: .5625rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.note .link-arrow { margin-top: .4rem; }
/* A note kept in the measure is the only thing in its part, so it is set as a
   standing block rather than as marginalia. */
.wrap > .note:only-child { font-size: .9375rem; padding: .7rem 0 .2rem; border-top-width: 2px; }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .note { border-top-color: var(--band-rule); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .note__h { color: var(--band-ink); }

.fig { display: grid; grid-template-columns: subgrid; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: .8rem 0; background: transparent; margin: 0; }
.fig > * { grid-column: full-start / full-end; min-width: 0; }
.fig svg { width: 100%; height: auto; font-family: var(--serif); }
.fig svg .m { font-family: var(--mono); }
.fig > figcaption { grid-column: margin-start / margin-end; }
.fig figcaption, .pipe figcaption {
  font-family: var(--mono); font-size: .5625rem; color: var(--ink-faint);
  margin-top: .5rem; letter-spacing: .04em; line-height: 1.5;
}
.fig--dark {
  background: var(--band); border-top-color: var(--band); border-bottom-color: var(--band);
  padding: .9rem 1rem;
}
.fig--dark figcaption { color: var(--band-faint); }
/* The shared figure markup hardcodes the console edition's teal. Retarget it
   to this palette's signal green rather than leave an off-palette accent. */
.fig--dark svg [stroke="#34D6A2"] { stroke: var(--clear-bright); }
.fig--dark svg [fill="#34D6A2"] { fill: var(--clear-bright); }

.mock { border: 1px solid var(--rule-strong); background: var(--paper-raised); }
.mock__bar {
  display: flex; align-items: center; gap: .35rem; padding: .45rem .7rem;
  border-bottom: 1px solid var(--rule);
}
.mock__dot { width: 5px; height: 5px; background: var(--rule-strong); }
.mock__title { font-family: var(--mono); font-size: .625rem; color: var(--ink-faint); margin-left: .35rem; }
.mock__body { padding: .8rem; }

/* Initials on a filing tab, not a portrait bubble. */
.person { text-align: left; }
.person__av {
  width: 38px; height: 38px; display: grid; place-items: center;
  font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .04em;
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--rule-strong); margin: .2rem 0 .5rem;
}
.person h3 { margin-bottom: .1rem; font-size: 1rem; }
.person__r { font-size: .9375rem; color: var(--ink-muted); margin: 0; }
.person__o {
  font-family: var(--mono); font-size: .5625rem; color: var(--ink-faint);
  margin: .3rem 0 0; letter-spacing: .12em; text-transform: uppercase;
}

/* Fields ruled like a printed form: a light box with a firm baseline. */
.form { display: grid; gap: .75rem; }
.field { display: grid; gap: .2rem; }
.field label {
  font-family: var(--mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.field .req { color: var(--caution-deep); }
.field .hint { font-size: .8125rem; color: var(--ink-faint); font-style: italic; }
.input, .select, .textarea {
  font-family: var(--serif); font-size: 1rem; color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  border-bottom: 2px solid var(--ink); border-radius: 0;
  padding: .5rem .65rem; width: 100%;
  transition: background-color var(--out) ease-out, border-color var(--out) ease-out;
}
.select { font-family: var(--mono); font-size: .8125rem; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; background: var(--paper); border-color: var(--rule-strong);
  border-bottom-color: var(--caution); box-shadow: 0 0 0 4px rgba(190, 133, 30, .3);
  transition-duration: var(--in);
}
.textarea { min-height: 110px; resize: vertical; font-size: .9375rem; }
.field--err .input, .field--err .select, .field--err .textarea { border-color: var(--hazard); border-bottom-color: var(--hazard); }
.err { font-family: var(--mono); font-size: .625rem; color: var(--hazard); margin: 0; letter-spacing: .02em; }
.err:empty { display: none; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .875rem; color: var(--ink-muted); }
.consent input { margin-top: .3rem; accent-color: var(--ink); }
.formmsg {
  border-top: 2px solid var(--ink-faint);
  background: transparent; padding: .7rem 0 .1rem; font-size: .9375rem;
}
.formmsg--ok { border-top-color: var(--clear); }

/* A dash, the way a list is marked in a written record. */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.ticks li { position: relative; padding-left: 1.1rem; font-size: .9375rem; color: var(--ink-muted); margin: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .75em; width: 9px; height: 1px; background: var(--ink);
}
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.4rem; }
@media (max-width: 620px) { .ticks--2 { grid-template-columns: 1fr; } }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .ticks li { color: var(--band-muted); }
:is(.sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child)) .ticks li::before { background: var(--band-rule); }

.deflist { display: grid; gap: 0; margin: 0; }
.deflist > div {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .05rem;
  padding: .4rem 0; border-bottom: 1px solid var(--rule);
}
.deflist > div:last-child { border-bottom: 0; }
.deflist dt {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0;
}
.deflist dd { margin: 0; font-size: .9375rem; color: var(--ink-soft); }

.office { font-style: normal; font-family: var(--mono); font-size: .75rem; color: var(--ink-muted); line-height: 1.7; }

/* ---------- the sheet's own parts index ----------
   The rail already carries this list. Where content also states it, it is set
   as a plain ruled index under the title block, not as a second sticky bar. */
.pagenav { border-bottom: 1px solid var(--rule); background: transparent; }
.pagenav > .wrap { padding-block: .55rem .6rem; }
.pagenav > .wrap::before {
  content: "Parts";
  grid-column: margin-start / margin-end; grid-row: 1; align-self: center;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint);
}
.pagenav > .wrap > ul {
  grid-column: measure-start / measure-end; grid-row: 1;
  display: flex; flex-wrap: wrap; gap: .1rem 1.15rem; list-style: none; margin: 0; padding: 0;
}
/* Set as separate entries. Without a rule between them the labels run together
   into one block of small caps that cannot be parsed at a glance. */
.pagenav li { margin: 0; position: relative; }
.pagenav li + li::before {
  content: ""; position: absolute; left: -.62rem; top: 50%; transform: translateY(-50%);
  width: 1px; height: .62rem; background: var(--rule-strong);
}
.pagenav a {
  display: block; padding: .2rem .5rem; text-decoration: none;
  font-family: var(--mono); font-size: .625rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); border-bottom: 2px solid transparent;
  transition: background-color var(--out) ease-out, color var(--out) ease-out, border-color var(--out) ease-out;
}
.pagenav a:hover { color: var(--ink); background: var(--bloom); transition-duration: var(--in); }
.pagenav a.is-active { color: var(--ink); border-bottom-color: var(--caution); }
.pagenav li:first-child a { padding-left: 0; }

/* ---------- the closing enquiry block ----------
   Not a band and not a different-looking site. The last part of the sheet,
   ruled like every other part, with its label in the margin. */
.cta { background: transparent; border-top: 2px solid var(--ink); }
.cta__in { padding-block: 1.4rem 1.6rem; }
.cta__in::before {
  content: "Enquiries";
  grid-column: margin-start / margin-end; grid-row: 1; align-self: start;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: .4rem;
}
.cta h2 { margin-bottom: .3rem; }
.cta p { color: var(--ink-muted); margin: 0; }
.cta .btn-row { margin-top: 1rem; }

/* ==========================================================================
   11. THE COLOPHON
   ========================================================================== */
.col { border-top: 1px solid var(--rule); margin-top: 0; }
.col__in {
  width: 100%;
  max-width: calc(var(--measure) + var(--mgap) + var(--margin-w) + 2 * var(--gutter));
  margin: 0 auto; padding: 1.4rem var(--gutter) 2.4rem;
  display: grid;
  grid-template-columns:
    [full-start measure-start] minmax(0, var(--measure))
    [measure-end] var(--mgap)
    [margin-start] minmax(0, var(--margin-w)) [margin-end full-end];
}
.col__in > * { grid-column: measure-start / measure-end; min-width: 0; }
.col__rule { grid-column: full-start / full-end; height: 3px; background: var(--ink); margin: 0 0 .9rem; }
.col__k {
  grid-column: margin-start / margin-end; grid-row: 2; align-self: start;
  margin: 0; font-family: var(--mono); font-size: .5625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint);
}
.col__k--2 { grid-row: 3; }
.col__body { grid-row: 2; font-size: .875rem; line-height: 1.6; color: var(--ink-muted); }
.col__body b { color: var(--ink); }
.col__links {
  grid-row: 3; list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 1.1rem;
  border-top: 1px solid var(--rule); padding-top: .5rem;
}
.col__links li { margin: 0; }
.col__links a {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .05em;
  color: var(--ink-soft); text-decoration-color: var(--rule-strong);
}
.col__legal {
  grid-row: 4; margin: 1.1rem 0 0; padding-top: .5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .625rem; line-height: 1.6; color: var(--ink-faint);
}

/* ==========================================================================
   12. NARROW WIDTHS
   The margin folds back into the flow. Everything keeps its order, its rules
   and its labels; only the second column goes away.
   ========================================================================== */
@media (max-width: 900px) {
  .wrap, .wrap--narrow, .col__in {
    grid-template-columns:
      [full-start measure-start margin-start] minmax(0, 1fr) [measure-end margin-end full-end];
  }
  .sec-head > .eyebrow,
  .sec-head--split > div > .eyebrow,
  .split > aside, .split > .quote, .grid--sidebar > aside,
  .grid > .card > :is(.card__k, .card__num, .person__av),
  .wrap > .card > :is(.card__k, .card__num, .person__av),
  .journey__s, .layer__k, .pipe__k,
  .hero__in > .crumbs, .hero__in > .rail,
  .sec[id] > .wrap::before,
  .pagenav > .wrap::before, .pagenav > .wrap > ul,
  .cta__in::before,
  .col__k, .col__k--2, .col__body, .col__links, .col__legal,
  .fig > figcaption, .pipe > figcaption { grid-row: auto; }

  .sec[id] > .wrap::before { display: inline-block; margin-bottom: .7rem; }
  .split > aside, .grid--sidebar > aside { margin-top: 1.1rem; }
  .hero__in > .rail { margin-top: 1.2rem; }
  .hero__in > .crumbs { margin-bottom: .5rem; }
  .hero__grid > *:last-child:not(:first-child) { margin-top: 1.2rem; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
  .rail__i:nth-last-child(-n+2) { border-bottom: 0; }
  .col__links { margin-top: .8rem; }
  .split > .quote p { font-size: 1.0625rem; }
  .pagenav > .wrap::before { align-self: start; margin-bottom: .2rem; }
}
@media (max-width: 520px) {
  :root { --gutter: 18px; }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .rail__i:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .rail__i:last-child { border-bottom: 0; }
  .toc__in { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   13. REDUCED MOTION
   Warden 11f: every motion is enhancement. The measure is drawn in its final
   position, highlights become an instant quiet colour change.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- print ---------- */
@media print {
  .rh, .toc, .pagenav, .btn { display: none !important; }
  body { background: #fff; font-size: 11pt; padding-top: 0; }
  .doc { display: block; }
  .sec--dark > .wrap, .hero__grid > *:last-child:not(:first-child), .fig--dark {
    background: #fff !important; color: #000 !important;
  }
  .sec--dark > .wrap :is(h2, h3, p, li), .hero__grid > *:last-child:not(:first-child) :is(h3, p, li) { color: #000 !important; }
  .hero__in::before, .hero__in::after { display: none; }
  .sec { padding: 12pt 0; }
}