/* "Where is everybody?" final design: editorial.
   Ink on white, no panels. Serif for the argument, one grotesque for everything that labels, measures or controls.
   TOKENS: every colour and face the page and the charts use is defined here, once for light and once for dark. See ../TOKENS.md. */
:root {
  /* paper and ink */
  --bg: #ffffff; --panel: #ffffff; --band: #f2f2ef;
  --fg: #15161a; --fg2: #44464d; --fg3: #63666e;
  --line: #b4b6bd; --grid: #e4e5e8; --rule: #15161a;
  /* chart roles outside the explanation charts */
  --lim: #2745bc; --limtext: #2745bc;            /* blue: the measured series; links and focus rings */
  --sig: #d42f0c; --ex: var(--sig); --sigtext: #b32707;   /* red: the one thing a chart is about */
  --alt: #bb8b00; --alttext: #7f5d00;            /* amber: a second series */
  --aux: #a96de6; --auxtext: #7a4aba;            /* purple: a third series, used once; lighter than the blue so the two differ without their hue, and its line is dashed */
  --heat: var(--sig); --ctx: var(--fg3);         /* the heat map's one red; grey bars that are context */
  /* the seven explanations: blues = nobody, amber = never spread, plums and the red hatch = someone did spread */
  --c-empty: #456cd7; --c-rare: #1b2f8f; --c-route: #d077a6; --c-stuck: #bb8b00; --c-unnot: #a32c74; --c-hidden: #5c1340; --c-excl: #d42f0c; --c-excl-tint: #fce7e3;
  --on-empty: #ffffff; --on-rare: #ffffff; --on-route: #15161a; --on-stuck: #15161a; --on-unnot: #ffffff; --on-hidden: #ffffff; --on-excl: var(--fg);
  --ink-hidden: var(--on-hidden);
  --fam-alone: var(--c-rare); --fam-stuck: var(--c-stuck); --fam-spread: var(--c-unnot);
  --focus: var(--lim);
  /* type */
  --sans: "Archivo", "Archivo Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", "Source Serif Fallback", Charter, "Bitstream Charter", Georgia, serif;
  --body: var(--serif); --display: var(--sans); --mono: var(--sans);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121316; --panel: #121316; --band: #1b1d22;
    --fg: #ecebe7; --fg2: #b9bbc2; --fg3: #9396a0;
    --line: #484b54; --grid: #26282e; --rule: #a4a7b0;
    --lim: #80a1f6; --limtext: #80a1f6;
    --sig: #fa653d; --sigtext: #fa846b;
    --alt: #e5b23f; --alttext: #e5b650;
    --aux: #ae53e6; --auxtext: #c587f0;
    --heat: #cc5535; --ctx: #6a6d77;
    --c-empty: #8aacfa; --c-rare: #3f60d9; --c-route: #f1bcd6; --c-stuck: #e5b23f; --c-unnot: #e074b0; --c-hidden: #a53777; --c-excl: #fa653d; --c-excl-tint: #37201c;
    --on-empty: #121316; --on-rare: #ffffff; --on-route: #121316; --on-stuck: #121316; --on-unnot: #121316; --on-hidden: #ffffff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121316; --panel: #121316; --band: #1b1d22;
  --fg: #ecebe7; --fg2: #b9bbc2; --fg3: #9396a0;
  --line: #484b54; --grid: #26282e; --rule: #a4a7b0;
  --lim: #80a1f6; --limtext: #80a1f6;
  --sig: #fa653d; --sigtext: #fa846b;
  --alt: #e5b23f; --alttext: #e5b650;
  --aux: #ae53e6; --auxtext: #c587f0;
  --heat: #cc5535; --ctx: #6a6d77;
  --c-empty: #8aacfa; --c-rare: #3f60d9; --c-route: #f1bcd6; --c-stuck: #e5b23f; --c-unnot: #e074b0; --c-hidden: #a53777; --c-excl: #fa653d; --c-excl-tint: #37201c;
  --on-empty: #121316; --on-rare: #ffffff; --on-route: #121316; --on-stuck: #121316; --on-unnot: #121316; --on-hidden: #ffffff;
  color-scheme: dark;
}

/* fallback faces, metric-adjusted so that a blocked web font changes the look but not the layout:
   the stand-ins are scaled to be no wider than the Archivo instance they replace */
@font-face { font-family: "Archivo Fallback"; src: local("Helvetica Neue"), local("Helvetica"), local("Arial"), local("Liberation Sans"), local("Arimo"); font-weight: 100 549; size-adjust: 97%; }
@font-face { font-family: "Archivo Fallback"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 550 900; size-adjust: 93%; }
/* chart text is set at 92% width, so its stand-in is scaled down a little further */
@font-face { font-family: "Archivo Chart Fallback"; src: local("Helvetica Neue"), local("Helvetica"), local("Arial"), local("Liberation Sans"), local("Arimo"); font-weight: 100 549; size-adjust: 91%; }
@font-face { font-family: "Archivo Chart Fallback"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 550 900; size-adjust: 87%; }
@font-face { font-family: "Archivo Display Fallback"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 600 900; size-adjust: 80%; }
@font-face { font-family: "Source Serif Fallback"; src: local("Charter"), local("Georgia"), local("Liberation Serif"), local("Tinos"); size-adjust: 100%; }

