/* ------------------------------------------------------------------
   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-rule:  var(--accent);
  --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:    1040px;
  --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-rule:  var(--ink);
  --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); }

/* superscripts in titles (H^∞) must not open up the line they sit in */
sup, sub { line-height: 0; }

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, .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; }

/* 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;
  background: var(--bar);
  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;
  border-radius: 3px 3px 0 0;
  transform-origin: bottom;
}
.years.at-foot .yb-tip { top: auto; bottom: calc(100% + 4px); }

.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; }

/* the title and the tagline under it, in the middle */
.masthead-inner { padding: 16px 0 14px; text-align: center; }

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

.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; }

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

/* On a wide screen "Bourgain's collaborators" stands at the centre of the page,
   and the sections on either side of it spread evenly: Home to the left edge of
   the column, Contribute to the right. Elsewhere the two groups are not boxes
   at all, and the narrow layouts below place the links one by one. */
.nav-side { display: contents; }
@media (min-width: 1001px) {
  nav.primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    margin-right: calc(-1 * var(--pad));
  }
  .nav-side { display: flex; justify-content: space-between; align-items: stretch; }
  .nav-left::after, .nav-right::before { content: ""; }
  .nav-right { padding-right: var(--pad); }
  nav.primary a.contribute { margin: 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 {                     /* across the column, like the content under it */
  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, across the page's column like the figure under it */
.aim {
  padding: 0 0 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;
   heading and text in the same sizes as "Organization of the website" further down */
.aim-lead { margin: 24px 0 8px; font-size: 25px; font-weight: 600; line-height: 1.3; }
.aim-list {
  list-style: none;
  counter-reset: aim;
  margin: 0;
  padding: 0;
}
.aim-list li { counter-increment: aim; position: relative; margin: 7px 0; padding-left: 1.9em; }
.aim-note { margin: 22px 0 0; }
.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;
}
/* The initial: two lines high, as set by hand. Its top is level with the capitals
   of the first line and its foot stands on the baseline of the second, so that the
   two lines beside it are indented and the third runs under it. Browsers that know
   initial-letter do this themselves. Elsewhere the same is done by measure, for
   Source Sans 3 (cap height 0.654, ascent 1, descent 0.326) at line-height 1.56:
   size = (1.56 + 0.654) / 0.654 em, a box exactly the height of the capital, and a
   top margin that brings the capital down to the first line's. */
.dropcap::first-letter {
  float: left;
  font-size: 3.39em;
  line-height: 0.654;
  margin: 0.126em 0.03em 0 -0.03em;
  font-weight: 600;
  color: var(--initial);
}
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .dropcap::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0 0.3em 0 0;
    -webkit-initial-letter: 2;
    initial-letter: 2;
  }
}

.front { display: block; }          /* the figure, across the whole column */

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



/* 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); }
/* three of them: smaller titles, a fine rule between */
.latest-list .latest-title { font-size: 22px; }
.latest-item + .latest-item { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule-soft); }
.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; }

/* "Sort by" and a filter as drop-down lists, beside the search box */
.tb-field { display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0;
            font-size: 16px; font-style: italic; color: var(--ink-3); }
.tb-field select {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-style: normal;
  font-size: 16.5px;
  color: var(--ink);
  background: var(--bg);
  padding: 6px 8px 5px;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  max-width: 100%;
  cursor: pointer;
}
.tb-field select:focus { outline: 2px solid var(--link); outline-offset: 0; border-color: var(--link); }
/* on the Collaborators page the arrow of a drop-down stands a little in from the edge */
.collab-toolbar .tb-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23445061' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}

.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;
}

/* "Filter by" on the articles page: drop-downs with check boxes, as in a web shop.
   The panel hangs from the whole row, so on a phone it never runs off the page. */
