/* rail.css - the left side menu for info pages (Help, Contact, Terms...). Same rules as the
   music pages' side menu in /music/releases/releases.css. The markup is made by tools/site-nav. */
:root{--rail:76px}
#rail{--blood:#ff2929;--ash:#c5bbc0;--line:rgba(211,29,52,.45)}
body{padding-left:var(--rail)}
#rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:20;background:linear-gradient(90deg,#000 70%,transparent);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 0;box-sizing:border-box}
#rail a.home{font:900 .8rem 'Orbitron';text-decoration:none;color:var(--blood)}
#rail ol{list-style:none;display:flex;flex-direction:column;gap:2px;overflow-y:auto;max-height:80vh;scrollbar-width:none;margin:0;padding:0}
#rail ol a{display:block;writing-mode:vertical-rl;transform:rotate(180deg);padding:9px 10px;font:700 .72rem 'Orbitron';letter-spacing:.12em;text-decoration:none;color:var(--ash);border-left:2px solid transparent;line-height:1.5}
#rail ol a:hover,#rail ol a.on{color:var(--blood);border-left-color:var(--blood)}
@media(max-width:820px){
 body{padding-left:0;padding-bottom:58px}
 #rail{top:auto;bottom:0;width:100%;height:56px;flex-direction:row;padding:0 8px;border-right:0;border-top:1px solid var(--line);background:#000}
 #rail ol{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden}
 #rail ol a{writing-mode:horizontal-tb;transform:none;white-space:nowrap;border-left:0;border-bottom:2px solid transparent}
 #rail ol a.on{border-bottom-color:var(--blood)}
}