@font-face{font-family:ZemuSerif;src:url('assets/serif.woff2') format('woff2');font-weight:200 900;font-display:swap}
#zemu-opening-shell{--ink:#1d1c1b;--opening-bg:#2c2922;--opening-text:#f2f0e8;--paper:#f9f9f9;--lime:#d2e346;--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
#zemu-opening-shell *{box-sizing:border-box}
#zemu-opening-shell button,#zemu-opening-shell a,#zemu-opening-shell summary{-webkit-tap-highlight-color:transparent}
#zemu-opening-shell a{color:inherit;text-decoration:none}
#zemu-opening-shell button{font:inherit;color:inherit}
#zemu-opening-shell button:focus-visible,#zemu-opening-shell a:focus-visible,#zemu-opening-shell summary:focus-visible,#zemu-opening-shell .gallery:focus-visible{outline:2px solid #8c9b13;outline-offset:6px}
#zemu-opening-shell button{cursor:pointer}
#zemu-opening-shell button:disabled{cursor:default}
#zemu-opening-shell .header{color:var(--opening-text);height:94px;position:absolute;inset:0 0 auto;z-index:30;display:flex;justify-content:space-between;align-items:center;width:min(76%,1640px);margin:auto;background:transparent}
#zemu-opening-shell .wordmark{display:flex;align-items:center;gap:10px;white-space:nowrap}
#zemu-opening-shell .wordmark img{width:54px;height:40px;object-fit:contain}
#zemu-opening-shell .wordmark span{font-size:32px;letter-spacing:.12em;font-weight:300}
#zemu-opening-shell .desktop-nav{display:flex;align-items:center;gap:48px;font-size:15px}
#zemu-opening-shell .contact-link{display:flex;align-items:center;gap:18px}
#zemu-opening-shell .contact-link>span:last-child{display:grid;place-items:center;border-radius:50%;background:var(--lime);color:var(--opening-bg);width:40px;height:40px;font-family:Arial,sans-serif;font-size:26px}
#zemu-opening-shell .mobile-nav{display:none}
#zemu-opening-shell .opening{--white-stop:56svh;--card-height:calc(44svh - 94px);--card-width:calc(var(--card-height) * .83);--stack-y:45svh;--gap:12px;position:relative;min-height:640px;height:100svh;background:var(--opening-bg);isolation:isolate;overflow:clip}
#zemu-opening-shell .white-field{display:none}
#zemu-opening-shell .intro-copy{position:absolute;top:clamp(114px,13svh,180px);left:12%;width:76%;z-index:2;pointer-events:none}
#zemu-opening-shell .intro-copy h1{font-size:clamp(32px,3.65vw,76px);font-weight:300;line-height:1.32;letter-spacing:-.055em;margin:0}
#zemu-opening-shell .intro-copy h1 span,#zemu-opening-shell .intro-copy h1 strong{display:block;font-weight:300}
#zemu-opening-shell .intro-copy h1 span{color:#b2ada3}
#zemu-opening-shell .intro-copy h1 strong{color:var(--opening-text);margin-top:.13em}
#zemu-opening-shell .opening-logo{color:var(--opening-text);position:absolute;z-index:4;top:var(--stack-y);left:50%;width:clamp(142px,12vw,218px);transform:translate(-50%,-50%);text-align:center;pointer-events:none}
#zemu-opening-shell .opening-logo img{display:block;width:66%;height:auto;max-height:140px;object-fit:contain;margin:0 auto 14px}
#zemu-opening-shell .opening-logo>span{display:block;font-size:clamp(14px,1.25vw,23px);white-space:nowrap;letter-spacing:.1em}
#zemu-opening-shell .opening-logo i{font-style:normal;letter-spacing:.16em;font-size:.75em}
#zemu-opening-shell .gallery{position:absolute;z-index:5;left:50%;top:calc(var(--white-stop) + 38px);height:var(--card-height);width:calc(100% - 48px);transform:translateX(-50%);touch-action:pan-y;outline-offset:12px;cursor:grab;user-select:none}
#zemu-opening-shell .gallery.is-dragging{cursor:grabbing}
#zemu-opening-shell .opening[data-phase="ready"] .gallery{overflow:clip;overflow-clip-margin:28px}
#zemu-opening-shell .case-card{display:block;position:absolute;left:0;top:0;width:var(--card-width);height:var(--card-height);transform-origin:center center;pointer-events:none;user-select:none}
#zemu-opening-shell .opening[data-phase="ready"] .case-card{pointer-events:auto}
#zemu-opening-shell .card-media{display:block;width:100%;height:100%;overflow:hidden;background:#d4d0c8;clip-path:inset(0 0 100% 0)}
#zemu-opening-shell .card-media img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
#zemu-opening-shell .card-caption{position:absolute;left:0;right:0;top:-27px;height:22px;overflow:hidden;display:flex;align-items:center;color:#e8e6df;font-size:12px;white-space:nowrap}
#zemu-opening-shell .card-caption span{display:block;opacity:0;transform:translateY(110%);overflow:hidden;text-overflow:ellipsis;max-width:100%}
#zemu-opening-shell .opening[data-phase="ready"] .card-media{clip-path:none}
#zemu-opening-shell .opening[data-phase="ready"] .card-caption span{transform:none;opacity:1}
#zemu-opening-shell .gallery-footer{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);display:flex;justify-content:space-between;align-items:center;width:calc(100% - 48px);color:#d1d0ca;font-size:12px;opacity:0;pointer-events:none}
#zemu-opening-shell .opening[data-phase="ready"] .gallery-footer{opacity:1;pointer-events:auto}
#zemu-opening-shell .gallery-navigation{display:flex;align-items:center;gap:10px}
#zemu-opening-shell .gallery-navigation span{color:#a1a099;font-size:11px;letter-spacing:.06em}
#zemu-opening-shell .gallery-navigation button{border:0;background:none;color:#ddd;padding:6px 7px;font-size:18px;line-height:1}
#zemu-opening-shell .gallery-footer>a{display:flex;align-items:center;gap:12px}
#zemu-opening-shell .gallery-footer b{font-size:22px;color:var(--lime);font-weight:400}
#zemu-opening-shell .loading-status{position:absolute;bottom:70px;left:24px;color:#ccc;font-size:13px}
#zemu-opening-shell .replay{position:fixed;right:18px;bottom:16px;z-index:40;border:1px solid #8d8a8038;background:#fafaf2e8;color:#272722;backdrop-filter:blur(8px);padding:9px 14px;border-radius:22px;font-size:12px;box-shadow:0 4px 20px #0000000a;opacity:.8}
#zemu-opening-shell .replay:disabled{opacity:.5}
#zemu-opening-shell .continuation{max-width:1560px;margin:auto;padding:100px 48px 110px;min-height:390px}
#zemu-opening-shell .continuation>span{font-size:13px;color:#666}
#zemu-opening-shell .continuation h2{font-size:clamp(27px,3vw,48px);font-weight:300;margin:35px 0 22px}
#zemu-opening-shell .continuation p{font-size:15px;color:#73736f;line-height:1.8}
#zemu-opening-shell .continuation>a{display:inline-block;margin-top:24px;border-bottom:1px solid #999;font-size:13px;padding-bottom:6px}
@media(hover:hover) and (pointer:fine){#zemu-opening-shell .opening[data-phase="ready"] .case-card .card-media{transition:filter 180ms ease}
#zemu-opening-shell .opening[data-phase="ready"] .case-card:hover .card-media{filter:brightness(1.07)}
#zemu-opening-shell .replay:hover{opacity:1}
}
@media(max-width:900px){#zemu-opening-shell .header{height:76px;width:calc(100% - 40px)}
#zemu-opening-shell .wordmark{gap:7px}
#zemu-opening-shell .wordmark img{width:42px;height:31px}
#zemu-opening-shell .wordmark span{font-size:25px}
#zemu-opening-shell .desktop-nav{display:none}
#zemu-opening-shell .mobile-nav{display:flex;gap:8px;align-items:center;font-size:13px}
#zemu-opening-shell .mobile-nav>a,#zemu-opening-shell .mobile-nav summary{display:grid;place-items:center;width:48px;height:42px;border:1px solid #f2f0e899;border-radius:50%;cursor:pointer;list-style:none}
#zemu-opening-shell .mobile-nav summary::-webkit-details-marker{display:none}
#zemu-opening-shell .mobile-nav details nav{position:absolute;right:0;top:68px;background:var(--opening-bg);padding:20px 24px;display:grid;gap:18px;box-shadow:0 10px 35px #0002;min-width:140px}
#zemu-opening-shell .opening{--white-stop:50svh;--card-height:calc(50svh - 96px);--card-width:min(76vw,calc(var(--card-height) * 1.02));--stack-y:35svh;--gap:10px;min-height:600px}
#zemu-opening-shell .intro-copy{top:clamp(105px,13.5svh,150px);left:24px;width:calc(100% - 48px)}
#zemu-opening-shell .intro-copy h1{font-size:clamp(20px,5.4vw,36px);line-height:1.45;letter-spacing:-.06em}
#zemu-opening-shell .intro-copy h1 strong{margin-top:.1em}
#zemu-opening-shell .opening-logo{width:135px}
#zemu-opening-shell .opening-logo img{max-height:84px;margin-bottom:10px}
#zemu-opening-shell .opening-logo>span{font-size:14px}
#zemu-opening-shell .gallery{width:calc(100% - 28px);top:calc(var(--white-stop) + 38px)}
#zemu-opening-shell .card-caption{font-size:11px}
#zemu-opening-shell .gallery-footer{width:calc(100% - 28px);bottom:17px}
#zemu-opening-shell .replay{right:14px;bottom:calc(100svh - 88px);font-size:10px;padding:6px 10px}
#zemu-opening-shell .continuation{padding:70px 24px 80px;min-height:330px}
#zemu-opening-shell .continuation h2{line-height:1.45}
#zemu-opening-shell .continuation p{font-size:13px}
}
@media(max-height:660px) and (min-width:901px){#zemu-opening-shell .opening{height:720px;--white-stop:390px;--card-height:235px;--stack-y:295px}
#zemu-opening-shell .intro-copy{top:108px}
#zemu-opening-shell .intro-copy h1{font-size:38px}
}
@media(prefers-reduced-motion:reduce){#zemu-opening-shell *,#zemu-opening-shell *:before,#zemu-opening-shell *:after{scroll-behavior:auto!important}
#zemu-opening-shell .card-media,#zemu-opening-shell .replay{transition:none!important}
}
#zemu-opening-shell .opening-logo{opacity:0}
#zemu-opening-shell .wordmark img,#zemu-opening-shell .opening-logo img{filter:invert(1)}
#zemu-opening-shell .opening{--edge:16px;--gap:8px;--name-height:28px;--stack-y:50dvh;min-height:0;height:100dvh;margin-bottom:52px;overflow:visible}
#zemu-opening-shell .gallery{left:0;top:0;bottom:0;width:100%;height:100%;transform:none;overflow:hidden;clip-path:inset(-100vh 0 0);cursor:grab}
#zemu-opening-shell .opening[data-phase="ready"] .gallery{overflow:hidden;overflow-clip-margin:0;clip-path:none}
#zemu-opening-shell .case-card{left:var(--edge);top:auto;bottom:var(--edge);width:calc((100% - 32px) * .2874 - 8px);height:auto;will-change:transform}
#zemu-opening-shell .card-stage{display:block;transform-origin:50% 50%;will-change:transform,clip-path}
#zemu-opening-shell .card-media{height:auto;aspect-ratio:396 / 496;clip-path:none}
#zemu-opening-shell .card-media img{height:100%;aspect-ratio:396 / 496;transform:scale(1.15)}
#zemu-opening-shell .card-caption{position:relative;top:auto;height:var(--name-height);align-items:flex-start;line-height:12px;font-size:12px;overflow:hidden}
#zemu-opening-shell .card-caption span{height:12px;opacity:1;transform:translateY(100%)}
#zemu-opening-shell .opening[data-phase="ready"] .card-stage{transform:none;clip-path:none}
#zemu-opening-shell .intro-copy{top:clamp(100px,10svh,130px)}
#zemu-opening-shell .intro-copy h1{font-size:clamp(26px,3vw,64px)}
#zemu-opening-shell .gallery-footer{top:100%;bottom:auto;left:0;transform:none;width:100%;height:52px;padding:0 var(--edge);background:var(--opening-bg)}
#zemu-opening-shell .replay{bottom:12px}
@media(min-width:1920px){#zemu-opening-shell .case-card{width:calc((100% - 32px) * .287 - 8px)}
}
@media(min-width:768px) and (max-width:1024px){#zemu-opening-shell .case-card{width:calc((100% - 32px) * .366)}
}
@media(max-width:767px){#zemu-opening-shell .opening{--edge:8px;--gap:8px;--name-height:20px;--stack-y:50dvh;min-height:0;height:100dvh}
#zemu-opening-shell .case-card{width:calc((100% - 16px) * .83)}
#zemu-opening-shell .intro-copy{top:clamp(105px,13.5svh,150px)}
#zemu-opening-shell .intro-copy h1{font-size:clamp(20px,5.4vw,36px)}
#zemu-opening-shell .gallery{width:100%;top:0}
#zemu-opening-shell .gallery-footer{width:100%;top:100%;bottom:auto}
#zemu-opening-shell .replay{top:70px;bottom:auto}
}
@media(max-height:660px) and (min-width:901px){#zemu-opening-shell .opening{height:100dvh}
#zemu-opening-shell .intro-copy{top:88px}
#zemu-opening-shell .intro-copy h1{font-size:clamp(24px,2.4vw,38px)}
}
@media(min-width:901px){#zemu-opening-shell .header{width:calc(100% - 64px);max-width:none}
}
#zemu-opening-shell .card-caption span{opacity:0}
#zemu-opening-shell .opening[data-phase="ready"] .card-caption span{opacity:1}
#zemu-opening-shell .header .ink-character{display:inline-block;white-space:pre;font:inherit;letter-spacing:inherit}
#zemu-opening-shell .header{opacity:0}
#zemu-opening-shell .header .ink-character{position:relative}
#zemu-opening-shell .header .ink-original{font:inherit;letter-spacing:inherit;opacity:0}
#zemu-opening-shell .stroke-letter{position:absolute;left:0;top:50%;transform:translateY(-50%);width:1em;height:1em;pointer-events:none;overflow:visible}
#zemu-opening-shell .wordmark .stroke-logo{width:54px;height:40px;flex:none;overflow:visible}
@media(max-width:900px){#zemu-opening-shell .wordmark .stroke-logo{width:42px;height:31px}
}
#zemu-opening-shell .card-hover{display:block;transform:translateY(0);transition:transform .6s cubic-bezier(.215,.61,.355,1)}
#zemu-opening-shell .caption-window{height:12px;overflow:hidden;width:100%}
#zemu-opening-shell .card-caption .caption-window>span{overflow:visible;position:relative;transition:transform .4s cubic-bezier(.215,.61,.355,1)}
#zemu-opening-shell .caption-window>span::after{content:attr(data-title);position:absolute;top:100%;left:0;white-space:nowrap}
#zemu-opening-shell .opening[data-phase="ready"] .card-media img{translate:0 0;transition:translate .6s cubic-bezier(.215,.61,.355,1)}
#zemu-opening-shell .opening[data-phase="ready"] .case-card:hover .card-media{filter:none}
@media(hover:hover) and (pointer:fine){#zemu-opening-shell .opening[data-phase="ready"] .case-card.is-hovered .card-hover{transform:translateY(-8px)}
#zemu-opening-shell .opening[data-phase="ready"] .case-card.is-hovered .card-media img{translate:0 4px}
#zemu-opening-shell .opening[data-phase="ready"] .case-card.is-hovered .caption-window>span{transform:translateY(-100%)}
}
@media(prefers-reduced-motion:reduce){#zemu-opening-shell .card-hover,#zemu-opening-shell .caption-window>span,#zemu-opening-shell .opening[data-phase="ready"] .card-media img{transition:none}
}
#zemu-opening-shell .header .wordmark>span>.ink-character{font:inherit}
#zemu-opening-shell .header .wordmark img{clip-path:inset(0 100% 0 0)}
@media(prefers-reduced-motion:reduce){#zemu-opening-shell .header .wordmark img{clip-path:none}
}
@media(min-width:901px){#zemu-opening-shell .desktop-nav{width:calc(100% - 25%);justify-content:space-between;gap:clamp(18px,2vw,48px)}
#zemu-opening-shell .desktop-nav>a{white-space:nowrap}
#zemu-opening-shell .header .wordmark{flex-shrink:0}
}
#zemu-opening-shell .desktop-nav{font-weight:300}

