@layer layout {
  main {
    max-inline-size: var(--page-inline-size);
    margin-inline: auto;
    padding-block: 1.5rem 4rem;
    padding-inline: 1.25rem;
  }

  .masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--block-space);
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    border-block-end: 1px solid var(--color-rule);

    & nav {
      display: flex;
      align-items: center;
      gap: var(--block-space-quarter);

      & a {
        padding-block: 0.3rem;
        padding-inline: 0.6rem;
        border-radius: var(--radius);
        color: var(--color-muted);
        text-decoration: none;
        transition: background-color 120ms, color 120ms;

        &:hover {
          background: var(--color-shade);
          color: var(--color-ink);
        }

        &[aria-current] {
          background: var(--color-accent-wash);
          color: var(--color-ink);
        }
      }
    }

    & form {
      margin: 0;
    }

    & .masthead__aside {
      display: flex;
      align-items: center;
      gap: var(--block-space-half);
      margin-inline-start: var(--block-space-half);
      padding-inline-start: var(--block-space);
      border-inline-start: 1px solid var(--color-rule);
    }

    & .masthead__away::after {
      content: " ↗";
      font-size: 0.8em;
      vertical-align: 0.15em;
    }

    /* Seven nav items will not fit a phone. One scrolling line beats a wrapped block. */
    @media (width < 52rem) {
      flex-wrap: wrap;
      gap: var(--block-space-half);

      & nav {
        inline-size: 100%;
        overflow-x: auto;
        scrollbar-width: none;

        & > * {
          flex: none;
        }
      }
    }
  }

  .masthead__brand {
    display: flex;
    align-items: stretch;
    gap: var(--inline-space);
    color: var(--color-ink);
    text-decoration: none;
  }

  .masthead__product {
    display: flex;
    align-items: center;
    padding-inline-start: var(--inline-space);
    border-inline-start: 1px solid var(--color-rule);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-muted);
  }

  .logo {
    display: block;
    block-size: 1.5rem;
    inline-size: auto;
  }

  .skip {
    position: absolute;
    inset-block-start: var(--block-space-half);
    inset-inline-start: var(--block-space-half);
    padding: var(--block-space-half);
    border-radius: var(--radius);
    background: var(--color-page);
    z-index: 1;

    &:not(:focus) {
      clip-path: inset(50%);
      block-size: 1px;
      inline-size: 1px;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .back {
    margin-block: 0 var(--block-space);
    font-size: var(--text-small);

    & a::before {
      content: "← ";
    }
  }
}