/* Pictures live inside the clipped stage, never in a resized second canvas. */
:root { --partners-surface:#fff; --partners-ink:#171719; --partners-muted:rgba(23,23,25,.72); --partners-artwork-filter:invert(1); }
html[data-theme="dark"] { --partners-surface:#000; --partners-ink:#fff; --partners-muted:rgba(255,255,255,.76); --partners-artwork-filter:none; }
.menu-preview-link { position:absolute; z-index:8; inset:0; display:block; background:transparent; pointer-events:auto; outline:none; -webkit-user-drag:none; }
.menu-preview-link[hidden] { display:none; }
.menu-preview-link:focus-visible::after {
  content:""; position:absolute;
  inset:var(--menu-inset-top) var(--menu-inset-right) var(--menu-inset-bottom) var(--menu-inset-left);
  border:2px solid #fff; border-radius:6px; box-shadow:inset 0 0 0 2px #171719; pointer-events:none;
}
.menu-project-scene {
  position:absolute;
  z-index:4;
  inset:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:none;
}
[data-menu-preview-open="true"] .menu-project-scene.is-visible { opacity:1; }
.menu-project-layer {
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:1;
  transition:none;
}
.menu-project-layer.is-current { opacity:1; }
.menu-project-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.menu-project-layer::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.28));
}
.menu-project-layout {
  position:absolute;
  z-index:1;
  top:var(--menu-inset-top);
  right:var(--menu-inset-right);
  height:calc(var(--menu-preview-frame-height,100vh) - var(--menu-inset-top) - var(--menu-inset-bottom));
  left:var(--menu-inset-left);
  container-type:size;
}
.menu-project-shot {
  --menu-shot-width:90cqw;
  --menu-shot-limit:44cqh;
  position:absolute;
  display:block;
  width:min(var(--menu-shot-width),calc(var(--menu-shot-limit) * var(--menu-shot-ratio,1.6)));
  height:auto;
  aspect-ratio:var(--menu-shot-ratio,1.6);
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:none;
}
.menu-project-shot-image { display:block; width:100%; height:100%; object-fit:contain; }
.menu-project-shot-primary { --menu-shot-width:90cqw; left:5%; top:19%; z-index:2; }
.menu-project-shot-secondary { --menu-shot-width:78cqw; right:3%; bottom:15%; z-index:1; }
[data-project="sketchfold"] .menu-project-shot-primary { --menu-shot-width:82cqw; top:12%; left:4%; }
[data-project="sketchfold"] .menu-project-shot-secondary { --menu-shot-width:88cqw; bottom:17%; right:3%; }
[data-project="cleargrain"] .menu-project-shot-primary { top:28%; left:3%; --menu-shot-width:94cqw; }
[data-project="cleargrain"] .menu-project-shot-secondary { bottom:12%; --menu-shot-width:70cqw; right:8%; }
[data-project="vaultgrid"] .menu-project-shot-primary { top:13%; left:7%; --menu-shot-width:88cqw; }
[data-project="vaultgrid"] .menu-project-shot-secondary { bottom:19%; right:9%; --menu-shot-width:84cqw; }
[data-project="docweave"] .menu-project-shot-primary { top:23%; left:2%; --menu-shot-width:91cqw; }
[data-project="docweave"] .menu-project-shot-secondary { bottom:10%; right:4%; --menu-shot-width:75cqw; }
[data-project="peoplespan"] .menu-project-shot-primary { top:14%; left:9%; --menu-shot-width:86cqw; }
[data-project="peoplespan"] .menu-project-shot-secondary { bottom:20%; right:10%; --menu-shot-width:82cqw; }
[data-project="signalscope"] .menu-project-shot-primary { top:26%; left:4%; --menu-shot-width:92cqw; }
[data-project="signalscope"] .menu-project-shot-secondary { bottom:11%; right:9%; --menu-shot-width:76cqw; }
[data-project="ledgerflow"] .menu-project-shot-primary { top:12%; left:5%; --menu-shot-width:82cqw; }
[data-project="ledgerflow"] .menu-project-shot-secondary { bottom:14%; right:3%; --menu-shot-width:86cqw; }

/* The partners wall is one continuous picture behind the existing aperture.
   It keeps the page's own framing: the same contained artwork, so opening the
   page is a single direct expansion instead of a re-cropped second layer. */
.menu-project-layer[data-project="partners"] { background:var(--partners-surface,#fff); }
.menu-project-layer[data-project="partners"]::after { content:none; }
[data-project="partners"] .menu-project-shot-primary {
  inset:0 auto auto 0;
  width:100%;
  height:var(--menu-preview-frame-height,100vh);
  aspect-ratio:auto;
  background:var(--partners-surface,#fff);
}
[data-project="partners"] .menu-project-shot-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:50% 50%;
  filter:var(--partners-artwork-filter,invert(1));
}

/* The fallback uses the same palette when WebGL is unavailable. */
.stage .stage-visual[data-background="wavy-cubes"][data-menu-tone]::after {
  content:"";
  display:block;
  position:absolute;
  z-index:1;
  inset:0;
  background:var(--menu-fallback-tint,#fff);
  mix-blend-mode:multiply;
  opacity:0;
  pointer-events:none;
  transition:background-color .7s ease,opacity .7s ease;
}
.stage .stage-visual[data-background="wavy-cubes"][data-menu-tone]:not([data-renderer="webgl"])::after { opacity:1; }
.stage .stage-visual[data-background="wavy-cubes"][data-menu-immediate]::after { transition:none; }
/* A static fallback must also match the selected default theme. The WebGL
   renderer already paints its own palette, so it is never filtered. */
html[data-theme="dark"] .stage .stage-visual[data-background="wavy-cubes"][data-menu-tone="default"]:not([data-renderer="webgl"]) { filter:invert(.84) saturate(.25) brightness(.72); }
.stage .stage-visual[data-background="wavy-cubes"][data-menu-tone="default"]:not([data-renderer="webgl"])::after { opacity:0; }
@media (max-width:767px) {
  .menu-project-shot { --menu-shot-limit:75cqh; }
  .menu-project-layout .menu-project-shot-primary { --menu-shot-width:68cqw; left:3%; top:8%; }
  .menu-project-layout .menu-project-shot-secondary { --menu-shot-width:61cqw; right:3%; bottom:7%; }
  [data-project="partners"] .menu-project-shot-primary {
    top:var(--menu-inset-top);
    left:var(--menu-inset-left);
    width:calc(100% - var(--menu-inset-left) - var(--menu-inset-right));
    height:calc(var(--menu-preview-frame-height,100vh) - var(--menu-inset-top) - var(--menu-inset-bottom));
  }
  [data-project="partners"] .menu-project-shot-image { object-fit:contain; }
}
@media (prefers-reduced-motion:reduce) {
  .menu-project-scene,.menu-project-layer { transition:none; }
}

/* Section summaries share their bitmap with the expanding window. */
.menu-section-layer { background:#fff; }
html[data-theme="dark"] .menu-section-layer { background:#111615; }
.menu-section-layer::after { content:none; }
.menu-section-viewport { position:absolute; inset:var(--menu-inset-top) var(--menu-inset-right) var(--menu-inset-bottom) var(--menu-inset-left); }
.menu-section-viewport canvas { display:block; width:100%; height:100%; object-fit:contain; }