/* ==========================================================================
   Shrestha Lab — Design tokens (UConn brand, v2)
   Full official UConn palette (brand.uconn.edu): Navy #000E2F (primary),
   White, Grey #7C878E, plus the "small color spaces" navy variant
   (#1B2E67) for links/interactive text, Husky Blue (#A4C8E1, Pantone 543)
   for soft tinted backgrounds, and UConn's official Red (#E4002B,
   Pantone 185) as the one bold accent — used deliberately now (an earlier
   pass avoided it as "athletics only," but it's documented in the same
   brand guideline and reads as the site's single confident accent,
   mirroring how unfpa.org uses one saturated color throughout).
   Type: Sora (display/headings, real character, used with restraint) +
   Inter (body/UI) — replaces the previous Inter-everywhere setup.
   ========================================================================== */

:root {
  /* Color — UConn brand */
  --navy: #000e2f;
  --navy-2: #0c2456;
  --navy-3: #16346f;
  --navy-accent: #1b2e67;
  --navy-panel: #0b1a42;
  --grey: #7c878e;
  --grey-soft: #a2aaad;
  --grey-light: #eef0f2;
  --husky: #a4c8e1;
  --husky-tint: #eef4f9;
  --red: #e4002b;
  --red-soft: rgba(228, 0, 43, 0.09);

  --ink: #0a1730;
  --ink-2: #3d4654;
  --ink-muted: #6b7480;
  --paper: #ffffff;
  --surface: #f6f7f9;
  --surface-2: #eef0f3;
  --line: #e0e3e8;

  --accent: #e4002b;
  --accent-text: #c40025;
  --accent-soft: var(--husky-tint);
  --accent-soft-2: rgba(164, 200, 225, 0.35);

  --pending: #a15b13;
  --pending-soft: rgba(161, 91, 19, 0.1);

  /* Type */
  --font-display: "Sora", "Arial Black", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.85rem);
  --step-3: clamp(1.8rem, 1.55rem + 1.2vw, 2.4rem);
  --step-4: clamp(2.2rem, 1.8rem + 2vw, 3.1rem);
  --step-5: clamp(2.6rem, 2rem + 3vw, 4rem);

  /* Layout */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 16px;
  --radius-sm: 10px;

  color-scheme: light;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--navy);
  color: var(--paper);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* One consistent vertical rhythm for every section on the page — replaces
   a patchwork of per-section overrides that had accumulated from tuning
   individual gaps in isolation. */
.section { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--panel { background: var(--surface); }
.section--navy { background: var(--navy); color: var(--paper); }
/* When a navy section is the last thing before the (also navy) footer,
   the two blocks run together into one mass with no seam. Pull them
   apart with the same breathing room a white section would give. */
#project-explorer.section--navy {
  margin-bottom: clamp(2.75rem, 5.5vw, 4.5rem);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 0.9rem;
}
.section--navy .eyebrow { color: var(--husky); }
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--navy);
}
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--paper); }

h1, h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 700; }

.lede {
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 46ch;
  font-weight: 400;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--red); color: var(--paper); }
.btn-primary:hover { background: var(--navy); }
.btn-ghost { border-color: var(--line); color: var(--navy); background: transparent; }
.btn-ghost:hover { border-color: var(--navy); }
.section--navy .btn-ghost { border-color: rgba(255,255,255,0.3); color: var(--paper); }
.section--navy .btn-ghost:hover { border-color: var(--paper); }
.btn-sm { padding: 0.55em 1.15em; font-size: 0.82rem; }

/* ==========================================================================
   UConn required top banner (per UConn "Appearance" brand guidelines —
   this site will be hosted on the Aurora platform, which enforces this
   banner on every University site).

   Font note: the guidelines specify the licensed "UConn Extended" font for
   the UCONN wordmark and "Proxima Nova" for all site-identity text. Both
   ship automatically with the Aurora platform theme; this static prototype
   substitutes the site's existing font stack purely for local preview and
   will inherit the real fonts once rebuilt in Aurora.
   ========================================================================== */

