@font-face{font-family:"Archivo Black";src:url(/fonts/archivo-black-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow Condensed";font-weight:600;src:url(/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow Condensed";font-weight:700;src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow";font-weight:400;src:url(/fonts/barlow-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow";font-weight:500;src:url(/fonts/barlow-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Courier Prime";font-weight:400;src:url(/fonts/courier-prime-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Courier Prime";font-weight:700;src:url(/fonts/courier-prime-latin-700-normal.woff2) format("woff2");font-display:swap}

/* Look A: the rear camera. Black screen, the reels' own HUD and captions. */
:root{--black:#000;--screen:#15181b;--rule:#2b3036;--bone:#e9ecef;--soft:#c3cad1;--dim:#9ba6b1;--cream:#f3dfb0;--yellow:#ffd43b;--red:#e5372b;
  --hud:"Barlow Condensed",sans-serif;--cap:"Archivo Black",sans-serif;--body:"Barlow",system-ui,sans-serif;--type:"Courier Prime",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
button,input{font:inherit}
html{background:var(--black);color-scheme:dark}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{color:var(--bone);font:17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:4px}

.top{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1120px;margin:0 auto;padding:18px 24px}
.mark{display:flex;align-items:center;gap:10px;font-family:var(--cap);font-size:16px;letter-spacing:.5px;text-decoration:none}
.mark b{color:var(--yellow);font-weight:400}
.mark img{border-radius:50%}
.topmail,.toplink{font-family:var(--hud);font-weight:600;font-size:17px;letter-spacing:.3px;color:var(--cream);text-decoration:none}
.topmail:hover,.toplink:hover{text-decoration:underline}

main{max-width:1120px;margin:0 auto;padding:0 24px 40px}

/* caption type, as burned into the reels */
.cap{font-family:var(--cap);font-weight:400;text-transform:uppercase;color:#fff;text-shadow:0 3px 0 #000,0 0 3px #000}
.cap em{font-style:normal;color:var(--yellow);text-shadow:0 0 22px rgba(255,212,59,.35),0 3px 0 #000}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"copy monitor";gap:64px;align-items:center;padding:24px 0 64px}
.copy{grid-area:copy}
.monitor{grid-area:monitor}
.rec{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-family:var(--hud);font-weight:700;font-size:18px;letter-spacing:.6px;text-transform:uppercase}
.rec i{width:10px;height:10px;border-radius:50%;background:var(--red)}
.rec span{margin-left:14px;color:var(--cream);font-weight:600}
h1{font-size:clamp(46px,6.4vw,86px);line-height:.96;letter-spacing:-.5px;margin:18px 0 22px;max-width:9.5em}
.lede{max-width:31em;color:var(--soft);font-size:19px;line-height:1.5}
.btn{display:inline-block;margin-top:28px;padding:17px 24px;border-radius:6px;background:var(--yellow);color:#000;font-family:var(--cap);font-size:17px;letter-spacing:.3px;text-transform:uppercase;text-decoration:none;box-shadow:0 5px 0 #8f7200}
.btn:hover{background:#ffde5c}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #8f7200}

.monitor{position:relative;margin:0;border-radius:20px;overflow:hidden;background:var(--screen);box-shadow:0 0 0 1px var(--rule),0 40px 90px rgba(0,0,0,.7)}
.monitor img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.monitor::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.endcard{position:absolute;z-index:1;left:14px;right:14px;bottom:14px;padding:16px;border-radius:12px;background:rgba(0,0,0,.84)}
.endcard .q{display:block;margin-bottom:12px;font-family:var(--cap);font-size:21px;line-height:1.1;text-transform:uppercase;color:#fff}
.endcard .note{display:block;margin-top:10px;font-size:14px;color:var(--dim);line-height:1.4}

/* vote bar: winner in yellow, loser dimmed */
.vote{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 12px}
.opt{font-family:var(--hud);font-weight:700;font-size:19px;letter-spacing:.4px;text-transform:uppercase;color:var(--yellow);white-space:nowrap}
.opt b{font-weight:700;color:#fff;margin-right:4px}
.opt.lose{color:var(--dim)}
.opt.lose b{color:var(--dim)}
.meter{grid-column:1/-1;height:8px;border-radius:4px;background:#2f353c;overflow:hidden}
.meter i{display:block;height:100%;background:var(--yellow);border-radius:4px}
.w89{width:89%}.w76{width:76%}
.vote.open .opt{color:#fff}
.vote.open .meter{background:repeating-linear-gradient(90deg,#3a4048 0 10px,transparent 10px 16px)}
.vote.open .meter i{width:0}

/* reach readout, in the reels' HUD type */
.readout{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.readout div{padding:20px 20px 18px;border-left:1px solid var(--rule)}
.readout div:first-child{border-left:0;padding-left:0}
.readout small{display:block;font-family:var(--hud);font-weight:600;font-size:15px;letter-spacing:.6px;text-transform:uppercase;color:var(--cream)}
.readout b{display:block;margin:8px 0 4px;font-family:var(--hud);font-weight:700;font-size:clamp(40px,4.8vw,62px);line-height:1;letter-spacing:.5px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.readout span{display:block;font-size:15px;line-height:1.35;color:var(--dim)}
.src{margin:10px 0 0;font-size:14px;color:var(--dim)}
.who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:34px;font-family:var(--hud);font-weight:600;font-size:21px;letter-spacing:.3px}
.who i{width:9px;height:9px;border-radius:50%;background:var(--red);margin-right:-12px}
.who b{color:var(--yellow);font-weight:700}

h2{font-family:var(--cap);font-weight:400;font-size:clamp(26px,3vw,34px);line-height:1.1;color:#fff;margin-bottom:24px}

/* the three reels */
.votes{margin-top:72px}
.reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.reels a{display:block;text-decoration:none}
.reels img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:12px;box-shadow:0 0 0 1px var(--rule)}
.reels a:hover img{box-shadow:0 0 0 2px var(--yellow)}
.info{display:block;padding-top:14px}
.info .t{display:block;font-family:var(--hud);font-weight:700;font-size:22px;letter-spacing:.4px;text-transform:uppercase;color:#fff}
.info .n{display:block;font-size:15px;color:var(--dim)}
.info .q{display:block;margin:12px 0 6px;font-size:16px;color:var(--soft)}

/* sponsored part */
.sponsor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:88px}
.steps ol{list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 22px 56px;color:var(--soft)}
.steps li::before{content:counter(s) "/4";position:absolute;left:0;top:-2px;font-family:var(--hud);font-weight:700;font-size:22px;color:var(--yellow)}
.steps li b{color:#fff;font-weight:500}
.also{margin-top:4px;padding-top:18px;border-top:1px solid var(--rule);color:var(--soft)}
.script{margin:0}
.script figcaption{margin-bottom:10px;font-family:var(--hud);font-weight:600;font-size:16px;letter-spacing:.4px;text-transform:uppercase;color:var(--cream)}
.page{padding:30px 30px 26px;border-radius:4px;background:#f4f4f1;color:#151515;font:16px/1.5 var(--type)}
.page p+p{margin-top:12px}
.page .slug{font-weight:700}
.page .ch{margin:16px 0 0 34%}
.page .ch+.line{margin-top:0}
.page .line{margin:0 12% 0 17%}
.page mark{background:linear-gradient(transparent 12%,#ffe14a 12%,#ffe14a 88%,transparent 88%);color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px}

/* end card */
.end{margin-top:88px;padding:40px;border-radius:20px;background:var(--screen);box-shadow:0 0 0 1px var(--rule)}
.end .q{font-size:clamp(28px,3.6vw,44px);line-height:1.05;margin-bottom:12px;color:#fff}
.end p{color:var(--soft)}
.end .btn{margin-top:22px}
.alt{margin-top:16px;font-size:15px}

footer{max-width:1120px;margin:0 auto;padding:24px 24px 40px;border-top:1px solid var(--rule);font-size:14px;color:var(--dim)}

@media (prefers-reduced-motion:no-preference){
  .rec i{animation:rec 1.6s steps(1) infinite}
  @keyframes rec{50%{opacity:.15}}
  .mark img{animation:blink 6s infinite}
  @keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
}

@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:0;padding-top:8px}
  .copy{display:contents}
  .rec{order:1}.hero h1{order:2}.monitor{order:3}.lede{order:4}.copy .btn{order:5;justify-self:start}
  .monitor{grid-area:auto;margin:6px 0 24px;border-radius:16px}
  .monitor img{aspect-ratio:4/5;object-position:50% 38%}
  .endcard{position:static;border-radius:0;background:#000;padding:16px 16px 18px}
  .sponsor{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:640px){
  body{font-size:16px}
  .top{padding:16px 18px}.topmail{font-size:15px}
  main{padding:0 18px 32px}
  .rec span{margin-left:0;flex-basis:100%}
  .lede{font-size:17px}
  .endcard .q{font-size:18px}
  .readout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .readout div{padding:16px 0 14px 16px}
  .readout div:nth-child(odd){border-left:0;padding-left:0}
  .readout div:nth-child(n+3){border-top:1px solid var(--rule)}
  .readout b{font-size:clamp(30px,10vw,44px)}
  .who{font-size:18px;gap:4px 16px}
  .reels{grid-template-columns:minmax(0,1fr);gap:22px}
  .reels a{display:grid;grid-template-columns:38% minmax(0,1fr);gap:16px;align-items:center}
  .info{padding-top:0}
  .info .t{font-size:19px}
  .opt{font-size:17px}
  .page{padding:22px 18px;font-size:14.5px}
  .page .ch{margin-left:28%}
  .page .line{margin:0 0 0 10%}
  .end{padding:26px 20px}
  .end .btn{display:block;text-align:center;padding:16px 10px;font-size:clamp(13px,4.2vw,17px);white-space:nowrap}
  .btn{font-size:15px}
}

/* home: the waitlist, the thanks state and the 404 */
.sr,.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hp{opacity:0}
.home{grid-template-columns:minmax(0,1fr) 380px}
.home h1{max-width:8em}
#f{margin-top:30px;max-width:540px}
.field{display:flex;gap:10px}
#email{flex:1;min-width:0;height:58px;padding:0 16px;border-radius:6px;border:1.5px solid #4f5861;background:var(--screen);color:#fff;font-size:17px;outline:none}
#email::placeholder{color:#8f9aa5}
#email:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,212,59,.2)}
#email.bad{border-color:var(--red)}
#f .btn{margin-top:0;height:58px;padding:0 22px;border:0;cursor:pointer;white-space:nowrap}
.btn[disabled]{opacity:.6;cursor:default}
.err{margin-top:10px;color:#ff8a80;font-size:15px}
.err:empty{display:none}
.fine{margin-top:14px;font-size:14px;color:var(--dim)}
.fine a{color:var(--soft)}
.stories h2{margin-bottom:8px}
.series{list-style:none;border-top:1px solid var(--rule)}
.series li{border-bottom:1px solid var(--rule)}
.series a{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:4px 28px;align-items:baseline;padding:18px 0;text-decoration:none}
.series .t{font-family:var(--hud);font-weight:700;font-size:27px;line-height:1.1;letter-spacing:.4px;text-transform:uppercase;color:#fff}
.series .n{color:var(--soft)}
.series a:hover .t{color:var(--yellow)}
.stories .again{margin-top:34px}
#thanks{display:none;padding:24px 0 64px}
.done #signup,.done #below{display:none}
.done #thanks{display:block}
#thanks h1:focus{outline:none}
.pick{display:grid;gap:10px;margin-top:26px;max-width:600px}
.pick button{min-height:56px;padding:12px 16px;border-radius:6px;border:1.5px solid var(--rule);background:var(--screen);color:var(--bone);font-size:17px;line-height:1.35;text-align:left;cursor:pointer}
.pick button:hover{border-color:#4f5861}
.pick button[aria-pressed=true]{border-color:var(--yellow);background:#2a2610;color:#fff}
.back{display:none;margin-top:26px;font-family:var(--hud);font-weight:700;font-size:21px;letter-spacing:.5px;text-transform:uppercase;color:var(--yellow);text-decoration:none}
.back:hover{text-decoration:underline}
.answered .back{display:inline-block}
.foot details{margin-bottom:14px}
.foot summary{cursor:pointer;color:var(--soft);width:max-content}
.foot details p{margin-top:10px;max-width:46em}
.foot a{color:var(--soft)}
.lost{padding:24px 0 72px;max-width:760px}
.lost .series{margin-top:34px}
@media (max-width:900px){
  .home{grid-template-columns:minmax(0,1fr)}
  .home .copy{display:block;grid-area:auto}
  .home .monitor{margin:40px 0 0;max-width:440px}
}
@media (max-width:640px){
  .field{flex-direction:column}
  #email{flex:none;width:100%}
  #f .btn{width:100%}
  .series a{grid-template-columns:minmax(0,1fr)}
  .series .t{font-size:23px}
  .stories .again{display:block;text-align:center}
}
/* email fallbacks: Gmail link and a copy button, for people without a mail app */
.alt a,.copy-addr{color:#fff;text-decoration:underline;text-underline-offset:3px}
.copy-addr{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.copied{margin-left:8px;color:var(--yellow);font-weight:500}
.hero .alt{color:var(--soft)}
@media (max-width:900px){.copy .alt{order:6}}