/* Add after support-project-illustrations.css. Uses the existing 600 × 400
   browser-and-phone family. All three support cards keep their real links. */
.uxav2 .support-disclosure .support-project[href="/mywork/go-by-truck/"]{--support-accent:#315a88}
.uxav2 .support-disclosure .support-project[href="/mywork/healing-that-matters/"]{--support-accent:#386c6a}
.uxav2 .support-disclosure .support-project[href="/mywork/greek-mountain-man/"]{--support-accent:#436d5e}
.uxav2 .support-disclosure .support-project{
  background:linear-gradient(147deg,color-mix(in srgb,var(--support-accent) 3%,white),#fff 62%,#f8fafc);
}
.uxav2 .support-disclosure .support-project::after{
  background:radial-gradient(ellipse 280px 210px at var(--support-x,55%) var(--support-y,45%),color-mix(in srgb,var(--support-accent) 11%,transparent),transparent 78%);
}
.uxav2 .support-disclosure .support-project:focus-visible::after{opacity:1}
.uxav2 .support-disclosure .support-project .text-link{transition:color 180ms ease}
@media(hover:hover) and (pointer:fine){
  .uxav2 .support-disclosure .support-project:hover .text-link{color:var(--support-accent)}
}
.uxav2 .support-disclosure .support-project:focus-visible .text-link{color:var(--support-accent)}

/* Healing's previous 27% × 76% phone was much larger than the 20% × 56%
   Greek reference. The stage now uses the same contain geometry as both peers. */
.uxav2 .support-disclosure .support-artwork>.htm-thumb{
  position:absolute;inset:auto;top:50%;left:50%;translate:-50% -50%;
  width:min(100%,150cqh);height:auto!important;min-height:0!important;
  aspect-ratio:600/400!important;
}
.uxav2 .support-truck-art .uxacsi-truck-art,
.uxav2 .support-truck-art .uxacsi-truck-art::before{
  background:transparent;
}
.uxav2 .support-truck-art .uxacsi-truck-art::before{display:none}

/* One browser frame, one white phone frame, the same baseline and overlap.
   Website colors stay inside the screen, rather than filling the whole tile. */
.uxav2 .support-truck-art .uxacsi-truck-art__browser,
.uxav2 .support-greek-art .uxacsi-gmm-art__browser,
.uxav2 .support-artwork .htm-thumb__browser{
  left:5%;top:12%;width:80%;height:73%;
  border:0.166667cqw solid #dce3ee;border-radius:2.166667cqw;
  background:#fff;box-shadow:0 3.666667cqw 7.5cqw rgb(44 62 99 / 14%);
  transform:rotate(-1.3deg);transition:transform 320ms cubic-bezier(.22,1,.36,1);
}
.uxav2 .support-truck-art .uxacsi-truck-art__phone,
.uxav2 .support-greek-art .uxacsi-gmm-art__phone,
.uxav2 .support-artwork .htm-thumb__phone{
  z-index:4;inset:auto 5% 7% auto;width:20%;height:56%;
  padding:2.166667cqw 1cqw 1.166667cqw;
  overflow:hidden;border:0.5cqw solid #20355a;border-radius:2.666667cqw;
  background:#fff;box-shadow:0 2.166667cqw 4.166667cqw rgb(32 53 90 / 17%);
  transform:rotate(4deg);transition:transform 320ms cubic-bezier(.22,1,.36,1);
}
.uxav2 .support-truck-art .uxacsi-truck-art__phone::before,
.uxav2 .support-greek-art .uxacsi-gmm-art__phone::before{
  left:39%;right:39%;top:0.666667cqw;height:0.666667cqw;
  border-radius:1.5cqw;background:#20355a;
}
.uxav2 .support-artwork .htm-thumb__speaker{
  top:0.666667cqw;left:39%;width:22%;height:0.666667cqw;
  border-radius:1.5cqw;background:#20355a;
}
.uxav2 .support-artwork .htm-thumb__phone{--htm-u:.74px}
@supports(width:1cqw){.uxav2 .support-artwork .htm-thumb__phone{--htm-u:.1233333cqw}}
.uxav2 .support-artwork .htm-thumb__phone-screen{
  border:0;border-radius:0.666667cqw;padding-top:0;background:#fff;
}
.uxav2 .support-artwork .htm-thumb__phone-hero{padding-top:calc(10 * var(--htm-u))}
.uxav2 .support-artwork .htm-thumb__phone-hero>strong{font-size:calc(17 * var(--htm-u))}
.uxav2 .support-truck-art .uxacsi-truck-art__bar{background:#f6f8fa;border-bottom-color:#e2e7ef}

@media(hover:hover) and (pointer:fine){
  .uxav2 .support-project:hover :is(.uxacsi-truck-art__browser,.uxacsi-gmm-art__browser,.htm-thumb__browser){transform:translateY(-3px) rotate(-1.3deg)}
  .uxav2 .support-project:hover :is(.uxacsi-truck-art__phone,.uxacsi-gmm-art__phone,.htm-thumb__phone){transform:translateY(-5px) rotate(4deg)}
}
@media(max-width:760px){
  .uxav2 .support-disclosure .support-project{background:linear-gradient(150deg,#fff 72%,#f5f7fa)}
}
@media(prefers-reduced-motion:reduce){
  .uxav2 .support-project :is(.uxacsi-truck-art__browser,.uxacsi-gmm-art__browser,.htm-thumb__browser,.uxacsi-truck-art__phone,.uxacsi-gmm-art__phone,.htm-thumb__phone){transition:none!important}
  .uxav2 .support-project:hover :is(.uxacsi-truck-art__browser,.uxacsi-gmm-art__browser,.htm-thumb__browser){transform:rotate(-1.3deg)}
  .uxav2 .support-project:hover :is(.uxacsi-truck-art__phone,.uxacsi-gmm-art__phone,.htm-thumb__phone){transform:rotate(4deg)}
}