/* ==========================================================================
   MSKI Lab — Shared Styles
   Used by: index, research, team, publications, funding, contact
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
     1.  DESIGN TOKENS        :root palette, spacing, shadows, motion
     2.  RESET + BASE         box-sizing reset, html/body defaults
     3.  ACCESSIBILITY        focus-visible, reduced-motion, reveal anim
     4.  SCROLL UI            scroll progress bar, back-to-top button
     5.  NAV (interior)       fixed nav, .scrolled state, active link
     6.  TOP BAR (home)       index.html landing bar variant
     7.  HAMBURGER + MOBILE   mobile menu overlay, hamburger toggle
     8.  FOOTER               shared footer across interior pages
     9.  TYPOGRAPHY           tabular nums, small caps, reading measure
     10. HERO (shared base)   default hero + modifier variants + H1
     11. SECTION PATTERNS     .section-label, .section-heading, .content-section
     12. CTA BUTTONS          .cta-button, .hero-cta
     13. PAGE: RESEARCH       overview, therapeutic-focus, pillars, capabilities
     14. PAGE: TEAM           team-section, team-card, member, collab
     15. PAGE: PUBLICATIONS   news-item, pub-item, pub-abstract, pub-link
     16. PAGE: CONTACT        contact-card, address, interest-group
     17. PAGE: FUNDING        funding-section, funding-card
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,400;1,600&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ==========================================================================
   1. DESIGN TOKENS
   Change these here and the whole site follows. Palette is first, then
   layout rhythm, then elevation, then motion, then shape.
   ========================================================================== */
:root {
  /* ---- Palette ---- */
  --accent: #0f766e;
  --accent-light: #14b8a6;
  --accent-warm: #a06a3f;
  --dark: #111;
  --text: #1f1f1f;
  --text-light: #3a3a3a;
  --text-muted: #555;
  --bg: #fff;
  --bg-off: #fafaf9;
  --border: #e8e8e6;

  /* ---- Rhythm ---- */
  --section-pad: clamp(56px, 8vw, 96px); /* fluid vertical section padding */
  --measure: 65ch;                        /* comfortable reading measure */

  /* ---- Elevation (layered diffuse shadows for realistic depth) ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 16px -4px rgba(0,0,0,0.06), 0 2px 6px -1px rgba(0,0,0,0.03);
  --shadow-card: 0 4px 24px -8px rgba(0,0,0,0.04), 0 2px 8px -2px rgba(0,0,0,0.02);
  --shadow-card-hover: 0 16px 32px -8px rgba(0,0,0,0.08), 0 4px 12px -2px rgba(0,0,0,0.04);
  --shadow-photo: 0 20px 40px -12px rgba(0,0,0,0.15), 0 8px 16px -4px rgba(0,0,0,0.06);

  /* ---- Motion ---- */
  --ease: 0.3s ease;              /* fast: color, opacity, small transforms */
  --ease-smooth: 0.35s ease;      /* smooth: borders, shadows */
  --ease-card: 0.5s cubic-bezier(0.16, 1, 0.3, 1);  /* premium spring-like card lift */

  /* ---- Shape ---- */
  --radius: 4px;                  /* default card / image / button corner */
  --radius-sm: 3px;               /* small badges, tags */
}

html { scroll-behavior: smooth; }
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  body { animation: pageFadeIn 0.3s ease both; }
}
body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--text); background: var(--bg);
  line-height: 1.8; font-size: 18px; font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  letter-spacing: -0.005em;
}
p { font-weight: 400; }

/* ==========================================================================
   PREMIUM FINISH: Matte Noise Overlay
   Eliminates color banding on dark gradients and gives the screen a
   physical, high-quality matte texture. Felt, not seen.
   ========================================================================== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ==========================================================================
   PREMIUM FINISH: Polished Edge Borders
   Mimics light catching the edge of polished glass. Uses a gradient
   painted onto a 1px pseudo-element border via CSS mask compositing.
   ========================================================================== */
.team-card::before,
.funding-card::before,
.collab-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0) 70%,
    rgba(255, 255, 255, 0.12) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 10;
}
/* Ensure parents can contain the absolute pseudo-element */
.funding-card, .collab-card { position: relative; }

h1, h2, h3 {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Subtle rounded corners on standalone images for a softer, modern feel */
img { border-radius: 6px; }

/* Focus states for accessibility */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  background: var(--accent-light);
  z-index: 110;
  transition: width 0.1s ease-out;
  pointer-events: none;
}

