/* LEN v57 — mobile Works: Apple-inspired inertial rail + quieter paddle navigation. */

@media (max-width: 900px) {
  :root {
    --v57-ease-out: cubic-bezier(.16, 1, .3, 1);
    --v57-control-bg: rgba(232, 229, 224, .88);
    --v57-control-bg-active: rgba(57, 52, 48, .96);
  }

  /* Let the browser keep its native momentum. JS only settles after momentum ends. */
  #works .works-grid {
    gap: clamp(11px, 3.2vw, 16px) !important;
    padding-top: 5px !important;
    padding-bottom: 14px !important;
    scroll-snap-type: none !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    cursor: grab;
  }

  #works .works-grid.is-v57-touching {
    cursor: grabbing;
    scroll-snap-type: none !important;
  }

  #works .work-card,
  #works .work-card:nth-child(n) {
    --v57-scale: 1;
    --v57-y: 0px;
    --v57-opacity: 1;
    --v57-caption-opacity: 1;
    scroll-snap-align: center !important;
    scroll-snap-stop: normal !important;
    opacity: var(--v57-opacity) !important;
    transform: translate3d(0, var(--v57-y), 0) scale(var(--v57-scale)) !important;
    transform-origin: 50% 52% !important;
    transition:
      transform 520ms var(--v57-ease-out),
      opacity 360ms ease !important;
    will-change: transform, opacity !important;
  }

  #works .works-grid.is-v57-touching .work-card,
  #works .works-grid.is-v57-scrolling .work-card {
    transition-duration: 0ms !important;
  }

  /* Quieter card treatment: photography first, chrome second. */
  #works .work-card .media,
  #works .work-card[data-exhibit-active] .media,
  #works .work-card[data-depth-current] .media {
    border-radius: 20px 20px 0 0 !important;
    background: #e9e6e1 !important;
    box-shadow: none !important;
  }

  #works .work-card .media img,
  #works .work-card[data-exhibit-active] .media img,
  #works .work-card[data-depth-current] .media img,
  #works .work-card.v53-tap .media img,
  #works .work-card:focus-within .media img {
    --v57-image-scale: 1.012;
    transform: scale(var(--v57-image-scale)) !important;
    transform-origin: 50% 50% !important;
    transition: transform 680ms var(--v57-ease-out) !important;
  }

  #works .works-grid.is-v57-touching .work-card .media img,
  #works .works-grid.is-v57-scrolling .work-card .media img {
    transition-duration: 0ms !important;
  }

  #works .work-card figcaption,
  #works .works-exhibit__sticky.is-copy-hidden .work-card figcaption,
  #works .works-exhibit__sticky.is-switching .work-card figcaption {
    position: relative;
    min-height: 58px !important;
    padding: 12px 14px 11px !important;
    border: 1px solid rgba(55, 49, 44, .08) !important;
    border-top: 0 !important;
    border-radius: 0 0 20px 20px !important;
    background: rgba(248, 246, 242, .98) !important;
    box-shadow: 0 12px 30px rgba(44, 38, 33, .055) !important;
    opacity: var(--v57-caption-opacity) !important;
  }

  #works .work-card figcaption::after {
    display: none !important;
  }

  #works .work-card h3 {
    font-size: clamp(20px, 5.8vw, 27px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
  }

  #works .work-card figcaption p:not(.work-card__editor-note),
  #works .work-card figcaption b {
    opacity: .72;
  }

  /* Apple-like paddle nav: no giant pill, just status + two quiet circular controls. */
  #works .works-loop-controls,
  #works .works-exhibit__sticky.is-copy-hidden .works-loop-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px 42px !important;
    grid-template-areas: "status prev next" !important;
    gap: 8px !important;
    width: var(--v55-work-width) !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 2px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    contain: none !important;
  }

  #works .works-loop-controls span {
    grid-area: status !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 42px !important;
    padding: 0 0 11px !important;
    color: rgba(61, 55, 50, .62) !important;
    font: 500 9px/1 Arial, sans-serif !important;
    letter-spacing: .16em !important;
  }

  #works .works-loop-controls span::before,
  #works .works-loop-controls span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px;
    height: 2px;
    border-radius: 999px;
  }

  #works .works-loop-controls span::before {
    width: min(96px, 34vw);
    background: rgba(78, 69, 62, .12);
  }

  #works .works-loop-controls span::after {
    width: calc(min(96px, 34vw) * var(--v57-progress, .1667));
    background: rgba(56, 50, 45, .58);
    transition: width 460ms var(--v57-ease-out);
  }

  #works .works-loop-controls button {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: rgba(42, 38, 35, .86) !important;
    background: var(--v57-control-bg) !important;
    box-shadow: inset 0 0 0 1px rgba(38, 33, 30, .035) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
    transition:
      transform 420ms var(--v57-ease-out),
      background 260ms ease,
      color 260ms ease,
      opacity 260ms ease !important;
  }

  #works #works-loop-prev { grid-area: prev !important; }
  #works #works-loop-next { grid-area: next !important; }

  #works #works-loop-prev::after,
  #works #works-loop-next::after {
    content: "" !important;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    font-size: 0 !important;
  }

  #works #works-loop-prev::after {
    transform: translateX(1px) rotate(-135deg);
  }

  #works #works-loop-next::after {
    transform: translateX(-1px) rotate(45deg);
  }

  #works .works-loop-controls button:not(:disabled):active {
    color: #fff !important;
    background: var(--v57-control-bg-active) !important;
    transform: scale(.90) !important;
  }

  #works .works-loop-controls button:disabled {
    opacity: .34 !important;
    background: rgba(232, 229, 224, .52) !important;
  }

  /* The description disclosure now follows the same quiet circular control language. */
  #works.v56-description-ready .works-description-toggle,
  #works.v57-description-ready .works-description-toggle {
    min-height: 46px;
    padding: 11px 0 9px;
    color: rgba(61, 54, 49, .78);
    border-top-color: rgba(71, 61, 54, .12);
    font-size: 12px;
    letter-spacing: .09em;
  }

  #works .works-description-toggle i {
    flex-basis: 29px;
    width: 29px;
    height: 29px;
    border: 0 !important;
    color: rgba(47, 43, 39, .82);
    background: rgba(232, 229, 224, .86) !important;
    box-shadow: inset 0 0 0 1px rgba(38, 33, 30, .035);
    transition:
      color 300ms ease,
      background 300ms ease,
      transform 620ms var(--v57-ease-out) !important;
  }

  #works .works-description-toggle i::before,
  #works .works-description-toggle i::after {
    width: 9px;
  }

  #works.v56-description-open .works-description-toggle i,
  #works.v57-description-open .works-description-toggle i {
    color: #fff;
    background: rgba(60, 53, 48, .96) !important;
    transform: rotate(180deg) scale(.96);
  }

  /* Avoid the heavy gray curtain visible between cards in the screen recording. */
  #works .works-grid::before,
  #works .works-grid::after {
    box-shadow: none !important;
    filter: none !important;
  }
}

@media (max-width: 390px) {
  #works .work-card figcaption,
  #works .works-exhibit__sticky.is-copy-hidden .work-card figcaption,
  #works .works-exhibit__sticky.is-switching .work-card figcaption {
    min-height: 54px !important;
    padding-inline: 12px !important;
  }

  #works .works-loop-controls,
  #works .works-exhibit__sticky.is-copy-hidden .works-loop-controls {
    grid-template-columns: minmax(0, 1fr) 40px 40px !important;
  }

  #works .works-loop-controls button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #works .work-card,
  #works .work-card .media img,
  #works .works-loop-controls button,
  #works .works-loop-controls span::after {
    transition-duration: 1ms !important;
  }
}