.desktop img.artwork-image{cursor:pointer}
.dots{max-width:min(70vw,600px);overflow-x:auto;scrollbar-width:none;justify-content:safe center}
.mobile .dots{max-width:calc(100vw - 150px)}

/* Desktop slider area begins 82px below the browser edge. */
.desktop .slider-scene{padding-top:82px;width:max(100%,var(--gallery-min-width,1024px));height:auto;min-height:max(850px,var(--gallery-page-height,850px));overflow:visible}
.desktop .slider-stage{height:auto;min-height:0;overflow:visible;scrollbar-gutter:auto}
html.mini-desktop-slider{scrollbar-width:thin;scrollbar-color:#4e402a #151515}
html.mini-desktop-slider:not(.is-portfolio-inquire-popup-locked){overflow:auto}
.desktop .slider-footer .arrow{position:absolute}
.desktop .dots{max-width:min(calc(100% - 190px),600px)}
.desktop .slider-stage.is-sliding{overflow:clip}
.desktop .input-fields-button-separator{width:29px;height:10px}

.desktop .inquire{margin-top:29px}

/* Media is revealed only after it decodes; invisible thumbnails reserve their space. */
.thumbnail{opacity:0}
.thumbnail.mini-loaded{opacity:1}
.mini-media-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:80px;background:#1d1d1d;color:#c9a875;font:12px/18px Gotham,Arial,sans-serif;text-align:center}
.mini-media-error button,.mini-load-error button{border:1px solid #c9a875;padding:8px 14px}
.intro-visual .mini-media-error{width:100%;height:100%}
.mini-load-error{position:fixed;z-index:200;inset:auto 20px 20px;padding:20px;background:#151515;color:#c9a875;text-align:center}
.mini-load-error p{margin-bottom:12px}
.mini-icon-fallback{font:24px/31px Arial,sans-serif}
.mini-font-fallback,.mini-font-fallback .portfolio-name,.mini-font-fallback .input-fields-group *{font-family:Arial,sans-serif!important}
@keyframes mini-ready-fade{from{opacity:0}to{opacity:1}}
.input-field.is-invalid .input-field__label,.input-fields-status:not(:empty){animation:mini-ready-fade .3s ease-out}
@media(prefers-reduced-motion:reduce){.input-field.is-invalid .input-field__label,.input-fields-status:not(:empty){animation-duration:1ms}}

/* Desktop rows vary in width; mobile rows stay balanced. Both use exact 8px gaps. */
.thumbnails-grid{display:flex;flex-direction:column;flex-wrap:nowrap;gap:8px}
.thumbnail-row{display:flex;flex:none;justify-content:center;gap:8px;max-width:100%}
.thumbnails-scene{padding-bottom:190px}
.mobile .thumbnails-scene{padding-bottom:190px}
.thumbnail .mini-media-error{width:100%;height:100%;min-height:0;font-size:10px;gap:4px}
.thumbnail .mini-media-error button{padding:3px 6px}
.mini-inquiry-context{color:#c9a875;font-size:12px;line-height:18px;margin-bottom:20px;text-transform:uppercase}
.mini-inquiry-context a{text-decoration:underline}
.mini-inquiry-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.input-fields-form.is-sent>.input-fields-intro,.input-fields-form.is-sent>.input-fields-stack,.input-fields-form.is-sent>.input-fields-actions{display:none}
.input-fields-status{white-space:pre-line}

/* Independent image gestures; inquiry remains a separate normal-flow button below captions. */
.mobile img.artwork-image{cursor:pointer;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mobile .inquire{position:relative;min-height:44px;touch-action:manipulation}
.artwork-image[role="button"]:focus-visible{box-shadow:0 0 0 6px var(--background),0 0 0 7px var(--gold)}

/* Standalone /art/ intro only. Social geometry/variants mirror the website menu. */
.mini-social-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px;margin-top:43px;width:100%}
.mini-social-link{position:relative;display:block;flex:none;width:22px;height:22px;color:#fff;text-decoration:none}
.mini-social-link::before,.mini-social-link::after{display:none!important;content:none!important}
.mini-social-link:focus-visible{outline:1px solid var(--gold);outline-offset:8px}
.mini-social-icon{display:block;width:100%;height:100%;transition:opacity .2s ease-out}
.mini-social-row .mini-social-icon--hover{position:absolute;inset:0;opacity:0}
.mini-social-link.has-hover-icon:hover .mini-social-icon--default,.mini-social-link.has-hover-icon:focus-visible .mini-social-icon--default{opacity:0}
.mini-social-link.has-hover-icon:hover .mini-social-icon--hover,.mini-social-link.has-hover-icon:focus-visible .mini-social-icon--hover{opacity:1}
.mobile .mini-social-row{gap:70px;width:max-content;max-width:calc(100vw - 60px)}


/* Inside the decoded slider image only; no layout space or image opacity change. */
.slider-scene img.artwork-image[data-loaded="true"]{outline:0.5px solid rgba(201,168,117,0.3);outline-offset:-0.5px}


/* Native fluid sizing stays inside the viewport even while row grouping is deferred. */
.desktop .thumbnails-grid{width:100%;max-width:100%;min-width:0}
.desktop .thumbnail-row{width:var(--row-natural-width,100%);max-width:100%;min-width:0;align-items:flex-start;flex-wrap:wrap}
.desktop .thumbnails-scene{justify-content:safe center}
.desktop .thumbnail{flex:var(--thumbnail-grow,1) 1 0px;min-width:1px;max-width:var(--thumbnail-natural-width,100%);height:auto;transition:none}
.desktop .thumbnail>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.desktop .thumbnail .mini-media-error{position:absolute;inset:0;min-width:0;min-height:0}


/* A row-count change must not alter the available width through scrollbar toggling. */
html.mini-desktop-grid{scrollbar-gutter:stable}

/* Inset thumbnail outline stays above images/hover tint and fades with each thumbnail. */
.thumbnails-grid .thumbnail::before{content:"";position:absolute;inset:0;outline:0.5px solid rgba(201,168,117,0.3);outline-offset:-0.5px;pointer-events:none;z-index:1}

/* Desktop pages keep a firm 850px floor; the breakpoint uses browser height. */
.desktop .scene,.desktop .intro-copy{min-height:max(850px,100svh)}
.desktop .slider-scene{min-height:max(850px,var(--gallery-page-height,850px))}
.desktop .portfolio-name{font-size:40px;line-height:33px;transform-origin:left top}
@media(max-height:850px){.desktop .portfolio-name{font-size:28px;line-height:24px}}