/* ------------------------------------------------------------------
   The Bourgain Project — one stylesheet for every page.

   A journal's structure in a clean modern face: white page, black ink,
   one sans-serif family throughout (Source Sans 3), a masthead between
   rules, and one second colour — blue by default, red on request — kept
   for the initial, the section signs and the one call to action. Entries are catalogue
   records; figures are tables. Formulas stay in KaTeX's own type.
------------------------------------------------------------------ */

/* Three schemes share this stylesheet; ?theme=bright | blue | red on any
   address switches between them and the choice is remembered.

   bright (default)  White page, a deep blue-black for text, and one clear
                     blue for the menu, the year strip, the table rules, the
                     initial and the links. A little gold marks what has
                     been digested, and nothing else.
   blue, red         The earlier, more formal pair: black ink, a black menu
                     bar, and one accent colour.

   The rules below never name a colour of their own; they ask for a role
   ("the menu bar", "a section rule", "the digested part of a bar"), and the
   three schemes say what each role looks like. */

:root {
  --bg:           #ffffff;
  --ink:          #1b2532;
  --ink-2:        #445061;   /* secondary text */
  --ink-3:        #68758a;   /* metadata, counts, blanks */
  --rule:         #cbd5e1;
  --rule-soft:    #e5eaf1;
  --shade:        #f3f6fb;   /* code blocks only */

  --accent:       #2059b8;   /* the blue */
  --gold:         #e0a526;   /* fills only, never text: the digested part of a bar */
  --link:         #1c4fa8;
  --link-visited: #5b3fa3;
  --pen:          #17171b;   /* the handwritten note in the masthead: black ink */

  --ok:           #18794e;   /* solved */
  --pending:      #9a6200;   /* resolved in a preprint */

  /* roles */
  --line:        #c3cedb;                 /* rules between sections */
  --table-rule:  var(--accent);           /* the heavy rules of a table */
  --bar-bg:      var(--accent);           /* the menu bar */
  --bar-fg:      rgba(255, 255, 255, 0.92);
  --bar-hover:   rgba(255, 255, 255, 0.16);
  --bar-mark:    #ffffff;                 /* under the current page */
  --cta-bg:      #ffffff;                 /* "Contribute" */
  --cta-fg:      var(--accent);
  --cta-hover:   #e7eefa;
  --strip:       var(--accent);           /* a year's bar */
  --strip-hover: #163f85;
  --strip-done:  var(--gold);             /* the digested part of it */
  --strip-rule:  var(--accent);
  --tip-key:     var(--gold);             /* a key on the dark tooltip */
  --initial:     var(--accent);           /* the drop cap */
  --sign:        var(--accent);           /* the section signs */
  --label:       var(--accent);           /* a highlighted small label */
  --marker:      var(--accent);           /* the current item, a quoted passage */
  --dot:         var(--accent);           /* a paper in the figure */
  --dot-on:      var(--ink);              /* the paper under the pointer */
  --radius:      3px;                     /* the menu bar, buttons, the search field */

  --face:  "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --page:    1140px;
  --gutter:  28px;
  --measure: 40rem;
  --rail:    190px;
}

