/* The Studio header template (Dave's call, Nov 3 2026): ONE header for
   the whole site, hamburger on mobile. Canonical snippet lives in
   ~/workspace/studio-nav-template/snippet.html; pages link this file
   and /assets/studio-nav.js. The Theater uses the same header with
   the .dark variant (its page is all black). */
.snav { position: relative; background: #fff; }
.snav .snav-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 25px 34px; max-width: 1180px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.snav .mark { font-weight: 700; letter-spacing: 4px; font-size: 16px; color: #1d1d1f; text-decoration: none; white-space: nowrap; }
.snav .links { display: flex; gap: 30px; align-items: center; margin-left: auto; }
.snav .links a { color: #6e6e73; text-decoration: none; font-size: 16px; white-space: nowrap; }
.snav .links a:hover { color: #1d1d1f; }
.snav .links a.e2 { color: #0066cc; font-weight: 600; }
.snav .links a.workdesk { background: #fff7cc; color: #1d1d1f; font-weight: 600; padding: 8px 18px; border-radius: 999px; }
.snav .links a.workdesk:hover { background: #ffef9e; color: #1d1d1f; }
.snav .mechip { order: 2; flex: none; }
.snav .snav-burger { order: 3; display: none; flex: none; width: 42px; height: 42px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; padding: 9px; }
.snav .snav-burger span { display: block; height: 2px; background: #1d1d1f; border-radius: 2px; }
.snav .snav-burger span + span { margin-top: 6px; }

/* Dark variant (Theater). */
.snav.dark { background: #000; }
.snav.dark .mark { color: #f5f5f7; }
.snav.dark .links a { color: #a1a1a6; }
.snav.dark .links a:hover { color: #fff; }
.snav.dark .links a.e2 { color: #2997ff; }
.snav.dark .snav-burger span { background: #f5f5f7; }

@media (max-width: 860px) {
  .snav .snav-in { padding: 16px 20px; }
  .snav .snav-burger { display: block; }
  .snav .links { display: none; }
  .snav .links.open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 100%; left: 0; right: 0; margin-left: 0; background: #fff; padding: 10px 20px 16px; border-top: 1px solid #ececf0; box-shadow: 0 18px 30px rgba(0, 0, 0, .12); z-index: 80; }
  .snav .links.open a { padding: 12px 6px; font-size: 18px; border-bottom: 1px solid #f2f2f5; }
  .snav .links.open a:last-child { border-bottom: 0; }
  .snav .links.open a.workdesk { text-align: center; margin: 6px 0; border-bottom: 0; }
  .snav.dark .links.open { background: #000; border-top-color: #1d1d1f; box-shadow: 0 18px 30px rgba(0, 0, 0, .5); }
  .snav.dark .links.open a { border-bottom-color: #1d1d1f; }
}