@charset "utf-8";

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

   Visual mode (docs/spec/05_RILL/PROJECT_BRIEF.md):
   "Tactile cash ledger and forecast stream".

   Written for this page. Measured against portfolio/wayfold/case-study.css,
   portfolio/tracelab/case-study.css, portfolio/aster-shift/case-study.css and
   portfolio/relaygrid/case-study.css, the only class 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, restyled here for
   paper.

   That was NOT true of the first draft, and the measurement is why it is stated
   here rather than asserted: the draft shared 41 names with RelayGrid — .entry,
   .entry__in, .record, .masthead, .exhibit*, .ledger, .reading, .legs, .edges,
   .measure, .docket, .register*, .partmark* — because the structural vocabulary
   had been inherited rather than written. The names below are the ledger's own
   (.book, .line, .line__date, .line__rill, .line__total, .totals, .shots,
   .figblock*, .moves, .breaks, .statelist, .sums, .qty). PACKAGE.md carries the
   command and its output.

   Four structural commitments, none of which the four earlier case studies
   make:

   1. THE LOAD-BEARING COLUMN IS ON THE RIGHT, AND IT CARRIES MONEY. Every
      entry in part one ends in a right-aligned figure set in mono at a fixed
      column, so the quantities line up down the page and can be read as a
      column rather than hunted for in prose. RelayGrid's fixed column is on the
      left and carries time; TraceLab's right margin carries cross-references;
      neither carries a value. Under 1000 px the column moves above the prose
      rather than wrapping into it, because a figure that has drifted out of its
      column is worse than no column.

   2. THE RILL. One 3 px vertical rule runs the whole length of part one, in the
      product's own `lime` while the forecast is above the reserve and in `ink`
      from the entry where it crosses. It is the page reading its own subject:
      the product paints exactly this rule down the gutter of its timeline. It
      is also the only use of lime on the page.

   3. A DOUBLE RULE MEANS A TOTAL; A HAIRLINE MEANS A SEPARATOR; NOTHING IS
      DASHED. Wayfold reserves dashes for detours, TraceLab for anything
      provisional, Aster Shift has none and RelayGrid uses them for a zone
      boundary. Here the ledger's own convention applies instead: when a block
      closes an arithmetic it is closed by a 3 px double rule, and that is the
      only place one appears.

   4. THE PAGE IS SET AGAINST THE PRODUCT, NOT WITH IT. The product is IBM Plex
      Sans and IBM Plex Mono; this page is Bitter and DM Mono, so that every
      screen capture 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 #F3F0E7. No gradient, no drop
   shadow except the two elements that quote a sheet, no card grid, no pill, no
   circle. Every text run sits on a solid colour, so no run is unmeasurable.
   ========================================================================= */

/* -------------------------------------------------------------------------
   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.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Bitter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('assets/fonts/bitter-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Bitter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url('assets/fonts/bitter-latin-wght-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('assets/fonts/dm-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('assets/fonts/dm-mono-latin-500-normal.woff2') format('woff2');
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* The product's five, unaltered. */
  --paper: #f3f0e7;
  --ink: #181a18;
  --lime: #c8f33d;
  --blue: #3156c8;
  --risk: #d65443;

  --paper-raised: #fbfaf5;
  --paper-sunk: #e7e3d5;
  --paper-deep: #dfdaca;

  --ink-2: #434743;
  --ink-3: #5f645e;

  --rule: #cfcab8;
  --rule-2: #b6b09b;
  --rule-3: #8b8571;

  --lime-sunk: #edf7c4;
  --blue-sunk: #e0e6f7;
  --risk-text: #9e2f20;
  --risk-sunk: #f7e3df;

  --serif: 'Bitter Variable', Georgia, 'Times New Roman', serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* The four tracks of the ledger line. They are sized so the body column is
     885 px at 1440 — wide enough for a 390 px capture beside its measurements —
     WITHOUT any child having to overhang its parent. An overhanging child is
     not a layout preference: axe cannot determine a background for a text run
     whose ancestor box does not contain it, and reports the run as
     indeterminate. Widening the track measures; overhanging it does not. */
  --page: 1340px;
  --stamp-w: 140px;
  --fig-w: 170px;
  --gap: 30px;

  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.68;
  font-weight: 400;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

