.work-page {
  overflow:hidden;
  background:var(--paper);
  color:var(--ink)
}
.work-main {
  min-height:100dvh;
  padding:0
}
.work-index {
  position:fixed;
  inset:0;
  overflow:hidden;
  background:var(--paper)
}
.work-gallery {
  position:absolute;
  inset:0;
  overflow-x:auto;
  overflow-y:hidden;
  cursor:grab;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  touch-action:pan-x;
  -webkit-overflow-scrolling:touch
}
.work-gallery::-webkit-scrollbar {
  display:none
}
.work-gallery.is-dragging {
  cursor:grabbing;
  user-select:none
}
.work-track {
  display:flex;
  width:max-content;
  min-width:100%;
  height:100%;
  margin:0;
  padding:0;
  list-style:none
}
.work-set {
  display:flex;
  flex:0 0 auto;
  height:100%
}
.work-card {
  --card-width:clamp(292px,15.45vw,594px);
  --index-top:34.8vh;
  --image-offset:8vh;
  --frame-height:21.1vh;
  position:relative;
  flex:0 0 var(--card-width);
  width:var(--card-width);
  height:100dvh
}
.work-card[data-orientation="portrait"] {
  --image-offset:3.2vh;
  --frame-height:31.6vh
}
.work-card__link {
  position:absolute;
  inset:0;
  display:block;
  color:inherit;
  text-decoration:none
}
.work-card__link:focus-visible {
  outline:1px solid currentColor;
  outline-offset:-1px
}
.work-card__index {
  position:absolute;
  top:var(--index-top);
  left:0;
  width:100%;
  color:rgba(255,255,255,.44);
  text-align:center;
  pointer-events:none;
  transition:color 160ms linear
}
.work-card__frame {
  position:absolute;
  top:calc(var(--index-top) + var(--image-offset));
  left:0;
  width:100%;
  height:var(--frame-height);
  overflow:hidden
}
.work-card__frame::after {
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.56);
  content:"";
  pointer-events:none;
  transition:opacity 160ms linear
}
.work-card__image {
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:var(--image-position,50% 50%);
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none
}
.work-card__title {
  position:absolute;
  top:calc(var(--index-top) + var(--image-offset) + var(--frame-height) + 24px);
  left:0;
  width:100%;
  visibility:hidden;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 120ms linear,visibility 0s 120ms
}
@media(min-width:1033px) {
  .work-card__link:hover .work-card__index,.work-card__link:focus-visible .work-card__index,.work-card.is-active .work-card__index {
    color:currentColor
  }
  .work-card__link:hover .work-card__frame::after,.work-card__link:focus-visible .work-card__frame::after,.work-card.is-active .work-card__frame::after {
    opacity:0
  }
  .work-card__link:hover .work-card__title,.work-card__link:focus-visible .work-card__title,.work-card.is-active .work-card__title {
    visibility:visible;
    opacity:1;
    transition:opacity 120ms linear,visibility 0s
  }
}
@media(max-width:1032px) {
  .work-card {
    --card-width:26vw;
    --index-top:39vh;
    --image-offset:4vh;
    --frame-height:17vh
  }
  .work-card[data-orientation="portrait"] {
    --image-offset:3vh;
    --frame-height:26vh
  }
  .work-card__index {
    color:var(--ink)
  }
  .work-card__frame::after {
    display:none
  }
  .work-card__title {
    visibility:visible;
    opacity:1;
    top:calc(var(--index-top) + var(--image-offset) + var(--frame-height) + 12px)
  }
}
@media(max-width:440px) {
  .work-page {
    overflow:auto
  }
  .work-index {
    position:relative;
    overflow:visible
  }
  .work-gallery {
    position:relative;
    overflow:visible;
    cursor:auto;
    touch-action:auto
  }
  .work-track,.work-set {
    display:block;
    width:100%;
    height:auto
  }
  .work-track {
    padding:102px 15px 55px
  }
  .work-card,.work-card[data-orientation="portrait"] {
    width:100%;
    height:auto;
    min-height:140px;
    margin:0
  }
  .work-card[data-orientation="portrait"] {
    min-height:228px
  }
  .work-card__link {
    position:relative;
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    align-items:center;
    gap:8px;
    width:100%;
    min-height:140px
  }
  .work-card[data-orientation="portrait"] .work-card__link {
    min-height:228px
  }
  .work-card__index,.work-card__frame,.work-card__title {
    position:static;
    width:auto;
    top:auto;
    left:auto;
    text-align:center
  }
  .work-card__frame {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1.4;
    overflow:hidden
  }
  .work-card[data-orientation="portrait"] .work-card__frame {
    aspect-ratio:.87
  }
  .work-card__image {
    width:100%;
    height:100%;
    object-fit:cover
  }
  .work-card__title {
    overflow-wrap:anywhere
  }
}