:root{
  --paper:#ece4d0; --paper2:#e2d8bd; --ink:#16130e; --ink2:rgba(22,19,14,.62);
  --rule:rgba(22,19,14,.16); --red:#d63a1c;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --pad:clamp(18px,4vw,44px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);font-family:var(--serif);font-optical-sizing:auto;
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.38;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--red);color:var(--paper)}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500}
.dim{color:var(--ink2)}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 16px;border-bottom:1.5px solid var(--ink)}
.word{font-weight:800;font-size:1.45rem;letter-spacing:-.025em;text-decoration:none;display:flex;align-items:center;gap:10px}
.glyph{display:inline-block;width:22px;height:22px;position:relative}
.glyph::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:3px;background:var(--ink)}
.glyph::after{content:"";position:absolute;left:0;top:16px;width:11px;height:6px;border:2px solid var(--red);border-left:0;border-top:0;border-radius:0 0 6px 0;transform:skewX(-8deg)}
.bar-link{text-decoration:none;border-bottom:1.5px solid var(--red);padding-bottom:2px}
.bar-link:hover{color:var(--red)}

/* entrance */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:80ms}
.rise.d1{animation-delay:190ms}.rise.d2{animation-delay:300ms}.rise.d3{animation-delay:410ms}

/* hero */
.hero{padding:clamp(34px,6vw,72px) 0 clamp(36px,5vw,64px)}
.kicker{color:var(--red);margin-bottom:18px}
h1{font-weight:800;font-size:clamp(3.4rem,11.5vw,9.6rem);line-height:.9;letter-spacing:-.028em;word-spacing:.06em;font-variation-settings:"opsz" 144}
h1 em{font-style:italic;font-weight:600;color:var(--red);letter-spacing:-.02em}
.deck{max-width:34em;font-size:clamp(1.1rem,1.9vw,1.4rem);margin:clamp(22px,3vw,34px) 0 clamp(26px,4vw,48px);line-height:1.4}

/* centrepiece */
.stage{position:relative;border:1.5px solid var(--ink);background:var(--paper2);box-shadow:8px 8px 0 var(--ink)}
.stage canvas{display:block;width:100%;height:340px;touch-action:pan-y;cursor:grab;outline-offset:4px}
.stage canvas:focus-visible{outline:3px solid var(--red)}
.cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:10px 14px;border-top:1.5px solid var(--ink);font-size:.66rem;background:var(--paper)}
.cap-r{color:var(--ink2)}
.stamp{
  position:absolute;top:16px;right:16px;font:700 clamp(.95rem,2.6vw,1.7rem)/1 var(--mono);letter-spacing:.1em;
  padding:.55em .85em;border:3px solid currentColor;border-radius:4px;background:rgba(236,228,208,.7);
  transform:rotate(-5deg) scale(.9);opacity:0;pointer-events:none;
}
.stamp.on{opacity:1;transform:rotate(-5deg)}
.stamp.no{color:var(--red)}
.stamp.fair{color:var(--ink)}
@keyframes thump{0%{transform:rotate(-5deg) scale(1.7);opacity:0}55%{transform:rotate(-5deg) scale(.94);opacity:1}100%{transform:rotate(-5deg) scale(1)}}
.stamp.pop{animation:thump .38s cubic-bezier(.2,.8,.3,1)}
.hint{white-space:pre-line;line-height:1.7;position:absolute;left:calc(11% + 16px);top:14px;display:flex;gap:10px;align-items:center;color:var(--ink2);transition:opacity .4s;pointer-events:none}
.hint.gone{opacity:0}
.hint .short{display:none}
@media (max-width:760px){.hint{left:14px}}
@keyframes nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
.arrows{display:inline-block;animation:nudge 1.4s ease-in-out infinite;color:var(--red)}

