/* Only the top two inches of the upcoming-project folder are visible. */
.project-folder{--folder-label-width:clamp(180px,22vw,280px);--folder-front-top:calc(var(--folder-label-width)/2.964391 + 30px);position:relative;isolation:isolate;width:100%;height:calc(2in + 100px);margin-top:-70px;overflow:hidden;color:#352919}
.project-folder-assembly{position:absolute;left:0;right:0;top:100px;height:442px;transform-origin:clamp(150px,20vw,400px) 45px;transition:transform .55s cubic-bezier(.17,.89,.32,1.3)}
.project-folder.is-hovered .project-folder-assembly,.project-folder:has(.project-folder-assembly:focus-visible) .project-folder-assembly{transform:translateY(-45px) rotate(5deg)}
.project-folder-back{position:absolute;inset:calc(var(--folder-front-top) - 20px) 0 -250px;z-index:0;border:1px solid #a5824b;border-radius:13px 13px 0 0;background:linear-gradient(180deg,#d5b678,#c6a264 120px);box-shadow:inset 0 1px 0 #f0d8a1}
.project-folder-tab{position:absolute;top:4px;left:clamp(24px,6vw,110px);z-index:1;max-width:calc(100% - 48px);margin:0;padding:12px 30px 30px;border:1px solid #a5824b;border-bottom:0;border-radius:14px 20px 0 0;background:linear-gradient(110deg,#dcc28c,#d2b277);color:inherit;text-align:left;box-shadow:inset 0 1px 0 #f1dca9,0 -5px 22px #0003;font:clamp(14px,1.5vw,20px)/1.4 'Home Video',monospace;font-weight:400;white-space:nowrap}
.project-folder-front{position:absolute;inset:var(--folder-front-top) 0 -250px;z-index:2;border:1px solid #a5824b;border-radius:12px 12px 0 0;background:repeating-linear-gradient(0deg,#6e542508 0 1px,transparent 1px 4px),repeating-linear-gradient(92deg,#ffedc50a 0 1px,transparent 1px 3px),linear-gradient(110deg,#d7bb83,#e0c894 48%,#d2b278);box-shadow:inset 0 1px 0 #f4dfb1,0 -6px 12px #4b371525}
.project-folder-front::before{content:'';position:absolute;left:0;right:0;top:12px;height:1px;background:#a6854f42;box-shadow:0 1px 0 #fae7bf38}
.typeface-revival-mark{display:block;width:var(--folder-label-width);height:auto}
@media(max-width:420px){.project-folder-tab{padding:12px 18px 30px}}

.project-folder-assembly:focus-visible{outline:none}.project-folder-assembly:focus-visible .project-folder-tab{outline:2px solid #ff5433;outline-offset:6px}
@media(prefers-reduced-motion:reduce){.project-folder-assembly{transition:none}.project-folder.is-hovered .project-folder-assembly,.project-folder:has(.project-folder-assembly:focus-visible) .project-folder-assembly{transform:none}}
.motion-off .project-folder-assembly{transition:none;transform:none!important}
