:root {
  --project-gap: 5px;
  --project-media-height: 500px;
  --project-track-height: 500px;
  --project-text-shadow:
    0 0 1px #fff,
    0 0 3px #fff,
    0 0 6px #fff,
    0 0 14px rgba(255, 255, 255, 0.98);
}

/* Page */
body.projects-page {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  background: transparent;
  color: #000;
  font-family: "Helvetica Neue", "helvetica-neue-lt-pro", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
}

html:has(body.projects-page) {
  background: transparent;
}

body.projects-page #aleph-stage {
  background-color: #fff;
}

body.projects-page #content-scroll {
  background: transparent;
  color: #000;
}

body.projects-page #content-scroll,
body.projects-page #content-scroll * {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  font: inherit;
  font-family: "Helvetica Neue", "helvetica-neue-lt-pro", Helvetica, sans-serif !important;
  font-weight: 500;
  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 12px #fff !important;
  text-shadow: var(--project-text-shadow) !important;
}

body.projects-page ::selection {
  color: #f00;
  background: transparent;
}

body.projects-page ::-moz-selection {
  color: #f00;
  background: transparent;
}

html:has(body.projects-page) {
  background: #fff;
}

/* Navigation */
body.has-canvas #content-scroll .projects-navigation,
body.projects-page .projects-navigation {
  display: contents;
}

body.projects-page .projects-navigation > .site-name,
body.projects-page .projects-navigation > .page-link {
  position: fixed;
  top: var(--project-gap);
  z-index: 11;
}

body.projects-page .projects-navigation > .site-name {
  left: var(--project-gap);
}

body.projects-page .projects-navigation > .page-link {
  right: var(--project-gap);
}

/* The site name is a route link on both desktop and mobile. Keep its hover
   and keyboard-focus state consistent with the other navigation link. */
body.projects-page .projects-navigation > .site-name:hover,
body.projects-page .projects-navigation > .site-name:focus-visible,
html[data-aleph-background] body.projects-page
  .projects-navigation > .site-name:hover,
html[data-aleph-background] body.projects-page
  .projects-navigation > .site-name:focus-visible {
  color: #f00 !important;
  -webkit-text-fill-color: #f00 !important;
  mix-blend-mode: normal !important;
}

body.projects-page #content-scroll .projects-navigation-filters .btn,
body.projects-page #content-scroll .projects-navigation-filters .btn.active {
  display: block;
  height: 16px;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 16px;
  white-space: nowrap;
  min-width: max-content;
}

body.projects-page .projects-navigation-filters {
  display: none;
}

body.projects-page #content-scroll .projects-navigation .btn,
body.projects-page #content-scroll .projects-navigation .btn.inactive {
  color: #000 !important;
}

body.projects-page #content-scroll .projects-navigation .btn:hover,
body.projects-page #content-scroll .projects-navigation .btn.active {
  color: #555 !important;
}

/* Project rows */
#projects-list {
  /* With every project closed, let the first cover meet the top edge. */
  padding-top: 0;
}

#projects-list.has-open-project {
  /* An expanded project begins below the fixed navigation. */
  padding-top: calc(16px + var(--project-gap));
}

.project-row {
  display: block;
  width: 100%;
  margin-top: var(--project-gap);
}

.project-row:first-child {
  margin-top: 0;
}

.project-row[hidden],
.project-details[hidden] {
  display: none;
}

/* Media tracks */
.project-cover {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  height: var(--project-track-height);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #eee;
  cursor: pointer;
}

.project-cover img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
}

.project-cover img {
  position: relative;
  z-index: 1;
}

.project-cover::before,
.project-media-image::before,
.project-media-video::before {
  position: absolute;
  inset: 0;
  content: "";
  background: #eee var(--project-placeholder, none) center / contain no-repeat;
  image-rendering: pixelated;
  transform: scale(1.01);
}

.project-cover.media-loaded::before,
.project-media-image.media-loaded::before,
.project-media-video.media-loaded::before {
  display: none;
}

.project-row.project-gallery-open > .project-cover,
.project-track[hidden] {
  display: none;
}

.project-row.project-open > .project-cover {
  margin-right: 0;
  margin-left: 0;
}

.project-track {
  display: flex;
  width: 100%;
  height: var(--project-track-height);
  margin-left: 0;
  padding-inline: 0;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  cursor: pointer;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Compensate for #content-scroll's 5px padding so media reach both viewport
   edges with no artificial first/last-item inset. */
.project-row.project-gallery-open .project-track {
  width: calc(100% + 10px);
  margin-left: -5px;
}

.project-track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.project-track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.project-info-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0;
  transition: none !important;
  animation: none !important;
  filter:
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 6px #fff)
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.98));
  will-change: transform, opacity;
}

.project-info-cursor.is-visible {
  opacity: 1;
}

html[data-aleph-background="off"] .project-info-cursor {
  filter: invert(1);
  mix-blend-mode: difference;
}

