* { box-sizing: border-box; }
:root { --ink: #18251f; --green: #315d4d; --red: #8d3428; --paper: #f4f0e4; --line: #8c927e; --muted: #536158; }
html { background: #d9d5c8; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.55 Georgia, "Times New Roman", serif; }
.page { max-width: 820px; margin: 24px auto; padding: 18px 28px 32px; border: 1px solid var(--line); background: #fbf9f1; box-shadow: 4px 4px 0 #aaa695; }
.masthead { text-align: center; }
.rule { height: 7px; margin-bottom: 20px; border-top: 2px solid var(--green); border-bottom: 1px solid var(--red); }
.kicker { margin: 0; color: var(--red); font: bold 13px/1.2 "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 6px 0 0; color: var(--green); font: bold clamp(42px, 9vw, 76px)/1 "Courier New", monospace; letter-spacing: -5px; }
h2 { color: var(--green); font: bold 22px/1.2 Georgia, serif; }
.tagline { margin: 12px auto 4px; font-size: 23px; }
.intro { max-width: 610px; margin: 8px auto 18px; }
a { color: var(--red); font-weight: bold; }
.actions { margin: 20px 0 6px; }
.button { display: inline-block; margin-right: 10px; padding: 7px 12px; color: #fff; background: var(--green); border: 1px solid #203f34; text-decoration: none; }
.button:hover, .button:focus { background: var(--red); }
section { margin-top: 25px; padding: 4px 0 22px; border-top: 1px dashed var(--line); }
section h2 { margin-bottom: 7px; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.columns p { margin-top: 0; }
.howto ol { margin-top: 4px; padding-left: 27px; }
.small { color: var(--muted); font-size: 14px; }
footer { margin-top: 24px; padding-top: 12px; border-top: 3px double var(--line); text-align: center; }
footer p { margin: 4px 0; }
@media (max-width: 600px) { .page { margin: 0; padding: 14px 18px 25px; border-width: 0 1px; box-shadow: none; } .columns { display: block; } .columns > div + div { margin-top: 22px; } h1 { letter-spacing: -3px; } }