/* Approved composition, 28 October 2026. No experimental query variants. */
.state-vibes,.state-social{padding:0;place-items:stretch;--surface:#090b0c}
.vibes-diptych,.social-composition{position:relative;isolation:isolate;width:100%;height:var(--app-height);overflow:hidden;background:#090b0c}
.composition-image{display:block;width:100%;height:100%;object-fit:cover;animation:composition-arrive 280ms ease-out both}
.is-image-pending .composition-image{animation-play-state:paused}
.is-image-pending .vibes-diptych figcaption{visibility:hidden}
@keyframes composition-arrive{from{opacity:0}to{opacity:1}}
.vibes-diptych{display:grid;grid-template-columns:50% 50%;grid-template-rows:100%}
.vibes-diptych figure{position:relative;margin:0;min-width:0;min-height:0;overflow:hidden}
.vibes-city img{object-position:32% 100%}.vibes-field img{object-position:48% 48%}
.vibes-diptych figcaption{position:absolute;top:26px;left:28px;font-size:clamp(11px,.85vw,14px);font-weight:400;letter-spacing:.025em;color:#272d2e}
.social-destination{position:absolute;inset-block:0;display:block;overflow:hidden;color:#eceee5;text-decoration:none;outline:0}
.social-composition{--seam-half:calc(var(--app-height) * .025)}
/* Parallel to the photographed face fragment: dx/dy = .05 (~2.9deg).
   Both polygons share the same edge; the mobile cut stays independent. */
.social-instagram{left:0;width:calc(50% + var(--seam-half));clip-path:polygon(0 0,100% 0,calc(100% - var(--seam-half) * 2) 100%,0 100%);--photo-flip:-1}
.social-telegram{right:0;width:calc(50% + var(--seam-half));clip-path:polygon(calc(var(--seam-half) * 2) 0,100% 0,100% 100%,0 100%)}
.social-destination img{transform:scaleX(var(--photo-flip,1))}
.social-instagram img{object-position:50% 82%}.social-telegram img{object-position:50% 47%}
.destination-label{position:absolute;display:grid;gap:4px;left:max(20px,3vw);bottom:max(26px,6vh);padding:8px 11px;color:#e4e3dc;background:#151817ed;border:1px solid #c2c4bc40;font-size:10px;line-height:1.25;letter-spacing:.015em;transition:background-color 180ms ease,border-color 180ms ease}
.destination-label>span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#adafa8}
.destination-label strong{font-size:clamp(14px,1.15vw,17px);font-weight:400}.destination-label i{font-style:normal}
.social-telegram .destination-label{left:auto;right:max(20px,3vw);top:max(25px,6vh);bottom:auto;text-align:right;background:#15191ded;color:#e1e5e6;border-color:#c2c8cd40}
.social-telegram .destination-label>span{color:#a9b1b7}
/* Keep captions above the actual player, not an assumed fixed toolbar height. */
.social-instagram .destination-label{bottom:max(26px,6vh,calc(var(--controls-clearance,3rem) + 24px))}
.social-destination:focus-visible .destination-label{outline:2px solid #eff5df;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.social-instagram:hover .destination-label{background:#242925;border-color:#d8d9ce80}.social-telegram:hover .destination-label{background:#232a30;border-color:#d1d9df80}}
@media(hover:hover) and (pointer:fine) and (min-width:701px) and (min-aspect-ratio:4/5){
 .social-destination img{transition:transform 650ms cubic-bezier(.2,.65,.3,1)}
 .social-destination:hover img,.social-destination:focus-visible img{transform:scaleX(var(--photo-flip,1)) scale(1.025)}
}
.state-vibes .route-control,.state-social .route-control{color:#fff;text-shadow:0 1px 2px #000;background:#080c10d9;padding:2px 8px;border-radius:2px}
.state-vibes .route-button,.state-social .route-button{opacity:1}
@media(max-width:700px),(max-aspect-ratio:4/5){
 .vibes-diptych{grid-template-columns:100%;grid-template-rows:64% 36%}
 .vibes-field{grid-row:1}.vibes-city{grid-row:2;border-top:1px solid #242a2b}
 .vibes-field img{object-position:48% 51%}.vibes-city img{object-position:28% 100%}
 .vibes-diptych figcaption{top:22px;left:22px;font-size:11px}
 .vibes-city figcaption{top:18px;left:auto;right:22px;background:#080c10c4;color:#fff;padding:5px 8px}
 .social-destination{inset:0;width:100%;height:100%}
 .social-instagram{clip-path:polygon(0 24%,100% 76%,100% 100%,0 100%)}
 .social-telegram{clip-path:polygon(0 0,100% 0,100% 76%,0 24%)}
 .social-instagram img{object-position:50% 89%}
 .social-telegram{--photo-flip:-1}
 .social-telegram img{object-position:50% 47%}
 .destination-label{left:max(24px,6vw,env(safe-area-inset-left));padding:8px 10px}
 .social-instagram .destination-label{bottom:calc(var(--controls-clearance,3.5rem) + 24px)}
 .destination-label strong{font-size:15px}.destination-label>span{font-size:8px}
 .social-telegram .destination-label{top:max(24px,6vw,env(safe-area-inset-top));left:max(24px,6vw,env(safe-area-inset-left));right:auto;bottom:auto;text-align:left}
}
@media(prefers-reduced-motion:reduce){.composition-image{animation:none!important;opacity:1}.social-destination img,.destination-label{transition:none}.social-destination img,.social-destination:hover img,.social-destination:focus-visible img{transform:scaleX(var(--photo-flip,1))}}