/* A quiet margin index: diamond stops and a curling, dry-brush current marker. */
.section-nav{
  position:fixed;z-index:70;right:clamp(16px,2vw,40px);top:50%;
  width:122px;display:flex;flex-direction:column;gap:22px;
  transform:translateY(-50%);opacity:1;visibility:visible;
  transition:opacity .35s ease,visibility .35s;
}
.section-nav-link{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:48px;width:100%;color:#2c2c2c;text-decoration:none;outline-offset:4px;-webkit-tap-highlight-color:transparent}
.section-nav-link:before{content:'';position:absolute;right:6px;top:50%;width:32px;height:72px;background:url('assets/section-nav-ink.svg') center/contain no-repeat;opacity:0;transform:translateY(-50%) scale(.88);transition:opacity .2s ease,transform .25s ease;pointer-events:none}
.section-nav-node{position:relative;display:block;width:7px;height:7px;margin-right:19px;background:#777;transform:rotate(45deg);transition:background-color .2s ease,transform .2s ease;pointer-events:none}
.section-nav-label{position:absolute;right:48px;white-space:nowrap;font-family:var(--display);font-size:21px;line-height:1.4;letter-spacing:2px;color:#333;opacity:0;transform:translateX(5px);transition:opacity .2s ease,transform .2s ease;text-shadow:0 0 8px #f3f3f3,0 0 16px #f3f3f3}
.section-nav-link[aria-current="location"]:before{opacity:1;transform:translateY(-50%) scale(1)}
.section-nav-link[aria-current="location"] .section-nav-node{background:#f3f3f3;transform:translateY(5px) rotate(45deg) scale(.8)}
.section-nav-link[aria-current="location"] .section-nav-label,.section-nav-link:hover .section-nav-label,.section-nav-link:focus-visible .section-nav-label{opacity:1;transform:translateX(0)}
.section-nav-link:not([aria-current]):hover .section-nav-node{background:#2c2c2c;transform:rotate(45deg) scale(1.2)}
.section-nav-link:focus-visible{outline:1px solid #666}
.ink-entering .section-nav,.dialog-open .section-nav{opacity:0;visibility:hidden;pointer-events:none}
/* Keep the index in the margin, not on top of the product cards. */
@media(min-width:1101px){#main>.section-shell,.showcase{width:calc(100% - 300px)}}
@media(min-width:701px) and (max-width:1100px){
  .section-nav{right:8px;width:44px;gap:16px}
  .section-nav-label{font-size:18px;right:44px;padding:3px 6px;background:#f3f3f3ed}
  .section-nav-link[aria-current="location"] .section-nav-label{opacity:0}
  .section-nav-link:hover .section-nav-label,.section-nav-link:focus-visible .section-nav-label{opacity:1}
  #main>.section-shell,.showcase{width:calc(100% - 144px)}
}
@media(max-width:700px),(max-height:500px){.section-nav{display:none}}
@media(prefers-reduced-motion:reduce){.section-nav,.section-nav-link:before,.section-nav-node,.section-nav-label{transition:none}}