.uconn-bar { background: #000e2f; height: 60px; }
.uconn-bar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.uconn-wordmark { display: flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1; }
.uconn-word { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: 0.01em; color: #ffffff; }
.uconn-rule { width: 2px; height: 26px; background: #3f4760; flex-shrink: 0; }
.uconn-sub { font-family: var(--font-body); font-weight: 700; font-size: 18px; letter-spacing: 0.01em; text-transform: uppercase; color: #7c878e; white-space: nowrap; }
.uconn-bar-actions { display: flex; align-items: center; }
.uconn-icon-btn {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  margin-left: 10px;
}
.uconn-icon-btn svg { width: 18px; height: 18px; }
.uconn-icon-btn .uconn-az { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }
.uconn-icon-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.uconn-icon-btn:hover::before,
.uconn-icon-btn:focus-visible::before { opacity: 1; }
.uconn-tooltip {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  background: #ededed;
  color: #000e2f;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  padding: 0.5em 1.1em;
  border-radius: 0 0 4px 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
.uconn-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 14px;
  border: 6px solid transparent;
  border-bottom-color: #ededed;
}
.uconn-icon-btn:hover .uconn-tooltip,
.uconn-icon-btn:focus-visible .uconn-tooltip { opacity: 1; visibility: visible; }

@media (max-width: 680px) {
  .uconn-sub { white-space: normal; max-width: 130px; line-height: 1.2; font-size: 13px; }
}
@media (max-width: 510px) {
  .uconn-sub, .uconn-rule { display: none; }
}

/* ==========================================================================
   Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Two stacked rows — site identity on top, primary nav below — rather
   than nav pinned to the far right of the identity row, matching how
   UConn department sites (e.g. alliedhealth.uconn.edu) lay this out.
   Search/toggle live in this row too, per the Appearance guidelines'
   "Additional Needs" placement: immediate right of the title, above nav. */
.brand-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 30px;
  padding-bottom: 0.9rem;
}
.nav {
  display: flex;
  align-items: center;
  padding-block: 0.7rem;
}
/* Site identity — UConn "Appearance" guidelines define two required text
   levels (Parent Site Title above Site Title), no logo mark required or
   shown here; the lab's icon mark lives in the footer instead. */
.brand {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.parent-site-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #000e2f;
  text-decoration: none;
}
.parent-site-title:hover { text-decoration: underline; }
.site-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  color: #0b1860;
  text-decoration: none;
}
.site-title:hover { text-decoration: underline; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.3vw, 1.4rem);
  font-size: 0.92rem;
  font-weight: 600;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-2);
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--navy); border-color: var(--accent); }
.nav-links a[aria-current="page"] { color: var(--red); border-color: var(--red); }


.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem var(--gutter) 1.5rem;
    gap: 0.9rem;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-toggle { display: inline-flex; }
  .site-search { width: 150px; }
}

/* ==========================================================================
   Site search
   ========================================================================== */

/* A persistent pill search field in the identity row (not a hidden
   icon-triggered overlay) — matches the compact UConn department-site
   pattern (e.g. alliedhealth.uconn.edu): fieldset-style pill border,
   icon + input inline, results in an anchored dropdown below. */
.site-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 200px;
  height: 36px;
  padding-inline: 0.9rem;
  border: 1.5px solid var(--ink-muted);
  border-radius: 999px;
  background: var(--paper);
  flex-shrink: 0;
  margin-left: auto;
}
.site-search-icon { width: 16px; height: 16px; color: var(--ink-muted); flex-shrink: 0; }
.site-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink);
}
.site-search input::placeholder { color: var(--ink-muted); }

.site-search-results {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: min(360px, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -20px rgba(0, 14, 47, 0.35);
  padding: 0.5rem;
  z-index: 300;
}
.search-empty { padding: 1.5rem 0.75rem; text-align: center; color: var(--ink-muted); font-size: 0.9rem; }
.search-result {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
}
.search-result:hover { background: var(--accent-soft); }
.search-result-cat {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-text);
  width: 6.5rem;
}
.search-result-title { flex: 1; font-size: 0.92rem; }
.search-result-sub { flex-shrink: 0; font-size: 0.78rem; color: var(--ink-muted); }

/* ==========================================================================
   Hero actions (shared by carousel slides and other CTA rows)
   ========================================================================== */

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 0 0 2.6rem; }
.hero-actions .btn-ghost { background: var(--paper); border-color: transparent; }
.hero-actions .btn-ghost:hover { background: var(--husky-tint); }

/* ==========================================================================
   What We Study — mission lede + bento card grid
   ========================================================================== */

.research-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.research-head h2 { max-width: 26ch; }

/* A bento grid — the video panel is a grid item like any tile (spanning
   two columns), not a separate section below, so it sits in the same
   row(s) as the focus cards. Cards are sized down slightly to make room. */
.study-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.study-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.study-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -22px rgba(0, 14, 47, 0.28);
}
.study-card-img { aspect-ratio: 16/10; overflow: hidden; }
.study-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.study-card-body { padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; flex-grow: 1; }
.study-card h3 { font-size: 0.98rem; font-weight: 700; }
.study-card p { color: var(--ink-muted); font-size: 0.85rem; flex-grow: 1; }

@media (max-width: 980px) {
  .study-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .study-grid { grid-template-columns: 1fr; }
}

/* Scroll-reveal (see js/app.js reveal-on-scroll observer) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Real-time video showcase — a grid item like the cards around it
   (spans 2 of the grid's 4 columns), not a separate section. */