/* Back to top button */
.back-to-top {
  position: fixed; bottom: 32px; right: 32px; z-index: 90;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--ease), transform var(--ease), background var(--ease), border-color var(--ease);
  box-shadow: var(--shadow-sm);
}
.back-to-top.visible {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.back-to-top:hover {
  background: var(--dark); border-color: var(--dark);
}
.back-to-top svg { stroke: var(--text); transition: stroke var(--ease); }
.back-to-top:hover svg { stroke: #fff; }
@media (max-width: 600px) {
  .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
}

/* Scroll fade-up animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   NAV — Standard nav used by interior pages (research, team, etc.)
   ========================================================================== */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 24px 40px;
  display: flex; align-items: center; justify-content: space-between;
  mix-blend-mode: difference;
}
nav.scrolled {
  mix-blend-mode: normal;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 16px 40px;
}
nav .logo {
  color: #fff; font-size: 14px; font-weight: 700;
  letter-spacing: 2.5px; text-decoration: none; text-transform: uppercase;
}
nav .logo span { opacity: 0.5; }
nav.scrolled .logo { color: var(--dark); }

nav ul {
  list-style: none; display: flex; gap: 28px; align-items: center;
  margin: 0; padding: 0;
}
nav ul li a {
  /* Contrast bump: 0.75 -> 0.85 to clear WCAG AA on the dark hero */
  color: rgba(255,255,255,0.85); text-decoration: none;
  font-size: 18px; font-weight: 500; letter-spacing: 1.4px;
  text-transform: uppercase; transition: color var(--ease);
}
nav ul li a:hover { color: #fff; }
nav.scrolled ul li a { color: var(--text-light); }
nav.scrolled ul li a:hover { color: var(--dark); }

nav ul li a.active, nav.scrolled ul li a.active {
  color: var(--accent-light) !important;
  border-bottom: 2px solid var(--accent-light);
  padding-bottom: 4px;
}
nav.scrolled ul li a.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
}

/* ==========================================================================
   HOME PAGE TOP BAR — Used only by index.html (full-screen landing)
   ========================================================================== */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  padding: 24px 40px;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: auto;
  background: rgba(10, 14, 13, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.top-bar .logo {
  color: #fff; font-size: 14px; font-weight: 700;
  letter-spacing: 2.5px; text-decoration: none; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.top-bar .logo span { opacity: 0.5; }
.top-bar .page-links {
  display: flex; gap: 36px; align-items: center;
}
.top-bar .page-links a {
  /* Contrast bump: 0.85 on dark hero with text-shadow clears WCAG AA */
  color: rgba(255,255,255,0.9); text-decoration: none;
  font-size: 18px; font-weight: 500; letter-spacing: 1.4px;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  transition: color var(--ease);
  position: relative;
  padding-bottom: 4px;
}
.top-bar .page-links a::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; width: 0; height: 1px;
  background: var(--accent-light);
  transition: width var(--ease);
}
.top-bar .page-links a:hover { color: var(--accent-light); }
.top-bar .page-links a:hover::after { width: 100%; }

/* ==========================================================================
   HAMBURGER + MOBILE MENU — Shared across all pages
   ========================================================================== */
.hamburger {
  display: none;
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  position: relative;
  z-index: 200;
  padding: 0;
  margin-left: auto;
}
.hamburger span {
  position: absolute;
  left: 4px; right: 4px;
  height: 1.5px;
  background: #fff;
  /* Only animate the properties that change in the open/scrolled states.
     "transition: all" was animating EVERY property's first appearance,
     which produced a visible flash in the top-right on the home page
     (where body fade-in no longer masks it). */
  transition: top var(--ease), bottom var(--ease),
              transform var(--ease), opacity var(--ease),
              background-color var(--ease);
  transform-origin: center;
}
nav.scrolled .hamburger span { background: var(--dark); }
.hamburger span:nth-child(1) { top: 10px; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 10px; }
.hamburger.open span:nth-child(1) {
  top: 50%; transform: translateY(-50%) rotate(45deg);
}
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) {
  bottom: 50%; transform: translateY(50%) rotate(-45deg);
}

.mobile-menu {
  position: fixed; inset: 0;
  background: rgba(17, 17, 17, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 150;
  opacity: 0; pointer-events: none;
  transition: opacity var(--ease-smooth);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.mobile-menu.open {
  opacity: 1; pointer-events: auto;
}
/* When the menu is open, lift the nav (which contains the hamburger
   close button) above the menu's z-index: 150, and disable the
   mix-blend-mode that would otherwise paint the close icon invisibly
   against the dark menu overlay. Without this, the open menu covers
   the X and users can't tap to close. Mirror for the home page top-bar. */
body.menu-open nav {
  z-index: 200;
  mix-blend-mode: normal;
}
body.menu-open .top-bar {
  z-index: 200;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mobile-menu ul {
  list-style: none;
  text-align: center;
  padding: 0; margin: 0;
}
.mobile-menu li { margin: 20px 0; }
.mobile-menu a {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 7vw, 36px);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.5px;
  transition: color var(--ease);
  display: inline-block;
}
.mobile-menu a:hover,
.mobile-menu a.active { color: var(--accent-light); }
/* Suppress the browser default focus ring on menu-open auto-focus
   (JS calls firstLink.focus() so screen-reader/keyboard users land
   inside the menu). Without this, touch users see a teal/blue box
   around "Home" every time they open the menu — the focus is real,
   but the visible indicator is only meant for keyboard navigation. */
.mobile-menu a:focus { outline: none; }
.mobile-menu a:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 8px;
  border-radius: 4px;
}
body.menu-open { overflow: hidden; }

/* Mobile menu staggered entrance */
.mobile-menu li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.mobile-menu.open li {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu.open li:nth-child(1) { transition-delay: 0.10s; }
.mobile-menu.open li:nth-child(2) { transition-delay: 0.16s; }
.mobile-menu.open li:nth-child(3) { transition-delay: 0.22s; }
.mobile-menu.open li:nth-child(4) { transition-delay: 0.28s; }
.mobile-menu.open li:nth-child(5) { transition-delay: 0.34s; }
.mobile-menu.open li:nth-child(6) { transition-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu li { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 768px) {
  .hamburger { display: block; }
  nav ul { display: none !important; }
  .top-bar .page-links { display: none !important; }
}

/* ==========================================================================
   FOOTER — Shared across all interior pages
   ========================================================================== */
footer {
  background: var(--dark); color: rgba(255,255,255,0.55);
  padding: 48px 0 40px; font-size: 13px; letter-spacing: 0.3px;
}
footer .container {
  max-width: 1080px; margin: 0 auto; padding: 0 40px;
}
.footer-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-lab-name {
  font-size: 14px; font-weight: 700; color: #fff;
  letter-spacing: 2.5px; text-transform: uppercase;
  margin-bottom: 6px;
}
.footer-lab-name span { opacity: 0.5; }
.footer-affiliation {
  font-size: 13px; color: rgba(255,255,255,0.45);
  display: flex; align-items: center; gap: 8px;
}
.footer-sep { opacity: 0.4; }
.footer-bottom {
  font-size: 12px; color: rgba(255,255,255,0.35);
  letter-spacing: 0.3px;
}
footer a { color: rgba(255,255,255,0.45); text-decoration: none; transition: color var(--ease); }
footer a:hover { color: rgba(255,255,255,0.85); }
@media (max-width: 640px) {
  .footer-top { flex-direction: column; align-items: center; text-align: center; }
  .footer-affiliation { justify-content: center; }
  .footer-bottom { text-align: center; }
}

/* ==========================================================================
   TYPOGRAPHY POLISH — shared across all pages
   ========================================================================== */
/* Tabular numerals for aligned numbers */
.pub-date, .date-badge, .pub-journal, .pub-authors,
.contact-phone, .address-block, footer .footer-copyright {
  font-variant-numeric: tabular-nums;
}
/* Small caps for UI labels */
.member-title, .contact-role, .pub-type,
nav ul li a, nav .nav-links a, .top-bar .page-links a {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
}

/* Hero H1 — shared base style for interior-page banners.
   Pages can override font-size in their own inline <style> if needed. */
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 20px;
  letter-spacing: -1.2px;
}

/* Hero entrance animation */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1, .landing h1 { animation: heroFadeUp 0.8s ease both; }
.hero-dept, .hero-cta, .hero-subtitle, .hero-descriptor,
.dept-label, .tagline { animation: heroFadeUp 0.8s ease 0.2s both; }
.dept-label { animation-delay: 0.1s; }
@media (prefers-reduced-motion: reduce) {
  .hero h1, .landing h1, .hero-dept, .hero-cta, .hero-subtitle,
  .hero-descriptor, .dept-label, .tagline { animation: none; }
}

/* Reading-measure cap for body prose on wide screens.
   Applies to paragraphs in primary content sections, keeping lines 45-75 chars. */
.overview p, .therapeutic-focus .focus-text p,
.trainee-affiliation, .interest-group p,
.opportunities-text, .location-text p,
.pillar-card p, .funding-card p {
  max-width: var(--measure);
}

/* ==========================================================================
   SHARED HERO + SECTION PATTERNS — Interior pages
   These were previously duplicated inline on every page. Pages can still
   override per-page specifics (padding, alignment, alternate gradient) via
   their own inline <style> block without touching the defaults here.
   ========================================================================== */

/* Hero banner base — the default dark gradient + decorative glow.
   funding.html overrides the gradient inline (uses var(--dark) variant). */
.hero {
  position: relative;
  min-height: 28vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #141414 50%, #0f1a1a 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 75% 40%, rgba(15,118,110,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.hero-descriptor {
  font-size: 20px; color: rgba(255,255,255,0.82);
  line-height: 1.75; max-width: 520px;
  margin-top: 20px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
  position: relative; z-index: 2;
}

/* Section labels + headings — interior pages (team, publications, contact). */
.section-label {
  font-size: 20px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 16px;
}
.section-label::before {
  content: ''; width: 24px; height: 1.5px; background: var(--accent);
}
.section-heading {
  font-family: 'Playfair Display', serif;
  font-size: 44px; font-weight: 700; color: var(--dark);
  margin-bottom: 48px;
  letter-spacing: -0.5px;
  position: relative; padding-top: 24px;
}
.section-heading::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 40px; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
}

/* Generic content section — used by publications and contact. */
.content-section {
  padding: clamp(56px, 8vw, 96px) 0; background: var(--bg);
  position: relative;
}
.content-section.alt { background: var(--bg-off); }

/* Subtle gradient divider between sections */
.content-section + .content-section::before,
.team-section + .team-section::before,
.funding-section + .content-section::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(320px, 60%); height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  opacity: 0.25;
}
.content-section .container {
  max-width: 1080px; margin: 0 auto; padding: 0 40px;
}

/* Global mobile-typography floor: 16px body on <=600px.
   Previously duplicated verbatim in all 5 interior pages' inline <style>. */
@media (max-width: 600px) {
  body, p, .pub-authors, .pub-journal, .news-caption,
  .member-email, .contact-email, .contact-affiliation,
  .contact-phone, .contact-focus, .address-block,
  .address-intro, .pillar-card p, .funding-card p,
  .interest-group p, .news-item p, .opportunities-text,
  .location-text p, .trainee-affiliation, .interest-group-caption,
  .location-caption, .pub-content {
    font-size: 16px;
  }
}

/* ==========================================================================
   HERO VARIANTS — page-specific modifier classes
   Base .hero (above) provides default dark gradient + center justification.
   These modifiers layer on the per-page exceptions.
   ========================================================================== */

/* Default hero padding for publications, contact, funding */
.hero { padding: 120px 60px 60px; }

/* Team hero — left-aligned with decorative right-side gradient + taller padding */
.hero.hero-left {
  align-items: flex-start;
  padding: 80px 60px;
}
.hero.hero-left::after {
  content: ''; position: absolute;
  right: 0; top: 0; width: 40%; height: 100%;
  background: radial-gradient(ellipse at 80% 50%, rgba(15,118,110,0.06) 0%, transparent 70%);
}

/* Funding hero — muted gradient, flush-left */
.hero.hero-muted {
  background: linear-gradient(135deg, var(--dark) 0%, #1a1a1a 100%);
  align-items: flex-start;
  text-align: left;
}

/* Hero responsive — consolidated from 5 duplicated @media blocks */
@media (max-width: 900px) {
  .hero { padding: 80px 32px 40px; min-height: auto; }
  .hero.hero-left { padding: 70px 32px; }
  .hero h1 { font-size: 36px; }
  /* Interior page heroes have only the h1 inside the dark band — the
     base 20px margin-bottom on .hero h1 leaves dead space below the
     title so it floats above visual center. Zero it on mobile so the
     title sits centered between the equal top/bottom paddings. */
  .hero h1 { margin-bottom: 0; }
  /* Nav padding shrinks alongside hero so the logo lines up with the
     content below it (was 40px while hero was 32px). */
  nav { padding: 20px 32px; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: 28px; }
  .hero.hero-left { padding: 60px 24px; }
  /* Match hero's 24px horizontal padding so MSKI Laboratory and the
     page h1 below it share the same left edge. */
  nav { padding: 18px 24px; }
}

/* ==========================================================================
   CTA BUTTONS — Shared across research/team/contact
   ========================================================================== */

/* Dark ghost CTA — on light backgrounds */
.cta-button {
  display: inline-block;
  padding: 14px 32px;
  background: transparent;
  color: var(--dark);
  border: 1.5px solid var(--dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
  cursor: pointer;
}
.cta-button:hover {
  background: var(--dark);
  color: #fff;
  transform: translateX(4px);
}

/* White ghost CTA — on dark hero backgrounds */
.hero-cta {
  display: inline-block;
  margin-top: 32px;
  padding: 14px 32px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
  position: relative;
  z-index: 2;
}
.hero-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateX(4px);
}

/* ==========================================================================
   RESEARCH PAGE
   ========================================================================== */
.overview { padding: clamp(56px, 8vw, 96px) 0; background: var(--bg); }
.overview .container { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.overview h2 {
  /* Match the .section-heading pattern used elsewhere: dark heading
     with the teal accent bar above. */
  font-family: 'Playfair Display', serif;
  font-size: 44px; font-weight: 700; color: var(--dark);
  margin-bottom: 48px; letter-spacing: -0.5px;
  position: relative; padding-top: 24px;
}
.overview h2::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 40px; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
}
.overview p {
  font-size: 18px; color: var(--text-light);
  line-height: 1.85; margin-bottom: 24px;
  max-width: 680px;
}
.overview p.lead::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 68px; font-weight: 700;
  float: left; line-height: 0.85;
  /* No top padding — cap-height of the M should align with the cap-height
     of the first line of text, not sit below it. Slight negative top
     margin compensates for Playfair Display's internal leading. */
  padding: 0 14px 0 0;
  margin-top: -2px;
  color: var(--dark);
}
.overview p:last-child { margin-bottom: 0; }
.overview-figures {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 36px 32px; margin-top: 56px;
}
.overview-figure { margin: 0; overflow: hidden; border-radius: var(--radius); }
.overview-figure img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  display: block;
  box-shadow: var(--shadow-photo);
  transition: transform 0.6s ease;
}
/* Top row of the research overview grid: square aspect, used on figures
   whose source image is naturally 1:1 (intracellular-MRSA confocal) and
   on the bioluminescence tile so the top row stays uniform. */
