/* === Project Page CSS — FDA-inspired === */

:root {
  --ink: #1a1d24;           /* warm near-black — personal-site primary text */
  --ink-soft: #4b5260;      /* warm slate — personal-site secondary text */
  --muted: #4b5260;
  --muted-soft: #8a8f9a;
  --rule: #e6dfd1;          /* warm cream border */
  --rule-soft: #ece6d8;     /* softer warm cream */
  --bg: #faf7f1;            /* warm cream background (personal-site --bg) */
  --bg-tint: #f1ede4;       /* deeper cream for soft panels (personal-site --bg-subtle) */
  --bg-card: #ffffff;
  --accent: #1d3557;        /* deep navy — personal-site primary accent */
  --accent-light: #d6e0ec;  /* pale navy wash */
  --accent-dark: #142647;   /* deeper navy for hover */
  --warm: #c97c2d;          /* rust amber — personal-site --highlight */
  --warm-soft: #fbf1e2;     /* pale amber wash (personal-site --highlight-bg) */
  --warm-tint: #fef6e7;     /* even lighter amber tint */
  --warm-deep: #a55f1e;     /* deeper rust for readable text */
  --teal: #0d9488;          /* secondary cool — ratio panel / corollary tint */
  --teal-soft: #ccfbf1;
  --post: #b91c1c;          /* Post-polar accent (kept) */
  --polar: #047857;         /* Polar-only accent (kept) */
  --signal: #111827;
  --raw: #6b7280;
  --serif: "Newsreader", "Source Serif Pro", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* === Layout === */
main { max-width: 920px; margin: 0 auto; padding: 64px clamp(20px, 4vw, 36px) 96px; }
section { margin: 56px 0; }
section.tight { margin: 36px 0; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.18; margin: 0 0 18px; }
h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 18px; line-height: 1.2; }
h3 { font-size: 19px; margin: 28px 0 8px; line-height: 1.3; }
h4 { font-size: 15.5px; margin: 22px 0 6px; color: var(--ink-soft); font-family: var(--sans); font-weight: 600; }

p { margin: 0 0 14px; color: var(--ink-soft); }
ul, ol { padding-left: 22px; margin: 0 0 14px; color: var(--ink-soft); }
li { margin: 4px 0; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s; }
a:hover { border-bottom-color: var(--accent); }

code { font-family: var(--mono); font-size: 0.92em; background: var(--bg-tint); color: var(--accent); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--rule-soft); }
em { font-style: italic; color: var(--ink); }
strong { color: var(--ink); }

.lead {
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.6;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.002em;
}
.lead strong { font-weight: 600; color: var(--ink); }

/* === Header === Pion-style centered hero block, navy/cream palette. */
.page-head {
  padding: 72px 0 40px;
  text-align: center;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}

/* Pill eyebrow */
.page-head .eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 24px;
}

/* Title */
.page-head .title {
  font-family: var(--serif);
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 auto 8px;
  max-width: 880px;
  color: var(--ink);
}
.page-head .title em { font-style: italic; color: var(--accent); }

/* Subtitle */
.page-head .subtitle {
  font-family: var(--serif);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 12px auto 0;
  max-width: 720px;
}

/* Authors — comma-separated inline, centered, serif for publication feel */
.authors {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink);
  margin: 32px auto 4px;
  max-width: 800px;
  text-align: center;
}
.author {
  display: inline;
  white-space: nowrap;
}
.author .name {
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.author .name:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-light);
}
.author sup.aff-mark,
.affs .aff-num,
.aff-notes .aff-mark {
  font-family: var(--sans);
  color: var(--muted);
  font-weight: 600;
}
.author sup.aff-mark {
  font-size: 0.62em;
  letter-spacing: 0.02em;
  margin-left: 2px;
  top: -0.55em;
  position: relative;
  vertical-align: baseline;
  line-height: 0;
}

/* Affiliations — one centered line, middle-dot separated */
.affs {
  list-style: none;
  padding: 0;
  margin: 8px auto 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  max-width: 820px;
}
.affs li {
  display: inline;
  padding: 0;
}
.affs li:not(:last-child)::after {
  content: " · ";
  color: var(--muted);
  margin: 0 0.15em;
}
.affs .aff-num {
  font-size: 0.78em;
  vertical-align: 0.35em;
  line-height: 0;
  margin-right: 0.15em;
  font-weight: 600;
}

/* Submission note — equal contribution / correspondence on one centered line */
.aff-notes {
  margin: 14px auto 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-align: center;
  display: block;
}
.aff-notes span:not(:last-child)::after {
  content: " · ";
  color: var(--muted);
  margin: 0 0.15em;
}
.aff-notes a {
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--muted-soft);
}
.aff-notes a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.aff-notes .aff-mark {
  font-size: 11px;
  margin-right: 3px;
}

