:root {
  --paper: #f3eddb;
  --ink: #0d0d0a;
  --hot: #ff3b1f;
  --acid: #e7fa35;
  --wash: #45d9cf;
  --dust: #cbbfa8;
  --tape: rgba(238, 224, 186, .74);
  --shadow: 9px 10px 0 var(--ink);
  --crop-x: 50%;
  --crop-y: 50%;
  --poster-tilt: -1deg;
  --hero-tilt: 2deg;
}

* { box-sizing: border-box; }

html { background: var(--ink); scroll-behavior: smooth; }

body {
  min-width: 280px;
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--ink) 22%, transparent) 1px, transparent 1.6px),
    linear-gradient(118deg, transparent 0 71%, color-mix(in srgb, var(--hot) 17%, transparent) 71% 75%, transparent 75%);
  background-size: 7px 7px, 100% 100%;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

button, a { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border: 3px solid var(--paper);
  color: var(--paper);
  background: var(--ink);
  font: 900 12px/1 "Courier New", monospace;
}
.skip-link:focus { top: 12px; }

.poster {
  position: relative;
  width: min(1540px, calc(100% - 26px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 14px 0 28px;
  isolation: isolate;
  overflow: clip;
}

.photocopy-noise {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.registration-mark {
  position: absolute;
  z-index: 20;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font: 900 20px/18px monospace;
  text-align: center;
}
.mark-a { top: 52px; left: 3px; }
.mark-b { top: 68%; right: 4px; }

.top-strip,
.bottom-rail {
  position: relative;
  z-index: 15;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  border-block: 4px solid var(--ink);
  font: 900 10px/1 "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bottom-rail { margin-top: 28px; padding: 10px 2px; }
.micro-label { white-space: nowrap; }

.social-links { display: flex; gap: 7px; margin-left: auto; }
.social-links a {
  padding: 7px 10px 6px;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  background: var(--acid);
  text-decoration: none;
  transform: rotate(-1deg);
}
.social-links a:nth-child(2) { background: var(--wash); transform: rotate(1.5deg); }
.social-links a:hover,
.social-links a:focus-visible { color: var(--paper); background: var(--ink); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

.hero-collage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(360px, 1.22fr);
  grid-template-rows: minmax(590px, auto) auto;
  gap: clamp(20px, 4vw, 66px);
  min-height: 780px;
  padding: clamp(58px, 8vw, 124px) clamp(8px, 4vw, 66px) 66px;
  isolation: isolate;
}

.hero-collage::before {
  position: absolute;
  inset: 6% 1.5% 4%;
  z-index: -3;
  content: "";
  border: 4px solid var(--ink);
  background: var(--wash);
  clip-path: polygon(2% 5%, 99% 0, 96% 95%, 0 100%);
  transform: rotate(var(--poster-tilt));
}
.hero-collage::after {
  position: absolute;
  right: -3%;
  bottom: 0;
  z-index: -4;
  width: 67%;
  height: 36%;
  content: "";
  border: 4px solid var(--ink);
  background: var(--hot);
  clip-path: polygon(4% 9%, 97% 0, 100% 81%, 0 100%);
  transform: rotate(3deg);
}

.paper-slab { position: absolute; z-index: -1; pointer-events: none; border: 3px solid var(--ink); }
.slab-a { top: 2%; left: 3%; width: 35%; height: 18%; background: var(--acid); transform: rotate(-6deg); clip-path: polygon(3% 12%, 100% 0, 94% 88%, 0 100%); }
.slab-b { top: 12%; right: 1%; width: 23%; height: 25%; background: var(--paper); transform: rotate(7deg); clip-path: polygon(4% 0, 100% 9%, 90% 100%, 0 89%); }
.slab-c { bottom: 6%; left: 17%; width: 40%; height: 16%; background: var(--ink); transform: rotate(2deg); clip-path: polygon(0 15%, 96% 0, 100% 83%, 8% 100%); }

.tape {
  position: absolute;
  z-index: 12;
  width: clamp(100px, 13vw, 190px);
  height: 38px;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(0,0,0,.08) 12px 13px),
    var(--tape);
  clip-path: polygon(2% 10%, 98% 0, 95% 92%, 0 100%);
  mix-blend-mode: multiply;
}
.tape-a { top: 9%; right: 28%; transform: rotate(9deg); }
.tape-b { right: 8%; bottom: 14%; transform: rotate(-17deg); }

.scribble-loop {
  position: absolute;
  left: 39%;
  bottom: 7%;
  z-index: 10;
  width: 210px;
  height: 110px;
  border: 8px solid var(--ink);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-13deg);
  pointer-events: none;
}
.scribble-loop::after { position: absolute; right: -30px; bottom: -12px; content: "↗"; font: 900 58px/1 Arial, sans-serif; transform: rotate(10deg); }

.hero-copy { position: relative; z-index: 7; align-self: center; min-width: 0; }
.eyebrow {
  display: inline-block;
  max-width: 480px;
  margin: 0 0 20px 4%;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--acid);
  font: 900 12px/1.15 "Courier New", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.title-stack { position: relative; }
h1, h2, p { margin-top: 0; }
h1 {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 0 23px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(82px, 13.2vw, 216px);
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .72;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transform: rotate(-2deg) scaleX(.96);
  transform-origin: left center;
  -webkit-text-stroke: 1px var(--ink);
}
.title-echo {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 1;
  width: 100%;
  color: transparent;
  font: 900 clamp(82px, 13.2vw, 216px)/.72 Impact, sans-serif;
  letter-spacing: -.065em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  -webkit-text-stroke: 3px var(--hot);
  transform: rotate(1deg) scaleX(.96);
  transform-origin: left center;
}

.title-rail { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ticker-stamp {
  display: inline-block;
  padding: 10px 16px 8px;
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--hot);
  color: var(--paper);
  background: var(--ink);
  font: 900 clamp(29px, 3.4vw, 56px)/.9 Impact, sans-serif;
  letter-spacing: -.03em;
  transform: rotate(2deg);
}
.variant-label {
  max-width: 240px;
  padding: 7px 10px;
  border: 3px solid var(--ink);
  background: var(--paper);
  font: 900 10px/1.15 "Courier New", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.hero-frame,
.banner-frame {
  position: relative;
  margin: 0;
  border: 5px solid var(--ink);
  box-shadow: var(--shadow);
  background: var(--paper);
}
.hero-frame { z-index: 6; align-self: center; width: 100%; transform: rotate(var(--hero-tilt)); }
.image-shell { position: relative; overflow: hidden; background: var(--dust); }
.image-shell::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.1) 3px 4px);
  mix-blend-mode: multiply;
}
.frame-label {
  position: absolute;
  top: -20px;
  left: 17px;
  z-index: 4;
  padding: 6px 9px;
  border: 2px solid var(--paper);
  color: var(--paper);
  background: var(--ink);
  font: 900 9px/1 "Courier New", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero-image,
.hero-placeholder { display: block; width: 100%; min-height: 440px; aspect-ratio: 1.05 / 1; }
.hero-image { object-fit: cover; object-position: var(--crop-x) var(--crop-y); }
.hero-placeholder { position: relative; display: grid; place-items: center; background: var(--dust); font: 900 clamp(28px, 5vw, 76px)/.73 Impact, sans-serif; text-align: center; transform: none; }
.hero-placeholder strong { position: absolute; right: 5%; bottom: -4%; color: var(--hot); font: 900 180px/1 Impact, sans-serif; transform: rotate(14deg); }
figcaption { padding: 9px 11px 8px; border-top: 3px solid var(--ink); font: 900 9px/1.15 "Courier New", monospace; letter-spacing: .07em; text-transform: uppercase; }

.hero-frame[data-frame="rip"] { clip-path: polygon(2% 1%, 99% 0, 97% 98%, 1% 100%, 0 8%); }
.hero-frame[data-frame="instant"] { padding: 14px 14px 38px; box-shadow: 15px 15px 0 var(--ink); }
.hero-frame[data-frame="instant"] figcaption { margin-top: 12px; border: 0; font-size: 11px; }
.hero-frame[data-frame="stamp"] { border-width: 12px; box-shadow: 12px 12px 0 var(--hot), 20px 20px 0 var(--ink); }
.hero-frame[data-frame="xerox"] .hero-image { filter: grayscale(1) contrast(1.5); }

.banner-frame { z-index: 5; grid-column: 1 / -1; width: min(78%, 900px); justify-self: end; transform: rotate(-2deg); }
.banner-image { display: block; width: 100%; max-height: 300px; object-fit: cover; object-position: var(--crop-x) var(--crop-y); filter: saturate(1.16) contrast(1.08); }

.sticker-layer { position: absolute; inset: 0; z-index: 14; pointer-events: none; }
.sticker {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 62px;
  min-height: 62px;
  max-width: 134px;
  padding: 10px;
  border: 4px solid var(--ink);
  box-shadow: 5px 6px 0 var(--ink);
  font: 900 14px/.84 Impact, sans-serif;
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
}
.sticker[data-shape="circle"] { border-radius: 50%; aspect-ratio: 1; }
.sticker[data-shape="burst"] { border: 0; clip-path: polygon(50% 0,61% 17%,79% 5%,82% 24%,100% 24%,90% 44%,100% 59%,81% 65%,84% 87%,62% 78%,50% 100%,39% 79%,17% 92%,20% 67%,0 58%,13% 43%,2% 23%,25% 25%,28% 4%); }
.sticker[data-shape="strip"] { min-height: 38px; transform-origin: center; }
.sticker[data-ink="reverse"] { color: var(--paper); background: var(--ink) !important; }

.burst { position: absolute; z-index: 16; padding: 15px; color: var(--paper); background: var(--ink); font: 900 clamp(14px, 2vw, 25px)/.8 Impact, sans-serif; clip-path: polygon(50% 0,61% 13%,77% 4%,81% 20%,100% 19%,91% 39%,100% 52%,84% 60%,91% 80%,70% 77%,62% 100%,48% 85%,32% 100%,27% 80%,4% 82%,13% 62%,0 49%,17% 37%,8% 17%,29% 19%,36% 0); pointer-events: none; }
.burst-a { top: 8%; right: 39%; transform: rotate(13deg); }
.burst-b { right: 3%; bottom: 19%; color: var(--ink); background: var(--acid); transform: rotate(-12deg); }

.marquee { position: relative; z-index: 18; overflow: hidden; border-block: 5px solid var(--ink); color: var(--paper); background: var(--ink); transform: rotate(-.35deg) scale(1.01); }
.marquee-track { display: flex; width: max-content; animation: marquee 19s linear infinite; }
.marquee span { flex: none; padding: 13px 28px 11px 0; font: 900 clamp(15px, 2vw, 27px)/1 Impact, sans-serif; letter-spacing: .025em; white-space: nowrap; }

.contract-zone {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(170px, .25fr) minmax(0, 1fr);
  margin: 40px 1% 20px;
  border: 6px solid var(--ink);
  box-shadow: 12px 13px 0 var(--ink);
  background: var(--acid);
  transform: rotate(.5deg);
}
.ca-warning {
  display: grid;
  place-items: center;
  min-height: 165px;
  padding: 16px;
  border-right: 6px solid var(--ink);
  color: var(--paper);
  background: var(--hot);
  font: 900 clamp(28px, 4vw, 59px)/.78 Impact, sans-serif;
  text-align: center;
  text-transform: uppercase;
  writing-mode: sideways-lr;
}
.ca-core { min-width: 0; padding: clamp(18px, 3vw, 38px); }
.ca-kicker { display: block; margin-bottom: 11px; font: 900 11px/1 "Courier New", monospace; letter-spacing: .1em; }
.contract-zone button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  width: 100%;
  padding: 17px;
  border: 5px solid var(--ink);
  box-shadow: 7px 7px 0 var(--hot);
  color: var(--paper);
  background: var(--ink);
  text-align: left;
  cursor: pointer;
}
#contract-value { min-width: 0; font: 900 clamp(13px, 1.8vw, 24px)/1.05 "Courier New", monospace; overflow-wrap: anywhere; }
#copy-status { padding: 9px 11px; color: var(--ink); background: var(--paper); font: 900 13px/1 Impact, sans-serif; white-space: nowrap; }
.contract-zone button:hover,
.contract-zone button:focus-visible { color: var(--ink); background: var(--paper); }
.contract-zone small { display: block; margin-top: 13px; font: 900 10px/1 "Courier New", monospace; letter-spacing: .1em; }

