/*
  Simple layout for non-code creative projects (layouts/creative-project.njk) —
  title, subject/year, a short write-up, and a small image gallery. Same plain,
  unstyled-to-Figma spirit as p5-project.css (see that file's comment): title +
  meta header, then content, nothing fancier.
*/
.creative-project {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(96px, 10vw, 160px) 20px clamp(64px, 8vw, 120px);
  text-align: center;
}

.creative-project__title {
  color: var(--color-white);
  font-family: var(--font-bold);
  font-size: clamp(32px, 4vw, 56px);
  margin: 0 0 24px;
}

.creative-project__meta {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4vw, 48px);
  margin: 0 0 48px;
}

.creative-project__meta dt {
  color: var(--color-bg-fog);
  font-family: var(--font-regular);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
}

.creative-project__meta dd {
  color: var(--color-white);
  font-family: var(--font-medium);
  font-size: 18px;
  margin: 0;
}

.creative-project__tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/*
  Breaks out of .creative-project's centered 900px column to sit at 3/4 of the
  viewport width instead — same calc(50% - 50vw)-style full-bleed trick as
  p5-project.css's --fullbleed variant, just parked at 75vw instead of 100vw.
  Works regardless of the column's own width as long as it's centered (it is).
  Shared by the description text and the moodboard image, both requested at
  that same 3/4-of-screen size.
*/
.creative-project__description,
.creative-project__moodboard {
  width: 75vw;
  margin: 0 0 48px calc(50% - 37.5vw);
}

.creative-project__description {
  color: var(--color-white);
  font-family: var(--font-regular);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
}

.creative-project__video,
.creative-project__moodboard,
.creative-project__parts {
  margin-bottom: 48px;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}

.creative-project__video img,
.creative-project__moodboard img,
.creative-project__parts img {
  display: block;
  width: 100%;
  height: auto;
}

.creative-project__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 0 0 48px;
}

.creative-project__gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Short intro line sitting right above the section/image it introduces
   ("First, I created a moodboard:" etc.) — tighter bottom margin than the
   sections themselves so it reads as attached to what follows it. */
.creative-project__caption {
  color: var(--color-white);
  font-family: var(--font-regular);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  max-width: 640px;
  margin: 0 auto 16px;
}

.creative-project__caption--closing {
  margin: 0 auto;
  max-width: 640px;
}