/* Carousels share the content column; fades indicate only hidden content. */
main :is(.stories__track,.club-carousel,.library-track,.showcase-track){
 --carousel-fade:clamp(24px,4vw,56px);
 --fade-start:0px;
 --fade-end:var(--carousel-fade);
 min-width:0;
 -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent 100%);
 mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent 100%);
}
main [data-scroll-start="true"]{--fade-start:var(--carousel-fade)}
main [data-scroll-end="false"]{--fade-end:0px}
main .stories__track{width:100%;padding-right:0;scroll-padding-right:0}
.stories__slider{display:grid;position:relative;min-width:0}
.stories__track,.stories__nav{grid-area:1/1}
.stories__nav{position:absolute;top:var(--stories-control-y,50%);left:0;right:0;transform:translateY(-50%);justify-content:space-between;z-index:2;pointer-events:none}
.stories__nav .round-btn{pointer-events:auto}
.stories__nav .round-btn:disabled{visibility:hidden}
main :is(.club-carousel,.library-track,.showcase-track):focus-visible{outline:3px solid #236de0;outline-offset:3px}
@media(min-width:1024px){
 main :is(.club-carousel,.library-track,.showcase-track){left:140px!important;width:1120px!important;max-width:1120px}
 .club-arrow{top:var(--club-arrow-top,50%)!important}
 .club-next{left:1196px!important}
 .club-prev{left:140px!important}
}
@media(max-width:1023px){
 main :is(.club-carousel,.library-track,.showcase-track){width:100%!important;max-width:100%}
}
/* Disable masks in forced colours so keyboard targets remain visible. */
@media(forced-colors:active){main :is(.stories__track,.club-carousel,.library-track,.showcase-track){mask-image:none;-webkit-mask-image:none}}
.stories__nav .round-btn{position:static;left:auto;right:auto}
.carousel-arrow:disabled{visibility:hidden}
.library-prev{display:grid;place-items:center;background:#fff;border-radius:50%;box-shadow:0 20px 30px #3b3b3b33;z-index:2}
.library-prev svg{width:24px;height:24px}
@media(min-width:1024px){
 [data-library-next]{left:1196px!important}
 .library-prev{left:140px!important}
 .showcase-carousel>[data-fig-node="310-93"]{left:140px!important;width:1120px!important}
 .showcase-carousel [data-showcase-step]{transform:none!important;transform-origin:center!important}
 .showcase-carousel [data-showcase-step="-1"]{left:0!important;top:0!important}
 .showcase-carousel [data-showcase-step="-1"]>div{transform:rotate(180deg)}
 .showcase-carousel [data-showcase-step="1"]{left:auto!important;right:0!important;top:0!important}
}
@media(max-width:1023px){main .library-carousel>.library-prev{left:0!important;right:auto!important}}
/* Server-rendered library rows already sit inside the content column. */
.site-rendered main .library-track{width:100%!important;max-width:100%;left:auto!important}
.site-rendered main .library-carousel>.carousel-arrow{left:auto!important;right:0!important}
.site-rendered main .library-carousel>.library-prev{left:0!important;right:auto!important}
.site-rendered main .library-expanded{flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none}
.site-rendered .library-carousel:has(.library-expanded)>.carousel-arrow{display:none}
/* Expanded library (LEND-40): the grid fills the column like the courses grid below; same rules serve ?library=all and the in-place expansion. */
.site-rendered .library-expanded .library-card{flex-basis:100%}
@media(min-width:640px) and (max-width:1023px){.site-rendered .library-expanded .library-card{flex-basis:calc((100% - 20px)/2)}}
@media(min-width:1024px){.site-rendered .library-expanded .library-card{flex-basis:calc((100% - 40px)/3)}}