:root {
  color-scheme: light dark;
  --paper: #F6F6F4;
  --ink: #141413;
  --mute: #4A4A48;
  --faint: #8A8A88;
  --rule: rgba(20, 20, 19, 0.12);
  --gold: #F2B33F;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121212;
    --ink: #F2F2F0;
    --mute: #C4C4C2;
    --faint: #7E7E7C;
    --rule: rgba(242, 242, 240, 0.14);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.62 ui-sans-serif, -apple-system, "Plus Jakarta Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 46rem; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
.mark { display: flex; align-items: center; gap: .75rem; margin-bottom: 3rem; }
.mark b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.04em; }
.mark i { display: block; flex: 0 0 2.75rem; height: 1px; background: var(--gold); }
h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -.045em; line-height: 1.1; margin: 0 0 .5rem; }
.when { color: var(--faint); font-size: .8rem; margin: 0 0 3rem; }
h2 {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em;
  margin: 3rem 0 .75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
}
h3 { font-size: .95rem; font-weight: 700; margin: 1.75rem 0 .4rem; }
p, li { color: var(--mute); }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.1rem; }
li { margin-bottom: .45rem; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--ink); text-underline-offset: 3px; }
.lead { font-size: 1.05rem; color: var(--ink); }
.fill {
  background: var(--gold); color: #141413; font-weight: 700;
  padding: 0 .3rem; border-radius: 3px;
}
footer {
  margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  color: var(--faint); font-size: .8rem;
}

/* The front page only. */
.claim { font-size: 3rem; line-height: 1.04; margin: 0; }
.claim.second { margin-top: 1.5rem; }
.quiet { color: var(--faint); }
.soon {
  margin-top: 2.5rem; font-size: .8rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint);
}
main > .lead { margin-top: 2.5rem; max-width: 30rem; }
@media (max-width: 30rem) { .claim { font-size: 2.25rem; } }