/* layout variables: page padding, the left gutter that holds section numbers and figure numbers, the reading measure */
:root { --pad: 16px; --gut: 0px; --measure: 40rem; --note: 35rem; --dsans: "Archivo", "Archivo Display Fallback", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --csans: "Archivo", "Archivo Chart Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }
@media (min-width: 480px) { :root { --pad: 24px; } }
@media (min-width: 760px) { :root { --pad: 32px; } }
@media (min-width: 900px) { :root { --gut: 120px; } }
@media (min-width: 1180px) { :root { --pad: 40px; --gut: 232px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.55; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums; counter-reset: fig; }
@media (min-width: 760px) { body { font-size: 1.1875rem; line-height: 1.58; } }
.wrap { max-width: calc(1200px + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad) 56px; }

/* ---------- running text ---------- */
p { margin: 0 0 1em; }
.col > * { max-width: var(--measure); }
.col > p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--lim); text-decoration-thickness: 0.09em; text-underline-offset: 0.2em; }
a:hover { color: var(--limtext); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
strong, b { font-weight: 650; }
/* exponents never fall under 12 px: one digit there changes a number tenfold */
sup { font-size: max(0.75em, 12px); line-height: 0; }
.dim { color: var(--fg2); }
.num { font-variant-numeric: lining-nums tabular-nums; }
.num.words, figcaption .num, p .num, td .num, li .num { font-variant-numeric: lining-nums; }
.term { border-bottom: 1px dotted var(--fg3); cursor: help; }
/* a citation in the text links to its entry in the reference list, and is marked more quietly than other links */
.cite { color: inherit; text-decoration-color: var(--fg3); text-decoration-thickness: 1px; }

/* ---------- headings: one weight of emphasis, no italic, no coloured word ---------- */
h1, h2, h3 { font-family: var(--dsans); margin: 0; color: var(--fg); font-style: normal; overflow-wrap: break-word; }
h1 em, h2 em, h3 em, h1 i, h2 i, h3 i { font-style: inherit; font-weight: inherit; color: inherit; font-family: inherit; }
h1 { font-weight: 700; font-stretch: 78%; font-size: clamp(2.125rem, 11vw, 5.25rem); line-height: 0.96; letter-spacing: -0.014em; word-spacing: 0.05em; text-wrap: balance; }
h2 { font-weight: 700; font-stretch: 84%; font-size: clamp(1.75rem, 3.7vw, 2.625rem); line-height: 1.08; letter-spacing: -0.008em; word-spacing: 0.04em; text-wrap: balance; }
.col > h2 { max-width: 21em; margin-bottom: 0.6em; }
h3 { font-family: var(--sans); font-weight: 700; font-stretch: 92%; font-size: 1.375rem; line-height: 1.2; margin: 1.9em 0 0.5em; text-wrap: balance; }
/* a sub-heading in a text column takes the section heading's condensed cut, a clear step above a figure title (20 px) and below the section heading */
.col > h3 { font-family: var(--dsans); font-stretch: 84%; font-size: 1.5rem; line-height: 1.12; letter-spacing: -0.006em; word-spacing: 0.03em; margin: 2em 0 0.5em; max-width: 24em; }
.col > h3:first-child { margin-top: 0.3em; }
@media (min-width: 760px) { .col > h3 { font-size: 1.75rem; margin-top: 2.3em; } }
h4 { font-family: var(--sans); font-weight: 700; font-stretch: 92%; font-size: 1.25rem; line-height: 1.2; margin: 0; color: var(--fg); text-wrap: balance; }

/* ---------- page header ---------- */
/* The header is one column whose parts are placed by name. The block of buttons and notes (.change) gives up its own box, so that the sentence
   the buttons change (#hero-lead) can stand directly under them at every width: the buttons then never move when it re-wraps, and no blank has
   to be kept for its longest wording. Everything else keeps the order of the markup: title, lede, byline, the three answers, the buttons,
   that sentence, the notes, Figure 1, the fold, the contents. From 1000 px the same parts are placed on a grid (see the end of the file) */
header.hero { border-top: 4px solid var(--fg); padding-bottom: 8px; display: flex; flex-direction: column; }
header.hero > .change { display: contents; }
header.hero .controls { order: 1; margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); }
header.hero #hero-lead { order: 2; margin: 14px 0 10px; min-height: 1.4em !important; }
header.hero > .change > .hero-note { order: 3; }
header.hero > figure { order: 4; margin-bottom: 0; }
header.hero > #hero-more { order: 5; }
header.hero > nav { order: 6; }
/* the note for readers without scripts stands under the byline (it keeps the order of the markup); it is in the page only when scripts are off */
header.hero > noscript { display: block; }
header.hero > .tag { display: flex; flex-wrap: wrap; gap: 2px 20px; padding: 10px 0 11px; border-bottom: 1px solid var(--rule); font: 500 0.875rem/1.3 var(--sans); color: var(--fg2); }
header.hero > .tag span { display: inline-block; }
header.hero > .tag span::first-letter { text-transform: uppercase; }
header.hero > .tag span:first-child { font-weight: 700; color: var(--fg); }
header.hero > .tag span:last-child { margin-left: auto; }
/* on a phone the topic and the date share the first line and the description takes the second */
@media (max-width: 559px) { header.hero > .tag span:nth-child(2) { order: 3; flex-basis: 100%; } }
header.hero h1 { margin: clamp(18px, 3.4vw, 36px) 0 0 -0.03em; }
.lede { font-size: clamp(1.0625rem, 1.2vw + 0.8rem, 1.3125rem); line-height: 1.48; max-width: var(--measure); margin: clamp(14px, 2.2vw, 24px) 0 0; }
.byline { font: 400 0.875rem/1.45 var(--sans); color: var(--fg2); margin: 14px 0 0; max-width: 34rem; }

/* the three answers: the numbers are the story, and each stands under a bar in its family's colour, so the three read as the key to Figure 1.
   Each block is a column whose number comes first to the eye whichever of the number and the name comes first in the markup */
.family-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin: 32px 0 0; align-items: start; }
.family-cards > div { display: flex; flex-direction: column; border-top: 10px solid var(--fg); padding-top: 10px; min-width: 0; }
.family-cards .big { order: -1; font-family: var(--dsans); font-weight: 700; font-stretch: 78%; font-size: clamp(3.5rem, 6.6vw, 5.25rem); line-height: 0.95; letter-spacing: -0.015em; font-variant-numeric: lining-nums tabular-nums; }
.family-cards h2 { font-family: var(--sans); font-weight: 700; font-stretch: 92%; font-size: 1.25rem; line-height: 1.2; letter-spacing: 0; word-spacing: 0; margin: 8px 0 0; }
.family-cards p { font: 400 0.9375rem/1.45 var(--sans); color: var(--fg2); margin: 5px 0 0; max-width: 24rem; }
.family-cards p b { color: var(--fg); font-weight: 700; }
#hero-lead { font: 500 1.125rem/1.4 var(--sans); color: var(--fg); margin: 14px 0 10px; max-width: var(--measure); min-height: 1.4em; }
#hero-lead b { font-weight: 700; }
/* under the first button the sentence only repeats the three numbers above it, so it is kept out of sight and left for screen readers
   (clipped, as .vh is; it is not removed from the page and not marked hidden). The script gives it the class "shown" once another
   way of counting is chosen. Without that class it is out of sight, so it never flashes before the script has run, nor for a reader without scripts.
   It stays in the flow, one clipped pixel high that its margin gives back: a box that became or stopped being absolutely placed would switch off
   the browser's scroll anchoring for that layout, and the page then slid by up to 34 px under a pressed button on a wide screen */
header.hero #hero-lead:not(.shown) { height: 1px; min-height: 0 !important; margin: 0 0 -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
/* the note under it then takes the space the sentence kept between the buttons and the notes */
header.hero #hero-lead:not(.shown) + .hero-note { margin-top: 14px; }
.hero-note { font: 400 0.9375rem/1.5 var(--sans); color: var(--fg2); margin: 0 0 0.8em; max-width: var(--note); }
.hero-note b { color: var(--fg); font-weight: 700; }
.change > .hero-note:last-child { margin-bottom: 0; }
/* the note on the button in force, in ink: the script shows one of its four wordings and hides the others with the hidden attribute */
#hero-school-note { color: var(--fg); }
#hero-school-note > span[hidden] { display: none; }
header.hero > #hero-more { margin: 20px 0 0; }

/* the contents list: thirteen ruled lines, each numbered as its section is */
header.hero > nav { margin-top: 28px; }
.toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; font: 700 0.9375rem/1.25 var(--sans); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.toc li { counter-increment: toc; break-inside: avoid; }
.toc li + li { border-top: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 2.3em minmax(0, 1fr); align-items: baseline; align-content: center; min-height: 44px; padding: 6px 0 7px; text-decoration: none; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-weight: 400; color: var(--fg2); font-variant-numeric: lining-nums tabular-nums; }
.toc a:hover { color: var(--limtext); }

/* ---------- sections ---------- */
section { position: relative; margin-top: 88px; padding: 20px 0 0 var(--gut); border-top: 2px solid var(--rule); }
section > .col > .tag { display: flex; align-items: baseline; font: 500 0.9375rem/1.3 var(--sans); color: var(--fg2); margin: 0 0 12px; }
section > .col > .tag b { flex: none; font-family: var(--dsans); font-weight: 700; font-stretch: 78%; font-size: 1.0625rem; color: var(--fg); margin-right: 0.6em; font-variant-numeric: lining-nums tabular-nums; }
section > .col > .tag span { display: inline-block; min-width: 0; overflow-wrap: break-word; }
section > .col > .tag span::first-letter { text-transform: uppercase; }
section > .col > .tag span:first-of-type { font-weight: 700; color: var(--fg); }
section > .col > .tag span + span { border-left: 1px solid var(--fg3); padding-left: 0.6em; margin-left: 0.6em; }
/* the way back to the contents list, at the right-hand end of each kicker: the page is many screens long at every width (access.py
   writes the link). It can be touched over 44 px of height; the extra lies over the space above and below the kicker (the negative margins
   give it back), so the kicker's line and the heading under it stand where they did. The link asks only for the room of its arrow and
   grows into what the kicker's words leave free, up to its own full width; where that is too little for "Contents", the word falls to a
   second line of the span, which is not shown (a screen reader still reads it), and the arrow stands alone. The arrow alone is narrower
   than a finger, so the link can be touched over 44 px of width as well: the extra lies over the end of the kicker's words and takes
   no room (a link that asked for 44 px of the line pushed a kicker to a second line on the smallest phones) */
