@font-face{font-family:"Sofia Sans Extra Condensed";font-weight:500;font-display:swap;src:url(/fonts/SofiaSansExtraCondensed-500.woff2) format("woff2")}
@font-face{font-family:"Sofia Sans Extra Condensed";font-weight:900;font-display:block;src:url(/fonts/SofiaSansExtraCondensed-900.woff2) format("woff2")}
@font-face{font-family:"Martian Mono";font-weight:400;font-display:swap;src:url(/fonts/MartianMono-400.woff2) format("woff2")}

:root{
  --pitch:#0B0A0C; --tar:#1B1A1D; --ash:#8C8780; --chalk:#EDEBE6; --neon:#9500FF;
  /* w, the snap unit: 24px at phone width, growing with the viewport. Everything is a multiple of it. */
  --w:clamp(24px, 2.2vw, 40px);
  --sofia:"Sofia Sans Extra Condensed","Arial Narrow",sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--pitch);color:var(--chalk)}
body{margin:0;font:500 calc(var(--w)*.83)/1.2 var(--sofia);-webkit-font-smoothing:antialiased}

main{display:grid;grid-template-columns:1fr;min-height:100svh}
.mark{margin:0;padding:var(--w);font:900 calc(var(--w)*2.5)/.9 var(--sofia);letter-spacing:0}
.nai{color:var(--neon)}
.film{display:block;width:100%;height:auto;background:var(--tar)}
.end{padding:var(--w) var(--w) calc(var(--w)*2)}
.line{margin:0}
.soon{margin:var(--w) 0 calc(var(--w)*2);font:400 calc(var(--w)*.5)/1.5 var(--mono);color:var(--ash)}

.signup{display:flex;max-width:calc(var(--w)*16);border:1px solid var(--chalk)}
.signup input[type=email]{flex:1;min-width:0;height:calc(var(--w)*2);padding:0 calc(var(--w)*.5);border:0;border-radius:0;
  background:var(--pitch);color:var(--chalk);font:400 calc(var(--w)*.5)/1 var(--mono)}
.signup input::placeholder{color:var(--ash);opacity:1}
.signup button{height:calc(var(--w)*2);padding:0 var(--w);border:0;border-radius:0;background:var(--chalk);color:var(--pitch);
  font:400 calc(var(--w)*.5)/1 var(--mono);cursor:pointer}
.signup :focus-visible{outline:2px solid var(--chalk);outline-offset:2px}
[hidden]{display:none !important}
.done{margin:0;height:calc(var(--w)*2);display:flex;align-items:center;font:400 calc(var(--w)*.5)/1 var(--mono)}
.privacy{display:inline-block;margin-top:var(--w);font:400 calc(var(--w)*.42)/1 var(--mono);color:var(--ash);text-decoration:none}
.privacy:hover,.privacy:focus-visible{color:var(--chalk);text-decoration:underline}
.hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* desktop: film at full height on the left, uncropped; wordmark top right, signup bottom right */
@media (min-width:900px){
  main{grid-template-columns:auto 1fr;grid-template-rows:1fr auto;height:100svh}
  .film{grid-row:1 / 3;grid-column:1;height:100svh;width:auto}
  .mark{grid-column:2;grid-row:1;padding:calc(var(--w)*2);font-size:calc(var(--w)*5)}
  .end{grid-column:2;grid-row:2;padding:0 calc(var(--w)*2) calc(var(--w)*2)}
  .line{font-size:var(--w)}
}

/* plain pages: privacy, thanks, confirmed */
main.plain{display:block;max-width:calc(var(--w)*24);min-height:0;padding:calc(var(--w)*2) var(--w)}
.plain .home{font:900 calc(var(--w)*1.5)/1 var(--sofia);color:var(--chalk);text-decoration:none}
.plain h1{font:900 calc(var(--w)*2)/1 var(--sofia);margin:var(--w) 0}
.plain p{margin:0 0 var(--w)}
.plain a{color:var(--chalk)}