/* Plain language panel. Sits above the technical summary because the person
   who needs it is the one least likely to scroll past jargon to find it. */
.research__plain {
  padding: var(--s-5);
  background: var(--accent-wash);
  border-radius: var(--radius);
  margin-bottom: var(--s-6);
  max-width: var(--measure);
}
.research__plain-label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.research__plain-body { font-size: var(--step-1); line-height: 1.55; color: var(--ink); }

.research__summary { max-width: var(--measure); margin-bottom: var(--s-6); }

.research__block { padding-top: var(--s-6); margin-top: var(--s-6); border-top: 1px solid var(--line); }
.research__block:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.research__heading { font-size: var(--step-1); margin-bottom: var(--s-3); letter-spacing: var(--track-tight); }
.research__block > p { max-width: var(--measure); color: var(--ink-soft); }
.research__block > p + p { margin-top: var(--s-3); }
.research__note { font-size: var(--step--1); color: var(--ink-faint); margin-bottom: var(--s-4); }

/* Areas of investigation. The model system is separated onto its own line so
   it cannot be skimmed past, which is the whole point of stating it. */
.research__areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
  list-style: none;
  padding: 0;
}
.research-area {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
  align-content: start;
}
.research-area__title { font-weight: 600; font-size: var(--step-0); }
.research-area__body { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }
.research-area__findings,
.research-area__model {
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* The reported finding is the part someone came for, so it gets the emphasis.
   The model line directly beneath is what stops it being read as a claim. */
.research-area__findings { color: var(--ink); }
.research-area__findings .label { color: var(--accent); }
.research-area__model { color: var(--ink-faint); font-size: var(--step--2); }

/* References */
.research__refs { display: grid; gap: var(--s-4); counter-reset: ref; padding: 0; list-style: none; }
.research__refs li {
  display: grid;
  gap: var(--s-1);
  padding-left: var(--s-6);
  position: relative;
}
.research__refs li::before {
  counter-increment: ref;
  content: counter(ref);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  text-align: right;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.research-ref__title { font-size: var(--step--1); font-weight: 500; line-height: 1.45; }
.research-ref__meta { font-size: var(--step--2); color: var(--ink-faint); }
.research-ref__link { font-size: var(--step--2); justify-self: start; }

.research .notice { margin-top: var(--s-6); }