/* Keep the document scroll range while a project dialog locks overflow. */
body.doex-project-page { height:auto; min-height:100%; }

/* Keep the native Doex hamburger centered in the project header at every scroll position. */
body.doex-project-page { --project-menu-row:76px; --project-menu-edge:clamp(22px,4.4vw,76px); --project-toolbar-offset:0px; }
body.doex-project-page.admin-bar { --project-toolbar-offset:32px; }
body.doex-project-page .navigation-fire.navigation-icon-wrapper {
  position:fixed; top:calc(var(--project-toolbar-offset) + (var(--project-menu-row) - 44px)/2);
  right:calc(var(--project-menu-edge) - 4.5px); width:44px; height:44px; display:grid; place-items:center;
  transition:opacity .3s ease;
}
body.doex-project-page #navigation-icon { display:flex; flex-direction:column; gap:8px; }
body.doex-project-page #navigation-icon .line { margin:0; background-color:#fff; }
body.doex-project-page .navigation-icon-wrapper-bg {
  top:calc(var(--project-toolbar-offset) + (var(--project-menu-row) - 60px)/2);
  right:calc(var(--project-menu-edge) - 12.5px); width:60px; height:60px; transition:opacity .3s ease;
}
@media(max-width:782px) { body.doex-project-page.admin-bar { --project-toolbar-offset:46px; } }
@media(max-width:780px) { body.doex-project-page.doex-contact { --project-menu-row:67px; } }
@media(max-width:850px) and (min-width:651px) { body.doex-project-page:is(.doex-nightfair,.doex-fruitmatch) { --project-menu-row:68px; } }
@media(max-width:650px) {
  body.doex-project-page:not(.doex-contact) { --project-menu-row:55px; }
  body.doex-project-page.doex-cavenger { --project-menu-row:94px; }
  body.doex-project-page:is(.doex-beelight,.doex-harvest-coast,.doex-blobbing-away) { --project-menu-row:90px; }
  body.doex-project-page:is(.doex-beyond-bounds,.doex-looking-back,.doex-nightfair,.doex-fruitmatch) .navigation-icon-wrapper-bg { width:48px; height:48px; top:calc(var(--project-toolbar-offset) + 3.5px); right:calc(var(--project-menu-edge) - 6.5px); }
}
@media(max-width:800px) { body.doex-project-page.doex-works { --project-menu-row:72px; } }
@media(max-width:560px) { body.doex-project-page.doex-works { --project-menu-row:67px; } }
@media(max-width:600px) { body.doex-project-page.admin-bar { --project-toolbar-offset:0px; } }

