@layer blocks {
  .site-nav {
    container-type: inline-size;
    border-bottom: 1px var(--border-style) var(--color-border);
    padding-block: 0.875rem; /* spec .nav-in 14px */
    position: sticky;
    top: 0;
    background: var(--color-bg-glass);
    backdrop-filter: blur(8px);
    z-index: 100;
  }

  /* Spec bar: 26px between logo / links / lang / CTA. Authenticated
     chrome is .repel, so this only hits the marketing cluster. Do not wrap
     the desktop row: cluster's default wrap is what splits the bar in two
     just above the hamburger. */
  .site-nav > .cluster {
    --cluster-space: 1.625rem;
    flex-wrap: nowrap;
  }

  .site-nav li button {
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: inherit;
  }

  .site-nav li button:hover {
    color: var(--color-text);
  }

  /* 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: 1.5px solid var(--color-text);
    border-radius: var(--radius-s);
    background: transparent;
    cursor: pointer;
  }

  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    display: block;
    inline-size: 17px;
    block-size: 2px;
    border-radius: 2px;
    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: -5.5px;
  }

  .nav-toggle-bars::after {
    inset-block-start: 5.5px;
  }

  /* Push the link list (and so the language switch and CTA after it) to the
     trailing edge, matching the redesign's logo | links | lang | CTA row. */
  .nav-links {
    --cluster-space: 1.375rem; /* spec 22px between links */
    margin-inline-start: auto;
    flex-wrap: nowrap;
  }

  /* Spec toggles at 820px. The German labels plus CTA overflow a bit earlier
     and cluster wrap would split the bar; switch to the hamburger first. */
  @container (width < 56rem) {
    .site-nav .wrapper {
      --wrapper-padding-inline: 1rem;
    }

    .site-nav > .cluster {
      --cluster-space: 0.625rem; /* spec .nav-in 10px */
      flex-wrap: wrap;
    }

    /* Language switch box: 0.8rem × snug leading + 5px padding-block × 2 +
       1.5px border × 2. The CTA and hamburger share it so the three chips
       read as one row. Width-from-height (stretch + aspect-ratio) does not
       work on a flex item in this bar. */
    .nav-toggle,
    .lang-switch,
    .nav-cta {
      --nav-control-size: calc(0.8rem * var(--leading-snug) + 0.625rem + 3px);
      block-size: var(--nav-control-size);
    }

    .nav-cta {
      --button-padding: 0.5rem 0.8125rem; /* spec 8px 13px */
      --button-font-size: 0.88rem;
      --button-display: inline-flex;
      align-items: center;
    }

    .nav-toggle {
      display: flex;
      order: 2;
      margin-inline-start: auto;
      inline-size: var(--nav-control-size);
    }

    .lang-switch {
      order: 3;
    }

    .nav-cta {
      order: 4;
    }

    .nav-links {
      order: 5;
      flex-basis: 100%;
      display: none;
      margin-inline-start: 0;
      margin-block-start: var(--space-3xs);
      padding-block-start: var(--space-3xs);
      border-block-start: 1px var(--border-style) var(--color-border);
    }

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

    .nav-links[data-state="open"] .nav-link {
      padding-block: 0.6875rem;
      padding-inline: 0.125rem;
      font-size: 1.02rem;
      --color-link: var(--color-text);
    }

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