:root {
  --pearl: #f2f1ea;
  --panel: #faf8f3;
  --charcoal: #181b18;
  --stone: #6f716c;
  --orange: #ff8c2a;
  --border: rgb(138 59 73 / 0.34);
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pearl);
  color: var(--charcoal);
  font: 600 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: inherit; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.page { max-width: 760px; margin: 0 auto; padding: 32px 24px 64px; }

header { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
header img { width: 44px; height: 44px; border-radius: 10px; }
header a { font-weight: 800; text-decoration: none; }

h1 { font-size: 40px; line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; margin: 40px 0 12px; }
h2 { font-size: 22px; font-weight: 800; margin: 36px 0 8px; }
p, li { color: #2c2f2b; }
ul { padding-left: 22px; }
.lede { font-size: 20px; color: var(--stone); margin-top: 0; }
.updated { color: var(--stone); font-size: 15px; }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 3px; padding: 20px 24px; margin-top: 24px; }

footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 20px; color: var(--stone); font-size: 15px; }