/* Keep the section index in the content gutter, near the reading position. */
.section-nav{position:fixed;z-index:20;left:max(8px,calc((100vw - 46rem)/2 - 48px));top:clamp(8rem,28vh,16rem);width:32px;display:flex;flex-direction:column;align-items:flex-start}
.section-nav a{position:relative;display:flex;align-items:center;width:32px;height:26px;padding:0 4px;color:var(--muted);touch-action:manipulation;outline-offset:-2px}
.section-nav-dash{display:block;flex:none;width:var(--dash-width,8px);height:2px;border-radius:1px;background:currentColor;opacity:.4;transition:width .16s ease-out,opacity .16s ease-out}
.section-nav a[aria-current="location"]{color:var(--ink)}
.section-nav a[aria-current="location"] .section-nav-dash{width:var(--dash-width,14px);opacity:1}
.section-nav a[data-preview]{color:var(--ink)}
.section-nav a[data-preview] .section-nav-dash{opacity:1}
.section-nav-label{position:absolute;right:calc(100% + 4px);top:50%;transform:translate(3px,-50%);padding:.25rem .5rem;border-radius:4px;background:var(--page);color:var(--ink);font-size:.75rem;line-height:1.5;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease-out,transform .16s ease-out,visibility .16s ease-out}
.section-nav a[data-preview] .section-nav-label{opacity:1;visibility:visible;transform:translate(0,-50%)}
@media(max-width:1100px){
  .section-nav-label{right:auto;left:calc(100% + 4px);background:var(--soft);box-shadow:0 2px 8px #00000012}
}
@media(max-width:900px){
  .section-nav{left:8px}
  .section-nav a{height:28px}
  .home-page>.page{width:calc(100% - 4rem);margin-left:3rem;margin-right:1rem}
}
@media(pointer:coarse){.section-nav a{height:40px}}
@media(max-height:480px){.section-nav{top:50%;transform:translateY(-50%)}.section-nav a{height:24px}}
@media(prefers-reduced-motion:reduce){.section-nav-dash,.section-nav-label{transition:none}}
@media print{.section-nav{display:none}.home-page>.page{width:100%;margin:0}}