/* Tiny Atlas design tokens, shared by the home page and the map.
   Warm near-black glass, cream type, one saffron accent. */
:root {
  --ink: #15120f;          /* page ground */
  --raise: #1d1915;        /* cards on the ground */
  --glass: rgba(24, 20, 17, .94);
  --glass-soft: rgba(24, 20, 17, .86);
  --line: rgba(243, 235, 221, .16);
  --line-2: rgba(243, 235, 221, .32);
  --cream: #f3ebdd;
  --muted: #c9bda9;        /* 10:1 on --ink */
  --faint: #a39782;        /* 6:1 on --ink */
  --saffron: #e9a23b;
  --on-saffron: #1a140d;
  --water: #7fd3cb;

  --font-ui: "Schibsted Grotesk", "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-title: "Cormorant SC", "Iowan Old Style", Georgia, serif;
  --f-sub: "Cormorant Garamond", Georgia, serif;
  --gutter: clamp(18px, 4vw, 56px);
}

/* Shared page chrome (home footer, play, trip kit, voices consent): slim header and footer, one focus ring, one button. */
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; }
.site-head { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  padding: 8px var(--gutter); background: var(--ink); border-bottom: 1px solid var(--line); font-family: var(--font-ui); }
.site-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cream); text-decoration: none;
  font: 600 1.05rem var(--f-title); letter-spacing: .14em; text-transform: uppercase; }
.site-brand img { width: 28px; height: 28px; border-radius: 6px; display: block; }
.site-nav { display: flex; flex-wrap: wrap; gap: 2px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--cream);
  text-decoration: none; font: 500 .9rem var(--font-ui); }
.site-nav a:hover { background: var(--raise); }
.site-nav a[aria-current="page"] { color: var(--saffron); }
.site-foot { max-width: 1280px; margin: 40px auto 0; padding: 24px var(--gutter) 36px; border-top: 1px solid var(--line); font: 400 .85rem/1.6 var(--font-ui); color: var(--muted); }
.site-foot .site-nav { margin: 0 -14px 8px; }
.site-foot p { margin: 0; max-width: 62em; }
.site-foot a { color: var(--saffron); }
.site-foot .site-nav a { color: var(--cream); }
.btn-app { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--saffron);
  background: var(--saffron); color: var(--on-saffron); font: 600 .95rem var(--font-ui); text-decoration: none; cursor: pointer; }
.btn-app:hover { background: #f3b04f; }
.btn-app.ghost { background: transparent; color: var(--cream); border-color: var(--line-2); }
.btn-app.ghost:hover { border-color: var(--saffron); color: var(--saffron); }
@media print { .site-head, .site-foot { display: none; } }