#pn-nav-strip { position: fixed; top: 0; left: 0; bottom: 0; width: 80px; background: var(--surface-color); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; padding: 2rem 0; z-index: 1000; }
@media (max-width: 768px) { #pn-nav-strip { width: 60px; } }
.pn-logo-vert { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-heading); font-size: 1.5rem; color: var(--primary-accent); letter-spacing: 4px; margin-bottom: auto; cursor: pointer; text-transform: uppercase; }
.pn-hamburger { display: flex; flex-direction: column; gap: 6px; cursor: pointer; padding: 1rem; }
.pn-hamburger span { display: block; width: 30px; height: 2px; background: var(--primary-accent); transition: 0.3s; }
.pn-hamburger:hover span { background: #fff; }

#pn-drawer { position: fixed; top: 0; left: -400px; bottom: 0; width: 400px; max-width: 100vw; background: rgba(26, 22, 19, 0.95); backdrop-filter: blur(15px); border-right: 1px solid var(--border-color); z-index: 1001; transition: 0.4s ease-in-out; padding: 4rem 3rem; display: flex; flex-direction: column; }
#pn-drawer.open { left: 0; box-shadow: 20px 0 50px rgba(0,0,0,0.5); }
.pn-close-drawer { align-self: flex-end; font-size: 2rem; color: var(--text-muted); cursor: pointer; margin-bottom: 3rem; transition: 0.3s; }
.pn-close-drawer:hover { color: var(--primary-accent); transform: rotate(90deg); }
.pn-drawer-nav { display: flex; flex-direction: column; gap: 1.5rem; }
.pn-drawer-nav a { font-family: var(--font-heading); font-size: 1.8rem; color: var(--text-main); text-transform: uppercase; letter-spacing: 2px; transition: 0.3s; border-bottom: 1px solid transparent; padding-bottom: 5px; width: fit-content; }
.pn-drawer-nav a:hover, .pn-drawer-nav a.active { color: var(--primary-accent); border-bottom: 1px solid var(--primary-accent); padding-left: 10px; }