/* Exhibition: the main site's wall, lights and wall text (style.css), with the works in an endless row where the one in front of you turns to face the room. --u = 1 cm in px, set in exhibition.js. */
#hero{perspective:1900px;perspective-origin:50% 50%}
#stage,#pools{position:absolute;left:50%;top:50%;width:0;height:0}
#stage{transform-style:preserve-3d;visibility:hidden}
body.ready #stage{visibility:visible}

/* a deep canvas: front face and four edges */
.work{width:0;height:0;transform-style:preserve-3d;will-change:transform}
.work .frame{inset:auto;width:calc(var(--fw)*var(--u));height:calc(var(--fh)*var(--u));left:calc(var(--fw)*var(--u)/-2);top:calc(var(--fh)*var(--u)/-2);transform:translateZ(calc(var(--u)*1.75));backface-visibility:hidden;-webkit-backface-visibility:hidden}
.work .frame.canvas{box-shadow:0 calc(var(--u)*4) calc(var(--u)*6) rgba(30,26,20,.2),0 calc(var(--u)*1.2) calc(var(--u)*1.6) rgba(30,26,20,.26)}
.work .frame img{max-width:none;user-select:none;-webkit-user-select:none}
.work .ed{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#d9d5cd;pointer-events:none}
.work .ed.l,.work .ed.r{width:calc(var(--u)*3.5);height:calc(var(--fh)*var(--u));left:calc(var(--u)*-1.75);top:calc(var(--fh)*var(--u)/-2)}
.work .ed.l{transform:rotateY(-90deg) translateZ(calc(var(--fw)*var(--u)/2));background:#cfcbc3}
.work .ed.r{transform:rotateY(90deg) translateZ(calc(var(--fw)*var(--u)/2));background:#c2bdb4}
.work .ed.t,.work .ed.b{height:calc(var(--u)*3.5);width:calc(var(--fw)*var(--u));left:calc(var(--fw)*var(--u)/-2);top:calc(var(--u)*-1.75)}
.work .ed.t{transform:rotateX(90deg) translateZ(calc(var(--fh)*var(--u)/2));background:#efece6}
.work .ed.b{transform:rotateX(-90deg) translateZ(calc(var(--fh)*var(--u)/2));background:#9d9992}
.work.black .ed{background:#1b1a19}
.work.oak .ed{background:#b99a70}
.work:hover .frame{filter:none}
body.detail .work.here{cursor:default}
body.dragging .work{cursor:grabbing}
.pool{width:calc(var(--fw)*var(--u)*2.7);height:calc((var(--fh) + 150)*var(--u));margin:calc((var(--fh) + 150)*var(--u)/-2) 0 0 calc(var(--fw)*var(--u)*-1.35);will-change:transform}

/* ---------- navbar: the artist's name and the menu in one bar ---------- */
#nav{--open-w:min(400px,calc(100vw - 32px))}
#nav .shell{width:360px}
#menuBtn{height:48px}
#navName{color:#fff;font:900 24px/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
#total{position:fixed;z-index:5;right:clamp(16px,3vw,32px);top:calc(env(safe-area-inset-top,0px) + 26px);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:opacity .4s}
body.detail #total,body.atbio #total{opacity:0}
#back{z-index:6}

/* ---------- caption: each line slides through its own mask ---------- */
#caption{position:fixed;z-index:4;left:50%;top:calc(50% + var(--H,300px)/2 + 26px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;transition:opacity .4s}
body.detail #caption,body.atbio #caption{opacity:0}
.cl{position:relative;overflow:hidden;width:min(92vw,760px)}
.cl span{position:absolute;inset:0;text-align:center;white-space:nowrap}
.cl.title{height:44px;color:var(--accent);font:900 42px/44px var(--display);text-transform:uppercase}
.cl.sub,.cl.size{height:15px;font-size:11px;line-height:15px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.cl.size{color:var(--muted)}

@media (max-width:699px){
  #nav .shell{width:236px}
  #navName{font-size:20px}
  #total{display:none}
  .cl.title{height:36px;font-size:34px;line-height:36px}
  .arrow{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);margin:0;height:48px}
}