/* Studio's shared Menu + search: the same two ways in, one place to explore. */
:root { --studio-nav-height: 104px; }
.nav-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.site-header { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 22px; height: var(--studio-nav-height); }
.site-header > .wordmark { justify-self: start; }
.studio-nav-controls { display: flex; align-items: center; gap: 10px; }
.site-header .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 15px; border: 1px solid #a991bb80; border-radius: 10px; color: #f4edf9; background: #ffffff06; font-size: 14px; font-weight: 600; line-height: 1.3; }
.site-header .menu-toggle:hover, .site-header .menu-toggle[aria-expanded=true] { background: #cbb5ff1c; border-color: #d3b6ee; }
.site-header .menu-toggle > span { font-size: 14px; line-height: 1.3; transform: none; }
.menu-grid-icon { width: 18px; height: 18px; color: #d8c0ef; flex: 0 0 auto; }
.studio-nav-search { position: relative; display: block; width: clamp(230px,24vw,350px); }
.studio-nav-search > svg { position: absolute; width: 17px; height: 17px; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #89739a; }
.studio-nav-search input { width: 100%; height: 44px; border: 1px solid #b49dca80; border-radius: 10px; padding: 10px 12px 10px 41px; background: #f4eff8; color: #2b2034; font: 500 13px/1.4 var(--sans); appearance: none; -webkit-appearance: none; }
.studio-nav-search input::placeholder { color: #756880; opacity: 1; }
.studio-nav-search input:focus { outline: 2px solid #c5a1ed; outline-offset: 3px; border-color: #d9baff; }
.studio-header-contact { justify-self: end; display: inline-flex; align-items: center; gap: 16px; min-height: 44px; white-space: nowrap; font-size: 13px; color: #ddd0e9; }
.studio-header-contact:hover { color: #fff; }
.studio-header-contact > span { color: #ccade8; font-size: 20px; }
.site-header nav.studio-navigation { position: absolute; top: calc(100% - 1px); left: 50%; right: auto; transform: translateX(-50%); width: min(1060px,calc(100vw - 48px)); min-width: 0; max-width: none; max-height: calc(100dvh - var(--studio-nav-height) - 16px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: block; padding: 0; border: 1px solid #a083bc66; border-radius: 0 0 16px 16px; background: linear-gradient(145deg,#251c31,#17121f); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 24px 70px #05030b80; color: #eee5f6; scrollbar-width: thin; scrollbar-color: #745b85 #21182c; }
.studio-nav-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px 19px; border-bottom: 1px solid #b9a0ce25; }
.studio-nav-heading p { color: #b29ac5; font-size: 9px; letter-spacing: 1.9px; margin: 0 0 5px; }
.studio-nav-heading strong { font-weight: 500; font-size: 20px; letter-spacing: -.35px; }
.studio-nav-close { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; padding: 8px; border-radius: 9px; color: #d7c2e7; background: #ffffff08; border: 1px solid #a58cbb45; }
.studio-nav-close svg { width: 19px; height: 19px; }
.studio-nav-close:hover { background: #cbb5ff20; }
.studio-nav-browse { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 23px 18px 26px; }
.studio-nav-group { padding: 0 14px; min-width: 0; }
.studio-nav-group + .studio-nav-group { border-left: 1px solid #b9a0ce25; }
.site-header .studio-nav-group h2 { font: 600 10px/1.5 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: #a997b9; margin: 0 10px 12px; }
.studio-navigation a.studio-nav-link { display: block; padding: 11px 10px; border-radius: 8px; min-height: 66px; white-space: normal; transition: background .15s; }
.studio-nav-link strong { display: block; color: #e0c6fb; font-size: 14px; font-weight: 600; line-height: 1.5; }
.studio-nav-link > span { display: block; color: #bfb0ca; font-size: 12px; line-height: 1.65; margin-top: 3px; }
.studio-navigation a.studio-nav-link:hover, .studio-navigation a.studio-nav-link[aria-current] { background: #cbb5ff13; }
.studio-navigation a.studio-nav-link:hover strong { color: #f4e6ff; }
.studio-nav-results { padding: 24px 28px 30px; }
.studio-nav-status { color: #b9a3ca; font-size: 11px; letter-spacing: .4px; margin: 0 0 12px; }
.studio-nav-matches { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px 20px; }
.studio-nav-empty { font-size: 14px; line-height: 1.9; color: #c9bbd3; margin: 18px 0 8px; }
.studio-nav-empty a { color: #e0c6fb; text-decoration: underline; text-underline-offset: 4px; }
.studio-nav-footer { display: flex; justify-content: space-between; gap: 16px; padding: 15px 28px; border-top: 1px solid #b9a0ce25; font-size: 10px; color: #a492b3; }
@media(max-width:1100px) and (min-width:701px) {
  .site-header { gap: 14px; padding-inline: 28px; }
  .site-header .studio-header-mark { width: 60px; }
  .site-header .wordmark > span { font-size: 20px; }
  .studio-nav-search { width: clamp(190px,27vw,290px); }
  .studio-header-contact { font-size: 12px; gap: 8px; }
}
@media(max-width:850px) and (min-width:701px) {
  .site-header { grid-template-columns: minmax(0,1fr) auto; }
  .studio-header-contact { display: none; }
  .studio-nav-search { width: 230px; }
}
@media(max-width:700px) {
  :root { --studio-nav-height: 140px; }
  html { scroll-padding-top: 156px; }
  .site-header { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 52px 44px; gap: 12px; padding: 16px 24px; }
  .studio-nav-controls { display: contents; }
  .site-header .wordmark { gap: 3px; }
  .site-header .studio-header-mark { width: 61px; }
  .site-header .wordmark > span { font-size: 21px; }
  .site-header .menu-toggle { grid-column: 2; grid-row: 1; padding: 10px 12px; }
  .studio-nav-search { grid-column: 1/-1; grid-row: 2; width: 100%; }
  .studio-nav-search input { font-size: 16px; }
  .studio-header-contact { display: none; }
  .site-header nav.studio-navigation { width: calc(100vw - 24px); border-radius: 0 0 12px 12px; }
  .studio-nav-heading { padding: 18px 20px; }
  .studio-nav-heading strong { font-size: 18px; }
  .studio-nav-browse { grid-template-columns: 1fr; padding: 10px 16px 18px; }
  .studio-nav-group { padding: 17px 0 12px; }
  .studio-nav-group + .studio-nav-group { border-left: 0; border-top: 1px solid #b9a0ce25; }
  .site-header .studio-nav-group h2 { margin-bottom: 6px; }
  .studio-navigation a.studio-nav-link { min-height: 64px; }
  .studio-nav-results { padding: 20px; }
  .studio-nav-matches { grid-template-columns: 1fr; gap: 3px; }
  .studio-nav-footer { padding: 14px 22px; }
  .studio-nav-footer > span:last-child { display: none; }
}
@media(max-width:360px) {
  .site-header { padding-inline: 16px; gap: 12px 6px; }
  .site-header .studio-header-mark { width: 49px; }
  .site-header .wordmark > span { font-size: 20px; }
  .site-header .menu-toggle { gap: 7px; padding-inline: 10px; }
}
@media(prefers-reduced-motion:reduce) { .studio-navigation * { transition: none!important; } }
@media print { .site-header { display: none!important; } }