/* =============================================================================
   Math Model: the few things page.css does not already do.

   HOUSE RULES THIS FILE OBEYS
   1. One white ground. Every section is white, every box is white with a
      hairline and a 3px left edge in the colour of what it is.
   2. Figures are one component with a fixed set of frames, and every one opens
      full-window. The system is the Sustainability one, unchanged.
   3. Nothing important is behind a click.
   4. Numbers in any rail agree with the section numbers page.js writes.
   5. Nothing loads from outside iGEM, and KaTeX is vendored inside the repo
      (assets/vendor/katex), so every equation on this page is LaTeX written
      into the HTML and rendered locally by assets/js/math.js. .eqn sets the
      block around it; the equation number is a \tag in the LaTeX itself.

   COLOUR. Three provenance colours and no others: leaf for a number we
   measured, slate for a number from a paper, amber for a number someone chose.
   They appear on the provenance tags, on the left edge of an equation block,
   and nowhere else. Amber is also the fix marker, which is the same claim in
   both places: this one is not settled.
   ========================================================================== */

.mm {
  --ours:  var(--leaf-700);
  --lit:   var(--slate-700);
  --assum: var(--amber-700);
}

/* Callouts keep the white ground the rest of the page has. */
.mm .pagebody .callout,
.mm .pagebody .callout--unproven,
.mm .pagebody .callout--borrowed,
.mm .pagebody .callout--medal {
  background: var(--white);
  border-left-width: 3px;
}

/* ============================================================== RHYTHM ====
   Block 3 runs to seven results, fourteen tables and six boxes, so the page
   needs a step between "new result" and "new paragraph" that a reader can see
   without reading. A Result heading gets the same air a section gets, an h4
   inside one gets the step below that, and the headings are allowed to
   balance their lines because most of them are sentences and the last line of
   an unbalanced one was coming out as a single word.                       */

.mm .sec h3 { margin-top: var(--sp-7); }
.mm .sec h4 { margin-top: var(--sp-6); }
.mm .sec h2, .mm .sec h3, .mm .sec h4 { text-wrap: balance; }
.mm .sec p, .mm .fig figcaption, .mm .ledger p { text-wrap: pretty; }

/* ================================================================== TOC ====
   The rail lists each block and, under it, that block's results, and its
   headings are sentences. A sticky rail taller than the window can never be
   scrolled to its end, which would put the Conclusion out of reach. Cap it
   at the window and let it scroll itself.
   The line and the padding are tightened a little as well, because most
   entries run to three or four lines at 15rem and the default rhythm was
   written for one-line labels.                                             */

@media (min-width: 1040px) {
  .mm .toc {
    max-height: calc(100vh - var(--nav-h) - var(--sp-6) - var(--sp-5));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
    padding-right: var(--sp-2);
  }
}

/* ================================================================ CHAIN ====
   The three models as three linked cards under the overview, because the
   whole argument of the page is that one model's output is the next one's
   input, and a list does not show a handoff.                               */

.mm .chain {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) { .mm .chain { grid-template-columns: repeat(3, 1fr); } }

.mm .link {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) - 3px);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--leaf-700);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mm a.link:hover,
.mm a.link:focus-visible {
  border-color: var(--gray-300);
  border-left-color: var(--leaf-700);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.mm .link__no {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--leaf-700);
  color: var(--white);
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -.02em;
}
.mm .link__name { font-weight: 650; line-height: 1.3; }
.mm .link__io {
  margin: 0;
  font-size: var(--text-sm); line-height: 1.5; color: var(--gray-600);
}
.mm .link__io b {
  display: block;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--gray-500);
}
.mm .link__state {
  justify-self: start;
  padding: .15rem .5rem;
  border: 1px solid var(--gray-300);
  border-radius: 100px;
  font-size: var(--text-xs); font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gray-600);
}
.mm .link__state[data-state="fitted"]   { border-color: var(--leaf-500);  color: var(--leaf-700); }
.mm .link__state[data-state="literature"] { border-color: var(--slate-700); color: var(--slate-700); }
.mm .link__state[data-state="assumed"]  { border-color: var(--amber-700); color: var(--amber-700); }

