/* Shared styles for Happy Peeler's text pages (about, privacy, contact, 404). Tokens match the game page. */
:root {
  --bg: #EDF0E3; --surface: #F9FBF2; --ink: #1E2A1A; --muted: #5D6B55; --line: #D2D9C3; --accent: #3D7A2A;
  --display: 'Bagel Fat One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121812; --surface: #1B231A; --ink: #E9EFE0; --muted: #9BA892; --line: #2F3B2C; --accent: #9BCB6A; color-scheme: dark; }
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.wrap { max-width: 680px; margin-inline: auto; padding-block: 24px 40px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 24px; }
.brand { font-family: var(--display); font-size: 24px; color: var(--accent); text-decoration: none; line-height: 1; }
.play { font: 700 14px var(--body); color: var(--bg); background: var(--ink); border-radius: 999px; padding: 9px 16px; text-decoration: none; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 6vw, 44px); line-height: 1.05; margin: 0 0 8px; text-wrap: balance; }
h2 { font-size: 19px; margin: 32px 0 6px; }
p, li { max-width: 65ch; }
.lede { color: var(--muted); font-size: 17px; }
.updated { color: var(--muted); font-size: 14px; }
a { color: var(--accent); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
code, .mail { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; user-select: all; }
footer { max-width: 680px; margin-inline: auto; padding-block: 20px 32px; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }
footer a { color: inherit; }
footer .sp { flex: 1; }