@layer components {
  /* A thin bar on every section except the home page (G.1) */
  .navigation {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--space);
    min-height: var(--navigation-height);
    padding: 0 var(--space);
    background: var(--color-navigation);
    border-bottom: 1px solid var(--color-grey-light);
  }

  .navigation__home { flex-shrink: 0; }
  .navigation__logo { height: calc(var(--navigation-height) - 0.6rem); width: auto; }

  .navigation__sections {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space);
    padding: 0.3rem 0;
  }

  /* The name of the site, on the right (review 4.2); left out where the
     sections already fill the bar */
  .navigation__title {
    display: none;
    margin: 0 0 0 auto;
    color: var(--color-blue-dark);
    font-size: var(--text-normal);
    font-weight: bold;
    white-space: nowrap;
  }

  @media (min-width: 48rem) {
    .navigation__title { display: block; }
  }

  .navigation__link {
    padding: 0.3rem 0;
    color: var(--color-grey);
    font-size: var(--text-small);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
  }

  .navigation__link:hover,
  .navigation__link[aria-current="page"] {
    color: var(--color-blue);
    border-bottom-color: var(--color-blue);
  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-half);
    min-height: var(--footer-height);
    color: var(--color-grey);
    font-size: var(--text-small);
  }

  .footer a { color: inherit; }

  /* At the end of an article, the way to write to the crew stands out (review 4.6) */
  .footer__contact--large { font-size: var(--text-large); }
}