@layer blocks {
  /* Hamburger. Shown until the sheet is wide enough for the links; the bar
     is one element with two pseudo-element siblings so there is nothing to
     keep in sync. */
  .nav-toggle {
    display: flex;
    order: 2;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: var(--nav-control-size);
    block-size: var(--nav-control-size);
    padding: 0;
    border: var(--stroke-m) solid var(--color-text);
    border-radius: var(--radius-s);
    background: transparent;
  }

  @container site-nav (width > 55rem) {
    .nav-toggle {
      display: none;
    }
  }

  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block;
    inline-size: var(--space-half);
    block-size: var(--stroke-m);
    border-radius: var(--radius-s);
    background: var(--color-text);
  }

  .nav-toggle-bars {
    position: relative;
  }

  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
  }

  .nav-toggle-bars::before {
    inset-block-start: calc(-1 * var(--space-1));
  }

  .nav-toggle-bars::after {
    inset-block-start: var(--space-1);
  }
}