.lower-grid {
  position: relative;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(270px, .8fr) minmax(360px, 1.25fr) minmax(80px, .18fr);
  gap: 22px;
  align-items: start;
  margin: 44px 1% 0;
}
.tile { position: relative; min-height: 250px; padding: 24px; border: 5px solid var(--ink); box-shadow: 7px 8px 0 var(--ink); background: var(--paper); }
.tile-dark { color: var(--paper); background: var(--ink); transform: rotate(var(--poster-tilt)); }
.tile-index { display: block; margin-bottom: 28px; font: 900 10px/1 "Courier New", monospace; letter-spacing: .1em; }
.tile h2 { max-width: 500px; margin-bottom: 18px; font: 900 clamp(35px, 5vw, 70px)/.78 Impact, sans-serif; letter-spacing: -.025em; text-transform: uppercase; }
.tile p { max-width: 470px; margin-bottom: 0; font: 900 15px/1.2 Arial, sans-serif; text-transform: uppercase; }
.corner-mark { position: absolute; right: 17px; bottom: 9px; color: var(--hot); font: 900 54px/1 Impact, sans-serif; }

.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.signal-card { min-height: 132px; padding: 16px; border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); background: var(--dust); }
.signal-card:nth-child(2n) { background: var(--acid); }
.signal-card:nth-child(3n) { color: var(--paper); background: var(--hot); }
.signal-card h3 { margin: 12px 0 8px; font: 900 27px/.82 Impact, sans-serif; text-transform: uppercase; }
.signal-card p { margin: 0; font: 900 10px/1.25 "Courier New", monospace; text-transform: uppercase; }
.signal-card .tile-index { margin-bottom: 7px; }