.focus-video-panel {
  grid-column: span 2;
  position: relative;
  min-height: 220px;
  background: var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 22px 40px -22px rgba(0, 14, 47, 0.28);
}
.focus-video-panel:hover { transform: translateY(-4px); }
.focus-video-panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.focus-video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,14,47,0.88) 0%, rgba(0,14,47,0.4) 42%, rgba(0,14,47,0) 68%);
}
.focus-video-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.3rem 1.2rem;
  color: var(--paper);
}
.focus-video-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--husky);
  margin-bottom: 0.4rem;
}
.focus-video-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: focus-video-pulse 1.8s infinite;
}
@keyframes focus-video-pulse {
  0% { box-shadow: 0 0 0 0 rgba(228,0,43,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(228,0,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(228,0,43,0); }
}
.focus-video-caption p {
  font-size: 0.85rem;
  font-weight: 500;
  max-width: 34ch;
  margin: 0;
  line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
  .focus-video-dot { animation: none; }
}

@media (max-width: 980px) {
  .focus-video-panel { grid-column: span 2; }
}
@media (max-width: 760px) {
  .focus-video-panel { grid-column: 1 / -1; height: 200px; min-height: 0; }
}

/* ==========================================================================
   People preview — a taste of the roster with a link to the full People
   section further down the page, not a duplicate of it.
   ========================================================================== */

.people-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.people-preview-head h2 { max-width: 22ch; }

.people-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.people-preview-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.people-preview-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 22px 40px -22px rgba(0, 14, 47, 0.28);
}
.people-preview-photo { aspect-ratio: 4 / 5; }
.people-preview-photo img { width: 100%; height: 100%; object-fit: cover; }
.people-preview-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-card, var(--accent)) 16%, white);
}
.people-preview-photo--initials span {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--accent-card, var(--accent)) 70%, black);
}
.people-preview-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.15rem 1.3rem;
}
/* Every card reserves the same space per field (name/title/lab-role/org),
   regardless of how many lines that person's text actually takes, so all
   four fields start at the same line across every card in the row. */
.people-preview-info .name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  min-height: calc(1.3em * 2);
  margin-bottom: 0.35rem;
  /* Explicit navy, not inherited — a .section--navy ancestor's h1/h2/h3
     override would otherwise cascade into this h3 too, even inside a
     solid-white card. */
  color: var(--navy);
}
.people-preview-info .title {
  font-size: 0.84rem;
  color: var(--ink-muted);
  line-height: 1.35;
  min-height: calc(1.35em * 2);
  margin-bottom: 0.3rem;
}
.people-preview-info .lab-role {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  line-height: 1.35;
  min-height: 1.35em;
  margin-bottom: 0.5rem;
}
.people-preview-info .org {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  min-height: 1.35em;
  margin-top: auto;
}

@media (max-width: 980px) {
  .people-preview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .people-preview-grid { grid-template-columns: 1fr; max-width: 320px; margin-inline: auto; }
}

/* ==========================================================================
   Publications
   ========================================================================== */

.pub-list { display: flex; flex-direction: column; }
.pub-item {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: 1.4rem;
  align-items: start;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.pub-item:first-child { padding-top: 0; }
.pub-item:last-child { border-bottom: none; }
.pub-item:hover { background: var(--surface); }
.pub-item:hover .pub-title { color: var(--accent-text); }
.pub-badge-col { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }

/* A small "cover" card — icon panel on top (the journal's real favicon,
   fetched live) and a colored title-strip below, like a simplified
   magazine-cover thumbnail. Real per-journal cover art isn't available
   through any API across ~40 different publishers, so this is the
   honest substitute: genuine publisher branding, just shown larger and
   captioned instead of as a small flat icon. */
.pub-journal-cover {
  display: flex;
  flex-direction: column;
  width: 68px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 3px 8px -2px rgba(0, 14, 47, 0.18);
}
.pub-journal-cover-icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--badge-accent, var(--accent)) 14%, white);
}
.pub-journal-cover-icon img { width: 36px; height: 36px; object-fit: contain; }
.pub-journal-cover-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-journal-cover-label {
  flex: none;
  padding: 0.35em 0.25em;
  background: var(--badge-accent, var(--accent));
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.1;
}
.pub-year { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--ink-muted); white-space: nowrap; }
.pub-title {
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 0.3rem;
  transition: color 0.15s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pub-authors { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 0.35rem; }
.pub-authors strong { color: var(--ink); font-weight: 700; }
.pub-journal { font-size: 0.85rem; color: var(--accent-text); font-style: italic; }
.pub-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; align-content: start; }
.tag { font-size: 0.68rem; font-weight: 700; background: var(--surface-2); color: var(--ink-muted); padding: 0.28em 0.7em; border-radius: 999px; white-space: nowrap; }

/* Homepage-only: the mini publications list sits on a dark navy panel
   (#publications is unique to index.html — the full list on
   publications.html stays on white and uses the styles above). */
#publications .pub-item { border-bottom-color: rgba(255, 255, 255, 0.14); }
#publications .pub-item:hover { background: rgba(255, 255, 255, 0.04); }
#publications .pub-item:hover .pub-title { color: var(--husky); }
#publications .pub-year { color: var(--husky); font-size: 0.85rem; }
#publications .pub-title { color: var(--paper); }
#publications .pub-authors { color: rgba(255, 255, 255, 0.6); }
#publications .pub-authors strong { color: rgba(255, 255, 255, 0.9); }
#publications .pub-journal { color: var(--husky); }
#publications .pub-tags .tag { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); }

