@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;1,400&display=swap');
/* ============================================================================
   paper.css: typesetting for the technical paper.

   Deliberately separate from prior.css. A specification document is a different
   artefact from a product page and should not inherit its display type, its
   marquees or its accent treatment. Long-form reading, numbered structure,
   equations and references.

   Math is MathML, which every current browser renders natively. No KaTeX, no
   MathJax, no CDN. The repo has zero runtime dependencies and the paper keeps
   that property so it renders offline and in fifteen years.
   ========================================================================== */


:root {
  --paper: #050B07;
  --ink: #7DFFA6;
  --ink-2: rgba(125,255,166,.84);
  --ink-3: rgba(125,255,166,.62);
  --ink-4: #5d6771;
  --rule: rgba(125,255,166,.24);
  --rule-2: #1c242c;
  --wash: #091308;
  --accent: #3DE874;
  --accent-wash: rgba(92,201,139,.12);
  --flag: #e0a35a;
  --serif: 'IBM Plex Sans', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --measure: 34rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------- structure */

.sheet {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 1100px) {
  .sheet {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}

main {
  max-width: var(--measure);
  padding-bottom: 8rem;
}

/* wide elements break the measure deliberately */
main > figure,
main > .tablewrap,
main > .listing {
  max-width: min(46rem, 100%);
}

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

.masthead {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--ink);
  padding: 3.5rem 0 2rem;
  margin-bottom: 3rem;
}

.masthead .kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.1rem;
  font-variant-numeric: lining-nums;
}

.masthead h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 1rem;
  max-width: 22ch;
}

.masthead .sub {
  font-size: 1.12rem;
  color: var(--ink-2);
  max-width: 44rem;
  margin: 0 0 1.6rem;
}

.byline {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  font-variant-numeric: lining-nums;
}

.byline a {
  color: var(--accent);
}

/* -------------------------------------------------------------------- toc */

.toc {
  display: none;
}

@media (min-width: 1100px) {
  .toc {
    display: block;
    position: sticky;
    top: 2rem;
    font-family: var(--sans);
    font-size: 0.8rem;
    line-height: 1.5;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding-bottom: 2rem;
    font-variant-numeric: lining-nums;
  }
}

.toc h2 {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 0.9rem;
  font-weight: 500;
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
  margin-bottom: 0.34rem;
}

.toc a {
  color: var(--ink-2);
  text-decoration: none;
  display: block;
  padding-left: 1.7rem;
  text-indent: -1.7rem;
}

.toc a::before {
  content: counter(toc) '.';
  display: inline-block;
  width: 1.7rem;
  text-indent: 0;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.toc a:hover {
  color: var(--ink);
}

.toc .sub-list {
  counter-reset: sub;
  margin: 0.2rem 0 0.5rem 1.7rem;
}

.toc .sub-list li {
  counter-increment: sub;
}

.toc .sub-list a::before {
  content: counter(toc) '.' counter(sub);
  width: 2.3rem;
  text-indent: 0;
}

.toc .sub-list a {
  padding-left: 2.4rem;
  text-indent: -2.4rem;
  color: var(--ink-3);
  font-size: 0.76rem;
}

/* --------------------------------------------------------------- headings */

main {
  counter-reset: sec;
}

h2.sec {
  counter-increment: sec;
  counter-reset: sub eq fig;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 3.6rem 0 1.1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

h2.sec::before {
  content: counter(sec) '. ';
  color: var(--ink-4);
  font-variant-numeric: lining-nums;
}

h3.sub {
  counter-increment: sub;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.008em;
  margin: 2.3rem 0 0.7rem;
}

h3.sub::before {
  content: counter(sec) '.' counter(sub) '  ';
  color: var(--ink-4);
  font-variant-numeric: lining-nums;
}

h4.run {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 1.6rem 0 0.4rem;
  color: var(--ink);
}

p {
  margin: 0 0 1.05rem;
}

main > p:first-of-type {
  margin-top: 0;
}

/* first paragraph of a section is not indented, later ones are, as in print */
h2.sec + p,
h3.sub + p,
h4.run + p,
figure + p,
.tablewrap + p,
.listing + p,
.callout + p,
ul + p,
ol + p {
  text-indent: 0;
}

main p + p {
  text-indent: 1.4em;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(92, 201, 139, 0.4);
}

a:hover {
  border-bottom-color: var(--accent);
}

strong {
  font-weight: 600;
}

code,
.id {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--wash);
  padding: 0.08em 0.32em;
  border-radius: 0;
  font-variant-numeric: lining-nums;
}

.num {
  font-variant-numeric: lining-nums tabular-nums;
  font-family: var(--mono);
  font-size: 0.9em;
}

/* --------------------------------------------------------------- abstract */

.abstract {
  background: var(--wash);
  border-left: 2px solid var(--ink);
  padding: 1.4rem 1.6rem;
  margin: 0 0 2.4rem;
  font-size: 0.97rem;
}

.abstract h2 {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.7rem;
  font-weight: 500;
}

.abstract p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------- equations */

/*
 * The equation number is positioned rather than laid out as a grid column.
 * A grid container blockifies its children, and blockifying <math> breaks
 * MathML's internal layout: fractions and radicals collapse to a single line.
 * Keeping <math> as an ordinary block-level MathML element preserves it.
 */
.eq {
  counter-increment: eq;
  position: relative;
  margin: 1.6rem 0;
  padding-right: 4.5rem;
  overflow-x: auto;
  overflow-y: visible;
}

.eq > math {
  margin: 0 auto;
}

.eq::after {
  content: '(' counter(sec) '.' counter(eq) ')';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-4);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}

