:root {
  --paper: #f4f0e7;
  --red: #dd4a35;
  --ink: #151515;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
.poster-page { align-items: center; display: flex; flex-direction: column; gap: 30px; min-height: 100svh; padding: 58px 16px 64px; }
.poster { display: block; height: auto; max-width: 100%; object-fit: contain; width: min(560px, 100%); }
.telegram-button { align-items: center; background: var(--red); box-shadow: 11px 11px 0 var(--ink); color: #fff; display: inline-flex; font-size: clamp(20px, 4.5vw, 28px); font-weight: 800; justify-content: center; min-height: 84px; padding: 0 48px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.telegram-button span { font-size: 1.25em; margin-left: 18px; }
.telegram-button:hover, .telegram-button:focus-visible { box-shadow: 5px 5px 0 var(--ink); transform: translate(6px, 6px); }
@media (max-width: 560px) { .poster-page { gap: 24px; padding: 34px 14px 46px; } .telegram-button { min-height: 70px; padding: 0 30px; width: min(402px, 92vw); } }
@media (prefers-reduced-motion: reduce) { .telegram-button { transition: none; } }