@charset "utf-8";

/* =========================================================================
   Acreline — case study stylesheet.

   Visual mode (docs/spec/06_ACRELINE/PROJECT_BRIEF.md):
   "Scientific scenario report with atlas-like data views".

   Written for this page. Measured against the five earlier stylesheets in
   the five earlier portfolio/<slug>/case-study.css files — whose selectors union to 363 distinct class
   names — the only names in common with any of them are `.gnav`, `.gnav__in`,
   `.gnav__mark` and `.gnav__here`: the small global portfolio navigation
   Master Instruction §14 allows. PACKAGE.md carries the command and its output.

   Five structural commitments, none of which the five earlier case studies
   make:

   1. THE PAGE IS NUMBERED LIKE A REPORT, AND THE MARGIN CARRIES THE REGISTER.
      Every section is `§ n`, and the left rail beside it lists the register
      quantities — `Q4`, `Q19`, `Q26` — that the section is about. Those IDs are
      not decoration: they are the identifiers of the product's own
      single-source register (TASK_FLOW.md §0), reproduced in full as the
      appendix. RelayGrid's fixed left gutter carries time and Rill's fixed right
      column carries money; neither carries an identifier that also exists in the
      build.

   2. EVERY CAPTURE IS A PLATE, WITH A THREE-LINE PLATE CAPTION. Roman numeral,
      subject, then source and scale on their own line — the caption of an atlas
      plate rather than a figure box. The plates are mounted on `paper-raised`
      with a hairline, so a capture is visibly pinned to the page rather than
      bled into it.

   3. THE PAGE OPENS WITH A KEY. Five rows saying what each mark on the page
      means, before the first section — because that is how a scenario report
      opens, and because a page that prints `§`, `Q7`, `PLATE VI` and a dotted
      leader should say what they are.

   4. A DOTTED LEADER MEANS "…AND HERE IS WHERE THAT WAS CHECKED". It is the only
      repeating ornament on the page and it is used for exactly one thing.
      Wayfold reserves dashes for detours, TraceLab for anything provisional,
      Aster Shift has none, RelayGrid uses them for a zone boundary and Rill
      forbids them outright.

   5. THE PAGE IS SET AGAINST THE PRODUCT, NOT WITH IT. The product is Inter,
      Newsreader and JetBrains Mono; this page is Spectral and Fira Mono, so that
      every plate is visibly a quotation rather than a continuation of the page
      it sits on. No two case studies in this portfolio share a pairing
      (master §16).

   The ground is `paper`, the product's own #F7F5EF, under a fixed dot grid at
   3 %. No gradient, no drop shadow except the one element that quotes a floating
   surface, no card grid, no pill, no circle. Every text run sits on a solid
   colour, so no run is unmeasurable by axe.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts — self-hosted, Latin subsets, SIL OFL (assets/fonts/LICENSE-*.txt).
   No CDN and no external request of any kind is made by this page.

   Latin-Extended is NOT shipped, and that is a measurement rather than an
   omission: the supplier names the fiction invents — Duero Metalúrgica, Selçuk
   Döküm, Ostrów Components — appear on this page only inside plate alt text,
   and a scan of every rendered run finds no codepoint in the Latin-Extended
   range at all. Five files that no viewer would ever fetch are five files not
   committed. PACKAGE.md carries the scan.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/spectral-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/fira-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/fira-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* The product's five, unaltered (PROJECT_BRIEF.md). */
  --paper: #f7f5ef;
  --forest: #1f4d3b;
  --clay: #c56b4e;
  --blue: #4c78c8;
  --ink: #202522;

  /* The product's own derived scale, reused because it is already measured
     against these five (apps/acreline/src/styles/tokens.css). */
  --paper-raised: #fdfcf8;
  --paper-sunk: #edeae0;
  --paper-deep: #e3dfd2;
  --hairline: #dad5c7;
  --rule-mid: #b9b3a0;
  --ink-2: #454b45;
  --ink-3: #5e655d;
  --forest-sunk: #e2ece6;
  --clay-text: #8e3f26;
  --clay-sunk: #f6e7e0;
  --blue-text: #2f55a0;
  --blue-sunk: #e4eaf6;

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --mono: 'Fira Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* The report grid. The rail is wide enough for `PLATE VIII` and for a column
     of register IDs without either wrapping; the body column is what remains,
     and a plate is displayed at 1160 px for a 1440 px capture — four fifths of
     the product's own scale, and two fifths of the file's native resolution, so
     nothing is upscaled. */
  --sheet: 1320px;
  --rail: 150px;
  --rail-gap: 34px;
  --measure: 74ch;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.66;
  font-weight: 400;
  font-synthesis-weight: none;
  overflow-x: hidden;
  /* Inherited by everything. A quoted product string, a selector expression or a
     repository path can be longer than a 284 px column, and a page that scrolls
     sideways at 320 px is a defect this portfolio has measured for at 320 since
     the first project. `break-word` rather than `anywhere` here, because prose
     should only break when nothing else will fit. */
  overflow-wrap: break-word;
}

