@layer styles {
  .site-header {
    padding: var(--space--small) 0;
  }

  /* Over a hero the mark rides up into the densest part of the scrim. In
     normal flow it keeps the space — there is nothing above it to sit on. */
  .has-hero > .site-header {
    padding-top: 0;
  }

  .logotype {
    display: block;
    /* Scales with the viewport between a size that leaves a phone's hero
       photo readable and one that holds its own on a wide screen. */
    width: clamp(16rem, 28vw, 20rem);
    height: auto;
  }

  /*
   * With a hero, the logotype sits top-left on the image rather than above it.
   * The header is taken out of flow so the hero starts at the top of <main>,
   * which is the positioning context. Without one the header stays in normal
   * flow on white, which is the fallback an ordinary page wants.
   *
   * The hero is a dedicated page field rather than a body block, so it is
   * always the first thing in <main> and this cannot end up over something
   * else.
   */
  .has-hero {
    position: relative;
  }

  .has-hero > .site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1;
  }

  /*
   * The mark is navy and gold on transparency, so it needs the image behind it
   * to be light. A scrim guarantees that instead of hoping the editor picks a
   * photo with a pale top-left corner. In the page's own beige rather than
   * white, so it reads as the page continuing over the image.
   *
   * The scrim extends well past the header box, so the fade has room to
   * resolve below the mark instead of inside it. With the gradient confined to
   * the header, the alpha behind the tagline was near zero and the wordmark's
   * lower half sat on bare photo.
   */
  .has-hero > .site-header::before {
    content: '';
    position: absolute;
    inset: 0 0 -12rem 0;
    z-index: -1;
    /*
     * Near-opaque down to the bottom of the brand block, then a long tail. A
     * straight ramp puts its midpoint inside the mark; these stops put it well
     * below, and the tail is long enough that the plateau has no visible edge.
     */
    background: linear-gradient(
      to bottom,
      rgb(var(--color-page-rgb) / 0.9) 0%,
      rgb(var(--color-page-rgb) / 0.8) 30%,
      rgb(var(--color-page-rgb) / 0.7) 45%,
      rgb(var(--color-page-rgb) / 0.5) 62%,
      rgb(var(--color-page-rgb) / 0.2) 80%,
      rgb(var(--color-page-rgb) / 0) 100%
    );
    pointer-events: none;
  }

  .site-header__content {
    display: grid;
    justify-items: center;
  }

  /* 850px. Above it the hero is tall enough for the mark to sit in its corner;
     below, a mark hard against the left edge reads as an accident. */
  @media (min-width: 53.125em) {
    .site-header__content {
      justify-items: start;
    }
  }

  /* The tagline takes its width from the mark rather than repeating the mark's
     clamp, so the two cannot resolve differently and leave the text sitting off
     centre under the letterforms. */
  .site-header__brand {
    display: grid;
    gap: 0.3rem;
    width: fit-content;
  }

  .site-header__tagline {
    color: var(--color-navy);
  }

  /* The anchor carries whitespace text nodes either side of the image, which
     an underline can land on. */
  .logotype-wrapper {
    text-decoration: none;
  }
}