/* RESTORE Lab — website v2: off-template design system.
   Demonstrates what's possible when not constrained by the SSFlex
   Penn Medicine template. Keeps the same color palette and font
   pairing as v1 but applies them more confidently — bigger display
   type, asymmetric layouts, sticky integrated header, bespoke heroes,
   subtle motion, dark-mode-ready tokens. */

:root {
  /* Surfaces */
  --bg: #FBFBF8;
  --bg-soft: #F2F0EA;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FAF8F2;
  --bg-warm: #F8E9DC;
  --bg-sage: #EAF1ED;
  --bg-sky: #E8F1F6;
  --bg-cream: #FBF5EB;

  /* Foregrounds */
  --fg: #1F2A33;
  --fg-soft: #4A5660;
  --fg-mute: #8C969E;
  --line: #E5E1D6;
  --line-soft: #EFECE2;

  /* Brand accents (unchanged from v1) */
  --accent: #37AAE1;
  --accent-deep: #1F6F94;
  --accent-darker: #0F4865;
  --accent-soft: #DBEFF9;
  --peach: #E8B89F;
  --peach-deep: #C58867;
  --sage: #9BB196;
  --sage-deep: #6F8B6A;
  --penn-navy: #011F5B;

  /* Spacing scale */
  --gutter: 32px;
  --gutter-sm: 18px;
  --gutter-lg: 56px;
  --gutter-xl: 96px;

  /* Type scale */
  --type-display: clamp(48px, 6.6vw, 92px);
  --type-h1: clamp(36px, 4.6vw, 60px);
  --type-h2: clamp(28px, 3.4vw, 42px);
  --type-h3: 22px;
  --type-body: 17px;
  --type-small: 14.5px;
  --type-mono: 11.5px;

  /* Header */
  --header-h: 64px;
  --header-bg: rgba(255, 255, 255, 0.92);

  /* Effects */
  --shadow-card: 0 12px 28px -16px rgba(31, 42, 51, 0.16);
  --shadow-card-hover: 0 18px 40px -20px rgba(31, 42, 51, 0.22);
  --radius-card: 16px;
  --radius-pill: 100px;
  --transition-default: 0.22s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Dark mode — uses v1's slate-warm character (the footer's #1F2A33) as the
   page background, with a slightly lighter slate for cards and warm tints
   for the cream/peach/sage variants. Auto-detects via prefers-color-scheme;
   manual toggle uses [data-theme="dark"]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1F2A33;
    --bg-soft: #2A3340;
    --bg-card: #2A3340;
    --bg-card-hover: #34404D;
    --bg-warm: #3A2E25;
    --bg-sage: #25302A;
    --bg-sky: #1F2C36;
    --bg-cream: #332A20;
    --fg: #FBFBF8;
    --fg-soft: #C4C8CC;
    --fg-mute: #7A858F;
    --line: #3A4754;
    --line-soft: #2A3340;
    --header-bg: rgba(31, 42, 51, 0.88);
    --accent-soft: rgba(55, 170, 225, 0.20);
    --shadow-card: 0 12px 28px -16px rgba(0, 0, 0, 0.55);
    --shadow-card-hover: 0 18px 40px -20px rgba(0, 0, 0, 0.65);
  }
}
[data-theme="dark"] {
  --bg: #1F2A33;
  --bg-soft: #2A3340;
  --bg-card: #2A3340;
  --bg-card-hover: #34404D;
  --bg-warm: #3A2E25;
  --bg-sage: #25302A;
  --bg-sky: #1F2C36;
  --bg-cream: #332A20;
  --fg: #FBFBF8;
  --fg-soft: #C4C8CC;
  --fg-mute: #7A858F;
  --line: #3A4754;
  --line-soft: #2A3340;
  --header-bg: rgba(31, 42, 51, 0.88);
  --accent-soft: rgba(55, 170, 225, 0.20);
  --shadow-card: 0 12px 28px -16px rgba(0, 0, 0, 0.55);
  --shadow-card-hover: 0 18px 40px -20px rgba(0, 0, 0, 0.65);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.65;
  font-size: var(--type-body);
}

a { color: var(--accent-deep); text-decoration: none; transition: color var(--transition-default); }
a:hover { color: var(--fg); }
img { max-width: 100%; height: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fg);
  color: var(--bg);
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 8px 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.skip-link:focus { left: 0; }