:root[data-accent="blue"], :root[data-accent="red"] {
  --ink:          #161616;
  --ink-2:        #454545;
  --ink-3:        #6a6a6a;
  --rule:         #c8c8c8;
  --rule-soft:    #e4e4e4;
  --shade:        #f6f5f3;
  --link:         #1f4379;
  --link-visited: #55397f;
  --ok:           #1f6a43;
  --pending:      #8a5700;

  --line:        var(--ink);
  --table-rule:  var(--ink);
  --bar-bg:      var(--ink);
  --bar-fg:      rgba(255, 255, 255, 0.86);
  --bar-hover:   rgba(255, 255, 255, 0.12);
  --bar-mark:    #ffffff;
  --cta-bg:      var(--accent-bright);
  --cta-fg:      #ffffff;
  --cta-hover:   var(--accent-hover);
  --strip:       var(--ink);
  --strip-hover: var(--ink-3);
  --strip-done:  var(--accent-bright);
  --strip-rule:  var(--ink);
  --tip-key:     var(--accent-on-dark);
  --initial:     var(--accent);
  --sign:        var(--accent);
  --label:       var(--accent);
  --marker:      var(--accent);
  --dot:         var(--ink);
  --dot-on:      var(--link);
  --radius:      0px;
}
:root[data-accent="blue"] {
  --accent:         #1c4e9e;
  --accent-bright:  #2563c9;
  --accent-hover:   #2f73e0;
  --accent-on-dark: #7aa8f5;
}
:root[data-accent="red"] {
  --accent:         #8f1d21;
  --accent-bright:  #a6232a;
  --accent-hover:   #bb2c33;
  --accent-on-dark: #e0575d;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--face);
  font-size: 18px;
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a[target="_blank"]:visited { color: var(--link-visited); }

button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

code { font-family: var(--mono); font-size: 0.78em; hyphens: none; }

/* KaTeX sizes itself against Times; bring it level with the text face */
.katex { font-size: 1.12em; }

/* letterspaced capitals: running heads, captions, the navigation */
.rail-heading, .figures caption, .fig-title,
.area-table th {
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------------------------------------------------------- masthead */

header.masthead { padding: 0 var(--gutter); }

.masthead-frame { position: relative; max-width: calc(var(--page) - 2 * var(--gutter)); margin: 0 auto; }

/* the brace over a menu item and the arrow up to the note: see app.js */
.brace-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.brace-layer path {
  fill: none;
  stroke: var(--pen);
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brace-layer .nib { fill: var(--pen); opacity: 0; offset-rotate: 0deg; }
.brace-layer.is-live path { opacity: 0; animation: bp-write 1s cubic-bezier(0.4, 0.08, 0.6, 0.92) forwards; }
@supports (offset-path: path("M0 0")) {
  .brace-layer.is-live .nib { animation: bp-nib 1s cubic-bezier(0.4, 0.08, 0.6, 0.92); }
}
/* Over the title: the papers of each year, 1976 onward, hanging from a bar
   at the very top of the page. The bar runs across the whole window (it is
   the strip's top border, drawn out sideways as a border image); the year
   bars keep to the page's column. Built by BP.yearStrip() in app.js; a bar's
   slot is its whole column, so it is easy to hit however short the bar is. */
.years {
  --cap: 2px;                         /* how thick the rule they hang from is */
  position: relative;
  display: flex;
  align-items: flex-start;
  height: calc(30px + var(--cap));
  border-top: var(--cap) solid var(--strip-rule);
  border-image: linear-gradient(var(--strip-rule), var(--strip-rule)) 1 / var(--cap) 0 0 / 0 100vw;
}
.yb { flex: 1 1 0; height: 100%; min-width: 0; --bar: var(--strip); }
.yb::before {
  content: "";
  display: block;
  height: var(--h);
  margin: 0 1.5px;
  /* the second colour down to --d (the digested part), ink below it */
  background: linear-gradient(to bottom, var(--strip-done) 0 var(--d), var(--bar) var(--d) 100%);
  border-radius: 0 0 3px 3px;
  transform-origin: top;
}
.yb:hover { --bar: var(--strip-hover); }
/* on the home page the bars drop from the rule, year after year */
.years.is-live .yb::before {
  animation: bp-drop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--k) * 11ms);
}
@keyframes bp-drop { from { transform: scaleY(0); } }

/* the same strip closing the page: standing on its rule, tooltip above it */
.years.at-foot {
  align-items: flex-end;
  margin-top: 0;
  border-top: 0;
  border-bottom: var(--cap) solid var(--strip-rule);
  border-image-width: 0 0 var(--cap);
  font-style: normal;
  text-align: left;
}
.years.at-foot .yb { display: flex; align-items: flex-end; }
.years.at-foot .yb::before {
  flex: 1 1 auto;
  background: linear-gradient(to top, var(--strip-done) 0 var(--d), var(--bar) var(--d) 100%);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
}
.years.at-foot .yb-tip { top: auto; bottom: calc(100% + 4px); }

/* the key sits in the strip's own empty corner, under the last, short years */
.yb-key {
  position: absolute;
  right: 0;
  bottom: -1px;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  pointer-events: none;
}
.yb-key::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  background: var(--strip-done);
}
.yb-tip {
  position: absolute;
  top: calc(100% + 4px);
  z-index: 5;
  transform: translateX(-50%);
  min-width: 190px;
  max-width: 300px;
  padding: 7px 12px 8px;
  background: var(--ink);
  color: #fff;
  font-size: 14.5px;
  line-height: 1.35;
  pointer-events: none;
}
.yb-head { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 3px; }
.yb-head b { font-weight: 600; }
.yb-head span { opacity: 0.72; font-variant-numeric: tabular-nums lining-nums; }
.yb-row { display: flex; justify-content: space-between; gap: 18px; font-size: 13.5px; opacity: 0.86; }
.yb-row span:last-child { font-variant-numeric: tabular-nums lining-nums; }
.yb-done { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, 0.28); opacity: 1; }
.yb-done span:first-child::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.yb-done.some span:first-child::before { background: var(--tip-key); border-color: var(--tip-key); }

/* the title on the left, the annotated page fragment on the right */
.masthead-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 44px;
  align-items: center;
  padding: 10px 0;
}

.masthead-title { display: flex; flex-direction: column; align-items: flex-start; }

.wordmark, .wordmark:visited {
  font-size: 31px;
  line-height: 1.15;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
}
.wordmark:hover { text-decoration: none; }

.tagline {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.4;
  font-style: italic;
  color: var(--ink-2);
}
/* two lines, broken after "encyclopedia" rather than wherever the width falls */
.tagline span { display: block; }

/* A window onto a printed page, with a note written across it. The page
   may be overwritten: it sits behind, fades at the window's edges and is
   dimmed once the pen takes over. */
.marginalia {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 520px;
  height: 122px;
  cursor: pointer;
}
.fragment {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
                      linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
                      linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
          mask-composite: intersect;
}
.page {
  position: absolute;
  left: 6%;
  top: 6px;
  font-size: 12px;
  color: var(--ink);
  opacity: 0.66;
  white-space: nowrap;
  translate: 0 -30px;
  transform-origin: 35% 45%;
}
.ml { margin: 0 0 1px; }
.ml-in { padding-left: 2.2em; }
.ml .katex-display { margin: 0; text-align: left; }
.ml .katex-display > .katex { text-align: left; }

