@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,800&family=DM+Sans:wght@400;700&display=swap');

:root {
  --tmava: #1E1A1B;
  --akce: #C8102E;
  --svetla: #FBE9EB;
  --sedy: #6E6668;
  --pozadi: #FAF7F5;
  --ramecek: #EDE4E4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pozadi);
  color: var(--tmava);
  font: 17px/1.6 'DM Sans', Arial, sans-serif;
}

.obal { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }

header { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
header img { width: 44px; height: 44px; border-radius: 12px; }
.logo { font: 800 26px 'Bricolage Grotesque', Arial, sans-serif; letter-spacing: -0.5px; color: var(--tmava); text-decoration: none; }
.logo span { color: var(--akce); }

h1, h2 { font-family: 'Bricolage Grotesque', Arial, sans-serif; font-weight: 800; line-height: 1.15; letter-spacing: -0.5px; }
h1 { font-size: 40px; margin: 0 0 12px; }
h2 { font-size: 24px; margin: 32px 0 8px; }

.uvod { font-size: 20px; color: var(--sedy); margin: 0 0 24px; }

.karta { background: #fff; border: 1px solid var(--ramecek); border-radius: 18px; padding: 20px 22px; margin: 16px 0; }
.karta h2 { margin-top: 0; }

ol, ul { padding-left: 22px; }
li { margin: 6px 0; }

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

.tlacitko { display: inline-block; background: var(--akce); color: #fff; text-decoration: none; font-weight: 700; padding: 12px 20px; border-radius: 999px; }

footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--ramecek); color: var(--sedy); font-size: 15px; }
footer a { color: var(--sedy); margin-right: 16px; }

@media (max-width: 520px) {
  h1 { font-size: 32px; }
}