:root{--font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--font-display:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;--ink:#1d1d1f;--blue:#007aff;--paper:#fafafc;--soft:#6e6e73;--line:#00000014;color-scheme:light;font-family:var(--font-ui);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:#08638d;color:white}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button{color:inherit}a{color:inherit}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #ffc62b;outline-offset:5px}button{border:0}button:disabled{opacity:.35;cursor:default}img{max-width:100%;display:block}svg{display:block}p,h1,h2,h3{margin:0}button svg{pointer-events:none}body:has(dialog[open]){overflow:hidden}.wallpaper{position:fixed;inset:0;background-image:linear-gradient(180deg,#002c4722 0%,transparent 50%,#001e301c 100%),url('assets/portfolio-31.webp');background-size:cover;background-position:center;z-index:-2}.wallpaper:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 20%,transparent 35%,#001c301c)}.skip-link{position:fixed;top:-80px;left:16px;z-index:1000;padding:12px 20px;background:white;color:var(--ink);border-radius:8px}.skip-link:focus{top:8px}
.menubar{height:47px;display:flex;align-items:center;gap:34px;padding:0 27px;background:#eff7f2d9;border-bottom:1px solid #fff8;backdrop-filter:blur(20px);color:#133441;position:relative;z-index:20;box-shadow:0 1px 15px #00304510}.menubar button{background:none;padding:7px 4px;font-size:12px;white-space:nowrap}.brand{display:flex;align-items:center;gap:11px;font-weight:900!important;letter-spacing:.04em}.brand-symbol{font-size:22px;letter-spacing:-.1em;line-height:1;transform:rotate(-10deg)}.menubar nav{display:flex;gap:25px;align-items:center}.menubar .menu-active{font-weight:700}.menubar nav button:hover{color:#0086bd}.system-status{margin-left:auto;display:flex;gap:24px;align-items:center;font-size:11px}.location{display:flex;align-items:center;gap:7px}.location i{width:5px;height:5px;border-radius:100%;background:#2f8156}#clock{font-variant-numeric:tabular-nums;min-width:35px;font-weight:500}
#desktop{height:100svh;min-height:700px;position:relative;overflow:hidden}.hero{position:absolute;top:6.9%;left:5%;right:5%;pointer-events:none}.hero-meta{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.14em;font-weight:500}.hero-meta>span{font-size:9px;opacity:.8}.hero h1{font-weight:900;font-size:clamp(90px,15.2vw,248px);letter-spacing:-.06em;line-height:1.08;margin-left:-.008em;white-space:nowrap;filter:drop-shadow(0 2px 4px #003a4612)}.hero-dot{color:#d2f7a3}.hero-bottom{display:flex;align-items:center;justify-content:space-between;padding:0 3px}.hero-bottom>p{font-size:16px;letter-spacing:.01em}.explore-hint{font-family:var(--font-ui);font-size:16px;transform:rotate(-4deg);position:relative;margin-right:5.5%}.explore-hint svg{position:absolute;width:44px;height:44px;right:-49px;top:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.folder-field{position:absolute;inset:0;pointer-events:none}.folder-position{position:absolute;transform:translate(-50%,-50%);width:clamp(165px,15.5vw,235px);pointer-events:auto;z-index:5;will-change:transform}.photo-position{left:16%;top:56%}.video-position{left:38%;top:64%}.art-position{left:61%;top:54%}.social-position{left:83%;top:63%}.folder{width:100%;padding:0 0 10px;background:none;display:flex;align-items:center;flex-direction:column;user-select:none;touch-action:pan-y;position:relative;animation:bob 6s ease-in-out infinite;animation-delay:var(--delay);cursor:grab}.folder-position.dragging{z-index:30}.folder-position.dragging .folder{cursor:grabbing;animation-play-state:paused}.folder-position.dragging .folder-art{transform:rotate(0deg) scale(1.05);filter:drop-shadow(0 24px 14px #001b4c45)}.folder-art{position:relative;display:block;width:100%;aspect-ratio:1.18;transform:rotate(var(--tilt));transition:transform .4s cubic-bezier(.2,.7,.3,1),filter .4s;filter:drop-shadow(0 12px 10px #001e403a);isolation:isolate}.folder-image{width:100%;height:100%;object-fit:contain;position:relative;z-index:2;pointer-events:none}.folder-index{position:absolute;right:11%;top:34%;z-index:3;color:#00507980;font:500 11px var(--font-ui);letter-spacing:.05em}.folder-stamp{position:absolute;left:17%;top:51%;z-index:3;color:#03699065;font-size:22px;font-weight:900;letter-spacing:-.04em;transform:rotate(-1deg);text-shadow:0 1px 0 #b2eaff50}.video-stamp{font-size:30px;left:19%;top:46%}.art-stamp{font-size:40px;top:39%}.social-stamp{font-size:47px;top:38%}.peek{position:absolute;width:52%;height:72%;object-fit:cover;top:9%;z-index:1;border:4px solid #fff;box-shadow:0 3px 8px #0003;transition:transform .45s cubic-bezier(.2,.7,.3,1);pointer-events:none;border-radius:1px}.peek-one{left:12%;transform:rotate(-8deg) translateY(2px)}.peek-two{right:12%;transform:rotate(8deg) translateY(2px)}.folder:hover .folder-art,.folder:focus-visible .folder-art{transform:rotate(0deg) translateY(-5px) scale(1.04)}.folder:hover .peek-one,.folder:focus-visible .peek-one{transform:translate(-9px,-35px) rotate(-14deg)}.folder:hover .peek-two,.folder:focus-visible .peek-two{transform:translate(9px,-45px) rotate(12deg)}.folder-label{font-size:14px;font-weight:500;text-align:center;line-height:1.3;letter-spacing:.01em;padding:5px 9px;border-radius:5px;margin-top:7px;text-shadow:0 1px 8px #001a4b,0 1px 2px #001a4b}.folder:hover .folder-label,.folder:focus-visible .folder-label{background:#007ec5b3}.folder-count{font-size:10px;opacity:.78;margin-top:2px;text-shadow:0 1px 5px #001a4b}.hello-sticker{position:absolute;right:5.5%;top:30%;width:90px;background:none;padding:0;transform:rotate(8deg);z-index:4;transition:transform .25s}.hello-sticker img{border-radius:100%;box-shadow:0 5px 14px #002e5038;border:3px solid #ffffffc0}.hello-sticker>span{display:block;font-family:var(--font-ui);font-size:13px;white-space:nowrap;transform:rotate(-5deg) translateX(-11px);margin-top:7px}.hello-sticker:hover{transform:rotate(-3deg) scale(1.08)}.secret-folder{position:absolute;left:7%;bottom:14%;width:70px;transform:rotate(-10deg);background:none;z-index:3;padding:0}.secret-folder img{opacity:.83;filter:hue-rotate(135deg) saturate(.8);transition:transform .3s}.secret-folder>span{display:block;font:500 8px var(--font-ui);letter-spacing:.06em;white-space:nowrap;margin-left:-4px;text-shadow:0 1px 5px #0005}.secret-folder .secret-scribble{font-family:var(--font-ui);text-transform:none;font-size:11px;transform:rotate(6deg);padding-top:4px;opacity:.7}.secret-folder:hover img{transform:rotate(15deg) translateY(-5px)}
.desktop-bottom{position:absolute;bottom:24px;left:32px;right:32px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.desktop-tip{display:flex;align-items:center;gap:12px;font-size:10px;line-height:1.6;letter-spacing:.015em;opacity:.9}.tip-icon{border:1px solid #ffffff80;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:16px}.mobile-tip-text{display:none}.desktop-credit{font-size:8px;line-height:1.8;text-align:right;letter-spacing:.12em}.desktop-credit span{opacity:.6}.dock{padding:8px 12px;display:flex;align-items:center;gap:8px;border:1px solid #ffffff80;border-radius:19px;background:#d3e9e155;backdrop-filter:blur(20px);box-shadow:0 5px 25px #001d3e3a,0 1px 0 #fff7 inset;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}.dock-item{background:none;position:relative;width:48px;height:48px;padding:2px;display:grid;place-items:center;transition:transform .2s}.dock-item:hover{transform:translateY(-6px) scale(1.1)}.dock-item>img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 2px #001e3033)}.dock-item>img.dock-avatar{border-radius:10px;border:1px solid #fff8}.dock-mail{width:42px;height:42px;border-radius:10px;background:linear-gradient(#f4f2e9,#d8e2df);display:grid;place-items:center;box-shadow:0 1px 2px #0003}.dock-mail svg{width:33px;height:33px;fill:none;stroke:#12688a;stroke-width:1.5}.dock-util{width:35px;height:40px;color:#eefcfa}.dock-util svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}.dock-separator{width:1px;height:33px;background:#eaf8ef66;margin:0 4px}.tooltip{position:absolute;bottom:calc(100% + 15px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;color:#17323c;background:#eff8f1;padding:7px 11px;border:1px solid #fff9;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .2s}.dock-item:hover .tooltip,.dock-item:focus-visible .tooltip{opacity:1}.play-icon{display:none}.motion-paused .pause-icon{display:none}.motion-paused .play-icon{display:block}.motion-paused .folder{animation-play-state:paused}
dialog{padding:0;border:1px solid #ffffffb0;color:var(--ink);background:var(--paper);box-shadow:0 30px 100px #001d3866;border-radius:13px;overflow:hidden;max-width:none;max-height:none}dialog::backdrop{background:#0022374d;backdrop-filter:blur(7px)}dialog[open]{animation:window-in .25s cubic-bezier(.2,.8,.3,1)}#project-dialog{width:min(1140px,calc(100vw - 80px));height:min(790px,calc(100svh - 110px));min-height:400px}#project-dialog.maximized{width:calc(100vw - 24px);height:calc(100svh - 24px);transform:none!important}.project-window{height:100%;display:flex;flex-direction:column}.window-bar{height:49px;min-height:49px;background:#eeefea;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9ddd6;cursor:grab;user-select:none;padding:0 17px;gap:15px}.window-bar>p{font-size:12px;font-weight:500;position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}.traffic-lights{display:flex;gap:8px;align-items:center}.traffic{width:13px;height:13px;padding:0;border-radius:100%;display:grid;place-items:center;font-size:12px;line-height:1;color:#47251e;border:1px solid #00000012}.traffic span{opacity:0}.traffic-lights:hover .traffic span,.traffic:focus-visible span{opacity:1}.traffic.close{background:#ff655c}.traffic.minimize{background:#ffbd45}.traffic.maximize{background:#32c84e}.window-key{font-size:8px;letter-spacing:.09em;color:#8a918e;margin-left:auto}.window-layout{flex:1;display:flex;min-height:0}.window-sidebar{width:213px;flex-shrink:0;background:#e9ede7;display:flex;flex-direction:column;padding:30px 12px 20px;border-right:1px solid #dfe4dc}.sidebar-label{padding:0 11px 15px;font-size:9px;letter-spacing:.12em;color:#7a857d;font-weight:500}.sidebar-items{display:flex;flex-direction:column;gap:5px}.sidebar-items button{display:flex;align-items:center;text-align:left;gap:9px;font-size:11px;padding:11px 9px;background:transparent;border-radius:6px;line-height:1.35}.sidebar-items button>span{width:18px;text-align:center;color:#429dc4;font-weight:500;flex-shrink:0}.sidebar-items button small{font-size:9px;color:#7b8a86;margin-left:auto}.sidebar-items button.active{background:#cddfdc;font-weight:500}.sidebar-items button:hover{background:#dae4dd}.sidebar-extra{margin-top:30px;border-top:1px solid #d7ded4;padding:18px 9px;display:grid;gap:17px}.sidebar-extra button{background:transparent;text-align:left;font-size:10px;display:flex;justify-content:space-between;gap:8px}.sidebar-extra button:hover{color:#0076b5}.sidebar-signature{margin-top:auto;padding:30px 9px 5px;color:#849487;font-size:13px;line-height:1.3;letter-spacing:-.02em}.sidebar-signature span{display:block;font-weight:900;margin-top:15px;font-size:22px;letter-spacing:-.055em;color:#afb9ad}.window-content{padding:36px 36px 45px;flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cad1c5 transparent;outline:none}.section-eyebrow{font-size:9px;letter-spacing:.14em;color:#7c8981;margin-bottom:13px}.collection-heading{font-size:clamp(28px,3.2vw,43px);font-weight:900;letter-spacing:-.045em;line-height:1.08}.collection-intro{color:#6a746e;font-size:12px;line-height:1.7;max-width:550px;margin-top:13px}.services{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}.services span{border:1px solid #dce2d7;border-radius:5px;font-size:9px;padding:5px 8px;color:#6b7a70}.gallery-toolbar{display:flex;justify-content:space-between;align-items:center;margin:30px 0 15px;border-top:1px solid #e0e5dc;padding-top:17px;font-size:9px;letter-spacing:.08em}.gallery-toolbar span:last-child{color:#8c978f;font-size:8px;letter-spacing:0}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}.project-grid.photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.project-card{background:none;text-align:left;display:block;padding:0;width:100%;color:var(--ink)}.card-visual{overflow:hidden;border-radius:5px;aspect-ratio:1.35;background:#e4e5dc;position:relative;display:block;border:1px solid #dddcd540}.card-visual img{height:100%;width:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1);pointer-events:none}.photo-grid .card-visual{aspect-ratio:.8}.art-grid .card-visual img{object-fit:contain}.art-grid .project-card:first-child .card-visual{background:#111}.social-grid .card-visual{aspect-ratio:1.05;background:#12171b}.social-grid .card-visual img{object-position:top}.project-card:hover .card-visual img,.project-card:focus-visible .card-visual img{transform:scale(1.035)}.card-open{position:absolute;bottom:10px;right:10px;width:27px;height:27px;border-radius:100%;background:#f7faf0ec;display:grid;place-items:center;font-size:16px;box-shadow:0 1px 6px #0002;transition:transform .2s}.project-card:hover .card-open{transform:rotate(45deg)}.card-video{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.card-video span{width:43px;height:43px;display:grid;place-items:center;border-radius:100%;background:#ffffffe0;color:#173844;font-size:16px;backdrop-filter:blur(10px);padding-left:3px;box-shadow:0 3px 20px #0003}.card-tag{position:absolute;top:10px;left:10px;border:1px solid #fff8;background:#142930ad;color:white;font-size:8px;border-radius:4px;padding:4px 6px;backdrop-filter:blur(10px)}.card-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px;font-size:12px;font-weight:500;line-height:1.4}.card-title>span{font-size:12px;font-weight:400;color:#7d8d80}.card-subtitle{display:block;font-size:9px;color:#839084;margin-top:3px;line-height:1.4}.collection-end{margin-top:35px;padding-top:20px;border-top:1px solid #e0e5dc;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;color:#77877c}.collection-end button{background:none;font-size:10px;color:#007aa7;padding:6px 0}.window-status{height:28px;min-height:28px;background:#eeefea;border-top:1px solid #d9ddd6;padding:0 17px;display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#849084;letter-spacing:.04em}
.about-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:start}.about-photo{background:#b8d7d9;border-radius:7px;padding:22px 18px 18px;transform:rotate(3deg);margin-top:10px;box-shadow:0 5px 12px #243d2712}.about-photo img{border-radius:100%}.about-photo figcaption{text-align:center;font-family:var(--font-ui);font-size:14px;transform:rotate(-3deg);margin-top:20px}.about-copy{font-size:13px;line-height:1.8;color:#68756c;margin-top:24px}.about-copy p+p{margin-top:15px}.large-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--ink);color:white;border-radius:7px;padding:15px 20px;font-size:12px;text-decoration:none;margin-top:24px}.large-cta:hover{background:#077daa}.about-disciplines{margin-top:35px;border-top:1px solid var(--line)}.discipline-row{padding:15px 0;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);font-size:13px}.discipline-row span:first-child{color:#99a594;font-size:10px}.discipline-row span:nth-child(2){margin-right:auto}.discipline-row small{color:#85917f;font-size:9px}.contact-header{padding-bottom:25px}.contact-heading{font-size:clamp(36px,4.8vw,68px);line-height:1.02;letter-spacing:-.055em;font-weight:900}.contact-heading em{font-style:normal;color:#138fb2}.contact-links{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:28px}.contact-row{display:flex;align-items:center;gap:15px;padding:22px 0;border-bottom:1px solid var(--line)}.contact-row>span{font-size:9px;letter-spacing:.08em;color:#7b8a80;width:65px;flex-shrink:0}.contact-row a{font-size:clamp(13px,1.8vw,21px);letter-spacing:-.02em;text-decoration:none;overflow-wrap:anywhere}.contact-row a:hover{color:#148bad}.contact-row button,.contact-row>a:last-child:not(:first-of-type){margin-left:auto;background:#e8ede4;padding:7px 10px;border-radius:5px;font-size:10px;flex-shrink:0}.contact-footnote{font-size:11px;line-height:1.7;color:#869083;margin-top:23px}.secret-content{text-align:center;padding:20px 5px}.secret-content>img{width:105px;margin:0 auto 28px;transform:rotate(-12deg);filter:hue-rotate(135deg)}.secret-content h2{font-size:55px;font-weight:900;letter-spacing:-.06em}.secret-content p{font-size:14px;line-height:1.7;color:#6a786d;margin:14px auto;max-width:420px}.secret-content .secret-note{font:12px var(--font-ui);color:#9ba88f;transform:rotate(-3deg);margin-top:30px}
#lightbox{width:min(1120px,calc(100vw - 50px));height:min(900px,calc(100svh - 50px));background:#14211f;color:#f5f8ee;border-color:#ffffff26}#lightbox::backdrop{background:#041712ba;backdrop-filter:blur(12px)}.lightbox-shell{height:100%;display:flex;flex-direction:column}.lightbox-shell>header{display:flex;align-items:center;justify-content:space-between;padding:20px 25px;gap:20px;min-height:83px;border-bottom:1px solid #ffffff16}.lightbox-shell>header span{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#b4c3b2}.lightbox-shell h2{font-size:18px;letter-spacing:-.02em;margin-top:6px;font-weight:500}.lightbox-shell>header button{font-size:27px;background:#ffffff0c;border:1px solid #ffffff1c;border-radius:100%;width:36px;height:36px;line-height:1;flex-shrink:0}.lightbox-shell>header button:hover{background:#ffffff25}#lightbox-media{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:18px;background:#0d1515}#lightbox-media>img{max-width:100%;max-height:100%;height:100%;width:100%;object-fit:contain}#lightbox-media iframe{aspect-ratio:16/9;max-height:100%;width:100%;border:0}.lightbox-shell>footer{padding:18px 25px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}.lightbox-shell>footer>p{font-size:11px;line-height:1.5;color:#a9baa7}.lightbox-actions{display:flex;gap:25px;align-items:center;flex-shrink:0}#lightbox-link{font-size:10px;text-decoration:none;border-bottom:1px solid #719b94;padding:6px 0;color:#c3e5ce}.lightbox-pagination{display:flex;align-items:center;gap:13px;font-size:10px;font-variant-numeric:tabular-nums;color:#bbc9b6}.lightbox-pagination button{border:1px solid #ffffff2a;border-radius:50%;background:none;width:30px;height:30px}.lightbox-pagination button:not(:disabled):hover{background:#ffffff1c}.lightbox-pagination[hidden]{display:none}.toast{position:fixed;bottom:110px;left:50%;transform:translate(-50%,20px);background:#eff6e9;color:#244438;font-size:12px;padding:13px 20px;border-radius:30px;box-shadow:0 8px 25px #0002;opacity:0;transition:transform .25s,opacity .25s;pointer-events:none;z-index:100}.toast.visible{opacity:1;transform:translate(-50%,0)}#confetti{position:fixed;inset:0;pointer-events:none;z-index:1000;overflow:hidden}.confetti-bit{position:absolute;top:-20px;width:10px;height:14px;animation:confetti-fall 2.4s ease-in forwards}.noscript{position:relative;margin:45px 20px;padding:30px;background:#fff;color:#183d4b;border-radius:12px;z-index:40}.noscript p{margin:20px 0}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes window-in{from{opacity:0;scale:.96}to{opacity:1;scale:1}}@keyframes confetti-fall{to{transform:translate(var(--drift),100vh) rotate(600deg);opacity:0}}
@media(min-width:1700px){#desktop{min-height:850px}.folder-label{font-size:17px}.hero{top:8%}.hello-sticker{width:110px}.hero-bottom>p{font-size:20px}.explore-hint{font-size:19px}}
@media(max-width:1100px){.menubar{padding:0 20px;gap:25px}.hero{top:9%;left:4.5%;right:4.5%}.hero h1{font-size:15.2vw}.hello-sticker{width:71px;right:5%;top:29%}.explore-hint{font-size:14px;margin-right:10%}.folder-position{width:170px}.photo-position{left:15%}.video-position{left:38%}.art-position{left:61%}.social-position{left:83%}.folder-label{font-size:12px}.folder-count{font-size:9px}.hero-meta{font-size:9px}.hero-meta>span{font-size:8px}.window-sidebar{width:190px}.window-content{padding:30px 25px 35px}.project-grid{gap:23px 16px}.desktop-credit{display:none}.desktop-tip{font-size:9px}.desktop-bottom{bottom:23px;left:24px;right:24px}}
@media(max-width:760px){.menubar{height:49px;gap:10px;padding:0 16px}.menubar .brand{font-size:11px}.brand-symbol{font-size:21px}.menubar nav{gap:14px;margin-left:auto}.menubar nav button{font-size:11px}.menubar .menu-active{display:none}.system-status{display:none}#desktop{min-height:850px;height:100svh;max-height:1100px}.wallpaper{background-position:47% center}.hero{top:48px;left:6%;right:6%}.hero-meta{font-size:8px;letter-spacing:.08em;display:block}.hero-meta>span{display:none}.hero h1{font-size:14.7vw;margin-top:12px;line-height:1.12;letter-spacing:-.057em}.hero-dot{display:none}.hero-bottom{display:block}.hero-bottom>p{font-size:14px;margin-top:8px}.explore-hint{display:inline-block;font-size:12px;margin-top:20px;opacity:.85;transform:rotate(-3deg)}.explore-hint svg{width:30px;height:30px;right:-38px;top:4px}.folder-position{width:145px}.photo-position{left:28%;top:39%}.video-position{left:72%;top:43%}.art-position{left:28%;top:65%}.social-position{left:72%;top:68%}.folder{animation-duration:7s}.folder-label{font-size:12px;margin-top:2px}.folder-count{font-size:9px}.folder-stamp{font-size:19px}.video-stamp{font-size:25px}.art-stamp{font-size:34px}.social-stamp{font-size:39px}.folder-index{font-size:9px}.peek{border-width:3px}.hello-sticker{width:60px;top:21%;right:10%}.hello-sticker>span{font-size:10px;transform:rotate(-5deg) translateX(-5px)}.hello-sticker img{border-width:2px}.secret-folder{left:9%;bottom:14%;width:48px}.secret-folder>span{font-size:6px}.secret-folder .secret-scribble{font-size:8px}.desktop-bottom{left:20px;right:20px;bottom:max(25px,env(safe-area-inset-bottom))}.desktop-tip{position:absolute;bottom:84px;right:0;gap:8px;font-size:8px}.desktop-tip-text{display:none}.mobile-tip-text{display:block}.tip-icon{font-size:13px;width:22px;height:22px}.dock{gap:5px;padding:7px 10px;border-radius:17px}.dock-item{height:44px;width:44px}.dock-util{width:32px}.tooltip{display:none}#project-dialog{width:calc(100vw - 20px);height:calc(100svh - 30px);min-height:0;border-radius:11px}.window-bar{height:47px;min-height:47px;padding:0 14px;cursor:default}.window-bar>p{font-size:11px;left:58%;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.window-key{display:none}.traffic{width:14px;height:14px}.traffic-lights{gap:9px}.traffic span{opacity:.8}.window-layout{display:flex;flex-direction:column}.window-sidebar{width:100%;border-right:0;border-bottom:1px solid #dce1d6;padding:8px 9px;display:block}.sidebar-label,.sidebar-extra,.sidebar-signature{display:none}.sidebar-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.sidebar-items button{padding:8px 4px;display:flex;flex-direction:column;gap:5px;text-align:center;font-size:8px;justify-content:flex-start;line-height:1.2}.sidebar-items button>span{font-size:15px;height:18px}.sidebar-items button small{display:none}.window-content{padding:25px 19px 30px}.collection-heading{font-size:31px;max-width:290px}.section-eyebrow{font-size:8px;margin-bottom:11px}.collection-intro{font-size:11px;line-height:1.65;margin-top:12px}.services{gap:5px;margin-top:15px}.services span{font-size:8px;padding:5px 6px}.gallery-toolbar{margin-top:24px;font-size:8px}.gallery-toolbar span:last-child{font-size:7px}.project-grid,.project-grid.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 12px}.card-title{font-size:11px;line-height:1.3}.card-subtitle{font-size:8px}.card-open{width:22px;height:22px;font-size:14px;bottom:7px;right:7px}.card-tag{top:6px;left:6px;font-size:7px;padding:3px 4px}.card-video span{width:33px;height:33px;font-size:13px}.collection-end{font-size:9px;align-items:flex-start;line-height:1.4}.collection-end button{font-size:9px;white-space:nowrap;padding:0}.about-layout{grid-template-columns:1fr;gap:20px}.about-photo{grid-row:1;max-width:160px;margin:0 0 12px auto;padding:13px;transform:rotate(4deg)}.about-photo figcaption{font-size:12px;margin-top:10px}.about-copy{font-size:12px;margin-top:17px}.discipline-row{font-size:12px;gap:10px}.discipline-row small{font-size:8px}.contact-heading{font-size:44px}.contact-links{margin-top:10px}.contact-row{gap:8px;flex-wrap:wrap;padding:20px 0}.contact-row>span{width:100%;font-size:8px}.contact-row a{font-size:15px}.contact-row button{font-size:9px;padding:7px}.contact-footnote{font-size:10px}.contact-header{padding-bottom:20px}.secret-content{padding:25px 0}.secret-content h2{font-size:43px}.secret-content p{font-size:12px}#lightbox{width:calc(100vw - 12px);height:calc(100svh - 16px);border-radius:9px}.lightbox-shell>header{padding:18px 16px;min-height:85px}.lightbox-shell h2{font-size:16px}.lightbox-shell>header span{font-size:7px}.lightbox-shell>header button{width:32px;height:32px}#lightbox-media{padding:7px}.lightbox-shell>footer{padding:16px;flex-direction:column;align-items:stretch;gap:13px}.lightbox-shell>footer>p{font-size:10px}.lightbox-actions{justify-content:space-between;gap:15px}#lightbox-link{font-size:10px}.lightbox-pagination{margin-left:auto}.toast{bottom:115px;font-size:11px;white-space:nowrap}}
@media(max-width:370px){.menubar{padding:0 12px}.menubar nav{gap:10px}.hero{left:5%;right:5%}.folder-position{width:128px}.folder-label{font-size:11px}.hello-sticker{width:52px}.contact-row a{font-size:13px}.window-content{padding-left:14px;padding-right:14px}}
@media(min-width:1101px) and (max-height:850px){.hero{top:4.5%}.hero h1{font-size:14.5vw}.photo-position{top:59%}.art-position{top:58%}.video-position{top:66%}.social-position{top:65%}.hello-sticker{top:33%;width:74px}}
@media(max-width:760px){.traffic{width:25px;height:28px;border:0;border-radius:8px}.traffic-lights{gap:2px}.traffic.close{background:radial-gradient(circle,#ff655c 7px,transparent 7.5px)}.traffic.minimize{background:radial-gradient(circle,#ffbd45 7px,transparent 7.5px)}.traffic.maximize{background:radial-gradient(circle,#32c84e 7px,transparent 7.5px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.folder:hover .folder-art{transform:rotate(var(--tilt))}.folder:hover .peek-one,.folder:hover .peek-two{transform:none}}

/* Native typography and restrained desktop materials. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-optical-sizing: auto;
}
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #78c1ff;
  outline-offset: 4px;
}
.menubar {
  background: rgba(241, 247, 250, .78);
  border-bottom: 1px solid rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  box-shadow: 0 1px 0 #001f3c0a;
  color: #20303b;
}
.menubar button { font-size: 12px; letter-spacing: -.012em; }
.brand { font-weight: 650 !important; letter-spacing: -.01em; }
.brand-symbol { font-weight: 750; letter-spacing: -.075em; }
.menubar .menu-active { font-weight: 600; }
.system-status { font-size: 11px; letter-spacing: -.012em; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -.065em;
  line-height: 1.08;
  text-shadow: 0 2px 20px #00446d0c;
}
.hero-meta { letter-spacing: .095em; font-weight: 500; }
.hero-meta > span { letter-spacing: .12em; }
.hero-bottom { justify-content: flex-end; }
.explore-hint { font-size: 13px; letter-spacing: -.015em; transform: none; opacity: .88; }
.explore-hint svg { opacity: .75; stroke-width: 1.3; }
.folder { animation-duration: 7s; }
.folder-art { filter: drop-shadow(0 13px 12px #00243c30); }
.folder:hover .folder-art, .folder:focus-visible .folder-art {
  transform: rotate(0deg) translateY(-4px) scale(1.025);
}
.folder-label {
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -.012em;
  line-height: 1.4;
  border-radius: 7px;
  text-shadow: 0 1px 3px #00223bc2;
  transition: background .2s ease;
}
.folder:hover .folder-label, .folder:focus-visible .folder-label { background: #007aff88; }
.folder-count { font-size: 10px; font-weight: 400; opacity: .8; text-shadow: 0 1px 3px #001c3da6; }
.folder-index { font-weight: 500; letter-spacing: 0; color: #0050798f; }
.folder-stamp { font-weight: 650; color: #03699060; }
.hello-sticker img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 2px solid #ffffffd9; box-shadow: 0 4px 14px #001b3a26, 0 1px 2px #001b3a26; }
.hello-sticker > span { font-size: 11px; font-weight: 500; letter-spacing: -.02em; transform: rotate(-5deg) translateX(-9px); }
.secret-folder > span { font-size: 8px; font-weight: 550; letter-spacing: .025em; }
.secret-folder .secret-scribble { font-size: 9px; font-weight: 400; letter-spacing: 0; }
.desktop-tip { font-size: 10px; letter-spacing: -.01em; }
.tip-icon { border-color: #ffffff55; }
.desktop-credit { letter-spacing: .07em; margin-left: auto; }
.dock {
  border-radius: 22px;
  padding: 9px 13px;
  background: rgba(234, 242, 249, .27);
  border: 1px solid rgba(255, 255, 255, .48);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  backdrop-filter: blur(28px) saturate(155%);
  box-shadow: 0 16px 35px #00192c29, 0 3px 8px #00192c1a, 0 1px 0 #ffffff66 inset;
}
.dock-item { transition: transform .28s cubic-bezier(.2,.75,.3,1); }
.dock-item:hover { transform: translateY(-5px) scale(1.08); }
.dock-item > img.dock-avatar { border-radius: 11px; border: 1px solid #ffffff75; }
.dock-mail { border-radius: 11px; background: linear-gradient(#fafbfd, #e4ecf2); box-shadow: 0 1px 2px #00000020, 0 1px 0 #fff inset; }
.dock-mail svg { stroke: #337693; stroke-width: 1.45; }
.dock-separator { background: #ffffff4d; }
.tooltip { border-radius: 8px; font-size: 11px; background: #f8faf9ed; border-color: #ffffffb3; box-shadow: 0 4px 12px #001e3020; }

/* Windows, including the project browser and image viewer. */
dialog { border-radius: 16px; border-color: #ffffffb3; box-shadow: 0 34px 110px #0017284d, 0 8px 26px #00172829; }
dialog::backdrop { background: #001f333d; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.window-bar {
  min-height: 52px;
  height: 52px;
  background: linear-gradient(#f5f6f8, #eceef1);
  border-bottom: 1px solid #00000012;
  box-shadow: 0 1px 0 #ffffffbf inset;
}
.window-bar > p { font-size: 13px; font-weight: 600; letter-spacing: -.018em; color: #38393d; }
.window-key { color: #93979f; letter-spacing: .06em; }
.traffic { box-shadow: 0 1px 0 #ffffff26 inset; }
.window-sidebar { background: #eef0f4; border-right-color: #0000000a; }
.sidebar-label { color: #8a8d96; font-size: 9px; font-weight: 600; letter-spacing: .07em; }
.sidebar-items button { font-size: 11.5px; border-radius: 7px; padding-top: 12px; padding-bottom: 12px; letter-spacing: -.015em; color: #444852; transition: background .18s, color .18s; }
.sidebar-items button:hover { background: #e1e6ed; }
.sidebar-items button.active { background: #007aff17; color: #075fba; font-weight: 600; }
.sidebar-items button > span { color: #3389cd; }
.sidebar-items button small { color: #8b929d; font-size: 10px; font-variant-numeric: tabular-nums; }
.sidebar-items button.active small { color: #4a88bc; }
.sidebar-icon { display: flex; align-items: center; justify-content: center; }
.sidebar-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-extra { border-color: #0000000c; }
.sidebar-extra button { font-size: 11px; letter-spacing: -.02em; color: #68707c; }
.sidebar-extra button:hover { color: #007aff; }
.sidebar-signature { color: #939aa5; font-size: 13px; letter-spacing: -.02em; }
.sidebar-signature span { color: #b0b6c0; font-weight: 650; letter-spacing: -.055em; }
.window-content { padding: 36px 38px 44px; background: #fafafc; }
.section-eyebrow { color: #91949d; font-size: 9px; letter-spacing: .09em; font-weight: 500; }
.collection-heading { font-family: var(--font-display); font-size: clamp(28px,3.2vw,41px); font-weight: 650; letter-spacing: -.045em; line-height: 1.12; }
.collection-intro { color: #747780; font-size: 13px; line-height: 1.7; letter-spacing: -.012em; }
.services { gap: 7px; margin-top: 19px; }
.services span { color: #707782; background: #f1f3f6; border-color: #00000006; border-radius: 6px; padding: 5px 8px; font-size: 10px; letter-spacing: -.01em; }
.gallery-toolbar { border-color: #0000000b; color: #656c76; letter-spacing: .055em; }
.gallery-toolbar span:last-child { font-size: 9px; color: #9397a0; }
.card-visual { border-radius: 9px; border-color: #00000008; background: #eceef2; box-shadow: 0 1px 2px #00000005; transition: box-shadow .25s; }
.project-card:hover .card-visual { box-shadow: 0 5px 18px #18233915; }
.project-card:hover .card-visual img, .project-card:focus-visible .card-visual img { transform: scale(1.025); }
.card-title { font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em; margin-top: 11px; }
.card-title > span { color: #858b96; }
.card-subtitle { font-size: 10px; line-height: 1.5; letter-spacing: -.01em; color: #8b909b; margin-top: 4px; }
.card-open { background: #fffffff0; color: #515a68; box-shadow: 0 2px 7px #001d3c14; }
.card-video span { background: #ffffffe6; color: #344656; }
.card-tag { border-radius: 5px; background: #152436b8; letter-spacing: .01em; }
.collection-end { border-color: #0000000b; color: #8b909a; }
.collection-end button { color: #007aff; font-weight: 500; }
.window-status { background: #f1f2f5; border-color: #0000000a; color: #969aa4; letter-spacing: .015em; }
.about-layout { grid-template-columns: minmax(0, 1fr) minmax(150px, 230px); gap: 32px; }
.about-photo { width: 100%; max-width: 230px; justify-self: end; background: #e3eaf0; border-radius: 12px; box-shadow: 0 4px 12px #22344d0d; }
.about-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.about-photo figcaption { font-size: 12px; font-weight: 500; letter-spacing: -.02em; color: #677381; }
.about-full-name { margin-top: 14px; font-size: 11px; line-height: 1.6; color: #66717e; letter-spacing: -.01em; }
.about-copy { color: #636c78; font-size: 13px; letter-spacing: -.012em; }
.about-section { margin-top: 38px; padding-top: 24px; border-top: 1px solid #0000000c; }
.about-section-heading { margin: 0 0 20px; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.035em; color: #303742; }
.about-experience-list, .about-skills { list-style: none; margin: 0; padding: 0; }
.about-experience-item { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 22px; padding: 20px 0; border-bottom: 1px solid #0000000b; }
.about-experience-item:first-child { padding-top: 0; }
.about-experience-date { font-size: 10px; line-height: 1.6; color: #697687; font-variant-numeric: tabular-nums; }
.about-experience-item h4, .about-skills h4 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -.02em; line-height: 1.5; color: #303742; }
.about-experience-role { margin-top: 3px; font-size: 11px; line-height: 1.5; color: #0070d6; }
.about-experience-description { margin-top: 8px; font-size: 12px; line-height: 1.75; color: #68717d; }
.about-collaborations { margin-top: 8px; }
.about-collaborations summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: 12px; font-weight: 500; color: #426884; list-style: none; cursor: pointer; }
.about-collaborations summary::-webkit-details-marker { display: none; }
.about-collaborations summary:hover { color: #007aff; }
.about-collaborations summary:focus-visible { outline: 3px solid #78c1ff; outline-offset: 4px; border-radius: 4px; }
.about-collaborations summary > span { font-size: 18px; line-height: 1; }
.about-collaborations[open] summary > span { transform: rotate(180deg); }
.about-collaborations .about-experience-list { padding-top: 10px; }
.about-collaborations .about-experience-item { padding-bottom: 14px; padding-top: 14px; }
.about-details-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; }
.about-skills { display: grid; gap: 17px; }
.about-skills p { margin-top: 3px; font-size: 11px; line-height: 1.6; color: #707985; }
.about-languages { margin: 0; }
.about-languages > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #0000000b; font-size: 12px; line-height: 1.5; }
.about-languages > div:first-child { padding-top: 0; }
.about-languages dt { color: #303742; font-weight: 500; }
.about-languages dd { margin: 0; text-align: right; color: #707985; font-size: 11px; }
.about-interests { margin-top: 27px; }
.about-interests .about-section-heading { margin-bottom: 12px; }
.about-interests p { font-size: 12px; color: #68717d; line-height: 1.9; }
.about-portfolio-link { margin-top: 32px; padding-top: 22px; border-top: 1px solid #0000000c; }
.about-portfolio-link a { color: #426884; text-underline-offset: 3px; }
.large-cta { border-radius: 10px; background: #007aff; padding: 14px 20px; font-size: 12px; font-weight: 550; letter-spacing: -.015em; box-shadow: 0 3px 10px #007aff1a; transition: background .18s, box-shadow .18s; }
.large-cta:hover { background: #006ce4; box-shadow: 0 4px 14px #007aff29; }
.discipline-row small { color: #9298a3; }
.contact-heading { font-family: var(--font-display); font-weight: 650; letter-spacing: -.05em; }
.contact-heading em { color: #007aff; }
.contact-row > span { color: #9296a1; font-size: 9px; letter-spacing: .055em; }
.contact-row a { font-weight: 450; letter-spacing: -.025em; }
.contact-row a:hover { color: #007aff; }
.contact-row button { background: #e9eef5; color: #60748c; border-radius: 6px; }
.contact-footnote { color: #9298a2; font-size: 11px; letter-spacing: -.01em; }
.secret-content h2 { font-family: var(--font-display); font-weight: 650; letter-spacing: -.055em; }
.secret-content p { color: #7a818c; }
.secret-content .secret-note { color: #a0a6b0; font-size: 11px; letter-spacing: -.01em; }
#lightbox { background: #232327; border-color: #ffffff29; }
#lightbox::backdrop { background: #0a1018ad; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#lightbox-media { background: #131416; }
.lightbox-shell h2 { font-weight: 600; letter-spacing: -.03em; }
.lightbox-shell > header span { color: #a9adb8; letter-spacing: .08em; }
.lightbox-shell > footer > p { color: #adafba; }
#lightbox-link { color: #a1caff; border-color: #82b7ff66; }
.lightbox-pagination { color: #c0c5d0; }
.toast { background: #f5f8fbed; color: #344353; border: 1px solid #ffffffb3; border-radius: 14px; box-shadow: 0 8px 25px #001d3026; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

@media(max-width:1100px) {
  .explore-hint { font-size: 12px; }
  .window-content { padding: 30px 25px 35px; }
  .about-layout { grid-template-columns: minmax(0, 1fr) minmax(140px, 180px); gap: 24px; }
  .sidebar-items button { font-size: 11px; }
  .folder-label { font-size: 12px; }
}
@media(max-width:760px) {
  .menubar button { font-size: 11px; }
  .menubar nav { gap: 16px; }
  .menubar .brand { font-weight: 650 !important; }
  .hero h1 { letter-spacing: -.058em; font-weight: 700; }
  .hero-bottom > p { font-size: 14px; }
  .explore-hint { font-size: 11px; letter-spacing: -.012em; }
  .folder-label { font-size: 12px; font-weight: 550; }
  .folder-count { font-size: 9px; }
  .hello-sticker > span { font-size: 10px; }
  .secret-folder > span { font-size: 6px; }
  .secret-folder .secret-scribble { font-size: 8px; }
  .desktop-tip { font-size: 9px; }
  .dock { padding: 8px 11px; border-radius: 20px; }
  #project-dialog { border-radius: 14px; }
  .window-bar { height: 49px; min-height: 49px; }
  .window-bar > p { font-size: 12px; }
  .window-sidebar { background: #eff1f5; }
  .sidebar-items button { padding: 9px 4px; font-size: 8.5px; letter-spacing: -.015em; }
  .sidebar-icon svg { width: 17px; height: 17px; }
  .window-content { padding: 25px 19px 30px; }
  .section-eyebrow { font-size: 8px; }
  .collection-heading { font-size: 30px; }
  .collection-intro { font-size: 12px; }
  .services { gap: 5px; margin-top: 16px; }
  .services span { font-size: 8.5px; padding: 5px 6px; }
  .gallery-toolbar span:last-child { font-size: 7.5px; }
  .card-visual { border-radius: 8px; }
  .card-title { font-size: 11.5px; letter-spacing: -.025em; }
  .card-subtitle { font-size: 9px; line-height: 1.4; }
  .about-copy { font-size: 12px; }
  .about-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .about-photo { max-width: 150px; }
  .about-photo figcaption { font-size: 11px; }
  .about-full-name { margin-top: 11px; font-size: 10px; }
  .about-section { margin-top: 30px; padding-top: 22px; }
  .about-section-heading { font-size: 16px; margin-bottom: 17px; }
  .about-experience-item { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 18px 0; }
  .about-experience-description { font-size: 11.5px; }
  .about-details-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .about-portfolio-link { line-height: 1.8; }
  .contact-row > span { font-size: 8px; }
  .contact-footnote { font-size: 10px; }
  .secret-content p { font-size: 12px; }
  .large-cta { font-size: 11px; padding: 14px 17px; }
  #lightbox { border-radius: 12px; }
  .toast { font-size: 11px; }
}
@media(max-width:370px) {
  .menubar nav { gap: 10px; }
  .folder-label { font-size: 11px; }
  .window-content { padding-left: 14px; padding-right: 14px; }
}
@media(prefers-reduced-motion:reduce) {
  .folder:hover .folder-art, .folder:focus-visible .folder-art { transform: rotate(var(--tilt)); }
}

/* File galleries: thumbnails first, like a desktop folder. */
.folder { touch-action: none; -webkit-touch-callout: none; }
.folder-position.is-throwing { visibility: hidden; pointer-events: none; }
.trash-bin {
  position: absolute;
  left: 6.5%;
  bottom: 13%;
  width: 108px;
  padding: 8px 0;
  z-index: 4;
  text-align: center;
  user-select: none;
}
.trash-art { display: block; width: 80px; height: 92px; margin: 0 auto; filter: drop-shadow(0 7px 7px #001e4038); transform-origin: 50% 90%; transition: transform .22s, filter .22s; }
.trash-art svg { display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.trash-label { display: inline-block; padding: 5px 7px; border-radius: 7px; font-size: 10px; font-weight: 550; line-height: 1.35; letter-spacing: -.01em; white-space: nowrap; text-shadow: 0 1px 4px #00223bc2; transition: background .2s; }
.dragging-folder .trash-bin { z-index: 35; }
.trash-bin.is-ready .trash-art { transform: scale(1.13) rotate(-5deg); filter: drop-shadow(0 0 16px #d8f4ffc4); }
.trash-bin.is-ready .trash-label { background: #007aff99; }
.trash-bin.is-receiving .trash-art { animation: trash-bounce .52s .16s ease both; }
.trash-flight { position: fixed; z-index: 80; pointer-events: none; transform-origin: center; animation: trash-swallow .68s cubic-bezier(.45,0,.6,1) forwards; }
.trash-flight img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px #00253c40); }
.trash-contact-heading { font-size: clamp(30px,4.1vw,53px); line-height: 1.08; }
@keyframes trash-swallow {
  0% { transform: translate(0,0) scale(1) rotate(-5deg); opacity: 1; }
  48% { transform: translate(calc(var(--trash-x) * .7),calc(var(--trash-y) * .65 - 24px)) scale(.55) rotate(14deg); opacity: 1; }
  88% { transform: translate(var(--trash-x),var(--trash-y)) scale(.07) rotate(-18deg); opacity: .8; }
  100% { transform: translate(var(--trash-x),var(--trash-y)) scale(0) rotate(-18deg); opacity: 0; }
}
@keyframes trash-bounce {
  0%, 100% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.12,.92) rotate(-7deg); }
  60% { transform: scale(.94,1.08) rotate(6deg); }
  80% { transform: scale(1.03,.98) rotate(-3deg); }
}
@media(max-width:760px) {
  .trash-bin { left: 7%; bottom: 12%; width: 98px; }
  .trash-art { width: 60px; height: 70px; }
  .trash-label { font-size: 9px; }
  .dragging-folder .trash-bin, .trash-busy .trash-bin { position: fixed; left: 16px; bottom: max(92px,env(safe-area-inset-bottom)); z-index: 35; border-radius: 15px; background: #113b528c; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .trash-contact-heading { font-size: 32px; }
}
.folder-position.is-open .folder { animation-play-state: paused; }
.folder-position.is-open .folder-label { background: #007aff99; }
.window-content.is-file-browser {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: #fcfcfd;
}
.file-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-shrink: 0;
  min-height: 54px;
  padding: 12px 28px;
  border-bottom: 1px solid #0000000a;
  background: #fbfbfd;
}
.file-path { display: flex; align-items: center; gap: 11px; font-size: 11px; min-width: 0; color: #6f7682; }
.file-path button { background: none; padding: 5px 0; color: #828894; font-size: inherit; }
.file-path button:hover { color: #007aff; }
.file-path > span[aria-hidden] { color: #b4bac3; font-size: 18px; }
.file-path > span[aria-current] { color: #4c5562; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-view-label { display: flex; align-items: center; gap: 7px; color: #949ba6; font-size: 10px; flex-shrink: 0; }
.file-view-label svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.file-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px 25px 38px; scrollbar-width: thin; scrollbar-color: #d5d9df transparent; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(156px,1fr)); gap: 20px 16px; align-items: start; list-style: none; margin: 0; padding: 0; }
.file-grid > li { min-width: 0; }
.file-card {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 7px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: none;
  color: #363b45;
  transition: background .18s, border-color .18s;
}
.file-card:hover { background: #eaf0f652; border-color: #00000004; }
.file-card.selected { background: #007aff09; }
.file-preview { display: flex; align-items: center; justify-content: center; width: 100%; height: 156px; margin-bottom: 0; position: relative; }
.file-preview img { width: auto; height: auto; max-width: calc(100% - 10px); max-height: 144px; object-fit: contain; border: 4px solid #fff; border-radius: 3px; outline: 1px solid #00000008; box-shadow: 0 3px 9px #172b431c, 0 1px 2px #172b4312; transition: transform .22s; }
.file-card:hover .file-preview img { transform: translateY(-2px); }
.file-name { font-size: 11.5px; font-weight: 500; letter-spacing: -.015em; line-height: 1.4; max-width: 100%; padding: 3px 6px; border-radius: 5px; overflow-wrap: anywhere; }
.file-card.selected .file-name { color: #fff; background: #007aff; }
.file-kind { font-size: 9px; line-height: 1.5; color: #989eaa; margin-top: 2px; letter-spacing: -.005em; }
.file-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 32px; width: 32px; display: grid; place-items: center; padding-left: 2px; border: 1px solid #ffffffa1; border-radius: 50%; background: #ffffffe6; color: #3d536b; box-shadow: 0 3px 12px #10223a29; font-size: 12px; }
.lightbox-pagination { gap: 8px; }
@media(max-width:760px) {
  .file-toolbar { padding: 10px 18px; min-height: 48px; gap: 12px; }
  .file-path { gap: 8px; font-size: 10px; }
  .file-view-label { font-size: 9px; gap: 5px; }
  .file-view-label svg { width: 13px; height: 13px; }
  .file-scroll { padding: 19px 14px 30px; }
  .file-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px 8px; }
  .file-card { padding: 8px 3px; border-radius: 9px; }
  .file-preview { height: 142px; margin-bottom: 0; }
  .file-preview img { max-height: 130px; max-width: calc(100% - 8px); border-width: 3px; }
  .file-name { font-size: 11px; padding: 3px 5px; }
  .file-kind { font-size: 8.5px; }
  .file-play { height: 29px; width: 29px; font-size: 11px; }
}
@media(max-width:370px) {
  .file-toolbar { padding-left: 14px; padding-right: 14px; }
  .file-view-label { font-size: 0; gap: 0; }
  .file-scroll { padding-left: 10px; padding-right: 10px; }
  .file-preview { height: 132px; }
  .file-preview img { max-height: 120px; }
}

/* A quiet opening screen, with the same landscape as the desktop. */
body.is-locked { overflow: hidden; }
#portfolio-shell { opacity: 1; transition: opacity .65s ease; }
body.is-locked #portfolio-shell { opacity: 0; pointer-events: none; }
body.is-unlocking #portfolio-shell { opacity: 1; }
body.is-locked .folder { animation-play-state: paused; }
.hero h1:focus { outline: none; }
.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  height: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  isolation: isolate;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, #051f3626, #031e393d 55%, #06232347);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 1;
  transition: opacity .65s ease;
}
.lock-screen[hidden] { display: none; }
body.is-unlocking .lock-screen { opacity: 0; pointer-events: none; }
.lock-status {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: max(18px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) 12px max(28px, env(safe-area-inset-left));
  font-size: 11px;
  text-shadow: 0 1px 5px #00152666;
}
.lock-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: .09em; }
.lock-brand svg { flex-shrink: 0; width: 14px; height: 16px; }
.lock-location { display: inline-flex; gap: 9px; align-items: center; font-weight: 500; letter-spacing: -.01em; }
.lock-location > span { opacity: .6; }
#lock-clock { font-variant-numeric: tabular-nums; }
.lock-center { display: grid; place-items: center; padding: 32px 24px; }
.lock-profile { width: min(100%, 290px); transform: translateY(5px); transition: transform .65s cubic-bezier(.2,.7,.3,1); }
body.is-unlocking .lock-profile { transform: translateY(-14px) scale(1.03); }
.lock-avatar {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 20px;
  border: 1px solid #ffffff8c;
  background: #e1ecf0;
  box-shadow: 0 8px 32px #00182e33, 0 1px 4px #00182e33;
}
#lock-name { font-size: 27px; line-height: 1.2; font-weight: 600; letter-spacing: -.035em; text-shadow: 0 2px 10px #001b3c3b; }
.lock-welcome { margin-top: 8px; font-size: 13px; line-height: 1.5; letter-spacing: -.01em; color: #fffffff0; text-shadow: 0 1px 5px #00182e66; }
.lock-form { margin-top: 23px; }
.lock-entry {
  display: flex;
  align-items: center;
  min-height: 48px;
  width: 252px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 25px;
  border: 1px solid #ffffff5c;
  background: #ffffff29;
  box-shadow: 0 2px 12px #001a3221, 0 1px 0 #ffffff1f inset;
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.lock-entry:focus-within { border-color: #ffffffe0; background: #ffffff36; box-shadow: 0 0 0 3px #ffffff21, 0 3px 18px #001a3226; }
#lock-password {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 0 0 18px;
  border: 0;
  outline: none;
  border-radius: 25px 0 0 25px;
  background: transparent;
  color: #fff;
  caret-color: #fff;
  font-size: 16px;
  line-height: normal;
  letter-spacing: .12em;
  -webkit-appearance: none;
  appearance: none;
}
#lock-password::placeholder { color: #ffffffe6; font-size: 13px; letter-spacing: -.01em; opacity: 1; }
#lock-submit { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; padding: 0; border-radius: 50%; background: none; color: #fff; transition: background .18s; }
#lock-submit:hover, #lock-submit:focus-visible { background: #ffffff26; }
#lock-submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#lock-submit:disabled { opacity: .6; }
#lock-submit svg { width: 20px; height: 20px; }
.lock-forgot { display: block; min-height: 44px; margin: 5px auto 0; padding: 10px 12px; border-radius: 8px; background: transparent; color: #fffffff0; font-size: 12px; line-height: 1.5; letter-spacing: -.01em; text-shadow: 0 1px 5px #00182eb3; }
.lock-forgot:hover, .lock-forgot:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.lock-hint { margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.5; letter-spacing: .14em; color: #fff; text-shadow: 0 1px 5px #00182eb3; }
.lock-hint[hidden] { display: none; }
.lock-feedback { min-height: 36px; margin-top: 12px; font-size: 12px; line-height: 1.5; color: #fff; text-shadow: 0 1px 5px #00182eb3; }
.lock-form.has-error .lock-entry { border-color: #ffe0d4; animation: lock-shake .35s ease; }
@keyframes lock-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
body.motion-paused .lock-entry { animation: none; }
body.motion-paused .lock-profile { transition: none; }
@media(max-width:760px) {
  .lock-status { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .lock-avatar { width: 100px; height: 100px; margin-bottom: 19px; }
  #lock-name { font-size: 25px; }
}
@media(max-height:540px) {
  .lock-center { padding-top: 14px; padding-bottom: 8px; }
  .lock-avatar { width: 72px; height: 72px; margin-bottom: 12px; }
  #lock-name { font-size: 22px; }
  .lock-welcome { margin-top: 5px; }
  .lock-form { margin-top: 15px; }
}

/* A message from Shendra, above the desktop and any open gallery. */
.idle-notification {
  position: fixed;
  inset: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) auto auto;
  z-index: 1000;
  margin: 0;
  padding: 0;
  width: min(390px, calc(100vw - 28px));
  max-width: none;
  overflow: visible;
  border: 1px solid #ffffff9e;
  border-radius: 25px;
  background: #f1f6f0eb;
  color: #182723;
  box-shadow: 0 14px 44px #03293b35, 0 2px 7px #03293b12, 0 1px 0 #fff9 inset;
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  animation: message-arrive .38s cubic-bezier(.16,1,.3,1) both;
}
.idle-notification[hidden], .arcade-overlay[hidden] { display: none !important; }
.idle-notification::backdrop { background: transparent; pointer-events: none; }
.idle-message { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 90px; padding: 17px 44px 17px 16px; text-align: left; background: transparent; border-radius: inherit; }
.idle-message:hover { background: #ffffff24; }
.idle-message, .idle-dismiss { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.idle-avatar { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.idle-avatar > img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #fff7; }
.idle-message-badge { position: absolute; bottom: -1px; right: -2px; width: 21px; height: 21px; padding: 1px; border: 1.5px solid #eff7ef; border-radius: 6px; background: linear-gradient(#62e377,#23b94a); color: white; }
.idle-message-badge svg { width: 100%; height: 100%; }
.idle-copy { display: block; flex: 1; min-width: 0; letter-spacing: -.025em; }
.idle-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.idle-meta strong { font-size: 16px; font-weight: 650; }
.idle-meta > span { color: #526961; font-size: 11px; letter-spacing: -.01em; }
.idle-text { display: block; margin-top: 3px; font-size: 17px; line-height: 1.35; }
.idle-dismiss { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 52px; padding: 12px; border-radius: 14px; color: #5f706b; background: transparent; }
.idle-dismiss:hover { color: #172f26; }
.idle-dismiss svg { width: 18px; height: 18px; border-radius: 50%; background: #82988e1a; }
.idle-message:focus-visible, .idle-dismiss:focus-visible { outline: 3px solid #007aff; outline-offset: 2px; }
@keyframes message-arrive { from { opacity: 0; transform: translateY(-18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* The arcade lives in its own window, so closing it restores the portfolio. */
#arcade-dialog {
  width: 416px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 1px solid #ffffffcc;
  border-radius: 20px;
  background: #f4f5f3;
  color: #283b37;
  box-shadow: 0 36px 110px #00162166, 0 5px 18px #00162140;
  overflow: auto;
  overscroll-behavior: contain;
  font-family: var(--font-ui);
  animation: arcade-arrive .25s ease-out;
}
#arcade-dialog::backdrop { background: #08293685; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.arcade-bar { position: relative; height: 52px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #273d3310; background: linear-gradient(#fdfdfcf0,#eceeeae0); }
#arcade-title { font-size: 13px; line-height: 1.3; font-weight: 650; letter-spacing: -.02em; }
.arcade-traffic { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; gap: 8px; }
#arcade-close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -7px; padding: 0; background: transparent; border-radius: 12px; }
#arcade-close > span { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #ff6259; border: 1px solid #e34a42; color: #81332d; font: 12px/1 var(--font-ui); }
.arcade-traffic i { display: block; width: 13px; height: 13px; border-radius: 50%; border: 1px solid #dfa227; background: #ffbd2e; }
.arcade-traffic i:last-child { border-color: #1ca539; background: #29c840; }
.arcade-bar-mark { position: absolute; right: 19px; color: #7b9685; font-size: 18px; }
.arcade-stage { position: relative; width: min(calc(100% - 24px), 380px, calc((100vh - 170px) * .666667)); width: min(calc(100% - 24px), 380px, calc((100dvh - 170px) * .666667)); aspect-ratio: 2 / 3; margin: 12px auto 0; border-radius: 10px; overflow: hidden; isolation: isolate; background: #87d4e3; box-shadow: 0 0 0 1px #1f4b491c; }
#arcade-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; user-select: none; -webkit-user-select: none; outline-offset: -4px; }
.arcade-hud { position: absolute; inset: 14px 16px auto; display: flex; justify-content: space-between; pointer-events: none; }
.arcade-hud > div { display: flex; flex-direction: column; gap: 2px; min-width: 42px; }
.arcade-hud > div:last-child { text-align: right; }
.arcade-hud span { color: #264f58; font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.arcade-hud strong { color: #fffbee; font: 800 32px/1.1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; text-shadow: 2px 2px 0 #335963, -1px -1px 0 #335963, 1px -1px 0 #335963, -1px 1px 0 #335963; font-variant-numeric: tabular-nums; }
.arcade-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: none; }
.arcade-card { width: 100%; max-width: 290px; padding: 23px 20px 20px; border: 1px solid #fffdf1; border-radius: 18px; background: #fffcefef; box-shadow: 0 7px 0 #1d544b16, 0 12px 28px #315e511a; text-align: center; pointer-events: auto; }
[data-state="ready"] .arcade-card { transform: translateY(42px); }
[data-state="paused"] .arcade-overlay, [data-state="over"] .arcade-overlay { background: #17445038; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#arcade-heading { font-size: 24px; font-weight: 750; line-height: 1.15; letter-spacing: -.05em; }
#arcade-message { margin: 11px auto 18px; max-width: 235px; color: #5b6d5f; font-size: 13px; line-height: 1.5; letter-spacing: -.015em; }
#arcade-message[hidden] { display: none; }
#arcade-message[hidden] + #arcade-play { margin-top: 18px; }
#arcade-play { width: 100%; min-height: 46px; padding: 12px 18px; border: 1px solid #245c44; border-radius: 11px; background: #367759; color: #fffef2; font-size: 14px; font-weight: 600; box-shadow: 0 3px 0 #234c39; transition: background .15s, transform .15s; }
#arcade-play:hover { background: #2c684c; }
#arcade-play:active { transform: translateY(2px); }
.arcade-footer { min-height: 69px; padding: 10px 16px 13px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#arcade-help { font-size: 12px; line-height: 1.5; font-weight: 550; letter-spacing: -.01em; }
#arcade-help > span { color: #78837c; font-size: 10px; font-weight: 400; }
#arcade-pause { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #d6ded6; border-radius: 12px; background: #e9ede7; color: #40604d; }
#arcade-pause svg { width: 20px; height: 20px; }
#arcade-dialog button:focus-visible { outline: 3px solid #007aff; outline-offset: 2px; }
@keyframes arcade-arrive { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 520px) {
  .idle-notification { inset: max(12px, env(safe-area-inset-top)) 12px auto; width: auto; }
  .idle-message { gap: 11px; min-height: 86px; padding-left: 14px; }
  .idle-meta > span { font-size: 10px; }
  .arcade-stage { border-radius: 8px; }
}
@media (max-height: 700px) {
  .arcade-card { padding: 17px 16px 15px; }
  #arcade-heading { font-size: 21px; }
  #arcade-message { margin: 8px auto 13px; font-size: 12px; }
  .arcade-overlay { padding: 16px; }
  [data-state="ready"] .arcade-card { transform: translateY(36px); }
}
@media (max-height: 520px) and (min-width: 600px) {
  #arcade-dialog[open] { width: 500px; display: grid; grid-template-columns: auto 1fr; }
  .arcade-bar { grid-column: 1 / -1; height: 44px; }
  .arcade-stage { width: calc((100dvh - 90px) * .666667); margin: 9px; }
  .arcade-footer { align-self: center; flex-direction: column; text-align: center; padding: 20px; }
  .arcade-hud { inset: 9px 11px auto; }
  .arcade-hud strong { font-size: 24px; }
  .arcade-overlay { padding: 9px; }
  .arcade-card { padding: 12px 10px; border-radius: 12px; }
  #arcade-heading { font-size: 17px; }
  #arcade-message { font-size: 11px; line-height: 1.4; }
  #arcade-play { min-height: 44px; padding: 10px; }
  [data-state="ready"] .arcade-card { transform: translateY(25px); }
}
@media (prefers-reduced-motion: reduce) {
  .idle-notification, #arcade-dialog { animation: none; }
  #arcade-play { transition: none; }
}