.note {
  position: absolute;
  left: 51%;
  top: 50%;
  width: min(352px, 74%);
  transform: translate(-50%, -50%) rotate(-2.5deg);
  overflow: visible;
}
.note path {
  fill: none;
  stroke: var(--pen);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.note .nib { fill: var(--pen); opacity: 0; offset-rotate: 0deg; }

/* ---- the pen, in both versions */
.is-live .note path { opacity: 0; animation: bp-write 1s cubic-bezier(0.4, 0.08, 0.6, 0.92) forwards; }
@keyframes bp-write {
  from { opacity: 1; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}

/* ---- version 2: focus, set line by line, sink back and drift, pen tip visible */
.is-live.v2 .fragment { opacity: 1; animation: bp-recede 1.1s ease 2.05s forwards; }
.is-live.v2 .page {
  translate: 0 0;
  animation: bp-focus 0.95s ease-out both, bp-drift 4.6s ease-in-out 1.35s forwards;
}
.is-live.v2 .ml {
  clip-path: inset(-20% 100% -20% 0);
  animation: bp-set 0.62s cubic-bezier(0.3, 0.6, 0.3, 1) forwards;
  animation-delay: calc(0.3s + var(--i) * 0.2s);
}
@supports (offset-path: path("M0 0")) {
  .is-live.v2 .note .nib { animation: bp-nib 1s cubic-bezier(0.4, 0.08, 0.6, 0.92); }
}
@keyframes bp-focus {
  from { opacity: 0; filter: blur(5px); scale: 1.08; }
  to   { opacity: 0.66; filter: blur(0); scale: 1; }
}
@keyframes bp-set    { to { clip-path: inset(-20% 0 -20% 0); } }
@keyframes bp-recede { to { opacity: 0.6; } }
@keyframes bp-drift  { to { translate: 0 -30px; } }
@keyframes bp-nib {
  from { opacity: 1; offset-distance: 0%; }
  to   { opacity: 1; offset-distance: 100%; }
}

/* ---- version 3 (default): a close-up of the page, formulas only. Crisp
   print in the paper's own type: display (6.31) on two lines, (6.32) under
   it. Once set, the page steps back so that the note written across it
   reads clearly. The formulas are shown whole, without the faded edges,
   and their size follows the window's width so that (6.32) always fits. */
.marginalia.v3 { container-type: inline-size; }
.marginalia.v3 .fragment {
  opacity: 0.8;
  -webkit-mask-image: none;
          mask-image: none;
}
.marginalia.v3 .page {
  left: 0;
  right: 0;
  top: 2px;
  font-size: 12px;
  font-size: min(12px, 2.3cqw);
  color: var(--ink);
  opacity: 0.86;
  translate: 0 0;
}
.marginalia.v3 .ml { height: 31px; display: flex; align-items: center; margin: 0; padding-left: 9%; }
.marginalia.v3 .ml-in {            /* second line of (6.31): its number flush with the page's margin */
  height: 35px;
  padding-left: 0;
  padding-right: 28%;
  justify-content: flex-end;
}
.marginalia.v3 .gap { height: 14px; }
.marginalia.v3 .ml-wide { height: 38px; padding-left: 2%; font-size: 11.5px; font-size: min(11.5px, 2.2cqw); }
.marginalia.v3 .note {
  left: 43%;
  top: 60%;
  width: min(282px, 55%);
  transform: translate(0, -50%) rotate(-2deg);
}

.marginalia.v3.is-live .fragment { opacity: 1; animation: bp-recede3 1.1s ease 2.05s forwards; }
.marginalia.v3.is-live .page {
  translate: 0 12px;
  animation: bp-focus3 0.9s ease-out both, bp-settle 1.3s cubic-bezier(0.5, 0, 0.3, 1) 0.9s forwards;
}
.marginalia.v3.is-live .ml {
  clip-path: inset(-30% 100% -30% 0);
  animation: bp-set3 0.7s cubic-bezier(0.3, 0.6, 0.3, 1) forwards;
  animation-delay: calc(0.25s + var(--i) * 0.3s);
}
@supports (offset-path: path("M0 0")) {
  .marginalia.v3.is-live .note .nib { animation: bp-nib 1s cubic-bezier(0.4, 0.08, 0.6, 0.92); }
}
@keyframes bp-focus3 {
  from { opacity: 0; filter: blur(5px); scale: 1.06; }
  to   { opacity: 0.86; filter: blur(0); scale: 1; }
}
@keyframes bp-set3    { to { clip-path: inset(-30% 0 -30% 0); } }
@keyframes bp-settle  { to { translate: 0 0; } }
@keyframes bp-recede3 { to { opacity: 0.8; } }

/* ---- version 1 (?anim=1): the lines fade in, the note is written */
.is-live.v1 .ml { opacity: 0; animation: bp-print 0.9s ease-out forwards; animation-delay: calc(0.15s + var(--i) * 0.22s); }
@keyframes bp-print {
  from { opacity: 0; transform: translateY(5px); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* The menu is a solid bar, so that it is the first thing seen under the
   title: white labels, the current page underlined, and the one call to
   action as a block at the far end. Like the bar at the top of the page it
   runs across the whole window (its background is drawn out sideways as a
   border image), while the words keep to the page's column: the menu starts
   one item-padding to the left of it, so that its first word stands under
   the title's first letter, and the button ends where the column ends. */
nav.primary {
  --pad: 11px;                        /* an item's side padding */
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--pad));
  background: var(--bar-bg);
  border-image: conic-gradient(var(--bar-bg) 0 0) fill 0 / 0 / 0 100vw;
}
nav.primary a {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--bar-fg);
  padding: 13px var(--pad) 12px;
}
nav.primary a:hover { color: #fff; background: var(--bar-hover); text-decoration: none; }
nav.primary a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 var(--bar-mark); }

nav.primary a.contribute, nav.primary a.contribute:visited {
  align-self: center;
  margin: 0 0 0 auto;
  padding: 7px 18px 6px;
  border-radius: var(--radius);
  background: var(--cta-bg);
  color: var(--cta-fg);
}
nav.primary a.contribute:hover { background: var(--cta-hover); color: var(--cta-fg); }
nav.primary a.contribute[aria-current="page"] { box-shadow: none; outline: 2px solid var(--bar-mark); outline-offset: 2px; }
.nav-toggle { display: none; }      /* the folded menu of a phone: see "narrow" below */

/* ------------------------------------------------------------ reveal */

/* parts of a page waiting to be scrolled to, and arriving: see app.js */
.rv {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.65s ease, translate 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rv.rv-in { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------- shell */

main {
  max-width: var(--page);
  margin: 0 auto;
  padding: 46px var(--gutter) 76px;
}
/* A page's words are in its HTML, but its header is written by app.js once
   the data has arrived. On a slow line the words would stand at the top of
   the window first and then be pushed down. So they wait for the header —
   it is put in front of <main> — and then arrive the way everything else
   does. Should the script never run, they show themselves after a while. */
main { visibility: hidden; animation: bp-unveil 0s linear 6s forwards; }
header.masthead ~ main { visibility: visible; animation: none; }
@keyframes bp-unveil { to { visibility: visible; } }

.page-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 14px;
}

.page-lede {
  max-width: var(--measure);
  margin: 0 0 36px;
}

/* -------------------------------------------------------- front page */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* the aim of the project: one block, set in from both edges of the page */
.aim {
  padding: 0 8% 44px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.aim .page-lede {
  max-width: none;
  margin: 0;
  font-size: 22.5px;
  line-height: 1.56;
  text-align: justify;
  hyphens: auto;
}
/* the objectives under it: a numbered list, the numerals in the scheme's colour */
.aim-lead { margin: 24px 0 8px; font-size: 23px; font-weight: 600; }
.aim-list {
  list-style: none;
  counter-reset: aim;
  margin: 0;
  padding: 0;
  max-width: 56rem;
  font-size: 19.5px;
  line-height: 1.5;
}
.aim-list li { counter-increment: aim; position: relative; margin: 7px 0; padding-left: 1.9em; }
.aim-note { margin: 22px 0 0; max-width: 56rem; font-size: 19.5px; line-height: 1.5; }
.aim-note a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.aim-list li::before {
  content: counter(aim) ".";
  position: absolute;
  left: 0;
  font-weight: 600;
  color: var(--sign);
  font-variant-numeric: lining-nums;
}
.dropcap::first-letter {
  float: left;
  font-size: 3.55em;
  font-weight: 600;
  line-height: 0.82;
  padding: 0.08em 0.1em 0 0;
  color: var(--initial);
}

.front {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 30px 68px;
  align-items: stretch;
}

/* the slot of the figure; framed only while nothing is mounted in it */
.plot-slot { display: flex; flex-direction: column; min-width: 0; }
.fig-title { color: var(--ink-2); margin: 0 0 9px; line-height: 1.55; }
.plot-frame {
  flex: 1 1 auto;
  min-height: 320px;
  border: 1px solid var(--rule);
}
.plot-frame.has-plot { min-height: 0; border: 0; }
/* the figure's dots take the scheme's colour (its own sheet draws them in ink) */
.plot-frame .sp-dot { fill: var(--dot); }
.plot-frame .sp-ring { fill: var(--dot-on); }
.plot-frame .sp-key { background: var(--dot); }

/* booktabs: heavy rules top and bottom, nothing vertical */
.figures {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}
.figures caption {
  text-align: left;
  color: var(--ink-2);
  padding: 0 0 9px;
}
.figures tbody { border-top: 2px solid var(--table-rule); border-bottom: 2px solid var(--table-rule); }
.figures th, .figures td {
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: baseline;
}
.figures tr:last-child th, .figures tr:last-child td { border-bottom: 0; }
.figures th { text-align: left; font-weight: 400; }
.figures td {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  padding-left: 12px;
}


/* the most recent digestion: the paper on the left, who and when on the right */
.latest {
  margin-top: 54px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.latest .fig-title { color: var(--label); margin-bottom: 12px; }
.latest-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 24px 68px;
  align-items: start;
}
.latest-title { font-size: 27px; font-weight: 600; line-height: 1.22; margin: 0 0 8px; }
/* a title that opens its digestion stays in ink, visited or not */
.latest-title a, .latest-title a:visited,
.paper-title a, .paper-title a:visited,
.claim-title a, .claim-title a:visited { color: var(--ink); }
.latest-summary { margin: 14px 0 0; max-width: var(--measure); }
.latest-summary b { font-weight: 600; }
.latest-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 6px 0 0;
  font-size: 17px;
  border-top: 2px solid var(--table-rule);
  border-bottom: 2px solid var(--table-rule);
}
.latest-meta dt, .latest-meta dd {
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.latest-meta dt { padding-right: 16px; }
.latest-meta dd { text-align: right; }
.latest-meta dt:nth-last-of-type(1), .latest-meta dd:nth-last-of-type(1) { border-bottom: 0; }
.latest-meta .sep { color: var(--rule); margin: 0 3px; }

/* ------------------------------------------------------------ layout */

.with-rail {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.rail {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding-right: 6px;
}

.rail-heading {
  color: var(--ink-2);
  margin: 0 0 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.rail-list { list-style: none; margin: 0 0 28px; padding: 0; }

.rail-list button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  padding: 2px 4px 2px 9px;
  font-size: 16.5px;
  line-height: 1.38;
  color: var(--link);
  cursor: pointer;
  text-align: left;
  font-variant-numeric: tabular-nums lining-nums;
}
.rail-list button:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rail-list button[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--marker);
}
.rail-list button[aria-current="true"]:hover { text-decoration: none; }
.rail-list .count { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.rail-list button.muted { color: var(--ink-3); }

/* "Year / Area" switch on the articles page */
.rail-list.groupby { display: flex; gap: 0 4px; margin-bottom: 26px; }
.rail-list.groupby li { display: flex; align-items: baseline; }
.rail-list.groupby li + li::before { content: "/"; color: var(--rule); margin-right: 4px; }
.rail-list.groupby button {
  width: auto;
  border-left: 0;
  border-bottom: 2px solid transparent;
  padding: 2px 3px 1px;
}
.rail-list.groupby li:first-child button { margin-left: 6px; }
.rail-list.groupby button[aria-current="true"] { border-bottom-color: var(--marker); }

/* A–Z index on the collaborators page */
.letter-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.letter-grid button {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 3px 0 1px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--link);
  cursor: pointer;
  text-align: center;
}
.letter-grid button:hover { text-decoration: underline; text-underline-offset: 3px; }
.letter-grid button[disabled] { color: var(--rule); cursor: default; text-decoration: none; }
.letter-grid button[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--marker);
}

/* ------------------------------------------------------------ search */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  margin: 0 0 28px;
}

.search {
  flex: 1 1 260px;
  min-width: 200px;
  padding: 7px 11px 6px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  -webkit-appearance: none;
  appearance: none;
}
.search:focus { outline: 2px solid var(--link); outline-offset: 0; border-color: var(--link); }
.search::placeholder { color: var(--ink-3); font-style: italic; opacity: 1; }

.sortbar { display: flex; gap: 2px 13px; align-items: baseline; flex-wrap: wrap; }
.sortbar span { font-size: 16px; font-style: italic; color: var(--ink-3); }
.sortbar span::after { content: ":"; }
.sortbar button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 2px 0 1px;
  font-size: 16.5px;
  color: var(--link);
  cursor: pointer;
}
.sortbar button:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sortbar button[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--marker);
  text-decoration: none;
}