/*
  The survey ground: a 24 px dot grid at 3 %.

  It is painted by a FIXED pseudo-element BEHIND the page rather than as a
  background on `body`, and that is not a stylistic choice. axe cannot compute a
  contrast ratio for a text run whose ancestor carries a background image and
  reports the whole run indeterminate — which is the same defect class this page
  reports the product avoiding, in `contrastIndeterminate 0`. Behind `body` and
  out of the ancestor chain, every run on this page is measured.
*/
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(32, 37, 34, 0.11) 1px, transparent 0);
  background-size: 24px 24px;
}

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

/* Paths, identifiers and mono runs are the only strings here long enough to be
   unbreakable at 320 px. `anywhere` rather than `break-word`, because only
   `anywhere` also lowers the element's min-content contribution, which is what
   stops a grid or flex track being forced wider than the page. */
.src,
.figq,
.pl__source,
.datasheet dd,
.excerpt pre,
.keyplate dd,
.stateroll ul,
.reg td,
.reg th {
  overflow-wrap: anywhere;
}

a {
  color: var(--blue-text);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--blue-text);
  outline-offset: 2px;
}

/* Inline runs -------------------------------------------------------------- */
.figq {
  font-family: var(--mono);
  font-size: 0.87em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.src {
  font-family: var(--mono);
  font-size: 0.84em;
  color: var(--ink-2);
}
.lit {
  font-family: var(--mono);
  font-size: 0.84em;
  background: var(--paper-sunk);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--ink);
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
.was {
  color: var(--clay-text);
  font-weight: 600;
}

/* --------------------------------------------------------------- gnav (§14) */
.gnav {
  border-bottom: 1px solid var(--rule-mid);
  background: var(--paper-raised);
}
.gnav__in {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 11px 28px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gnav__mark {
  color: var(--forest);
  font-weight: 500;
}
.gnav__here b {
  color: var(--ink);
  font-weight: 500;
}

/* -------------------------------------------------------------- frontispiece */
.frontis {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--hairline);
}
.frontis__in {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 46px 28px 40px;
}
.frontis__eyebrow {
  margin: 0 0 26px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.frontis__eyebrow b {
  color: var(--forest);
  font-weight: 500;
}
.frontis__title {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--rail-gap);
  align-items: baseline;
  border-bottom: 2px solid var(--forest);
  padding-bottom: 18px;
}
.frontis__ref {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.frontis h1 {
  margin: 0;
  font-size: clamp(46px, 7vw, 82px);
  line-height: 1.0;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.frontis__claim {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--rail-gap);
}
.frontis__claim p {
  margin: 0;
  grid-column: 2;
  max-width: 30ch;
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.34;
  color: var(--forest);
}
.abstract {
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--rail-gap);
}
.abstract__label {
  grid-column: 1;
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.abstract__body {
  grid-column: 2;
  max-width: var(--measure);
}
.abstract__body p {
  margin: 0 0 14px;
}
.abstract__body p:last-child {
  margin-bottom: 0;
}

/* the facts sheet */
.datasheet {
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--rail-gap);
}
.datasheet > div {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--rail-gap);
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
}
.datasheet > div:last-child {
  border-bottom: 1px solid var(--hairline);
}
.datasheet dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 4px;
}
.datasheet dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  max-width: 78ch;
}
.datasheet dd b {
  font-weight: 600;
}

