/* DESIGN prototype: sequence and scale, with no final artwork. */
.design-sequence{
  display:flex;
  flex-direction:column;
  gap:clamp(96px,12vw,184px);
  padding-bottom:48px;
}
.design-placeholder{
  position:relative;
  flex:none;
  margin:0;
  border:1px solid #8a8a85;
  background:#deded9;
  color:#353531;
  font-family:var(--mono);
}
.placeholder-x{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(48px,6vw,88px);
  line-height:1;
  font-weight:400;
}
.placeholder-label{
  position:absolute;
  bottom:16px;
  left:0;
  width:100%;
  text-align:center;
  font-size:10px;
  line-height:1.4;
  letter-spacing:.045em;
}
.design-opening{width:86%;aspect-ratio:4/3}
.design-support{width:36%;aspect-ratio:1;align-self:flex-end;margin-right:4%}
.design-landscape{width:100%;aspect-ratio:5/2;margin-top:clamp(24px,4vw,64px)}
.design-portrait{width:43%;aspect-ratio:3/4;margin-left:12%}
.design-pair{display:flex;align-items:flex-start;justify-content:space-between;gap:6%;margin-top:32px}
.design-pair-first{width:52%;aspect-ratio:4/3}
.design-pair-second{width:38%;aspect-ratio:3/4;margin-top:clamp(72px,10vw,144px)}
.design-closing{width:94%;aspect-ratio:16/9;align-self:center;margin-top:clamp(32px,6vw,96px)}
@media(max-width:700px){
  .design-sequence{gap:88px;padding-bottom:24px}
  .design-opening,.design-support,.design-landscape,.design-portrait,.design-closing{
    width:100%;
    margin:0;
  }
  .design-landscape{aspect-ratio:16/9;margin-block:24px}
  .design-pair{flex-direction:column;gap:40px;margin:16px 0}
  .design-pair-first,.design-pair-second{width:100%;margin:0}
  .design-closing{margin-top:24px}
}

/* Project metadata occupies the existing space above each first work. */
.design-project{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:inherit;
  min-width:0;
}
.design-project-meta{
  position:absolute;
  top:-44px;
  left:0;
  color:var(--muted);
  font:10px/1.4 var(--mono);
  letter-spacing:.045em;
}
.design-project-meta h2{margin:0;font:inherit;color:var(--ink)}
.design-project--02 .design-project-meta{top:calc(clamp(24px,4vw,64px) - 44px)}
.design-project--03 .design-project-meta{left:12%}
@media(max-width:700px){
  .design-sequence{gap:136px}
  .design-project{gap:88px}
  .design-project--01 .design-project-meta{top:-32px}
  .design-project--02 .design-project-meta{top:-20px}
  .design-project--03 .design-project-meta{left:0}
}