/*
  Type is self-hosted on purpose (#88). A <link> to fonts.googleapis.com would
  send every visitor's IP and user agent to Google, on the page whose whole
  subject is that this app collects nothing and involves no third parties.
  Both families are SIL Open Font License 1.1, which permits this; the license
  text ships alongside the files in fonts/.

  The five faces mirror client/utils/theme.js exactly, so the pages read as the
  same product as the app rather than as a document that shares its palette.
*/
@font-face {
  font-family: "Bitter";
  src: url("fonts/bitter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bitter";
  src: url("fonts/bitter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("fonts/karla-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("fonts/karla-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("fonts/karla-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #FAF4EC;
  --surface: #FEFBF7;
  --text: #261D16;
  --text-secondary: #61564D;
  --text-tertiary: #7B6F66;
  --divider: #EBE3DA;
  --accent: #6F3F22;
  --link: #97400D;

  /* radius.card and radius.field from client/utils/theme.js */
  --radius-card: 22px;
  --radius-field: 17px;

  --serif: "Bitter", Georgia, "Times New Roman", serif;
  --sans: "Karla", -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; }
/*
  The app mark, name, and stacked tagline reproduce the in-app header at its
  own pixel sizes (client/components/Header/Header.style.js): 30px mark at an
  8px radius, 10px gap, 28px Bitter title.
*/
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; display: block; }
.app {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  margin: 0;
}
/*
  Two stacked lines, not one (#81). Uppercase, tracked, and set in Karla
  Medium at the app's own 11.5px, so the pages carry the same tagline
  treatment a person just saw on the App Store screenshots.
*/
.tagline {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  line-height: 1.22;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
}
.tagline-top { margin-top: 1px; }

h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  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 { margin: 0; color: var(--text); font-size: 1.05rem; }
.meta { color: var(--text-secondary); font-size: 0.9rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--divider); }
footer { margin-top: 2rem; font-size: 0.9rem; }