#home .portrait-original { overflow: hidden; }
.portrait-composite { position: relative; height: 100%; max-width: 100%; aspect-ratio: 853 / 1280; }
#home .portrait-composite img { display: block; width: 100%; height: 100%; object-fit: contain; }
.portrait-composite canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.portrait-motion { position: absolute; right: 8px; bottom: 8px; padding: 8px 10px; background: #07121e; color: #d0edff; border: 1px solid #517083; border-radius: 3px; font: inherit; font-size: 11px; z-index: 2; cursor: pointer; }
.portrait-motion[hidden] { display: none; }
.portrait-motion:focus-visible { outline: 2px solid #b0e9ff; outline-offset: 3px; }
@media(prefers-reduced-motion:reduce) { .portrait-composite canvas, .portrait-motion { display: none; } }

/* Approved muted teal treatment shared by the photo and animated layer. */
.portrait-composite img, .portrait-composite canvas { filter: hue-rotate(-25deg) saturate(.55); }

/* Equal side columns keep the portrait on the page centreline. */
#home .showcase-stage { grid-template-columns: minmax(0,1fr) minmax(0,1.18fr) minmax(0,1fr); }
#home .portrait-original { justify-self: center; width: 100%; }
@media(max-width:1000px) {
 #home .showcase-stage { grid-template-columns: minmax(0,1fr); }
 #home .portrait-original { grid-column: 1; grid-row: 1; }
 #home .showcase-intro { grid-column: 1; grid-row: 2; justify-self: center; width: 100%; max-width: 560px; }
 #home .showcase-intro p { max-width: none; }
 #home .showcase-note { grid-column: 1; grid-row: 3; justify-self: center; width: 100%; max-width: 560px; }
}