@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&display=swap');

:root {
  --yellow: #f5d928;
  --cream: #fffdf2;
  --black: #11100c;
  --white: #fff;
  --line: 3px solid var(--black);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--black);
  background: var(--yellow);
  font-family: "DM Mono", monospace;
  overflow-x: hidden;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .09;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.site-header {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3vw;
  border-bottom: var(--line);
  position: relative;
  z-index: 10;
}

.wordmark {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  text-decoration: none;
  letter-spacing: -.07em;
}

.wordmark span { font: 500 .45em "DM Mono", monospace; vertical-align: top; margin-left: .25em; }

nav { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 36px); }
nav a { font-weight: 500; font-size: .82rem; text-decoration: none; }
.nav-buy { padding: 12px 16px; border: 2px solid var(--black); background: var(--black); color: var(--yellow); }

.hero {
  min-height: calc(100vh - 84px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  padding: clamp(32px, 6vw, 88px) 3vw;
  gap: 3vw;
  border-bottom: var(--line);
}

.eyebrow, .section-label { font-size: .76rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

h1, h2, h3, .hero-line {
  font-family: "Archivo Black", sans-serif;
  margin: 0;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(5rem, 13vw, 12.5rem);
  line-height: .72;
  letter-spacing: -.09em;
  margin: .2em 0 .25em -.07em;
}

.hero-line { font-size: clamp(1.7rem, 4.3vw, 4.5rem); line-height: .95; letter-spacing: -.055em; }
.hero-line em { font-style: normal; color: var(--cream); -webkit-text-stroke: 2px var(--black); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  border: 2px solid var(--black);
  text-decoration: none;
  font-weight: 500;
  font-size: .84rem;
  box-shadow: 5px 5px 0 var(--black);
  transition: transform .16s, box-shadow .16s;
}

.button:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--black); }
.button-dark { background: var(--black); color: var(--yellow); }
.button-light { background: var(--cream); }

.squash-stage {
  appearance: none;
  border: var(--line);
  background: var(--cream);
  min-height: min(66vw, 680px);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  box-shadow: 12px 12px 0 var(--black);
}

.squash-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(245,217,40,.35) 29% 29.5%, transparent 30% 42%, rgba(17,16,12,.11) 43% 43.5%, transparent 44%);
}

.squash-stage img {
  position: absolute;
  width: 102%;
  left: -1%;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  mix-blend-mode: multiply;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  filter: saturate(1.1) contrast(1.04);
}

.squash-stage:hover img { transform: translateY(-52%) rotate(-5deg) scale(1.03); }
.squash-stage.squished img { transform: translateY(-50%) rotate(-8deg) scaleX(1.25) scaleY(.68); }
.tap-note { position: absolute; bottom: 18px; right: 18px; font: 500 .72rem "DM Mono", monospace; }
.burst { position: absolute; z-index: 2; background: var(--black); color: var(--yellow); padding: 8px 11px; font: 500 .7rem "DM Mono", monospace; }
.burst-one { left: 5%; top: 6%; transform: rotate(-7deg); }
.burst-two { right: 4%; top: 12%; transform: rotate(8deg); }

.ticker { background: var(--black); color: var(--yellow); overflow: hidden; padding: 15px 0; border-bottom: var(--line); }
.ticker-track { display: flex; width: max-content; animation: ticker 17s linear infinite; font: 500 1rem "DM Mono", monospace; }
.ticker-track span { white-space: nowrap; }
@keyframes ticker { to { transform: translateX(-50%); } }

.manifesto, .contract-section, .steps { padding: clamp(64px, 10vw, 150px) 3vw; border-bottom: var(--line); }
.manifesto { background: var(--cream); }
.manifesto-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw; align-items: end; margin-top: 70px; }
.manifesto h2, .contract-section h2, .steps h2 { font-size: clamp(3.2rem, 8vw, 8rem); letter-spacing: -.075em; line-height: .83; }
.manifesto-copy { font-size: clamp(1rem, 1.7vw, 1.45rem); line-height: 1.55; max-width: 600px; }
.manifesto-copy strong { font: 1.5em "Archivo Black", sans-serif; text-transform: uppercase; }

.contract-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; align-items: center; }
.contract-card { border: var(--line); background: var(--cream); padding: clamp(22px, 4vw, 48px); box-shadow: 10px 10px 0 var(--black); }
.contract-card > p { font-size: .75rem; font-weight: 500; }
.contract-copy { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 0; background: none; border: 0; border-top: 2px solid; border-bottom: 2px solid; cursor: pointer; font-family: "DM Mono"; text-align: left; }
.contract-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contract-copy strong { background: var(--black); color: var(--yellow); padding: 9px 12px; }
.contract-card small { display: block; margin-top: 18px; line-height: 1.5; }

.steps { background: var(--black); color: var(--cream); }
.steps .section-label { color: var(--yellow); }
.steps h2 { color: var(--yellow); margin: 48px 0 70px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--cream); }
.steps article { padding: clamp(25px, 4vw, 50px); min-height: 290px; }
.steps article + article { border-left: 2px solid var(--cream); }
.steps article span { color: var(--yellow); font: 3rem "Archivo Black"; }
.steps h3 { margin-top: 55px; font-size: clamp(1.3rem, 2.5vw, 2.1rem); }
.steps p { line-height: 1.6; font-size: .9rem; }

.finale { text-align: center; padding: 110px 3vw; overflow: hidden; }
.finale > p { font-weight: 500; }
.finale h2 { font-size: clamp(6rem, 17vw, 15rem); line-height: 1; }
.finale .not-cucumber { display: inline-block; background: var(--black); color: var(--yellow); padding: 8px 12px; transform: rotate(-4deg); }
.finale img { display: block; width: min(650px, 90vw); margin: 10px auto -30px; mix-blend-mode: multiply; transform: rotate(-7deg); }
.finale .correct { font-size: clamp(4rem, 13vw, 11rem); letter-spacing: -.08em; margin-bottom: 45px; }

footer { background: var(--cream); border-top: var(--line); padding: 34px 3vw; display: grid; grid-template-columns: .7fr 2fr .7fr; gap: 4vw; align-items: end; font-size: .65rem; line-height: 1.5; }
footer p:last-child { text-align: right; }

.toast { position: fixed; bottom: 22px; left: 50%; z-index: 30; transform: translate(-50%, 130px); background: var(--black); color: var(--yellow); padding: 15px 20px; font-size: .75rem; transition: transform .25s; }
.toast.show { transform: translate(-50%, 0); }

@media (max-width: 850px) {
  nav a:not(.nav-buy) { display: none; }
  .site-header { height: 70px; }
  .hero { grid-template-columns: 1fr; padding: 48px 4vw 66px; }
  .hero-copy { order: 1; }
  .squash-stage { order: 0; min-height: 105vw; box-shadow: 7px 7px 0 var(--black); }
  .manifesto, .contract-section, .steps { padding-left: 4vw; padding-right: 4vw; }
  .manifesto-grid, .contract-section { grid-template-columns: 1fr; }
  .manifesto-grid { margin-top: 45px; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps article { min-height: 0; }
  .steps article + article { border-left: 0; border-top: 2px solid var(--cream); }
  footer { grid-template-columns: 1fr; }
  footer p:last-child { text-align: left; }
}

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