:root{color-scheme:light;--ink:#303b3b;--muted:#64706f;--ease:cubic-bezier(.2,.75,.18,1);--cx:0px;font-family:'Chocolate Classical Sans',sans-serif;color:var(--ink);background:#fff}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:2px solid #506c70;outline-offset:5px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.world{position:fixed;inset:-7%;overflow:hidden;pointer-events:none;background:#fff;perspective:1000px}.backlight{position:absolute;inset:0;background:radial-gradient(ellipse at 76% 18%,#eff6f8aa,transparent 48%),linear-gradient(112deg,#fff 25%,#edf1f3 64%,#fff 86%)}.floor{position:absolute;left:-35%;width:170%;height:130%;top:38%;transform-origin:50% 0;transform:rotateX(62deg) translateX(calc(var(--cx)*-.3));background:url('white-glazed-tile.png') center top/900px 600px;box-shadow:0 -20px 80px #e3e9ed50;mask-image:linear-gradient(transparent,black 16%)}.glaze{position:absolute;inset:0;background:linear-gradient(112deg,transparent 20%,#fff0 34%,#fff 36%,#fff9 43%,transparent 45%,#ffffffc7 62%,transparent 64%);mix-blend-mode:screen;opacity:.8;transform:translateX(var(--cx))}.window-light{position:absolute;width:70%;height:24%;left:16%;bottom:19%;transform:rotate(-24deg) skewX(-28deg) translateX(var(--cx));background:linear-gradient(90deg,transparent,#fff 25%,#fff 36%,transparent 37%,#fff 39%,#fff 54%,transparent 55%,#fff 57%,#fff 76%,transparent);filter:blur(11px);opacity:.85}.experience{position:relative;height:100dvh;min-height:680px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:calc(24px + env(safe-area-inset-top)) clamp(22px,4vw,80px) calc(22px + env(safe-area-inset-bottom));gap:10px}header{display:flex;justify-content:space-between;align-items:center;z-index:5}.identity{display:flex;align-items:center;gap:14px}.identity img{width:61px;height:61px;object-fit:contain;mix-blend-mode:multiply}.identity span{font-size:15px;letter-spacing:.12em}.identity small{display:block;font-size:11px;letter-spacing:.23em;margin-top:6px}.glass{position:relative;min-height:46px;padding:12px 23px;border-radius:40px;background:linear-gradient(145deg,#ffffffb0,#ffffff2c);border:1px solid #fff;box-shadow:inset 0 1px 2px white,inset 0 -2px 3px #c4cdd62b,0 8px 20px #596c7810;backdrop-filter:blur(12px);transition:box-shadow .3s,transform .4s var(--ease)}.glass:hover{transform:translateY(-2px);box-shadow:inset 0 2px 3px #fff,0 10px 25px #50657422}main{position:relative;display:grid;grid-template-rows:auto minmax(310px,1fr);min-height:0}.introduction{text-align:center;z-index:2;padding-top:clamp(12px,3vh,40px);transition:opacity .5s,transform .8s var(--ease)}.micro{font-size:11px;letter-spacing:.22em;font-weight:400;margin:0 0 12px}.introduction h1{font:clamp(54px,6.6vw,106px)/1.02 'Italiana',serif;letter-spacing:-.045em;margin:0;color:#3c494b}.introduction h1 i{font-weight:400;color:#6c8287}.statement{font-size:16px;letter-spacing:.13em;margin:20px 0 0}.work-stage{position:relative;min-height:0;perspective:1400px}.cards{position:absolute;inset:0;transform-style:preserve-3d}.card{position:absolute;left:50%;top:44%;width:clamp(170px,17vw,255px);height:clamp(235px,31vh,355px);padding:10px;border-radius:20px;background:linear-gradient(130deg,#fff,#edf3f3);border:1px solid #fff;box-shadow:1px 3px 0 #b5c4c7,2px 5px 0 #fff,4px 9px 12px #5d747220,12px 28px 42px #56777725;transform:translate(-50%,-50%) translate3d(var(--x),var(--y),var(--z)) rotateX(var(--rx)) rotateZ(var(--rz));transition:transform 1.05s var(--ease),opacity .5s,box-shadow .4s;overflow:hidden;text-align:left;will-change:transform;isolation:isolate}.card:after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,#fff0 30%,#ffffff90 45%,#fff0 61%);pointer-events:none;opacity:.46;transform:translateX(calc(var(--cx)*2))}.card img{width:100%;height:72%;object-fit:cover;object-position:top;border-radius:12px 12px 3px 3px;display:block}.card .card-copy{height:28%;display:flex;flex-direction:column;justify-content:center;padding:5px 8px}.card strong{font-size:19px;font-weight:400}.card small{font-size:11px;color:var(--muted);margin-top:6px}.card-number{position:absolute;bottom:20px;right:19px;font:20px 'Italiana',serif;color:#718382}.ground-shadow{position:absolute;top:61%;left:50%;width:300px;height:65px;transform:translateX(-50%) rotate(-10deg);border-radius:50%;background:#41565b30;filter:blur(24px);transition:width 1s,opacity 1s}.stack-trigger{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);display:flex;white-space:nowrap;gap:20px;align-items:center;background:transparent;font-size:15px;letter-spacing:.09em;padding:10px 20px;z-index:5}.round-arrow{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;border:1px solid #a2b3b770;background:#ffffff80;box-shadow:inset 0 1px white}.stack-trigger:hover .round-arrow{background:white;transform:rotate(45deg);transition:.4s}footer{display:flex;justify-content:space-between;align-items:center;gap:16px;z-index:5;font-size:12px;color:var(--muted)}.edition{font-size:10px;letter-spacing:.12em}.liquid-nav{position:relative;display:flex;border:1px solid #ffffffb0;border-radius:35px;background:#ffffff30;box-shadow:inset 0 1px 3px #fff,0 8px 26px #80919913;padding:5px;backdrop-filter:blur(5px)}.liquid-nav button{position:relative;z-index:1;padding:13px 22px;min-height:45px;background:none;font-size:13px}.lens{position:absolute;top:4px;bottom:4px;left:4px;width:110px;border-radius:40px;border:1px solid white;background:linear-gradient(130deg,#fff9,#fff1 50%,#fff7);box-shadow:inset 2px 3px 4px #fff,inset -2px -3px 4px #91a5b339,0 2px 7px #8b9da929;backdrop-filter:blur(2px) contrast(1.15);transition:width .7s var(--ease),transform .7s var(--ease);pointer-events:none}.lens.moving{animation:liquid .7s var(--ease)}@keyframes liquid{35%{border-radius:60% 40% 45% 55% / 38% 65% 35% 62%;scale:1.13 .82}70%{scale:.96 1.07}100%{scale:1}}.work-heading{position:absolute;top:18px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:20px}.work-heading h2{font-size:22px;font-weight:400;letter-spacing:.06em;margin:0}.deck-controls{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:30px;z-index:4;text-align:center;white-space:nowrap}.deck-controls p{font-size:13px;margin:5px 0}.deck-controls #counter{font:21px 'Italiana',serif;letter-spacing:.1em}.deck-controls button{font-size:22px;padding:7px 20px}.expanded main{grid-template-rows:0 minmax(350px,1fr)}.expanded .introduction{opacity:0;transform:translateY(-22px);pointer-events:none}.expanded .ground-shadow{width:80%;opacity:.4}.expanded .card{top:49%;height:clamp(240px,44vh,425px);width:clamp(165px,21vw,280px)}.expanded .card[data-active="true"]{box-shadow:1px 3px 0 #abbec1,3px 6px 0 #fff,0 26px 45px #46606e30}.expanded .card:hover{filter:brightness(1.03)}dialog{color:var(--ink);border:1px solid white;padding:0;box-shadow:0 35px 120px #34494a35;border-radius:24px;background:#ffffffde;backdrop-filter:blur(22px)}dialog::backdrop{background:#e7eff15c;backdrop-filter:blur(14px)}#project-dialog{width:calc(100vw - 64px);max-width:1500px;height:calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:1100px}#project-dialog[open]{display:flex;flex-direction:column}.viewer-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;gap:15px;flex-shrink:0}.viewer-bar small{font-size:10px;letter-spacing:.14em}.viewer-bar h2{font-size:18px;font-weight:400;margin:3px 0 0}.iframe-wrap{flex:1;min-height:0;position:relative;margin:0 10px;border-radius:12px;overflow:hidden;background:white}.iframe-wrap iframe{width:100%;height:100%;border:0;position:relative;background:white;z-index:1}.viewer-note{font-size:11px;text-align:center;margin:9px;color:#64706f;flex-shrink:0}#unavailable{height:100%;overflow:auto;text-align:center;padding:20px}#unavailable h3{font-size:18px;font-weight:400}#unavailable p{font-size:14px}#unavailable img{width:100%;height:auto}#information{width:min(600px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:clamp(28px,5vw,60px)}.info-close{position:absolute;right:16px;top:14px;font-size:22px;padding:3px 16px}#information h2{font-size:30px;font-weight:400;margin:30px 0 20px;line-height:1.5}#info-body p{font-size:16px;line-height:1.9}.contact-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}.contact-list div{padding:20px 15px;border:1px solid #d7e1e1;border-radius:16px;background:#fff6}.contact-list b{display:block;font-weight:400;font-size:20px}.contact-list small{display:block;margin-top:8px;color:#6a787a;font-size:12px}body.modal-open{overflow:hidden}
@media(max-width:700px){.experience{min-height:640px;padding:calc(12px + env(safe-area-inset-top)) 20px calc(14px + env(safe-area-inset-bottom));gap:8px}.identity img{width:46px;height:46px}.identity{gap:8px}.identity span{font-size:12px;letter-spacing:.04em}.identity small{font-size:9px}.glass{font-size:12px;padding:10px 16px}.introduction{padding-top:34px}.introduction h1{font-size:clamp(42px,10.5vw,72px);white-space:nowrap}.micro{font-size:9px;letter-spacing:.16em}.statement{font-size:13px;letter-spacing:.04em;margin-top:16px}.card{width:180px;height:255px;top:44%}.floor{top:40%;width:260%;left:-80%;background-size:740px auto}.window-light{width:130%;left:-10%}footer{flex-wrap:wrap;justify-content:center;gap:12px}footer>span:first-child{width:100%;text-align:center;font-size:11px}.edition{display:none}.liquid-nav button{font-size:12px;padding:11px 23px}.stack-trigger{font-size:14px;bottom:4%}.expanded .card{width:195px;height:300px;top:50%}.work-heading{top:28px}.work-heading h2{font-size:15px}.work-heading .glass{padding:8px 12px}.deck-controls{gap:16px;bottom:16px}.deck-controls p{font-size:11px}#project-dialog{width:calc(100vw - 16px);height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:18px}.viewer-bar{padding:10px 12px}.viewer-bar h2{font-size:16px}.viewer-note{font-size:10px;padding:0 12px}.iframe-wrap{margin:0 5px}#information h2{font-size:24px}}
@media(max-height:760px) and (min-width:701px){.experience{min-height:610px;padding-top:15px;padding-bottom:14px}.introduction{padding-top:4px}.introduction h1{font-size:70px}.statement{margin-top:12px;font-size:14px}.card{height:235px;width:175px}.expanded .card{height:310px;width:210px}.work-heading{top:8px}.stack-trigger{bottom:0}}
/* Approved spatial composition: material and interaction refinement only. */
.preview-notice{position:absolute;z-index:3;inset:30% 12px auto;text-align:center;background:#fff;padding:24px}.preview-notice small{display:block;margin:10px 0 20px}.identity{gap:15px}.identity span{font-size:17px;letter-spacing:.09em}.world{--cx:0px}.backlight{background:radial-gradient(ellipse at 74% 17%,#f2f7f940,transparent 48%),linear-gradient(112deg,#fff 30%,#f6f9fa 65%,#fff 86%)}.floor{mask-image:linear-gradient(transparent,black 7%);box-shadow:none}.glaze{opacity:.5;background:linear-gradient(112deg,transparent 20%,transparent 34%,#fff 35.5%,#fff8 42%,transparent 43.5%,#ffffffb5 62%,transparent 64%);animation:glaze-breath 14s ease-in-out infinite alternate}.window-light{filter:blur(2px);opacity:.8;animation:window-sun 18s ease-in-out infinite alternate}.world:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 14% 62%,#fff 0,#ffffff9e 5%,transparent 19%),radial-gradient(ellipse at 86% 44%,#ffffffed 0,transparent 24%),linear-gradient(120deg,transparent 26%,#fff9 27%,transparent 28%);mix-blend-mode:screen;animation:halo-breath 11s ease-in-out infinite alternate}@keyframes glaze-breath{from{opacity:.3}to{opacity:.68}}@keyframes window-sun{from{opacity:.46;transform:rotate(-24deg) skewX(-28deg) translateX(-12px)}to{opacity:.92;transform:rotate(-24deg) skewX(-28deg) translateX(14px)}}@keyframes halo-breath{from{opacity:.45}to{opacity:1}}
body:not(.expanded) .card:not(:first-child) img,body:not(.expanded) .card:not(:first-child) .card-copy,body:not(.expanded) .card:not(:first-child) .card-number{opacity:0}
.card{background:linear-gradient(120deg,#ffffff4a,#ffffff0c 43%,#e1eef020 75%,#ffffff6b);backdrop-filter:blur(1.4px) saturate(1.08);border:1px solid #fffffff0;box-shadow:inset 2px 2px 2px #fff,inset -2px -3px 3px #839a9e40,1px 3px 0 #c0d1d485,3px 5px 0 #ffffffc7,12px 28px 38px #56777721;overflow:visible}.card:before{content:'';position:absolute;inset:4px;border:1px solid #ffffffa8;border-radius:16px;pointer-events:none;box-shadow:inset 0 0 10px #fff3}.card:after{border-radius:20px;background:linear-gradient(122deg,transparent 18%,#ffffffc0 19%,#fff2 21%,transparent 36%,#fff8 37%,transparent 39%,transparent 75%,#ffffff94 92%);opacity:.42;transform:none;mix-blend-mode:screen}.card img{object-fit:contain;object-position:center;border-radius:7px;height:74%;background:transparent;filter:drop-shadow(0 3px 5px #3f576326)}.card .card-copy{height:26%;padding:7px 8px}.card strong{font-size:17px}.card small{font-size:10px}.card-number{font-size:17px;bottom:18px;right:15px}.expanded .card[data-active="true"]{box-shadow:inset 2px 2px 2px #fff,inset -2px -3px 3px #839a9e40,1px 3px 0 #adc6cc8a,3px 5px 0 #ffffffbf,0 25px 35px #46606e25}.work-heading{pointer-events:none}.deck-controls{display:grid;grid-template-columns:auto auto auto;gap:5px 30px;bottom:0}.deck-controls #fold{grid-column:1/-1;justify-self:center;min-height:36px;font-size:12px;padding:5px 20px;margin-top:4px;background:#ffffff26;box-shadow:inset 0 1px 1px #fff}.deck-controls p{margin:2px 0}.expanded .card{top:46%}.expanded .ground-shadow{top:62%}.effect-definitions{position:absolute;width:0;height:0;pointer-events:none}
.contact-anchor{position:relative}.contact-chevron{display:inline-block;width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin:0 0 3px 14px;transition:transform .3s}#contact-toggle[aria-expanded=true] .contact-chevron{transform:rotate(225deg);margin-bottom:0}#contact-menu{position:absolute;right:0;top:calc(100% + 12px);width:280px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 120px - env(safe-area-inset-top));overflow-y:auto;border-radius:28px;padding:6px;border:1px solid white;background:linear-gradient(135deg,#ffffffd9,#ffffffa8);backdrop-filter:blur(4px);box-shadow:inset 0 2px 3px white,0 20px 45px #476b751c;z-index:20}.contact-options{position:relative;display:grid;gap:5px}.contact-options a,.contact-pending{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;min-height:64px;padding:11px 19px;border-radius:24px}.contact-options b{font-size:15px;font-weight:400}.contact-options small{font-size:11px;letter-spacing:0}.contact-pending{color:#788586}.contact-pending small{font-size:12px}.contact-lens{position:absolute;left:0;right:0;top:6px;height:64px;border-radius:24px;border:1px solid #fff;background:linear-gradient(130deg,#fff9,#fff1 50%,#fff8);box-shadow:inset 2px 3px 4px #fff,inset -2px -3px 4px #91a5b339,0 2px 7px #8b9da929;backdrop-filter:contrast(1.15);transition:transform .65s var(--ease),height .65s var(--ease);pointer-events:none}.contact-lens.moving{animation:liquid .65s var(--ease)}header{z-index:30}.glass{backdrop-filter:blur(3px)}.liquid-nav{backdrop-filter:blur(2px)}
#project-dialog.pre-melt:not(.melting){visibility:hidden}#project-dialog.melting{clip-path:url(#liquid-reveal);border-radius:24px;background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}#project-dialog.melting:before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 28% 20%,#ffffffb8 0 5%,transparent 24%),radial-gradient(circle at 76% 72%,#dff8ff4f 0 4%,transparent 30%),linear-gradient(138deg,#ffffff70 0%,#ffffff18 38%,#d8f3f03d 58%,#ffffff69 100%);border:1px solid #ffffffd9;box-shadow:inset 16px 18px 30px #ffffff9c,inset -18px -20px 34px #8fb2bd30,0 28px 70px #4764722b;backdrop-filter:blur(10px) saturate(1.28) contrast(1.04);-webkit-backdrop-filter:blur(10px) saturate(1.28) contrast(1.04)}#project-dialog.melting:after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 15%,#ffffffd9 23%,#dff8ff75 29%,transparent 43%,#ffffffad 64%,transparent 76%);opacity:var(--melt-sheen,.5);mix-blend-mode:screen}#project-dialog>.viewer-bar,#project-dialog>.iframe-wrap,#project-dialog>.viewer-note{transition:opacity .32s ease}#project-dialog.pre-melt>.viewer-bar,#project-dialog.pre-melt>.iframe-wrap,#project-dialog.pre-melt>.viewer-note,#project-dialog.melting>.viewer-bar,#project-dialog.melting>.iframe-wrap,#project-dialog.melting>.viewer-note{opacity:0}.melting-source{opacity:.15!important;transition:opacity .3s}#project-dialog::backdrop{background:#edf4f52b;backdrop-filter:blur(3px)}
@media(max-width:700px){.identity{gap:9px}.identity span{font-size:13px;letter-spacing:.03em}.deck-controls{gap:4px 17px;bottom:0}.deck-controls #fold{font-size:11px;min-height:36px;margin-top:2px}.expanded .card{top:44%;height:min(300px,calc(100dvh - 340px));min-height:245px}.card strong{font-size:16px}.contact-anchor .glass{padding:10px 15px}.contact-chevron{margin-left:9px}#contact-menu{width:260px}.work-heading h2{font-size:15px}}
@media(max-width:700px){.expanded .card{top:46%;height:min(300px,calc(100dvh - 380px));min-height:245px}}
/* Bottom-anchored contact and edge-to-edge porcelain, requested refinement. */
.studio-signature{display:grid;gap:6px;border-left:1px solid #82949870;padding-left:18px;font-size:12px;letter-spacing:.18em;color:#536469}.introduction h1{font-family:'Manrope',sans-serif;font-weight:400;font-size:clamp(48px,6.1vw,94px);line-height:1.12;letter-spacing:-.055em}.introduction h1 i{font-style:normal;font-weight:500;color:#526c74}.card-number,.deck-controls #counter{font-family:'Manrope',sans-serif;font-weight:400}.backlight{background:url('white-glazed-tile.png') center center/cover;opacity:1}.floor{top:38%;mask-image:linear-gradient(transparent,black 28%);background-color:#fff}.world:before{content:'';position:absolute;inset:0;background:linear-gradient(118deg,transparent 0 30%,#ffffffc9 32%,transparent 38% 49%,#fff 51%,transparent 58%);mix-blend-mode:screen;animation:porcelain-flare 7s ease-in-out infinite alternate;z-index:2}.window-light{left:-10%;width:105%;height:48%;bottom:12%;filter:blur(3px);animation:window-sun-visible 9s ease-in-out infinite alternate}.world:after{background:radial-gradient(ellipse at 18% 29%,#fff 0,#ffffffba 7%,transparent 25%),radial-gradient(ellipse at 76% 72%,#fff 0,#fff6 8%,transparent 27%);animation:halo-visible 5.5s ease-in-out infinite alternate}@keyframes porcelain-flare{from{opacity:.18;transform:translateX(-6%)}to{opacity:.85;transform:translateX(7%)}}@keyframes window-sun-visible{from{opacity:.24;transform:rotate(-24deg) skewX(-28deg) translateX(-7%)}to{opacity:.9;transform:rotate(-24deg) skewX(-28deg) translateX(7%)}}@keyframes halo-visible{from{opacity:.2}to{opacity:1}}
footer{position:relative;z-index:40}.contact-anchor{flex-shrink:0}#contact-menu{top:auto;bottom:calc(100% + 14px);right:0;left:auto;width:240px;max-width:calc(100vw - 40px);max-height:min(570px,calc(100dvh - 120px));overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;padding:8px;transform-origin:70% 100%;background:linear-gradient(130deg,#ffffffed,#ffffffc9);box-shadow:inset 0 2px 3px #fff,0 15px 35px #3c596321}.contact-options{gap:3px;isolation:isolate;overflow:hidden;border-radius:22px}.contact-options > a,.contact-options > button,.contact-pending{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:8px;width:100%;min-height:44px;padding:10px 14px;background:transparent;font-size:14px;text-align:center;position:relative;z-index:1}.contact-options b{font-size:14px}.contact-pending small{font-size:11px}.contact-lens{top:0;height:44px;border-radius:24px}.contact-lens.moving{animation:contact-water .65s var(--ease)}@keyframes contact-water{35%{border-radius:45% 55% 40% 60% / 60% 40% 65% 35%;scale:.94 1.1}70%{scale:1 .97}100%{scale:1}}#email-detail{position:relative;z-index:2;padding:8px 8px 12px;border-block:1px solid #c5d1d155;text-align:center;background:#ffffff80}#email-detail p{font-size:11px;letter-spacing:0;overflow-wrap:anywhere;margin:3px 0 9px}#email-detail a{display:block;border-radius:20px;padding:9px 6px;margin-top:4px;font-size:12px;border:1px solid #fff;background:#ffffff7a;min-height:36px}#email-detail a:hover{background:#fff}.contact-options a:focus-visible,.contact-options button:focus-visible{outline-offset:-3px}.card{--card-height:clamp(235px,31vh,355px);height:var(--card-height);width:calc((var(--card-height) - 80px)*.465 + 32px);padding:10px 12px}.expanded .card{--card-height:clamp(240px,44vh,425px);height:var(--card-height);width:calc((var(--card-height) - 80px)*.465 + 32px)}.card img{height:calc(100% - 62px);width:100%;object-fit:contain;border-radius:5px;filter:drop-shadow(0 2px 4px #3f576320)}.card .card-copy{height:62px;padding:9px 0 0;justify-content:flex-start}.card strong{font-size:14px;white-space:nowrap}.card small{font-size:10px;line-height:1.5;margin-top:4px;max-width:calc(100% - 16px)}.card-number{font-size:11px;bottom:15px;right:10px}
@media(max-height:760px) and (min-width:701px){.introduction h1{font-size:64px}.card{--card-height:235px}.expanded .card{--card-height:310px}}
@media(max-width:700px){.studio-signature{font-size:10px;gap:5px;padding-left:12px;letter-spacing:.1em}.introduction h1{font-size:clamp(35px,9vw,63px)}.card{--card-height:255px}.expanded .card{--card-height:max(245px,min(300px,calc(100dvh - 380px)));height:var(--card-height);width:calc((var(--card-height) - 80px)*.465 + 32px)}#contact-menu{max-height:calc(100dvh - 110px - env(safe-area-inset-bottom));width:230px;right:0}.card strong{font-size:13px}.card small{font-size:10px}.world .backlight{background-size:auto 100%;background-position:center}.window-light{height:60%}}
.liquid-nav{display:grid;grid-template-columns:1fr 1fr;width:300px;max-width:calc(100vw - 40px)}.liquid-nav button{width:100%;height:48px;padding:10px 12px;white-space:nowrap}.liquid-nav .lens{width:calc((100% - 10px)/2)}
/* Window projection: stationary porcelain, drifting sunlight, no floating glow balls. */
.world:after{background:linear-gradient(117deg,transparent 0 35%,#fff9 38%,transparent 44%);opacity:.5;animation:daylight-reflection 12s ease-in-out infinite alternate}.world:before{background:linear-gradient(114deg,transparent 20%,#fff8 26%,transparent 38%);animation:daylight-reflection 14s ease-in-out infinite alternate}.window-light{left:-18%;bottom:10%;width:125%;height:70%;background:linear-gradient(90deg,transparent 10%,#fffdf3b8 14%,#fffefaec 31%,transparent 32% 34%,#fffdf5eb 35% 53%,transparent 54% 56%,#fffdf4de 57% 76%,transparent 80%);filter:blur(5px);mix-blend-mode:soft-light;animation:window-daylight 12s ease-in-out infinite alternate;transform-origin:center}.glaze{background:linear-gradient(113deg,transparent 15%,#ffffffe0 27%,transparent 29% 33%,#ffffffb8 47%,transparent 49% 55%,#ffffffc2 70%,transparent 72%);animation:glaze-breath 12s ease-in-out infinite alternate}@keyframes window-daylight{from{opacity:.45;transform:rotate(-24deg) skewX(-28deg) translateX(-3%)}to{opacity:1;transform:rotate(-24deg) skewX(-28deg) translateX(4%)}}@keyframes daylight-reflection{from{opacity:.18}to{opacity:.75}}
@media(max-width:700px){.liquid-nav{width:284px}.liquid-nav button{height:46px;padding:10px 9px;font-size:12px}.window-light{height:85%;width:180%;left:-40%}}
.world:before{inset:9% -25% -15%;background:linear-gradient(90deg,transparent 5%,#758e9b18 12%,transparent 13% 31%,#647f8f25 32% 34%,transparent 35% 54%,#647f8f25 55% 57%,transparent 58% 78%,#758e9b18 79%,transparent 81%);filter:blur(6px);mix-blend-mode:multiply;transform-origin:50% 70%;animation:window-frame-shadow 12s ease-in-out infinite alternate}.window-light{mix-blend-mode:normal;opacity:.65}@keyframes window-frame-shadow{from{opacity:.38;transform:rotate(-24deg) skewX(-28deg) translateX(-3%)}to{opacity:.95;transform:rotate(-24deg) skewX(-28deg) translateX(4%)}}
.ground-shadow{width:min(300px,70%)}
/* Restore approved card silhouette; frame the mobile capture, never narrow the card. */
.card{height:clamp(235px,31vh,355px);width:clamp(170px,17vw,255px);padding:10px}.expanded .card{height:clamp(240px,44vh,425px);width:clamp(165px,21vw,280px)}.preview-mat{height:74%;width:100%;display:flex;justify-content:center;align-items:center;padding:6px 10px;border-radius:13px;background:linear-gradient(135deg,#d4e0e329,#ffffff61 50%,#b8ced92b);border:1px solid #ffffffce;box-shadow:inset 0 1px 5px #72919e16,0 1px 0 #fff8}.phone-mount{display:block;height:100%;aspect-ratio:390/844;border:5px solid #edf4f4;border-radius:10px;box-sizing:content-box;box-shadow:0 0 0 1px #8ba2aa65,0 4px 9px #3f596325,inset 0 0 0 1px white;overflow:hidden;background:#f0f4f4}.card .phone-mount img{width:100%;height:100%;object-fit:contain;border-radius:0;filter:none;display:block}.card .has-scroll-gutter img{width:104%;max-width:none;object-fit:fill}.card .card-copy{height:26%;padding:7px 8px;justify-content:center}.card strong{font-size:17px}.card small{font-size:10px;max-width:100%;margin-top:5px}.card-number{font-size:17px;bottom:18px;right:15px}body:not(.expanded) .card:not(:first-child) .preview-mat{opacity:0}
/* One continuous material plane. The former upper wall / floor overlay is removed. */
.world .backlight{inset:-20%;background:url('white-glazed-tile.png') center/cover;transform:rotateX(24deg);transform-origin:50% 50%;opacity:1}.floor{background:none;box-shadow:none;mask-image:none}.experience>header{mix-blend-mode:multiply}.identity img{mix-blend-mode:normal}
@media(max-height:760px) and (min-width:701px){.card{height:235px;width:175px}.expanded .card{height:310px;width:210px}}
@media(max-width:700px){.card{height:255px;width:180px}.expanded .card{height:max(245px,min(300px,calc(100dvh - 380px)));width:195px}.card strong{font-size:16px}.world .backlight{inset:-15% -45%;background-size:cover;transform:rotateX(18deg)}.preview-mat{padding:5px 8px}.phone-mount{border-width:4px}}
.phone-mount.has-scroll-gutter{aspect-ratio:360/812}.card .has-scroll-gutter img{width:104.166667%}
/* Requested: unframed captures, environment-only light, physical hover. */
.preview-mat{background:none;border:0;box-shadow:none;padding:0;overflow:visible}.phone-mount{border:0;border-radius:0;box-shadow:none;background:transparent}.card .phone-mount img{border-radius:0;filter:none}.card:after{display:none}.card:before{box-shadow:none;border-color:#ffffff8a}.card,.expanded .card[data-active="true"]{box-shadow:1px 3px 0 #b2c6cb70,3px 5px 0 #ffffffa0,0 18px 28px #3f59631f}.expanded .card:hover{filter:none}.card{--lift:0px;transform:translate(-50%,-50%) translate3d(var(--x),calc(var(--y) + var(--lift)),var(--z)) rotateX(var(--rx)) rotateZ(var(--rz)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .7s var(--ease),opacity .5s,box-shadow .5s}.card.pointer-lift,.card:focus-visible{--lift:-9px;box-shadow:1px 3px 0 #b2c6cb70,3px 5px 0 #ffffffa0,0 25px 32px #3f59632c}.card.melting-source{--lift:0px}
#contact-menu{width:200px;padding:6px;max-width:calc(100vw - 40px)}.contact-options{gap:1px}.contact-options > a,.contact-options > button,.contact-pending{min-height:44px;padding:8px 10px}.contact-lens{height:44px}.contact-pending small{display:none}#email-detail{padding:7px 2px 9px}#email-detail p{font-size:11px}
@media(max-width:700px){.preview-mat{padding:0}.phone-mount{border-width:0}#contact-menu{width:200px}}
.word-reveal{display:inline-block;vertical-align:bottom;overflow:hidden;padding:0 .035em .12em;margin:0 -.035em -.12em;perspective:700px}.word-reveal>span,.word-reveal>i{display:inline-block;transform-origin:50% 100%;animation:headline-arrive 1.15s cubic-bezier(.16,.85,.18,1) both;animation-delay:calc(.12s + var(--entry-order)*.15s)}.introduction>.micro{animation:copy-arrive .95s var(--ease) .05s both}.introduction>.statement{animation:copy-arrive 1s var(--ease) .65s both}.work-stage{animation:stage-arrive 1.3s var(--ease) .45s both}.identity,.studio-signature{animation:copy-arrive .9s var(--ease) both}@keyframes headline-arrive{0%{opacity:0;transform:translateY(110%) rotateX(-30deg) rotateZ(2deg)}60%{opacity:1}100%{opacity:1;transform:translateY(0) rotateX(0) rotateZ(0)}}@keyframes copy-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes stage-arrive{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
/* Keep the card's inset glass mat; remove only the screenshot's own frame. */
.preview-mat{padding:6px 10px;overflow:hidden;background:linear-gradient(135deg,#d4e0e329,#ffffff61 50%,#b8ced92b);border:1px solid #ffffffce;box-shadow:inset 0 1px 5px #72919e16,0 1px 0 #fff8}
.phone-mount{border:0;box-shadow:none;background:transparent}
.card .phone-mount img{filter:grayscale(1);transition:filter .65s var(--ease)}
/* Color activation is gated by color-ready after deck positioning below. */
@media(max-width:700px){.preview-mat{padding:5px 8px}}
/* Editorial lettering, clear stacked glass and staged color. */
.introduction h1{font-family:'Bodoni Moda',serif;font-weight:400;letter-spacing:-.035em;line-height:1.12}
.introduction h1 i{font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400}
.statement,.work-heading h2,#information h2{font-family:'Chiron Sung HK',serif;font-weight:500;letter-spacing:.1em}
.word-reveal>span,.word-reveal>i{animation-duration:1.7s;animation-name:porcelain-type;animation-delay:calc(.15s + var(--entry-order)*.22s)}
.introduction>.statement{animation:porcelain-caption 1.8s var(--ease) .55s both}
.work-heading:not([hidden]) h2{animation:porcelain-caption 1.25s var(--ease) both}
@keyframes porcelain-type{0%{opacity:0;transform:translateY(108%) rotateX(-38deg);filter:blur(5px)}55%{opacity:.8;filter:blur(.7px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes porcelain-caption{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(8px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
.ground-shadow{display:none}
body:not(.expanded) .card{backdrop-filter:none;box-shadow:1px 2px 0 #c9d8dc40,2px 4px 0 #ffffffa0}
body:not(.expanded) .card:not(:first-child) .card-copy,body:not(.expanded) .card:not(:first-child) .card-number{visibility:hidden}
.card{user-select:none}
.preview-mat{padding:0;display:flex;align-items:center;justify-content:center}
.phone-mount,.phone-mount.has-scroll-gutter{width:100%;height:100%;aspect-ratio:auto;overflow:hidden;border-radius:12px}
.card .phone-mount img,.card .has-scroll-gutter img{width:100%;height:100%;max-width:100%;object-fit:contain;filter:grayscale(1);transition:filter 1.25s cubic-bezier(.25,.1,.25,1);border-radius:0}
@media(hover:hover) and (pointer:fine){body.color-ready .card:hover .phone-mount img,body.color-ready .card:focus-visible .phone-mount img{filter:grayscale(0)}}
@media(hover:none),(pointer:coarse){body.color-ready .card[data-active="true"] .phone-mount img{filter:grayscale(0)}}
.window-light{background:linear-gradient(90deg,transparent 8%,#fffef6ed 14%,#fffefaff 31%,transparent 32% 34%,#fffef7ff 35% 53%,transparent 54% 56%,#fffef7f5 57% 76%,transparent 82%);filter:blur(3px)}
@keyframes window-daylight{from{opacity:.72;transform:rotate(-24deg) skewX(-28deg) translateX(-3%)}to{opacity:1;transform:rotate(-24deg) skewX(-28deg) translateX(4%)}}
@keyframes daylight-reflection{from{opacity:.38}to{opacity:.9}}
@media(min-width:701px){.has-scroll-gutter{clip-path:inset(0 1.52% 0 0)}}
@media(max-width:700px){.preview-mat{padding:5px 8px}.phone-mount,.phone-mount.has-scroll-gutter{width:auto;height:100%;aspect-ratio:390/844;border-radius:0}.phone-mount.has-scroll-gutter{aspect-ratio:360/812}.card .has-scroll-gutter img{width:104.166667%;max-width:none;object-fit:fill}.introduction h1{font-size:clamp(39px,10vw,68px)}.statement{font-size:12px;letter-spacing:.055em}}
/* Restore pre-brightening sunlight, without changing the material plane. */
.window-light{background:linear-gradient(90deg,transparent 10%,#fffdf3b8 14%,#fffefaec 31%,transparent 32% 34%,#fffdf5eb 35% 53%,transparent 54% 56%,#fffdf4de 57% 76%,transparent 80%);filter:blur(5px)}
@keyframes window-daylight{from{opacity:.45;transform:rotate(-24deg) skewX(-28deg) translateX(-3%)}to{opacity:1;transform:rotate(-24deg) skewX(-28deg) translateX(4%)}}
@keyframes daylight-reflection{from{opacity:.18}to{opacity:.75}}
/* A single shared ratio determines both image and its rounded display mat. */
.card{display:flex;flex-direction:column}
.card .preview-mat{height:auto;aspect-ratio:11/10;flex:none;padding:0;border:0;border-radius:13px;overflow:hidden}
@media(min-width:701px) and (min-height:900px){.card .preview-mat{aspect-ratio:864/1000}}
.card .phone-mount,.card .phone-mount.has-scroll-gutter{display:block;width:100%;height:100%;aspect-ratio:inherit;border-radius:inherit;clip-path:none}
.card .phone-mount img,.card .has-scroll-gutter img,body.color-ready .card:hover .phone-mount img,body.color-ready .card:focus-visible .phone-mount img,body.color-ready .card[data-active="true"] .phone-mount img{width:100%;height:100%;max-width:100%;object-fit:contain;filter:none;transition:none;border-radius:inherit}
.card .card-copy{flex:1;height:auto;min-height:0}
@media(max-width:700px){.card .preview-mat{height:74%;aspect-ratio:auto;padding:0}.card .phone-mount,.card .phone-mount.has-scroll-gutter{width:100%;height:100%;aspect-ratio:auto}.card .phone-mount img{object-fit:contain}.card .has-scroll-gutter img{object-fit:contain;width:100%}}
/* Art-directed responsive character stages; no screenshots or letterboxing. */
.card{background:linear-gradient(125deg,#ffffffb8,#ffffff75 48%,#eef5f58c 78%,#ffffffbc)}
.card .preview-mat{height:74%;aspect-ratio:auto;position:relative;flex:none;background:none;box-shadow:none;padding:0;border-radius:13px;overflow:hidden}
.character-stage{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:inherit;isolation:isolate;background:var(--stage-bg)}
.card[data-theme=chef]{--stage-bg:radial-gradient(ellipse at 50% 38%,#1e315f,#090f2a 78%)}
.card[data-theme=house]{--stage-bg:radial-gradient(ellipse at 35% 20%,#f1d8bf,#bb8e70 90%)}
.card[data-theme=teacher]{--stage-bg:radial-gradient(ellipse at 45% 30%,#285d4c,#0e2e25 85%)}
.card[data-theme=clock]{--stage-bg:radial-gradient(ellipse at 40% 20%,#fffdf1,#e8dfc8 90%)}
.card[data-theme=robot]{--stage-bg:radial-gradient(ellipse at 40% 20%,#f4edf9,#d7c4e4 90%)}
.card[data-theme=wind]{--stage-bg:radial-gradient(ellipse at 25% 10%,#ffe374,#b99012 65%,#795700)}
.card .project-character{display:block;width:84%;height:87%;object-fit:contain;object-position:center;border-radius:0;filter:none;background:transparent;position:absolute;left:8%;top:6.5%;min-width:0;min-height:0;z-index:1;animation:character-float 4.5s ease-in-out infinite;transform-origin:50% 65%}
.card[data-theme=house] .project-character{width:94%;height:94%;left:3%;top:3%}.project-character svg{display:block;width:100%;height:100%}
.card[data-theme=robot] .project-character{width:86%;height:86%;left:7%;top:7%}
.character-shadow{position:absolute;width:45%;height:5%;left:27.5%;bottom:5%;background:#17212824;border-radius:50%;filter:blur(5px);animation:character-ground 4.5s ease-in-out infinite}
@keyframes character-float{0%,100%{transform:translateY(1.5%) rotate(-.6deg)}50%{transform:translateY(-2%) rotate(.6deg)}}
@keyframes character-ground{0%,100%{opacity:.65;scale:1}50%{opacity:.35;scale:.88}}
footer{position:relative;justify-content:center}.studio-signature{position:absolute;left:0;bottom:0}.edition{position:absolute;right:0}
/* Studio wordmark: align closer to the logo without moving the header. */
.identity{gap:8px}
.identity span{font-family:'Chiron Sung HK',serif;font-weight:500;letter-spacing:.065em}
/* Approved B study: retain the existing reveal motion and layout. */
.introduction h1,.introduction h1 i{font-family:'Syncopate',sans-serif;font-weight:700;font-style:normal;letter-spacing:-.025em}
.introduction h1{font-size:clamp(30px,4.2vw,90px);text-transform:uppercase}
body:not(.expanded) .card{height:clamp(253px,33.5vh,380px)}
@media(max-height:760px) and (min-width:701px){body:not(.expanded) .card{height:253px}}
@media(max-width:700px){.introduction h1{font-size:clamp(18px,5.3vw,48px)}body:not(.expanded) .card{height:275px}}
/* Full-width floor-window sweep: broad travel, while preserving tile contrast. */
.window-light{left:-35%;bottom:-82%;width:170%;height:260%;opacity:.62;filter:blur(5px);animation:window-sweep-full 15s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.world:before{inset:-90% -25%;animation:frame-sweep-full 15s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.world:after{animation:ambient-sweep-full 15s cubic-bezier(.45,.05,.55,.95) infinite alternate}
@keyframes window-sweep-full{0%{opacity:.42;transform:rotate(-24deg) skewX(-28deg) translateX(-18vw)}48%{opacity:.78}100%{opacity:.64;transform:rotate(-24deg) skewX(-28deg) translateX(18vw)}}
@keyframes frame-sweep-full{0%{opacity:.42;transform:rotate(-24deg) skewX(-28deg) translateX(-15vw)}50%{opacity:.82}100%{opacity:.58;transform:rotate(-24deg) skewX(-28deg) translateX(15vw)}}
@keyframes ambient-sweep-full{0%{opacity:.28;transform:translateX(-10vw)}50%{opacity:.62}100%{opacity:.36;transform:translateX(10vw)}}
/* Feather the baked upper reflection so its rectangular edge never reads as a splice. */
.backlight:after{content:'';position:absolute;inset:-8%;pointer-events:none;background:radial-gradient(ellipse 28% 18% at 67% 15%,#fffdf8a8 0 24%,#fffdf866 43%,#fffdf820 63%,transparent 78%);filter:blur(22px);mix-blend-mode:screen}
/* Restore the approved deck material: one glass card and one soft cast shadow. */
.card{outline:0;border-color:#fffffff0;box-shadow:inset 1px 1px 1px #ffffffd9,inset -1px -1px 2px #8da3a82b,1px 3px 0 #b7c9cd70,0 20px 32px #49646b25}
.expanded .card[data-active="true"]{outline:0;box-shadow:inset 1px 1px 1px #ffffffd9,inset -1px -1px 2px #8da3a82b,1px 3px 0 #aec2c770,0 24px 38px #46606e2b}
body:not(.expanded) .card{box-shadow:1px 2px 0 #c1d0d34d,0 14px 24px #49646b1d}
@media(max-width:700px){.window-light{left:-70%;bottom:-82%;width:240%;height:260%}.studio-signature{left:0;bottom:2px;font-size:8px;gap:3px;padding-left:8px;letter-spacing:.06em}}
@media(max-width:700px){.card .preview-mat{height:74%;padding:0;aspect-ratio:auto}.edition{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.card:focus-visible{--lift:0px}}

/* Keep the approved brand descriptor in the header and give the expanded title
   enough responsive breathing room at medium desktop heights. */
header .studio-signature{position:static;left:auto;right:auto;top:auto;bottom:auto}
@media(min-width:701px){.expanded .work-heading{top:clamp(28px,4.5vh,52px)}}
@media(min-width:701px) and (max-height:760px){.expanded .work-heading{top:18px}}

/* Desktop project viewer: use more of the available vertical canvas. */
@media(min-width:701px){#project-dialog{height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}

/* Keep the pointer over the real hit target while retaining the 3D tilt response. */
.card.pointer-lift,.card:focus-visible{--lift:0px}

/* iOS Safari does not reliably finish an objectBoundingBox SVG clip-path on a
   top-layer dialog. Keep the liquid glass material, but animate its geometry
   with the Web Animations API on narrow screens. */
#project-dialog.mobile-melting{visibility:visible;clip-path:none;-webkit-clip-path:none;transform-origin:50% 58%}

/* Give the mobile brand descriptor a quiet porcelain veil so tile seams never
   run through the letters as the viewport and browser bars change height. */
@media(max-width:700px){header .studio-signature{align-self:flex-start;margin-top:3px;padding:7px 7px 7px 12px;border-left-color:#728b9080;border-radius:0 12px 12px 0;background:linear-gradient(90deg,#ffffff8f,#ffffffda 72%,#ffffff72);box-shadow:inset 0 1px #fff8;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}}

/* Safari 26 extends a solid edge tint when a fixed/sticky surface meets the
   obscured inset. The 1px sampler is visual-only; controls remain on 100dvh. */
@media(max-width:700px){html,body{min-height:100%;background-color:#f8f8f5}body:after{content:'';position:fixed;z-index:2147483646;left:0;right:0;bottom:0;height:1px;background-color:#f8f8f5;pointer-events:none}}

/* Prevent stale composited frames during the 3D fold, and give the closed
   deck the taller silhouette approved for the entrance state. */
.card{will-change:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden}
body:not(.expanded) .card{height:clamp(268px,35.5vh,400px)}
@media(max-height:760px) and (min-width:701px){body:not(.expanded) .card{height:268px}}
@media(max-width:700px){body:not(.expanded) .card{height:292px}}

/* On touch Safari, revealing the hidden side cards in the same frame as the
   3D fold can briefly paint their previous composited positions. Keep only
   the moving card visible until it reaches the closed stack, then let the
   remaining cards appear at their final coordinates. */
@media(max-width:700px){
  body.deck-folding-mobile:not(.expanded) .card:not([data-active="true"]){opacity:0!important;visibility:hidden!important}
  body:not(.expanded) .card{transition:transform .7s var(--ease),opacity .22s ease,box-shadow .5s}
}

/* Narrow only the desktop project canvas; preserve its approved height. */
@media(min-width:701px){#project-dialog{width:min(86vw,1320px)}}