html[data-aleph-background] body.projects-page #content-scroll .project-details a:hover,
html[data-aleph-background] body.projects-page #content-scroll .project-details a:focus-visible {
  color: #f00 !important;
  -webkit-text-fill-color: #f00 !important;
  mix-blend-mode: normal !important;
}

@media (pointer: fine) {
  body.projects-page #content-scroll a,
  body.projects-page #content-scroll button,
  body.projects-page #content-scroll .btn,
  body.projects-page #content-scroll .video-unmute {
    cursor: pointer;
  }

  .project-track,
  .project-track *,
  .project-row > .project-cover,
  .project-row > .project-cover * {
    cursor: pointer !important;
  }
}

@media (pointer: coarse) {
  .project-info-cursor {
    display: none;
  }
}

.project-track > .project-cover {
  flex: 0 0 auto;
  max-width: none;
  height: 100%;
  margin: 0;
}

/* Every item is assigned an explicit device-pixel-aligned width by
   projects.js. Keep the image inside that same box instead of allowing the
   replaced element to recalculate a second, fractional width. */
.project-track > .project-cover img,
.project-track > .project-media-image img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-media {
  display: block;
  flex: 0 0 auto;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
}

.project-media-cover-video {
  width: auto;
  height: 100%;
  margin-left: 0;
  overflow: hidden;
  background: #eee;
}

/* Open galleries always begin at the left edge. A single-image project keeps
   its closed cover, which remains centered by .project-cover. */
.project-row.project-gallery-open .project-media-cover-video {
  margin-left: 0;
}

.project-media-image {
  position: relative;
  overflow: hidden;
  background: #eee;
  cursor: pointer;
}

.project-media-image.project-media-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-media-video {
  position: relative;
  width: auto;
  overflow: hidden;
  background: #eee;
}

.project-media img,
.project-media video {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.project-media-video video {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
}

.project-media-video.media-loaded video {
  opacity: 1;
}

.project-media-cover-video video {
  width: 100%;
  height: 100%;
}

.project-cover img,
.project-media img,
.project-media video {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

html[data-aleph-background] body.projects-page.has-canvas #content-scroll
  :is(.video-unmute-btn, .video-long-btn) {
  pointer-events: auto;
  cursor: pointer;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  mix-blend-mode: difference !important;
  text-shadow: none !important;
}

/* The long-video trigger must retain the same difference treatment even
   before the canvas state has been established. */
body.projects-page #content-scroll .video-long-btn {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  mix-blend-mode: difference !important;
  text-shadow: none !important;
}

html[data-aleph-background="on"] body.projects-page.has-canvas #content-scroll
  :is(.video-unmute-btn, .video-long-btn) {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  mix-blend-mode: normal !important;
  text-shadow: var(--project-text-shadow) !important;
}

html[data-aleph-background="off"] body.projects-page.has-canvas #content-scroll
  :is(.video-unmute-btn, .video-long-btn) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  mix-blend-mode: difference !important;
  text-shadow: none !important;
}

html[data-aleph-background] body.projects-page.has-canvas #content-scroll
  :is(.video-unmute-btn, .video-long-btn):hover,
html[data-aleph-background] body.projects-page.has-canvas #content-scroll
  :is(.video-unmute-btn, .video-long-btn):focus-visible {
  color: #f00 !important;
  -webkit-text-fill-color: #f00 !important;
  mix-blend-mode: normal !important;
}

body.projects-page #content-scroll .video-long-btn:hover,
body.projects-page #content-scroll .video-long-btn:focus-visible {
  color: #f00 !important;
  -webkit-text-fill-color: #f00 !important;
  mix-blend-mode: normal !important;
}

@media (pointer: coarse) {
  .video-unmute-btn::after,
  .video-long-btn::after {
    position: absolute;
    inset: -12px;
    content: "";
  }
}

/* Project details */
.project-details {
  padding: var(--project-gap) var(--project-gap) 0;
  text-align: center;
}

.project-details p {
  margin: 0;
  white-space: normal !important;
}

.project-title {
  font: inherit;
}

.project-date,
.project-dimensions,
.project-info,
.project-description {
  width: 50%;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center;
}

.project-info {
  margin-top: 16px !important;
}

/* Footer */
.projects-contacts {
  position: relative;
  z-index: 12;
  padding: 0 var(--project-gap);
  margin-top: var(--project-gap);
  margin-bottom: var(--project-gap);
  text-align: center;
}

.projects-contacts a {
  color: #000;
  text-decoration: underline;
}

/* Mobile */
@media only screen and (max-width: 768px) {
  :root {
    --project-media-height: 65vw;
    --project-track-height: 65vw;
  }

  .project-date,
  .project-dimensions,
  .project-info,
  .project-description {
    width: 100%;
  }
}

@media only screen and (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  html:has(body.projects-page),
  body.projects-page {
    overflow: hidden;
    background: #fff;
  }

  body.projects-page #aleph-stage,
  body.projects-page #content-scroll {
    visibility: hidden;
  }

  body.projects-page::after {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    content: "Portrait mode only";
    color: #000;
    background: #fff;
    text-align: center;
  }
}