#zemu-opening-shell{position:relative;display:flow-root;background:#2c2922;color:#f2f0e8;font-family:ZemuSerif,serif;font-weight:400;isolation:isolate}
html body #zemu-opening-shell,html body #zemu-opening-shell *{font-family:ZemuSerif,serif!important}
#zemu-opening-shell .contact-link>span:last-child{font-family:Arial,sans-serif!important}
html{scrollbar-gutter:auto;scrollbar-width:none}html::-webkit-scrollbar{display:none}
#zemu-opening-shell .replay{position:absolute;bottom:68px}
#zemu-opening-shell .opening{margin-bottom:52px}
#zemu-opening-shell .mobile-nav details nav a{display:block}

#zemu-opening-shell .replay{top:auto;height:auto}
@media(max-width:900px){#zemu-opening-shell .replay{top:70px;bottom:auto}}

#zemu-opening-shell:has(.mobile-nav details[open]) .replay{visibility:hidden}

/* Slightly larger case names; keep the existing caption area. */
#zemu-opening-shell .card-caption{font-size:14px;line-height:14px}
#zemu-opening-shell .card-caption span,#zemu-opening-shell .caption-window{height:14px}

/* Opening brand name fills the requested width under the mark. */
#zemu-opening-shell .opening-logo>span{font-size:clamp(24px,2vw,36px);line-height:1.2;letter-spacing:.1em}
@media(max-width:900px){#zemu-opening-shell .opening-logo>span{font-size:24px}}

/* Use the supplied complete transparent brand artwork. */
#zemu-opening-shell .opening-logo{width:clamp(300px,27vw,440px)}
#zemu-opening-shell .opening-logo img{width:100%;height:auto;max-height:none;margin:0;filter:none}
@media(max-width:900px){#zemu-opening-shell .opening-logo{width:min(300px,78vw)}}

#zemu-opening-shell .loading-status button{margin-top:12px;padding:8px 14px;border:1px solid #9b9f89;background:transparent;color:inherit;font:inherit;cursor:pointer}

/* Each caption row owns its clipping; the moving track stays open. */
#zemu-opening-shell .caption-window > span > zemu-caption-label {
  display:block;
  height:100%;
  line-height:inherit;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  clip-path:inset(0);
}
#zemu-opening-shell .caption-window > span::after {
  height:100%;
  width:100%;
  line-height:inherit;
  overflow:hidden;
  text-overflow:ellipsis;
  clip-path:inset(0);
}