/* nav.css - the site-wide top navigation and the MORE slide panel (HTML comes from tools/site-nav). */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* top navigation: the same red Orbitron look the music pages and homepage menu already used */
.rm-nav{position:relative;z-index:30;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(4px,3.5vw,44px);margin:0 auto;padding:18px 10px 0;text-align:center;box-sizing:border-box;width:100%}
.rm-nav a,.rm-nav .rm-nav-here{padding:9px clamp(6px,1.6vw,12px);color:#ff304d;text-decoration:none;font:900 clamp(.86rem,2.6vw,1.6rem) 'Orbitron','Audiowide','Eurostile',sans-serif;letter-spacing:.12em;white-space:nowrap;
 -webkit-text-stroke:.6px #a60020;text-shadow:0 1px 2px #170006,0 0 1px rgba(255,113,133,.25),0 0 2px rgba(255,36,79,.16);transition:color .2s,transform .2s}
.rm-nav .clean-r{font:700 1em Arial,Helvetica,sans-serif;-webkit-text-stroke:.2px #a60020;-webkit-text-fill-color:currentColor}
.rm-nav a:hover,.rm-nav a:focus-visible,.rm-nav a.in{color:#ff7185}
/* the page you are on: same look, shown as plain text instead of a link */
.rm-nav .rm-nav-here{color:#ff7185;cursor:default}
.rm-nav a:hover,.rm-nav a:focus-visible{transform:translateY(-2px);outline:none}
/* homepage: line the nav up with the centered REAPER MAN title */
@media(min-width:821px){body:has(> #rail) .rm-nav.rm-nav-home{left:calc(var(--rail,76px) / -2)}}

/* MORE slide panel */
.rm-more-shade{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.7);opacity:0;transition:opacity .25s}
.rm-more-shade.on{opacity:1}
.rm-more{position:fixed;top:0;right:0;bottom:0;z-index:1001;width:min(340px,86vw);overflow-y:auto;overscroll-behavior:contain;padding:0 22px 40px;box-sizing:border-box;text-align:left;
 background:radial-gradient(ellipse at top right,rgba(116,10,27,.35),transparent 60%),linear-gradient(160deg,#141114,#050505);border-left:1px solid rgba(211,29,52,.45);box-shadow:-18px 0 40px rgba(0,0,0,.8);
 transform:translateX(105%);visibility:hidden;transition:transform .3s cubic-bezier(.22,.7,.25,1),visibility 0s .3s}
.rm-more.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.22,.7,.25,1)}
.rm-more-head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:18px 0 14px;background:#100c0e;border-bottom:1px solid rgba(211,29,52,.45);margin-bottom:8px}
.rm-more-head span{font:900 1rem 'Orbitron',sans-serif;letter-spacing:.2em;color:#ff2929}
.rm-more-close{width:42px;height:42px;border:1px solid rgba(211,29,52,.45);border-radius:9px;background:#000;color:#f4f0f2;font-size:1.6rem;line-height:1;cursor:pointer}
.rm-more-close:hover,.rm-more-close:focus-visible{color:#ff2929;border-color:#ff2929;outline:none}
.rm-more-group{padding:10px 0;border-bottom:1px solid rgba(211,29,52,.2)}
.rm-more-group .rm-more-title{margin:6px 0;padding:0;font:700 .72rem 'Orbitron',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#c5bbc0;text-shadow:none;-webkit-text-stroke:0}
.rm-more-group a{display:block;padding:9px 4px;color:#f4f0f2;text-decoration:none;font:600 1.2rem 'Barlow Condensed',Arial,sans-serif;letter-spacing:normal;border-left:2px solid transparent;transition:color .15s,border-color .15s,padding .15s}
.rm-more-group a:hover,.rm-more-group a:focus-visible,.rm-more-group a[aria-current=page]{color:#ff2929;border-left-color:#ff2929;padding-left:10px;outline:none}
body.rm-more-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){.rm-more,.rm-more.open,.rm-more-shade{transition:none}}
/* some pages force one font on every element; keep the nav's own fonts */
body .rm-nav a,body .rm-nav .rm-nav-here,body .rm-more-head span,body .rm-more-group .rm-more-title{font-family:'Orbitron','Audiowide','Eurostile',sans-serif!important}
body .rm-nav .clean-r{font-family:Arial,Helvetica,sans-serif!important}
body .rm-more-group a{font-family:'Barlow Condensed',Arial,sans-serif!important}
/* small phones: keep all five links on one row */
@media(max-width:480px){.rm-nav{gap:0;padding:14px 4px 0}.rm-nav a,.rm-nav .rm-nav-here{padding:8px 1.6vw;font-size:3.7vw;letter-spacing:.08em}}
@media(max-width:360px){.rm-nav a,.rm-nav .rm-nav-here{padding:8px 1.1vw;font-size:3.55vw;letter-spacing:.04em}}