/* About: affiliation rail beside the prose, plus the keyword row. */

.about-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2rem;
}
.about-grid .col-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); }
.about-prose {
  max-width: 64ch;
  color: var(--ink-soft);
}
.about-prose p { margin: 0 0 1.2em; }
.about-prose strong { color: var(--ink); font-weight: 500; }
/* Prose links point at papers/labs — give them a visible affordance. */
.about-prose a { border-bottom: 1px solid var(--rule); }
.about-prose a:hover { color: var(--accent); border-color: var(--accent); }

.pull-quote {
  margin: 2.25rem 0 0;
  padding: 1.5rem 0 1.5rem 1.75rem;
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--ink);
  max-width: 50ch;
}

.keyword-row {
  margin-top: 2.25rem;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.kw {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .4rem .7rem;
  /* Accent, not --rule: these are the only pills on the page that name the
     research itself, so they carry the theme colour rather than a neutral
     hairline. Border only — the label stays --ink-soft so five of them in a row
     read as a set of tags, not as five links. */
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--ink-soft);
}


@media (max-width: 820px) {
  /* Single column: the affiliation meta repeats the first line of the prose, so drop it. */
  .about-grid { grid-template-columns: 1fr; gap: .75rem; }
  .about-grid .col-meta { display: none; }
}