/* ==========================================================================
   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 drops links as the window narrows rather than scrolling them out
   of sight. A link the reader cannot see is worse than one that is not there,
   because the strip gives no sign that anything is missing. Every section is
   still one click away in the contents rail, which is why this can be blunt. */
@media (max-width: 1180px) { .masthead nav a:nth-of-type(n + 7) { display: none; } }
@media (max-width: 1000px) { .masthead nav a:nth-of-type(n + 5) { display: none; } }
@media (max-width:  860px) { .masthead nav a:nth-of-type(n + 3) { display: none; } }
@media (max-width:  700px) { .masthead nav { display: none; } }

/* --- 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. Seventeen titles at 14px in a 166px column
     wrap to thirty-six lines; the same titles in 186px wrap to thirty, which is
     most of what was needed to fit the list in a laptop window. */
  padding: var(--s-6) 0;
  font-size: var(--step--1);
  line-height: 1.3;
  scrollbar-width: thin;
  /* Seventeen items do not fit a 900px window, and macOS draws no scrollbar at
     rest, so the list appeared to end at "13 What the ranking rests" with the
     word "on" and four more sections 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 0 var(--s-5); padding: 0; counter-reset: rail; }
.rail li { margin: 0; padding: 0; }
/* The numeral gets a column of its own and the title gets a column of its own,
   which is the only way seventeen titles share 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 — twelve of the seventeen do — returned to the numeral's edge
   rather than the title's, so the second line of "1 What blocking KAT6 / 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, not seventeen buttons, and the list has to reach item 17
     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 seventeen items 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 seventeen times 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) {
  .rail ol {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    column-gap: var(--s-5);
    margin-bottom: 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 all
   seventeen sections 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;
}

/* 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;
    /* 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; }
}