/* Shared frosted surface for every media lightbox. */
body dialog:is(#viewer,#photo-viewer,#film,#project-viewer){
 position:fixed;inset:20px;width:calc(100vw - 40px);height:calc(100dvh - 40px);max-width:none;max-height:none;box-sizing:border-box;margin:0;padding:28px clamp(20px,4vw,64px);border:0;border-radius:16px;overflow:auto;overscroll-behavior:contain;
 background:linear-gradient(180deg,rgba(74,78,80,.47),rgba(91,96,99,.44))!important;color:#fff!important;backdrop-filter:blur(36px) saturate(115%);-webkit-backdrop-filter:blur(36px) saturate(115%);box-shadow:0 20px 70px rgba(0,0,0,.18)
}
body dialog:is(#viewer,#photo-viewer,#film,#project-viewer)::backdrop{background:rgba(0,0,0,.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body dialog:is(#viewer,#photo-viewer,#film,#project-viewer) :is(p,h2,h3,a){color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.4)}
body dialog :is(#viewer-content,#project-media){background:transparent}
body dialog :is(.close-viewer,#close-photo){position:sticky;top:0;display:block;margin:0 0 18px auto;background:#242628e8;color:#fff;border:0;border-radius:22px;padding:10px 18px;z-index:5;cursor:pointer}
body dialog#photo-viewer>img,body dialog#film>video,body dialog #viewer-content>img,body dialog #viewer-content>video{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 170px);object-fit:contain;margin:auto}
@media(max-width:600px){body dialog:is(#viewer,#photo-viewer,#film,#project-viewer){inset:8px;width:calc(100vw - 16px);height:calc(100dvh - 16px);padding:16px;border-radius:12px}}
/* A fine highlight defines the edge of the frosted glass. */
body dialog:is(#all-work,#viewer,#photo-viewer,#film,#project-viewer){border:1px solid rgba(255,255,255,.3);box-sizing:border-box}
/* Center the glass panel independently of page scroll and scrollbar width. */
body dialog:is(#all-work,#viewer,#photo-viewer,#film,#project-viewer){inset:0;margin:auto;width:calc(100% - 40px);height:calc(100dvh - 40px);border:.25px solid rgba(255,255,255,.3)}
@media(max-width:600px){body dialog:is(#all-work,#viewer,#photo-viewer,#film,#project-viewer){inset:0;margin:auto;width:calc(100% - 16px);height:calc(100dvh - 16px)}}
/* Inset shadow preserves the fractional hairline without border pixel rounding. */
body dialog:is(#all-work,#viewer,#photo-viewer,#film,#project-viewer){border:0;box-shadow:inset 0 0 0 .25px rgba(255,255,255,.3),0 20px 70px rgba(0,0,0,.18)}
/* Individual media viewers fill the window; collection keeps its glass frame. */
body dialog:is(#viewer,#photo-viewer,#film,#project-viewer){inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none}
/* Search shares the collection glass rather than the green page surface. */
body dialog.search-dialog{position:fixed;inset:0;margin:auto;width:calc(100% - 40px);height:calc(100dvh - 40px);max-width:none;max-height:none;box-sizing:border-box;padding:38px clamp(20px,4vw,64px);border:0;border-radius:16px;overflow:auto;background:linear-gradient(180deg,rgba(74,78,80,.47),rgba(91,96,99,.44))!important;color:#fff!important;backdrop-filter:blur(36px) saturate(115%);-webkit-backdrop-filter:blur(36px) saturate(115%);box-shadow:inset 0 0 0 .25px rgba(255,255,255,.3),0 20px 70px rgba(0,0,0,.18)}
body dialog.search-dialog::backdrop{background:rgba(0,0,0,.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body dialog.search-dialog :is(label,p,strong,span,i,a){color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.4)}
body dialog.search-dialog .service-query{background:rgba(30,32,34,.25);color:#fff;border:1px solid rgba(255,255,255,.3)}
body dialog.search-dialog .service-query:focus-visible{outline:1px solid rgba(255,255,255,.65);outline-offset:3px}
body dialog.search-dialog .service-query::placeholder{color:#eee}
body dialog.search-dialog .service-results a{border-color:rgba(255,255,255,.2)}
body dialog.search-dialog .search-close{background:#242628e8;color:#fff;border:0;border-radius:22px;padding:10px 18px}
@media(max-width:600px){body dialog.search-dialog{width:calc(100% - 16px);height:calc(100dvh - 16px);padding:16px;border-radius:12px}}
/* A simple white rectangular search field. */
body dialog.search-dialog .service-query{background:#fff!important;color:#171717!important;border:1px solid #fff!important;border-radius:0!important;box-shadow:none!important;text-shadow:none;caret-color:#171717;color-scheme:light}
body dialog.search-dialog .service-query::placeholder{color:#666!important}
body dialog.search-dialog .service-query:focus-visible{outline:1px solid rgba(255,255,255,.75);outline-offset:4px}
/* Keep focus within the field rather than drawing a second outer rectangle. */
body dialog.search-dialog .service-query:focus,body dialog.search-dialog .service-query:focus-visible{outline:none!important;outline-offset:0;box-shadow:inset 0 -2px 0 #555!important}
/* Outline-only search field. */
body dialog.search-dialog .service-query{background:transparent!important;color:#fff!important;border:1px solid #fff!important;border-radius:0!important;caret-color:#fff;color-scheme:dark}
body dialog.search-dialog .service-query::placeholder{color:rgba(255,255,255,.7)!important}
body dialog.search-dialog .service-query:focus,body dialog.search-dialog .service-query:focus-visible{outline:none!important;box-shadow:none!important}
/* Center individual films in the viewport, independently of controls and titles. */
body dialog#viewer[open]:has(#viewer-content>video){display:grid;place-items:center;padding:64px 4vw}
body dialog#viewer:has(#viewer-content>video) #viewer-content{width:100%;min-width:0}
body dialog#viewer:has(#viewer-content>video) #viewer-content>video{max-height:calc(100dvh - 128px);margin:auto}
body dialog#viewer:has(#viewer-content>video) .close-viewer{position:absolute;top:20px;right:24px;margin:0}
body dialog#viewer:has(#viewer-content>video) #viewer-title{position:absolute;bottom:20px;left:4vw;right:4vw;margin:0;text-align:center}
body dialog#film[open]{display:grid;place-items:center;padding:64px 4vw}
body dialog#film #player{max-height:calc(100dvh - 128px);max-width:100%;width:auto;height:auto;object-fit:contain;margin:auto}
body dialog#film #close-film{position:absolute;top:20px;right:24px}
body dialog#film #film-title{position:absolute;bottom:20px;left:4vw;right:4vw;margin:0;text-align:center;font-size:14px}
/* Consistent WebKit controls; visible neutral focus for keyboard navigation. */
body dialog :is(.close-viewer,.all-work-close,.search-close,#close-photo,#close-film){-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;box-shadow:none;border:0;color:#fff;background:#242628e8;outline:none}
body dialog :is(.close-viewer,.all-work-close,.search-close,#close-photo,#close-film):focus{outline:none}
body dialog :is(.close-viewer,.all-work-close,.search-close,#close-photo,#close-film):focus-visible{outline:1px solid rgba(255,255,255,.65)!important;outline-offset:3px}
body dialog:focus{outline:none}

/* Closed media dialogs must never retain a painted overlay. */
body dialog#viewer:not([open]),body dialog#all-work:not([open]){display:none!important}

/* Only open dialogs own painted glass. One backdrop filter per modal avoids
   stacked blur surfaces when a media viewer opens over the collection. */
body dialog:not([open]){display:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none!important}
body dialog[open]{isolation:isolate}
body dialog:is(#all-work,#viewer,#photo-viewer,#film,#project-viewer,.search-dialog)::backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(0,0,0,.10)}