math {
  font-size: 1.05rem;
}

/* MathML fallback if a browser somehow lacks support */
.eq .fallback {
  font-family: var(--mono);
  font-size: 0.88rem;
}

/* ----------------------------------------------------------------- tables */

.tablewrap {
  overflow-x: auto;
  margin: 1.6rem 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.83rem;
  font-variant-numeric: lining-nums tabular-nums;
}

caption {
  caption-side: top;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  padding-bottom: 0.7rem;
  counter-increment: fig;
}

caption::before {
  content: 'Table ' counter(sec) '.' counter(fig) '. ';
  color: var(--ink);
  font-weight: 600;
}

th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 0.5rem 0.9rem 0.5rem 0;
  white-space: nowrap;
}

td {
  padding: 0.44rem 0.9rem 0.44rem 0;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink-2);
  vertical-align: top;
}

tbody tr:last-child td {
  border-bottom: 1px solid var(--rule);
}

td.r,
th.r {
  text-align: right;
  padding-right: 0;
  font-family: var(--mono);
  font-size: 0.95em;
}

th.r {
  font-family: var(--sans);
}

td.k {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.95em;
}

/* --------------------------------------------------------------- listings */

.listing {
  margin: 1.5rem 0;
  border: 1px solid var(--rule);
  border-radius: 0;
  overflow: hidden;
}

.listing-head {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.5rem 0.9rem;
  background: var(--wash);
  border-bottom: 1px solid var(--rule);
}

.listing pre {
  margin: 0;
  padding: 0.9rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--ink-2);
  font-variant-numeric: lining-nums;
}

.listing .c {
  color: var(--ink-4);
}

.listing .v {
  color: var(--accent);
}

/* --------------------------------------------------------------- callouts */

.callout {
  border-left: 2px solid var(--rule);
  padding: 0.1rem 0 0.1rem 1.2rem;
  margin: 1.5rem 0;
  font-size: 0.94rem;
  color: var(--ink-2);
}

.callout.flag {
  border-left-color: var(--flag);
}

.callout.result {
  border-left-color: var(--accent);
  background: var(--accent-wash);
  padding: 0.9rem 1.2rem;
}

.callout .lab {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.4rem;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout p {
  text-indent: 0 !important;
}

/* ------------------------------------------------------------------ lists */

main ul,
main ol {
  margin: 0 0 1.1rem;
  padding-left: 1.4rem;
}

main li {
  margin-bottom: 0.4rem;
}

dl.notation {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.35rem 1rem;
  margin: 1.2rem 0;
  font-size: 0.93rem;
}

dl.notation dt {
  font-family: var(--mono);
  color: var(--ink);
  font-size: 0.88rem;
}

dl.notation dd {
  margin: 0;
  color: var(--ink-2);
}

/* -------------------------------------------------------------- footnotes */

.refs {
  font-size: 0.86rem;
  counter-reset: ref;
  list-style: none;
  padding: 0;
}

.refs li {
  counter-increment: ref;
  padding-left: 2.2rem;
  text-indent: -2.2rem;
  margin-bottom: 0.6rem;
  color: var(--ink-2);
}

.refs li::before {
  content: '[' counter(ref) ']';
  display: inline-block;
  width: 2.2rem;
  text-indent: 0;
  color: var(--ink-4);
  font-family: var(--sans);
  font-size: 0.78rem;
}

.cite {
  font-family: var(--sans);
  font-size: 0.74em;
  vertical-align: super;
  line-height: 0;
  color: var(--accent);
  border: 0;
}

/* --------------------------------------------------------------- colophon */

.colophon {
  margin-top: 4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  line-height: 1.65;
}

.colophon p {
  text-indent: 0 !important;
  max-width: 44rem;
}

@media print {
  .toc { display: none; }
  body { font-size: 10.5pt; }
  .sheet { grid-template-columns: 1fr; }
  h2.sec { break-after: avoid; }
  .eq, table, .listing { break-inside: avoid; }
}