.filters {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: -12px 0 14px;
}
.filters-label { font-size: 16px; font-style: italic; color: var(--ink-3); }
.filters-label::after { content: ":"; }
.fdrop-btn, .fcheck {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 16.5px;
  color: var(--ink);
  background: var(--bg);
  padding: 5px 11px 4px;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1.35;
}
.fdrop-btn:hover, .fcheck:hover { border-color: var(--link); }
.fdrop-btn:focus-visible, .fcheck:focus-within { outline: 2px solid var(--link); outline-offset: 0; }
.fdrop.active .fdrop-btn, .fcheck.active, .fdrop-btn[aria-expanded="true"] {
  border-color: var(--link);
  box-shadow: inset 0 0 0 1px var(--link);
}
.fdrop-btn .caret {
  width: 0; height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5.5px solid var(--ink-2);
  margin-left: 2px;
}
.fdrop-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.fbadge {
  min-width: 1.35em;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--link);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
}
.fcheck input, .fopt input { margin: 0; accent-color: var(--link); cursor: pointer; }
.fcheck .count, .fopt .count { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums lining-nums; }

.fpanel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: min(600px, 100%);
  max-height: min(460px, 70vh);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(20, 30, 45, 0.16);
  padding: 12px 16px 14px;
}
.fpanel[hidden] { display: none; }
.fpanel-all {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}
.fpanel-all button {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 16px; color: var(--link); cursor: pointer;
}
.fpanel-all button:hover { text-decoration: underline; text-underline-offset: 3px; }
.fpanel-all .sep { color: var(--rule); }
.fopt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
  font-variant-numeric: tabular-nums lining-nums;
}
.fopt.none .fname { color: var(--ink-3); }
.fdecade {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr);
  gap: 0 10px;
  padding: 4px 0;
  border-top: 1px solid var(--rule-soft);
}
.fpanel-all + .fdecade { border-top: 0; }
.fdec { font-weight: 600; align-self: start; }
.fyears { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 8px; }
@media (max-width: 640px) {
  .fdecade { grid-template-columns: minmax(0, 1fr); }
  .fyears { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 22px; }
}

/* what is applied, each with its own ×; then the list's own line */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.chips:empty { display: none; }
.chip, .chip-clear {
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
  border-radius: 14px;
  padding: 3px 11px;
}
.chip { color: var(--link); background: rgba(32, 89, 184, 0.07); border: 1px solid rgba(32, 89, 184, 0.35); }
.chip:hover { border-color: var(--link); }
.chip span { margin-left: 3px; }
.chip-clear { color: var(--ink-2); background: none; border: 1px solid transparent; text-decoration: underline; text-underline-offset: 3px; }
.year-sub.results { margin-top: 0; }

/* the pages of a long list */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px 4px;
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  font-variant-numeric: tabular-nums lining-nums;
}
.pager:empty { display: none; }
.pager a, .pager .cur, .pager .gap { min-width: 2em; padding: 3px 8px; text-align: center; border-radius: var(--radius); }
.pager a:hover { background: var(--shade); text-decoration: none; }
.pager .cur { color: #fff; background: var(--link); font-weight: 600; }
.pager .gap { color: var(--ink-3); min-width: 0; padding: 3px 2px; }
.pager .step { padding: 3px 10px; }

/* ---------------------------------------------------- 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);
}
/* another version of the same work, or a correction to it, under the reference */
.paper-also { margin: 1px 0 0; font-size: 15.5px; color: var(--ink-3); }
.paper-also .kind { font-style: italic; }
.paper-also a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.paper-also a:hover { color: var(--link); }

.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; }
.paper-meta a { color: var(--link); }
.paper-meta a code { color: inherit; }

/* 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; }
/* "I am interested in working in a group": a box in blue, and the same blue in the list */
.claim-form label.group-box { display: flex; gap: 9px; align-items: center; padding: 9px 12px;
  border: 1.5px solid var(--link); border-radius: var(--radius); background: rgba(32, 89, 184, 0.06);
  color: var(--link); font-weight: 600; cursor: pointer; }
