/* ======================================================================
   Shared muted "card" design system — used by the homepage, projects,
   supervision and team-activities pages for a consistent, understated look.
   ====================================================================== */
:root,
html[data-theme="dark"] {
  color-scheme: light dark;
  /* al-folio palette: white page, black light-weight text, one theme colour */
  --site-acc: #b509ac;
  --site-acc2: #b509ac;
  --site-acc-grad: var(--site-acc);
  --site-acc-dark: #b509ac;
  --site-acc-soft: rgba(181, 9, 172, 0.08);
  --site-acc-border: rgba(181, 9, 172, 0.25);
  --site-card-bg: #ffffff;
  --site-card-border: transparent;
  --site-ink: #000000;
  --site-muted: #828282;
  --site-line: rgba(0, 0, 0, 0.1);
  --site-warm: #b509ac;
  --site-warm-dark: #b509ac;
  --site-warm-soft: rgba(181, 9, 172, 0.08);
  --site-warm-border: rgba(181, 9, 172, 0.25);
  --site-bg: #ffffff;
  --site-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  --site-shadow-hover: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --site-serif: Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Theme variables */
  --global-bg-color: #ffffff;
  --global-text-color: #000000;
  --global-text-color-light: #828282;
  --global-base-color: #828282;
  --global-border-color: rgba(0, 0, 0, 0.1);
  --global-dark-border-color: rgba(0, 0, 0, 0.2);
  --global-footer-bg-color: #1c1c1d;
  --global-fig-caption-color: #828282;
  --global-link-color: #b509ac;
  --global-link-color-hover: #b509ac;
  --global-link-color-visited: #b509ac;
  --global-masthead-link-color: #000000;
  --global-masthead-link-color-hover: #b509ac;
}

/* ---- Serif headings, as on a printed paper; body text stays sans-serif ---- */
h1, h2, h3, h4,
.page__title,
.author__name,
.masthead__menu-item--lg,
.site-section-title,
.site-card-head h3 {
  font-family: var(--site-serif);
}

.site-section-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 26px 0 14px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--site-warm);
  display: inline-block;
  color: var(--site-ink);
}

/* ---- Generic card ---- */
.site-card {
  position: relative;
  background: var(--site-card-bg);
  border: 1px solid var(--site-card-border);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.site-card:hover {
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
  border-color: #cfd4db;
}
.site-card p:last-child,
.site-card ul:last-child { margin-bottom: 0; }
.site-card a {
  color: var(--site-acc);
  font-weight: 600;
  text-decoration: none;
}
.site-card .site-paper-title { color: var(--site-acc); font-weight: 600; }
.site-card a:hover {
  color: var(--site-acc2);
  text-decoration: underline;
}

/* ---- Icon chip (used in a card header) ---- */
.site-icon-chip {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid var(--site-line);
  color: var(--site-acc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.site-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.site-card-head h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--site-ink);
}

/* ---- Meta rows inside a card (funder, collaborators, focus areas) ---- */
.site-meta-label {
  font-weight: 700;
  color: var(--site-muted);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 10px 0 4px 0;
}
.site-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px 0; }
.site-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--site-acc-soft);
  color: var(--site-acc-dark);
  border: 1px solid var(--site-acc-border);
  font-size: 0.82em;
  font-weight: 600;
}
/* Project cards are narrow (grid layout), so a long funder name wraps to
   a second line inside the pill; shrink the tag text so it stays on one. */
