/* scrollbar.css — The landing page's scroll bar: a brass wire with the gold O threaded on it. */

/* index-bar-thread.css — brass wire and gold O at the right edge; the old rail and top line are off while this is on. */
html[data-moves] .rail,html[data-moves] .progress{display:none!important}
.bt{--w:44px;--gold:#a47a2a;position:fixed;right:0;top:50%;height:clamp(320px,66vh,640px);width:0;margin-top:calc(clamp(320px,66vh,640px) / -2);z-index:45;pointer-events:none;transition:opacity .35s ease}
.bt[data-ground="cream"]{--gold:#8a6620}
.bt[data-ground="forest"],.bt.is-open{--gold:#e0bd72}
.bt.is-away{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.bt-hit{position:absolute;right:0;top:-30px;bottom:-30px;width:var(--w);pointer-events:auto}
.bt-plate{position:absolute;right:0;top:-34px;bottom:-34px;width:clamp(200px,20vw,240px);background:#1f3b2d;border:1px solid #b48a3a;border-right:0;transform:translate3d(102%,0,0);transition:transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.bt.is-open .bt-plate{transform:none;pointer-events:auto}
.bt-line,.bt-drawn{position:absolute;right:calc(var(--w) / 2);top:0;bottom:0;background:#b48a3a}
.bt-line{width:1.5px;margin-right:-.75px}
.bt-drawn{width:3px;margin-right:-1.5px;transform:scaleY(0);transform-origin:top;will-change:transform}
.bt-node{position:absolute;right:0;width:var(--w);height:22px;margin-top:-11px;color:#f3efe4;text-decoration:none;pointer-events:auto;outline:0}
.bt-node i{position:absolute;right:calc(var(--w) / 2 - 4px);top:50%;width:8px;height:1.5px;margin-top:-.75px;background:#b48a3a;transform-origin:right;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.bt-node.is-past i{transform:scaleX(.75)}
.bt-node.is-now i{transform:scaleX(1.9)}
.bt-node:hover i,.bt-node:focus-visible i{transform:scaleX(2.6)}
.bt-name{position:absolute;right:calc(var(--w) + 2px);top:50%;font:400 11.5px/1 var(--mono);letter-spacing:.08em;white-space:nowrap;color:#cdbf9a;opacity:0;transform:translate3d(14px,-50%,0);transition:opacity .22s ease,transform .22s ease,color .2s;pointer-events:none}
.bt.is-open .bt-node{width:clamp(200px,20vw,240px)}
.bt.is-open .bt-name{opacity:1;transform:translate3d(0,-50%,0);transition:opacity .34s ease calc(var(--i) * 22ms + 60ms),transform .5s cubic-bezier(.16,1,.3,1) calc(var(--i) * 22ms + 60ms),color .2s}
.bt-node.is-now .bt-name{color:#fff}
.bt-node:hover .bt-name,.bt-node:focus-visible .bt-name{color:#e0bd72}
.bt-o{position:absolute;right:calc(var(--w) / 2 - 20px);top:-20px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:grab;touch-action:none;will-change:transform}
.bt-o.is-held{cursor:grabbing}
.bt-o span{display:block;font:600 30px/40px var(--serif);letter-spacing:-.02em;height:40px;color:var(--gold);transition:color .25s ease;user-select:none;-webkit-user-select:none;will-change:transform}
/* Narrow screens: the wire lies in the page's own margin, and a tap on the O brings the drawer out. */
@media (max-width:1099.98px){
  .bt{--w:20px}
  .bt-hit{display:none}
  .bt-node{pointer-events:none}
  .bt-node i{width:5px;right:6px}
  .bt-o{right:-10px}
  .bt-o span{font-size:20px}
  .bt-plate{width:min(68vw,250px)}
  .bt.is-open .bt-node{width:min(68vw,250px);pointer-events:auto}
  .bt-name{font-size:12.5px;right:30px}
}
/* Phones and tablets: the wire closer to the edge, the O whole on screen with its 40px target reaching inwards, and the
 * drawer as a list of full rows. The rows leave the ticks and sit on their own spacing, so the ticks hide while it is open. */
@media (max-width:899.98px),(max-width:1099.98px) and (hover:none){
  .bt{--w:16px;--row:40px;--dw:min(68vw,250px)}
  .bt.is-open{z-index:60}
  .bt-node i{right:calc(var(--w) / 2 - 2.5px)}
  .bt-o{box-sizing:border-box;right:0;justify-content:flex-end;transform-origin:calc(100% - var(--w) / 2) 50%}
  .bt-o span{width:var(--w);text-align:center}
  .bt-plate{width:var(--dw);top:calc(50% - var(--n) / 2 * var(--row) - 8px);bottom:calc(50% - var(--n) / 2 * var(--row) - 8px)}
  .bt.is-open .bt-node{width:var(--dw);height:var(--row);margin-top:calc(var(--row) / -2);top:calc(50% + (var(--i) - (var(--n) - 1) / 2) * var(--row))!important}
  .bt.is-open .bt-node i{opacity:0}
  .bt-name{right:28px}
}
/* Too short for one column of rows: two, read across the drawer */
@media (max-height:619.98px) and (max-width:899.98px),(max-height:619.98px) and (max-width:1099.98px) and (hover:none){
  .bt{--dw:min(92vw,340px);--row:min(44px,calc((100vh - 24px) / var(--half)))}
  .bt-plate{top:calc(50% - var(--half) / 2 * var(--row) - 8px);bottom:calc(50% - var(--half) / 2 * var(--row) - 8px)}
  .bt.is-open .bt-node{width:calc(var(--dw) / 2);right:calc(var(--c) * var(--dw) / 2);top:calc(50% + (var(--r) - (var(--half) - 1) / 2) * var(--row))!important}
  .bt-name{right:calc(28px - var(--c) * 14px)}
}
/* Landscape phones: the wire keeps clear of the header */
@media (max-height:500px) and (max-width:899.98px),(max-height:500px) and (max-width:1099.98px) and (hover:none){
  .bt{height:calc(100vh - 140px);margin-top:calc(70px - 50vh)}
}
@media (prefers-reduced-motion:reduce){.bt-drawn,.bt-o,.bt-o span{will-change:auto}}