/* Scase /links/ — independent of the institutional site's motion and layout. */
:root {
  --bio-ink: #141414;
  --bio-night: #0b0b0b;
  --bio-paper: #f2f2ee;
  --bio-green: #09ea6b;
  --bio-soft: #b9b9b3;
  --bio-muted: #4a4a46;
  --bio-line: #d1d1cb;
  --bio-font: 'Archivo', system-ui, sans-serif;
  --bio-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

.bio-page {
  margin: 0;
  padding: 20px;
  background: var(--bio-ink);
  color: var(--bio-paper);
  font-family: var(--bio-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.bio-shell { width: 100%; max-width: 560px; margin-inline: auto; }
.bio-shell:focus { outline: none; }
.bio-page a { color: inherit; text-decoration: none; }
.bio-page a:focus-visible { outline: 3px solid var(--bio-green); outline-offset: 5px; }
.bio-page p, .bio-page h1 { margin: 0; }

.bio-skip {
  position: absolute;
  top: 12px;
  left: 20px;
  z-index: 5;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--bio-paper);
  color: var(--bio-ink) !important;
  transform: translateY(calc(-100% - 20px));
}
.bio-skip:focus { transform: none; }

.bio-hero {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  background: var(--bio-night) url('/assets/img/hero-2.webp') 72% center / cover no-repeat;
}
.bio-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(11 11 11 / .76), rgb(11 11 11 / .86) 55%, #0b0b0b);
}
.bio-hero__content { padding: 28px 24px 26px; }
.bio-logo { display: block; width: 140px; max-width: 100%; height: auto; margin-bottom: 40px; }
.bio-eyebrow {
  max-width: 32ch;
  color: var(--bio-soft);
  font-family: var(--bio-mono);
  font-size: 12px;
  line-height: 1.7;
  text-transform: uppercase;
}
.bio-page .bio-title {
  margin-top: 16px;
  max-width: 18ch;
  font-size: clamp(32px, 8.2vw, 44px);
  line-height: 1.06;
  letter-spacing: -.045em;
  font-weight: 800;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.bio-title span { color: var(--bio-green); }
.bio-page .bio-description { margin-top: 18px; max-width: 33ch; color: var(--bio-paper); }
.bio-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  margin-top: 28px;
  padding: 15px 22px;
  border-radius: 999px;
  background: var(--bio-green);
  color: var(--bio-ink) !important;
  font-weight: 700;
  transition: background-color .18s ease;
}
.bio-arrow { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .18s ease; }
.bio-page .bio-cta-note { margin-top: 12px; font-size: 12px; color: var(--bio-soft); }

.bio-links { margin-top: 12px; padding-inline: 24px; border-radius: 16px; background: var(--bio-paper); color: var(--bio-ink); }
.bio-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 96px; padding-block: 24px; }
.bio-link + .bio-link { border-top: 1px solid var(--bio-line); }
.bio-link__copy { display: grid; gap: 5px; min-width: 0; }
.bio-link__title { font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
.bio-link__description { color: var(--bio-muted); font-size: 14px; line-height: 1.5; }
.bio-links .bio-link:focus-visible { outline-color: var(--bio-ink); outline-offset: 4px; border-radius: 2px; }
.bio-footer { padding-top: 12px; }
.bio-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 24px; }
.bio-social a { display: inline-flex; align-items: center; min-height: 48px; color: var(--bio-soft); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; transition: color .18s ease; }

@media (hover: hover) {
  .bio-cta:hover { background: #45f28f; }
  .bio-cta:hover .bio-arrow, .bio-link:hover .bio-arrow { transform: translateX(3px); }
  .bio-link:hover .bio-link__title { text-decoration: underline; text-underline-offset: 4px; }
  .bio-social a:hover { color: var(--bio-paper); }
}
.bio-cta:active { background: #45f28f; }

@media (min-width: 600px) {
  .bio-page { padding: 40px; }
  .bio-hero__content { padding: 36px 36px 30px; }
  .bio-logo { margin-bottom: 48px; }
  .bio-eyebrow { max-width: none; }
  .bio-links { padding-inline: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .bio-page *, .bio-page *::before, .bio-page *::after { transition: none; }
  .bio-cta:hover .bio-arrow, .bio-link:hover .bio-arrow { transform: none; }
}