section > .col > .tag .up { position: relative; flex: 1 0 calc(8px + 1em); min-width: 0; max-width: max-content; display: flex; margin: -12px 0 -12px auto; padding: 12px 0 12px 8px; font-weight: 500; color: var(--fg2); text-decoration: none; white-space: nowrap; }
section > .col > .tag .up span { flex: 1 1 auto; display: flex; flex-flow: row-reverse wrap; min-width: 0; height: 1.3em; overflow: hidden; border: 0; margin: 0; padding: 0; font-weight: inherit; color: inherit; }
section > .col > .tag .up span::before { content: "\2191"; content: "\2191" / ""; margin-left: 0.3em; }
section > .col > .tag .up::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 44px; }
section > .col > .tag .up:hover { color: var(--limtext); }
/* from 1180 px the kicker stands in the gutter, and the link stands under it on a line of its own, with its word */
@media (min-width: 1180px) {
  section > .col > .tag .up { display: block; flex: none; max-width: none; margin: 7px 0 0; padding: 3px 0; }
  section > .col > .tag .up span { display: inline; height: auto; overflow: visible; }
  section > .col > .tag .up span::before { margin: 0 0.3em 0 0; }
  section > .col > .tag .up::after { content: none; }
}

/* ---------- figures: a rule, the figure number and a title that says what the chart shows, the chart on the page itself, then the notes ---------- */
figure { counter-increment: fig; position: relative; margin: 44px 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.frame { display: flex; flex-direction: column; overflow: visible; min-width: 0; }
figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.figtitle { font: 700 1.25rem/1.22 var(--sans); font-stretch: 92%; margin: 0 0 4px; max-width: 44rem; text-wrap: balance; }
/* a link to a chart lands on its title, and a link to a part of a section on its first line: neither stands flush against the top of the window */
.figtitle, #seti-sec, #positions, #unclaimed { scroll-margin-top: 12px; }
/* the figure number is written in the page (span.fignum, put there by access.py), so that it is read out and copied with the title.
   A title that has none still takes its number from the counter; that rule stands alone, so a browser without :has() drops only it */
.figtitle > .fignum { display: block; font: 500 0.875rem/1.3 var(--sans); font-stretch: 100%; color: var(--fg2); margin: 0 0 3px; font-variant-numeric: lining-nums tabular-nums; }
.figtitle:not(:has(> .fignum))::before { content: "Figure " counter(fig); display: block; font: 500 0.875rem/1.3 var(--sans); font-stretch: 100%; color: var(--fg2); margin: 0 0 3px; font-variant-numeric: lining-nums tabular-nums; }
.figsub { font: 400 0.9375rem/1.4 var(--sans); color: var(--fg2); margin: 0 0 4px; max-width: var(--note); }
.figtitle + .frame, .figsub + .frame, .figtitle + .controls, .figsub + .controls { margin-top: 16px; }
figcaption { font: 400 0.9375rem/1.5 var(--sans); color: var(--fg2); margin: 16px 0 0; max-width: var(--note); }
figcaption b { color: var(--fg); font-weight: 700; }
.paperlink { font: 400 0.9375rem/1.5 var(--sans); }
/* inside a caption or a fold the link to the working paper takes the size of the text round it; under a caption it stands on a line of its own */
figcaption .paperlink, details.alt .paperlink { font: inherit; }
figcaption .paperlink { display: block; margin-top: 6px; }
/* small links keep a 24 px target: vertical padding on an inline box enlarges the hit area without moving the lines */
.paperlink a, .doclinks a, .refs a, figcaption a, .hero-note a, details.alt a, .slider small a { padding-block: 5px; }
/* on a touch screen the links to the working papers, which stand one to an entry, take 44 px */
/* on a touch screen each working-paper link can be touched over a height of 44 px; the padding of an inline link moves nothing */
@media (pointer: coarse) { .doclinks a { padding-block: 15px; } }
/* so can the link under a figure's caption and the study names in the table of measurements, each on a line of its own: 12 px of padding
   above and below, half of it given back by the margin, so the line grows by 6 px either way. Where the table is a table (from 760 px)
   all of it is given back, and a study's name stays level with the first line of its row */
@media (pointer: coarse) {
  figcaption .paperlink a, #studies-table th a { display: inline-block; padding-block: 12px; margin-block: -6px; }
}
@media (pointer: coarse) and (min-width: 760px) { #studies-table th a { margin-block: -12px; } }

/* ---------- folds: one device wherever detail is put away (under a caption, between paragraphs, in the header, round the references).
   A line between two hairlines: a plus or minus sign and a name in the labelling face. The whole line is the control and is 44 px tall.
   Opened, the notes are set in the caption's face at the caption's measure, flush with the column, and the lower hairline closes them. ---------- */
details.alt { margin: 0 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 0.9375rem/1.5 var(--sans); color: var(--fg2); }
details.alt:last-child { margin-bottom: 0; }
/* two folds in a row share the hairline between them */
details.alt + details.alt { margin-top: -20px; border-top: 0; }
details.alt > summary, .studygrid details > summary { display: flex; align-items: center; min-height: 44px; padding: 4px 0 5px; cursor: pointer; list-style: none; font: 700 0.9375rem/1.3 var(--sans); color: var(--fg); -webkit-tap-highlight-color: transparent; }
details.alt > summary::-webkit-details-marker, .studygrid details > summary::-webkit-details-marker { display: none; }
details.alt > summary::before, .studygrid details > summary::before { content: "+"; content: "+" / ""; flex: none; width: 1.05em; font-weight: 400; font-size: 1.2em; line-height: 1; margin-top: -0.12em; }
details.alt[open] > summary::before, .studygrid details[open] > summary::before { content: "\2212"; content: "\2212" / ""; }
details.alt > summary:hover, .studygrid details > summary:hover { color: var(--limtext); }
details.alt > summary:focus-visible, .studygrid details > summary:focus-visible { outline-offset: 1px; }
details.alt > :not(summary) { max-width: var(--note); }
details.alt > figure, details.alt > .tablewrap, details.alt > .frame { max-width: none; }
details.alt > p, details.alt > .hero-note { margin: 0 0 0.75em; }
details.alt > ul, details.alt > ol:not(.refs) { margin: 0 0 0.75em; padding-left: 1.2em; }
details.alt > ul > li, details.alt > ol:not(.refs) > li { margin-bottom: 0.3em; }
details.alt > summary + * { margin-top: 2px; }
details.alt > :last-child:not(summary) { margin-bottom: 16px; }
details.alt b, details.alt strong { color: var(--fg); font-weight: 700; }
/* under a chart the caption and its fold are one block: same face, same measure, the fold's line a short step under the caption */
figure > details.alt { max-width: var(--note); }
figcaption + details.alt { margin-top: 12px; }
@media (min-width: 760px) { figcaption, details.alt, .hero-note { font-size: 1rem; } }

/* chart text. Upright sans for everything that labels or measures; serif italic only for notes written inside a plot */
svg text { font-family: var(--csans); font-stretch: 92%; font-size: 13px; fill: var(--fg2); font-variant-numeric: lining-nums tabular-nums; }
svg .axis line, svg .axis path { stroke: var(--line); }
svg .gridline { stroke: var(--grid); stroke-width: 1; }
svg .labs { fill: var(--fg2); font-size: 13px; }
svg .lab { fill: var(--fg); font-size: 14px; font-weight: 500; }
svg .rowlab { fill: var(--fg); font-size: 14px; font-weight: 700; }
svg .tagtxt { fill: var(--fg); font-size: 13px; font-weight: 700; letter-spacing: 0; }
svg .seglab { fill: var(--fg); font-size: 13px; font-weight: 600; }
svg .inbar { font-size: 13px; font-weight: 700; pointer-events: none; }
svg .val { fill: var(--fg); font-size: 14px; font-weight: 700; }
svg .anno { fill: var(--fg); font-family: var(--serif); font-stretch: normal; font-style: italic; font-size: 14px; font-weight: 400; }
svg .annos { fill: var(--fg2); font-family: var(--serif); font-stretch: normal; font-style: italic; font-size: 13px; font-weight: 400; }
svg [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* a tap or a click on a chart label that can take the keyboard draws no ring (the browser's own is rounded and off-palette); the keyboard ring above is unaffected */
svg [tabindex]:focus:not(:focus-visible) { outline: none; }

/* keys: always under the plot (the bars come first on a phone) and above the caption */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 0.875rem/1.3 var(--sans); color: var(--fg); margin: 12px 0 0; }
.legend:empty { display: none; }
.legend > span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; display: inline-block; flex: none; }
@media (max-width: 619px) { .legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ---------- controls ---------- */
.controls { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: stretch; margin-bottom: 14px; }
.controls .tag { flex: 1 0 100%; font: 700 0.9375rem/1.3 var(--sans); color: var(--fg); }
/* the ways of counting: four joined buttons. Ink borders all round, solid ink when pressed, one even grid */
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0; flex: 1 1 100%; min-width: 0; padding: 0 2px 2px 0; }
/* the borders of neighbours overlap (the negative margins), and the group's padding takes the overhang back, so the group ends on the text edge and is exactly as tall as a button beside it */
.seg button { font: 600 0.9375rem/1.2 var(--sans); color: var(--fg); background: var(--panel); border: 2px solid var(--fg); border-radius: 0; margin: 0 -2px -2px 0; padding: 9px 12px 9px calc(12px + 1em); min-height: 48px; cursor: pointer; text-align: left; position: relative; }
.seg button:hover { background: var(--band); }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
/* the square marker keeps its place in every button and is painted only in the pressed one, so pressing a button never re-wraps its label */
.seg button::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin: 0 0.5em 0 -1em; background: transparent; vertical-align: 0.05em; }
.seg button[aria-pressed="true"]::before { background: currentColor; }
.seg button:focus-visible { z-index: 2; outline-offset: 3px; }
button.reset { font: 600 0.9375rem/1.2 var(--sans); color: var(--fg); background: transparent; border: 2px solid var(--fg); border-radius: 0; padding: 9px 16px; min-height: 44px; cursor: pointer; flex: none; }
button.reset:hover { background: var(--fg); color: var(--bg); }
/* on small phones the labels are set a size down and closer to the borders, so that none runs to three lines; under 370 px the marker gives up its place too (the pressed button is still solid ink) */
@media (max-width: 389px) { .seg button { font-size: 0.875rem; padding: 9px 8px 9px calc(10px + 1em); } }
@media (max-width: 369px) { .seg button { padding-left: 10px; } .seg button::before { content: none; } }
@media (max-width: 339px) { .seg button { font-size: 0.8125rem; padding: 9px 6px 9px 8px; } }
/* two by two until the four fit side by side at their full width (46rem, 184 px each), where every label takes two lines at most.
   The group asks for that width, so a button that shares its row (Reset) stands beside it only where there is room, and under it, at the left, otherwise */
@media (min-width: 800px) {
  .seg { grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 46rem; max-width: 46rem; }
  .seg button { min-height: 44px; }
}

/* the playground is a tool, so it stands on the one tinted ground, edge to edge */
#play figure { border-top: 0; margin: 32px calc(-1 * var(--pad)) 0 calc(-1 * var(--pad) - var(--gut)); padding: 26px var(--pad) 34px calc(var(--pad) + var(--gut)); background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); --panel: var(--band); }
/* on the tinted ground three of the bar's colours are a shade deeper (lighter in the dark theme), so every block stands at least 3 to 1 against it */
#play figure { --c-stuck: #ad8000; --c-route: #c66597; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #play figure { --c-stuck: #e5b23f; --c-route: #f1bcd6; --c-hidden: #b8448a; } }
:root[data-theme="dark"] #play figure { --c-stuck: #e5b23f; --c-route: #f1bcd6; --c-hidden: #b8448a; }
#play .figtitle { font-size: 1.5rem; }
#play .controls { margin: 14px 0 20px; }
#play .frame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; }
#play-legend { order: 0; }
#play .frame .figsub { font-size: 1rem; color: var(--fg2); margin: 14px 0 0; max-width: none; }
#play .frame .figsub strong { font-weight: 700; }
#play-lead { display: block; font-size: 1.125rem; line-height: 1.3; margin-top: 3px; }
/* room for the longest read-out, so the sliders do not move under the finger; the chart script then sets the exact height it measures */
@media (max-width: 999px) { #play-lead { min-height: 3.9em; } }
#play-none { display: block; font-family: var(--dsans); font-weight: 700; font-stretch: 78%; font-size: 4rem; line-height: 1; letter-spacing: -0.015em; margin-top: 4px; font-variant-numeric: lining-nums tabular-nums; }
.sliders { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 40px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); }
/* a label keeps room for two lines, so the tracks in one row of sliders stand at one height; a one-line label sits at the foot of that room, next to its track */
.slider label { display: flex; justify-content: space-between; align-items: baseline; align-items: last baseline; gap: 12px; min-height: 2.5em; font: 700 0.9375rem/1.25 var(--sans); color: var(--fg); }
.slider label output { font: 700 1.125rem/1 var(--sans); font-variant-numeric: lining-nums tabular-nums; color: var(--fg); }
.slider small { display: block; font: 400 0.875rem/1.4 var(--sans); color: var(--fg2); margin-top: 2px; }
input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; accent-color: var(--fg); }
input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--fg3); }
/* the handle is a square, like every other mark on the page */
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 0; background: var(--fg); border: 3px solid var(--band); }
input[type=range]::-moz-range-track { height: 4px; background: var(--fg3); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 0; background: var(--fg); border: 3px solid var(--band); }
/* the ring stands inside the slider's own box, clear of the label above it */
input[type=range]:focus-visible { outline-offset: -3px; }
/* on a touch screen the slider can be taken from 44 px of height. The extra 12 px lie under the track and are given back by the margin, so nothing moves */
@media (pointer: coarse) { input[type=range] { height: 44px; padding: 0 0 12px; margin: 0 0 -12px; position: relative; z-index: 1; } }
/* there the slider's box reaches 8 px into the labels of the track's two ends, and its ring would run through them. The ring is drawn
   round the box that holds the track instead. That box is made to end where the slider's margin ends (flow-root: the margin no longer
   passes through it), so it is the 32 px that a slider has for a mouse, and the ring is the same ring in the same place; nothing moves.
   (A ring simply drawn 10 px inside the tall box clears the labels too, but it sits off the track and cuts through the thumb.)
   A browser without :has() keeps the ring on the slider itself */