/*
  The ledger's own ruling: one hairline every 34 px, at 3.5 % strength.

  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 — with the ruling on `body`, every one of
  the page's 764 text runs came back unmeasured, which is the exact failure this
  page criticises in §"the one raster state". Behind `body` and out of the
  ancestor chain, every run is measured.
*/
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(24, 26, 24, 0.035) 0,
    rgba(24, 26, 24, 0.035) 1px,
    transparent 1px,
    transparent 34px
  );
}

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

/* File paths, identifiers and mono runs are the only strings on this page 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. */
.code__head,
.figblock__meta,
.shot__cap,
.facts dd,
.totals dt,
.totals dd,
.statelist ul,
.contents a b,
.contents a span,
.leg__path,
.endmatter p {
  overflow-wrap: anywhere;
}

a {
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

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

/* ------------------------------------------------------------------ masthead */
.head {
  border-bottom: 3px double var(--rule-3);
  background: var(--paper);
}
.head__in {
  max-width: var(--page);
  margin: 0 auto;
  padding: 54px 26px 46px;
}

.head__kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 20px;
}
.head__kicker b {
  color: var(--ink);
  font-weight: 500;
}

.head__title {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px;
}
h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(52px, 9vw, 108px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin: 0;
}
.head__subject {
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.3;
  font-style: italic;
  color: var(--ink-2);
  margin: 0 0 8px;
  max-width: 30ch;
}

.head__lede {
  font-size: clamp(18px, 1.55vw, 20px);
  line-height: 1.62;
  max-width: 68ch;
  margin: 26px 0 0;
}

/* The docket — a ruled two-column ledger of what the project is. */
.facts {
  margin: 38px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 0 44px;
  border-top: 1px solid var(--rule-2);
}
.facts > div {
  display: grid;
  grid-template-columns: 122px 1fr;
  gap: 0 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.facts dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.facts dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
}
.facts dd b {
  font-weight: 600;
}

/* The register — the contents, set as a ledger of dates and figures. */
.contents {
  margin: 42px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px 44px;
}
.contents__head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-2);
}
.contents ol {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
.contents li {
  border-bottom: 1px solid var(--rule);
}
.contents a {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--ink);
  align-items: baseline;
}
.contents a:hover span {
  text-decoration: underline;
}
.contents a b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}
.contents a span {
  font-size: 15px;
  line-height: 1.4;
}

/* ------------------------------------------------------------------- record */
.book {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 26px;
}

.partband {
  display: grid;
  grid-template-columns: var(--stamp-w) 1fr;
  gap: var(--gap);
  padding: 22px 0;
  align-items: baseline;
}
.partband__id {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.partband__name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bandrule {
  border: 0;
  border-top: 3px double var(--rule-3);
  margin: 0;
}

/* -------------------------------------------------------------------- entry */
.line {
  border-bottom: 1px solid var(--rule-2);
}
.line__in {
  display: grid;
  grid-template-columns: var(--stamp-w) 3px minmax(0, 1fr) var(--fig-w);
  gap: 0 var(--gap);
  padding: 46px 0 40px;
}
/* A grid item's automatic minimum size is its content's min-content size, and
   this page deliberately carries content wider than the column — the 1:1 crops.
   Every track and every item is told it may shrink, and the wide thing scrolls
   inside its own box instead of pushing the page sideways. */
.line__in > * {
  min-width: 0;
}

.line__date {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  display: block;
  letter-spacing: -0.01em;
}
.line__where {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
  display: block;
  margin-top: 6px;
}
.line__stamp {
  position: sticky;
  top: 22px;
  align-self: start;
}

/* The rill. Lime while the projection is above the reserve, ink after the
   entry where it crosses — the same rule the product paints down its own
   timeline gutter, and the only lime on this page. */
.line__rill {
  background: var(--lime);
  border-left: 1px solid rgba(24, 26, 24, 0.35);
  border-right: 1px solid rgba(24, 26, 24, 0.35);
}
.line--crossed .line__rill,
.line--below .line__rill {
  background: var(--ink);
  border-color: var(--ink);
}
.line--crossed .line__rill {
  background: linear-gradient(to bottom, var(--lime) 0 96px, var(--ink) 96px 100%);
  border-color: var(--ink);
}

.line__total {
  font-family: var(--mono);
  text-align: right;
  align-self: start;
}

.line__total b {
  display: block;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.line__total span {
  display: block;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
}
.line__total b.is-risk {
  color: var(--risk-text);
}

/* ------------------------------------------------------------------- prose */
.column {
  max-width: 68ch;
  min-width: 0;
}
h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.16;
  letter-spacing: -0.028em;
  margin: 0 0 20px;
  max-width: 22ch;
}
h3 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 38px 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule-2);
}
p {
  margin: 0 0 17px;
}
.column > p:last-child {
  margin-bottom: 0;
}
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}

