/* ===== Firefly Visual · 统一头部 v1（2026-11-08 望舒） =====
   站点 token：底 #0E1015 ／ 字 #F5F0E8 ／ 金 #FFC83B ／ 线 rgba(245,240,232,.14)
   零 JS：桌面 hover + focus-within，移动 <details>。
   ⚠️ 只用 CSS 变量前缀 --ffh-，避免与页面原有样式冲突。 */
.ffh{
  --ffh-bg:#0E1015; --ffh-bg2:#12151B; --ffh-cream:#F5F0E8; --ffh-gold:#FFC83B;
  --ffh-line:rgba(245,240,232,.14); --ffh-dim:rgba(245,240,232,.62);
  position:sticky; top:0; z-index:80;
  background:rgba(14,16,21,.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ffh-line);
  font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--ffh-cream);
}
.ffh *, .ffh *::before, .ffh *::after{box-sizing:border-box}
.ffh-in{
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:26px; height:62px;
}
.ffh-brand{
  display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit;
  font-size:12.5px; letter-spacing:.16em; white-space:nowrap; flex:0 0 auto;
}
.ffh-brand i{width:9px;height:9px;background:var(--ffh-gold);display:block}

/* ---- 桌面导航 ---- */
.ffh-nav{display:flex; align-items:center; gap:24px; margin-left:6px}
.ffh-mi{position:relative}
.ffh-top{
  display:flex; align-items:center; gap:6px; text-decoration:none; color:rgba(245,240,232,.84);
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; line-height:62px; white-space:nowrap;
  transition:color .18s;
}
.ffh-car{width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .18s}
.ffh-mi:hover .ffh-top, .ffh-mi:focus-within .ffh-top, .ffh-top:hover{color:var(--ffh-gold)}
.ffh-mi:hover .ffh-car, .ffh-mi:focus-within .ffh-car{transform:rotate(225deg) translateY(-1px)}

/* ---- 下拉面板：全宽条（锚在 .ffh 上，避免绝对定位把页面撑宽） ---- */
.ffh-mi{position:static}
.ffh-drop{
  position:absolute; top:100%; left:0; right:0;
  background:#0B0D11; border-top:1px solid var(--ffh-line); border-bottom:1px solid var(--ffh-line);
  box-shadow:0 28px 56px rgba(0,0,0,.62);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  padding:22px 0 26px;
}
.ffh-mi:hover > .ffh-drop, .ffh-mi:focus-within > .ffh-drop{opacity:1;visibility:visible;transform:none}
.ffh-panel{
  max-width:1280px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:0 30px;
}
.ffh-drop--single .ffh-panel{grid-template-columns:repeat(2,minmax(150px,240px))}
.ffh-col{padding:4px 0}
.ffh-col h4{
  margin:0 0 10px; font-size:9.5px; font-weight:400; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ffh-gold);
}
.ffh-col h4 s{ text-decoration:none; margin-left:5px; color:rgba(245,240,232,.42) }
.ffh-col a{
  display:block; text-decoration:none; color:rgba(245,240,232,.74);
  font-size:13.5px; line-height:1.35; padding:5.5px 0; letter-spacing:.01em;
  transition:color .14s;
}
.ffh-col a:hover{color:var(--ffh-cream)}

/* ---- CTA ---- */
.ffh-cta{
  margin-left:auto; flex:0 0 auto; text-decoration:none;
  border:1px solid var(--ffh-gold); color:var(--ffh-gold);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 17px; white-space:nowrap; transition:background .16s,color .16s;
}
.ffh-cta:hover{background:var(--ffh-gold); color:#0E1015}

/* ---- 移动 ---- */
.ffh-burger{display:none; margin-left:auto; position:relative}
.ffh-burger > summary{
  list-style:none; cursor:pointer; width:34px;height:34px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; border:1px solid var(--ffh-line);
}
.ffh-burger > summary::-webkit-details-marker{display:none}
.ffh-burger > summary span{display:block;width:15px;height:1px;background:var(--ffh-cream);transition:transform .18s,opacity .18s}
.ffh-burger[open] > summary span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.ffh-burger[open] > summary span:nth-child(2){opacity:0}
.ffh-burger[open] > summary span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.ffh-mnav{
  position:absolute; right:-24px; top:52px; width:min(92vw,360px);
  max-height:calc(100vh - 70px); overflow-y:auto;
  background:#0B0D11; border:1px solid var(--ffh-line);
  box-shadow:0 24px 48px rgba(0,0,0,.65); padding:6px 0 10px;
}
.ffh-mrow, .ffh-msec > summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(245,240,232,.84); text-decoration:none; cursor:pointer; list-style:none;
  border-bottom:1px solid rgba(245,240,232,.08);
}
.ffh-msec > summary::-webkit-details-marker{display:none}
.ffh-msec > summary::after{content:"+"; color:var(--ffh-gold); font-size:15px; line-height:1}
.ffh-msec[open] > summary::after{content:"–"}
.ffh-mbody{padding:4px 18px 12px; background:rgba(255,255,255,.015)}
.ffh-mgrp b{
  display:block; font-size:9px; font-weight:400; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ffh-gold); padding:11px 0 3px;
}
.ffh-mbody a{
  display:block; text-decoration:none; color:rgba(245,240,232,.72);
  font-size:14px; padding:7px 0;
}
.ffh-mbody a:hover{color:var(--ffh-cream)}

/* ---- 断点：1023 以下切移动 ---- */
@media (max-width:1023px){
  .ffh-in{gap:14px; height:56px; padding:0 18px}
  .ffh-nav, .ffh-cta{display:none}
  .ffh-burger{display:block}
  .ffh-mnav{top:46px; right:-18px}
}
/* ---- 关动画偏好 ---- */
@media (prefers-reduced-motion:reduce){
  .ffh *, .ffh *::before, .ffh *::after{transition:none !important}
}
/* ---- 打印 ---- */
@media print{ .ffh{position:static; backdrop-filter:none} .ffh-nav,.ffh-cta,.ffh-burger{display:none} }

/* ---- 移动菜单遮罩（望舒 2026-11-09 裁定）----
   为什么必须挂 body::after 不能挂 .ffh：.ffh 带 backdrop-filter:blur(14px)，
   filter 类属性会给 position:fixed 的后代另建包含块 → 挂在 .ffh 里 inset:0 只铺满
   62px 高的头部，看着像没生效。body::after 在根层叠上下文，z-index:79 卡在正文(auto)
   之上、.ffh(80) 之下：挡住正文点击，盖不住头部和菜单面板。
   用 body:has() 锁滚是纯 CSS，保住组件「零 JavaScript」。
   已知取舍：点遮罩空白不能关菜单（纯 CSS 做不到），用户走右上 X。 */
@media (max-width:1023px){
  body:has(.ffh-burger[open])::after{
    content:""; position:fixed; inset:0; z-index:79;
    background:rgba(10,11,13,.72);
  }
  body:has(.ffh-burger[open]){ overflow:hidden }
}