:root {
  --ink: #21331f;
  --paper: #f4efe7;
  --lime: #d4af37;
  --muted: #5f695a;
  --line: rgba(33, 51, 31, .18);
  --orange: #b88a22;
  --blue: #7d856f;
}

.site-header {
  height: 116px;
  border-bottom: 0;
  color: #fff8df;
}

.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #142218;
  border-bottom: 1px solid rgba(212, 175, 55, .5);
}

.site-header .brand-lockup {
  position: relative;
  overflow: hidden;
  width: 390px;
  height: 96px;
  min-height: 0;
  padding: 0;
  gap: 0;
  background: transparent;
  color: #f4efe7;
  border: 0;
  box-shadow: none;
}

.brand-lockup-image {
  position: absolute;
  top: calc(50% - 7px);
  left: 50%;
  width: 100%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%) scale(1.25);
}

.mobile-brand-lockup {
  display: none;
}

.site-header nav a {
  color: #fff8df;
}

.site-header .nav-cta {
  color: #d4af37;
  border-color: #d4af37;
  white-space: nowrap;
}

.brand-emblem {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border: 2px solid #d4af37;
  border-radius: 13px;
  color: #e4c766;
  background: linear-gradient(145deg, #1d3121, #0e1912);
  font: 700 20px "Space Grotesk";
  letter-spacing: -.05em;
  text-shadow: 0 1px 8px rgba(212, 175, 55, .35);
}

.brand-divider {
  align-self: stretch;
  width: 1px;
  flex: 0 0 1px;
  background: linear-gradient(transparent, #d4af37 14%, #d4af37 86%, transparent);
}

.brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.brand-copy strong {
  display: flex;
  flex-direction: column;
  color: #fff8df;
  font: 700 12px/1.05 "Space Grotesk";
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-copy small {
  color: #d4af37;
  font: 600 7px/1 "Space Grotesk";
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.project-image {
  background: #101a17;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .5s ease;
}

.compact:hover .project-image img {
  transform: scale(1.035);
}

.card-link {
  display: inline-block;
  color: var(--ink);
  font: 700 12px "Space Grotesk";
  letter-spacing: .04em;
  margin-top: 24px;
  text-underline-offset: 5px;
}

.card-links {
  display: flex;
  gap: 22px;
}

.forge-homepage {
  display: block;
  min-height: 500px;
  text-decoration: none;
  position: relative;
  background: #151515;
}

.forge-homepage::after {
  background: linear-gradient(180deg, transparent 55%, rgba(16, 24, 15, .66));
  z-index: 1;
}

.forge-homepage img {
  width: 90%;
  height: 90%;
  position: absolute;
  inset: 5%;
  object-fit: contain;
  object-position: center;
  transition: transform .55s ease;
}

.forge-homepage:hover img {
  transform: scale(1.015);
}

.live-ribbon {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: #21331f;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  font: 700 11px "Space Grotesk";
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 #d4af37;
}

.live-ribbon i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4af37;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, .18);
}

.live-ribbon b {
  color: #d4af37;
  font-size: 16px;
}

@media (max-width: 860px) {
  .site-header .brand-lockup {
    width: min(390px, calc(100vw - 190px));
  }

  .site-header nav {
    gap: 0;
    flex-shrink: 0;
  }

  .site-header .nav-cta {
    padding: 10px 12px;
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  .site-header {
    height: 96px;
  }

  .site-header::before {
    background: #161d14;
  }

  .site-header .brand-lockup {
    width: min(225px, calc(100vw - 136px));
    height: 76px;
    min-height: 0;
    padding: 0;
    gap: 0;
  }

  .brand-lockup-image {
    display: none;
  }

  .site-header .brand > .mobile-brand-lockup {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .mobile-brand-emblem {
    width: clamp(45px, 25vw, 54px);
    aspect-ratio: 1;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 2px solid #e0c066;
    border-radius: 11px;
    color: #e4c766;
    font: 700 clamp(16px, 5vw, 21px) "Space Grotesk";
    letter-spacing: -.05em;
  }

  .mobile-brand-divider {
    width: 1px;
    height: 56px;
    flex: 0 0 1px;
    background: #d4af37;
  }

  .mobile-brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .mobile-brand-copy strong {
    color: #fff8df;
    font: 700 clamp(10.5px, 3.4vw, 13px)/1.02 "Space Grotesk";
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-brand-copy small {
    margin-top: 5px;
    color: #d4af37;
    font: 600 clamp(4.2px, 1.3vw, 5.2px)/1 "Space Grotesk";
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .brand-emblem {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 10px;
    font-size: 16px;
  }

  .brand-copy {
    gap: 4px;
  }

  .brand-copy strong {
    font-size: 9px;
    letter-spacing: .1em;
  }

  .brand-copy small {
    font-size: 5.5px;
    letter-spacing: .08em;
  }

  .site-header .nav-cta {
    padding: 10px 9px;
    font-size: 10px;
    background: #161d14;
  }

  .site-header nav {
    margin-left: 8px;
  }

  .hero {
    min-height: auto;
    padding-top: 44px;
    padding-bottom: 34px;
  }

  .forge-homepage {
    min-height: 380px;
  }

  .forge-homepage img {
    width: 92%;
    height: 92%;
    inset: 4%;
    object-position: center;
  }

  .live-ribbon {
    right: 14px;
    bottom: 14px;
    font-size: 9px;
  }
}