/* Мобильное меню. Порог 820px — тот же, что прячет строку .nav ul. */

#projects,
#services,
#about{scroll-margin-top:72px}

/* Фон и размытие — на псевдоэлементе, чтобы backdrop-filter шапки
   не становился containing block для фиксированной подложки меню. */
header{
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:#F7F3EE;
  pointer-events:none;
  transition:background-color .22s ease,backdrop-filter .22s ease;
}
header.is-scrolled:not(.is-open)::before{
  background:rgba(247,243,238,.92);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
/* Страницу не замораживаем: position:fixed и overflow:hidden на body/html
   в iOS Safari остаются после закрытия меню. Скролл только у панели. */

.nav{position:relative;z-index:2}
.nav-toggle{
  display:none;
  -webkit-appearance:none;
  appearance:none;
  width:44px;
  height:44px;
  margin:0 -10px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.nav-toggle:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.nav-burger{
  position:relative;
  display:block;
  width:18px;
  height:14px;
}
.nav-burger span{
  position:absolute;
  left:0;
  width:100%;
  height:1.5px;
  background:currentColor;
  border-radius:1px;
  transition:transform .22s ease,opacity .22s ease;
}
.nav-burger span:nth-child(1){top:0}
.nav-burger span:nth-child(2){top:6.25px}
.nav-burger span:nth-child(3){top:12.5px}
header.is-open .nav-burger span:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
header.is-open .nav-burger span:nth-child(2){opacity:0}
header.is-open .nav-burger span:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}

.nav-backdrop{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  top:65px;
  z-index:1;
  background:rgba(43,38,34,.16);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
header.is-open .nav-backdrop{
  opacity:1;
  pointer-events:auto;
}

.nav-panel{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  z-index:3;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  max-height:calc(100dvh - 64px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
header.is-open .nav-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.nav-panel[hidden],
.nav-backdrop[hidden]{display:none !important;pointer-events:none !important}
.nav-panel ul{list-style:none;margin:0;padding:0}
.nav-panel li a{
  display:flex;
  align-items:center;
  min-height:56px;
  padding:16px 24px;
  border-bottom:1px solid var(--line);
  font-family:var(--sans);
  font-size:15px;
  letter-spacing:.08em;
  color:var(--ink-soft);
  text-decoration:none;
}
.nav-panel li a:hover,
.nav-panel li a:focus-visible{color:var(--terra)}
.nav-panel li a:active{background:var(--cream-2)}
.nav-panel li a.tg{color:var(--terra)}
.nav-panel li a.tg:hover{color:var(--terra-dark)}
.nav-panel li:last-child a{border-bottom:0}

@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  .nav > ul,
  header .back{display:none}
  .logo{min-width:0}
}

@media (min-width:821px){
  .nav-toggle,
  .nav-panel,
  .nav-backdrop{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  header,
  header::before,
  header.is-open .nav-panel,
  header.is-open .nav-backdrop,
  .nav-panel,
  .nav-backdrop,
  .nav-burger span{
    transition:none;
  }
}