/* 项目页导航：沿用最早那批项目页的样子——左上 BACK、右上 INFO，悬浮在画面上。
   返回链接放桌面、移动两份（.pn-d / .pn-m），按断点只显示一份：
   桌面回 work.html 对应分组，移动端直接回对应分类页，不经过跳转。
   浅色底的页面给导航加 .on-light，字改成黑色。 */
@font-face{ font-family:"EFont"; src:url("../fonts/E.ttf") format("truetype"); }
@font-face{ font-family:"ZFont"; src:url("../fonts/Z.ttf") format("truetype"); }

.nav-left,.nav-right{
  position:fixed;
  top:22px;
  z-index:1000;
  font-family:"ZFont","EFont",sans-serif;
  font-size:28px;
  line-height:normal;
  letter-spacing:2.5px;
  opacity:0.6;
  transition:opacity .2s;
  font-synthesis:none;
}
.nav-left{ left:30px; }
.on-light{ --nav-ink:#000; }
.nav-right{ right:30px; }
.nav-left:hover,.nav-right:hover,
.nav-left:focus-within,.nav-right:focus-within{ opacity:1; }

.nav-left a,.nav-right a,.nav-right button{
  color:var(--nav-ink,#fff);
  background:none;
  border:none;
  padding:0;
  text-decoration:none;
  cursor:pointer;
  font:inherit;
  letter-spacing:inherit;
}
.nav-left a:hover,.nav-right a:hover,.nav-right button:hover{
  text-decoration:underline;
  text-underline-offset:5px;
}
.nav-left a:focus-visible,.nav-right a:focus-visible,.nav-right button:focus-visible{
  outline:2px solid var(--nav-ink,#fff);
  outline-offset:6px;
}

/* 只负责藏起另一份，显示的那份保留它自己原本的 display */
@media (min-width:861px){ .pn-m{ display:none; } }
@media (max-width:860px){ .pn-d{ display:none; } }