@media (max-width: 700px) {
  .pub-item { grid-template-columns: 1fr; gap: 0.4rem; padding: 1.2rem; }
  .pub-tags { justify-content: flex-start; }
  .pub-badge-col { flex-direction: row; align-items: center; gap: 0.6rem; }
}

/* "Just synced from ORCID" — a lightweight, untagged list of works from
   Dr. Shrestha's live ORCID record that aren't in the curated list yet.
   Deliberately plain (no cover art/tags/author formatting) since that
   curation doesn't exist for these until someone adds them properly. */
.pub-orcid-new { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dashed var(--line); }
.pub-orcid-new-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin-bottom: 0.75rem; }
.pub-orcid-new ul { display: flex; flex-direction: column; gap: 0.6rem; }
.pub-orcid-new li { font-size: 0.88rem; display: flex; flex-wrap: wrap; gap: 0.15em 0.5em; align-items: baseline; }
.pub-orcid-new li a { color: var(--ink); font-weight: 600; text-decoration: none; }
.pub-orcid-new li a:hover { color: var(--accent-text); text-decoration: underline; }
.pub-orcid-new li span { color: var(--ink-muted); font-size: 0.82rem; }
#publications .pub-orcid-new { border-top-color: rgba(255, 255, 255, 0.14); }
#publications .pub-orcid-new-label { color: var(--husky); }
#publications .pub-orcid-new li a { color: var(--paper); }
#publications .pub-orcid-new li a:hover { color: var(--husky); }
#publications .pub-orcid-new li span { color: rgba(255, 255, 255, 0.6); }
#publications-explorer .pub-orcid-new { border-top: none; margin-top: 0; padding-top: 0; margin-bottom: 1.75rem; }

/* ==========================================================================
   Get involved — opportunity navigator (card-grid tabs + a dark detail
   panel below, rather than pill tabs on a navy section).
   ========================================================================== */

.path-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}
/* One accent color per pathway, drawn from the real UConn brand palette
   (not an arbitrary rainbow) — fixed by position since there are always
   exactly 4 cards/panels in the same grad/research/study/collab order. */
.path-grid .path-card:nth-child(1), .path-detail .path-panel:nth-child(1) { --path-accent: #e4002b; }
.path-grid .path-card:nth-child(2), .path-detail .path-panel:nth-child(2) { --path-accent: #1b2e67; }
.path-grid .path-card:nth-child(3), .path-detail .path-panel:nth-child(3) { --path-accent: #a4c8e1; }
.path-grid .path-card:nth-child(4), .path-detail .path-panel:nth-child(4) { --path-accent: #a15b13; }

.path-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  padding: 0 1.4rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 14, 47, 0.06), 0 16px 32px -18px rgba(0, 14, 47, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.path-card:hover,
.path-card.is-active {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -22px rgba(0, 14, 47, 0.28);
}
/* A small photo strip up top (reusing the same shots as the homepage's
   Get Involved teaser, just cropped short) — grounds each pathway in a
   real moment instead of an icon floating on white. */
.path-photo { display: block; width: calc(100% + 2.8rem); margin: 0 -1.4rem; height: 92px; }
.path-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
/* The grad-students photo has a second row of faces higher up than the
   other three shots, so it needs a taller crop window to keep them in frame. */
.path-grid .path-card:nth-child(1) .path-photo img { object-position: center 78%; }
.path-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--path-accent, var(--accent)) 14%, white);
  color: color-mix(in srgb, var(--path-accent, var(--accent-text)) 75%, black);
  /* Pulled up to straddle the photo's bottom edge, like a badge sitting
     on top of it, rather than stacking flatly underneath. */
  margin-top: -23px;
  margin-bottom: 0.7rem;
  border: 3px solid var(--paper);
  box-shadow: 0 4px 10px rgba(0, 14, 47, 0.18);
  position: relative;
  z-index: 1;
}
.path-icon svg { width: 23px; height: 23px; }
.path-card h3 { font-size: var(--step-0); font-weight: 700; margin-bottom: 0.3rem; }
.path-card p { font-size: 0.85rem; color: var(--ink-muted); margin: 0; }

.path-panel { display: none; animation: involveFade 0.35s ease; }
.path-panel.is-active {
  display: block;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--paper);
}
.path-panel h3 { font-size: var(--step-1); margin-bottom: 0.85rem; }
.path-panel p { color: rgba(255,255,255,0.78); margin-bottom: 1.25rem; max-width: 70ch; }
.path-panel ul {
  columns: 2;
  column-gap: 2rem;
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
}
.path-panel li { list-style: disc; margin-bottom: 0.6rem; break-inside: avoid; }

