/* Shared stylesheet for the static, server-crawlable info pages
   (about.html, faq.html, giveaway-rules.html). Deliberately plain CSS,
   no build step — these pages exist specifically to be readable by
   crawlers that don't execute JS, so they're static files served
   directly by Vercel (see vercel.json's rewrites), outside the React
   app entirely. Uses the same design tokens as src/index.css (kept in
   sync by hand — there's no way to share a real CSS variable file
   between the Vite-built app and plain public/ static files without a
   build step neither of these currently has). */

:root {
  --bg: #FFFFFF;
  --text-primary: #111111;
  --text-secondary: #444444;
  --text-muted: #8E8E8E;
  --border: #EBEBEB;
  --red: #D81B7A;
  --font: 'Space Grotesk', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.info-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}

.info-topbar {
  margin-bottom: 32px;
}

.info-home-link {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}

.info-home-link .info-home-accent {
  color: var(--red);
}

.info-page h1 {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}

.info-page h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 36px 0 12px;
}

.info-page p {
  color: var(--text-secondary);
  margin: 0 0 14px;
}

.info-page ol,
.info-page ul {
  color: var(--text-secondary);
  margin: 0 0 14px;
  padding-left: 22px;
}

.info-page li {
  margin-bottom: 8px;
}

.info-page a {
  color: var(--red);
  text-decoration: underline;
}

.info-page strong {
  color: var(--text-primary);
}

.info-notice {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  background: #FAFAFA;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 28px;
}

.info-footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
}

.info-footer a {
  color: var(--text-muted);
  text-decoration: none;
}