/* ============================================================
   NAV
   ============================================================ */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; }

.nav__bar {
  padding-top: 18px;
  transition: padding var(--dur) var(--ease-soft), transform var(--dur-slow) var(--ease);
}
.nav.is-stuck .nav__bar { padding-top: 10px; }
.nav.is-hidden .nav__bar { transform: translateY(-130%); }

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  background: rgba(244, 241, 234, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 0 rgba(29,29,27,.02);
  transition: box-shadow var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft);
}
.nav.is-stuck .nav__inner { box-shadow: var(--sh-md); background: rgba(244, 241, 234, 0.92); }

.nav__mark { display: flex; align-items: center; gap: 9px; color: var(--t-ink); flex: none; }
.nav__arch { color: var(--t-ink); }
.nav__mark-text {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  letter-spacing: 0.01em;
}

.nav__list { display: flex; align-items: center; gap: 30px; }
.nav__link {
  font-size: var(--t-sm); font-weight: 500; color: var(--text-2);
  position: relative; padding: 4px 0; transition: color var(--dur-fast) var(--ease-soft);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px;
  background: var(--t-rose); transition: right var(--dur) var(--ease);
}
.nav__link:hover { color: var(--t-ink); }
.nav__link:hover::after { right: 0; }

.nav__end { display: flex; align-items: center; gap: 14px; flex: none; }

.nav__burger {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: 50%; flex: none;
}
.nav__burger-box { position: relative; width: 18px; height: 12px; }
.nav__burger-box i {
  position: absolute; left: 0; width: 100%; height: 1.6px; background: var(--t-ink);
  transition: transform var(--dur) var(--ease-soft), top var(--dur) var(--ease-soft), opacity var(--dur-fast);
}
.nav__burger-box i:first-child { top: 0; }
.nav__burger-box i:last-child { top: 100%; transform: translateY(-100%); }
.nav__burger[aria-expanded="true"] .nav__burger-box i:first-child { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-box i:last-child { top: 50%; transform: translateY(-50%) rotate(-45deg); }

.nav__panel {
  position: fixed; inset: 0; z-index: 99;
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur) var(--ease-soft), visibility 0s var(--dur);
  background: var(--t-forest); color: var(--on-dark);
}
.nav__panel.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }

.nav__panel-arch {
  position: absolute; right: -10%; top: -10%; width: 70vmin; height: 90vmin;
  background: var(--grad-forest); opacity: 0.5; filter: blur(60px);
  border-radius: var(--r-arch); pointer-events: none;
}

.nav__panel-sheet {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 100px var(--gutter) 60px;
  max-width: var(--maxw); margin: 0 auto;
}

.nav__panel-list li { overflow: hidden; }
.nav__panel-list a {
  display: flex; align-items: baseline; gap: 18px; padding: 14px 0;
  border-bottom: 1px solid var(--border-dark);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.nav__panel.is-open .nav__panel-list a { transform: none; }
.nav__panel-idx { font-size: var(--t-xs); color: var(--on-dark-3); font-variant-numeric: tabular-nums; }
.nav__panel-word { font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 500; }
.nav__panel-list a:hover .nav__panel-word { color: var(--t-blush); }

.nav__panel-foot {
  margin-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.nav__panel.is-open .nav__panel-foot { opacity: 1; transform: none; }
.nav__panel-note { font-size: var(--t-xs); color: var(--on-dark-3); font-style: italic; font-family: var(--font-display); }

@media (max-width: 860px) {
  .nav__list, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__panel-sheet { justify-content: flex-start; padding-top: 120px; }
  .nav__panel-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
}