/* Work categories share a spatial gallery, with the film index as a quiet alternative. */
.work-exhibition { position:relative; }
.work-atmosphere, .work-panel-reflection, .work-toolbar { display:none; }
.page-index .view-controls { gap:19px; align-items:center; }
.page-index .view-controls button { width:auto; height:36px; padding:0; font:500 10px/1.2 var(--ui); letter-spacing:.035em; white-space:nowrap; }

.page-index:has(.work-ready:not([hidden])) { height:100svh; overflow:hidden; }
.page-index .page-content:has(.work-ready:not([hidden])) {
  height:calc(100svh - var(--work-header, 112px)); min-height:0;
}
.page-content:has(.work-ready:not([hidden])) > main { display:flex; flex-direction:column; height:100%; min-height:0; }
.page-content:has(.work-ready:not([hidden])) > .site-footer { display:none; }
.page-index:has(.work-ready:not([hidden])) .index-intro { flex:none; padding-top:7px; padding-bottom:24px; }
.page-index:has(.work-ready:not([hidden])) .index-intro h1 { font-size:clamp(34px,3.8vw,64px); line-height:1; letter-spacing:-.045em; text-wrap:initial; }
.page-index:has(.work-ready:not([hidden])) .index-collection { display:flex; flex-direction:column; flex:1; min-height:0; padding-bottom:0; }
.page-index:has(.work-ready:not([hidden])) .collection-controls { flex:none; margin-bottom:0; padding-bottom:14px; gap:20px; flex-wrap:nowrap; }
.page-index:has(.work-ready:not([hidden])) .filters { flex:1 1 auto; min-width:0; gap:20px; }
.page-index:has(.work-ready:not([hidden])) .filters button { min-height:33px; font-size:10px; }
.page-index:has(.work-ready:not([hidden])) .film-search { flex:0 1 102px; margin-left:auto; }
.page-index:has(.work-ready:not([hidden])) .film-search input { min-height:33px; font-size:10px; }
.page-index:has(.work-ready:not([hidden])) .collection-empty:not([hidden]) { display:grid; place-items:center; flex:1; padding:35px 0; font-size:28px; }

