/* Treat the three mobile links as one group with equal gaps between labels. */
.home-header .login-arrow{display:inline-flex;vertical-align:middle}
.home-header .login-arrow svg{width:15px;height:15px}

@media(max-width:760px){
  .home-header.site-header{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    --mobile-nav-gap:clamp(10px,3vw,20px);
    align-items:center;
    height:92px;
    gap:12px;
    border-bottom:1px solid var(--line);
  }
  .home-header .brand{margin:0}
  .home-header .brand img{width:clamp(56px,18vw,76px)}
  .home-header-links{
    display:flex;
    align-items:center;
    justify-self:center;
    gap:var(--mobile-nav-gap);
    min-width:0;
  }
  .home-header nav{
    display:flex;
    align-items:center;
    flex-shrink:0;
    gap:var(--mobile-nav-gap);
    margin:0;
  }
  .home-header nav a,.home-header .login{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    min-height:44px;
    padding:10px 0;
    border:0;
    background:none;
    font-size:clamp(10.5px,2.95vw,12px);
    font-weight:400;
    line-height:1.3;
    color:var(--blue);
    white-space:nowrap;
  }
  .home-header nav a:nth-child(2){display:inline-flex}
  .home-header .login .login-arrow{display:none}
  .home-header nav a:hover,.home-header .login:hover{color:var(--cream)}
}

/* Optically align the mobile navigation text with the logo. */
@media(max-width:760px){
 body[data-preview-page=home] .home-header-links{transform:translateY(3px)}
}