.overview-figure--square img { aspect-ratio: 1 / 1; }

/* Bioluminescence: source is 4:3 with a color-scale legend on the far right
   that we don't need on the site. Shift the crop window left so we trim
   more off the right (legend) and less off the left, keeping all three
   mice — and their right knees — in frame. */
.overview-figure img[src*="bioluminescence-overview"] {
  object-position: 8% center;
}
.overview-figure:hover img {
  transform: scale(1.02);
}
.overview-figure figcaption {
  font-family: var(--font-body);
  font-style: italic; font-size: 14px;
  color: var(--text-muted); margin-top: 14px; line-height: 1.5;
  border-left: 2px solid var(--border);
  padding-left: 12px;
}
@media (max-width: 720px) {
  .overview-figures { grid-template-columns: 1fr; gap: 28px; }
}

.therapeutic-focus {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--bg-off);
  border-top: 1px solid var(--border);
}
.therapeutic-focus .container { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.therapeutic-focus h2 {
  /* Match the .section-heading pattern used elsewhere. */
  font-family: 'Playfair Display', serif;
  font-size: 44px; font-weight: 700; color: var(--dark);
  margin-bottom: 16px; letter-spacing: -0.5px;
  position: relative; padding-top: 24px;
}
.therapeutic-focus h2::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 40px; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
}
.therapeutic-focus .section-subtitle {
  font-family: var(--font-body);
  font-size: 20px; font-weight: 400; font-style: normal;
  color: var(--text-light); letter-spacing: 0.01em;
  margin-bottom: 48px; line-height: 1.5;
}
.focus-split {
  display: flex; flex-direction: column;
  gap: 40px;
}
.focus-diagram { margin: 0; overflow: hidden; border-radius: var(--radius); }
.focus-diagram img {
  width: 100%; display: block;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.18);
  transition: transform 0.6s ease;
}
.focus-diagram:hover img {
  transform: scale(1.02);
}
.focus-diagram figcaption {
  font-family: var(--font-body);
  font-style: italic; font-size: 14px;
  color: var(--text-light); margin-top: 14px; line-height: 1.5;
}
.focus-text h3 {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 700; color: var(--dark);
  margin-bottom: 20px; line-height: 1.25; letter-spacing: -0.3px;
}
.focus-text p {
  font-size: 17px; color: var(--text);
  line-height: 1.8; margin-bottom: 20px;
  /* Cap reading width on wide displays for readability (~65 char/line). */
  max-width: 65ch;
}
.focus-text p:last-child { margin-bottom: 0; }

