/* Palette mirrors packages/design-tokens/src/colors.ts.
   test/style.test.ts fails if these drift apart. */
:root {
  --bg: #F3EADB;
  --raised: #FBF4E6;
  --line: #D8C9A8;
  --ink: #1D1B18;
  --soft: #3E3A33;
  --mute: #6C6659;
  --faint: #A9A295;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1B3A;
    --raised: #24254B;
    --line: #3A3B63;
    --ink: #F3EADB;
    --soft: #D9CFBF;
    --mute: #A69F8E;
    --faint: #7F7A6E;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 56px 24px 96px;
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.65;
}

.wrap { max-width: 68ch; margin: 0 auto; }

.wordmark {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto 40px;
  background: #F3EADB;
  padding: 8px;
  border-radius: 6px;
}

.kicker {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 14px;
}

h1 {
  font-style: italic;
  font-weight: 500;
  font-size: 34px;
  letter-spacing: -1px;
  line-height: 1.2;
  margin: 0 0 8px;
}

h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 40px 0 10px;
}

p, li { color: var(--soft); margin: 0 0 16px; }

ul { padding-left: 22px; }

a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

.lede { font-size: 19px; color: var(--soft); }

.updated {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 40px;
}

.prose { border-top: 1px solid var(--line); padding-top: 32px; }

.footer {
  border-top: 1px solid var(--line);
  margin-top: 56px;
  padding-top: 20px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mute);
}
.footer a { color: var(--mute); }

@media (max-width: 480px) {
  body { padding: 40px 20px 72px; font-size: 16px; }
  h1 { font-size: 28px; }
}