@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Serif+Display&display=swap");

:root {
  color-scheme: light dark;
  --ink: #173a35;
  --ink-soft: #52655f;
  --paper: #f7f0e3;
  --surface: #fffdf8;
  --yellow: #f7c52b;
  --yellow-soft: #fff1b8;
  --pink: #d94e83;
  --line: rgba(23, 58, 53, .14);
}

body { margin: 0 !important; padding: 0 !important; color: var(--ink-soft) !important; background: var(--paper) !important; font-family: "DM Sans", system-ui, sans-serif !important; line-height: 1.7 !important; }
header { padding: clamp(72px, 10vw, 120px) 24px 64px !important; color: var(--ink) !important; background: radial-gradient(circle at 78% 25%, var(--yellow) 0 10%, transparent 30%), var(--yellow-soft) !important; }
header h1 { max-width: 900px; margin: 0 auto 12px; color: var(--ink) !important; font: 400 clamp(42px, 6vw, 72px)/1 "DM Serif Display", Georgia, serif !important; letter-spacing: -.035em; }
header p { max-width: 900px; margin: 0 auto; color: var(--ink-soft) !important; font-weight: 700; }
main { max-width: 900px !important; margin: 54px auto 72px !important; padding: clamp(24px, 5vw, 54px) !important; color: var(--ink-soft) !important; background: var(--surface) !important; border: 1px solid var(--line); border-radius: 28px !important; box-shadow: none !important; }
main h1, main h2 { color: var(--ink) !important; font-family: "DM Serif Display", Georgia, serif !important; letter-spacing: -.025em; }
main h2 { margin-top: 42px; font-size: clamp(28px, 4vw, 42px); line-height: 1.12; }
main a { color: var(--pink) !important; font-weight: 700; text-underline-offset: 4px; }
main li { margin-bottom: 8px; }
footer { padding: 30px 24px !important; color: rgba(255,255,255,.76) !important; background: #173a35 !important; }
footer p { margin: 0; }

@media (max-width: 940px) { main { width: calc(100% - 30px); } }

@media (prefers-color-scheme: dark) {
  :root { --ink: #f6f1e8; --ink-soft: #c9d0cc; --paper: #102622; --surface: #19332e; --yellow-soft: #4a4120; --line: rgba(247, 240, 227, .14); }
  header { background: radial-gradient(circle at 78% 25%, rgba(247,197,43,.36) 0 10%, transparent 30%), var(--yellow-soft) !important; }
}
