@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-white);
    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;
  }

  .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; }
}