.hsp-header {
  text-align: center;
  margin: 0 0 2.5rem;
}

/* Style Quarto's metadata author list; names stay in the page front matter. */
#title-block-header .quarto-title-meta {
  grid-template-columns: 1fr;
  gap: 0.75rem;
  text-align: left;
}

#title-block-header .quarto-title-meta-contents {
  font-size: 0.95rem;
  line-height: 1.6;
}

.hsp-affiliations {
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
}

.hsp-funding {
  font-size: 0.95rem;
  line-height: 1.6;
}

#title-block-header h1 {
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin: 0.75rem 0 1.5rem;
  text-wrap: balance;
}

.hsp-links {
  border-block: 1px solid var(--bs-border-color, #888);
  padding: 1.5rem 0;
}

.hsp-paper-link {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 0.3rem;
  padding: 0.55rem 1rem;
  font-weight: 600;
  text-decoration: none;
}

.hsp-paper-link:hover {
  text-decoration: underline;
}

.hsp-paper-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.hsp-code,
.hsp-socials {
  font-size: 0.95rem;
}

.hsp-socials {
  margin-top: 1.25rem;
}

.hsp-socials p:last-child {
  margin-bottom: 0;
}

main .quarto-figure img {
  padding: 0.5rem;
  width: 100%;
  height: auto;
}

/* The PNGs have white backgrounds and dark labels. In dark mode, invert
   their luminance and rotate hues back toward the original palette. Screen
   blending makes the resulting black backgrounds blend into the page. */
.quarto-dark main .quarto-figure img {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}

main .quarto-figure {
  margin: 2rem 0;
}

@media print {
  .quarto-dark main .quarto-figure img {
    filter: none;
    mix-blend-mode: normal;
  }
}