/* Mobile drawer — hidden on desktop, slide-in panel on mobile */

.kp-hamburger {
  display: none;
  border: 1px solid var(--line-soft, #2a2620);
  background: transparent;
  color: var(--ink, #f5f1ea);
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.kp-hamburger:hover { border-color: var(--ink, #f5f1ea); }

.kp-drawer {
  --kp-d-bg: #16140f;
  --kp-d-line: #2a2620;
  --kp-d-ink: #f5f1ea;
  --kp-d-ink3: #b5ad99;
  --kp-d-muted: #8a826e;
  --kp-d-gold: #d9b872;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 280px; max-width: 86vw;
  background: var(--kp-d-bg);
  border-left: 1px solid var(--kp-d-line);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.kp-drawer.open { transform: translateX(0); }

.kp-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s;
}
.kp-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.kp-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--kp-d-line);
}
.kp-drawer__brand {
  font-family: "Noto Serif TC", var(--font-sans);
  font-weight: 600; font-size: 16px; letter-spacing: 1px;
  color: var(--kp-d-ink);
}
.kp-drawer__close {
  border: none; background: transparent;
  color: var(--kp-d-muted);
  cursor: pointer; padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.kp-drawer__close:hover { color: var(--kp-d-ink); }

.kp-drawer__nav {
  display: flex; flex-direction: column;
  padding: 6px 0;
}
.kp-drawer__item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  color: var(--kp-d-ink3);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  background: none; border: none; cursor: pointer;
  width: 100%; text-align: left;
  font-family: inherit;
  position: relative;
}
.kp-drawer__item:hover { background: rgba(217,184,114,0.05); color: var(--kp-d-ink); }
.kp-drawer__item.active {
  color: var(--kp-d-gold);
  background: rgba(217,184,114,0.08);
  box-shadow: inset 3px 0 0 var(--kp-d-gold);
}
.kp-drawer__item svg { color: var(--kp-d-muted); flex-shrink: 0; }
.kp-drawer__item:hover svg { color: var(--kp-d-gold); }
.kp-drawer__item.active svg { color: var(--kp-d-gold); }
.kp-drawer__item--danger:hover { color: #e88c8c; background: rgba(217,75,75,0.06); }
.kp-drawer__item--danger:hover svg { color: #e88c8c; }
.kp-drawer__dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: #ef4444;
  border-radius: 50%;
  margin-left: auto;
}
.kp-drawer__divider {
  height: 1px; background: var(--kp-d-line);
  margin: 8px 18px;
}

/* Mobile: enable drawer + hamburger, hide top nav links */
@media (max-width: 700px) {
  .kp-hamburger { display: inline-flex; }
  /* Hide both nav schemes (shell + landing) — body. selector boosts specificity over inline @media in landing_v2 */
  body .nav-items,
  body .nav-links,
  body nav .nav-links { display: none !important; }
}