/* SpecularButton shader light; preserve each existing control's size, color and label. */
.has-specular{position:relative;isolation:isolate}
.specular-button__light{position:absolute!important;inset:-24px!important;z-index:3;display:block!important;width:calc(100% + 48px)!important;height:calc(100% + 48px)!important;max-width:none!important;max-height:none!important;pointer-events:none;border-radius:0!important;transform:none!important;opacity:1!important}
.has-specular:focus-visible{outline:2px solid #7699ef;outline-offset:4px}
.project-button{border-radius:20px}
.brand{border-radius:12px}
footer a,.text-link,.hero-about-link{border-radius:9px}

/* The modal frame stays still; its content scrolls beneath the top controls. */
html:has(dialog[open]){overflow:hidden}
#project-dialog,#image-dialog{padding:0;overflow:hidden;background:rgba(233,242,255,.53);border:1px solid rgba(255,255,255,.8);box-shadow:0 30px 100px #0c256951,inset 0 1px 0 #ffffffcf;backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);color:#213c7e;max-height:90svh}
#project-dialog[open],#image-dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:rgba(20,40,90,.26);backdrop-filter:none;-webkit-backdrop-filter:none}
#project-dialog .dialog-bar,#image-dialog .dialog-bar{display:flex;align-items:center;position:relative;top:auto;flex:0 0 auto;gap:24px;background:rgba(244,249,255,.38);border-bottom:1px solid #ffffff80;padding:13px 25px;z-index:5;min-height:74px}
.dialog-bar>#dialog-index,.dialog-bar>.image-label{min-width:0;flex:1;font-size:10px;letter-spacing:.7px;line-height:1.5;color:#3458a6}
.dialog-bar button{white-space:nowrap;flex-shrink:0;min-height:36px}
.dialog-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;flex:1 1 auto}
.dialog-scroll::-webkit-scrollbar{display:none}
.dialog-scroll:focus-visible{outline:2px solid #6b91e9;outline-offset:-3px}
#project-dialog .detail-grid>div{background:rgba(244,248,255,.32);border-color:rgba(255,255,255,.63)}
#project-dialog .dialog-intro>p,#project-dialog .detail-grid p{color:#3e5683}
#project-dialog .detail-grid{border-color:#ffffff70}
.gallery-caption{color:#34517f}
#image-dialog{width:min(1120px,94vw)}
#image-dialog #close-image{position:relative;top:auto;right:auto;margin:0;background:#e8f0ffc4;color:#243f90}
#image-dialog .image-scroll{padding:20px}
#image-dialog img{display:block;width:100%;max-width:100%;height:auto;margin:0 auto}
#image-dialog p{margin:16px 0 0;text-align:center;font-size:11px;color:#3e5683}

/* WakeSlider controls the scroll position, including keyboard Home/End and arrows. */
.wake-slider{display:flex;align-items:center;gap:10px;width:clamp(130px,23vw,330px);flex:0 1 auto;color:#3156b1}
.wake-slider__track{position:relative;display:flex;align-items:center;gap:3px;height:44px;min-width:0;flex:1;touch-action:none}
.wake-slider__bar{flex:1;min-width:1px;height:40px;border-radius:99px;background:#4566aa3d;transform:scaleY(.21);pointer-events:none}
.wake-slider__bar[data-on=true]{background:#3b67cf}
.wake-slider__handle{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;opacity:1;border:0;border-radius:8px;color:transparent}
.wake-slider__handle::-webkit-slider-runnable-track{background:transparent;border:0;height:44px}
.wake-slider__handle::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:44px;background:transparent;border:0}
.wake-slider__handle::-moz-range-track{background:transparent;border:0}
.wake-slider__handle::-moz-range-thumb{width:12px;height:44px;background:transparent;border:0}
.wake-slider__handle:focus-visible{outline:2px solid #4276da;outline-offset:3px}
.wake-slider output{min-width:4ch;font-size:10px;text-align:right;font-variant-numeric:tabular-nums}

/* ProfileCard foil and spring tilt, with uncropped full-size artwork. */
.artwork-profile{--pc-radius:18px;--pc-backdrop:transparent;--pc-holo:0;--pc-active:0;--pc-glare:0;--pc-frame-edge:#ffffff80;--pc-frame-highlight:#ffffff70;--pc-tile-edge:#ffffff60;--pc-tile-highlight:#ffffff60;--pc-parallax:0px}
.artwork-profile.profile-card{width:100%;perspective:1400px}
.artwork-profile .profile-card__body{display:block;padding:8px;background:rgba(255,255,255,.23);box-shadow:0 8px 30px #264d8b18;backdrop-filter:none;-webkit-backdrop-filter:none}
.artwork-profile .profile-card__tile{aspect-ratio:auto;overflow:hidden}
.artwork-profile .gallery-button{display:block;width:100%;padding:0;margin:0;border:0;background:transparent;border-radius:inherit;overflow:visible}
.artwork-profile .profile-card__photo{position:relative;inset:auto;display:block;width:100%;height:auto;max-height:none;object-fit:contain;transform:none}
.artwork-profile .profile-card__holo{z-index:1;opacity:calc(var(--pc-holo) * var(--pc-active));mix-blend-mode:soft-light}
.artwork-profile .profile-card__sheen{z-index:2}
.artwork-profile .profile-card__glare{z-index:4}
.artwork-profile .profile-card__shade{z-index:4}
.artwork-profile .profile-card__rim{z-index:5}
.artwork-profile .profile-card__tile-rim{z-index:3}
@media(max-width:700px){#project-dialog .dialog-bar,#image-dialog .dialog-bar{gap:10px;padding:10px 14px;min-height:68px}.dialog-bar>#dialog-index,.dialog-bar>.image-label{font-size:8px;letter-spacing:0;max-width:36%}.wake-slider{width:38%;gap:6px}.wake-slider__track{gap:2px}.wake-slider output{font-size:9px}.dialog-bar button{font-size:10px;padding:5px 11px}.artwork-profile .profile-card__body{padding:5px}.artwork-profile .profile-card__body{transform:none}#image-dialog .image-scroll{padding:10px}}
@media(prefers-reduced-motion:reduce){.artwork-profile .profile-card__body{transform:none}.wake-slider__bar{transform:scaleY(.21)!important}}

/* Quiet text links and icon-only close controls. */
.brand,.hero-about-link,.text-link,.text-link>span{transition:none!important}
.hero-about-link:hover,.text-link:hover,.text-link:hover>span{transform:none!important;color:inherit;box-shadow:none}
#project-dialog #close-dialog,#image-dialog #close-image{display:grid;place-items:center;width:38px;height:38px;min-height:38px;padding:0;margin:0;border-radius:50%;line-height:1}
#project-dialog #close-dialog>span,#image-dialog #close-image>span{display:block;margin:0;font-size:25px;line-height:1;font-weight:400}

/* See every image first; retain the full-size viewer for close inspection. */
#project-dialog .overview-heading{padding:22px 32px 17px}
#project-dialog .overview-heading .eyebrow{margin-bottom:6px;font-size:10px}
#project-dialog .overview-heading h2{font-size:29px;margin:5px 0 7px}
#project-dialog .overview-heading>p{font-size:12px}
#project-dialog .gallery-overview{grid-template-columns:repeat(var(--gallery-count),minmax(0,1fr));gap:16px;padding:0 32px 20px;align-items:start}
.gallery-overview figure{min-width:0}
.gallery-overview .profile-card__body{padding:7px}
.gallery-overview .profile-card__tile{height:clamp(140px,36svh,320px);background:#ffffff35}
.gallery-overview .gallery-button{height:100%}
.gallery-overview .profile-card__photo{width:100%;height:100%;max-height:100%;object-fit:contain}
.gallery-overview .gallery-caption{font-size:10px;line-height:1.6;padding:0 4px;margin-top:8px}
#project-dialog .overview-details{padding:0 32px 30px}
#project-dialog .overview-details .detail-grid{margin-top:0;padding-top:18px}
@media(max-width:700px){#project-dialog .overview-heading{padding:18px 17px 13px}#project-dialog .overview-heading h2{font-size:23px}#project-dialog .overview-heading>p{font-size:11px}#project-dialog .gallery-overview{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 17px 18px;gap:14px 10px}.gallery-overview .profile-card__tile{height:clamp(85px,16svh,135px)}.gallery-overview .profile-card__body{padding:5px}.gallery-overview .gallery-caption{font-size:9px;line-height:1.5}#project-dialog .overview-details{padding:0 17px 22px}#project-dialog #close-dialog,#image-dialog #close-image{width:36px;height:36px;min-height:36px}}