.portrait-spectrum,.portrait-transition{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;object-fit:cover}
.portrait-spectrum{z-index:1;opacity:0}
.portrait-surface[data-portrait-state="glasses"] .portrait-spectrum{opacity:1}
.portrait-transition{z-index:2;opacity:0}
.portrait-surface .portrait-shade{z-index:3;pointer-events:none}
.portrait-surface .portrait-photo{filter:grayscale(1)}
.portrait-surface:not([data-portrait-state="back"]){background:var(--bg)}
.portrait-surface:not([data-portrait-state="back"]) .portrait-photo{opacity:1!important;object-fit:cover;object-position:50% 50%}
.portrait-switch{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;padding:0;background:transparent;cursor:pointer;z-index:4;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.portrait-switch:focus-visible{outline:2px solid var(--accent);outline-offset:-5px}
.portrait-caption{z-index:5;pointer-events:none;display:grid;gap:7px}
.portrait-count{font:400 .75rem/1.2 var(--body);letter-spacing:.18em;opacity:.65}
.portrait-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.portrait-surface.is-loading .portrait-switch{cursor:progress}
@media(max-width:760px){.hero-interaction .interaction-touch{max-width:160px;text-align:right;line-height:1.5}.portrait-count{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.portrait-transition{display:none}}