@layer blocks {
  /* A one-cell row with a quarter cell above and below: 1.5 cells tall, 2.5
     when the narrow bar wraps. The notebook composition starts the sheet half
     a cell lower, so it begins on a dot row. The hairline is a shadow so it
     doesn't add a pixel to that height. */
  .site-nav {
    container: site-nav / inline-size;
    /* The language switch's box height; CTA and hamburger match it when narrow. */
    --nav-control-size: calc(var(--text-xs) * var(--leading-snug) + 2 * var(--space-1) + 2 * var(--stroke-m));
    padding-block: var(--space-quarter);
    box-shadow: var(--shadow-hairline-below);
    position: sticky;
    inset-block-start: 0;
    background: var(--color-bg-glass);
    backdrop-filter: blur(var(--blur-glass));
    z-index: 100;
  }

  /* When the bar wraps, the row gap tops the control line up to a full cell. */
  .site-nav > .repel {
    min-block-size: var(--space-cell);
    row-gap: calc(var(--space-cell) - var(--nav-control-size));
  }

  /* Fills its line so the open link list spans the bar; controls trail. */
  .nav-menu {
    --cluster-space: var(--space-2); /* spec .nav-in 10px */
    --cluster-justify: flex-end;
    flex-grow: 1;
  }

  .site-nav .choice {
    block-size: var(--nav-control-size);
    order: 3;
  }

  .nav-cta {
    --button-display: inline-flex;
    align-items: center;
    block-size: var(--nav-control-size);
    order: 4;
  }

  /* The links fit from here on. No wrap: wrapping splits the bar. */
  @container site-nav (width > 55rem) {
    .site-nav > .repel,
    .nav-menu {
      flex-wrap: nowrap;
      --cluster-space: var(--space-half); /* spec 22px between links */
    }

    .site-nav .choice,
    .nav-cta {
      order: 0;
      block-size: auto;
    }
  }
}