/* MOTIF 001 — a gallery of live motion studies, inside the dark atelier. */
.motif-collection{margin-top:66px;padding-bottom:12px}
.collection-controls{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px;padding-top:20px;border-top:1px solid #ffffff21}
.collection-status{margin:0;color:#b7adbf;font-size:11px;line-height:1.5;letter-spacing:.12px;display:flex;align-items:center;gap:10px}
.collection-status:before{content:'';width:5px;height:5px;border-radius:50%;background:#c5b9da;box-shadow:0 0 11px #c5b9da38}
.motif-collection[data-playing=false] .collection-status:before{background:#6d6673;box-shadow:none}
.collection-toggle{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:44px;padding:10px 0 10px 18px;background:none;border:0;color:#ece4f1;font:500 11px/1.5 var(--font,Manrope,sans-serif);white-space:nowrap;cursor:pointer}
.collection-toggle:hover{color:#c5b9da}
.collection-toggle:focus-visible{outline:1px solid #c5b9da;outline-offset:6px}
.collection-toggle-icon{position:relative;width:12px;height:12px;display:block}
.collection-toggle-icon:before,.collection-toggle-icon:after{content:'';position:absolute;top:1px;height:10px;width:2px;background:currentColor}
.collection-toggle-icon:before{left:2px}.collection-toggle-icon:after{right:2px}
.motif-collection[data-playing=false] .collection-toggle-icon:before{left:3px;top:1px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor;background:none}
.motif-collection[data-playing=false] .collection-toggle-icon:after{display:none}
.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:52px}
.collection-work{margin:0;min-width:0}
.collection-stage{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1.32;background:#17161b;border:1px solid #ffffff12;transition:border-color .65s ease,box-shadow .65s ease}
.collection-stage:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;box-shadow:inset 0 1px 0 #ffffff09,inset 0 -1px 0 #00000018;transition:box-shadow .65s ease}
.collection-stage:focus-within{border-color:#c5b9da66;box-shadow:0 12px 36px -20px #07050e99}
.collection-stage:focus-within:after{box-shadow:inset 0 1px 0 #e8dcf22b,inset 0 -1px 0 #00000018}
@media(hover:hover) and (pointer:fine){.collection-stage:hover{border-color:#c5b9da66;box-shadow:0 12px 36px -20px #07050e99}.collection-stage:hover:after{box-shadow:inset 0 1px 0 #e8dcf22b,inset 0 -1px 0 #00000018}}
.collection-stage canvas{display:block;width:100%;height:100%;max-width:none;touch-action:pan-y}
.collection-work[data-tone=ivory] .collection-stage{background:#eae7e0;border-color:#d3cbd2}
.collection-work[data-tone=violet] .collection-stage{background:#211d2b}
.collection-work figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-top:22px}
.collection-work figcaption h3{font-family:var(--serif,Georgia,serif);font-size:clamp(26px,2.6vw,37px);font-weight:400;line-height:1.16;letter-spacing:-.55px;color:#f1eaf3;text-transform:none}
.collection-work figcaption p{max-width:210px;text-align:right;color:#afa6b6;font:400 11px/1.65 var(--font,Manrope,sans-serif)}
.collection-note{max-width:590px;margin:36px 0 0;color:#96909c;font:400 10px/1.8 var(--font,Manrope,sans-serif)}
.collection-companion-title{margin-top:76px;padding-top:26px;border-top:1px solid #ffffff21;color:#b7adbf;font-size:12px}
@media(min-width:1400px){.collection-grid{column-gap:50px;row-gap:62px}.collection-stage{aspect-ratio:1.38}}
@media(max-width:800px){.motif-collection{margin-top:42px}.collection-grid{column-gap:22px;row-gap:36px}.collection-controls{margin-bottom:23px}.collection-work figcaption{display:block;padding-top:18px}.collection-work figcaption p{margin-top:8px;max-width:240px;text-align:left}.collection-stage{aspect-ratio:1.12}.collection-work figcaption h3{font-size:29px}}
@media(max-width:620px){.collection-grid{grid-template-columns:minmax(0,1fr);row-gap:34px}.collection-stage{aspect-ratio:1.2}.collection-controls{align-items:flex-start;gap:12px}.collection-status{font-size:10px;max-width:145px;line-height:1.6;padding-top:11px}.collection-toggle{font-size:10px;gap:9px}.collection-work figcaption{display:flex;gap:22px}.collection-work figcaption h3{font-size:29px}.collection-work figcaption p{margin-top:0;max-width:160px;font-size:10px;text-align:right}.collection-note{font-size:9px;margin-top:29px}}
@media(prefers-reduced-motion:reduce){.collection-toggle,.collection-stage,.collection-stage:after{transition:none}}