/* =====================================================================
   BM GLOBAL NAV — the brandonmysliwiec.com navigation bar, for the
   project sites that keep their own chrome.

   Why this is not just assets/styles/nav.css:

   1. nav.css opens with a full reset — `* { margin: 0 }`,
      `ul { list-style: none; padding: 0 }`, a body font, `a { color:
      inherit }`. Loading that on QuillArk, VialTome or PrecisePep would
      strip the margins off their paragraphs and the bullets off their
      lists.
   2. The class names collide. VialTome and QuillArk both have their own
      `.site-header`; VialTome, QuillArk and Beneath the Broken Sky all
      have a `.nav-toggle`. Sharing names would mean each site's CSS and
      JS fighting over the other's elements.

   So the bar is rebuilt here under a `bm-gn-` prefix, with no reset and
   nothing that reaches outside its own markup. It looks the same because
   the values are the same, not because the file is shared.

   The bar is fixed at the top; a `.bm-gn-spacer` div immediately after it
   reserves the height in the flow, so it works on a project whose body
   already has padding (PrecisePep) and one whose hero clears its own nav
   instead (Beneath the Broken Sky), without either needing to know.
   ===================================================================== */

:root{
  --bm-gn-h:66px;
  --bm-gn-ink:#f3f3f5;
  --bm-gn-muted:rgba(243,243,245,.66);
  --bm-gn-accent:#ee6c2b;
  --bm-gn-hair:rgba(255,255,255,.10);
}
@media (max-width:820px){ :root{ --bm-gn-h:56px } }

.bm-globalnav,.bm-globalnav *{box-sizing:border-box}

.bm-globalnav{
  position:fixed;inset:0 0 auto 0;z-index:1200;height:var(--bm-gn-h);
  display:flex;align-items:center;
  font-family:'Archivo',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:rgba(11,11,14,.92);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--bm-gn-hair);
}
.bm-gn-spacer{height:var(--bm-gn-h);flex:none}

.bm-gn-wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px);
  display:flex;align-items:center;gap:1.5rem}

.bm-gn-brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--bm-gn-ink);
  font-weight:500;font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap;text-decoration:none}
.bm-gn-brand:hover{text-decoration:none}
.bm-gn-brand img{width:32px;height:32px;display:block;filter:drop-shadow(0 0 10px rgba(238,108,43,.5))}
.bm-gn-brand b{font-weight:700}

.bm-gn-links{display:flex;align-items:center;gap:clamp(.5rem,1.5vw,1.4rem);margin-left:auto}
.bm-gn-links>a,.bm-gn-group>a{color:var(--bm-gn-muted);font-size:.9rem;font-weight:500;
  padding:.35em .1em;position:relative;text-decoration:none;transition:color .2s;white-space:nowrap}
.bm-gn-links>a:hover,.bm-gn-group>a:hover{color:var(--bm-gn-ink);text-decoration:none}
.bm-gn-links a[aria-current="page"]{color:var(--bm-gn-ink)}
.bm-gn-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;
  height:2px;border-radius:2px;background:var(--bm-gn-accent)}

.bm-gn-contact{display:inline-flex;align-items:center;gap:.4em;background:var(--bm-gn-accent);color:#160b04;
  font-weight:700;font-size:.88rem;padding:.6em 1.1em;border-radius:999px;text-decoration:none;
  transition:transform .18s,box-shadow .18s;white-space:nowrap}
.bm-gn-contact:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(238,108,43,.7);text-decoration:none}

/* ---- Dropdowns ------------------------------------------------------- */
.bm-gn-group{position:relative;display:flex;align-items:center;gap:.15rem}
.bm-gn-caret{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;background:none;
  color:var(--bm-gn-muted);cursor:pointer;border-radius:6px;transition:color .2s,background .2s,rotate .2s}
.bm-gn-caret svg{width:11px;height:11px;fill:currentColor;display:block}
.bm-gn-caret:hover{color:var(--bm-gn-ink);background:rgba(255,255,255,.08)}
.bm-gn-group.is-open>.bm-gn-caret{color:var(--bm-gn-accent);rotate:180deg}

.bm-gn-panel{
  position:absolute;top:calc(100% + 14px);left:-14px;min-width:230px;z-index:10;
  background:#101017;border:1px solid var(--bm-gn-hair);border-radius:14px;
  padding:.5rem;box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.bm-gn-panel a{color:var(--bm-gn-muted);font-size:.87rem;font-weight:500;padding:.55em .75em;
  border-radius:9px;white-space:nowrap;text-decoration:none;transition:color .18s,background .18s}
.bm-gn-panel a:hover{color:var(--bm-gn-ink);background:rgba(238,108,43,.14);text-decoration:none}
.bm-gn-group.is-open>.bm-gn-panel{opacity:1;visibility:visible;transform:translateY(0)}
@media (hover:hover) and (pointer:fine) and (min-width:1101px){
  .bm-gn-group:hover>.bm-gn-panel,.bm-gn-group:focus-within>.bm-gn-panel{
    opacity:1;visibility:visible;transform:translateY(0)}
}

/* ---- Mobile ---------------------------------------------------------- */
.bm-gn-toggle{display:none;width:42px;height:42px;padding:0;background:none;
  border:1px solid var(--bm-gn-hair);border-radius:11px;position:relative;margin-left:auto;cursor:pointer}
.bm-gn-toggle span,.bm-gn-toggle span::before,.bm-gn-toggle span::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--bm-gn-ink);
  border-radius:2px;transition:.25s;transform:translate(-50%,-50%)}
