/* Reading pages (privacy), in the game's plum and gold. */
:root {
  --plum: #241238;
  --plum-2: #3a1d52;
  --gold: #e8b64c;
  --gold-soft: #f6dd9b;
  --cream: #fff4dc;
  --muted: #d8c9f0;
  --ink: #1b0e27;
  --display: 'Caprasimo', 'Georgia', serif;
  --ui: 'Fredoka', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0; min-height: 100vh; color: var(--cream); font-family: var(--ui); font-size: 17px; line-height: 1.6;
  background: radial-gradient(ellipse at 50% 0%, var(--plum-2), var(--ink) 70%) no-repeat, var(--ink);
}
main { max-width: 700px; margin: 0 auto; padding: 40px 16px 24px; }
a { color: var(--gold-soft); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.home { margin: 0 0 6px; font-family: var(--display); font-size: 20px; }
.home a { text-decoration: none; }
h1 { font-family: var(--display); font-weight: 400; color: var(--gold); font-size: clamp(40px, 8vw, 56px); line-height: 1.05; margin: 0 0 16px; }
h2 { font-family: var(--display); font-weight: 400; color: var(--gold-soft); font-size: 24px; margin: 36px 0 8px; }
p { margin: 0 0 14px; }
.lede { font-size: 19px; }

.cards { list-style: none; margin: 26px 0 8px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cards li {
  padding: 14px 14px 12px; border-radius: 14px; background: rgba(36, 18, 56, 0.8);
  border: 1px solid rgba(232, 182, 76, 0.45); font-size: 15px; line-height: 1.45; color: var(--muted);
}
.cards b { display: block; margin-bottom: 4px; color: var(--gold-soft); font-weight: 600; font-size: 16px; }

.updated { margin-top: 36px; font-size: 15px; color: var(--muted); }
footer {
  max-width: 700px; margin: 0 auto; padding: 20px 16px 40px; display: flex; flex-wrap: wrap; gap: 10px 24px;
  border-top: 1px solid rgba(232, 182, 76, 0.25); font-size: 15px;
}