@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --ink:#2b1d12;
  --ink-soft:#5a4330;
  --kraft:#e9d7b8;
  --kraft-deep:#d8bf95;
  --card:#f6ecd9;
  --gold:#e0a73a;
  --gold-deep:#b9791b;
  --night:#1f1626;
  --coral:#e2553f;
  --radius:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-size:18px;
  line-height:1.55;
  color:var(--ink);
  background-color:var(--kraft);
  /* paper grain, drawn in the browser so it costs no download */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:560px;margin:0 auto;padding:0 20px}

/* the video sits on a dark stage, like the film's opening */
.stage{
  background:radial-gradient(120% 80% at 50% 0%,#4a3016 0%,var(--night) 70%);
  padding:16px 0 28px;
}
.player{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  border-radius:var(--radius);
  overflow:hidden;
  background:#120c08 center/cover no-repeat;
  box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 3px rgba(224,167,58,.35);
}
.player video,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.player button.play{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;background:transparent;cursor:pointer;padding:0;
}
.player .play span{
  position:absolute;left:50%;top:50%;
  width:84px;height:84px;margin:-42px 0 0 -42px;
  border-radius:50%;
  background:rgba(224,167,58,.95);
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}
.player .play span::after{
  content:"";position:absolute;left:33px;top:24px;
  border-style:solid;border-width:18px 0 18px 28px;
  border-color:transparent transparent transparent var(--night);
}
.stage .caption{
  color:#f3dfb7;text-align:center;font-size:15px;margin:12px 0 0;opacity:.85;
}

h1,h2{font-weight:700;line-height:1.12;letter-spacing:-.01em;margin:0}
h1{font-size:34px;margin-top:28px}
h2{font-size:26px}
p{margin:0 0 14px}
.lead{font-size:19px;color:var(--ink-soft);margin-top:12px}

/* the sign-up card looks like a piece of card stock pinned to the page */
.card{
  position:relative;
  background:var(--card);
  border-radius:var(--radius);
  padding:24px 20px 20px;
  margin:24px 0;
  box-shadow:0 1px 0 #fff inset,0 10px 24px rgba(74,48,22,.18),0 2px 0 var(--kraft-deep);
}
.card::before{
  content:"";position:absolute;top:-9px;left:50%;
  width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffd98a,var(--gold-deep));
  box-shadow:0 2px 3px rgba(0,0,0,.3);
}
.card h2{margin-bottom:6px}
ul.ticks{list-style:none;padding:0;margin:14px 0 18px}
ul.ticks li{padding-left:30px;position:relative;margin:6px 0}
ul.ticks li::before{
  content:"";position:absolute;left:2px;top:.45em;
  width:16px;height:16px;border-radius:4px;
  background:var(--gold);transform:rotate(-4deg);
}

form{display:grid;gap:10px}
label{font-size:15px;color:var(--ink-soft)}
input[type=email],input[type=text]{
  width:100%;font:inherit;font-size:18px;
  padding:14px 14px;border-radius:10px;
  border:2px solid var(--kraft-deep);background:#fffaf0;color:var(--ink);
}
input:focus{outline:none;border-color:var(--gold-deep)}
.btn{
  display:block;width:100%;
  font:inherit;font-weight:700;font-size:19px;
  padding:16px 18px;border:0;border-radius:12px;cursor:pointer;
  color:var(--night);background:var(--gold);
  box-shadow:0 4px 0 var(--gold-deep);
  text-align:center;text-decoration:none;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--gold-deep)}
.btn[disabled]{opacity:.6}
.fine{font-size:14px;color:var(--ink-soft);margin:10px 0 0}
.fine a{color:inherit}
.error{color:#a3271a;font-size:15px;min-height:1px;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.story{margin:36px 0}
.story p{font-size:19px}
.still{
  width:100%;height:auto;display:block;border-radius:var(--radius);
  margin:22px 0;box-shadow:0 10px 24px rgba(74,48,22,.2);
  aspect-ratio:4/5;object-fit:cover;background:var(--kraft-deep);
}
.quote{
  font-weight:700;font-size:24px;line-height:1.25;color:var(--gold-deep);
  margin:26px 0;
}

/* thank-you page choices */
.choices{display:grid;gap:10px;margin-top:14px}
.choice{
  font:inherit;font-size:18px;text-align:left;
  padding:16px 16px;border-radius:12px;cursor:pointer;
  background:#fffaf0;color:var(--ink);
  border:2px solid var(--kraft-deep);
}
.choice[aria-pressed=true]{border-color:var(--gold-deep);background:#fbe7bd}
.choice[disabled]{cursor:default}
.done{display:none;margin-top:14px;font-weight:700}
[hidden]{display:none !important}

footer{padding:28px 0 40px;font-size:14px;color:var(--ink-soft);text-align:center}
footer a{color:inherit}

@media (min-width:700px){
  h1{font-size:44px}
  .stage{padding:32px 0 36px}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.choice{transition:transform .08s ease,box-shadow .08s ease,background .15s}
}