.side-scribble { display: flex; min-height: 250px; align-items: center; justify-content: space-between; padding: 13px 7px; border-inline: 4px solid var(--ink); font: 900 18px/.9 "Courier New", monospace; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(2deg); }
.side-scribble b { color: var(--hot); font-size: 47px; }

/* Four seeded composition families. These alter hierarchy and spatial rhythm, not only decoration. */
.poster[data-composition="xerox-board"] .hero-collage { grid-template-columns: minmax(380px, 1.15fr) minmax(280px, .85fr); }
.poster[data-composition="xerox-board"] .hero-copy { grid-column: 2; grid-row: 1; }
.poster[data-composition="xerox-board"] .hero-frame { grid-column: 1; grid-row: 1; transform: rotate(-3deg); }
.poster[data-composition="xerox-board"] .hero-collage::before { background: var(--paper); clip-path: polygon(0 0,95% 3%,100% 97%,3% 100%); }
.poster[data-composition="xerox-board"] h1 { font-family: "Courier New", monospace; font-size: clamp(65px, 10vw, 168px); line-height: .76; letter-spacing: -.11em; }
.poster[data-composition="xerox-board"] .title-echo { font-family: "Courier New", monospace; font-size: clamp(65px, 10vw, 168px); line-height: .76; letter-spacing: -.11em; }
.poster[data-composition="xerox-board"] .image-shell::after { background: radial-gradient(circle, rgba(0,0,0,.45) 1px, transparent 1.8px); background-size: 5px 5px; }

