@layer blocks {
  /* Hamburger. Hidden until the nav runs out of room; the bar is one element
     with two pseudo-element siblings so there is nothing to keep in sync. */
  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
    border: var(--stroke-m) solid var(--color-text);
    border-radius: var(--radius-s);
    background: transparent;
  }

  @container site-nav (width < 56rem) {
    .nav-toggle {
      display: flex;
      order: 2;
      margin-inline-start: auto;
      inline-size: var(--nav-control-size);
      block-size: var(--nav-control-size);
    }
  }

  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block;
    inline-size: var(--space-s);
    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-3xs));
  }

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