:host { display: block; position: sticky; top: 12px; z-index: 20; width: min(calc(var(--wrap) + 48px), calc(100% - 40px));
      margin: calc(12px * var(--spacing)) auto 0; background: var(--raised); border-radius: var(--btn-radius); box-shadow: var(--bar-shadow); }
    header { display: flex; align-items: center; gap: calc(var(--space-4) * var(--spacing)); min-height: 60px; padding: calc(10px * var(--spacing)) calc(12px * var(--spacing)) calc(10px * var(--spacing)) calc(24px * var(--spacing)); box-sizing: border-box; }
    nav { display: flex; align-items: center; gap: calc(var(--space-6) * var(--spacing)); margin-left: auto; }
    ::slotted(a:not(.btn)) { color: var(--body); text-decoration: none; font-weight: 500; font-size: calc(.9rem * var(--type-scale)); transition: color .15s; }
    ::slotted(a:not(.btn):hover) { color: var(--ink); }
    @media (max-width: 860px) {
      :host { top: 0; width: 100%; margin: 0; border-radius: 0; box-shadow: 0 1px 0 var(--line); }
      header { padding: calc(8px * var(--spacing)) calc(16px * var(--spacing)); min-height: 56px; }
      ::slotted(a:not(.btn)) { display: none; }
    }
    header, nav { flex-wrap: wrap; min-width: 0; }
    nav { max-width: 100%; }
    ::slotted(a) { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
    :host([variant=bar]) { top: 0; width: 100%; margin: 0; border-radius: 0; }
    :host([variant=stacked]) header { flex-direction: column; }
    :host([variant=stacked]) nav { margin-inline: auto; justify-content: center; }
    @media (max-width: 860px) {
      header { flex-direction: column; align-items: stretch; }
      nav { margin: 0; gap: .75rem; }
      ::slotted(a:not(.btn)) { display: inline-block; }
    }