/* ============================================================
   Research page redesign — matches the homepage visual language.
   Scoped to body.research-refined. Loaded AFTER styles.css.
   Constraints: fonts unchanged (Mukta body / Source Serif display),
   copy + images + links unchanged (auto publications block and metric
   numbers/labels are STYLE-only here). Container width, section spacing
   and image sizes preserved. Palette stays institutional navy + blue.
   ============================================================ */

/* ---- Design tokens (same values as redesign.css) ---- */
.research-refined {
  --ink-900: #0c2143;      /* deepest navy for display type */
  --accent: #12457e;       /* single restrained accent */
  --rule: #e7ecf2;         /* hairline */
  --rule-strong: #d3dbe6;
  --paper: #f5f8fc;        /* faint cool panel */
  --shadow-card: 0 18px 40px -24px rgba(12,33,67,0.45);
  accent-color: var(--accent);
}

/* ---- Browser surfaces (themed, not default) ---- */
.research-refined ::selection { background: #cfe0f4; color: var(--ink-900); }
.research-refined :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---- Content headings: serif, tightened, deep navy ----
   Scoped to content <section>s only. The navy Research Themes panel keeps
   its white headings (restored below); the dark footer is untouched. */
.research-refined section h2,
.research-refined section h3 {
  color: var(--ink-900);
  letter-spacing: -0.018em;
}
.research-refined .section-head h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.1;
}
.research-refined .section-head .lead {
  font-size: 1.12rem; line-height: 1.6; color: var(--slate);
}

/* Section kickers (owner keeps them): refined tracked accent label. */
.research-refined .eyebrow {
  text-transform: uppercase; font-weight: 700;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--accent);
  margin: 0 0 12px;
}

/* ============================================================
   PAGE BANNER (photo hero) — keep height; lighter blue-hue wash
   ============================================================ */
.research-refined .page-banner .hero-overlay {
  background: linear-gradient(90deg,
    rgba(16,42,82,0.77) 0%, rgba(16,42,82,0.57) 45%, rgba(16,42,82,0.37) 100%);
  opacity: 1;
}
.research-refined .page-banner h1 {
  font-family: var(--serif); font-weight: 600;
  letter-spacing: -0.018em; text-wrap: balance;
}
/* Banner links stay white + underlined (kept from base). */

/* ============================================================
   RESEARCH PROFILE INTRO + METRIC TILES
   ============================================================ */
.research-refined .research-profile-copy h2 {
  font-family: var(--serif); font-weight: 600;
}

/* Metric cards: quiet minimal tiles, serif numerals, no thick borders. */
.research-refined .metric-card {
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: none; padding: 24px 22px;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.research-refined .metric-card:hover {
  border-color: var(--rule-strong); box-shadow: var(--shadow-card); transform: translateY(-3px);
}
.research-refined .metric-card .num {
  font-family: var(--serif); font-weight: 600; color: var(--ink-900);
  font-size: 2.5rem; line-height: 1; margin-bottom: 10px;
}
.research-refined .metric-card .label {
  color: var(--slate); font-size: 0.9rem; font-weight: 500;
}

/* ============================================================
   RESEARCH THEMES PANEL (intentionally navy) — keep white type
   ============================================================ */
.research-refined .research-panel { box-shadow: var(--shadow-card); border-radius: 12px; }
.research-refined .research-panel h2,
.research-refined .research-panel h3 { color: #fff; letter-spacing: -0.01em; }

/* ============================================================
   RESEARCH FELLOWS PANEL + MEMBER CARDS
   ============================================================ */
.research-refined .research-team-panel {
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: none;
}
.research-refined .research-member {
  border: 1px solid var(--rule); border-radius: 12px; padding: 10px 10px 12px;
  box-shadow: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .research-refined .research-member:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-card);
  }
}
.research-refined .research-member:hover { border-color: var(--rule-strong); }
.research-refined .research-member img { border-radius: 8px; }
.research-refined .research-member strong { color: var(--ink-900); }

/* ============================================================
   BUTTONS — rounded, generous, solid accent (hover deep navy)
   ============================================================ */
.research-refined .btn,
.research-refined .btn-navy {
  border-radius: 8px; padding: 15px 26px; font-weight: 600;
  background: var(--accent); color: #fff; border: none;
}
.research-refined .btn:hover,
.research-refined .btn-navy:hover {
  background: var(--ink-900); color: #fff; transform: translateY(-1px);
}

/* ============================================================
   PUBLICATION CARDS — drop the 4px side-tab, hairline + hover lift
   ============================================================ */
.research-refined .publication {
  border: 1px solid var(--rule); border-left: 1px solid var(--rule);
  border-radius: 12px; box-shadow: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .research-refined .publication:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-card);
  }
}
.research-refined .publication:hover { border-color: var(--rule-strong); }
.research-refined .publication-meta .year { color: var(--accent); }
.research-refined .publication h3 a:hover { color: var(--accent); }

/* ============================================================
   PREVIOUS FELLOWS (alumni) — calm hairline tiles
   ============================================================ */
.research-refined .past-fellow {
  border: 1px solid var(--rule); border-radius: 12px; box-shadow: none;
  transition: border-color .2s ease, background .2s ease;
}
.research-refined .past-fellow:hover { border-color: var(--rule-strong); background: #fff; }
.research-refined .past-fellow > strong { color: var(--ink-900); }