/* ---------------------------------------------------- section header */

.year-heading {
  font-size: 29.5px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  font-variant-numeric: lining-nums;
}
.year-sub {
  font-size: 16px;
  font-style: italic;
  color: var(--ink-3);
  margin: 2px 0 24px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
.stratum-note {
  margin: -8px 0 24px;
  font-size: 17px;
  color: var(--ink-2);
  max-width: var(--measure);
}

/* ------------------------------------------- index of years and areas */

.year-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums lining-nums;
}
.year-table th {
  width: 4.6em;
  text-align: left;
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-3);
  vertical-align: top;
  padding: 10px 0 0;
}
.year-table td { padding: 0; vertical-align: top; }
.year-table tr + tr th, .year-table tr + tr td { border-top: 1px solid var(--rule-soft); }

.year-cell {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 8px 2px 9px;
  text-align: left;
  cursor: pointer;
  color: var(--link);
}
.year-cell .y { display: block; font-size: 18px; line-height: 1.3; }
.year-cell .c { display: block; font-size: 14px; line-height: 1.3; color: var(--ink-3); }
.year-cell:hover .y { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.area-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17.5px;
}
.area-table th {
  text-align: left;
  color: var(--ink-2);
  padding: 0 0 8px;
}
.area-table tbody { border-bottom: 2px solid var(--table-rule); }
.area-table td {
  padding: 9px 0;
  border-top: 1px solid var(--rule-soft);
  vertical-align: baseline;
}
.area-table tbody tr:first-child td { border-top: 0; }
.area-table .num {
  text-align: right;
  white-space: nowrap;
  padding-left: 24px;
  font-variant-numeric: tabular-nums lining-nums;
}
.area-table .year-cell { display: inline; width: auto; padding: 0; }
.area-table .year-cell .y { display: inline; font-size: inherit; }
.area-table .area-note { display: block; font-size: 15.5px; font-style: italic; color: var(--ink-3); }