/* ============================================================= EQUATIONS ===
   No external maths library, no images of equations. A block, the variables
   in italic, the note under it in small grey, and a left edge that says where
   the numbers in it came from: leaf ours, slate a paper, amber a choice.   */

.mm .eqn {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 1.0625rem;
  line-height: 2.1;
  color: var(--black);
  overflow-x: auto;
}
.mm .eqn--ours  { border-left-color: var(--ours); }
.mm .eqn--lit   { border-left-color: var(--lit); }
.mm .eqn--assum { border-left-color: var(--assum); }

.mm .eqn i { font-style: italic; }
.mm .eqn sub, .mm .eqn sup { font-style: normal; }
.mm .eqn b {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--gray-500);
  line-height: 1.4;
}
.mm .eqn em {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--text-sm); font-style: normal; line-height: 1.6;
  color: var(--gray-600);
}
/* the label rule above is for the block's own title. A bold run inside the
   note under an equation is emphasis in a sentence, so it stays inline. */
.mm .eqn em b {
  display: inline;
  margin: 0;
  font-size: inherit; font-weight: 700;
  letter-spacing: inherit; text-transform: none;
  color: var(--gray-700);
}
/* the maths itself. KaTeX sets its own metrics; these rules only keep a long
   display line scrollable on a phone instead of widening the page, and stop
   the block's own left rule fighting the equation's indent. */
.mm .eqn .math--display { margin: .35rem 0; }
.mm .eqn .katex-display { margin: 0; }
.mm .eqn .katex { font-size: 1.05em; }
@media (max-width: 30rem) { .mm .eqn .katex { font-size: .95em; } }

/* the composed hero: it is a laid-out plate, not a photograph, so it is not
   pushed down the way a face or a horizon would be. */
.mm .pagehead__hero img { object-position: center center; }
.mm .pagehead--hero .pagehead__inner { padding-top: var(--sp-5); }

/* a paragraph sitting beside a figure inside .figs reads as body text, not as
   a caption, so it keeps the prose measure. */
.mm .figs > div > p:first-child { margin-top: 0; }

/* ============================================================ PROVENANCE ===
   Every parameter carries one of these three and never none of them.      */

.mm .prov {
  display: inline-block;
  padding: .1rem .45rem;
  border: 1px solid var(--gray-300);
  border-radius: 100px;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--gray-600);
}
.mm .prov--ours  { border-color: var(--ours);  color: var(--ours); }
.mm .prov--lit   { border-color: var(--lit);   color: var(--lit); }
.mm .prov--assum { border-color: var(--assum); color: var(--assum); }

/* ================================================================= FIX =====
   An editorial marker: something the team still has to settle before the
   wiki freeze. Numbered M1, M2... so the list in the status box matches.   */

.mm .fix {
  margin: var(--sp-5) 0;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--amber-700);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--text-sm);
  color: var(--gray-700);
}
.mm .fix > :first-child { margin-top: 0; }
.mm .fix > :last-child  { margin-bottom: 0; }
.mm .fix__label {
  display: block; margin-bottom: var(--sp-1);
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--amber-700);
}
.mm .fix ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; }
.mm .fix li + li { margin-top: var(--sp-1); }

/* =============================================================== LEDGER ====
   What a model is entitled to claim, and what it is not. Every one of the
   three model sections ends with one.                                      */

.mm .ledger {
  display: grid; gap: var(--sp-4);
  margin: var(--sp-6) 0;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .mm .ledger { grid-template-columns: 1fr 1fr; } }

