/* ============================================================
   JFBM Shell — Global Header + Footer
   Shared across all story pages and index
   ============================================================ */

/* --- TOP HEADER (Logo + Category Links) --- */
.jfbm-top{
  position:fixed;top:0;left:0;right:0;z-index:9500;
  padding:16px 5vw;
  display:flex;align-items:center;justify-content:space-between;
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:auto;
}
.jfbm-top.hidden{opacity:0;pointer-events:none;transform:translateY(-10px)}
.jfbm-top__logo{
  height:36px;width:auto;display:block;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.4)) drop-shadow(0 0 6px rgba(255,255,255,.15));
}
.jfbm-top__links{
  display:flex;gap:28px;align-items:center;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
}
.jfbm-top__link{
  color:rgba(255,255,255,.45);text-decoration:none;transition:color .3s;
  text-shadow:0 0 4px rgba(0,0,0,.3), 0 0 10px rgba(0,0,0,.15);
}
.jfbm-top__link:hover{color:rgba(255,255,255,.9)}
/* Dark page variant — dark logo + dark text with subtle white glow for visibility */
.jfbm-top--dark .jfbm-top__link{
  color:rgba(0,0,0,.35);
  text-shadow:0 0 4px rgba(255,255,255,.5), 0 0 12px rgba(255,255,255,.3);
}
.jfbm-top--dark .jfbm-top__link:hover{color:rgba(0,0,0,.8)}
.jfbm-top--dark .jfbm-top__logo{
  filter:drop-shadow(0 0 3px rgba(255,255,255,.5)) drop-shadow(0 0 10px rgba(255,255,255,.25));
}

/* Burger (mobile) */
.jfbm-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px 0}
.jfbm-burger span{display:block;width:22px;height:1.5px;background:rgba(255,255,255,.6);transition:all .3s}
.jfbm-top--dark .jfbm-burger span{background:rgba(0,0,0,.5)}

/* Mobile menu */
.jfbm-mobile-menu{
  display:none;position:fixed;inset:0;z-index:9499;
  background:rgba(0,0,0,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  flex-direction:column;align-items:center;justify-content:center;gap:32px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.jfbm-mobile-menu.open{display:flex}
.jfbm-mobile-menu a{
  font-size:16px;letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,.6);text-decoration:none;transition:color .3s;
}
.jfbm-mobile-menu a:hover{color:#fff}
.jfbm-mobile-menu__close{
  position:absolute;top:20px;right:5vw;font-size:28px;
  color:rgba(255,255,255,.5);cursor:pointer;background:none;border:none;
}

/* --- SCROLL-UP BAR (appears after hero on scroll-up) --- */
.jfbm-bar{
  position:fixed;top:0;left:0;right:0;z-index:9400;
  padding:0 5vw;height:48px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(0,0,0,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.05);
  transform:translateY(-100%);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.jfbm-bar.visible{transform:translateY(0)}
.jfbm-bar__back{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.45);text-decoration:none;transition:color .3s;
}
.jfbm-bar__back:hover{color:rgba(255,255,255,.9)}
.jfbm-bar__scroll{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.35);text-decoration:none;
  cursor:pointer;background:none;border:none;transition:color .3s;
}
.jfbm-bar__scroll:hover{color:rgba(255,255,255,.8)}

/* --- FOOTER --- */
.jfbm-footer{
  padding:32px 5vw;
  display:flex;align-items:center;justify-content:space-between;
  background:#000;
  border-top:1px solid rgba(255,255,255,.06);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.jfbm-footer__copy{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.2);
}
.jfbm-footer__links{display:flex;gap:24px}
.jfbm-footer__link{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.2);text-decoration:none;transition:color .3s;
}
.jfbm-footer__link:hover{color:rgba(255,255,255,.5)}

/* --- RESPONSIVE --- */
@media(max-width:768px){
  .jfbm-top__links{display:none}
  .jfbm-burger{display:flex}
  .jfbm-top__logo{height:28px}
  .jfbm-footer{
    flex-direction:column;gap:12px;text-align:center;padding:24px 5vw;
  }
  .jfbm-footer__links{gap:16px}
}