@charset "UTF-8";
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("variable/InterVariable.woff2?v=4.1") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("variable/InterVariable-Italic.woff2?v=4.1") format("woff2");
}
/* Horizontal scrollbar – same look as modal (vertical) for consistency */
/*
0-600px:        phone
600-900px:      tablet-portrait
900-1200px:     tablet-landscape
1200-1800px:    desktop (normal code)
1800px + :      big-desktop
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.projects-html {
  font-size: 62.5%;
  box-sizing: border-box;
  /* 1920px / 16 */
}
@media (min-width: 120.01em) {
  .projects-html {
    font-size: 75%;
  }
}
@media (max-width: 37.5em) {
  .projects-html {
    /* 600px / 16 */
    font-size: 56.25%;
  }
}

.projects-body {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  background-color: black;
  color: rgb(162, 158, 146);
  font-family: "InterVariable", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.6rem;
  font-weight: 200;
  line-height: 1.8;
  font-synthesis: none; /* use Inter italic, not synthetic oblique */
}

.page-no-scrollbar {
  overflow-y: scroll;
  /* Chrome / Safari / Edge */
}
.page-no-scrollbar::-webkit-scrollbar {
  display: none;
}
.page-no-scrollbar {
  /* Firefox */
  scrollbar-width: none;
  /* IE/old Edge */
  -ms-overflow-style: none;
}

::selection {
  background-color: #b2b2b2;
  color: rgb(0, 0, 0);
}

::-moz-selection {
  background-color: #b2b2b2;
  color: rgb(0, 0, 0);
}

*:focus-visible {
  outline: 2px solid #b2b2b2;
  outline-offset: 2px;
  border-radius: 0.1rem;
}

