/* ============================================================
   SENTINEL — /method (the document)
   Long-form, single column, 720px. FT Big Read energy. The only
   animation on the page is the reading-progress bar.
   Body text uses Source Serif 4 — a text serif added for this
   document only (sanctioned by the /method brief; the display
   serif stays Instrument for headings).
   ============================================================ */

.me-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.me-progress__fill { height: 100%; width: 0; background: var(--accent); }

.me-doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 96px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
}
.me-doc p { margin: 0 0 22px; color: color-mix(in srgb, var(--text) 88%, transparent); }
.me-doc a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.me-doc a:hover { border-bottom-color: var(--accent); }
.me-doc sup {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  margin-left: 1px;
}

/* ---------- opening ---------- */
.me-open {
  min-height: 92vh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 26px;
  padding: 48px 0;
}
.me-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.me-open h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 18ch;
  color: var(--text);
}
.me-open h1 .line { display: block; }
.me-open h1 em { color: var(--accent); font-style: italic; }
.me-open .sub {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  max-width: 62ch;
  margin: 0;
}
.me-byline {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

/* ---------- section frame ---------- */
.me-sec { padding: 56px 0 8px; border-top: 1px solid var(--border); }
.me-sec h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.01em;
  margin: 10px 0 26px;
  color: var(--text);
}
.me-sec h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  margin: 36px 0 14px;
  color: var(--text);
}
.me-limits {
  color: var(--text-muted);
  font-style: italic;
}
.me-limits b { font-style: normal; font-weight: 600; color: var(--text-muted); }

/* formal definitions / formulas */
.me-def {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  margin: 0 0 22px;
  overflow-x: auto;
}
.me-def b { color: var(--text); font-weight: 500; }

/* footnotes */
.me-fns {
  margin: 28px 0 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  color: var(--text-faint);
}
.me-fns div { padding: 2px 0; }
.me-fns a { color: var(--text-muted); border-bottom-color: var(--border-strong); }

/* inline charts */
.me-chart { margin: 8px 0 8px; }
.me-chart svg { width: 100%; height: auto; display: block; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); }
.me-chart figcaption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-top: 8px;
  line-height: 1.6;
}
.me-c-mono { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; fill: var(--text-faint); text-transform: uppercase; }
.me-c-accent { fill: var(--accent); }

/* pull quote */
.me-pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.35;
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin: 30px 0;
}

/* ---------- reading guide + tables ---------- */
.me-table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; }
.me-table th, .me-table td {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  text-align: left;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.me-table th {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
}
.me-table td { color: var(--text-muted); }
.me-table td:first-child { color: var(--text); }
.me-table a { border-bottom: 0; }
.me-table--sortable th { cursor: pointer; }
.me-table--sortable th:hover { color: var(--accent); }

/* source registry: wider than the column */
.me-wide { width: min(960px, calc(100vw - 40px)); margin-left: 50%; transform: translateX(-50%); }
.me-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-faint); }

/* ---------- reproducibility box ---------- */
.me-repro {
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin: 12px 0 22px;
}
.me-repro ol { margin: 0 0 18px; padding-left: 22px; }
.me-repro li { margin-bottom: 14px; line-height: 1.6; color: color-mix(in srgb, var(--text) 88%, transparent); }
.me-repro li code, .me-doc code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--text);
}
.me-repro__close { font-style: italic; color: var(--text-muted); margin: 0; }

/* ---------- disclosures ---------- */
.me-disclosures { list-style: none; margin: 0; padding: 0; counter-reset: disc; }
.me-disclosures li {
  counter-increment: disc;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}
.me-disclosures li::before {
  content: counter(disc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  padding-top: 5px;
}

/* ---------- errata ---------- */
.me-errata-empty {
  font-style: italic;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 22px 24px;
}

/* ---------- bibliography ---------- */
.me-bib { list-style: none; margin: 0; padding: 0; }
.me-bib li {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.8;
  color: var(--text-muted);
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}
.me-bib a { border-bottom: 0; }

/* ---------- bios ---------- */
.me-bios { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 8px; }
.me-bio h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  font-weight: 400;
}
.me-bio p { font-size: 14px; line-height: 1.6; margin: 0; color: var(--text-muted); }

/* ---------- versioning / cta ---------- */
.me-version {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 40px;
}
.me-cta {
  margin-top: 36px;
  font-size: 16px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .me-doc { font-size: 16px; line-height: 1.7; }
  .me-wide { width: 100%; margin-left: 0; transform: none; }
  /* registry becomes a card stack */
  .me-sources thead { display: none; }
  .me-sources tr { display: block; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
  .me-sources td { display: block; border-bottom: 0; padding: 3px 0; }
  .me-sources td[data-th]::before {
    content: attr(data-th);
    display: block;
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .me-bios { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  /* the progress bar is opt-in under reduced motion */
  .me-progress { display: none; }
  .me-progress.is-opted-in { display: block; }
}