/* Three short chapters, one browsing pattern, native vertical scroll. */
.selected-video-scene{height:190svh}
.selected-video-scene .scene-stage{display:flex;flex-direction:column;gap:0;padding:110px 60px 145px 260px;background:#080808}
.selected-video-scene .scene-stage::before{display:none}
.selected-video-scene .scene-index{left:260px;right:60px;top:80px;bottom:auto;font-size:11px}
.selected-preview{position:relative;width:100%;height:100%;min-height:0;display:flex;justify-content:center;align-items:center;isolation:isolate}
.selected-screen,.selected-screen.visualizer-panel{flex:none;width:min(100%,calc((100svh - 270px)*var(--native-aspect,1.777778)));height:auto;aspect-ratio:var(--native-aspect,1.777778)!important;max-height:100%;border:0;border-radius:18px;box-shadow:none;background:#000;touch-action:pan-y pinch-zoom;transform:none}
.selected-screen.is-portrait{border-radius:7px}
.selected-screen>.scene-video{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.selected-preview .projection-light{inset:-10%;width:120%;height:120%;z-index:-1;opacity:.45}
.selected-caption{position:absolute;bottom:125px;left:260px;right:60px;margin:0;text-align:center;font:11px/1.4 monospace;color:#bbb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selected-browser{position:absolute;bottom:48px;left:260px;right:60px;display:flex;justify-content:center;align-items:center;gap:12px}
.selected-browser .media-thumbnails{display:flex;flex:0 1 auto;gap:8px;width:auto;min-width:0;overflow:auto;padding:5px}
.selected-browser .video-thumbnail{width:76px;height:52px;flex:none;border-radius:5px}
.selected-browser>button{border:0;background:transparent;color:#bbb;min-width:44px;min-height:44px;font-size:21px}
.selected-step{position:absolute;bottom:21px;left:260px;right:60px;margin:0;text-align:center;color:#777;font:9px/1.5 monospace}
.selected-video-scene .scene-stage>.object-caption{display:none}
.modal-open .auto-browse{font-size:9px}
.project-tile img{object-fit:contain;background:#101010}
.gallery-dialog.is-detail .cover-controls{display:flex!important;justify-content:space-between;pointer-events:auto}
.gallery-dialog.is-art-expanded .cover-controls{bottom:118px;left:24px;right:24px;z-index:10}
.gallery-dialog.is-art-expanded .cover-controls button{min-width:44px;min-height:44px;padding:4px 10px;background:transparent}
.gallery-dialog.is-art-expanded .cover-image-frame{inset:76px 48px 170px;height:calc(100dvh - 246px)}
.selection-caption{bottom:104px}
@media(min-width:1000px){.selected-preview{max-width:1100px}.selected-video-scene .scene-stage{padding-left:260px;padding-right:60px}.selected-video-scene .scene-index{left:260px;right:60px}}
@media(max-width:650px){
 .selected-video-scene{height:175svh}
 .selected-video-scene .scene-stage{padding:calc(158px + env(safe-area-inset-top,0px)) 16px 152px}
 .selected-video-scene .scene-index{top:calc(116px + env(safe-area-inset-top,0px));left:16px;right:16px;font-size:9px;gap:8px}
 .selected-video-scene .scene-index button{font-size:9px;padding:0;min-height:44px}
 .selected-screen,.selected-screen.visualizer-panel{width:min(100%,calc((100svh - 310px - env(safe-area-inset-top,0px))*var(--native-aspect,1.777778)));height:auto;max-height:100%;border-radius:16px}
 .selected-screen.is-portrait{height:auto;border-radius:7px}
 .selected-caption{bottom:129px;left:16px;right:16px;font-size:10px}
 .selected-browser{left:16px;right:16px;bottom:52px;gap:5px}
 .selected-browser .video-thumbnail{width:68px;height:49px}
 .selected-step{bottom:28px;left:16px;right:16px;font-size:8px}
 .selected-video-scene~.scroll-cue{display:none}
 .gallery-dialog.is-art-expanded .cover-image-frame{inset:72px 16px 164px;height:calc(100dvh - 236px)}
 .gallery-dialog.is-art-expanded .cover-controls{bottom:113px;left:8px;right:8px}
 .auto-browse{font-size:8px}
}
@media(max-height:520px){
 .selected-video-scene .scene-stage{padding:84px 24px 84px}
 .selected-video-scene .scene-index{top:40px;font-size:9px}
 .selected-screen,.selected-screen.visualizer-panel{width:min(100%,calc((100svh - 168px)*var(--native-aspect,1.777778)))}
 .selected-caption{bottom:62px;font-size:9px}.selected-browser{bottom:12px}.selected-browser .video-thumbnail{width:48px;height:32px}.selected-step{display:none}
}

/* Category names carry hierarchy; opacity still indicates the current section. */
.rail-link{font-weight:700;letter-spacing:-.015em}
.selected-video-scene .scene-index>span{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:15px;letter-spacing:.01em}
.event-reel-heading span:first-child{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:21px}
.project-dialog .gallery-heading h2,.gallery-dialog .gallery-heading h2{font-weight:700}
.selected-browser .media-thumbnails{flex:0 1 auto;max-width:540px;scrollbar-width:none}
.selected-browser .media-thumbnails::-webkit-scrollbar{display:none}

/* The complete Event reel: sideways browsing, ordinary vertical page scroll. */
.selected-video-scene.event-scene{height:100svh}
.event-scene.selected-video-scene .scene-stage{padding:100px 0 60px}
.event-scene .event-outline{--event-height:min(56svh,calc(100svh - 280px));width:calc(100% - 240px);margin-left:240px;padding:22px 24px 14px;border-radius:28px 0 0 28px;background:#030303;border:1px solid #262626}
.event-scene .event-track{gap:28px;padding:0 1px 4px}
.event-scene .event-card{width:calc(var(--event-height)*.5625)}
.event-scene .event-screen{aspect-ratio:9/16;touch-action:pan-x pan-y pinch-zoom;border-radius:12px}
.event-scene .event-viewport{width:100%;max-width:100%;min-width:0;touch-action:pan-x pan-y pinch-zoom;scroll-snap-type:x proximity}
.event-scene .event-card.is-previewing .event-card-caption{color:#eee}
.event-scene .event-card.is-previewing .event-screen{box-shadow:0 0 1px #ffffff88,0 0 25px #afc5f018}
.event-scene .event-reel-heading{padding-bottom:16px}
.event-scene .event-reel-footer{margin-top:8px;min-height:44px}
.event-scene .event-reel-footer #event-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px}
.event-scene .event-arrows{flex:none}
.event-instruction{position:relative;margin:5px 0 0;font:9px monospace;color:#777;text-align:center}

/* Grid selection remains visible when arriving and when returning from detail. */
.cover-tile.is-selected{outline:1px solid #ddd;outline-offset:6px}
.cover-tile.is-selected .cover-caption{color:#fff}
.gallery-dialog.is-detail:not(.is-art-expanded) .cover-presentation{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);grid-template-rows:1fr;gap:clamp(24px,5vw,80px)}
.gallery-dialog.is-detail:not(.is-art-expanded) .detail-package-area{grid-column:1;grid-row:1;display:flex;justify-content:center;max-height:none;padding:0 7vw 0 0}
.gallery-dialog.is-detail:not(.is-art-expanded) .detail-package{width:min(20vw,34svh);max-width:100%}
.gallery-dialog.is-detail:not(.is-art-expanded) .cover-image-frame{grid-column:2;grid-row:1;width:100%;height:100%;cursor:zoom-in}
.gallery-dialog.is-detail .cover-controls{width:auto;bottom:105px}
.gallery-dialog.is-art-expanded .cover-controls{bottom:118px}
@media(max-width:650px){
 .rail-link{font-weight:700}
 .selected-video-scene .scene-index>span{font-size:12px}
 .event-scene.selected-video-scene .scene-stage{padding:calc(150px + env(safe-area-inset-top,0px)) 0 38px}
 .event-scene .event-outline{--event-height:min(54svh,calc(100svh - 350px - env(safe-area-inset-top,0px)));width:calc(100% - 16px);margin-left:16px;padding:16px 14px 12px;border-radius:22px 0 0 22px}
 .event-scene .event-card{width:calc(var(--event-height)*.5625)}
 .event-scene .event-reel-heading span:first-child{font-size:17px}
 .event-scene .event-reel-heading span:last-child{font-size:8px}
 .event-scene .event-track{gap:20px}
 .event-scene .event-card-caption{font-size:9px;gap:8px;line-height:1.4}
 .event-scene .event-reel-footer #event-title{font-size:9px}
 .event-instruction{font-size:8px}
 .gallery-dialog.is-detail:not(.is-art-expanded) .cover-detail{top:74px;bottom:140px;gap:8px}
 .gallery-dialog.is-detail:not(.is-art-expanded) .cover-presentation{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,.32fr);gap:14px}
 .gallery-dialog.is-detail:not(.is-art-expanded) .cover-image-frame{grid-row:1;grid-column:1}
 .gallery-dialog.is-detail:not(.is-art-expanded) .detail-package-area{grid-row:2;grid-column:1;padding:0 12vw 0 0;max-height:none}
 .gallery-dialog.is-detail:not(.is-art-expanded) .detail-package{width:min(29vw,17svh)}
 .gallery-dialog.is-detail:not(.is-art-expanded) .cover-detail-caption{text-align:center}
 .gallery-dialog.is-detail .cover-controls{bottom:102px;left:8px;right:8px}
 .gallery-dialog.is-art-expanded .cover-controls{bottom:113px}
}
@media(max-height:520px){
 .event-scene.selected-video-scene .scene-stage{padding:80px 0 10px}
 .event-scene .event-outline{--event-height:max(70px,calc(100svh - 215px));padding:10px 14px}
 .event-scene .event-reel-heading{padding-bottom:8px}
 .event-scene .event-reel-heading span:first-child{font-size:14px}
 .event-instruction{display:none}
 .event-scene .event-card-caption{font-size:8px;margin-top:5px}
 .gallery-dialog.is-detail:not(.is-art-expanded) .detail-package-area{display:flex}
}

/* Contact stays in normal document flow so every link remains reachable on small screens. */
.contact-scene{height:auto;min-height:100svh}
.scroll-ready .contact-scene .scene-stage{position:relative;top:auto;height:auto;min-height:100svh;overflow:visible}
.contact-details a{position:relative;z-index:2;pointer-events:auto;touch-action:manipulation}
@media(max-width:650px){
 .contact-scene .scene-stage{padding:calc(140px + env(safe-area-inset-top,0px)) 20px calc(40px + env(safe-area-inset-bottom,0px))}
 .contact-scene .contact-layout{width:100%;margin:0;padding:0}
 .mobile-contact{z-index:2;pointer-events:auto;touch-action:manipulation}
}

.project-preview{position:relative;background:#080808;border-radius:5px;overflow:hidden}
.project-preview img{height:240px;object-fit:contain;opacity:1!important}
.grid-preview-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:0}
.project-tile.is-playing .grid-preview-video{opacity:1}
.project-tile.is-playing .project-preview img{opacity:0!important}
@media(max-width:650px){.project-preview img{height:190px}}
@media(max-height:520px){.project-preview img{height:160px}}

/* All video categories share a framed, single-height chapter and native page scroll. */
.visualizer-outline .visualizer-layout{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:24px;height:clamp(180px,50svh,560px);min-height:0}
.visualizer-layout .selected-preview{min-width:0;min-height:0}
.visualizer-layout .selected-screen{width:min(100%,calc(50svh*var(--native-aspect,1.777778)));max-height:100%;border-radius:12px}
.visualizer-sidebar{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px;scrollbar-width:thin;scrollbar-color:#333 transparent;overscroll-behavior-y:auto;touch-action:pan-y pinch-zoom}
.visualizer-sidebar .video-thumbnail{width:100%;height:66px;flex:none;border-radius:5px}
.visualizer-sidebar img{object-fit:contain}
.event-arrows button{min-width:44px;min-height:44px}
.event-scene .loop-selection{position:static!important;opacity:1;justify-content:initial!important}
@media(max-width:650px){
 .visualizer-outline .visualizer-layout{grid-template-columns:minmax(0,1fr) 64px;gap:12px;height:clamp(150px,43svh,420px)}
 .visualizer-layout .selected-screen{width:min(100%,calc(43svh*var(--native-aspect,1.777778)))}
 .visualizer-sidebar{gap:9px;padding:3px}.visualizer-sidebar .video-thumbnail{height:47px}
 .visualizer-outline .event-reel-footer>span{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-height:520px){.visualizer-outline .visualizer-layout{height:max(80px,calc(100svh - 230px))}}

/* Keep cover arrows reachable in both detail and fullscreen. */
.gallery-dialog.is-art-expanded .cover-controls{opacity:1!important;pointer-events:auto!important}
.cover-presentation,.cover-image-frame,.detail-package{touch-action:pinch-zoom}
.visualizer-layout .selected-screen,.visualizer-layout .screen-trigger{touch-action:pan-y pinch-zoom}
.swipe-feedback{transition:translate .14s ease-out}
.swipe-feedback.is-dragging{transition:none}
@media(prefers-reduced-motion:reduce){.swipe-feedback{transition:none}}

/* The extracted record and sleeve share one continuous mobile gesture target. */
.cover-hover-zone{z-index:2;pointer-events:auto;touch-action:pan-y pinch-zoom;cursor:pointer}
.cover-object,.cover-object .vinyl-button{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.cover-object img,.visualizer-layout img{-webkit-user-drag:none}
.visualizer-scene .scene-stage{touch-action:pan-y pinch-zoom}
.watch-seek{touch-action:none;pointer-events:auto}
.category-description{margin:0 0 30px;color:#e3e3df;font:15px/1.55 Arial,Helvetica,sans-serif;max-width:620px;text-wrap:pretty}
.instagram-profile-card{width:100%;max-width:540px;border:1px solid #303030;border-radius:16px;background:#101010;overflow:hidden;margin:8px 0}
.contact-details .instagram-profile-heading{display:flex;align-items:center;gap:14px;padding:20px;min-height:88px;text-decoration:none;color:#eee}
.instagram-profile-avatar{width:54px;height:54px;border:1px solid #444;border-radius:50%;display:grid;place-items:center;font-size:13px;letter-spacing:-1px;flex:none}
.instagram-profile-heading strong,.instagram-profile-heading small{display:block;line-height:1.5}
.instagram-profile-heading strong{font-size:18px;font-weight:700}
.instagram-profile-heading small{font-size:13px;color:#aaa}
.instagram-profile-arrow{margin-left:auto;font-size:22px}
.instagram-profile-preview{position:relative;min-height:170px;background:#151515}
.instagram-profile-preview .instagram-media{margin:0!important;width:100%!important;min-width:0!important;max-width:none!important;border:0!important;box-shadow:none!important}
.instagram-profile-preview blockquote{padding:48px 20px;text-align:center;color:#aaa;font-size:13px}
.instagram-profile-preview iframe{display:block;width:100%!important;max-width:100%!important}
.contact-details .instagram-profile-hitarea{position:absolute;inset:0;z-index:3;display:block;touch-action:pan-y pinch-zoom}
.contact-details .instagram-profile-link{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;min-height:52px;font:11px/1.5 monospace;letter-spacing:.06em;color:#ddd;text-decoration:none;border-top:1px solid #303030}
.instagram-profile-heading:hover,.instagram-profile-link:hover{background:#191919}
@media(max-width:650px){.category-description{font-size:13px;margin:0 0 24px;max-width:95%}.event-scene .event-outline{--event-height:min(50svh,calc(100svh - 390px - env(safe-area-inset-top,0px)))}.instagram-profile-card{max-width:100%}}
@media(max-height:650px){.category-description{font-size:11px;margin:0 0 16px}.event-scene .event-outline{--event-height:max(70px,calc(100svh - 250px))}}

/* Contact reads from the direction statement down to email and the profile. */
.contact-section{grid-template-columns:minmax(0,1fr);gap:36px;max-width:760px;margin:0 auto}
.contact-details{width:100%;justify-content:flex-start}
.contact-section .contact-intro h2{max-width:760px}
@media(max-width:650px){.contact-section{gap:28px}}