/* BEAM'S PUBLIC PAGES.
   Read on a phone, in Safari, by someone who tapped a link in Settings - so
   they are built mobile-first, in the game's own palette, with a measure short
   enough to read on a 390px screen. */
:root {
  --well: #14100d; --board: #241d18; --line: #322820;
  --ink: #f3ece1; --ink-2: #b6a892; --ink-3: #8d7d68;
  --gold: #ffc861; --gem: #ffe14d;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0 20px 72px;
  background: var(--well); color: var(--ink);
  font: 400 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 640px; margin: 0 auto; }
header { padding: 40px 0 8px; }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.mark img { width: 44px; height: 44px; border-radius: 10px; }
.mark b { font-size: 20px; letter-spacing: .02em; }
h1 { font-size: 27px; line-height: 1.2; margin: 26px 0 4px; letter-spacing: -.01em; }
.updated { color: var(--ink-3); font-size: 13px; margin: 0 0 30px; }
h2 { font-size: 18px; margin: 34px 0 8px; color: var(--gold); }
p, li { color: var(--ink-2); }
li { margin: 6px 0; }
a { color: var(--gold); }
strong { color: var(--ink); font-weight: 650; }
.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--gem);
  background: var(--board); border-radius: 10px;
  padding: 14px 16px; margin: 20px 0;
}
.callout p { margin: 0; color: var(--ink); }
footer {
  margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: 13px;
}
footer a { color: var(--ink-2); }