@font-face{font-family:"Big Shoulders Display";src:url(fonts/big-shoulders-display.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(fonts/martian-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}

:root{
  --yellow:#FFDD00;
  --yellow-ink:#14110A;
  --yellow-ink-2:#3A3200;
  --ground:#ECEFF2;
  --tape:#FFFFFF;
  --ink:#10131A;
  --ink-2:#4A5260;
  --live:#1737D8;
  --hole:#10131A26;
  --line:#10131A2B;
  --code:#10131A;
  --code-ink:#F2F4F7;
  --code-dim:#9AA3B2;
  --focus:#1737D8;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#121110;
    --tape:#1E1C17;
    --ink:#F4EFDD;
    --ink-2:#B9B29A;
    --live:#FFDD00;
    --hole:#F4EFDD26;
    --line:#F4EFDD2B;
    --code:#0A0A09;
    --focus:#FFDD00;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark;scroll-behavior:smooth;scrollbar-color:var(--ink-2) var(--ground)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
::selection{background:var(--ink);color:var(--ground)}
.yellow ::selection{background:var(--yellow-ink);color:var(--yellow)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.yellow :focus-visible{outline-color:var(--yellow-ink)}
input,textarea,button{caret-color:var(--live);accent-color:var(--live)}
a{color:inherit;text-underline-offset:.2em}
.skip{position:absolute;left:12px;top:-60px;background:var(--yellow-ink);color:var(--yellow);padding:12px 16px;z-index:10;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* yellow fields: the only places yellow is a ground */
.yellow{background:var(--yellow);color:var(--yellow-ink)}
.yellow .muted{color:var(--yellow-ink-2)}

/* header */
header.site{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0}
.mark{font:900 2.1rem/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
nav.site{display:flex;align-items:center;gap:26px}
nav.site a{font:500 .8125rem/1 var(--mono);text-decoration:none;padding:10px 0}
nav.site a:hover{text-decoration:underline;text-underline-offset:6px}

/* buttons */
.btn{display:inline-block;background:var(--yellow-ink);color:var(--yellow);font:600 1.0625rem/1 var(--body);padding:19px 30px;border:0;text-decoration:none;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 100%,16px 100%,0 calc(100% - 16px));transition:transform .18s cubic-bezier(.16,1,.3,1)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor;clip-path:none}

/* hero */
.hero{padding:16px 0 44px}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
h1{font:900 clamp(3.1rem,8.6vw,6rem)/.92 var(--display);letter-spacing:-.005em;text-transform:uppercase;margin:12px 0 26px;text-wrap:balance}
.lede{font-size:1.25rem;line-height:1.55;max-width:34em;margin:0 0 32px}
.cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.note{font:400 .8125rem/1.5 var(--mono);max-width:28em}

/* hero tape strips */
.strips{display:grid;gap:14px;padding:6px 10px 6px 0}
.strip{background:var(--tape);color:var(--ink);padding:18px 20px;position:relative;font:500 .8125rem/1.5 var(--mono);box-shadow:0 10px 22px -12px #0007}
.strip::before,.strip::after{content:"";position:absolute;left:0;right:0;height:5px;background:radial-gradient(circle,var(--hole) 1.8px,transparent 2.3px) 0 0/14px 5px repeat-x}
.strip::before{top:4px}.strip::after{bottom:4px}
.strip:nth-child(1){transform:rotate(-1.6deg) translateX(-8px)}
.strip:nth-child(2){transform:rotate(.9deg) translateX(14px)}
.strip:nth-child(3){transform:rotate(-.7deg) translateX(-2px)}
.strip b{font-weight:500;color:var(--live)}
.strip .sym{font-weight:500;letter-spacing:.04em}
.strips .cap{font:400 .75rem/1.4 var(--mono);margin:4px 0 0}

/* running tape */
.tape{background:var(--tape);color:var(--ink);position:relative;overflow:hidden;padding:22px 0;display:flex;align-items:center}
.tape::before,.tape::after{content:"";position:absolute;left:0;right:0;height:6px;background:radial-gradient(circle,var(--hole) 2px,transparent 2.5px) 0 0/16px 6px repeat-x;pointer-events:none}
.tape::before{top:4px}.tape::after{bottom:4px}
.run{display:flex;width:max-content;animation:run 70s linear infinite}
.tape[data-paused="true"] .run{animation-play-state:paused}
.run span{font:500 1.0625rem/1 var(--mono);white-space:nowrap;padding:0 28px;border-right:2px dashed var(--hole)}
.run b{color:var(--live);font-weight:500}
@keyframes run{to{transform:translateX(-50%)}}
.tape-ctl{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:2;background:var(--yellow-ink);color:var(--yellow);font:500 .75rem/1 var(--mono);border:0;padding:10px 12px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.run{animation:none;flex-wrap:wrap;width:auto;gap:10px 0}.run .dup{display:none}.tape-ctl{display:none}}

/* sections */
section.block{padding:84px 0;border-top:2px dashed var(--line)}
section.block:first-of-type{border-top:0}
h2{font:900 clamp(2.3rem,5.2vw,3.7rem)/.95 var(--display);text-transform:uppercase;margin:0 0 22px;text-wrap:balance}
h3{font:600 1.125rem/1.3 var(--body);margin:0 0 4px}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.copy p{margin:0 0 14px;max-width:34em;color:var(--ink-2)}
.copy p strong{color:var(--ink)}

/* ledger: tape-like list */
.ledger{background:var(--tape);padding:10px 30px;position:relative;box-shadow:0 14px 30px -18px #0006}
.ledger::before,.ledger::after{content:"";position:absolute;left:0;right:0;height:5px;background:radial-gradient(circle,var(--hole) 1.8px,transparent 2.3px) 0 0/14px 5px repeat-x}
.ledger::before{top:4px}.ledger::after{bottom:4px}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:20px 0;border-bottom:2px dashed var(--hole);align-items:baseline}
.row:last-child{border-bottom:0}
.row p{margin:2px 0 0;color:var(--ink-2);font-size:.9375rem}
.tag{font:500 .75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;padding:7px 9px;border:1.5px solid currentColor;white-space:nowrap}
.tag.on{background:var(--live);color:var(--tape);border-color:var(--live)}
@media (prefers-color-scheme:dark){.tag.on{color:#14110A}}





/* join */
.join{padding:84px 0 92px}
.join .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.form{background:var(--tape);color:var(--ink);padding:30px;position:relative;box-shadow:0 22px 44px -24px #000a}
.form::before,.form::after{content:"";position:absolute;left:0;right:0;height:5px;background:radial-gradient(circle,var(--hole) 1.8px,transparent 2.3px) 0 0/14px 5px repeat-x}
.form::before{top:4px}.form::after{bottom:4px}
.field{margin:0 0 18px}
label{display:block;font-weight:600;margin-bottom:6px}
input[type=email],input[type=text]{width:100%;font:400 1rem/1.4 var(--body);color:var(--ink);background:transparent;border:2px solid var(--ink);padding:13px 14px;border-radius:0}
input::placeholder{color:var(--ink-2);opacity:.8}
input[aria-invalid=true]{border-color:#C21F1F;box-shadow:0 0 0 1px #C21F1F}
.err{display:none;color:#B01919;font-size:.875rem;margin-top:6px}
@media (prefers-color-scheme:dark){.err{color:#FF8C7A}input[aria-invalid=true]{border-color:#FF8C7A;box-shadow:0 0 0 1px #FF8C7A}}
[aria-invalid=true] ~ .err{display:block}
.cf-turnstile{margin:0 0 18px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.status-msg{margin:16px 0 0;font-weight:600;min-height:1.5em}
.status-msg.ok{color:var(--ink)}
.status-msg.bad{color:#B01919}
@media (prefers-color-scheme:dark){.status-msg.bad{color:#FF8C7A}}
.joined{display:none}
.is-joined .joined{display:block}
.is-joined form.waitlist{display:none}

footer.site{padding:44px 0 56px;font-size:.875rem;color:var(--ink-2);border-top:2px dashed var(--line)}
footer.site p{max-width:60em;margin:0 0 10px}
footer.site a{color:var(--ink)}

/* motion: one authored moment (strips settle in), nothing else */
@media (prefers-reduced-motion:no-preference){
  .strip{animation:settle .9s cubic-bezier(.16,1,.3,1) both}
  .strip:nth-child(2){animation-delay:.12s}.strip:nth-child(3){animation-delay:.24s}
  @keyframes settle{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
}

@media (max-width:900px){
  .hero .grid,.split,.join .grid{grid-template-columns:1fr}
  nav.site a:not(.nav-cta){display:none}
  section.block{padding:60px 0}
  .tape-ctl{display:none}
}
@media (max-width:900px){.strips{padding-right:0}}
@media (max-width:520px){
  .strip{transform:none!important}
  .wrap{padding:0 18px}
  .ledger,.form{padding-left:20px;padding-right:20px}
}

.yellow.pad-b{padding-bottom:28px}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.doc{padding-top:56px;padding-bottom:72px;max-width:760px}
.doc h1{font-size:clamp(2.6rem,7vw,4.2rem);margin-top:0}
.doc h2{font-size:1.9rem;margin-top:36px}
.doc .note{color:var(--ink-2)}
.status-msg:empty{margin:0;min-height:0}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.9375rem;color:var(--ink-2);margin:0 0 18px}
.check input{margin-top:.28em;width:1.15rem;height:1.15rem}
.check label{font-weight:400;margin:0;color:var(--ink-2)}
.check a{color:var(--ink)}
.consent-err{margin:-8px 0 14px 32px}
.yellow.pad-b{padding-bottom:28px}
.doc{padding-top:56px;padding-bottom:72px;max-width:760px}
.doc h1{font-size:clamp(2.6rem,7vw,4.2rem);margin-top:0}
.doc h2{font-size:1.9rem;margin-top:36px}
.doc .note{color:var(--ink-2)}
.check:has(input[aria-invalid=true]) + .consent-err{display:block}
.tape-note{font:400 .75rem/1.4 var(--mono);color:var(--ink-2);margin:12px 0 0}