/* Layout for the two document pages — privacy and account deletion. The
   palette and faces live in tokens.css, which this expects to be loaded
   first. The landing page has its own sheet; only colour is shared. */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 40px 20px 72px;
  background: var(--ink);
  color: var(--chalk);
  font: 16px/1.6 var(--body);
}

main { max-width: 640px; margin: 0 auto; }

.brand {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 10px;
}

h1 { font-family: var(--display); font-size: 28px; line-height: 1.25; margin: 0 0 12px; }
h2 { font-family: var(--display); font-size: 17px; margin: 32px 0 10px; }
p { color: var(--pencil); margin: 0 0 14px; }
ol, ul { color: var(--pencil); padding-left: 22px; margin: 0 0 14px; }
li { margin-bottom: 7px; }
strong { color: var(--chalk); font-weight: 600; }
a { color: var(--brass); }

.card {
  background: var(--felt);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 14px;
}
.card h2 { margin-top: 0; }

/* The point a reader is most likely to be surprised by, on either page. */
.card.flag { border-color: #3a3320; }
.card.flag h2 { color: var(--brass); }

.updated { font-size: 14px; margin-bottom: 28px; }

footer {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  color: var(--pencil);
  font-size: 14px;
}