@font-face {
  font-family: Inter;
  src: url('./assets/Inter-3.19.var.woff2') format('woff2');
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--poster-color, #1491ef); color: #fff; font-family: Inter, sans-serif; font-synthesis: none; }
p, h1, figure { margin: 0; }
img { display: block; }

.poster {
  container-type: inline-size;
  position: relative;
  width: min(100%, 792px);
  aspect-ratio: 792 / 1267;
  margin-inline: auto;
  overflow: hidden;
  background: var(--poster-color, #1491ef);
}

/* One design pixel, scaled with the original 792px-wide Figma frame. */
.artwork { --u: calc(100cqw / 792); position: absolute; inset: 0; }
.artwork > * { position: absolute; }
.crop { overflow: hidden; }
.crop img { position: absolute; max-width: none; }

.try-arrow { left: calc(-165 * var(--u)); top: calc(-59 * var(--u)); }
.try-arrow > img { width: calc(947.724 * var(--u)); height: calc(692.372 * var(--u)); }
.try-shaft, .try-head, .bite-arrow { display: flex; align-items: center; justify-content: center; }
.try-shaft { width: calc(861.593 * var(--u)); height: calc(597.322 * var(--u)); }
.try-shaft > div {
  flex: none;
  width: calc(895 * var(--u));
  height: calc(173 * var(--u));
  border-radius: calc(277.5 * var(--u)) 0 0 calc(277.5 * var(--u));
  background: #fff;
  transform: rotate(-150deg) scaleY(-1);
}
.try-head {
  position: absolute;
  left: calc(604.46 * var(--u));
  top: calc(304.82 * var(--u));
  width: calc(343.267 * var(--u));
  height: calc(387.556 * var(--u));
}
.try-head > div { position: relative; width: calc(328 * var(--u)); height: calc(207 * var(--u)); transform: rotate(120deg); }
.try-head img { position: absolute; left: 6.7%; top: 0; width: 86.6%; height: 75%; }
.bite-arrow { left: calc(10 * var(--u)); top: calc(349 * var(--u)); width: calc(928.7 * var(--u)); height: calc(725.556 * var(--u)); }
.bite-arrow > div { position: relative; flex: none; width: calc(883 * var(--u)); height: calc(328 * var(--u)); transform: rotate(-150deg); }
.bite-arrow img { position: absolute; left: -5.34%; top: 0; width: 105.34%; height: 100%; }

.diagonal-label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label-color, var(--poster-color, #1491ef));
  font-size: 72px;
  font-weight: 900;
  line-height: 87px;
  letter-spacing: 2px;
  white-space: nowrap;
}
/* Center visible glyphs, including descenders in Try/Spin. Scale the complete
   text line so responsive font-size rounding cannot change its baseline. */
.diagonal-label span { flex: none; transform: rotate(30deg) scale(calc(100cqw / 792px)) translateY(calc(var(--label-offset) * 1px)); }
.try-label { --label-offset: -3.35; left: calc(-10.1 * var(--u)); top: calc(51.058 * var(--u)); width: calc(480.843 * var(--u)); height: calc(327.844 * var(--u)); }
.bite-label { --label-offset: 1.59; left: calc(309 * var(--u)); top: calc(591.206 * var(--u)); width: calc(500.761 * var(--u)); height: calc(339.344 * var(--u)); }

.object { --image-source: url('./assets/chips-and-donut.png'); width: calc(279 * var(--u)); }
.object .crop { position: absolute; inset: 0; }
.object img { left: var(--image-x); top: var(--image-y); width: var(--image-width); height: var(--image-height); }
/* Each Figma effect uses the original alpha, never another shadow's output.
   Mask the child, then blur its parent so the glow extends beyond the crop. */
.shadow { position: absolute; inset: 0; pointer-events: none; }
.shadow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  mask: var(--image-source) var(--image-x) var(--image-y) / var(--image-width) var(--image-height) no-repeat;
}
.reflection {
  color: #fff;
  opacity: 0.15;
  transform: translate(calc(-40 * var(--u)), calc(-40 * var(--u)));
  /* Figma blur radius 50 corresponds to Gaussian standard deviation 25. */
  filter: blur(calc(25 * var(--u)));
}
.contact-shadow {
  color: #000;
  opacity: var(--contact-opacity);
  transform: translate(calc(5 * var(--u)), calc(5 * var(--u)));
  filter: blur(calc(var(--contact-blur) * var(--u)));
}
.cast-shadow {
  color: #000;
  opacity: var(--cast-opacity, 0.4);
  transform: translate(calc(20 * var(--u)), calc(20 * var(--u)));
  filter: blur(calc(var(--cast-blur, 7.5) * var(--u)));
}
.chips {
  left: calc(477 * var(--u)); top: calc(213 * var(--u)); height: calc(279 * var(--u));
  --image-x: calc(-0.2445 * 279 * var(--u));
  --image-y: calc(-0.2683 * 279 * var(--u));
  --image-width: 282.16%;
  --image-height: 153.75%;
  --contact-blur: 3.5;
  --contact-opacity: 0.59;
}
.donut {
  left: calc(30 * var(--u)); top: calc(488 * var(--u)); height: calc(283 * var(--u));
  --image-x: calc(-1.5818 * 279 * var(--u));
  --image-y: calc(-0.2735 * 283 * var(--u));
  --image-width: 284.44%;
  --image-height: 153.29%;
  --contact-blur: 5;
  --contact-opacity: 0.66;
}
.or { left: calc(349 * var(--u)); top: calc(452 * var(--u)); font-size: calc(64 * var(--u)); font-weight: 800; line-height: calc(77 * var(--u)); letter-spacing: calc(2 * var(--u)); }

.campaign-title { left: calc(54 * var(--u)); top: calc(887 * var(--u)); width: calc(506 * var(--u)); height: calc(152 * var(--u)); }
.campaign-title > * { position: absolute; white-space: nowrap; }
.same-money { top: calc(13 * var(--u)); left: 0; font-size: calc(48 * var(--u)); font-weight: 700; line-height: calc(52 * var(--u)); }
.different-story { top: calc(66 * var(--u)); left: calc(2 * var(--u)); font-size: calc(64 * var(--u)); font-weight: 900; font-style: oblique 10deg; font-variation-settings: 'slnt' -10; line-height: calc(77 * var(--u)); letter-spacing: calc(2 * var(--u)); }
.top-rule, .bottom-rule { left: calc(2 * var(--u)); height: calc(3 * var(--u)); }
.top-rule { top: calc(-3 * var(--u)); width: calc(127 * var(--u)); }
.bottom-rule { top: calc(149 * var(--u)); width: calc(305 * var(--u)); }
.logo { left: calc(56 * var(--u)); top: calc(1104 * var(--u)); width: calc(307 * var(--u)); height: calc(107 * var(--u)); }
.logo img { left: -1.23%; top: -12.74%; width: 102.46%; height: 125.49%; }
.learn-more { left: calc(572 * var(--u)); top: calc(1040 * var(--u)); width: calc(165 * var(--u)); }
.qr { position: relative; margin-left: calc(33 * var(--u)); width: calc(131 * var(--u)); height: calc(131 * var(--u)); }
.qr img { left: -9.79%; top: -10.07%; width: 119.33%; height: 119.9%; }
figcaption { margin-top: calc(6 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; line-height: calc(17 * var(--u)); letter-spacing: calc(1 * var(--u)); text-align: right; white-space: nowrap; }

.music-poster { --poster-color: #f79321; }
.music-poster .try-label { --label-offset: 3.1; left: calc(45 * var(--u)); top: calc(85 * var(--u)); width: calc(365.661 * var(--u)); height: calc(261.344 * var(--u)); }
.music-poster .bite-label { --label-offset: -2.71; left: calc(367 * var(--u)); top: calc(629 * var(--u)); width: calc(392.508 * var(--u)); height: calc(276.844 * var(--u)); }
.music-poster .object {
  --image-source: url('./assets/cards-and-tickets.png');
  --contact-blur: 5;
  --contact-opacity: 0.5;
  --cast-blur: 12.5;
  --cast-opacity: 0.25;
}
.cards {
  left: calc(414 * var(--u)); top: calc(169 * var(--u)); width: calc(369 * var(--u)); height: calc(303 * var(--u));
  --image-x: calc(-0.0404 * 369 * var(--u));
  --image-y: calc(-0.4372 * 303 * var(--u));
  --image-width: 205.09%;
  --image-height: 187.45%;
}
.tickets {
  left: calc(15 * var(--u)); top: calc(508 * var(--u)); width: calc(345 * var(--u)); height: calc(296 * var(--u));
  --image-x: calc(-1.0616 * 345 * var(--u));
  --image-y: calc(-0.4348 * 296 * var(--u));
  --image-width: 209.27%;
  --image-height: 183%;
}

.pizza-poster { --poster-color: #4cae46; --label-color: #50b849; }
.pizza-poster .try-label { --label-offset: -0.97; left: calc(2 * var(--u)); top: calc(57 * var(--u)); width: calc(476.513 * var(--u)); height: calc(325.344 * var(--u)); }
.pizza-poster .bite-label { --label-offset: 0; left: calc(316 * var(--u)); top: calc(597 * var(--u)); width: calc(491.235 * var(--u)); height: calc(333.844 * var(--u)); }
.pizza-poster .object {
  --image-source: url('./assets/roulette-and-pizza.png');
  --contact-blur: 2.5;
  --contact-opacity: 0.5;
}
.roulette {
  left: calc(469 * var(--u)); top: calc(226 * var(--u)); width: calc(298 * var(--u)); height: calc(260 * var(--u));
  --image-x: calc(-0.0344 * 298 * var(--u));
  --image-y: calc(-0.1657 * 260 * var(--u));
  --image-width: 205.41%;
  --image-height: 132.64%;
}
.pizza {
  left: calc(23 * var(--u)); top: calc(493 * var(--u)); width: calc(293 * var(--u)); height: calc(258 * var(--u));
  --image-x: calc(-1.106 * 293 * var(--u));
  --image-y: calc(-0.1913 * 258 * var(--u));
  --image-width: 213.54%;
  --image-height: 136.38%;
}
@media print {
  @page { margin: 0; size: 792px 1267px; }
  body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .poster { width: 100%; }
}