/* the key */
.keyplate {
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--rail-gap);
}
.keyplate__label {
  grid-column: 1;
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.keyplate dl {
  grid-column: 2;
  margin: 0;
  display: grid;
  grid-template-columns: 138px 1fr;
  column-gap: 20px;
  row-gap: 7px;
  max-width: 84ch;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  background: var(--paper-sunk);
}
.keyplate dt {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--forest);
  padding-top: 2px;
}
.keyplate dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* the contents */
.toc {
  margin: 38px 0 0;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--rail-gap);
}
.toc__label {
  grid-column: 1;
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.toc__cols {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 10px 40px;
}
.toc h2 {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
}
.toc ol {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.toc li {
  border-top: 1px dotted var(--rule-mid);
}
.toc li:last-child {
  border-bottom: 1px dotted var(--rule-mid);
}
.toc a {
  display: grid;
  grid-template-columns: 78px 1fr;
  column-gap: 12px;
  padding: 5px 0;
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}
.toc a:hover span {
  text-decoration: underline;
}
.toc a b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--forest);
  padding-top: 2px;
}

/* ----------------------------------------------------------------- divisions */
.division {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 30px 28px 18px;
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--rail-gap);
  align-items: baseline;
  border-bottom: 2px solid var(--forest);
}
.division__tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
}
.division__name {
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------- the sections */
.report {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 0 28px;
}

.sect {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  column-gap: var(--rail-gap);
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--hairline);
}
.sect:last-child {
  border-bottom: 0;
}
.sect__rail {
  grid-column: 1;
}
.sect__tag {
  display: block;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--forest);
  letter-spacing: -0.01em;
}
.sect__where {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.qrefs {
  margin: 14px 0 0;
  padding: 10px 0 0;
  border-top: 1px dotted var(--rule-mid);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.qrefs li {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  padding: 4px 5px;
  background: var(--forest-sunk);
  color: var(--forest);
  border-radius: 2px;
}
.sect__body {
  grid-column: 2;
  min-width: 0;
}
.sect__text {
  max-width: var(--measure);
}
.sect h2 {
  margin: 0 0 16px;
  font-size: clamp(25px, 2.7vw, 33px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.sect h3 {
  margin: 30px 0 10px;
  font-size: 19px;
  line-height: 1.34;
  font-weight: 600;
}
.sect h4 {
  margin: 22px 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
}
.sect p {
  margin: 0 0 14px;
}
.sect ul,
.sect ol {
  margin: 0 0 16px;
  padding-left: 20px;
}
.sect li {
  margin-bottom: 7px;
}

/* the product's own words, quoted */
.stated {
  margin: 20px 0 22px;
  padding: 16px 20px;
  background: var(--paper-raised);
  border-left: 3px solid var(--forest);
}
.stated p {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.52;
}
.stated p:last-of-type {
  margin-bottom: 0;
}
.stated cite {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* a marginal remark */
.margnote {
  margin: 22px 0;
  padding: 14px 18px;
  border: 1px solid var(--hairline);
  background: var(--paper-sunk);
}
.margnote__label {
  margin: 0 0 6px !important;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.margnote p:last-child {
  margin-bottom: 0;
}
.margnote--was {
  background: var(--clay-sunk);
  border-color: #e2c3b6;
}

/* a source excerpt */
.excerpt {
  margin: 22px 0;
  border: 1px solid var(--hairline);
  background: var(--paper-raised);
}
.excerpt__head {
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-sunk);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.excerpt pre {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--ink);
  tab-size: 2;
}
.excerpt code {
  font: inherit;
  /*
   * The block inside the scroller is WIDER than the scroller, so no ancestor
   * rectangle contains it and axe reports every run inside it as an
   * indeterminate contrast — the same failure this page reports the product
   * avoiding. Giving the block its own opaque background makes every run
   * measurable rather than merely clipped.
   */
  display: block;
  width: max-content;
  min-width: 100%;
  background: var(--paper-raised);
}

/* --------------------------------------------------------------- the plates */
.pl {
  margin: 30px 0 0;
}
.pl__cap {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 18px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--forest);
}
.pl__tag {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
  padding-top: 3px;
}
.pl__subject {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
}
.pl__source {
  grid-column: 2;
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-3);
}
.pl__mount {
  margin: 14px 0 0;
  padding: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
}
.pl__pair {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
.pl__pair--wide {
  grid-template-columns: minmax(0, 1.68fr) minmax(0, 1fr);
  align-items: start;
}
.pl__note {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.56;
  color: var(--ink-2);
  max-width: 92ch;
}
.pl__note b {
  color: var(--ink);
  font-weight: 600;
}

/* the take */
.viddock {
  margin: 26px 0 0;
  padding: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
}
.viddock video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);
}
.viddock__specs {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}

/* --------------------------------------------------------- the running build
   Added for publication: the prototype this report is written about is served
   in `prototype/` beside it, so the page carries the way in. It borrows the
   `.stated` grammar — paper-raised with a solid forest rule down the left —
   because it is the same kind of block: the product speaking rather than the
   report. The dotted leader is not used here; it means one thing on this page
   and this is not it. No card, no shadow, no pill. */
.livedesk {
  margin: 30px 0 6px;
  padding: 18px 22px;
  background: var(--paper-raised);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-left: 3px solid var(--forest);
}
.livedesk__label {
  margin: 0 0 8px !important;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.livedesk__h {
  margin: 0 0 10px !important;
  font-size: 21px;
  line-height: 1.26;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.livedesk__line {
  margin: 0 0 16px;
  color: var(--ink-2);
}
.livedesk p:last-child {
  margin-bottom: 0;
}
.livedesk__cta {
  display: inline-block;
  padding: 10px 18px;
  background: var(--forest);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.livedesk__cta:hover {
  background: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.livedesk__spec {
  margin: 20px 0 0;
  border-top: 1px solid var(--hairline);
}
.livedesk__spec > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 26px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.livedesk__spec > div:last-child {
  border-bottom: 0;
}
.livedesk__spec dt {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.livedesk__spec dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--ink);
}

@media (max-width: 560px) {
  .livedesk {
    padding: 15px 16px;
  }
  .livedesk__spec > div {
    grid-template-columns: 1fr;
    row-gap: 3px;
  }
  .livedesk__spec dd {
    text-align: left;
    white-space: normal;
  }
}

/* ------------------------------------------------------------------- tables */
.overscroll {
  margin: 20px 0 24px;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  background: var(--paper-raised);
}
.overscroll:focus-visible {
  outline: 2px solid var(--blue-text);
  outline-offset: 2px;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
  line-height: 1.48;
}
caption {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-sunk);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 8px 14px;
  border-bottom: 1px solid var(--hairline);
}
thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}
tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}
td.tnum,
th.tnum {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
td.m,
th.m {
  font-family: var(--mono);
  font-size: 12.5px;
}
.nought {
  color: var(--forest);
  font-weight: 500;
}
.lone {
  color: var(--clay-text);
  font-weight: 500;
}

/* the register appendix */
.reg td:first-child,
.reg th:first-child {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--forest);
  white-space: nowrap;
}

/* the dotted-leader claim rows */
.leaderlist {
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
  max-width: 96ch;
}
.leaderlist li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  column-gap: 16px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--rule-mid);
  margin: 0;
  align-items: baseline;
}
.leaderlist li:first-child {
  border-top: 1px dotted var(--rule-mid);
}
.leaderlist b {
  font-weight: 400;
}
.leaderlist span {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* the flow */
.routing {
  margin: 18px 0 10px;
  padding: 0;
  list-style: none;
  counter-reset: leg;
}
.routing > li {
  display: grid;
  grid-template-columns: 74px 1fr;
  column-gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}
.routing > li:last-child {
  border-bottom: 1px solid var(--hairline);
}
.routing__tag {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--forest);
  padding-top: 2px;
}
.routing__what {
  font-size: 15.5px;
  line-height: 1.5;
}
.routing__trigger {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.routing--back .routing__tag {
  color: var(--clay-text);
}

/* the state roll */
.stateroll {
  margin: 16px 0 22px;
  padding: 0;
  list-style: none;
}
.stateroll > li {
  display: grid;
  grid-template-columns: 190px 42px 1fr;
  column-gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}
.stateroll > li:last-child {
  border-bottom: 1px solid var(--hairline);
}
.stateroll__view {
  font-weight: 600;
  font-size: 15.5px;
}
.stateroll__count {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--forest);
  text-align: right;
}
.stateroll ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink-2);
}
.stateroll ul li {
  display: inline;
  margin: 0;
}
.stateroll ul li::after {
  content: ' · ';
  color: var(--rule-mid);
}
.stateroll ul li:last-child::after {
  content: '';
}

