/* Shared navigation for all portfolio project detail pages.
   Baseline: chorus-party/index.html */
.project-nav{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  height:70px;
  background:transparent;
  border:0;
  border-bottom:1px solid transparent;
  -webkit-backdrop-filter:blur(0) saturate(100%);
  backdrop-filter:blur(0) saturate(100%);
  box-shadow:0 0 0 rgba(18,18,16,0);
  transition:
    background-color .32s cubic-bezier(.16,1,.3,1),
    border-color .32s cubic-bezier(.16,1,.3,1),
    box-shadow .32s cubic-bezier(.16,1,.3,1),
    -webkit-backdrop-filter .32s cubic-bezier(.16,1,.3,1),
    backdrop-filter .32s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.project-nav.is-scrolled{
  background:rgba(250,250,248,.72);
  border-bottom-color:rgba(24,24,22,.10);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  box-shadow:0 12px 32px -28px rgba(18,18,16,.48);
}
.project-nav__inner{
  width:min(1360px,100%);
  height:70px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  pointer-events:auto;
}
.project-nav__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.project-nav__summary{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
  max-width:380px;
  padding:7px 16px 7px 10px;
  border-radius:100px;
  background:#f2f2f2;
  color:rgba(0,0,0,.66);
  font-size:13px;
  line-height:1.5;
  white-space:nowrap;
}
.project-nav__badge{
  flex:none;
  color:#000;
  font-size:13px;
  font-weight:600;
}
.project-nav__summary-copy{
  overflow:hidden;
  text-overflow:ellipsis;
}
.project-nav__links{
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
  color:#000;
  font-size:15px;
  line-height:1;
  white-space:nowrap;
}
.project-nav__links a{
  color:inherit;
  text-decoration:none;
  transition:opacity .2s ease;
}
.project-nav__links a:hover{opacity:.55}
.project-nav__cta{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 22px;
  border:1px solid #000;
  border-radius:100px;
  background:#000;
  color:#fff;
  font:500 15px/1 inherit;
  white-space:nowrap;
  transition:opacity .2s ease,transform .2s ease;
}
.project-nav__cta:hover{opacity:.86;transform:translateY(-1px)}
.project-nav__cta:active{transform:translateY(0) scale(.98)}
.project-nav .portfolio-back-button{
  flex:none;
  background:rgba(255,255,255,.82);
  border-color:rgba(0,0,0,.14);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .project-nav .portfolio-back-button{
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
}
@media(max-width:1120px){
  .project-nav__summary-copy{display:none}
  .project-nav__summary{padding-right:10px}
  .project-nav__links{gap:20px;font-size:14px}
}
@media(max-width:860px){
  .project-nav__links{display:none}
  .project-nav__inner{padding:0 24px}
}
@media(max-width:560px){
  .project-nav__inner{padding:0 16px;gap:10px}
  .project-nav__summary{display:none}
  .project-nav__cta{min-height:40px;padding:0 17px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .project-nav,.project-nav__links a,.project-nav__cta{transition:none}
}

/* 暗色页面变体：深底详情页（level / voice）使用
   <nav class="project-nav project-nav--dark"> */
.project-nav--dark.is-scrolled{
  background:rgba(12,13,15,.80);
  border-bottom-color:rgba(255,255,255,.10);
  box-shadow:0 12px 32px rgba(0,0,0,.24);
}
.project-nav--dark .project-nav__summary{background:rgba(255,255,255,.08);color:#9ba1aa}
.project-nav--dark .project-nav__badge,
.project-nav--dark .project-nav__links{color:#f2f3f5}
.project-nav--dark .project-nav__cta{background:#f2f3f5;border-color:#f2f3f5;color:#0c0d0f}
.project-nav--dark .portfolio-back-button{
  background:rgba(26,29,33,.88);
  border-color:rgba(255,255,255,.12);
  color:#f2f3f5;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}