.sidebar-nav {
   position: fixed;
   left: 0;
   top: 0;
   width: var(--nav-width);
   height: 100vh;
   background-color: var(--color-main);
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 24px 0 40px;
   z-index: 100;
}

.nav-logo {
   position: relative;
   width: 120px;
   height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.logo-ring {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   fill: var(--color-bg);
}

.logo-initials {
   font-size: 26px;
   font-weight: 700;
   color: var(--color-bg);
   letter-spacing: 2px;
   position: relative;
   z-index: 1;
}

.nav-links {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px;
   flex: 1;
   justify-content: center;
}

.nav-links a {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   transform: rotate(180deg);
   font-size: 30px;
   font-weight: 400;
   color: var(--color-nav-text);
   letter-spacing: 0;
   line-height: 1.2;
   transition: color 0.2s, -webkit-text-stroke 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
   color: transparent;
   -webkit-text-stroke: 1.2px var(--color-nav-text);
}