/* Same language as the app: off-white, one accent, a lot of air. */
:root {
  --bg: #faf8f5;
  --fg: #1c1a18;
  --muted: #6f6a64;
  --rule: rgba(28, 26, 24, 0.12);
  --accent: #e8734a;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141414;
    --fg: #ece9e5;
    --muted: #9a938c;
    --rule: rgba(236, 233, 229, 0.14);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  padding: 0 1.5rem;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 4.5rem 0 5rem;
}

header.site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 2.5rem;
}

header.site a.mark {
  font: 600 19px/1 ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.01em;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  margin-left: 1.1rem;
}

nav a:hover { color: var(--accent); }

h1 {
  font: 600 clamp(28px, 6vw, 40px)/1.2 ui-rounded, -apple-system,
    BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

h2 {
  font: 600 20px/1.3 ui-rounded, -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 2.75rem 0 0.6rem;
}

h3 {
  font: 600 16px/1.4 -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 1.8rem 0 0.4rem;
}

p, li { color: var(--fg); }

.lede {
  font-size: 19px;
  color: var(--muted);
  margin: 0 0 2rem;
}

.meta {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 2.5rem;
}

ul { padding-left: 1.15rem; }
li { margin: 0.35rem 0; }

a { color: var(--accent); }

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

.callout {
  border-left: 2px solid var(--accent);
  padding: 0.1rem 0 0.1rem 1rem;
  margin: 1.75rem 0;
  color: var(--fg);
}

footer.site {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding-top: 1.5rem;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  justify-content: space-between;
}

footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--accent); }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 15px;
}

th, td {
  text-align: left;
  padding: 0.55rem 0.75rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

th { color: var(--muted); font-weight: 500; }