:root{
  --site-paper:var(--paper,#FBFAF6);
  --site-ink:var(--ink,#171A21);
  --site-soft:var(--soft,#4A4F59);
  --site-brass:var(--brass,#A9863E);
  --site-line:var(--line,#E7E1D4);
  --site-line-2:var(--line-2,#EFEADF);
  --site-gut:26px;
  --site-max:1240px;
}

#hdr{
  position:sticky;
  top:0;
  z-index:80;
  display:block;
  width:100%;
  padding:0;
  background:rgba(251,250,246,.9);
  color:var(--site-ink);
  border-bottom:1px solid var(--site-line);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
}

#hdr.scrolled{
  padding:0;
  background:rgba(251,250,246,.9);
  border-bottom-color:var(--site-line);
}

#hdr .site-nav-wrap{
  max-width:var(--site-max);
  height:70px;
  margin:0 auto;
  padding:0 var(--site-gut);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0;
}

#hdr .brand{
  display:block;
  flex:0 0 auto;
  min-width:0;
  color:var(--site-ink);
  font-family:"Poppins","Montserrat","proxima-nova","Proxima Nova",Arial,sans-serif;
  font-size:16px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.005em;
  text-transform:none;
  white-space:nowrap;
}

#hdr .brand:hover{color:var(--site-brass)}

#hdr .menu{
  position:static;
  display:flex;
  flex-direction:row;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-start;
  gap:26px;
  min-width:auto;
  width:auto;
  height:auto;
  background:transparent;
  border:0;
  transform:none;
  opacity:1;
  pointer-events:auto;
}

#hdr .menu a{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:4px 0;
  border:0;
  color:var(--site-soft);
  font-family:"Roboto",Arial,sans-serif;
  font-size:11px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
}

#hdr .menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:1px;
  background:var(--site-brass);
  transition:width .35s ease;
}

#hdr .menu a:hover,
#hdr .menu a.active{color:var(--site-ink)}

#hdr .menu a:hover::after,
#hdr .menu a.active::after{width:100%}

#hdr .burger{
  position:relative;
  z-index:101;
  display:none;
  flex:0 0 auto;
  width:44px;
  height:44px;
  border:1px solid var(--site-line);
  border-radius:2px;
  background:transparent;
  cursor:pointer;
}

#hdr .burger span{
  position:absolute;
  left:12px;
  right:12px;
  width:auto;
  height:1.5px;
  background:var(--site-ink);
  transition:.3s ease;
}

#hdr .burger span:nth-child(1){top:16px}
#hdr .burger span:nth-child(2){top:21px}
#hdr .burger span:nth-child(3){top:26px}

body.menu-open #hdr .burger span:nth-child(1),
body.open #hdr .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open #hdr .burger span:nth-child(2),
body.open #hdr .burger span:nth-child(2){opacity:0}
body.menu-open #hdr .burger span:nth-child(3),
body.open #hdr .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

#hdr .drawer{
  position:fixed;
  inset:70px 0 auto 0;
  z-index:70;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  max-height:calc(100vh - 70px);
  overflow-y:auto;
  background:var(--site-paper);
  border-bottom:1px solid var(--site-line);
  transform:translateY(-12px);
  opacity:0;
  pointer-events:none;
  transition:.32s ease;
}

body.menu-open #hdr .drawer,
body.open #hdr .drawer{
  transform:none;
  opacity:1;
  pointer-events:auto;
}

#hdr .drawer a{
  display:block;
  padding:16px var(--site-gut);
  border-top:1px solid var(--site-line-2);
  color:var(--site-ink);
  font-family:"Poppins","Montserrat","proxima-nova","Proxima Nova",Arial,sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:0;
  text-transform:none;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
}

#hdr .drawer a:first-child{border-top:0}
#hdr .drawer a:hover,
#hdr .drawer a.active{color:var(--site-brass)}

@media (max-width:760px){
  :root{--site-gut:20px}

  #hdr .menu{display:none}
  #hdr .burger{display:block}
}

@media (min-width:761px){
  #hdr .drawer{display:none}
}