/* Navigation usability enhancements. */

@media (min-width:761px){
  #dotNav{
    gap:0;
    align-items:flex-end;
  }

  #dotNav a{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:44px;
    height:36px;
    border:0;
    border-radius:0;
    background:transparent;
    transform:none;
    transition:none;
  }

  #dotNav a::before{
    content:attr(aria-label);
    position:absolute;
    right:20px;
    top:50%;
    transform:translate(6px,-50%);
    white-space:nowrap;
    font-family:var(--cond);
    font-size:10px;
    font-weight:300;
    line-height:1;
    letter-spacing:.24em;
    color:rgba(245,245,242,.82);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s,transform .3s;
  }

  #dotNav a::after{
    content:"";
    width:8px;
    height:8px;
    border:1px solid rgba(245,245,242,.4);
    border-radius:50%;
    background:transparent;
    transition:background .3s,border-color .3s,transform .3s;
  }

  #dotNav a:hover::before,
  #dotNav a:focus-visible::before,
  #dotNav a.is-act::before{
    opacity:1;
    transform:translate(0,-50%);
  }

  #dotNav a:hover::after,
  #dotNav a:focus-visible::after{
    border-color:rgba(238,123,35,.85);
  }

  #dotNav a.is-act{
    border-color:transparent;
    background:transparent;
    transform:none;
  }

  #dotNav a.is-act::after{
    border-color:var(--orange);
    background:var(--orange);
    transform:scale(1.4);
  }

  #dotNav a:focus-visible{
    outline:1px solid var(--orange);
    outline-offset:2px;
  }
}

@media (max-width:760px){
  #sceneTag .st-name{
    display:block;
    max-width:118px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
  }
}