/* ===== Root + cursors ===== */
:root {
  --pink: #DDA0DD;
  --plum: #a75fa7;        /* deeper accent for text/headings (readable on white) */
  --plum-dark: #8e468e;
  --pink-soft: #f6ecf6;   /* badge / underline tint */
  --cv-ink: #33313a;
  --cv-muted: #7c7683;
  --cv-line: #ece5ec;
}

html {
  height: 100%;
  width: 100%;
  margin: 0;
}


/* ===== Fade-in ===== */
html body {
  width: 100%;
  margin: 0;
}


/* ===== Typography helpers ===== */
.pixel {
  font-family: 'Pixelify Sans','Merriweather', Arial;
}

/* ===== Footer ===== */
html body #copyright {
  height: 100%;
  width: 100%;
  margin-bottom: 10px;
  font-family: 'Pixelify Sans','Consolas';
  font-weight: 100;
  color: grey;
  text-align: center;
}

/* ===== Rules & Lists ===== */
hr { border-top: 1px dashed grey; }
ul { list-style-type: circle; }

/* ===== Expandable sections (hidden by default) ===== */
#li0b, #li1b, #li2b, #li3b, #li4b,
#li-upenn-b, #li-umich-b {
  display: none;
}

/* ============================================================
   CV card face (#research-menu inside .back-research)
   Professional, polished styling — pink/plum theme
   ============================================================ */

#back-research {
  padding: 10px;
  box-sizing: border-box;
}

#research-menu {
  color: var(--cv-ink);
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 300;
  line-height: 1.72;
  font-size: 15px;
}

/* ---------- Header ---------- */
.cv-header {
  padding-bottom: 22px;
  margin-bottom: 6px;
}

.cv-body {
  display: flex;
  align-items: flex-start;
  gap: 26px;
}

.cv-photo {
  flex: 0 0 auto;
  width: 150px;
  height: 188px;
  object-fit: cover;
  border-radius: 14px;
  border: 5px solid #fff;
  box-shadow: 0 8px 20px rgba(120, 70, 120, 0.22);
}

.cv-intro {
  flex: 1 1 auto;
  min-width: 0;
}

.cv-intro p {
  margin: 0 0 10px;
}

#research-menu h1 {
  font-family: 'Fraunces', 'Merriweather', Georgia, serif;
  font-weight: 600;
  font-size: 1.85rem;
  line-height: 1.2;
  letter-spacing: 0.3px;
  margin: 0 0 12px;
  color: var(--cv-ink);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px 8px;
}

#research-menu h1 .cv-name {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: 'Special Elite', cursive;
  font-size: 1.2em;
}

#research-menu h1 .socials {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

#research-menu h1 .socials .dotfill {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  font-weight: 300;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 2px;
  color: #c3b6c3;
  user-select: none;
}

#research-menu h1 .socials img {
  width: 22px;
  height: 22px;
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
}

#research-menu h1 .socials a:hover img {
  opacity: 1;
  transform: translateY(-2px);
}

/* social icons never get the pill hover background */
#research-menu h1 a:hover,
#research-menu h1 a:active {
  background: none;
}

/* ---------- Section headings ---------- */
#research-menu h3 {
  position: relative;
  font-family: 'Special Elite', 'Merriweather', Georgia, serif;
  font-size: 1.47rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--plum-dark);
  margin: 30px -20px 15px;
  padding: 5px 20px 1px;
  isolation: isolate;
}

/* highlighter bar: ~50% of the text height, sitting behind the lower half of
   the glyphs (anchored to the text, not the much taller line box) */
#research-menu h3::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -0.1em;
  height: 0.5em;
  background: linear-gradient(90deg, rgba(167, 95, 167, 0.35) 0%, rgba(221, 160, 221, 0.30) 45%, rgba(221, 160, 221, 0.15) 100%);
}

/* ---------- Lists ---------- */
#research-menu > ul {
  list-style: none;
  margin: 0 0 4px;
  padding-left: 0;
}