/* ticker tape */
.tape{background:var(--ink);color:var(--paper);transform:rotate(-1.3deg);margin:clamp(10px,2vw,30px) -3vw;overflow:hidden;border-block:3px solid var(--red)}
.tape-in{display:flex;width:max-content;animation:run 38s linear infinite}
.tape-run{display:flex;align-items:center;gap:34px;padding:16px 17px;font:500 1.05rem var(--mono);white-space:nowrap}
.tape-run b{font-weight:700;font-size:1.05rem}
.tape-run .nb{background:var(--red);color:var(--paper);padding:2px 9px;border-radius:2px}
.tape-run .ov{font-size:.7rem;letter-spacing:.14em;opacity:.55;text-transform:uppercase}
.tape-run .dot{opacity:.5}
@keyframes run{to{transform:translateX(-50%)}}

/* how */
.how{padding:clamp(48px,8vw,104px) 0 clamp(30px,5vw,60px)}
.label{padding-bottom:12px;border-bottom:1.5px solid var(--ink);color:var(--ink2)}
.steps{list-style:none}
.steps li{display:grid;grid-template-columns:clamp(70px,12vw,170px) minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(12px,3vw,40px);align-items:center;padding:clamp(22px,3vw,38px) 0;border-bottom:1px solid var(--rule)}
.num{font-weight:800;font-size:clamp(3.4rem,9vw,7.4rem);line-height:.8;letter-spacing:-.05em;color:var(--red);font-style:italic;font-variation-settings:"opsz" 144}
.steps h3{font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:-.015em;font-weight:600;line-height:1.05}
.steps p{font-size:1.1rem;max-width:32em;color:var(--ink)}

/* why */
.why{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,6vw,90px);padding:clamp(40px,7vw,96px) 0;align-items:start}
.big{font-size:clamp(1.9rem,4.6vw,3.9rem);line-height:1.06;letter-spacing:-.018em;word-spacing:.05em;font-weight:600;font-variation-settings:"opsz" 144}
.big em{font-style:italic;color:var(--red)}
.why-side p{margin-bottom:1.1em;font-size:1.1rem}
.scope{list-style:none;margin-top:30px;border-top:1.5px solid var(--ink)}
.scope li{padding:12px 0;border-bottom:1px solid var(--rule);line-height:1.6;text-transform:none;letter-spacing:.02em;font-size:.78rem}
.scope li{display:grid;grid-template-columns:5.6em 1fr;gap:8px}
.scope b{color:var(--red);text-transform:uppercase;letter-spacing:.1em}

/* signup */
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,90px);padding:clamp(40px,6vw,80px) 0;border-top:1.5px solid var(--ink);align-items:start}
.join h2{font-weight:800;font-size:clamp(2.4rem,6vw,5rem);line-height:.95;letter-spacing:-.025em;word-spacing:.05em;font-variation-settings:"opsz" 144}
.join-copy p{margin-top:20px;font-size:1.15rem;max-width:22em}
form{display:grid;gap:22px}
.field{display:grid;gap:6px}
.field i{text-transform:none;letter-spacing:0;font-style:normal;opacity:.6}
input{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--ink);padding:8px 0 10px;font:500 1.45rem var(--serif);color:var(--ink);border-radius:0}
input:focus{outline:0;border-bottom-color:var(--red);box-shadow:0 1.5px 0 var(--red)}
.hp{position:absolute;left:-9999px}
.go{justify-self:start;background:var(--ink);color:var(--paper);border:0;font:700 .85rem var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:18px 30px;cursor:pointer;box-shadow:5px 5px 0 var(--red);transition:transform .12s,box-shadow .12s}
.go:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--red)}
.go:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--red)}
.go:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.msg{min-height:1.2em;color:var(--red)}
.fine{color:var(--ink2);font-size:.64rem;margin-top:-10px}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 0 40px;border-top:1.5px solid var(--ink);color:var(--ink2);font-size:.66rem}

@media (min-width:800px){ .stage canvas{height:460px} .bar-mid{display:inline} }
@media (max-width:799px){ .bar-mid{display:none} }
@media (max-width:760px){
  .steps li{grid-template-columns:70px 1fr}
  .steps li p{grid-column:2}
  .why,.join{grid-template-columns:1fr}
  .cap-r{display:none}
  .stage{box-shadow:5px 5px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .rise,.arrows{animation:none}
  .tape-in{animation:none}
  .stamp.pop{animation:none}
  html{scroll-behavior:auto}
}