.project-content {
  width: 100%;
  max-width: 120rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 8.5rem;
  overflow: hidden;
  padding: 7.5rem 5rem 5rem 5rem;
  /* 1200px / 16 */
}
@media (max-width: 75em) {
  .project-content {
    padding: 5.5rem 5rem 4rem 5rem;
  }
}
.project-content {
  /* 900px / 16 */
}
@media (max-width: 56.25em) {
  .project-content {
    padding: 6rem 4rem 3rem 4rem;
  }
}
@media (max-width: 37.5em) {
  .project-content {
    /* 600px / 16 */
    padding: 6rem 4rem 3rem 4rem;
  }
}
@media (max-width: 28.2em) {
  .project-content {
    /* 350px / 16 */
    padding: 6rem 3rem 3rem 3rem;
  }
}
.project-content {
  /* 1200px / 16 */
}
@media (max-width: 75em) {
  .project-content {
    gap: 7.5rem;
  }
}
.project-content {
  /* 900px / 16 */
}
@media (max-width: 56.25em) {
  .project-content {
    gap: 7rem;
  }
}
@media (max-width: 37.5em) {
  .project-content {
    /* 600px / 16 */
    gap: 6rem;
  }
}
@media (max-width: 28.2em) {
  .project-content {
    /* 350px / 16 */
    gap: 6rem;
  }
}
.project-content .project-name {
  margin-bottom: -5rem;
}
@media (max-width: 37.5em) {
  .project-content .project-name {
    /* 600px / 16 */
    margin-bottom: -3.5rem;
  }
}
@media (max-width: 28.2em) {
  .project-content .project-name {
    /* 350px / 16 */
    margin-bottom: -3.5rem;
  }
}
.project-content .project-name-title {
  text-transform: uppercase;
  font-size: 2rem;
  font-style: italic;
  font-weight: 500;
}
.project-content .project-name-description {
  font-size: 1.4rem;
  color: rgb(93, 93, 93);
}
.project-content .project-name-description .project-name-span-italic {
  font-style: italic;
}
.project-content .project-cover-image {
  width: 100%;
}
.project-content .move-up {
  margin-top: -2rem;
}
.project-content .project-description {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.4rem;
}
.project-content .project-description .project-name-span {
  font-style: italic;
  text-transform: uppercase;
}
.project-content .project-description .project-name-span-italic {
  font-style: italic;
}
.project-content .project-description .notes {
  font-style: italic;
  color: rgb(93, 93, 93);
}
.project-content .project-description .bold {
  font-weight: 500;
}
.project-content .project-description a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}
.project-content .project-description a:hover {
  color: rgb(105, 105, 105);
  letter-spacing: 0.5px;
}
.project-content .image-scroll {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}
.project-content .image-scroll .scroll-images {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  cursor: grab;
  /* Allow vertical page scroll and pinch-zoom; we handle horizontal drag in JS */
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  /* Prevent tap highlight and pull-to-refresh interference on touch */
  -webkit-tap-highlight-color: transparent;
}
.project-content .image-scroll .scroll-images.active {
  cursor: grabbing;
  scroll-behavior: auto;
  /* Take full control of touch during drag so the browser doesn’t intercept */
  touch-action: none;
}
.project-content .image-scroll .scroll-images:has(> .scroll-image:only-child) {
  cursor: default;
}
.project-content .image-scroll .scroll-images:has(> .scroll-image:only-child).active {
  cursor: default;
}
.project-content .image-scroll .scroll-images {
  /* Reserve space so scrollbar doesn't overlap image (iOS/Android) */
  padding-bottom: 1rem;
  /* Chrome, Edge, Safari – horizontal bar uses height */
}
.project-content .image-scroll .scroll-images::-webkit-scrollbar {
  height: 8px;
}
.project-content .image-scroll .scroll-images::-webkit-scrollbar-track {
  background: transparent;
}
.project-content .image-scroll .scroll-images::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.5);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.project-content .image-scroll .scroll-images::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 100, 100, 0.8);
}
.project-content .image-scroll .scroll-images {
  /* Firefox */
}
.project-content .image-scroll .scroll-images {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 100, 100, 0.5) transparent;
}
.project-content .image-scroll .scroll-images {
  color-scheme: dark;
}
.project-content .image-scroll .scroll-images {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
}
.project-content .image-scroll .scroll-images img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.project-content .image-scroll .scroll-images .scroll-image {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.project-content .image-scroll-description {
  font-size: 1.2rem;
  color: rgb(93, 93, 93);
}
.project-content .image-scroll-description-title {
  text-transform: uppercase;
  font-style: italic;
}
.project-content .image-scroll-description-title-capitalize {
  text-transform: capitalize;
  font-style: italic;
}
.project-content .image-scroll-description .exhibition_name {
  font-style: italic;
}
.project-content .vimeo-video {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.project-content .vimeo-video .vimeo-video-embed {
  width: 100%;
  display: block;
  position: relative;
}
.project-content .vimeo-video .vimeo-video-description {
  font-size: 1.2rem;
  color: rgb(93, 93, 93);
}
.project-content .vimeo-video .vimeo-video-description-work-title {
  text-transform: uppercase;
  font-style: italic;
}
.project-content .vimeo-video .vimeo-video-description-context {
  font-style: italic;
}
.project-content .vimeo-video-work {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.project-content .vimeo-video-work-embed {
  width: 100%;
  display: block;
  position: relative;
}
.project-content .vimeo-video-work-embed-standard {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  display: block;
}
.project-content .vimeo-video-work-embed-standard iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
}
.project-content .vimeo-video-work-embed-vertical {
  width: 31.640625%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 9/16;
  position: relative;
  display: block;
}
.project-content .vimeo-video-work-embed-vertical iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
}
.project-content .vimeo-video-work-embed-square {
  width: 56.25%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 1/1;
  position: relative;
  display: block;
}
.project-content .vimeo-video-work-embed-square iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
}
.project-content .vimeo-video-work-embed-wide {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 3/1;
  position: relative;
  display: block;
  padding-top: 11.46%;
  padding-bottom: 11.46%;
  box-sizing: content-box;
}
.project-content .vimeo-video-work-embed-wide iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
}
.project-content .vimeo-video-work-details {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.project-content .vimeo-video-work-details-margin-top-up {
  margin-top: -0.5rem;
}
.project-content .vimeo-video-work-details-info-name {
  font-weight: 400;
}
.project-content .vimeo-video-work-details-info-name-title {
  text-transform: uppercase;
  font-style: italic;
}
.project-content .vimeo-video-work-details-info-name-subtitle {
  font-style: italic;
}
.project-content .vimeo-video-work-details-info-medium {
  font-size: 1.2rem;
  color: rgb(93, 93, 93);
}
.project-content .vimeo-video-work-details-info-editions {
  font-size: 1.2rem;
  color: rgb(93, 93, 93);
}
.project-content .vimeo-video-work-details-info-link {
  display: block;
  font-size: 1.2rem;
  font-style: italic;
  color: rgb(93, 93, 93);
  text-decoration: none;
  transition: all 0.3s;
}
.project-content .vimeo-video-work-details-info-link:hover {
  color: rgb(105, 105, 105);
  letter-spacing: 0.5px;
}
.project-content .vimeo-video-work-details-description {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.4rem;
  color: rgb(162, 158, 146);
}
.project-content .vimeo-video-work-details-description-work-title {
  text-transform: uppercase;
  font-style: italic;
}
.project-content .vimeo-video-work-details-description-italic {
  font-style: italic;
}
.project-content .copyright {
  font-size: 1.2rem;
  color: rgb(35, 35, 35);
}

/*# sourceMappingURL=projects.css.map */