/* project pages as a layer over the main page (nav.js) */
.cl{position:fixed;inset:0;z-index:44;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#040404fc;
  opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s .45s}
.cl.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .55s cubic-bezier(.22,1,.36,1),visibility 0s}
.cl-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:center;padding:calc(16px + env(safe-area-inset-top,0px)) 16px 0;pointer-events:none}
.cl-back{pointer-events:auto;padding:10px 20px;border:0;border-radius:99px;background:#111112e6;box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 1px 0 #ffffff1a,0 10px 30px #0008;color:#f4f4f2;font:500 15px/1 var(--sans);cursor:pointer;transition:background .2s}
.cl-back:hover{background:#1a1a1c}
.cl-back:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cl .case{padding-top:clamp(56px,10vh,110px);padding-bottom:120px}
html.cl-lock,html.cl-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.cl,.cl.on{transform:none;transition:opacity .01s,visibility 0s}}