/* Responsive viewer: desktop rail, centered phone media, bottom-aligned tablet media. */
#lightbox{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#fff;color:#000;font:inherit;letter-spacing:inherit;overflow:hidden;--viewer-margin:var(--margin);--asset-ratio:.75;--available-width:calc(100vw - 2 * var(--viewer-margin) - 64px);--available-height:calc(100dvh - 2 * var(--viewer-margin))}
#lightbox::backdrop{background:#fff}
body.viewer-open{overflow:hidden}
#lightbox,.viewer-slide{--frame-width:min(var(--available-width),calc(var(--available-height) * var(--asset-ratio)));--frame-height:min(var(--available-height),calc(var(--available-width) / var(--asset-ratio)))}
.media-stage,.viewer-slide{position:absolute;inset:0;pointer-events:none}
.media-stage{overflow:hidden}
.viewer-visual{position:absolute;left:var(--viewer-margin);top:var(--viewer-margin);width:var(--frame-width);height:var(--frame-height);background:var(--placeholder-color,#eee);border-radius:4px;overflow:hidden;filter:blur(0);opacity:1;transition:left 400ms cubic-bezier(.22,1,.36,1),top 400ms cubic-bezier(.22,1,.36,1),width 400ms cubic-bezier(.22,1,.36,1),height 400ms cubic-bezier(.22,1,.36,1),transform 400ms cubic-bezier(.22,1,.36,1),filter 400ms ease,opacity 400ms ease}
.viewer-media{display:block;width:100%;height:100%;object-fit:contain;transition:opacity 320ms ease}
.viewer-media.media-pending{opacity:0}
.viewer-hit-area{position:absolute;top:0;bottom:0;width:50%;z-index:1;cursor:pointer}
.viewer-hit-previous{left:0}.viewer-hit-next{right:0}
.viewer-text-control{position:absolute;z-index:3;color:#000;line-height:normal;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.toggle-info{right:var(--viewer-margin);top:var(--viewer-margin)}
.asset-count{right:var(--viewer-margin);bottom:var(--viewer-margin)}
.viewer-controls{position:absolute;z-index:3;right:var(--viewer-margin);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:48px}
.viewer-icon-control{position:relative;display:block;width:16px;height:16px;color:#000;line-height:0}
.viewer-icon-control img{display:block;flex:none}
.viewer-icon{display:block;position:relative;width:16px;height:16px;overflow:hidden}
.viewer-icon-previous img{position:absolute;left:.04px;top:.15px}
.viewer-icon-control::before,.viewer-text-control::before{content:"";position:absolute;inset:-24px}
/* The shared black dot provides keyboard focus feedback without a blue box. */
#lightbox button:focus-visible{outline:none}
/* The Info state is independent of the current media alignment. */
.info-panel{position:absolute;z-index:3;top:var(--viewer-margin);left:var(--viewer-margin);width:min(776px,calc(100vw - 2 * var(--viewer-margin) - 64px));max-height:calc(100dvh - 2 * var(--viewer-margin));overflow-y:auto;padding-bottom:4px;scrollbar-width:thin;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity 240ms ease,transform 360ms cubic-bezier(.22,1,.36,1)}
.has-info .info-panel{opacity:1;transform:translateY(0);pointer-events:auto;transition-delay:90ms}
.project-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
/* Keep the cap-height alignment, but retain the last line's full descenders. */
.project-info h2{margin-bottom:24px;line-height:normal;text-box-trim:trim-start;text-box-edge:cap alphabetic}
.info-body{color:var(--muted);line-height:normal;text-box-trim:trim-start;text-box-edge:cap alphabetic}
.info-body p+p,.credit-group+.credit-group{margin-top:1em}
.credit-group p,#project-description{white-space:pre-line;overflow-wrap:anywhere}
#close-info{position:absolute;z-index:4;right:var(--viewer-margin);top:var(--viewer-margin);opacity:0;pointer-events:none;transition:opacity 200ms ease}
.has-info #close-info{opacity:1;pointer-events:auto;transition-delay:90ms}
.has-info .viewer-controls,.has-info .viewer-text-control,.has-info .viewer-hit-area{visibility:hidden;pointer-events:none}
.has-info .viewer-visual{left:0;top:0;bottom:auto;width:100vw;height:100dvh;transform:none;filter:blur(150px);opacity:.5}
.has-info .viewer-media{object-fit:cover}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Phone portrait: Info/count above, navigation below, asset centered in the viewport. */
@media(orientation:portrait) and (max-width:700px){
  #lightbox{--viewer-margin:12px;--available-width:calc(100vw - 24px);--available-height:calc(100dvh - 224px);--phone-inset:min(72px,10dvh)}
  .viewer-visual{left:50%;top:50%;transform:translate(-50%,-50%)}
  .toggle-info{left:var(--viewer-margin);right:auto;top:var(--phone-inset)}
  .asset-count{top:var(--phone-inset);bottom:auto}
  .viewer-controls{left:var(--viewer-margin);right:var(--viewer-margin);top:auto;bottom:var(--phone-inset);transform:none;flex-direction:row;justify-content:space-between;gap:0}
  .info-panel{top:calc(var(--viewer-margin) + 48px);width:calc(100vw - 2 * var(--viewer-margin));max-height:calc(100dvh - 2 * var(--viewer-margin) - 48px)}
  .project-info{gap:24px}
}
/* Portrait tablet: controls sit 12px above the bottom-aligned asset. */
@media(orientation:portrait) and (min-width:701px){
  #lightbox{--viewer-margin:24px;--available-width:calc(100vw - 48px);--available-height:calc(100dvh - 136px)}
  .viewer-visual{left:50%;top:calc(100dvh - var(--viewer-margin) - var(--frame-height));bottom:auto;transform:translateX(-50%)}
  .toggle-info{left:var(--viewer-margin);right:auto}
  .asset-count{top:var(--viewer-margin);bottom:auto}
  .viewer-controls{left:var(--viewer-margin);right:var(--viewer-margin);top:auto;bottom:calc(var(--viewer-margin) + var(--frame-height) + 12px);transform:none;flex-direction:row;justify-content:space-between;gap:0}
}
/* Preserve the full-viewport texture when a responsive media rule is active. */
#lightbox.has-info .viewer-visual{left:0;top:0;bottom:auto;width:100vw;height:100dvh;transform:none}
@media(prefers-reduced-motion:reduce){.viewer-media,.viewer-visual,.info-panel,#close-info{transition:none}.info-panel{transform:none}}

/* Desktop pointer zones: previous / close / next, each covering a viewport third. */
.viewer-hit-close{display:none}
@media(min-width:701px) and (hover:hover) and (pointer:fine){
  .viewer-hit-area{width:calc(100% / 3)}
  .viewer-hit-close{display:block;left:calc(100% / 3)}
  .viewer-controls .viewer-icon-control{opacity:.2;transition:opacity 160ms ease-in-out}
  .viewer-controls .viewer-icon-control::after{content:"";position:absolute;left:-12px;top:50%;width:4px;height:4px;transform:translateY(-50%);background:#000;border-radius:50%;opacity:0;pointer-events:none;transition:opacity 160ms ease-in-out}
  .viewer-hit-previous:hover ~ .viewer-controls #previous::after,
  .viewer-hit-close:hover ~ .viewer-controls #close-lightbox::after,
  .viewer-hit-next:hover ~ .viewer-controls #next::after,
  .viewer-controls .viewer-icon-control:hover::after,
  .viewer-controls .viewer-icon-control:focus-visible::after{opacity:1}
  .viewer-hit-previous:hover ~ .viewer-controls #previous,
  .viewer-hit-close:hover ~ .viewer-controls #close-lightbox,
  .viewer-hit-next:hover ~ .viewer-controls #next,
  .viewer-controls .viewer-icon-control:hover,
  .viewer-controls .viewer-icon-control:focus-visible{opacity:1}
}

/* Video controls follow the responsive media frame and sit above navigation hit areas. */
.viewer-video-controls{position:absolute;z-index:2;pointer-events:none;left:var(--viewer-margin);top:var(--viewer-margin);width:var(--frame-width);height:var(--frame-height);display:flex;align-items:flex-end;gap:12px;padding:12px}
.viewer-video-controls .sizzle-control,.viewer-video-controls .video-time{position:relative;left:auto;bottom:auto;flex:none;pointer-events:auto}
.viewer-sound img{display:block;flex:none}
.has-info .viewer-video-controls{visibility:hidden;pointer-events:none}
.has-info .viewer-video-controls .sizzle-control,.has-info .viewer-video-controls .video-time{pointer-events:none}
@media(orientation:portrait) and (max-width:700px){.viewer-video-controls{left:50%;top:50%;transform:translate(-50%,-50%)}}
@media(orientation:portrait) and (min-width:701px){.viewer-video-controls{left:50%;top:auto;bottom:var(--viewer-margin);transform:translateX(-50%)}}

.mobile-viewer-feedback{position:absolute;z-index:4;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100% - 24px);padding:8px 12px;background:rgba(255,255,255,.94);border-radius:4px;font-size:12px;font-weight:600;letter-spacing:-.48px}
#retry-mobile-viewer{text-decoration:underline;min-height:28px;white-space:nowrap}
@media(max-width:700px), (max-height:700px) and (pointer:coarse){
  #lightbox{--viewer-margin:max(12px,env(safe-area-inset-left),env(safe-area-inset-right));--phone-inset:max(min(72px,10dvh),env(safe-area-inset-top),env(safe-area-inset-bottom));--mobile-top:calc(var(--phone-inset) + 32px);--mobile-bottom:calc(var(--phone-inset) + 60px);--mobile-controls-space:0px;--available-width:calc(100vw - 2 * var(--viewer-margin));--available-height:calc(100dvh - var(--mobile-top) - var(--mobile-bottom) - var(--mobile-controls-space));--mobile-frame-center:calc((100dvh + var(--mobile-top) - var(--mobile-bottom) - var(--mobile-controls-space)) / 2)}
  .viewer-visual{left:50%;top:var(--mobile-frame-center);bottom:auto;transform:translate(-50%,-50%)}
  .toggle-info{left:var(--viewer-margin);right:auto;top:var(--phone-inset)}
  .asset-count{top:var(--phone-inset);bottom:auto}
  .viewer-controls{left:var(--viewer-margin);right:var(--viewer-margin);top:auto;bottom:var(--phone-inset);transform:none;flex-direction:row;align-items:center;justify-content:space-between;gap:0}
  .viewer-controls .viewer-icon-control{display:flex;align-items:center;justify-content:center;width:44px;height:44px;opacity:1;transition:none}
  .viewer-controls .viewer-icon-control::before{content:none}
  .viewer-controls .viewer-icon-control::after,.viewer-video-controls .sizzle-control::after{display:none}
  #lightbox .viewer-icon-control:focus-visible{outline:1px solid #000;outline-offset:2px;border-radius:4px}
  .viewer-hit-area{width:50%}
  .viewer-hit-close{display:none}
  .viewer-video-controls{left:50%;top:var(--mobile-frame-center);bottom:auto;transform:translate(-50%,-50%);width:var(--frame-width);height:var(--frame-height);align-items:center;justify-content:center;padding:0}
  .viewer-video-controls .mobile-sizzle-play{position:relative;left:auto;top:auto;transform:none;pointer-events:auto}
  .mobile-video-playing .viewer-hit-area{pointer-events:none}
  .mobile-video-playing .viewer-media{pointer-events:auto}
  .info-panel{top:calc(var(--viewer-margin) + 48px);width:calc(100vw - 2 * var(--viewer-margin));max-height:calc(100dvh - 2 * var(--viewer-margin) - 48px)}
  .project-info{grid-template-columns:minmax(0,1fr);gap:24px}
}

/* Reveal the page-to-viewer background behind the growing thumbnail. */
#lightbox.viewer-launching,#lightbox.viewer-launching::backdrop{background:transparent}
#lightbox.viewer-launching::before{content:"";position:absolute;inset:0;background:#fff;animation:viewer-launch-background 600ms cubic-bezier(.22,1,.36,1) both}
@keyframes viewer-launch-background{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#lightbox.viewer-launching::before{animation:none}}

/* The dialog surface fades as one layer, revealing the index beneath it. */
#lightbox.viewer-closing::backdrop{background:transparent}
#lightbox.viewer-closing{pointer-events:none}

/* Project series: the counter unfolds a narrow rail of selectable thumbnails. */
.series-thumbnails{position:absolute;z-index:5;right:calc(var(--viewer-margin) - 3px);bottom:calc(var(--viewer-margin) + 32px);width:66px;max-height:max(80px,calc(50dvh - 152px));display:flex;flex-direction:column;gap:6px;padding:3px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;background:rgba(255,255,255,.96);opacity:0;clip-path:inset(100% 0 0);transform:translateY(8px);transition:clip-path 480ms cubic-bezier(.22,1,.36,1),transform 480ms cubic-bezier(.22,1,.36,1),opacity 320ms ease;pointer-events:none}
.series-thumbnails::-webkit-scrollbar{display:none}
.has-series .series-thumbnails{opacity:1;clip-path:inset(0);transform:translateY(0);pointer-events:auto}
.series-thumbnail{display:block;flex:none;width:60px;min-height:36px;max-height:80px;position:relative;border-radius:2px;overflow:hidden;background:#eee;font-size:10px;line-height:1.2;letter-spacing:0;transition:opacity 180ms ease-out}
.series-thumbnail img{display:block;width:100%;height:100%;object-fit:cover}
.series-thumbnail[aria-current=true]{outline:1px solid #000;outline-offset:2px}
#lightbox .series-thumbnail:focus-visible{outline:2px solid #1257ff;outline-offset:1px}
@media(hover:hover) and (pointer:fine){.series-thumbnail:hover{opacity:.7}}
.has-info .series-thumbnails{visibility:hidden;pointer-events:none}
/* A top-mounted counter opens down on portrait tablets and touch layouts. */
@media(orientation:portrait), (pointer:coarse){
  .asset-count{top:var(--viewer-margin);bottom:auto}
  .series-thumbnails{top:calc(var(--viewer-margin) + 32px);bottom:auto;max-height:calc(100dvh - 2 * var(--viewer-margin) - 160px);clip-path:inset(0 0 100%);transform:translateY(-8px)}
  .has-series .series-thumbnails{clip-path:inset(0);transform:translateY(0)}
}
@media(max-width:700px), (max-height:700px) and (pointer:coarse){
  .asset-count{top:var(--phone-inset);bottom:auto}
  .series-thumbnails{top:calc(var(--phone-inset) + 32px);bottom:auto;max-height:calc(100dvh - 2 * var(--phone-inset) - 110px);clip-path:inset(0 0 100%);transform:translateY(-8px)}
  .has-series .series-thumbnails{clip-path:inset(0);transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.series-thumbnails{transition:none}}