body{margin:0;background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
#canvas{position:relative;width:100vw;height:100vh;overflow:hidden}
.tile{position:absolute;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.2);cursor:pointer}.tile img{width:100%;height:100%;object-fit:cover;display:block}
.project-dock{position:fixed;left:22px;bottom:22px;z-index:90;display:flex;gap:14px;align-items:flex-end;max-width:calc(100vw - 300px)}
.project-card{display:flex;align-items:flex-end;gap:10px;width:clamp(190px,18vw,270px);padding:9px;background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 18px 50px rgba(0,0,0,.16);color:rgba(0,0,0,.82);text-decoration:none}
.project-thumb{display:block;width:78px;height:54px;background:#ddd center/cover no-repeat;flex:0 0 auto}.project-text{display:flex;flex-direction:column;gap:3px;min-width:0}.project-title{font-size:15px;line-height:1.05;font-weight:600;letter-spacing:-.02em}.project-subtitle{font-size:11px;line-height:1.15;color:rgba(0,0,0,.58)}.project-card:hover .project-title{text-decoration:underline}
.contact{position:fixed;right:18px;bottom:16px;font-size:22px;line-height:1.3;color:rgba(0,0,0,.6);text-align:right;z-index:100}.contact .label{opacity:.55}.contact a{color:inherit;text-decoration:none}.contact a:hover{text-decoration:underline}
.lightbox{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:24px}.lb-inner{position:relative;max-width:92vw;max-height:92vh}.lb-inner img{max-width:92vw;max-height:70vh;display:block;margin:auto}.lb-caption{color:white;margin-top:20px;font-size:clamp(28px,3.2vw,40px);line-height:1.35;max-width:80ch}.lb-caption a{color:#9fd3ff;text-decoration:underline}.close{position:absolute;top:-44px;right:0;color:white;font-size:40px;line-height:1;cursor:pointer}
.project-page{background:#fff;color:#111;overflow-y:auto}.project-wrap{max-width:1180px;margin:0 auto;padding:48px 28px 80px}.back-link{display:inline-block;margin-bottom:42px;color:rgba(0,0,0,.62);text-decoration:none;font-size:18px}.back-link:hover{text-decoration:underline}.project-header{max-width:780px;margin-bottom:56px}.project-header h1{font-size:clamp(46px,8vw,108px);line-height:.9;letter-spacing:-.07em;margin:0 0 18px;font-weight:650}.project-header p{font-size:clamp(22px,2.6vw,34px);line-height:1.18;color:rgba(0,0,0,.68);margin:0}.project-section{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:38px;align-items:center;margin:0 0 70px}.project-section.reverse{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)}.project-section.reverse .project-image{order:2}.project-section.reverse .project-copy{order:1}.project-image{min-height:clamp(320px,48vw,640px);background:#deded8 center/cover no-repeat;box-shadow:0 24px 70px rgba(0,0,0,.18)}.project-copy p{font-size:clamp(20px,2vw,30px);line-height:1.28;margin:0;color:rgba(0,0,0,.76)}
@media(max-width:800px){.project-dock{left:12px;right:12px;bottom:78px;max-width:none;gap:8px}.project-card{width:auto;flex:1;padding:7px}.project-thumb{width:58px;height:42px}.project-subtitle{display:none}.contact{font-size:16px;right:12px;bottom:12px}.project-wrap{padding:30px 18px 64px}.project-section,.project-section.reverse{display:block}.project-section.reverse .project-image,.project-section.reverse .project-copy{order:initial}.project-image{min-height:300px;margin-bottom:18px}.project-copy p{font-size:21px}}