@font-face { font-family: 'Instrument Serif'; src: url('/fonts/InstrumentSerif_400Regular.ttf'); font-display: swap; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; src: url('/fonts/InstrumentSerif_400Regular_Italic.ttf'); font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/InstrumentSans_400Regular.ttf'); font-display: swap; }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; src: url('/fonts/InstrumentSans_600SemiBold.ttf'); font-display: swap; }

:root { --bg: #f4f1ec; --surface: #fff; --ink: #1c1b19; --ink2: #6a665e; --line: #e4dfd6; --ember: #a8401f; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111110; --surface: #1c1b19; --ink: #f4f1ec; --ink2: #a8a39a; --line: #2e2c29; --ember: #f2a07f; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 'Instrument Sans', system-ui, sans-serif; }
main, header, footer { max-width: 680px; margin: 0 auto; padding: 0 20px; }
header { padding-top: 28px; }
.wordmark { font: italic 400 28px/1 'Instrument Serif', serif; color: var(--ink); text-decoration: none; }
h1 { font: 400 clamp(40px, 9vw, 60px)/1.05 'Instrument Serif', serif; margin: 44px 0 12px; }
h2 { font: 600 19px/1.3 'Instrument Sans', sans-serif; margin: 38px 0 8px; }
p, ul, ol { margin: 10px 0; }
li { margin: 6px 0; }
a { color: var(--ember); }
.lead { font-size: 20px; color: var(--ink2); }
.meta { color: var(--ink2); font-size: 15px; }
.hero { text-align: center; padding: 56px 0 20px; }
.hero img { width: 112px; height: 112px; border-radius: 26px; }
.hero h1 { margin-top: 26px; }
.steps { display: grid; gap: 12px; margin: 34px 0; padding: 0; list-style: none; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0; }
.steps strong { display: block; }
table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
th { font-weight: 600; }
footer { margin-top: 56px; padding-bottom: 40px; color: var(--ink2); font-size: 15px; }
footer a { color: inherit; margin-right: 16px; }