.lightbox {
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(2,
  9,
  7,
  .94);
  backdrop-filter:blur(10px);
  align-items:center;
  justify-content:center;
  padding:72px 96px 66px
}
.lightbox.open {
  display:flex
}
.lightbox>img {
  display:block;
  max-width:100%;
  max-height:calc(100dvh - 138px);
  object-fit:contain;
  border-radius:3px;
  box-shadow:0 24px 80px rgba(0,
  0,
  0,
  .55)
}
.lightbox button {
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(255,
  255,
  255,
  .22);
  border-radius:999px;
  background:rgba(7,
  29,
  22,
  .74);
  color:#fff;
  box-shadow:0 8px 28px rgba(0,
  0,
  0,
  .28);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:background .2s ease,
  border-color .2s ease,
  transform .2s ease
}
.lightbox button:hover,
.lightbox button:focus-visible {
  background:#f4c430;
  color:#071d16;
  border-color:#f4c430;
  transform:scale(1.06);
  outline:none
}
.lightbox button svg {
  display:block;
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round
}
.lightbox-close {
  width:48px;
  height:48px;
  top:max(20px,
  env(safe-area-inset-top));
  right:max(20px,
  env(safe-area-inset-right))
}
.lightbox-nav {
  width:54px;
  height:54px;
  top:50%;
  bottom:auto;
  transform:translateY(-50%)
}
.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  transform:translateY(-50%) scale(1.06)
}
.lightbox .prev {
  left:max(22px,
  env(safe-area-inset-left))
}
.lightbox .next {
  right:max(22px,
  env(safe-area-inset-right))
}
.lightbox-count {
  position:absolute;
  left:50%;
  bottom:max(20px,
  env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  height:32px;
  padding:0 12px;
  border:1px solid rgba(255,
  255,
  255,
  .18);
  border-radius:999px;
  background:rgba(7,
  29,
  22,
  .7);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  backdrop-filter:blur(8px)
}
@media(max-width:760px) {
  .hero-compact h1 {
    font-size:clamp(2.2rem,
    11.5vw,
    3.25rem);
    overflow-wrap:anywhere
  }
  .project-heading p {
    margin-top:8px
  }
  .gallery figcaption {
    padding:13px 15px
  }
  .lightbox {
    padding:76px 14px 82px
  }
  .lightbox>img {
    max-width:100%;
    max-height:calc(100dvh - 158px);
    border-radius:2px
  }
  .lightbox-close {
    width:44px;
    height:44px;
    top:max(14px,
    env(safe-area-inset-top));
    right:max(14px,
    env(safe-area-inset-right))
  }
  .lightbox-nav {
    width:46px;
    height:46px;
    top:50%;
    bottom:auto
  }
  .lightbox .prev {
    left:max(10px,
    env(safe-area-inset-left))
  }
  .lightbox .next {
    right:max(10px,
    env(safe-area-inset-right))
  }
  .lightbox button svg {
    width:22px;
    height:22px
  }
  .lightbox-count {
    bottom:max(18px,
    env(safe-area-inset-bottom))
  }
}
@media(prefers-reduced-motion:reduce) {
  .lightbox button {
    transition:none
  }
}