/* ===========================================================================
   Written pages — the ones that are prose rather than app.

   /privacy and /terms are plain HTML files rather than views inside the app,
   for two reasons. They have to be readable by somebody who is not signed in
   and never will be — Google reads them before it will publish the sign-in
   button — and a page saying what happens to your writing should not itself
   depend on 3,000 lines of JavaScript having loaded first.

   They borrow app.css for the palette and the typefaces, and this file for the
   one thing app.css has no use for: a column of text a person reads.
   =========================================================================== */

.page {
  /* Above the starfield, which is fixed and therefore paints over anything
     that is not positioned. The reset page was invisible for weeks for want of
     these two lines — the text was all there and none of it could be seen. */
  position: relative;
  z-index: 1;

  max-width: 680px;
  margin: 0 auto;
  padding: 40px 22px 90px;
}

.page__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 46px;
  color: var(--starlight);
}
.page__brand svg { width: 28px; height: 28px; flex: none; }
.page__brand span {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .01em;
}
.page__brand em { font-style: italic; }

.page h1 {
  font-family: var(--display);
  font-size: 38px;
  line-height: 1.08;
  margin-bottom: 12px;
}

/* When it was last changed, said at the top rather than buried at the bottom:
   it is the first thing somebody rereading this page wants to know. */
.page__when {
  color: var(--faint);
  font-size: 13px;
  margin-bottom: 34px;
}

.page__lede {
  color: var(--dust);
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 40px;
}

.page h2 {
  font-family: var(--display);
  font-size: 25px;
  margin: 46px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.page h2:first-of-type { border-top: none; padding-top: 0; }

.page h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--starlight);
  margin: 26px 0 8px;
}

.page p {
  color: var(--dust);
  margin-bottom: 15px;
}

.page ul {
  color: var(--dust);
  margin: 0 0 15px;
  padding-left: 20px;
}
.page li { margin-bottom: 9px; }

.page strong { color: var(--starlight); font-weight: 600; }

.page a {
  color: var(--starlight);
  text-decoration: underline;
  text-decoration-color: var(--haze);
  text-underline-offset: 3px;
}
.page a:hover { text-decoration-color: var(--violet); }

/* A short answer standing on its own, where the whole of a section is one
   sentence somebody came looking for. */
.page__plain {
  border-left: 2px solid var(--violet);
  padding: 2px 0 2px 16px;
  margin: 22px 0;
  color: var(--starlight);
}

.page__foot {
  margin-top: 60px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  color: var(--faint);
  font-size: 13.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

@media (max-width: 560px) {
  .page { padding: 28px 18px 70px; }
  .page h1 { font-size: 31px; }
  .page h2 { font-size: 22px; }
}