/* ============================================================================
   The sidebar.

   Every page on Freepol reachable from every other page, without going home
   first. Shared by all pages so the menu cannot drift out of step with itself.

   Fallback values sit inside every var() because this file loads before the
   page's own styles have necessarily defined the tokens, and a menu that
   renders white on white is worse than a menu that renders plainly.
   ========================================================================= */

.menu-btn{
  display:flex;align-items:center;gap:8px;
  background:none;border:0;padding:0;margin-right:clamp(10px,1.6vw,20px);
  cursor:pointer;color:var(--ink-2,#4a4a4a);
  font-family:var(--mono,ui-monospace,monospace);
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
}
.menu-btn:hover{color:var(--ink,#111)}
.menu-btn svg{width:15px;height:11px;display:block;overflow:visible}
.menu-btn svg line{stroke:currentColor;stroke-width:1.4;transition:transform .22s ease}
.menu-btn[aria-expanded="true"] svg line:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] svg line:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] svg line:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (max-width:600px){ .menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} }

.sb-scrim{
  position:fixed;inset:0;z-index:190;background:rgba(17,17,17,.42);
  opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s;
}
.sb-open .sb-scrim{opacity:1;visibility:visible}

.sb{
  position:fixed;top:0;left:0;bottom:0;z-index:200;width:min(316px,86vw);
  background:var(--panel,#fff);border-right:1px solid var(--rule-strong,#ccc);
  transform:translateX(-100%);visibility:hidden;
  transition:transform .26s cubic-bezier(.22,.61,.36,1),visibility .26s;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
}
.sb-open .sb{transform:none;visibility:visible}

.sb-head{
  display:flex;align-items:center;gap:10px;
  padding:16px 20px 14px;border-bottom:1px solid var(--rule,#e3e3e3);
}
.sb-head svg{width:17px;height:23px;fill:var(--ink,#111)}
.sb-head b{font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--ink,#111);margin-right:auto}
.sb-close{
  background:none;border:0;padding:4px;cursor:pointer;line-height:1;
  font-size:19px;color:var(--ink-3,#767676);
}
.sb-close:hover{color:var(--ink,#111)}

.sb nav{padding:6px 0 18px}
.sb h3{
  margin:16px 20px 6px;font-family:var(--mono,ui-monospace,monospace);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3,#767676);font-weight:500;
}
.sb a{
  display:flex;align-items:baseline;gap:9px;
  padding:8px 20px;text-decoration:none;color:var(--ink-2,#4a4a4a);
  font-size:14px;line-height:1.35;border-left:2px solid transparent;
}
.sb a:hover{color:var(--ink,#111);background:var(--canvas,#f7f7f5)}
.sb a[aria-current="page"]{color:var(--ink,#111);border-left-color:var(--ink,#111);font-weight:600}
.sb a em{
  font-style:normal;font-family:var(--mono,ui-monospace,monospace);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3,#767676);margin-left:auto;align-self:center;white-space:nowrap;
}
.sb a small{display:block;font-size:11.5px;color:var(--ink-3,#767676);margin-top:2px}
.sb a.stacked{display:block}

.sb-foot{
  margin-top:auto;padding:14px 20px 18px;border-top:1px solid var(--rule,#e3e3e3);
  font-family:var(--mono,ui-monospace,monospace);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3,#767676);
}

/* A drawer that flies in is a flourish. Somebody who has asked for less motion
   has asked for this too, so it simply appears. */
@media (prefers-reduced-motion: reduce){
  .sb,.sb-scrim,.menu-btn svg line{transition:none}
}