/* Alternate navbar, available at ?nav=studio. The glass version remains default. */
html[data-nav-variant=studio] { --nav-clearance: 112px; }
[data-nav-variant=studio] .site-header { height: 112px; }
[data-nav-variant=studio] .nav-shell {
  top: 22px; left: 50%; right: auto; transform: translateX(-50%);
  width: var(--studio-nav-width,calc(100% - 56px)); min-height: 76px;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 24px;
  padding: 12px 26px; border-radius: 10px; background: #fff;
  box-shadow: none; pointer-events: auto;
}
[data-nav-variant=studio] .nav-shell::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; box-shadow: 0 4px 26px rgba(32,35,31,.065);
  opacity: var(--studio-nav-shadow,0); transition: opacity 280ms ease;
}
[data-nav-variant=studio] .nav-shell:focus-within::before { opacity: 1; }
@media(hover: hover) {
  [data-nav-variant=studio] .nav-shell:hover::before { opacity: 1; }
}
[data-nav-variant=studio] .site-header .glass-surface {
  background: transparent; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
[data-nav-variant=studio] .nav-primary { grid-column: 1; grid-row: 1; padding: 0; min-height: 44px; border-radius: 0; justify-self: start; }
[data-nav-variant=studio] .nav-menu-content { gap: 23px; }
[data-nav-variant=studio] .nav-menu-content > .nav-page,
[data-nav-variant=studio] .nav-demo,
[data-nav-variant=studio] .nav-language-toggle {
  font-family: Barlow,sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .075em; text-transform: uppercase;
}
[data-nav-variant=studio] .nav-menu-content > .nav-page { min-height: 44px; }
[data-nav-variant=studio] .nav-primary .language-switch,
[data-nav-variant=studio] .nav-utilities .language-switch { display: none; }
[data-nav-variant=studio] .site-header .nav-brand {
  display: inline-flex; grid-column: 2; grid-row: 1; justify-self: center;
  gap: 10px; min-height: 44px; border-radius: 0; transition: none;
}
[data-nav-variant=studio] .nav-symbol { width: 27px; height: 36px; }
[data-nav-variant=studio] .nav-symbol .brand-symbol { width: 27px; }
[data-nav-variant=studio] .nav-wordmark-slot { overflow: visible; }
[data-nav-variant=studio] .nav-wordmark { width: auto; height: auto; padding: 0 3px 0 0; opacity: 1; transform: none; transition: none; }
[data-nav-variant=studio] .nav-wordmark .brand-wordmark { font-size: 18px; }
[data-nav-variant=studio] .nav-progress { display: none; }
[data-nav-variant=studio] .nav-utilities { display: flex; align-items: center; gap: 26px; grid-column: 3; grid-row: 1; justify-self: end; }
[data-nav-variant=studio] .nav-language-toggle { padding: 8px 4px; min-height: 44px; min-width: 44px; color: #20231f; background: transparent; border: 0; cursor: pointer; }
[data-nav-variant=studio] .nav-language-toggle:hover { text-decoration: underline; text-underline-offset: 5px; }
[data-nav-variant=studio] .nav-demo { padding: 0; min-height: 44px; border-radius: 0; }
[data-nav-variant=studio] .nav-demo-label { background: transparent; color: #20231f; border-radius: 0; padding: 8px 0; gap: 10px; }
[data-nav-variant=studio] .nav-demo svg { display: none; }
[data-nav-variant=studio] .nav-demo:hover { text-decoration: underline; text-underline-offset: 5px; }
@media(max-width: 900px) {
  html[data-nav-variant=studio] { --nav-clearance: 100px; }
  [data-nav-variant=studio] .site-header { height: 104px; }
  [data-nav-variant=studio] .nav-shell { width: calc(100% - 32px); top: 16px; min-height: 68px; padding: 10px 18px; gap: 12px; border-radius: 9px; }
  [data-nav-variant=studio] .nav-primary { position: static; }
  [data-nav-variant=studio] .site-header[data-nav-ready] .nav-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; min-height: 44px; padding: 8px; background: transparent; border: 0; color: #20231f; border-radius: 4px; cursor: pointer; }
  [data-nav-variant=studio] .nav-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-nav-variant=studio] .nav-menu-toggle svg { width: 19px; height: 19px; }
  [data-nav-variant=studio] .site-header[data-nav-ready] .nav-menu-content {
    position: absolute; top: calc(100% + 8px); left: 0; width: min(300px,100%);
    padding: 18px 22px; border-radius: 9px; background: #fff;
    box-shadow: 0 4px 26px rgba(32,35,31,.08); backdrop-filter: none; -webkit-backdrop-filter: none;
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 160ms ease, transform 220ms var(--nav-ease), visibility 160ms;
  }
  [data-nav-variant=studio] .site-header[data-menu-open] .nav-menu-content { opacity: 1; visibility: visible; transform: none; }
  [data-nav-variant=studio] .nav-menu-content > .nav-page { font-size: 13px; }
  [data-nav-variant=studio] .nav-menu-content .nav-language-toggle { align-self: start; text-align: left; padding-left: 0; }
  [data-nav-variant=studio] .nav-utilities { gap: 0; }
  [data-nav-variant=studio] .nav-demo { font-size: 11px; letter-spacing: .025em; }
  [data-nav-variant=studio] .nav-demo-label { gap: 7px; }
}
@media(max-width: 480px) {
  [data-nav-variant=studio] .nav-shell { width: calc(100% - 24px); padding-inline: 12px; grid-template-columns: minmax(32px,1fr) auto minmax(32px,1fr); gap: 8px; }
  [data-nav-variant=studio] .site-header .nav-brand { gap: 7px; }
  [data-nav-variant=studio] .nav-wordmark .brand-wordmark { font-size: 15px; }
  [data-nav-variant=studio] .nav-symbol, [data-nav-variant=studio] .nav-symbol .brand-symbol { width: 23px; }
  [data-nav-variant=studio] .nav-demo svg { display: none; }
}
@media(max-width: 360px) {
  [data-nav-variant=studio] .nav-wordmark .brand-wordmark { font-size: 13px; }
  [data-nav-variant=studio] .nav-symbol, [data-nav-variant=studio] .nav-symbol .brand-symbol { width: 21px; }
  [data-nav-variant=studio] .site-header .nav-brand { gap: 6px; }
  [data-nav-variant=studio] .nav-demo { font-size: 11px; letter-spacing: 0; }
}
@media(prefers-reduced-motion: reduce) {
  [data-nav-variant=studio] .nav-shell::before { transition: none; }
}