/* Centered action row */
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 32px 0 4px;
}
/* Pill-shaped action buttons — Pion's primary/secondary hierarchy.
   Primary uses --ink (near-black) so the navy accent stays reserved for
   structural highlights (eyebrow, theorem cards, links). */
.action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, box-shadow 0.15s ease;
}
.action:hover {
  background: var(--bg-tint);
  color: var(--ink);
  border-color: var(--ink-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(28, 31, 40, 0.08);
}
.action.primary {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}
.action.primary:hover {
  background: #000;
  border-color: #000;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.action svg { width: 15px; height: 15px; }

/* === Section dividers ===
   Explicit <div class="divider"> blocks are no longer used; section margin
   alone separates sections. Kept as display:none for any stragglers. */
.divider { display: none; }

/* === Cards === */
.card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 22px clamp(18px, 3vw, 28px);
  box-shadow: 0 1px 2px rgba(28, 31, 40, 0.04);
}
.card h3 { margin-top: 0; }
.card.theorem {
  border-left: 3px solid var(--accent);
  background: var(--bg-card);
}
.card.theorem h3 { color: var(--accent); font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }
.card.theorem .thm-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.card.theorem .thm-name { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
.card.theorem .thm-body { color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.card.theorem .thm-list {
  display: block;
  margin: 8px 0 0;
}
.card.theorem .thm-list > span {
  display: block;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--rule);
  margin: 4px 0;
}

.card.assumption {
  border-left: 3px solid var(--teal);
  background: var(--bg-card);
  font-size: 14.5px;
}
.card.assumption .ass-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f766e;
  margin-bottom: 2px;
}
.card.assumption .ass-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.card.assumption .ass-body {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}
.card.assumption .ass-list {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--ink-soft);
}
.card.assumption .ass-list li { margin: 4px 0; }

.ass-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px 0;
}
@media (max-width: 760px) {
  .ass-pair { grid-template-columns: 1fr; }
}

/* === Equation blocks === */
.eq-block {
  margin: 16px 0;
  background: #fbfbfd;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
}
.eq-row {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 14px 18px;
  align-items: baseline;
  margin: 6px 0;
}
.eq-row .tag {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-align: right;
  white-space: nowrap;
}
.eq-row .tag.post  { color: #b91c1c; }
.eq-row .tag.polar { color: #047857; }
.eq-row .body {
  font-family: var(--mono);
  font-size: 14.5px;
  color: var(--ink);
}

.tldr-banner {
  position: relative;
  background: var(--bg-tint);
  border-left: 3px solid var(--accent);
  padding: 22px clamp(18px, 3vw, 28px);
  border-radius: 0 8px 8px 0;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 18px 0 30px;
}
.tldr-banner > strong:first-child {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 6px;
}
.tldr-banner strong { color: var(--ink); }
.tldr-banner em { font-style: italic; color: var(--ink); }

/* === Central question pull quote === */
.central-question {
  position: relative;
  margin: 32px auto;
  max-width: 92%;
  padding: 22px 60px 28px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
}
.central-question::before,
.central-question::after {
  position: absolute;
  font-family: var(--serif);
  font-style: normal;
  font-size: 72px;
  color: var(--accent);
  opacity: 0.35;
  line-height: 1;
}
.central-question::before { content: "\201C"; left: 6px; top: -4px; }
.central-question::after  { content: "\201D"; right: 6px; bottom: -16px; }
.central-question p { margin: 0; }

/* === Figures === */
/* Calibration: every single-panel figure is rendered at the same width so
   subfigure rows and side-by-side pairs have identical per-panel area. The
   "fig-grid-2" grid splits 50/50 with a gap; multi-panel figures (1.25 ratio)
   render at full width naturally so their per-panel area roughly matches. */

/* Calibrated figure widths so per-panel sizing stays consistent across the
   page. Single panels (1.25 W:H) use max 460px → ~368px tall; 3-panel rows
   (~3.06 W:H) span full width → ~290px tall. The pixel height for a single
   panel ends up close to the per-panel height of a 3-panel row. */

.figure {
  margin: 22px auto;
  text-align: center;
  max-width: 460px;
}
.figure.wide {
  max-width: 920px;
}
.figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  background: white;
  border: 1px solid var(--rule-soft);
  display: block;
  margin: 0 auto;
}
.figure figcaption {
  font-size: 13px;
  color: var(--muted);
  text-align: left;
  margin-top: 8px;
  line-height: 1.5;
  padding: 0 4px;
}
.figure.wide figcaption {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.figure figcaption strong { color: var(--ink-soft); }

/* Per-figure width caps. Apply on the <img> inside .figure to override the
   default 100% cell-fill. Mapped to representative paper-page widths so a
   small figure stays small and the page rhythm doesn't feel uniformly loud. */
.figure img.fw-720 { max-width: 720px; }
.figure img.fw-560 { max-width: 560px; }
.figure img.fw-440 { max-width: 440px; }
.figure img.fw-360 { max-width: 360px; }
.figure img.fw-260 { max-width: 260px; }

/* Two-up grid for pairs of single-panel figures. Each cell takes a
   uniform share so per-panel size matches across the page. */
.fig-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 22px auto;
  max-width: 920px;
  align-items: start;
}
/* Narrower variant for pairs of square-ish (≈1.25:1) plots that otherwise
   read as too tall when each cell is ~450px wide. */
.fig-grid-2.narrow { max-width: 760px; }
.fig-grid-2.medium { max-width: 840px; }
.fig-grid-2 .figure {
  margin: 0;
  max-width: none;
}
.fig-grid-2 .figure img { max-width: 100%; }
.fig-grid-2 .figure figcaption { padding: 0 2px; }

/* Backward-compat alias used in a couple of older blocks */
.fig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 22px 0;
}
.fig-grid .figure { margin: 0; }

