/* team-bio — biography dialog shared by the Investor Hub and About pages (inc/team.php + team-bio.js).
   Dark ink panel with the hatched red edge over a frosted, dimmed page; fixed header, scrolling body. */
.tb-bio__hat {
  display: inline-block;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 7px 4px;
  border: 1px solid rgba(245, 246, 248, 0.28);
  color: rgba(245, 246, 248, 0.7);
}
.tb-bio__hat--board { border-color: rgba(245, 246, 248, 0.7); color: #FFFFFF; }
/* Biography dialog: dark ink panel with the hatched red edge, over a frosted, dimmed page. */
.tb-bio { position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content; max-width: 100vw; max-height: 100vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.tb-bio::backdrop { background: rgba(11, 15, 22, 0.58); backdrop-filter: blur(14px) saturate(0.85); -webkit-backdrop-filter: blur(14px) saturate(0.85); }
.tb-bio[open] { display: block; }
.tb-bio__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 48px));
  max-height: min(84vh, 860px);
  max-height: min(84dvh, 860px);
  overflow: hidden;
  background: #0B0F16;
  color: rgba(245, 246, 248, 0.86);
  padding: 44px 48px 40px 52px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tb-bio__panel::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(45deg, #C42800 0, #C42800 1.5px, transparent 1.5px, transparent 5px);
}
.tb-bio__close {
  position: absolute;
  top: 18px; right: 20px;
  appearance: none;
  border: 1px solid rgba(245, 246, 248, 0.22);
  background: transparent;
  color: rgba(245, 246, 248, 0.8);
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 11px;
  cursor: pointer;
}
.tb-bio__close:hover, .tb-bio__close:focus-visible { border-color: #C42800; color: #FFFFFF; outline: none; }
.tb-bio__head { flex: 0 0 auto; display: flex; gap: 24px; align-items: flex-end; margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(245, 246, 248, 0.14); }
.tb-bio__photo {
  flex-shrink: 0;
  width: 112px; height: 140px;
  background: rgba(245, 246, 248, 0.08) center top / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; letter-spacing: 0.08em; color: rgba(245, 246, 248, 0.5);
}
.tb-bio__hats { display: flex; gap: 6px; margin-bottom: 12px; }
.tb-bio__hats .tb-bio__hat { border-color: rgba(245, 246, 248, 0.28); color: rgba(245, 246, 248, 0.7); }
.tb-bio__hats .tb-bio__hat--board { border-color: rgba(245, 246, 248, 0.7); color: #FFFFFF; }
.tb-bio__name { margin: 0; font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif; font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; color: #FFFFFF; }
.tb-bio__role { display: block; margin-top: 8px; font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #E8552E; }
.tb-bio__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: 12px; padding-bottom: 8px; font-size: 15.5px; line-height: 1.7; max-width: 64ch; scrollbar-width: thin; scrollbar-color: rgba(245,246,248,0.28) transparent; }
.tb-bio__body::-webkit-scrollbar { width: 6px; }
.tb-bio__body::-webkit-scrollbar-thumb { background: rgba(245, 246, 248, 0.28); }
.tb-bio__body::-webkit-scrollbar-track { background: transparent; }
.tb-bio__body p { margin: 0 0 16px; }
.tb-bio__body p:last-child { margin-bottom: 0; }
.tb-bio--in .tb-bio__panel { animation: tb-bio-in 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes tb-bio-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.tb-bio-open { overflow: hidden; }
@media (max-width: 640px) {
  .tb-bio__panel { width: calc(100vw - 24px); max-height: 88vh; max-height: 88dvh; padding: 56px 20px 24px 26px; }
  .tb-bio__body { padding-right: 8px; }
  .tb-bio__close { top: 12px; right: 12px; }
  .tb-bio__head { gap: 16px; align-items: flex-start; }
  .tb-bio__photo { width: 84px; height: 105px; }
  .tb-bio__name { font-size: 24px; }
  .tb-bio__body { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-bio--in .tb-bio__panel { animation: none; }
  .tb-bio::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(11, 15, 22, 0.8); }
}

/* About page register rows: the name itself opens the biography. Reset the button to the row's type;
   on hover/focus the name takes a faint ink underline and a dim mono "BIO" hint fades in beside it.
   No hover on touch screens, so the hint sits there quietly all the time. */
.ab__person-name--bio {
  appearance: none;
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer; /* type comes from .ab__person-name (about-grid.css) */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color 160ms ease;
}
.ab__person-name--bio::after {
  content: 'Bio';
  display: inline-block;
  margin-left: 12px;
  vertical-align: 2px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 26, 38, 0.45);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.ab__person-name--bio:hover,
.ab__person-name--bio:focus-visible { text-decoration-color: rgba(20, 26, 38, 0.35); outline: none; }
.ab__person-name--bio:hover::after,
.ab__person-name--bio:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) {
  .ab__person-name--bio::after { opacity: 0.7; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ab__person-name--bio, .ab__person-name--bio::after { transition: none; }
}
.ab__person-bio-text[hidden] { display: none; }