/* Header navigation panels — ported from the QiuXu elemental prototype.
   Desktop: hover/click opens a mega panel under the sticky header, with a
   blurred scrim and a .3s unfold + .28s content rise.  ≤1000px: hamburger
   drawer with all panels stacked and scrollable. */

/* Desktop shows triggers only; the hamburger is the narrow-screen affordance. */
.site-header .nav-toggle{display:none}
.site-header .main-nav a[data-navigation]{cursor:pointer}
.site-header .main-nav a[data-navigation][aria-expanded="true"]{color:#8a6b2b}
.site-header .main-nav a[data-navigation][aria-expanded="true"]:after{transform:scaleX(1)}

.site-header .navigation-surface{
 position:absolute;top:100%;left:0;right:0;
 height:var(--navigation-height,auto);
 overflow:hidden;
 background:#fbf8f1f7;
 padding:0;border:0;border-radius:0;border-bottom:1px solid #d8c9a755;
 box-shadow:0 24px 50px #2930220f;
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 animation:navigation-unfold .3s cubic-bezier(.22,1,.36,1) both;
 transition:height .3s cubic-bezier(.22,1,.36,1);
}
.site-header .navigation-surface[hidden],
.site-header .navigation-panel[hidden],
.navigation-scrim[hidden]{display:none}

.site-header .navigation-panel{
 display:grid;grid-template-columns:1.15fr 1fr;
 gap:clamp(48px,8vw,120px);
 max-width:1100px;margin:auto;
 padding:42px clamp(24px,4vw,56px) 46px;
 animation:navigation-content .28s cubic-bezier(.22,1,.36,1) both;
}

.navigation-feature h2{
 font:400 34px/1.3 "Songti SC",Georgia,serif;
 letter-spacing:.02em;margin:0 0 13px;color:#3d3a31;
}
.navigation-feature p,.navigation-links p{
 font:12px/1.9 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
 color:#82806f;margin:0 0 15px;
}
.navigation-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.navigation-label{
 display:block;font:10px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
 letter-spacing:.1em;color:#987e49;margin-bottom:8px;
}
.navigation-primary,.navigation-links>a{
 display:inline-flex;align-items:center;gap:22px;
 min-height:44px;padding:0;border:0;background:none;
 color:#5d5a4e;font-size:13px;line-height:1.5;text-align:left;letter-spacing:.03em;
 text-decoration:none;transition:color .2s;
}
.navigation-primary>span,.navigation-links>a>span{
 color:#a0874d;transition:transform .25s;
}
.navigation-primary:hover,.navigation-links>a:hover{color:#8a6b2b}
.navigation-primary:hover>span,.navigation-links>a:hover>span{transform:translate(2px,-2px)}
.navigation-links>a{color:#5d5a4e}

.navigation-scrim{
 position:fixed;inset:0;z-index:40;
 width:100%;height:100%;padding:0;border:0;
 background:#2f332d09;
 backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
 animation:navigation-content .2s ease both;
 cursor:default;
}

/* Sticky header sits above the scrim; the surface hangs from its bottom edge. */
.site-header{z-index:50}

@media(max-width:1000px){
 .site-header .nav-toggle{display:flex}
 .site-header .main-nav{display:none}
 .site-header .navigation-surface{
  position:absolute;top:calc(100% + 8px);left:16px;right:16px;
  height:auto;max-height:calc(100svh - 88px);
  overflow-y:auto;overscroll-behavior:contain;
  border:1px solid #d8c9a7a6;border-radius:12px;padding:0;
  box-shadow:0 18px 45px #2930221a;
 }
 .site-header .navigation-panel{
  grid-template-columns:1fr;gap:18px;
  margin:0 22px;padding:24px 0;
  border-bottom:1px solid #d8c9a760;
 }
 .site-header .navigation-panel:last-child{border-bottom:0;padding-bottom:30px}
 .navigation-feature h2{font-size:26px}
 .navigation-scrim{top:60px;height:calc(100% - 60px)}
}

@media(prefers-reduced-motion:reduce){
 .site-header .navigation-surface,.site-header .navigation-panel,.navigation-scrim{
  animation:none!important;transition:none!important;
 }
}

@keyframes navigation-unfold{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes navigation-content{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}