.chapter-index{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:12;color:var(--ink);width:44px}
.chapter-links{display:flex;flex-direction:column}
.chapter-links a{display:flex;position:relative;align-items:center;justify-content:center;width:44px;height:44px}
.chapter-mark{width:7px;height:7px;border:1px solid currentColor;transform:rotate(45deg);transition:background .25s,transform .25s}
.chapter-links a:after{content:'';position:absolute;height:30px;top:29px;width:1px;background:currentColor;opacity:.2}
.chapter-links a:last-child:after{display:none}
.chapter-links a[aria-current=location] .chapter-mark{background:var(--red);border-color:var(--red);transform:rotate(45deg) scale(1.4)}
.chapter-label{position:absolute;right:44px;padding:7px 11px;background:var(--ink);color:var(--paper);white-space:nowrap;font-size:12px;opacity:0;transform:translateX(5px);pointer-events:none;transition:opacity .2s,transform .2s}
.chapter-links a:hover .chapter-label,.chapter-links a:focus-visible .chapter-label{opacity:1;transform:none}
.chapter-index.on-dark{color:var(--paper)}
.chapter-track{display:block;width:1px;height:45px;background:#929a9366;margin:14px auto}
.chapter-track>span{display:block;width:100%;height:100%;background:var(--red);transform-origin:top}
.chapter-position{display:block;text-align:center;font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.chapter-toggle{display:none}
body.menu-open .chapter-index{visibility:hidden}
@media(min-width:1200px) and (max-width:1359px){body[data-page=home] .wrap{width:calc(100% - 144px)}}
@media(max-width:1199px){
 .chapter-index{top:auto;bottom:14px;right:16px;transform:none;width:auto;color:var(--paper);background:var(--ink);border:1px solid #ffffff40;box-shadow:0 4px 20px #0002}
 .chapter-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;min-width:130px;padding:10px 14px;font-size:12px}
 .chapter-links{display:none;position:absolute;bottom:calc(100% + 8px);right:0;width:205px;background:var(--ink);color:var(--paper);border:1px solid #ffffff40;padding:10px;box-shadow:0 8px 24px #0003;max-height:calc(100dvh - 150px);overflow:auto}
 .chapter-index.expanded .chapter-links{display:flex}
 .chapter-links a{width:100%;gap:15px;justify-content:space-between;padding-inline:8px}
 .chapter-links a:after{display:none}
 .chapter-label{position:static;background:none;padding:0;opacity:1;transform:none;font-size:13px}
 .chapter-track,.chapter-position{display:none}
 body[data-page=home] .footer{padding-bottom:76px}
}
@media(prefers-reduced-motion:reduce){.chapter-mark,.chapter-label{transition:none}}

/* Keep the chapter rail visible and legible over both dark and light sections. */
.chapter-index {
  --chapter-step: clamp(24px, calc((100dvh - 48px) / 8), 44px);
  color: #fff;
}
.chapter-index .chapter-mark {
  border-color: #fff;
  box-shadow: 0 0 0 1px #171b1a;
  position: relative;
  z-index: 1;
}
.chapter-index .chapter-links a:after {
  background: #fff;
  box-shadow: 0 0 0 1px #171b1a;
  opacity: .75;
  top: 50%;
  height: var(--chapter-step);
}
.chapter-index .chapter-links a[aria-current=location] .chapter-mark {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #171b1a;
}
.chapter-index .chapter-track {
  background: #fff;
  box-shadow: 0 0 0 1px #171b1a;
}
.chapter-index .chapter-position {
  color: #fff;
  text-shadow: -1px -1px #171b1a, 1px -1px #171b1a, -1px 1px #171b1a, 1px 1px #171b1a;
}
.chapter-index .chapter-links a { height: var(--chapter-step); flex: 0 0 var(--chapter-step); }
@media(max-height: 520px) {
  .chapter-index .chapter-track, .chapter-index .chapter-position { display: none; }
}
@media(max-width: 1199px) {
  .chapter-index {
    top: 50%; right: 0; bottom: auto; transform: translateY(-50%);
    width: 44px; background: none; border: 0; box-shadow: none;
  }
  .chapter-index .chapter-toggle { display: none; }
  .chapter-index .chapter-links {
    display: flex; position: static; width: 44px; max-height: none;
    overflow: visible; background: none; border: 0; padding: 0; box-shadow: none;
  }
  .chapter-index .chapter-links a {
    width: 44px; padding: 0; gap: 0; justify-content: center;
  }
  .chapter-index .chapter-links a:not(:last-child):after { display: block; }
  .chapter-index .chapter-label {
    position: absolute; right: 44px; background: var(--ink); color: var(--paper);
    padding: 7px 11px; opacity: 0; transform: translateX(5px); font-size: 12px;
  }
  .chapter-index .chapter-links a:focus-visible .chapter-label { opacity: 1; transform: none; }
  body[data-page=home] .footer { padding-bottom: initial; }
}
@media(max-width: 1199px) and (hover: hover) {
  .chapter-index .chapter-links a:hover .chapter-label { opacity: 1; transform: none; }
}
@media(max-width: 1199px) and (hover: none) {
  .chapter-index .chapter-links a:hover:not(:focus-visible) .chapter-label { opacity: 0; transform: translateX(5px); }
}
/* Leave a clear interaction lane for the fixed rail on compact screens. */
@media(max-width: 1199px) {
  .chapter-index, .chapter-index .chapter-links, .chapter-index .chapter-links a { width: 32px; }
  .chapter-index .chapter-label { right: 32px; }
}
@media(max-width: 900px) {
  main.wrap, main .wrap, .footer .wrap {
    width: calc(100% - 64px);
    margin-left: 16px;
    margin-right: 48px;
  }
}

/* Keep all chapter links below the sticky header in short windows. */
@media(max-height:520px){
 .chapter-index{--chapter-step:clamp(24px,calc((100dvh - 100px) / 8),44px);top:calc((100dvh + 76px) / 2)}
}
@media(max-width:600px) and (max-height:520px){
 .chapter-index{--chapter-step:clamp(24px,calc((100dvh - 84px) / 8),44px);top:calc((100dvh + 60px) / 2)}
}

/* A lighter rail expands as one translucent navigation on hover or keyboard focus. */
.chapter-index{--chapter-rail-width:44px;--chapter-open-width:190px;width:var(--chapter-rail-width);isolation:isolate;transition:width .24s ease}
.chapter-index::before{content:'';position:absolute;inset:-7px 0;z-index:-1;background:rgba(20,25,23,.76);border-radius:3px;opacity:0;transition:opacity .24s ease;pointer-events:none}
.chapter-index .chapter-links{width:100%}
.chapter-index .chapter-links a{width:100%;justify-content:flex-end;padding:0 calc((var(--chapter-rail-width) - 7px)/2) 0 0}
.chapter-index .chapter-links a:after{right:calc((var(--chapter-rail-width) - 1px)/2);opacity:.35;box-shadow:0 0 0 .5px #171b1a99}
.chapter-index .chapter-mark{width:7px;height:7px;border-color:#ffffffd9;box-shadow:0 0 0 .5px #171b1acc}
.chapter-index .chapter-links a[aria-current=location] .chapter-mark{border-color:var(--red);box-shadow:0 0 0 .5px #fff,0 0 0 1px #171b1acc;transform:rotate(45deg) scale(1.2)}
.chapter-index .chapter-track{background:#ffffff99;box-shadow:0 0 0 .5px #171b1a99;opacity:.7}
.chapter-index .chapter-label{right:var(--chapter-rail-width);padding:7px 10px;background:transparent;color:var(--paper);text-align:right}
.chapter-index:has(.chapter-links a:focus-visible){width:var(--chapter-open-width)}
.chapter-index:has(.chapter-links a:focus-visible)::before{opacity:1}
.chapter-index:has(.chapter-links a:focus-visible) .chapter-links a .chapter-label{opacity:1;transform:none}
@media(hover:hover){
 .chapter-index:hover{width:var(--chapter-open-width)}
 .chapter-index:hover::before{opacity:1}
 .chapter-index:hover .chapter-links a .chapter-label{opacity:1;transform:none}
}
@media(max-width:1199px){
 .chapter-index{--chapter-rail-width:32px;width:var(--chapter-rail-width)}
 .chapter-index .chapter-links,.chapter-index .chapter-links a{width:100%}
 .chapter-index .chapter-links a{justify-content:flex-end;padding:0 calc((var(--chapter-rail-width) - 7px)/2) 0 0}
 .chapter-index .chapter-label{right:var(--chapter-rail-width);background:transparent}
}
@media(prefers-reduced-motion:reduce){.chapter-index,.chapter-index::before{transition:none}}

/* On phones the menu provides navigation; reclaim the chapter-rail gutter. */
@media(max-width:600px){
 .chapter-index{display:none}
 main.wrap,main .wrap,.footer .wrap{width:calc(100% - 40px);margin-inline:auto}
}
@media(max-width:350px){main.wrap,main .wrap,.footer .wrap{width:calc(100% - 32px)}}