/* Shared typographic list styles for Research and Clinical pages. */
.entry-list { list-style: none; margin: 0 0 clamp(40px, 6vw, 64px); padding: 0; }

/* Profile / external-identity links under a page header (Scholar, ORCID). */
.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 500;
}
.profile-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-deep);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color var(--dur-micro) var(--ease-glide);
}
.profile-links a:hover { color: var(--text-primary); }

/* Reserve space for JS-rendered lists so content below doesn't shift in
   (keeps Cumulative Layout Shift ~0). Tuned to the real entry counts. */
#publications { min-height: 360px; }
#conferences { min-height: 560px; }

.entry {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: clamp(12px, 3vw, 36px);
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
/* the section eyebrow above already draws the top rule — avoid a double line */
.entry:first-child { border-top: 0; }
.entry:last-child { border-bottom: 1px solid var(--border); }

.entry__date {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding-top: 4px;
}

/* Sized a step down from a display heading: research titles run long and are
   shown in full, so they need to wrap to two or three lines without
   overpowering the page. `balance` evens out those wrapped lines. */
.entry__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.75vw, 22px);
  line-height: 1.25;
  text-wrap: balance;
  max-width: 68ch;   /* matches .entry__cite so their right edges line up */
}
/* Projects: "Title | Organization" on one line — the organization in the
   accent purple so it reads as distinct from the title without a second line. */
.entry__sep { color: var(--accent); margin: 0 0.1em; }
.entry__org { color: var(--accent-deep); }
.entry__meta { margin-top: 6px; color: var(--text-secondary); font-size: 14px; }
.entry__meta .author-me { color: var(--text-primary); font-weight: 600; }
.entry__meta a { color: var(--accent-deep); border-bottom: 1px solid var(--accent); }

/* Chicago-style citation block. Each element gets its own line — a full
   citation is too long to scan as one run-on paragraph. */
.entry__cite {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
  max-width: 68ch;
}
.entry__cite > span { display: block; }
.entry__cite .author-me { color: var(--text-primary); font-weight: 600; }
.cite__venue { font-style: italic; }
.cite__locator { color: var(--text-muted); }
.cite__doi {
  display: inline-block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--accent-deep);
  border-bottom: 1px solid var(--accent);
  overflow-wrap: anywhere;
}
.entry__role {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
/* Colour-coded roles — each distinct role maps to one of these.
   Text colours are darkened to clear WCAG AA (≥4.5:1) on the cream bg. */
.role-c0 { color: #8a5a00; background: rgba(224, 192, 151, 0.22); } /* amber */
.role-c1 { color: #2f6b41; background: rgba(143, 166, 120, 0.18); } /* green */
.role-c2 { color: #2f5d8a; background: rgba(110, 150, 190, 0.16); } /* blue */
.role-c3 { color: #a23b22; background: rgba(200, 120, 80, 0.15); }  /* rust */
.role-c4 { color: #6d3f7a; background: rgba(150, 90, 140, 0.15); }  /* plum */
.role-c5 { color: #4a4f5c; background: rgba(90, 95, 107, 0.14); }   /* slate */
.entry__link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--accent-deep);
  border-bottom: 1px solid var(--accent);
}
.entry__desc { margin-top: 8px; color: var(--text-secondary); font-size: 14px; max-width: 60ch; }

.status-pill {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.entry { animation: fade-up var(--dur-1) var(--ease-swing) both; }
.entry:nth-child(2) { animation-delay: 0.05s; }
.entry:nth-child(3) { animation-delay: 0.10s; }
.entry:nth-child(4) { animation-delay: 0.15s; }

@media (max-width: 620px) {
  .entry { grid-template-columns: 1fr; gap: 4px; }
  .entry__date { padding-top: 0; }
}