/*
 * Styling for Evenbell's privacy policy and terms of use.
 *
 * THREE RULES, AND EACH ONE IS LOAD-BEARING.
 *
 * 1. THIS MARKUP PULLS NOTHING FROM A THIRD PARTY. No webfont, no stylesheet,
 *    no icon, no tracker. A privacy policy that pulls a font from
 *    fonts.gstatic.com hands every reader's IP address to a company that has no
 *    part in serving the page, in the act of telling them we are careful. The
 *    app's real typefaces (Cormorant Garamond, Inter) are bundled INSIDE the app
 *    and are not available here, so these pages use a system stack that echoes
 *    them and loads nothing.
 *
 *    THIS RULE USED TO SAY "NO EXTERNAL REQUESTS OF ANY KIND", AND THAT WAS AN
 *    ABSOLUTE THE HOSTING CONTRADICTS ON DAY ONE (D177). The site is served by
 *    Cloudflare, so Cloudflare sees every reader's IP address before any markup
 *    is involved — and it also injects its own email obfuscation and analytics
 *    at the edge, downstream of anything this file can control. The honest rule
 *    is about what WE choose to reference, and the hosting is disclosed in the
 *    policy's own "This website" section instead. Absolutes that the deployment
 *    breaks are worse than accurate limits: they read as broken promises.
 *
 * 2. THE READER'S OWN LIGHT OR DARK PREFERENCE WINS. Evenbell's own palette is
 *    dark, and these are not Evenbell's screens — they are two documents
 *    somebody opens from a paywall, possibly in daylight, possibly to read
 *    carefully. Legibility beats brand consistency on a legal page.
 *
 * 3. IT MUST READ ON A PHONE. The only way anybody reaches these pages is by
 *    tapping a link on the paywall, on a phone, so the phone is the primary
 *    case rather than the fallback.
 */

:root {
  color-scheme: light dark;

  --ink:        #1b1a17;
  --ink-quiet:  #55524b;
  --paper:      #faf8f3;
  --paper-warm: #f2eee4;
  --rule:       #ddd7c9;
  --accent:     #6b5a3e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #e8e2d6;
    --ink-quiet:  #a09a8c;
    --paper:      #14150f;
    --paper-warm: #1d1e17;
    --rule:       #33342a;
    --accent:     #c9b98f;
  }
}

html {
  -webkit-text-size-adjust: 100%;
}

/*
 * ONE COLUMN, CONSTRAINED ON THE BODY RATHER THAN ON EACH CHILD.
 *
 * This used to read `body > * { max-width: 38rem; margin-left: auto;
 * margin-right: auto; }`, and it was wrong in a way that only a wide window
 * showed. Centring each child means every later rule that uses the `margin`
 * SHORTHAND — h1, h2, .updated, and `p, li` — silently resets margin-left and
 * margin-right to 0 at the same specificity, so those pin left. `.summary`
 * keeps `auto` explicitly and `ul` never sets margin at all, so those two
 * stayed centred while everything around them sat hard left. On a phone the
 * auto margins compute to zero and it looks perfect, which is why rule 3 above
 * hid it. Constrain the body instead and there is no per-child centring left
 * for a shorthand to override. Found by Citadel, CR 027.
 */
body {
  max-width: 38rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 6rem;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1, h2 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}

h1 {
  font-size: 2rem;
  margin: 0 0 0.35rem;
}

h2 {
  font-size: 1.3rem;
  margin: 2.75rem 0 0.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

/* The date line under the title. */
.updated {
  margin: 0 0 2rem;
  color: var(--ink-quiet);
  font-size: 0.9375rem;
}

/* The short version at the top of each document. */
.summary {
  background: var(--paper-warm);
  border-left: 3px solid var(--accent);
  padding: 1.1rem 1.25rem;
  margin: 0 auto 2.5rem;
  border-radius: 2px;
}

.summary p:first-child { margin-top: 0; }
.summary p:last-child  { margin-bottom: 0; }

p, li {
  margin: 0 0 1rem;
}

ul {
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.5rem;
}

strong {
  font-weight: 600;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* The cross-link between the two documents, and the footer line. */
.footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-quiet);
  font-size: 0.9375rem;
}