/* People page assets.

   1. On-this-page rail. This is in-page navigation, not a tab bar and not a
      submenu: all three groups live on one scrolling page, so nothing is ever
      hidden and every anchor is a real jump link. It sticks under the masthead
      (80px on its own, 122px at >=1280px where the utility bar shows) and marks
      the section you are actually looking at, using the same colour + 2px rule
      the masthead already uses for its active item.

   2. Anchor offset. The masthead and this rail are both sticky, so a jump link
      without scroll-margin lands with the section heading hidden underneath. */

.iri-onpage {
  position: sticky;
  top: 81px;                       /* masthead is 81px tall incl. its hairline */
  z-index: 30;                      /* masthead 50 > mobile menu 40 > rail 30 */
  background: #fff;
  border-bottom: 1px solid #DCE3EA;
}
.iri-onpage-inner {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.iri-onpage-inner::-webkit-scrollbar { display: none; }

.iri-onpage-link {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  white-space: nowrap;
  font: 400 15px/1.4 Inter, sans-serif;
  color: #4A5C6E;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;              /* sit the rule on the rail's own hairline */
  transition: color .15s ease, border-color .15s ease;
}
.iri-onpage-link:hover { color: #12263A; }

/* Active weight is deliberately NOT bolded: the rail updates while you scroll,
   and a weight change would shift every label sideways as it fires. */
.iri-onpage-link[aria-current] { color: #12263A; border-bottom-color: #12263A; }

@media (min-width: 1280px) { .iri-onpage { top: 122px; } }

/* Narrow phones. The Chinese labels fit; the English ones do not at 390px and
   below, so the rail scrolls sideways -- with a fade at the right edge, because
   a label sliced off by a hidden scrollbar just reads as broken. The extra
   right padding keeps the last label clear of that fade once scrolled to end. */
@media (max-width: 639px) {
  .iri-onpage-inner {
    gap: 1.25rem;
    padding-right: 2.5rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  }
  .iri-onpage-link { font-size: 14px; }
}

/* Where a jump link parks a section heading: clear of the masthead and the rail,
   with room to breathe. The scroll-spy reads this same variable, so the section
   you land on is always the one the rail highlights -- keep them in one place. */
:root { --iri-rail-offset: 9.5rem; }
@media (min-width: 1280px) { :root { --iri-rail-offset: 12rem; } }

#management-team, #faculty, #advisory-partners {
  scroll-margin-top: var(--iri-rail-offset);
}