/* The rail — the one fixture that follows you through the whole site.
   Lives in its own file because shop.html carries its own inline styles and
   does not link page.css; one stylesheet, one source of truth, every page.
   Desktop only: phones get the pinned call bar instead. */

.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:30;
  display:flex;flex-direction:column;gap:2px;
  /* its own surface, so it never disappears into whatever is behind it —
     the header board used to swallow the top three links */
  padding:16px 14px 16px 20px;
  background:rgba(250,244,230,.9);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid rgba(74,46,29,.16);
  border-right:0;
  box-shadow:-6px 0 22px rgba(45,31,18,.09)}
@supports not (backdrop-filter:blur(2px)){ .rail{background:rgba(250,244,230,.97)} }
.rail a.nav{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  text-decoration:none;padding:10px 0;color:rgba(45,31,18,.62);
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  transition:color .25s}
.rail a.nav i{display:block;width:26px;height:1px;background:rgba(74,46,29,.35);transition:all .25s;flex:none}
.rail a.nav:hover,.rail a.nav[aria-current="page"]{color:var(--ink)}
.rail a.nav:hover i,.rail a.nav[aria-current="page"] i{width:44px;background:var(--saddle);height:2px}
.rail .lbl{white-space:nowrap}
.rail .sep{height:1px;background:rgba(74,46,29,.28);margin:14px 0 12px;margin-left:auto;width:26px}
.rail .contact{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.rail .contact a{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  text-decoration:none;padding:8px 0;color:rgba(45,31,18,.72);
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  transition:color .25s}
.rail .contact a:hover{color:var(--ink)}
.rail .contact a[aria-disabled="true"]{opacity:.42;cursor:default}
.rail .contact a[aria-disabled="true"]:hover{color:rgba(45,31,18,.72)}
.rail .contact .ic{width:30px;height:30px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(74,46,29,.34);background:rgba(255,255,255,.55);transition:all .25s}
.rail .contact a:hover .ic{border-color:var(--walnut);background:rgba(74,46,29,.1)}
.rail .contact svg{width:13px;height:13px;fill:currentColor}

@media(max-width:820px){ .rail{display:none} }