@layer styles {
  .wordmark {
    display: inline-block;
    padding-top: var(--space);
    color: inherit;
    font-family: var(--font);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    text-decoration: none;
  }

  .slogan {
    font-size: 1.25rem;
  }

  /* Only a small step down to the image, which belongs to the same header;
     a section's full spacing would set it apart as the next section. */
  .header__top {
    padding-bottom: var(--space--small);
  }

  .header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
  }

  .menu__open,
  .menu__close {
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--color--text);
    border-radius: var(--border-radius);
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1.125rem;
    cursor: pointer;
  }

  /* The open popover: a panel across the top of the page. Author styles
     outrank the browser's own popover defaults, which would centre a small
     box with a border.

     Absolute rather than the default fixed, and padded like .header__top, so
     its copy of the bar sits exactly over the real one even when the page is
     scrolled a little. */
  .menu__panel {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 0 var(--page-side-padding) var(--space);
    border: 0;
    background: var(--color--background);
    color: var(--color--text);
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.15);
  }

  .menu__panel::backdrop {
    background: rgb(0 0 0 / 0.2);
  }

  .menu__list {
    display: grid;
    gap: var(--space--small);
    margin: var(--space) 0 0;
    padding: 0;
    list-style: none;
  }

  .menu__link {
    color: inherit;
    font-size: 1.5rem;
    text-decoration: none;
  }

  .menu__link:hover,
  .menu__link[aria-current='page'] {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  /* Wide enough for the links in a row: the list is shown in place, and the
     buttons that open and close it as a popover go. */
  @media (min-width: 48rem) {
    .menu__open,
    .menu__bar {
      display: none;
    }

    .menu__panel {
      display: block;
      position: static;
      width: auto;
      padding: 0;
      background: none;
      box-shadow: none;
      overflow: visible;
    }

    .menu__list {
      display: flex;
      gap: var(--space);
      margin: 0;
    }

    .menu__link {
      font-size: 1.25rem;
    }
  }

  /* A band cut from the photo rather than the whole of it; the crop keeps the
     middle, where the letter is. */
  .header-image img {
    display: block;
    width: 100%;
    height: clamp(18rem, 40vw, 32rem);
    object-fit: cover;
    object-position: center;
  }

  /* Half the start page's band, but only where that is still a band: on a
     phone half of 18rem would leave only a thin strip, so it keeps the full
     mobile height. */
  @media (min-width: 48rem) {
    .header-image--condensed img {
      height: clamp(12rem, 20vw, 16rem);
    }
  }
}