/* Matches the brownfoxgo.com shell so a link out of the App Store lands
   somewhere that is obviously the same company. */
:root {
  --bg: #131417;
  --panel: #1b1d21;
  --line: #2b2f35;
  --ink: #eae7e1;
  --muted: #9a958c;
  --gold: #e2c485;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) 22px 72px; }

.brand {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--gold);
  text-decoration: none;
}

h1 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -.01em;
  margin: .6em 0 .1em;
}

h2 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  margin: 38px 0 10px;
  color: var(--gold);
}

.eff { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.rule { height: 1px; background: var(--line); margin: 26px 0 0; }

a { color: var(--gold); }
a:hover { text-decoration: underline; }

ul { padding-left: 20px; }
li { margin: 7px 0; }

.note {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 24px 0;
}

nav { margin: 30px 0 0; font-size: 14px; }
nav a { margin-right: 18px; }

footer {
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}