/* Coleman's profile. The top of it is a card a person can act on from a phone at a conference: who,
   what he works on, what he is funded for, and the things to tap. Every word and number is the CV's
   own (resume/resume.html). Immaculate on a phone: one line wherever it fits, and even gaps. */

/* The eyebrow has the whole width above the photo; the name sits beside the photo; the role is one
   line under both. */
.pf-hero .pf-eyebrow{margin:0 0 .95rem;font-size:.62rem;letter-spacing:.14em}
.pf-top{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(.9rem,4vw,1.6rem)}
.pf-photo{display:block;width:clamp(5.5rem,24vw,8.5rem);height:auto;aspect-ratio:1;border-radius:50%;
  object-fit:cover;flex:none;
  box-shadow:0 0 0 2px rgba(255,180,84,.85),0 0 0 7px rgba(255,122,26,.16),0 0 54px rgba(255,122,26,.45)}
.pf-id{flex:1 1 auto;min-width:0}
.pf-hero h1{font-size:clamp(1.9rem,8vw,3.4rem);line-height:1.02;margin:0;overflow-wrap:break-word}
.pf-hero .pf-role{margin:.85rem 0 0;color:var(--muted);font-size:clamp(.84rem,3.6vw,1.02rem);line-height:1.45}

.pf-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:.95rem 0 0;padding:0;list-style:none}
.pf-badges li{font:600 .78rem/1.25 var(--sans);color:#FFE2B8;background:rgba(255,122,26,.12);
  border:1px solid rgba(255,150,60,.45);border-radius:999px;padding:.42rem .78rem}

.pf-hero .pf-lede{margin:.95rem 0 0;font-size:clamp(.95rem,3.8vw,1.15rem);max-width:40rem}

.pf-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.05rem 0 0}
.pf-actions .btn{flex:1 1 11rem;justify-content:center;text-align:center}
@media (min-width:52rem){.pf-actions .btn{flex:0 0 auto}}

.pf-links{display:flex;flex-wrap:wrap;gap:0 1.3rem;margin:.35rem 0 0;font-size:.88rem;color:var(--muted)}
.pf-links a{color:var(--flare);font-weight:600;text-decoration:none;min-height:2.75rem;
  display:inline-flex;align-items:center;overflow-wrap:anywhere;min-width:0}
.pf-links a:hover{color:var(--glow);text-decoration:underline}

.pf-more{font-weight:600}
[hidden]{display:none!important}

/* Sections: the same rhythm everywhere, and no long fade between the dark top and the first one. */
.pf-page section{padding:2.5rem 0}
.pf-page .hero-sm.pf-hero{padding-bottom:3.25rem}
.pf-page .hero + section{padding-top:1.9rem}
.pf-page .section-tag{margin-bottom:.55rem}
.pf-page .facts{margin-top:.55rem}
.pf-page .facts li{padding:.8rem 0;gap:.2rem}
.pf-page .facts li strong{display:block}
/* one rule between sections, not two: a list's last line is the section's border */
.pf-page .facts li:last-child{border-bottom:0}
.pf-page .grid{margin-top:.85rem;gap:.9rem}
.pf-page .card .facts{margin-top:.45rem}
.pf-page .card h3{margin:.35rem 0 .15rem}

@media (max-width:640px){
  .pf-page section{padding:1.7rem 0}
  .pf-page .hero-sm.pf-hero{padding-bottom:2.5rem}
  .pf-page .hero + section{padding-top:1.4rem}
  /* the hero's two buttons share a row; a list's title keeps to one line where it can */
  .pf-actions .btn{flex:1 1 8.5rem;min-width:0;padding-left:.8rem;padding-right:.8rem}
  .pf-page .facts li strong{font-size:.93rem}
  /* and so do the three at the foot, rather than two and one left over */
  .pf-page .actions{gap:.5rem}
  .pf-page .actions .btn{flex:1 1 auto;min-width:0;padding-left:.8rem;padding-right:.8rem}
}

/* The research and award cards: padding in rem ate the card at 320 px with the text doubled, so on a
   narrow screen it is smaller, and a long word may break rather than be cut off. */
@media (max-width:620px){
  .pf-page .grid{grid-template-columns:minmax(0,1fr)}
  .pf-page .card{padding:1.15rem 1.2rem;overflow-wrap:anywhere}
}

/* A list whose titles are long (the degrees), and every list inside a card, reads title then detail,
   one above the other, at every width: beside each other they were squeezed into a narrow column. */
.pf-page .pf-stack li,.pf-page .card .facts li{grid-template-columns:minmax(0,1fr)}
/* Three research cards in two columns: the third takes the whole row rather than leaving a hole. */
@media (min-width:621px) and (max-width:1000px){
  .pf-page .pf-research > :last-child:nth-child(odd){grid-column:1 / -1}
}
/* the buttons under the cards stand off them, as they do under a paragraph */
.pf-page .grid + .actions{margin-top:1.25rem}