/* Tint the header logo with the theme's primary colour. Without this it
   inherits the modern header's neutral grey foreground. Setting `color`
   drives the SVG's `currentColor`; `fill` covers the direct case too.
   Using the CSS variable (rather than a fixed hex) keeps the logo in step
   with the palette, so changing the primary colour recolours the heart. */
.md-logo {
  color: var(--md-primary-fg-color);
}

.md-logo svg {
  fill: var(--md-primary-fg-color);
}

/* Fading portrait hero ("B"). This is a real <img> — authored in index.md as a
   Markdown image so it carries alt text for screen readers; the previous
   ::before background couldn't be given an accessible name at all. Markdown
   wraps the image in a <p>, so the :has() rule strips that wrapper's margin to
   let the hero sit flush. Sizing is height-first — the portrait is scaled by
   height and centred, so the whole face shows and its natural (square) width is
   inherently capped. It dissolves into the page background through a mask
   gradient — a mask, not a colour, so it melts into whatever the palette's
   background is and stays correct across the auto light/dark toggle. Band
   height and the fade start are the knobs. */
.md-typeset p:has(> img.hero) {
  margin: 0;
}

.md-typeset img.hero {
  display: block;
  height: clamp(200px, 30vh, 340px);
  width: auto;
  max-width: 100%;
  margin: -1rem auto 1.5rem;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0) 0%,
    rgb(0 0 0) 33%,
    rgb(0 0 0 / 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgb(0 0 0) 0%,
    rgb(0 0 0) 33%,
    rgb(0 0 0 / 0) 100%
  );
}