@layer blocks {
  /* Hamburger: a square [ frame ] the language switch's height. 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 {
    --frame-ratio: 1;
    order: 2;
    flex: none;
    inline-size: var(--nav-control-size);
    border: var(--stroke-m) solid var(--color-text);
    border-radius: var(--radius-s);
  }

  @container site-nav (width > 55rem) {
    .nav-toggle {
      --frame-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);
  }
}