body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: #222;
  background-color: #fff;
  text-align: center;
}

header {
  padding: 2rem 1rem 2rem 1rem;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

.mobile-menu {
  display: none;
}

@media (max-width: 600px) {
  .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    background: #fff;
    padding-top: 0rem;
    padding-bottom: 0rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0rem;
    margin-bottom: 0rem;
    max-height: 0;
    /* Changed opacity to 0 to fade in */
    opacity: 1; 
    pointer-events: none;
    overflow: hidden;
    /* Added opacity to the transition for a fade effect */
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100vw;
    background: #f5f5f5;
    padding: 0; /* Ensures no padding on the animated container */
  }
  .dropdown.active {
    max-height: 1200px;
    opacity: 1;
    background: #f5f5f5;
    /* FIX: Removed padding from here! 
      This was causing the jump.
    */
    /* padding: 1rem 0 1rem 0; */ 
    pointer-events: auto;
  }
  .dropdown-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    /* This padding is now the only vertical padding.
      It's inside the animated container, so it will
      be hidden smoothly instead of snapping away.
      I've used 1rem to match what you had on dropdown.active,
      but you can change this back to 0.5rem if you prefer!
    */
    padding: 1rem 0 1rem 0;
    width: 100%;
  }
  .mobile-menu button {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    color: #888;
    background: #fff;
    border: none;
    letter-spacing: 0.34em;
    font-weight: 400;
    cursor: pointer;
    width: 100vw;
    text-align: center;
    margin: 0;
    padding: 0.5rem 0 0.5rem 0;
    border-radius: 0;
    transition: background 0.2s;
  }
  .dropdown a {
    font-family: 'Montserrat', sans-serif;
    color: #888;
    font-size: 1.2rem;
    letter-spacing: 0.25em;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
  }
  .dropdown a:hover {
    color: #1e8bc3;
    text-decoration: underline;
  }
}
h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 8vw, 2.8rem); /* scales font size between 1rem and 2.8rem based on viewport */
  padding: 0 1.5rem;
  letter-spacing: 0.15em;
  margin: 0;
}


.tagline {
  margin-top: 0.5rem;
  font-size: 1.1rem;
  color: #555;
  letter-spacing: 0.05em;
}

.intro-text {
  margin: 0rem auto 2rem auto;   /*  auto center, fills horizontal space */
  padding: 0 3vw;          /* Add horizontal padding similar to gallery */
  text-align: justify;
  font-size: 0.9rem;       /* Smaller font size */
  color: #4a4a4a;
  font-weight: 400;
  line-height: 1.6;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 1rem;
  padding: 0 1rem 4rem 1rem;
  box-sizing: border-box;
}

.gallery img {
  width: 100%;                /* fill grid cell horizontally */
  height: auto;               /* height calculated by aspect ratio */
  aspect-ratio: 4 / 5;        /* vertical 4:5 ratio */
  object-fit: cover;          /* crop overflow to fill perfectly */
  object-position: center;    /* crop centered */
  display: block;             /* remove inline space */
  max-width: 100%;            /* avoid overflow */
}

@media (max-width: 600px) { /* On small/mobile screens */
  .gallery {
    grid-template-columns: 1fr;  /* Single column stack */
    max-width: 100%;
    .tagline {
    font-size: 0.3rem; /* smaller font size for mobile */
  }
}

footer {
  padding: 2rem 1rem;
  font-size: 0.9rem;
  color: #777;
  border-top: 1px solid #eee;
}

footer a {
  color: #444;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}