/* Shared look for the public pages (/landing, /privacy).
   Tokens mirror docs/01-design-system.md so the site reads like the game. */

/* Self-hosted on purpose: these pages shouldn't hand visitors' IPs to a font CDN. */
@font-face {
  font-family: "Archivo Black";
  src: url("/static/fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg: #FBF7EE;
  --bg-2: #F4ECDB;
  --panel: #FFFFFF;
  --ink: #1F1A14;
  --ink-2: #4A4035;
  --ink-3: #6F6453;
  --shield: #E8542F;
  --shield-dark: #C13E1F;
  --gold: #F2B500;
  --gold-dark: #B07F00;
  --green: #1FA771;
  --line: rgba(31, 26, 20, 0.12);
  --dot: rgba(31, 26, 20, 0.07);
  --shadow: #1F1A14;
  --link: #C13E1F;
  --display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17130F;
    --bg-2: #241E18;
    --panel: #2A231C;
    --ink: #FBF7EE;
    --ink-2: #E2D8C6;
    --ink-3: #B5A890;
    --line: rgba(251, 247, 238, 0.14);
    --dot: rgba(251, 247, 238, 0.05);
    --shadow: #000000;
    --link: #FF8A66;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 15% -10%, rgba(242, 181, 0, 0.16), transparent 55%),
    radial-gradient(ellipse at 100% 20%, rgba(232, 84, 47, 0.10), transparent 50%),
    radial-gradient(var(--dot) 1.6px, transparent 1.7px);
  background-size: auto, auto, 18px 18px;
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.6 var(--body);
}
img { max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 2px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 28px 16px 56px; }

.kicker {
  display: inline-block; margin: 0 0 6px; padding: 3px 10px;
  background: var(--gold); color: #1F1A14;
  border: 2px solid var(--ink); border-radius: 999px;
  font: 700 11px/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase;
}

.card {
  background: var(--panel);
  border: 2px solid var(--ink); border-radius: 18px;
  box-shadow: 0 4px 0 var(--shadow);
  padding: 22px 22px 18px; margin: 0 0 22px;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

h2 {
  margin: 0 0 10px; font: 400 19px/1.25 var(--display);
  text-transform: uppercase; letter-spacing: .02em;
}
p, ul { margin: 0 0 12px; }

.pill {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  border: 1.5px solid var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap;
}

footer { margin-top: 30px; text-align: center; color: var(--ink-3); font-size: 14px; }
footer .bones { font: 400 15px/1.4 var(--display); color: var(--ink); letter-spacing: .03em; }
footer nav a { margin: 0 8px; }
.legal { font-size: 12px; opacity: .85; }

@keyframes wiggle { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  html { scroll-behavior: auto; }
}