:root {
  --ink: #0a0a0a;
  --paper: #f4ecd8;
  --paper-shadow: #d9cfb7;
  --hot: #ff2d55;
  --acid: #d6ff3a;
  --blue: #2d5cff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(circle at 20% 10%, #2a2a2a 0%, #0a0a0a 60%) fixed;
  font-family: 'Space Mono', monospace;
  color: var(--ink);
  min-height: 100vh;
  padding: 20px 12px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flyer {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--paper);
  padding: 28px 22px 0;
  box-shadow:
    0 0 0 1px #000,
    14px 14px 0 #000,
    24px 24px 60px rgba(0,0,0,0.6);
  overflow: hidden;
  transform: rotate(-0.6deg);
}

/* Torn-edge top */
.flyer::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 14px;
  background:
    radial-gradient(circle at 5px 14px, var(--paper) 5px, transparent 6px) 0 0/14px 14px repeat-x,
    #000;
}

/* Halftone dots */
.halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(#000 1px, transparent 1.6px);
  background-size: 9px 9px;
  opacity: 0.07;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Paper noise/grain */
.noise {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.03) 0 1px, transparent 1px 4px);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.top, .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 700;
  border-top: 2px dashed #000;
  padding: 10px 0;
  position: relative;
  z-index: 2;
}
.top { border-top: none; border-bottom: 2px dashed #000; margin-bottom: 18px; }
.stamp.right { text-align: right; }

/* Headline */
.headline {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 8px 0 22px;
}
.line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; line-height: 0.9; }
.line-1 { margin-bottom: 10px; }

.word.ransom {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(48px, 14vw, 110px);
  padding: 4px 12px 6px;
  background: var(--ink);
  color: var(--paper);
  display: inline-block;
  border: 3px solid #000;
  box-shadow: 6px 6px 0 var(--hot);
  transform: rotate(-3deg);
  text-transform: uppercase;
}
.word.r2 {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--blue);
  font-family: 'Bowlby One', sans-serif;
  transform: rotate(2deg);
  border-style: dashed;
}
.word.r3 {
  background: var(--hot);
  color: var(--paper);
  font-family: 'Bungee Shade', sans-serif;
  box-shadow: 6px 6px 0 #000;
  transform: rotate(-1deg);
}

.line-2 { font-family: 'Bungee Shade', sans-serif; gap: 2px 14px; align-items: center; }
.join {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(56px, 15vw, 130px);
  -webkit-text-stroke: 3px #000;
  color: var(--paper);
  text-shadow: 6px 6px 0 #000;
  letter-spacing: -0.02em;
}
.jelly {
  font-family: 'Bungee Shade', sans-serif;
  font-size: clamp(64px, 18vw, 150px);
  color: var(--hot);
  background: linear-gradient(90deg, #ff2d55, #ff8a00, #ffd400, #2d5cff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(4px 4px 0 #000);
  letter-spacing: -0.02em;
}
.dot {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(56px, 15vw, 130px);
  color: var(--acid);
  -webkit-text-stroke: 3px #000;
}

/* Manifesto */
.manifesto {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 2px solid #000;
  padding: 16px 18px;
  margin: 8px auto 22px;
  max-width: 560px;
  transform: rotate(0.4deg);
  box-shadow: 5px 5px 0 #000;
  font-size: 15px;
  line-height: 1.45;
}
.manifesto p { margin: 0 0 10px; }
.manifesto b { background: var(--acid); padding: 0 4px; }
.checks { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: 1fr; gap: 4px; font-weight: 700; }
.checks li { font-family: 'Space Mono', monospace; }

@media (min-width: 540px) {
  .checks { grid-template-columns: 1fr 1fr; }
}

/* CTA */
.cta { position: relative; z-index: 2; text-align: center; padding: 4px 0 28px; }
.big-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(20px, 5vw, 30px);
  padding: 16px 22px;
  border: 3px solid #000;
  box-shadow: 8px 8px 0 var(--hot);
  transform: rotate(-1deg);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  letter-spacing: 0.02em;
}
.big-button:hover { transform: rotate(-1deg) translate(-2px,-2px); box-shadow: 12px 12px 0 var(--hot); }
.big-button:active { transform: rotate(-1deg) translate(4px,4px); box-shadow: 2px 2px 0 var(--hot); }
.big-button .arrow { background: var(--acid); color: #000; padding: 2px 10px; border: 2px solid #000; }
.fine { font-size: 12px; margin-top: 14px; opacity: 0.75; font-style: italic; }

/* Tear-off tabs */
.tabs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-top: 2px dashed #000;
  margin: 6px -22px 0;
}
.tab {
  border-right: 2px dashed #000;
  padding: 14px 4px 18px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
}
.tab:last-child { border-right: none; }
.tab span { display: inline-block; }

@media (max-width: 520px) {
  .tabs { grid-template-columns: repeat(4, 1fr); }
  .tab:nth-child(4) { border-right: none; }
}

/* Action buttons (off-flyer) */
.actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
.action {
  background: var(--acid);
  color: #000;
  border: 2px solid #000;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 4px 4px 0 #fff2;
  transition: transform 0.08s ease;
}
.action:hover { transform: translate(-1px,-1px); }
.action:active { transform: translate(2px,2px); }

/* Jitter on shuffle */
.jitter .word.ransom { animation: jitter 0.4s steps(4); }
@keyframes jitter {
  0% { transform: rotate(-3deg) translate(0,0); }
  25% { transform: rotate(2deg) translate(-2px,1px); }
  50% { transform: rotate(-4deg) translate(2px,-1px); }
  75% { transform: rotate(1deg) translate(-1px,2px); }
  100% { transform: rotate(-3deg) translate(0,0); }
}

/* Print */
@media print {
  body { background: #fff; padding: 0; }
  .actions { display: none; }
  .flyer { box-shadow: none; transform: none; }
}