.poster[data-composition="signal-wall"] .hero-collage { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; padding-top: 88px; }
.poster[data-composition="signal-wall"] .hero-copy { grid-column: 1 / 9; grid-row: 1; align-self: start; }
.poster[data-composition="signal-wall"] .hero-frame { grid-column: 7 / 13; grid-row: 1; margin-top: 128px; }
.poster[data-composition="signal-wall"] .banner-frame { grid-column: 2 / 10; grid-row: 2; justify-self: start; }
.poster[data-composition="signal-wall"] h1 { font-size: clamp(92px, 15vw, 236px); }
.poster[data-composition="signal-wall"] .title-echo { font-size: clamp(92px, 15vw, 236px); }
.poster[data-composition="signal-wall"] .hero-collage::after { right: auto; left: 2%; width: 47%; height: 47%; }

.poster[data-composition="tape-stack"] .hero-collage { grid-template-columns: minmax(280px, .7fr) minmax(390px, 1.3fr); grid-template-rows: auto auto; }
.poster[data-composition="tape-stack"] .hero-copy { grid-column: 1 / -1; grid-row: 1; z-index: 9; align-self: start; width: 78%; }
.poster[data-composition="tape-stack"] .hero-frame { grid-column: 2; grid-row: 1 / 3; margin-top: 95px; }
.poster[data-composition="tape-stack"] .banner-frame { grid-column: 1 / 3; grid-row: 2; width: 54%; justify-self: start; margin-top: -80px; }
.poster[data-composition="tape-stack"] h1 { font-size: clamp(84px, 14vw, 226px); }
.poster[data-composition="tape-stack"] .title-echo { font-size: clamp(84px, 14vw, 226px); }
.poster[data-composition="tape-stack"] .slab-c { left: 2%; width: 67%; }

