/* Individual teacher pages.

   Built on the site's page architecture rather than the article template: the
   name and role sit in the page head with the opening line of the biography
   beside them, and the portrait and the rest of the career sit below in two
   columns. */

.tm{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(34px,5vw,70px);
  align-items:start;max-width:1120px;margin:0 auto}
.tm-role{margin:0 0 10px;color:var(--p-quiet);font-size:11.5px;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase}

.tm-portrait{margin:0}
.tm-portrait img{display:block;width:100%;aspect-ratio:4 / 5;object-fit:cover;
  object-position:center top;border-radius:20px}

.tm-body{max-width:620px}
.tm-body p{margin:0 0 20px;color:var(--p-body);font-size:16.5px;line-height:1.72}

/* Credentials are a list, not prose: the source records them one short line
   each, and they read as a list on the page too. */
.tm-creds{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.tm-creds li{position:relative;padding-left:24px;color:var(--p-body);
  font-size:15.5px;line-height:1.5}
.tm-creds li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;
  border:1.5px solid var(--dance);border-radius:50%}

/* Shown inside the team modal, which the client asked to keep as the way a
   card opens. This is the only route from the modal to the full page. */
.tm-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  color:var(--p-ink);font-size:14px;font-weight:600;letter-spacing:.1px}
.tm-more i{font-size:.85rem;line-height:1}
.tm-more:hover,.tm-more:focus-visible{color:var(--dance)}

@media (max-width:900px){
  .tm{grid-template-columns:1fr}
  .tm-portrait{max-width:340px}
}