/* ==========================================================================
   Layout — masthead, three-column asymmetric shell, sticky rail
   ========================================================================== */

.shell { position: relative; z-index: 1; }

/* --- The two measurements the whole shell is built out of -----------------
   Both live here rather than in the token file because neither is a brand
   value: they are the arithmetic of this page's three columns, and they are
   only ever read by the four rules below.

   `--margin-w` is the provenance column. It was a flat 232px, which took the
   same room on a 1200px window as on a 1440px one — and since the text column
   is the one that absorbs the difference, the narrow window ended up with a
   four-word disease name broken over three lines beside 232px of empty paper.
   It gives width back as the window closes and tops out a little narrower than
   it did, because 208px still sets a 12px sidenote at about thirty characters
   and the twenty-odd pixels are worth more to the table beside it.

   `--fold` is the width at which the margin stops being a margin. It used to
   be 1180px and it used to *delete* the column's contents, which on a 1024px
   laptop meant a report that stakes its case on provenance quietly stopped
   showing where anything came from. Below the fold the notes move under the
   body they annotate instead. The fold is set at 1280 rather than 1180 because
   the three-column arithmetic runs out first: at 1200px the text column is
   664px, which is narrower than the widest table on the page needs, so the
   page is better off spending that window on one column than on two. */
:root {
  --margin-w: clamp(176px, 14.5vw, 208px);
  --fold: 1280px;
}

/* --- Masthead ----------------------------------------------------------- */
/* Opaque white, and no blur behind it. The translucent version let the page
   through: a green figure label or a chart's fill passing under the strip came
   up as a soft coloured smear between "Internal review" and the first nav link,
   changing shape as the reader scrolled, and it was reported from four
   different scroll positions as a rendering fault. Blurred page content is
   still page content — at 8 per cent opacity it is not a material, it is a
   ghost of the thing underneath. A solid ground and the same hairline the rest
   of the page rules with is what a running head is. */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--s-6);
  height: 56px;
  display: flex; align-items: center; gap: var(--s-5);
}
/* The product lockup: the diamond logo, then "Insilico Medicine" in sentence
   case — the same row every Insilico product opens with. */
.brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-strong);
  text-decoration: none;
  white-space: nowrap;
}
.brand__logo { width: 24px; height: 24px; flex: none; }
.brand__name {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.9375rem;
  text-transform: none;
  color: var(--ink-strong);
}
/* Kept for pages built before the SVG lockup existed. */
.brand__mark { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.brand__sub { color: var(--ink-3); font-weight: 400; }

.masthead__nav { display: flex; gap: var(--s-1); margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.masthead__nav::-webkit-scrollbar { display: none; }
.masthead__nav a {
  font-size: var(--step--1);
  color: var(--ink-3);
  text-decoration: none;
  /* The vertical padding fills the strip so the marker under the active link
     lands on the strip's own hairline rather than floating above it. */
  padding: 18px var(--s-3) 17px;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.masthead__nav a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--rule); }
/* Where you are, marked by a 2px brand rule sitting on the running head's own
   hairline. The link used to take a green wash with a rounded corner, which
   made the one word you were standing on the only filled shape in the strip
   and the only tinted shape above the fold — a highlighter swipe rather than a
   state. The rule says the same thing and adds no shape; the label goes to
   near-black, which is the strongest ink the strip has and is enough. Weight
   is left alone on purpose: bolding it would shift the labels either side of
   it as the reader scrolls. */
/* `location`, not `page`. The script sets `aria-current="location"` on both
   navigations and gives its reason where it does so: these links move within
   one document, so the mark means "you are at this point in it" rather than
   "you are on this page". This rule was written against the other value, so it
   matched nothing that has ever been on the page — the strip carried no current
   mark at any scroll position, at any width, since it was written. Two
   selectors describing one state, and neither the stylesheet nor the script was
   wrong on its own, which is why nothing caught it. */
.masthead__nav a[aria-current="location"] {
  color: var(--ink-strong);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* The strip used to drop links as the window narrowed rather than scrolling
   them out of sight, on the ground that a link the reader cannot see is worse
   than one that is not there, because the strip gives no sign that anything is
   missing. That was sound while the strip listed eight of seventeen sections
   and was a partial list at every width: shedding two of them changed how much
   of a partial list it was, and nothing more.

   It stops being sound now the strip carries one link per part. What it sheds
   is no longer a section but a part, and with the part every section under it.
   At 1024 — a common laptop, and the width this was measured at — the old rule
   took the last two parts off the strip: the whole end of the document, gone
   from the one navigation that is meant to say what the document is made of. A
   map that quietly stops being a map is worse than a map that has to be
   scrolled.

   So below 1180 the strip keeps all eight parts and buys the room back
   instead. The audience line goes first — it is printed in full in the title
   block one screen below, which is the same trade already made at 920 — and
   the links close up to the tighter of the two paddings, with the gap between
   them carried entirely by that padding. Measured, that carries all eight
   parts to 977.

   Under that the strip goes, in one step, rather than shedding down to a
   half-map. What is left at those widths is the rail, which at anything above
   920 is still a sticky column carrying all eight parts, every section inside
   them and a mark on the one being read — a better map than a strip
   showing four part names, and the reason a second contents control is not
   drawn beside it either. 980 is the cutoff, which is 977 with a few pixels in
   hand.

   That number is measured against these eight part names and is not general.
   A report whose parts are named at greater length will overflow the strip
   somewhere above 980, and the layout check will block the build and say so.
   That is the right outcome and the reason the strip is not simply left to
   scroll: it tells the author their part names are too long for a running
   head, which is true and can be acted on, where shedding would have handed
   the reader a partial map and said nothing to anybody.

   The rail itself ends at 920, where it stops being sticky and becomes a strip
   of front matter, and `.tocmenu` takes over with the whole list. Before that
   was written the masthead shed to two links at 860 and to none at 700, and a
   reader below 700 had no way to leave and a contents list a hundred and forty
   phone screens back up the document. */
@media (max-width: 1180px) {
  .brand__sub { display: none; }
  .masthead__nav { gap: 0; }
  .masthead__nav a { padding-left: var(--s-2); padding-right: var(--s-2); }
}
@media (max-width:  980px) { .masthead__nav { display: none; } }

/* --- Contents menu ------------------------------------------------------ */
/* Drawn only where the rail cannot follow the reader. Above 920 the rail is a
   sticky column that already lists every section and marks the one being read,
   and a second contents control standing beside it would be furniture. */
.tocmenu { display: none; }

@media (max-width: 920px) {
  .tocmenu { display: flex; align-items: center; align-self: stretch; position: relative; margin-left: auto; }
  /* The audience line gives up its place to the control. At 390 the lockup is
     273px of a 326px content box, which leaves no room for a word beside it.
     Nothing is lost that the page does not say better elsewhere: the title
     block prints "Prepared for" and the same line in full, one screen below
     this one. */
  .brand__sub { display: none; }
}

/* Stretched rather than padded to a number. The strip is 56px and the label
   sits in the middle of it whatever the text metrics do, which is what puts
   the open mark on the strip's own hairline instead of near it. */
.tocmenu__button {
  display: flex; align-items: center; gap: var(--s-2);
  align-self: stretch;
  padding: 0 var(--s-3);
  font-size: var(--step--1);
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
/* Both spellings of the same removal: the first is the standard, the second is
   what WebKit reads. A `<details>` with neither draws a triangle of its own
   beside the caret, which is the same thing said twice. */
.tocmenu__button::marker { content: ""; }
.tocmenu__button::-webkit-details-marker { display: none; }
.tocmenu__button:hover { color: var(--ink-strong); }
/* Open takes the mark the current link takes in the strip above: the reader is
   standing in this control, and the page has one way of saying that. */
.tocmenu[open] > .tocmenu__button {
  color: var(--ink-strong);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.tocmenu__caret { width: 10px; height: 6px; flex: none; transition: transform var(--dur-1) var(--ease-out); }
.tocmenu[open] > .tocmenu__button .tocmenu__caret { transform: rotate(180deg); }

/* Hung from the foot of the strip, so it opens under the hairline rather than
   through it. `100vw` less the strip's own side padding is the widest it may
   be, which is what keeps it inside a 390px window. */
.tocmenu__panel {
  position: absolute;
  top: 100%; right: 0;
  width: min(320px, calc(100vw - var(--s-6) * 2));
  padding: var(--s-3) 0;
  background: var(--card);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
}
/* The list scrolls, not the card. Put the height on the card and the fade below
   goes over its border and its rounded corner, so a panel with more in it than
   fits reads as a torn edge rather than a full one.

   A full contents list wrapped into a 320px column stands well past what a phone
   has under a 56px running head, so this scrolls on more or
   less every phone — and macOS draws no scrollbar at rest. The fade is the rail's
   own answer to the rail's own version of this, and the reason it is copied here
   rather than reasoned out again is that a page should have one way of saying
   "there is more". */
.tocmenu__panel ol { list-style: none; margin: 0; padding: 0; }
/* The scroll box is the outer list and only the outer list. Left on every `ol`
   in the panel, a part's own three or four sections became a scroll box of
   their own, with a second fade laid across the last of them — a torn edge in
   the middle of a panel that was nowhere near full. */
.tocmenu__panel .toc {
  counter-reset: toc;
  max-height: calc(100vh - 56px - var(--s-7));
  overflow-y: auto;
  overscroll-behavior: contain;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.tocmenu__panel li { margin: 0; }
/* The name of a part, over the sections in it. Below 920px this panel is the
   only way out of a fifty-four-thousand-pixel document, so it carries the same
   two ranks the rail carries and tells them apart the same way: smaller,
   tracked, darker ink, and air above the group. No fill, no rule, no box — the
   panel is already a card and a second boxed thing inside it would read as a
   control rather than as a heading. */
.tocmenu__panel .toc__part-name {
  display: block;
  font-family: var(--font-data);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  /* The rows' own left pad, so the name stands on the numerals' edge. */
  padding: 0 var(--s-4) var(--s-1);
}
/* A part opens with air above it, and so does whatever follows a part: without
   the second half of that, the first flat row under a group sat against the
   group's last section and read as one more of them. */
.tocmenu__panel .toc__part,
.tocmenu__panel .toc__part + li { margin-top: var(--s-3); }
.tocmenu__panel .toc > li:first-child { margin-top: 0; }
/* Which part the reader is in, said the way the rail says it: a change of ink,
   no weight change, nothing that moves the rows underneath. */
.tocmenu__panel .toc__part-name.is-current { color: var(--ink-strong); }
.tocmenu__panel a {
  display: flex; gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--step--1);
  line-height: 1.3;
}
/* The rail's numeral, at the rail's size: same face, same figures, same ink.
   Right-aligned in a fixed box so that a one-digit and a two-digit numeral hand
   the titles one left edge rather than two. */
.tocmenu__panel a::before {
  counter-increment: toc;
  content: counter(toc);
  flex: none;
  min-width: 1.5em;
  text-align: right;
  color: var(--ink-4);
  font-family: var(--font-data);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
}
.tocmenu__panel a:hover { color: var(--ink-strong); background: var(--link-wash); }
/* The rail's own current mark, turned to face this panel's left edge. */
.tocmenu__panel a.is-active { color: var(--ink-strong); box-shadow: inset 2px 0 0 var(--accent); }
.tocmenu__panel a.is-active::before { color: var(--ink-2); }

/* --- Page shell --------------------------------------------------------- */
/* The side padding is 24px rather than 32px because inside a shell that is
   already capped at 1320px it is not margin — the window supplies that — it is
   width taken off the text column for nothing. The foot was 128px, and with the
   footer's own 128px above its rule that left a third of a screen of blank
   paper between the last word and the colophon. 48px here and 48px there is
   96px, which is the same space a section division gets, so the end of the
   document is closed by the page's own rhythm rather than by running out. */
.page {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--s-5) var(--s-7);
}

/* Rail | main | margin. The margin column carries provenance, so the text
   column stays a comfortable measure and the page reads asymmetrically. */
.layout {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) 232px;
  gap: var(--s-7);
  align-items: start;
}
.layout--wide { grid-template-columns: var(--rail-w) minmax(0, 1fr); }

/* 1280px is `--fold` written out: a media query is evaluated before custom
   properties exist, so the number cannot be a variable here. Every other rule
   that turns on at the fold repeats the literal for the same reason, and they
   are the only places in this file where a width is hard-coded.

   Only a page-level margin column is dropped here. A section's own margin is
   not dropped — it folds, further down — and the two used to be caught by one
   selector, which is how the provenance came to disappear on a laptop. */
@media (max-width: 1280px) {
  .layout, .layout--wide { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .layout > .marginalia { display: none; }
}
/* The contents rail moves above the text before the text gets too narrow to
   hold a wide table. Below this the rail is a horizontal strip and the text
   column has the whole window. */
@media (max-width: 920px) {
  .layout, .layout--wide { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .page { padding: 0 var(--s-4) var(--s-8); }
}

/* --- Sticky rail -------------------------------------------------------- */
.rail {
  position: sticky;
  top: calc(56px + var(--s-5));
  max-height: calc(100vh - 56px - var(--s-7));
  overflow-y: auto;
  /* No right padding. The grid gutter beside it is already 48px, so the 16px
     that used to sit here separated nothing — it came straight off the one
     dimension the rail is short of. At 14px the width it buys back takes about
     one wrapped line in six out of the list, which is most of what was needed
     to fit it in a laptop window. */
  padding: var(--s-6) 0;
  font-size: var(--step--1);
  line-height: 1.3;
  scrollbar-width: thin;
  /* A full contents list does not fit a 900px window, and macOS draws no
     scrollbar at rest, so the list appeared to end part-way through a title,
     with the rest of that title and the sections under it below an invisible
     cut. Nothing said the list continued. The fade is the sign: the last line
     dissolving is a thing
     every reader has learned to read as "there is more", and it costs no
     width, which a scrollbar or a count would. It is only drawn when the rail
     is a column — at narrow widths the rail is a static strip with nothing to
     scroll, and a fade there would dim the last row for no reason. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}

/* Below the width where the grid collapses to one column, the rail stops
   being a column and becomes a strip above the text.

   This has to sit *after* the rule above rather than beside the grid change
   further up the file, and that is the whole bug it fixes. A media query adds
   no specificity, so `.rail` inside one and `.rail` outside one carry equal
   weight and the later declaration wins. The narrow-screen override was
   written first, so `position: sticky` was reinstated at every width by the
   block underneath it. On one column that leaves a full-width sticky box six
   hundred pixels tall pinned over the article: it took better than four in
   five pointer hit-tests at 390px and 768px, so tapping a chart got you a
   contents link and the body text was overprinted and unreadable. Nothing
   flagged it, because both rules were correct and only their order was not.

   `max-height` and `overflow-y` have to be released too. Left alone they keep
   the strip as a tall internal scroll box, which is the same obstruction with
   a scrollbar on it. */
@media (max-width: 920px) {
  .rail {
    position: static;
    max-height: none;
    overflow-y: visible;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    /* 24px above, not none. As a column the rail hangs off the top of the page
       and the masthead's own hairline is far away; as a strip its label sits
       eight pixels under that hairline and reads as part of the running head. */
    padding: var(--s-5) 0 var(--s-4);
    margin-bottom: var(--s-5);
    mask-image: none;
  }
}

.rail__label {
  font-family: var(--font-data);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--s-4);
  /* Matches the pad the items carry for the active marker, so the label and the
     numerals under it stand on one left edge. */
  padding-left: var(--s-2);
}
.rail ol { list-style: none; margin: 0; padding: 0; }
/* The numbering is reset once, on the outer list, so it runs unbroken from the
   first section to the last down the column whatever the parts do to it. Reset
   on every `ol` — which is
   what `.rail ol` did before the list had two levels — each part started again
   at one, and a rail carrying four number ones is a rail that has stopped
   counting the document and started counting itself. */
.rail .toc { margin-bottom: var(--s-5); counter-reset: rail; }
.rail li { margin: 0; padding: 0; }
/* --- Parts -----------------------------------------------------------------
   The name of a part, over the sections in it.

   The strip in the masthead names eight parts and this column lists every
   section inside them; before parts existed it listed all seventeen
   at the rank the strip used, so the page showed a reader two navigations of
   different lengths, made of the same words, at the same size, and left them to
   work out that one was a subset of the other.

   Told apart from its rows by type and by air: two steps smaller, tracked,
   heavier, and in the secondary ink against the rows' caption grey. Not by a
   fill, a tint, a pill or a rule — the rows already carry the only mark this
   column makes, a 2px brand rule at the left edge on the section being read,
   and anything else drawn here would be competing with it eight times over.

   No indent either. The numerals share one left edge from the first item to the
   last, which took two goes to get right and is the reason the list reads
   as a list; stepping a part's rows in would have bought the grouping a second
   ragged edge that the air above the name already says for nothing. */
.rail .toc__part-name {
  display: block;
  font-family: var(--font-data);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  /* The rows' own left pad — the clearance they keep for the active marker —
     so the name, the numerals under it and the label above the whole list all
     stand on one edge. */
  padding: 0 var(--s-2) 0.3rem;
}
/* Air above a part, and above whatever follows one. Without the second half a
   flat row after a group closed straight up against the group's last section
   and read as one more of them. */
.rail .toc__part,
.rail .toc__part + li { margin-top: var(--s-4); }
.rail .toc > li:first-child { margin-top: 0; }
/* Which part is being read. The row inside it already takes the brand rule and
   near-black ink; the name takes the ink and nothing else, so the column has
   one mark in it and a second, quieter statement of where that mark is. */
.rail .toc__part-name.is-current { color: var(--ink-strong); }
/* The numeral gets a column of its own and the title gets a column of its own,
   which is the only way every title shares a left edge.

   Two things were wrong and they compounded. The numeral was an inline
   `::before` with a margin after it, so a two-digit numeral pushed its title
   eight pixels further right than a one-digit one and the list's left edge
   went ragged from item 10 down. And because the numeral was inline, a title
   that wrapped — most of them do at this width — returned to the numeral's
   edge rather than the title's, so the second line of "1 What KAT6 inhibition
   / would and would not do" started under the "1".

   A two-column grid fixes both at once: the numeral cannot push anything, and
   a wrapped line has nowhere to return to except the top of its own column.
   Tabular figures keep the gutter one width whatever the digits are. */
.rail a {
  display: grid;
  grid-template-columns: 1.55em minmax(0, 1fr);
  align-items: baseline;
  /* 5px above and below rather than 5px and a wide right pad: the rows want to
     read as one list rather than as a stack of buttons, and the list has to
     reach its last item inside a 900px window. Whatever still falls below the
     cut is announced by the fade the block above sets. */
  /* The left pad is the clearance for the active marker, not decoration. The
     marker is a 2px rule drawn at this box's left edge, and with no pad the rule
     landed hard against the stem of the numeral: on item 13 the green bar and
     the "1" shared a pixel column, so the current row read as "|13" — a glyph
     with something broken in front of it rather than a list item with a mark
     beside it. Eight pixels is enough to separate them and small enough that the
     numerals still read as one left edge with the label above.
     The whole list indents by it, label included, rather than the marker being
     hung outside the box on a negative margin: the rail sets `overflow-y: auto`
     to scroll the whole list in a laptop window, which forces the other axis to
     `auto` as well, and anything placed left of the content box would be either
     clipped or handed a horizontal scrollbar. */
  padding: 0.32rem var(--s-2) 0.32rem var(--s-2);
  color: var(--ink-3);
  text-decoration: none;
  box-shadow: inset 2px 0 0 transparent;
  transition: color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.rail a::before {
  counter-increment: rail;
  content: counter(rail);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--step--2);
  color: var(--ink-4);
}
.rail a:hover { color: var(--ink); }
/* The section the reader is standing in, and it moves as they scroll — so
   whatever marks it is drawn once for every section over the length of the page
   and has to be quiet enough to survive that.

   It was a filled pale-green block with a rounded corner and the title set
   bold in green: the only filled shape in the column, hugging the ascenders
   with about seven pixels of slack so it read as a highlighter swipe, and
   changing height from one line to three as the reader moved from a short item
   to a long one, which made the list lurch. The bold shifted the title two
   pixels left of its neighbours as well, so the left edge jittered on
   whichever row was current.

   A 2px brand rule at the edge of the rail says the same thing and cannot do
   any of that. It is drawn as an inset shadow rather than a border so it takes
   no width and nothing reflows; the title goes to near-black, which is a
   change of ink rather than of weight, so the row does not move. */
.rail a.is-active {
  color: var(--ink-strong);
  box-shadow: inset 2px 0 0 var(--accent);
}
.rail a.is-active::before { color: var(--ink-2); }

/* The narrow-screen index, and the second half of the same override the block
   further up starts. It is down here rather than up there for the reason that
   block records: these rules restate `.rail a` and `.rail ol`, both of which
   are declared above at the same specificity, so written any earlier they lose
   the cascade and do nothing. Written the first time, they did exactly that —
   the rows kept their wide-screen 34px height and the measurement came back
   identical to the one that prompted the change.

   Set as one column the index is 552px tall, which on a phone is the whole
   first screen: the reader opens the report and the first thing it shows them
   is a table of contents, with the title pushed to y=790 of an 844px window.
   Two columns of tighter rows put the title back within reach of the fold.

   Nothing is hidden to achieve it, and that is deliberate. A strip scrolling
   sideways would be shorter still, but these links are the only navigation a
   phone gets — the masthead strip is already gone below 700px — so a link
   scrolled out of sight here is a section the reader cannot know exists. A
   disclosure that starts closed would need script to open it, which is the one
   dependency the rest of the page is built to do without. */
@media (max-width: 920px) {
  /* The outer list, and only it: the columns are the parts of the document, so
     a part's own sections stay stacked under their name. Written as `.rail ol`
     — which is what it was before the list had two levels — the tracks were
     re-cut inside every group as well, and a part of three sections came out as
     three columns of one under a name that was then wider than all of them. */
  .rail .toc {
    display: grid;
    /* Each track is filled by whole parts, which vary in how many rows they
       hold, so the tracks in a row end level with the tallest part in it rather
       than level with each other. That is the price of keeping a group whole,
       and it is the right way round: a short part followed by white space reads
       as a short part, where a part split down a column boundary reads as two
       parts with one name. */
    align-content: start;
    /* `ul, ol` in base.css caps every list at the prose measure. That is right
       for a list of sentences inside the text column and wrong for this one:
       as a strip the index is navigation, not prose. The cap held it at 512px
       whatever the window did, so on an 820px tablet it used 512 of the 788
       available and stood 363px tall — the same 363px it stands on a 560px
       phone. The window had no effect on it at all, which is the tell.

       Released, and the column minimum raised from 10rem, it is 240px tall at
       900 in four columns, 248 at 820 in three, 303 at 720, and 327 from 640
       down to 560 in two. Every one of those is shorter than the 363 it
       replaces, and the title comes up the page by the same amount.

       The minimum is `min(12rem, 45%)` and not a plain 12rem because 12rem
       twice will not fit a phone: at 390 it falls to one column, which is the
       552px index the note above this block exists to prevent. Forty-five per
       cent of the track cannot be taken three times, so there are always two
       columns; above a 460px page, where 12rem is the smaller of the pair, it
       is 12rem that decides. The arithmetic stays in the value rather than in
       another breakpoint. */
    max-width: none;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 45%), 1fr));
    column-gap: var(--s-5);
    row-gap: var(--s-4);
    margin-bottom: 0;
  }
  /* As a column the parts are separated by margins; as a strip they are grid
     items and the separation is the row gap set above. The margins have to come
     off for it: a margin on the first item of a track pushes that track down,
     and only the first track's first item is the list's `:first-child`, so
     three of the four columns started sixteen pixels lower than the one beside
     them and the tops of the strip went stepped. */
  .rail .toc__part,
  .rail .toc__part + li { margin-top: 0; }
  /* Tighter rows, and the numeral column narrowed with them. The two-column
     grid and the active rule are the same at every width — the strip is the
     same list, laid out in more columns — so nothing about the mark needs
     restating here. Only the room it sits in changes. */
  .rail a {
    grid-template-columns: 1.4em minmax(0, 1fr);
    padding: var(--s-1) var(--s-2) var(--s-1) var(--s-2);
  }
}

/* --- Marginalia --------------------------------------------------------- */
.marginalia { position: sticky; top: calc(56px + var(--s-5)); padding-top: var(--s-6); }

main { min-width: 0; }
section { scroll-margin-top: calc(56px + var(--s-5)); }
/* Was 96px of nothing. The gap was measured at 140px from the foot of one
   section's last block to the next section's first word and it was doing the
   whole job of dividing the page on its own, which is more than empty paper
   can carry: at reading distance the reader cannot tell a large gap from a
   slightly smaller one, only that something has stopped. The rule below now
   makes the division, so the space around it can come down and be read as
   deliberate rather than as a run of blank page. */
section + section { margin-top: var(--s-8); }

/* --- Hero ---------------------------------------------------------------
   Opens like a product page: the brand signature bar, then the display
   headline at the top of the scale.

   No rule of its own at the foot. The first section's opening rule sits 64px
   below the last line of the hero and closes it, which is the same rule, at
   the same weight, at the same distance, that opens every other section — so
   the reader learns the page's one division on the first screen instead of
   meeting two rules 64px apart and having to decide which one meant
   something. */
.hero { padding: var(--s-9) 0 var(--s-7); margin-bottom: var(--s-6); }
/* The 96px above the brand bar is measured against an empty masthead. Once the
   rail folds it is not empty: the contents strip lands there, and 96px of hero
   padding under the strip's own 24px of clearance put 144px of white between
   the list of sections and the title of the document — a quarter of a 600px
   window spent on nothing, on the one screen size that has none to spare. */
@media (max-width: 920px) {
  .hero { padding-top: var(--s-6); }
}
/* Squared off, and thinner. A 5px bar with a 3px radius is a marketing device;
   at this size the radius is a quarter of the shape and reads as a rounded
   pill, which is the form this page has taken out everywhere else. Flat ends
   and 3px make it a printed rule in the brand colour, which is what it is. */
.hero::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent);
  margin-bottom: var(--s-5);
}
/* Clamped so the display size never pushes a long word past a phone's edge:
   at 390px the headline sits near 36px, on a desktop it reaches --step-5. */
