@layer components {
  /* Centered title, with navigation pinned to the start and actions to the end */
  .header {
    align-items: center;
    display: grid;
    grid-template-areas: "nav title actions";
    grid-template-columns: 1fr auto 1fr;
    min-block-size: 3rem;
    padding-block: calc(var(--block-space-half) + var(--safe-inset-top)) var(--block-space-half);
    padding-inline: var(--main-padding);
    position: relative;
    z-index: var(--z-nav);
  }

  .header__title {
    color: inherit;
    font-size: var(--text-medium);
    font-weight: 700;
    grid-area: title;
  }

  .header__nav {
    display: flex;
    gap: var(--inline-space);
    grid-area: nav;
  }

  .header__actions {
    display: flex;
    gap: var(--inline-space);
    grid-area: actions;
    justify-content: end;
  }

  .header__skip-navigation {
    inset-block-start: 4rem;
    inset-inline-start: -999em;
    position: absolute;

    &:focus {
      inset-inline-start: var(--inline-space);
    }
  }
}