html.is-static-gallery, html.is-static-gallery body { overflow:hidden!important; height:100%!important; overscroll-behavior:none; }
html.is-static-gallery #canvas, html.is-static-gallery #transition-overlay, html.is-static-gallery #preloader, html.is-static-gallery #input-blocker, html.is-static-gallery #video-overlay, html.is-static-gallery #page-extra-sections, html.is-static-gallery #scroll-indicator { display:none!important; }
html.is-static-gallery #ui { position:relative; width:100%; height:100vh; height:100dvh; color:var(--mirrism-paper); }
html.is-static-gallery #page-container, html.is-static-gallery #page-container-inner, html.is-static-gallery #project.page { position:relative; height:100%; overflow-x:hidden; overflow-y:visible; }
html.is-static-gallery #project-details { position:relative; height:100%; min-height:100%; padding-bottom:0; overflow-x:hidden; overflow-y:visible; }
html.is-static-gallery #project-details-items-wrapper { position:absolute; left:0; right:0; top:calc(var(--header-size, 72px) + 28px); bottom:5.5rem; width:100%; height:auto; margin:0; overflow-x:hidden; overflow-y:visible; }
html.is-static-gallery #project-details-items-move-container { position:relative; display:flex; flex-wrap:nowrap; align-items:center; gap:2.5em; height:100%; padding:0 8vw 0 min(34em, 40vw); overflow-x:auto; overflow-y:visible; white-space:nowrap; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
/* Left/default: auto height from asset/Lusion — never force viewport height. */
html.is-static-gallery .project-details-item { visibility:visible!important; display:inline-flex; flex:0 0 auto; align-items:center; margin:0; height:auto; max-height:100%; scroll-snap-align:center; }
html.is-static-gallery .project-details-item img.mirrism-static-still { display:block; visibility:visible!important; width:auto; height:auto; max-height:100%; max-width:none; background:#2a211c; object-fit:contain; }
html.is-static-gallery .project-details-item img.mirrism-static-still.is-head { width:auto; height:auto; max-height:50%; aspect-ratio:1 / 1; object-fit:contain; }
html.is-static-gallery #project-details-meta { position:absolute; left:var(--base-padding-x, 24px); top:50%; transform:translateY(-50%); pointer-events:auto; width:min(30em, 36vw); margin:0; padding-top:0; z-index:2; }
html.is-static-gallery #project-details-meta a { pointer-events:auto; }
html.is-static-gallery #project-details-header-info { display:flex; position:absolute; right:var(--base-padding-x, 24px); top:calc(var(--header-size, 72px) + 8px); margin:0; z-index:2; }
html.is-static-gallery .mirrism-static-gallery-note, html.is-static-gallery #mirrism-project-error { position:relative; inset:auto; left:auto; bottom:auto; z-index:3; display:flex; flex-wrap:wrap; align-items:center; gap:.6em 1em; width:auto; max-width:22em; margin:1.6em 0 0; padding:0; background:transparent; color:var(--mirrism-paper); font-family:'Songti SC',SimSun,serif; font-size:.72em; letter-spacing:.08em; line-height:1.6; opacity:.85; }
html.is-static-gallery #mirrism-project-error button { color:var(--mirrism-paper); background:transparent; border:1px solid var(--mirrism-paper); padding:.3em .8em; font:inherit; cursor:pointer; }
html.is-static-gallery #project-details-preview { position:relative; flex:0 0 auto; height:auto; min-height:0; min-width:14em; margin:0 8vw 0 2em; cursor:pointer; align-self:center; }

/* Strict 9 cards: vertical centerlines share one axis (flex align-items:center). */
#project-details-items-move-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
@media(min-width:813px){
.project-details-item[data-role="user_head"],
.project-details-item[data-role="reference_head"],
.project-details-item[data-role="result_head"],
.project-details-item[data-role="user-head"],
.project-details-item[data-role="reference-head"],
.project-details-item[data-role="result-head"] {
  aspect-ratio: 1 / 1;
  align-self: center;
  height: auto !important;
  max-height: 50%;
  width: auto;
}
}
html.is-static-gallery .project-details-item[data-role="user_head"],
html.is-static-gallery .project-details-item[data-role="reference_head"],
html.is-static-gallery .project-details-item[data-role="result_head"],
html.is-static-gallery .project-details-item[data-role="user-head"],
html.is-static-gallery .project-details-item[data-role="reference-head"],
html.is-static-gallery .project-details-item[data-role="result-head"] {
  height: auto !important;
  max-height: 50%;
  width: auto;
}
/* Middle trio: taller than left via Lusion resize; unlock max-height:100% clamp (no 100vh/!important). */
.project-details-item[data-middle],
.project-details-item.is-middle-card {
  align-self: center;
  top: 0;
  height: auto;
  max-height: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html.is-static-gallery .project-details-item[data-middle],
html.is-static-gallery .project-details-item.is-middle-card {
  height: auto;
  max-height: none;
}
/* Static stills: middle may exceed move-container; soft JS height/width when aspect known. */
html.is-static-gallery .project-details-item[data-middle] img.mirrism-static-still,
html.is-static-gallery .project-details-item.is-middle-card img.mirrism-static-still {
  width: 100%;
  height: 100%;
  max-height: none;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
/* Consecutive middle cards abut: kill Lusion margin-left:5em (~80px) seam. */
.project-details-item[data-middle] + .project-details-item[data-middle],
.project-details-item.is-middle-card + .project-details-item.is-middle-card {
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
}
/* Static gallery uses flex gap:2.5em - cancel between consecutive middles. */
html.is-static-gallery .project-details-item[data-middle] + .project-details-item[data-middle],
html.is-static-gallery .project-details-item.is-middle-card + .project-details-item.is-middle-card {
  margin-left: -2.5em !important;
  margin-inline-start: -2.5em !important;
}

@media(max-width:812px) {
  html.is-static-gallery, html.is-static-gallery body { overflow:auto!important; height:auto!important; }
  html.is-static-gallery #ui, html.is-static-gallery #project-details, html.is-static-gallery #page-container, html.is-static-gallery #page-container-inner, html.is-static-gallery #project.page { height:auto; overflow:visible; }
  html.is-static-gallery #project-details-items-wrapper { position:relative; top:auto; bottom:auto; margin:calc(var(--header-size, 72px) + 36px) 0 1.5rem; overflow:visible; }
  html.is-static-gallery #project-details-items-move-container { flex-direction:column; align-items:stretch; height:auto; padding:0; overflow-x:hidden; overflow-y:visible; white-space:normal; }
  html.is-static-gallery .project-details-item { max-height:none; height:auto; margin:0 0 1.5rem; }
  html.is-static-gallery .project-details-item img.mirrism-static-still { max-width:100%; max-height:none; width:100%; height:auto; min-height:240px; }
  html.is-static-gallery .project-details-item img.mirrism-static-still.is-head { width:auto; max-width:100%; height:auto; min-height:0; object-fit:contain; }
  html.is-static-gallery #project-details-meta, html.is-static-gallery #mirrism-project-error { position:relative; left:auto; top:auto; bottom:auto; transform:none; width:100%; margin:0 0 1.2rem; }
  html.is-static-gallery #project-details-header-info { position:relative; right:auto; top:auto; margin:0 0 1rem auto; }
  html.is-static-gallery #project-details-preview { margin:1.5rem 0 3rem; }
}
@media(max-width:812px) {
  #header-logo { height:96px; }
  #header-logo::after { font-size:24px; }
  #header-logo::before { top:87px; font-size:7px; }
  #project-details-meta { padding-top:150px; }
  #header-right-menu-btn { width:auto; min-width:3.2em; }
  #header-right-menu-btn-text { display:block!important; }
}

/* Mobile: retain Lusion's editorial color theme, show complete stills. */
@media(max-width:812px){
  /* Original vertical flow: never shrink engine-sized meshes in a flex row. */
  html:not(.is-static-gallery) #project-details-items-move-container{display:block}
  html:not(.is-static-gallery) .project-details-item{aspect-ratio:auto;max-height:none;align-self:auto}
  html:not(.is-static-gallery) .project-details-item.is-middle-card + .project-details-item.is-middle-card{margin-left:var(--base-padding-x)!important;margin-inline-start:var(--base-padding-x)!important}
  html.is-static-gallery #header{background:var(--landing-primary,#fff)!important;height:124px!important}
  html.is-static-gallery #header-right-menu-btn{white-space:nowrap;font-size:14px;text-decoration:none}
  html.is-static-gallery,html.is-static-gallery body{width:100%;height:auto!important;min-height:100%;overflow-x:hidden!important;overflow-y:auto!important}
  html.is-static-gallery #ui,html.is-static-gallery #page-container,html.is-static-gallery #page-container-inner,
  html.is-static-gallery #project.page,html.is-static-gallery #project-details{height:auto!important;min-height:100dvh!important;overflow:visible!important}
  html.is-static-gallery #project-details{display:flex!important;flex-direction:column!important;background:var(--landing-primary,#fff)!important;color:var(--landing-secondary,#1a1411)!important;padding:0 18px 56px!important}
  html.is-static-gallery #header,html.is-static-gallery #header-logo,
  html.is-static-gallery #header-center-project-back-btn,html.is-static-gallery #header-right-menu-btn{color:var(--landing-secondary,#1a1411)!important}
  html.is-static-gallery #project-details-meta{order:1;position:relative!important;inset:auto!important;transform:none!important;width:100%!important;max-width:none!important;margin:0!important;padding:148px 0 34px!important;color:var(--landing-secondary,#1a1411)!important}
  html.is-static-gallery #project-details-title,html.is-static-gallery #project-details-desc,
  html.is-static-gallery #project-details-desc p,html.is-static-gallery #project-details-side-list,
  html.is-static-gallery .project-details-side-list-item{color:var(--landing-secondary,#1a1411)!important;opacity:1!important;transform:none!important}
  html.is-static-gallery #project-details-title{text-align:left!important;font-size:clamp(36px,12vw,58px)!important;line-height:1.15!important;margin:0 0 20px!important}
  html.is-static-gallery #project-details-desc{font-size:15px!important;line-height:1.75!important}
  html.is-static-gallery #project-details-side-list{display:none!important}
  html.is-static-gallery #project-details-launch-cta,html.is-static-gallery #project-details-launch-cta-mobile{color:var(--landing-secondary,#1a1411)!important;border-color:currentColor!important;opacity:1!important;transform:none!important}
  html.is-static-gallery #project-details-header-info{display:none!important}
  html.is-static-gallery #project-details-items-wrapper{order:2;position:relative!important;inset:auto!important;width:100%!important;height:auto!important;margin:0!important;overflow:visible!important}
  html.is-static-gallery #project-details-items-move-container{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:24px!important;width:100%!important;height:auto!important;padding:0!important;overflow:visible!important;transform:none!important;white-space:normal!important;scroll-snap-type:none!important}
  html.is-static-gallery .project-details-item,html.is-static-gallery .project-details-item[data-middle],
  html.is-static-gallery .project-details-item.is-middle-card{display:block!important;flex:none!important;position:relative!important;inset:auto!important;align-self:stretch!important;width:100%!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;transform:none!important;aspect-ratio:auto!important}
  html.is-static-gallery .project-details-item img.mirrism-static-still,
  html.is-static-gallery .project-details-item img.mirrism-static-still.is-head{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;max-height:none!important;min-height:0!important;aspect-ratio:auto!important;object-fit:contain!important}
  html.is-static-gallery #project-details-preview{display:none!important}
}