@keyframes involveFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .path-grid { grid-template-columns: repeat(2, 1fr); }
  .path-panel ul { columns: 1; }
}
@media (max-width: 560px) {
  .path-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--navy); color: rgba(255,255,255,0.75); padding-block: 3.5rem 2rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-col h2 { font-family: var(--font-display); line-height: 1.6; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--husky); margin-bottom: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9rem; }
.footer-col a { text-decoration: none; color: rgba(255,255,255,0.85); }
.footer-col a:hover { color: var(--husky); }
.footer-brand h2 { font-family: var(--font-display); line-height: 1.6; color: var(--paper); font-size: 1.05rem; text-transform: none; letter-spacing: normal; }
.footer-social { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: 1rem; }
.footer-social-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--husky); }
.social-icons { display: flex; gap: 0.6rem; }
.social-icons a {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.08); color: var(--paper); transition: background 0.15s ease;
}
.social-icons a:hover { background: var(--red); }
.social-icons svg { width: 16px; height: 16px; }

/* The lab's colorful mark reads poorly directly on navy (its wordmark
   text is dark navy itself), so it sits in a small white chip here
   rather than needing a separate reversed/white logo asset. */
.footer-logo-chip {
  display: inline-flex;
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
  margin-bottom: 1rem;
}
.footer-logo-chip img { display: block; height: 38px; width: auto; }

/* Required per UConn "Appearance" guidelines — copyright, disclaimers,
   and accessibility links, each pointing at the University's own pages. */
.uconn-compliance-bar {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-size: 0.78rem;
}
.uconn-compliance-bar a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.uconn-compliance-bar a:hover { color: var(--paper); text-decoration: underline; }

@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hero intro — full-bleed real photo, navy scrim, single headline with
   one accent word, pill CTAs, and a translucent stat strip. Replaces the
   earlier rotating-phrase/photo-carousel hero.
   ========================================================================== */

.hero-intro {
  position: relative;
  height: min(76vh, 620px);
  min-height: 420px;
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 42%;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-photo.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-photo { transition: none; }
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(0,14,47,0.8) 0%, rgba(0,14,47,0.52) 32%, rgba(0,14,47,0.2) 55%, rgba(0,14,47,0) 72%),
    linear-gradient(0deg, rgba(0,14,47,0.5) 0%, rgba(0,14,47,0.12) 30%, rgba(0,14,47,0) 55%);
}
.hero-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-text-col { padding: 0 var(--gutter) 3.2rem; max-width: 720px; }
.hero-intro h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-wrap: balance;
  margin: 0 0 1.9rem;
  overflow-wrap: break-word;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.5);
}
.rotator {
  display: inline-grid;
  vertical-align: bottom;
  color: #ffd166;
  white-space: nowrap;
}
.rotator-word {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.rotator-word.is-active { opacity: 1; }
/* nowrap keeps a phrase from splitting mid-rotation on wide screens, but on a
   narrow phone it pushed the longest phrase ("with communities.") past the
   gutter and out to the edge of the viewport. Allowing the wrap back costs
   nothing here: every phrase occupies the same 1/1 grid area, so the box is
   already sized to the tallest of them and the taller line count applies to
   all four — the headline does not jump as they cycle. */
@media (max-width: 30rem) {
  .rotator { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .rotator-word { position: absolute; opacity: 0; }
  .rotator-word.is-active { position: static; opacity: 1; }
}

.stat-strip { display: flex; background: rgba(0,14,47,0.88); }
.stat-item { flex: 1; padding: 1.1rem var(--gutter); border-right: 1px solid rgba(255,255,255,0.14); }
.stat-item:last-child { border-right: none; }
.stat-item .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 0.3rem;
  display: block;
}
.stat-item .lbl {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--husky);
}

@media (max-width: 700px) {
  .stat-strip { flex-wrap: wrap; }
  .stat-item { flex: 1 1 50%; }
}

/* ==========================================================================
   Welcome
   ========================================================================== */

.welcome-heading {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.welcome-heading h2 { font-size: var(--step-3); color: var(--navy); white-space: nowrap; }
.welcome-rule { flex: 1; height: 1px; background: var(--line); }

.welcome-body { display: flex; gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
.welcome-photo {
  position: relative;
  flex: 0 0 clamp(260px, 26vw, 340px);
  overflow: hidden;
}
.welcome-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.welcome-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.5rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(0, 14, 47, 0.82), rgba(0, 14, 47, 0));
  color: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.welcome-caption strong { font-size: 0.92rem; font-weight: 700; }
.welcome-caption span { font-size: 0.76rem; color: rgba(255, 255, 255, 0.8); }
.welcome-text { flex: 1; display: flex; flex-direction: column; gap: 1.1rem; }
.welcome-text p { text-align: justify; color: var(--ink-2); }
.welcome-text strong { color: var(--navy); }
.welcome-text em { font-style: italic; color: var(--ink); }

.welcome-quote .quote-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4.25rem;
  line-height: 0.5;
  color: var(--red);
  display: block;
  margin-bottom: 0.5rem;
}
.welcome-quote blockquote { margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--red); }
.welcome-quote blockquote p {
  text-align: left;
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy);
  margin: 0;
}
.welcome-quote blockquote p em { color: var(--red); font-style: normal; font-weight: 700; }

