/* /research/: one long read with an index that follows it (assets/js/research-page.js). */

.research {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--s-6) var(--gutter) var(--s-8);
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.research.is-ready { opacity: 1; }
.research em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

.rx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-7); }
.rx-h1 { margin: 0; max-width: 24ch; font-size: clamp(2rem, 1.2rem + 3vw, 4rem); font-weight: var(--weight-light); letter-spacing: var(--tracking-display); line-height: 1.05; }
.rx-h1 .label { display: block; margin-bottom: var(--s-3); letter-spacing: var(--tracking-label); line-height: 1; }
.rx-count { margin: 0; font-size: var(--text-xs); color: var(--ink-3); }

.rx-body { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--s-7); align-items: start; }

/* The index: year and title; the paper being read sets in serif italic. */
.rx-index { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: none; }
.rx-index ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rx-index a { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: var(--s-3); padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); line-height: 1.35; color: var(--ink-3); transition: color 200ms var(--ease); }
.rx-index .mono { font-size: var(--text-xs); padding-top: 2px; }
.rx-index a:hover { color: var(--ink-2); }
.rx-index a[aria-current] { color: var(--ink); }
.rx-index a[aria-current] .rx-t { font-family: var(--font-serif); font-style: italic; font-size: 1.08em; }

/* A paper */
.rx-flow { display: grid; }
.pp { display: grid; align-content: start; gap: 16px; padding: var(--s-6) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.pp:first-child { padding-top: 0; }
.pp-meta { display: flex; align-items: baseline; gap: 14px; margin: 0; font-size: var(--text-xs); color: var(--ink-3); }
.pp-title { margin: 0; font-size: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); font-weight: var(--weight-light); letter-spacing: -0.01em; line-height: 1.18; }
.pp-by { display: grid; gap: 4px; margin: 0; font-size: var(--text-sm); color: var(--ink-2); }
.pp-by b { color: var(--ink); font-weight: var(--weight-medium); }
.pp-by > span + span { font-size: var(--text-xs); color: var(--ink-3); }
.pp-abs { margin: 0; max-width: 64ch; font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }
.pp-kw { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pp-kw span { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--text-xs); color: var(--ink-2); }
.pp-cite { margin: 0; padding: 12px 14px; border-left: 2px solid var(--line-strong); font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.pp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); }
.pp-acts a, .pp-acts button { padding: 0; border: 0; background: none; font: inherit; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.pp-acts a:hover, .pp-acts button:hover { color: var(--ink); text-decoration-color: var(--ink); }

@media (max-width: 760px) {
  .rx-body { grid-template-columns: minmax(0, 1fr); } /* plain 1fr cannot shrink below a long DOI */
  /* On a phone the papers are the index: one column, read straight down. */
  .rx-index { display: none; }
}