/* Bespoken Scroll: Lenis smooth scroll + the Bespoken scrollbar (see bespoken-scrollbar.js). */

/* Lenis: native scroll-behavior would fight it */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-scrolling iframe{pointer-events:none}

/* native bar hidden: the Bespoken one replaces it */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* brand: Emerald #143134, Watermelon #F65863, cream #E9E4E3 */
#bsk-bar{--ink:#143134; --soft:rgba(20,49,52,.38); --dot:#F65863;
	position:fixed; right:14px; top:50%; height:min(54vh,480px); width:44px; transform:translateY(-50%); z-index:9990;
	opacity:0; transition:opacity .5s cubic-bezier(.4,0,.2,1); -webkit-user-select:none; user-select:none}
#bsk-bar.is-ready{opacity:1}
#bsk-bar.is-off{display:none}
#bsk-bar.is-dark{--ink:#E9E4E3; --soft:rgba(233,228,227,.42)}
#bsk-bar *{box-sizing:border-box}
/* hover catchment: a wider invisible strip so the numbers show as you approach the edge */
#bsk-bar::before{content:""; position:absolute; right:-10px; top:-30px; bottom:-30px; width:40px}
#bsk-bar:hover::before{width:56px}

.bsk-bar__shaft{position:absolute; right:0; top:0; bottom:0; width:44px; cursor:ns-resize; touch-action:none}
.bsk-bar__line{position:absolute; right:12px; top:0; bottom:0; width:1px; background:rgba(128,128,128,.5); opacity:.6}
.bsk-bar__fill{position:absolute; right:12px; top:0; width:1px; height:calc(var(--p,0) * 100%); background:var(--dot); opacity:.8}
.bsk-bar__car{position:absolute; right:7.5px; top:calc(var(--p,0) * 100%); width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--dot);
	box-shadow:0 0 0 3px rgba(246,88,99,.18); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; pointer-events:none}
#bsk-bar:hover .bsk-bar__car,#bsk-bar.is-drag .bsk-bar__car{transform:scale(1.25); box-shadow:0 0 0 5px rgba(246,88,99,.2)}
.bsk-bar__car.is-settle{animation:bskSettle .55s cubic-bezier(.16,1,.3,1)}
@keyframes bskSettle{0%{transform:scale(1.25)}35%{transform:scale(1.1,1.35) translateY(2px)}70%{transform:scale(1.3,1.05) translateY(-1px)}100%{transform:scale(1.25)}}

/* section dots: true positions on the line; numbers 01 down, shown on hover (current one always, faint) */
.bsk-bar__dots{position:absolute; inset:0}
.bsk-bar__dot{position:absolute; right:2px; width:20px !important; height:14px !important; max-width:none !important; margin:-7px 0 0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
	background:transparent !important; box-shadow:none !important; min-height:0 !important; cursor:pointer}
.bsk-bar__dot::after{content:""; position:absolute; right:7.5px; top:5px; width:4px; height:4px; border-radius:50%; background:var(--soft);
	transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s}
.bsk-bar__dot.is-on::after{background:var(--ink); opacity:.75}
.bsk-bar__dot:hover::after,.bsk-bar__dot:focus-visible::after{background:var(--dot); transform:scale(1.6)}
.bsk-bar__dot.is-end::after{background:transparent; box-shadow:inset 0 0 0 1px var(--soft)}
.bsk-bar__dot::before{content:attr(data-n); position:absolute; right:22px; top:50%; transform:translate(4px,-50%);
	font:600 10px/1 Inter,system-ui,sans-serif; letter-spacing:.06em; font-variant-numeric:tabular-nums; color:var(--ink);
	opacity:0; transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.16,1,.3,1),color .2s; pointer-events:none}
.bsk-bar__dot.is-on::before{opacity:.5; transform:translate(0,-50%); color:var(--dot)}
#bsk-bar:hover .bsk-bar__dot::before{opacity:.55; transform:translate(0,-50%)}
#bsk-bar:hover .bsk-bar__dot.is-on::before{opacity:1}
.bsk-bar__dot:hover::before,.bsk-bar__dot:focus-visible::before{opacity:1 !important; color:var(--dot)}
.bsk-bar__dot:focus-visible{outline:0}
.bsk-bar__dot.t-dark{--ink:#E9E4E3; --soft:rgba(233,228,227,.5)}
.bsk-bar__dot.t-light{--ink:#143134; --soft:rgba(20,49,52,.38)}

/* phones / tablets: a hairline with the dot, only while scrolling */
@media (max-width:1024px),(pointer:coarse){
	#bsk-bar{right:3px; top:20vh; height:60vh; transform:none; width:8px; pointer-events:none}
	.bsk-bar__shaft{width:8px; cursor:default}
	.bsk-bar__line,.bsk-bar__fill{right:3px}
	.bsk-bar__car{right:0; width:7px; height:7px; margin-top:-3.5px; box-shadow:none}
	.bsk-bar__dots,#bsk-bar::before{display:none}
	#bsk-bar .bsk-bar__line,#bsk-bar .bsk-bar__car,#bsk-bar .bsk-bar__fill{opacity:0; transition:opacity .4s}
	#bsk-bar.is-moving .bsk-bar__line{opacity:.5}
	#bsk-bar.is-moving .bsk-bar__car,#bsk-bar.is-moving .bsk-bar__fill{opacity:1}
}
@media (prefers-reduced-motion:reduce){ .bsk-bar__car{transition:none} .bsk-bar__car.is-settle{animation:none} }
@media print{#bsk-bar{display:none}}