:root {
  --content-max-width: calc(100vw - (2 * var(--page-margin)));
  --project-column-width: calc(
    (var(--content-max-width) - ((var(--grid-columns) - 1) * var(--grid-gap))) / var(--grid-columns)
  );
  --project-gallery-columns: 10;
  --project-gallery-width: calc(
    var(--project-gallery-columns) * var(--project-column-width)
    + (var(--project-gallery-columns) - 1) * var(--grid-gap)
  );
  --project-slide-width: clamp(
    240px,
    calc(
      var(--project-gallery-columns) * var(--project-column-width)
      + (var(--project-gallery-columns) - 1) * var(--grid-gap)
    ),
    var(--content-max-width)
  );

  /* new: computed by JS => bannerHeight + 12px */
  --snap-pad-top: 0px;
}

/* new: make the page the vertical snap container */
html {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--snap-pad-top, 0px);
}

.site-content__body {
  box-sizing: border-box;
  margin: 0 auto;
  width: min(100%, var(--content-max-width));
  max-width: var(--content-max-width);
  padding: 0 0 var(--grid-gap);
}
.project-single,
.content-area {
  width: 100%;
  max-width: 100%;
}

.project-single {
  scroll-snap-align: start;
  scroll-margin-top: var(--snap-offset, 0px);
}

.projects-gallery {
  position: fixed;
  top: var(--page-margin);
  left: calc(var(--page-margin) + var(--about-banner-width) + var(--grid-gap));
  width: var(--project-gallery-width);
  height: calc(100vh - (2 * var(--page-margin)));
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.projects-gallery.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.projects-gallery__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  cursor: inherit;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 520ms cubic-bezier(0.33, 1, 0.68, 1) 320ms,
    transform 520ms cubic-bezier(0.33, 1, 0.68, 1) 320ms;
}

.projects-gallery__stage.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.projects-gallery__stage:focus-visible {
  outline: none;
}

.projects-gallery__stage.is-empty {
  cursor: default;
  pointer-events: none;
}

.projects-gallery__canvas {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

.projects-gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
  min-height: 0;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition:
    transform 620ms cubic-bezier(0.72, 0.02, 0.36, 1),
    opacity 540ms cubic-bezier(0.6, 0.08, 0.68, 0.53) 70ms;
}

.projects-gallery__slide.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.projects-gallery__slide.from-right {
  transform: translate3d(110%, 0, 0);
}

.projects-gallery__slide.from-left {
  transform: translate3d(-110%, 0, 0);
}

.projects-gallery__slide.from-bottom {
  transform: translate3d(0, 110%, 0);
}

.projects-gallery__slide.from-top {
  transform: translate3d(0, -110%, 0);
}

.projects-gallery__slide.to-left {
  transform: translate3d(-110%, 0, 0);
  opacity: 0.2;
  transition-duration: 560ms;
  transition-timing-function: cubic-bezier(0.72, 0.02, 0.36, 1);
}

.projects-gallery__slide.to-right {
  transform: translate3d(110%, 0, 0);
  opacity: 0.2;
  transition-duration: 560ms;
  transition-timing-function: cubic-bezier(0.72, 0.02, 0.36, 1);
}

.projects-gallery__slide.to-top {
  transform: translate3d(0, -110%, 0);
  opacity: 0.2;
  transition-duration: 560ms;
  transition-timing-function: cubic-bezier(0.72, 0.02, 0.36, 1);
}

.projects-gallery__slide.to-bottom {
  transform: translate3d(0, 110%, 0);
  opacity: 0.2;
  transition-duration: 560ms;
  transition-timing-function: cubic-bezier(0.72, 0.02, 0.36, 1);
}

.projects-gallery__picture {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}

.projects-gallery__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: filter 220ms ease, transform 320ms ease;
}

.projects-gallery__image.blur-up {
  filter: blur(16px);
  transform: scale(1.02);
}

.projects-gallery__image.blur-up.lazyloaded {
  filter: blur(0);
  transform: scale(1);
}

.projects-gallery__caption {
  width: 100%;
  text-align: left;
  margin: var(--grid-gap) 0 0;
  font-size: 0.9em;
  line-height: 1.3;
  flex-shrink: 0;
}

.projects-gallery__hint,
.projects-gallery__error {
  font-size: 0.92em;
  line-height: 1.2;
  position: absolute;
  left: var(--grid-gap);
  top: var(--grid-gap);
  margin: 0;
  max-width: 75%;
  pointer-events: none;
  z-index: 1;
}

.projects-gallery__error {
  color: #c03434;
  top: calc(var(--grid-gap) * 2 + 1.5em);
}

.projects-gallery__title-wrapper {
  width: 100%;
  pointer-events: none;
}

.projects-gallery__title-line {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  pointer-events: none;
  margin-top: auto;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 520ms cubic-bezier(0.33, 1, 0.68, 1) 320ms,
    transform 520ms cubic-bezier(0.33, 1, 0.68, 1) 320ms;
}

.projects-gallery__title-line.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.projects-gallery__title-cell {
  grid-column: 2 / span 2;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 1.25em;
}

