/* RITE CLOTHING — archive
   layout: one vertical stack of equal 3:2 photos from earlier drops, centred on the
   photo grey and tucked half behind each other. Number on the left, drop on the
   right. While scrolling, the photo in the middle of the screen comes forward at
   full size and the others sit smaller behind it (archive.js sets --k from 0 to 1). */

body.arc-page{background:#E5E5E5}

.arc{
  --w:min(44vw, 900px, 105vh);           /* every photo has the same width */
  padding-bottom:28vh;
}
.arc-title{
  margin:0;padding:44px var(--gutter) 0;
  font-size:var(--fs);font-weight:400;display:flex;align-items:flex-start;gap:6px;
}
.arc-count{font-size:var(--fs-s);color:var(--muted);line-height:1.6}

.arc-list{list-style:none;margin:18vh 0 0;padding:0;position:relative;z-index:0}   /* keeps the photo stacking below header + pop-ups */

.arc-row{
  --k:1;                                   /* 1 = in focus, 0 = far from the centre */
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) var(--w) minmax(0,1fr);align-items:center;
  padding:0 var(--gutter);
}
/* rows overlap: each photo slides half behind its neighbours */
.arc-row + .arc-row{margin-top:calc(var(--w) * -0.17)}

.arc-num,
.arc-drop{
  opacity:calc(.25 + .75 * var(--k));
  font-variant-numeric:tabular-nums;
}
.arc-drop{text-align:right}

.arc-fig{margin:0;width:100%}
.arc-fig img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  transform:scale(calc(.68 + .32 * var(--k)));
  transform-origin:center;
  box-shadow:0 28px 60px -34px rgba(13,28,56,.45);
  will-change:transform;
}

@media (max-width:699px){
  .arc{--w:64vw}
  .arc-title{padding-top:28px}
  .arc-row{column-gap:6px}
  .arc-num,.arc-drop{font-size:10px}
}

@media (prefers-reduced-motion:reduce){
  .arc-row{--k:1 !important}
  .arc-row + .arc-row{margin-top:12px}
  .arc-fig img{box-shadow:none}
}