/* Shared project experience, v1.1.0. */
.site-header.is-scrolled,
.mk-nav.is-scrolled {
  background: #101418;
  color: #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / 16%);
}

.site-header.is-scrolled nav a,
.mk-nav.is-scrolled a { opacity: 1; }

.project-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.project-nav > a {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  background: #101418;
  color: #fff;
  box-shadow: 0 2px 12px rgb(0 0 0 / 18%);
  text-decoration: none;
  pointer-events: auto;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.project-nav > a:hover { background: #245b4b; border-color: #fff; }
.project-nav__prev { left: max(18px, env(safe-area-inset-left)); top: calc(50% - 24px); }
.project-nav__next { right: max(18px, env(safe-area-inset-right)); top: calc(50% - 24px); }
.project-nav__home { left: calc(50% - 24px); bottom: max(18px, env(safe-area-inset-bottom)); }

.project-nav img,
.photo-lightbox__button img {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  max-width: none;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.project-nav span {
  position: absolute;
  width: max-content;
  max-width: min(240px, calc(100vw - 112px));
  padding: 9px 12px;
  border-radius: 4px;
  background: #101418;
  color: #fff;
  font: 500 13px/1.4 var(--font-body, sans-serif);
  letter-spacing: 0;
  overflow-wrap: anywhere;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.project-nav__prev span { left: calc(100% + 10px); }
.project-nav__next span { right: calc(100% + 10px); }
.project-nav__home span { bottom: calc(100% + 10px); }
.project-nav a:hover span,
.project-nav a:focus-visible span { visibility: visible; opacity: 1; }

.project-nav a:focus-visible,
.photo-gallery a[data-gallery]:focus-visible,
.photo-lightbox__button:focus-visible,
.photo-lightbox__original:focus-visible {
  outline: 3px solid #70e6c0;
  outline-offset: 4px;
}

body:has(> .project-nav) .hero__content,
body:has(> .project-nav) .mk-hero__copy {
  padding-left: max(90px, var(--gutter, 24px), calc(env(safe-area-inset-left) + 80px));
  padding-right: max(90px, var(--gutter, 24px), calc(env(safe-area-inset-right) + 80px));
}

body:has(> .project-nav) :is(.site-footer, .mk-footer) {
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

.photo-gallery {
  padding: 80px max(90px, var(--gutter, 24px));
  background: #f4f6f3;
  color: #101418;
}

.photo-gallery__head { max-width: 760px; margin-bottom: 32px; }
.photo-gallery__head > p { margin: 16px 0 0; max-width: 62ch; color: #46514b; }
.photo-gallery__head > p:first-child { margin: 0 0 12px; color: #245b4b; font-size: 12px; font-weight: 700; }
.photo-gallery__head > h2 { margin: 0; font-size: 40px; line-height: 1.12; letter-spacing: 0; }
.photo-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.photo-gallery__grid > figure { min-width: 0; margin: 0; }
.photo-gallery__grid a[data-gallery] { display: block; aspect-ratio: 4 / 3; background: #dce4dd; cursor: zoom-in; }
.photo-gallery__grid a[data-gallery] img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-gallery__grid figcaption { margin-top: 12px; color: #35433b; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }

.photo-lightbox {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  border: 0;
  background: rgb(10 13 15 / 97%);
  color: #fff;
  font: 400 14px/1.5 var(--font-body, sans-serif);
  letter-spacing: 0;
  overscroll-behavior: contain;
}

.photo-lightbox:not([open]) { display: none; }
.photo-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.photo-lightbox::backdrop { background: rgb(0 0 0 / 80%); }
.photo-lightbox__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.photo-lightbox__counter { margin: 0; font-variant-numeric: tabular-nums; }
.photo-lightbox__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #78847f;
  border-radius: 50%;
  background: #202923;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

.photo-lightbox__button:hover { background: #245b4b; }
.photo-lightbox__button:disabled { opacity: .35; cursor: default; }
.photo-lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; min-width: 0; margin: 0; }
.photo-lightbox__image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.photo-lightbox__image[hidden] { display: none; }
.photo-lightbox__status { position: absolute; inset: 50% 12px auto; margin: 0; text-align: center; transform: translateY(-50%); }
.photo-lightbox__status:empty { display: none; }
.photo-lightbox__bottom { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 16px; }
.photo-lightbox__details { min-width: 0; max-height: min(24dvh, 160px); overflow: auto; text-align: center; overscroll-behavior: contain; }
.photo-lightbox__caption { margin: 0; overflow-wrap: anywhere; }
.photo-lightbox__original { display: inline-block; padding: 12px 4px; color: #a2efd5; text-underline-offset: 3px; }
.photo-lightbox__original[hidden] { display: none; }

body:has(.photo-lightbox[open]) > .project-nav { visibility: hidden; }

@media (max-width: 760px) {
  .project-nav {
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 12px;
    padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: #101418;
    border-top: 1px solid rgb(255 255 255 / 20%);
    pointer-events: auto;
  }
  .project-nav > a { position: static; box-shadow: none; }
  .project-nav__prev { grid-column: 1; grid-row: 1; }
  .project-nav__home { grid-column: 2; grid-row: 1; }
  .project-nav__next { grid-column: 3; grid-row: 1; }
  .project-nav span { display: none; }
  body:has(> .project-nav) .hero__content,
  body:has(> .project-nav) .mk-hero__copy {
    padding-left: max(var(--gutter, 24px), env(safe-area-inset-left));
    padding-right: max(var(--gutter, 24px), env(safe-area-inset-right));
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  .photo-gallery { padding: 56px max(20px, env(safe-area-inset-right)) 56px max(20px, env(safe-area-inset-left)); }
  .photo-gallery__head > h2 { font-size: 32px; }
  .photo-gallery__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .photo-lightbox__bottom { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-nav > a,
  .site-header,
  .mk-nav { transition: none; }
  .photo-lightbox,
  .photo-lightbox * { scroll-behavior: auto; animation: none; transition: none; }
}