:root {
  --index-title-size: 1.125rem;
  --index-title-line: 1.55;
  --title-column: 16.5rem;
}

.build-link .title,
.research-link .title,
.notes .row .title {
  font-family: var(--mono);
  font-size: var(--index-title-size);
  font-weight: 400;
  line-height: var(--index-title-line);
  letter-spacing: -0.025em;
}

.collection-intro h3,
.notes h3,
.index > section > h2 {
  font: 400 0.8125rem/1.75rem var(--mono);
  color: var(--mute);
  letter-spacing: 0;
}

.collection-intro > p:not(.eyebrow),
.row .dek {
  font: 400 0.875rem/1.65 var(--mono);
  color: var(--mute);
}

.row.build-link,
.row.research-link {
  align-items: baseline;
}

.build-link .dek,
.research-link .dek {
  padding-top: 0;
}

.research-rows {
  gap: 1.125rem;
}

.project-status {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  background: var(--label-paper);
  color: var(--mute);
  font: 400 0.6875rem/1.5 var(--mono);
  letter-spacing: 0;
  vertical-align: 0.12em;
}

.notes h3 {
  margin-bottom: 0.5rem;
}

.notes .rows {
  gap: 0;
}

.notes a.row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.9rem;
  min-height: 44px;
  width: fit-content;
  max-width: 100%;
  padding: 0.4rem 0;
}

.notes a.row:not(.build-link):not(.research-link) .title::before {
  content: none;
}

.notes a.row .title {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.notes a.row::after,
a.research-link .title::after,
a.build-link .title::after {
  display: inline-block;
  font: 400 0.875rem/1 var(--mono);
  color: var(--arrow);
  transition: color 180ms ease, transform 180ms ease;
}

.notes a.row::after {
  content: "\2192";
  flex: 0 0 auto;
}

a.research-link .title::after,
a.build-link .title::after {
  content: "\2197";
  margin-left: 0.65rem;
}

a.row:hover .dek,
a.row:focus-visible .dek {
  color: var(--mute);
}

.notes a.row:hover::after,
.notes a.row:focus-visible::after,
a.research-link:hover .title::after,
a.research-link:focus-visible .title::after,
a.build-link:hover .title::after,
a.build-link:focus-visible .title::after {
  color: var(--orange);
  transform: translateX(2px);
}

.row:focus-visible {
  outline: 1px dotted var(--orange);
  outline-offset: 5px;
}

.health-startups-title {
  white-space: normal;
}

@media (min-width: 720px) {
  .index > section {
    align-items: baseline;
  }
}

@media (max-width: 719px) {
  .notes a.row {
    padding: 0.65rem 0;
  }
  .research-rows .row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0;
  }
  .research-rows {
    gap: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .notes a.row::after,
  a.research-link .title::after,
  a.build-link .title::after {
    transition: none;
  }
}

a.stratum-link .title::after { content: "→"; }