.rail {
  position: fixed;
  left: 0;
  top: 0;
  width: 40px;
  height: 100vh;
  box-sizing: border-box;
  background: var(--rail-bg);
  border-right: 2px solid var(--rail-text);
  padding: 40px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  /* Stays visible/usable above the project-detail overlay (z-index 50/51,
     see css/project-detail.css) when a project card is open -- confirmed
     against the Figma reference showing the rail nav sitting on top of the
     open panel's sidebar, not hidden behind it. */
  z-index: 60;
}

.rail__nav {
  flex: none;
  width: 24px;
  height: 272px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rail__nav__inner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 40px;
  transform: rotate(-90deg);
}

.rail__nav a {
  font-size: 20px;
  color: var(--rail-text);
  text-transform: uppercase;
  white-space: nowrap;
}

.rail__nav a.font-impact {
  font-family: var(--font-impact);
}

.rail__nav a.font-sodasans {
  font-family: var(--font-sodasans);
}

.rail__name {
  flex: none;
  width: 24px;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rail__name p {
  flex: none;
  transform: rotate(-90deg);
  font-family: var(--font-impact);
  font-size: 20px;
  color: var(--rail-text);
  text-transform: uppercase;
  white-space: nowrap;
}