.mm .ledger > div {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) - 3px);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.mm .ledger__yes { border-left-color: var(--leaf-700) !important; }
.mm .ledger__no  { border-left-color: var(--rust-700) !important; }
.mm .ledger b {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.mm .ledger__yes b { color: var(--leaf-700); }
.mm .ledger__no  b { color: var(--rust-700); }
.mm .ledger ul { margin: 0; padding-left: 1.15em; }
.mm .ledger li + li { margin-top: var(--sp-2); }

/* ============================================================== FIGURES ====
   Two frames and nothing sized by hand, the same component Sustainability
   and Engineering use.

     .fig           a plate: a 4:3 box, white mat, hairline.
     .fig--chart    a chart or a map. Contained, never cropped, because
                    cropping cuts the axis labels off.
     .fig--photo    a photograph or a screen. It fills its plate.
     .fig--wide     a wide plate, for a table-shaped chart like the heat map. */

.mm .fig { margin: 0 0 var(--sp-6); max-width: 34rem; }
.mm .fig.wide, .mm .figs .fig { max-width: none; }

.mm .fig__frame {
  position: relative;
  aspect-ratio: var(--fr, 4 / 3);
  display: grid; place-items: center;
  overflow: hidden;
  padding: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}
.mm .fig__frame img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border: 0; border-radius: 0; background: none;
  cursor: zoom-in;
}
.mm .fig--photo .fig__frame img,
.mm .fig--chart .fig__frame img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
}
.mm .fig--photo .fig__frame { padding: 0; }
.mm .fig--photo .fig__frame img { object-fit: cover; object-position: center; }

.mm .fig--chart { --fr: 3 / 2; }
.mm .fig--chart .fig__frame { padding: 0; }
.mm .fig--chart .fig__frame img {
  padding: var(--sp-3); box-sizing: border-box;
  object-fit: contain;
}
.mm .fig--strip { --fr: 7 / 2; }
.mm .fig--tall  { --fr: 1 / 1; }

.mm .fig figcaption {
  margin-top: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--leaf-700);
  font-size: var(--text-sm); line-height: 1.6;
  color: var(--gray-600);
}
.mm .fig figcaption b { color: var(--gray-700); font-weight: 650; }

/* A row of figures: equal columns, so equal frames. Captions are not equal
   length, so the frames share one grid row and the captions the next. */
.mm .figs { display: grid; gap: var(--sp-5); margin: var(--sp-6) 0; align-items: start; }
@media (min-width: 46rem) {
  .mm .figs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm .figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mm .figs .fig { margin-bottom: 0; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 46rem) {
    .mm .figs[class*="figs--"] { grid-template-rows: auto auto; }
    .mm .figs[class*="figs--"] .fig {
      display: grid; grid-row: span 2; grid-template-rows: subgrid;
    }
  }
}

/* ============================================================== TABLES =====
   Block 3 is table-heavy and the body column is one measure wide, so a table
   has to fit that measure or it scrolls sideways and hides a column. Two
   rules do all the work: a head cell wraps like any other cell (page.css
   keeps heads on one line, which is what pushed seven-column tables 440px
   past the column), and the gutter between columns is one step tighter than
   the row rhythm, with the outer edge kept at the full step so the table
   still sits on the same left edge as the prose. With both, every table on
   this page fits the measure at desktop width without a scrollbar. A head
   that wraps sits on the bottom of its row, so a one-word label stays next
   to the numbers under it instead of floating three lines above them.      */

.mm table.data { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.mm table.data th, .mm table.data td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--gray-200);
  text-align: left; vertical-align: top;
}
.mm table.data th:first-child, .mm table.data td:first-child { padding-left: var(--sp-4); }
.mm table.data th:last-child,  .mm table.data td:last-child  { padding-right: var(--sp-4); }
.mm table.data thead th {
  border-bottom: 1px solid var(--gray-400);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--gray-600);
  white-space: normal;
  vertical-align: bottom;
}
.mm table.data tbody tr:last-child td { border-bottom: 1px solid var(--gray-400); }
.mm table.data td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* a head over a column of numbers sits on the same edge the numbers do, so a
   wrapped two-line label still reads as belonging to the column under it.
   The class is on the head cell only where every body cell in that column is
   a number, so it never moves a word column. The head still wraps. */
.mm table.data thead th.num { text-align: right; }
.mm table.data .sym { font-style: italic; white-space: nowrap; }

/* =============================================================== PRINT ===== */

