/* The app's direction, carried to the web: heavy tight type over heavy rules, one red,
   everything else black on off-white. Nothing here is loaded from a CDN — no fonts, no
   scripts, no analytics — because a privacy policy that phones somewhere to render is a
   contradiction. */

:root {
  color-scheme: light dark;
  --surface: #faf9f7;
  --ink: #111111;
  --ink-secondary: #4a4a4a;
  --ink-tertiary: #7a7a7a;
  --rule: #111111;
  --hairline: #dedbd6;
  --signal: #ba0c2f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #111111;
    --ink: #f5f3f0;
    --ink-secondary: #b8b4ae;
    --ink-tertiary: #8a857e;
    --rule: #f5f3f0;
    --hairline: #333333;
    --signal: #ff4d6a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 80px;
  background: var(--surface);
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

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

h1 {
  font-size: clamp(2rem, 9vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin: 48px 0 6px;
}

.subtitle {
  color: var(--ink-tertiary);
  font-size: 0.9rem;
  margin: 0 0 14px;
}

h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 40px 0 0;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--rule);
}

h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 26px 0 4px;
}

h1 + .rule { border-top: 8px solid var(--rule); margin-bottom: 26px; }
.rule { border: 0; border-top: 8px solid var(--rule); }

p { margin: 14px 0; color: var(--ink-secondary); }
h2 + p, h3 + p { margin-top: 12px; }

strong { color: var(--ink); font-weight: 650; }

ul { margin: 14px 0; padding-left: 1.1rem; color: var(--ink-secondary); }
li { margin: 8px 0; }

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

.lede {
  font-size: 1.15rem;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}

footer {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-tertiary);
  font-size: 0.82rem;
}

footer a { color: var(--ink-tertiary); }

nav { margin: 18px 0 0; font-size: 0.9rem; }
nav a { margin-right: 18px; }