/* ============================================================================
   PAPER — manuscript typesetting. Loaded only on the two paper pages.
   The manuscript sits on a bone document panel: cinnabar owns the shell, but
   nobody reads twenty thousand words on a saturated red field.
   ========================================================================= */

.paper-shell {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: var(--s5);
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--s5) var(--gutter) var(--s7);
  align-items: start;
}

/* --- Contents ---------------------------------------------------------
   A native <details>, open by default. On desktop it is the sticky column;
   the summary is the column's head and cannot fold. On phones it is a bar
   that site.js folds on load, so the reader gets the abstract, not a list. */
.toc-fold {
  position: sticky;
  top: 96px;
  min-width: 0;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.toc-summary {
  list-style: none;
  cursor: default;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-faint);
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  align-items: baseline;
}
.toc-summary::-webkit-details-marker { display: none; }
.toc-head {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.toc-here { display: none; }
.paper-toc { min-width: 0; }
.paper-toc a {
  display: block;
  padding: 6px 0 6px 12px;
  font-size: var(--t-ms);
  line-height: 1.3;
  text-decoration: none;
  color: var(--ink-quiet);
  border-left: 1px solid var(--ink-faint);
}
.paper-toc a:hover { color: var(--ink); background: var(--bone-dim); }
.paper-toc a.is-here, .paper-toc a[aria-current="true"] {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

/* --- The manuscript --------------------------------------------------- */
.paper { min-width: 0; max-width: 74ch; }

.paper h2 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 104;
  font-size: var(--t-lead);
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 2px solid var(--ink);
  scroll-margin-top: 100px;
}
.paper h3 {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  font-size: 18.5px;
  line-height: 1.2;
  letter-spacing: -0.008em;
  margin-top: var(--s4);
  scroll-margin-top: 100px;
}
.sec-num {
  display: inline-block;
  min-width: 1.9em;
  color: var(--accent);
}

.paper p { margin-top: var(--s2); line-height: 1.66; text-wrap: pretty; }
.paper h2.paper-first { border-top: 0; margin-top: 0; padding-top: 0; }
/* The manuscript's own rhythm, as the typesetter marked it. */
.paper .mt-8px { margin-top: 8px; }  .paper .mt-12px { margin-top: 12px; }
.paper .mt-16px { margin-top: 16px; } .paper .mt-24px { margin-top: 24px; }
.paper .mt-28px { margin-top: 28px; } .paper .mt-32px { margin-top: 32px; }
.paper h2 + p, .paper h3 + p { margin-top: var(--s2); }

.paper ul, .paper ol { margin: var(--s2) 0 0; padding-left: 1.4em; }
.paper li { margin-top: 6px; line-height: 1.58; }

/* A run-in label. It is a paragraph, not a heading — making it an <h4>
   under an <h2> skipped a level and broke the document outline. */
.runin {
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.abstract {
  background: var(--bone-dim);
  padding: var(--s3);
  margin-top: var(--s3);
  border-left: 1px solid var(--accent);
}
.abstract p { margin-top: 0; font-size: var(--t-small); line-height: 1.6; }
.abstract p + p { margin-top: var(--s2); }
.abstract .note { max-width: none; }

/* --- Maths ------------------------------------------------------------ */
.eq {
  display: block;
  margin: var(--s3) 0;
  padding: 14px var(--s3);
  background: var(--bone-dim);
  font-family: var(--mono);
  font-size: var(--t-ms-sm);
  line-height: 1.75;
  font-variation-settings: "wdth" 87;
  overflow-x: auto;
}
.var { font-family: var(--text); font-style: italic; }
.num { font-family: var(--mono); font-size: 0.92em; font-variation-settings: "wdth" 87; }
.paper code {
  font-family: var(--mono);
  font-size: 0.84em;
  font-variation-settings: "wdth" 87;
  background: var(--bone-dim);
  padding: 0.1em 0.3em;
}

/* --- Figures ---------------------------------------------------------- */
.figure { margin: var(--s4) 0 0; }
.figure img {
  width: 100%;
  background: var(--bone);
  box-shadow: inset 0 0 0 1px var(--ink-faint);
}
.figcap {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: var(--t-meta);
  line-height: 1.55;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.figcap b { color: var(--accent); font-weight: 500; }
/* The explanatory sentence, not a lang-tagged glyph inside the title. */
.figcap > span:not([lang]) { text-transform: none; letter-spacing: 0.02em; font-family: var(--text); font-size: var(--t-ms-sm); display: block; margin-top: 6px; }

/* --- Tables -----------------------------------------------------------
   The fade is the only cue that a table continues past the right edge:
   touch scrollbars are invisible at rest, and these tables hide roughly
   half their width at 390px. */
.table-scroll {
  overflow-x: auto;
  margin-top: var(--s3);
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
@supports (animation-timeline: scroll(self inline)) {
  .table-scroll {
    animation: unfade linear both;
    animation-timeline: scroll(self inline);
    animation-range: contain;
  }
}
@keyframes unfade {
  to { mask-image: linear-gradient(to right, #000 100%, transparent); -webkit-mask-image: linear-gradient(to right, #000 100%, transparent); }
}

.tbl { border-collapse: collapse; width: 100%; font-size: var(--t-ms); }
.tbl caption {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding-bottom: 10px;
}
.tbl th, .tbl td { padding: 9px 14px 9px 0; text-align: right; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; white-space: normal; min-width: 13ch; }
.tbl thead th {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
}
.tbl tbody tr { border-bottom: 1px solid var(--ink-faint); }
.tbl tbody td { font-family: var(--mono); font-size: var(--t-data); font-variation-settings: "wdth" 87; }
.tbl tbody td:first-child { font-family: var(--text); font-size: var(--t-ms); }
.tbl .is-ours { background: var(--accent-tint); }
.tbl .is-ours td:first-child { font-weight: 700; color: var(--accent); }
.tbl .group td {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding-top: var(--s3);
}

/* --- Apparatus -------------------------------------------------------- */
.callout {
  margin-top: var(--s4);
  padding: var(--s3);
  background: var(--bone-dim);
  border-left: 1px solid var(--accent);
  font-size: var(--t-small);
  line-height: 1.55;
}
.mono-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.refs { list-style: none; padding: 0; margin-top: var(--s3); }
.refs li {
  font-size: var(--t-ms);
  line-height: 1.5;
  padding-left: 2.2em;
  text-indent: -2.2em;
  margin-top: 10px;
  color: var(--ink-quiet);
}
.fn { font-size: var(--t-ms-sm); color: var(--ink-quiet); }
.paper .note { margin-top: var(--s2); }

@media (max-width: 1000px) {
  .paper-shell { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-top: var(--s4); }
  /* The folded bar rides under the sticky top row, naming the section the
     reader is in and opening on tap, so Table 14 is two taps away from
     anywhere in the manuscript. */
  .toc-fold {
    position: sticky;
    top: 60px;
    z-index: 30;
    max-height: calc(100vh - 76px);
    overflow: auto;
    background: var(--bone);
    box-shadow: inset 0 0 0 1px var(--ink-faint);
    padding: 12px var(--s3);
  }
  .toc-summary {
    cursor: pointer;
    padding-bottom: 0;
    border-bottom: 0;
    min-height: 32px;
    align-items: center;
  }
  .toc-summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--ink-quiet);
    border-bottom: 1.5px solid var(--ink-quiet);
    transform: rotate(45deg) translateY(-3px);
    flex: none;
  }
  .toc-fold[open] .toc-summary::after { transform: rotate(-135deg) translateY(-3px); }
  .toc-fold[open] .toc-summary { padding-bottom: 10px; border-bottom: 1px solid var(--ink-faint); }
  /* The section the reader is in, shown on the folded bar. */
  .toc-here { display: block; font-size: var(--t-ms); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: right; }
  .toc-fold[open] .toc-here { display: none; }
  .paper-toc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0 var(--s3);
    padding-top: 8px;
  }
  .paper { max-width: none; }
}