/* Selected direction, November 5: original paper exploration + final prototype.
   The composition is a portfolio presentation, not a historical comparison test. */
.process-cover {
  --process-surface: var(--surface-snack-art);
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1.22;
  overflow: hidden;
  background: var(--process-surface);
  color: var(--color-ink);
}
.case-identity .process-cover { --process-surface: var(--case-surface); }
.process-cover__paper {
  position: absolute;
  left: 9%; top: 17%; width: 31%;
  padding: 3%;
  background: var(--illustration-white);
  border: 1px solid var(--color-rule);
  box-shadow: 6px 8px 0 color-mix(in srgb, var(--color-ink) 7%, transparent);
  transform: rotate(-5deg);
}
.process-cover__crop { position: relative; overflow: hidden; }
.process-cover__crop img { position: absolute; display: block; max-width: none; height: auto; }
/* Native embedded sketch: source 737x2048, exploration B crop x310 y62 w270 h453. */
.process-cover__sketch { aspect-ratio: 270 / 453; background: var(--illustration-white); }
.process-cover__sketch img { width: 272.962963%; left: -114.814815%; top: -13.686534%; }
/* Native embedded browsing mockup: 887x1792, including its device frame. */
.process-cover__screen {
  position: absolute;
  left: 57%; top: 7%; width: 31%;
  aspect-ratio: 887 / 1792;
  border-radius: 17% / 8%;
  background: var(--color-ink);
}
.process-cover__screen img { width: 100%; left: 0; top: 0; }
.process-cover__arrow { position: absolute; left: 43%; top: 47%; width: 9%; border-top: 1px solid var(--color-muted); }
.process-cover__arrow::after { content: ''; position: absolute; right: 0; top: -4px; width: 7px; height: 7px; border-top: 1px solid var(--color-muted); border-right: 1px solid var(--color-muted); transform: rotate(45deg); }
.process-cover__labels {
  position: absolute;
  bottom: 7%; left: 9%; right: 9%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 17%;
  font-size: 12px;
  font-size: clamp(11px, 2.6cqw, 14px);
  font-weight: 500;
  line-height: 1.3;
}
.process-cover__labels span:last-child { text-align: center; }
.snack-process-visual { min-width: 0; }
.snack-process-visual figcaption { line-height: 1.5; }
.process-cover-example { max-width: 560px; }
.process-cover-example figcaption { color: var(--color-muted); margin-top: var(--space-3); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .process-cover { animation: none; transition: none; } }

/* SnackMe's original high-fidelity phone frames, in order. */
.snackme-screen-cover {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: clamp(12px, 2.1vw, 30px);
  padding: clamp(22px, 4.8vw, 70px) clamp(18px, 4.8vw, 70px);
  border-radius: var(--radius-art);
  list-style: none;
  background: linear-gradient(145deg, var(--study-canvas), var(--case-surface) 46%, color-mix(in srgb, var(--case-surface) 92%, var(--case-accent)));
}
.snackme-screen-cover li { min-width: 0; }
.snackme-screen-cover__device {
  aspect-ratio: 1 / 2.02;
  overflow: hidden;
  border-radius: 18% / 9%;
  background: var(--color-ink);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--case-accent) 16%, transparent);
}
.snackme-screen-cover__device img { width: 100%; height: 100%; object-fit: cover; }
.snackme-final-screens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  list-style: none;
}
.snackme-final-screens li {
  filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--color-ink) 12%, transparent));
}
.snackme-final-screens img {
  display: block;
  clip-path: inset(0.4% 1.9% var(--phone-bottom-inset, 0.6%) round 18% / 8.5%);
}
/* The checkout and tracking originals have extra black space below the bezel. */
.snackme-final-screens li:nth-child(n + 3) { --phone-bottom-inset: 1.15%; }

@media (max-width: 639px) {
  .snackme-final-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snackme-screen-cover {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px 10px;
    border-radius: var(--radius-panel);
  }
  .snackme-screen-cover li { grid-column: span 2; }
  .snackme-screen-cover li:nth-child(4) { grid-column: 2 / span 2; }
}