/* stack-3d showpiece: no kit, a quiet charcoal ground so the photo cards and their fold carry it. */
:root { --ground: #121110; --ink: #fbf8f2; }
* { box-sizing: border-box; }
html { scroll-behavior: auto; overflow-x: clip; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 500 16px/1.4 "Inter Tight", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
main { display: flex; justify-content: center; padding: 8svh clamp(16px, 4vw, 48px) 0; }
.stack3d { width: 100%; max-width: 920px; --stack-top: 8svh; }
.card { overflow: hidden;   /* position comes from the part (sticky) */
   border-radius: 28px; background: #2a2724; box-shadow: 0 -1px 0 rgba(255,255,255,.08) inset; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card::after {             /* a scrim so the line reads on any photo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,.55) 100%);
}
.txt { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(24px, 4.5vw, 52px); display: grid; gap: 14px; }
.n { font-size: 15px; letter-spacing: .08em; opacity: .8; font-variant-numeric: tabular-nums; }
h2 { margin: 0; font: 600 clamp(44px, 8.4vw, 92px)/.95 "Inter Tight", sans-serif; letter-spacing: -.045em; max-width: 9em; text-wrap: balance; }
@media (max-width: 600px) { .card { border-radius: 20px; } .n { font-size: 13px; } }