:root { --paper:#F3F0E8; --sheet:#FBFAF6; --ink:#1D1C1A; --graphite:#6E6A62; --hairline:#DAD5CA; --signal:#D9531E; }
@media (prefers-color-scheme: dark) {
  :root { --paper:#161513; --sheet:#201F1C; --ink:#EEEAE1; --graphite:#9A958B; --hairline:#34322E; --signal:#E8693A; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 56px 20px 80px; }
h1, h2 { font-family: "New York", "Iowan Old Style", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
h1 { font-size: 44px; margin: 0 0 8px; }
h2 { font-size: 24px; margin: 40px 0 8px; }
p, li { color: var(--graphite); }
.caption { font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.card { background: var(--sheet); border: .5px solid var(--hairline); border-radius: 16px; padding: 18px 20px; margin: 16px 0; }
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }
nav { display:flex; gap:20px; margin-bottom: 40px; }
.button { display:inline-block; background: var(--signal); color:#fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; }
.button:hover { text-decoration: none; opacity: .9; }
.mark { width: 56px; height: 56px; border-radius: 13px; display:block; margin-bottom: 24px; }
footer { margin-top: 56px; font-size: 14px; color: var(--graphite); border-top: .5px solid var(--hairline); padding-top: 16px; }