.claim-form label.group-box input { width: auto; margin: 0; flex: none; accent-color: var(--link); }
.claim-group { color: var(--link); font-weight: 600; }
.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; }
/* "A digestion of the paper": the paper a digestion with a title of its own digests */
.dg-of-paper { margin: 16px 0 0; padding: 10px 0 0 14px; border-left: 2px solid var(--marker); }
.dg-of-label { margin: 0 0 2px; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.dg-paper-title { margin: 0 0 4px; font-size: 19px; font-weight: 600; line-height: 1.35; }
.dg-paper-title a, .dg-paper-title a:visited { color: var(--ink); }
.dg-paper-title a:hover { color: var(--link); }
/* the same on the list of digestions, in one line */
.dg-of { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.dg-of .kind { font-style: italic; color: var(--ink-3); margin-right: 0.3em; }   /* the italic "of" needs room before the title */
.dg-of a, .dg-of a:visited { color: var(--ink); font-weight: 600; }
.dg-of a:hover { color: var(--link); }
.dg-of .sep { color: var(--ink-3); margin: 0 2px; }
.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; }
/* every part of a digestion's page, the text above all, as wide as its head */
.prose.dg-part, .dg-text { 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; }

/* A digestion shown as a page (digestion.html with a <slug>-text.js from
   tools/tex2web.py): set like the LaTeX it came from -- numbered headings,
   theorems with a bold head and an italic statement, proofs ending in a square,
   equation numbers on the right -- in the site's type, without boxes. */
.tx { font-size: 17px; line-height: 1.6; }
.tx [id] { scroll-margin-top: 18px; }
.tx-front { margin: 4px 0 22px; }
.tx p.tx-intro { margin: 4px 0 20px; color: var(--ink-2); }
.tx-front p { margin: 0 !important; }
.tx-title { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.tx-byline { margin-top: 6px !important; font-size: 17px; }
.tx-kind { margin-top: 2px !important; font-size: 15px; color: var(--ink-3); }
.tx-toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0 10px; margin: 0 0 28px; }
.tx-toc-title { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px !important; }
.tx-toc ol { list-style: none; padding: 0 !important; margin: 0 !important; }
.tx-toc li { margin: 3px 0 !important; }
.tx-toc a { text-decoration: none !important; color: var(--ink); }
.tx-toc a:hover { color: var(--link); text-decoration: underline !important; }
.tx-toc .tx-toc-0 { font-weight: 600; margin-top: 8px !important; }
.tx-toc .tx-toc-1 { padding-left: 1.6em; }
.tx-toc .tx-toc-2 { padding-left: 3.2em; font-size: 15.5px; }
.tx-num { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: .25em; }
.tx .tx-h { line-height: 1.3; font-weight: 600; color: var(--ink); }
.tx h3.tx-chapter { font-size: 24px; margin: 44px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.tx h4.tx-section { font-size: 20px; margin: 32px 0 10px; }
.tx h5.tx-subsection { font-size: 17.5px; margin: 24px 0 8px; }
.tx h6.tx-subsubsection, .tx h6.tx-paragraph { font-size: 17px; margin: 18px 0 6px; }
.tx-abstract { margin: 0 0 8px; }
.tx-abstract > h3 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.tx p { margin: 0 0 12px; }
.tx p.tx-cont { margin-top: -4px; }
.tx-thm { margin: 18px 0; }
.tx-head { font-weight: 600; font-style: normal; }
.tx-note { font-style: normal; }
.tx-plain p, .tx-plain .tx-item { font-style: italic; }
.tx-plain .tx-head, .tx-plain .tx-note, .tx-plain .tx-ref, .tx-plain .tx-cite { font-style: normal; }
.tx-remark .tx-head { font-weight: 400; font-style: italic; }
.tx-proof { margin: 12px 0 20px; }
.tx-proof-head { font-style: italic; }
.tx-qed { float: right; margin-left: 1em; color: var(--ink-2); }
.tx-qedline { text-align: right; margin-top: -8px !important; }
.tx-eq { overflow-x: auto; overflow-y: hidden; margin: 6px 0 10px; }
.tx-eq .katex-display { margin: .5em 0; }
/* a numbered display wider than the column: it scrolls, and its number keeps a place of its own */
.tx-eq .katex-display > .katex { display: block; min-width: max-content; }
.tx-eq .katex-display > .katex > .katex-html:has(> .tag) { padding-right: 3.6em; }
.tx-list { list-style: none; padding: 0 !important; margin: 0 0 12px; }
.tx-list > li { display: flex; gap: .6em; margin: 6px 0 !important; }
.tx-mark { flex: none; min-width: 1.7em; text-align: right; font-style: normal; }
.tx-item { flex: 1; min-width: 0; }
.tx-item > p:last-child { margin-bottom: 0; }
.tx a.tx-ref, .tx a.tx-cite { text-decoration: none; }
.tx a.tx-ref:hover, .tx a.tx-cite:hover { text-decoration: underline; }
.tx-refs .tx-mark { min-width: 2.4em; }
.tx-refs li { font-size: 15.5px; }
.tx-sc { font-variant: small-caps; }
/* figures: the pictures at their printed size, side by side when there are several,
   the caption below in smaller type; a wrapfigure is set like any other figure */
.tx-fig { margin: 24px 0; text-align: center; }
.tx-fig img { display: inline-block; max-width: 100%; height: auto; }
.tx-fig figcaption { max-width: 38rem; margin: 10px auto 0; text-align: left; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.tx-fig figcaption p { margin: 0 0 4px; }
.tx-fig figcaption .tx-head { color: var(--ink); }
.tx-subfigs { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px 14px; }
.tx-subfig { flex: 1 1 170px; min-width: 0; max-width: 300px; margin: 0; }
.tx-subfig figcaption { font-size: 14.5px; }
.tx-subfig figcaption .katex { font-size: 1em; }
.tx-fig .tx-eq { margin: 2px 0 4px; }
/* footnotes: the note right below its paragraph, small and set off by a rule */
.tx sup.tx-fnref { line-height: 0; font-size: 72%; margin-left: 1px; }
.tx sup.tx-fnref a, .tx-fnote sup a { text-decoration: none; }
.tx p.tx-fnote { margin: -4px 0 14px; padding-left: 12px; border-left: 2px solid var(--rule-soft);
                 font-size: 15px; line-height: 1.5; font-style: normal; color: var(--ink-2); }
.tx p.tx-fnote sup { font-size: 75%; margin-right: 2px; }
/* the contents, folded away above the text */
.tx-fold { margin: 0 0 20px; }
.tx-fold > summary { cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: .08em;
                     text-transform: uppercase; color: var(--ink-3); width: max-content; }
.tx-fold > summary:hover { color: var(--link); }
.tx-fold .tx-toc { margin: 10px 0 0; }
.tx .tx-fold + .tx-h { margin-top: 6px; padding-top: 0; border-top: 0; }   /* the text opening with its heading */
.tx-fold .tx-toc-title { display: none; }
@media (max-width: 640px) {
  .tx { font-size: 16px; }
  .tx h3.tx-chapter { font-size: 21px; }
  .tx h4.tx-section { font-size: 18.5px; }
  .tx-toc .tx-toc-1 { padding-left: 1em; }
  .tx-toc .tx-toc-2 { padding-left: 2em; }
  .colophon-text { flex-direction: column; }
}

/* ------------------------------------------------------ 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 */
/* a page's main content across the whole column, as the lists on the other pages are */
.prose.wide { max-width: none; }
/* "Organization of the website": the heading across the page, the text under it in two columns */
.organization { margin-top: 54px; padding-top: 34px; border-top: 1px solid var(--line); }
.organization h2 { font-size: 25px; font-weight: 600; line-height: 1.3; margin: 0 0 14px; }
.organization .cols { columns: 2; column-gap: 68px; }
.organization .cols p { margin: 0 0 12px; 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; }
/* under the strip at the foot: a band in the bars' blue, edge to edge like the
   menu bar (the same border-image trick), its text in the page's column */
.colophon-text { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 40px;
                 padding: 16px 0 18px; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82);
                 border-image: conic-gradient(var(--bar-bg) 0 0) fill 0/0/0 100vw; }
.colophon-text p { margin: 0; }
.colophon-name strong { color: #fff; font-weight: 600; }
.colophon-small { margin-top: 3px !important; font-size: 13.5px; }
.colophon-text .sep { margin: 0 .3em; }
.colophon-links { display: flex; flex-wrap: wrap; gap: 4px 18px; flex: none; }
.colophon-links a, .colophon-links a:visited { color: #fff; text-decoration: none; }
.colophon-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.colophon-small a, .colophon-small a:visited { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

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

  .masthead-inner { padding: 14px 0 10px; }
  .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 .page-lede { font-size: 20px; }
  .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; }
  .latest-list .latest-title { font-size: 20px; }
  .organization .cols { columns: 1; }

  .with-rail { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tb-field { flex: 1 1 100%; }
  .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%); }
}



/* ---- 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; }
  .years { height: calc(24px + var(--cap)); }
  .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; }
  .organization .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) {
  .years.is-live .yb::before { animation: none !important; }
}

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