.exhibition{--gutter:clamp(22px,4vw,70px)}body{overflow-x:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible,#gallery:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{cursor:pointer}button:disabled{opacity:.25;cursor:default}.exhibition{max-width:1800px;margin:auto;min-height:calc(100svh - var(--nav-height));padding:26px var(--gutter) 14px;display:flex;flex-direction:column}.exhibition-top{display:flex;justify-content:space-between;align-items:center}.exhibition-top p{font-size:10px;letter-spacing:.13em;margin:0}.exhibition-top p span{color:var(--muted)}#open-index,#close-index{background:none;border:0;color:var(--ink);padding:9px 0;font-size:12px}#open-index span{margin-left:18px;font-size:20px}.category-tabs{display:flex;gap:25px;margin-top:15px;position:relative;z-index:3}.category-tabs button{border:0;border-bottom:1px solid transparent;background:none;color:var(--muted);font-size:12px;padding:8px 0;transition:color .2s}.category-tabs button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.category-tabs sup{margin-left:4px;font-size:9px}.gallery{position:relative;flex:1;min-height:370px;height:clamp(370px,49vh,620px);margin:0 calc(-1 * var(--gutter));isolation:isolate;overflow:hidden;touch-action:pan-y pinch-zoom;outline-offset:-8px!important;perspective:1500px}.ambient{position:absolute;inset:5% 17%;background:radial-gradient(ellipse,var(--accent-soft),transparent 68%);opacity:.85;pointer-events:none}.gallery-watermark{position:absolute;left:var(--gutter);bottom:12%;font-family:var(--display);font-size:clamp(38px,8.5vw,140px);font-weight:500;letter-spacing:-.065em;color:var(--ink);opacity:.055;z-index:-1;pointer-events:none;white-space:nowrap}.plinth-shadow{position:absolute;bottom:1%;left:35%;width:33%;height:25px;border-radius:50%;background:var(--ink);filter:blur(23px);opacity:.14;pointer-events:none}.acrylic-panel{--x:0px;--y:0px;--angle:0deg;--scale:1;position:absolute;left:50%;top:45%;width:clamp(300px,42vw,660px);aspect-ratio:1.46;transform:translate(-50%,-50%) translate3d(var(--x),var(--y),0) rotateY(var(--angle)) rotateX(8deg) rotateZ(-5deg) scale(var(--scale));transform-style:preserve-3d;transition:transform .85s cubic-bezier(.22,.8,.22,1),opacity .6s,filter .6s;will-change:transform;cursor:pointer;border:0;padding:0;background:none;color:var(--ink);text-align:left}.acrylic-panel[data-active=true]{z-index:3}.panel-back{position:absolute;inset:0;border-radius:6px;transform:translateZ(-12px) translate(7px,6px);background:linear-gradient(120deg,#fff9,var(--accent-soft) 35%,#82918e77 70%,#fff);border:1px solid #fff;box-shadow:6px 9px 3px #56656033,15px 26px 34px #28363215}.panel-front{position:absolute;inset:0;border:1px solid #fff;border-radius:5px;padding:17px;display:flex;flex-direction:column;background:linear-gradient(145deg,#ffffff88,#ffffff18 40%,#ffffff55);box-shadow:inset 1px 2px 1px #fff,inset -2px -2px 2px #78908955;overflow:hidden}.panel-front:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 24%,#ffffff38 25%,#ffffff09 42%,transparent 43%,transparent 68%,#ffffff33 69%,transparent 80%);mix-blend-mode:screen}.panel-image{width:100%;height:calc(100% - 38px);flex:1;min-height:0;object-fit:contain;background:#151e1c;box-shadow:0 0 0 1px #ffffff77;pointer-events:none}.panel-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:9px;letter-spacing:.09em;padding:14px 1px 0}.panel-caption span:last-child{white-space:nowrap}.panel-caption span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acrylic-panel:hover .panel-back{box-shadow:6px 9px 3px #56656033,18px 29px 40px #28363224}.project-information{display:grid;grid-template-columns:85px minmax(0,1fr) minmax(140px,220px) 160px;gap:30px;align-items:center;border-top:1px solid var(--line);padding:25px 0 29px;min-height:135px}.project-number{display:flex;align-items:center;gap:10px;font-size:11px;font-variant-numeric:tabular-nums}.project-number span:first-child{color:var(--accent)}.project-number span:last-child{color:var(--muted)}.number-rule{width:25px;height:1px;background:var(--line)}.project-heading>p{font-size:10px;letter-spacing:.09em;color:var(--accent);margin:0 0 10px}.project-heading h1{font-family:var(--display);font-size:clamp(23px,2.6vw,40px);letter-spacing:-.045em;line-height:1.16;font-weight:500;margin:0;max-width:700px}.project-client>span{font-size:9px;letter-spacing:.12em;color:var(--muted)}.project-client p{font-size:12px;line-height:1.5;margin:9px 0 0}.view-project{display:flex;align-items:center;justify-content:space-between;font-size:12px;border-bottom:1px solid var(--accent);padding:14px 0;color:var(--accent)}.view-project span{font-size:25px}.exhibition-bottom{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;color:var(--muted)}.exhibition-bottom p{display:flex;gap:12px;align-items:center;margin:0}.hint-line{width:28px;height:1px;background:var(--line)}.transport{display:flex;gap:20px;align-items:center}.transport button{width:35px;height:32px;background:none;border:0;color:var(--ink);font-size:23px}.transport button:hover:enabled{color:var(--accent)}#progress{display:flex;gap:3px;height:18px;align-items:center}#progress i{display:block;height:6px;width:2px;background:var(--line);transition:height .3s,background .3s}#progress i.active{height:18px;background:var(--accent)}.edition{font-size:8px;letter-spacing:.1em}.mobile-hint{display:none}.preview-note{text-align:center;color:var(--muted);font-size:9px;margin:20px 0 12px;letter-spacing:.08em}#index-dialog{padding:35px;width:min(1000px,92vw);max-height:85svh;background:var(--paper);color:var(--ink);border:1px solid var(--line)}#index-dialog::backdrop{background:#15221c66;backdrop-filter:blur(10px)}.index-header{display:flex;justify-content:space-between;align-items:center;gap:20px}.index-header p{font-size:9px;letter-spacing:.12em;color:var(--accent)}.index-header h2{font-size:40px;margin:5px 0 25px}.index-search{display:flex;align-items:center;gap:25px;font-size:12px;padding:0 0 20px}.index-search input{flex:1;min-width:0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;padding:12px 0;border-radius:0}.index-row{width:100%;display:grid;grid-template-columns:30px 65px 1fr 100px 20px;align-items:center;gap:18px;padding:14px 0;text-align:left;border:0;border-top:1px solid var(--line);background:none;color:var(--ink)}.index-row:hover{color:var(--accent);background:var(--accent-soft)}.index-row img{width:65px;height:45px;object-fit:cover}.index-row strong{font-size:14px;font-weight:500}.index-row small{font-size:10px;color:var(--muted)}.index-row>span{font-size:10px}#empty-index{padding:30px 0;color:var(--muted)}
@media(min-width:1600px){.gallery{min-height:540px}}@media(max-width:900px){.project-information{grid-template-columns:60px 1fr 135px;gap:20px}.project-client{display:none}.edition{display:none}}
@media(max-width:600px){.exhibition{min-height:calc(100svh - var(--nav-height));padding-top:15px}.exhibition-top p{font-size:8px}.exhibition-top p span{display:none}.category-tabs{gap:22px;margin-top:10px;justify-content:space-between}.category-tabs button{font-size:10px}.gallery{min-height:295px;height:38svh;max-height:420px}.acrylic-panel{width:78vw;max-width:420px;top:48%;aspect-ratio:1.4}.panel-front{padding:11px}.panel-caption{font-size:7px;padding-top:10px}.gallery-watermark{font-size:55px;bottom:10%}.project-information{grid-template-columns:1fr 130px;gap:16px;padding:20px 0;min-height:145px}.project-heading{grid-column:1/-1;grid-row:1}.project-heading h1{font-size:26px;max-width:none}.project-heading>p{font-size:9px}.project-number{grid-row:2}.view-project{grid-row:2;font-size:11px;padding:4px 0}.exhibition-bottom{flex-wrap:wrap;padding-top:10px;gap:15px;font-size:9px}.transport{gap:9px}.transport button{width:26px}.exhibition-bottom p{gap:7px}.hint-line{width:12px}.desktop-hint{display:none}.mobile-hint{display:inline}.preview-note{margin-top:24px}#index-dialog{padding:20px}.index-row{grid-template-columns:20px 50px 1fr 12px;gap:10px}.index-row img{width:50px;height:40px}.index-row strong{font-size:12px}.index-row small{display:none}.index-header h2{font-size:32px}.index-search{display:block}.index-search input{width:100%;display:block}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* This standalone study supplies its own navigation spacing. */
.gallery{min-height:320px;height:calc(100svh - 380px)}.acrylic-panel{top:50%;width:min(42vw,64vh,660px)}
@media(max-width:600px){.gallery{min-height:290px;height:36svh}.acrylic-panel{width:78vw;top:48%}}
.project-heading{min-width:0}.project-heading h1{white-space:normal;overflow-wrap:anywhere;text-wrap:balance}
/* Larger artwork and direct manipulation. */
.exhibition{padding-top:14px}.category-tabs{margin-top:5px}.gallery{height:calc(100svh - 330px);min-height:420px;cursor:grab}.acrylic-panel,.acrylic-panel:active{width:min(58vw,88vh,950px);aspect-ratio:1.65;transform:translate(-50%,-50%) translate3d(calc(var(--x) + var(--drag,0px)),var(--y),0) rotateY(var(--angle)) rotateX(6deg) rotateZ(-3deg) scale(var(--scale));cursor:grab;user-select:none}.panel-object{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:translateY(var(--lift,0px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .28s ease-out}.panel-front:after{background:radial-gradient(ellipse at var(--shine,35%) 15%,#fff5,transparent 65%),linear-gradient(115deg,transparent 24%,#ffffff24 25%,#ffffff09 42%,transparent 43%,transparent 68%,#ffffff25 69%,transparent 80%)}.is-dragging,.is-dragging .acrylic-panel{cursor:grabbing}.is-dragging .acrylic-panel{transition:none}.project-information{padding-top:18px;padding-bottom:18px;min-height:115px}.plinth-shadow{left:24%;width:53%;bottom:4%}.gallery-watermark{opacity:.035}.acrylic-panel[data-active=true]:hover .panel-back{box-shadow:6px 9px 3px #56656044,24px 40px 45px #28363230}
@media(max-width:600px){.gallery{min-height:290px;height:37svh}.acrylic-panel{width:91vw;max-width:none;aspect-ratio:1.4}.exhibition{padding-top:12px}.project-information{padding:18px 0}.category-tabs{gap:16px}.exhibition-bottom p{font-size:8px}}

/* Keep neighbours in view and never replace the positioned transform on press. */
.acrylic-panel:active{transform:translate(-50%,-50%) translate3d(calc(var(--x) + var(--drag,0px)),var(--y),0) rotateY(var(--angle)) rotateX(6deg) rotateZ(-3deg) scale(var(--scale))}
.exhibition-top,.category-tabs,.project-information,.exhibition-bottom,.exhibit-nav,.preview-note{transition:opacity .3s ease,filter .4s ease}
.is-leaving .exhibition-top,.is-leaving .category-tabs,.is-leaving .project-information,.is-leaving .exhibition-bottom,.is-leaving .exhibit-nav,.is-leaving .preview-note{opacity:0;pointer-events:none}
.is-leaving .gallery{pointer-events:none}.is-leaving .panel-object{transform:none;opacity:1;transition:transform .25s ease}
.is-leaving .gallery-watermark,.is-leaving .plinth-shadow{opacity:0;transition:opacity .25s}
@media(max-width:600px){.acrylic-panel,.acrylic-panel:active{width:84vw}}

/* Gather the collection behind the selected project, then leave as one stack. */
.is-leaving .acrylic-panel,.is-leaving .acrylic-panel:active{transform:translate(-50%,-50%) translate3d(var(--stack-offset,0px),0,0) rotateY(-18deg) rotateX(6deg) rotateZ(-3deg) scale(var(--stack-scale,1));transition:transform .7s cubic-bezier(.65,0,.25,1),filter .5s;filter:none!important}
.is-leaving .acrylic-panel[data-active=true]{z-index:5;transform:translate(-50%,-50%) rotateY(-18deg) rotateX(6deg) rotateZ(-3deg) scale(1)}
.is-leaving #panels{animation:stack-depart .26s .86s ease-in both}
@keyframes stack-depart{from{opacity:1}to{opacity:0}}

/* Continuous rail: JS interpolates position, so a new grab never waits for CSS transitions. */
.acrylic-panel{transition:opacity .2s;filter:none!important}

.portfolio-social{display:flex;justify-content:space-between;padding:20px var(--gutter);font-size:10px;color:var(--muted)}

/* One entrance per visit; API updates and category changes do not replay it. */
#panels{position:absolute;inset:0;transform-origin:50% 50%}
@keyframes portfolio-arrive{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes portfolio-copy-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
 .gallery.is-arriving #panels{animation:portfolio-arrive .8s cubic-bezier(.2,.7,.2,1) both}
 .exhibition-top,.category-tabs{animation:portfolio-copy-arrive .45s both}
 .project-information,.exhibition-bottom{animation:portfolio-copy-arrive .6s .12s both}
 .is-leaving .gallery.is-arriving #panels{animation:stack-depart .26s .86s ease-in both}
 .is-leaving .exhibition-top,.is-leaving .category-tabs,.is-leaving .project-information,.is-leaving .exhibition-bottom{animation:none}
}

/* Overview study: every project shares the same stage before the rail opens. */
.overview-label{position:absolute;bottom:10px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;color:var(--accent);font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;pointer-events:none}
.gallery[data-stage="overview"] .overview-label{opacity:1;transform:none}
.gallery[data-stage="overview"] .plinth-shadow,.gallery[data-stage="overview"] .gallery-watermark{opacity:0}
.gallery[data-stage="overview"] .acrylic-panel,.gallery[data-stage="returning"] .acrylic-panel{pointer-events:none!important}
.exhibition:has(.gallery[data-stage="overview"]) .project-information{opacity:0;pointer-events:none}
.exhibition:has(.gallery[data-stage="returning"]) .project-information{pointer-events:none}
.exhibition:has(.gallery[data-stage="overview"]) .transport,.exhibition:has(.gallery[data-stage="returning"]) .transport{opacity:.25;pointer-events:none}
.gallery[data-stage="overview"] .panel-back{box-shadow:6px 9px 3px #56656022,15px 26px 34px #28363215}
@media(max-width:600px){.overview-label{font-size:8px;letter-spacing:.07em}}

.exhibition:has(.gallery[data-stage="overview"]) .project-information,.exhibition:has(.gallery[data-stage="returning"]) .project-information{animation:none}

/* Fill the artwork window; preserve the separate acrylic frame. */
.panel-image{object-fit:cover;object-position:center;background:transparent}

/* Curved exhibition wall: camera and cards share one perspective. */
#panels,.departing-collection{transform-style:preserve-3d;position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.departing-collection{pointer-events:none;z-index:0}
#panels{z-index:1}
.gallery[data-stage="overview"] .panel-front:after{opacity:.45}
.gallery[data-stage="overview"] .panel-back{box-shadow:5px 8px 2px #56656025,18px 24px 30px #28363222}
.gallery[data-stage="overview"] .ambient{opacity:1}
.overview-label{z-index:2}
@media(prefers-reduced-motion:reduce){#panels{will-change:auto}}

/* Kinetic ribbon: edge-on acrylic blades unfurl into an orbit of work. */
.gallery[data-stage="overview"] .panel-back{box-shadow:9px 12px 2px #56656033,22px 35px 35px #28363225}
.gallery[data-stage="overview"] .panel-front:after{opacity:.65}
.gallery[data-stage="overview"] .ambient{inset:15% 25%;background:radial-gradient(ellipse,var(--accent-soft),transparent 68%)}
.gallery[data-stage="overview"] .plinth-shadow{opacity:.08;bottom:6%}

/* Reveal the project name during the final unfolding; never replay the delayed copy entrance. */
.project-information{animation:none;transition:opacity .16s ease}

/* Centre the remaining browse controls after removing the side captions. */
.exhibition-bottom{justify-content:center}

/* Blend material and lighting changes across the overview/rail handoff. */
.panel-front:after{transition:opacity .35s ease}
.panel-back{transition:box-shadow .35s ease}
.ambient,.plinth-shadow,.gallery-watermark{transition:opacity .35s ease}

/* Tint the acrylic material and its captions with the shared site palette. */
.panel-front{border-color:color-mix(in srgb,var(--accent) 30%,white);background:linear-gradient(145deg,color-mix(in srgb,var(--accent-soft) 75%,white),color-mix(in srgb,var(--accent-soft) 35%,transparent) 45%,color-mix(in srgb,var(--accent-soft) 75%,white));box-shadow:inset 1px 2px 1px #fff,inset -2px -2px 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.panel-back{background:linear-gradient(120deg,#fff9,var(--accent-soft) 35%,color-mix(in srgb,var(--accent) 45%,transparent) 70%,#fff);border-color:var(--accent-soft)}
.panel-caption{color:var(--accent)}
.panel-front:after{background:radial-gradient(ellipse at var(--shine,35%) 15%,color-mix(in srgb,var(--accent-soft) 65%,transparent),transparent 65%),linear-gradient(115deg,transparent 24%,#ffffff24 25%,#ffffff09 42%,transparent 43%,transparent 68%,#ffffff25 69%,transparent 80%)}

/* Fit the exhibition below the unchanged shared navigation. No nested page scroll. */
html.portfolio-fit{height:100%;overflow:hidden;overscroll-behavior:none}
.portfolio-fit body{height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.portfolio-fit #main{min-height:0}
.portfolio-fit .exhibition{height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;padding-top:8px;padding-bottom:6px}
.portfolio-fit .gallery{height:auto;min-height:0;max-height:none;container-type:size;touch-action:pinch-zoom;overscroll-behavior:contain}
.portfolio-fit .acrylic-panel,.portfolio-fit .acrylic-panel:active{width:min(58vw,125cqh,950px);max-width:none;top:50%}
.portfolio-fit .project-information{min-height:0;padding:12px 0;gap:18px}
/* Reserve two title lines so switching projects does not resize the gallery. */
.portfolio-fit .project-heading h1{font-size:clamp(18px,2.2vw,32px);line-height:1.2;min-height:2.4em}
.portfolio-fit .project-heading>p{margin-bottom:6px}
.portfolio-fit .exhibition-bottom{padding-top:6px}
.portfolio-fit .portfolio-social{padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom));font-size:9px;align-items:center}
.portfolio-fit #index-dialog{overscroll-behavior:contain;overflow-y:auto}
@media(max-width:600px){
 .portfolio-fit .exhibition{padding-top:4px}
 .portfolio-fit .exhibition-top p{font-size:8px}
 .portfolio-fit .category-tabs{margin-top:0}
 .portfolio-fit .acrylic-panel,.portfolio-fit .acrylic-panel:active{width:min(84vw,110cqh)}
 .portfolio-fit .project-information{padding:9px 0;gap:7px 16px}
 .portfolio-fit .project-heading h1{font-size:clamp(16px,4.5vw,23px)}
 .portfolio-fit .project-heading>p{font-size:8px;margin-bottom:4px}
 .portfolio-fit .project-client{display:none}
 .portfolio-fit .view-project{padding:2px 0}
 .portfolio-fit .panel-front{padding:7px}
 .portfolio-fit .panel-caption{padding-top:6px;font-size:6px}
 .portfolio-fit .portfolio-social{font-size:8px;padding-top:4px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
}
@media(max-height:650px){
 .portfolio-fit .exhibition{padding-top:2px;padding-bottom:2px}
 .portfolio-fit .exhibition-top #open-index{padding:3px 0}
 .portfolio-fit .category-tabs{margin-top:0}
 .portfolio-fit .category-tabs button{padding:5px 0}
 .portfolio-fit .project-information{padding:6px 0}
 .portfolio-fit .project-heading h1{font-size:18px}
 .portfolio-fit .exhibition-bottom{padding-top:2px}
 .portfolio-fit .portfolio-social{padding-top:3px;padding-bottom:3px}
}
/* At extreme zoom/short landscape sizes, keep text accessible instead of clipping it. */
@media(max-height:420px){
 html.portfolio-fit{overflow-y:auto}
 .portfolio-fit body{height:auto;min-height:100dvh;overflow:visible}
 .portfolio-fit .gallery{min-height:140px}
}