/* The original JPEGs stay intact. These viewports crop only their presentation. */
.photo-host{position:relative;display:grid;place-items:center;container-type:size;width:100%;height:100%;min-height:0;overflow:hidden}
.photo-crop{--ratio:.8;--scale:142.222222%;--top:-11.111111%;--tone:brightness(1.08) contrast(1.03);position:relative;display:block;width:min(100cqw,calc(100cqh * var(--ratio)));aspect-ratio:var(--ratio);overflow:hidden;background:#080c0d}
.photo-crop img,.album-strip .photo-crop img,.viewer-frame .photo-crop img{position:absolute;display:block;left:0;top:var(--top);width:100%;height:var(--scale);min-height:0;max-width:none;object-fit:fill;flex:none;filter:var(--tone)}
.crop-1{--top:-42.222222%;--tone:brightness(1.03) contrast(1.04) saturate(.93)}
.crop-2{--top:-16.666667%;--tone:brightness(1.02) contrast(1.04) saturate(.96)}
.crop-3{--ratio:.750952986;--scale:162.642948%;--top:-31.257942%;--tone:brightness(1.35) contrast(1.03) saturate(.85)}
.crop-4{--ratio:1.33611691;--scale:100%;--top:0%;--tone:brightness(1.06) contrast(1.03)}
.viewer-frame>.photo-host{flex:1}
.album-strip b{font-weight:400;pointer-events:none}
.photo-change .viewer-frame .photo-crop{animation:photo-arrive .45s var(--ease) both}
.photo-change .viewer-frame .photo-crop img{animation:none}
.crop-birthday{--ratio:.8;--scale:142.222222%;--top:-42.222222%;--tone:brightness(1.04) contrast(1.03)}
.front-photos{position:relative;flex:none;width:min(100%,430px,43.84dvh);aspect-ratio:1.09589;margin:0 0 26px}
.front-photo{position:absolute;display:block;padding:0;border:1px solid #d9b78075;background:#080c0d;aspect-ratio:.8;box-shadow:0 18px 40px #0005;overflow:hidden;transition:transform .5s var(--ease),border-color .3s}
.front-first{left:0;top:0;width:73%;transform:rotate(-3deg)}
.front-second{right:0;bottom:0;width:48%;transform:rotate(5deg);z-index:2;border:4px solid var(--night)}
.front-photo:hover{transform:rotate(0);border-color:var(--gold)}
.front-expand{position:absolute;right:9px;bottom:8px;color:var(--ivory);font-size:22px;text-shadow:0 1px 6px #000;pointer-events:none}
.front-age{position:absolute;left:15px;bottom:2px;font:72px/.8 Georgia,serif;color:var(--ivory);text-shadow:0 2px 16px #0009;pointer-events:none;z-index:3}
.front-age>span{display:block;font:8px/1.2 'Segoe UI',Arial,sans-serif;letter-spacing:5px;padding:8px 0 0 5px}
.intro .scene-copy{flex:none}
@media(max-height:650px){.front-photos{margin-bottom:18px;width:min(100%,430px,40dvh)}.front-age{font-size:56px}.front-second{border-width:3px}}
@media(max-height:450px) and (min-width:500px){.intro{gap:35px}.front-photos{width:min(220px,52dvh);margin:0}.front-age{font-size:40px;left:8px}.front-age>span{font-size:6px;letter-spacing:3px;padding-top:4px}.front-expand{font-size:16px}.front-second{border-width:2px}}