/* ============================================================
   site-nav.css —— 全站串连导航（目录按钮 + 目录面板 + 返回）
   ============================================================ */

.site-nav__toggle {
  position: fixed;
  right: clamp(16px, 2.4vw, 34px);
  bottom: clamp(64px, 8vh, 90px);
  z-index: 180;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(20, 23, 26, .18);
  border-radius: 999px;
  background: rgba(246, 245, 241, .82);
  color: var(--ink-soft, #4a4640);
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.site-nav__toggle span[aria-hidden] {
  font-size: 12px;
  letter-spacing: 0;
}
.site-nav__toggle:hover {
  color: var(--ink, #14121a);
  border-color: rgba(20, 23, 26, .38);
  background: rgba(246, 245, 241, .96);
}

body.site-nav-open {
  overflow: hidden;
}

.site-nav {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: end center;
  padding: clamp(16px, 4vh, 44px) clamp(14px, 4vw, 56px);
  visibility: hidden;
}
.site-nav.is-open { visibility: visible; }

.site-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(238, 235, 228, .55);
  backdrop-filter: blur(10px) saturate(1.05);
  opacity: 0;
  transition: opacity .4s cubic-bezier(.22, .61, .36, 1);
}
.site-nav.is-open .site-nav__backdrop { opacity: 1; }

.site-nav__panel {
  position: relative;
  width: min(1040px, 100%);
  max-height: calc(100vh - 2 * clamp(16px, 4vh, 44px));
  overflow-y: auto;
  padding: clamp(22px, 3.4vw, 40px) clamp(20px, 3vw, 42px) clamp(18px, 3vh, 30px);
  background: #f6f5f1;
  border: 1px solid rgba(20, 23, 26, .12);
  box-shadow: 0 60px 140px -70px rgba(20, 18, 16, .5);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.19, 1, .22, 1);
}
.site-nav.is-open .site-nav__panel { opacity: 1; transform: none; }

.site-nav__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(20, 23, 26, .14);
}
.site-nav__title {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  letter-spacing: .14em;
}
.site-nav__title span {
  display: block;
  margin-top: 7px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .32em;
  color: var(--ink-faint, rgba(20,18,26,.42));
}

.site-nav__close {
  flex: none;
  padding: 6px 10px;
  border: 1px solid rgba(20, 23, 26, .18);
  border-radius: 2px;
  background: none;
  color: var(--ink-soft, #4a4640);
  font: inherit;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.site-nav__close:hover { color: var(--ink, #14121a); border-color: rgba(20, 23, 26, .4); }

.site-nav__group { padding-top: 18px; }
.site-nav__group + .site-nav__group { border-top: 1px solid rgba(20, 23, 26, .08); }

.site-nav__label {
  margin: 0 0 10px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(20, 18, 26, .38);
}

.site-nav__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 10px;
}

.site-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(20, 23, 26, .10);
  border-radius: 3px;
  text-decoration: none;
  color: var(--ink, #14121a);
  background: rgba(255, 255, 255, .35);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.site-nav__item:hover {
  border-color: rgba(20, 23, 26, .28);
  background: rgba(255, 255, 255, .7);
  transform: translateY(-1px);
}
.site-nav__item.is-current {
  border-color: rgba(20, 18, 26, .5);
  background: rgba(255, 255, 255, .85);
}

.site-nav__thumb {
  flex: none;
  width: 40px;
  height: 28px;
  object-fit: cover;
  border-radius: 1px;
  background: #eae5da;
}

.site-nav__text { min-width: 0; }
.site-nav__name {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-nav__meta {
  display: block;
  margin-top: 2px;
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(20, 18, 26, .42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav__foot {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(20, 23, 26, .12);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(20, 18, 26, .38);
}
.site-nav__foot a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.site-nav__foot a:hover { color: var(--ink, #14121a); border-bottom-color: currentColor; }

/* 故事页「← 全部照片」返回条 */
.site-back {
  position: fixed;
  left: var(--gutter, 28px);
  top: 62px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid rgba(20, 23, 26, .16);
  border-radius: 2px;
  background: rgba(246, 245, 241, .78);
  color: rgba(20, 18, 26, .55);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: color .25s ease, border-color .25s ease;
}
.site-back:hover { color: var(--ink, #14121a); border-color: rgba(20, 23, 26, .4); }

/* 自定义光标永远在浮层之上 */
.cursor { z-index: 300 !important; }

@media (max-width: 640px) {
  .site-nav__toggle { right: 14px; bottom: 64px; padding: 8px 11px; }
  .site-nav { padding: 10px; }
  .site-nav__panel { padding: 20px 16px 16px; }
  .site-nav__list { grid-template-columns: 1fr; }
  .site-back { top: 52px; left: 14px; }
}


/* 目录条目的轻微入场与缩略图呼吸 */
.site-nav.is-open .site-nav__item {
  animation: navIn .48s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: var(--nav-i, 0ms);
}
@keyframes navIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.site-nav__thumb { transition: transform .45s cubic-bezier(.19, 1, .22, 1); }
.site-nav__item:hover .site-nav__thumb { transform: scale(1.07); }

@media (prefers-reduced-motion: reduce) {
  .site-nav.is-open .site-nav__item { animation: none; }
}