.project-archive {
  padding: clamp(78px, 9vw, 150px) clamp(22px, 5vw, 88px);
  color: #4a4383;
  background: linear-gradient(145deg, #fffdf4, #f7f1ff 55%, #fff5dc);
  border-block: 3px solid #5572d9;
}

.project-archive-head {
  display: grid;
  grid-template-columns: minmax(250px, .85fr) minmax(320px, 1.15fr);
  gap: clamp(28px, 6vw, 110px);
  align-items: end;
  max-width: 1500px;
  margin: 0 auto clamp(45px, 6vw, 90px);
}

.project-archive-head span {
  display: block;
  margin-bottom: 14px;
  font: 700 11px/1.4 "Space Mono", monospace;
  letter-spacing: .08em;
}

.project-archive-head h2 {
  margin: 0;
  color: #4a4383;
  font: 900 clamp(46px, 6.5vw, 106px)/.84 "Archivo Black", sans-serif;
  letter-spacing: -.055em;
}

.project-archive-head p {
  max-width: 720px;
  margin: 0;
  font: 500 clamp(16px, 1.35vw, 21px)/1.65 "Noto Sans SC", sans-serif;
}

.project-archive-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2.1vw, 34px);
  max-width: 1600px;
  margin: 0 auto;
}

.project-archive-grid figure {
  grid-column: span 6;
  align-self: start;
  min-width: 0;
  margin: 0;
}

.project-archive-grid figure:nth-child(5n + 1),
.project-archive-grid figure.is-wide {
  grid-column: 1 / -1;
}

.project-archive-grid img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82svh;
  object-fit: contain;
  background: rgba(255,255,255,.72);
  border: 2px solid #5572d9;
  box-shadow: 7px 8px 0 rgba(169,230,255,.9);
}

.project-archive-grid figcaption {
  padding: 13px 3px 0;
  color: #4a4383;
  font: 700 11px/1.55 "Space Mono", monospace;
  letter-spacing: .035em;
}

.project-archive-count {
  white-space: nowrap;
  opacity: .72;
}

body[data-project="chromacorp"] .project-archive {
  color: #f8f4e8;
  background: linear-gradient(150deg, #090a0d, #17191e 62%, #26232f);
  border-color: rgba(255,255,255,.78);
}

body[data-project="chromacorp"] .project-archive-head h2,
body[data-project="chromacorp"] .project-archive-head p,
body[data-project="chromacorp"] .project-archive-grid figcaption {
  color: #f8f4e8;
}

body[data-project="chromacorp"] .project-archive-grid img {
  background: #111318;
  border-color: rgba(255,255,255,.8);
  box-shadow: 7px 8px 0 #f2b6db;
}

@media (max-width: 760px) {
  .project-archive { padding: 66px 5vw 78px; }
  .project-archive-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 38px; }
  .project-archive-head h2 { font-size: clamp(43px, 13vw, 62px); }
  .project-archive-head p { font-size: 15px; }
  .project-archive-grid { grid-template-columns: 1fr; gap: 28px; }
  .project-archive-grid figure,
  .project-archive-grid figure:nth-child(5n + 1),
  .project-archive-grid figure.is-wide { grid-column: 1; }
  .project-archive-grid img { max-height: none; box-shadow: 5px 6px 0 rgba(169,230,255,.9); }
  .project-archive-grid figcaption { padding-top: 10px; font-size: 10px; }
}