:root{--tile-duration:450ms;--tile-ease:cubic-bezier(.4,0,.6,1);--gallery-active:calc(50vw - 96px);--gallery-inactive:calc(var(--gallery-active)*.75);--cover-size:var(--gallery-active)}
.projects-page .project-focus{width:var(--gallery-active);height:calc(var(--gallery-active)*.625);top:calc(50% - var(--gallery-active)*.3125);left:calc(50% - var(--gallery-active)/2);color:var(--ink)}
.projects-page .project-focus::after{display:none}
.projects-page .projects-heading{position:fixed;left:calc(50% - var(--gallery-active)/2);width:var(--gallery-active);top:calc(50% - var(--gallery-active)*.3125 - 40px);margin:0;text-align:center;font:400 24px/1.2 Diatype,Arial,sans-serif;letter-spacing:0;color:var(--ink);background:none;-webkit-text-fill-color:currentColor}
.project-tile{position:absolute;top:0;left:0;width:100%;margin:0;transition:transform var(--tile-duration) var(--tile-ease);will-change:transform}
.tile-picture{width:100%;aspect-ratio:16/10;border-radius:3px;overflow:hidden;outline:1px solid var(--stroke);transform:scale(.75);transform-origin:50% 0;transition:transform var(--tile-duration) var(--tile-ease),outline-color var(--duration) var(--spring);will-change:transform;background:var(--paper)}
.tile-picture img{display:block;width:100%;height:100%;object-fit:cover}
.project-tile.is-current .tile-picture{transform:scale(1)}
.project-tile figcaption{position:absolute;top:0;left:8px;display:flex;align-items:baseline;gap:8px;white-space:nowrap;color:var(--ink);font:400 12px/1.3 Systemia,Arial,sans-serif;transition:transform var(--tile-duration) var(--tile-ease);will-change:transform}
.tile-name{font-family:Diatype,Arial,sans-serif}
.tile-tag{opacity:.33}
.project-position{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px}
.project-position button{display:flex;align-items:center;justify-content:center;width:12px;height:8px;transition:height var(--tile-duration) var(--tile-ease)}
.project-position button[aria-current=true]{height:40px}
.project-position span{display:block;width:4px;height:100%;background:var(--stroke);border-radius:3px}
.project-position button:focus-visible{outline-offset:3px}
.project-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Four cumulative 3px passes retain a progressive 0–6px edge blur.
   Each pass ends one quarter of the image span sooner. */
