/* All Work: four Mac-style folders, with thumbnail files tucked inside. */
.work-index{--p:0;background:#FFFFFF;color:#242424}
.fi-defs{position:absolute;pointer-events:none}
.fi-main{position:relative;display:flex;flex-direction:column;max-width:1400px;margin:auto;padding:48px clamp(24px,5.5vw,88px) 60px}
.fi-intro{text-align:center}
.fi-intro h1{font:400 clamp(56px,6vw,88px)/1.04 'Instrument Serif',Georgia,serif;letter-spacing:-.035em}
.fi-intro p{margin:20px auto 0;max-width:520px;font-size:16px;line-height:1.6;color:#62625e}
.fi-intro .wo-link{margin-top:14px}
.fi-folders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:center;gap:40px 24px;list-style:none;margin:0;padding:94px 0 65px}
.fi-main .wa>.jn-in{width:100%;padding-inline:0}
.fi-main .wa-intro{margin-top:80px}
.fi-folders>li{min-width:0}
/* folders load in one by one on arrival */
.fi-folders>li{animation:fi-in .42s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--fi-i,0) * 90ms + 60ms)}
.fi-folders>li:nth-child(2){--fi-i:1}.fi-folders>li:nth-child(3){--fi-i:2}.fi-folders>li:nth-child(4){--fi-i:3}.fi-folders>li:nth-child(5){--fi-i:4}.fi-folders>li:nth-child(6){--fi-i:5}
@keyframes fi-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fi-folders>li{animation:none}}
.fi-folder{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:16px 4px;color:#343431;border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fi-folder-art{position:relative;isolation:isolate;display:block;width:clamp(112px,11.5vw,152px);aspect-ratio:132/112;flex:none;pointer-events:none}
.fi-folder-back,.fi-folder-front{position:absolute;inset:0;display:block;width:100%;height:100%;filter:drop-shadow(0 4px 2px #227bb125)}
.fi-folder-back{z-index:0}
.fi-folder-front{z-index:4;transform-origin:50% 92%;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.fi-previews{position:absolute;inset:0;z-index:2}
/* One centered preview springs up, then slides back behind the folder. */
.fi-preview{position:absolute;top:30%;left:11%;z-index:3;width:78%;aspect-ratio:1.6;padding:4px;background:#fff;border:1px solid #0000000c;border-radius:5px;box-shadow:0 1px 2px #20283310,0 6px 14px -8px #20283340;opacity:0;transform:translateY(0) scale(.82);transform-origin:50% 100%;transition:transform .36s cubic-bezier(.4,0,.2,1),opacity .18s}
.fi-preview img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}
.fi-folder:focus-visible{z-index:5}
.fi-folder:focus-visible .fi-preview{opacity:1;transform:translateY(-84%) scale(1);transition-duration:.54s;transition-timing-function:cubic-bezier(.18,1.35,.32,1)}
.fi-folder:focus-visible .fi-folder-front{transform:perspective(400px) rotateX(-24deg) scaleY(.96)}
.fi-folder-name{max-width:185px;padding:3px 7px;border-radius:4px;font-size:15px;font-weight:400;line-height:1.35;letter-spacing:-.015em;text-wrap:balance;transition:background-color .16s,color .16s}
.fi-folder:focus-visible{outline:2px solid #287be0;outline-offset:5px}
.fi-folder:focus-visible .fi-folder-name{background:#287be0;color:#fff}
@media(hover:hover) and (pointer:fine){
  .fi-folder:hover{z-index:5}
  .fi-folder:hover .fi-folder-name{background:#287be0;color:#fff}
  .fi-folder:hover .fi-preview{opacity:1;transform:translateY(-84%) scale(1);transition-duration:.54s;transition-timing-function:cubic-bezier(.18,1.35,.32,1)}
  .fi-folder:hover .fi-folder-front{transform:perspective(400px) rotateX(-24deg) scaleY(.96)}
}
@media(max-width:950px) and (min-width:601px){.fi-folders{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;padding:70px 0 30px}.fi-folder-art{width:130px}}
@media(max-width:600px){.fi-main{padding:38px 20px 44px}.fi-folders{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 16px;padding:56px 0 44px}.fi-folder{gap:10px;padding:10px 0}.fi-folder-art{width:112px}.fi-folder-name{font-size:13px;max-width:160px;padding:3px 5px}}
@media(prefers-reduced-motion:reduce){.fi-folder-name,.fi-folder-front,.fi-folder .fi-preview{transition:none}}

/* the folders fill the first screen; the overview waits below a small arrow */
.fi-screen{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - 128px);padding-bottom:128px}
.fi-screen .fi-folders{padding:0}
@media(max-width:1600px){.fi-screen{padding-bottom:112px}}
@media(max-width:700px){.fi-screen{padding-bottom:76px}}
.fi-down{position:absolute;left:50%;bottom:20px;margin-left:-20px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#8a8983;transition:color .18s}
.fi-down:hover{color:#1a1918}
.fi-down svg{width:18px;height:18px;animation:fi-bob 2.4s ease-in-out infinite}
@keyframes fi-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.fi-down svg{animation:none}}
.fi-main .wa{scroll-margin-top:110px}
html:has(.fi-main){scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html:has(.fi-main){scroll-behavior:auto}}