@media (max-width: 700px) {
  .welcome-heading h2 { font-size: var(--step-2); }
  .welcome-body { flex-direction: column; }
  .welcome-photo { flex-basis: auto; width: 100%; max-width: 260px; height: 320px; }
  .welcome-text p { text-align: left; }
}

/* ==========================================================================
   News
   ========================================================================== */

/* Featured story + grid — a large card (real photo left, text right) for
   the most recent item, with the rest below in an even row. Reused by
   Get Involved for the same "one lead item, several peers" shape. */
.feature-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  margin-bottom: 1.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -24px rgba(0, 14, 47, 0.2);
}
.feature-img { aspect-ratio: 16/11; overflow: hidden; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-card {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
}
.tag-pill {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--husky-tint);
  color: var(--navy-accent);
  padding: 0.35em 0.85em;
  border-radius: 999px;
}
.feature-card h3 { font-size: var(--step-1); font-weight: 700; line-height: 1.28; }
.feature-card p { font-size: 0.92rem; line-height: 1.55; color: var(--ink-muted); }
.read-link {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
}
@media (max-width: 760px) {
  .feature-row { grid-template-columns: 1fr; }
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
.news-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 4px rgba(0, 14, 47, 0.06), 0 16px 32px -18px rgba(0, 14, 47, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -22px rgba(0, 14, 47, 0.28);
}
.news-image {
  margin: -1.5rem -1.4rem 0.3rem;
  height: 170px;
  flex-shrink: 0;
}
.news-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-tag {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3em 0.7em;
  border-radius: 999px;
}
/* On-brand category badges — same UConn palette used across the site
   (red/navy/husky/grey/gold) rather than an arbitrary rainbow. */
.news-tag--grant { background: var(--accent-soft); color: var(--accent-text); }
.news-tag--team { background: var(--husky-tint); color: var(--navy-accent); }
.news-tag--pub { background: color-mix(in srgb, #a15b13 16%, white); color: #7a4710; }
.news-tag--awards { background: color-mix(in srgb, #16346f 12%, white); color: #16346f; }
.news-tag--recruitment { background: var(--grey-light); color: var(--ink-2); }
.news-date { font-size: 0.78rem; color: var(--ink-muted); font-weight: 600; }
/* Clamped to a fixed number of lines so a longer title/blurb on one card
   can't push its height out of sync with the other three. */
.news-card h3 {
  font-size: var(--step-0);
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--step-0) * 1.3 * 2);
}
.news-card .news-excerpt {
  color: var(--ink-muted);
  font-size: 0.88rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card .news-country { align-self: flex-start; }

@media (max-width: 980px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contact + LinkedIn feed
   ========================================================================== */

.connect-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-block h2 { margin-top: 0.4rem; }
.contact-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.contact-list li { display: flex; flex-direction: column; gap: 0.2rem; }
.contact-list a { color: var(--accent-text); font-weight: 700; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.contact-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}
.linkedin-block h2 { margin: 0.4rem 0 1.5rem; }

.linkedin-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background: var(--paper);
  height: 480px;
  overflow-y: auto;
}

@media (max-width: 860px) {
  .connect-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Misc
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[x-cloak] { display: none !important; }

/* ==========================================================================
   Research page — interactive global portfolio (map + location panel)
   Light page theme, matching the homepage — the map illustration itself
   stays a dark "space" card (an intentional, contained accent), but the
   surrounding section and the location panel use the site's normal
   paper/ink/line tokens like every other card on the site.
   ========================================================================== */

.map-panel-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.map-card {
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.5rem;
}
.world-map-container { width: 100%; min-height: 320px; }
.world-map-svg { width: 100%; height: auto; display: block; }

/* The real map (prototype/assets/img/world-map.svg, public-domain
   BlankMap-World-Compact) is fetched and injected at runtime — see
   initWorldMap() in research.js — and brings its own embedded <style>
   block styling every country a flat light gray. These overrides are
   scoped under .world-map-container purely to out-specificity that
   injected stylesheet (a bare .landxx there is otherwise a same-
   specificity, later-in-the-DOM rule that would win by source order). */
.world-map-container .landxx { fill: var(--navy-3); stroke: rgba(255, 255, 255, 0.3); }
.world-map-container .oceanxx { fill: none; stroke: none; }

/* Countries — a lightweight choropleth: each of the four research-site
   countries (see MAP_COUNTRY_CODES in research.js) gets the
   .country-shape class at runtime, making it its own clickable region
   that shades in when selected, rather than a decorative backdrop.
   Red is the site's one bold accent (see :root comment), so "selected"
   uses it here too instead of an off-brand highlight color. */
.world-map-container .country-shape { cursor: pointer; outline: none; fill: var(--navy-accent); transition: fill 0.2s ease; }
.world-map-container .country-shape:hover { fill: #2f4a8f; }
.world-map-container .country-shape.is-active { fill: var(--red) !important; }
.world-map-container .country-shape:focus-visible { stroke: white; stroke-width: 1.5; }

.map-pin { cursor: pointer; outline: none; }
.map-pin circle.outer { fill: rgba(164, 200, 225, 0.28); animation: research-pulse-pin 2.3s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.map-pin circle.inner { fill: var(--husky); stroke: white; stroke-width: 2; transition: fill 0.2s; }
.map-pin text { fill: var(--navy); font-size: 11px; font-weight: 800; text-shadow: none; }
.map-pin .map-flag { font-size: 30px; font-weight: 400; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.map-pin:hover circle.inner, .map-pin.is-active circle.inner { fill: var(--red); }
.map-pin:hover text, .map-pin.is-active text { fill: var(--paper); }
.map-pin:focus-visible circle.inner { stroke-width: 4; }
@keyframes research-pulse-pin {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.map-location-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.location-chip {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.location-chip:hover { border-color: rgba(255, 255, 255, 0.5); }
.location-chip.is-active { background: var(--paper); color: var(--navy); border-color: var(--paper); }

/* A static, editorial companion to the map rather than another data
   panel — the map itself already carries the interactive/data role. */
.portfolio-statement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.portfolio-statement-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 2.5vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 1.25rem;
}
.portfolio-statement-headline span { display: block; }
.portfolio-statement-headline .headline-accent { color: var(--red); }
.portfolio-statement-body { color: var(--ink-muted); font-size: 1.05rem; max-width: 40ch; margin-bottom: 1.6rem; }

@media (max-width: 900px) {
  .map-panel-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Research page — project explorer
   ========================================================================== */

#project-explorer { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
#project-explorer .section-head { margin-bottom: 1.5rem; }

.explorer-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.explorer-select {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}
.explorer-select select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5em 2em 0.5em 0.8em;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1 6,6 11,1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7em center;
  background-size: 10px 7px;
}
.explorer-select select:hover { border-color: var(--ink-muted); }

.filter-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem;
  border: 1px solid var(--navy);
  border-radius: 999px;
  margin-bottom: 1.75rem;
  overflow-x: auto;
  scrollbar-width: thin;
  background: var(--navy);
  box-shadow: 0 2px 4px rgba(0, 14, 47, 0.05), 0 10px 24px -16px rgba(0, 14, 47, 0.22);
}
.filter-chip {
  flex: none;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5em 0.85em;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.filter-chip:hover { color: var(--paper); }
a.filter-chip { text-decoration: none; display: inline-block; }
.filter-chip.is-active { background: var(--red); color: var(--paper); }
.search-field {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5em 1em;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  width: 170px;
}
.search-field input {
  background: none; border: none; outline: none; color: var(--ink);
  font-family: var(--font-body); font-size: 0.85rem; width: 100%;
}
.search-field input::placeholder { color: var(--ink-muted); }

.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.project-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(0, 14, 47, 0.06), 0 16px 32px -18px rgba(0, 14, 47, 0.28);
}
.project-visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.15rem 1.25rem 0;
}
/* A reserved spot for each project's real logo, once one exists —
   deliberately plain/neutral (no per-project color) rather than a
   generated avatar standing in for a logo that isn't real yet. */
.project-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--husky-tint);
  border: 1px solid var(--line);
}
.project-logo-placeholder svg { width: 27px; height: 27px; color: var(--navy-accent); }
.project-visual-tags { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.project-country { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-2); color: var(--ink-muted); padding: 0.3em 0.7em; border-radius: 999px; }
.project-country .flag { font-size: 1rem; line-height: 1; }
.project-status { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.28em 0.7em; border-radius: 999px; background: var(--husky-tint); color: var(--navy-accent); }
.project-status.is-completed { background: var(--surface-2); color: var(--ink-muted); }
.project-body { padding: 0.85rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
/* Explicit navy, not inherited — .section--navy's h1/h2/h3 override
   (white, for text sitting directly on the navy backdrop) would otherwise
   cascade into this h3 too, even though it's inside a solid-white card. */
.project-body h3 { font-size: 1.02rem; margin: 0 0 0.4rem; color: var(--navy); }
.project-body p { font-size: 0.85rem; color: var(--ink-muted); flex: 1; margin-bottom: 0; }
.empty-state { color: var(--ink-muted); font-size: 0.9rem; grid-column: 1 / -1; }

/* Project Explorer on a navy background — the filter bar/controls sit
   directly on the section background here (unlike the white cards below
   them), so they need their own contrast pass rather than the study-card/
   project-card treatment, which is unaffected since those stay white. */
#project-explorer.section--navy .filter-bar { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); box-shadow: none; }
#project-explorer.section--navy .search-field { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
#project-explorer.section--navy .filter-chip { color: rgba(255, 255, 255, 0.75); }
#project-explorer.section--navy .filter-chip:hover { color: var(--paper); }
#project-explorer.section--navy .filter-chip.is-active { background: var(--red); color: var(--paper); }
#project-explorer.section--navy .search-field span { color: rgba(255, 255, 255, 0.6); }
#project-explorer.section--navy .explorer-select { color: var(--husky); }
#project-explorer.section--navy .empty-state { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 980px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .project-grid { grid-template-columns: 1fr; }
  .filter-bar { border-radius: var(--radius); flex-wrap: wrap; overflow-x: visible; }
  .search-field { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   People page — team directory + profile modal
   ========================================================================== */

/* The PI gets a standalone feature card (photo + full bio) instead of
   living in the directory grid below — modeled on the homepage's Welcome
   photo/text layout, since that treatment already fit this same photo. */
.pi-feature {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 2px 4px rgba(0, 14, 47, 0.06), 0 16px 32px -18px rgba(0, 14, 47, 0.28);
}
.pi-feature-photo-col {
  flex: 0 0 clamp(220px, 24vw, 300px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pi-feature-photo {
  flex: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pi-feature-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
/* Each platform's own real brand color, not a uniform site-accent tint —
   these are recognizable app icons first, "styled to match" second. */
.pi-feature-social { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pi-feature-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pi-feature-social a:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 14, 47, 0.2); }
.pi-feature-social svg { width: 18px; height: 18px; }
.social-scholar { background: #4285f4; }
.social-researchgate { background: #00ccbb; }
.social-linkedin { background: #0a66c2; }
.social-x { background: #000000; }
.pi-feature-copy { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; }
.pi-feature-title { color: var(--ink-2); font-size: 0.95rem; font-weight: 600; }
.pi-feature-bio { color: var(--ink-2); }
.pi-feature-education { margin: 0.2rem 0; }
.pi-feature-education h4 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin-bottom: 0.5rem; }
.pi-feature-education ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.pi-feature-education li { display: flex; gap: 0.7rem; font-size: 0.9rem; color: var(--ink-2); }
.pi-feature-edu-year { font-family: var(--font-display); font-weight: 700; color: var(--accent-text); flex: none; width: 3.2ch; }
.pi-feature-email { font-size: 0.9rem; color: var(--ink-2); }
.pi-feature-email a { color: var(--accent-text); text-decoration: underline; }
@media (max-width: 760px) {
  .pi-feature { flex-direction: column; }
  .pi-feature-photo-col { flex-basis: auto; width: 100%; max-width: 280px; }
  .pi-feature-photo { height: 320px; }
}

#team-directory { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
#team-directory .section-head { margin-bottom: 1.5rem; }
/* #team-directory sits on the navy section background, so the bar needs
   the same translucent-on-dark treatment as the Project Explorer's,
   rather than the grey fill used on white-section filter bars elsewhere. */
#team-directory.section--navy .filter-bar { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); box-shadow: none; }
#team-directory.section--navy .search-field { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
#team-directory.section--navy .filter-chip { color: rgba(255, 255, 255, 0.75); }
#team-directory.section--navy .filter-chip:hover { color: var(--paper); }
#team-directory.section--navy .filter-chip.is-active { background: var(--red); color: var(--paper); }
#team-directory.section--navy .search-field span { color: rgba(255, 255, 255, 0.6); }
#team-directory.section--navy .empty-state { color: rgba(255, 255, 255, 0.7); }

/* .person-card layers onto the existing .people-preview-card — plain
   display, not interactive (only the PI above has a full profile). */
.person-card {
  border: 1px solid var(--line);
  width: 100%;
}

/* Alumni — no photos or bios, just a dense two-line (name + affiliation)
   list so ~55 past members read as a compact archive, not another grid
   of cards. */
.alumni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9rem 1.5rem;
}
.alumni-item { padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.alumni-name { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.alumni-affiliation { font-size: 0.8rem; color: var(--ink-muted); margin-top: 0.15rem; }

@media (max-width: 700px) {
  .alumni-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; }
}

/* ==========================================================================
   Publications page — full list (no mini-window cap, unlike the homepage's
   5-item preview)
   ========================================================================== */

#publications-explorer { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
#publications-explorer .section-head { margin-bottom: 1.25rem; }

.filter-bar-select { flex: none; }
.filter-bar-select select {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface);
  border: none;
  border-radius: 999px;
  padding: 0.5em 1.9em 0.5em 0.95em;
  cursor: pointer;
  appearance: none;
  white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b7480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1 6,6 11,1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 9px 6px;
  transition: color 0.15s ease;
}
.filter-bar-select select:hover { color: var(--ink); }


.pub-list-page { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pub-list-page .pub-title {
  /* Unlike the homepage mini-window, this page's whole point is reading
     full titles, so the 2-line clamp used there is switched off here. */
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

@media (max-width: 700px) {
  #publications-explorer .section-head { flex-wrap: wrap; }
}