/* Shared styles for the crawlable static pages (/about/, /privacy/).
   Mirrors the app tokens in src/App.css so the pages read as part of Riftdle. */
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-display: swap; src: url('/fonts/chakra-petch-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap; src: url('/fonts/chakra-petch-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url('/fonts/dm-sans-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-display: swap; src: url('/fonts/dm-sans-latin-600.woff2') format('woff2'); }

:root {
  --bg: #0a0f16;
  --surface: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.1);
  --text: #e8e8f0;
  --text-muted: #9a9cab;
  --gold: #e89a2b;
  --gold-bright: #eeb844;
  --gold-deep: #b05f06;
  --font-heading: 'Chakra Petch', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
}
.page { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: linear-gradient(to bottom, var(--gold-bright) 20%, var(--gold) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 0 0 12px; }
h2 { font-size: 1.35rem; margin: 48px 0 12px; color: var(--gold-bright); }
h3 { font-size: 1.05rem; margin: 24px 0 6px; }
p, li { color: var(--text); }
.lede { color: var(--text-muted); font-size: 1.1rem; margin-top: 0; }
a { color: var(--gold-bright); }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 0; list-style: none; }
.modes li { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 16px; }
.modes strong { font-family: var(--font-heading); display: block; margin-bottom: 4px; color: var(--gold-bright); }
.btn-primary {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1a1208;
  background: var(--gold);
  text-decoration: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  padding: 13px 20px;
}
.btn-primary:hover { background: var(--gold-bright); }
dt { font-family: var(--font-heading); font-weight: 600; margin-top: 20px; }
dd { margin: 4px 0 0; color: var(--text); }
footer { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; }
footer a { color: var(--text-muted); }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }