/* The Plate — a hang, with the wall showing */
.plate{--gap:16px}

/* One spread to a screen. The page scrolls for real, so pairs travel rather than cut. */
.hang{display:block;transition:opacity .42s var(--ease)}
/* Past the last pair the wall fades and the gallery begins again. */
.hang.is-wrapping{opacity:0}
/* The site zooms the pictures itself (js/solo.js); the page itself only scrolls. */
body.plate{touch-action:pan-y}
.hang-spread{
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:var(--top) 0 var(--bottom);
  transition:opacity .28s linear;
}
.hang-group{display:flex;flex-direction:column}
.hang-frames{display:flex;gap:var(--gap);align-items:center}
/* Two letterbox pictures, one above the other. */
.hang-spread.is-stacked .hang-frames{flex-direction:column}
.hang-spread.is-stacked .hang-caption-body{flex-direction:column;gap:4px}
.hang-frame{position:relative;overflow:hidden;display:block;padding:0;cursor:zoom-in;background-size:cover;background-position:center}
.hang-frame img{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s var(--ease)}
.hang-frame img.is-there{opacity:1}
.still .hang-frame img{opacity:1;transition:none}

/* Reveal: one button for the pair, a caption under each picture. */
.hang-caption{position:relative;margin-top:10px;min-height:0}
.hang-caption-btn{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);
  border-bottom:1px solid var(--hair);padding:2px 0;opacity:.7;transition:opacity .3s var(--ease),color .3s var(--ease);
}
.hang-caption-btn:hover{opacity:1;color:var(--fg)}
.hang-caption-body{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  opacity:0;pointer-events:none;transition:opacity .45s var(--ease);
}
.hang-caption.is-open .hang-caption-body{opacity:1;pointer-events:auto}
.hang-caption.is-open .hang-caption-btn{opacity:1;color:var(--fg)}
.hang-caption-body{display:flex;gap:var(--gap)}
.hang-caption-cell{
  margin:0;font-size:12.5px;line-height:1.45;letter-spacing:.02em;text-transform:none;
  color:var(--fg-dim);font-family:var(--display);font-style:italic;
}
/* One caption for the pair runs across both pictures. */
.hang-caption-body.is-shared .hang-caption-cell{width:100%}

.size-switch[hidden]{display:none}
.size-switch{display:flex;align-items:center;gap:10px;opacity:.5;transition:opacity .4s var(--ease)}
.size-switch:hover,.size-switch:focus-within{opacity:1}
.size-switch button{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);padding:3px 0;border-bottom:1px solid transparent}
.size-switch button.is-on{color:var(--fg);border-bottom-color:var(--brass)}

/* One picture on its own, with an obvious way back. */
.has-solo body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.solo{
  position:fixed;inset:0;z-index:60;background:var(--ground);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:64px 40px 52px;cursor:zoom-out;
  overflow:hidden;touch-action:none;
}
.is-zoomed .solo{cursor:grab}
.is-zoomed .solo:active{cursor:grabbing}
.solo[hidden]{display:none}
.solo-fig{margin:0;width:100%;max-height:100%;display:flex;justify-content:center;position:relative;z-index:0}
/* Sized from the picture's shape (--ar), so the larger file arriving never changes the box. */
.solo-fig img{width:min(100%,calc(78vh * var(--ar,1)));height:auto;aspect-ratio:var(--ar,auto);object-fit:contain;transform-origin:50% 50%;will-change:transform}
.solo-close{
  position:absolute;top:22px;right:30px;cursor:pointer;z-index:2;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);
  border-bottom:1px solid var(--hair);padding:3px 0;
}
.solo-close:hover{color:var(--fg)}

@media (max-width:720px){
  .hang-frames{flex-direction:column;align-items:center}
  /* Stacked on a phone, each caption says which picture it belongs to. */
  .hang-caption-body{flex-direction:column;gap:4px}
  .hang-caption-cell[data-pos]::before{
    content:attr(data-pos) ': ';font-style:normal;font-family:var(--ui);
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  }
  .hang-caption-cell:empty{display:none}
}

/* A phone on its side keeps the picture, not the furniture. */
@media (orientation:landscape) and (max-height:560px){
  .hang-caption{margin-top:6px}
  /* Room to scroll, so Safari's bars can be swiped away (js/swipe-note.js). */
  .hang{min-height:calc(100lvh + 48px)}
}

.still .hang-spread{opacity:1 !important;transition:none}
.still .hang{transition:none}
@media (prefers-reduced-motion:reduce){
  .hang-spread{transition:none}
  .hang-caption-body{transition:none}
}