/* Paper cut-out: the paper, the picture on it, the shadow that lifts with depth, masking tape, a die-cut sticker
   edge for a keyed product, and the small paper parts a collage is made of (a sticker, a handwritten label). Every
   colour comes from the page: --pc-paper, --pc-paper-tex, --pc-tape, --pc-shadow (r g b), --pc-hand (a hand font),
   --pc-pencil (its ink). */
.pc-cut { position: relative; --pc-lift: .18; --_s: var(--pc-shadow, 46 30 14);
  --_l: min(1, calc(var(--pc-lift) + var(--pc-hover, 0)));
  filter: drop-shadow(0 .5px .6px rgb(var(--_s) / .32)) drop-shadow(calc(var(--_l) * 5px) calc(1px + var(--_l) * 16px) calc(2px + var(--_l) * 20px) rgb(var(--_s) / calc(.14 + var(--_l) * .14)));
  transition: filter .38s cubic-bezier(.2, .9, .3, 1), scale .38s cubic-bezier(.2, 1.4, .4, 1); }
.pc-cut > .pc-paper { position: absolute; inset: 0; background-color: var(--pc-paper, #f7f3ea); background-image: var(--pc-paper-tex, none); background-size: auto; pointer-events: none; }
.pc-cut > img.pc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* (a soft sheen and the paper's tooth over the print, inside the picture's own edge) */
.pc-cut[data-edge="border"] > img.pc-photo { filter: contrast(1.02) saturate(.97); }
/* A keyed product: no paper, a white die-cut edge hugging its outline. */
.pc-cut.pc-keyed > .pc-paper { display: none; }
.pc-cut.pc-keyed > img.pc-photo { object-fit: contain; clip-path: none;
  filter: drop-shadow(2.5px 0 0 var(--pc-paper, #fff)) drop-shadow(-2.5px 0 0 var(--pc-paper, #fff)) drop-shadow(0 2.5px 0 var(--pc-paper, #fff)) drop-shadow(0 -2.5px 0 var(--pc-paper, #fff)); }
/* Held, hovered or dragged: up off the page. */
.pc-drag { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pc-drag img { -webkit-user-drag: none; pointer-events: none; }
.pc-held { cursor: grabbing; --pc-hover: 1; scale: 1.03; z-index: 50 !important; }
@media (hover: hover) { .pc-drag:hover { --pc-hover: .5; scale: 1.015; } }

/* Masking tape: translucent, a little fibrous, torn at both ends. */
.pc-tape { position: absolute; top: -13px; z-index: 3; width: var(--tp-w, 110px); height: 28px; translate: -50% 0; rotate: var(--tp-rot, -3deg); pointer-events: none;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 38%, rgb(0 0 0 / .045)),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 3px),
    var(--pc-tape, rgb(229 218 190 / .84));
  mix-blend-mode: normal; }
.pc-tape[data-corner] { top: -6px; translate: 0 0; }
.pc-tape[data-corner="l"] { transform-origin: 70% 50%; }
.pc-tape[data-corner="r"] { transform-origin: 30% 50%; }

/* A round sticker (a price, a number): die-cut, a faint curl of light across it. */
.pc-sticker { display: inline-grid; place-items: center; min-width: 3.4em; aspect-ratio: 1; padding: .5em; box-sizing: border-box; border-radius: 50%;
  background: radial-gradient(120% 80% at 30% 18%, rgb(255 255 255 / .35), transparent 46%), var(--pc-sticker, #d2462a); color: var(--pc-on-sticker, #fff);
  font: 700 13px/1.05 var(--sx-mono, ui-monospace, monospace); letter-spacing: .02em; text-align: center; rotate: var(--pc-srot, -8deg);
  box-shadow: 0 1px 1.5px rgb(var(--pc-shadow, 46 30 14) / .35), 0 0 0 2px var(--pc-paper, #fff); }
/* A handwritten label, in pencil or pen. */
.pc-label { font: 500 clamp(19px, 1.6vw, 24px)/1.1 var(--pc-hand, "Caveat", cursive); color: var(--pc-pencil, #2f2a24); letter-spacing: .005em; }
@media (prefers-reduced-motion: reduce) { .pc-cut { transition: none; } }