/* Petty Crimes: gallery-print presentation.
   The supplied portraits are now cropped clean of their baked-in frames (see scripts/prepare-portraits.sh).
   ONE slim contemporary frame is drawn on the <img> itself, so it always hugs the true image
   dimensions, survives cloning into the case dialog, and never letterboxes. */
:root{
  --frame-w:clamp(5px,.62vw,9px);
  --frame-ink:#24211c;          /* matte blackened oak */
  --frame-edge:#3a352d;
  --wall-shadow:42 30 18;       /* warm, tinted, never grey */
}

.print,
.case-card .sample-display>.sample-portrait.print{
  box-sizing:content-box;
  display:block;
  border:var(--frame-w) solid var(--frame-ink);
  border-top-color:var(--frame-edge);           /* light falls from above */
  border-left-color:#2c2822;
  background:#efe9dc;
  outline:1px solid rgb(255 250 240 / .22);     /* hairline lip where wood meets print */
  outline-offset:calc(var(--frame-w) * -1 - 1px);
  box-shadow:
    0 0 0 1px rgb(20 17 13 / .55),
    0 1px 1px rgb(var(--wall-shadow) / .18),
    0 6px 10px -2px rgb(var(--wall-shadow) / .16),
    0 22px 38px -14px rgb(var(--wall-shadow) / .34),
    0 46px 70px -34px rgb(var(--wall-shadow) / .30);
  image-rendering:auto;
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* HERO */
.x-hero-stage .hero-artwork,
.x-hero-stage .hero-artwork.supplied-art{
  transform:none!important;rotate:none;
  width:100%;max-width:470px;margin-inline:auto;
  --px:0;--py:0;
}
.supplied-art .hero-portrait{
  width:calc(100% - clamp(7px,.75vw,11px) * 2);max-width:none;height:auto;
}
.supplied-art .hero-portrait{border-width:clamp(7px,.75vw,11px);outline-offset:calc(clamp(7px,.75vw,11px) * -1 - 1px)}
/* glazing: a faint, slow-moving reflection, painted above art but below stamps */
.x-hero-stage .hero-artwork::after{
  content:"";position:absolute;inset:clamp(7px,.75vw,11px);pointer-events:none;z-index:1;
  background:linear-gradient(118deg,transparent 30%,rgb(255 252 244 / .14) 44%,transparent 58%);
  transform:translateX(calc(var(--px) * 18%));transition:transform .6s cubic-bezier(.2,.7,.2,1);
  mix-blend-mode:soft-light;
}
.x-hero-stage .x-stamps{z-index:2}
.x-hero-stage .red-label{z-index:3}

/* COLLECTION WALL: every print gets the same frame size; keep all original art visible. */
.case-card .case-image.sample-display{
  aspect-ratio:4/5;display:flex;align-items:stretch;justify-content:center;
  padding:0;overflow:visible;background:none;
}
.case-card .sample-display>.sample-portrait{
  box-sizing:border-box;width:100%;height:100%;aspect-ratio:4/5;filter:none;
  max-width:none;max-height:none;flex:0 0 100%;
  object-fit:contain;background:#efe9dc;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;
}
.case-card .case-image.sample-display::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgb(255 250 238 / .16),transparent 45%);
}
@media (hover:hover){
  .case-card:hover .sample-display>.sample-portrait,
  .case-card:focus-visible .sample-display>.sample-portrait{
    transform:translateY(-6px);
    box-shadow:
      0 0 0 1px rgb(20 17 13 / .55),
      0 2px 2px rgb(var(--wall-shadow) / .16),
      0 12px 18px -4px rgb(var(--wall-shadow) / .18),
      0 34px 52px -18px rgb(var(--wall-shadow) / .38),
      0 64px 90px -40px rgb(var(--wall-shadow) / .32);
  }
  .case-card:hover .case-image.sample-display::after{opacity:1}
}
.case-card .open-case{z-index:2}

/* CASE DIALOG: the cloned <img> carries .print, so the frame follows it in */
.case-art-display{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.case-art-display>.sample-portrait{
  width:auto!important;height:auto!important;
  max-width:calc(100% - var(--frame-w) * 2)!important;
  max-height:72vh!important;
  object-fit:fill!important;
  border:var(--frame-w) solid var(--frame-ink)!important;
  border-top-color:var(--frame-edge)!important;
  outline:1px solid rgb(255 250 240 / .22)!important;
  outline-offset:calc(var(--frame-w) * -1 - 1px)!important;
  box-shadow:0 0 0 1px rgb(20 17 13 / .55),0 24px 48px -18px rgb(var(--wall-shadow) / .4),0 60px 90px -40px rgb(var(--wall-shadow) / .3)!important;
  transform:none!important;
}

/* Supporting rail views (hidden on most layouts but kept consistent) */
.x-polaroid img.print{width:calc(100% - var(--frame-w) * 2);height:auto;aspect-ratio:auto;background:#efe9dc}

@media (prefers-reduced-motion:reduce){
  .case-card .sample-display>.sample-portrait,.x-hero-stage .hero-artwork::after{transition:none}
}
@media (max-width:760px){
  :root{--frame-w:6px}
}