@media (pointer: coarse) {
  @supports selector(:has(a)) {
    #play .slider .track { display: flow-root; }
    #play .slider input[type=range]:focus-visible { outline: none; }
    #play .slider .track:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -3px; }
  }
}
@media (min-width: 560px) { .sliders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  #play .frame { grid-template-columns: 250px minmax(0, 1fr); }
  #play-bar, #play-legend { grid-column: 1 / -1; }
  /* one rule across the whole tool, under the key; the read-out and the sliders start on one line below it */
  #play-legend { padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
  #play .frame .figsub { grid-column: 1; margin-top: 16px !important; }
  #play .frame .figsub + .figsub { margin-top: 14px !important; }
  #play .sliders { grid-column: 2; grid-row: 3 / span 4; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; margin-top: 16px; border-top: 0; padding-top: 0; }
}
/* between 1000 and 1179 px three columns of sliders are too narrow for their labels */
@media (min-width: 1000px) and (max-width: 1179px) { #play .sliders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the sliders run down the page under the answer (on a laptop the six of them fill the window), so at every width the bar that shows the
   answer stays at the top of the window while they are moved. A slider that takes the keyboard is brought clear of the bar: by this
   margin when the browser scrolls to it, and by charts1.js when it lay under the bar already (the browser then does not scroll) */
#play-bar { position: sticky; top: 0; z-index: 3; background: var(--band); padding: 8px 0 7px; border-bottom: 1px solid var(--rule); }
#play .slider, #play input[type=range] { scroll-margin-top: 160px; }

/* ---------- callouts: the point of a section, between rules, never in a box ---------- */
.callout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; margin: 32px 0; font-size: 1.0625em; line-height: 1.5; }
.col > .callout { max-width: none; }
.callout > p { margin: 0; max-width: var(--measure); }
.callout > p:first-child { border-top: 2px solid var(--rule); padding-top: 14px; }
.callout > p:last-child { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.callout > p + p { margin-top: 0.8em; }
/* a callout that makes two points sets them side by side on a wide screen, each a statement under its own rule */
@media (min-width: 1000px) {
  .callout { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .callout > p, .callout > p:first-child, .callout > p:last-child { border-top: 2px solid var(--rule); border-bottom: 1px solid var(--line); padding: 14px 0 16px; margin-top: 0; }
}
/* the two statements in the first section are of unequal length, and the longer one takes the wider column */
@media (min-width: 1000px) { #answer .callout { grid-auto-flow: row; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); } }
/* a pair of statements, each under a bar in the colour of the answer it speaks for (the colour comes from the inline style) */
.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 40px; margin: 32px 0; }
.two .callout { display: block; margin: 0; padding: 12px 0 0; border-top-width: 10px; border-top-style: solid; font-size: 1em; line-height: 1.55; }
.two .callout > p, .two .callout > p:first-child, .two .callout > p:last-child { border: 0; padding: 0; max-width: none; }
@media (min-width: 760px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- the further studies: a ledger of ruled rows under group headings, not a grid of cards.
   Markup (wave2.js): #wave2-grid.studygrid > h3.studygroup, then div.study#study-KEY > h4, p.finding, span.chk, details, p.paperlink.
   The rules carry the id, so they hold whatever is appended to the stylesheet after them. ---------- */
.studygrid { margin-top: 32px; border-bottom: 1px solid var(--rule); }
/* what follows the list (a closing paragraph, a fold on the whole list) stands clear of its last rule */
.studygrid + .col { margin-top: 28px; }
/* a group heading: a full rule and the question the group answers */
#wave2-grid > .studygroup { font: 700 1.5rem/1.15 var(--dsans); font-stretch: 84%; letter-spacing: -0.006em; word-spacing: 0.03em; color: var(--fg); margin: 52px 0 0; padding: 12px 0 14px; border-top: 2px solid var(--rule); max-width: none; text-wrap: balance; }
#wave2-grid > .studygroup:first-child { margin-top: 0; }
.studygrid > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; padding: 16px 0 14px; border-top: 1px solid var(--rule); min-width: 0; scroll-margin-top: 12px; }
#wave2-grid h4, .studygrid > div > h3 { font: 700 1.25rem/1.2 var(--sans); font-stretch: 92%; color: var(--fg); margin: 0 0 8px; max-width: 22em; text-wrap: balance; }
#wave2-grid .finding, .studygrid > div > p { font: inherit; font-size: 0.95em; line-height: 1.5; color: var(--fg); margin: 0; max-width: 40rem; }
/* the status of the check: a small square and a few words on one line, never a pill. The square is solid only where the result was checked again.
   (The three labels in use are far shorter than a phone's line; at a very large text size a label may take a second line, and is never cut) */
#wave2-grid .chk { display: block; position: relative; padding: 0 0 0 16px; margin: 9px 0 0; max-width: 40rem; font: 500 0.875rem/1.35 var(--sans); color: var(--fg2); border: 0; border-radius: 0; background: none; }
#wave2-grid .chk::before { content: ""; position: absolute; left: 0; top: 0.34em; width: 8px; height: 8px; box-sizing: border-box; border: 1px solid var(--fg2); background: none; }
#wave2-grid .chk[data-checked="checked"]::before { background: var(--fg2); }
/* "Limits and revisions" and the paper link share one line: the link sits beside the closed fold's name, and stays on that line when the fold opens.
   The link's left margin is the room the fold's name takes, in ems, so it grows with the reader's text size */
#wave2-grid .study > h4, #wave2-grid .study > .finding, #wave2-grid .study > .chk { grid-column: 1; grid-row: auto; }
.studygrid > div > details, #wave2-grid .study > details { grid-column: 1; grid-row: 4; margin: 4px 0 0; max-width: 40rem; min-width: 0; }
.studygrid > div > .paperlink, #wave2-grid .study > .paperlink { grid-column: 1; grid-row: 4; justify-self: start; align-self: start; margin: 4px 0 0 12.5em; max-width: 40rem; font: 400 0.9375rem/1.3 var(--sans); padding: 0; }
.studygrid .paperlink a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; white-space: normal; }
.studygrid details > summary { width: fit-content; padding-right: 0.5em; }
.studygrid details > p { font: 400 0.9375rem/1.5 var(--sans); color: var(--fg2); margin: 0 0 0.75em; max-width: var(--note); }
.studygrid details > summary + p { margin-top: 2px; }
.studygrid details > p:last-child { margin-bottom: 8px; }
#wave2-grid details > p b, .studygrid details > p b { color: var(--fg); font-weight: 700; }
@media (min-width: 760px) { .studygrid details > p { font-size: 1rem; } }
@media (min-width: 1000px) {
  .studygrid > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto auto 1fr auto; padding: 18px 0 14px; }
  /* title and status on the left, the finding and its fold on the right */
  #wave2-grid .study > h4 { grid-column: 1; grid-row: 1; margin: 0; }
  #wave2-grid .study > .chk { grid-column: 1; grid-row: 2 / span 3; align-self: start; max-width: 20rem; padding-right: 8px; }
  #wave2-grid .study > .finding { grid-column: 2; grid-row: 1 / span 3; }
  #wave2-grid .study > details, #wave2-grid .study > .paperlink { grid-column: 2; grid-row: 4; }
  /* rows written the earlier way (a label, a title, one paragraph) keep their places */
  .studygrid > div > .pill { grid-column: 1; grid-row: 1; }
  .studygrid > div > h3 { grid-column: 1; grid-row: 2 / span 3; margin-bottom: 0; }
  .studygrid > div > p:not(.paperlink):not(.finding) { grid-column: 2; grid-row: 1 / span 3; }
  .studygrid > div > details, .studygrid > div > .paperlink { grid-column: 2; }
}
/* where a row is too narrow for the fold's name and the link side by side (a large text size on a phone, or a very large one on a
   desktop, where the two share the right-hand column), the link takes the line under the fold. The row is measured, not the window,
   and in rems, so the test follows the reader's text size. These rules must stand after the block above, which they override */
