/* 三秋叶公会 · 左上角图标导航 + 侧滑浮层（全站共享）
   ==================================================================
   来源：从拾叶录（announcements.html）那一页的边栏提炼而来。

   ★ 为什么这里要自带一份 --edge-* 配色，而不是用站点的 token：
     站点的配色 token 是**每页各定义一份**的 —— materials.html 的 :root 里只有
     --cream/--ink/--maple/--beige 这些，**根本没有** --on-dark / --accent / --ease / --spring
     （它们只存在于 machines.css / portal.css，或哪儿都没有）。
     所以共用样式一旦引用 --on-dark 之类，在某些页面上会整块失效（颜色回落到初始值）。
     这里一律用 --edge-* 自带一份，任何页面 link 进来就能用，不依赖该页 palette。

   ★ 汉堡的颜色由页面用 --edge-burger 指定：
     深色画布页面（如拾叶录）留默认的米色；浅底页面（如材料清单）设成墨色，否则看不见。
     链接的菜单项文案在深色面板上，与页面底色无关，所以只有汉堡需要按页调。

   用法：<link rel="stylesheet" href="css/edge-nav.css">
         <script src="js/site-nav.js"></script>
         <script>SiteNav.mountEdge();</script>
   ================================================================== */
:root{
  --edge-ink:#f2ead9;                                   /* 深底上的米字 */
  --edge-ink-faint:rgba(242,234,217,.38);
  --edge-veil:rgba(14,8,3,.78);
  --edge-accent:#c74a2d;                                /* 朱砂 */
  --edge-accent-2:#e0743f;
  --edge-serif:'Noto Serif SC','Songti SC','SimSun',serif;
  --edge-latin:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --edge-ease:cubic-bezier(.22,.9,.24,1);
  --edge-spring:linear(0, 0.0456 3.8%, 0.1547 7.7%, 0.2942 11.5%, 0.441 15.4%, 0.5799 19.2%, 0.7021 23.1%, 0.8037 26.9%, 0.8836 30.8%, 0.9434 34.6%, 0.9855 38.5%, 1.0131 42.3%, 1.0291 46.2%, 1.0367 50%, 1.0384 53.8%, 1.0361 57.7%, 1.0317 61.5%, 1.0262 65.4%, 1.0206 69.2%, 1.0154 73.1%, 1.0108 76.9%, 1.007 80.8%, 1.0041 84.6%, 1.0019 88.5%, 1.0004 92.3%, 0.9994 96.2%, 1 100%);
  --edge-burger:#f2ead9;                                /* 页面可覆盖 */
}

/* ---------- 汉堡：fixed 且直接挂在 body 下 ----------
   注意不能留在任何有 z-index 的容器里 —— 那会创建层叠上下文，
   子元素的 z 再大也压不过 body 下的菜单浮层。 */
