/* Layout changes only: the same artwork, project names and links at every size. */
.responsive-nav{display:none}.responsive-grid,.responsive-sidebar{display:contents}

@media(max-width:1000px){
 body{overflow-x:hidden}
 .responsive-nav{display:flex;position:relative;z-index:50;height:76px;padding:12px 16px;align-items:center;justify-content:space-evenly;gap:8px;background:#ffffffed}
 .responsive-nav a{position:relative!important;inset:auto!important;font:11px/1.5 Arial,sans-serif;letter-spacing:.3px;text-decoration:none;color:#527594;padding:12px 2px;min-height:44px}
 .responsive-nav a[aria-current]::after{top:auto!important;bottom:5px;width:22px;height:1px}
 #project-scene{position:absolute;left:50%;transform-origin:50% 0}
 #project-scene nav{display:none}
 #project-viewport{margin-top:-76px;min-height:100svh}
 #project-scene .footer-left,#project-scene .footer-right{font-size:70px}
 dialog{max-width:calc(100vw - 24px);max-height:92svh;padding:20px}
 dialog h1{font-size:20px;padding-right:60px;overflow-wrap:anywhere}
 #close-project{position:sticky;top:0;z-index:3;min-height:44px}
 .home-return{position:relative!important;left:auto!important;top:auto!important;margin:8px 16px;font-size:12px}
 body:has(#about)>.home-return{position:fixed!important;top:76px!important;left:12px!important;margin:0}
}
@media(min-width:901px) and (max-width:1000px){
 #home{min-height:100svh;height:56.25vw}
}
@media(max-width:360px){
 .mobile-nav{left:8px;right:8px;gap:0}.mobile-nav button{font-size:12px}
 .envelope{max-width:100%}.paper{padding:24px 18px}
}
@media(hover:none){
 button,a{touch-action:manipulation}
 .project:active{opacity:.8}
}

@media(max-width:1000px){
 html{overflow-x:clip}
 body:has(.desk){overflow-x:clip}
}

@media(max-width:1000px){.mobile-nav{left:12px;right:12px;gap:4px}.mobile-nav button{font-size:11px;letter-spacing:.2px;padding:8px 2px}}
@media(max-width:360px){.mobile-nav button{font-size:10px}}

/* A quiet header and narrow gutters give the artwork the full viewing area. */
dialog:has(#project-pages){width:min(1600px,calc(100vw - 32px));max-width:calc(100vw - 32px);height:94svh;max-height:94svh;padding:0 10px 10px;border:1px solid #dbe8f0;border-radius:8px;background:#f8fbfe;box-shadow:0 16px 70px #2f506b26;overflow:auto;scrollbar-width:thin;scrollbar-color:#c5d9e8 transparent}
dialog #project-name{position:sticky;top:0;z-index:2;margin:0 -10px 0;padding:23px 66px 21px 22px;min-height:72px;background:#f8fbfef5;backdrop-filter:blur(12px);border-bottom:1px solid #e6eef4;font-family:'Noto Serif SC','Songti SC','STSong','SimSun',Georgia,serif;font-size:20px;font-weight:400;line-height:1.4;letter-spacing:.5px;overflow-wrap:anywhere}
dialog #close-project{position:sticky;top:14px;right:4px;float:right;z-index:4;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;margin:14px 4px -58px 0;padding:0;border:0;border-radius:50%;background:transparent;color:#6486a0;cursor:pointer}
dialog #close-project:hover{background:#e8f1f8;color:#355d7c}
#project-pages{clear:both}
dialog #project-pages img{display:block;position:static;width:100%;max-width:100%;height:auto;margin:8px 0 0}
@media(max-width:600px){
 dialog:has(#project-pages){width:calc(100vw - 12px);max-width:calc(100vw - 12px);height:96svh;max-height:96svh;padding:0 5px 5px;border-radius:6px}
 dialog #project-name{font-size:17px;font-weight:400;min-height:64px;margin:0 -5px;padding:21px 55px 19px 14px}
 dialog #close-project{top:10px;margin:10px 0 -54px 0;width:44px;height:44px}
 dialog #project-pages img{margin-top:5px}
}

/* Project windows retain their original sidebar layout at every viewport width. */
dialog #project-name{font-family:'Noto Sans SC','PingFang SC',sans-serif;font-weight:400}