/* ===== INTEGRATED HEADER ===== */
/* Single sticky row replacing v1's affiliation-bar + penn-topbar +
   penn-header three-row stack. ~80 px above-the-fold reclaimed. */
.v2-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  /* gap: 0 — affiliation logos use `margin: 0 auto` to center themselves
     in the leftover row space (see .aff-logo below). A uniform gap would
     fight with that; we want symmetric distribution, not fixed spacing. */
  gap: 0;
  padding: 10px var(--gutter);
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.v2-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.v2-header .brand .lab-mark {
  height: 30px;
  width: auto;
}
.v2-header .brand .name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.3px;
  color: var(--fg);
  line-height: 1;
}
.v2-header .brand .sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--fg-mute);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-top: 4px;
}
.v2-header nav.primary {
  /* Shrink-wrap to its anchors so "Patients" hugs the nav's left edge
     and "Glossary" the right. Without this, the nav would stretch to
     fill the row and the logos would not appear centered between
     brand→Patients or Glossary→theme-toggle. */
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  row-gap: 4px;
  min-width: 0;
  flex-shrink: 1;
}
.v2-header nav.primary a {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--fg-soft);
  padding: 6px 9px;
  border-radius: var(--radius-pill);
  transition: background var(--transition-default), color var(--transition-default);
  white-space: nowrap;
  flex-shrink: 0;
}
.v2-header nav.primary a:hover { background: var(--bg-soft); color: var(--fg); }
.v2-header nav.primary a.active { background: var(--accent-soft); color: var(--accent-deep); }
/* Affiliation logos flank the primary nav: Penn before "Patients",
   Penn Medicine after "Glossary". `margin: 0 auto` on each absorbs the
   row's leftover space symmetrically — the four auto-margins (Penn-L,
   Penn-R, PennMed-L, PennMed-R) split the slack equally, so Penn lands
   at the geometric midpoint of brand→nav and Penn Medicine lands at
   the midpoint of nav→theme-toggle. */
.v2-header .aff-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity var(--transition-default);
  margin-left: auto;
  margin-right: auto;
}
.v2-header .aff-logo:hover { opacity: 1; }
.v2-header .aff-logo img {
  height: 28px;
  width: auto;
  display: block;
}
/* Dark-mode logo treatments — split into two strategies:

   1) The lab mark + lab logo invert+hue-rotate cleanly because they're
      monochrome dark slate + cyan; the filter preserves the cyan chip
      identity through the brightness flip. (V1 footer technique.)

   2) The Penn / Penn Medicine logos use Penn's red + navy palette and
      get muddy under filter inversion. So they SWAP to dedicated white
      variants (penn-logo-white.png / pennmed-logo-white.png) via the
      CSS `content: url()` mechanism, with `filter: none` to override
      any inherited filter. The white variants are flat-white silhouettes
      with the original alpha mask preserved — the same shape Penn's own
      "white" / "reverse" brand variants use for dark-background placement. */

[data-theme="dark"] .v2-header .brand .lab-mark,
[data-theme="dark"] .v2-footer .ftr-grid .brand-col img.lab-logo {
  filter: invert(0.92) hue-rotate(180deg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v2-header .brand .lab-mark,
  :root:not([data-theme="light"]) .v2-footer .ftr-grid .brand-col img.lab-logo {
    filter: invert(0.92) hue-rotate(180deg);
  }
}

/* Penn / Penn Medicine logo swap — match by parent <a> href attribute,
   not by image src, so the rule survives any future relative-path changes
   on the source images. */
[data-theme="dark"] .v2-header a[href*="upenn.edu"] img {
  content: url(penn-logo-white.png);
  filter: none;
}
[data-theme="dark"] .v2-header a[href*="pennmedicine.org"] img {
  content: url(pennmed-logo-white.png);
  filter: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v2-header a[href*="upenn.edu"] img {
    content: url(penn-logo-white.png);
    filter: none;
  }
  :root:not([data-theme="light"]) .v2-header a[href*="pennmedicine.org"] img {
    content: url(pennmed-logo-white.png);
    filter: none;
  }
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-soft);
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background var(--transition-default), color var(--transition-default), border-color var(--transition-default);
}
.theme-toggle:hover { background: var(--bg-soft); color: var(--fg); border-color: var(--accent); }

/* ===== CONTAINERS ===== */
.wrap { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding-inline: var(--gutter); }

