/* 18.10: плоская шапка вместо плашки.
   Фон на всю ширину, прилипает к самому верху; логотип и меню стоят по сетке контента (1240 + боковые поля).
   Без скруглений и теней, снизу тонкая линия. Подключается последним — перекрывает hero-launch/footer-v71. */
:root{--hdr-h:76px;--hdr-gutter:32px;--hdr-safe:env(safe-area-inset-top,0px)}
@media(max-width:1180px){:root{--hdr-h:68px}}
@media(max-width:800px){:root{--hdr-gutter:20px}}
@media(max-width:520px){:root{--hdr-gutter:16px}}

html .header.wrap,
html body>.header.wrap{
  position:sticky;top:0;z-index:40;
  box-sizing:border-box;width:100%;max-width:none;margin:0;
  height:calc(var(--hdr-h) + var(--hdr-safe));
  padding:var(--hdr-safe) max(var(--hdr-gutter),calc((100% - 1240px)/2)) 0;
  background:#fff;border:0;border-bottom:1px solid #e8eaee;border-radius:0
}
@media(max-width:1180px){
  html .header.wrap{display:flex;flex-wrap:nowrap;align-items:center;gap:10px}
}

/* Якоря: высота шапки + прежний воздух над заголовком */
html{scroll-padding-top:calc(var(--hdr-h) + var(--hdr-safe) + 18px)}
@media(max-width:580px){html{scroll-padding-top:calc(var(--hdr-h) + var(--hdr-safe) + 10px)}}
/* В статьях блога у разделов свой scroll-margin 96px — вместе с scroll-padding уводил заголовок далеко вниз */
html .blog-prose .blog-section{scroll-margin-top:0}

/* Мобильное меню: лист от верхнего края на всю ширину. Его верхняя строка (логотип + ×) стоит ровно там же,
   где шапка с бургером, — меню раскрывается из шапки, без второй «карточки» и без тени. */
@media(max-width:1180px){
  html dialog.mobile-nav{
    inset:0 0 auto 0;width:100%;max-width:none;margin:0;height:auto;
    max-height:100dvh;padding:var(--hdr-safe) max(var(--hdr-gutter),calc((100% - 1240px)/2)) 16px;
    border:0;border-radius:0 0 24px 24px;background:#f7f7f8;transform-origin:top center
  }
  html dialog.mobile-nav .drawer-top{
    box-sizing:border-box;height:var(--hdr-h);padding:0;margin:0 calc(-1 * max(var(--hdr-gutter),calc((100% - 1240px)/2))) 14px;
    padding-inline:max(var(--hdr-gutter),calc((100% - 1240px)/2));
    background:#fff;border-bottom:1px solid #e8eaee
  }
  html dialog.mobile-nav .menu-close{width:44px;height:44px;border-radius:13px;font-size:28px}
}
@media(min-width:601px) and (max-width:1180px){
  html dialog.mobile-nav .mobile-nav-links{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Логотип в меню того же размера, что в шапке, — при открытии ничего не «прыгает» */
@media(max-width:1180px){html dialog.mobile-nav .drawer-top .studio-logo img{width:104px}}
@media(max-width:800px){html dialog.mobile-nav .drawer-top .studio-logo img{width:93px}}
@media(max-width:380px){html dialog.mobile-nav .drawer-top .studio-logo img{width:82px}}
@media(max-width:340px){html dialog.mobile-nav .drawer-top .studio-logo img{width:72px}}

/* Обводки: после клика/тапа рамок нет нигде, только :focus-visible для Tab */
:focus:not(:focus-visible){outline:none!important}
*{-webkit-tap-highlight-color:transparent}
.header a:focus:not(:focus-visible),.header button:focus:not(:focus-visible),
.mobile-nav a:focus:not(:focus-visible),.mobile-nav button:focus:not(:focus-visible){outline:none!important}
.header .menu-toggle,.header .menu-quick,.mobile-nav .menu-close{-webkit-appearance:none;appearance:none;border:0}

/* Боковая колонка статьи липнет под шапкой с прежним зазором 12px */
html .blog-side{top:calc(var(--hdr-h) + var(--hdr-safe) + 12px)}

/* MAX всегда первым среди мессенджеров */
.messenger.messenger-max{order:-1}