/* ── Design tokens — dark aubergine / magenta theme ── */
:root {
  --green-900: #120d17;
  --green-700: #e0429a;
  --green-500: #ff5ea8;
  --green-300: #ffadd0;
  --green-100: rgba(255,94,168,0.13);
  --sand-100:  #1a1320;
  --sand-200:  #221829;
  --sand-300:  rgba(243,234,240,0.14);
  --ink-900:   #f3eaf0;
  --ink-600:   #c3b6c8;
  --ink-400:   #9d8aa3;
  --white:     #1f1526;
  --purple:    #a89df5;

  --font: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
  --transition: 0.18s ease;
}

body {
  font-family: var(--font) !important;
  background: var(--sand-100);
  color: var(--ink-900);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  line-height: 1.15;
  font-weight: 400;
  color: var(--ink-900);
  font-family: var(--font-serif) !important;
  letter-spacing: -0.01em;
}

a { color: var(--green-500); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--green-300); }
p { margin-bottom: 0.85rem; }

/* ── Page wrapper — tighter top/bottom air ── */
.page-content {
  max-width: 1050px;
  margin: 0 auto;
  padding: 2.25rem 2rem 3rem;
}

/* ── Section labels ── */
.section-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--green-500);
  margin-bottom: 0.5rem;
}

.section-heading {
  font-family: var(--font-serif) !important;
  font-size: 34px;
  font-weight: 400;
  color: var(--ink-900);
  margin-bottom: 0.6rem;
  letter-spacing: -0.015em;
}

.section-subheading {
  font-size: 17px;
  color: var(--ink-600);
  line-height: 1.6;
  max-width: 620px;
  margin-bottom: 1.5rem;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-500); color: #1a1320 !important;
  font-size: 15.5px; font-weight: 600;
  padding: 0.65rem 1.4rem; border-radius: 999px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  text-decoration: none !important; font-family: var(--font) !important;
}
.btn-primary:hover { opacity: 0.85; transform: translateY(-1px); color: #1a1320 !important; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: rgba(243,234,240,0.78) !important;
  font-size: 15.5px; font-weight: 500;
  padding: 0.65rem 1.4rem; border-radius: 999px;
  border: 1px solid rgba(243,234,240,0.22);
  transition: all var(--transition); text-decoration: none !important; font-family: var(--font) !important;
}
.btn-ghost:hover { background: rgba(243,234,240,0.1); color: #f3eaf0 !important; border-color: rgba(243,234,240,0.45); }

.btn-text {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15.5px; font-weight: 600; color: var(--green-500) !important;
  text-decoration: none !important; transition: gap var(--transition), color var(--transition);
  font-family: var(--font) !important;
}
.btn-text:hover { gap: 9px; color: var(--green-300) !important; }

/* ── Research cards ── */
.research-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 1.75rem; }
.research-card { background: var(--white); border: 1px solid var(--sand-300); border-radius: var(--radius-md); padding: 1.75rem 1.5rem; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
.research-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(255,94,168,0.3); }
.research-card-icon { font-size: 22px; margin-bottom: 1rem; display: block; }
.research-card-title { font-family: var(--font-serif) !important; font-size: 21px; font-weight: 500; color: var(--ink-900); margin-bottom: 0.6rem; }
.research-card-desc { font-size: 15.5px; color: var(--ink-600); line-height: 1.6; margin: 0; }

/* ── Recent pubs on homepage — bigger, more legible ── */
.recent-pubs { background: var(--white); border: 1px solid var(--sand-300); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.25rem; }
.recent-pub-item { padding: 1.4rem 1.75rem; border-bottom: 1px solid var(--sand-300); display: flex; align-items: flex-start; gap: 1.4rem; transition: background var(--transition); }
.recent-pub-item:last-child { border-bottom: none; }
.recent-pub-item:hover { background: var(--sand-200); }
.recent-pub-year { font-family: var(--font-serif) !important; font-size: 20px; font-weight: 400; font-style: italic; color: var(--green-500); min-width: 46px; padding-top: 0; flex-shrink: 0; }
.recent-pub-content {}
.recent-pub-title { font-family: var(--font-serif) !important; font-size: 20px; font-weight: 500; color: var(--ink-900); line-height: 1.35; margin-bottom: 6px; }
.recent-pub-venue { font-size: 14.5px; color: var(--ink-400); font-style: normal; letter-spacing: 0.01em; }