.pillars {
  /* Alternates with .therapeutic-focus above (off-white) so the research
     page reads white → off-white → white from top to bottom. */
  padding: clamp(56px, 8vw, 96px) 0; background: var(--bg);
  border-top: 1px solid var(--border);
}
.pillars .container { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.pillars h2 {
  /* Match the .section-heading pattern used elsewhere. */
  font-family: 'Playfair Display', serif;
  font-size: 44px; font-weight: 700; color: var(--dark);
  margin-bottom: 48px; letter-spacing: -0.5px;
  position: relative; padding-top: 24px;
}
.pillars h2::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 40px; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
}

.capabilities {
  padding: clamp(56px, 8vw, 96px) 0; background: var(--bg-off);
  border-top: 1px solid var(--border);
}
.capabilities .container { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.capabilities h2 {
  font-family: 'Playfair Display', serif;
  font-size: 40px; font-weight: 700; color: var(--accent);
  margin-bottom: 56px; letter-spacing: -0.5px;
}
.capabilities-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.capability-item {
  overflow: hidden; border-radius: var(--radius); background: var(--bg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--ease-smooth), transform var(--ease-card);
  display: flex; flex-direction: column; cursor: default;
}
.capability-item:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.capability-item .capability-media {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-off);
}
.capability-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.3) contrast(1.03) brightness(0.97);
  transition: filter 0.5s ease, transform 0.6s ease;
}
.capability-item:hover img {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.02);
}
.capability-item img.no-crop {
  /* Inherit object-fit: cover from the base .capability-item img rule
     so the tile fills its frame at the same visible size as the others.
     We only override the filter+background here to preserve H&E pinks. */
  filter: none;
  background: #fff;
}
.capability-item:hover img.no-crop { transform: scale(1.01); }
.capability-item .capability-text { padding: 22px 24px 26px; }
.capability-item h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700; color: var(--dark);
  line-height: 1.25; margin-bottom: 10px; letter-spacing: -0.3px;
}
/* Title→text spacing stays uniform across all platform cards (no padded
   2-line min-height on shorter titles like "Clinical Studies"). */
.capability-item p {
  font-size: 15px; color: var(--text-light);
  line-height: 1.6; margin: 0;
}
@media (max-width: 900px) {
  .capabilities-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .capability-item .capability-text { padding: 18px 20px 22px; }
  .capability-item h3 { font-size: 17px; margin-bottom: 8px; }
  .capability-item p { font-size: 14px; line-height: 1.55; }
}
@media (max-width: 600px) {
  .capabilities-grid { grid-template-columns: 1fr; }
  .capability-item .capability-text { padding: 20px 22px 24px; }
  .capability-item h3 { font-size: 19px; margin-bottom: 10px; }
  .capability-item p { font-size: 15px; line-height: 1.6; }
  /* Mobile heading sizes — match .section-heading: 32px on <=600px,
     28px on <=380px (handled in the smaller media block at the end of
     this file alongside .section-heading). */
  .overview h2, .therapeutic-focus h2, .pillars h2, .capabilities h2 { font-size: 32px; }
  .overview p { font-size: 16px; }
  .overview p.lead::first-letter { font-size: 52px; padding: 0 10px 0 0; margin-top: -2px; }
  .overview-figure figcaption, .focus-diagram figcaption { font-size: 13px; }
  .therapeutic-focus .section-subtitle { font-size: 18px; }
  .focus-text h3 { font-size: 20px; }
  .focus-text p { font-size: 15px; }
}

/* ==========================================================================
   TEAM PAGE
   ========================================================================== */
.team-section {
  padding: clamp(56px, 8vw, 96px) 0; background: var(--bg);
  position: relative;
}
.team-section .container { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.team-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 44px; font-weight: 700; color: var(--dark);
  margin-bottom: 56px; letter-spacing: -0.5px;
  position: relative; padding-top: 24px;
}
.team-section h2::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 40px; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
}

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.team-lead-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 48px; margin-bottom: 56px;
}
.team-card.lead .member-photo { aspect-ratio: 3 / 4; }
.team-card.lead .member-text { padding: 32px 36px 36px; }
.team-card.lead .member-focus {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 17px; line-height: 1.6; color: var(--text-light);
  margin: 16px 0 22px; padding-top: 16px;
  border-top: 1px solid var(--border);
}

.team-card {
  background: var(--bg); border: 1px solid transparent;
  position: relative;
  transition: transform var(--ease-card), border-color var(--ease-smooth), box-shadow var(--ease-smooth);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.team-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.team-card:hover::after { transform: scaleX(1); }
.team-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.member-photo {
  width: 100%; aspect-ratio: 4 / 5;
  overflow: hidden; background: var(--bg-off);
}
.member-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.member-photo:hover img { transform: scale(1.02); }
.member-text { padding: 28px 32px 32px; }
.member-title {
  font-size: 17px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text);
  margin-bottom: 8px;
}
.member-name {
  /* Unified size across all team members (leads + lab members) for a
     consistent, professional roster look. */
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 700; color: var(--dark);
  margin-bottom: 16px; line-height: 1.2; letter-spacing: -0.2px;
}
.member-email { font-size: 18px; color: var(--text); margin-bottom: 20px; }
.member-email a { color: var(--accent); text-decoration: none; transition: color var(--ease); }
.member-email a:hover { color: var(--accent-light); }
.member-links { display: flex; gap: 16px; flex-wrap: wrap; }
.member-link {
  font-size: 15px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent);
  text-decoration: none; border: 1px solid var(--accent);
  padding: 8px 16px; transition: all var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.member-link:hover { background: var(--accent); color: #fff; }

/* Director / Co-Director use the same title styling as other roles for a
   uniform team page voice. */

/* Subsection heading: deliberately lower-weight than the section h2
   above. Smaller Inter eyebrow + hairline rule gives clear hierarchy:
   h2 (44px Playfair, teal bar) → h3 (13px uppercase Inter eyebrow). */
.collab-group-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 2.4px;
  margin: 48px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.collab-group-title:first-of-type { margin-top: 0; }

.collab-card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  align-items: stretch;
}
/* Two-zone card: dark charcoal header + white body — same family as the
   funding cards so the team page reads as part of one design system. */
