@font-face {
  font-family: 'Raleway';
  src: url('https://p.ngk30.work/00_Web%20Portfolio/logos/Raleway-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;

  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.65);
  padding: 32px;
  box-sizing: border-box;
}

.lightbox.active {
  display: flex;
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 24px;

  background: transparent;
  border: none;
  color: white;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  z-index: 5001;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  background: rgba(3,97, 12, 0.35);
  color: white;
  border: none;

  /* fluid sizing */
  font-size: clamp(20px, 2.8vw, 36px);
  padding: clamp(8px, 1.6vw, 18px) clamp(10px, 2vw, 22px);

  cursor: pointer;
  z-index: 5001;

  border-radius: 4px;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.lightbox-nav,
.lightbox-close {
  opacity: 0;
  transition: opacity 0.25s ease, background 0.2s ease;
}

.lightbox.active.show-controls .lightbox-nav,
.lightbox.active.show-controls .lightbox-close {
  opacity: 1;
}

.lightbox-prev {
  left: 24px;
}

.lightbox-next {
  right: 24px;
}

.lightbox-nav:hover {
  background: rgba(3, 97, 12, 0.6);
}

@media (max-width: 600px) {
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }

  .lightbox-nav {
    padding: clamp(12px, 3vw, 20px);
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: transparent;
  border-bottom: none;
}

.site-header-inner {
  position: relative;
  max-width: 1400px;
  height: clamp(60px, 6.5vw, 91px);
  box-sizing: border-box;

  margin: 0 auto;
  padding: 0 24px;

  display: flex;
  justify-content: space-between;
  align-items: center;


  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

.site-header-inner {
  transition: opacity 0.25s ease;
  position: relative;
  overflow: hidden;
  height: clamp(60px, 6.5vw, 91px);
  transition: height 0.25s ease;
}

.site-header.scrolled .site-header-inner {
  height: clamp(40px, 4.15vw, 61px); /* ~33% shorter */
}

.site-header.scrolled:hover .site-header-inner {
  height: clamp(60px, 6.5vw, 91px);
}

.site-header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 102, 0, 1.0),
    rgba(6, 89, 26, 1.0)
  );
  opacity: 1;
  transition: opacity 0.25s ease;
  z-index: 0;
}

.site-header.scrolled .site-header-inner::before {
  opacity: 0.25;

}

.site-logo,
.site-logo-center,
.site-nav {
  position: relative;
  z-index: 1;
}

.site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-logo img,
.site-nav img {
  opacity: 0.85;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

/* left logo */
.site-logo img {
  height: clamp(24px, 4.1vw, 72px);
  width: auto;
  display: block;
  filter: invert(1);
}

/* right nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
}

.site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-nav img {
  width: clamp(20px, 2.3vw, 33px);
  height: clamp(20px, 2.3vw, 33px);
  display: block;
}

.site-nav a:hover img {
  opacity: 1;
}

/* scrolled state: side logos become mid-gradient green */
.site-header.scrolled .site-logo img,
.site-header.scrolled .site-nav img {
  filter:
    brightness(0)
    saturate(100%)
    invert(22%)
    sepia(83%)
    saturate(970%)
    hue-rotate(92deg)
    brightness(85%)
    contrast(94%);
  opacity: 0.85;
}

/* center logo: precise color-controlled mask */
.site-logo-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.site-logo-center img {
  height: clamp(28px, 3.8vw, 52px);
  width: auto;
  display: block;
  opacity: 0.85;
  filter: invert(1);
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.site-header.scrolled .site-logo-center img {
  filter:
    brightness(0)
    saturate(100%)
    invert(22%)
    sepia(83%)
    saturate(970%)
    hue-rotate(92deg)
    brightness(85%)
    contrast(94%);
  opacity: 0.85;
}

body {
  margin: 0;
  background: #e7e8e5;
  font-family: system-ui, sans-serif;
}

/* tighter layout spacing */
.single,
.project,
.download {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px; /* ↓ reduced from 48px */
}

/* even tighter spacing between stacked sections */
section {
  margin-bottom: 5px;
}

/* full-width images */
.single img {
  width: 100%;
  height: auto;
  display: block;
}

/* carousel */
.carousel {
  display: flex;
  overflow-x: auto;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

/* slides */
.slide {
  flex: 0 0 100%;
}

/* images */
.slide img {
  width: 100%;
  height: auto;
  display: block;

  scroll-snap-align: start;
}

/* arrows */
.carousel-wrapper {
  position: relative;
}

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(2,97,12,0.4);
  color: white;
  border: none;
  padding: 12px;
  cursor: pointer;
  z-index: 10;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.nav:hover {
  opacity: 0.8;
}

.prev { left: 8px; }
.next { right: 8px; }

/* download */
.download {
  text-align: center;
}

.download a {
  text-decoration: none;
  color: black;
  border-bottom: 1px solid black;
  padding-bottom: 2px;
}