/* Art Gallery interactions: zoom out, flip caption and image-to-viewer morph. */
body.doex-project-page #home .image-trigger {
  -webkit-user-select: none;
  user-select: none;
}
body.doex-project-page #home .image-trigger > img, body.doex-project-page #home .image-trigger > .media-transition-snapshot {
  transform: scale(1.2);
  transition: transform .3s ease;
  filter: none;
}
body.doex-project-page #home .image-trigger > img { -webkit-user-drag: none; }
body.doex-project-page #home .image-trigger:hover > img, body.doex-project-page #home .image-trigger:focus-visible > img, body.doex-project-page #home .image-trigger:hover > .media-transition-snapshot, body.doex-project-page #home .image-trigger:focus-visible > .media-transition-snapshot {
  transform: scale(1);
}
body.doex-project-page #home .image-trigger::before, body.doex-project-page #home .image-trigger::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
body.doex-project-page #home .image-trigger::before { background: #0008; z-index: 3; }
body.doex-project-page #home .image-trigger::after { border: 2px solid var(--image-accent, #f07816); border-radius: inherit; z-index: 5; }
body.doex-project-page #home .image-trigger:hover::before, body.doex-project-page #home .image-trigger:hover::after, body.doex-project-page #home .image-trigger:focus-visible::before, body.doex-project-page #home .image-trigger:focus-visible::after { opacity: 1; }
body.doex-project-page #home .image-trigger:focus-visible { outline-color: var(--image-accent, #f07816); outline-offset: 1px; outline-width: 3px; }
body.doex-project-page #home .image-hover-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: visibility .3s linear, opacity .3s linear;
  text-align: center;
  pointer-events: none;
  z-index: 4;
}
body.doex-project-page #home .image-hover-caption-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: #000000c2;
  animation: gallery-flip-out 1s both;
  backface-visibility: visible;
}
body.doex-project-page #home .image-hover-title { font-size: clamp(12px, .85vw, 16px); font-weight: 500; line-height: 1.35; text-wrap: balance; }
body.doex-project-page #home .image-hover-caption .icon { width: 18px; height: 18px; flex: none; }
body.doex-project-page #home .image-trigger:hover .image-hover-caption, body.doex-project-page #home .image-trigger:focus-visible .image-hover-caption { opacity: 1; visibility: visible; }
body.doex-project-page #home .image-trigger:hover .image-hover-caption-inner, body.doex-project-page #home .image-trigger:focus-visible .image-hover-caption-inner { animation-name: gallery-flip-in; }
@keyframes gallery-flip-in {
  0% { transform: perspective(400px) rotateX(90deg); animation-timing-function: ease-in; opacity: 0; }
  40% { transform: perspective(400px) rotateX(-20deg); animation-timing-function: ease-in; }
  60% { transform: perspective(400px) rotateX(10deg); opacity: 1; }
  80% { transform: perspective(400px) rotateX(-5deg); }
  100% { transform: perspective(400px); }
}
@keyframes gallery-flip-out {
  0% { transform: perspective(400px) rotateX(0); opacity: 1; }
  100% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
}
body.doex-project-page #home .image-trigger { cursor:zoom-in; }
body.doex-project-page #home .image-trigger:hover > img, body.doex-project-page #home .image-trigger:focus-visible > img { filter:none; }
body.doex-project-page #home .image-trigger > :is(.expand-affordance, .enlarge-cue, .image-expand) { display:none; }
body.doex-project-page #home .image-hover-caption { color:#f5f5f5; }
@media (hover:none), (prefers-reduced-motion:reduce) {
  body.doex-project-page #home .image-trigger > img,
  body.doex-project-page #home .image-trigger:is(:hover,:focus-visible) > img,
  body.doex-project-page #home .image-trigger > .media-transition-snapshot { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  body.doex-project-page #home .image-hover-caption-inner { animation:none; }
}

