/* Complete-site motion. Artwork remains upright and original media is retained. */
#app .site-nav.nav-r09[data-nav-policy=sticky]{position:sticky;top:calc(var(--bar,0px) + 8px);width:100%;max-width:1680px}
@media(max-width:760px){#app .site-nav.nav-r09[data-nav-policy=sticky]{top:calc(var(--bar,0px) + 4px)}}
#app .experiments-page .r24-spatial .exp-art-shift{transform:translate3d(var(--r24-float-x,0px),calc(var(--exp-scroll-y,0px) + var(--r24-float-y,0px)),0);will-change:transform}
#app .experiments-page .r24-spatial .exp-sound-player-shift{transform:translate3d(0,var(--exp-scroll-y,0px),0)}
#app .r24-spatial .exp-gallery{position:relative;isolation:isolate}
.r24-exp-edge{position:absolute;inset:auto 0 0;height:64px;pointer-events:none;z-index:3;opacity:.55}
.r24-exp-edge>i{position:absolute;inset:0;backdrop-filter:blur(var(--r24-edge-blur));-webkit-backdrop-filter:blur(var(--r24-edge-blur));mask-image:linear-gradient(to bottom,transparent var(--r24-edge-stop),#000);-webkit-mask-image:linear-gradient(to bottom,transparent var(--r24-edge-stop),#000)}
/* Fixed directly below the live navigation; real widths preserve round caps. */
#app .case-page .case-contents.r24-reading{position:fixed;inset:auto auto auto var(--r24-rail-left,50%);top:var(--r24-rail-top,calc(var(--bar,0px) + var(--public-nav-offset,88px) + 4px))!important;translate:-50% 0;width:max-content;max-width:calc(100vw - 32px);margin:0;min-height:38px;padding:0;background:transparent;border:0;box-shadow:none;pointer-events:none;overflow:visible;z-index:54;transform:translateX(var(--r24-rail-x,0px))}
/* the rail slips in a moment after the page opens (only on pages with chapters beyond the
   opening) and stays, following the navigation */
/* (overflow stays visible: the case page's chapter list scrolls sideways elsewhere, which would
   clip the chapter names that hang below the rail) */
#app .case-page .case-contents.r24-reading>div{overflow:visible;opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .2s ease,translate .25s ease,visibility 0s linear .2s,padding .5s cubic-bezier(.22,1,.36,1),gap .5s cubic-bezier(.22,1,.36,1)}
#app .case-page .case-contents.r24-reading.r24-rail-shown>div{opacity:1;visibility:visible;translate:0 0;transition:opacity .6s cubic-bezier(.22,1,.36,1) .32s,translate .75s cubic-bezier(.34,1.56,.64,1) .32s,visibility 0s linear .32s,padding .5s cubic-bezier(.22,1,.36,1),gap .5s cubic-bezier(.22,1,.36,1)}
/* at rest the bar is narrower; pointed at, it opens to its full width */
#app .case-page .case-contents.r24-reading:not(.r24-rail-open)>div{padding-inline:8px}
/* moving to a new place (the links, then the capsule), it travels on a curve: across and down on
   their own easings, with a dip on the way (site-motion-r24.js), so the path bends rather than
   sliding. Its time, delay, easings and dip are these variables: the chosen version C, elastic
   (0.75 s, it runs a little past its place and springs back, an 8 px dip). */
:root{--r24-move-time:.75s;--r24-move-delay:0s;--r24-move-x:cubic-bezier(.34,1.45,.64,1);--r24-move-y:cubic-bezier(.34,1.45,.64,1);--r24-dip:8px}
#app .case-page .case-contents.r24-reading.r24-rail-placed{transition:left var(--r24-move-time) var(--r24-move-x) var(--r24-move-delay),top var(--r24-move-time) var(--r24-move-y) var(--r24-move-delay)}
#app .case-page .case-contents.r24-reading>.case-contents-name,#app .case-page .case-contents.r24-reading>.case-reader-percent{display:none}
#app .case-page .case-contents.r24-reading>div{display:flex;align-items:center;gap:var(--r24-chapter-gap,10px);min-height:38px;padding:0 12px;border-radius:999px;background:rgb(0 0 0 / .74);backdrop-filter:blur(8px);pointer-events:auto}
#app .case-page .case-contents.r24-reading button{position:relative;display:grid;place-items:center;flex:none;width:var(--r24-segment-width,10px);min-width:0;min-height:38px;padding:0;background:transparent!important;border:0!important;border-radius:999px;overflow:visible;color:#fff!important;transition:width .55s cubic-bezier(.22,1,.36,1)}
.r24-chapter-line{display:block;width:100%;height:var(--r24-chapter-unit,10px);border-radius:999px;background:var(--r24-chapter-colour);opacity:.55;scale:1;transform:none;transition:height .4s cubic-bezier(.22,1,.36,1),opacity .25s}
[data-r24-chapter=past]>.r24-chapter-line{opacity:.85}
[data-r24-chapter=current]>.r24-chapter-line{opacity:1}
.r24-chapter-label{position:absolute;top:calc(100% + 9px);left:50%;translate:-50% -5px;opacity:0;visibility:hidden;white-space:nowrap;padding:8px 12px;border-radius:16px;background:#101010;color:#fff;font-size:11px;line-height:1.4;transition:opacity .18s,translate .3s cubic-bezier(.22,1,.36,1),visibility .18s}
#app .case-page .case-contents.r24-reading button:is(:hover,:focus-visible)>.r24-chapter-label{opacity:1;visibility:visible;translate:-50% 0}
#app .case-page .case-contents.r24-reading button:is(:hover,:focus-visible)>.r24-chapter-line{opacity:1}
/* pointing at the rail opens it: every chapter becomes an equal, wider pill on a spring, the
   lines thicken, the current one shows how far it has been read, and the pill under the
   pointer names its chapter in small type below */
#app .case-page .case-contents.r24-reading.r24-rail-open button{transition:width .6s cubic-bezier(.34,1.56,.64,1)}
#app .case-page .case-contents.r24-rail-open .r24-chapter-line{height:calc(var(--r24-chapter-unit,10px)*1.3);opacity:.8}
#app .case-page .case-contents.r24-rail-open [data-r24-chapter=current]>.r24-chapter-line{opacity:1;background:linear-gradient(90deg,var(--r24-chapter-colour) calc(var(--r24-section-progress,0)*100%),color-mix(in srgb,var(--r24-chapter-colour) 35%,transparent) 0)}
#app .case-page .case-contents.r24-rail-open button:is(:hover,:focus-visible)>.r24-chapter-line{opacity:1}
/* The pill pointed at grows to carry its chapter's name (it reads dark on light colours, white
   on dark ones); the floating name below a pill is not used. Nothing in the rail scrolls. The rail
   listens to a margin round itself, so the pointer can slip a little and still be pointing at it. */
.r24-chapter-line{position:relative;overflow:hidden}
.r24-chapter-name{position:absolute;inset:0;display:grid;place-items:center;padding:0 9px;font-size:10.5px;font-weight:600;line-height:1;letter-spacing:.01em;color:var(--r24-name-colour,#0b0b0b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s}
#app .case-page .case-contents.r24-rail-open .r24-pointed>.r24-chapter-line{height:20px}
#app .case-page .case-contents.r24-rail-open .r24-pointed .r24-chapter-name{opacity:1;transition-delay:.1s}
#app .case-page .case-contents.r24-reading .r24-chapter-label{display:none}
#app .case-page .case-contents.r24-reading>div{position:relative}
#app .case-page .case-contents.r24-reading>div::before{content:"";position:absolute;inset:-22px -36px -30px}
::view-transition-group(project-art){animation-duration:.65s;animation-timing-function:cubic-bezier(.22,1,.36,1)}

#app .case-page [id^="case-"]{scroll-margin-top:calc(var(--bar,0px) + var(--public-nav-offset,88px) + 54px)}