/* Shared by every page on the app's site. Filled by /store-package §5.

   Light, always: the house rule for generated pages, and the right register
   for a policy read by somebody already suspicious and a reviewer in a hurry.
   The app's identity comes through the palette and the mark, not the ground.
   Four tokens, from docs/design/tokens.json:
     --paper   the light end of the palette (colors.surface on a light theme,
               colors.onSurface on a dark one)
     --ink     the dark end (the other of the two)
     --accent  colors.primary; must reach 4.5:1 on --paper, darken it if not
     --quiet   secondary text; --ink eased toward --paper, still 4.5:1
   Type is the system stack unless the app's font file is committed under
   the site root. Nothing on this site is fetched from a third party. */
:root {
  color-scheme: only light; /* "only": Chrome's auto-darkening skips the page too */
  --paper: #FFF8EC;
  --ink: #4A3324;
  --accent: #B23A72;
  --quiet: #7A6250;
  --rule: color-mix(in srgb, var(--ink) 16%, var(--paper));
  --tint: color-mix(in srgb, var(--accent) 7%, var(--paper));
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 40px 22px 72px;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main, footer { max-width: 640px; margin: 0 auto; }
h1 { font-size: 27px; letter-spacing: .3px; margin: 0 0 4px; }
h2 {
  font-size: 17px;
  margin: 34px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
p, li { margin: 0 0 11px; }
ul, ol { padding-left: 20px; }
a { color: var(--accent); }
.updated { color: var(--quiet); font-size: 14px; margin: 0 0 30px; }
table { border-collapse: collapse; width: 100%; margin: 6px 0 14px; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
th { width: 38%; font-weight: 600; }
.note {
  background: var(--tint);
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  margin: 16px 0;
  font-size: 15px;
}
footer { margin-top: 42px; color: var(--quiet); font-size: 14px; }

/* Landing page only. */
.landing { text-align: center; padding-top: 24px; }
.landing .mark {
  width: 96px; height: 96px; border-radius: 22px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 18%, transparent);
}
.landing h1 { font-size: 34px; margin-top: 14px; }
.landing .lede { font-size: 19px; color: var(--quiet); margin: 0 auto 26px; max-width: 30ch; }
.play {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.shot {
  display: block;
  width: min(270px, 80vw);
  height: auto;
  margin: 36px auto 0;
  border-radius: 18px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 22%, transparent);
}
.landing + footer { text-align: center; }