body {
  margin: 0;
  background-color: #0C0C0B; /* darker: #0C0C0B; medieum: #141412 lighter: #1E1E1C */
  color: #F2F3F7;
  font-family: "IBM Plex Mono", monospace;
  /* font-family: Menlo, Consolas, "Liberation Mono", monospace; */
  /*font-family: sans-serif, Geneva, Verdana;*/
  /*font-family: Arial, sans-serif;*/

}

.site-header {
  width: 80%;
  max-width: 1200px;
  margin: 48px auto 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  display: flex;
  gap: 20px;
}

.site-header a {
  color: inherit;
  text-decoration: none;
}

.site-header a:hover {
  text-decoration: underline;
}

.works-heading {
  width: 80%;
  max-width: 1200px;
  margin: 140px auto 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.works-heading hr {
  flex: 1;
  margin: 0;
  border: none;
  border-top: 1px solid rgba(232, 227, 213, 0.221)
  /*#E8E3D5*/;
}

.works-heading span {
  font-size: 14px;
  white-space: nowrap;
}


.works {
  width: 80%;
  max-width: 1200px;
  margin: 50px auto;
}

.works img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.work-caption {
  margin: 12px 0 0;
  font-size: 14px;
  text-align: right;
}

.work-link,
.work-link:visited {
  color: inherit;
  text-decoration: none;
}

.work-item + .work-item {
   margin-top: clamp(48px, 25vw, 440px);
}



/* PROJECT DETAIL PAGE */

/* project detail image*/
.detail-image {
  width: 80%;
  max-width: 1200px;
  margin: 140px auto 0;
}

.detail-image + .detail-image{
  margin-top:40px;
}

.detail-image img {
  display: block;
  width: 100%;
  height: auto;
}

.photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* project detail video */

.detail-video {
  width: 80%;
  max-width: 1200px;
  margin: 140px auto 50px;
}

.detail-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* project detail description */

.video-caption,
.photo-caption {
  color: #f2f3f762;
  margin: 10px 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: right;
}

.work-info {
  width: 80%;
  max-width: 800px;
  margin: 0 auto 60px;
}

.work-info h1 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.work-info p {
  margin: 0 0 3px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.work-description {
  margin-top: 32px;
}

.work-info .work-description p {
  font-family: "IBM Plex Sans", sans-serif;
  margin: 0 0 20px;
  font-size: 0.9rem;
  line-height: 1.7;
}




.credits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.credits-content {
  grid-column: 3;
  text-align: left;
  border-left: 1px solid rgba(232, 227, 213, 0.4);
  padding-left: 24px;
}

@media (max-width: 600px) {
  .credits-grid {
    grid-template-columns: 1fr;
  }

  .credits-content {
    grid-column: 1;
  }

}

.credits-content p:last-child {
  margin-bottom: 0;
}