#camera-frame { min-height:20rem; }
#camera-player-slot { position:absolute; inset:0; }
#camera-player-slot[hidden],#camera-fallback[hidden],#camera-retry[hidden] { display:none; }
/* Share the homepage's selected photo; retain the original if its selector is unavailable. */
.camera-fallback { --camera-still-image:var(--hero-desktop-image,url('lake-christopher-hero.jpg')); min-height:100%; display:grid; place-items:center; padding:clamp(1.3rem,4vw,3rem); background:linear-gradient(100deg,rgba(17,24,32,.92),rgba(23,32,40,.8)),var(--camera-still-image) center/cover; color:var(--cream,#fff5e8); }
.camera-fallback-copy { max-width:38rem; text-align:center; }
.camera-kicker { margin:0 0 .6rem; color:var(--sunrise,#efb954); font-size:.875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.camera-fallback h3 { margin:0 0 .75rem; color:inherit; font-family:var(--display,Georgia,serif); font-size:clamp(1.7rem,3.3vw,2.7rem); line-height:1.12; }
.camera-fallback #camera-detail { margin:0 auto 1.2rem; max-width:35rem; color:#fff5e8; font-size:1rem; line-height:1.6; }
.camera-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; }
.camera-actions a,.camera-actions button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.65rem 1rem; border:1px solid #efb954; border-radius:.4rem; background:#efb954; color:#261b35; font:800 1rem/1.3 var(--body,system-ui,sans-serif); text-decoration:none; cursor:pointer; }
.camera-actions button { color:#fff5e8; border-color:#fff5e8; background:#261b35; }
.camera-actions a:hover,.camera-actions button:hover { filter:brightness(1.1); }
.camera-actions :focus-visible { outline:3px solid white; outline-offset:4px; }
.camera-still-label { display:block; margin-top:1rem; color:#eee2d4; font-size:.875rem; }
#camera-status[data-state="offline"] i,#camera-status[data-state="unavailable"] i { background:#c7bcae; box-shadow:none; }
@media(max-width:38rem) { #camera-frame { aspect-ratio:auto; min-height:24rem; } #camera-frame[data-player="visible"] { min-height:0; aspect-ratio:16/9; } .camera-fallback { --camera-still-image:var(--hero-mobile-image,var(--hero-desktop-image,url('lake-christopher-hero.jpg'))); min-height:24rem; } }