.work-ready {
  display:flex; flex-direction:column; flex:1; min-height:0; isolation:isolate;
  margin-inline:calc(var(--inset) * -1); overflow:hidden;
}
.work-ready.is-empty { display:none; }
.work-ready .work-atmosphere { display:block; position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.work-atmosphere-layer { position:absolute; inset:-90px; opacity:0; }
.work-atmosphere-layer.is-current { opacity:1; }
.work-atmosphere-layer > img, .work-atmosphere-layer > canvas {
  position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
  transform:scaleX(-1) scale(1.15); filter:blur(65px) saturate(.6) brightness(.53); opacity:.47;
}
.work-atmosphere-layer > canvas { opacity:0; }
.work-atmosphere-layer.has-motion > canvas { opacity:.47; }
.work-atmosphere-layer.has-motion > img { opacity:0; }
.work-atmosphere:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#080909bb,transparent 35%,#0809091a 65%,#080909 100%); }
.work-ready .work-stage {
  position:relative; flex:1; min-height:0; width:100%;
  perspective:var(--work-perspective, 1400px); perspective-origin:50% 45%;
  touch-action:pan-y; cursor:grab; outline-offset:-8px; user-select:none;
}
.work-ready .work-stage.is-dragging { cursor:grabbing; }
.work-camera, .work-ready .work-scene { position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none; }
.work-ready .work-scene { display:block; margin:0; }
.work-ready .work-panel {
  position:absolute; left:50%; top:48%; width:64%; aspect-ratio:var(--work-aspect,2.16);
  backface-visibility:hidden; transform-origin:50% 50%; pointer-events:auto;
}
.work-ready .work-panel .film-link { height:100%; cursor:pointer; }
.work-ready .film-card-media { height:100%; }
.work-ready .work-panel .film-image {
  aspect-ratio:var(--work-aspect,2.16); width:100%; height:100%; max-height:none;
  background:#060707; border:1px solid #c8cfc31a; box-shadow:0 20px 70px #0006;
}
.work-ready .work-panel img { -webkit-user-drag:none; user-select:none; }
.work-ready .work-panel:not(.is-active) .film-image { border-color:#c8cfc330; }
.work-ready .work-panel .film-caption { display:none; }
.work-ready .work-panel-reflection {
  display:block; position:absolute; left:0; top:calc(100% + 14px); width:100%; height:52%;
  object-fit:cover; object-position:50% 100%; transform:scaleY(-1);
  opacity:.11; filter:blur(3px); mask-image:linear-gradient(0deg,#0009,transparent 85%); pointer-events:none;
}
.work-ready .work-toolbar {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:35px;
  padding:15px var(--inset) 28px; position:relative; z-index:3;
}
.work-current-film { min-width:0; display:flex; flex-direction:column; gap:12px; width:fit-content; max-width:100%; }
.work-artist { font:500 11px/1.4 var(--ui); letter-spacing:.03em; color:#bfc6be; }
.work-current-film h2 { font-size:clamp(30px,3.7vw,65px); line-height:1.03; letter-spacing:-.045em; text-wrap:balance; max-width:32ch; }
.work-current-film:hover h2 { color:#fff; }
.work-controls { display:flex; gap:14px; align-items:center; padding-bottom:1px; }
.work-controls > button { min-width:38px; min-height:42px; font:400 21px/1 var(--sans); }
.work-controls > button:disabled { opacity:.2; cursor:default; }
.work-controls > button:not(:disabled):hover { color:#fff; }
.work-count { display:flex; gap:12px; align-items:center; font:500 11px/1 var(--ui); letter-spacing:.03em; color:#929b93; font-variant-numeric:tabular-nums; }
.work-count [data-work-current] { color:var(--paper); }
.work-controls .work-motion-control { margin-left:8px; min-width:30px; }
.work-motion-control > span:not(.motion-icon) { display:none; }
.work-motion-control .motion-icon { font-size:13px; }

@media (min-width:761px) and (max-width:1100px) {
  .page-index:has(.work-ready:not([hidden])) .collection-controls { flex-wrap:wrap; gap:5px 20px; padding-bottom:10px; }
  .page-index:has(.work-ready:not([hidden])) .filters { flex-basis:100%; }
  .page-index:has(.work-ready:not([hidden])) .film-search { margin-left:0; flex-basis:140px; }
  .page-index:has(.work-ready:not([hidden])) .view-controls { margin-left:auto; }
  .work-controls { gap:7px; }
}
@media (max-width:760px) {
  .page-index:has(.work-ready:not([hidden])) .site-header { padding-top:21px; padding-bottom:22px; }
  .page-index:has(.work-ready:not([hidden])) .index-intro { padding-top:7px; padding-bottom:20px; }
  .page-index:has(.work-ready:not([hidden])) .index-intro h1,
  .page-index:has(.work-ready:not([hidden])):has([data-mode=fashion]) .index-intro h1 { font-size:clamp(30px,8.3vw,54px); line-height:1.03; letter-spacing:-.045em; }
  .page-index:has(.work-ready:not([hidden])) .collection-controls { flex-wrap:wrap; gap:5px 16px; padding-bottom:8px; }
  .page-index:has(.work-ready:not([hidden])) .filters { flex:1 1 100%; flex-wrap:nowrap; gap:20px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
  .page-index:has(.work-ready:not([hidden])) .filters::-webkit-scrollbar { display:none; }
  .page-index:has(.work-ready:not([hidden])) .filters button { flex:none; min-height:32px; font-size:9px; letter-spacing:.015em; }
  .page-index:has(.work-ready:not([hidden])) .film-search { flex:1 1 80px; max-width:145px; margin-left:0; }
  .page-index:has(.work-ready:not([hidden])) .film-search input { min-height:32px; font-size:9px; }
  .page-index .view-controls { gap:20px; margin-left:auto; }
  .page-index .view-controls button { font-size:9px; min-height:32px; height:32px; }
  .work-ready .work-toolbar { grid-template-columns:minmax(0,1fr); gap:17px; padding-top:8px; padding-bottom:max(17px,env(safe-area-inset-bottom)); }
  .work-current-film { gap:9px; }
  .work-artist { font-size:10px; letter-spacing:.02em; }
  .work-current-film h2 { font-size:clamp(28px,8vw,45px); line-height:1.02; letter-spacing:-.045em; max-width:30ch; }
  .work-controls { gap:10px; justify-content:flex-end; min-height:36px; }
  .work-controls > button { min-height:36px; min-width:36px; font-size:20px; }
  .work-count { margin-right:auto; order:-1; font-size:10px; gap:10px; }
  .work-controls .work-motion-control { margin-left:6px; min-width:24px; }
  .work-ready .work-panel-reflection { top:calc(100% + 10px); opacity:.1; }
  .work-atmosphere-layer > img, .work-atmosphere-layer > canvas { filter:blur(42px) saturate(.6) brightness(.5); }
}
@media (max-width:380px) {
  .page-index .view-controls { gap:14px; }
  .work-current-film h2 { font-size:27px; }
  .work-ready .work-toolbar { gap:13px; }
  .work-controls { gap:8px; }
}
@media (max-height:650px) and (min-width:761px) {
  .page-index:has(.work-ready:not([hidden])) .site-header { padding-block:17px; }
  .page-index:has(.work-ready:not([hidden])) .brand-name { font-size:28px; }
  .page-index:has(.work-ready:not([hidden])) .brand-roles { font-size:10px; margin-top:9px; }
  .page-index:has(.work-ready:not([hidden])) .index-intro { padding-top:3px; padding-bottom:11px; }
  .page-index:has(.work-ready:not([hidden])) .index-intro h1 { font-size:33px; }
  .work-current-film h2 { font-size:32px; }
  .work-ready .work-toolbar { padding-top:8px; padding-bottom:17px; }
}
@media (prefers-reduced-motion:reduce) {
  .work-motion-control { display:none; }
  .work-ready .work-panel { will-change:auto; }
}