.section-nav {
  position: fixed; z-index: 60;
  top: calc(var(--header-h) + 14px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  display: flex; align-items: center; gap: 2px;
  padding: 5px; border-radius: 100px;
  background: rgba(24,24,26,0.88);
  border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.7);
  opacity: 0; visibility: hidden;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease), visibility 400ms;
}
.section-nav.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.section-nav a {
  padding: 8px 16px; border-radius: 100px;
  font-family: 'Hanken Grotesk', sans-serif; font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.78); text-decoration: none; white-space: nowrap;
  transition: color 240ms var(--ease), background 240ms var(--ease);
}
.section-nav a:hover { color: #fff; }
.section-nav a:focus-visible { outline: 2px solid var(--tsa-orange); outline-offset: 3px; }
.section-nav a.is-active { color: var(--ink); background: #fff; }
 
.section-nav__trigger { display: none; }
 
@media (max-width: 1024px) {
  .section-nav {
    top: calc(var(--header-h) + 12px); left: auto; right: clamp(12px, 4vw, 20px);
    width: auto; max-width: min(92vw, 420px);
    transform: translateY(-8px);                             
    display: block; gap: 0; padding: 4px;
    border-radius: 999px;                                    
    background: rgba(20,20,24,0.55);
    -webkit-backdrop-filter: blur(28px) saturate(185%);
            backdrop-filter: blur(28px) saturate(185%);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 24px 54px -20px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.09);
    overflow: hidden;
    transition: opacity 420ms var(--ease),
                transform 520ms cubic-bezier(.22,1,.36,1),
                border-radius 380ms var(--ease), visibility 420ms;
  }
  .section-nav.is-visible { transform: translateY(0); }    
  .section-nav.is-open {
    border-radius: 24px; padding: 5px;
    max-height: calc(100dvh - var(--header-h) - 28px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
   
  .section-nav__trigger {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; min-height: 42px; padding: 9px 20px;
    background: transparent; border: 0; cursor: pointer; color: #fff; border-radius: 999px;
    font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  }
  .section-nav.is-open .section-nav__trigger { justify-content: space-between; padding: 10px 16px 8px; }
  .section-nav__trigger-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .section-nav__caret {
    width: 8px; height: 8px; flex: none; margin-top: -3px;
    border-right: 2px solid var(--tsa-orange); border-bottom: 2px solid var(--tsa-orange);
    transform: rotate(45deg); transition: transform .4s cubic-bezier(.22,1,.36,1), margin-top .4s var(--ease);
  }
  .section-nav.is-open .section-nav__caret { transform: rotate(-135deg); margin-top: 3px; }
   
  .section-nav a {
    display: none;
    margin: 2px 3px; padding: 11px 16px; border-radius: 13px;
    color: rgba(255,255,255,0.82); text-decoration: none;
    font-weight: 700; font-size: 13.5px; letter-spacing: 0.01em;
    min-height: 44px; align-items: center;
    transition: background .2s var(--ease), color .2s var(--ease);
  }
  .section-nav.is-open a { display: flex; }
  .section-nav a.is-active { background: rgba(255,255,255,0.15); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .section-nav, .section-nav a { transition: none !important; } }
 
[data-chapter-target] { scroll-margin-top: calc(var(--header-h) + 70px); }