.projects-gallery__title {
  position: relative;
  display: block;
  font-size: var(--font-size-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: transform 520ms cubic-bezier(0.33, 1, 0.68, 1);
}

.projects-gallery__title.is-entering,
.projects-gallery__title.is-active,
.projects-gallery__title.is-leaving {
  opacity: 1;
}

.projects-gallery__title.is-active {
  transform: translate3d(0, 0, 0);
}

.projects-gallery__title.is-entering[data-direction="down"],
.projects-gallery__title.is-entering:not([data-direction]) {
  transform: translate3d(0, 120%, 0);
}

.projects-gallery__title.is-entering[data-direction="up"] {
  transform: translate3d(0, calc(-100% - 0.5em), 0);
}

.projects-gallery__title.is-entering[data-direction="next"] {
  transform: translate3d(16px, 0, 0);
}

.projects-gallery__title.is-entering[data-direction="prev"] {
  transform: translate3d(-16px, 0, 0);
}

.projects-gallery__title.is-leaving[data-direction="down"],
.projects-gallery__title.is-leaving:not([data-direction]) {
  transform: translate3d(0, -120%, 0);
}

.projects-gallery__title.is-leaving[data-direction="up"] {
  transform: translate3d(0, 120%, 0);
}

.projects-gallery__title.is-leaving[data-direction="next"] {
  transform: translate3d(-16px, 0, 0);
}

.projects-gallery__title.is-leaving[data-direction="prev"] {
  transform: translate3d(16px, 0, 0);
}

.projects-gallery__image-label {
  grid-column: 7 / span 1;
  align-self: end;
  font-size: var(--font-size-base);
  text-transform: none;
}

.projects-gallery__count {
  grid-column: -1 / span 1;
  justify-self: end;
  font-size: var(--font-size-base);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.projects-gallery__count-current {
  color: var(--highlight);
}

.projects-gallery__count-separator {
  line-height: 1;
}

@media (max-width: 720px) {
  .projects-gallery__image-label,
  .projects-gallery__count {
    display: none;
  }
}


.project-gallery {
  position: relative;
  width: 100%;
  margin: var(--grid-gap) 0 calc(var(--grid-gap) * 2);
  cursor: default;
}

.project-gallery__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  outline: none;
  cursor: inherit;
  scrollbar-width: none;
}

.project-gallery__track {
  display: flex;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
}

.project-gallery__item {
  --columns: 10;
  flex: 0 0 calc(var(--columns) * var(--project-column-width) + (var(--columns) - 1) * var(--grid-gap));
  max-width: calc(var(--columns) * var(--project-column-width) + (var(--columns) - 1) * var(--grid-gap));
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  align-items: flex-start;
}

.project-gallery__item picture {
  display: block;
  width: 100%;
  height: auto;
}

.project-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.project-gallery__item figcaption {
  margin: 0;
  font-size: 0.92em;
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .project-gallery__track { scroll-behavior: auto; }
  .projects-gallery__title {
    transition: none !important;
  }
}

.project-gallery[data-cursor="prev"],
.project-gallery[data-cursor="prev"] .project-gallery__viewport {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.7 5.3a1 1 0 0 1 0 1.4L10.41 11H20a1 1 0 1 1 0 2h-9.59l4.3 4.3a1 1 0 1 1-1.42 1.4l-6-6a1 1 0 0 1 0-1.4l6-6a1 1 0 0 1 1.41 0'/%3E%3C/svg%3E") 0 12, w-resize;
}

.project-gallery[data-cursor="next"],
.project-gallery[data-cursor="next"] .project-gallery__viewport {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 1 1-1.41-1.4L13.59 13H4a1 1 0 1 1 0-2h9.59L9.3 6.7a1 1 0 0 1 0-1.4'/%3E%3C/svg%3E") 24 12, e-resize;
}

.project-gallery--single,
.project-gallery--single .project-gallery__viewport {
  cursor: default;
}

.content-area__gallery {
  width: 100%;
}

.content-area__image {
  margin: 0 0 var(--grid-gap);
}

.content-area__image img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .projects-gallery__slide {
    transition: none;
  }
}

@media (max-width: 720px) {
  .projects-gallery {
    position: fixed;
    left: var(--page-margin);
    right: var(--page-margin);
    top: var(--gallery-mobile-top, var(--page-margin));
    width: auto;
    height: var(--gallery-mobile-height, 100dvh);
    min-height: 0;
    max-width: none;
    gap: var(--grid-gap);
    margin: 0;
  }

  .projects-gallery__title-wrapper {
    display: none;
  }

  .projects-gallery__hint,
  .projects-gallery__error {
    position: static;
    margin: var(--grid-gap) 0 0;
    max-width: 100%;
  }

  .projects-gallery__stage {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    height: 100%;
    max-height: none;
  }

  .projects-gallery__caption {
    font-size: 1em;
  }

  .projects-gallery__canvas {
    height: 100%;
    min-height: 0;
  }

  .projects-gallery__slide {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .projects-gallery__picture {
    align-items: center;
    justify-content: center;
  }

  .projects-gallery__image {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }
}