/* ОБЩАЯ ШАПКА для страниц на собственных шаблонах.
   /about, /cases и /styles не подключают site.css: у них свои .sec, .wrap
   и .btn, которые столкнулись бы с общими. Поэтому шапка вынесена сюда,
   все селекторы прижаты к .hdr, а каждая переменная имеет запасное
   значение — файл работает и там, где токены названы иначе.
   Кнопка .hdr .btn описана заново по той же причине. */

.hdr{position:sticky;top:0;z-index:50;background:var(--paper,#ECE5D6);border-bottom:2px solid var(--ink,#151010)}
.hdr .hdr-in{max-width:1200px;margin:0 auto;padding:12px 34px;display:flex;align-items:center;gap:26px}
.hdr .logo{display:flex;align-items:center;gap:11px;text-decoration:none;white-space:nowrap}
.hdr .logo i{width:13px;height:13px;background:var(--red,#E5121B);display:block;transform:skewX(-14deg)}
.hdr .logo b{font-family:var(--grot,'Helvetica Neue',Helvetica,'Arial Nova',Arial,system-ui,sans-serif);font-weight:800;font-size:17px;letter-spacing:-.02em;text-transform:uppercase;display:block;line-height:1}
.hdr .logo small{display:block;font-family:var(--num,'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace);font-size:9px;letter-spacing:.13em;color:var(--ink-2,#5A504A);text-transform:uppercase;margin-top:3px}
.hdr .hnav{display:flex;gap:19px;margin-left:auto}
.hdr .hnav a{font-family:var(--num,'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2,#5A504A);text-decoration:none;transition:color .15s}
.hdr .hnav a:hover{color:var(--red,#E5121B)}
.hdr .btn{padding:11px 18px;font-size:13px;box-shadow:3px 3px 0 var(--ink,#151010)}
.hdr .hnav .nav-cta{display:none}
.hdr .burger{display:none;width:44px;height:44px;margin-left:auto;padding:0;background:var(--paper,#ECE5D6);
    border:2px solid var(--ink,#151010);cursor:pointer;position:relative;flex:0 0 auto}
.hdr .burger span, .hdr .burger span::before, .hdr .burger span::after{position:absolute;left:11px;width:18px;height:2px;
    background:var(--ink,#151010);content:"";transition:transform .18s ease,opacity .12s ease}
.hdr .burger span{top:21px}
.hdr .burger span::before{top:-6px;left:0}
.hdr .burger span::after{top:6px;left:0}
@media (hover:hover) and (pointer:fine){.hdr .burger:hover{border-color:var(--red,#E5121B)}}
.hdr .burger:hover span, .hdr .burger:hover span::before, .hdr .burger:hover span::after{background:var(--red,#E5121B)}
.hdr.nav-open .burger span{background:transparent}
.hdr.nav-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.hdr.nav-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

.hdr .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;
  font:800 13px/1 var(--grot,'Helvetica Neue',Helvetica,Arial,sans-serif);text-transform:uppercase;letter-spacing:.02em;
  text-decoration:none;border:2px solid var(--ink,#151010);background:var(--white,#FFFDF8);color:var(--ink,#151010);
  border-radius:0;box-shadow:3px 3px 0 var(--ink,#151010);transition:transform .12s ease,box-shadow .12s ease}
@media (hover:hover) and (pointer:fine){.hdr .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink,#151010)}}
.hdr .btn.prim{background:var(--red,#E5121B);color:#fff;border-color:var(--ink,#151010)}

@media(max-width:980px){
  .hdr .hnav{display:none}
  .hdr .burger{display:block}
  .hdr{position:sticky;top:0;z-index:65;background:var(--paper,#ECE5D6)}
  .hdr .hnav{display:none;opacity:0;transform:translateY(-6px);
      transition:opacity .16s,transform .16s,display .16s allow-discrete;
      position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
      background:var(--paper,#ECE5D6);border-top:2px solid var(--ink,#151010);border-bottom:2px solid var(--ink,#151010);
      box-shadow:0 14px 0 rgba(21,16,16,.08);z-index:70;margin:0;
      max-height:calc(100dvh - 73px);overflow-y:auto;overscroll-behavior:contain}
  .hdr.nav-open .hnav{display:flex;opacity:1;transform:none}
  @starting-style{ .hdr.nav-open .hnav{opacity:0;transform:translateY(-6px)} }
  .hdr .hnav a{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-size:14px;
      letter-spacing:.06em;color:var(--ink,#151010);border-bottom:1px solid var(--line,#D6CCB8)}
  .hdr .hnav a::after{content:"\2192";color:var(--red,#E5121B);font-family:var(--num,'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace)}
  .hdr .hnav a:last-child{border-bottom:none}
  .hdr .hnav a:active{background:var(--paper-2,#E3DAC7)}
  .hdr .hnav .nav-cta{display:flex;background:var(--red,#E5121B);color:#fff;font-weight:800}
  .hdr .hnav .nav-cta::after{content:"\2192";color:#fff}
}

@media(max-width:640px){
  .hdr .hdr-in{padding:10px 18px}
  .hdr .btn{display:none}
}

/* Фокус обязан быть виден и на тех страницах, что не подключают site.css
   (/about и /cases живут на своих шаблонах). Единственное правило файла,
   не прижатое к .hdr, — и это сознательно. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--red,#E5121B);outline-offset:3px}
/* Ссылка «к содержимому» на страницах со своим шаблоном. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink,#151010);color:var(--paper,#ECE5D6);padding:12px 18px;font-family:var(--num,ui-monospace,monospace);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}