#wave2-grid .study { container-type: inline-size; }
@container (max-width: 17.9rem) { #wave2-grid .study > .paperlink { grid-row: 5; margin: 0; } }
@media (min-width: 1000px) { @container (max-width: calc(26.9rem + 40px)) { #wave2-grid .study > .paperlink { grid-row: 5; margin: 0; } } }

/* status words: a small square and the word, never a pill. The square is solid ink for work that is new */
.pill { font: 500 0.875rem/1.3 var(--sans); color: var(--fg2); display: block; }
.pill::first-letter { text-transform: uppercase; }
.pill.new { color: var(--fg); font-weight: 700; }
td .pill { display: inline-block; position: relative; padding-left: 16px; color: var(--fg); font-size: inherit; line-height: inherit; }
td .pill::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 8px; height: 8px; background: var(--fg3); }
td .pill.new::before { background: var(--fg); }
td .pill.new { font-weight: 700; }

/* ---------- table ---------- */
/* a table has a line of space above and below; the space below goes when the table ends its column or its section */
.tablewrap { overflow-x: auto; margin: 36px 0; }
.tablewrap:last-child { margin-bottom: 0; }
.col > .tablewrap { max-width: none; }
/* the table of measurements stands in a fold (open in the page; bind.js closes it on a phone). The fold takes the table's place and
   its width, with the same space above and below, and the table sits close under the fold's line */
#studies-table { max-width: none; margin: 36px 0; }
#studies-table > .tablewrap { margin-top: 6px; }
/* the table fold and the fold after it read as one group: one hairline between them, no empty band on a phone. Closed, the table fold
   is as wide as the fold after it, so that on a wide window the hairlines of the two are of one length */
#studies-table[open] { border-bottom: 0; margin-bottom: 28px; }
#studies-table[open] > .tablewrap { margin-bottom: 0; }
#studies-table:not([open]) { border-bottom: 0; margin-bottom: 0; max-width: var(--measure); }
table { border-collapse: collapse; width: 100%; font: 400 0.9375rem/1.45 var(--sans); font-variant-numeric: lining-nums; }
th, td { text-align: left; padding: 10px 20px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
thead th { font-weight: 700; font-size: 0.875rem; color: var(--fg); border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); vertical-align: bottom; }
tbody th { font-weight: 700; color: var(--fg); min-width: 9em; }
tbody td { color: var(--fg2); }
tbody td:last-child { color: var(--fg); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom-color: var(--fg); }
td.num, th.num { text-align: right; }
td:last-child::first-letter { text-transform: uppercase; }

/* ---------- method and sources: reference matter, set a little smaller ---------- */
#method .col > p { font-size: 0.95em; }
/* the heads that open the method paragraphs stand on a line of their own, with space above, so the section can be scanned */
#method .col > p > strong:first-child { display: block; font: 700 1.125rem/1.25 var(--sans); font-stretch: 92%; color: var(--fg); margin: 0 0 0.3em; }
#method .col > p:has(> strong:first-child) { margin-top: 1.7em; }
#method .col > h2 + p:has(> strong:first-child) { margin-top: 0; }
.col > .doclinks, .col > .refs, .col > #refs-fold, details.alt > .refs { max-width: none; }
#refs-fold { margin-top: 28px; }
.doclinks, .refs { font: 400 0.875rem/1.45 var(--sans); color: var(--fg2); margin: 0; padding-left: 1.7em; columns: 2 300px; column-gap: 40px; }
.doclinks { list-style: square; }
.doclinks li, .refs li { margin: 0 0 7px; break-inside: avoid; }
/* a reference reached from a citation in the text is marked, so that it can be found in a list of more than a hundred */
.refs li { scroll-margin-top: 28px; }
.refs li:target { background: var(--band); box-shadow: 0 -4px 0 var(--band), 0 4px 0 var(--band); }
.refs li:target::marker { color: var(--fg); font-weight: 700; }
.refs li:target a { color: var(--fg); }
.doclinks a { color: var(--fg); font-weight: 700; text-decoration: underline; text-decoration-color: var(--lim); }
/* a reference is a link, and says so with a hairline, in a grey that stands 3 to 1 against the page */
.refs a { color: var(--fg2); text-decoration: underline; text-decoration-color: var(--fg3); text-decoration-thickness: 1px; }
.doclinks a:hover { color: var(--limtext); }
.refs a:hover { color: var(--limtext); text-decoration-color: currentColor; }
.doclinks li span { color: var(--fg2); }
.refnote { font: 400 0.9375rem/1.5 var(--sans); color: var(--fg2); max-width: var(--note); }
/* the page closes as it opened: on the ink bar of the masthead */
footer { margin-top: 88px; padding: 16px 0 28px var(--gut); border-top: 2px solid var(--rule); border-bottom: 4px solid var(--fg); font: 400 0.875rem/1.5 var(--sans); color: var(--fg2); }
footer .col > * { max-width: var(--note); }

/* ---------- tooltip ---------- */
.tip { position: fixed; pointer-events: none; background: var(--bg); color: var(--fg); border: 1px solid var(--fg); border-radius: 0; padding: 8px 10px 9px; font: 400 0.875rem/1.4 var(--sans); max-width: 270px; z-index: 10; font-variant-numeric: lining-nums tabular-nums; }
.tip b { font-weight: 700; }

/* ---------- 760 to 999: the contents list in two columns ---------- */
@media (min-width: 760px) and (max-width: 999px) {
  .toc { columns: 2; column-gap: 40px; border-bottom: 0; }
  .toc li { border-bottom: 1px solid var(--line); }
  .toc li + li { border-top: 0; }
  /* the last line of each column closes it with the full rule (thirteen entries: seven and six) */
  .toc li:nth-child(7), .toc li:last-child { border-bottom-color: var(--rule); }
  header.hero > #hero-more { margin-top: 32px; }
}
/* ---------- from 760 the study table is a table again. Each column is given its share, so that none is squeezed to a few words a line;
   the shares are wishes and not fixed widths, so a column still makes room for its longest word ---------- */
@media (min-width: 760px) {
  #studies thead th:nth-child(1) { width: 14%; } #studies thead th:nth-child(2) { width: 24%; } #studies thead th:nth-child(3) { width: 25%; } #studies thead th:nth-child(4) { width: 15%; } #studies thead th:nth-child(5) { width: 22%; }
  #studies tbody th { min-width: 0; }
}

/* ---------- 900 to 1179: a narrow gutter that holds the section number only, so the text sits near the middle of the page ---------- */
@media (min-width: 900px) and (max-width: 1179px) {
  section > .col > .tag b { position: absolute; left: 0; top: 16px; font-size: 3.5rem; line-height: 1; font-weight: 300; letter-spacing: -0.02em; margin: 0 0 0 -0.03em; }
}

/* ---------- from 1000: the header is composed on twelve columns.
   Every part is placed by name: rows 1 and 2 the masthead line and the title; rows 3 and 4 the lede and the byline, with Figure 1 beside them;
   row 5 is left empty and takes up the difference when the figure is taller than the text beside it; row 6 the three answers, across;
   then, in the left columns, row 7 the buttons, row 8 the sentence they change, rows 9 to 12 the notes (as many as there are) and row 13 the fold,
   while the contents list runs down the right. The last row is the only flexible one and takes up any difference with the contents list. ---------- */
@media (min-width: 1000px) {
  header.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(13, auto) 1fr; column-gap: 32px; align-items: start; }
  header.hero > * { grid-column: 1 / -1; }
  header.hero > .tag { grid-row: 1; }
  header.hero > h1 { grid-row: 2; }
  header.hero > .lede { grid-column: 1 / span 5; grid-row: 3; font-size: clamp(1.0625rem, 0.636rem + 0.682vw, 1.25rem); line-height: 1.45; margin-top: 22px; max-width: none; }
  header.hero > .byline { grid-column: 1 / span 5; grid-row: 4; max-width: none; }
  header.hero > noscript { grid-column: 1 / span 5; grid-row: 5; }
  header.hero > figure { grid-column: 6 / -1; grid-row: 3 / span 3; margin: 22px 0 0; }
  /* beside the lede the caption takes the width of its chart, a size down, so the three numbers stay on the first screen */
  header.hero figcaption { max-width: none; font-size: 0.9375rem; }
  header.hero > .family-cards { grid-row: 6; margin-top: 26px; gap: 0 32px; }
  header.hero > .change > * { grid-column: 1 / span 7; }
  header.hero .controls { grid-row: 7; margin-top: 24px; }
  header.hero > .change .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; max-width: none; }
  header.hero #hero-lead { grid-column: 1 / span 7; grid-row: 8; max-width: none; margin: 16px 0 12px; }
  header.hero > .change > .hero-note { max-width: none; }
  header.hero > #hero-more { grid-column: 1 / span 7; grid-row: 13; margin-top: 12px; }
  header.hero > nav { grid-column: 8 / -1; grid-row: 7 / span 8; margin-top: 24px; }
}
/* with a mouse the contents lines can be closer set; a finger keeps 44 px */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  header.hero .toc { font-size: 0.875rem; }
  header.hero .toc a { min-height: 0; padding: 5px 0 6px; }
}

