/*
  Type is self-hosted on purpose. A <link> to fonts.googleapis.com would send
  every visitor's IP and user agent to Google, from the page whose subject is
  that this app sends nothing of yours anywhere. Both families are SIL Open Font
  License 1.1, which permits this; the license text ships beside the files in
  fonts/. Latin subset, woff2, built with pyftsubset from the TTFs in
  @expo-google-fonts/oswald and @expo-google-fonts/work-sans.

  The faces and colors mirror client/utils/theme.js and docs/style-palette.md
  in the app repo, so the pages read as the same product as the app.
*/
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/worksans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/worksans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("fonts/worksans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #F7F5F1;
  --surface: #FDFBFA;
  --text: #161E23;
  --text-secondary: #464E54;
  --text-tertiary: #6B7378;
  --divider: #E0DDDA;
  --accent: #AB4400;
  --link: #913814;

  --radius-card: 16px;

  --display: "Oswald", "Arial Narrow", sans-serif;
  --sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }

header { border-bottom: 1px solid var(--divider); padding-bottom: 1.25rem; margin-bottom: 2rem; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 36px; height: 36px; border-radius: 8px; display: block; }
.app {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  margin: 0;
}
.tagline {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--text-tertiary);
  margin: 0;
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 2.25rem 0 0.6rem;
}
p, li { color: var(--text-secondary); }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }
strong { color: var(--text); font-weight: 700; }
a { color: var(--link); }

.lede {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.25rem;
  margin: 0 0 2rem;
}
.lede p { color: var(--text); }
.lede p:last-child { margin-bottom: 0; }
.meta { color: var(--text-secondary); font-size: 0.9rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--divider); }