/* Critical site navigation — keep menu visible on every page */
header{
  position:sticky;
  top:0;
  z-index:50;
}

.topbar{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  column-gap:12px;
  padding:16px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  max-width:100%;
}

.brand-logo{
  width:100px;
  height:100px;
  flex-shrink:0;
  object-fit:contain;
}

.topbar > .menu-btn,
#menuBtn{
  width:72px;
  height:72px;
  min-width:72px;
  min-height:72px;
  border:2px solid rgba(255,255,255,.45);
  border-radius:14px;
  background:linear-gradient(145deg, #f7c85a, #ff9a3a);
  color:#120f08;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-shrink:0;
  z-index:100;
  cursor:pointer;
  visibility:visible;
  opacity:1;
  position:relative;
  pointer-events:auto;
  margin:0;
  padding:0;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  -webkit-appearance:none;
  appearance:none;
}

.topbar > .menu-btn::before,
#menuBtn::before{
  content:"Menu";
  display:block;
  font-size:11px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  line-height:1;
  color:#120f08;
}

.topbar > .menu-btn .burger span,
#menuBtn .burger span{
  background:#120f08;
}

.burger{
  width:22px;
  height:16px;
  position:relative;
}

.burger span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:999px;
}

.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:7px; }
.burger span:nth-child(3){ top:14px; }