/* ── Full publications page — bigger titles, tighter grouping ── */
.pub-year-group { margin-bottom: 2rem; }
.pub-year-header { font-size: 14.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green-500); border-bottom: 1px solid var(--sand-300); padding-bottom: 0.5rem; margin-bottom: 1rem; }
.pub-item { padding: 1.25rem 1.5rem 1.25rem 1.75rem; border-left: 3px solid transparent; margin-bottom: 8px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--white); border-top: 1px solid var(--sand-300); border-right: 1px solid var(--sand-300); border-bottom: 1px solid var(--sand-300); transition: border-left-color var(--transition), box-shadow var(--transition); }
.pub-item:hover { border-left-color: var(--green-500); box-shadow: var(--shadow-sm); }
.pub-authors { font-size: 14px; color: var(--ink-400); margin-bottom: 0.3rem; }
.pub-title { font-family: var(--font-serif) !important; font-size: 20px; font-weight: 500; color: var(--ink-900); line-height: 1.3; margin-bottom: 0.4rem; }
.pub-venue { font-size: 15px; color: var(--ink-600); font-style: normal; margin-bottom: 0.5rem; }
.pub-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pub-tag { font-size: 12.5px; font-weight: 500; padding: 2px 9px; border-radius: 20px; background: var(--sand-200); color: var(--ink-600); border: 1px solid var(--sand-300); }
.pub-tag-in-press { background: rgba(255,165,0,0.12); color: #ffd580; border-color: rgba(255,165,0,0.25); }
.pub-tag-featured { background: var(--green-100); color: var(--green-300); border-color: rgba(255,94,168,0.25); }

/* ── Team ── */
.pi-section { background: var(--white); border: 1px solid var(--sand-300); border-radius: var(--radius-lg); padding: 2rem 2.25rem; margin-bottom: 1.75rem; display: flex; gap: 2rem; align-items: flex-start; }
.pi-avatar { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,94,168,0.15); border: 1px solid rgba(255,94,168,0.3); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: var(--green-500); flex-shrink: 0; font-family: var(--font) !important; }
.pi-name { font-family: var(--font-serif) !important; font-size: 28px; font-weight: 500; color: var(--ink-900); margin-bottom: 0.2rem; }
.pi-role { font-size: 13.5px; font-weight: 600; color: var(--green-500); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 0.85rem; }
.pi-bio { font-size: 16px; color: var(--ink-600); line-height: 1.65; margin-bottom: 0.75rem; }
.pi-edu { font-size: 14.5px; color: var(--ink-400); line-height: 1.6; margin-bottom: 0.75rem; }
.pi-links { display: flex; gap: 8px; flex-wrap: wrap; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 1.75rem; }
.team-card { background: var(--white); border: 1px solid var(--sand-300); border-radius: var(--radius-md); padding: 1.75rem 1.5rem; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(255,94,168,0.3); }
.team-avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,94,168,0.15); border: 1px solid rgba(255,94,168,0.3); display: flex; align-items: center; justify-content: center; font-size: 16.5px; font-weight: 600; color: var(--green-500); margin-bottom: 1rem; font-family: var(--font) !important; }
.team-name { font-family: var(--font-serif) !important; font-size: 19px; font-weight: 500; color: var(--ink-900); margin-bottom: 0.2rem; }
.team-role { font-size: 13px; font-weight: 600; color: var(--green-500); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.6rem; }
.team-bio { font-size: 15px; color: var(--ink-600); line-height: 1.55; margin-bottom: 0.75rem; }

.tag-link { display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 500; color: var(--ink-400); padding: 3px 10px; border: 1px solid var(--sand-300); border-radius: 20px; transition: all var(--transition); text-decoration: none !important; font-family: var(--font) !important; }
.tag-link:hover { color: var(--green-300) !important; border-color: rgba(255,94,168,0.4); background: rgba(255,94,168,0.08); }

