.nav{
  display:flex;align-items:center;justify-content:flex-end;
  gap:2px;flex-wrap:nowrap;min-width:0;flex:1 1 auto;
}
.nav-scroll{display:contents}
.nav-home,.nav-main{
  display:block;padding:10px 13px;
  color:var(--espresso);font-size:var(--fs-sm);font-weight:500;
  letter-spacing:.08em;white-space:nowrap;transition:color .25s;
}
.nav-item{position:relative}
.nav-home:hover,.nav-main:hover,
.nav-item.active>.nav-main,.nav-home.active{color:var(--champagne)}
.nav-home:after,.nav-main:after{
  content:"";display:block;width:0;height:1px;margin:7px auto -8px;
  background:var(--champagne);transition:width .35s var(--ease);
}
.nav-home:hover:after,.nav-main:hover:after,
.nav-item.active>.nav-main:after,.nav-home.active:after{width:70%}

.nav-dropdown{
  position:absolute;left:50%;top:calc(100% + 16px);
  min-width:180px;padding:12px;
  background:var(--silk);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(22,19,17,.12);
  opacity:0;visibility:hidden;transform:translate(-50%,12px);
  transition:.28s var(--ease);
}
.nav-dropdown:before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav-dropdown a{
  display:block;padding:11px 12px;color:var(--stone);
  font-size:var(--fs-sm);letter-spacing:.04em;white-space:nowrap;transition:.2s;
}
.nav-dropdown a:hover{background:var(--pearl);color:var(--void)}
.nav-item:hover>.nav-dropdown,
.nav-item:focus-within>.nav-dropdown{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}

@media(min-width:1025px) and (max-width:1200px){
  .nav-home,.nav-main{padding:10px 8px;font-size:12px;letter-spacing:.04em}
}

@media(max-width:1024px){
  .header{z-index:120}
  .header .brand,.header .menu{position:relative;z-index:130}
  html.nav-open .header,body.nav-open .header{
    position:sticky;top:0;z-index:140;background:var(--silk)!important;
  }
  body.nav-open .brand-logo-light{display:none!important}
  body.nav-open .brand-logo-dark{display:block!important}
  html.nav-open .brand-logo,
  body.nav-open .brand-logo{filter:none!important}
  .nav{
    display:none;position:fixed;left:0;right:0;top:0;bottom:0;z-index:135;
    width:100%;margin:0;padding:0;background:var(--silk);
    flex-direction:column;align-items:stretch;overflow:hidden;
  }
  .nav.open{display:flex}
  .nav-scroll{
    display:block;flex:1;min-height:0;height:100%;
    overflow-y:scroll;-webkit-overflow-scrolling:touch;
    padding:8px 20px calc(20px + env(safe-area-inset-bottom,0px));
  }
  .nav-item{display:block;border-bottom:1px solid var(--line)}
  .nav-home,.nav-main{
    padding:14px 2px;color:var(--void)!important;
    font-size:clamp(15px,4vw,17px);letter-spacing:.06em;white-space:normal;
  }
  .nav-home:after,.nav-main:after{display:none}
  .nav-dropdown{
    position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px;
    width:100%;padding:0 0 16px;border:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;background:transparent;
  }
  .nav-dropdown a{
    min-height:44px;display:flex;align-items:center;justify-content:center;
    padding:10px;background:var(--pearl);white-space:normal;text-align:center;
    font-size:var(--fs-sm);
  }
  .nav-dropdown a:last-child:nth-child(odd){grid-column:1/-1}
  html.nav-open,body.nav-open{overflow:hidden!important;height:100%}
}