.project-card .site-tag-row { flex-wrap: nowrap; }
.project-card .site-tag {
  font-size: 0.64em;
  padding: 2px 7px;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Only the last tag (the funder) may shrink, with an ellipsis, so the role
   and funder always share one row even at the narrowest card width. */
.project-card .site-tag:last-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Give project cards a little more room than the shared 230px minimum so
   "Co-PI" + the longest funder name fit side by side without truncation. */
@media (min-width: 681px) {
  .site-grid:has(.project-card) {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* ---- Muted award / highlight badge (replaces bright red) ---- */
.site-badge-award {
  display: inline-block;
  color: var(--site-warm);
  background: var(--site-warm-soft);
  border: 1px solid var(--site-warm-border);
  padding: 1px 9px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82em;
}

/* ---- Card grid (projects, team) ---- */
.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 10px 0 20px 0;
  align-items: start;
}
.site-grid .site-card { margin-bottom: 0; }

/* ---- Compact variant: tighter padding/text for grids with many cards ---- */
.site-card.site-card-compact {
  padding: 12px 14px;
}
.site-card-compact .site-card-head { margin-bottom: 6px; }
.site-card-compact .site-card-head h3 { font-size: 0.98rem; line-height: 1.3; }
.site-card-compact .site-meta-label { margin: 8px 0 3px 0; font-size: 0.78em; }
.site-card-compact ul {
  margin: 0 0 4px 0;
  padding-left: 18px;
  font-size: 0.86em;
  line-height: 1.4;
}
.site-card-compact ul li { margin-bottom: 2px; }

/* ---- "Show overview" expandable details inside a card ---- */
.site-more { margin-top: 2px; }
.site-more summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--site-acc-dark);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.site-more summary::-webkit-details-marker { display: none; }
.site-more summary::before {
  content: "▸";
  font-size: 0.85em;
  transition: transform 0.15s ease;
}
.site-more[open] summary::before { transform: rotate(90deg); }
.site-more summary:hover { color: var(--site-acc2); }
.site-more p {
  margin: 6px 0 0 0;
  font-size: 0.9em;
  color: var(--site-ink);
}

/* ---- Click-to-expand card (project grid): the whole card is a <details>,
   collapsed to just the icon/title/short tags; click anywhere to expand. ---- */
.project-card { padding: 14px 16px; cursor: pointer; }
.project-card summary {
  list-style: none;
  display: block;
}
.project-card summary::-webkit-details-marker { display: none; }
.project-card summary::after {
  content: "▾ Details";
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.72em;
  font-weight: 600;
  color: var(--site-muted);
  transition: color 0.15s ease;
}
.project-card:hover summary::after { color: var(--site-acc-dark); }
.project-card[open] summary::after { content: "▴ Hide"; }
.project-card .site-card-head { margin-bottom: 6px; padding-right: 54px; }
.project-card .site-card-head h3 { font-size: 0.98rem; line-height: 1.3; }
.project-card .project-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--site-card-border);
}
.project-card .project-body .site-meta-label { margin: 8px 0 3px 0; font-size: 0.78em; }
.project-card .project-body .site-meta-label:first-child { margin-top: 0; }
.project-card .project-body ul {
  margin: 0 0 4px 0;
  padding-left: 18px;
  font-size: 0.86em;
  line-height: 1.4;
}
.project-card .project-body ul li { margin-bottom: 2px; }
.project-card .project-body p {
  margin: 4px 0 0 0;
  font-size: 0.88em;
  color: var(--site-ink);
}

/* ---- Timeline (news feed) ---- */
.site-timeline {
  list-style: none;
  padding-left: 0;
  margin: 10px 0 20px 0;
  border-left: 2px solid var(--site-line);
  margin-left: 6px;
}
.site-timeline li {
  position: relative;
  padding: 2px 0 14px 20px;
  line-height: 1.5;
}
.site-timeline li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--site-warm);
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px var(--site-warm-border);
}
.site-timeline .site-date {
  font-weight: 700;
  color: var(--site-ink);
}
.site-timeline.site-timeline-muted li::before { background: var(--site-muted); }
.site-timeline.site-timeline-muted { opacity: 0.88; }

/* ---- People list (supervision page) ---- */
.site-people { list-style: none; padding-left: 0; margin: 0; }
.site-people li {
  padding: 7px 0;
  border-bottom: 1px solid var(--site-line);
}
.site-people li:last-child { border-bottom: none; }
.site-people .site-person-name { font-weight: 700; color: var(--site-ink); }
/* A linked name (personal homepage) keeps the name styling, with a dotted
   underline as the only hint that it is clickable. */
