/* Two tactile folders: a miniature identity and a project index. */
.folder-brand-lockup{display:flex;align-items:center;gap:13px;flex-shrink:0}
.float-folder{position:relative;isolation:isolate;flex-shrink:0;--folder-back:#b87d44;--folder-front:#edbc69;--folder-ink:#463b30;--folder-x:0deg;--folder-y:0deg}
.float-folder.is-open{z-index:90}
.folder-toggle{position:relative;display:block;width:156px;height:88px;padding:0;border:0;background:transparent;color:var(--folder-ink);perspective:550px;text-align:left;isolation:isolate}
.folder-back{position:absolute;inset:10px 0 0;border-radius:9px 11px 11px 11px;background:var(--folder-back);border:1.5px solid #574e3a;box-shadow:3px 4px 0 #5a65432b}
.folder-back::before{content:"";position:absolute;left:-1.5px;top:-9px;width:48%;height:13px;border:1.5px solid #574e3a;border-bottom:0;border-radius:8px 10px 0 0;background:var(--folder-back)}
.folder-paper{position:absolute;inset:14px 10px 10px;background:#fff7da;border:1px solid #786e4c;border-radius:5px;transform:rotate(-3deg);transition:transform .5s cubic-bezier(.2,.9,.25,1.2)}
.folder-paper::after{content:"";position:absolute;inset:6px -3px -3px 4px;border:1px solid #a9a572;border-radius:4px;background:#d6e5d5;transform:rotate(7deg)}
.folder-face{position:absolute;inset:24px 0 0;display:flex;flex-direction:column;justify-content:center;padding:10px 14px;background:var(--folder-front);border:1.5px solid #574e3a;border-radius:6px 7px 11px 11px;transform-origin:bottom center;transform:rotateX(-8deg);transition:transform .52s cubic-bezier(.2,.9,.25,1.2),box-shadow .3s;z-index:2}
.folder-label{font-size:13px;font-weight:750;line-height:1.5;letter-spacing:.01em}
.folder-subtitle{font-size:8px;opacity:.75;line-height:1.6;margin-top:2px}
.folder-spark{position:absolute;right:13px;top:9px;font-size:15px;opacity:.7}
.is-open .folder-face{transform:rotateX(-30deg) rotateY(var(--folder-x));box-shadow:0 6px 9px #444b3220}
.is-open .folder-paper{transform:translateY(-10px) rotate(3deg)}
.folder-notes{position:absolute;top:calc(100% + 12px);left:-5px;width:245px;padding:6px 12px 10px;z-index:5}
.folder-notes[hidden]{display:none}
.float-folder.is-open::after{content:"";position:absolute;top:100%;left:-10px;width:calc(100% + 25px);height:26px}
.folder-note{display:flex;align-items:center;gap:12px;position:relative;min-height:54px;width:100%;margin:0 0 12px;padding:13px 14px;border:1.5px solid #526052;border-radius:7px;background:#d8e6af;color:#33473c;box-shadow:3px 4px 0 #32473b27;font-size:12px;font-weight:650;text-align:left;text-decoration:none;transform-origin:top center;animation:folder-note-out .52s cubic-bezier(.2,.8,.25,1.15) both;animation-delay:calc(var(--note-index)*45ms);transition:box-shadow .2s,filter .2s}
.folder-note:nth-child(2){background:#f0b4a8;border-color:#876158;color:#5c3934;--note-angle:3deg;--note-offset:8px}
.folder-note:nth-child(3){background:#b8d7e0;border-color:#527882;color:#2c5061;--note-angle:-2deg;--note-offset:0px}
.folder-note:first-child{--note-angle:-3deg;--note-offset:-3px}
.folder-note-number{font-size:9px;font-weight:500;opacity:.7}
.folder-note-text{flex:1}
.folder-note:hover{filter:brightness(1.035);box-shadow:5px 7px 0 #32473b30}
.float-folder :focus-visible{outline:2px solid #315972;outline-offset:5px}
.float-folder-logo{--folder-back:#84ada1;--folder-front:#b4d0a4;--folder-ink:#284e42}
.float-folder-logo .folder-toggle{width:48px;height:38px}
.float-folder-logo .folder-back{inset:6px 0 0;border-radius:4px}
.float-folder-logo .folder-back::before{top:-6px;height:8px;border-radius:4px 5px 0 0}
.float-folder-logo .folder-paper{inset:9px 6px 5px;border-radius:2px}
.float-folder-logo .folder-face{inset:13px 0 0;padding:0 7px;border-radius:3px 3px 5px 5px}
.float-folder-logo .folder-label{font-size:23px;letter-spacing:-2px;line-height:1}
.float-folder-logo .folder-subtitle{display:none}
.float-folder-logo .folder-spark{font-size:11px;right:5px;top:2px}
.float-folder-logo .folder-notes{left:0;top:calc(100% + 16px)}
.folder-highlight-header{align-items:center;gap:50px;overflow:visible!important}
.float-folder-projects .folder-notes{left:auto;right:-10px}
@keyframes folder-note-out{from{opacity:0;transform:translate(0,-22px) rotate(0) scale(.85)}to{opacity:1;transform:translate(var(--note-offset,0px),0) rotate(calc(var(--note-angle,0deg) + var(--folder-y))) scale(1)}}
@media(max-width:640px){.folder-brand-lockup{gap:8px}.float-folder-logo .folder-toggle{width:41px;height:34px}.float-folder-logo .folder-label{font-size:20px}.folder-highlight-header{gap:20px;flex-wrap:wrap}.float-folder-projects .folder-toggle{width:138px;height:78px}.folder-notes{width:222px}.folder-note{min-height:50px;font-size:11px}.folder-subtitle{font-size:7px}}
@media(prefers-reduced-motion:reduce){.float-folder *{animation:none!important;transition:none!important}.folder-note{transform:none}.is-open .folder-face{transform:none}.is-open .folder-paper{transform:none}}