/* FKN SHT photobook — isolated styles for #photography and mobile viewer only */
#photography{
  position:relative;
  z-index:120;
  isolation:isolate;
  padding:0;
  background:#000;
  border-top:0;
  overflow:hidden;
}

.photo-desktop{
  position:relative;
  height:100svh;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 56px;
  background:#000;
}

.photo-stage{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.photo-stage img{
  display:block;
  max-width:100%;
  max-height:100svh;
  width:auto;
  height:auto;
  object-fit:contain;
  opacity:1;
  transition:opacity 120ms ease;
  user-select:none;
  -webkit-user-drag:none;
}

.photo-stage img.is-fading{opacity:0}

.photo-arrow{
  position:absolute;
  top:50%;
  z-index:2;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  padding:18px 12px;
  color:rgba(255,255,255,.58);
  font:300 29px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  transition:color 120ms ease,opacity 120ms ease;
  opacity:.72;
}
.photo-arrow:hover,.photo-arrow:focus-visible{color:#fff;opacity:1;outline:none}
.photo-arrow.prev{left:18px}
.photo-arrow.next{right:18px}

.photo-mobile{display:none}
.photo-mobile-viewer{display:none}

@media(max-width:767px){
  #photography{overflow:visible}
  .photo-desktop{display:none}
  .photo-mobile{
    display:block;
    background:#000;
    padding:
      env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left);
  }
  .photo-catalog{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2px;
    background:#000;
  }
  .photo-thumb{
    display:block;
    width:100%;
    align-self:start;
    padding:0;
    margin:0;
    border:0;
    background:#000;
    overflow:hidden;
    cursor:pointer;
  }
  .photo-thumb img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
  }

  .photo-mobile-viewer{
    position:fixed;
    inset:0;
    z-index:1000;
    display:block;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    background:#000;
    transition:opacity 120ms ease,visibility 0s linear 120ms;
    overflow:hidden;
    overscroll-behavior:none;
    touch-action:none;
  }
  .photo-mobile-viewer.is-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:opacity 120ms ease;
  }
  .photo-mobile-viewport{
    position:absolute;
    inset:0;
    overflow:hidden;
    touch-action:none;
  }
  .photo-mobile-track{
    height:100%;
    display:flex;
    will-change:transform;
    transform:translate3d(0,0,0);
    transition:transform 180ms cubic-bezier(.22,.61,.36,1);
  }
  .photo-mobile-track.is-dragging{transition:none}
  .photo-mobile-slide{
    flex:0 0 100%;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:
      calc(env(safe-area-inset-top) + 8px)
      calc(env(safe-area-inset-right) + 4px)
      calc(env(safe-area-inset-bottom) + 8px)
      calc(env(safe-area-inset-left) + 4px);
    overflow:hidden;
  }
  .photo-mobile-slide img{
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
  }

  .photo-mobile-controls{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    opacity:0;
    transition:opacity 120ms ease;
  }
  .photo-mobile-controls.is-visible{opacity:1}
  .photo-control{
    position:absolute;
    top:calc(env(safe-area-inset-top) + 12px);
    width:42px;
    height:42px;
    padding:0;
    display:grid;
    place-items:center;
    border:0;
    border-radius:0;
    background:rgba(0,0,0,.36);
    color:rgba(255,255,255,.9);
    pointer-events:auto;
    font:300 28px/1 Arial,Helvetica,sans-serif;
    -webkit-tap-highlight-color:transparent;
  }
  .photo-control.catalog{left:calc(env(safe-area-inset-left) + 10px)}
  .photo-control.close{right:calc(env(safe-area-inset-right) + 10px)}
  .photo-control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}

  body.photo-viewer-open{
    position:fixed;
    width:100%;
    overflow:hidden;
    overscroll-behavior:none;
    touch-action:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .photo-stage img,
  .photo-mobile-viewer,
  .photo-mobile-track,
  .photo-mobile-controls{transition:none!important}
}