/* The starfield band: the full window width across the top of the post,
   behind the sidebar. Its thick one-copy band runs at 12.25rem, under the
   sidebar's nav and the post title. The band is a fixed height, so that line
   stays put at any width. The image is 5:1, 1800px wide at that height:
   narrower windows show the middle of it, wider ones stretch it a little
   (1.4x at 2560px). The image
   follows the theme the same way the colour tokens do, so the toggle swaps
   it and only one is downloaded. Its ground is the page colour; the blend
   mode keeps it exactly --bg (lossy WebP decodes #121212 as #111111, and a
   post tint shifts --bg), so the band has no edges. */
:root {
  --band-img: url("/diy-genomics/starfield-band-light.webp");
  --band-blend: darken;
  --band-h: 22.5rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --band-img: url("/diy-genomics/starfield-band-dark.webp");
    --band-blend: lighten;
  }
}
:root[data-theme="dark"] {
  --band-img: url("/diy-genomics/starfield-band-dark.webp");
  --band-blend: lighten;
}
.band {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--band-h);
  background: var(--band-img) 50% 0 / max(100%, 112.5rem) 100% no-repeat;
  mix-blend-mode: var(--band-blend);
  pointer-events: none;
}
.band + .site {
  position: relative;
}
/* The title's middle at 12.25rem, over the thick band: 5rem of the site's
   top padding is above it, and half the title's line is 1rem. The post
   starts below the band's sparse tail, with a little space after it. */
.band + .site .post-head {
  padding-top: 6.25rem;
  margin-bottom: 6.5rem;
}
@media (max-width: 52rem) {
  /* On phones the stacked sidebar already puts the title there. */
  .band + .site .post-head {
    padding-top: 0;
    margin-bottom: 3rem;
  }
}