/* ------------------------------------------------------------ papers */

.paper-list { list-style: none; margin: 0; padding: 0; counter-reset: entry; }

.paper, .person, .idea {
  position: relative;
  padding: 22px 0;
  border-top: 1px solid var(--rule-soft);
}
.paper:first-child, .person:first-of-type, .idea:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* papers carry a running number in a hanging column, as in a bibliography */
.paper { counter-increment: entry; padding-left: 2.7em; }
.paper::before {
  content: counter(entry) ".";
  position: absolute;
  left: 0;
  top: 25px;
  width: 2.1em;
  text-align: right;
  font-size: 16px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
}
.paper:first-child::before { top: 3px; }

/* the entry a deep link points at */
.is-target::after {
  content: "";
  position: absolute;
  left: -16px;
  top: 22px;
  bottom: 22px;
  border-left: 2px solid var(--marker);
}
.is-target:first-child::after, .is-target:first-of-type::after { top: 2px; }

.paper-head, .person-head, .idea-head {
  display: flex;
  align-items: baseline;
  gap: 22px;
  justify-content: space-between;
}

.paper-title, .person-name, .idea-name {
  font-size: 20.5px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  flex: 1 1 auto;
}

/* citation count and the scores: plain figures at the right margin */
.cites, .score {
  flex: 0 0 auto;
  font-size: 15.5px;
  font-style: italic;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-3);
  white-space: nowrap;
}
.cites b { font-weight: 400; font-style: normal; color: var(--ink); }

.paper-authors { margin: 5px 0 0; font-size: 17.5px; }
.paper-authors .self { color: var(--ink-3); }

.paper-ref {
  margin: 1px 0 0;
  font-size: 17px;
  color: var(--ink-2);
  max-width: var(--measure);
}

.digested-by { margin: 4px 0 0; font-size: 17px; color: var(--ink-2); }
.digested-by b { font-weight: 600; color: var(--ink); }

.paper-meta {
  margin: 5px 0 0;
  font-size: 15px;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0 15px;
}
.paper-meta code { font-size: 12.5px; }

