* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100vh;
  background-color: #F3F0E9;
  font-family: system-ui, sans-serif;
}


@font-face {
    font-family: "NauryzRedkeds";
    src: url("../font/NAURYZREDKEDS.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}



.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;   
  gap: 48px;
  padding-top: 32px;
}


.logo {
  display: flex;
  gap: 4px;              
  text-decoration: none;
  justify-content: center;
}

.logo-letter {
  font-family: "NauryzRedkeds", sans-serif;
  font-size: 24px; 
  font-weight: 200;     
  color: #222222;
  line-height: 1;
   letter-spacing: -0.3em; 
}

   .home .logo-letter {
  animation: titleColorCycle 12s infinite cubic-bezier(0.4, 0.0, 0.2, 1);
}
  

.nav-pill {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 40px;             
  padding: 0px;
  height: 56px;
  background-color: #333333; 
  border-radius: 999px;
  margin-top: 24px;
}


.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 32px;
  border-radius: 999px;
  text-decoration: none;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.nav-pill li {
  height: 100%;
  display: flex;
  align-items: stretch;
}

.nav-link--image:hover,
.nav-link--image.is-active {
  background-color: #7C3C33;
}

.nav-link--habitat:hover,
.nav-link--habitat.is-active {
  background-color: #4E5740;
}

.nav-link--fave:hover,
.nav-link--fave.is-active {
  background-color: #7B6A32;
}

.nav-link--about:hover,
.nav-link--about.is-active {
  background-color: #353A4F;
}


.primary-nav {
  list-style: none;
  display: flex;
  gap: 24px;
}

.primary-nav a {
  text-decoration: none;
  color: black;
}

.wrapper {
  min-height: calc(100vh - 100px); 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  background-color: #F3F0E9;
  text-align: center;
}
.hero-block {
  max-width: 1207px;  
  width: 90%; 
  margin: 0 auto;       
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.hero-title {
  font-family: "NauryzRedkeds", sans-serif;
  text-align: center;
  font-size: clamp(80px, 15vw, 170px);
  line-height: 0.9;
  color: #F4C542;
  text-transform: uppercase;

  animation: titleColorCycle 12s infinite;
  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);

}


.caption {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-style: italic;
  line-height: 100%;
  color: #000000;
  width: 352px;         
  text-align: right;   
  margin-top: 12px;  
  align-self: flex-end; 
}

.section-screen {
  min-height: 100vh;            /* full viewport height */
  scroll-snap-align: start;
  display: flex;
  align-items: center;          /* center your content, optional */
  justify-content: center;
  padding: 80px 48px 48px;      /* top padding so header doesn’t cover content */
}

/* optional: little pill at bottom as a hint 
.scroll-hint {
  position: fixed;
  bottom: 204px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  background: #2f3225;
  color: #fff;
  font-size: 14px;
  z-index: 999;
  opacity: 0.4;
}

*/

@keyframes titleColorCycle {
  0%   { color: #F4C542; }
  25%  { color: #3A4A7A; }
  50%  { color: #B34135; }
  75%  { color: #6B754C; }
  100% { color: #F4C542; }
}