/* 山海有声 · 每页右上角：导航小书 +「走进山海有声」
   小书平时合着，封面上下写着「导」「航」；鼠标移上去在顶栏里放大、翻开，左页「进」右页「入」；
   点一下进入品牌画册页（book.html）。各页共用这一份样式和 site-nav.js。 */
.snav{display:flex;align-items:center;gap:12px;flex:none}
.snav-r{display:flex;align-items:center;gap:10px;flex:none}
/* 小书翻开时会往左多占一页的宽度，左边紧挨着按钮时留出位置 */
.snav-opt+.snav{margin-left:30px}

/* 「走进山海有声」 */
.snav-home{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.26);color:#F6F1E9;font-size:14px;letter-spacing:.06em;white-space:nowrap;text-decoration:none;background:rgba(255,255,255,.02);transition:border-color .3s,background .3s,color .3s}
.snav-home svg{flex:none;transition:transform .3s}
.snav-home:hover{border-color:#D9B77E;color:#F3D9A8;background:rgba(217,183,126,.08)}
.snav-home:hover svg{transform:translateX(3px)}
.snav-home:focus-visible,.nb-hit:focus-visible{outline:2px solid #D9B77E;outline-offset:3px}

/* 顶栏里的小书（尺寸用 em：电脑 1em=10px，手机略小），始终不超出顶栏 */
.nbook{position:relative;font-size:10px;width:3.6em;height:4em;flex:none}
.nb-hit{position:absolute;inset:-.4em -.6em;z-index:3;border:0;padding:0;background:transparent;cursor:pointer;border-radius:6px;-webkit-tap-highlight-color:transparent}
.nb-mini{position:absolute;inset:0;perspective:18em;pointer-events:none;transform-origin:55% 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1);font-family:"Noto Serif SC","Songti SC","STSong",serif}
.nb-mini b{font-weight:900;line-height:1.1}
.nm-back{position:absolute;left:.25em;top:.35em;width:3.2em;height:3.45em;border-radius:.15em .45em .45em .15em;background:linear-gradient(160deg,#4A1511,#260807);box-shadow:.3em .6em 1em rgba(0,0,0,.55)}
.nm-r{position:absolute;left:.25em;top:.2em;width:3em;height:3.3em;transform-origin:0 50%;border-radius:.05em .3em .3em .05em;display:grid;place-items:center;color:#8E1F19;
  background:linear-gradient(90deg,rgba(25,12,4,.55),rgba(25,12,4,.14) 16%,rgba(255,255,255,.45) 30%,rgba(255,255,255,0) 50%),#F6F1E8;
  box-shadow:.08em .08em 0 #E2D9C6,.16em .16em 0 #C9BDA3,.24em .22em 0 #E8E0CF,.3em .28em 0 #B7A98C;transition:transform .55s cubic-bezier(.3,.1,.2,1)}
.nm-cover{position:absolute;left:.25em;top:.1em;width:3.1em;height:3.4em;transform-origin:0 50%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.1,.2,1)}
.nm-front,.nm-in{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.nm-front{border-radius:.15em .45em .45em .15em;padding-left:.35em;color:#EBCB92;text-shadow:0 1px 0 rgba(30,6,4,.75),0 -.5px 0 rgba(255,236,200,.4);
  background:radial-gradient(120% 120% at 25% 15%,rgba(255,170,130,.18),rgba(0,0,0,0) 55%),linear-gradient(155deg,#83302A 0%,#5A1813 50%,#350C0A 100%);
  box-shadow:inset 0 0 0 .08em rgba(255,210,170,.14),inset -.3em 0 .4em rgba(0,0,0,.3)}
.nm-front::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.5em;border-radius:.15em 0 0 .15em;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,220,190,.16) 45%,rgba(0,0,0,.4) 80%,rgba(0,0,0,0))}
.nm-front::after{content:"";position:absolute;inset:.25em .25em .25em .62em;border:.08em solid rgba(230,200,146,.55);border-radius:.12em}
.nm-front b{position:relative;font-size:1.22em}
.nm-in{transform:rotateY(180deg);border-radius:.3em .05em .05em .3em;color:#8E1F19;
  background:linear-gradient(270deg,rgba(25,12,4,.55),rgba(25,12,4,.14) 16%,rgba(255,255,255,.45) 30%,rgba(255,255,255,0) 50%),#F6F1E8;
  box-shadow:0 0 0 .14em #5A1813,-.08em .1em 0 .14em #350C0A}
.nm-r b,.nm-in b{font-size:1.5em;opacity:0;transition:opacity .2s}
.nm-rib{position:absolute;left:.1em;top:2.75em;width:.3em;height:1.15em;background:linear-gradient(#E8182B,#9C0E1C);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);opacity:0;transition:opacity .2s}
/* 翻开：鼠标移上去、键盘选中，或手机上点了以后 */
.nbook.open .nb-mini,.nb-hit:focus-visible+.nb-mini{transform:scale(1.18)}
.nbook.open .nm-cover,.nb-hit:focus-visible+.nb-mini .nm-cover{transform:rotateY(-165deg)}
.nbook.open .nm-r,.nb-hit:focus-visible+.nb-mini .nm-r{transform:rotateY(-14deg)}
.nbook.open .nm-r b,.nbook.open .nm-in b,.nbook.open .nm-rib,.nb-hit:focus-visible+.nb-mini b,.nb-hit:focus-visible+.nb-mini .nm-rib{opacity:1;transition-delay:.3s}
@media (hover:hover) and (pointer:fine){
  .nbook:hover .nb-mini{transform:scale(1.18)}
  .nbook:hover .nm-cover{transform:rotateY(-165deg)}
  .nbook:hover .nm-r{transform:rotateY(-14deg)}
  .nbook:hover .nm-r b,.nbook:hover .nm-in b,.nbook:hover .nm-rib{opacity:1;transition-delay:.3s}
}

@media (max-width:560px){
  .snav-opt{display:none!important}
  .snav{gap:9px}
  .nbook{font-size:8.6px}
  .snav-home{height:38px;padding:0 13px;font-size:13px;gap:6px}
  .snav-home svg{display:none}
}
@media (max-width:400px){
  .nav .brand-txt small,.nav .brand small{display:none}
  .nav .brand{flex-shrink:0}
  .nav-l .back+.brand .brand-txt{display:none}
  .nav .brand-txt b{font-size:17px;white-space:nowrap}
  .snav-home{padding:0 11px;font-size:12.5px;letter-spacing:.02em}
}
@media (prefers-reduced-motion:reduce){
  .nb-mini,.nm-cover,.nm-r,.nb-mini b,.nm-rib{transition-duration:.01s!important;transition-delay:0s!important}
}