/* The app's colours: cream paper, warm ink, tangerine. */
:root {
  --paper: #fbf6ee;
  --card: #ffffff;
  --ink: #2b2118;
  --muted: #7a6a5c;
  --line: #eadfd2;
  --tangerine: #e85d2a;
  --ember: #b8441a;
  --peach: #fce3d5;
  --sun: #f6b73c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 680px; margin: 0 auto; padding: 48px 24px 64px; }

a { color: var(--ember); }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 900; letter-spacing: 0.01em; text-decoration: none; color: var(--ink);
}
.brand .sun { width: 28px; height: 28px; border-radius: 50%; background: var(--sun); }

h1 { font-size: 2.4rem; line-height: 1.15; margin: 32px 0 8px; font-weight: 900; }
h2 { font-size: 1.25rem; margin: 36px 0 8px; }
.muted { color: var(--muted); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 28px;
  padding: 20px 24px; margin: 24px 0;
}
.card ul { margin: 0; padding-left: 1.2em; }

.pill {
  display: inline-block; background: var(--peach); color: var(--ink);
  border-radius: 999px; padding: 4px 14px; font-size: 0.9rem;
}

footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
footer a { color: var(--muted); }