:root {
  color-scheme: light;
  --bg: #fdfeff;
  --text: #000000;
  --muted: #4a4a4a;
  --blue: #224b8d;
  --heading: #880000;
  --keyword-deep: #a01030;
  --keyword-mid: #b42a28;
  --keyword-bright: #cc4420;
  --line: #d8e2f0;
  --focus: #2872dc;
  --font: Georgia, serif;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 48px 18px; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; font-weight: 400; line-height: 1.3; }
a { color: var(--blue); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 3px; }
a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
::selection { background: #397ad747; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 12px; background: var(--bg); z-index: 5; }
.skip-link:focus { top: 12px; }
.profile-card { width: min(940px, 100%); position: relative; isolation: isolate; overflow: hidden; margin: 0 auto; padding: 20.25px 22.5px 15.75px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
#wave-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
h1 { margin: 0; color: var(--heading); font-size: 20px; font-weight: 600; line-height: 1.3; }
.affiliations { display: flex; flex-wrap: wrap; align-items: center; gap: 9.75px; margin-top: 9.75px; color: var(--muted); font-size: 16px; }
.affiliation { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; }
.affiliation-text { display: block; min-width: 0; line-height: 1.3; }
.affiliations strong { color: var(--text); font-weight: 700; }
.school-logo { display: inline-flex; align-items: center; flex-shrink: 0; background: transparent; padding: 0; }
.school-logo img { display: block; object-fit: contain; }
.intro { font-size: 16px; font-weight: 400; line-height: 1.45; margin: 10.5px 0 13.5px; }
.intro em {
  position: relative;
  display: inline-block;
  font-style: normal;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.2;
  color: var(--keyword-deep);
}
.keyword-letters { white-space: nowrap; }
.keyword-letter {
  animation: keyword-letter 4.8s linear infinite;
  animation-delay: calc(var(--letter-index) * -.28s);
}
@keyframes keyword-letter {
  0%, 100% { color: var(--keyword-deep); }
  33% { color: var(--keyword-mid); }
  66% { color: var(--keyword-bright); }
}
.research { margin: 0; padding: 0 0 0 40px; list-style: square outside; }
.research-group { padding-left: 8px; }
.research-group + .research-group { margin-top: 7.5px; }
.research-row { display: grid; grid-template-columns: var(--category-width, max-content) minmax(0, 1fr); align-items: baseline; gap: 4px; }
h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45; }
.projects { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 6px; }
.project-entry { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.project-separator { flex-shrink: 0; color: var(--muted); }
.project { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--blue); font-size: 16px; line-height: 1.3; }
.project > span:first-child { overflow-wrap: anywhere; }
.project-logo { display: inline-flex; align-items: center; }
.project-logo img { display: block; width: auto; object-fit: contain; background: transparent; }
@media (max-width: 800px) {
  .research { padding-left: 16px; }
  .research-row {
    display: block;
    padding-left: 24px;
    text-indent: -24px;
    line-height: 1.7;
  }
  .research-row h2 { display: inline; margin-right: 4px; white-space: nowrap; }
  .projects { display: inline; padding-left: 0; }
  .project-entry { margin-right: 8px; text-indent: 0; vertical-align: baseline; }
  .project-entry:last-child { margin-right: 0; }
}
@media (max-width: 700px) {
  .affiliations {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 4px;
    font-size: clamp(8px, calc((100vw - 96px) / 32), 16px);
  }
  .affiliation { flex-shrink: 0; gap: 4px; }
  .school-logo img { height: var(--logo-height); width: auto; }
}
@media (max-width: 560px) {
  body { padding: 15px 9px; }
  .profile-card { padding: 15px 13.5px; }
  .affiliations { font-size: clamp(8px, calc((100vw - 64px) / 32), 16px); }
}

/* Match index_backup.html's heading, paragraph, and list text columns.
   The iframe spans the host gutters, keeping the 700px breakpoints aligned. */
.embedded {
  --page-gutter: 16px;
  --card-inset: 0px;
  --card-padding: calc(var(--page-gutter) - var(--card-inset) - 1px);
}
.embedded .profile-card {
  width: calc(100% - 2 * var(--card-inset));
  padding-inline: var(--card-padding);
}
.embedded .affiliations,
.embedded .intro { margin-left: 24px; }
@media (max-width: 800px) {
  .embedded { --card-padding: 8px; }
  .embedded .profile-card { padding: 20.25px var(--card-padding) 15.75px; }
  .embedded h1 { margin-left: 4px; }
  .embedded .affiliations,
  .embedded .intro {
    margin-left: calc(var(--page-gutter) + 24px - var(--card-inset) - 1px - var(--card-padding));
  }
  .embedded .research {
    padding-left: calc(var(--page-gutter) + 40px - var(--card-inset) - 1px - var(--card-padding));
  }
}
@media (max-width: 700px) {
  .embedded {
    --page-gutter: 10px;
    --card-inset: var(--page-gutter);
    /* Move the border inward while keeping the content in place. */
    --card-padding: 4px;
  }
}