@media print {
  .mm .chain { grid-template-columns: repeat(3, 1fr); }
  .mm .fig, .mm .ledger, .mm .eqn { break-inside: avoid; }
  .mm .lightbox, .sitenav-spacer { display: none !important; }
}

/* ============================================================ LIGHTBOX =====
   page.js builds the overlay. Same near-opaque treatment Engineering and
   Sustainability settled on, so a pale chart does not sit over body text.  */

.mm .lightbox {
  display: none;
  place-items: initial;
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 3vh 3vw;
  background: rgb(8 20 15 / .97);
}
.mm .lightbox.is-open { display: flex; }
.mm .lightbox figure { margin: 0; width: 80vw; display: grid; justify-items: center; }
.mm .lightbox img {
  max-width: 80vw; max-height: 76vh;
  width: auto; height: auto;
  object-fit: contain;
  background: var(--white);
}
.mm .lightbox figcaption {
  width: 80vw; max-width: 80vw;
  margin: var(--sp-4) 0 0;
  text-align: left;
  color: var(--gray-200);
  font-size: var(--text-sm); line-height: 1.6;
}
.mm .lightbox figcaption b { color: var(--white); }

/* r2 (29 Sep): on a phone a wide display equation scrolls sideways; its (n) tag then
   follows the equation instead of sitting on top of it at the right edge. */
@media (max-width: 640px) {
  .katex-display > .katex > .katex-html { white-space: nowrap; }
  .katex-display > .katex > .katex-html > .tag { position: static; display: inline-block; margin-left: 1.2em; }
}

/* ================================================================ CHARTS ===
   Block 3 draws its own figures as inline SVG instead of shipping webp, for
   two reasons: the numbers in them are printed in the tables beside them, so
   a reader can check the drawing against the data, and nothing in this block
   came from the draft's figure set. The component is the Plants one, with the
   provenance palette of this page substituted for its two-series one.

   SERIES COLOUR. Grey is the buffer control. Leaf is a protectant arm, dark
   for the timing that worked (before the salt) and mid for the two that
   worked less well. Rust is a case that does not pay back. No other hues. */

.mm .chart { margin: 0; }
.mm .chart svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }

.mm .chart .ax line { stroke: var(--gray-200); stroke-width: 1; }
.mm .chart .ax .ax--base { stroke: var(--gray-400); }
.mm .chart .ax .ax--zero { stroke: var(--gray-500); stroke-width: 1.4; }
.mm .chart .divide { stroke: var(--gray-200); stroke-width: 1; stroke-dasharray: 3 4; }