.collab-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(16, 18, 20, 0.06);
  box-shadow: 0 12px 32px rgba(16, 18, 20, 0.08);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.collab-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(16, 18, 20, 0.13);
}
.collab-card-header {
  background: linear-gradient(135deg, #2a2e31 0%, #0d1114 100%);
  padding: 26px 28px 28px;
  display: flex; flex-direction: column; gap: 6px;
}
.collab-card-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-light, #19b8a7);
}
.collab-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; color: #ffffff;
  line-height: 1.15; letter-spacing: -0.3px;
}
.collab-card-body {
  padding: 18px 28px 22px;
  flex: 1;
}
.collab-card ul {
  list-style: none; padding: 0; margin: 0;
}
.collab-card li {
  font-size: 15px; line-height: 1.4;
  color: #1f2937;
  padding: 10px 0 10px 20px;
  position: relative;
  border-bottom: 1px solid rgba(16, 18, 20, 0.05);
}
.collab-card li:last-child { border-bottom: none; }
.collab-card li::before {
  content: ""; position: absolute;
  left: 0; top: 18px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 900px) {
  .team-lead-grid { grid-template-columns: 1fr; gap: 32px; max-width: 480px; margin: 0 auto 40px; }
  .team-grid { grid-template-columns: 1fr; gap: 32px; max-width: 480px; margin: 0 auto; }
  .collab-card-grid { grid-template-columns: repeat(2, 1fr); }
  .team-section .container { padding: 0 24px; }
}
@media (max-width: 600px) {
  .member-text { padding: 24px 24px 28px; }
  .member-name { font-size: 22px; }
  .team-section h2 { font-size: 28px; }
  .collab-card-grid { grid-template-columns: 1fr; }

  /* Director / Co-Director cards: keep the name + credentials on one
     line. Buttons (Faculty Profile + LinkedIn) are sized via the
     unified .team-card .member-link rule below so all team members
     show similarly-sized hyperlinks. */
  .team-card.lead .member-text { padding: 24px 20px 28px; }
  .team-card.lead .member-name {
    font-size: 21px;
    letter-spacing: -0.3px;
    white-space: nowrap;
  }

  /* Unified hyperlink sizing across the whole team page on mobile.
     Default desktop styling is 15px / 8 16 / 1px tracking — too large
     for the lead cards (forces Faculty Profile + LinkedIn to wrap) and
     visually heavier than the small lab-member buttons need. 13px reads
     as a refined, consistent button across both the leads and the
     other team members. */
  .team-card .member-links { gap: 8px; flex-wrap: wrap; }
  .team-card .member-link {
    font-size: 13px;
    padding: 7px 11px;
    letter-spacing: 0.5px;
  }
}

@media (max-width: 380px) {
  /* Extra-narrow phones (iPhone SE 320, Galaxy Fold cover) — drop the
     lead-card name one more step so the longer co-director name
     "Adrienn Markovics, MD, PhD" still fits on one line. */
  .team-card.lead .member-name { font-size: 18px; }

  /* Unified button sizing one notch smaller on the very narrowest
     phones. Still applies to all team cards (leads + lab members) so
     hyperlinks remain consistent across the page. */
  .team-card .member-links { gap: 6px; }
  .team-card .member-link {
    font-size: 12px;
    padding: 6px 10px;
    letter-spacing: 0.4px;
  }
  /* "Adrienn_Markovics@rush.edu" is a single unbreakable token at 16px
     and overshoots the card by ~7px on iPhone SE. Drop one notch so it
     sits cleanly inside. */
  .team-card.lead .member-email a { font-size: 15px; }
}

/* ==========================================================================
   PUBLICATIONS / NEWS PAGE
   ========================================================================== */
.date-badge {
  display: inline-block;
  font-size: 14px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-light);
  margin-bottom: 12px; padding: 4px 10px;
  background: var(--bg-off); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.pub-date {
  /* Eyebrow scale to pair cleanly with the .pub-type pill. */
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-light);
  margin-bottom: 6px;
}
.view-all-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 32px;
  font-size: 14px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent);
  text-decoration: none;
  transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
.view-all-link:hover { color: var(--accent-light); gap: 14px; }
.view-all-link svg { stroke: currentColor; }

.news-item {
  margin-bottom: 64px; padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
  transition: border-color var(--ease-smooth), background-color var(--ease-smooth);
}
/* Desktop: image on the left, text wraps to the right at its native
   aspect ratio. Float-based layout so the date-badge / h3 / body
   paragraphs start at the same vertical Y as the image top — not
   pushed down by grid row inflation. On mobile we leave the default
   vertical stacking. */
@media (min-width: 768px) {
  .news-item { overflow: hidden; }   /* contain the floats */
  .news-item > .news-item-media,
  .news-item > .news-item-media-duo {
    float: left;
    width: 400px;
    margin: 0 56px 16px 0;
  }
  .news-item > .news-caption {
    float: left;
    clear: left;
    width: 400px;
    margin: 0 56px 8px 0;
    /* drop the default left border/padding when used as image caption */
    padding-left: 0;
    border-left: none;
    margin-top: 0;
  }
}
.news-item:last-child {
  border-bottom: none; margin-bottom: 0; padding-bottom: 0;
}
.news-item-media {
  margin-bottom: 28px; border-radius: var(--radius); overflow: hidden;
  max-width: 560px; box-shadow: var(--shadow-card);
}
.news-item-media.portrait { max-width: 520px; }
.news-item-media img {
  width: 100%; height: auto; display: block;
  transition: transform 0.5s ease;
}
.news-item-media:hover img { transform: scale(1.02); }
.news-item-media-duo {
  display: grid; grid-template-columns: 2fr 3fr; gap: 16px;
  align-items: stretch;
  margin-bottom: 28px; max-width: 700px;
}
.news-item-media-duo .news-item-media {
  margin-bottom: 0; max-width: none; overflow: hidden;
}
.news-item-media-duo .news-item-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: left center;
}
@media (max-width: 600px) {
  .news-item-media-duo { grid-template-columns: 1fr; }
}
.news-caption {
  font-size: 15px; color: var(--text-muted);
  font-style: italic; margin-top: 12px; letter-spacing: 0.3px;
  border-left: 2px solid var(--border);
  padding-left: 12px;
}
.news-item h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; color: var(--dark);
  margin-bottom: 14px; line-height: 1.25;
  letter-spacing: -0.2px;
}
@media (min-width: 768px) {
  /* On desktop the news headline carries more presence next to the
     larger image. */
  .news-item h3 { font-size: 28px; }
}
.news-item p {
  font-size: 18px; color: var(--text-light);
  line-height: 1.7; margin-bottom: 16px;
  max-width: 65ch;
}
@media (min-width: 768px) {
  /* On desktop the paragraph sits next to a 400px floated image. With
     max-width capping the BOX to ~585px, the text gets squeezed into
     ~130px because content has to clear the float on the left. Drop
     the cap so the paragraph spans the full available width and text
     wraps around the image naturally. */
  .news-item p { max-width: none; }
}

/* Editorial eyebrow style for the date label inside news-items —
   replaces the default pill so it pairs better with the large image
   and gives the headline more visual weight. */
