:root {
  --bg: #f5f0e3;
  --card: #fbf8f2;
  --ink: #24261f;
  --ink2: #5c634f;
  --leaf: #406b47;
  --terracotta: #bf6e45;
  --rule: rgba(36, 38, 31, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171610;
    --card: #23211a;
    --ink: #ece6d6;
    --ink2: #a6a88f;
    --leaf: #6fa173;
    --terracotta: #d38857;
    --rule: rgba(236, 230, 214, 0.14);
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.65;
  padding: 48px 24px 80px;
}
main { max-width: 640px; margin: 0 auto; }
.mark { display: block; width: 96px; height: 96px; margin: 0 auto 20px; }
h1 { font-size: 2rem; text-align: center; margin-bottom: 6px; }
.tagline {
  text-align: center; color: var(--ink2); font-style: italic;
  margin-bottom: 40px;
}
h2 { font-size: 1.25rem; margin: 36px 0 10px; }
p, li { color: var(--ink); margin-bottom: 12px; }
ul { padding-left: 22px; margin-bottom: 12px; }
a { color: var(--leaf); }
strong { color: var(--ink); }
.card {
  background: var(--card); border-radius: 16px; padding: 20px 24px;
  margin: 16px 0;
}
.card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.card p { color: var(--ink2); margin-bottom: 0; }
.footer {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule);
  text-align: center; color: var(--ink2); font-size: 0.9rem;
}
.effective { text-align: center; color: var(--ink2); font-size: 0.9rem; margin-bottom: 32px; }