/* Project index: one continuous ink rail, with a recessed active position.
   Flat edges and small separators keep the 14 names in a single architectural rhythm. */
.h-selector{
  height:57px;
  min-height:57px;
  box-sizing:border-box;
  padding-block:6px;
  color:#fff;
  background:linear-gradient(180deg,#1d2d32 0%,#15252b 100%);
  border-top:1px solid #ffffff1c;
  box-shadow:inset 0 -1px 0 #08171c66;
}
.h-selector .h-project-rail{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:0;
  height:44px;
  min-width:0;
}
.h-selector .h-project-option{
  position:relative;
  flex:1 1 auto;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:7px clamp(7px,.7vw,14px);
  border:0;
  border-radius:0;
  color:#bcc9cb;
  background:transparent;
  text-decoration:none;
  transition:color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.h-selector .h-project-option strong{
  position:relative;
  z-index:1;
  font-size:clamp(13px,1.02vw,16px);
  font-weight:450;
  letter-spacing:-.015em;
  line-height:1.25;
  white-space:nowrap;
}
.h-selector .h-project-option::before{
  content:"";
  position:absolute;
  inset:12px auto 12px 0;
  width:2px;
  height:auto;
  background:#bd5b6d;
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .2s ease;
}
.h-selector .h-project-option::after{
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:1px;
  height:9px;
  background:#ffffff16;
  transform:translateY(-50%);
  pointer-events:none;
}
.h-selector .h-project-option:last-child::after{display:none}
.h-selector .h-project-option[aria-pressed=true]{
  color:#fff;
  background:linear-gradient(90deg,#ffffff12,#ffffff05);
  box-shadow:inset 0 1px 0 #ffffff0a,inset 0 -1px 0 #08171c40;
}
.h-selector .h-project-option[aria-pressed=true] strong{font-weight:550}
.h-selector .h-project-option[aria-pressed=true]::before{transform:scaleY(1)}
.h-selector .h-project-option:hover{
  color:#fff;
  background-color:#ffffff09;
}
.h-selector .h-project-option:focus-visible{
  outline:2px solid #f5f6f3;
  outline-offset:-3px;
  color:#fff;
  background-color:#ffffff0d;
}
.h-selector .h-option-mark{display:none}
.h-selector .h-selector-mobile{display:none}
.h-selector .h-all-projects{
  min-height:44px;
  color:#e4eced;
  font-size:13px;
  gap:11px;
}
.h-selector .h-project-total{
  color:#b8c8cc;
  border-left-color:#ffffff26;
  font-size:12px;
}
.h-selector .h-all-projects:focus-visible{
  outline:2px solid #f5f6f3;
  outline-offset:2px;
}
@media(max-width:900px){
  .h-selector{height:53px;min-height:53px;padding-block:4px}
  .h-selector .h-project-rail{display:none}
  .h-selector .h-selector-mobile{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    height:44px;
    min-width:0;
  }
  .h-selector-mobile>[data-mobile-project]{
    position:relative;
    min-width:0;
    padding-left:14px;
    font-size:15px;
    font-weight:450;
    color:#fff;
    white-space:nowrap;
  }
  .h-selector-mobile>[data-mobile-project]::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:2px;
    height:15px;
    background:#bd5b6d;
    transform:translateY(-50%);
  }
}
@media(prefers-reduced-motion:reduce){
  .h-selector .h-project-option,
  .h-selector .h-project-option::before{transition:none}
}