/* Made by Meis — madebymeis.com
   Base styles. All layout/color for individual elements is kept inline
   in index.html to match the source design 1:1; this file just covers
   resets, fonts, and interactive states. */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #FAF7F2;
  color: #141311;
  font-family: 'Manrope', sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.nav-link:hover {
  color: #9C5B34;
}

.cta-primary:hover {
  background: #7E4A2A;
}

.cta-ghost:hover {
  border-color: #141311;
}

@media (max-width: 900px) {
  header nav {
    gap: 16px !important;
  }
  header nav a:not(.cta-primary) {
    display: none;
  }
  h1 {
    font-size: 48px !important;
  }
  #about > div {
    grid-template-columns: 1fr !important;
  }
  #about > div > div:first-child {
    grid-column: auto !important;
  }
  #about > div > div:last-child {
    grid-column: auto !important;
  }
  #build [style*="grid-template-columns: repeat(4"],
  section [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #work [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}