/* Shared scroll-motion pieces: docked section nav (dots + menu), word-by-word brightening, blur focus.
   Extracted from nds-flow.css so every page can use them. Keep in sync with nds-flow.css until the homepage is switched over. */
.is-word-reveal .w { opacity: .2; transition: opacity .12s linear; }
.is-word-reveal .word { display: inline-block; white-space: nowrap; }
.is-word-reveal .c { opacity: .2; transition: opacity .12s linear; }
.is-word-reveal .word.w { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .is-word-reveal .w { opacity: 1; transition: none; } }
.chapter-pill { position: fixed; z-index: 40; bottom: 1rem; left: 0; right: 0; width: fit-content; margin-inline: auto; display: flex; gap: .75rem; align-items: center; padding: .4rem .4rem .4rem 1rem; border-radius: 99px; background: rgba(13,13,12,.9); color: var(--cream); border: 1px solid rgba(245,242,234,.16); font-size: .82rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; text-decoration: none; opacity: 0; pointer-events: none; transform: translateY(1.2rem) scale(.96); transition: opacity .5s cubic-bezier(.22,.8,.3,1), transform .6s cubic-bezier(.22,.8,.3,1); backdrop-filter: blur(8px); }
/* Centred by layout (left/right 0 + auto margins), never by translate(-50%): while the pill slides in, iPhone Safari keeps
   the -50% it measured at the start, so as the label opened the pill grew off to the right and then jumped to the middle. */
.chapter-pill.is-on { opacity: 1; pointer-events: auto; transform: none; }
.chapter-pill__n { display: none; }
.chapter-pill__cta { padding: .6rem 1rem; border-radius: 99px; background: var(--orange); color: var(--ink); }
.chapter-pill:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
@media (max-width: 360px) { .chapter-pill__t { display: none; } .chapter-pill { padding-left: .4rem; } }
@media (prefers-reduced-motion: reduce) { .chapter-pill { transition: none; } }
[data-focus] { will-change: filter, opacity; }
.chapter-pill__t { display: inline-block; overflow: hidden; white-space: nowrap; transition: width .45s cubic-bezier(.22,.8,.3,1); }
.chapter-pill__tt { display: inline-block; transition: opacity .18s ease, transform .18s ease; }
.chapter-pill__tt.is-out { opacity: 0; transform: translateY(.35em); }
@media (prefers-reduced-motion: reduce) { .chapter-pill__t, .chapter-pill__tt { transition: none; } }
.chapter-pill { gap: .25rem; padding: .3rem .3rem .3rem .55rem; text-decoration: none; }
.chapter-pill__dots { display: flex; align-items: center; }
.chapter-dot { display: inline-flex; align-items: center; gap: 0; padding: .65rem .42rem; min-height: 2.4rem; background: none; border: 0; color: var(--cream); font: inherit; font-size: .82rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chapter-dot i { display: block; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: rgba(245,242,234,.38); transition: background .4s ease, transform .4s ease; }
.chapter-dot:hover i { background: rgba(245,242,234,.8); }
.chapter-dot__t { display: block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .55s cubic-bezier(.22,.8,.3,1), opacity .35s ease, margin .55s cubic-bezier(.22,.8,.3,1); margin-left: 0; }
.chapter-dot.is-active { padding-inline: .5rem; }
.chapter-dot.is-active i { background: var(--orange); transform: scale(1.25); }
.chapter-dot.is-active .chapter-dot__t { max-width: var(--w, 12rem); opacity: 1; margin-left: .55rem; }
.chapter-dot:focus-visible { outline: none; }
.chapter-dot:focus-visible i { box-shadow: 0 0 0 4px rgba(245,242,234,.45); }
.chapter-pill__cta { display: inline-block; }
@media (max-width: 520px) {
  .chapter-pill { max-width: calc(100vw - 1.5rem); padding-left: .3rem; }
  .chapter-dot { padding-inline: .3rem; }
  /* the name gets all the room the pill has left on this screen (chapter-pill.js sets --labmax), and ends in "…" if it still cannot fit */
  .chapter-dot.is-active .chapter-dot__t { max-width: min(var(--w, 9rem), var(--labmax, 7.5rem)); text-overflow: ellipsis; }
  .chapter-pill__cta-long { display: none; }
}
@media (min-width: 521px) { .chapter-pill__cta-short { display: none; } }
@media (prefers-reduced-motion: reduce) { .chapter-dot i, .chapter-dot__t { transition: none; } }
.chapter-pill__cta, .chapter-pill__cta:hover { text-decoration: none; }
.chapter-pill .chapter-pill__cta, .chapter-pill .chapter-pill__cta * { text-decoration: none !important; }
.chapter-pill { overflow: visible; }
.chapter-pill__menu { position: relative; flex: none; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: rgba(245,242,234,.12); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .3s ease; }
.chapter-pill__menu:hover { background: rgba(245,242,234,.22); }
.chapter-pill__menu span, .chapter-pill__menu span::before { content: ""; position: absolute; left: 50%; width: 1.05rem; height: 2px; margin-left: -.525rem; background: var(--cream); border-radius: 2px; transition: transform .35s cubic-bezier(.22,.8,.3,1), top .35s cubic-bezier(.22,.8,.3,1); }
.chapter-pill__menu span { top: calc(50% + 3px); }
.chapter-pill__menu span::before { top: -6px; left: 0; margin-left: 0; }
.chapter-pill.is-open .chapter-pill__menu span { top: 50%; transform: rotate(45deg); }
.chapter-pill.is-open .chapter-pill__menu span::before { top: 0; transform: rotate(-90deg); }
.chapter-pill__menu:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.chapter-menu { position: absolute; left: 50%; bottom: calc(100% + .6rem); width: min(24rem, calc(100vw - 1.5rem)); display: flex; flex-direction: column; padding: .6rem; border-radius: 1.4rem; background: rgba(13,13,12,.99); border: 1px solid rgba(245,242,234,.16); white-space: normal; opacity: 0; transform: translate(-50%, .8rem); transition: opacity .35s ease, transform .45s cubic-bezier(.22,.8,.3,1); }
.chapter-menu.is-shown { opacity: 1; transform: translate(-50%, 0); }
.chapter-menu a { display: flex; align-items: center; justify-content: space-between; padding: .55rem .9rem; border-radius: .9rem; color: var(--cream); text-decoration: none; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.05; text-transform: uppercase; letter-spacing: 0; }
.chapter-menu a:hover, .chapter-menu a:focus-visible { background: rgba(245,242,234,.1); outline: none; }
.chapter-menu .chapter-menu__cta { margin-top: .4rem; padding: .85rem 1rem; justify-content: center; gap: .5rem; border-radius: 99px; background: var(--orange); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 1rem; text-transform: none; letter-spacing: .01em; }
.chapter-menu .chapter-menu__cta:hover { background: var(--orange); filter: brightness(1.05); }
@media (prefers-reduced-motion: reduce) { .chapter-menu, .chapter-pill__menu span, .chapter-pill__menu span::before { transition: none; } }
[data-focus] { will-change: filter, opacity; }
@media (prefers-reduced-motion: reduce) { [data-focus] { filter: none !important; opacity: 1 !important; } }