/* mappo — the shared look. One file, so the landing page and the demo gallery
   cannot drift apart: tokens first, then the handful of primitives both pages
   are built out of. Anything that exists on exactly one page stays on that
   page; this file is only what is genuinely shared.

   Palette: warm paper, sage land, terracotta accent. The dark theme swaps the
   same names, so every rule below is written once. */

:root{
  --bg:#fffbf5; --card:#fff; --ink:#16181d; --muted:#6b7280; --line:#e6e1d8;
  --pill:#fff; --accent:#c2410c;
  /* map colours, exposed as tokens so a theme flip repaints every <mappo-world>
     on the page without a line of JavaScript — mappo re-resolves var() itself */
  --land:#c9d3bd; --coast:#5f7a4a; --grid:#ddd8cd; --sea:#f4f6f2; --ocean:#dfe6da;
  /* The dot field needs its own tone: --land is a fill, read across a whole
     continent, and the same value scattered as 3px dots all but disappears. */
  --dot:#9fb08f;
}
html[data-theme="dark"]{
  --bg:#0e1116; --card:#151a21; --ink:#e7ecf3; --muted:#93a0b4; --line:#242c37;
  --pill:#1d2229; --accent:#fb923c;
  --land:#2b3646; --coast:#7aa2f7; --grid:#232b36; --sea:#0f141b; --ocean:#1a2230;
  --dot:#44566d;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent)}

.wrap{max-width:1200px;margin:0 auto;padding:28px 24px 90px}

h1{font-size:27px;margin:0 0 6px;letter-spacing:-.015em}
/* Section rules, not headlines: the maps are the loud part of both pages. */
h2{font-size:13px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);
  margin:46px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
h2 span{text-transform:none;letter-spacing:0;font-size:13px;opacity:.8}
.lede{color:var(--muted);max-width:66ch;margin:0}

button{font:inherit;padding:8px 14px;border-radius:9px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer}
button:hover{border-color:var(--accent)}
button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);font-weight:600}

.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid>.card{min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column}
.card .art{padding:14px 14px 0}
.card .meta{padding:12px 16px 16px}
.card h3{margin:0 0 4px;font-size:15px}
.card p{margin:0 0 10px;color:var(--muted);font-size:13.5px}

pre{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  overflow-x:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tag{display:inline-block;font:11px/1 ui-monospace,monospace;background:var(--bg);
  border:1px solid var(--line);border-radius:5px;padding:3px 6px;margin:0 4px 4px 0;color:var(--muted)}

/* Four tokens, one language. A 100 KB highlighter on a page whose whole pitch
   is "no dependencies" would be an argument against the product. */
.tok-t{color:var(--accent)}
.tok-a{color:var(--coast)}
.tok-s{color:var(--muted)}
.tok-k{color:var(--accent);font-weight:600}

mappo-world{display:block;width:100%}

.foot{margin-top:40px;color:var(--muted);font-size:13.5px}