/* Palette lifted from the poster PDF */
:root {
  --ink: #1b1230;
  --paper: #fbf7ea;
  --cream: #f2ecdc;
  --pink: #ff5fa8;
  --black: #161414;
  --yellow: #ffe234;
  --red: #e3242b;
  --red-dark: #9e1015;
  --tape: rgba(236, 226, 190, .78);
  --type: 'Special Elite', 'American Typewriter', 'Courier New', monospace;
  --marker: 'Permanent Marker', 'Marker Felt', cursive;
  --mono: 'Courier Prime', 'Courier New', monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font: 17px/1.6 var(--type);
  overflow-x: hidden;
  position: relative;   /* the chase layer spans the whole page */
}
img { max-width: 100%; }
a { color: inherit; }

/* Each section is one poster sheet, with tape on two corners */
.sheet {
  position: relative;
  padding: 72px 16px 64px;
  text-align: center;
  overflow: hidden;
}
.sheet::before, .sheet::after {
  content: '';
  position: absolute;
  width: 120px; height: 34px;
  background: var(--tape);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  top: 10px;
  z-index: 2;
}
.sheet::before { left: -26px; transform: rotate(-38deg); }
.sheet::after { right: -26px; transform: rotate(38deg); }

.hero { background: var(--pink); padding-top: 64px; }
.anthem { background: var(--black); color: var(--paper); }
.manifesto { background: var(--cream); padding-left: 12px; padding-right: 12px; }
.propaganda { background: var(--yellow); }
.foot { background: var(--red); padding-bottom: 88px; }

/* ---------- ransom-note headings ---------- */
.ransom {
  margin: 0 auto 18px;
  max-width: 980px;
  font: 400 var(--lh) / 1.15 var(--marker);
  text-transform: uppercase;
  letter-spacing: .02em;
  --lh: clamp(30px, 8vw, 56px);
}
.ransom.xl { --lh: clamp(46px, 15vw, 112px); margin-bottom: 8px; }
.ransom.lg { --lh: clamp(34px, 9.4vw, 62px); }
.ransom.md { --lh: clamp(29px, 7.8vw, 44px); }
.ransom.center { text-align: center; }
.ransom.built { line-height: 1; font-size: 0; }
.ransom .w { display: inline-block; white-space: nowrap; margin: 0 calc(var(--lh) * .17) calc(var(--lh) * .14); font-size: 0; }
.ransom .w > * { margin: 0 -1px; vertical-align: middle; }
.ransom .l {
  height: var(--lh);
  width: auto;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px));
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
}
.ransom .c {             /* letters the posters never cut (Q, X, some digits, punctuation) */
  display: inline-block;
  height: var(--lh);
  min-width: calc(var(--lh) * .5);
  padding: 0 .14em;
  font: 400 calc(var(--lh) * .82) / var(--lh) var(--f, var(--marker));
  color: var(--fg, var(--ink));
  background: var(--bg, var(--paper));
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px));
  box-shadow: 0 2px 3px rgba(0, 0, 0, .25);
  text-transform: none;
}
.ransom .c.punct { min-width: 0; padding: 0 .06em; background: none; box-shadow: none; color: inherit; font-family: var(--marker); }
.anthem .ransom .c.punct, .foot .ransom .c.punct { color: var(--paper); }

/* ---------- hero ---------- */
.logo {
  display: block;
  width: min(62vw, 300px);
  height: auto;
  margin: 8px auto 18px;
  transform: rotate(-3deg);
  filter: drop-shadow(0 6px 10px rgba(27, 18, 48, .25));
}
.logo.small { width: min(34vw, 150px); margin-bottom: 10px; }

.scrap {
  display: inline-block;
  max-width: 34em;
  margin: 6px auto 0;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.45 var(--type);
  box-shadow: 0 3px 4px rgba(0, 0, 0, .3);
  transform: rotate(-1.2deg);
}
.scrap.small { font-size: 14px; transform: rotate(1deg); }
.scrap a { text-decoration-thickness: 1px; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.btn {
  display: inline-block;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font: 700 16px/1 var(--mono);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: 3px 3px 0 var(--black);
  transform: rotate(-1deg);
}
.btn.ghost { background: var(--paper); color: var(--ink); transform: rotate(1.2deg); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black); }

/* ---------- anthem ---------- */
.string { position: absolute; left: 0; top: 34%; width: 100%; height: 120px; opacity: .9; pointer-events: none; }
.anthem .ransom, .anthem .card { position: relative; }
.card {
  max-width: 560px;
  margin: 8px auto 26px;
  padding: 22px 20px 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .45);
  transform: rotate(.8deg);
}
.track { margin: 0; font: 400 clamp(22px, 6vw, 30px) / 1.15 var(--marker); }
.meta { margin: 6px 0 18px; font-size: 13px; opacity: .75; }
.controls { display: flex; align-items: center; gap: 16px; text-align: left; }
.play {
  flex: none;
  width: 72px; height: 72px;
  border: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ff6a6f 0 12%, var(--red) 40%, var(--red-dark) 100%);
  box-shadow: 0 0 0 6px rgba(227, 36, 43, .18), 0 0 26px rgba(227, 36, 43, .55);
  color: var(--paper);
  cursor: pointer;
  display: grid; place-items: center;
}
.play svg { width: 34px; height: 34px; fill: currentColor; }
.play .i-pause { display: none; }
.play.on .i-play { display: none; }
.play.on .i-pause { display: inline; }
.play:focus-visible, .loop:focus-visible, .btn:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
.scrub { flex: 1; min-width: 0; }
.times { display: flex; justify-content: space-between; font: 700 13px/1 var(--mono); margin-top: 8px; }