/* ---------- from 1180: the gutter. Section numbers and figure numbers stand in it ---------- */
@media (min-width: 1180px) {
  section { padding-top: 24px; }
  section > .col > .tag { position: absolute; left: 0; top: 14px; width: calc(var(--gut) - 40px); margin: 0; display: block; font-size: 0.875rem; line-height: 1.3; }
  section > .col > .tag b { display: block; font-size: 4rem; line-height: 1; font-weight: 300; letter-spacing: -0.02em; margin: 0 0 8px -0.03em; }
  section > .col > .tag span { display: block; }
  section > .col > .tag span + span { border-left: 0; padding-left: 0; margin-left: 0; }
  section > figure > .figtitle > .fignum, section > figure > .figtitle::before { position: absolute; left: calc(-1 * var(--gut)); top: 13px; width: calc(var(--gut) - 40px); margin: 0; font-weight: 700; color: var(--fg); }
  section > figure::before { content: ""; position: absolute; left: calc(-1 * var(--gut)); top: -1px; width: calc(var(--gut) - 40px); border-top: 1px solid var(--rule); }
  #play figure > .figtitle > .fignum, #play figure > .figtitle::before { left: var(--pad); top: 32px; }
  #play figure::before { content: none; }
  footer .col { max-width: var(--measure); }

  header.hero { column-gap: 40px; }
  header.hero > .lede { margin-top: 26px; }
  header.hero > figure { margin-top: 26px; }
  header.hero > .family-cards { margin-top: 30px; gap: 0 40px; }
}
/* from 1280 the left columns are the first two answers' columns, the contents list stands under the third, and the four buttons fit in one row */
@media (min-width: 1280px) {
  header.hero > .change > *, header.hero #hero-lead, header.hero > #hero-more { grid-column: 1 / span 8; }
  header.hero > .change .seg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  header.hero > .change > .hero-note { max-width: var(--note); }
  header.hero > nav { grid-column: 9 / -1; }
}

