/* Original desktop interlude; compact composition is defined below. */
.collection-story{display:none}
@media(min-width:801px){
 /* Preserve the original 185vh reveal, then hold the finished composition. */
 .collection-story[data-collection-ready]{--collection-reading-hold:85vh;display:block;position:relative;height:calc(185vh + var(--collection-reading-hold));margin:0;isolation:isolate}
 .collection-stage{position:sticky;top:76px;height:calc(100vh - 76px);display:grid;place-items:center;overflow:clip}
 .collection-board{position:relative;width:min(1480px,94vw);height:100%;max-height:960px}
 /* User-requested 20px trial: keep Courier Prime Regular and 1.2 line height. */
 #collection-title{position:absolute;left:50%;top:calc(50% - 32px);z-index:2;width:min(450px,52vw);margin:0;text-align:center;text-wrap:balance;font:400 20px/28px 'Courier Prime',monospace;letter-spacing:0;color:#C4BCB8;transform:translate(-50%,-50%) rotate(-2deg)}
 .collection-word{position:relative;display:inline-block;white-space:nowrap}
 .collection-word::after{content:attr(data-word);position:absolute;inset:0;color:#3E2723;clip-path:inset(0 calc(100% - var(--ink,0%)) 0 0);pointer-events:none}
 .collection-fragments{position:absolute;inset:0;pointer-events:none}
 .collection-fragment{position:absolute;left:50%;top:50%;width:min(var(--fragment-size),15vw,23vh);aspect-ratio:1;opacity:0;transform-origin:0 0;will-change:transform,opacity}
 .collection-float{position:absolute;left:-50%;top:-50%;width:100%;height:100%;animation:collection-breathe var(--float-duration) ease-in-out var(--float-delay) infinite;animation-play-state:paused}
 .collection-art{position:absolute;inset:0;overflow:hidden}
 .collection-art img{position:absolute;left:0;top:0;display:block;width:100%;height:auto;max-width:none}
 .collection-story[data-active=true] .collection-float{animation-play-state:running}
 .collection-story[data-collection-editor]{height:calc(100vh - 76px)}
 .collection-story[data-collection-editor] .collection-stage{position:relative;top:0}
}
@keyframes collection-breathe{0%,100%{transform:translateY(calc(var(--float-height) * -1))}50%{transform:translateY(var(--float-height))}}
/* Restore the complete overview on phones/tablets without desktop scroll locks. */
@media(max-width:1199px){
 #product>.collection-story{display:block;position:relative;height:auto;margin:96px auto 0;isolation:isolate;scroll-margin-top:88px}
 .collection-stage{position:relative;top:0;height:auto;display:grid;place-items:center;overflow:clip}
 .collection-board{position:relative;display:grid;place-items:center;width:min(720px,calc(100% - 32px));height:auto;min-height:680px;max-height:none;padding:240px 0}
 #collection-title{position:relative;left:auto;top:auto;z-index:2;width:min(440px,calc(100% - 48px));margin:0;text-align:center;text-wrap:balance;font:400 20px/28px 'Courier Prime',monospace;letter-spacing:0;color:#C4BCB8;transform:rotate(-2deg)}
 .collection-word{position:relative;display:inline-block;white-space:nowrap}
 .collection-word::after{content:attr(data-word);position:absolute;inset:0;color:#3E2723;clip-path:inset(0 calc(100% - var(--ink,100%)) 0 0);pointer-events:none}
 .collection-fragments{position:absolute;inset:0;pointer-events:none}
 .collection-fragment{position:absolute;left:50%;top:50%;width:var(--compact-fragment-width,56px);aspect-ratio:1;transform-origin:0 0;will-change:transform,opacity}
 .collection-float{position:absolute;left:-50%;top:-50%;width:100%;height:100%;animation:collection-breathe var(--float-duration) ease-in-out var(--float-delay) infinite;animation-play-state:paused}
 .collection-art{position:absolute;inset:0;overflow:hidden}
 .collection-art img{position:absolute;left:0;top:0;display:block;width:100%;height:auto;max-width:none}
 .collection-story[data-active=true] .collection-float{animation-play-state:running}
}
@media(max-width:767px){
 .collection-fragment:not([data-phone-slot]){display:none}
 .collection-board{min-height:620px;padding-block:220px}
 #collection-title{font-size:18px;line-height:25px}
}