/* Shared navigation: a quiet vertical menu on the left edge, like the spine of a book. Injected by /nav.js on every page. */
.pbnav { --nc: #00f3ff; position: fixed; left: 9px; top: 50%; translate: 0 -50%; z-index: 9000; width: 30px; display: flex; flex-direction: column; align-items: center; gap: 0;
         font: 500 10px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; letter-spacing: .26em; text-transform: uppercase; color: var(--nc); transition: opacity .5s, color .5s; }
.pbnav::before, .pbnav::after { content: ""; width: 1px; height: clamp(22px, 5vh, 56px); background: currentColor; opacity: .4; flex: none; }
.pbnav a { color: inherit; text-decoration: none; writing-mode: vertical-rl; rotate: 180deg; width: 100%; min-height: clamp(52px, 9vh, 78px); padding: 0 0 0 1px; display: flex; align-items: center; justify-content: center;
           opacity: .62; position: relative; white-space: nowrap; transition: opacity .35s, letter-spacing .45s cubic-bezier(.2,.8,.2,1); }
.pbnav a:hover { opacity: 1; letter-spacing: .34em; }
.pbnav a[aria-current="page"] { opacity: 1; }
.pbnav a[aria-current="page"]::before { content: ""; position: absolute; left: 50%; top: 8px; width: 5px; height: 5px; background: currentColor; translate: -50% 0; rotate: 45deg; }
.pbnav .mark { writing-mode: horizontal-tb; rotate: 0deg; min-height: 0; height: 44px; font-family: "Playful Bonds", sans-serif; font-size: 15px; letter-spacing: .02em; padding: 0; opacity: 1; }
.pbnav .mark:hover { opacity: .65; letter-spacing: .02em; }
html[data-mood="studio"] .pbnav { --nc: #111214; }
html[data-mood="studio"] .pbnav.dark { --nc: #fff; }   /* over the dark film sections */
html[data-mood="cyber"] .pbnav { --nc: #00f3ff; text-shadow: 0 0 8px rgba(0,243,255,.7); }
html[data-mood="blueprint"] .pbnav { --nc: #2741c9; }
html.booting .pbnav { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .pbnav { left: 2px; width: 24px; font-size: 8.5px; letter-spacing: .2em; } .pbnav .mark { font-size: 12px; height: 34px; } .pbnav a { min-height: 62px; } }