/* on a desktop the sentence the buttons change, when it is shown, is set like the notes under it: one voice and one right-hand edge.
   Below 1000 px it keeps its larger size, since the three numbers are off screen there when a button is pressed */
@media (min-width: 1000px) { header.hero #hero-lead { font-size: 1rem; line-height: 1.5; font-weight: 400; margin: 14px 0 10px; max-width: var(--note); } }

/* a short laptop window: the header closes up so that the three numbers are still on the first screen */
@media (min-width: 1180px) and (max-height: 800px) {
  header.hero h1 { margin-top: 14px; font-size: 4.5rem; }
  header.hero > .lede { margin-top: 18px; }
  header.hero > figure { margin-top: 18px; }
  header.hero > .family-cards { margin-top: 20px; }
  .family-cards .big { font-size: 4.5rem; }
}
@media (min-width: 1000px) and (max-width: 1179px) and (max-height: 800px) {
  header.hero h1 { margin-top: 14px; font-size: 4rem; }
  header.hero > .lede { line-height: 1.42; margin-top: 16px; }
  header.hero > figure { margin-top: 16px; }
  header.hero > .family-cards { margin-top: 18px; }
  .family-cards .big { font-size: 4rem; }
}

/* ---------- narrow screens ---------- */
@media (max-width: 759px) {
  section { margin-top: 64px; }
  figure { margin: 34px 0; }
  .family-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  header.hero > figure { margin: 26px 0 0; }
  header.hero h1 { margin-top: 16px; }
  .byline { margin-top: 10px; }
  /* each answer: the number in a column of its own, the name and its sentences beside it. The column holds the widest figure the buttons can produce
     ("≈70%"), is the same in all three answers, and grows with the figure if the reader's text size makes it wider */
  .family-cards > div { display: grid; grid-template-columns: minmax(min(6.9rem, 36%), auto) minmax(0, 1fr); column-gap: 12px; align-items: start; border-top-width: 8px; padding-top: 8px; }
  .family-cards .big { order: 0; font-size: 3rem; grid-column: 1 !important; grid-row: 1 / span 4; }
  .family-cards h2 { margin-top: 3px; font-size: 1.125rem; }
  .family-cards h2, .family-cards p { grid-column: 2 !important; overflow-wrap: break-word; }
  /* the tables become stacks of entries: the row's name, then (in the study table) what the study did to the answer, then the other cells, each with its column's name */
  .tablewrap table, .tablewrap tbody, .tablewrap tr, .tablewrap td, .tablewrap tbody th { display: block; width: 100%; }
  .tablewrap thead { display: none; }
  .tablewrap tr { border-top: 1px solid var(--rule); padding: 12px 0 10px; display: flex; flex-direction: column; }
  .tablewrap tbody tr:last-child { border-bottom: 1px solid var(--rule); }
  .tablewrap td, .tablewrap tbody th { border: 0; padding: 2px 0; }
  .tablewrap tbody th { font-size: 1.0625rem; order: -2; min-width: 0; }
  .tablewrap td:last-child { order: -1; color: var(--fg); }
  .tablewrap td[data-h]::before { content: attr(data-h) ": "; font-weight: 700; color: var(--fg); }
}

/* ---------- helpers for markup the page may gain: a note for readers without scripts, a skip link, text for screen readers only ---------- */
.noscript { font: 500 0.9375rem/1.45 var(--sans); color: var(--fg); border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 0 11px; margin: 12px 0 0; max-width: var(--measure); }
/* the same note inside a section (the sliders, which a reader without scripts does not get): what follows it, a fold, stands clear of its lower rule */
section .noscript { margin-bottom: 20px; }
.skip { position: absolute; left: -999px; top: 8px; font: 700 0.9375rem/1.3 var(--sans); }
.skip:focus { left: var(--pad); z-index: 20; background: var(--bg); color: var(--fg); padding: 10px 14px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
section > .col > .tag b a { color: inherit; text-decoration: none; }
/* without scripts the buttons and the slider panel are never built: a label over no buttons and an empty panel are left out.
   (With scripts both are filled as the page loads. A browser without :has() shows them empty, as before.) The block that holds the
   buttons keeps its place and its rule, because the header's grid places the parts after it by row */
.controls:has(> .seg:empty) > .tag { display: none; }
#play figure:has(#sliders:empty) { display: none; }
/* the same for a reader whose scripts are switched off, in every browser: the page marks <html> with the class js from a line in its head
   (access.py writes it; charts1.js sets the class too), so a page without the class is being read without scripts. Such a reader also
   loses the paragraph that explains the buttons by their position, and gets a line in place of each chart, between its title and its caption */
html:not(.js) .change .controls > .tag, html:not(.js) #play figure { display: none; }
/* so is a sentence that tells the reader to hover over or tap a chart (the page marks each with the class jsonly) */
html:not(.js) .jsonly { display: none; }
html:not(.js) figure > .frame > div:empty:first-child::before { content: "This chart is drawn with JavaScript and is not shown."; display: block; font: 500 0.875rem/1.4 var(--sans); color: var(--fg2); padding: 9px 0 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* under "Crowded universes count more" the first two sliders change nothing; they are dimmed and marked aria-disabled by the script.
   Only the control is dimmed (the track with its thumb and tick, and the read-out): the label and the note under it stay readable */
.slider.off .track, .slider.off output { opacity: 0.45; }
/* a dimmed slider still takes the keyboard and still moves. Its focus ring is drawn on the track, and would be dimmed with it to about
   2 to 1 against the ground: while the slider has the keyboard's focus the track is shown at full strength, and the read-out stays dimmed */
@supports selector(:has(a)) { .slider.off .track:has(input:focus-visible) { opacity: 1; } }
/* the two presets that move only those sliders are dimmed with them: grey words and a grey border, both still clear of the ground */
.preset-row button.off { color: var(--fg3); border-color: var(--fg3); }
.preset-row button.off[aria-pressed="true"] { background: var(--fg3); color: var(--bg); }

/* ---------- Windows high contrast: the colour keys, the pressed button and the slider keep their meaning ---------- */
@media (forced-colors: active) {
  .legend i, td .pill::before, #wave2-grid .chk::before, svg .inbar, .family-cards > div, .pa, .play-readout i, .slider .mine-tick, .preset-note .tickkey i { forced-color-adjust: none; }
  /* the bar over each answer keeps its colour; the words under it take the system's colours again */
  .family-cards > div > *, .pa > * { forced-color-adjust: auto; }
  .slider .mine-tick, .preset-note .tickkey i { background: CanvasText; }
  /* named by the panel's id so that it outranks the pressed button's own rule, which stands later in this file */
  #sliders .preset-row button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .seg button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  input[type=range]::-webkit-slider-runnable-track { background: CanvasText; }
  input[type=range]::-moz-range-track { background: CanvasText; }
  input[type=range]::-webkit-slider-thumb { forced-color-adjust: none; background: Highlight; border-color: Canvas; }
  input[type=range]::-moz-range-thumb { forced-color-adjust: none; background: Highlight; border-color: Canvas; }
  details.alt { border-color: CanvasText; }
  /* the tint behind a reference reached from a citation is not drawn in this mode: the entry takes a ring instead */
  .refs li:target { outline: 2px solid Highlight; outline-offset: 2px; }
  /* the two dimmed presets take the system's grey, as a control that is switched off does */
  .preset-row button.off { color: GrayText; border-color: GrayText; }
}

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

/* ---------- print: the folds are printed open, the tool's bar is not pinned, and nothing is cut by the tinted band ---------- */
@media print {
  #play figure { box-shadow: none; clip-path: none; }
  #play-bar { position: static; }
  .tip, .skip, section > .col > .tag .up { display: none; }
  details.alt::details-content, .studygrid details::details-content { content-visibility: visible; display: block; }
  details.alt > summary::before, .studygrid details > summary::before { content: none; }
  details.alt, .studygrid > div, figure { break-inside: avoid; }
  #refs-fold { break-inside: auto; }
}



/* ---------- added with charts1.js, round 3: the "Your answer" panel ----------
   The script adds, inside the panel's existing markup: #play-bar-yours and #play-readout (inside #play-bar), #play-mine (after #play-bar),
   three .pa blocks inside #play-lead, #play-none-mine, and inside #sliders a .presets block and, per slider, .track, .mine-tick and .ends.
   The selectors below carry more weight than the older #play rules above, so that they hold whatever those say. */

/* one column at every width: your bar, my bar, the key, the three answers, then the presets and sliders */
#play figure .frame { grid-template-columns: minmax(0, 1fr); }
#play figure .frame > #play-bar, #play figure .frame > #play-mine, #play figure .frame > #play-legend, #play figure .frame > .figsub, #play figure .frame > .sliders { grid-column: 1 / -1; grid-row: auto; }

/* the one-line read-out of the three answers under the reader's bar: it travels with #play-bar, which is pinned at every width */
.play-readout { display: flex; flex-wrap: wrap; gap: 2px 11px; margin: 5px 0 0; font: 500 0.875rem/1.3 var(--sans); color: var(--fg); font-variant-numeric: lining-nums tabular-nums; }
.play-readout > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.play-readout i { width: 9px; height: 9px; flex: none; }
.play-readout b { font-weight: 700; }
#play-mine { margin-top: 8px; }

/* the three answers, in the order of the top of the page: a rule in the answer's colour, its share, its name, and what my own assumptions give.
   The leading answer is set large. On a phone they are three rows with the share in a column of its own; from 760 px, three columns */
#play figure .frame > .play-answers { margin: 18px 0 0 !important; max-width: none; color: var(--fg); }
#play figure .frame #play-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 40px; min-height: 0; margin: 0; font: 400 1rem/1.3 var(--sans); color: var(--fg); }
.pa { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); column-gap: 12px; align-content: start; border-top: 6px solid var(--fg); padding-top: 7px; min-width: 0; }
/* every row is at least as tall as the large share, so the block keeps its height whichever answer leads */
.pa-n { grid-row: 1 / span 2; align-self: start; min-height: 2.85rem; font-family: var(--dsans); font-weight: 700; font-stretch: 78%; font-size: 1.75rem; line-height: 1; letter-spacing: -0.015em; font-variant-numeric: lining-nums tabular-nums; }
.pa.lead .pa-n { font-size: 3rem; line-height: 0.95; }
.pa-t { font: 700 1rem/1.25 var(--sans); font-stretch: 92%; overflow-wrap: break-word; }
.pa-m { font: 400 0.875rem/1.3 var(--sans); color: var(--fg2); margin-top: 1px; font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 760px) {
  #play figure .frame #play-lead { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pa { display: flex; flex-direction: column; }
  /* the three shares stand on one line whatever their size, so the names under them line up */
  .pa-n { display: flex; align-items: flex-end; height: 3.6rem; min-height: 0; font-size: 2rem; }
  .pa.lead .pa-n { font-size: 4rem; line-height: 0.9; }
  .pa-t { margin-top: 8px; font-size: 1.0625rem; }
}
/* "First in our Galaxy" is a plain line: the panel has one giant number, the leading answer */
#play figure .frame > .play-noneline { margin-top: 16px !important; color: var(--fg2); }
#play-none-mine { white-space: nowrap; }
#play figure .frame #play-none { display: inline; font: 700 1rem/1.4 var(--sans); letter-spacing: 0; margin: 0; color: var(--fg); font-variant-numeric: lining-nums tabular-nums; }

/* the presets: a row of light buttons above the sliders, pressed while the sliders stand where the button puts them */
.sliders > .presets { grid-column: 1 / -1; min-width: 0; }
.presets .tag { display: block; font: 700 0.9375rem/1.3 var(--sans); color: var(--fg); margin: 0 0 8px; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-row button { font: 600 0.9375rem/1.2 var(--sans); color: var(--fg); background: transparent; border: 1px solid var(--fg); border-radius: 0; margin: 0; padding: 8px 12px; min-height: 44px; cursor: pointer; text-align: left; }
.preset-row button:hover { text-decoration: underline; text-underline-offset: 3px; }
.preset-row button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.preset-note { font: 400 0.875rem/1.4 var(--sans); color: var(--fg2); margin: 8px 0 0; }
/* the tick and its sentence stay together and move to a new line as one; at a large text size the sentence may break inside its own box,
   so that the page never scrolls sideways */
.preset-note .tickkey { display: inline-block; max-width: 100%; }
.preset-note .tickkey i { display: inline-block; width: 2px; height: 11px; background: var(--fg); margin: 0 6px 0 4px; vertical-align: -1px; }

/* each slider: a tick under the track at my value, and the two ends of the track labelled */
.slider .track { position: relative; }
.slider .mine-tick { position: absolute; top: 21px; width: 2px; height: 13px; margin-left: -1px; background: var(--fg); pointer-events: none; }
.slider .ends { display: flex; justify-content: space-between; font: 400 0.8125rem/1 var(--sans); color: var(--fg2); margin-top: 4px; font-variant-numeric: lining-nums tabular-nums; }
.slider .ends + small { margin-top: 7px; }
.slider small .mine-val { white-space: nowrap; }
@media (min-width: 1000px) { #play figure .frame > .sliders { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); } }

/* ---------- round 4: the order of the "Your answer" panel ----------
   The buttons that change the way of counting, and Reset, stand after the sliders when the page's markup puts div.controls after div.frame
   (nothing is reordered here for them: they take the keyboard, and the Tab key must reach them in the order in which they are seen).
   In that place they take a rule above, as the sliders do; in the earlier place, straight under the title, they keep their earlier margins */
#play figure > .frame + .controls { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
#play figure > .vh + .frame { margin-top: 14px; }
/* the note on the way of counting in force stands under those buttons, where the reader is looking when one is pressed. It carries the
   sentences of the note under the header's buttons (charts1.js copies them), and is set as that note is: upright, in ink, at the notes' size */
#play figure > #play-note { margin: 14px 0 0; max-width: var(--measure); font: 400 0.9375rem/1.5 var(--sans); color: var(--fg); }
@media (min-width: 760px) { #play figure > #play-note { font-size: 1rem; } }
/* on a phone the key of seven entries stands after the sliders: the pinned bar carries its own key of three, and the first slider comes
   a screen sooner. The key takes no keyboard focus, so only its place on the screen changes */
@media (max-width: 559px) {
  #play figure .frame > #play-legend { order: 1; margin-top: 24px; }
}
/* the lede and the byline do not end on a one-word line */
header.hero > .lede, header.hero > .byline { text-wrap: pretty; }



/* the fold label under each study is now a full phrase ("What this study can't show, and what I corrected"), so the
   working-paper link no longer sits beside it: it takes the row below, at every width */
#wave2-grid .study > .paperlink { grid-row: 5; margin: 0; }