/* ===== HERO — animated waveform under display headline ===== */
.hero-home {
  position: relative;
  padding: 88px 0 96px;
  overflow: hidden;
}
.hero-home .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: var(--gutter-lg);
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-home .eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: var(--type-mono);
  letter-spacing: 0.7px;
  color: var(--accent-deep);
  background: var(--accent-soft);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-home h1 {
  font-family: 'Manrope', sans-serif;
  font-weight: 200;
  font-size: var(--type-display);
  line-height: 1.02;
  letter-spacing: -2.4px;
  color: var(--fg);
  margin-bottom: 24px;
  max-width: 16ch;
}
.hero-home h1 em {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent-deep);
}
.hero-home .lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 52ch;
  margin-bottom: 32px;
}
.hero-home .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform var(--transition-default), box-shadow var(--transition-default), background var(--transition-default);
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  box-shadow: 0 14px 28px -12px rgba(31, 111, 148, 0.55);
  color: var(--bg);
}
.btn-secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
}
.btn-secondary:hover {
  border-color: var(--accent-deep);
  color: var(--accent-deep);
  transform: translateY(-1px);
}

/* Animated waveform layered behind the hero text — subtle ambient motion. */
.hero-waveform {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.42;
}
.hero-waveform svg { width: 100%; height: 100%; }
.hero-waveform path { fill: none; stroke: var(--accent); stroke-width: 1; }
.hero-waveform path.layer-1 { stroke-dasharray: 5000; stroke-dashoffset: 5000; animation: trace-draw 12s ease-out forwards, drift-1 18s linear 12s infinite; opacity: 0.7; }
.hero-waveform path.layer-2 { stroke: var(--peach); stroke-dasharray: 5000; stroke-dashoffset: 5000; animation: trace-draw 14s 2s ease-out forwards, drift-2 22s linear 16s infinite; opacity: 0.5; stroke-width: 0.8; }
.hero-waveform path.layer-3 { stroke: var(--sage); stroke-dasharray: 5000; stroke-dashoffset: 5000; animation: trace-draw 16s 4s ease-out forwards, drift-1 26s linear 20s infinite; opacity: 0.4; stroke-width: 0.7; }

@keyframes trace-draw { to { stroke-dashoffset: 0; } }
@keyframes drift-1 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-24px); } }
@keyframes drift-2 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } }

@media (prefers-reduced-motion: reduce) {
  .hero-waveform path { animation: none; stroke-dashoffset: 0; }
}

/* ===== HERO RIGHT-SIDE GLYPH STACK ===== */
.hero-glyph-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}
.hero-glyph-stack .glyph-tile {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-decoration: none;
  transition: transform var(--transition-default), box-shadow var(--transition-default), border-color var(--transition-default);
}
.hero-glyph-stack .glyph-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--accent);
}
.hero-glyph-stack .glyph-tile img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.hero-glyph-stack .glyph-tile .meta { flex: 1; }
.hero-glyph-stack .glyph-tile .meta .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--peach-deep);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.hero-glyph-stack .glyph-tile .meta .name {
  font-family: 'Lora', serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--fg);
  line-height: 1.2;
  letter-spacing: -0.2px;
}
.hero-glyph-stack .glyph-tile .meta .arrow {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--accent-deep);
  font-weight: 600;
}

/* ===== SECTION ===== */
.section {
  padding: 72px 0;
  border-top: 1px solid var(--line-soft);
}
.section .eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: var(--type-mono);
  letter-spacing: 0.7px;
  color: var(--peach-deep);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section h2 {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: var(--type-h2);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--fg);
  margin-bottom: 18px;
  max-width: 22ch;
}
.section h2 em {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent-deep);
}
.section .lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 60ch;
}

/* ===== PILLARS — three research areas ===== */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.pillar {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px 28px 32px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform var(--transition-default), box-shadow var(--transition-default), border-color var(--transition-default);
  border-left: 4px solid var(--accent);
}
.pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-left-color: var(--accent-deep);
}
.pillar.is-movement { border-left-color: var(--peach); }
.pillar.is-movement:hover { border-left-color: var(--peach-deep); }
.pillar.is-epilepsy { border-left-color: var(--accent); }
.pillar.is-epilepsy:hover { border-left-color: var(--accent-deep); }
.pillar.is-pain { border-left-color: var(--sage); }
.pillar.is-pain:hover { border-left-color: var(--sage-deep); }
.pillar .glyph {
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
}
.pillar .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--peach-deep);
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.pillar h3 {
  font-family: 'Lora', serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--fg);
  letter-spacing: -0.3px;
  line-height: 1.18;
  margin-bottom: 10px;
}
.pillar p {
  color: var(--fg-soft);
  font-size: 15.5px;
  line-height: 1.6;
  margin-bottom: 14px;
  flex: 1;
}
.pillar .arrow {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent-deep);
  margin-top: auto;
}

