html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

.navbar-brand {
  letter-spacing: 0.02em;
}

/* Portfolio detail hero image: source photos vary wildly in aspect ratio
   (some are tall phone-camera portraits), so cap the height and crop
   instead of letting img-fluid stretch the page to the photo's height. */
.project-hero-image {
  width: 100%;
  height: 480px;
  object-fit: cover;
}

@media (max-width: 576px) {
  .project-hero-image {
    height: 260px;
  }
}