.site-navigation.topbar { position:sticky; top:0; z-index:30; grid-template-columns:auto 1fr auto; padding:14px clamp(18px,3vw,48px); background:rgba(8,6,12,.96); border-bottom:1px solid #d9bc832b; box-shadow:0 6px 30px #0005; }
.site-navigation .brand { padding:0; gap:10px; text-decoration:none; }
.site-navigation .brand img { width:38px; height:38px; object-fit:contain; }
.site-navigation .brand strong { font-size:17px; font-weight:400; letter-spacing:.035em; }
.site-navigation .brand small { color:#b7a5be; font:10px/1.5 system-ui,sans-serif; letter-spacing:.11em; text-transform:uppercase; }
.site-navigation .main-nav { justify-content:center; gap:clamp(10px,1.6vw,25px); }
.site-navigation .main-nav a { position:relative; isolation:isolate; border:0; border-radius:0; padding:8px 0 12px; font-size:14px; color:#c2b4c8; white-space:nowrap; background:transparent; box-shadow:none; transform:none; }
.site-navigation .main-nav a:is(.is-current,:hover,:focus-visible,.is-sigil-hover) { color:#c2b4c8; border:0; background:transparent; box-shadow:none; transform:none; }
.nav-label { position:relative; z-index:1; }
/* Small transparent SVG scenes sit below the letters, without changing link
   geometry. Only the current/hovered scene animates; hidden ones stay paused. */
.nav-element { position:absolute; z-index:0; left:50%; bottom:-18px; width:calc(100% + 14px); min-width:44px; height:23px; transform:translateX(-50%); overflow:visible; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .22s,visibility .22s; }
.main-nav a.is-current .nav-fire { opacity:.72; visibility:visible; }
.main-nav a:is(:hover,:focus-visible,.is-sigil-hover) .nav-blizzard { opacity:.86; visibility:visible; }
.nav-blizzard { filter:drop-shadow(0 0 2px #8cdaf866); }
.nav-flame { transform-box:fill-box; transform-origin:50% 100%; animation:nav-flame 1.1s ease-in-out infinite alternate; animation-delay:calc(var(--n) * -.23s); animation-duration:calc(.85s + var(--n) * .13s); }
.nav-fire-glow { filter:blur(3px); }
.nav-ember { animation:nav-ember 2.4s linear infinite; animation-delay:calc(var(--n) * -.7s); }
.nav-wind { fill:none; stroke:#a8e4f5; stroke-width:.7; stroke-linecap:round; stroke-dasharray:20 10 4 14; animation:nav-wind 2.7s linear infinite; }
.nav-wind,.nav-snow path { vector-effect:non-scaling-stroke; }
.nav-wind:nth-child(2) { animation-direction:reverse; animation-duration:3.3s; opacity:.4; }
.nav-snow { animation:nav-snow 1.65s linear infinite; }
.nav-snow-distant { animation-duration:2.7s; animation-delay:-1.1s; opacity:.45; }
.nav-element * { animation-play-state:paused; }
.main-nav a.is-current .nav-fire *, .main-nav a:is(:hover,:focus-visible,.is-sigil-hover) .nav-blizzard * { animation-play-state:running; }
@keyframes nav-flame { 0% {transform:scaleY(.76) skewX(-6deg);opacity:.72;} 48% {transform:scaleY(1.07) skewX(4deg);opacity:.95;} 100% {transform:scaleY(.88) skewX(-2deg);opacity:.8;} }
@keyframes nav-ember { 0% {transform:translate(0,3px);opacity:0;} 25% {opacity:.8;} 100% {transform:translate(4px,-9px);opacity:0;} }
@keyframes nav-wind { to {stroke-dashoffset:-96;} }
@keyframes nav-snow { 0% {transform:translate(-10px,2px);opacity:0;} 18% {opacity:.8;} 78% {opacity:.8;} 100% {transform:translate(14px,-2px);opacity:0;} }

.site-navigation :focus-visible { outline:2px solid #86c4d4; outline-offset:5px; }
.site-navigation .nav-toggle { display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:42px; height:42px; padding:0; border:1px solid #93789b55; border-radius:5px; background:#171020; }
.site-navigation .nav-toggle span { display:block; flex:none; width:18px; height:1px; margin:0; background:#d9bc83; }
.site-navigation .login-button { display:block; color:#c2b4c8; border-color:#93789b55; background:#171020; font:12px/1.5 system-ui,sans-serif; }
@media (max-width:1120px) {
  .site-navigation.topbar { grid-template-columns:1fr auto; }
  .site-navigation .nav-toggle { display:flex; justify-self:end; }
  .site-navigation .main-nav,.site-navigation .login-button { display:none; }
  .site-navigation .main-nav.is-open { display:flex; grid-column:1/-1; flex-wrap:wrap; gap:8px 24px; justify-content:flex-start; }
  .site-navigation .main-nav.is-open a { flex:1 1 120px; justify-content:center; }
  .site-navigation .login-button.is-open { display:block; grid-column:1/-1; justify-self:start; }
}
@media (max-width:620px) {
  .site-navigation.topbar { padding:10px 17px; }
  .site-navigation .brand strong { font-size:15px; }
  .site-navigation .brand small { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
  .site-navigation .nav-element,.site-navigation .nav-element * { animation:none!important; transition:none!important; }
}