/* The app's palette, verbatim from Design/Theme.swift.
   Warm paper rather than white: pure white reads as a document, and every card
   sitting on it would disappear. */
:root {
  --canvas: #faf9f6;
  --surface: #fffffe;
  --sunken: #f4f2ef;
  --ink: #1c1b1a;
  --ink-2: #6f6c68;
  --ink-3: #9e9b96;
  --hairline: rgba(0, 0, 0, 0.07);
  --shell: #efe4ce;
  --kernel: #8fbe45;
  --radius: 16px;
  --serif: ui-serif, "New York", Iowan Old Style, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #111112;
    --surface: #202022;
    --sunken: #18181a;
    --ink: #f4f2ef;
    --ink-2: #a29f9b;
    --ink-3: #74726f;
    --hairline: rgba(255, 255, 255, 0.09);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

/* Everything is lowercase, wordmark included — the one typographic rule the
   app never breaks. Enforced here rather than trusted to the copy, because a
   stray capital in a heading is exactly the kind of thing nobody notices. */
h1, h2, h3, .wordmark { font-family: var(--serif); font-weight: 500; text-transform: lowercase; }
h1 { font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; }
h2 { font-size: 21px; margin: 44px 0 14px; }
p { margin: 0 0 16px; color: var(--ink-2); }
p.lead { font-size: 19px; color: var(--ink); }
a { color: inherit; }

.mark { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; }
.mark svg { width: 40px; height: 40px; flex: none; }
.wordmark { font-size: 23px; }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 22px 0;
}

.row { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hairline); }
.row:first-child { border-top: 0; }
.row .n { font-family: var(--serif); }
.row .m { margin-left: auto; font-size: 13px; color: var(--ink-3); text-transform: lowercase; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 22px;
  background: var(--ink); color: var(--canvas);
  font-family: var(--serif); font-size: 17px; text-decoration: none;
  border: 0; border-radius: var(--radius); cursor: pointer;
}
.btn.quiet { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); }
.btn + .btn { margin-top: 10px; }

.meta { font-size: 14px; color: var(--ink-3); }
.center { text-align: center; }
.disclosure { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--ink-3); }