.news-item .date-badge {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 2.4px;
  color: var(--accent);
  font-weight: 600;
}
.news-item .news-caption {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.2px;
}
.news-item a:not(.view-all-link) {
  color: var(--accent); text-decoration: none;
  font-weight: 500; font-size: 18px;
  transition: color var(--ease); display: inline-block;
}
.news-item a:hover { color: var(--accent-light); }

.publications-list { margin-top: 56px; }
.pub-item {
  padding: 28px 32px; margin: 0 -32px;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--ease-smooth);
}
.pub-item:last-child { border-bottom: none; }
.pub-item:hover { background-color: var(--bg-off); }
.pub-item.enhanced {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 32px; padding: 36px 32px;
  margin: 0 -32px; border-bottom: 1px solid var(--border);
  transition: background-color var(--ease-smooth);
  align-items: start;
}
.pub-item.enhanced:hover {
  background-color: var(--bg-off);
  border-left-color: var(--accent);
  padding-left: 36px;
}
.pub-item.featured {
  grid-template-columns: 260px 1fr;
  gap: 48px; padding: 56px 32px 48px;
  background: var(--bg-off);
  border-top: 2px solid var(--accent-warm);
  position: relative;
}
.pub-item.featured::before {
  content: 'Featured';
  position: absolute; top: -2px; left: 32px;
  padding: 5px 14px;
  background: var(--accent-warm); color: #fff;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.pub-item.featured .pub-thumb {
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.22);
}
.pub-item.featured .pub-title {
  font-size: 30px; line-height: 1.25;
  letter-spacing: -0.3px; margin-bottom: 14px;
}
.pub-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-size: 20px;
  line-height: 1.55; color: var(--text);
  margin: 22px 0; padding-left: 18px;
  border-left: 3px solid var(--accent-warm);
}

.pub-thumb {
  display: block; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--ease-smooth), transform var(--ease-smooth);
  aspect-ratio: 8.5 / 11;
}
.pub-thumb:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.pub-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pub-meta {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.pub-type {
  /* Compact category pill — sized to feel like an eyebrow tag, in line
     with the editorial "APRIL 2026" eyebrow used in the news section. */
  display: inline-block; padding: 3px 9px;
  background: rgba(15,118,110,0.08);
  color: var(--accent);
  font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.pub-item.enhanced .pub-date { margin-bottom: 0; }
.pub-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; color: var(--dark);
  margin-bottom: 8px; line-height: 1.4;
}
.pub-authors {
  font-size: 17px; color: var(--text-light);
  margin-bottom: 8px; font-weight: 500;
}
.pub-journal {
  font-size: 17px; color: var(--text-muted);
  margin-bottom: 12px; font-style: italic;
}
.pub-abstract {
  margin: 16px 0 12px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.pub-abstract summary {
  cursor: pointer;
  font-size: 13px; font-weight: 600;
  color: var(--accent); letter-spacing: 1.8px;
  text-transform: uppercase;
  list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--ease); padding: 8px 0;
}
.pub-abstract summary::-webkit-details-marker { display: none; }
.pub-abstract summary::before {
  content: '';
  display: inline-block; width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center;
  transition: transform var(--ease);
  flex-shrink: 0;
}
.pub-abstract[open] summary::before { transform: rotate(180deg); }
.pub-abstract summary:hover { color: var(--accent-light); }
.pub-abstract p {
  margin-top: 14px; font-size: 17px;
  line-height: 1.75; color: var(--text-light);
}
.pub-links { display: flex; gap: 20px; flex-wrap: wrap; }
.pub-link {
  color: var(--accent); text-decoration: none;
  font-size: 15px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}
.pub-link:hover { color: var(--accent-light); gap: 10px; }
.pub-link.primary {
  color: #fff; background: var(--accent);
  padding: 8px 16px; border-radius: var(--radius-sm);
}
.pub-link.primary:hover { background: var(--accent-light); color: #fff; }
@media (max-width: 900px) {
  .news-item h3 { font-size: 20px; }
  /* Establish a clear title → authors → journal hierarchy on every
     phone width. Without these, .pub-authors stays at its 17px default
     and ends up larger than the 16px .pub-title — visually inverting
     the citation order. Title is now Playfair 22px (largest), authors
     Inter 15px, journal italic 14px. */
  .pub-title { font-size: 22px; line-height: 1.25; margin-bottom: 8px; }
  .pub-authors { font-size: 15px; line-height: 1.55; margin-bottom: 6px; }
  .pub-journal { font-size: 14px; margin-bottom: 12px; }
  .pub-abstract p { font-size: 15px; line-height: 1.65; }
}
@media (max-width: 700px) {
  .pub-item.enhanced { grid-template-columns: 1fr; gap: 20px; padding-top: 16px; padding-bottom: 24px; }
  .pub-item { padding-top: 16px; padding-bottom: 24px; }
  .pub-thumb { max-width: 200px; }
  .pub-item.featured { grid-template-columns: 1fr; padding: 32px 24px 28px; }
  .pub-item.featured .pub-thumb { max-width: 240px; }
  .pub-item.featured .pub-title { font-size: 24px; }
  /* Heading-to-first-card gap was 92px (56px list margin + 36px item
     padding); shrink to ~24px on mobile so the heading reads as
     attached to its content. */
  .publications-list { margin-top: 8px; }
  /* The desktop -32px edge-bleed extends past the viewport on phones
     (where .container padding is only 20px). Match the bleed to the
     container's mobile padding so card edges sit flush with the viewport. */
  .pub-item, .pub-item.enhanced { margin-left: -20px; margin-right: -20px; }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 32px; max-width: 560px;
}
.contact-grid.director-layout {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 48px; align-items: start; max-width: 1100px;
}
.director-photo { margin: 0; overflow: hidden; border-radius: var(--radius); }
.director-photo img {
  width: 100%; aspect-ratio: 3 / 2;
  object-fit: cover; display: block;
  box-shadow: var(--shadow-photo);
  transition: transform 0.6s ease;
}
.director-photo:hover img {
  transform: scale(1.03);
}
.director-photo figcaption {
  /* Matches .location-caption and .interest-group-caption so every
     figure on the contact page reads with the same editorial voice. */
  font-family: 'Playfair Display', serif;
  font-style: italic; font-size: 17px;
  color: var(--text-muted);
  margin-top: 14px; line-height: 1.5;
}

.contact-card {
  background: var(--bg); border: 1px solid var(--border);
  padding: 40px 36px; border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform var(--ease-card), border-color var(--ease-smooth), box-shadow var(--ease-smooth);
}
.contact-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.contact-role {
  font-size: 17px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text);
  margin-bottom: 10px;
}
.contact-name {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; color: var(--dark);
  margin-bottom: 20px; line-height: 1.2;
}
.contact-affiliation {
  font-size: 18px; color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 22px; padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.contact-email {
  display: block; font-size: 18px; color: var(--accent);
  text-decoration: none; transition: color var(--ease);
  margin-bottom: 10px; word-break: break-word;
}
.contact-email:hover { color: var(--accent-light); }
.contact-phone {
  font-size: 18px; color: var(--text);
  margin-bottom: 18px; line-height: 1.6;
}
.contact-phone a { color: var(--text); text-decoration: none; }
.contact-phone a:hover { color: var(--accent); }
.contact-linkedin {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 18px;
  font-size: 20px; font-weight: 500;
  color: var(--accent); text-decoration: none;
  transition: color var(--ease), gap var(--ease);
}
.contact-linkedin:hover { color: var(--accent-light); gap: 10px; }
.contact-linkedin svg { flex-shrink: 0; }
.contact-focus {
  font-size: 18px; color: var(--text-light);
  line-height: 1.8; padding-top: 18px;
  border-top: 1px solid var(--border);
}

.address-grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: 56px; align-items: start;
}
.address-block { font-size: 18px; line-height: 1.9; color: var(--text); }
.address-block strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700;
  color: var(--dark); margin-bottom: 10px;
  letter-spacing: -0.3px;
}
.address-block .affiliation { color: var(--text-light); margin-bottom: 14px; }
.address-block a { color: var(--accent); text-decoration: none; }
.address-block a:hover { color: var(--accent-light); }

