/* ESSAY SPECIFIC STYLING */

article.essay {
  flex-grow: 1;
  margin: 0 auto;
  max-width: 70rem;
  padding: 3.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-weight: 300;
}

/* The Main Page Title */
.essay-header {
  text-align: left;
  border-bottom: 1px solid var(--neutral-light);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

.essay-header h1 {
  font-size: 3.5rem;
  margin: 0;
  font-weight: 700;
}

/* H2: Section Headers (e.g., "Art Around the House", "Ratlantis") */
.essay h2 {
  font-size: 3rem;
  font-weight: 300;
  color: var(--neutral-darkest);
  margin: 0 0 0 0;
  letter-spacing: -0.1rem;
  text-align: left;
}

/* Full Width Copy */
.full-width-copy {
  margin: 0 0 4rem 0;
  font-weight: 300;
}

.full-width-copy p {
  margin-bottom: 1em;
}

/* H3: Individual Project Titles */
.essay h3 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--neutral-darkest);
  line-height: 1.2;
}

/* Two Column Row Layout - only for single images */
.two-col-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10%;
  margin-bottom: 4rem;
}

/* Project with image stack - two column with stacked images on right */
.project-with-stack {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10%;
  margin-bottom: 4rem;
}

.project-with-stack .text-col {
  flex-basis: 30%;
}

.project-with-stack .image-col {
  flex-basis: 60%;
  max-width: 60%;
  min-width: 0;
}

.image-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;  /* <-- This controls the space between images */
}

/* --- COLUMN CONSTRAINTS --- */
.two-col-row .image-col {
  flex-basis: 60%;
  max-width: 60%;
  min-width: 0;
}

.two-col-row .text-col {
  flex-basis: 30%;
}

.text-col p {
  margin-bottom: 1em;
  font-weight: 300;
}

/* --- IMAGE CONSTRAINTS --- */
.essay img {
  max-width: 100%;
  height: auto;
  display: block;
  max-height: 70vh;
  object-fit: contain;
}

/* Slick Carousel Styling */
.slick-slider {
  width: 100%;
}

.slick-image img {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  margin: 0 auto;
}

/* Responsive adjustments */
@media screen and (max-width: 760px) {
  body {
    overflow-x: hidden;
    width: 100vw;
  }

  article.essay {
    padding: 1.5rem 0;
    margin-left: 2rem;
    margin-right: 2rem;
    font-size: 1.125rem;
  }

  .essay-header {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .essay-header h1 {
    font-size: 2rem;
    letter-spacing: -0.05rem;
  }

  .essay h2 {
    font-size: 1.75rem;
    letter-spacing: -0.05rem;
    margin-bottom: 1rem;
  }

  .essay h3 {
    font-size: 1.25rem;
  }

  .full-width-copy {
    margin-bottom: 2rem;
  }

  .full-width-copy,
  .text-col p {
    font-size: 1.125rem; /* Explicit size for readability */
  }

  .two-col-row {
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .two-col-row .image-col,
  .two-col-row .text-col {
    flex-basis: 100%;
    max-width: 100%;
  }

  .project-with-stack {
  flex-direction: column;
}

  .project-with-stack .text-col,
  .project-with-stack .image-col {
    flex-basis: 100%;
    max-width: 100%;
  }

  .two-col-row .text-col {
    order: 1;
  }

  .two-col-row .image-col {
    order: 2;
  }
}