/* the seek bar is a strand of red string; the thumb is a ball of yarn */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; margin: 0;
  background: transparent; cursor: pointer;
  --p: 0%;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--red) var(--p), transparent var(--p)),
              repeating-linear-gradient(90deg, var(--red-dark) 0 6px, transparent 6px 12px);
}
input[type=range]::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--red-dark) 0 6px, transparent 6px 12px);
}
input[type=range]::-moz-range-progress { height: 4px; background: var(--red); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; border: 0;
  background: repeating-linear-gradient(35deg, var(--pink) 0 3px, #c83b7f 3px 5px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}
input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: repeating-linear-gradient(35deg, var(--pink) 0 3px, #c83b7f 3px 5px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}

.loop {
  margin-top: 14px;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 700 14px/1 var(--mono);
  text-transform: uppercase;
  cursor: pointer;
}
.loop[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- meownifesto ---------- */
.paper {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 44px clamp(18px, 5vw, 56px) 48px;
  background: var(--paper);
  text-align: left;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
  transform: rotate(-.4deg);
}
.paper::before {   /* a strip of tape holding the sheet up */
  content: '';
  position: absolute;
  top: -14px; left: 50%;
  width: 130px; height: 32px;
  margin-left: -65px;
  background: var(--tape);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
  transform: rotate(-2deg);
}
.paper .ransom { text-align: center; margin-top: 36px; }
.paper .ransom:first-child { margin-top: 0; }
.paper p { margin: 0 0 1em; }
.decrees { list-style: none; margin: 0 0 1em; padding: 0; }
.decrees li { position: relative; padding: 0 0 0 34px; margin: 0 0 .9em; }
.decrees li::before {
  content: '🐾';
  position: absolute; left: 0; top: .05em;
  font-size: 18px;
  transform: rotate(-12deg);
}
.decrees li:nth-child(even)::before { transform: rotate(14deg); }
.ps { display: inline-block; margin-top: .4em; font-family: var(--marker); color: var(--red); transform: rotate(-1.5deg); }
.sign { text-align: center; font: 700 18px/1 var(--mono); letter-spacing: .12em; margin-top: 22px; }

/* ---------- propaganda ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; }
.gallery figure { margin: 0; padding: 10px 10px 14px; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, .25); }
.gallery figure:nth-child(odd) { transform: rotate(-1.5deg); }
.gallery figure:nth-child(even) { transform: rotate(1.3deg); }
.gallery img { display: block; width: 100%; height: auto; }
.gallery figcaption { margin-top: 8px; font: 14px/1.3 var(--marker); }

/* ---------- footer ---------- */
.foot .scrap a { white-space: nowrap; }

/* ---------- the red dot (it is a psyop) and the army chasing it ---------- */
.chase {
  position: absolute;
  inset: 0;
  overflow: hidden;          /* cats waiting off the edge don't widen the page */
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transition: opacity .6s;
}
.chase.on { opacity: 1; }
.reddot {
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;           /* the hit area; the dot itself is the ::after */
  padding: 0; border: 0;
  background: transparent;
  cursor: crosshair;
  pointer-events: auto;
  z-index: 2;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}
.reddot::after {
  content: '';
  position: absolute;
  left: 15px; top: 15px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ff9a9d 0 18%, #ff2a33 45%, #c4141b 100%);
  box-shadow: 0 0 10px 4px rgba(255, 40, 50, .55), 0 0 26px 10px rgba(255, 40, 50, .25);
}
.cat {
  position: absolute;
  left: 0; top: 0;
  height: auto;
  max-width: none;
  will-change: transform;
  transform: translate3d(-200px, -200px, 0);
}
@media (prefers-reduced-motion: reduce) { .chase { display: none; } }

.toast {
  position: fixed;
  left: 50%; bottom: 22px;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font: 700 15px/1.3 var(--mono);
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
  transform: translate(-50%, calc(100% + 40px)) rotate(-1deg);
  transition: transform .3s ease, visibility 0s .3s;
  visibility: hidden;
  z-index: 60;
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0) rotate(-1deg); visibility: visible; transition: transform .3s ease; }

@media (min-width: 720px) {
  body { font-size: 18px; }
  .sheet { padding: 96px 32px 84px; }
  .sheet::before, .sheet::after { width: 160px; height: 40px; }
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hero .come { margin: 26px auto 4px; }