.project-edge-blur{position:fixed;left:0;right:0;height:100px;pointer-events:none;z-index:2}
.project-edge-blur.at-top{top:0}
.project-edge-blur.at-bottom{bottom:0}
.project-edge-blur span{position:absolute;inset:0;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);mask-image:linear-gradient(to bottom,#000 0 var(--solid),transparent var(--end));-webkit-mask-image:linear-gradient(to bottom,#000 0 var(--solid),transparent var(--end))}
.project-edge-blur.at-bottom span{mask-image:linear-gradient(to top,#000 0 var(--solid),transparent var(--end));-webkit-mask-image:linear-gradient(to top,#000 0 var(--solid),transparent var(--end))}
.info-open .project-edge-blur,.imprint-open .project-edge-blur{visibility:hidden}
.projects-page .studio-info{z-index:1}
@media(min-width:1800px){.projects-page .projects-heading{font-size:32px;top:calc(50% - var(--gallery-active)*.3125 - 48px)}.project-tile figcaption{font-size:16px}}
@media(max-width:900px){:root{--gallery-active:calc(100vw - 96px);--gallery-inactive:calc((100vw - 96px)*.75);--cover-size:var(--gallery-active)}.project-tile figcaption{gap:6px;font-size:11px}}

/* Keep the stationary heading above the animated tile layers. */
.projects-page .projects-heading{z-index:3;transition:transform var(--duration) var(--spring);pointer-events:none}

/* Only the current project's number and name carry full emphasis. */
.tile-number,.tile-name{opacity:.33;transition:opacity var(--tile-duration) var(--tile-ease)}
.project-tile.is-current .tile-number,.project-tile.is-current .tile-name{opacity:1}

.project-position{opacity:1;transition:opacity var(--duration) var(--spring),visibility 0s}
.info-open .project-position{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration) var(--spring),visibility 0s var(--duration)}

/* The esel3 export includes a baked-in white mat: 28px leading, 36px trailing.
   Map its inner 2560×1600 artwork exactly to the tile's 16:10 frame. */
.project-tile.has-export-mat .tile-picture{position:relative}
.project-tile.has-export-mat .tile-picture img{position:absolute;left:-1.09375%;top:-1.75%;width:102.5%;height:104%;object-fit:fill}

/* Keep corner controls fixed while the gallery scrolls beneath them. */
body.projects-page{overflow:auto}
.projects-page .project-scroll-space{width:1px;pointer-events:none}
.projects-page .bottom-corners{position:fixed;left:32px;right:32px;bottom:24px;width:auto;height:auto;padding:0}

/* Match home's half-viewport info column, independent of project tile width. */
.projects-page .studio-info{left:50vw;right:32px;padding-left:0}
@media(max-width:900px){.projects-page .studio-info{left:32px;right:32px;padding-left:0}}

/* Preserve the 32px outer inset and a full gutter before the shared text column. */
.info-open .projects-page .project-focus{transform:translateX(calc(-1 * var(--gallery-active) / 2 - 64px))}
@media(max-width:900px){.info-open .projects-page .project-focus{transform:translateX(calc(-100vw - 32px))}}

/* The edge treatment ends exactly where the visible neighboring tile ends. */
.tile-picture{display:block}
.project-edge-blur.at-top{height:var(--gallery-top-blur,0px)}
.project-edge-blur.at-bottom{height:var(--gallery-bottom-blur,0px)}

/* The parent home document supplies the fixed header when embedded. */
.embedded-projects .projects-page>.top-corners{visibility:hidden;pointer-events:none}

body.single-project-open{overflow:hidden}
.single-project-view-frame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:10;background:transparent}
.single-project-view-paper{position:fixed;inset:0;z-index:9;background:var(--paper);pointer-events:none;opacity:0}
.project-detail-moving{position:fixed;z-index:11;pointer-events:none;transform-origin:0 0;will-change:transform}

.project-position span{transition:background-color var(--duration) cubic-bezier(.4,0,.2,1)}

/* Info and Imprint share the right-hand column and the same side entrance. */
.projects-page .home-panels{position:absolute;left:calc(50vw - 96px);right:32px;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;pointer-events:none}
.home-panel-open .projects-page .home-panels{pointer-events:auto}
.projects-page .studio-info,.projects-page .studio-imprint{position:absolute;left:64px;right:0;top:var(--home-panel-center,50%);bottom:auto;width:auto;margin:0;max-height:none;overflow:visible;opacity:0;visibility:hidden;transform:translate(calc(50vw - var(--gallery-active)/2),calc(-50% + var(--home-info-y,0px)));transition:transform var(--duration) var(--spring),opacity var(--duration) var(--spring),visibility 0s var(--duration)}
.projects-page .studio-imprint{transform:translate(calc(50vw - var(--gallery-active)/2),calc(-50% + var(--home-imprint-y,0px)))}
.info-open .projects-page .studio-info{transform:translate(0,calc(-50% + var(--home-info-y,0px)));opacity:1;visibility:visible;transition-delay:0s}
.imprint-open .projects-page .studio-imprint{transform:translate(0,calc(-50% + var(--home-imprint-y,0px)));opacity:1;visibility:visible;transition-delay:0s}
.projects-page .imprint-copy{width:auto;margin:0;transform:none;max-height:none;overflow:visible}
.imprint-open:not(.info-open) .projects-page .studio-info{transform:translate(0,calc(-50% + var(--home-info-y,0px) - 32px))}
.info-open:not(.imprint-open) .projects-page .studio-imprint{transform:translate(0,calc(-50% + var(--home-imprint-y,0px) + 32px))}
.imprint-open .projects-page .home-stage,.imprint-open .projects-page .corners,.info-open.imprint-open .projects-page .corners{transform:none}
.home-panel-open .projects-page .project-focus{transform:translateX(calc(-1 * var(--gallery-active) / 2 - 64px))}
.home-panel-open .projects-page .project-position{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:900px){
 .projects-page .home-panels{left:-32px}
 .home-panel-open .projects-page .project-focus{transform:translateX(calc(-100vw - 32px))}
}

/* Only the selected tile carries a frame against the dark canvas. */
:root[data-theme=dark] .project-tile:not(.is-current) .tile-picture{outline-color:transparent}

/* Opening Info must not shift the fixed project footer's corner controls. */
.info-open .projects-page .bottom-corners{transform:none}

/* Render the heading outside the gallery stacking context, above both backdrop blurs. */
.home-panel-open .projects-page>.projects-heading{transform:translateX(calc(-1 * var(--gallery-active) / 2 - 64px))}
@media(max-width:900px){.home-panel-open .projects-page>.projects-heading{transform:translateX(calc(-100vw - 32px))}}

.embedded-projects .projects-page>.bottom-corners{visibility:hidden;pointer-events:none}

/* Clip backdrop sampling to the edge strip, including zero-height strips on Safari. */
.project-edge-blur{overflow:hidden;clip-path:inset(0)}

/* The embedding home document supplies the stationary information column. */
.embedded-projects .projects-page .home-panels{display:none}

@media(min-width:701px){
 .projects-page .home-panels .info-content{gap:var(--desktop-copy-gap,16px)}
 .projects-page .home-panels .large-copy,.projects-page .home-panels .contact a{font-size:var(--desktop-copy-size,24px)}
 .projects-page .home-panels .contact{margin-top:var(--desktop-contact-gap,24px);gap:var(--desktop-contact-label-gap,8px)}
}

@media(prefers-reduced-motion:reduce){:root{--tile-duration:0ms}}