/* SOMWORLD site stylesheet — clean neutral, light/dark via design tokens. * * Theme resolution, in priority order: * 1. — the ACCOUNT setting, server-rendered * for a signed-in member who has chosen (follows them across devices). * 2. prefers-color-scheme — the device default, for anonymous * visitors and members who never touched the toggle. * The dark token block therefore appears twice: once under the media query * (guarded so an explicit light choice beats a dark device), once under the * explicit attribute. Same values, two doors. */ :root { --bg: #fafafa; --surface: #ffffff; --text: #1a1d21; --muted: #5c6570; --border: #d9dde2; --accent: #3b5b7c; /* restrained slate-blue: links, focus, buttons */ --accent-contrast: #ffffff; --nav-bg: #ffffff; --shadow: 0 1px 3px rgba(0, 0, 0, 0.07); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #15181c; --surface: #1d2126; --text: #e4e7ea; --muted: #9aa4ae; --border: #343a41; --accent: #7da7cd; --accent-contrast: #12151a; --nav-bg: #1a1e23; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { --bg: #15181c; --surface: #1d2126; --text: #e4e7ea; --muted: #9aa4ae; --border: #343a41; --accent: #7da7cd; --accent-contrast: #12151a; --nav-bg: #1a1e23; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* ---- base ---------------------------------------------------------------- */ * { box-sizing: border-box; } html { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.55; } main { max-width: 52rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; } /* Article pages that carry a stat grid get the screen (beta feedback 2026-08-13: * "on a large screen there is a lot of wasted space"). Prose is NOT widened with * it — a 1150px line length is unreadable — so everything in the body except the * table keeps the reading measure. Raising a max-width changes nothing below an * 832px viewport, so every phone renders exactly as before. */ main.wide { max-width: 72rem; } main.wide article > :not(table) { max-width: 46rem; } a { color: var(--accent); } a:hover { text-decoration-thickness: 2px; } h1, h2, h3 { line-height: 1.25; } h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; margin-top: 1.75em; } hr { border: 0; border-top: 1px solid var(--border); } small, .muted { color: var(--muted); } /* ---- nav bar ------------------------------------------------------------- */ /* The