/* Shared cinematic media viewer; isolated from legacy gallery styles. */
.nn-viewer{border:1px solid #ffffff21;border-radius:24px;padding:0;background:#14151cee;color:#f0edf0;width:min(1200px,94vw);max-width:94vw;max-height:94dvh;overflow:hidden;box-shadow:0 40px 160px #000a;font-family:inherit;backdrop-filter:blur(30px)}
.nn-viewer::backdrop{background:#080811db;backdrop-filter:blur(18px)}
.nn-viewer[open]{display:flex;flex-direction:column;animation:nn-reveal .45s cubic-bezier(.16,1,.3,1)}
.nn-viewer header,.nn-viewer footer{display:flex;align-items:center;gap:16px;padding:18px 24px;background:linear-gradient(120deg,#ffffff07,transparent);flex-shrink:0}
.nn-viewer header{border-bottom:1px solid #ffffff10}.nn-viewer footer{border-top:1px solid #ffffff10;justify-content:space-between}
.nn-viewer .nn-title{margin:0;font-size:15px;font-weight:500;line-height:1.4}.nn-eyebrow{display:block;color:#e17691;font-size:10px;letter-spacing:.24em;margin-bottom:5px;text-transform:uppercase}
.nn-viewer button,.nn-viewer a{color:#ece8ed;background:#ffffff09;border:1px solid #ffffff1a;border-radius:50%;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;font:24px system-ui;flex-shrink:0;transition:background .2s,transform .2s}
.nn-viewer button:hover,.nn-viewer a:hover{background:#c91f4c;transform:translateY(-2px)}.nn-viewer :focus-visible{outline:2px solid #ed8da5;outline-offset:4px}.nn-close{margin-left:auto}
.nn-stage{position:relative;display:grid;place-items:center;min-height:160px;height:min(64dvh,760px);overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#c91f4c0c,transparent 65%),#0e1016;touch-action:pan-y}
.nn-stage>img{display:block;width:100%;height:100%;object-fit:contain;min-height:0;max-height:100%;padding:18px 70px;user-select:none}.nn-stage iframe{border:0;width:100%;height:100%;background:#000}.nn-viewer.nn-video .nn-stage{height:auto;aspect-ratio:16/9}
.nn-prev,.nn-next{position:absolute;top:calc(50% - 22px);z-index:2;backdrop-filter:blur(16px)}.nn-prev{left:16px}.nn-next{right:16px}
.nn-count{font-size:12px;letter-spacing:.12em;color:#c3bdca;white-space:nowrap}.nn-thumbs{display:flex;gap:8px;overflow:auto;max-width:70%;padding:4px}.nn-thumbs button{border-radius:8px;width:48px;height:40px;overflow:hidden;opacity:.5}.nn-thumbs button[aria-current=true]{opacity:1;border-color:#e17691;box-shadow:0 0 0 2px #c91f4c33}.nn-thumbs img{width:100%;height:100%;object-fit:cover}.nn-error{position:absolute;background:#181a23;padding:12px;border-radius:12px;color:#e8bac6;font-size:13px}
@keyframes nn-reveal{from{opacity:0;transform:translateY(25px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:600px){.nn-viewer{border-radius:18px;width:96vw;max-width:96vw}.nn-viewer header,.nn-viewer footer{padding:12px 14px}.nn-stage{height:60dvh}.nn-stage>img{padding:10px 8px 60px}.nn-prev,.nn-next{top:auto;bottom:12px}.nn-viewer button,.nn-viewer a{width:40px;height:40px}.nn-title{max-width:64vw}.nn-thumbs{max-width:65%}}
@media(prefers-reduced-motion:reduce){.nn-viewer[open]{animation:none}.nn-viewer *{transition:none!important}}
.nn-viewer [hidden]{display:none!important}

.nn-stage{touch-action:pan-y pinch-zoom}.nn-stage>img{-webkit-user-select:none;-webkit-touch-callout:none}

.nn-viewer .nn-close{padding:0;line-height:1;font-family:Arial,sans-serif;display:grid;place-items:center}
.nn-viewer.nn-poster{width:min(1200px,96vw)}.nn-poster .nn-stage{height:calc(94dvh - 84px);min-height:0}.nn-poster .nn-stage>img{padding:0;width:100%;height:100%;object-fit:contain}
.nn-viewer .nn-autoplay{font-size:16px;padding:0;line-height:1}
/* The exported page reveal script also scans dynamic controls; dialog contents
   are already revealed by the viewer's own transition. */
.nn-viewer .hidden{visibility:visible!important}

/* Native video controls include YouTube fullscreen and volume. */
.nn-viewer,.nn-viewer *{box-sizing:border-box}
.nn-viewer.nn-video:not(.nn-short){width:min(1200px,96vw,calc((94dvh - 84px)*16/9))}
.nn-viewer.nn-video .nn-stage{min-height:200px;background:#000;flex-shrink:0}
.nn-viewer.nn-video.nn-short{width:min(420px,94vw,max(200px,calc((94dvh - 84px)*9/16)))}
.nn-viewer.nn-video.nn-short .nn-stage{aspect-ratio:9/16;height:auto;min-height:200px}
@media(max-width:767px),(pointer:coarse){.nn-viewer.nn-video header{padding:8px 12px}.nn-video header .nn-eyebrow{display:none}.nn-video header>div{min-width:0}.nn-video header .nn-title{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(96vw - 72px)}.nn-video .nn-close{width:34px;height:34px}.nn-viewer.nn-video.nn-short{width:min(96vw,max(200px,calc((96dvh - 60px)*9/16)))}}
@media(max-height:500px) and (orientation:landscape){.nn-viewer.nn-video{max-height:98dvh}.nn-video header .nn-eyebrow{display:none}.nn-viewer.nn-video header{padding:5px 10px}.nn-video .nn-close{width:34px;height:34px}.nn-viewer.nn-video:not(.nn-short){width:min(96vw,calc((98dvh - 52px)*16/9))}.nn-viewer.nn-video.nn-short{width:240px}.nn-viewer.nn-video.nn-short .nn-stage{aspect-ratio:auto;height:max(200px,calc(98dvh - 52px))}}
/* Use almost the whole mobile viewport for branding/UI slides, without image padding. */
@media(max-width:767px){.nn-viewer:not(.nn-video):not(.nn-poster){width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border:0;border-radius:0}.nn-viewer:not(.nn-video):not(.nn-poster) header{padding:9px 12px}.nn-viewer:not(.nn-video):not(.nn-poster) .nn-stage{height:auto;flex:1;min-height:0}.nn-viewer:not(.nn-video):not(.nn-poster) .nn-stage>img{padding:0;object-fit:contain}.nn-viewer:not(.nn-video):not(.nn-poster) footer{padding:8px 10px}.nn-viewer:not(.nn-video):not(.nn-poster) .nn-thumbs{max-width:62%}.nn-viewer:not(.nn-video):not(.nn-poster) .nn-prev,.nn-viewer:not(.nn-video):not(.nn-poster) .nn-next{top:calc(50% - 20px);bottom:auto;opacity:.75}.nn-viewer:not(.nn-video):not(.nn-poster) .nn-prev{left:6px}.nn-viewer:not(.nn-video):not(.nn-poster) .nn-next{right:6px}}