:root {
  --cream: #f6efe3;
  --sand: #e9dcc8;
  --chocolate: #33241b;
  --muted: #6e5b4c;
  --turmeric: #e3a21f;
  --herb: #4c7a3c;
  --tomato: #c64a2e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--chocolate);
  font: 18px/1.6 'Newsreader', Georgia, serif;
}

main, header, footer { max-width: 720px; margin: 0 auto; padding: 0 20px; }

header { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; }
header a.brand { font: 800 26px/1 'Bricolage Grotesque', system-ui, sans-serif; color: var(--chocolate); text-decoration: none; letter-spacing: -0.03em; }
header nav a { font: 600 15px 'Bricolage Grotesque', system-ui, sans-serif; color: var(--muted); margin-left: 18px; }

h1, h2, h3 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: 40px; font-weight: 800; margin: 48px 0 8px; }
h2 { font-size: 24px; font-weight: 700; margin: 40px 0 8px; }
h3 { font-size: 19px; font-weight: 700; margin: 24px 0 4px; }
p.updated { color: var(--muted); margin-top: 0; }
a { color: var(--chocolate); text-decoration-color: var(--turmeric); text-decoration-thickness: 2px; text-underline-offset: 3px; }
ul { padding-left: 22px; }
li { margin: 4px 0; }

.hero { padding: 40px 0 8px; }
.hero h1 { font-size: clamp(44px, 9vw, 76px); line-height: 0.95; margin: 24px 0 18px; }
.hero h1 span { color: var(--tomato); }
.hero p { font-size: 21px; max-width: 34em; }

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 32px 0; }
.card { background: var(--sand); border-radius: 22px; padding: 20px; }
.card h3 { margin-top: 0; }
.card p { margin: 0; font-size: 16px; }
.drop { display: inline-block; width: 14px; height: 13px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }

.box { background: var(--sand); border-radius: 22px; padding: 18px 22px; margin: 20px 0; }

footer { color: var(--muted); font-size: 15px; padding-top: 48px; padding-bottom: 40px; }
footer a { color: var(--muted); margin-right: 16px; }

@media (max-width: 520px) {
  header nav a { margin-left: 12px; font-size: 14px; }
  h1 { font-size: 32px; }
}