.hero-photo{margin:var(--space-0);background:var(--hero-caption-bg);border-radius:var(--radius-lg);overflow:hidden}
.image-shell{aspect-ratio:var(--hero-ratio)}.hero-photo img{display:block;width:var(--full);height:var(--full);object-fit:cover;object-position:var(--caption-position)}
.hero-photo figcaption{padding:var(--space-6)}.hero-photo figcaption p{font-size:var(--text-base);margin-top:var(--space-2)}
.photo-button{position:relative;padding:var(--space-0);border:0;background:var(--card-bg);width:var(--full);height:var(--media-height);border-radius:var(--card-radius);display:block;cursor:zoom-in}
.photo-button img{display:block;width:var(--full);height:var(--full);object-fit:contain;transition:transform var(--duration-normal) var(--ease-out)}
.photo-expand{position:absolute;right:var(--space-3);bottom:var(--space-3);background:var(--color-bg);color:var(--color-text);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);pointer-events:none}
.video-frame{height:var(--media-height);background:var(--color-media-bg);border-radius:var(--card-radius);overflow:hidden}.video-frame video{display:block;width:var(--full);height:var(--full);object-fit:contain}
.photo-dialog{border:0;border-radius:var(--radius-lg);background:var(--color-bg);color:var(--color-text);padding:var(--space-4);max-width:min(var(--dialog-width),var(--dialog-max));max-height:var(--dialog-height);overflow:auto}.photo-dialog::backdrop{background:var(--color-backdrop)}
.photo-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}.photo-dialog h2{font-size:var(--text-base);letter-spacing:normal}.photo-close{background:var(--card-bg);border:0;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);color:var(--color-text);font-size:var(--text-sm)}.photo-close span{font-size:var(--text-lg);margin-left:var(--space-3)}
.expanded-photo{display:block;max-width:var(--full);max-height:var(--photo-height);width:auto;height:auto;margin:auto;object-fit:contain}body:has(.photo-dialog[open]){overflow:hidden}
[data-image-shell],[data-route-skeleton]{position:relative}[data-image-shell]{overflow:hidden}
[data-route-skeleton].is-loading{overflow:hidden}
[data-image-shell].is-loading::before,[data-route-skeleton].is-loading::before,[data-image-shell].is-loading::after,[data-route-skeleton].is-loading::after{content:'';position:absolute;inset:var(--space-0);pointer-events:none;border-radius:inherit;opacity:var(--opacity-full);transition:opacity var(--duration-normal) var(--ease-out)}
[data-image-shell].is-loading::before,[data-route-skeleton].is-loading::before{background:var(--skeleton-bg)}
[data-image-shell].is-loading::after,[data-route-skeleton].is-loading::after{background:var(--skeleton-gradient);animation:shimmer var(--duration-shimmer) var(--ease-soft) infinite}
[data-image-shell].is-loaded::before,[data-image-shell].is-loaded::after,[data-route-skeleton].is-loaded::before,[data-route-skeleton].is-loaded::after{opacity:var(--opacity-hidden)}
.image-error{position:absolute;inset:var(--space-0);display:grid;place-items:center;padding:var(--space-6);background:var(--card-bg);color:var(--color-text);font-size:var(--text-base)}
@keyframes shimmer{from{transform:translateX(calc(-1 * var(--full)))}to{transform:translateX(var(--full))}}
@media(hover:hover){.photo-button:hover img{transform:scale(var(--scale-photo))}}
@media(min-width:48rem){.photo-button,.video-frame{height:var(--media-height-tablet)}.video-card{grid-column:span 2}}
@media(min-width:68rem){.photo-button,.video-frame{height:var(--media-height-wide)}}
@media(prefers-reduced-motion:reduce){.photo-button:hover img{transform:none}}