/* co-chairs.css: the two co-chair portraits on About the Summit (/summit/, a
   study page carrying its own tokens: --ink, --ink-soft, --ink-faint, --accent,
   --rule, --far, --sc-font-*) and the biographies page (/summit/co-chairs/, a
   document page on theme.css: --ink, --ink-soft, --gold-deep, --line, --paper-2,
   --serif via --sc-font-display, --read). Every colour is named with the study
   token first and the document token as fallback, so one file serves both pages
   and follows the light and dark theme on each. */

/* ---- the block on About the Summit ---- */
.hosts__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}
.host { display: grid; gap: .55rem; align-content: start; }
.host__card { display: grid; gap: .5rem; text-decoration: none; color: inherit; }
.host__frame {
  display: block; overflow: clip; aspect-ratio: 4 / 5;
  border: 1px solid var(--rule, var(--line, #ded3c1));
  background: var(--far, var(--paper-2, #f2ebde));
  transition: border-color 220ms ease;
}
/* Both portraits in black and white until Bart's arrives in the same style as
   Elegast's: the deck photo of Bart is a black-and-white lectern shot. Remove
   the filter on both lines to show the supplied photographs as they are. */
.host__frame img, .person__fig img {
  display: block; width: 100%; height: 100%; object-fit: cover; border: 0;
  filter: grayscale(1);
}
.host__name {
  font-family: var(--sc-font-display, Georgia, serif); font-weight: 400;
  font-size: clamp(1.1rem, .95rem + .55vw, 1.4rem); line-height: 1.2; color: var(--ink);
  min-height: 2.4em; /* two lines, so the role and link of both cards sit level when one name wraps */
}
.host__role {
  font-family: var(--sc-font-text, system-ui, sans-serif); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent, var(--gold-deep));
}
.host__more, .host__li {
  justify-self: start; font-family: var(--sc-font-text, system-ui, sans-serif); font-size: .95rem;
  color: var(--ink-faint, var(--ink-soft)); text-decoration: none;
  border-bottom: 1px solid var(--rule-lit, var(--line)); padding-bottom: .05em;
  transition: color 160ms ease, border-color 160ms ease;
}
.host__more::after { content: " \2192"; }
.host__card:hover .host__more, .host__card:focus-visible .host__more, .host__li:hover, .host__li:focus-visible {
  color: var(--accent, var(--gold-deep)); border-bottom-color: currentColor;
}
.host__card:hover .host__frame, .host__card:focus-visible .host__frame { border-color: var(--accent, var(--gold-deep)); }
.host__card:focus-visible { outline: 2px solid var(--accent, var(--gold-deep)); outline-offset: 4px; }
@media (max-width: 30rem) { .hosts__list { grid-template-columns: minmax(0, 1fr); max-width: 18rem; } .host__name { min-height: 0; } }

/* ---- the biographies page ---- */
.person {
  display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start;
  padding-top: clamp(1.4rem, 3vh, 2.2rem); border-top: 1px solid var(--line);
}
.person__fig {
  margin: 0; overflow: clip; aspect-ratio: 4 / 5; border: 1px solid var(--line); background: var(--paper-2);
  position: sticky; top: 5.5rem;
}
.person__body { display: grid; gap: 1rem; }
.doc__body .person__body h2 { margin-top: 0; max-width: none; }
.person__body p { margin: 0; max-width: var(--read); }
.person__role { font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.35; color: var(--ink-soft); }
.person__links { margin-top: -.2rem; }
.person__quote {
  margin: .4rem 0 0; padding: .1rem 0 .1rem 1.1rem; border-left: 2px solid var(--gold-deep);
}
.person__quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); line-height: 1.35; color: var(--ink-soft); }
@media (max-width: 40rem) {
  .person { grid-template-columns: minmax(0, 1fr); }
  .person__fig { position: static; max-width: 13rem; }
}
@media (prefers-reduced-motion: reduce) {
  .host__frame, .host__more, .host__li { transition: none; }
}