.bm-gn-toggle span::before{top:-6px}.bm-gn-toggle span::after{top:6px}
.bm-globalnav.is-open .bm-gn-toggle span{background:transparent}
.bm-globalnav.is-open .bm-gn-toggle span::before{top:0;rotate:45deg}
.bm-globalnav.is-open .bm-gn-toggle span::after{top:0;rotate:-45deg}

@media (max-width:1100px){
  .bm-gn-toggle{display:block}
  .bm-gn-links,.bm-globalnav .bm-gn-contact{
    position:fixed;top:var(--bm-gn-h);right:0;width:min(80vw,330px);
    flex-direction:column;align-items:flex-start;gap:1.1rem;
    background:#0c0c10;border-left:1px solid var(--bm-gn-hair);
    padding:1.6rem clamp(18px,5vw,30px);transform:translateX(110%);
    transition:transform .3s ease;margin:0;
  }
  .bm-gn-links{height:calc(100dvh - var(--bm-gn-h));padding-top:2rem;overflow-y:auto;overscroll-behavior:contain}
  .bm-gn-links>a,.bm-gn-group>a{font-size:1.1rem}
  .bm-globalnav .bm-gn-contact{top:auto;bottom:0;border-radius:0;justify-content:center;transform:translateX(110%)}
  .bm-globalnav.is-open .bm-gn-links,.bm-globalnav.is-open .bm-gn-contact{transform:translateX(0)}
  /* Submenus are simply shown, indented — nothing waits on a hover. */
  .bm-gn-group{display:block}
  .bm-gn-group>a{display:block}
  .bm-gn-caret{display:none}
  .bm-gn-panel{position:static;opacity:1;visibility:visible;transform:none;background:none;
    border:0;box-shadow:none;padding:.3rem 0 .2rem;min-width:0;border-radius:0;
    border-left:1px solid var(--bm-gn-hair);margin:.4rem 0 .2rem .35rem}
  .bm-gn-panel a{font-size:.95rem;padding:.45em .9em;white-space:normal}
}

/* =====================================================================
   MAKING ROOM FOR THE BAR

   Each project pins its own header to the top of the viewport. Those now
   pin below this bar instead. `!important` is used deliberately and only
   here: three of these stylesheets are build output that cannot be
   edited usefully (content-hashed names, served immutable for a year),
   and one — QuillArk's — wins on specificity with its own attribute
   selector.

   The `.bm-globalnav ~` prefix means every rule applies only where the
   bar is actually present, so nothing here can affect the main site.
   ===================================================================== */

/* QuillArk and VialTome (position:sticky) */
.bm-globalnav ~ .site-header{top:var(--bm-gn-h) !important;z-index:60 !important}
/* PrecisePep (position:fixed) */
.bm-globalnav ~ .pp-header{top:var(--bm-gn-h) !important;inset-block-start:var(--bm-gn-h) !important}
/* Beneath the Broken Sky, Veylith: Breachline, Broken Ark Studios, Ark Idle */
.bm-globalnav ~ .nav,.bm-globalnav ~ header.nav{top:var(--bm-gn-h) !important;inset-block-start:var(--bm-gn-h) !important}

/* Their mobile drawers hang off the bottom of their own header, so each
   needs the bar's height added to the offset it already uses. */
@media (max-width:1100px){
  .bm-globalnav ~ .pp-header .pp-links{
    top:calc(var(--nav-h) + var(--bm-gn-h)) !important;
    height:calc(100dvh - var(--nav-h) - var(--bm-gn-h)) !important}
  .bm-globalnav ~ .nav .nav-links{top:calc(var(--nav-h,70px) + var(--bm-gn-h)) !important}
  .bm-globalnav ~ header.nav .nav-links{inset:calc(70px + var(--bm-gn-h)) 0 auto 0 !important}
}

/* Sticky sidebars measured from the top of the viewport. */
.bm-globalnav ~ * .toc{top:calc(var(--nav-h) + var(--bm-gn-h) + 22px) !important}
.bm-globalnav ~ * .codex-side{top:calc(var(--nav-h) + var(--bm-gn-h) + 24px)}

/* An in-page anchor must not land underneath two stacked bars. */
html:has(.bm-globalnav){scroll-padding-top:calc(var(--bm-gn-h) + 80px)}