:root {
  color-scheme: dark;
  --background: #12100e;
  --surface: #1b1814;
  --cream: #f4ecdf;
  --muted: #b9afa2;
  --amber: #d59a5b;
  --line: rgba(244, 236, 223, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 90% 0%, rgba(157, 94, 42, 0.15), transparent 30rem),
    var(--background);
  color: var(--cream);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

header, main, footer { width: min(780px, calc(100% - 40px)); margin-inline: auto; }
header { padding: 42px 0 30px; border-bottom: 1px solid var(--line); }
.brand { color: var(--cream); font: 600 28px/1.1 Georgia, serif; text-decoration: none; }
main { padding: 42px 0 70px; }
h1, h2 { font-family: Georgia, serif; line-height: 1.15; }
h1 { margin: 0 0 10px; font-size: clamp(42px, 8vw, 64px); }
h2 { margin: 38px 0 10px; font-size: 25px; }
p, li { color: var(--muted); }
a { color: #efb777; }
.effective { color: var(--amber); font-size: 14px; }
.callout { margin: 28px 0; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.callout strong { display: block; margin-bottom: 4px; color: var(--cream); }
footer { padding: 24px 0 44px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
footer a { margin-right: 18px; }