.hero h1 {
  font-size: clamp(2.125rem, 1rem + 3.4vw, var(--step-5));
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
/* The hero's eyebrow is a whole sentence rather than a two-word label, so it
   gets the reading size the rest of the page's small text has. */
.hero .eyebrow { max-width: 68ch; margin-bottom: var(--s-4); }
.hero .lead { margin-top: var(--s-6); }
/* Prepared for, sources, date: three facts about the document, set as a
   colophon line. They were three rounded outlined capsules, which is the pill
   this page does not print — and a capsule around "Dated 2026-08-11" claims
   the date is a control the reader could press. Separated by hairlines they
   are what they are: metadata, on one line, in the margin of the title. */
.hero__meta {
  display: flex; flex-wrap: wrap;
  margin-top: var(--s-6);
  font-family: var(--font-text);
  font-size: var(--step--1);
  color: var(--ink-3);
}
.hero__meta > span {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  padding-right: var(--s-4);
  margin-right: var(--s-4);
  border-right: 1px solid var(--rule);
}
.hero__meta > span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero__meta b { font-weight: 500; color: var(--ink-2); }
/* The hairlines separate; they cannot also terminate. Once the line is too
   short to hold all three facts the row wraps, and the fact that lands last on
   the first line keeps the divider it was drawn with — so the colophon ends the
   line on a rule with nothing after it, which reads as a missing word rather
   than as a separator. Below the width where that starts happening the three
   facts stack, which is what a colophon does on a narrow measure anyway. */
@media (max-width: 560px) {
  .hero__meta { display: grid; justify-items: start; row-gap: var(--s-1); }
  .hero__meta > span {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
  }
}

/* --- Footer -------------------------------------------------------------
   The colophon is the last block of the document and it was the only one that
   did not start where the document starts: it sat at the rail's left edge,
   263px left of every word above it, under a hairline that ran the full width.
   The left padding now carries the rail and its gutter, so the footer's first
   character lands on the body column's left edge like everything else.

   The space above it came down from 128px for the reason `.page` records at
   its own foot: the two paddings compounded into a third of a screen of blank
   paper, which reads as the page having stopped rather than ended.

   The rule over it is the last horizontal line in the document and it was the
   only one that did not agree with the others about where the page ends: drawn
   on a box capped at the full 1320px shell, it ran 24px past the section rules
   on each side, so the document closed on a line wider than every division
   inside it. A border is drawn on the border box, and padding sits inside that
   box, so the indent that puts the colophon under the body column cannot also
   set where the rule starts. The width does that instead — the same arithmetic
   `.page` performs, written out here because the footer is its sibling and not
   its child. */
.site-footer {
  border-top: 1px solid var(--rule);
  width: calc(100% - var(--s-5) * 2);
  max-width: calc(var(--shell-max) - var(--s-5) * 2);
  margin: var(--s-7) auto 0;
  padding: var(--s-6) 0 var(--s-8) calc(var(--rail-w) + var(--s-7));
  font-size: var(--step--1);
  color: var(--ink-3);
}
/* The same measure the body sets, one step down in size: at 14px, 66ch is the
   74 characters the 16px prose above it runs. */
.site-footer p { max-width: 66ch; }
/* And the same clearing the sections get, for the same reason: the last
   paragraph's 24px sat inside the footer's 64px, so the document ended on 88px
   of white while the padding said 64. The distance to the bottom of the page
   should be a property of the footer, not of whether the colophon's last block
   happened to be a paragraph. */
.site-footer > :last-child { margin-bottom: 0; }
/* No rail to clear once the rail is a strip above the text, and the page's own
   side padding drops to 16px, so the footer's width follows it there too. */
@media (max-width: 920px) {
  .site-footer {
    width: calc(100% - var(--s-4) * 2);
    padding-left: 0;
  }
}

/* --- Section shell ------------------------------------------------------
   Each section carries its own provenance column, so the note about where a
   claim came from sits beside the claim rather than at the foot of the page. */
/* The rule that opens a section runs across the body and the margin column
   both, because a section is both of them: it is the one line on the page that
   says a new argument starts here, and a line that stopped at the text column
   would be saying it about the text only. Everything else on the page rules
   within a block, so this is the only full-width line in the document, which
   is what makes it legible as a division without needing weight. It stays 1px
   #E8E8E8 like every other rule; the space above it, not the ink in it, is
   what makes it read as larger than a row separator. */
.sec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--margin-w);
  gap: var(--s-7);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-6);
}
.sec__body { min-width: 0; }
/* The division between two sections should be one measurement, and it was
   seventeen. A section that ended on a paragraph put that paragraph's 24px
   bottom margin above the 64px gap and the next rule; one that ended on a card
   or a chart put nothing there, because those zero their own last margin. So
   the same rule sat 88px below the last word in some places and 64px in
   others, which the eye reads as the page breathing unevenly rather than as
   two different kinds of block. Clearing the last child's margin makes the
   distance a property of the division instead of a property of whatever the
   section happened to finish with. */
