.case-crop-arena { --case-accent: #a8c4ff; }
.crop-cover { --crop-mat: #dbe0d5; --crop-loop: 9s; background: var(--crop-mat); color: #30463d; }
.crop-cover__ratio { position: absolute; top: 22px; right: 28px; display: grid; min-width: 54px; padding: 4px 8px; border: 1px solid #30463d40; border-radius: 4px; font-size: 11px; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; }
.crop-cover__photo { position: absolute; top: 48%; left: 50%; width: min(84%, 420px, calc(96cqw - 160px)); aspect-ratio: 3 / 2; transform: translate(-50%, -50%); overflow: hidden; }
.crop-cover__photo img { display: block; width: 100%; height: auto; }
.crop-cover__frame { position: absolute; inset: 0; border: 1px solid currentColor; color: #fffdf4; box-shadow: 0 0 0 500px var(--crop-mat); animation: crop-cover-frame var(--crop-loop) ease-in-out infinite; }
.crop-cover__frame::before { content: ""; position: absolute; inset: 0; opacity: .25; background: linear-gradient(to right, transparent calc(100% / 3), currentColor calc(100% / 3), currentColor calc(100% / 3 + 1px), transparent calc(100% / 3 + 1px), transparent calc(200% / 3), currentColor calc(200% / 3), currentColor calc(200% / 3 + 1px), transparent calc(200% / 3 + 1px)), linear-gradient(to bottom, transparent calc(100% / 3), currentColor calc(100% / 3), currentColor calc(100% / 3 + 1px), transparent calc(100% / 3 + 1px), transparent calc(200% / 3), currentColor calc(200% / 3), currentColor calc(200% / 3 + 1px), transparent calc(200% / 3 + 1px)); }
.crop-cover__frame i { position: absolute; width: 14px; height: 14px; border: solid currentColor; }
.crop-cover__frame i:nth-child(1) { top: 0; left: 0; border-width: 3px 0 0 3px; }
.crop-cover__frame i:nth-child(2) { top: 0; right: 0; border-width: 3px 3px 0 0; }
.crop-cover__frame i:nth-child(3) { bottom: 0; right: 0; border-width: 0 3px 3px 0; }
.crop-cover__frame i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 3px 3px; }
.crop-cover__caption { position: absolute; bottom: 22px; left: 16px; right: 16px; text-align: center; }
.crop-cover__message { display: grid; font-size: 16px; font-weight: 500; line-height: 1.5; }
.crop-cover__whole, .crop-cover__cut { grid-area: 1 / 1; }
.crop-cover__whole { animation: crop-cover-whole var(--crop-loop) ease-in-out infinite; }
.crop-cover__cut { opacity: 0; color: #94452d; animation: crop-cover-cut var(--crop-loop) ease-in-out infinite; }
/* A 3:2 image narrowed to 37.5% of its width is a 9:16 crop. */
@keyframes crop-cover-frame {
  0%, 18%, 84%, 100% { inset: 0; color: #fffdf4; }
  36%, 66% { inset: 0 0 0 62.5%; color: #b85e40; }
}
@keyframes crop-cover-whole {
  0%, 18%, 84%, 100% { opacity: 1; }
  30%, 72% { opacity: 0; }
}
@keyframes crop-cover-cut {
  0%, 24%, 78%, 100% { opacity: 0; }
  36%, 66% { opacity: 1; }
}
@container (max-width: 430px) {
  .crop-cover__ratio { top: 12px; right: 16px; }
  .crop-cover__photo { width: calc(100cqw - 136px); }
  .crop-cover__caption { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .crop-cover .motion { animation: none; }
}
.crop-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.crop-film { margin: 48px 0 0; }
.crop-film video { display: block; width: 100%; height: auto; background: #090e15; border: 1px solid var(--case-outline); border-radius: 12px; }
.crop-film figcaption { display: flex; justify-content: space-between; align-items: start; gap: 32px; padding-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.crop-film figcaption > span { max-width: 65ch; }
.crop-film figcaption strong { color: var(--ink); font-weight: 500; }
.crop-film figcaption > a { flex-shrink: 0; min-height: 44px; color: var(--case-accent); }
.crop-film figcaption > a span { display: block; color: var(--muted); font-size: 11px; }
.case-crop-arena .chapter-heading { margin-bottom: 32px; }
.crop-copy { max-width: 85ch; }
.crop-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 48px; }
.crop-steps article { padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--case-tone) 45%, transparent); }
.crop-steps article:nth-child(2) { --case-tone: var(--case-mint); }
.crop-steps article:nth-child(3) { --case-tone: var(--case-peach); }
.crop-steps .case-kicker { color: var(--case-tone); }
.crop-steps h3 { margin: 16px 0; font-size: 22px; }
.crop-steps article > p:last-child { color: var(--body); font-size: 15px; line-height: 1.8; }
.crop-still { margin: 48px 0 0; }
.crop-still img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--case-outline); }
.crop-still figcaption { max-width: 90ch; margin-top: 16px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.crop-walkthrough { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--case-gutter); }
.crop-walkthrough h3 { margin: 0 0 16px; }
@media (max-width: 800px) {
  .crop-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crop-steps, .crop-walkthrough { grid-template-columns: 1fr; gap: 28px; }
  .crop-film figcaption { flex-direction: column; gap: 16px; }
}
@media (max-width: 480px) {
  .crop-facts { grid-template-columns: 1fr; }
  .crop-cover__ratio { right: 20px; }
  .crop-cover__message { font-size: 14px; }
}