/* Shared by the pages that are read rather than sold. Same tokens as index.html, which keeps
   its own copy inline because it is published as a single self-contained artifact too. */
:root {
  color-scheme: light dark;
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --hair: #DDDEE2;
  --ink: #0B0C0E;
  --ink-2: #55575D;
  --ink-3: #686B72;
  --accent-tx: #96570A;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08090B; --surface: #14161A; --hair: #24272D;
    --ink: #F2F3F5; --ink-2: #A0A4AC; --ink-3: #868C95; --accent-tx: #F6C773;
  }
}
:root[data-theme="dark"] {
  --bg: #08090B; --surface: #14161A; --hair: #24272D;
  --ink: #F2F3F5; --ink-2: #A0A4AC; --ink-3: #868C95; --accent-tx: #F6C773;
}
:root[data-theme="light"] {
  --bg: #F5F5F7; --surface: #FFFFFF; --hair: #DDDEE2;
  --ink: #0B0C0E; --ink-2: #55575D; --ink-3: #686B72; --accent-tx: #96570A;
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 clamp(20px, 5vw, 40px) 96px;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 66ch; margin-inline: auto; }

nav { max-width: 66ch; margin: 0 auto; padding: 26px 0 0; }
nav a { color: var(--ink-2); text-decoration: none; font-size: 13px; }
nav a:hover { color: var(--ink); }

h1 { font-size: clamp(30px, 4.6vw, 42px); line-height: 1.08; letter-spacing: -.03em; margin: 40px 0 6px; }
h2 { font-size: 19px; letter-spacing: -.016em; margin: 42px 0 8px; }
.sub { color: var(--ink-3); font-size: 13.5px; margin: 0 0 8px; font-family: var(--mono); }
p, li { color: var(--ink-2); }
li { margin-bottom: 7px; }
strong { color: var(--ink); font-weight: 620; }
code { font-family: var(--mono); font-size: .88em; color: var(--accent-tx); }
a { color: var(--accent-tx); }

.card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 14px; padding: 20px 24px; margin: 26px 0;
}
.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

footer {
  max-width: 66ch; margin: 72px auto 0; padding-top: 22px;
  border-top: 1px solid var(--hair); color: var(--ink-3); font-size: 13px;
}
footer a { color: var(--ink-2); }