.location-figure { position: relative; }
.location-image {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  aspect-ratio: 3 / 2;
}
.location-image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  object-position: center right;
  transition: transform 0.6s ease;
}
.location-image:hover img { transform: scale(1.02); }
.location-caption {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-size: 17px;
  color: var(--text-muted);
  margin-top: 12px; line-height: 1.5;
}

.interest-group-wrap { max-width: 900px; }
.interest-group-image {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  margin-bottom: 14px;
  aspect-ratio: 3 / 2;
}
.interest-group-image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.interest-group-image:hover img { transform: scale(1.02); }
.interest-group-caption {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 24px; line-height: 1.5;
}
.interest-group {
  background: var(--bg); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 36px 40px; border-radius: var(--radius);
}
.interest-group h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; color: var(--dark);
  margin-bottom: 14px; letter-spacing: -0.3px;
}
.interest-group p {
  font-size: 18px; color: var(--text-light);
  line-height: 1.8; margin-bottom: 16px;
}
.interest-group p:last-child { margin-bottom: 0; }
.interest-group a {
  color: var(--accent); text-decoration: none; font-weight: 500;
}
.interest-group a:hover { color: var(--accent-light); }
@media (max-width: 900px) {
  .contact-grid.director-layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .address-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .contact-card { padding: 32px 24px; }
  .interest-group { padding: 28px 24px; }
}

/* ==========================================================================
   FUNDING PAGE — editorial dark-card design
   ========================================================================== */
.funding-section { background-color: var(--bg-off); padding: clamp(56px, 8vw, 96px) 0; }
.funding-container { max-width: 1080px; margin: 0 auto; padding: 0 40px; }

/* Section intro: eyebrow → big serif heading → descriptive paragraph.
   Sized to feel commanding on desktop without overpowering mobile. */
.funding-intro-wrap { margin-bottom: 64px; max-width: 760px; }
.funding-eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 18px;
}
.funding-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 700; color: #101214;
  line-height: 1.06; letter-spacing: -0.025em;
  margin: 0 0 22px;
}
.funding-intro {
  font-size: 19px; line-height: 1.6;
  color: #3d4246; margin: 0;
}

.funding-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px; margin-bottom: 64px;
}

/* Premium two-zone card: dark charcoal logo panel on top, white content
   panel below. Generous radius and a soft drop shadow that deepens on hover. */
.funding-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(16, 18, 20, 0.06);
  box-shadow: 0 18px 45px rgba(16, 18, 20, 0.11);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.funding-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 65px rgba(16, 18, 20, 0.15);
}

/* Charcoal logo panel — uses the same gradient image (extracted from the
   ChatGPT banner) as the wordmark banners, guaranteeing pixel-for-pixel
   parity across all four cards. */