.collab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
.collab-card { background: var(--white); border: 1px solid var(--sand-300); border-radius: var(--radius-sm); padding: 1rem 1.25rem; transition: box-shadow var(--transition), border-color var(--transition); }
.collab-card:hover { box-shadow: var(--shadow-sm); border-color: rgba(255,94,168,0.25); }
.collab-name { font-size: 16px; font-weight: 600; color: var(--ink-900); margin-bottom: 0.2rem; }
.collab-affil { font-size: 14.5px; color: var(--ink-400); }

/* ── Teaching ── */
.courses-grid-v2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 1.75rem; }
.course-card-v2 { background: var(--white); border: 1px solid var(--sand-300); border-radius: var(--radius-md); padding: 1.75rem 1.75rem 1.75rem 2rem; position: relative; overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); }
.course-card-v2:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.accent-green { position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--green-500); }
.accent-purple { position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--purple); }
.course-num { font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.4rem; }
.course-num-green { color: var(--green-500); }
.course-num-purple { color: var(--purple); }
.course-title-v2 { font-family: var(--font-serif) !important; font-size: 22px; font-weight: 500; color: var(--ink-900); margin-bottom: 0.5rem; }
.course-desc-v2 { font-size: 15.5px; color: var(--ink-600); line-height: 1.6; margin-bottom: 1.25rem; }
.course-meta { font-size: 13.5px; color: var(--ink-400); font-weight: 500; margin-bottom: 1rem; }

/* ── Contact block ── */
.contact-block { background: #ff5ea8; border-radius: var(--radius-lg); padding: 2.5rem 2.5rem; position: relative; overflow: hidden; }
.contact-block::before { content: ''; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: #e0429a; opacity: 0.5; }
.contact-block-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.contact-title { font-family: var(--font-serif) !important; font-size: 26px; font-weight: 500; color: #1a1320; margin-bottom: 0.5rem; }
.contact-desc { font-size: 16px; color: rgba(26,19,32,0.75); line-height: 1.6; margin: 0; }
.contact-detail { font-size: 15px; color: #1a1320; margin-top: 0.5rem; font-weight: 500; }
.contact-detail a { color: #1a1320; text-decoration: none; }
.contact-detail a:hover { text-decoration: underline; }
.contact-block .btn-primary { background: #1a1320; color: #ff5ea8 !important; border: none; }
.contact-block .btn-primary:hover { background: #120d17; color: #ffadd0 !important; opacity: 1; }

/* ── Divider — tighter ── */
.section-divider { border: none; border-top: 1px solid var(--sand-300); margin: 2rem 0; }

/* ── Page header (interior pages) — less empty air ── */
.page-header { background: #120d17; padding: 2.75rem 2.5rem 2.25rem; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,94,168,0.15); }
.page-header::before { content: ''; position: absolute; top: -60px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,94,168,0.08); border: 1px solid rgba(255,94,168,0.12); }
.page-header-inner { max-width: 1050px; margin: 0 auto; position: relative; z-index: 1; }
.page-header-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--green-500); margin-bottom: 0.6rem; }
.page-header-title { font-family: var(--font-serif) !important; font-size: clamp(34px, 5vw, 52px); font-weight: 400; color: #f3eaf0; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.page-header-subtitle { font-size: 17.5px; color: rgba(243,234,240,0.7); line-height: 1.6; max-width: 560px; margin: 0; }
.page-header-subtitle strong { color: var(--green-500) !important; }

/* ── Footer ── */
.nav-footer { background: #120d17 !important; border-top: 1px solid var(--sand-300) !important; font-size: 14.5px !important; color: var(--ink-400) !important; padding: 1.25rem 0 !important; }
.nav-footer a { color: var(--ink-400) !important; }
.nav-footer a:hover { color: var(--green-500) !important; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .pi-section { flex-direction: column; gap: 1.25rem; }
  .page-content { padding: 1.75rem 1.25rem 2.5rem; }
  .contact-block-inner { grid-template-columns: 1fr; }
  .contact-block .btn-primary { width: fit-content; }
  .page-header { padding: 2.25rem 1.5rem 2rem; }
}