:root{
  --header-h: 22px;      /* even smaller */
  --footer-h: 90px;
  --nav-w: 260px;
}

.site-header{
  height: var(--header-h);
  min-height: var(--header-h);
  max-height: var(--header-h);
  background: #1a0d07;
  border-bottom: 1px solid rgba(255,210,140,0.25);
  position: fixed;
  top:0; left:0; right:0;
  z-index: 9999;
}

/* nothing inside header affects height */
.site-header *{ display:none; }

@media (max-width:1100px){
  :root{ --header-h: 62px; }
  .site-header{
    height:var(--header-h);
    min-height:var(--header-h);
    max-height:var(--header-h);
    background:rgba(26,13,7,.92);
    backdrop-filter:blur(4px);
    border-bottom:1px solid rgba(255,210,140,0.22);
  }
  .site-header *{display:none;}
}