/* the residuals */
.deviation {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  max-width: 96ch;
}
.deviation > li {
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}
.deviation > li:last-child {
  border-bottom: 1px solid var(--hairline);
}
.deviation h4 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.deviation p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* --------------------------------------------------------------- the endnote */
.endnote {
  margin-top: 30px;
  border-top: 2px solid var(--forest);
  background: var(--paper-raised);
}
.endnote__in {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 34px 28px 52px;
}
.endnote h2 {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
}
.endnote__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 26px 36px;
}
.endnote__wide {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.endnote h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.endnote p {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.endnote pre {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  background: var(--paper-sunk);
  border: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.endnote pre:focus-visible {
  outline: 2px solid var(--blue-text);
  outline-offset: 2px;
}
.endnote .disclose {
  margin: 34px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--rule-mid);
  background: var(--paper-sunk);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 88ch;
}

/* ------------------------------------------------------------- narrow widths */
@media (max-width: 1080px) {
  :root {
    --rail: 118px;
    --rail-gap: 22px;
  }
  .pl__pair--wide {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  :root {
    --rail: 0px;
    --rail-gap: 0px;
  }
  .frontis__title,
  .frontis__claim,
  .abstract,
  .datasheet,
  .datasheet > div,
  .keyplate,
  .toc,
  .division,
  .sect {
    grid-template-columns: 1fr;
  }
  .frontis__claim p,
  .abstract__body,
  .keyplate dl,
  .toc__cols,
  .sect__body {
    grid-column: 1;
  }
  .frontis__ref,
  .abstract__label,
  .keyplate__label,
  .toc__label {
    margin-bottom: 8px;
  }
  .datasheet dt {
    padding-top: 0;
    margin-bottom: 3px;
  }
  .sect__rail {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dotted var(--rule-mid);
  }
  .sect__tag {
    display: inline;
  }
  .sect__where {
    display: inline;
    margin-top: 0;
  }
  .qrefs {
    margin: 0;
    padding: 0;
    border-top: 0;
    flex-basis: 100%;
  }
  .keyplate dl {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .keyplate dd {
    margin-bottom: 8px;
  }
  .leaderlist li,
  .routing > li,
  .stateroll > li {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .stateroll__count {
    text-align: left;
  }
  .pl__cap {
    grid-template-columns: 1fr;
  }
  .pl__source {
    grid-column: 1;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  .gnav__in,
  .frontis__in,
  .division,
  .report,
  .endnote__in {
    padding-left: 18px;
    padding-right: 18px;
  }
  .toc a {
    grid-template-columns: 1fr;
    row-gap: 1px;
  }
  .stated {
    padding: 14px 15px;
  }
}

/* --------------------------------------------------------------------- print */
@media print {
  .gnav,
  video {
    display: none;
  }
  body {
    background: #fff;
    font-size: 11pt;
  }
  body::before {
    display: none;
  }
  .sect {
    break-inside: avoid;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}