/* Меню-ключ (по макету «Винтажный театр: золотая айдентика»): в правом верхнем углу золотой скрипичный ключ на трёх линейках стана;
   при наведении — тёплое свечение; нажал — справа выезжает бархатная панель с золотыми уголками, разделы разрядкой капителью,
   между ними тонкие золотые линейки с ромбиком. Файл самодостаточный: подключается и на главной, и на внутренних страницах. */
.clef{position:fixed;top:14px;right:16px;z-index:90;width:64px;height:76px;padding:0;border:0;background:none;cursor:pointer;
 -webkit-tap-highlight-color:transparent;outline:none}
.clef .staff{position:absolute;left:2px;right:2px;top:50%;height:23px;transform:translateY(-36%);
 background:linear-gradient(90deg,transparent,#f3dca2 22%,#e2bf78 50%,#f3dca2 78%,transparent) top/100% 1.4px no-repeat,
  linear-gradient(90deg,transparent,#f3dca2 22%,#e2bf78 50%,#f3dca2 78%,transparent) center/100% 1.4px no-repeat,
  linear-gradient(90deg,transparent,#f3dca2 22%,#e2bf78 50%,#f3dca2 78%,transparent) bottom/100% 1.4px no-repeat;
 filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.clef .g{position:absolute;left:50%;top:50%;height:70px;width:auto;transform:translate(-50%,-47%);pointer-events:none;overflow:visible;
 filter:drop-shadow(0 1px 1px rgba(0,0,0,.65));transition:filter .35s}
.clef:hover .g,.clef:focus-visible .g{filter:drop-shadow(0 0 6px rgba(255,214,140,.75)) drop-shadow(0 0 16px rgba(240,180,90,.45))}
.clef:hover .staff,.clef:focus-visible .staff{filter:drop-shadow(0 0 5px rgba(255,214,140,.6))}
/* на светлых внутренних страницах — ключ на тёмной бархатной плашке, чтобы золото читалось */
.clef.on-light{background:radial-gradient(closest-side,#2c1513 92%,transparent 95%);border-radius:50%;width:76px;height:76px;top:8px;right:8px}
.clef.on-light .g{height:58px}.clef.on-light .staff{left:12px;right:12px}

/* затемнение и панель */
.clef-veil{position:fixed;inset:0;z-index:88;background:rgba(14,6,4,.62);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
 opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
.clefmenu{position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(400px,88vw);overflow:auto;visibility:hidden;
 transform:translateX(104%);transition:transform .55s cubic-bezier(.3,.1,.2,1),visibility 0s .55s;
 padding:84px 40px 60px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ead9b6;
 font:17px/1.4 "Cormorant Garamond",Georgia,serif;
 background:radial-gradient(ellipse 90% 60% at 40% 30%,rgba(120,44,42,.45),transparent 70%),
  radial-gradient(ellipse 120% 100% at 50% 50%,#4a1d1c,#2a100f 75%);
 box-shadow:-30px 0 60px rgba(0,0,0,.55)}
.clefmenu::before{content:"";position:absolute;inset:14px;border:1px solid rgba(188,147,91,.55);pointer-events:none}
.clefmenu::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.menu-open .clef-veil{opacity:1;visibility:visible;transition:opacity .45s}
.menu-open .clefmenu{transform:none;visibility:visible;transition:transform .55s cubic-bezier(.3,.1,.2,1)}
.menu-open .clef{opacity:0;pointer-events:none}
.clef{transition:opacity .3s}
/* золотые уголки рамки */
.clefmenu .k{position:absolute;width:58px;height:58px;color:#c9a466;z-index:1}
.clefmenu .k svg{display:block;width:100%;height:100%}
.clefmenu .k.tl{left:8px;top:8px}.clefmenu .k.tr{right:8px;top:8px;transform:scaleX(-1)}
.clefmenu .k.bl{left:8px;bottom:8px;transform:scaleY(-1)}.clefmenu .k.br{right:8px;bottom:8px;transform:scale(-1)}
/* крестик — две тонкие золотые линии */
.clefmenu .x{position:absolute;top:30px;right:32px;z-index:2;width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer}
.clefmenu .x::before,.clefmenu .x::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1.4px;background:#d9b878;transform:rotate(45deg)}
.clefmenu .x::after{transform:rotate(-45deg)}
.clefmenu .x:hover::before,.clefmenu .x:hover::after,.clefmenu .x:focus-visible::before,.clefmenu .x:focus-visible::after{background:#fff0c8;box-shadow:0 0 6px rgba(255,214,140,.7)}
.clefmenu .x:focus-visible{outline:none}
.clefmenu .head{position:relative;z-index:1;text-align:center;margin-bottom:22px}
.clefmenu .head span{display:block;text-transform:uppercase;letter-spacing:.3em;font-size:11px;font-weight:600;color:#bc935b}
.clefmenu ol{position:relative;z-index:1;list-style:none;margin:0;padding:0;width:100%;max-width:260px}
.clefmenu a{display:block;text-align:center;padding:17px 4px 16px;color:#ead9b6;text-decoration:none;text-transform:uppercase;
 letter-spacing:.26em;font-size:17px;font-weight:600;transition:color .25s,text-shadow .25s}
/* линейка с ромбиком между пунктами */
.clefmenu li+li{background:linear-gradient(90deg,transparent,rgba(201,164,102,.8) 18%,rgba(201,164,102,.8) 82%,transparent) top/100% 1px no-repeat;position:relative}
.clefmenu li+li::before{content:"";position:absolute;left:50%;top:-3.5px;width:7px;height:7px;margin-left:-3.5px;transform:rotate(45deg);
 background:#c9a466;box-shadow:-10px 10px 0 -2.5px #c9a466,10px -10px 0 -2.5px #c9a466}
.clefmenu a:hover,.clefmenu a:focus-visible{color:#fff0c8;text-shadow:0 0 12px rgba(255,214,140,.55);outline:none}
.clefmenu a[aria-current="page"]{color:#e6c47f}
.clefmenu .divider{position:relative;z-index:1;display:block;width:min(240px,80%);height:auto;margin:26px auto 0;color:#c9a466}
@media (max-width:640px){.topnav{padding-left:62px;padding-right:62px}.clef{top:8px;right:8px;width:54px;height:66px}.clef .g{height:60px}.clefmenu{padding:78px 26px 50px}}
@media (prefers-reduced-motion:reduce){.clefmenu,.clef-veil,.clef .g{transition:none}}