/* The privacy policy and the terms.

   Their own stylesheet, and a small one. These two pages are opened by
   people who have not installed anything and by app-store reviewers with a
   browser, so they must render on their own with no app, no fonts fetched
   and no script. Same warm dark as the app, and nothing else in common. */

:root {
  --ink-0: #100c0a;
  --ink-2: #1e1713;
  --rule:  #322620;
  --paper:  #f3ebe1;
  --paper-2:#c4b3a3;
  --paper-3:#8a7867;
  --ember:  #ef7d4e;
  --gold:   #e3b25f;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 28px 22px calc(60px + env(safe-area-inset-bottom, 0px));
  background: var(--ink-0);
  color: var(--paper-2);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 42rem; margin: 0 auto; }

.mark {
  font-family: var(--serif);
  font-size: 30px; letter-spacing: -.02em; color: var(--paper);
  margin: 0 0 2px;
}
.kicker {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--paper-3); margin: 0 0 26px;
}

h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: 20px; letter-spacing: -.015em; color: var(--paper);
  margin: 34px 0 10px;
}
h3 { font-size: 15px; color: var(--paper); margin: 22px 0 6px; }

p, li { margin: 0 0 12px; }
ul { padding-left: 20px; margin: 0 0 12px; }
strong { color: var(--paper); font-weight: 600; }
a { color: var(--ember); }

.lede {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.55;
  color: var(--paper); margin: 0 0 8px;
}

.meta { font-size: 13px; color: var(--paper-3); }

hr { border: none; border-top: 1px solid var(--rule); margin: 34px 0; }

/* A gap only a person can fill.
   Loud on purpose: these pages are public the moment they are deployed, and
   a placeholder that looks like prose is a placeholder that ships. */
.fill {
  display: inline-block;
  background: rgba(227, 178, 95, .14);
  border: 1px dashed var(--gold);
  color: var(--gold);
  border-radius: 3px;
  padding: 0 6px;
  font-family: var(--sans); font-size: .92em; font-weight: 600;
}

.draft {
  border: 1px dashed var(--gold);
  background: rgba(227, 178, 95, .08);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--paper-2);
}
.draft strong { color: var(--gold); }

nav.back { margin-top: 40px; font-size: 14px; }

/* The landing page, selu.world itself: the name, one sentence, when it
   arrives, and the required links. Centred in the window, nothing else on
   it. */
body.landing {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
body.landing main { max-width: 28rem; }
body.landing .mark { font-size: 52px; margin-bottom: 10px; }
body.landing .lede { font-size: 20px; margin-bottom: 30px; }

/* When it arrives. Deliberately not ember, not underlined and not boxed:
   nothing about it may look like something to press. */
.soon {
  margin: 0;
  font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}

.legal-links {
  margin-top: 56px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  font-size: 13.5px;
}
.legal-links a { color: var(--paper-3); }