.etm-hm{
  background: var(--etm-hm-bg);
  color: var(--etm-hm-text);
  width: 100%;
}
.etm-hm a{ color: inherit; }

.etm-hm-top{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  color: var(--etm-hm-muted);
}
.etm-hm-top-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
}
.etm-hm-top-right{
  display:flex;
  align-items:center;
  gap: 10px;
}
.etm-hm-follow{ margin-right: 6px; }
.etm-hm-ico{
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--etm-hm-text) 20%, transparent);
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  font-weight: 700;
  color: color-mix(in srgb, var(--etm-hm-text) 70%, transparent);
}
.etm-hm-ico:hover{
  border-color: color-mix(in srgb, var(--etm-hm-accent) 80%, transparent);
  color: var(--etm-hm-accent);
}
.etm-hm-top-line{
  height: 1px;
  background: color-mix(in srgb, var(--etm-hm-accent) 55%, transparent);
  opacity: .55;
  max-width: 1280px;
  margin: 0 auto;
}

.etm-hm-main{
  padding: 14px 0 16px;
}
.etm-hm-main-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 14px;
}

.etm-hm-logo{
  display:flex;
  justify-content:center;
}
.etm-hm-logo-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.etm-hm-logo img{
  width: var(--etm-hm-logo-w);
  height: auto;
  max-width: 100%;
}
.etm-hm{ --_logo_h: var(--etm-hm-logo-h); }
.etm-hm-logo img{
  max-height: calc(var(--_logo_h) * 1px);
}
.etm-hm-logo-text{
  font-family: "Playfair Display","Cormorant Garamond","Times New Roman",serif;
  font-size: 28px;
  letter-spacing: .6px;
  color: var(--etm-hm-text);
}

/* Nav */
.etm-hm-nav{
  display:flex;
  justify-content:flex-end;
}
.etm-hm-ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap: 28px;
  align-items:center;
}
.etm-hm-ul a{
  text-decoration:none;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .8px;
  color: color-mix(in srgb, var(--etm-hm-text) 88%, transparent);
}
.etm-hm-ul a:hover{
  color: var(--etm-hm-accent);
}
.etm-hm-ul li{ position: relative; }

/* Submenu support */
.etm-hm-ul .sub-menu{
  position:absolute;
  left:0;
  top: calc(100% + 10px);
  background: var(--etm-hm-bg);
  border: 1px solid var(--etm-hm-line);
  min-width: 200px;
  padding: 10px 0;
  display:none;
  z-index: 999;
}
.etm-hm-ul li:hover > .sub-menu{ display:block; }
.etm-hm-ul .sub-menu a{
  display:block;
  padding: 10px 14px;
  letter-spacing: .4px;
}

/* Burger for mobile */
.etm-hm-burger{
  justify-self:start;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--etm-hm-text) 18%, transparent);
  border-radius: 999px;
  display:none;
  cursor:pointer;
  position: relative;
}
.etm-hm-burger span{
  position:absolute;
  left: 13px;
  right: 13px;
  height: 2px;
  background: color-mix(in srgb, var(--etm-hm-text) 75%, transparent);
  transition: transform 160ms ease, opacity 160ms ease, top 160ms ease;
}
.etm-hm-burger span:nth-child(1){ top: 15px; }
.etm-hm-burger span:nth-child(2){ top: 21px; }
.etm-hm-burger span:nth-child(3){ top: 27px; }

.etm-hm.is-open .etm-hm-burger span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.etm-hm.is-open .etm-hm-burger span:nth-child(2){ opacity: 0; }
.etm-hm.is-open .etm-hm-burger span:nth-child(3){ top: 21px; transform: rotate(-45deg); }

@media (max-width: 980px){
  .etm-hm-main-inner{
    grid-template-columns: auto 1fr auto;
  }
  .etm-hm-burger{ display:inline-block; }
  .etm-hm-nav{
    position: fixed;
    top: 0;
    right: -360px;
    width: 340px;
    height: 100vh;
    background: var(--etm-hm-bg);
    border-left: 1px solid var(--etm-hm-line);
    padding: 90px 18px 24px;
    display:block;
    transition: right 180ms ease;
    z-index: 9999;
  }
  .etm-hm.is-open .etm-hm-nav{ right: 0; }
  .etm-hm-ul{
    flex-direction: column;
    align-items:flex-start;
    gap: 14px;
  }
  .etm-hm-ul .sub-menu{
    position: static;
    display:block;
    border: 0;
    padding: 8px 0 0 12px;
    background: transparent;
  }
  .etm-hm-top-inner{ flex-wrap: wrap; justify-content:center; text-align:center; }
  .etm-hm-top-left, .etm-hm-top-center, .etm-hm-top-right{ width: 100%; justify-content:center; }
}
