/* Shared alignment for the three work destinations. */
.gallery-scene .room-nav{padding-inline:4%}
.gallery-scene .room-toolbar{max-width:none}
.theater-tools,.workshop-tools{border-radius:24px}
.theater-tools .collection-tools,.workshop-tools .collection-tools{display:flex;align-items:center;gap:16px;justify-content:space-between;margin:0;padding:0;border:0}
.theater-tools .chips,.workshop-tools .chips{flex:1;min-width:0;gap:5px}
.theater-tools .chip,.workshop-tools .chip{padding:11px 15px;border:0;background:transparent;box-shadow:none;font-size:11px}
.theater-tools .chip.active,.workshop-tools .chip.active{background:var(--material-selected);color:var(--selected-ink)}
.theater-tools .compact-search,.workshop-tools .compact-search{width:38px;flex:0 0 38px;height:38px;margin:0;transition:width .3s,flex-basis .3s}
.theater-tools .compact-search input,.workshop-tools .compact-search input{width:100%;height:38px;background:transparent;border:0;padding:8px 8px 8px 34px;cursor:pointer;font-size:12px}
.theater-tools .compact-search:focus-within,.workshop-tools .compact-search:focus-within,.theater-tools .compact-search:has(input:not(:placeholder-shown)),.workshop-tools .compact-search:has(input:not(:placeholder-shown)){width:210px;flex-basis:210px}
.gallery-hit-targets{position:absolute;inset:0;pointer-events:none}
.gallery-art-target{position:absolute;pointer-events:auto;cursor:zoom-in;background:none!important;border:0;border-radius:17px;padding:0;box-shadow:none!important}
.gallery-art-target:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.gallery-scene .three-stage{left:116px;right:34%}
.gallery-scene .gallery-image-controls{left:calc((116px + 66%)/2)}
/* Media uses restrained proportions and one consistent rounded rectangle. */
.theater-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;max-width:1080px;margin:30px auto 0;align-items:center}
.theater-player,.theater-note,.theater-audio,.theater-album{border-radius:24px}
.theater-note{padding:14px 6px;border:0;background:none;backdrop-filter:none;box-shadow:none}
.theater-note h2{font-family:LumaDisplay,'Songti SC',serif;font-size:clamp(24px,2.5vw,34px);line-height:1.4;margin:12px 0 16px}
.theater-note .collection-eyebrow{font-size:10px;letter-spacing:.08em;color:var(--muted)}
.theater-credit{margin:18px 0}.theater-note .collection-action{margin-top:8px}
.theater-audio,.theater-album{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:22px;padding:22px;min-height:0;background:var(--glass-face);border:1px solid var(--glass-border);text-align:left}
.album-cover{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px}
.album-listen{min-width:0}.album-listen>span{font-size:10px;color:var(--muted)}.album-listen h2{font-size:21px;font-weight:500;line-height:1.5;margin:12px 0 18px}
.album-listen audio{width:100%;min-width:0;height:40px;margin:0}.album-listen .collection-action{font-size:12px;padding:10px 16px;white-space:nowrap}
.theater-playlist{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:36px}
.theater-playlist button{display:block;border:1px solid var(--glass-border);padding:10px;border-radius:22px;color:var(--ink);transition:background .25s,transform .25s;text-align:left}
.theater-playlist button:hover{transform:translateY(-3px)}
.theater-playlist img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:14px}
.theater-playlist button[data-media-id="archive-svc"] img{object-fit:contain;background:var(--glass-face)}
.theater-playlist button>span{display:block;padding:10px 5px 5px}.theater-playlist strong{font-size:12px;line-height:1.6}.theater-playlist small{line-height:1.6}
/* Interactive projects: a horizontal sequence with a focused central card. */
.workshop-scene{height:auto;min-height:100svh;overflow:hidden;padding-bottom:32px}
.workshop-scene .room-nav{padding-inline:4%}
.workshop-heading{margin:4px 4% 24px}.workshop-heading>p:first-child{font:10px monospace;letter-spacing:.18em;color:var(--muted)}
.workshop-heading h1{font:400 clamp(28px,3vw,42px) LumaDisplay,'Songti SC',serif;margin:12px 0}.workshop-heading>p:last-child{font-size:13px;color:var(--muted)}
.workshop-tools{margin:0 4% 8px;padding:12px 18px;border:1px solid var(--glass-border);background:var(--glass-face);box-shadow:inset 0 1px var(--material-top);backdrop-filter:blur(18px)}
.project-timeline{--project-width:clamp(310px,40vw,480px);position:relative;display:flex;gap:26px;padding:30px max(4%,calc((100% - var(--project-width))/2)) 28px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;}
.project-timeline::-webkit-scrollbar{display:none}.project-timeline:focus-visible{outline:2px solid var(--line);outline-offset:-5px;border-radius:28px}
.project-stop{flex:0 0 var(--project-width);scroll-snap-align:center;min-width:0}
.project-card{overflow:hidden;border:1px solid var(--glass-border);border-radius:28px;background:var(--glass-face);box-shadow:inset 0 1px var(--material-top),0 16px 32px var(--shadow);transform-origin:50% 50%;will-change:transform}
.project-cover{display:block;margin:12px 12px 0;border-radius:19px;overflow:hidden;aspect-ratio:16/9}
.project-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s}.project-cover:hover img{transform:scale(1.025)}
.project-copy{position:relative;padding:20px 26px 26px}.project-number{font:10px monospace;letter-spacing:.12em;color:var(--muted)}
.project-copy h2{font:400 27px/1.3 LumaDisplay,'Songti SC',serif;margin:12px 0}.project-copy p{font-size:13px;line-height:1.9;color:var(--muted);margin:0 0 18px;min-height:50px}
.project-copy .collection-action{font-size:12px;padding:10px 24px}
.project-navigation{display:flex;align-items:center;justify-content:center;gap:20px;margin:0 4%}
.project-navigation>button{width:38px;height:38px;display:grid;place-items:center;background:var(--glass-face);border:1px solid var(--glass-border);border-radius:50%;padding:0}
.project-navigation svg{width:14px;height:14px}.project-navigation>button:disabled{opacity:.3;cursor:default}
.project-stops{display:flex;gap:16px;position:relative}.project-stops:before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);z-index:-1}
.project-stops button{width:38px;height:38px;border:0;border-radius:50%;background:var(--scene-start);color:var(--muted);font:11px monospace}
.project-stops button[aria-pressed=true]{background:var(--material-selected);color:var(--ink)}
#workshop-content>.empty{margin:40px 4%;padding:44px}
@media(max-width:850px){
 .gallery-scene .gallery-image-controls{left:auto;transform:none}
 .theater-layout{grid-template-columns:1fr;gap:12px;max-width:600px}.theater-note{padding:12px 2px}
 .theater-playlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
 .theater-tools .collection-tools,.workshop-tools .collection-tools{flex-direction:row;flex-wrap:wrap;gap:8px}
 .theater-tools .chips,.workshop-tools .chips{flex:1 1 calc(100% - 50px);flex-wrap:nowrap;overflow:auto;scrollbar-width:none}.theater-tools .chip,.workshop-tools .chip{white-space:nowrap;padding:9px 11px}
 .theater-tools .compact-search,.workshop-tools .compact-search{margin-left:auto}.workshop-heading{margin-top:20px}
 .project-timeline{--project-width: min(82vw,440px);gap:12px;padding-top:20px}.project-copy{padding:18px 22px 22px}.project-copy h2{font-size:25px}
}
@media(max-width:520px){.theater-audio,.theater-album{gap:14px;padding:14px;grid-template-columns:1fr 1.2fr}.album-listen h2{font-size:17px}.album-listen audio{height:36px}.theater-tools,.workshop-tools{padding:9px 10px}.project-copy p{font-size:12px}.project-navigation{gap:12px}.project-stops{gap:8px}}
@media(prefers-reduced-motion:reduce){.project-card{transform:none!important}.project-cover img,.theater-playlist button{transition:none;transform:none!important}}
.album-cover{height:auto;max-height:280px;object-fit:contain}
/* Card buttons are cards, not the global pill-shaped action control. */
.theater-playlist button{--radius-control:22px}
.gallery-art-target{--radius-control:17px}
.workshop-heading{border:0;box-shadow:none;background:none}
@media(min-width:851px) and (max-height:800px){
 .project-timeline{--project-width:400px;padding-top:18px;padding-bottom:18px}
 .project-cover{aspect-ratio:2/1}
 .project-copy{padding:16px 22px 20px}
 .project-copy h2{font-size:25px;margin:10px 0}
 .project-copy p{min-height:0;margin-bottom:12px}
 .workshop-heading{margin-bottom:14px}
}
@media(max-width:850px){.workshop-heading{display:block;position:static;height:auto;padding:0;margin:22px 4%}.workshop-heading h1{white-space:nowrap;margin:10px 0}.workshop-heading p{margin:8px 0}}
.theater-audio .album-cover{object-fit:cover}
/* Works shell: one title, toolbar, spacing and control system across all tabs. */
.works-scene{height:auto;min-height:100svh;padding:0 0 32px;overflow:hidden}
.works-scene .room-nav{margin:0;padding:24px 4% 8px;min-height:84px}
.works-heading{margin:22px 4% 20px}
.works-heading h1{font:400 clamp(28px,3vw,38px)/1.25 LumaDisplay,'Songti SC',serif;letter-spacing:0;margin:0 0 10px;color:var(--ink)}
.works-heading p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.works-tools{position:relative;z-index:7;margin:0 4%;padding:10px 14px;border:1px solid var(--glass-border);border-radius:24px;background:var(--glass-face);box-shadow:inset 0 1px var(--material-top);backdrop-filter:blur(18px)}
.works-tools .collection-tools{display:flex;align-items:center;gap:14px;margin:0;padding:0;border:0;box-shadow:none;min-height:38px;flex-wrap:nowrap}
.works-tools .chips{display:flex;flex:1;min-width:0;gap:5px;overflow:auto;scrollbar-width:none;flex-wrap:nowrap}
.works-tools .chip{white-space:nowrap;padding:10px 14px;border:0;background:transparent;box-shadow:none;font-size:11px;min-height:38px}
.works-tools .chip.active{background:var(--material-selected);color:var(--selected-ink);box-shadow:inset 0 1px var(--material-top)}
.works-tools .compact-search{width:38px;flex:0 0 38px;height:38px;margin:0;transition:width .3s,flex-basis .3s}
.works-tools .compact-search input{width:100%;height:38px;border:0;background:transparent;padding:8px 8px 8px 34px;font-size:12px;cursor:pointer}
.works-tools .compact-search:focus-within,.works-tools .compact-search:has(input:not(:placeholder-shown)){width:210px;flex-basis:210px}
.works-tools .compact-search:focus-within input{cursor:text}
.works-scene #theater-content{margin:0 4%}
.works-scene .theater-layout{margin-top:24px}
.works-scene .project-timeline{margin-top:6px}
@media(min-width:851px){
 .works-scene.gallery-scene .room-content{position:relative;inset:auto;height:max(400px,calc(100svh - 312px));min-height:0;margin:0}
 .works-scene.gallery-scene .three-stage{top:24px;bottom:70px;min-height:0}
 .works-scene.gallery-scene .room-note{top:24px;bottom:24px}
 .works-scene.gallery-scene .scene-filmstrip{top:28px;bottom:70px}
 .works-scene.gallery-scene .gallery-image-controls{bottom:8px}
}
@media(max-width:850px){
 .works-scene .room-nav{padding:22px 4% 8px}
 .works-heading{margin:22px 4% 18px}
 .works-tools{padding:9px 10px}
 .works-tools .collection-tools{gap:8px;flex-wrap:wrap}
 .works-tools .chips{flex:1 1 calc(100% - 50px)}
 .works-tools .chip{font-size:10px;padding:9px 11px}
 .works-tools .compact-search:focus-within,.works-tools .compact-search:has(input:not(:placeholder-shown)){flex-basis:100%;width:100%}
 .works-scene.gallery-scene .room-content{padding-inline:4%}
}