.mm .chart .tick text { fill: var(--gray-500); font-size: 12px; font-variant-numeric: tabular-nums; }
.mm .chart .cat, .mm .chart text.cat { fill: var(--gray-700); font-size: 12.5px; font-weight: 650; }
.mm .chart .sub, .mm .chart text.sub { fill: var(--gray-500); font-size: 11px; }
.mm .chart .val, .mm .chart text.val {
  fill: var(--gray-600); font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.mm .chart .axtitle {
  fill: var(--gray-500); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

/* bars: hover one, the rest fade, same affordance Plants uses */
.mm .chart .bar rect { transition: opacity .12s ease; }
.mm .chart:hover .bar rect { opacity: .45; }
.mm .chart .bar rect:hover { opacity: 1; }
.mm .chart .bar--ctl  rect { fill: var(--gray-400); }
.mm .chart .bar--pre  rect { fill: var(--leaf-700); }
.mm .chart .bar--accd rect { fill: var(--leaf-500); }
.mm .chart rect.miss {
  fill: none; stroke: var(--gray-300); stroke-width: 1.4; stroke-dasharray: 4 3;
}

/* lines */
.mm .chart .ln polyline { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.mm .chart .ln circle { stroke: var(--white); stroke-width: 1.6; }
.mm .chart .lbl { font-size: 12px; font-weight: 650; }
.mm .chart .ln--ctl polyline, .mm .chart .ln--ctl circle { stroke: var(--gray-400); }
.mm .chart .ln--ctl circle { fill: var(--gray-400); }
.mm .chart text.ln--ctl, .mm .chart .lbl.ln--ctl { fill: var(--gray-500); }
.mm .chart .ln--pre polyline, .mm .chart .ln--pre circle { stroke: var(--leaf-700); }
.mm .chart .ln--pre circle { fill: var(--leaf-700); }
.mm .chart .lbl.ln--pre { fill: var(--leaf-700); }
.mm .chart .ln--co polyline, .mm .chart .ln--co circle { stroke: var(--leaf-500); }
.mm .chart .ln--co circle { fill: var(--leaf-500); }
.mm .chart .lbl.ln--co { fill: var(--leaf-500); }
.mm .chart .ln--af polyline, .mm .chart .ln--af circle { stroke: var(--slate-700); }
.mm .chart .ln--af circle { fill: var(--slate-700); }
.mm .chart .lbl.ln--af { fill: var(--slate-700); }

/* the three dosing routes: one bar per route on a log axis */
.mm .chart--routes .rt__name { fill: var(--gray-700); font-size: 12.5px; font-weight: 650; }
.mm .chart .rt--ok  rect, .mm .chart .rt--ok  circle { fill: var(--leaf-700); }
.mm .chart .rt--mid rect, .mm .chart .rt--mid circle { fill: var(--amber-700); }
.mm .chart .rt--bad rect, .mm .chart .rt--bad circle { fill: var(--rust-700); }
.mm .chart .rt__mark line { stroke: var(--gray-500); stroke-width: 1.2; stroke-dasharray: 3 3; }
.mm .chart .rt__mark text { fill: var(--gray-500); font-size: 10.5px; font-weight: 650; }

/* cumulative cash flow */
.mm .chart--cash .cf--a polyline, .mm .chart--cash .cf--a circle { stroke: var(--leaf-700); }
.mm .chart--cash .cf--a circle { fill: var(--leaf-700); }
.mm .chart--cash .lbl.cf--a { fill: var(--leaf-700); }
.mm .chart--cash .cf--b polyline, .mm .chart--cash .cf--b circle { stroke: var(--amber-700); }
.mm .chart--cash .cf--b circle { fill: var(--amber-700); }
.mm .chart--cash .lbl.cf--b { fill: var(--amber-700); }
.mm .chart--cash .cf--c polyline, .mm .chart--cash .cf--c circle { stroke: var(--rust-700); }
.mm .chart--cash .cf--c circle { fill: var(--rust-700); }
.mm .chart--cash .lbl.cf--c { fill: var(--rust-700); }
.mm .chart .be circle { fill: none; stroke: var(--gray-500); stroke-width: 1.4; }
.mm .chart .be text { fill: var(--gray-600); font-size: 11px; font-weight: 700; }

/* a key under a chart, for the one figure whose series are not labelled in place */
.mm .chart__key {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--text-sm); color: var(--gray-600);
}
.mm .chart__key i {
  display: inline-block; width: .85rem; height: .85rem;
  margin-right: .4rem; vertical-align: -.1rem; border-radius: 2px;
}
.mm .chart__key .k--ctl  { background: var(--gray-400); }
.mm .chart__key .k--pre  { background: var(--leaf-700); }
.mm .chart__key .k--accd { background: var(--leaf-500); }

/* an inline-SVG figure still sits in the page's figure component, but it needs
   no fixed frame: the viewBox already fixes its ratio.

   On a phone the frame is about 300 px wide, and a 720-unit viewBox squeezed
   into it renders its 12 px labels at 5 px, which is a picture of a chart and
   not a chart. So the drawing stops shrinking at 34rem and the box scrolls
   sideways instead, which is what the tables beside it already do and what
   Measurement's charts already do. Nothing is hidden: every number in these
   four figures is also printed in a table in the same section.             */
.mm .fig > .chart {
  padding: var(--sp-3);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow-x: auto;
}
.mm .fig > .chart > svg { min-width: 34rem; }

/* a small note under a table, smaller than body and not a caption */
.mm .pagebody p.small {
  margin-top: calc(var(--sp-2) * -1);
  font-size: var(--text-sm); line-height: 1.6; color: var(--gray-600);
}

/* ===================================================== THE IHP SOFT JOIN ===
   10 Oct. The page keeps every word and every number it had; what changes is
   the shape. It carries `engage` beside `mm`, so engage.css supplies the
   frosted segmented control, the chapter heroes, the pale rounded cards and
   the folds, exactly as the Protein Design and Digital Twin pages do. These
   are the joins, and they load after engage.css so they win.

   The three blocks stay stacked, one under the next. The compression is
   inside a block: its five results are five chapters of one control instead
   of five screens in a column, and its assumptions and its derivations sit
   in folds, because they are evidence and the house rule folds evidence.   */

/* -- a result is a sentence, not a chapter name, so it is not set at 3rem -- */
.mm.engage .chap__hero { margin-bottom: var(--sp-6); text-align: left; }
.mm.engage .chap__title {
  margin: 0;
  font-size: clamp(1.3125rem, 1.1rem + .85vw, 1.75rem);
  line-height: 1.22;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.mm.engage .sec > h2 { margin-bottom: 0; }
.mm.engage .lede-c { margin: var(--sp-4) 0 var(--sp-6); max-width: 46rem; }
.mm.engage .lede-c p {
  font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.4375rem);
  font-weight: 600; line-height: 1.35; letter-spacing: -.018em;
  color: var(--ink); text-wrap: balance;
}
.mm.engage .rail--seg { margin-top: var(--sp-6); }
.mm.engage .rail--seg > .rail__panel .fig:last-of-type { margin-bottom: 0; }
/* a chapter's own h4s keep their step; the chapter title replaces the h3 one */
.mm.engage .chap__hero h3 { margin-top: 0; }

/* -- the three models as three linked cards, softened ---------------------- */
.mm.engage .chain { gap: 1rem; margin: var(--sp-6) 0 0; }
.mm.engage .link {
  gap: .5rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 0; border-radius: 24px;
  background: var(--well);
  box-shadow: none;
}
.mm.engage a.link:hover, .mm.engage a.link:focus-visible {
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 18px 34px -26px rgb(0 0 0 / .45);
  transform: translateY(-2px);
}
.mm.engage .link__no {
  width: 2rem; height: 2rem; border-radius: 10px;
  background: var(--pl); font-size: .9375rem;
}
.mm.engage .link__name {
  font-size: 1.1875rem; font-weight: 700; letter-spacing: -.018em; color: var(--ink);
}
.mm.engage .link__io { margin: .35rem 0 0; color: var(--ink-2); }
.mm.engage .link__io b {
  font-size: .6875rem; letter-spacing: .08em; color: var(--ink-3);
  margin-bottom: .1rem;
}
.mm.engage .link__io--on { margin-top: .55rem; }

/* the three cards are read across as much as down ("what does block 2 take?"),
   so Asks, Takes, Gives and Standing on start on the same line in all three.
   Same subgrid the figure rows use. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 52rem) {
    .mm.engage .chain { grid-template-rows: repeat(6, auto); column-gap: 1rem; row-gap: .4rem; }
    .mm.engage .link { grid-row: span 6; grid-template-rows: subgrid; gap: 0; }
    .mm.engage .link__io { margin-top: 0; }
    .mm.engage .link__name { margin-top: .5rem; }
  }
}

/* -- what a block is entitled to claim: soft cards, the colour on the label -- */
.mm.engage .ledger { gap: 1rem; margin: 0; }
.mm.engage .ledger > div {
  padding: 1.35rem 1.5rem;
  border: 0 !important; border-radius: 20px;
  background: #fff;
  font-size: .9375rem;
}
.mm.engage .sec > .ledger > div, .mm.engage .rail__panel > .ledger > div { background: var(--well); }
.mm.engage .ledger b { font-size: .75rem; letter-spacing: .07em; }
.mm.engage .chap__end { margin-top: var(--sp-7); }
.mm.engage .chap__end > .chap__eyebrow { margin-bottom: 1rem; }

/* -- equations: the provenance edge survives, the hairline box does not ---- */
.mm.engage .eqn {
  border: 0; border-left: 3px solid var(--gray-300);
  border-radius: 20px;
  background: var(--well);
  padding: var(--sp-4) var(--sp-5);
}
.mm.engage .fold .eqn, .mm.engage .card .eqn, .mm.engage .chap__end .eqn { background: #fff; }
.mm.engage .eqn em { color: var(--ink-3); }

/* -- figures keep one frame and the lightbox; the frame is rounded -------- */
.mm.engage .fig__frame {
  border: 0; border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06);
}
.mm.engage .fig > .chart {
  border: 0; border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06);
}
.mm.engage .fig figcaption {
  margin-top: .75rem; padding-left: 0;
  border-left: 0;
  font-size: .8125rem; line-height: 1.5; color: var(--ink-3);
}
.mm.engage .fig figcaption b { color: var(--ink-2); }
.mm.engage .chart__key { color: var(--ink-3); }

/* -- a note under a table, and the provenance pill ------------------------ */
.mm.engage .pagebody p.small { color: var(--ink-3); }
.mm.engage .prov { border-width: 1px; font-size: .625rem; }

/* -- tables: engage paints the wrap; the head follows its grey ------------ */
.mm.engage table.data thead th {
  border-bottom: 0;
  background: var(--well);
  color: var(--ink-3);
  letter-spacing: .05em;
}
.mm.engage table.data tbody tr:last-child td { border-bottom: 0; }
.mm.engage table.data td { color: var(--ink-2); }
.mm.engage .fold table.data thead th, .mm.engage .chap__end table.data thead th { background: #fff; }

/* -- the AI disclosure. engage.css paints every span inside an .ai block
      orange at a higher weight than this file's own rules, so the three
      provenance pills inside an orange cell would lose their colours.     */
html:not(.ai-off) body.mm.engage .ai .prov--ours  { color: var(--ours);  border-color: var(--ours); }
html:not(.ai-off) body.mm.engage .ai .prov--lit   { color: var(--lit);   border-color: var(--lit); }
html:not(.ai-off) body.mm.engage .ai .prov--assum { color: var(--assum); border-color: var(--assum); }


/* ---------------------------------------------------------------------------
   15 October, second pass. A figure is <figure class="fig"> around the image or
   the inline SVG, the way the Digital Twin page does it, so the old
   fig--chart / fig__frame plate system above is unused and its 34rem cap has to
   come off with it. Photographs go two up at one standard crop; the lightbox
   still opens the full file. No callouts and no folds on this page.
   ------------------------------------------------------------------------ */
.mm .pagebody .fig { max-width: none; margin: 0 0 2rem; }
.mm .pagebody .fig + p, .mm .pagebody .fig + h3 { margin-top: 1.6rem; }
.mm .pagebody .fig svg { background: #fff; display: block; }
.mm .pagebody .figpair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 2rem;
}
.mm .pagebody .figpair .fig { margin: 0; }
.mm .pagebody .figpair img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 640px) { .mm .pagebody .figpair { grid-template-columns: 1fr; } }
.mm .pagebody table.data td:last-child { color: var(--ink-3); }
.mm .pagebody .gloss { color: var(--ink-3); font-size: .92em; }
.mm .pagebody .refnote { color: var(--ink-3); font-size: .94em; }
.mm .pagebody ul.apa li { margin-bottom: .7rem; }
.mm .pagebody #maths .eqn { margin: .9rem 0; }
.mm .pagebody #maths .eqn__note { margin: .5rem 0 0; }

/* Assumptions, Section 3: the name of the assumption, what rests on it, what
   would overturn it. The last column inherits the grey the provenance columns
   use elsewhere on this page, which is the register it belongs in. */
.mm .pagebody #assumptions table.data th:first-child,
.mm .pagebody #assumptions table.data td:first-child { width: 23%; }
.mm .pagebody #assumptions table.data td:first-child { color: var(--ink); font-weight: 560; }