/*
  The stylesheet for /privacy, /terms and /support.

  Standalone on purpose. These three documents have to be readable by a store
  reviewer with JavaScript disabled and by a crawler that never runs it, and
  they need a stable URL for longer than any one implementation of the app. So
  they are plain HTML in public/, and this file does not import anything from
  src/ — a broken app build must not be able to take the privacy policy down
  with it.

  The palette is therefore duplicated from src/design/tokens.css, which is a
  real cost. src/design/legal-tokens.test.ts asserts the two agree, so the
  duplication cannot drift silently.

  Type: Archivo only. Newsreader is reserved, in the app, for the learner's own
  words; a legal page has none, and borrowing the reservation here would weaken
  it where it means something.
*/

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-k3kQo8UDI-1M0wlSfdnoLmvDIaI.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

:root {
  --page: #d9d0bb;
  --bg: #f3ecdc;
  --ink: #16130f;
  --muted: #5a5245;
  --faint: #8a8171;
  --off: #b9ad93;
  --accent: #e08a1e;
  --accent-text: #a3691a;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #080705;
    --bg: #16130f;
    --ink: #f3ecdc;
    --muted: #c4b79c;
    --faint: #8a8171;
    --off: #4a4238;
    --accent-text: #f0a640;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.sheet {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* The masthead: the same wordmark and wheel the app opens on, so a reviewer
   arriving here from the store listing can see it is the same product. */
header.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 28px 0 22px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 40px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.masthead nav {
  display: flex;
  gap: 18px;
  font-size: 14px;
  font-weight: 700;
}

h1 {
  font-weight: 900;
  font-stretch: 80%;
  font-size: clamp(38px, 7vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 12px;
}

.effective {
  font-size: 14px;
  font-weight: 600;
  color: var(--faint);
  margin: 0 0 40px;
}

h2 {
  font-weight: 800;
  font-stretch: 92%;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 44px 0 10px;
  padding-top: 20px;
  border-top: 2px solid var(--off);
}

h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}

p,
li {
  margin: 0 0 14px;
  text-wrap: pretty;
}

ul {
  padding-left: 22px;
  margin: 0 0 14px;
}

strong {
  font-weight: 800;
}

a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* The one claim each document leads with, set apart so it is the thing a
   reviewer reads if they read one thing. */
.lede {
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0 0 40px;
  font-size: 19px;
  line-height: 1.5;
}

.lede p:last-child {
  margin-bottom: 0;
}

footer.site {
  border-top: 2px solid var(--ink);
  margin-top: 64px;
  padding: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  font-size: 14px;
  color: var(--muted);
}

footer.site nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-weight: 700;
}

@media (max-width: 480px) {
  .sheet {
    padding: 0 18px 72px;
  }
}