/* Chapters 5 and 6: the phone taken apart, then made yours. */
.assembly { padding: 0; }
.built {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-areas: 'copy stage';
  min-height: 100svh;
  padding-block: 0;
  background: var(--ground);
  overflow: clip;
}
.built-copy { grid-area: copy; position: relative; display: grid; align-content: center; gap: clamp(24px, 4vh, 44px); padding-block: var(--bar-h) var(--margin); }
.built-stage { position: absolute; inset: 0; }
.parts { display: grid; gap: clamp(10px, 1.8vh, 18px); }
.part { display: grid; gap: 2px; }
.part b { font-size: clamp(19px, 1.7vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.part span:not(.still) { font-size: clamp(15px, 1.1vw, 17px); color: var(--ink-2); }
.part-still { display: none; }

.brand {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  min-height: 100svh;
  padding-block: var(--bar-h) var(--margin);
  background: var(--ground-2);
}
.brand h2 { font-size: var(--type-giant); }
.brand h2 span { display: block; white-space: nowrap; }

@media (max-width: 760px) {
  .built { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy'; }
  .built-stage { display: none; }
  .built-copy { padding-block: calc(var(--bar-h) + 24px) 48px; }
  .parts { gap: 32px; }
  .part-still { display: block; position: relative; inset: auto; width: 100%; aspect-ratio: 5 / 6; margin-bottom: 10px; border-radius: 12px; }
  .part-still img { object-position: center 30%; }
  .part:last-child .part-still img { object-position: center bottom; }
  .brand { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: calc(var(--bar-h) + 16px); }
  .brand h2 { justify-self: start; }
}