/* Publication list with teaser thumbnails (home page) */
.pub-teaser { display: flex; gap: 1.5em; align-items: flex-start; margin-bottom: 1.6em; }
.pub-body > div + div { margin-top: 0.25em; }
/* Pull the text up so the title's cap height, not its line box, meets the thumbnail's top edge */
.pub-body { margin-top: -0.45em; }
.pub-links { color: var(--secondary-color); }
.pub-venue { font-weight: bold; }
.pub-thumb {
  flex: 0 0 200px; aspect-ratio: 16 / 10; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--secondary-color);
}
.pub-thumb img, .pub-thumb video { width: 100%; height: 100%; object-fit: contain; }
.pub-thumb:has(.pub-thumb-placeholder) { background: transparent; border-style: dashed; }
.pub-thumb-placeholder { color: var(--secondary-color); }
/* Dark mode inverts the whole page, so #000 renders as white behind the (re-inverted) media */
html[theme="dark"] .pub-thumb { background: #000; }
html[theme="dark"] .pub-thumb:has(.pub-thumb-placeholder) { background: transparent; }
/* The theme's dark.css inverts <video> in light mode too; undo that */
html:not([theme="dark"]) video { filter: none; -webkit-filter: none; }
@media (max-width: 600px) {
  .pub-teaser { flex-direction: column; align-items: stretch; }
  .pub-thumb { flex-basis: auto; }
  .pub-body { margin-top: 0; }
}

/* News list (home page): fixed-width date column, text wraps beside it */
ul.news { list-style: none; padding-left: 0; margin-left: 0; }
ul.news li { display: flex; gap: 1.2em; margin-bottom: 0.4em; padding-left: 0; }
ul.news li::after, ul.news li::before { content: none; }
.news-date { flex: 0 0 auto; color: var(--secondary-color); }