/* Mono runs: a value, an identifier, a control's own label. */
.qty {
  font-family: var(--mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.path {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--ink-2);
  background: var(--paper-sunk);
  padding: 1px 5px;
  border-radius: 2px;
  word-break: break-word;
}
.key {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--blue);
  background: var(--blue-sunk);
  padding: 1px 6px;
  border-radius: 2px;
}
.nil {
  color: var(--ink);
}

/* A sentence the product itself paints. */
.quote {
  margin: 22px 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--ink);
  font-size: 18.5px;
  line-height: 1.55;
}
.quote p {
  margin: 0 0 10px;
}
.quote p:last-child {
  margin: 0;
}
.quote cite {
  display: block;
  margin-top: 9px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* An aside that is part of the argument. Flat, sunk, never a card. */
.remark {
  margin: 24px 0;
  padding: 18px 20px;
  background: var(--paper-sunk);
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.remark__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.remark p {
  font-size: 16px;
  margin: 0 0 12px;
}
.remark p:last-child {
  margin: 0;
}

/* ------------------------------------------------------- the running build
   Added for publication: the prototype this page is written about is served
   in `prototype/` beside it, so the page carries the way in. Paper grammar
   only — hairlines, a solid rule down the left in the product's own `blue`,
   no card, no dash. The 3 px double rule is left to the blocks that close an
   arithmetic, which this one does not. */
.livedesk {
  margin: 30px 0 6px;
  padding: 19px 22px;
  background: var(--paper-raised);
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  box-shadow: inset 3px 0 0 var(--blue);
}
.livedesk__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.livedesk__h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.24;
  letter-spacing: -0.018em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 10px;
  padding-bottom: 0;
  border-bottom: 0;
}
.livedesk__line {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--ink-2);
}
.livedesk p:last-child {
  margin-bottom: 0;
}
.livedesk__cta {
  display: inline-block;
  padding: 11px 18px;
  border-radius: 2px;
  background: var(--blue);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.livedesk__cta:hover {
  background: var(--ink);
}
.livedesk__cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.livedesk__spec {
  margin: 20px 0 0;
  border-top: 1px solid var(--rule-2);
}
.livedesk__spec > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 26px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.livedesk__spec > div:last-child {
  border-bottom: 0;
}
.livedesk__spec dt {
  font-size: 15px;
  color: var(--ink-2);
}
.livedesk__spec dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

/* --------------------------------------------------------------- exhibits */
.figblock {
  margin: 0;
  grid-column: 1 / -1;
  padding: 8px 0 46px;
  min-width: 0;
}
.line__col .figblock {
  padding-top: 30px;
}
.figblock__head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: 18px;
}
.figblock__id {
  flex: 0 0 auto;
  width: 60px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.figblock__name {
  flex: 1 1 260px;
  font-size: 15.5px;
  line-height: 1.4;
}
.figblock__meta {
  flex: 0 1 auto;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  text-align: right;
}

/* A row of phone plates. The capture is 1170 × 2532 — 390 × 844 at
   deviceScaleFactor 3 — and is shown at its own aspect on paper, with a
   hairline and no device chrome invented around it. */
.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: flex-start;
  min-width: 0;
}
.shot {
  flex: 0 1 300px;
  min-width: 0;
  /* The UA stylesheet gives <figure> a 40 px side margin, which is enough to
     wrap a two-plate row that would otherwise fit. */
  margin: 0;
}
.shot img {
  width: 100%;
  border: 1px solid var(--rule-2);
  background: var(--paper-raised);
}
.shot figcaption,
.shot__cap {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.shot__cap b {
  color: var(--ink);
  font-weight: 500;
  display: block;
}
/* A single plate on a wide page: the capture on the left, its caption given
   room on the right, rather than one narrow column and a field of paper. */
.shot--solo {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0 30px;
  align-items: start;
}
.shot--solo figcaption {
  margin-top: 0;
  padding: 3px 0 0 24px;
  border-top: 0;
  border-left: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-3);
  max-width: 62ch;
}
.shot--solo figcaption b {
  display: block;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 4px;
}
@media (max-width: 700px) {
  .shot--solo {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .shot--solo figcaption {
    margin-top: 9px;
    padding: 8px 0 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

/* A magnified detail: the same file, cropped in CSS, shown at 1 image pixel to
   1 page pixel. No new image is produced for any crop on this page. */
.crop {
  border: 1px solid var(--rule-2);
  background: var(--paper-raised);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/*
  The crop is drawn as a background rather than as an oversized <img> inside an
  `overflow: hidden` box. Both look identical; only one is measurable. An
  absolutely-positioned image clipped by its parent still reports a rect the
  full height of the file, and axe reads rects rather than paint, so every
  caption under a crop came back as "overlapped" and therefore unmeasured. A
  background paints no element and reports no rect. `role` and `aria-label`
  carry what `alt` carried.
*/
.crop__in {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
}
.crops {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}
.crops > figure {
  margin: 0;
  min-width: 0;
}
/* The cropped image is an oversized absolutely-positioned element clipped by
   its box, so its RECT still runs down the page past this caption even though
   none of it is painted there. axe reads rects, not paint, and reported the
   caption as overlapped and therefore unmeasurable. An explicit opaque ground
   and a paint order above the crop makes it measurable again. */
.crops figcaption {
  position: relative;
  z-index: 1;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  max-width: 82ch;
}
.crops figcaption b {
  color: var(--ink);
  font-weight: 500;
  display: block;
}

/* The ledger of measurements under an exhibit. Closed by a double rule,
   because it totals something. */
.totals {
  margin: 22px 0 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 3px double var(--rule-3);
}
.totals > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 26px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.totals > div:last-child {
  border-bottom: 0;
}
.totals dt {
  font-size: 15px;
  color: var(--ink-2);
}
.totals dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}
.totals dd.nil {
  color: var(--ink);
}

/* A reading list under an exhibit: what it covers, how it was driven. */
.notes {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: 92ch;
}
.notes li {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 6px 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.55;
}
.notes li b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}

.figblock__foot {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--ink-2);
  max-width: 92ch;
}

video {
  width: 100%;
  max-width: 390px;
  display: block;
  border: 1px solid var(--rule-2);
  background: var(--paper-raised);
}

/* The take: the phone-shaped file on the left, its measurements beside it,
   rather than a 390 px column of video with 300 px of paper next to it. */
.takelay {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 0 34px;
  align-items: start;
}
.takelay .totals {
  margin-top: 0;
}
.takelay .notes {
  margin-top: 22px;
}
.takelay .notes li {
  grid-template-columns: 106px minmax(0, 1fr);
  font-size: 14.5px;
}
@media (max-width: 880px) {
  .takelay {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px 0;
  }
  video {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------- tables */
.tablewrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 22px 0;
  min-width: 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 3px double var(--rule-3);
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 15px;
}
th,
td {
  text-align: left;
  padding: 8px 18px 8px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
tr:last-child td {
  border-bottom: 0;
}
th {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--rule-2);
}
td.n,
th.n {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  padding-right: 0;
}
caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 8px;
}

/* ------------------------------------------------------------------ tally */
.sums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0;
  margin: 24px 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 3px double var(--rule-3);
}
.sums > div {
  padding: 14px 20px 14px 0;
  border-bottom: 1px solid var(--rule);
}
.sums b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.sums span {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ------------------------------------------------------ task-flow diagram */
.flow {
  margin: 20px 0 0;
}
.moves {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-2);
}
.moves > li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 4px 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.leg__id {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
}
.leg__path {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 4px;
}
.leg__path i {
  font-style: normal;
  color: var(--ink);
}
/* The arrow between origin and destination is generated rather than written.
   As a text node it is a run whose only content is a symbol, which axe cannot
   compute a contrast ratio for and reports as indeterminate; as generated
   content it is not a run at all, and the two endpoints still read in order. */
