/* The original work is the image. Photography fills its plate; complete UI
   surfaces keep their native proportions. No device frames or fake windows. */
.project-canvas { --project-field: var(--surface); position: relative; isolation: isolate; display: grid; place-items: center; grid-template-rows: minmax(0,1fr); aspect-ratio: var(--media-ratio,1.6); overflow: hidden; background: var(--project-field); }
.project-main { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.project-main > img { width: 100%; height: 100%; object-fit: contain; }
.project-canvas--photo .project-main > img { object-fit: cover; }
.project-canvas--campaign { grid-template-columns: repeat(2,minmax(0,1fr)); aspect-ratio: 1.6; }
.project-canvas--campaign .project-main > img { object-fit: cover; }
.project-companion { width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.project-companion img { width: 100%; height: 100%; object-fit: cover; }
.project-canvas--mobile { aspect-ratio: 1.5; }
.project-canvas--mobile .project-main { width: 28%; height: 86%; z-index: 2; }
.project-side { position: absolute; width: 27%; height: 79%; pointer-events: none; }
.project-side img { width: 100%; height: 100%; object-fit: contain; }
.project-side--left { left: 7%; top: 15%; }
.project-side--right { right: 7%; top: 5%; }
[data-project="nocap"] .project-canvas, [data-slug="nocap"] .project-canvas { --project-field: #c5d6de; }
[data-project="aura"] .project-canvas, [data-slug="aura"] .project-canvas { --project-field: #e6c8ce; }
[data-project="kindred"] .project-canvas, [data-slug="kindred"] .project-canvas { --project-field: #cad6c0; }
[data-project="lurker"] .project-canvas, [data-slug="lurker"] .project-canvas { --project-field: #d6d7de; }
[data-project="yearprogress"] .project-canvas, [data-slug="yearprogress"] .project-canvas { --project-field: #d9dacd; }
.work-visual .project-main, .work-visual .project-side { transition: transform .8s cubic-bezier(.2,.65,.3,1); }
.work-visual:is(:hover,:focus-visible) .project-main { transform: scale(1.025); }
.work-visual:is(:hover,:focus-visible) .project-side--left { transform: translateY(-10px); }
.work-visual:is(:hover,:focus-visible) .project-side--right { transform: translateY(10px); }
.project-canvas[data-selected-index]:not([data-selected-index="0"]) { grid-template-columns: 1fr; aspect-ratio: var(--selected-ratio,var(--media-ratio,1.6)); }
.project-canvas[data-selected-index]:not([data-selected-index="0"]) :is(.project-side,.project-companion) { display: none; }
.project-canvas[data-selected-index]:not([data-selected-index="0"]) .project-main { justify-self: center; width: 100%; height: 100%; padding: 4%; }
.project-canvas[data-selected-index]:not([data-selected-index="0"]) .project-main > img { object-fit: contain; }
@media (max-width: 600px) {
  .project-canvas--campaign { grid-template-columns: 1fr; aspect-ratio: .8; }
  .project-canvas--campaign .project-companion { display: none; }
  .project-canvas--mobile { aspect-ratio: 1.05; }
  .project-canvas--mobile .project-main { width: 33%; }
  .project-side { width: 30%; }
  .project-side--left { left: 2%; }
  .project-side--right { right: 2%; }
}
@media (prefers-reduced-motion: reduce) {
  .work-visual .project-canvas * { transition: none; transform: none !important; }
}