.funding-card-icon {
  display: flex; align-items: center; justify-content: center;
  height: 240px;
  padding: 36px 44px;
  background-color: #1a1d1f;
  background-image: url("images/charcoal-bg.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* Searle: medallion sits beside a serif "The Searle Foundation"
   lockup, horizontally centered as a unit so the pairing reads as
   intentional artwork rather than left-anchored content. */
.funding-card-icon:has(.funding-card-logo--portrait) {
  justify-content: center;
  gap: 26px;
  padding: 28px 36px;
}
/* Wordmark cards use transparent banner-shaped logo PNGs that fill the
   panel edge-to-edge. The shared charcoal-bg.jpg shows through, giving
   all four cards an identical gradient background. */
.funding-card-icon:has(.funding-card-banner) {
  padding: 0;
}
.funding-card-banner {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.funding-card-logo {
  max-width: 82%; max-height: 150px;
  height: auto; width: auto;
  object-fit: contain; object-position: center;
  transition: filter var(--ease-smooth);
}
.funding-card-logo--portrait {
  /* Circular portrait medallion of John G. Searle, paired with the serif
     foundation name to act as a custom wordmark on the charcoal panel. */
  width: 156px; height: 156px;
  max-width: 156px; max-height: 156px;
  border-radius: 50%;
  object-fit: cover; object-position: center;
  border: 3px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: block;
  flex-shrink: 0;
}
.funding-card-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 38px; font-weight: 700;
  line-height: 1.05; color: #ffffff;
  letter-spacing: -0.5px;
}

/* White content panel: editorial typography with generous breathing room. */
.funding-card-type {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 13px; font-weight: 800;
  margin: 44px 48px 0;
}
.funding-card-type::after {
  content: ""; display: block;
  width: 44px; height: 4px;
  border-radius: 999px;
  background: #19b8a7;
  margin-top: 14px;
}
.funding-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 700; color: #101214;
  line-height: 1.08; letter-spacing: -0.02em;
  margin: 26px 48px 22px;
}
.funding-card p {
  font-size: 17px; line-height: 1.55;
  color: #3d4246; letter-spacing: 0;
  margin: 0 48px 44px;
}

@media (max-width: 820px) {
  .funding-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
  .funding-card { border-radius: 20px; }
  /* Panel height tightened to 165px so the dark band hugs the logo
     proportions instead of leaving negative space above and below.
     Reduced internal padding to match. */
  .funding-card-icon { height: 165px; padding: 18px 24px; }
  .funding-card-icon:has(.funding-card-logo--portrait) {
    gap: 16px; padding: 16px 22px;
  }
  .funding-card-logo { max-height: 110px; max-width: 86%; }
  .funding-card-logo--portrait {
    width: 110px; height: 110px;
    max-width: 110px; max-height: 110px;
  }
  .funding-card-logo-text { font-size: 28px; letter-spacing: -0.4px; }
  .funding-card-type { margin: 32px 32px 0; font-size: 12px; }
  .funding-card h3 { font-size: 26px; margin: 20px 32px 16px; }
  .funding-card p { font-size: 16px; line-height: 1.55; margin: 0 32px 32px; }
}

/* ==========================================================================
   MOBILE POLISH — overrides for narrow viewports
   Placed at the end of the file so it wins over component-level rules.
   ========================================================================== */

/* Keep credential suffixes (e.g., "MD, PhD") together when a name wraps. */
.credentials { white-space: nowrap; }

/* Specific long collaborator entries are allowed to wrap rather than
   getting shrunk: keeping body-size type reads more professional than
   forcing one of the names to be visibly smaller than its peers. */
@media (max-width: 400px) {

  /* Funding page: the Searle card pairs a round portrait with a serif
     "The Searle Foundation" lockup on the dark logo panel. At 320–375px
     the default sizes overflow the panel and clip the wordmark. Tighten
     the medallion, font, padding, and gap so the lockup fits down to 320px. */
  .funding-card-icon:has(.funding-card-logo--portrait) {
    gap: 14px;
    padding: 18px 18px;
  }
  .funding-card-logo--portrait {
    width: 100px; height: 100px;
    max-width: 100px; max-height: 100px;
  }
  .funding-card-logo-text {
    font-size: 22px;
    letter-spacing: -0.3px;
  }
}

@media (max-width: 600px) {
  /* Tighten the section container padding on phones so cards have room.
     Default is `0 40px` (= 80px lost) which combined with .contact-card's
     32px×24px padding leaves only ~230px of text width on a 360px screen
     and forces "John L. Hamilton, MD, PhD" to wrap. */
  .content-section .container { padding: 0 20px; }
  .contact-card { padding: 28px 22px; }

  /* Contact card — drop heading size so it fits on one line at 360px+. */
  .contact-name { font-size: 21px; line-height: 1.25; }

  /* Override the per-component 18px sizes that were beating the global
     mobile-typography floor due to source order. */
  .contact-affiliation { font-size: 16px; line-height: 1.6; }
  .contact-email,
  .contact-phone,
  .contact-focus { font-size: 16px; }
  .contact-linkedin { font-size: 17px; }

  /* Address-block heading — "Musculoskeletal Infection Laboratory" was
     wrapping at 24px Playfair on narrow screens. */
  .address-block strong { font-size: 21px; line-height: 1.25; }

  /* Research Interest Group card heading — same treatment. */
  .interest-group h3 { font-size: 21px; line-height: 1.25; }

  /* Section heading — 44px → 26px so the longer titles ("Recent Select
     Publications", 27 chars) sit on a single row on every iPhone width
     (320–430) while reading slightly more prominent than the body
     content below. Margin-bottom is tight (14px) so the heading doesn't
     leave a void above the first content block on mobile. */
  .section-heading { font-size: 26px; line-height: 1.2; margin-bottom: 14px; }
}

@media (max-width: 380px) {
  /* Extra-narrow phones (iPhone SE 320, Galaxy Fold cover) */
  .contact-name { font-size: 19px; }
  .address-block strong,
  .interest-group h3 { font-size: 20px; }
  /* Drop section headings one more notch on iPhone SE 320 so the
     longer titles ("Recent Select Publications", "Academic
     Collaborators") fit on one line. */
  .section-heading,
  .overview h2, .therapeutic-focus h2, .pillars h2, .capabilities h2,
  .team-section h2 { font-size: 24px; }
}

/* iPhone-width polish: shrink several headings/subheads that fit on
   one line on desktop (in narrower grid columns) but break to multiple
   lines on a phone where the cards become full-width but the type stays
   the same size. Drop one notch so the shorter strings fit on one line.
   Long titles ("Midwest Orthopaedics at Rush", "Preclinical Models &
   Antimicrobial Assays") will still wrap — they're inherently too long. */
@media (max-width: 400px) {
  /* (.section-heading sizing/margin handled in the @600 block above —
     keeping the breakpoint here open for any other narrow-phone tweaks.) */

  /* Funding page */
  .funding-heading { font-size: 26px; line-height: 1.1; }
  .funding-card h3 { font-size: 20px; margin: 18px 24px 14px; }
  .funding-card-type { margin: 28px 24px 0; }
  .funding-card p { margin: 0 24px 28px; }

  /* Research page — therapeutic focus + platform cards */
  .therapeutic-focus .section-subtitle { font-size: 16px; line-height: 1.4; }
  .focus-text h3 { font-size: 18px; line-height: 1.25; }
  .capability-item h3 { font-size: 17px; line-height: 1.25; }

  /* Publications at iPhone SE width — drop one notch from the @900
     mobile sizes for a tighter set on a 320px screen. Hierarchy
     remains: title > authors > journal. */
  .pub-title { font-size: 19px; line-height: 1.3; margin-bottom: 6px; }
  .pub-authors { font-size: 14px; line-height: 1.5; margin-bottom: 4px; }
  .pub-journal { font-size: 13px; margin-bottom: 10px; }
  .pub-abstract p { font-size: 14px; line-height: 1.65; }
  /* Mobile pub cards stack vertically and have tight whitespace; the
     extra divider feels like clutter. Strip the rule and tighten the
     surrounding margin so the abstract toggle reads as part of the
     citation block rather than a separated section. */
  .pub-abstract {
    border-top: none;
    padding-top: 0;
    margin: 8px 0 4px;
  }

  /* News h3 — bumped to 20px so the title clearly outranks the 16px
     body paragraph below it. The 4px gap (vs the previous 2px) reads
     as a real editorial step rather than a near-equal pairing. */
  .news-item h3 { font-size: 20px; line-height: 1.25; }

  /* Team-page collab subsection title ("Rush University Medical Center"):
     the heavy 2.4px letter-spacing pushed it to two lines at 320. Drop
     letter-spacing + font so it sits on one line. */
  .collab-group-title { font-size: 12px; letter-spacing: 1px; }
}

/* ==========================================================================
   IMAGE LIGHTBOX
   Click/tap a figure image to view it full-screen. Triggered by JS in
   scripts.js — see the IMAGE LIGHTBOX block there.
   ========================================================================== */
.lightbox-trigger {
  cursor: zoom-in;
}
.lightbox-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.lightbox-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #050709;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.2s ease;
  /* Native pinch-zoom on mobile — users can zoom into the image to read
     small labels in diagrams. */
  touch-action: pinch-zoom;
}
.lightbox-overlay.is-open {
  display: flex;
  opacity: 1;
}

.lightbox-figure {
  margin: 0;
  width: min(96vw, 1400px);
  height: 92vh;                    /* fixed height so img can fill */
  display: flex; flex-direction: column;
  align-items: center;
  gap: 14px;
  cursor: default;
}
.lightbox-overlay img {
  /* Make small source images (like 414px microCT) actually grow to fill
     the available space on screen, while larger ones still scale down. */
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.55);
  cursor: default;
}
.lightbox-caption { flex: 0 0 auto; }
.lightbox-caption {
  /* Matches the figcaption style used elsewhere on the site (Playfair
     italic, slightly larger). Lets the text use most of the figure
     width so multi-line captions wrap consistently regardless of image
     aspect ratio. */
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  width: 100%;
  max-width: 1100px;
  line-height: 1.55;
  padding: 0 16px;
  margin: 0 auto;
}
.lightbox-caption[hidden] { display: none; }

.lightbox-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.05);
  outline: none;
}

@media (max-width: 600px) {
  .lightbox-overlay { padding: 12px; }
  .lightbox-overlay img { max-height: 76vh; }
  .lightbox-caption { font-size: 13px; }
  .lightbox-close { top: 10px; right: 10px; }
}