/* ===== AUDIENCE ROUTER ===== */
.aud-router {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 32px;
}
.aud-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px 32px 36px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-default), box-shadow var(--transition-default);
  border-left: 5px solid var(--peach);
}
.aud-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.aud-card.is-research { border-left-color: var(--accent-deep); }
.aud-card .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--peach-deep);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.aud-card.is-research .eyebrow { color: var(--accent-deep); }
.aud-card h3 {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--fg);
  margin-bottom: 12px;
  letter-spacing: -0.4px;
  line-height: 1.18;
}
.aud-card p {
  color: var(--fg-soft);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.aud-card .cta {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--peach-deep);
}
.aud-card.is-research .cta { color: var(--accent-deep); }

/* ===== RESEARCH PAGE — asymmetric thread layout ===== */
.thread {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--gutter-lg);
  padding: 56px 0;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.thread:first-of-type { border-top: 0; padding-top: 32px; }
.thread .glyph-col {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.thread .glyph-col img {
  width: 100%;
  max-width: 220px;
  display: block;
}
.thread .glyph-col .label {
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--peach-deep);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.thread h2 {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--fg);
  margin-bottom: 14px;
  max-width: 22ch;
}
.thread h2 em {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent-deep);
}
.thread p { color: var(--fg-soft); font-size: 17px; line-height: 1.7; margin-bottom: 14px; max-width: 64ch; }
.thread ul { color: var(--fg-soft); font-size: 16px; line-height: 1.7; padding-left: 22px; max-width: 64ch; }
.thread ul li { margin-bottom: 6px; }
.thread .term { color: var(--accent-deep); font-weight: 600; cursor: help; border-bottom: 1px dotted var(--accent); }

/* ===== PEOPLE — photo-led grid ===== */
.people-hero {
  padding: 56px 0 24px;
}
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.person {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--transition-default), box-shadow var(--transition-default);
}
.person:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.person .photo {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}
.person .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.person:hover .photo img { transform: scale(1.04); }
.person .photo.placeholder { display: flex; align-items: center; justify-content: center; }
.person .photo.placeholder::before {
  content: "[ photo ]";
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.5px;
}
.person .meta { padding: 18px 20px 22px; }
.person .meta h4 {
  font-family: 'Lora', serif;
  font-weight: 500;
  font-size: 19px;
  color: var(--fg);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
  line-height: 1.18;
}
.person .meta .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--peach-deep);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.person .meta p {
  color: var(--fg-soft);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 10px;
}
.person .meta .links { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.person .meta .links a {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  color: var(--accent-deep);
}

.people-section { padding: 48px 0 16px; border-top: 1px solid var(--line-soft); }
.people-section h2 {
  font-family: 'Lora', serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--fg);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}
.people-section .group-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 10.5px;
  color: var(--peach-deep);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

/* PI feature card — bigger, photo-left */
.person.pi {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.person.pi .photo { aspect-ratio: 1; }
.person.pi .meta { padding: 32px 36px 36px; display: flex; flex-direction: column; justify-content: center; }
.person.pi .meta h4 { font-size: 26px; }
.person.pi .meta .role { font-size: 11px; }
.person.pi .meta p { font-size: 15.5px; line-height: 1.6; margin-bottom: 12px; }

/* ===== FOOTER ===== */
.v2-footer {
  margin-top: var(--gutter-xl);
  padding: 48px 0 24px;
  border-top: 1px solid var(--line-soft);
}
.v2-footer .ftr-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--gutter-lg);
  margin-bottom: 32px;
}
.v2-footer .ftr-grid .brand-col img.lab-logo {
  height: auto;
  width: 100%;
  max-width: 280px;
  margin-bottom: 22px;
  display: block;
  transition: filter var(--transition-default);
}
.v2-footer .ftr-grid p { color: var(--fg-soft); font-size: 13.5px; line-height: 1.7; }
.v2-footer .ftr-grid h5 {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--fg);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.v2-footer .ftr-grid a {
  display: block;
  font-size: 14px;
  color: var(--fg-soft);
  margin-bottom: 6px;
  transition: color var(--transition-default);
}
.v2-footer .ftr-grid a:hover { color: var(--accent-deep); }
.v2-footer .ftr-foot {
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.4px;
}
.v2-footer .ftr-foot a { color: var(--accent-deep); }

