/* A compact hand of films. Geometry is measured once by the gallery controller. */
#work-grid.work-deck{
  position:relative;
  display:block;
  width:100%;
  height:420px;
  margin:0;
  padding:0;
  isolation:isolate;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
}
#work-grid.work-deck:before{
  content:"";
  position:absolute;
  width:70%;
  height:1px;
  left:15%;
  bottom:23px;
  background:linear-gradient(90deg,transparent,#d1c5ef2e,transparent);
  pointer-events:none;
}
#work-grid.work-deck .project-card,
#work-grid.work-deck .project-card:nth-child(even){
  position:absolute;
  top:50%;
  left:50%;
  width:min(270px,32vw);
  min-width:0;
  margin:0;
  padding:0;
  opacity:1;
  animation:none;
  translate:none;
  transform:translate(-50%,-50%) translate(var(--fan-x,0px),var(--fan-y,0px)) rotate(var(--fan-angle,0deg)) scale(var(--fan-scale,1));
  transform-origin:50% 50%;
  z-index:var(--fan-z,1);
  transition:transform .44s cubic-bezier(.22,.76,.25,1);
}
#work-grid.work-deck .card-open,
#work-grid.work-deck .card-open:hover{
  display:block;
  width:100%;
  padding:9px;
  border:1px solid #d9d2ec30;
  border-radius:12px;
  background:linear-gradient(145deg,#292b34,#191b22 70%);
  box-shadow:0 10px 22px #0006,inset 0 1px 0 #ffffff0a;
  transform:none;
  transition:border-color .22s,box-shadow .22s;
  text-align:left;
  overflow:hidden;
}
#work-grid.work-deck .is-selected .card-open{
  border-color:#d4c4f7a6;
  box-shadow:0 16px 28px #0007,0 0 0 1px #cab8f326,inset 0 1px 0 #fff2;
}
#work-grid.work-deck .card-open:focus-visible{
  outline:2px solid #e3d3ff;
  outline-offset:5px;
}
#work-grid.work-deck .card-image{
  aspect-ratio:4/3;
  width:100%;
  border-radius:6px;
  background:#101116;
}
#work-grid.work-deck .card-image>img:not(.card-backdrop),
#work-grid.work-deck .card-open:hover .card-image>img:not(.card-backdrop){
  position:relative;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:none;
  transition:none;
}
#work-grid.work-deck .card-image .card-backdrop{
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:none;
  transform:none;
  opacity:.55;
}
#work-grid.work-deck .card-image:after{
  background:linear-gradient(transparent 62%,#08090bbf);
}
#work-grid.work-deck .card-play,
#work-grid.work-deck .card-open:hover .card-play{
  width:42px;
  height:42px;
  background:#d0c4ead9;
  border:1px solid #f5efff59;
  box-shadow:0 3px 12px #0005;
}
#work-grid.work-deck .is-selected .card-play{
  opacity:1;
  color:#21192d;
  background:#e0d4f5;
  box-shadow:0 3px 12px #0005;
}
#work-grid.work-deck .project-card:not(.is-selected) .card-play{opacity:0}
#work-grid.work-deck .card-corner{
  top:9px;
  left:9px;
  font-size:7px;
  line-height:1.3;
}
#work-grid.work-deck .card-bottom{
  bottom:9px;
  left:9px;
  right:9px;
  font-size:8px;
  line-height:1.3;
}
#work-grid.work-deck .card-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:13px 4px 4px;
  min-width:0;
}
#work-grid.work-deck .card-info>div:first-child{min-width:0}
#work-grid.work-deck .card-info h3{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:17px;
  line-height:1.35;
  letter-spacing:-.035em;
  font-weight:800;
}
#work-grid.work-deck .card-info p{
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  line-height:1.5;
  color:#b5adbf;
}
#work-grid.work-deck .card-arrow{
  width:24px;
  height:24px;
  border-color:#d1c5e633;
}
#work-grid.work-deck .card-arrow .icon{width:12px;height:12px}
#work-grid.work-deck .card-roles{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:4px;
  padding:7px 4px 3px;
}
#work-grid.work-deck .card-roles span{
  white-space:nowrap;
  padding:3px 5px;
  border-color:#d7c8f029;
  color:#c0b4cf;
  font-size:8px;
  line-height:1.2;
}
.work-deck-help{
  margin:6px 0 0;
  color:#a89eb8;
  font-size:10px;
  line-height:1.6;
  text-align:center;
  letter-spacing:.02em;
}
.deck-mode-label{color:#b5a6cb;font:600 8px/1.5 Manrope,sans-serif;letter-spacing:.12em;white-space:nowrap}
.deck-controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  max-width:440px;
  margin:2px auto 0;
}
.deck-nav{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:none;
  padding:0;
  border:1px solid #d4c6ed4d;
  border-radius:50%;
  background:#ffffff05;
  color:#e0d6ee;
  font-size:22px;
  line-height:1;
  transition:background .2s,border-color .2s;
}
.deck-nav .icon{width:18px;height:18px}
.deck-nav[data-deck-prev] .icon{transform:rotate(180deg)}
.deck-nav:hover{background:#c8b5ec17;border-color:#dbc7ff8c}
.deck-nav:disabled{opacity:.35}
.deck-nav:focus-visible,.deck-dot:focus-visible{outline:2px solid #e0ceff;outline-offset:3px}
.deck-reading{min-width:0;max-width:260px;flex:1;text-align:center}
.deck-status{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:600;
  color:#e4ddec;
  line-height:1.5;
}
.deck-position{
  display:block;
  margin-top:3px;
  color:#a79ab9;
  font-size:10px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.16em;
  line-height:1.5;
}
.deck-dots{display:flex;justify-content:center;align-items:center;margin:3px auto 0;gap:0}
.deck-dot{
  position:relative;
  width:44px;
  height:44px;
  padding:0;
  flex:none;
  border-radius:50%;
  background:transparent;
}
.deck-dot:before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:5px;
  height:5px;
  transform:translate(-50%,-50%);
  background:#8f859d;
  border-radius:50%;
  transition:background .2s,width .2s;
}
.deck-dot[aria-pressed="true"]:before{width:18px;background:#d0bff2;border-radius:5px}
.work .deck-dots+.gallery-note{margin-top:10px}
@media(max-width:767px){
  #work-grid.work-deck{height:324px}
  #work-grid.work-deck:before{bottom:14px}
  #work-grid.work-deck .project-card,
  #work-grid.work-deck .project-card:nth-child(even){width:clamp(150px,54vw,196px)}
  #work-grid.work-deck .card-open,
  #work-grid.work-deck .card-open:hover{padding:7px;border-radius:10px;box-shadow:0 8px 16px #0006,inset 0 1px 0 #ffffff0a}
  #work-grid.work-deck .is-selected .card-open{box-shadow:0 12px 20px #0007,0 0 0 1px #cab8f326}
  #work-grid.work-deck .card-image{border-radius:5px}
  #work-grid.work-deck .card-info{padding:10px 3px 3px;gap:5px}
  #work-grid.work-deck .card-info h3{font-size:15px}
  #work-grid.work-deck .card-info p{font-size:8px;margin-top:3px}
  #work-grid.work-deck .card-roles{padding:6px 3px 3px;gap:3px}
  #work-grid.work-deck .card-roles span{font-size:7px;padding:3px 4px}
  #work-grid.work-deck .card-arrow{width:21px;height:21px}
  #work-grid.work-deck .card-arrow .icon{width:11px;height:11px}
  #work-grid.work-deck .card-corner{top:7px;left:7px;font-size:6px}
  #work-grid.work-deck .card-bottom{bottom:7px;left:7px;right:7px;font-size:7px}
  #work-grid.work-deck .card-play,
  #work-grid.work-deck .card-open:hover .card-play{width:38px;height:38px}
  #work-grid.work-deck .card-play .icon{width:14px;height:14px}
  .work-deck-help{font-size:9px;margin-top:4px}
  .deck-mode-label{display:none}
  .deck-controls{margin-top:0;gap:12px}
  .deck-status{font-size:12px}
  .deck-position{font-size:9px}
  .deck-dots{margin-top:0}
}
@media(max-width:359px){
  #work-grid.work-deck{height:306px}
  #work-grid.work-deck .card-info h3{font-size:14px}
  #work-grid.work-deck .card-info p{font-size:7px}
  #work-grid.work-deck .card-roles span{font-size:6.5px;padding:3px}
  .deck-controls{gap:8px}
}
.motion-reduced #work-grid.work-deck .project-card{transition:none}
@media(prefers-reduced-motion:reduce){
  #work-grid.work-deck .project-card{transition:none}
}