/* Custom accent — Apple/GitHub-style blue.
   Overrides the theme's default olive (#afb42b) across light and dark.
   One accent, locked across the whole site. */
:root,
:root.dark {
  --primary: #0969da;
  --primary-70: rgba(9, 105, 218, 0.7);
  --primary-50: rgba(9, 105, 218, 0.5);
  --primary-30: rgba(9, 105, 218, 0.3);
  --primary-weak: #218bff;
  --primary-weak-50: rgba(33, 139, 255, 0.5);

  /* category / cover badge: match the accent instead of orange */
  --card-top-bg-color: #0969da;

  /* near-black loading screen instead of teal */
  --preloader-background: #0d1117;
}

/* Clean GitHub/Apple-style dark hero.
   Replaces the theme's teal mountain photo (banner.png) with a neutral
   near-black canvas (#0d1117) plus a soft blue accent glow and a faint
   dot grid that fades toward the edges. Near-white hero text keeps AAA
   contrast. */
.trm-banner {
  background-color: #0d1117;
  background-image:
    radial-gradient(72% 120% at 78% 6%, rgba(9, 105, 218, 0.24), transparent 55%),
    radial-gradient(64% 110% at 6% 104%, rgba(33, 139, 255, 0.10), transparent 55%);
}
.trm-banner .trm-banner-cover {
  display: none;
}
/* faint structured dot grid, masked so it fades out near the edges */
.trm-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(118% 92% at 72% 18%, #000 38%, transparent 84%);
  mask-image: radial-gradient(118% 92% at 72% 18%, #000 38%, transparent 84%);
}

/* Research keyword tags under the hero headline */
.trm-hero-kw {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 620px;
  margin: 20px 0 6px;
}
.trm-hero-kw > span {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-shadow: none;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 5px 13px;
}
@media (max-width: 992px) {
  .trm-hero-kw { display: none; }
}

/* Hide the theme's heavy date/time/author cards at the top of each post.
   The date and author still appear in the post's copyright block and in
   the homepage post list, so no information is lost. */
.trm-post-info {
  display: none;
}

/* Publications list */
.pub-item {
  margin: 0 0 28px;
  padding-left: 18px;
  border-left: 2px solid var(--primary-30);
}
.pub-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.pub-title a { color: var(--theme-color); }
.pub-title a:hover { color: var(--primary); }
.pub-meta {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body-color);
  opacity: 0.88;
  margin-top: 5px;
}
.pub-venue {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--body-color);
  opacity: 0.6;
  margin-top: 2px;
}
.pub-tldr {
  font-size: 14px;
  line-height: 1.55;
  margin-top: 10px;
  max-width: 78ch;
}
.pub-abstract {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--body-color);
  opacity: 0.58;
  margin-top: 8px;
  max-width: 78ch;
}
/* The publications page has no covering card, so cancel the theme's -40px
   content overlap that would otherwise pull the heading onto the dark hero. */
.trm-content:has(.pub-item) {
  margin-top: 24px !important;
}
/* Small Code button on publication entries */
.pub-links {
  margin-top: 7px;
}
.pub-links a {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
  border: 1px solid var(--primary-30);
  border-radius: 999px;
  padding: 4px 11px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.pub-links a:hover {
  background: var(--primary);
  color: #fff;
}

/* Make the author's own name stand out in the publication list */
.pub-me {
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--primary-50);
}
.pub-me:hover {
  border-bottom-color: var(--primary);
}

/* Homepage About block (injected by scripts/home-about.js) */
.home-about { max-width: 80ch; }
.home-about-heading { font-size: 24px; font-weight: 800; margin: 0 0 14px; }
.home-about h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 22px 0 8px;
  color: var(--theme-color);
}
.home-about p { line-height: 1.7; margin: 0 0 12px; }
.home-about ul { padding-left: 20px; line-height: 1.7; margin: 0 0 6px; }
.home-about li { margin: 3px 0; }
.home-about a { color: var(--primary); }
/* Coffee chat button under the bio (Google Calendar booking page) */
.home-chat { margin: 16px 0 4px; }
.home-about .home-chat a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
  border: 1px solid var(--primary-30);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.home-about .home-chat a:hover {
  background: var(--primary);
  color: #fff;
}

/* News list: muted fixed-width date column, no bullets */
.home-about ul.home-news {
  list-style: none;
  padding-left: 0;
  margin: 0 0 10px;
}
.home-news li {
  display: flex;
  gap: 14px;
  margin: 5px 0;
  line-height: 1.6;
}
.home-news .news-date {
  flex: 0 0 76px;
  font-size: 13px;
  color: var(--body-color);
  opacity: 0.6;
  white-space: nowrap;
  padding-top: 2px;
}
/* hide the category cards / post list / paginator that follow the About on home,
   but keep the footer and its divider */
.home-about ~ *:not(.trm-footer-card):not(.footer-divider) { display: none !important; }
/* More page reuses the About styles; space out its section headings */
.more-page .home-about-heading { margin-top: 30px; }
.more-page .home-about-heading:first-child { margin-top: 0; }
/* keep the homepage content off the dark hero (same as the publications page) */
.trm-content:has(.home-about) { margin-top: 24px !important; }
/* Hide the "HOME / INDEX.HTML" breadcrumb pill in the hero */
.trm-breadcrumbs { display: none !important; }