/* === Variables === */
:root {
  /* Colors */
  --White: #ffffff;
  --Eggshell: #fff0e5;
  --Eggshell-Modal: #fff0e5f5;
  --Eggshell-Dark: #baa18f;
  --Grey-Dark: #2e2e2e;
  --Black: #1c1c1c;

  /*Typography */
  --font-family-headlines: "Fraunces", serif;
  --font-family-base: "Figtree", sans-serif;

  /* Font Weights */
  --weight-200: 200;
  --weight-400: 400;
  --weight-800: 800;

  /* Spacing */
  --space100: 0.8rem; /* 8px */
  --space200: 1.6rem; /* 16px */
  --space250: 2rem; /* 20px */
  --space300: 2.4rem; /* 24px */
  --space400: 3.2rem; /* 32px */
  --space500: 4rem; /* 40px */
  --space600: 4.8rem; /* 48px */
  --space700: 5.6rem; /* 56px */
  --space800: 6.4rem; /* 64px */
  --space1000: 12.8rem; /* 128px */
  --space2000: 20rem; /* 200px */
  --space2500: 30rem; /* 300px */
}

/* === Base & Typography === */
/* Mobile First Approach */
html {
  font-family: var(--font-family-base);
  font-size: 62.5%; /* 16px * 0.625 = 10px */
}

body {
  font-size: 1.6rem; /* 16px */
  min-height: 100vh;
  background-color: var(--Eggshell);
  display: flex;
  flex-direction: column;
}

h1 {
  font-family: var(--font-family-headlines);
  font-weight: var(--weight-800);
  color: var(--Grey-Dark);
  font-size: clamp(2rem, 10vw, 3.2rem);
  line-height: 120%;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--space200);
}

p {
  font-family: var(--font-family-base);
  color: var(--Grey-Dark);
  font-size: clamp(1.6rem, 2vw, 1.8rem);
  text-align: center;
}

footer > p {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  font-weight: var(--weight-400);
  color: var(--Grey-Dark);
}

.wrapper {
  max-width: 100rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

/* === Navbar Section === */
#navbar {
  background-color: var(--Eggshell);
  border-bottom: solid 0.1rem;
  border-color: var(--Eggshell-Dark);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  transition: top 0.5s;
}

.logo {
  font-family: var(--font-family-headlines);
  color: var(--Grey-Dark);
  font-size: clamp(1.6rem, 3vw, 3.2rem);
  font-weight: var(--weight-800);
  letter-spacing: -1px;
  margin: var(--space200);
}

.content-limit {
  max-width: 180rem;
  display: flex;
  margin: 0 auto;
}

/* === Main Section === */
.main-text {
  display: flex;
  flex-direction: column;
  max-width: 50rem;
  margin: var(--space1000) var(--space250) var(--space600) var(--space250);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: var(--space500) var(--space200);
  gap: var(--space250);
}

.image {
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
  width: 100%;
  border-radius: 0.6rem;
}

.image:hover {
  box-shadow: -7px 7px 0px -1px var(--Black);
  transform: translate(5px, -3px);
}

/* === Modal Section === */
.modal-overlay {
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--Eggshell-Modal);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.modal-img-container {
  height: 60vh;
  max-height: 70rem;
  margin-inline: var(--space250);
}

.modal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: 0.3s ease-in-out;
}

.hidden {
  display: none;
}

/* Tablet & Desktop Styles */
@media (min-width: 1150px) {
  .modal-img-container {
    height: 70rem;
    margin-inline: 0;
  }
}

/* === Navigation Container === */
.next-previous-container {
  display: flex;
  justify-content: space-around;
  width: clamp(15rem, 75%, 55rem);
  margin-top: var(--space250);
}

/* === Navigation & Caption Container === */
.close-modal-btn {
  color: var(--Grey-Dark);
  position: absolute;
  top: 1rem;
  right: 2.5rem;
  font-size: 3.5rem;
  font-weight: var(--weight-200);
  transition: all 0.2s ease-in-out;
}

.close-modal-btn:hover {
  transform: scale(1.3);
}

.navigation-btn {
  font-family: var(--font-family-headlines);
  font-size: clamp(1.6rem, 2vw, 2rem);
  position: relative;
  color: #000;
  text-decoration: none;
}

.navigation-btn:hover {
  color: #000;
}

.navigation-btn::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--Grey-Dark);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.navigation-btn:hover::before {
  transform: scaleX(1);
}

.caption {
  font-family: var(--font-family-headlines);
  font-size: clamp(1.6rem, 2vw, 2rem);
}

/* === Footer Section === */
footer {
  margin: var(--space700) var(--space200);
}