/* Desktop: one viewport, one folder. Motion only changes composited layers. */
body[data-design=article]{--portfolio-nav-height:88px}
html:has(body[data-design=article][data-page=home]),body[data-design=article][data-page=home]{height:100%;overflow:hidden;overscroll-behavior:none}
body[data-design=article][data-page=home] #app{height:100dvh;display:flex;flex-direction:column}
body[data-design=article][data-page=home] .arc-header{flex:none}
.folder-only{flex:1;min-height:0}
.portfolio-hero{position:relative;overflow:clip;background:#fff;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);place-items:center;padding-top:clamp(18px,3.8vh,42px)}
.portfolio-intro{text-align:center;position:relative;z-index:12;width:calc(100% - 36px);padding-bottom:8px}
.portfolio-intro h1{font:500 clamp(32px,3.6vw,48px)/1.08 var(--heading);letter-spacing:-.055em;color:#25262a}
.portfolio-role{font:450 16px/1.4 var(--ui);letter-spacing:-.02em;color:#53565e;margin-top:9px}
.portfolio-focus{display:flex;justify-content:center;flex-wrap:wrap;gap:5px 0;margin-top:9px;color:#777981;font:400 12px/1.5 var(--ui);letter-spacing:-.015em}
.portfolio-focus>span{white-space:nowrap}.portfolio-focus>span+span::before{content:"/";margin:0 12px;color:#b3b4ba}
.portfolio-socials{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:10px}
.portfolio-socials a{display:inline-flex;align-items:center;gap:5px;padding:6px 1px;font-size:11px;line-height:1.4;color:#525761;border-radius:4px;transition:color .2s}
.portfolio-socials a>img{width:12px;height:12px;opacity:.6}.portfolio-socials a:hover{color:#9d752f}.portfolio-socials a:focus-visible{outline:2px solid #ad8545;outline-offset:4px}
.portfolio-collection{--folder-fit-width:960;height:100%;width:100%;max-width:1550px;position:relative;perspective:1800px;touch-action:pan-y;isolation:isolate}
.folder-world{width:1100px;height:800px;position:absolute;left:50%;top:50%;transform-origin:50% 50%}
.folder-sway{width:100%;height:100%;position:relative;transition:transform .75s cubic-bezier(.22,1,.36,1),translate .45s cubic-bezier(.22,1,.36,1),rotate .45s cubic-bezier(.22,1,.36,1),scale .3s cubic-bezier(.22,1,.36,1);transform-origin:50% 60%}
.folder-shell{position:absolute;display:block;left:258px;top:386px;width:585px;height:430px;max-width:none;user-select:none;pointer-events:none}
.folder-rear,.folder-front{position:absolute;inset:0;pointer-events:none;transform-origin:550px 730px;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.folder-rear{z-index:0}
.folder-front{z-index:10}
.folder-material{position:absolute;inset:0;transform-origin:550px 730px}
.folder-front .folder-shell{clip-path:inset(34.7% 0 0 0)}
/* Move the shell and every preview together; parallax keeps its own transform. */
.portfolio-collection[data-engaged=true] .folder-sway{translate:0 -4px;rotate:-.35deg}
.portfolio-collection[data-pressed=true] .folder-sway{translate:0 4px;rotate:0deg;scale:.98;transition-duration:.12s}
.folder-projects{display:contents}
.folder-card{position:absolute;left:446px;top:0;width:208px;height:266px;z-index:var(--card-depth);transform:translate3d(var(--card-x),var(--card-y),0) rotate(var(--card-angle));transition:transform .85s cubic-bezier(.2,.78,.2,1);transition-delay:var(--card-delay);transform-origin:50% 50%}
.folder-card-surface{display:block;position:relative;width:100%;height:100%;border-radius:25px;background:#e5e3de;isolation:isolate;box-shadow:0 1px 2px #2923230a,0 10px 24px -6px #45382f12,0 25px 45px -16px #30251e1c;transition:transform .65s cubic-bezier(.22,1,.36,1);transform-origin:50% 65%;outline-offset:7px}
.folder-card-surface>img{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:inherit;display:block;user-select:none;pointer-events:none}
/* Static metal layers: hover fades a prepainted halo, never animates blur. */
.folder-card[data-metal=gold]{--metal-rim:linear-gradient(135deg,#f5df9b 3%,#b88a35 26%,#fff3c8 48%,#c4953c 74%,#eed393 97%);--metal-near:#d3a23c4d;--metal-far:#e4b9542e;--metal-hover:#d4a23e66;--metal-hover-far:#edc36b40}
.folder-card[data-metal=silver]{--metal-rim:linear-gradient(135deg,#edf3fc 3%,#8b9bb2 26%,#fff 48%,#a6b3c8 74%,#e1eaf5 97%);--metal-near:#9daec74a;--metal-far:#b8cbe02c;--metal-hover:#8da4c166;--metal-hover-far:#c4d5e840}
.folder-card[data-metal=bronze]{--metal-rim:linear-gradient(135deg,#ecd5bb 3%,#a97042 26%,#f2dbc4 48%,#b98456 74%,#dcb58d 97%);--metal-near:#b7814c33;--metal-far:#bf8d6121;--metal-hover:#ab743e50;--metal-hover-far:#d0a17330}
.folder-card[data-metal] .folder-card-surface::before,.folder-card[data-metal] .folder-card-surface::after{content:"";position:absolute;inset:-1.5px;border-radius:26.5px;pointer-events:none;z-index:-1}
.folder-card[data-metal] .folder-card-surface::before{background:var(--metal-rim);box-shadow:0 0 13px 2px var(--metal-near),0 0 34px 9px var(--metal-far),0 8px 26px -8px var(--metal-near)}
.folder-card[data-metal] .folder-card-surface::after{box-shadow:0 0 19px 4px var(--metal-hover),0 0 48px 14px var(--metal-hover-far);opacity:0;transition:opacity .3s ease}
.folder-card[data-metal] .folder-card-surface:focus-visible::after{opacity:1}
.portfolio-collection[data-open=false] .folder-card[data-metal] .folder-card-surface::before,.portfolio-collection.folder-entering .folder-card[data-metal] .folder-card-surface::before{box-shadow:none}
.portfolio-collection[data-open=false] .folder-card[data-metal] .folder-card-surface::after{opacity:0}
.folder-card-caption{position:absolute;left:12px;right:12px;bottom:12px;min-height:65px;border:1px solid #ffffff8a;border-radius:16px;padding:14px 31px 12px 13px;background:#fffffff2;color:#2a2a2e;box-shadow:0 2px 12px #00000004;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .4s cubic-bezier(.22,1,.36,1);pointer-events:none}
.folder-card-caption small{display:block;font-size:9px;letter-spacing:-.02em;color:#737379;line-height:1.5}
.folder-card-caption strong{display:block;font-size:13px;font-weight:500;letter-spacing:-.02em;line-height:1.5;margin-top:3px}
.folder-card-caption>img{position:absolute;width:16px;height:16px;right:12px;bottom:15px;opacity:.6}
.folder-card:focus-within{z-index:9}
.folder-card-surface:focus-visible{transform:translate3d(0,-14px,0) rotate(calc(var(--card-angle) * -.35)) scale(1.035)}
.folder-card-surface:focus-visible .folder-card-caption{opacity:1;transform:translateY(0)}
.folder-handle{pointer-events:auto;position:absolute;left:305px;top:536px;width:490px;height:205px;border-radius:22px 22px 54px 54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:transparent;color:#765d73;cursor:pointer;touch-action:manipulation}
.folder-handle-title{font:450 26px/1.3 var(--heading);letter-spacing:-.035em}
.folder-handle-count{font-size:11px;letter-spacing:.035em;color:#997e92}
.folder-click-hint{display:flex;align-items:center;gap:7px;font-size:15px;margin-top:9px;padding:8px 13px;border:1px solid #fff9;border-radius:20px;background:#ffffff64;color:#896d83}
.folder-click-hint>img{width:13px;height:13px;opacity:.5;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.folder-catalog-link{position:absolute;left:388px;top:731px;width:324px;min-height:38px;display:flex;align-items:center;justify-content:center;gap:7px;pointer-events:auto;font-size:15px;color:#806579;cursor:pointer;border-radius:18px}
.folder-catalog-link>img{width:13px;height:13px;opacity:.5}
.folder-catalog-link:hover{color:#55404f;background:#ffffff45}
.portfolio-collection[data-open=false] .folder-card,.portfolio-collection.folder-entering .folder-card{transform:translate3d(var(--fold-x),500px,0) rotate(var(--fold-angle)) scale(.8);transition-delay:0ms}
.portfolio-collection.folder-entering .folder-card{transition:none}
.portfolio-collection[data-open=false] .folder-card-surface{transform:none}
.portfolio-collection[data-open=false] .folder-click-hint>img{transform:rotate(180deg)}
@media(hover:hover) and (pointer:fine){.folder-card:hover{z-index:9}.folder-card-surface:hover{transform:translate3d(0,-14px,0) rotate(calc(var(--card-angle) * -.35)) scale(1.035)}.folder-card-surface:hover .folder-card-caption{opacity:1;transform:translateY(0)}.folder-handle:hover{color:#5f475a}}
@media(hover:hover) and (pointer:fine){.folder-card[data-metal] .folder-card-surface:hover::after{opacity:1}}
/* The fan is shared. On a phone a tap brings its actual sheet forward. */
.folder-mobile-tip{display:none}
.folder-preview-active{overflow:hidden!important}
.folder-preview{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:20px;border:0;border-radius:0;box-shadow:none;background:transparent;overflow:hidden;color:#303038}
.folder-preview:not([open]){display:none}
.folder-preview[open]{display:grid;place-items:center;animation:none}
.folder-preview::backdrop{background:#f9f8fabd;backdrop-filter:none;animation:folder-veil-in .3s both}
.folder-preview[data-closing=true]::backdrop{animation:folder-veil-out .35s both}
.folder-preview-panel{width:min(100%,380px,calc((100dvh - 126px)*.8));border-radius:25px;background:#fbfbfc;box-shadow:0 24px 70px -24px #4030444d,0 3px 12px #3323360a;outline:1px solid #d4b289;will-change:transform;overflow:hidden}
.folder-preview-panel[data-metal=gold]{outline-color:#cfaa63;box-shadow:0 0 24px #d7b45226,0 24px 70px -24px #493f3347}
.folder-preview-panel[data-metal=silver]{outline-color:#b6c2d2;box-shadow:0 0 22px #afc1d429,0 24px 70px -24px #34404d40}
.folder-preview-cover{display:block;width:100%;height:auto;aspect-ratio:800/1000;object-fit:cover;border-radius:25px 25px 0 0;user-select:none}
.folder-preview-actions{display:grid;grid-template-columns:1.12fr 1fr;gap:8px;padding:14px;border-top:1px solid #29263209;background:#fff}
.folder-preview-actions button,.folder-preview-actions a{display:flex;justify-content:center;align-items:center;gap:5px;min-height:46px;border-radius:13px;white-space:nowrap;font:450 13px/1.2 var(--ui);letter-spacing:-.02em}
.folder-preview-actions button{background:#f1f0f3;color:#65616b}
.folder-preview-actions a{background:#28272c;color:#fff}
.folder-preview-actions a img{filter:invert(1);opacity:.8}
body[data-design=article] .folder-preview-actions :focus-visible{outline:2px solid #9d7a43;outline-offset:3px}
.folder-preview[data-closing=true] .folder-preview-panel{pointer-events:none}
.folder-card-surface[data-preview-source=true]{opacity:0;pointer-events:none}
@keyframes folder-veil-in{from{opacity:0}to{opacity:1}}
@keyframes folder-veil-out{from{opacity:1}to{opacity:0}}
@media(min-width:761px) and (max-height:700px){.portfolio-hero{padding-top:10px}.portfolio-intro h1{font-size:32px}.portfolio-role{font-size:13px;margin-top:4px}.portfolio-focus{margin-top:6px}.portfolio-socials{margin-top:3px}.portfolio-intro{padding-bottom:0}}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
 body[data-design=article][data-page=home]{--portfolio-nav-height:64px}
 body[data-design=article][data-page=home] .arc-header{height:64px;position:relative;display:flex;justify-content:space-between;padding-inline:24px;border-bottom:0}
 body[data-design=article][data-page=home] .arc-header .arc-navigation{display:flex;position:static;flex-direction:row;gap:24px;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
 body[data-design=article][data-page=home] .arc-header .arc-navigation a{font-size:13px;min-height:44px;display:flex;align-items:center;padding:0;border-radius:0;color:#595961;box-shadow:none;background:none}
 body[data-design=article][data-page=home] .arc-navigation a[href="#home"],body[data-design=article][data-page=home] .arc-menu{display:none}
 body[data-design=article][data-page=home] .arc-header-actions{gap:0}
 body[data-design=article][data-page=home] .arc-language button{font-size:11px;min-width:36px;min-height:44px;padding:8px}
 body[data-design=article][data-page=home] .arc-language button[aria-pressed=true]{background:none;color:#25262a;font-weight:600}
 .portfolio-hero{grid-template-rows:auto auto;align-content:center;gap:0;padding:18px 0 34px;min-height:560px}
 .portfolio-intro{width:calc(100% - 36px);max-width:430px;padding:0}
 .portfolio-intro h1{font-size:clamp(30px,9.2vw,40px);line-height:1.12;font-weight:500;letter-spacing:-.055em;white-space:nowrap}
 .portfolio-role{font-size:16px;margin-top:8px}
 .portfolio-focus{display:grid;grid-template-columns:auto auto;justify-content:center;gap:3px 18px;margin-top:14px;font-size:13px;line-height:1.6}
 .portfolio-focus>span+span::before{content:none}
 .portfolio-socials{gap:24px;margin-top:10px}
 .portfolio-socials a{font-size:13px;min-height:44px;gap:5px;padding:10px 0}
 .portfolio-socials a>img{width:13px;height:13px}
 .portfolio-collection{--folder-fit-width:800;height:clamp(310px,46svh,390px);max-width:470px;perspective:none}
 .folder-shell{left:215px;width:670px;height:447px}
 .folder-card{left:431px;width:238px;height:304px;transform:translate3d(calc(var(--card-x)*.76),var(--card-y),0) rotate(var(--card-angle))}
 .folder-card-surface:hover,.folder-card-surface:focus-visible{transform:none}
 .folder-card-surface:hover .folder-card-caption,.folder-card-surface:focus-visible .folder-card-caption{opacity:0}
 .folder-card:hover,.folder-card:focus-within{z-index:var(--card-depth)}
 .folder-handle{left:285px;width:530px;height:205px}
 .folder-handle-title{font-size:42px}
 .folder-handle-count{font-size:22px}
 .folder-click-hint{font-size:28px;padding:12px 17px;margin-top:8px;min-height:68px;border-radius:36px}
 .folder-click-hint>img{width:22px;height:22px}
 .folder-catalog-link{font-size:30px;min-height:72px;top:713px}
 .folder-catalog-link>img{width:22px;height:22px}
 .folder-mobile-tip{display:block;position:absolute;bottom:1px;left:12px;right:12px;text-align:center;font-size:12px;color:#97939c;letter-spacing:-.015em;pointer-events:none}
 .portfolio-collection[data-open=false] .folder-mobile-tip{visibility:hidden}
}
@media(max-width:360px){
 .portfolio-intro h1{font-size:30px}
 .portfolio-focus{font-size:12px;column-gap:15px}
 .portfolio-socials{gap:21px}
 .portfolio-socials a{font-size:12px}
 .portfolio-collection{height:300px}
 .folder-preview{padding:16px}
 .folder-preview-actions{padding:12px;gap:6px}
 .folder-preview-actions button,.folder-preview-actions a{font-size:12px}
}
@media(max-width:1000px) and (max-height:640px){
 html:has(body[data-design=article][data-page=home]),body[data-design=article][data-page=home]{height:auto;overflow:auto;overscroll-behavior:auto}
 body[data-design=article][data-page=home] #app{height:auto;min-height:100dvh}
 .portfolio-hero{min-height:550px;padding-top:22px;padding-bottom:20px}
 .portfolio-collection{height:310px}
}
@media(prefers-reduced-motion:reduce){.folder-preview::backdrop{animation:none!important}}
@media(prefers-reduced-motion:reduce){.portfolio-hero *,.portfolio-hero *::before,.portfolio-hero *::after{transition:none!important;animation:none!important}.folder-sway,.folder-rear,.folder-front{transform:none!important;translate:none!important;rotate:none!important;scale:none!important}}