/* ── Fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: 'TeenageDream';
  src: url('assets/fonts/teenagedream.ttf') format('truetype');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'Archivo Black E';
  src: url('assets/fonts/archivo-black.woff2') format('woff2');
  font-weight: 900;
  font-display: block;
}

/* ── Tokens ────────────────────────────────────────────── */
:root {
  --ink: #ff401a;          /* Noise orange */
  --paper: #faf7f2;   /* warm paper white */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Stage: horizontal scale reference, 1cqw = 12.8 design px ── */
.stage {
  position: relative;
  width: min(100%, 1600px);
  margin: 0 auto;
  container-type: inline-size;
  background: var(--paper);
}

/* ── Hero: the ideal viewport (1280 × 832 design frame).
   Vertical anchors are % of the hero so the "join the fight" line
   always straddles the fold — the scroll tease. ── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 52cqw;   /* only ultra-squat windows fall back to scrolling */
}
.below-fold {
  height: 12cqw;   /* room for the cut line to scroll into view */
}

/* ── Footer: oversized wordmark cropped by the page end ── */
.site-footer {
  position: relative;
  height: 28cqw;
  overflow: hidden;
  background: var(--paper);
  color: #0a0a0a;
}
.footer-links {
  position: absolute;
  right: 3cqw;
  bottom: 2.4cqw;
  display: flex;
  flex-direction: column;
  gap: 0.9cqw;
  text-align: right;
}
.footer-links a {
  font-family: -apple-system, 'Archivo Black E', sans-serif;
  font-weight: 700;
  font-size: 1.15cqw;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0a0a0a;
}
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--ink);
}
.footer-wordmark {
  filter: url(#ink);
  position: absolute;
  left: -0.4cqw;
  bottom: 0;
  width: 78cqw;
  height: auto;
  translate: 0 24%;
  pointer-events: none;
  user-select: none;
}

/* ── Headline ──────────────────────────────────────────── */
.headline {
  filter: url(#ink);
  position: absolute;
  left: 50%;
  top: 22.115%;                    /* 184 / 832 */
  translate: -50% -50%;
  margin: 0;
  font-family: -apple-system, 'Archivo Black E', sans-serif;
  font-weight: 900;
  font-size: 9.375cqw;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
  user-select: none;
}

/* ── Handwriting ───────────────────────────────────────── */
.hand {
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  font-family: 'TeenageDream', 'Comic Sans MS', cursive;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
  user-select: none;
}
.unless { top: 87.62%;  font-size: 9.375cqw; letter-spacing: 0.04em; }  /* 729 / 832 */
.join   { top: 104.21%; font-size: 6.094cqw; letter-spacing: 0.06em;
          z-index: 1; }  /* 867 / 832 — crosses into the footer: explicit
                            stacking so WebKit keeps it above the footer bg */

/* ── Button + arrows cluster (rigid, anchored at button center) ── */
.cluster {
  position: absolute;
  left: 50%;
  top: 60.96%;                     /* 507.2 / 832 */
  width: 0;
  height: 0;
  transform: scale(calc(var(--fit, 1) * var(--boost, 1))); /* auto-fit x mobile boost */
}
.cluster-lift { z-index: 6; }      /* vinyl rides above the paper layer */

/* ── Hand-drawn arrows (offsets from button center) ────── */
.arrow {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.arrow path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arrow-tl { left: -24.219cqw; top: -17.359cqw; width: 17.969cqw; height: 13.281cqw; }
.arrow-tr { left:   3.906cqw; top: -16.969cqw; width: 19.531cqw; height: 13.281cqw; }
.arrow-bl { left: -24.219cqw; top: -0.375cqw; width: 17.969cqw; height: 10.938cqw; }
.arrow-br { left:   4.688cqw; top: -0.375cqw; width: 19.141cqw; height: 11.719cqw; }

/* WebKit clips chained filters on multi-line text: each line gets its
   own single-line box and carries the filters itself */
.jline { display: inline-block; }

/* ── Squiggle boil (seed-animated filters) + ink bleed ── */
/* animated ink skips the #ink pass: the boil displacement already
   roughens the edges, and the single filter halves WebKit raster work */
.boil-a { filter: url(#squig-a); }
.boil-b { filter: url(#squig-b); }
.boil-c { filter: url(#squig-c); }
@media (prefers-reduced-motion: reduce) {
  .boil-a, .boil-b, .boil-c { filter: url(#squig-still) url(#ink); }
}

/* ── The sticker button (WebGL peel inside) ────────────── */
.sticker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  translate: -50% -50%;
  width: 13.219cqw;
  height: 13.922cqw;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.sticker:focus-visible {
  outline: 0.25cqw dashed var(--ink);
  outline-offset: 0.6cqw;
  border-radius: 50%;
}
/* canvas is padded around the die so the curl + shadow can breathe */
#peel {
  position: absolute;
  inset: -18%;
  width: 136%;
  height: 136%;
  display: block;
  pointer-events: none;
}

/* ── Scattered slop stickers (peelable, above the paper) ── */
.slop {
  position: absolute;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  z-index: 6;
  filter: drop-shadow(0 0.35cqw 0.8cqw rgba(30, 12, 4, 0.16));
}
.slop canvas {
  position: absolute;
  inset: -18%;
  width: 136%;
  height: 136%;
  display: block;
  pointer-events: none;
}
.slop-1 { left: 3.5cqw;  top: 6%;    width: 8.5cqw; }
.slop-2 { right: 4cqw;   top: 26%;   width: 6.5cqw; }
.slop-3 { left: 5cqw;    top: 58%;   width: 5.5cqw; }
.slop-4 { right: 7cqw;   top: 79%;   width: 7.5cqw; }
.slop-5 { left: 12cqw;   top: 101%;  width: 6cqw; }
.slop-6 { left: 30cqw;   top: 3.5cqw;  width: 7cqw; }
.slop-7 { right: 8cqw;   top: 9cqw; width: 9cqw; }

/* ── Crumpled paper: lit facets over the ink, under the vinyl ── */
.paper {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.75;
}
.paper canvas { display: block; width: 100%; height: 100%; }

/* ── Mobile (portrait phones) ──────────────────────────── */
@media (max-width: 700px) {
  .headline { font-size: 13.5cqw; }
  .unless   { font-size: 13cqw; letter-spacing: 0.03em; top: 89.5%; }
  .join     { font-size: 7.2cqw; }

  /* button + arrows grow together; auto-fit still clamps to the text gap */
  .cluster { --boost: 2.1; }

  /* fewer, bigger badges tucked into the gaps */
  .slop-1 { left: 2cqw;  top: 1.5%;  width: 15cqw; }
  .slop-2 { right: 2.5cqw; top: 30%; width: 13cqw; }
  .slop-3 { display: none; }
  .slop-4 { right: 4cqw; top: 74%;  width: 14cqw; }
  .slop-5 { left: 6cqw;  top: 108%; width: 13cqw; }

  .site-footer { height: 56cqw; }
  /* full-width wordmark on mobile: the link moves above it */
  .footer-links { right: 6cqw; bottom: 24cqw; gap: 2.4cqw; }
  .footer-links a { font-size: 4.2cqw; }
  .footer-wordmark { width: 96cqw; }
  .slop-6 { display: none; }
  .slop-7 { right: 5cqw; top: 34cqw; width: 16cqw; }  /* slapped on the wordmark */
}