/* FRAME desktop concept — home only; other pages retain their existing styles. */
.home{background:#f2f1eb;color:#242a2a}
.home .site-header{height:96px;max-width:none;padding-inline:4.5vw;border-bottom:1px solid #d8d9d1;position:relative;z-index:20}
.home .brand-mark{font-size:25px;font-weight:700;letter-spacing:-1.2px}
.home .brand-caption{letter-spacing:2px;font-size:8px}
.home .main-nav a{font-size:11px;letter-spacing:.3px;text-transform:none}
.home .site-footer{display:none}
.frame-desktop{padding:0 4.5vw}
.desktop-topline,.desktop-bottomline{display:flex;align-items:center;justify-content:space-between;gap:20px}
.desktop-topline{padding-top:23px;font-size:10px;letter-spacing:1.6px;color:#5c625e}
.desktop-topline>span:last-child{letter-spacing:0;font-size:11px}
.desktop-scene{position:relative;isolation:isolate;min-height:650px;height:calc(100svh - 238px);max-height:970px}
.desktop-wordmark{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font:800 clamp(110px,21vw,340px)/.8 var(--sans);letter-spacing:-.085em;color:#e1e3da;white-space:nowrap;z-index:-1;pointer-events:none}
.desktop-wordmark>span{font-size:22px;letter-spacing:0;vertical-align:top;display:inline-block;margin-top:15px;margin-left:10px}
.desktop-intro{position:absolute;top:9%;left:2%;max-width:370px}
.desktop-status{font-size:9px;letter-spacing:.6px;display:flex;align-items:center;gap:7px}
.desktop-status i{width:6px;height:6px;border-radius:50%;background:#cc5939}
.desktop-intro h1{font:400 clamp(22px,2.7vw,38px)/1.5 var(--sans);letter-spacing:-1.5px;margin-top:16px}
.desktop-intro h1 strong{font-weight:650}
.desktop-intro p{font-size:11px;color:#62685f;margin-top:14px}
.desktop-character{position:absolute;width:270px;left:50%;top:49%;transform:translate(-50%,-50%);text-align:center;z-index:3}
.desktop-character img{width:100%;height:auto;filter:drop-shadow(0 20px 12px #26312418);animation:character-breathe 6s ease-in-out infinite}
.character-note{display:inline-block;background:#fbfcf7;border:1px solid #d7d9ce;border-radius:30px;padding:6px 14px;font:10px var(--sans);transform:rotate(-7deg);margin-bottom:-18px;position:relative;z-index:1}
.character-name{display:block;font-size:10px;font-weight:650;letter-spacing:1px;margin-top:-17px}
.character-name>span{display:block;font-size:8px;font-weight:400;letter-spacing:2px;color:#666e60;margin-top:4px}
.desktop-folder{position:absolute;display:block;width:196px;text-align:center;touch-action:pan-y;z-index:5;user-select:none;-webkit-user-select:none}
.folder-event{left:10%;top:46%;--tilt:-9deg;--float-delay:-1s}
.folder-studio{right:7%;top:12%;--tilt:9deg;--float-delay:-4s}
.folder-personal{right:14%;top:61%;--tilt:-5deg;--float-delay:-7s}
.folder-visual{position:relative;display:block;width:180px;height:144px;margin-inline:auto;transform:rotate(var(--tilt));animation:folder-drift 8s ease-in-out var(--float-delay) infinite;filter:drop-shadow(0 14px 10px #242f3921);transition:filter .2s}
.folder-blue{--folder:#82b9d5;--folder-dark:#629cbe;--folder-light:#c0dfee}
.folder-yellow{--folder:#e5c263;--folder-dark:#c6a043;--folder-light:#f8e4a2}
.folder-rose{--folder:#d3a89e;--folder-dark:#b6897d;--folder-light:#eed3ca}
.folder-back{position:absolute;inset:27px 0 0;background:var(--folder-dark);border-radius:7px 9px 10px 10px;border:1px solid #00000012}
.folder-tab{position:absolute;left:0;top:15px;width:74px;height:28px;background:var(--folder-dark);border-radius:7px 12px 0 0}
.folder-photo{position:absolute;display:block;background:#fffef7;border:1px solid #e3e0d5;box-shadow:0 2px 6px #0000000d;width:114px;height:100px;left:32px;top:12px;padding:7px;overflow:hidden}
.photo-back{transform:rotate(-13deg);background:#ecece2}
.photo-back>span{display:block;background:repeating-linear-gradient(0deg,#d8dcd3 0px,#d8dcd3 1px,transparent 1px,transparent 13px);width:100%;height:100%}
.photo-front{transform:rotate(9deg);top:6px;left:54px}
.photo-front img{width:100%;height:100%;object-fit:cover}
.photo-cross{display:block;font:300 45px/1.2 var(--sans);color:var(--folder-dark)}
.photo-front small{font-size:6px;letter-spacing:1.1px;color:#7e8177}
.folder-face{position:absolute;inset:58px -4px 0;background:linear-gradient(145deg,var(--folder-light),var(--folder));border-radius:7px 7px 12px 12px;border:1px solid #ffffff60;box-shadow:inset 0 1px 0 #ffffff70;display:flex;align-items:flex-end;justify-content:space-between;padding:14px 17px}
.folder-face small{font-size:6px;letter-spacing:1.4px;color:#34404790}
.folder-face>span{font:400 25px/1 var(--serif);color:#34404790}
.folder-label{display:flex;justify-content:center;align-items:center;gap:12px;font-size:15px;font-weight:600;letter-spacing:-.2px;margin-top:16px}
.folder-label>span{font-size:13px;font-weight:400}
.folder-subtitle{display:block;margin-top:3px;font-size:10px;color:#6b7068;white-space:nowrap}
.desktop-folder:hover .folder-visual,.desktop-folder:focus-visible .folder-visual{filter:drop-shadow(0 19px 11px #242f3935)}
.desktop-folder:is(:hover,:focus-visible) .folder-photo{top:-3px;transition:top .25s}
.desktop-contact{position:absolute;bottom:7%;left:3%;font:400 33px/.98 var(--serif);letter-spacing:-.8px}
.desktop-contact>span{display:block;font:300 33px/1 var(--sans);color:#ba5036;margin-bottom:10px}
.desktop-contact small{display:block;font:10px var(--sans);letter-spacing:0;color:#6a7066;margin-top:14px}
.desktop-doodle{position:absolute;color:#c15939;pointer-events:none}
.doodle-star{left:33%;bottom:11%;font-size:42px;transform:rotate(-15deg)}
.doodle-plus{right:2%;top:47%;font:200 40px var(--sans);color:#879477}
.desktop-bottomline{border-top:1px solid #d8d9d1;padding:18px 0;font-size:10px;color:#666e61}
.desktop-bottomline p>span:first-child{color:#b65337;margin-right:9px;font-size:17px}
.motion-toggle{border:1px solid #cbd0c3;border-radius:24px;padding:7px 12px;background:transparent;font-size:10px;white-space:nowrap;display:flex;gap:12px;align-items:center}
.desktop-footer{margin:0 4.5vw;padding:17px 0 21px;border-top:1px solid #d8d9d1;display:flex;justify-content:space-between;font-size:9px;color:#73796f;letter-spacing:.5px}
.desktop-footer a{color:#31392e}
.desktop-paused .folder-visual,.desktop-paused .desktop-character img,.desktop-folder.is-dragging .folder-visual{animation-play-state:paused}
.desktop-folder.is-dragging{z-index:10;cursor:grabbing}
@keyframes folder-drift{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-14px) rotate(calc(var(--tilt) + 5deg))}}
@keyframes character-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@media(min-width:1600px){.desktop-character{width:330px}.desktop-folder{width:230px}.folder-visual{scale:1.12;margin-bottom:12px}}
@media(max-width:760px){
.home .site-header{height:78px;padding-inline:22px}
.home .brand-mark{font-size:24px}.home .brand-caption{font-size:7px}
.home .main-nav{background:#f2f1eb;top:72px;padding:25px;left:0;right:0}
.frame-desktop{padding-inline:22px}
.desktop-topline{padding-top:18px;font-size:8px;letter-spacing:1px}.desktop-topline>span:last-child{display:none}
.desktop-scene{height:740px;min-height:740px}
.desktop-wordmark{font-size:29vw;top:43%}
.desktop-wordmark>span{font-size:11px;margin-top:5px;margin-left:4px}
.desktop-intro{left:0;top:4%}.desktop-intro h1{font-size:27px;margin-top:12px;letter-spacing:-1px}.desktop-status{font-size:8px}.desktop-intro p{font-size:10px;margin-top:9px}
.desktop-character{width:200px;top:48%;left:48%}
.character-note{font-size:8px;padding:5px 11px}.character-name{font-size:9px;margin-top:-14px}.character-name>span{font-size:7px}
.desktop-folder{width:135px}.folder-visual{width:130px;height:105px}
.folder-event{left:0;top:68%;--tilt:-8deg}.folder-studio{right:0;top:23%;--tilt:8deg}.folder-personal{right:0;top:73%;--tilt:5deg}
.folder-tab{width:53px;height:23px;top:10px}.folder-back{inset:22px 0 0}.folder-face{inset:43px -2px 0;padding:10px 10px}.folder-face small{font-size:5px;letter-spacing:.6px}.folder-face>span{font-size:19px}
.folder-photo{width:84px;height:72px;left:22px;top:6px;padding:4px}.photo-front{left:38px;top:2px}.photo-cross{font-size:32px}.photo-front small{font-size:4px;letter-spacing:.5px}
.folder-label{font-size:13px;margin-top:10px;gap:7px}.folder-subtitle{font-size:8px}
.desktop-contact{left:0;bottom:39%;font-size:25px}.desktop-contact>span{font-size:24px;margin-bottom:6px}.desktop-contact small{font-size:8px;margin-top:10px}
.doodle-star{left:12%;bottom:40%;font-size:23px;display:none}.doodle-plus{right:4%;top:56%;font-size:27px}
.desktop-bottomline{padding:14px 0;font-size:9px;gap:10px;align-items:flex-start}.desktop-bottomline p{max-width:190px}.drag-hint{display:none}.motion-toggle{padding:6px 9px;font-size:9px}
.desktop-footer{margin-inline:22px;font-size:8px}.desktop-footer>span:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){.folder-visual,.desktop-character img{animation:none!important}}
/* Explicit play opts in even when the operating system prefers reduced motion. */
@media(prefers-reduced-motion:reduce){
 body.desktop-motion-opt-in .folder-visual{animation:folder-drift 8s ease-in-out var(--float-delay) infinite!important}
 body.desktop-motion-opt-in .desktop-character img{animation:character-breathe 6s ease-in-out infinite!important}
}
@media(max-width:760px){
 .desktop-scene{height:700px;min-height:700px}
 .desktop-character{top:47%;width:190px}
 .desktop-folder{width:100px;top:77%}
 .folder-event{left:0}.folder-studio{left:calc(50% - 50px);right:auto}.folder-personal{right:0}
 .folder-visual{width:94px;height:80px}
 .folder-tab{width:38px;height:18px;top:8px}.folder-back{inset:17px 0 0}
 .folder-face{inset:32px -2px 0;padding:8px}.folder-face small{font-size:4px}.folder-face>span{font-size:17px}
 .folder-photo{width:61px;height:55px;left:16px;top:4px}.photo-front{left:25px;top:0}.photo-cross{font-size:24px}.photo-front small{font-size:3px}
 .folder-label{font-size:12px;margin-top:12px}.folder-subtitle{font-size:8px;white-space:normal;line-height:1.7;max-width:90px;margin-inline:auto}
 .desktop-contact{bottom:37%;font-size:23px}
}
/* Wider floating paths; translate leaves icon rotation and drag positioning independent. */
.desktop-folder{--drift-x:34px;--drift-y:26px;animation:desktop-wander 16s ease-in-out var(--float-delay) infinite}
.folder-studio{animation-duration:19s;--drift-x:-36px;--drift-y:32px}
.folder-personal{animation-duration:22s;--drift-x:40px;--drift-y:-30px}
@keyframes desktop-wander{0%,100%{translate:0 0}25%{translate:var(--drift-x) calc(var(--drift-y) * -.5)}50%{translate:calc(var(--drift-x) * -.6) var(--drift-y)}75%{translate:calc(var(--drift-x) * -.35) calc(var(--drift-y) * -.7)}}
.desktop-paused .desktop-folder{animation-play-state:paused!important}
.desktop-folder:is(.is-dragging,.is-positioned){animation:none!important;translate:none}
@media(max-width:760px){.desktop-folder{--drift-x:5px;--drift-y:18px}.folder-studio{--drift-x:-5px;--drift-y:-16px}.folder-personal{--drift-x:-5px;--drift-y:18px}}
@media(prefers-reduced-motion:reduce){.desktop-folder{animation:none}body.desktop-motion-opt-in .desktop-folder{animation:desktop-wander 16s ease-in-out var(--float-delay) infinite!important}}
body.desktop-motion-opt-in .desktop-folder:is(.is-dragging,.is-positioned){animation:none!important}

@media(hover:hover) and (pointer:fine){.desktop-folder{cursor:grab}.desktop-folder.is-dragging{cursor:grabbing}}