/* =====================================
   INDIVIDUAL PROJECT PAGE STYLES
   Shared case-study structure
====================================== */
/* PROJECT INTRODUCTION */
.case-hero {
  padding: 8vh 0 4rem;
}
.back-link {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.case-hero h1 {
  font: 600 clamp(3.5rem, 9vw, 9rem) / 0.87 var(--display);
  letter-spacing: -0.075em;
  margin: 5rem 0 3rem;
}
.case-meta {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2rem;
  border-top: 1px solid;
  padding-top: 1rem;
}
.case-meta p {
  margin: 0.3rem 0;
}
.case-meta span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.case-visual {
  min-height: 75vh;
  margin-bottom: 8rem;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.case-visual .poster {
  width: min(530px, 70%);
  aspect-ratio: 0.7;
  display: grid;
  place-items: center;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow: 25px 25px 0 rgba(0, 0, 0, 0.25);
  font: 700 clamp(3rem, 8vw, 8rem) / 0.8 var(--display);
  letter-spacing: -0.08em;
}
.case-intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8%;
  padding-bottom: 8rem;
}
.case-intro h2 {
  font: 600 clamp(2.8rem, 5vw, 5.5rem) / 0.95 var(--display);
  letter-spacing: -0.06em;
  margin: 0;
}
.case-intro .lead {
  font: 500 clamp(1.6rem, 2.5vw, 2.5rem) / 1.2 var(--display);
  letter-spacing: -0.03em;
}
.case-intro p {
  max-width: 720px;
}
.case-process {
  background: var(--cream);
  padding: 7rem max(24px, calc((100vw - 1500px) / 2));
}
.case-process h2 {
  font: 600 clamp(2.8rem, 5vw, 5.5rem) / 0.95 var(--display);
  letter-spacing: -0.06em;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
}
.process-grid article {
  border-top: 1px solid;
  padding-top: 1rem;
}
.process-grid b {
  font: 600 2rem var(--display);
  color: var(--red);
}
.next-project {
  padding: 7rem 0;
}
.next-project a {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-top: 1px solid;
  padding-top: 2rem;
}
.next-project h2 {
  font: 600 clamp(2.5rem, 6vw, 6rem) / 0.9 var(--display);
  letter-spacing: -0.06em;
  margin: 1rem 0;
}
.kcff .case-visual {
  background: var(--red);
}
.kcff .poster {
  background: var(--orange);
  color: #f9d7c1;
}
.museum .case-visual {
  background: #c7b78f;
}
.museum .poster {
  background: var(--navy);
  color: var(--cream);
}
@media (max-width: 850px) {
  .case-meta,
  .case-intro,
  .process-grid {
    grid-template-columns: 1fr;
  }
  .case-hero h1 {
    margin-top: 3rem;
  }
  .case-visual {
    min-height: 60vh;
    margin-bottom: 5rem;
  }
  .case-intro {
    padding-bottom: 5rem;
  }
  .case-process {
    padding-block: 5rem;
  }
}