@layer blocks {
  /* The site nav's links. Narrow: a menu below the controls, hidden until the
     hamburger opens it (data-state="open"). Wide: an inline row before the
     language switch. */
  .nav-links {
    order: 5;
    flex-basis: 100%;
    display: none;
    padding-block-start: var(--space-1);
    border-block-start: var(--stroke-s) var(--border-style) var(--color-border);
  }

  .nav-links[data-state="open"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* A cell tall and at least a cell wide, as in the margin nav: the link
     itself is the tap target. */
  .nav-links .nav-link {
    min-inline-size: var(--size-target);
    justify-content: center;
    line-height: var(--grid-cell);
  }

  .nav-links[data-state="open"] .nav-link {
    justify-content: flex-start;
    padding-inline: 2px;
    font-size: var(--text-base);
    --color-link: var(--color-text);
  }

  .nav-links li + li {
    border-block-start: var(--stroke-s) var(--border-style) var(--color-border);
  }

  /* The open state is reset too, in case the menu was open when the bar
     widened. */
  @container site-nav (width > 55rem) {
    .nav-links,
    .nav-links[data-state="open"] {
      order: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      flex-basis: auto;
      align-items: center;
      gap: var(--space-half); /* spec 22px between links */
      padding-block-start: 0;
      border-block-start: 0;
    }

    .nav-links[data-state="open"] .nav-link {
      padding: 0;
      font-size: var(--text-sm);
      --color-link: var(--color-text-muted);
    }

    .nav-links li + li {
      border-block-start: 0;
    }
  }
}