/* ===== MOBILE BOTTOM BAR (only visible on phones) ===== */
.mobile-bottom-bar {
  display: none;
}
@media (max-width: 720px) {
  .mobile-bottom-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--line);
    padding: 8px 0;
    z-index: 30;
    box-shadow: 0 -8px 22px -10px rgba(31, 42, 51, 0.18);
  }
  .mobile-bottom-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0;
    text-decoration: none;
    color: var(--fg-soft);
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
  }
  .mobile-bottom-bar a:hover, .mobile-bottom-bar a.active { color: var(--accent-deep); }
  .mobile-bottom-bar .icon {
    width: 24px;
    height: 24px;
    color: var(--fg-mute);
  }
  .mobile-bottom-bar a.active .icon { color: var(--accent-deep); }
  body { padding-bottom: 64px; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero-home .hero-grid { grid-template-columns: 1fr; }
  .pillar-grid { grid-template-columns: 1fr 1fr; }
  .aud-router { grid-template-columns: 1fr; }
  .thread { grid-template-columns: 1fr; gap: 24px; }
  .thread .glyph-col { position: relative; top: 0; max-width: 220px; }
  .v2-footer .ftr-grid { grid-template-columns: 1fr 1fr; }
  .person.pi { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .v2-header {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 16px;
    gap: 12px;
  }
  .v2-header nav.primary { order: 4; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .v2-header nav.primary a { white-space: nowrap; padding: 6px 12px; font-size: 13px; }
  /* On mobile the nav drops to its own row, so the geometric-center
     relationship doesn't apply. Disable auto margins and let the
     header `gap: 12px` handle spacing for a clean row-1 cluster. */
  .v2-header .aff-logo { order: 3; margin-left: 0; margin-right: 0; }
  .v2-header .theme-toggle { order: 5; }
  .v2-header .aff-logo img { height: 22px; }
  .pillar-grid { grid-template-columns: 1fr; }
  .v2-footer .ftr-grid { grid-template-columns: 1fr; }
  .v2-footer .ftr-foot { flex-direction: column; align-items: flex-start; }
  .hero-home { padding: 56px 0 64px; }
  .section { padding: 48px 0; }
}

/* Phone-portrait: hide Penn / Penn Medicine affiliation logos below 480px.
   At iPhone-SE through iPhone-12 widths, the 138px-wide Penn Medicine
   wordmark cannot fit on row 1 alongside the 151px brand and 67px Penn
   shield, so it would wrap alone to row 2 — leaving Penn shield orphaned
   next to the brand and Penn Medicine isolated on its own line. The
   affiliation is already conveyed by the "PENN NEUROSURGERY" sub-line
   under "RESTORE Lab" in the brand cluster, so the shields are redundant
   institutional reinforcement that mobile real estate doesn't have room
   for. They reappear at 480px+. */
@media (max-width: 480px) {
  .v2-header .aff-logo { display: none; }
}

/* ===== GLOSSARY TOOLTIPS (inline acronym) =====
   Wrap an acronym in <span class="term-tip" data-tip="plain definition">DBS</span>.
   Pure CSS — no JS dependency. Works on hover and keyboard focus.
   Tooltip uses --fg/--bg so it inverts cleanly in dark mode. */
.term-tip {
  position: relative;
  color: var(--accent-deep);
  font-weight: 600;
  cursor: help;
  border-bottom: 1px dotted var(--accent);
}
.term-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--fg);
  color: var(--bg);
  padding: 8px 12px;
  border-radius: 6px;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.45;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 25;
}
.term-tip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--fg);
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 25;
}
.term-tip:hover::after, .term-tip:focus::after,
.term-tip:hover::before, .term-tip:focus::before { opacity: 1; }

/* ===== UTILITIES ===== */
.eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: var(--type-mono);
  letter-spacing: 0.7px;
  color: var(--peach-deep);
  text-transform: uppercase;
}