.works-directory{
  display:none;
  position:fixed;
  top:8.25rem;
  left:2.25rem;
  z-index:40;
  width:min(12rem,calc((100vw - 880px)/2 - 4.5rem));
  min-width:0;
  font-family:var(--font-mono-2);
  font-size:.875rem;
  line-height:1.25;
  text-transform:uppercase;
}

@media (min-width:1280px){
  .works-directory{display:block;}
}

.works-directory a{
  display:block;
  min-width:0;
  color:var(--label-2);
  text-decoration:none;
}

.works-directory__bar{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
}

.works-directory__heading{
  color:var(--label-1)!important;
}

.works-directory__toggle{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  min-width:1.25rem;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--label-2);
  font:inherit;
  line-height:inherit;
  cursor:pointer;
  transition:color .15s ease;
}

.works-directory__toggle:hover{
  color:var(--label-1);
}

.works-directory__list{
  display:grid;
  gap:.55rem;
  margin:1.1rem 0 0;
  padding:0;
  list-style:none;
}

.works-directory__list[hidden]{
  display:none;
}

.works-directory__link{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .15s ease;
}

.works-directory__link:hover,
.works-directory__link[aria-current="page"]{
  color:var(--label-1);
}

.works-directory a:focus-visible,
.works-directory__toggle:focus-visible{
  outline:2px solid var(--selection-bg);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .works-directory__link,
  .works-directory__toggle{transition:none;}
}