/* the record: a label column and a text column */
.fields {
  display: grid;
  grid-template-columns: 5.4em minmax(0, 1fr);
  gap: 5px 14px;
  margin: 13px 0 0;
  font-size: 17px;
}
.fields dt { font-style: italic; color: var(--ink-2); }
.fields dd { margin: 0; max-width: var(--measure); }
.fields dd.empty { color: var(--ink-3); }
.fields .dpath {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.fields .links a { white-space: nowrap; }
.fields .links a.primary { font-weight: 600; }
.fields .sep { color: var(--rule); margin: 0 3px; }

.readings { list-style: none; margin: 0; padding: 0; }
.readings li { margin: 0 0 5px; }
.readings li:last-child { margin-bottom: 0; }
.reading-note { display: block; font-size: 15.5px; color: var(--ink-3); }

/* a label standing over a list (open problems) */
.slot-label {
  font-size: 17px;
  font-style: italic;
  color: var(--ink-2);
  margin: 15px 0 3px;
}

/* -------------------------------------------- collaborators, toolkit */

/* a heading inside a grouped list (collaborators by area) */
.group-heading {
  margin: 38px 0 18px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}
.year-sub + .group-heading { margin-top: 0; }
.group-heading .count { margin-left: 6px; font-size: 15px; font-weight: 400; color: var(--ink-3); }
.group-heading + .person { border-top: 0; padding-top: 0; }

.person-dates {
  font-size: 16.5px;
  font-weight: 400;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.person-inst { margin: 3px 0 0; font-size: 16.5px; font-style: italic; color: var(--ink-2); }
.person-bio, .idea-gloss { margin: 6px 0 0; font-size: 17.5px; max-width: var(--measure); }
.person-bio.empty, .idea-gloss.empty { color: var(--ink-3); font-style: italic; }
.person-papers {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--ink-3);
  max-width: var(--measure);
}

.stratum { margin: 38px 0 0; }
.stratum > h2 { font-size: 23px; font-weight: 600; margin: 0 0 4px; }
.stratum > p.stratum-note { margin: 0 0 4px; }

/* ------------------------------------------------------- open problems */

.prob-field { margin: 2px 0 0; font-size: 16px; font-style: italic; color: var(--ink-3); }

.prob-quote {
  margin: 13px 0 0;
  padding: 1px 0 1px 18px;
  border-left: 2px solid var(--marker);
  font-size: 17.5px;
  font-style: italic;
  color: var(--ink-2);
  max-width: var(--measure);
}
.prob-partial { margin: 0; padding-left: 22px; font-size: 17px; max-width: var(--measure); }
.prob-partial li { margin: 4px 0; }

.prob-status {
  margin: 13px 0 0;
  font-size: 16px;
  color: var(--ink-2);
  max-width: var(--measure);
}

.prog-list { list-style: none; margin: 0; padding: 0; }
.prog {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
}
.prog:first-child { border-top: 0; padding-top: 4px; }
.prog .kind { font-size: 16px; font-style: italic; }
.kind-resolves { color: var(--accent); }
.kind-positive { color: var(--ok); }
.kind-partial  { color: var(--ink-3); }
.prog-ref  { margin: 0; font-size: 17px; max-width: var(--measure); }
.prog-what { margin: 4px 0 0; font-size: 16.5px; color: var(--ink-2); max-width: var(--measure); }
.prog-prov { margin: 4px 0 0; font-size: 15px; color: var(--ink-3); }
.prog-prov strong { color: var(--ink); font-weight: 400; font-style: italic; }

.score.status-solved            { color: var(--ok); }
.score.status-resolved-preprint { color: var(--pending); }
.score.status-open,
.score.status-partially-solved  { color: var(--ink); }
.score.status-unchecked         { color: var(--ink-3); }

/* --------------------------------------------------------- contribute */

.btn {
  display: inline-block;
  padding: 7px 16px 6px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--strip-hover); border-color: var(--strip-hover); }
/* a button that stands in running text is still a button, not an underlined link */
.prose a.btn, .prose a.btn:hover { text-decoration: none; }
.btn.quiet { color: var(--link); background: none; border-color: transparent; font-weight: 400; padding-left: 4px; padding-right: 4px; }
.btn.quiet:hover { text-decoration: underline; text-underline-offset: 3px; background: none; border-color: transparent; }

.claim-list { list-style: none; margin: 0; padding: 0; }
.claim-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 28px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid var(--rule-soft);
}
.claim-row:first-child { border-top: 0; padding-top: 0; }
.claim-title { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; }
.claim-meta { display: block; margin-top: 2px; font-size: 15.5px; color: var(--ink-3); }
.claim-state { display: block; margin-top: 5px; font-size: 16px; color: var(--ink-2); max-width: var(--measure); }
.claim-state b { font-weight: 600; color: var(--ink); }
.claim-act { padding-top: 1px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; }
.claim-who {
  grid-column: 1 / -1;
  margin: 8px 0 2px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--marker);
  font-size: 16px;
  color: var(--ink-2);
  max-width: var(--measure);
}
.claim-who p { margin: 0 0 4px; }
.claim-who p:last-child { margin: 0; }
.claim-who b { font-weight: 600; color: var(--ink); }
.claim-form .lead { margin: 0; font-size: 16.5px; font-weight: 600; }