.site-people a.site-person-name {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.site-people a.site-person-name:hover { color: var(--site-acc); text-decoration-style: solid; }
.site-people .site-person-note { color: var(--site-muted); font-size: 0.92em; }

/* ---- Supervision timelines: inside each role card, one entry per person,
   newest first, on the same rail as the homepage news (date, degree tag,
   name, then the topic on its own line). ---- */
.site-card .site-team-timeline { margin: 6px 0 0 6px; }
.site-team-timeline .site-tag { font-size: 0.72em; padding: 1px 8px; margin: 0 4px 0 2px; white-space: nowrap; vertical-align: 1px; }
.site-team-timeline li:last-child { padding-bottom: 2px; }
.site-team-timeline .site-person-name { font-weight: 700; color: var(--site-ink); }
.site-team-timeline a.site-person-name { text-decoration: underline dotted; text-underline-offset: 3px; }
.site-team-timeline a.site-person-name:hover { color: var(--site-acc); text-decoration-style: solid; }
.site-team-timeline .site-person-extra { color: var(--site-muted); font-size: 0.88em; }
.site-team-timeline .site-person-note { display: block; color: var(--site-muted); font-size: 0.92em; }

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

/* ---- Warm cream page with soft pastel glows; white top bar ---- */
body { background: var(--site-bg) !important; }
.masthead {
  background: #ffffff !important;
  border-bottom: 3px solid var(--site-warm);
}
.greedy-nav,
.masthead__menu-item {
  background-color: transparent !important;
  background: transparent !important;
}
.greedy-nav .hidden-links { background: #ffffff !important; border: 1px solid var(--site-line); }
.greedy-nav button { background: transparent !important; }
.greedy-nav .visible-links a:before { background: var(--site-warm) !important; }

/* ---- Slightly smaller base type sitewide, to fit more content per screen ---- */
html {
  font-size: 16px !important; /* theme bumps this to 18px on wider screens by default */
}

/* ---- Page titles and headings stay near-black; "Follow" button blue ---- */
.page__title,
.page__content h1,
.page__content h2,
.page__content h3,
.author__name { color: var(--site-ink); }
.author__urls-wrapper .btn,
.author__urls-wrapper button {
  background: var(--site-acc) !important;
  color: #ffffff !important;
  border: 0 !important;
}


/* ======================================================================
   al-folio look: white page, Roboto light, material-style cards with a
   soft shadow and no border, one magenta theme colour, dark footer.
   ====================================================================== */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, em, strong, small, summary,
td, th, button, input, div, section, nav, span, label {
  font-family: Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
body { font-weight: 300; color: #000; }
strong, b { font-weight: 700; }
h1, h2, h3, h4, .page__title, .author__name { font-weight: 300; }
.page__title { font-size: 2.5rem; margin-top: 0.4em; text-transform: lowercase; }

/* ---- Top bar: white, hairline underneath, black links ---- */
.masthead {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.masthead__menu-item a { font-weight: 400; color: #000; }
.masthead__menu-item--lg a { font-weight: 300; }
.masthead__menu-item a:hover,
.masthead__menu-item a.active { color: var(--site-acc); }
.greedy-nav .visible-links a:before { display: none !important; }

/* ---- Footer: dark bar, small centred text ---- */
.page__footer {
  margin: 40px 0 0 0;
  padding: 0;
  background: #1c1c1d;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
}
.page__footer footer { padding: 0; }
.page__footer .page__footer-follow, .page__footer .social-icons { display: none !important; }
.page__footer-follow { display: none !important; }
.page__footer-copyright { color: #ffffff; padding: 12px 10px; font-size: 12px; line-height: 1.3; }
.page__footer-copyright a { color: #ffffff; text-decoration: underline; }

/* ---- Section headings: plain light type, no underline ---- */
.site-section-title {
  font-size: 2rem;
  font-weight: 300;
  border-bottom: 0;
  padding-bottom: 0;
  margin: 28px 0 14px 0;
  display: block;
  color: #000;
  text-transform: lowercase;
}

/* ---- Cards: white, 4px radius, material shadow, no border ---- */
.site-card {
  border: 0;
  border-radius: 4px;
  padding: 18px 20px;
  box-shadow: var(--site-shadow);
  background: #ffffff;
}
.site-card:hover {
  box-shadow: var(--site-shadow-hover);
  border-color: transparent;
}
.site-card a { color: var(--site-acc); font-weight: 300; }
.site-card a:hover { color: var(--site-acc); text-decoration: underline; }
.site-card .site-paper-title { color: #000; font-weight: 400; }
.site-card-head h3 { font-weight: 400; font-size: 1.3rem; color: #000; }
.site-icon-chip {
  background: transparent;
  border: 0;
  width: auto;
  height: auto;
  font-size: 22px;
  filter: none;
}
.ico { filter: none; }
.site-meta-label { color: #828282; font-weight: 400; }
.project-card { padding: 18px 20px; }
.project-card .project-body { border-top: 1px solid rgba(0, 0, 0, 0.1); }
.project-card summary::after { color: #828282; font-weight: 400; }
.project-card:hover summary::after { color: var(--site-acc); }

/* ---- Tags: light magenta pill, no border ---- */
.site-tag {
  background: var(--site-acc-soft);
  border: 0;
  color: var(--site-acc);
  font-weight: 400;
}
.site-badge-award {
  background: var(--site-acc-soft);
  border: 0;
  color: var(--site-acc);
  font-weight: 400;
}

/* ---- News: bold date column on the left, text on the right ---- */
.site-timeline {
  border-left: 0;
  margin-left: 0;
}
.site-timeline li {
  padding: 6px 0 10px 150px;
  position: relative;
}
.site-timeline li::before { display: none; }
.site-timeline .site-date {
  position: absolute;
  left: 0;
  top: 6px;
  width: 140px;
  font-weight: 700;
  color: #212529;
}
.site-card .site-team-timeline { margin: 6px 0 0 0; }
.site-team-timeline li { padding-left: 120px; }
.site-team-timeline .site-date { width: 110px; }
.site-team-timeline .site-person-name { font-weight: 700; color: #000; }
.site-team-timeline .site-person-note,
.site-team-timeline .site-person-extra,
.site-people .site-person-note { color: #828282; font-weight: 300; }
@media (max-width: 680px) {
  .site-timeline li { padding-left: 110px; }
  .site-timeline .site-date { width: 100px; }
  .site-team-timeline li { padding-left: 100px; }
  .site-team-timeline .site-date { width: 92px; }
}

/* ---- Sidebar: round-cornered photo with shadow, grey icons ---- */
.author__avatar img {
  border-radius: 4px;
  box-shadow: var(--site-shadow);
}
.author__name { font-weight: 400; color: #000; }
.author__urls li i,
.author__urls li .fas,
.author__urls li .fab,
.author__urls li .ai { color: #828282 !important; }
.author__urls li a { color: #000; font-weight: 300; }
.author__urls li a:hover,
.author__urls li a:hover i { color: var(--site-acc) !important; }
.author__urls-wrapper .btn,
.author__urls-wrapper button {
  background: transparent !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 2px;
  font-weight: 400;
}
.author__urls-wrapper .btn:hover,
.author__urls-wrapper button:hover { background: var(--site-acc) !important; border-color: var(--site-acc) !important; color: #fff !important; }
.page__content h1, .page__content h2, .page__content h3, .page__title, .author__name { color: #000; }
hr.section-divider { border-top-color: rgba(0, 0, 0, 0.1) !important; }


/* ---- Menu tab names in lowercase, as in al-folio ---- */
.masthead__menu-item:not(.masthead__menu-item--lg) a { text-transform: lowercase; }

/* ---- Profile photo: no border, softly raised ---- */
.author__avatar img {
  border: 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
  box-shadow: var(--site-shadow) !important;
}

/* ---- Repositories page (GitHub repo cards) ---- */
.repo-summary { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 6px; color: #828282; }
.repo-summary strong { color: #000; }
.repo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin: 10px 0 24px;
}
a.repo-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: var(--site-shadow);
  color: #000;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
a.repo-card:hover { box-shadow: var(--site-shadow-hover); text-decoration: none; }
.repo-name { color: var(--site-acc); font-weight: 400; font-size: 0.95rem; overflow-wrap: anywhere; }
.repo-desc { color: #444; font-size: 0.85rem; line-height: 1.4; flex: 1; overflow-wrap: anywhere; }
.repo-meta { display: flex; align-items: center; gap: 14px; color: #828282; font-size: 0.8rem; }
.repo-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }

/* ---- CV and Teaching pages: date column on the left, details on the right ---- */
.cv-title { font-size: 1.5rem; font-weight: 300; margin-bottom: 8px; color: #000; }
.cv-sub { font-weight: 400; color: #828282; margin: 12px 0 2px; font-size: 0.9rem; text-transform: lowercase; }
.cv-row { display: flex; gap: 20px; padding: 7px 0; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.cv-title + .cv-row, .cv-sub + .cv-row { border-top: 0; }
.cv-date { flex: 0 0 150px; font-weight: 700; color: #212529; font-size: 0.9rem; }
.cv-body { flex: 1; min-width: 0; line-height: 1.5; }
.cv-note { color: var(--site-acc); font-size: 0.85em; }
.cv-intro { margin: 4px 0 18px; }
.cv-pdf { display: inline-block; margin-left: 10px; padding: 1px 10px; border: 1px solid #000; border-radius: 2px; color: #000 !important; font-size: 0.8rem; font-weight: 400; text-decoration: none !important; }
.cv-pdf:hover { background: var(--site-acc); border-color: var(--site-acc); color: #fff !important; }
.cv-more { margin: -4px 0 18px; color: #828282; }
@media (max-width: 680px) {
  .cv-row { flex-direction: column; gap: 2px; }
  .cv-date { flex: none; }
}
.cv-papers .cv-paper { display: flex; gap: 10px; padding: 2px 0; line-height: 1.4; font-size: 0.93rem; }
.cv-num { flex: 0 0 22px; color: #828282; }
.site-card a.cv-paper-title { color: #000; font-weight: 400; }
.site-card a.cv-paper-title:hover { color: var(--site-acc); }

/* ---- Highlights: bold magenta ---- */
.hl { color: var(--site-acc); font-weight: 700; }
.site-card a.hl-paper { color: #000; font-weight: 700; }
.site-card a.hl-paper:hover { color: var(--site-acc); }
.site-card .site-paper-title { font-weight: 700; }
.cv-paper > span:last-child { min-width: 0; }
.cv-paper .pub-doi { display: block; font-size: 0.85em; color: #828282; }
.cv-paper .pub-doi a { color: #828282; font-weight: 300; }
.cv-paper div.hl { font-size: 0.9em; margin-top: 1px; }
.cv-papers .cv-paper { padding: 6px 0; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.cv-papers .cv-title + .cv-paper { border-top: 0; }

/* ---- "more" submenu in the top bar (secondary pages) ---- */
.masthead__menu-dropdown { position: relative; }
.masthead__menu-dropdown .dropdown-toggle { cursor: pointer; font-weight: 400; color: #000; text-transform: lowercase; }
.masthead__menu-dropdown:hover .dropdown-toggle,
.masthead__menu-dropdown:focus-within .dropdown-toggle { color: var(--site-acc); }
.masthead__menu-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  min-width: 170px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: var(--site-shadow);
}
.masthead__menu-dropdown:hover .dropdown-menu,
.masthead__menu-dropdown:focus-within .dropdown-menu { display: block; }
.masthead__menu-dropdown .dropdown-menu li { display: block; float: none; margin: 0; padding: 0; }
.masthead__menu-dropdown .dropdown-menu a { display: block; padding: 6px 16px; color: #000 !important; text-transform: lowercase; white-space: nowrap; }
.masthead__menu-dropdown .dropdown-menu a:hover { color: var(--site-acc) !important; }
.hidden-links .masthead__menu-dropdown .dropdown-menu { display: block; position: static; box-shadow: none; padding: 0 0 0 12px; }

/* ---- Mobile menu button: dark bars (the theme draws them in the masthead
   background colour, which is white here, so they were invisible) ---- */
.greedy-nav .navicon,
.greedy-nav .navicon:before,
.greedy-nav .navicon:after { background: #000000; }
.greedy-nav button.close .navicon { background: transparent; }

/* The menu button gets a thin outline so it stays visible whatever the
   browser does with colours (forced dark mode on phones, for example). */
.greedy-nav button { border: 1px solid rgba(0, 0, 0, 0.25) !important; border-radius: 4px; }
.greedy-nav button.close { border-color: transparent !important; }


/* ======================================================================
   Dark mode (follows the device setting). The page declares support for
   it, so phones no longer force their own, half-working dark filter.
   Palette after al-folio's dark theme: near-black page, black cards,
   one teal theme colour.
   ====================================================================== */
@media (prefers-color-scheme: dark) {
  :root,
  html[data-theme="dark"] {
    --site-acc: #2698ba;
    --site-acc2: #2698ba;
    --site-acc-dark: #2698ba;
    --site-acc-soft: rgba(38, 152, 186, 0.18);
    --site-acc-border: rgba(38, 152, 186, 0.45);
    --site-card-bg: #000000;
    --site-ink: #f0f0f0;
    --site-muted: #b1b1b1;
    --site-line: rgba(255, 255, 255, 0.14);
    --site-warm: #2698ba;
    --site-warm-dark: #2698ba;
    --site-warm-soft: rgba(38, 152, 186, 0.18);
    --site-warm-border: rgba(38, 152, 186, 0.45);
    --site-bg: #1c1c1d;
    --site-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
    --site-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.28);
    --global-bg-color: #1c1c1d;
    --global-text-color: #f0f0f0;
    --global-text-color-light: #b1b1b1;
    --global-base-color: #b1b1b1;
    --global-border-color: rgba(255, 255, 255, 0.14);
    --global-dark-border-color: rgba(255, 255, 255, 0.3);
    --global-footer-bg-color: #000000;
    --global-fig-caption-color: #b1b1b1;
    --global-link-color: #2698ba;
    --global-link-color-hover: #2698ba;
    --global-link-color-visited: #2698ba;
    --global-masthead-link-color: #f0f0f0;
    --global-masthead-link-color-hover: #2698ba;
  }
  body, html { background: #1c1c1d !important; color: #f0f0f0; }
  .masthead { background: #1c1c1d !important; border-bottom-color: rgba(255, 255, 255, 0.14); }
  .masthead__menu-item a,
  .masthead__menu-item--lg a,
  .masthead__menu-dropdown .dropdown-toggle { color: #f0f0f0; }
  .masthead__menu-item a:hover,
  .masthead__menu-item a.active { color: var(--site-acc); }
  .masthead__menu-dropdown .dropdown-menu,
  .greedy-nav .hidden-links { background: #000000 !important; }
  .masthead__menu-dropdown .dropdown-menu a { color: #f0f0f0 !important; }
  .greedy-nav .navicon,
  .greedy-nav .navicon:before,
  .greedy-nav .navicon:after { background: #f0f0f0; }
  .greedy-nav button { border-color: rgba(255, 255, 255, 0.35) !important; }
  .greedy-nav button.close .navicon { background: transparent; }
  .page__footer { background: #000000; }
  .page__title, .page__content h1, .page__content h2, .page__content h3,
  .author__name, .site-section-title, .site-card-head h3, .cv-title, .cv-papers .cv-title,
  .repo-summary strong, hr + h2 { color: #f0f0f0; }
  .site-card { background: #000000; }
  .site-card .site-paper-title,
  .site-card a.hl-paper,
  .site-card a.cv-paper-title,
  .site-team-timeline .site-person-name,
  .author__urls li a,
  .site-card .site-date { color: #f0f0f0; }
  .site-card a.hl-paper:hover,
  .site-card a.cv-paper-title:hover,
  .author__urls li a:hover { color: var(--site-acc); }
  .site-timeline .site-date, .cv-date { color: #e6e6e6; }
  .author__urls-wrapper .btn, .author__urls-wrapper button {
    color: #f0f0f0 !important;
    border-color: #f0f0f0 !important;
  }
  a.repo-card { background: #000000; color: #f0f0f0; box-shadow: var(--site-shadow); }
  .repo-desc { color: #c9c9c9; }
  .project-card .project-body { border-top-color: rgba(255, 255, 255, 0.14); }
  .cv-row, .cv-papers .cv-paper { border-top-color: rgba(255, 255, 255, 0.1); }
  hr.section-divider { border-top-color: rgba(255, 255, 255, 0.14) !important; }
  .author__avatar img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) !important; }
  .site-card, .site-card:hover { border: 0; }
  .site-team-timeline .site-person-note,
  .site-team-timeline .site-person-extra { color: #b1b1b1; }
}