/* Home-only project filter signal index. Geometry remains fixed in every state. */
#index .filter-bar {
  align-items: stretch;
  gap: 0;
  min-height: 58px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--ink);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#index .filter-bar::-webkit-scrollbar {
  display: none;
}

#index .filter {
  position: relative;
  flex: 1 0 118px;
  min-width: 118px;
  min-height: 58px;
  padding: 24px 30px 12px 16px;
  overflow: hidden;
  color: var(--acid);
  background: var(--ink);
  border: 0;
  border-right: 1px solid rgba(242, 241, 237, .24);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .075em;
  text-align: left;
  text-transform: uppercase;
  transform: none;
  transition: color .14s linear, background-color .14s linear, box-shadow .14s linear;
  scroll-snap-align: start;
}

#index .filter sup {
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  opacity: .68;
}

#index .filter:hover,
#index .filter:focus-visible {
  color: var(--ink);
  background: var(--acid);
  box-shadow: none;
  outline: 0;
  transform: none;
}

#index .filter.is-active,
#index .filter.is-active:hover,
#index .filter.is-active:focus-visible {
  color: var(--ink);
  background: var(--acid);
  box-shadow: none;
  transform: none;
}

#index .filter-note {
  flex: 0 0 auto;
  align-self: center;
  padding-inline: 16px;
  white-space: nowrap;
}

@media (max-width: 680px) {
  #index .filter-bar {
    min-height: 52px;
    scroll-snap-type: inline proximity;
  }

  #index .filter {
    flex-basis: 112px;
    min-width: 112px;
    min-height: 52px;
    padding: 21px 27px 10px 13px;
    font-size: 10px;
  }

}

@media (prefers-reduced-motion: reduce) {
  #index .filter {
    transition: none;
  }
}