.poster[data-density="compact"] .signal-card:nth-child(n+4) { display: none; }
.poster[data-density="maximal"] .lower-grid { grid-template-columns: minmax(270px, .7fr) minmax(450px, 1.45fr) minmax(80px, .18fr); }
.poster[data-density="maximal"] .detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes jitter {
  0%, 94%, 100% { transform: translate(0, 0) rotate(var(--hero-tilt)); }
  95% { transform: translate(2px, -1px) rotate(var(--hero-tilt)); }
  97% { transform: translate(-2px, 1px) rotate(var(--hero-tilt)); }
}
.hero-frame { animation: jitter 7s steps(1) infinite; }

@media (max-width: 820px) {
  .poster { width: min(100% - 16px, 700px); }
  .top-strip { flex-wrap: wrap; padding: 7px 0; }
  .top-strip .social-links { order: 3; width: 100%; margin-left: 0; }
  .hero-collage,
  .poster[data-composition="xerox-board"] .hero-collage,
  .poster[data-composition="signal-wall"] .hero-collage,
  .poster[data-composition="tape-stack"] .hero-collage { display: flex; min-height: 0; flex-direction: column; padding: 78px 8px 58px; gap: 42px; }
  .hero-copy,
  .poster[data-composition] .hero-copy { order: 1; width: 100%; }
  .hero-frame,
  .poster[data-composition] .hero-frame { order: 2; width: min(92%, 610px); margin: 0; align-self: center; }
  .banner-frame,
  .poster[data-composition] .banner-frame { order: 3; width: 88%; margin: 0; align-self: flex-start; }
  .hero-image, .hero-placeholder { min-height: 310px; }
  .burst-a { top: 3%; right: 9%; }
  .burst-b { right: 0; bottom: 23%; }
  .scribble-loop { left: 4%; bottom: 19%; transform: scale(.7) rotate(-13deg); }
  .contract-zone { grid-template-columns: 1fr; }
  .ca-warning { min-height: 0; border-right: 0; border-bottom: 6px solid var(--ink); writing-mode: horizontal-tb; }
  .lower-grid,
  .poster[data-density="maximal"] .lower-grid { grid-template-columns: 1fr; }
  .side-scribble { min-height: 60px; flex-direction: row; writing-mode: horizontal-tb; }
}

@media (max-width: 520px) {
  .registration-mark { display: none; }
  h1,
  .poster[data-composition] h1 { font-size: clamp(68px, 23vw, 116px); line-height: .75; }
  .title-echo,
  .poster[data-composition] .title-echo { font-size: clamp(68px, 23vw, 116px); line-height: .75; }
  .hero-collage { padding-inline: 2px; }
  .hero-image, .hero-placeholder { min-height: 260px; }
  .sticker { min-width: 48px; min-height: 48px; max-width: 88px; padding: 7px; border-width: 3px; font-size: 11px; }
  .contract-zone { margin-inline: 3px; }
  .ca-core { padding: 14px; }
  .contract-zone button { grid-template-columns: 1fr; }
  #copy-status { width: max-content; }
  .detail-grid,
  .poster[data-density="maximal"] .detail-grid { grid-template-columns: 1fr; }
  .bottom-rail { align-items: flex-start; flex-direction: column; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}