/* Every project image viewer uses the viewport, with space reserved for its caption. */
body.doex-project-page #image-viewer {
  position:fixed; inset:0; margin:0; padding:52px 76px 13px;
  box-sizing:border-box; width:100%; height:100svh; height:100dvh;
  min-width:0; max-width:none; max-height:none;
  overflow:hidden; border:0; border-radius:0; background:transparent;
  -webkit-user-select:none; user-select:none;
}
body.doex-project-page #image-viewer[open] { display:flex; flex-direction:column; }
body.doex-project-page #image-viewer .viewer-layout { display:block; width:100%; height:100%; min-height:0; }
body.doex-project-page #image-viewer .viewer-layout > figure {
  display:grid; grid-template-rows:minmax(0,1fr) auto; gap:10px;
  width:100%; height:100%; min-width:0; min-height:0; margin:0;
}
body.doex-project-page #image-viewer .viewer-image-wrap {
  position:relative; width:100%; height:100%; min-width:0; min-height:0;
  aspect-ratio:auto; max-height:none; overflow:hidden;
  border:0; border-radius:3px; background:transparent;
}
body.doex-project-page #image-viewer .viewer-image-wrap > img {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  max-width:none; max-height:none; object-fit:contain; object-position:center;
  -webkit-user-drag:none;
}
body.doex-project-page #image-viewer .viewer-layout figcaption {
  position:static; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; min-width:0; min-height:0; margin:0; padding:0;
  color:#e5e5e5; text-align:center; text-shadow:0 1px 8px #000; z-index:3;
}
body.doex-project-page #image-viewer #viewer-caption {
  max-width:100%; margin:0; color:inherit; font-size:clamp(14px,1.15vw,21px);
  line-height:1.35; letter-spacing:-.25px; font-weight:450; overflow-wrap:anywhere;
}
body.doex-project-page #image-viewer #viewer-counter { font-size:14px; line-height:1.4; }
body.doex-project-page #image-viewer #viewer-counter .current { color:var(--image-accent,#f07816); }
body.doex-project-page #image-viewer .dialog-close {
  position:absolute; top:7px; right:18px; display:grid; place-items:center;
  width:48px; height:40px; padding:6px; color:#e5e5e5;
  border:1px solid #ffffff18; border-radius:7px; background:#11171cba; z-index:5;
}
body.doex-project-page #image-viewer .dialog-close:hover { color:var(--image-accent,#f07816); }
body.doex-project-page #image-viewer .viewer-layout > .round-button {
  position:fixed; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:48px; height:48px; padding:12px;
  border:1px solid #ffffff45; border-radius:50%; background:#0c1116db; z-index:4;
}
body.doex-project-page #image-viewer .viewer-layout > .round-button .icon { width:16px; height:24px; stroke-width:1.9; }
body.doex-project-page #image-viewer .viewer-layout > .round-button:hover { border-color:var(--image-accent,#f07816); color:var(--image-accent,#f07816); }
body.doex-project-page #image-viewer .viewer-layout > .round-button[hidden] { display:none; }
body.doex-project-page #image-viewer #viewer-prev { left:18px; }
body.doex-project-page #image-viewer #viewer-next { right:18px; }
@media(max-width:650px) {
  body.doex-project-page #image-viewer { padding:52px 10px 16px; }
  body.doex-project-page #image-viewer .dialog-close { right:10px; }
  body.doex-project-page #image-viewer .viewer-layout > figure { gap:12px; }
  body.doex-project-page #image-viewer .viewer-layout figcaption { padding-inline:46px; }
  body.doex-project-page #image-viewer #viewer-caption { font-size:14px; }
  body.doex-project-page #image-viewer #viewer-counter { font-size:12px; }
  body.doex-project-page #image-viewer .viewer-caption-meta { gap:10px; justify-content:center; }
  body.doex-project-page #image-viewer .viewer-layout > .round-button { top:auto; bottom:23px; transform:none; width:36px; height:36px; padding:8px; }
  body.doex-project-page #image-viewer .viewer-layout > .round-button .icon { width:13px; height:19px; }
  body.doex-project-page #image-viewer #viewer-prev { left:10px; }
  body.doex-project-page #image-viewer #viewer-next { right:10px; }
}

/* A separate action expands the existing inline player without reloading embeds. */
body.doex-project-page #home [data-project-video] { position:relative; }
body.doex-project-page #home .project-video-expand { display:flex; align-items:center; justify-content:flex-end; min-height:36px; margin:8px 0 0 auto; padding:0; background:none; border:0; color:var(--muted, #a3a3a3); font-size:12px; line-height:1.5; }
body.doex-project-page #home .project-video-expand:hover { color:#fff; }
body.doex-project-page #home [data-project-video]:fullscreen { display:flex; flex-direction:column; justify-content:center; width:100%; height:100%; padding:24px; background:#080808; }
body.doex-project-page #home [data-project-video]:fullscreen .trailer-player { width:100%; height:calc(100dvh - 100px); aspect-ratio:auto; max-height:none; }
body.doex-project-page #home [data-project-video]:fullscreen :is(video,iframe) { width:100%; height:100%; object-fit:contain; }
body.doex-project-page #home [data-project-video]:fullscreen .project-video-expand { flex:none; color:#fff; }
body.doex-project-page #home .inline-clip { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; border-radius:var(--radius); background:#111; }
body.doex-project-page #home .inline-clip > :is(video,iframe) { display:block; width:100%; height:100%; border:0; object-fit:contain; }
body.doex-project-page #home .inline-clip .video-facade { position:absolute; inset:0; width:100%; height:100%; }
body.doex-project-page #home [data-project-video]:fullscreen .inline-clip { flex:1; aspect-ratio:auto; }