body {
  margin: 0;
  background: #f3f3f1;
  font-family: Helvetica, Arial, sans-serif;
  color: #111;
  letter-spacing: -0.01em;
}

.layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto 1fr;
  row-gap: 24px;
  padding: 2vw;
  min-height: 100vh;
  align-items: start;
}

/* top image strip */
.images {
  grid-column: 8 / 13;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  height: clamp(150px, 18vw, 240px);
}

.images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* hover field on left */
.hover-panel {
  grid-column: 2 / 5;
  grid-row: 3;
  align-self: start;
  margin-top: 4.6vh;
  min-height: 140px;
  pointer-events: none;
}

.hover-label {
  font-size: 0.68vw;
  font-weight: 700;
  letter-spacing: -0.02em;
  opacity: 0.35;
  margin-bottom: 14px;
}

.hover-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  max-width: 22vw;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.hover-words.active {
  opacity: 1;
}

.hover-word {
  font-size: 0.78vw;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #111;
  opacity: 0.9;
}

/* second row: aligned text line */
.about {
  grid-column: 2 / 4;
  grid-row: 2;
  margin-top: 2.8vh;
  font-size: 0.8vw;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.title {
  grid-column: 5 / 7;
  grid-row: 2;
  margin-top: 2.8vh;
  font-size: 1.05vw;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-align: right;
  line-height: 1;
}

.description {
  grid-column: 8 / 11;
  grid-row: 2;
  margin-top: 2.8vh;
  font-size: 0.8vw;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 24vw;
}

/* third row: categories */
.sections {
  grid-column: 8 / 11;
  grid-row: 3;
  margin-top: 4.6vh;
}

.section-item {
  margin-bottom: 1.5vh;
  line-height: 1.12;
  transition: opacity 0.18s ease, color 0.18s ease;
  cursor: pointer;
}

.sections:hover .section-item {
  opacity: 0.35;
  color: #999;
}

.sections .section-item:hover {
  opacity: 1;
  color: #111;
}

.sections strong {
  display: block;
  font-size: 0.8vw;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.sections div div {
  font-size: 0.72vw;
  font-weight: 400;
  line-height: 1.12;
}

/* epigraph — Haraway quote, fades in then out */
.epigraph {
  font-size: 0.78vw;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #111;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.epigraph.visible {
  opacity: 0.6;
}

.epigraph.faded {
  opacity: 0;
}



/* medium screens */
@media (max-width: 1400px) {
  .images {
    height: clamp(140px, 17vw, 210px);
  }

  .about,
  .title,
  .description {
    margin-top: 2.4vh;
  }

  .hover-panel,
  .sections {
    margin-top: 4vh;
  }
}

/* smaller laptop */
@media (max-width: 1200px) {
  .about {
    font-size: 10px;
  }

  .title {
    font-size: 14px;
  }

  .description {
    font-size: 10px;
    max-width: 280px;
  }

  .sections strong {
    font-size: 10px;
  }

  .sections div div {
    font-size: 9px;
  }

  .hover-label {
    font-size: 8px;
  }

  .hover-word {
    font-size: 9px;
  }

  .hover-words {
    max-width: 260px;
  }

  .images {
    height: 160px;
  }

  .epigraph {
    font-size: 9px;
  }

}

/* ===== MOBILE ===== */
@media (max-width: 820px) {
  .layout {
    display: block;
    padding: 24px 18px 36px 18px;
  }

  /* title first */
  .title {
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    margin: 0 0 14px 0;
  }

  /* description second */
  .description {
    font-size: 10px;
    line-height: 1.35;
    max-width: none;
    margin: 0 0 10px 0;
  }

  /* about/cv third */
  .about {
    font-size: 10px;
    margin: 0 0 20px 0;
  }

  /* image strip — full width, 4 across */
  .images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    height: auto;
    margin: 0 0 28px 0;
  }

  .images img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.2;
    object-fit: cover;
  }

  /* hide hover panel */
  .hover-panel {
    display: none;
  }

  /* sections stacked */
  .sections {
    margin: 0;
  }

  .section-item {
    margin-bottom: 16px;
  }

  /* disable the desktop hover dim effect on mobile */
  .sections:hover .section-item {
    opacity: 1;
    color: #111;
  }

  .sections strong {
    font-size: 11px;
  }

  .sections div div {
    font-size: 10px;
  }

 
}