/* ==========================================================================
   LIMM — Clinical Editorial
   alumni.css · "where they are now" spotlight, sticky track/year bar,
                alumni card additions, current-members teaser

   The card grid, page header and chip language are reused verbatim from
   members.css (.people-head, .group, .mgrid, .mcard, .subnav__chip) so an
   alumni card and a member card are the same object with a different tense.
   Only the alumni-specific parts live here.
   ========================================================================== */

/* Two stacked rows of chips sit under the masthead, so anchor jumps need a
   deeper offset than the global one in tokens.css. Alumni page only. */
html { scroll-padding-top: calc(var(--nav-h-compact) + 124px); }

/* ---- Page header sub-line ------------------------------------------------ */
.asub { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.asub span { display: inline-flex; align-items: baseline; gap: 0.45em; }
.asub b {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60;
  font-weight: 500;
  font-size: 1.3em;
  line-height: 1;
  color: var(--ink);
}
.asub i { font-style: normal; color: var(--rule); padding-inline: 2px; }

/* ---- Where they are now -------------------------------------------------- */
.now {
  border-top: 1px solid var(--ink);
  padding-block: clamp(30px, 3.2vw, 48px) clamp(44px, 4.6vw, 72px);
}
.now__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 2.6vw, 40px);
}
.now__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96;
  font-weight: 400;
  font-size: var(--text-h3);
  letter-spacing: -0.016em;
}
.now__title b {
  font-weight: 500;
  font-style: italic;
  color: var(--accent-ink);
  font-variation-settings: "opsz" 96, "SOFT" 40, "WONK" 1;
}
.now__note { color: var(--muted); }

.now__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 3.4vw, 56px);
}
@media (max-width: 1023px) { .now__list { grid-template-columns: minmax(0, 1fr); } }

.nowrow {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: 15px;
  border-bottom: 1px solid var(--rule-soft);
  transition: background var(--dur) var(--ease);
}
.nowrow:hover { background: color-mix(in srgb, var(--paper-2) 55%, transparent); }

/* The accent marker is the "still live" signal used across the site. */
.nowrow__tag { display: flex; align-items: baseline; gap: 0.5em; color: var(--muted); }
.nowrow__tag::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
  transform: translateY(-2px);
}
.nowrow__year { color: var(--ink); font-weight: 500; }

.nowrow__name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.24;
  letter-spacing: -0.012em;
}
.nowrow__name span { color: var(--muted); font-family: var(--font-kr); font-size: 0.8125rem; }
.nowrow__marker {
  display: inline-block;
  margin-right: 0.6em;
  font-weight: 500;
  color: var(--muted);
}
.nowrow__where {
  margin-top: 4px;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--accent-ink);
  text-wrap: pretty;
}
.nowrow__role { display: block; margin-top: 3px; color: var(--muted); }

@media (max-width: 560px) {
  .nowrow { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
}

/* ---- Sticky track + year bar --------------------------------------------- */
.albar {
  position: sticky;
  top: var(--nav-h-compact);
  z-index: 45;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  overflow-x: clip;
}
.albar__inner { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-block: 11px; }
.albar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 1px;
}
.albar__row::-webkit-scrollbar { display: none; }
/* A transparent wrapper so JS can own one mount point while the chips stay
   direct flex children of the scrolling row. */
.albar__slot { display: contents; }
.albar__legend {
  flex: 0 0 auto;
  align-self: center;
  color: var(--muted);
  padding-right: 4px;
}
@media (max-width: 640px) { .albar__legend { display: none; } }

/* .subnav__chip comes from members.css; buttons add a pressed state that
   matches the .is-active treatment there. */
.subnav__chip[aria-pressed="true"] {
  color: var(--paper);
  border-color: var(--navy);
  background: var(--navy);
}
.subnav__chip[aria-pressed="true"] i { color: inherit; opacity: 0.8; }
.subnav__chip[hidden] { display: none !important; }
.subnav__chip i { font-variant-numeric: tabular-nums; }

/* ---- Year groups --------------------------------------------------------- */
.group[hidden] { display: none !important; }
.group__title--year {
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  letter-spacing: -0.036em;
}

/* ---- Alumni card additions ----------------------------------------------- */
.mcard[hidden] { display: none !important; }

.acard__note {
  margin-top: 3px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}
.acard__roles { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }

/* "Now: …" — the one line the client actually wants people to read. */
.acard__now {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.8125rem;
  line-height: 1.42;
  color: var(--accent-ink);
  text-wrap: pretty;
}
.acard__now b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
@media (max-width: 560px) {
  .acard__now { font-size: 0.75rem; }
  .acard__note { font-size: 0.6875rem; }
}

/* ---- Empty state --------------------------------------------------------- */
.aempty {
  padding-block: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.aempty[hidden] { display: none !important; }
.aempty__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96;
  font-weight: 300;
  font-size: var(--text-h3);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.aempty p { color: var(--muted); margin-bottom: 22px; }

/* ---- Current-members teaser (mirror of the alumni band on members.html) --- */
.teaser {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  padding-block: clamp(64px, 6.5vw, 112px);
}
.teaser__inner { align-items: end; row-gap: 28px; }
.teaser__body { grid-column: 1 / 8; }
.teaser__label { display: block; color: var(--navy); margin-bottom: 20px; }
.teaser__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(2.25rem, 1.1rem + 3.3vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.026em;
}
.teaser__title b {
  font-weight: 500;
  font-style: italic;
  color: var(--accent-ink);
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
}
.teaser__cta { grid-column: 9 / 13; justify-self: end; padding-bottom: 0.6rem; }
@media (max-width: 1023px) {
  .teaser__body { grid-column: 1 / 7; }
  .teaser__cta  { grid-column: 1 / 7; justify-self: start; }
}
@media (max-width: 640px) {
  .teaser__body, .teaser__cta { grid-column: 1 / 5; }
}