/* Reframing is done in CSS: source photos stay untouched. */
.royaume-art{display:block;color:white;background:#151413}
.royaume-art>img{width:100%;height:100%;object-fit:cover;object-position:65% 50%;transition:transform .6s}
.royaume-art:hover>img{transform:scale(1.035)}
.royaume-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0009,transparent 85%)}
.royaume-art .art-author{position:absolute;left:28px;top:26px;z-index:1;font-size:11px;letter-spacing:.16em}
.royaume-art-copy{position:absolute;left:28px;right:24px;bottom:26px;z-index:1;display:flex;flex-direction:column;gap:12px}
.royaume-art-copy strong{font-size:clamp(34px,4vw,58px);letter-spacing:-.055em;line-height:1.02}
.royaume-art-copy>span{font-size:14px}
.royaume-art-copy small{font-size:9px;letter-spacing:.12em}
.royaume-art .red{color:#ff665d}
@media(max-width:800px){.royaume-art-copy strong{font-size:40px}.royaume-art-copy,.royaume-art .art-author{left:24px}.royaume-art>img{object-position:70% 50%}}
@media print{.royaume-art{print-color-adjust:exact;-webkit-print-color-adjust:exact}.royaume-art-copy strong{font-size:25pt}.royaume-art .red{color:#ff665d!important}}
.aymane{object-position:50% 30%}
.alexis{object-position:50% 53%;filter:none}
.radio-photo{height:480px;aspect-ratio:auto;object-fit:cover;object-position:58% 60%}
/* Same coordinate plane for the photo and eye stripe at every screen size. */
.photo-art{container-type:size;display:block}
.photo-plane{position:absolute;left:50%;top:50%;width:max(100cqw,150cqh);aspect-ratio:3/2;transform:translate(-50%,-50%);transition:transform .6s}
.photo-plane img{width:100%;height:100%;object-fit:fill;transform:none!important}
.eye-stripe{position:absolute;left:53%;top:52.8%;width:19%;height:6%;background:#fff;z-index:2;transform:rotate(1deg)}
.photo-plane:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.05) 90%);z-index:1}
.photo-art:after{display:none}
.photo-art strong{z-index:3}
.photo-art:hover .photo-plane{transform:translate(-50%,-50%) scale(1.035)}
@media(max-width:1100px){.radio-photo{height:420px}}
@media(max-width:800px){.portrait{aspect-ratio:4/5}.alexis{object-position:50% 56%}.aymane{object-position:50% 38%}.radio-photo{height:auto;aspect-ratio:4/5;object-position:58% 60%}}
@media(prefers-reduced-motion:reduce){.photo-plane{transition:none}.photo-art:hover .photo-plane{transform:translate(-50%,-50%)}}
@media print{.portrait,.radio-photo{height:190pt;aspect-ratio:auto;object-fit:contain}.photo-art{print-color-adjust:exact;-webkit-print-color-adjust:exact}.contact p{max-width:none}}