.leg__path i.to::before {
  content: ' \2192\00a0';
  color: var(--ink-3);
}
.leg__trigger {
  font-size: 15.5px;
  margin: 0;
  line-height: 1.5;
}
.moves > li.is-return .leg__id {
  color: var(--ink-3);
}
.breaks {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 3px double var(--rule-3);
}
.breaks > li {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.breaks > li:last-child {
  border-bottom: 0;
}
.edge__head {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--risk-text);
  margin: 0 0 6px;
}
.edge__head b {
  font-weight: 500;
  color: var(--ink);
}
.edge__exits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 26px;
  margin: 8px 0 0;
  font-size: 15px;
}
.edge__exits > div {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 12px;
  padding: 4px 0;
}
.edge__exits dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 4px;
}
.edge__exits dd {
  margin: 0;
  line-height: 1.5;
}

/* ------------------------------------------------------------ state list */
.statelist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0 40px;
  margin: 22px 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 3px double var(--rule-3);
}
.statelist > div {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.statelist h4 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 6px;
}
.statelist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-2);
}
.statelist li.is-seeded::after {
  content: ' ·seed';
  color: var(--ink-3);
}

/* --------------------------------------------------------------- source */
.code {
  margin: 22px 0;
  min-width: 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  background: var(--paper-raised);
}
.code__head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.code pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--ink);
  tab-size: 2;
}