#research-menu > ul > li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 14px;
}

#research-menu > ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-soft);
}

#research-menu ul ul {
  list-style: none;
  margin: 8px 0 4px;
  padding-left: 16px;
  color: var(--cv-muted);
  font-size: 0.95em;
}

#research-menu ul ul li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 15px;
}

#research-menu ul ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d9c3d9;
}

/* self-highlight (own name in publications) */
#research-menu u {
  text-decoration: none;
  border-bottom: 2px solid var(--pink);
  padding-bottom: 1px;
}

/* publication / talk titles */
#research-menu li strong em,
#research-menu li em strong {
  font-style: italic;
  font-weight: 700;
  color: var(--cv-ink);
}

#research-menu hr {
  border: none;
  border-top: 1px dashed var(--cv-line);
  margin: 26px 0;
}

/* ---------- Expandable detail blocks ---------- */
#li0a, #li1a, #li2a, #li3a, #li4a, #li-umich-a, #li-upenn-a {
  cursor: pointer;
  transition: color 0.18s ease;
}

#li0a:hover, #li1a:hover, #li2a:hover, #li3a:hover, #li4a:hover,
#li-umich-a:hover, #li-upenn-a:hover {
  color: var(--plum-dark);
}

#li0b, #li1b, #li2b, #li3b, #li4b, #li-umich-b {
  margin-top: 6px;
  padding-left: 13px;
  border-left: 2px solid var(--pink-soft);
}

/* ---------- Pill badges & expanders (.pixel) ---------- */
.back-research .pixel {
  font-family: 'Pixelify Sans', monospace;
  display: inline-block;
  font-size: 0.78rem;
  line-height: 1;
  padding: 4px 9px;
  margin: 2px 3px 2px 0;
  border: 1px solid var(--pink);
  border-radius: 7px;
  color: var(--plum) !important;
  background: var(--pink-soft);
  vertical-align: middle;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.back-research a.pixel:hover {
  background: var(--pink);
  color: #fff !important;
  transform: translateY(-1px);
}

/* ---------- Expand/collapse triangle (keeps the pill background) ---------- */
.back-research .tri {
  font-family: 'Pixelify Sans', monospace;
  display: inline-block;
  margin-left: 6px;
  font-size: 0.78rem;
  line-height: 1;
  padding: 4px 9px;
  border: 1px solid var(--pink);
  border-radius: 7px;
  color: var(--plum) !important;
  background: var(--pink-soft);
  vertical-align: middle;
  transition: transform 0.25s ease, background 0.18s ease, color 0.18s ease;
}

.back-research .tri:hover {
  background: var(--pink);
  color: #fff !important;
}

/* rotate the triangle when its section is open */
#research-menu .expanded .tri {
  transform: rotate(180deg);
}

/* ---------- Links ---------- */
.back-research a:link,
.back-research a:visited {
  color: var(--plum);
  text-decoration: none;
}

.back-research #research-menu p a:not(.pixel):not(.tri):hover,
.back-research #research-menu li a:not(.pixel):not(.tri):hover {
  color: #fff;
  background: var(--pink);
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--pink);
}

/* keep the generic (non-#research-menu) hover as a gentle fallback */
.back-research a:hover,
.back-research a:active {
  color: #fff;
  background: var(--pink);
  border-radius: 5px;
}

/* ---------- Responsive (narrow) ---------- */
@media only screen and (max-width: 560px) {
  .cv-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #research-menu h1 {
    justify-content: center;
  }
}

/* ===== Scrollbar (Firefox) ===== */
#research-wrapper {
  scrollbar-color: lightgray #ffffff;
  scrollbar-width: thin;
}

/* WebKit (Chrome/Edge/Safari) */
#research-wrapper::-webkit-scrollbar {
  width: 6px;
}

#research-wrapper::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 6px;
}

#research-wrapper::-webkit-scrollbar-thumb {
  background: lightgray;
  border-radius: 6px;
  border: 2px solid #ffffff;
}

#research-wrapper::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.9);
}