/* The gallery as a stack of prints (js/stack.js), the second way to show "This is us."
   Real glossy prints: a warm white border, a crisp edge round the photo, a soft shadow on
   the dark wall. The prints under the top one lie at their own angles and fall into shade.
   Only transform and opacity ever move. */

.stack {
  position: relative;
  /* bleed to the screen's edges (stack.js measures them) and clip there, so a print
     thrown off the side never makes the page wider */
  margin-left: calc(-1 * var(--bleed-l, 0px));
  margin-right: calc(-1 * var(--bleed-r, 0px));
  overflow-x: hidden;
  overflow-x: clip;
  padding: 6px 0 2px;
  text-align: center;
}
/* how tall the deck may be: steady while a phone's toolbar comes and goes */
.stack__probe { position: absolute; left: 0; top: 0; width: 1px; height: min(62svh, 560px); visibility: hidden; pointer-events: none; }

.stack__deck {
  position: relative; isolation: isolate; margin: 0 auto;
  touch-action: pan-y; cursor: pointer; outline: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.stack__deck:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 8px; border-radius: 12px; }
/* a warm pool of light on the wall behind the prints */
.stack__deck::before {
  content: ""; position: absolute; z-index: -1; inset: -14% -10%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 226, 190, 0.075), rgba(255, 226, 190, 0.02) 62%, transparent);
}

.print {
  position: absolute; left: 50%; top: 50%; margin: 0;
  transform-origin: 50% 50%; will-change: transform;
}
.print__paper {
  position: absolute; inset: 0; display: block; padding: var(--b, 10px); border-radius: 1.5px;
  background: linear-gradient(162deg, #FDFBF6 0%, #F5F1E8 55%, #ECE7DC 100%);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.3),
    0 1px 1.5px rgba(0, 0, 0, 0.45),
    0 8px 16px -6px rgba(0, 0, 0, 0.55),
    0 24px 46px -20px rgba(0, 0, 0, 0.75);
}
.print__photo {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  background: center / cover no-repeat;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18);
}
.print__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; max-width: none;
  opacity: 0; transition: opacity 0.5s var(--ease, ease);
  pointer-events: none; -webkit-user-drag: none;
}
.print.is-loaded .print__photo img { opacity: 1; }
/* the gloss: a faint sheen across the photo, as on a glossy print under a lamp */
.print__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.05) 100%);
}
/* the shade a print lies in, deeper the further down the stack */
.print__dim { position: absolute; inset: -1px; border-radius: 2px; background: #03070B; opacity: 0; pointer-events: none; }
/* picked up: the shadow falls further away */
.print__lift {
  position: absolute; inset: 3% 4%; border-radius: 6px; pointer-events: none;
  box-shadow: 0 36px 60px -14px rgba(0, 0, 0, 0.8), 0 14px 26px -10px rgba(0, 0, 0, 0.5);
  opacity: 0; transition: opacity 0.25s var(--ease, ease);
}
.print.is-lifted .print__lift { opacity: 1; }

/* under the deck: the step buttons round the count, the hint, full screen */
.stack__bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 0; }
.stack__count {
  min-width: 6ch; margin: 0; font-family: var(--label); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.16em;
  color: var(--sc-ink-soft); font-variant-numeric: tabular-nums;
}
.stack__step {
  position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
  background: transparent; color: var(--sc-ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s var(--ease, ease), transform 0.12s var(--ease, ease);
}
.stack__step::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -5px 0 0 -4px;
  border-left: 2px solid currentColor; border-top: 2px solid currentColor;
}
.stack__step--prev::before { transform: translateX(2px) rotate(-45deg); }
.stack__step--next::before { transform: translateX(-3px) rotate(135deg); }
.stack__step:hover { border-color: var(--sc-accent); }
.stack__step:active { transform: scale(0.95); }
.stack__hint {
  margin: 12px auto 0; max-width: 34rem; padding: 0 22px; font-family: var(--label); font-weight: 600; font-size: 0.74rem;
  letter-spacing: 0.18em; line-height: 1.5; text-transform: uppercase; color: var(--sc-ink-soft); text-wrap: balance;
}
.stack__full {
  display: inline-flex; align-items: center; gap: 9px; margin: 14px auto 0; padding: 9px 16px 9px 13px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--sc-ink); cursor: pointer;
  font-family: var(--label); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent; transition: border-color 0.15s var(--ease, ease);
}
/* four corners: the frame opening out */
.stack__full::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 5px 1.5px, linear-gradient(currentColor, currentColor) 0 0 / 1.5px 5px,
    linear-gradient(currentColor, currentColor) 100% 0 / 5px 1.5px, linear-gradient(currentColor, currentColor) 100% 0 / 1.5px 5px,
    linear-gradient(currentColor, currentColor) 0 100% / 5px 1.5px, linear-gradient(currentColor, currentColor) 0 100% / 1.5px 5px,
    linear-gradient(currentColor, currentColor) 100% 100% / 5px 1.5px, linear-gradient(currentColor, currentColor) 100% 100% / 1.5px 5px;
  background-repeat: no-repeat;
}
.stack__full:hover { border-color: var(--sc-accent); }
.stack__live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 720px) {
  .stack__bar { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .print__photo img, .print__lift { transition: none; }
}