/* ESA brand. The wordmark's viewBox is 610x165: give the mark that width at the header height. */
.brand .mark { width: calc(1.3rem * 610 / 165); }

/* The logo is a photo: melt a thin border into the page background in both themes. */
.logo {
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent),
    linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent),
    linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  mask-composite: intersect;
}