/* Polished site-wide fixes */
:root {
  --nav-height-desktop: 72px;
  --nav-height-mobile: 60px;
}

.site-nav {
  min-height: var(--nav-height-desktop) !important;
  padding: 0 32px !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

.site-nav a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: var(--nav-height-desktop) !important;
  line-height: 1 !important;
}

.site-nav__links {
  gap: 32px !important;
}

/* Bring Contact into the same rhythm as the other nav items */
.site-nav > .site-nav__link {
  margin-left: 32px !important;
}

.linkedin-link {
  margin-left: auto !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
}

.site-nav__link {
  font-family: "Raleway", Arial, sans-serif !important;
  font-size: 16.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.site-nav__link.is-active {
  font-weight: 500 !important;
}

/* Homepage hero */
.hero {
  pointer-events: auto !important;
  top: var(--nav-height-desktop) !important;
  height: calc(100svh - var(--nav-height-desktop)) !important;
  min-height: 560px !important;
  position: sticky !important;
}

.hero__lockup {
  pointer-events: none !important;
  width: min(92vw, 1100px) !important;
  margin: 0 auto !important;
  transform: translateX(-2.8vw) scale(1.065) !important;
  transform-origin: center center !important;
}

.hero__lockup-image {
  width: 100% !important;
}

.hero-scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(61, 51, 44, 0.68);
  text-decoration: none;
  font-family: "Raleway", Arial, sans-serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.05em;
  pointer-events: auto;
  animation: heroScrollBounce 1.6s ease-in-out infinite;
}

.hero-scroll-indicator:hover,
.hero-scroll-indicator:focus-visible {
  color: #023fa1;
}

@keyframes heroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.68; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* Keep the projects pulled up enough after the sticky hero */
.projects {
  position: relative;
}

/* Better collage rhythm on the profile page */
.person-collage {
  top: calc(var(--nav-height-desktop) + 32px) !important;
  grid-template-columns: 1.06fr 0.94fr !important;
  grid-template-rows: 252px 252px 226px !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.person-image {
  box-shadow: 0 12px 28px rgba(61, 51, 44, 0.09) !important;
}

.person-image:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}

.person-image:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.person-image:nth-child(3) {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.person-image:nth-child(4) {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

.person-image:nth-child(5) {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 3 !important;
}

.person-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.person-image--friends img { object-position: 50% 46% !important; }
.person-image--graduation img { object-position: 50% 34% !important; }
.person-image--night-out img { object-position: 50% 44% !important; }
.person-image--celebration img { object-position: 50% 35% !important; }

/* Make the new Life Line and Progeny covers sit nicely */
.project-card__cover {
  background: #f4efe8 !important;
  object-fit: cover !important;
}

@media (max-width: 1100px) {
  .hero__lockup {
    width: min(94vw, 1040px) !important;
    transform: translateX(-2vw) scale(1.04) !important;
  }
}

@media (max-width: 900px) {
  .site-nav {
    min-height: 68px !important;
    padding: 0 24px !important;
  }

  .site-nav a {
    min-height: 68px !important;
  }

  .site-nav__links {
    gap: 28px !important;
  }

  .site-nav > .site-nav__link {
    margin-left: 28px !important;
  }

  .site-nav__link {
    font-size: 15px !important;
  }

  .hero {
    top: 68px !important;
    height: calc(100svh - 68px) !important;
  }

  .hero__lockup {
    transform: translateX(-1.4vw) scale(1.02) !important;
  }

  .person-collage {
    top: 104px !important;
    grid-template-rows: 228px 228px 206px !important;
  }
}

@media (max-width: 760px) {
  .hero__lockup {
    transform: translateX(0) scale(1.02) !important;
    width: min(94vw, 900px) !important;
  }

  .hero-scroll-indicator {
    bottom: 18px;
  }
}

@media (max-width: 608px) {
  .site-nav {
    min-height: var(--nav-height-mobile) !important;
    padding: 0 16px !important;
  }

  .site-nav a {
    min-height: var(--nav-height-mobile) !important;
  }

  .site-nav__links {
    gap: 18px !important;
  }

  .site-nav > .site-nav__link {
    margin-left: 18px !important;
  }

  .site-nav__link {
    font-size: 13.5px !important;
    font-weight: 500 !important;
  }

  .linkedin-link {
    font-size: 1.35rem !important;
  }

  .hero {
    top: var(--nav-height-mobile) !important;
    height: calc(100svh - var(--nav-height-mobile)) !important;
    min-height: 440px !important;
  }

  .hero__lockup {
    width: min(96vw, 820px) !important;
    transform: translateX(0) scale(1) !important;
  }

  .person-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 220px 160px 220px !important;
    gap: 12px !important;
    top: auto !important;
  }

  .person-image:nth-child(1) { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
  .person-image:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  .person-image:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }
  .person-image:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; }
  .person-image:nth-child(5) { grid-column: 2 !important; grid-row: 3 !important; }
}

@media (max-width: 420px) {
  .site-nav__links {
    gap: 12px !important;
  }

  .site-nav > .site-nav__link {
    margin-left: 12px !important;
  }

  .site-nav__link {
    font-size: 12px !important;
  }
}