.folder-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 40px;padding:90px 0 30px}.portfolio-folder{width:100%;max-width:360px;min-width:0;margin:auto;position:relative;--lift:12px;--spread:0px;--fan:0deg;--hinge:0deg}.portfolio-folder.is-open{z-index:5;--lift:-76px;--spread:27px;--fan:8deg;--hinge:-27deg}.folder-stage{position:relative;aspect-ratio:340/272;isolation:isolate}.folder-defs{position:absolute}.folder-back{position:absolute;inset:0;background:linear-gradient(140deg,#ffffffa0,transparent),var(--folder-color);box-shadow:inset 0 0 0 1px #fff8}.folder-back img{width:100%;height:100%;object-fit:cover;opacity:.7;filter:saturate(.65)}.folder-shadow{position:absolute;bottom:-10px;left:10%;width:80%;height:24%;background:#2223;filter:blur(18px);border-radius:50%;pointer-events:none}.folder-toggle{position:absolute;inset:0;z-index:3;border:0;background:none;border-radius:20px;cursor:pointer}.folder-toggle:focus-visible{outline:3px solid #bc241b;outline-offset:8px}.folder-sheets{position:absolute;inset:0;z-index:4;pointer-events:none}.folder-sheet{position:absolute;left:10%;top:25%;width:80%;height:68%;border:1px solid #fff9;border-radius:13px;overflow:hidden;background:#faf9f4;box-shadow:0 5px 15px #0002;transform:translate(calc(var(--slot)*var(--spread)),calc(var(--lift) - var(--depth)*9px)) rotate(calc(var(--slot)*var(--fan)));transition:transform .65s cubic-bezier(.22,.8,.22,1),box-shadow .3s;transform-origin:50% 100%;color:#181815;text-decoration:none}.folder-sheet img{width:100%;height:100%;object-fit:cover;object-position:top}.folder-brief{padding:16px;display:flex;flex-direction:column;gap:12px;height:100%;background:linear-gradient(135deg,#fff,var(--folder-color))}.folder-brief strong{font:clamp(24px,3vw,38px)/.95 Impact,'Arial Narrow',sans-serif;text-transform:uppercase;max-width:80%}.folder-brief>span:last-child{font-size:12px}.sheet-caption{position:absolute;inset:auto 0 0;background:#faf9f4f5;padding:9px 12px;display:flex;justify-content:space-between;font-size:12px}.folder-front{position:absolute;left:0;right:0;top:27.2%;bottom:0;z-index:6;background:linear-gradient(145deg,#ffffff35,#f6f5edcf 60%,#ffffffed);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);transform:perspective(760px) rotateX(var(--hinge));transform-origin:50% 100%;transition:transform .65s cubic-bezier(.22,.8,.22,1);pointer-events:none}.folder-front:before{content:'';position:absolute;inset:0;border:1px solid #fff9;border-radius:22px;background:linear-gradient(120deg,#fff4,transparent 55%)}.folder-label{position:absolute;left:8%;right:8%;bottom:13%;color:#171714}.folder-label h3{font:24px/1.05 Arial,sans-serif!important;letter-spacing:-1px!important;margin:12px 0 6px!important;text-transform:none!important}.folder-label p{font:12px/1.4 Arial,sans-serif!important;margin:0!important;max-width:86%}.folder-label .micro{font-size:9px}.folder-plus{position:absolute;right:0;bottom:0;font:24px Arial;transition:transform .3s}.is-open .folder-plus{transform:rotate(45deg)}.is-open .folder-sheet{pointer-events:auto}.folder-sheet:focus-visible{outline:3px solid #bc241b;outline-offset:3px}.folder-caption{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-top:25px;padding:12px 0;border-top:1px solid #3333;font-size:11px;line-height:1.5}.folder-caption>a{white-space:nowrap;text-decoration:underline;text-underline-offset:4px}.folder-caption>span{max-width:55%;color:#555}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(hover:hover) and (pointer:fine){.portfolio-folder:not(.is-open):hover{--lift:-20px;--spread:6px;--fan:2deg;--hinge:-12deg}.is-open .folder-sheet:hover{box-shadow:0 12px 25px #0003;filter:brightness(1.06)}}
@media(max-width:1050px){.folder-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:80px 35px}}@media(max-width:620px){.folder-grid{grid-template-columns:1fr;gap:85px;padding-top:75px}.portfolio-folder{max-width:310px;--spread:0px}.portfolio-folder.is-open{--spread:15px;--lift:-68px;--fan:6deg}.folder-label h3{font-size:23px!important}}
@media(prefers-reduced-motion:reduce){.folder-sheet,.folder-front,.folder-plus{transition:none!important}}
.motion-stopped .folder-sheet,.motion-stopped .folder-front,.motion-stopped .folder-plus{transition:none!important}
