/* people.html: teachers. Portrait where a free licence exists, a plain card
   where it does not, because a missing photograph is better than a stolen one. */

.persons { display: grid; gap: clamp(2rem, 4vw, 3.4rem); margin-top: 2.6rem; }

.pers {
  display: grid; gap: clamp(1.1rem, 2.4vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
  padding-top: 1.8rem; border-top: 1px solid var(--rule-soft);
  scroll-margin-top: 5rem;
}
.pers:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 720px) { .pers { grid-template-columns: 220px 1fr; align-items: start; } }

.pers__fig { margin: 0; }
.pers__fig img {
  width: 100%; height: auto; display: block; border-radius: var(--r);
  border: 1px solid var(--rule-soft); background: var(--ground-2);
}
.pers__fig figcaption { margin-top: .5rem; font-size: .7rem; line-height: 1.45; color: var(--tx-faint); }
.pers__fig figcaption a { color: inherit; }

.pers__fig--none {
  aspect-ratio: 1 / 1; border-radius: var(--r);
  display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(163,32,15,.07), rgba(207,148,38,.12));
  border: 1px dashed rgba(42,18,13,.2);
}
.pers__fig--none span {
  font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  color: rgba(163,32,15,.42); letter-spacing: .04em;
}

.pers__name { margin: 0 0 .15em; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem); }
.pers__dates { font-size: .8rem; color: var(--tx-faint); letter-spacing: .04em; }
.pers__role {
  font-family: var(--f-display); color: var(--maroon);
  font-size: clamp(.98rem, .93rem + .3vw, 1.12rem); margin: .5rem 0 .9rem; max-width: 44ch;
}
.pers__text { font-size: .95rem; line-height: 1.7; max-width: 60ch; }
.pers__note {
  margin-top: .9rem; padding: .65rem .85rem; border-radius: 8px;
  background: rgba(28,111,102,.07); border-left: 3px solid var(--turquoise);
  font-size: .85rem; line-height: 1.6; color: var(--tx-soft); max-width: 60ch;
}
.pers__books { margin-top: 1.2rem; }
.pers__books h4 {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-faint); margin: 0 0 .4rem; font-weight: 600;
}
/* One book per line, never run together. */
.pers__books ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pers__books li {
  font-size: .89rem; line-height: 1.5; max-width: 58ch;
  padding-left: .9rem; position: relative;
}
.pers__books li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
}
.pers__series {
  margin: 0 0 .55rem; font-size: .84rem; line-height: 1.5;
  color: var(--tx-soft); font-style: italic; max-width: 56ch;
}
.pers__books a { color: var(--red); text-decoration: none; border-bottom: 1px solid rgba(163,32,15,.3); }
.pers__books a:hover { border-bottom-color: currentColor; }

.pers__links { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.1rem; }
.pers__links a {
  font-size: .85rem; color: var(--red); text-decoration: none;
  border-bottom: 1px solid rgba(163,32,15,.3); padding-bottom: 1px;
}
.pers__links a:hover { border-bottom-color: currentColor; }