.burger{
  position:fixed;top:clamp(20px,4vh,44px);left:clamp(20px,2vw,32px);z-index:200;
  display:inline-flex;flex-direction:column;gap:7px;width:40px;
  background:none;border:0;cursor:pointer;padding:4px 0;
}
.burger i{
  display:block;height:3px;background:var(--edge-burger);border-radius:2px;
  transition:width .3s var(--edge-ease),transform .35s var(--edge-ease),opacity .2s;
}
.burger i:nth-child(1){width:34px}
.burger i:nth-child(2){width:24px}
.burger i:nth-child(3){width:30px}
.burger:hover i{width:34px}
body.menu-open .burger i{width:34px}
body.menu-open .burger i:nth-child(1){transform:translateY(10px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

/* ---------- 浮层 ---------- */
.menu{position:fixed;inset:0;z-index:150;visibility:hidden;pointer-events:none}
.menu.open{visibility:visible;pointer-events:auto}
/* 遮罩：刻意不用 backdrop-filter —— 模糊要和透明度动画一起跑、每帧重算，低配机会卡。
   用厚一些的实色更稳，也更像档案柜的暗处。 */
.menu-veil{
  position:absolute;inset:0;opacity:0;transition:opacity .45s var(--edge-ease);
  background:radial-gradient(900px 700px at 0% 0%, rgba(199,74,45,.10), transparent 60%), var(--edge-veil);
}
.menu.open .menu-veil{opacity:1}
.menu-panel{
  position:absolute;left:0;top:0;bottom:0;width:clamp(300px,38vw,520px);
  background:linear-gradient(165deg,#1c1209 0%,#130c05 100%);
  border-right:1px solid rgba(199,74,45,.32);
  box-shadow:24px 0 60px -20px rgba(0,0,0,.6);
  transform:translateX(-100%);transition:transform .5s var(--edge-spring);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(70px,9.5vh,112px) clamp(26px,3vw,44px) clamp(26px,4vh,40px);
  overflow-y:auto;scrollbar-width:none;
}
.menu-panel::-webkit-scrollbar{display:none}
.menu.open .menu-panel{transform:none}
.menu-head .zh{font-family:var(--edge-serif);font-weight:900;font-size:1.1rem;letter-spacing:.32em;color:var(--edge-ink)}
.menu-head .en{
  display:block;margin-top:8px;font-family:var(--edge-latin);font-size:.66rem;font-weight:500;
  letter-spacing:.4em;text-transform:uppercase;color:var(--edge-accent);
}
.menu-nav{margin:clamp(26px,5vh,54px) 0}
.menu-label{
  font-family:var(--edge-latin);font-size:.64rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--edge-ink-faint);margin:26px 0 8px;
}
.menu-group{list-style:none}
.menu-group a{
  display:flex;align-items:baseline;gap:14px;text-decoration:none;
  padding:clamp(8px,1.3vh,13px) 0;color:var(--edge-ink);
  font-family:var(--edge-serif);font-weight:700;font-size:clamp(1.15rem,1.7vw,1.5rem);
  letter-spacing:.14em;position:relative;
  transition:color .28s,transform .28s var(--edge-ease);
}
.menu-group a i{
  font-style:normal;font-family:var(--edge-latin);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;color:var(--edge-ink-faint);transition:color .28s;flex:none;
}
.menu-group a::after{
  content:'';position:absolute;left:0;bottom:6px;height:1px;width:0;
  background:linear-gradient(90deg,var(--edge-accent),transparent);transition:width .38s var(--edge-ease);
}
.menu-group a:hover,.menu-group a:focus-visible{color:var(--edge-accent-2);transform:translateX(6px);outline:none}
.menu-group a:hover i,.menu-group a:focus-visible i{color:var(--edge-accent)}
.menu-group a:hover::after,.menu-group a:focus-visible::after{width:100%}
.menu-group a.here{color:var(--edge-accent-2)}
.menu-group a.here::after{width:100%}
.menu-group.sub a{font-size:clamp(.98rem,1.3vw,1.18rem);color:rgba(242,234,217,.78)}
.menu-foot{
  font-family:var(--edge-latin);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--edge-ink-faint);
}
.menu-foot .bar{width:34px;height:2px;background:rgba(242,234,217,.16);margin-top:12px}
/* 菜单项依次淡入（只动 opacity/transform，纯合成动画） */
.menu-group a{opacity:0;transform:translateX(-16px);transition:opacity .4s var(--edge-ease),transform .4s var(--edge-ease),color .28s}
.menu.open .menu-group a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 40ms + 110ms)}
.menu.open .menu-group a:hover,.menu.open .menu-group a:focus-visible{transform:translateX(6px);transition-delay:0s}
.menu:not(.open) .menu-group a{transition-delay:0s}
body.menu-open{overflow:hidden}

@media (max-width:860px){
  .menu-panel{width:min(88vw,380px)}
}
@media (prefers-reduced-motion:reduce){
  .menu-panel,.menu-veil,.menu-group a,.burger i{transition:none}
}