@import url("./tokens.css");
:root {
  --gallery-width: 1600px;
  --page-gutter: var(--space-12);
  --masthead-height: 108px;
  --image-depth: 1400px;
  --preview-aspect: 1.92;
  --plane-width: min(calc(min(100vw, var(--gallery-width)) * .82), calc(max(240px, 100svh - var(--masthead-height) - var(--caption-height) - var(--space-12)) * var(--preview-aspect)));
  --plane-height: calc(var(--plane-width) / var(--preview-aspect));
  --caption-height: calc(var(--space-3) + var(--control-height));
  --plane-recession: translate3d(48%, -4%, -520px) rotateY(-18deg);
  --plane-recession-left: translate3d(-48%, -4%, -520px) rotateY(18deg);
  --image-shadow: 0 32px 80px #00000066;
}
body { min-height: 100svh; }
/* The title shares the front image's left edge. */
.masthead { position: relative; z-index: 2; display: flex; align-items: center; height: var(--masthead-height); width: min(100%, var(--gallery-width)); margin: 0 auto; padding: var(--space-8) max(var(--page-gutter), calc((min(100vw, var(--gallery-width)) - var(--plane-width)) / 2)); }
h1, h2 { font: 400 var(--text-brand)/1 var(--font-body); letter-spacing: -.04em; margin: 0; }
.masthead h1 { display: flex; align-items: center; gap: var(--space-3); }
.logo { width: var(--space-6); height: var(--space-6); flex: none; }
/* Full width, so neighbours recede to the window edges rather than a clipped column. */
.gallery { font-size: var(--text-body); position: relative; width: 100%; height: max(calc(var(--plane-height) + var(--caption-height) + var(--space-12)), calc(100svh - var(--masthead-height))); margin: 0 auto; overflow: hidden; perspective: var(--image-depth); perspective-origin: 50% calc((100% - var(--caption-height)) / 2); touch-action: pan-y pinch-zoom; user-select: none; }
/* JavaScript places the planes on one continuous ring; before it runs, neighbours recede to either side. */
.portal { display: block; position: absolute; width: var(--plane-width); left: calc((100% - var(--plane-width)) / 2); top: calc((100% - var(--plane-height) - var(--caption-height)) / 2); transform: var(--plane-recession); cursor: pointer; }
.gallery:not(.is-moving) .portal:not(.is-active):hover .portal-image, .gallery:not(.is-moving) .portal:not(.is-active):focus-visible .portal-image { filter: brightness(calc(var(--brightness, .45) + .1)); }
.portal:last-child { transform: var(--plane-recession-left); }
.portal.is-active { transform: translate3d(0,0,0); z-index: 1; }
.gallery.is-dragging .portal { cursor: grabbing; }
.portal-image { filter: brightness(var(--brightness, 1)); position: relative; background: var(--surface); height: var(--plane-height); overflow: hidden; box-shadow: var(--image-shadow); }
.portal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--motion-duration) var(--motion-ease); }
.portal-caption { display: flex; align-items: center; min-height: var(--control-height); margin-top: var(--space-3); visibility: hidden; }
.is-active .portal-caption { visibility: visible; }
.enter { display: inline-block; font: 400 var(--text-body) var(--font-body); letter-spacing: 0; margin-left: var(--space-3); transition: transform var(--motion-duration) var(--motion-ease); }
.gallery:not(.is-moving) .portal:hover .enter, .gallery:not(.is-moving) .portal:focus-visible .enter { transform: translate(var(--space-1), calc(-1 * var(--space-1))); }
.preview-status { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-muted); font-size: var(--text-body); }
@media (max-width: 900px) {
  :root { --masthead-height: 92px; --page-gutter: var(--space-6); }
}
@media (max-width: 600px) {
  :root { --plane-width: calc(100vw - var(--page-gutter) * 2); }
  .gallery { perspective-origin: 50% calc(var(--space-6) + var(--plane-height) / 2); }
  .portal { top: var(--space-6); }
}