/* Шапка: один компонент для всех размеров.
   <900: липкая полоса (логотип слева, бургер справа). 900–1099: поверх коллажа, только бургер.
   ≥1100: поверх коллажа, ссылки в строку. Меню лежит под шапкой, поэтому ничего не прыгает. */

.site-header{
  position:sticky;top:0;z-index:110;
  height:var(--hdr-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:calc(var(--page-pad) - 5px);
  background:var(--paper);
}
.site-header .logo{display:block;flex:none;width:clamp(49px,6.2vw,64px)}
.site-header .logo img{display:block;width:100%;height:auto}
.site-header .nav{display:none}

/* бургер: три полосы, при открытии превращаются в крестик на том же месте */
.burger{position:relative;display:block;flex:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.burger span{position:absolute;left:8px;right:8px;top:21px;height:2px;background:var(--ink);
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.burger span:nth-child(1){transform:translateY(-10px)}
.burger span:nth-child(3){transform:translateY(10px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}

@media (min-width:900px){
  .site-header{
    --u:calc(100vw / 1920);
    --link-fs:clamp(14px, calc(var(--u) * 22), 22px);
    position:absolute;left:calc(var(--u) * 107);top:calc(var(--u) * 57);
    height:auto;padding:0;background:none;
  }
  .site-header .logo{display:none}
  .burger{margin:-8px 0 0 -10px}
}
@media (min-width:1100px){
  .site-header .nav{display:block}
  .burger{display:none}
  .nav ul{display:flex;gap:clamp(18px, calc(18px + (100vw - 1100px) * .04146), 52px);margin:0;padding:0;list-style:none}
}