/* ------------------------------------------------------------- colophon */
.endmatter {
  border-top: 3px double var(--rule-3);
  margin-top: 20px;
  background: var(--paper-sunk);
}
.endmatter__in {
  max-width: var(--page);
  margin: 0 auto;
  padding: 44px 26px 64px;
}
.endmatter h2 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 24px;
  max-width: none;
}
.endmatter__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 44px;
  border-top: 1px solid var(--rule-2);
}
.endmatter__grid section {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-2);
}
.endmatter h3 {
  margin: 0 0 8px;
  border: 0;
  padding: 0;
}
.endmatter p {
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--ink-2);
}
.endmatter p:last-child {
  margin: 0;
}
.statement {
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 3px double var(--rule-3);
  font-size: 16px;
  max-width: 74ch;
  color: var(--ink);
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  :root {
    --stamp-w: 124px;
    --fig-w: 150px;
    --gap: 24px;
  }
  h2 {
    max-width: 26ch;
  }
}

@media (max-width: 900px) {
  :root {
    --gap: 20px;
  }
  .line__in {
    grid-template-columns: 3px 1fr;
    gap: 0 20px;
  }
  .line__stamp {
    grid-column: 2;
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: baseline;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--rule);
  }
  .line__rill {
    grid-row: 1 / -1;
    grid-column: 1;
  }
  .line__where {
    margin-top: 0;
  }
  /* The figure column moves ABOVE the prose rather than wrapping into it. */
  .line__total {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    position: static;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 3px double var(--rule-3);
  }
  .line__col {
    grid-column: 2;
    grid-row: 3;
  }
  .line__total span {
    border-top: 0;
    padding-top: 4px;
    margin-top: 4px;
  }
  .partband {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .figblock__meta {
    text-align: left;
    margin-left: 0;
  }
  .notes li {
    grid-template-columns: 1fr;
  }
  .moves > li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16.5px;
  }
  /* A mono run is held on one line everywhere else so a figure cannot be split
     across a line break. Below 560 the two longest runs on the page — the axe
     tag set and an Open Design run id — are wider than the measure, so wrapping
     is allowed here. Neither `£1,240.00` nor any other figure contains a space
     or a hyphen, so none of them gains a break opportunity from this. */
  .qty {
    white-space: normal;
  }
  .head__in,
  .book,
  .gnav__in,
  .endmatter__in {
    padding-left: 18px;
    padding-right: 18px;
  }
  .facts > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .contents a {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .shot {
    flex: 1 1 100%;
  }
  .edge__exits > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

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

@media print {
  .gnav,
  video {
    display: none;
  }
  body {
    background: #fff;
    background-image: none;
  }
}