.print-deck {
  position: relative;
  width: min(84vw, 420px);
  aspect-ratio: 1 / 1;
  perspective: 1400px;
}

@media (min-width: 600px) {
  .print-deck {
    width: min(60vw, 480px);
  }
}

@media (min-width: 1024px) {
  .print-deck {
    width: min(38vw, 560px);
  }
}

.print-deck__offset {
  position: absolute;
  inset: 0;
  background: var(--paper-deep);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-card-deck);
  z-index: var(--z-card-stack);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.print-deck__offset--1 {
  transform: rotate(-4deg) translateY(4px);
}

.print-deck__offset--2 {
  transform: rotate(5deg) translateY(6px);
}

.print-deck[data-offset-layers="1"] .print-deck__offset--1,
.print-deck[data-offset-layers="2"] .print-deck__offset--1,
.print-deck[data-offset-layers="2"] .print-deck__offset--2 {
  opacity: 1;
}

.print {
  position: absolute;
  inset: 0;
  z-index: var(--z-card-top);
  margin: 0;
  padding: var(--space-mat);
  background: var(--paper);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-card);
  cursor: grab;
  touch-action: pan-y;
}

.print:active {
  cursor: grabbing;
}

.print:focus-visible {
  outline: 2px solid var(--amber-ink);
  outline-offset: 4px;
}

.print__spring {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translate(calc(var(--drag-x, 0px) + var(--drop-x, 0px)), calc(var(--drag-y, 0px) + var(--drop-y, 0px))) rotate(var(--drop-r, -1.5deg));
  will-change: transform;
}

.print__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-standard);
}

.print.is-flipped .print__inner {
  transform: rotateY(180deg);
}

.print__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: var(--radius-xs);
}

.print__face--front {
  background: var(--paper-deep);
}

.print__face--back {
  transform: rotateY(180deg);
  background: var(--brown-shadow);
  background-image:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--brown-shadow) 92%, black) 0 2px, transparent 2px 4px),
    linear-gradient(color-mix(in srgb, var(--brown-shadow) 88%, var(--ink-strong)), color-mix(in srgb, var(--brown-shadow) 88%, var(--ink-strong)));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
}

.print__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

.print__empty-label {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--olive);
  border: 1px solid var(--sky-grey-pale);
}

.print[data-photo-count="0"] .print__empty-label {
  display: flex;
}

.print[data-photo-count="0"] .print__img,
.print[data-photo-count="0"] .print__stamp,
.print[data-photo-count="0"] .print__flip,
.print[data-photo-count="0"] .print__expand {
  display: none;
}

.print[data-photo-count="0"] {
  box-shadow: none;
  cursor: default;
  touch-action: auto;
}

.print__stamp {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-stamp);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-mono);
  color: var(--amber-stamp);
  mix-blend-mode: multiply;
}

.print__stamp--back {
  position: static;
  color: var(--paper);
  mix-blend-mode: normal;
  opacity: 0.8;
}

.print__label {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--paper);
  mix-blend-mode: normal;
}

.print__label:empty {
  display: none;
}

.print__flip,
.print__expand {
  position: absolute;
  z-index: var(--z-controls);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  color: var(--ink-strong);
  box-shadow: var(--shadow-lift);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.print__flip svg,
.print__expand svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.print__flip {
  right: var(--space-3);
  bottom: var(--space-3);
}

.print__expand {
  right: var(--space-3);
  top: var(--space-3);
}

@media (hover: hover) {
  .print__flip:hover,
  .print__expand:hover {
    transform: translateY(-2px);
  }
}

.print__flip:active,
.print__expand:active {
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .print__inner {
    transition: transform var(--dur-instant) linear;
  }

  .print__flip,
  .print__expand {
    transition: none;
  }

  .print-deck__offset {
    transition: none;
  }
}