@media (max-width: 700px) {
  .fig-grid-2,
  .fig-grid { grid-template-columns: 1fr; }
}

/* === Pipeline comparison === */
.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 26px 0;
}
.pipeline-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 18px 20px 18px;
  display: flex;
  flex-direction: column;
}
.pipeline-card .name {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pipeline-card.pre  .name { color: var(--accent); }
.pipeline-card.post .name { color: #b91c1c; }
.pipeline-card.po   .name { color: #047857; }
.pipeline-card.pre  { border-top: 3px solid var(--accent); }
.pipeline-card.post { border-top: 3px solid #b91c1c; }
.pipeline-card.po   { border-top: 3px solid #047857; }
.pipeline-card .formula {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 78px;
  margin: 4px 0 12px;
  padding: 14px 8px;
  font-size: 17px;
  color: var(--ink);
}
.pipeline-card .formula mjx-container {
  font-size: 1.04em !important;   /* slightly larger than body math */
}
.pipeline-card .meaning {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: auto;     /* push down so cards align bottoms */
}

@media (max-width: 760px) {
  .pipeline-grid { grid-template-columns: 1fr; }
  .pipeline-card .formula { min-height: 64px; }
}

/* === Inline citations === */
.cite {
  font-family: var(--mono);
  font-size: 0.7em;
  color: var(--accent);
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  border-bottom: none;
  padding: 0 1px;
  margin: 0 1px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cite:hover {
  color: var(--warm-deep);
  border-bottom: none;
}

/* === References === */
.refs {
  list-style: decimal;
  padding-left: 22px;
  margin: 12px 0 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  counter-reset: ref;
}
.refs li {
  margin: 6px 0;
  padding-left: 4px;
}
.refs li::marker {
  color: var(--warm-deep);
  font-weight: 600;
  font-family: var(--mono);
  font-size: 12px;
}
.refs li em {
  color: var(--ink-soft);
  font-style: italic;
}
.refs li a {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent-light);
}
.refs li a:hover {
  color: var(--warm-deep);
  border-bottom-color: var(--warm-soft);
}
.refs-note {
  margin-top: 10px;
  font-size: 12.5px;
  font-style: italic;
}

/* === BibTeX === */
.bibtex {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  padding: 18px 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  position: relative;
}
.bibtex .copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #cbd5e1;
  font-family: var(--sans);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.bibtex .copy-btn:hover { background: rgba(255,255,255,0.2); color: white; }

/* === Footer === */
footer {
  border-top: 1px solid var(--rule);
  padding: 28px 0 0;
  margin-top: 64px;
  font-size: 13px;
  color: var(--muted);
}
footer p { margin: 4px 0; color: var(--muted); }

/* === Inline highlights === */
.hl-pre   { color: var(--accent); font-weight: 600; }
.hl-post  { color: #b91c1c; font-weight: 600; }
.hl-polar { color: #047857; font-weight: 600; }
.hl-signal { color: var(--signal); font-weight: 600; }
.hl-noise  { color: var(--raw); font-weight: 600; }

/* === Small helpers === */
.subtle { color: var(--muted); font-size: 14px; }
.center { text-align: center; }
.mono { font-family: var(--mono); }

/* === Responsive === */
@media (max-width: 600px) {
  main { padding: 36px 18px 64px; }
  section { margin: 40px 0; }
  .page-head { padding: 24px 0 6px; }
}