/* ══════════════════════════════════════════════════════════ bio dialog
   The two co-chair cards on /summit/ used to send the reader to
   /summit/co-chairs/, which meant leaving About the Summit half read and
   finding the way back to it. The bio now opens over the page and closes
   on an X, so the reader carries on from the paragraph they were in.

   The page underneath is a ScrollCraft study with scroll-driven acts, so
   nothing here touches the document's scroll: the dialog scrolls inside
   itself and `overscroll-behavior: contain` keeps that scroll from
   chaining to the page behind it. Closing therefore lands the reader
   exactly where opening found them.

   Every colour is one of the study's own tokens, so the panel flips with
   the page's light and dark themes without restating a single value. */

.bio {
  /* The top layer ignores z-index, so this needs no number of its own. */
  width: min(62rem, 92vw);
  max-width: none;
  max-height: min(86dvh, 56rem);
  padding: 0;
  border: 1px solid var(--rule-lit);
  background: var(--far);
  color: var(--ink);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, .45);
  overflow: hidden;               /* the corners clip the scrolling body */
}
.bio::backdrop { background: rgba(8, 6, 4, .62); backdrop-filter: blur(2px); }
:root[data-theme="light"] .bio::backdrop { background: rgba(27, 23, 18, .44); }

.bio[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }

/* ── the head, which stays while the bio scrolls ─────────────────────── */
.bio__head {
  display: flex; align-items: start; gap: 1rem;
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 4vw, 2.2rem);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.bio__names { display: grid; gap: .15rem; min-width: 0; }
.bio__h {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  line-height: 1.15;
  color: var(--ink);
}
.bio__role {
  margin: 0;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
/* The name is the reader's way to LinkedIn on the co-chairs page, and it
   keeps that here: heading colour, gold underline, full gold on hover. */
.bio__h a { color: inherit; text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: .12em;
  text-decoration-thickness: 1px; }
.bio__h a:hover, .bio__h a:focus-visible { color: var(--accent-hi); text-decoration-color: currentColor; }

/* The lifted heading carries a `.sr-only` span, "on LinkedIn (opens in a new
   tab)", which the co-chairs page hides with theme.css. This study does not
   load theme.css, so without this the whole span read out loud in the
   heading. Same rule, stated where the content lands. */
.bio .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── the X ────────────────────────────────────────────────────────────
   44px square: the control the whole feature was asked for should not be
   a target the thumb can miss. */
.bio__x {
  margin-left: auto; flex: none;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--rule-lit); border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.bio__x:hover { color: var(--ink); border-color: var(--accent); background: var(--field); }
.bio__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bio__x::before, .bio__x::after {
  content: ""; position: absolute; width: 1.05rem; height: 1px; background: currentColor;
}
.bio__x { position: relative; }
.bio__x::before { transform: rotate(45deg); }
.bio__x::after  { transform: rotate(-45deg); }

/* ── the bio itself ──────────────────────────────────────────────────── */
.bio__body {
  overflow: auto;
  overscroll-behavior: contain;   /* the page behind does not move */
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.2rem, 4vw, 2.2rem);
}
/* This page already loads co-chairs.css for the two cards, so the article
   arrives carrying rules written for a document page: a top border and a
   sticky figure, both on tokens (--line, --paper-2) that theme.css defines
   and this study does not, which resolves them to currentColor. Every one
   of those is restated here rather than left to fall through. */
.bio .person {
  display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  gap: clamp(1.1rem, 3vw, 2.2rem); align-items: start;
  padding-top: 0; border-top: 0;
}
.bio .person__fig {
  position: static;
  margin: 0; overflow: clip; aspect-ratio: 4 / 5;
  border: 1px solid var(--rule); background: var(--surface);
}
.bio .person__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bio .person__body { display: grid; gap: 1rem; }
.bio .person__body p { margin: 0; max-width: 42rem; color: var(--ink-faint); }
.bio .person__quote {
  margin: .4rem 0 0; padding: .1rem 0 .1rem 1.1rem; border-left: 2px solid var(--accent);
}
.bio .person__quote p {
  font-family: var(--sc-font-display); font-style: italic;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.4; color: var(--ink-soft);
}

/* ── the phone ───────────────────────────────────────────────────────── */
@media (max-width: 46rem) {
  .bio { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto auto 0; border-width: 1px 0 0; }
  .bio .person { grid-template-columns: minmax(0, 1fr); }
  .bio .person__fig { max-width: 11rem; }
}

/* ── motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .bio[open] { animation: bio-in .22s cubic-bezier(.2,.7,.2,1); }
  @keyframes bio-in { from { opacity: 0; transform: translateY(.75rem); } }
}