/* 05 — ONE, THEN MANY
   The rhythm carries the story without a word added. The cover shows
   the one real thing. The Origin keeps a single small one beside a
   narrow, private column. The Evolution turns dark and the same thing
   repeats in rows along the bottom: made for one person, used by millions. */

.th-many { --ground: #F6EFE5; --ink: #221A16; }

.th-many.cover { background: var(--ground); color: var(--ink); --stage-mt: 48px; --photo-s: .86; --icon-s: .66; }
.th-many .series { color: rgba(34, 26, 22, .55); }
.th-many .hook { font-size: 62px; line-height: 1.14; font-weight: 600; letter-spacing: -1.4px; }
.th-many .stat {
  margin-top: 26px; font-size: 44px; line-height: 1.3; font-weight: 400;
  letter-spacing: -.4px; color: rgba(34, 26, 22, .80);
}
.th-many .stat b { color: var(--ink); }
.th-many .obj { box-shadow: 0 2px 6px rgba(34, 26, 22, .10), 0 22px 44px rgba(34, 26, 22, .18); }
.th-many .obj.photo { border-radius: 18px; }
.th-many .foot { color: rgba(34, 26, 22, .56); }

.th-many.origin {
  background: var(--ground); color: var(--ink);
  --st-measure: 728px; --copy-size: 40px; --copy-lh: 1.42; --copy-gap: 28px;
}
.th-many.origin .kicker { color: rgba(34, 26, 22, .50); }
.th-many.origin .story-art {
  display: flex; align-items: flex-end; justify-content: flex-end;
  position: absolute; z-index: 1;
  right: 64px; bottom: 84px; width: 176px; height: 210px;
}
.th-many.origin .story-art .obj.icon { width: 140px; height: 140px; }
.th-many.origin .story-art .obj.photo { width: 176px; border-radius: 12px; }

.th-many.evolution {
  background: #1F1915; color: #F3E9DE;
  --copy-weight: 300; --copy-size: 40px; --copy-lh: 1.42; --copy-gap: 28px;
  --st-pt: 140px; --st-pb: 420px;
}
.th-many.evolution .kicker { color: rgba(243, 233, 222, .50); }
.th-many.evolution .story-art {
  display: block; position: absolute; z-index: 1;
  left: -40px; right: -40px; bottom: 0; height: 380px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.55) 38%, #000 78%);
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.55) 38%, #000 78%);
}
.th-many .many {
  position: absolute; left: 0; right: 0; bottom: -30px;
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 26px 20px; align-items: center; justify-items: center;
}
.th-many .many .obj { box-shadow: none; }
.th-many .many .obj.icon { width: 112px; height: 112px; }
.th-many .many .obj.photo { width: 100%; max-height: 132px; border-radius: 10px; }
/* the middle row sits half a step over, so the rows read as a crowd, not a table */
.th-many .many .obj:nth-child(n+8):nth-child(-n+14) { transform: translateX(50%); }