/* Reading pages (privacy), on the same dark field as the game. */
:root {
  --field: #0f1d15;
  --field-2: #15281c;
  --chalk: #f3f6ee;
  --chalk-dim: #b9c6b8;
  --line: rgba(243, 246, 238, 0.14);
  --gold: #ffc61a;
  --display: 'Archivo', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--field); }
body { margin: 0; min-height: 100vh; color: var(--chalk); font-family: var(--display); font-size: 17px; line-height: 1.6; background: var(--field); }
main { max-width: 700px; margin: 0 auto; padding: 40px 16px 24px; }
a { color: var(--gold); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.home { margin: 0 0 6px; font-weight: 900; font-stretch: 115%; font-size: 20px; text-transform: uppercase; }
.home a { text-decoration: none; }
h1 { font-weight: 900; font-stretch: 125%; font-size: clamp(44px, 9vw, 64px); line-height: 1; margin: 0 0 16px; text-transform: uppercase; }
h2 { font-weight: 900; font-stretch: 112%; color: var(--gold); font-size: 22px; line-height: 1.2; margin: 36px 0 8px; text-transform: uppercase; letter-spacing: 0.01em; }
p { margin: 0 0 14px; color: var(--chalk-dim); }
.lede { font-size: 19px; color: var(--chalk); }

.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: 16px; background: var(--field-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1.45; color: var(--chalk-dim); }
.cards b { display: block; margin-bottom: 4px; color: var(--chalk); font-weight: 800; font-size: 16px; }

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