.claim-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 10px 0 4px;
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 46rem;
}
.claim-form label { display: block; font-size: 15px; color: var(--ink-2); }
.claim-form input, .claim-form textarea {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 6px 9px 5px;
  font: inherit;
  font-size: 16.5px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
}
.claim-form textarea { min-height: 4.2em; resize: vertical; }
.claim-form input:focus, .claim-form textarea:focus { outline: 2px solid var(--link); outline-offset: 0; border-color: var(--link); }
.claim-form .wide { grid-column: 1 / -1; }
.claim-form label.consent { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.claim-form label.consent input { width: auto; margin: 4px 0 0; flex: none; }
.claim-sent { grid-column: 1 / -1; margin: 6px 0 0; font-size: 15.5px; color: var(--ok); }
.claim-note { margin: 0 0 22px; padding: 10px 14px; border-left: 3px solid var(--ok); background: var(--shade); font-size: 16px; }
.claim-form .notice { margin: 0; font-size: 15px; color: var(--ink-3); }
.claim-form .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.claim-form .problem { margin: 0; font-size: 15px; color: #a3261d; }

/* ------------------------------------------------- a digestion's page */

#dg { counter-reset: section; }           /* one numbering down the page, not one per block */
#dg .prose { counter-reset: none; }
.crumb { margin: 0 0 10px; font-size: 16px; }
.crumb a::before { content: "\2190\00a0"; }
.dg-head .page-title { margin-bottom: 10px; }
.dg-head .latest-meta { margin-top: 12px; }
.dg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 20px 0 0; }
.dg-actions .btn:hover { text-decoration: none; }
.dg-actions .btn.quiet:hover { text-decoration: underline; }
.dg-actions a.btn, .dg-actions a.btn:visited { color: #fff; }
.dg-actions a.btn.quiet, .dg-actions a.btn.quiet:visited { color: var(--link); }
.dg-part { margin-top: 8px; }
.dg-part.dg-wide { max-width: none; }
.dg-pdf {
  display: block;
  width: 100%;
  height: min(88vh, 1150px);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--shade);
}
.dg-note { margin: 8px 0 0 !important; font-size: 15px; color: var(--ink-3); }
.dg-video { max-width: 60rem; aspect-ratio: 16 / 9; background: var(--ink); border-radius: var(--radius); overflow: hidden; }
.dg-layers-lede { max-width: var(--measure); }
.dg-depths {                       /* the five depths of site/layers.html, each a way in */
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 44rem;
  margin: 18px 0 16px !important;
  padding: 0 !important;
  position: relative;
}
.dg-depths::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 7px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1c4fa8, #3b6fc4 35%, #5f8fd6 70%, #8fb2e6);
}
.dg-depths li { margin: 0 !important; text-align: center; position: relative; }
.dg-depths a { display: block; font-size: 15px; color: var(--ink-2); text-decoration: none !important; }
.dg-depths a:hover { color: var(--link); }
.dg-depths .dot {
  display: block;
  width: 17px;
  height: 17px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #3b6fc4;
  transition: transform 0.2s;
}
.dg-depths a:hover .dot { transform: scale(1.2); background: #3b6fc4; }
@media (max-width: 640px) { .dg-depths a { font-size: 12.5px; } }
.dg-video iframe, .dg-video video { display: block; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------ an idea's page */

.idea-name a, .idea-name a:visited { color: var(--ink); }
.idea-more { white-space: nowrap; }
.idea-more::after { content: "\00a0\2192"; }
.idea-kind { margin: -4px 0 6px; font-size: 17px; font-style: italic; color: var(--ink-3); }
.idea-also { color: var(--ink-2); }
.idea-in { margin: 0 0 22px; padding-left: 18px; border-left: 2px solid var(--marker); }
.idea-in:last-child { margin-bottom: 0; }
.idea-in h3 { margin: 0 0 6px; font-size: 18.5px; }
.idea-in code { font-size: 0.86em; }
.idea-as { color: var(--ink-3); }

/* -------------------------------------------------------------- misc */

.empty-state {
  border-left: 2px solid var(--rule);
  padding: 2px 0 2px 18px;
  color: var(--ink-2);
  font-size: 17.5px;
  max-width: var(--measure);
}
.empty-state p { margin: 0 0 10px; }
.empty-state p:last-child { margin: 0; }

.prose { max-width: var(--measure); counter-reset: section; }
.prose h2 {
  counter-increment: section;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.3;
  margin: 42px 0 9px;
}
.prose h2::before {                 /* § 1, § 2, … in red */
  content: "\00a7\2009" counter(section) ".\2002";
  color: var(--sign);
}
.prose h3 { font-size: 18px; font-weight: 600; margin: 24px 0 6px; }
.prose p { margin: 0 0 12px; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 26px; margin: 0 0 12px; }
.prose li { margin: 5px 0; }
.prose pre {
  background: var(--shade);
  border-left: 2px solid var(--line);
  padding: 13px 18px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0 0 14px;
}
.prose pre code { font-size: inherit; }
.prose blockquote {
  margin: 18px 0;
  padding: 1px 0 1px 18px;
  border-left: 2px solid var(--marker);
  font-style: italic;
  color: var(--ink-2);
}
.prose blockquote code { font-style: normal; }

/* the front page sets its guide in two columns, like a journal page */
.prose.cols {
  max-width: none;
  margin-top: 54px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  columns: 2;
  column-gap: 68px;
}
.prose.cols h2 { break-after: avoid; }
.prose.cols h2::before { content: none; }       /* a single heading: no section sign */
.prose.cols h2:first-child { margin-top: 0; }
.prose.cols p { break-inside: avoid; text-align: justify; hyphens: auto; }

footer.colophon { padding: 0 var(--gutter); }
.colophon-inner {
  max-width: calc(var(--page) - 2 * var(--gutter));
  margin: 0 auto;
}
.jump-top { display: inline-block; margin-top: 30px; font-size: 16px; font-style: italic; }

/* ------------------------------------------------------------ narrow */

@media (max-width: 1180px) {
  nav.primary { --pad: 8px; }
  nav.primary a { font-size: 14.5px; }
  nav.primary a.contribute { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }

  /* the title, then the page fragment under it */
  .masthead-inner { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0 6px; }
  .marginalia { justify-self: start; max-width: 500px; height: 118px; }
  .wordmark { font-size: 27px; letter-spacing: 0.12em; }
  .tagline { font-size: 16px; }
  nav.primary a { padding-top: 11px; padding-bottom: 10px; }

  /* one column: the aim, then the plot, then the figures and the guide */
  .aim { padding: 0 0 32px; margin-bottom: 30px; }
  .aim-note { font-size: 18px; }
  .aim .page-lede { font-size: 20px; }
  .aim-lead { font-size: 21px; }
  .aim-list { font-size: 18px; }
  .front { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .plot-frame { min-height: 240px; }
  .latest { margin-top: 40px; padding-top: 28px; }
  .latest-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .latest-meta { max-width: 25rem; }
  .latest-title { font-size: 23px; }
  .figures-wrap { max-width: 25rem; }
  .prose.cols { columns: 1; }

  .with-rail { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rail { position: static; max-height: none; padding-right: 0; }
  .rail-list { display: flex; flex-wrap: wrap; gap: 0 6px; margin-bottom: 18px; }
  .rail-list li { flex: 0 0 auto; }
  .rail-list button { width: auto; border-left: 0; border-bottom: 2px solid transparent; padding: 2px 4px 1px; }
  .rail-list button[aria-current="true"] { border-bottom-color: var(--marker); }
  .letter-grid { grid-template-columns: repeat(13, 1fr); margin-bottom: 18px; }

  .page-title { font-size: 30px; }
  main { padding-top: 32px; padding-bottom: 60px; }
}

/* ---- tablets, and windows about as wide */

@media (min-width: 641px) and (max-width: 1000px) {
  /* the sections need two rows here; the button stands beside both of them,
     at the column's edge, instead of dropping to a row of its own */
  nav.primary { position: relative; padding-right: 124px; }
  nav.primary a.contribute { position: absolute; right: 0; top: 50%; margin: 0; transform: translateY(-50%); }
}

@media (min-width: 720px) and (max-width: 900px) {
  /* a tablet held upright still has room for the title and the page
     fragment side by side, as on a desk */
  .masthead-inner { grid-template-columns: auto minmax(0, 1fr); gap: 0 26px; padding: 10px 0 8px; }
  .marginalia { justify-self: end; max-width: 440px; }
  .wordmark { font-size: 24px; }
  .tagline { font-size: 15px; }
}

@media (min-width: 641px) and (max-width: 900px) {
  /* under the figure, the four numbers in a row rather than a narrow table
     with nothing beside it */
  .figures-wrap { max-width: none; }
  .figures, .figures caption { display: block; }
  .figures tbody { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .figures tr { display: flex; flex-direction: column-reverse; padding: 11px 0 10px; }
  .figures tr + tr { padding-left: 18px; border-left: 1px solid var(--rule-soft); }
  .figures th, .figures td { display: block; padding: 0; border-bottom: 0; text-align: left; }
  .figures th { font-size: 15px; color: var(--ink-2); }
  .figures td { font-size: 25px; line-height: 1.25; }
}

/* ---- phones */

@media (max-width: 640px) {
  body { font-size: 17px; }
  /* On a phone the sections fold away. The bar holds a Menu button and the
     call to action; opened, the sections are a tidy two-column block under
     them. (The button is written by app.js and shown only here.) */
  nav.primary { --pad: 14px; display: grid; grid-template-columns: 1fr 1fr; margin-right: calc(-1 * var(--pad)); }
  .nav-toggle {
    grid-area: 1 / 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px var(--pad) 12px;
    border: 0;
    background: none;
    color: var(--bar-fg);
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
  }
  .nav-toggle:focus-visible { outline-color: #fff; outline-offset: -4px; }
  .nav-toggle-icon {                 /* three rules, or a cross while it is open */
    position: relative;
    width: 18px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
  }
  .nav-toggle-icon::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 3px;
    border-top: 2px solid currentColor;
  }
  nav.primary.is-open .nav-toggle-icon { border-color: transparent; }
  nav.primary.is-open .nav-toggle-icon::before,
  nav.primary.is-open .nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 3px;
    border-top: 2px solid currentColor;
    rotate: 45deg;
  }
  nav.primary.is-open .nav-toggle-icon::after { rotate: -45deg; }
  nav.primary a { padding: 11px var(--pad) 10px; }
  nav.primary a:not(.contribute) { display: none; border-top: 1px solid rgba(255, 255, 255, 0.17); }
  nav.primary.is-open a:not(.contribute) { display: block; }
  nav.primary a.contribute {
    grid-area: 1 / 2;
    justify-self: end;
    align-self: center;
    margin: 0 var(--pad) 0 0;
    padding: 6px 16px 5px;
  }

  /* the name is long for a phone: let its size follow the screen */
  .wordmark { font-size: min(21px, 5.7vw); letter-spacing: 0.1em; }
  .marginalia { height: 108px; }
  .page { font-size: 10.5px; }
  .marginalia.v3 .page { font-size: 10px; font-size: min(10px, 2.3cqw); }
  .marginalia.v3 .ml { height: 27px; }
  .marginalia.v3 .ml-in { height: 30px; }
  .marginalia.v3 .gap { height: 10px; }
  .marginalia.v3 .ml-wide { height: 33px; font-size: 9.5px; font-size: min(9.5px, 2.2cqw); }
  .years { height: calc(24px + var(--cap)); }
  .yb-key { display: none; }
  .yb::before { margin: 0 0.75px; border-radius: 0 0 2px 2px; }
  .years.at-foot .yb::before { border-radius: 2px 2px 0 0; }
  .aim .page-lede { font-size: 18.5px; text-align: left; }
  .prose.cols p { text-align: left; }

  /* decades become wrapped rows of five */
  .year-table, .year-table tbody, .year-table tr { display: block; }
  .year-table tr { display: flex; flex-wrap: wrap; padding: 4px 0; }
  .year-table tr + tr { border-top: 1px solid var(--rule-soft); }
  .year-table tr + tr th, .year-table tr + tr td { border-top: 0; }
  .year-table th { flex: 0 0 100%; width: auto; padding: 4px 0 0; }
  .year-table td { flex: 0 0 20%; }
  .year-table td:empty { display: none; }

  .paper { padding-left: 0; }
  .paper::before { position: static; display: block; width: auto; text-align: left; margin-bottom: 2px; }
  .fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fields dt { margin-top: 7px; }
  .prog { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .paper-head, .person-head, .idea-head { flex-wrap: wrap; gap: 2px 16px; }
  .claim-row { grid-template-columns: minmax(0, 1fr); }
  .claim-act { justify-content: flex-start; }
  .claim-form { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 12px; }
  .area-table .area-note { display: none; }
  .is-target::after { left: -10px; }

  /* an embedded PDF is a window to scroll in; on a phone a lower one leaves
     more of the page around it within reach */
  .dg-pdf { height: 72vh; }
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; translate: none; transition: none; }
  .is-live .fragment, .is-live .page, .is-live .ml, .is-live .note .nib,
  .brace-layer.is-live .nib, .years.is-live .yb::before { animation: none !important; }
  .brace-layer.is-live path { animation: none; opacity: 1; stroke-dasharray: none !important; }
  .is-live .fragment { opacity: 0.6; }
  .is-live .page { translate: 0 -30px; opacity: 0.66; }
  .is-live .ml { clip-path: none; opacity: 1; }
  .is-live .note path { animation: none; opacity: 1; stroke-dasharray: none !important; }
  .marginalia.v3.is-live .page { translate: 0 0; opacity: 0.86; }
  .marginalia.v3.is-live .fragment { opacity: 0.8; }
}

@media print {
  main { visibility: visible; animation: none; }
  .rv { opacity: 1 !important; translate: none !important; }
  .rail, nav.primary, .toolbar, footer.colophon, .jump-top { display: none; }
  .with-rail { display: block; }
  a { color: inherit; }
}