.sec__body > :last-child { margin-bottom: 0; }
/* A section without marginalia is a section with nothing to say in the margin,
   not one asking for a longer line. Left to fill the shell its body ran 992px,
   and since the glossary's definitions are a table they took all of it: 105
   characters against the 74 every other line on the page sets, and a right edge
   305px out from the reference list directly above them. Holding the body back
   by exactly the margin column and its gutter puts the reading matter of every
   section on one right edge, which is the thing a reader notices
   without being able to name it. */
.sec--wide { grid-template-columns: minmax(0, 1fr); }
.sec--wide .sec__body { max-width: calc(100% - var(--margin-w) - var(--s-7)); }
/* The margin column carries the note beside the block it is about, so it
   travels with the reader rather than sitting at the top of a section they
   have long since scrolled past. */
.sec__margin {
  position: sticky;
  top: calc(56px + var(--s-5));
  /* A filename is one unbreakable word, and at 12px in a 208px column
     `indication_prioritization_report.pdf` ran fifteen pixels past the hairline
     it sits under. `break-word` only breaks a word that cannot fit at all, so
     the prose in the same column is untouched. */
  overflow-wrap: break-word;
  /* Pinned and taller than the window is the one state a sticky column must not
     be left in: it cannot be scrolled past, so whatever hangs below the fold
     hangs there at every scroll position in the section and is read by nobody.
     Two of the fifteen margins are in it — the evidence section's seven entries
     stand 849px and the clinic section's six stand 672, against the 609 an
     800px window leaves under the running head, so 216px and 39px of source
     citation were unreachable. Nothing reported it: the column laid out
     correctly at all ten widths, and what was wrong was only visible against a
     window height, which the layout probe does not vary.

     The same geometry as the rail, deliberately — same offset, same cap, same
     24px clear at the foot — because they are two columns of the same page and
     a reader who has learnt one has learnt the other. */
  max-height: calc(100vh - 56px - var(--s-7));
  overflow-y: auto;
  scrollbar-width: thin;
  /* 24px, where the rail uses 28. Every margin leaves exactly 24px under its
     last entry, so a fade of that depth falls on the slack and dims no ink on
     the thirteen columns that fit, while still dissolving the cut edge on the
     two that do not. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}

/* One left edge. The head was a two-column grid with an icon in the first
   column, so the eyebrow and the heading began 92px right of the prose they
   introduced and 92px right of their own rule, which undercut the heading from
   the left. Three left edges to introduce one section.

   The icon is gone rather than moved. There is one per section and no two came
   from the same drawing: a document with a folded corner, a scatter of hollow
   rings, a winner's podium with numerals in the blocks, an unreadable squiggle.
   At a 2px stroke in brand green they were the heaviest ink on a page whose
   every rule is a 1px hairline, and what they added was a picture of the
   heading printed beside the heading. The house mark for tone is the diamond,
   and a section opener does not carry tone. */
.sec__head {
  margin-bottom: var(--s-6);
}
.sec__head > div { min-width: 0; }
.sec__head h2 {
  margin-top: 0;
  margin-bottom: var(--s-3);
  /* Held to about two lines at display size. These titles are sentences —
     "Why these indications, and what would settle them" — and run out to the
     full column they broke wherever the column happened to end, which at 32px
     is the most visible word-break on the screen. Short of the column they
     break where `text-wrap: balance` chooses. */
  max-width: 23ch;
}
.sec__head .lead { margin-bottom: 0; }
.sec__icon { display: none; }

/* Below the fold the margin stops being a margin and becomes a note at the
   foot of the section it belongs to. It is the same paragraphs in the same
   order — nothing is dropped, which is the point: this is where a source
   citation is most likely to be read, on the screen where the reader cannot
   see it beside the claim.

   Two columns where there is room for two. Stacked, seven provenance entries
   under the evidence section run better than 350px, and a reader who has just
   finished the section meets a wall of grey before the next one starts. Each
   entry keeps the hairline it wears in the margin, so the band reads as a row
   of small notes rather than as a list that lost its column. */
@media (max-width: 1280px) {
  .sec { grid-template-columns: minmax(0, 1fr); }
  .sec__margin {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    column-gap: var(--s-6);
    align-content: start;
    /* Released with the position, and for the reason the rail's own release
       gives: left on, the cap and the overflow turn a band that should simply
       run down the page into a short scrolling well with a scrollbar in it,
       which is the same obstruction the sticky column was. The fade goes with
       them — there is nothing cut here to mark, and a gradient over the last
       row of notes would dim it for no reason. */
    max-height: none;
    overflow-y: visible;
    mask-image: none;
    /* No margin above. The 48px the grid already puts between its two rows is
       the separation, and adding 32px more on top of it opened an 80px gap
       between a section and its own footnotes — wider than the space this page
       uses between a heading and the prose under it, and close enough to a
       section division that the notes started to look like the beginning of the
       next argument rather than the end of this one. */
  }
  .sec--wide .sec__body { max-width: none; }
}

/* --- Back to the top ----------------------------------------------------
   This report is fifty-four thousand pixels tall. The contents rail answers
   "where am I" the whole way down at wide widths, and the masthead's contents
   menu answers it at narrow ones, but neither is the gesture a reader reaches
   for after twenty screens: they want the beginning, and until now the only
   ways there were the browser's Home key and the brand lockup in the running
   head, which looks like a logo because it is one.

   Drawn as a small card rather than as the round floating button the pattern
   usually gets. Everything on this page that a reader can press is a
   rectangle with a hairline round it — the legend switches, the filter
   controls, the contents summary — and a circle in the corner would be the
   only shape of its kind on the report, which is a way of announcing that it
   came from somewhere else. It carries its word for the same reason: a bare
   arrow in a corner is a guess between "top of the report", "previous
   section" and "collapse this".

   Bottom right, and it does overlap the margin notes. An earlier draft of this
   comment claimed the right-hand gutter was the one strip of the window this
   page never puts anything in. That was written from the layout rather than
   from a measurement, and the measurement disagrees. With the control 72px
   wide: at a 1300px window 64 of those pixels sit over the provenance column,
   at 1366 — the commonest laptop — 41, at 1440 four, and from about 1470 the
   column no longer reaches that far and the overlap is nil.

   It stays where it is, because every way out is worse. `right` can only move
   it further left, which is deeper into the column it is supposed to be
   clearing: the gutter is on the other side of it and the control is already
   flush against that edge. The left is the rail at every width that has one.
   Dropping the control above 1470 only would take it away from the commonest
   laptop, which is the window that most needs a way back up a page fifty
   thousand pixels tall. Losing the word to shrink the box buys thirty pixels
   and spends the affordance the paragraph above argues for.

   What makes the overlap acceptable is that the control is opaque and the page
   moves underneath it. A white card with a hairline and a shadow reads as being
   in front of the text rather than in it, and a provenance note it covers is
   one scroll away from being read. What would not be acceptable is covering
   something the reader cannot move out from under it, which is the whole reason
   the tooltip is given a higher layer than this control and not a lower one. */
.to-top {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--card);
  border: var(--card-border);
  border-radius: var(--card-radius);
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  /* The one place on this page a shadow is earned: this box floats over the
     text it is standing on, and without a shadow it reads as a card that has
     been left in the wrong place rather than as something in front. Kept to a
     single short, near-transparent drop so it stays a separation and does not
     become a glow. */
  box-shadow: 0 1px 2px rgba(16, 20, 24, 0.06), 0 4px 12px rgba(16, 20, 24, 0.07);
  transition: color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              opacity var(--dur-2) var(--ease-entrance),
              transform var(--dur-2) var(--ease-entrance);
}
.to-top__mark { width: 12px; height: 12px; flex: none; color: var(--accent); }
.to-top:hover { color: var(--ink-strong); border-color: var(--connector); }
.to-top:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The arrival. `hidden` is what the markup ships with and what a page running
   no script keeps, so the animated states below only ever describe a control
   the script has already decided to show. Sliding up from six pixels rather
   than appearing: the reader is scrolling when this turns up, and something
   that materialises in a corner mid-scroll is read as a fault before it is
   read as a button. */
.to-top[hidden] { display: none; }
.to-top.is-arriving { opacity: 0; transform: translate3d(0, 6px, 0); }
.to-top.is-here { opacity: 1; transform: none; }

/* On a phone the word is the first thing to go, not the last. There is no room
   beside the text column for a labelled control, and the arrow alone is
   unambiguous here in a way it is not on the desktop layout, because it is the
   only fixed thing on the screen. The label stays in the accessible name. */
@media (max-width: 560px) {
  /* Dropping the word leaves a 12px arrow in 8px of padding, and a 28px square
     is under a fingertip, not under a thumb held at the bottom corner of a
     phone. The minimum brings the target back to 44px — the floor below which a
     press becomes a game — without letting the card grow: the box is padded out
     to the target and the arrow is centred in it, so what the reader sees is
     still a small square card of the same family as everything else on the
     page, and what the reader hits is the whole of it. */
  .to-top { padding: var(--s-2); min-width: 44px; min-height: 44px; justify-content: center; }
  .to-top span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}