/* momentum-stickers showpiece: Truus kit (warm off-white, Epilogue 900 lowercase, Lora italic swap word, DM Sans,
   white-keylined die-cut stickers in the kit's accents). */
:root { --paper: #f0ebe6; --ink: #000; --orange: #f5693c; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 18px/1.4 "DM Sans", system-ui, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; }
.board { position: relative; height: 100svh; min-height: 600px; overflow: clip; display: grid; place-items: center; }
.copy { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; gap: 22px; pointer-events: none; }
.copy .btn { pointer-events: auto; }
h1 { margin: 0; font: 900 clamp(84px, 17vw, 184px)/.84 "Epilogue", sans-serif; letter-spacing: -.045em; }
.loop { position: relative; display: inline-block; font: italic 400 1.08em/.8 "Lora", serif; letter-spacing: -.02em; padding: 0 .1em; }
.loop svg { position: absolute; left: -16%; top: -6%; width: 132%; height: 118%; overflow: visible; }
.loop path { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.copy p { margin: 6px 0 0; font-size: 20px; color: rgba(0, 0, 0, .66); }
.btn { display: inline-block; padding: 18px 30px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font: 600 18px/1 "DM Sans", sans-serif; }

.sticker { position: absolute; z-index: 2; width: var(--w); transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)); }
.sticker svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 12px rgb(0 0 0 / .18)) drop-shadow(0 1px 1px rgb(0 0 0 / .2)); }
.s1 { --w: 200px; left: 18%; top: 16%; --tilt: -10deg; }
.s2 { --w: 210px; left: 80%; top: 13%; --tilt: 12deg; }
.s3 { --w: 170px; left: 50%; top: 9%;  --tilt: -4deg; }
.s4 { --w: 210px; left: 12%; top: 46%; --tilt: -14deg; }
.s5 { --w: 190px; left: 87%; top: 45%; --tilt: 8deg; }
.s6 { --w: 120px; left: 70%; top: 70%; --tilt: 14deg; }
.s7 { --w: 260px; left: 25%; top: 84%; --tilt: 6deg; }
.s8 { --w: 160px; left: 82%; top: 87%; --tilt: -12deg; }
.s9 { --w: 180px; left: 15%; top: 68%; --tilt: -6deg; }
@media (max-width: 600px) {
  .sticker { width: calc(var(--w) * .5); }
  .s1 { left: 14%; top: 11%; } .s3 { left: 50%; top: 8%; } .s2 { left: 85%; top: 11%; }
  .s4 { left: 16%; top: 24%; } .s5 { left: 84%; top: 25%; }
  .s9 { left: 18%; top: 75%; } .s6 { left: 82%; top: 72%; } .s7 { left: 32%; top: 89%; } .s8 { left: 80%; top: 89%; }
}