/* The owner's cover stays uncropped at every viewport width. */
.hero-cover.hero-canvas{height:auto;min-height:0;padding:0;background:#052b35}
.hero-cover>#hero-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hero-cover-image{display:block;width:100%;height:auto;aspect-ratio:1920/1005;object-fit:contain;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.hero-cover .hero-bottom{position:relative;inset:auto;min-height:132px;gap:24px;padding:23px 36px 64px;background:linear-gradient(110deg,#073b47,#052b35);align-items:center}
.hero-cover .hero-bottom .hero-note{font-size:14px;line-height:1.7;max-width:none}
.hero-cover .hero-cta.dui-btn{flex-shrink:0;align-self:center;min-width:155px}

/* Small material studies occupy their own space, away from project images. */
.spatial-study{position:relative;width:150px;height:156px;margin-top:25px;pointer-events:none;isolation:isolate}
.study-cube.scene-3d{--cube-size:65px;left:38px;top:30px;z-index:1}
.study-orbit{position:absolute;width:150px;height:80px;left:0;top:32px;border:1px solid #2397b588;border-radius:50%;transform:rotate(-30deg);box-shadow:0 1px 0 #fff,inset 0 1px 0 #ffffffc9;z-index:2}
.study-orbit:after{content:"";position:absolute;inset:9px -2px;border:1px solid #83c9dc66;border-radius:50%;transform:rotate(52deg)}
.study-pearl.glass-orb{position:absolute;right:3px;bottom:31px;width:29px;height:29px;z-index:3;animation:spatial-float 9s ease-in-out infinite reverse}
.study-shadow{position:absolute;bottom:7px;left:25px;width:108px;height:18px;border-radius:50%;background:radial-gradient(ellipse,#2a849a33,transparent 68%)}
.artwork-heading-side{display:flex;align-items:center;gap:28px;max-width:490px}
.artwork-heading-side p{margin:0;flex:1}
.orbital-sculpture{position:relative;flex:0 0 120px;width:120px;height:120px;pointer-events:none;animation:spatial-float 10s ease-in-out infinite}
.orbital-ring{position:absolute;left:5px;top:5px;width:110px;height:110px;border:10px solid #78cee0;border-top-color:#e1fcff;border-left-color:#bdf5fb;border-bottom-color:#177d9c;border-right-color:#45a7c1;border-radius:50%;box-shadow:inset 0 2px 3px #fff9,0 4px 1px #06445e,0 9px 16px #03293666}
.ring-one{transform:perspective(400px) rotateX(55deg) rotateY(-15deg) rotateZ(-35deg)}
.ring-two{transform:perspective(400px) rotateX(15deg) rotateY(58deg) rotateZ(-25deg);opacity:.9}
.orbital-pearl.glass-orb{position:absolute;left:44px;top:44px;width:32px;height:32px;box-shadow:0 3px 14px #073f57}

/* A glass sculpture closes the page in the same material as the cover. */
.contact-canvas.spatial-contact{background:radial-gradient(ellipse at 87% 38%,#11647b99,transparent 49%),linear-gradient(120deg,#093c49,#052a35 72%);padding:30px 38px}
.spatial-contact .contact-top{color:#d9f5fa}
.contact-main{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;min-height:360px;padding:37px 0 22px}
.contact-main .contact-copy{position:relative;z-index:1;min-width:0}
.contact .contact-main h2{text-align:left;margin:0 0 23px;font-size:clamp(55px,5.8vw,80px);line-height:1.06;color:#fff}
.contact .contact-main h2 span{color:#b4edf6}
.contact-copy p{color:#e4f6fa;margin:0;font-size:16px;line-height:1.7}
.contact-art{position:relative;justify-self:center;width:100%;max-width:335px;pointer-events:none;isolation:isolate}
.contact-art img{position:relative;z-index:1;width:100%;height:auto;animation:spatial-float 8s ease-in-out infinite;user-select:none;-webkit-user-drag:none}
.contact-art-halo{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,#52bed733,transparent 70%)}
.contact-orbit{position:absolute;inset:23% -9% 17%;border:1px solid #9be7f33d;border-radius:50%;transform:rotate(-33deg)}
.spatial-contact .contact-links{margin-top:0;border-color:#a2d9e33b;color:#eefcff;padding-top:19px}

@media(max-width:1100px){
 .artwork-heading-side{max-width:390px;gap:16px}
 .orbital-sculpture{flex-basis:96px;width:96px;height:96px;scale:.8;transform-origin:center}
 .contact-main{min-height:315px;gap:24px}
 .contact-art{max-width:280px}
 .contact .contact-main h2{font-size:62px}
}
@media(max-width:800px){
 .hero-cover .hero-bottom{min-height:120px;padding:20px 22px 54px;gap:18px}
 .hero-cover .hero-bottom .hero-note{font-size:13px}
 .hero-cover .hero-cta.dui-btn{min-width:132px;height:46px;min-height:46px;font-size:13px}
 .spatial-study{width:118px;height:100px;margin:0 24px 0 0;scale:.75;transform-origin:right center}
 .study-cube.scene-3d{top:5px;left:20px}
 .study-orbit{top:9px;left:-14px}
 .study-pearl.glass-orb{bottom:4px;right:0}
 .study-shadow{bottom:-15px;left:9px}
 .artwork-heading-side{max-width:340px;gap:12px}
 .artwork-heading-side p{font-size:13px;margin:0;max-width:220px}
 .orbital-sculpture{flex-basis:80px;width:80px;height:100px;scale:.7;transform-origin:left center}
 .contact-canvas.spatial-contact{padding:24px}
 .contact-main{gap:12px;grid-template-columns:1.35fr 1fr;min-height:285px;padding-top:30px}
 .contact .contact-main h2{font-size:clamp(37px,6.5vw,52px)}
 .contact-copy p{font-size:14px}
 .contact-art{max-width:230px}
}
@media(max-width:560px){
 .artwork-section .section-heading{flex-direction:column;align-items:stretch;gap:12px}
 .artwork-heading-side{max-width:none;justify-content:space-between;gap:22px}
 .artwork-heading-side p{max-width:none;font-size:14px}
 .orbital-sculpture{order:1;flex-basis:84px}
 .contact-main{display:flex;flex-direction:column;gap:20px;padding:14px 0 28px}
 .contact-art{order:-1;width:190px;margin-inline:auto}
 .contact .contact-main h2{text-align:center;font-size:clamp(37px,10.5vw,51px);margin-bottom:17px}
 .contact-copy p{text-align:center;max-width:260px;margin-inline:auto;font-size:14px}
}
@media(max-width:480px){
 .hero-cover .hero-bottom{min-height:110px;padding:18px 18px 49px;gap:12px;flex-direction:row;align-items:center}
 .hero-cover .hero-bottom .hero-note{font-size:11px;max-width:none;line-height:1.7}
 .hero-cover .hero-cta.dui-btn{font-size:12px;min-width:112px;padding-inline:15px}
 .hero-cover .hero-cta span{font-size:inherit}
 .spatial-study{width:110px;height:94px;scale:.68}
 .contact-canvas.spatial-contact{padding:22px 20px}
 .spatial-contact .contact-links{gap:3px 23px;font-size:13px}
}
@media(max-width:350px){
 .hero-cover .hero-bottom{gap:10px;padding-inline:14px}
 .hero-cover .hero-bottom .hero-note{font-size:10px}
 .hero-cover .hero-cta.dui-btn{min-width:100px;padding-inline:12px;font-size:11px}
 .contact .contact-main h2{font-size:34px}
 .spatial-contact .contact-links{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.spatial-study *,.orbital-sculpture,.contact-art img{animation:none!important}}

/* Reading, contact, and image-viewing refinements. */
.site-header .nav-link.dui-btn.is-current{color:#06394d;background:radial-gradient(ellipse,#79d5ec,#c7eef7);box-shadow:inset 0 0 0 1px #168aab88,inset 0 2px 4px #fff9,0 6px 13px #135d751c}
.contact-email{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0}
.spatial-contact .contact-email a{width:auto;min-width:0}
.contact-email .contact-copy-button.dui-btn{width:44px;height:44px;min-height:44px;padding:0;flex:none}
.contact-email .contact-copy-button.dui-btn .copy-email-caption{display:none}
.contact-copy-button .copied-email-icon{display:none!important}
.contact-copy-button.is-copied .copy-email-icon{display:none!important}
.contact-copy-button.is-copied .copied-email-icon{display:block!important}
.contact-copy-fallback{max-width:430px;margin:14px auto 0;font-size:13px;color:#e4f6fa}
.contact-copy-fallback label{display:block;margin-bottom:8px}
.contact-copy-fallback .dui-input{width:100%;border-radius:8px;background:#f1fbfd;color:#083d50;border-color:#a7dce7;font-size:14px}
#site-feedback{z-index:1000;pointer-events:none}
#site-feedback p{padding:13px 20px;border:1px solid #a3e2ee66;border-radius:12px;background:#07536c;color:#fff;box-shadow:0 7px 24px #042a3b33;font-size:14px;text-align:center;max-width:calc(100vw - 40px);white-space:normal}
.dialog-header>div:first-child{min-width:0}
.dialog-tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
.dialog-tools .detail-toggle.dui-btn{height:44px;min-height:44px;font-size:12px;padding:0 14px;gap:8px}
.dialog-tools .detail-toggle svg{width:18px;height:18px}
dialog.is-expanded{width:min(1600px,calc(100% - 24px));max-height:calc(100dvh - 24px)}
dialog.is-expanded .gallery-stage>img{height:calc(100dvh - 160px);object-fit:contain}
dialog.is-expanded .dialog-details,dialog.is-expanded #gallery-thumbs,dialog.is-expanded .gallery-actions,dialog.is-expanded #share-fallback,dialog.is-expanded .dialog-tip{display:none}
@media(max-width:800px){.contact-email{width:100%}}
@media(max-width:560px){
 .dialog-tools{gap:8px}
 .dialog-tools .detail-toggle.dui-btn{width:44px;padding:0}
 .detail-toggle>span{display:none!important}
 .dialog-header h2{overflow-wrap:anywhere}
 dialog.is-expanded{width:100%;height:100dvh;max-height:100dvh;border-radius:0}
 dialog.is-expanded .dialog-shell{display:flex;flex-direction:column;height:100dvh}
 dialog.is-expanded .dialog-header{flex-shrink:0}
 dialog.is-expanded .gallery-stage{flex:1;min-height:0}
 dialog.is-expanded .gallery-stage>img{height:100%;max-height:100%}
}
@media(max-width:480px){.hero-cover .hero-bottom .hero-note{font-size:12px}.contact-email{gap:9px}}
@media(max-width:350px){
 .hero-cover .hero-bottom .hero-note{font-size:11px}
 .contact-email{flex-direction:column;gap:8px}
 .contact-email .contact-copy-button.dui-btn{width:auto;padding-inline:15px;gap:8px;font-size:11px}
 .contact-email .contact-copy-button.dui-btn .copy-email-caption{display:block}
}