/* Stela UI: compact and calm. The ancient theme is kept as a restrained style: sand/papyrus palette, one carved-style display
 * serif for headings, one ochre accent. Body text is the system sans font. Original CSS/SVG only; no image files.
 * Contrast (body text on its surface): ink 15:1, soft 9.7:1, muted 6.4:1 in light mode; 13.8:1, 10:1, 7:1 in dark mode.
 * Nothing is hidden by default: if an animation or a font fails, every section and note is still there. */

:root, :root[data-theme="light"] {
  --bg: #f3e7cc; --surface: #fbf4e1; --chip: #efe2c0; --line: #d3c096;
  --ink: #231a0e; --soft: #4d3b24; --muted: #6a5638; --ochre: #8a4607; --accent: #0e5450; --on-accent: #ffffff; --accent-bg: #dcefea;
  --shadow: 0 1px 2px rgba(60, 40, 10, .12), 0 4px 14px rgba(60, 40, 10, .08); --grain: rgba(110, 80, 30, .05);
  --skel-a: #eadcb8; --skel-b: #f6ecd0;
}
:root[data-theme="dark"] {
  --bg: #1b1612; --surface: #251e18; --chip: #32281f; --line: #46392b;
  --ink: #f4eada; --soft: #d9c9ab; --muted: #b9a88a; --ochre: #f0b45c; --accent: #7fdacf; --on-accent: #0b1d1b; --accent-bg: #17332f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3); --grain: rgba(255, 225, 170, .035);
  --skel-a: #2f261d; --skel-b: #3a3025;
}
@media (prefers-color-scheme: dark) {  /* only used if scripts did not run */
  :root:not([data-theme]) { --bg: #1b1612; --surface: #251e18; --chip: #32281f; --line: #46392b; --ink: #f4eada; --soft: #d9c9ab;
    --muted: #b9a88a; --ochre: #f0b45c; --accent: #7fdacf; --on-accent: #0b1d1b; --accent-bg: #17332f; }
}

:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;   /* spacing scale */
  --r: 12px;                                                                /* the one corner radius */
  --display: "Cinzel", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Nirmala UI", "Noto Sans Bengali", "Noto Sans Devanagari",
    "Noto Sans Arabic", "Noto Sans CJK SC", "Noto Sans JP", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--bg); font: 16px/1.5 var(--sans);
  background-image: repeating-linear-gradient(0deg, var(--grain) 0 1px, transparent 1px 4px);   /* very faint grain, CSS only */
  padding-bottom: 76px;   /* room for the mobile bottom bar */
}
h1, h2, h3, p { margin: 0; }
a { color: var(--accent); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--s4); }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 1200; height: 52px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.topbar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.brand { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.brand svg { width: 22px; height: 26px; flex: none; color: var(--ochre); }
.wordmark { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: .12em; line-height: 1.1; }
.tagline { font-size: .72rem; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text { min-width: 0; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: transparent; flex: none; }
.icon-btn svg { width: 20px; height: 20px; }
:root[data-theme="dark"] .ico-moon, :root:not([data-theme="dark"]) .ico-sun { display: none; }

/* ---------- Buttons and chips ---------- */
.btn { min-height: 44px; padding: var(--s2) var(--s4); border-radius: var(--r); border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); transition: transform .12s ease, background-color .12s ease; }
.btn:active { transform: translateY(1px); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 500; }
.btn-quiet[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent); }
.btn svg { width: 18px; height: 18px; flex: none; }
.link-btn { background: none; border: 0; padding: var(--s2) 0; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px var(--s3); border-radius: 999px; background: var(--chip); border: 1px solid var(--line);
  font-size: .8rem; font-weight: 600; color: var(--soft); }
.chip-accent { background: var(--accent-bg); border-color: var(--accent); color: var(--ink); }
.chip-ochre { border-color: var(--ochre); color: var(--ochre); background: transparent; }

/* ---------- Map ---------- */
.mapcard { margin-top: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.mapbar { display: flex; gap: var(--s2); align-items: center; padding: var(--s2); }
.mapbar .btn-main { flex: 1; }
#map { height: clamp(180px, 32vh, 360px); background: var(--chip); border-top: 1px solid var(--line); position: relative; z-index: 0; }
.mapcard.collapsed #map { display: none; }
.map-fallback { padding: var(--s4); color: var(--soft); font-size: .92rem; }
.hint { margin-top: var(--s2); font-size: .85rem; color: var(--muted); }
#msg { margin-top: var(--s3); min-height: 24px; font-weight: 600; }
#msg.warn { background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--r); padding: var(--s3); font-weight: 400; }
#msg .link-btn { margin-left: var(--s2); }

/* ---------- Walk mode and passport ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.toolbar .btn { flex: 1 1 140px; }
.small { font-size: .85rem; color: var(--soft); }
.walk-note { margin-top: var(--s2); font-size: .8rem; color: var(--muted); }
.check { display: flex; align-items: center; gap: var(--s2); min-height: 44px; margin-top: var(--s2); font-size: .9rem; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }
#walkstatus, #walkmsg { margin-top: var(--s1); font-size: .88rem; }
#walkmsg { font-weight: 600; color: var(--ochre); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--s4); margin-top: var(--s4); }
.panel h2 { font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s2); }
.pass-sum { font-weight: 600; }
.pass-list { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.pass-list li { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.pass-era { display: inline-block; margin-right: var(--s2); padding: 0 var(--s2); border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-bg); font-size: .8rem; font-weight: 600; }

/* ---------- Result summary ---------- */
.summary { margin-top: var(--s4); }
.sum-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.sum-place { font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: .04em; }
.sum-coord { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sum-rock { margin-top: var(--s2); font-weight: 600; font-size: 1.05rem; }
.sum-age { color: var(--soft); font-size: .92rem; }
.summary .chips { margin-top: var(--s3); }
.era { margin-top: var(--s3); }
.era-bar { position: relative; height: 14px; border-radius: 4px; background: var(--chip); border: 1px solid var(--line); overflow: hidden; }
.era-band { position: absolute; top: 0; bottom: 0; background: var(--ochre); opacity: .6; }
.era-human { position: absolute; top: 0; bottom: 0; left: 0; background: var(--accent); }
.era-labels { display: flex; justify-content: space-between; margin-top: var(--s1); font-size: .72rem; line-height: 1.2; color: var(--soft); }

/* ---------- Narration ---------- */
.narration .story { font-size: 1rem; }
.narration .story p + p { margin-top: var(--s2); }
.narration .story.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.narration-actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-top: var(--s3); }
.stamp { margin-top: var(--s3); font-size: .85rem; color: var(--soft); }
.unlock { display: inline-flex; align-items: center; gap: var(--s2); margin-left: var(--s2); padding: 2px var(--s3); border-radius: 999px; border: 1px solid var(--ochre);
  color: var(--ochre); font-weight: 600; animation: pop .2s ease-out both; }
.unlock svg { width: 16px; height: 16px; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Sections (accordion) ---------- */
.sections { display: grid; gap: var(--s3); margin-top: var(--s4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.col { display: grid; gap: var(--s3); align-content: start; min-width: 0; }
.sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.sec > summary { list-style: none; display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s3) var(--s4); cursor: pointer; }
.sec > summary::-webkit-details-marker { display: none; }
.sec-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--chip); color: var(--ochre); }
.sec-ico svg { width: 20px; height: 20px; }
.sec-head { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sec-title { font-family: var(--display); font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.sec-sum { font-size: .88rem; color: var(--soft); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chev { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform .15s ease; }
.sec[open] > summary .chev { transform: rotate(180deg); }
.sec[open] > summary { border-bottom: 1px solid var(--line); }
.sec-body { padding: var(--s4); animation: fade .18s ease-out both; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sec-body p + p, .sec-body .scope + p { margin-top: var(--s2); }
.sec-body > div > :last-child { margin-bottom: 0; }

/* content primitives */
.big { font-weight: 600; font-size: 1.05rem; }
.empty { color: var(--soft); font-style: italic; }
.scope { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-left: 3px solid var(--accent); background: var(--accent-bg); border-radius: 0 8px 8px 0; font-size: .88rem; }
.scope-wider_area, .scope-nearest_place, .scope-region { border-left-color: var(--ochre); background: var(--chip); }
.scope-none { border-left-color: var(--muted); background: transparent; font-style: italic; color: var(--soft); }
.scope-tag { display: inline-block; margin-right: var(--s2); padding: 0 var(--s2); border-radius: 999px; border: 1px solid currentColor; font-size: .7rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; font-style: normal; }
.chips-fossil li { padding: 2px var(--s3); border-radius: 999px; background: var(--accent-bg); border: 1px solid var(--accent); font-size: .85rem; }
.records { list-style: none; margin: 0; padding: 0; }
.records li { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.records li:first-child { border-top: 0; padding-top: 0; }
.records em { font-weight: 600; }
.rec { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.rec-photo { width: 120px; height: 90px; border-radius: var(--r); overflow: hidden; background: var(--chip); color: var(--muted); }
.rec-photo img, .rec-sil { display: block; width: 120px; height: 90px; }
.rec-photo img { object-fit: cover; }
.rec-sil { padding: 10px 14px; box-sizing: border-box; opacity: .7; }
.credit a { color: var(--soft); overflow-wrap: anywhere; }
.credit { margin-top: var(--s1); }
.rec-photo.illustration { background: #f4ecd8; }                 /* PhyloPic silhouettes are dark: keep a light backing in dark mode */
.rec-photo.illustration img { object-fit: contain; padding: 6px; box-sizing: border-box; }
.excerpt { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.figs { list-style: none; margin: var(--s3) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s3); }
.fig-name { font-weight: 600; font-size: .85rem; margin-top: var(--s1); }
.credit-subject { display: block; }
.scene { display: block; flex: none; width: 120px; height: 90px; border-radius: var(--r); }
.was { display: flex; gap: var(--s3); align-items: flex-start; }
#rock { position: relative; }
.strata { position: absolute; right: 0; bottom: 2px; width: 36px; height: 36px; color: var(--ochre); opacity: .35; }
.local-name span { font-weight: 600; color: var(--ink); }
.dead { color: var(--ochre); font-weight: 600; }
.excerpt { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.excerpt:first-child { border-top: 0; padding-top: 0; }
.excerpt p + p { margin-top: var(--s2); }
.traditions { margin-top: var(--s3); padding: var(--s3); border: 1px dashed var(--ochre); border-radius: var(--r); }
.traditions li { font-style: italic; margin-top: var(--s2); }
.traditions li .small { font-style: normal; }
.scribe-add { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.layer-title { font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre); }

/* Ground: what it was, and the timeline */
.was { margin-top: var(--s3); padding: var(--s3); border-left: 3px solid var(--ochre); background: var(--chip); border-radius: 0 var(--r) var(--r) 0; }
.was-label, .tl-title { font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre); }
.tl-title { margin: var(--s5) 0 var(--s3); }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.tl { position: relative; padding: 0 0 var(--s4) var(--s5); animation: fade .2s ease-out both; animation-delay: calc(var(--i, 0) * 60ms); }
.tl::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: -2px; border-left: 2px solid var(--line); }
.tl:last-child { padding-bottom: 0; }
.tl:last-child::before { display: none; }
.tl-dot { position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--muted); }
.tl-today .tl-dot { border-color: var(--accent); background: var(--accent); }
.tl-human .tl-dot { border-color: var(--accent); }
.tl-gap::before { border-left-style: dashed; }
.tl-gap .tl-dot { width: 10px; height: 10px; left: 2px; top: 7px; border-width: 2px; border-style: dashed; }
.tl-rock .tl-dot { border-color: var(--ochre); background: var(--ochre); width: 18px; height: 18px; left: -2px; top: 2px; }
.tl-head { font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--soft); }
.tl-body p + p { margin-top: var(--s1); }
.tl-note { margin-top: var(--s3); }
.sec-body.no-rock .tl-title, .sec-body.no-rock .tl-note { display: none; }

/* skeleton loading */
.skeleton { display: grid; gap: var(--s2); }
.skeleton i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--skel-a), var(--skel-b), var(--skel-a)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton i:nth-child(2) { width: 82%; } .skeleton i:nth-child(3) { width: 60%; }
.skeleton-note { margin-bottom: var(--s2); font-size: .88rem; color: var(--soft); font-style: italic; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- About ---------- */
.about { margin-top: var(--s5); }
.about > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-family: var(--display); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: .95rem; }
.about ul { margin: var(--s2) 0 0; padding-left: var(--s5); }
.about li { margin-top: var(--s2); }
.about h3 { margin-top: var(--s4); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre); }
.about .sources a { font-weight: 600; }

/* ---------- Mobile bottom bar ---------- */
.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; gap: var(--s2); padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(60, 40, 10, .1); }
.bottombar .btn { flex: 1; min-height: 48px; white-space: nowrap; padding-left: var(--s3); padding-right: var(--s3); }
.bottombar .btn-quiet { flex: 0 0 auto; }

.leaflet-container { font-family: var(--sans); }

/* ---------- Tablet and laptop ---------- */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .bottombar { display: none; }
  .sections { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
  .col { gap: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* header actions and the sound toggle: the slash shows OFF, the waves show ON */
.top-actions { display: flex; gap: var(--s2); align-items: center; }
#sound .snd-on { display: none; }
#sound.is-on .snd-on { display: inline; }
#sound.is-on .snd-off { display: none; }
#sound.is-on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* ---------- Start screen ---------- */
body[data-view="start"] { padding-bottom: 0; }
.start { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--s6) var(--s4); }
.start > .theme-toggle { position: absolute; top: var(--s3); right: var(--s3); }
.start-inner { width: 100%; max-width: 520px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.start-mark { width: 72px; height: 72px; border-radius: 16px; box-shadow: var(--shadow); }
.start-word { margin-top: var(--s4); font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem, 11vw, 3.4rem); letter-spacing: .14em; line-height: 1.1; padding-left: .14em; }
.start-tag { margin-top: var(--s2); color: var(--muted); font-size: .95rem; }
.start-q { margin-top: var(--s5); font-size: 1.3rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.start-hook { margin-top: var(--s3); font-size: 1.05rem; line-height: 1.55; color: var(--soft); }
.start-actions { width: 100%; margin-top: var(--s5); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.btn-start { width: 100%; min-height: 60px; font-size: 1.25rem; letter-spacing: .02em; }
.btn-start:disabled { opacity: .85; cursor: progress; }
.btn-map { width: 100%; min-height: 52px; border-color: var(--ink); }
.start-status { min-height: 1.4em; margin-top: var(--s3); font-size: .88rem; color: var(--soft); }
.fade-in { animation: appfade .22s ease-out both; }
@keyframes appfade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 768px) { .start-inner { max-width: 560px; } .start-q { font-size: 1.45rem; } }
.pass-oldest { margin-top: var(--s2); padding: var(--s2) var(--s3); border-left: 3px solid var(--ochre); background: var(--chip); border-radius: 0 8px 8px 0; font-size: .92rem; }
.pass-label { display: block; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre); }

/* ---------- Era badges and ranks ---------- */
.sum-rank { font-size: .85rem; font-weight: 700; color: var(--ochre); margin-bottom: var(--s2); }
.rank-line { font-weight: 700; margin-top: var(--s2); }
.bd-sub { margin-top: var(--s4); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre); }
.bd-grid { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); }
.bd { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--chip); }
.bd-art { width: 64px; height: 64px; flex: none; }
.bd-name { font-weight: 700; }
.bd.locked .bd-art { filter: grayscale(1); opacity: .45; }
.bd.locked { background: transparent; border-style: dashed; color: var(--soft); }
.bd.earned { border-color: var(--accent); background: var(--accent-bg); }
.badgecard .bd-row { display: flex; gap: var(--s3); align-items: center; }
.badgecard .bd-big { width: 72px; height: 72px; }
.badgecard p + p { margin-top: var(--s1); }
.bd-title { font-weight: 700; font-size: 1.05rem; }
.badgecard.unlocked .bd-big { animation: bdpop .7s cubic-bezier(.2, .8, .3, 1) both; }
.badgecard.unlocked { animation: bdglow .9s ease-out both; }
@keyframes bdpop { 0% { transform: scale(.6) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.12) rotate(3deg); opacity: 1; } 100% { transform: none; } }
@keyframes bdglow { 0% { box-shadow: 0 0 0 0 var(--ochre); } 40% { box-shadow: 0 0 0 6px var(--ochre); } 100% { box-shadow: var(--shadow); } }
@media (prefers-reduced-motion: reduce) { .badgecard.unlocked, .badgecard.unlocked .bd-big { animation: none; } }

/* ---------- Side panel (Walk mode, Passport, badges) ---------- */
.icon-btn { position: relative; }
.menu-dot { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.scrim { position: fixed; inset: 0; z-index: 1400; background: rgba(20, 12, 4, .5); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1500; width: min(400px, 92vw); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border-left: 1px solid var(--line); box-shadow: -8px 0 28px rgba(0, 0, 0, .3); padding: var(--s3) var(--s4) var(--s6);
  animation: drawerin .2s ease-out both; }
@keyframes drawerin { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); position: sticky; top: calc(-1 * var(--s3)); background: var(--bg); padding: var(--s2) 0; z-index: 1; }
.drawer-top h2 { font-family: var(--display); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 1rem; }
.drawer-group { margin-top: var(--s4); }
.drawer-h { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre); margin-bottom: var(--s2); }
.drawer .toolbar { margin-top: 0; }
.drawer .toolbar .btn, .drawer-group > .btn { width: 100%; flex: 1 1 100%; }
.drawer .panel { margin-top: var(--s3); box-shadow: none; }
.drawer .bd-grid { grid-template-columns: 1fr; }
body.drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }
.about-project { padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.about-project > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.about-project h3 { margin-top: var(--s4); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre); }
.about-project p, .about-project ul { margin-top: var(--s2); }
.about-project ul { padding-left: var(--s5); }
.about-project li + li { margin-top: var(--s1); }
.about-project a { font-weight: 700; display: inline-block; min-height: 44px; line-height: 44px; }
.code { margin: var(--s2) 0 0; padding: var(--s3); overflow-x: auto; background: var(--chip); border: 1px solid var(--line); border-radius: 8px; font: .8rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ink); white-space: pre; }

/* ---------- Badge splash ---------- */
.splash { position: fixed; inset: 0; z-index: 1600; display: grid; place-content: center; justify-items: center; text-align: center; padding: var(--s5);
  background: radial-gradient(circle at 50% 45%, rgba(14, 64, 60, .96), rgba(20, 12, 4, .97) 75%); color: #fff6e0; opacity: 0; }
.splash.go { animation: splashlife .25s ease-out both; }
.splash-art { position: relative; z-index: 2; }
.splash-badge { width: 132px; height: 132px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.splash.go .splash-badge { animation: splashpop .7s cubic-bezier(.2, .85, .3, 1.15) both; }
.splash-ring { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -112px 0 0 -80px; border-radius: 50%; border: 4px solid #f0b45c; opacity: 0; }
.splash.go .splash-ring { animation: splashring .8s ease-out .05s both; }
.splash-rays { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin-top: -40px; }
.splash-rays i { position: absolute; left: -3px; top: -3px; width: 6px; height: 18px; border-radius: 3px; background: #f0b45c; opacity: 0; }
.splash-rays i:nth-child(3n) { background: #7fdacf; }
.splash-rays i:nth-child(3n+1) { background: #f6e9c8; }
.splash.go .splash-rays i { animation: splashray .9s ease-out .1s both; }
.splash-ok { margin-top: var(--s5); min-width: 160px; min-height: 52px; font-size: 1.1rem; background: #f0b45c; border-color: #f0b45c; color: #231a0e; }
.splash.go .splash-ok { animation: splashtext .4s ease-out .5s both; }
.splash-kicker { margin-top: var(--s5); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f0b45c; }
.splash-name { margin-top: var(--s1); font-family: var(--display); font-size: 1.5rem; font-weight: 600; letter-spacing: .04em; }
.splash-sub { margin-top: var(--s2); font-size: .9rem; max-width: 22rem; color: #f4eada; }
.splash.go .splash-kicker, .splash.go .splash-name, .splash.go .splash-sub { animation: splashtext .5s ease-out .25s both; }
@keyframes splashlife { from { opacity: 0; } to { opacity: 1; } }
@keyframes splashpop { 0% { transform: scale(.3) rotate(-14deg); opacity: 0; } 65% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes splashring { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes splashray { 0% { transform: rotate(var(--a)) translateY(30px); opacity: 0; } 25% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(110px); opacity: 0; } }
@keyframes splashtext { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.splash-rays i:nth-child(1) { --a: 0deg; } .splash-rays i:nth-child(2) { --a: 30deg; } .splash-rays i:nth-child(3) { --a: 60deg; }
.splash-rays i:nth-child(4) { --a: 90deg; } .splash-rays i:nth-child(5) { --a: 120deg; } .splash-rays i:nth-child(6) { --a: 150deg; }
.splash-rays i:nth-child(7) { --a: 180deg; } .splash-rays i:nth-child(8) { --a: 210deg; } .splash-rays i:nth-child(9) { --a: 240deg; }
.splash-rays i:nth-child(10) { --a: 270deg; } .splash-rays i:nth-child(11) { --a: 300deg; } .splash-rays i:nth-child(12) { --a: 330deg; }
@media (prefers-reduced-motion: reduce) { .splash, .splash * { animation: none !important; } .splash.go { opacity: 1; } .splash-ok, .splash-kicker, .splash-name, .splash-sub, .splash-badge { opacity: 1; } .splash-ring, .splash-rays { display: none; } }
.bd-artwrap { position: relative; display: inline-block; flex: none; line-height: 0; }
.bd-chair { position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; }
.splash .bd-chair { width: 44px; height: 44px; }
.bd.locked .bd-chair { filter: grayscale(1); opacity: .6; }

/* ---------- Start screen: Try these places ---------- */
.start { grid-template-columns: minmax(0, 1fr); }   /* the scrolling row must not widen the page */
.start-inner { min-width: 0; }
.places { width: 100%; min-width: 0; margin-top: var(--s5); text-align: left; }
.places-h { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ochre); margin-bottom: var(--s2); }
.places-row { list-style: none; margin: 0 calc(-1 * var(--s4)); padding: 2px var(--s4) var(--s2); display: flex; gap: var(--s3);
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scroll-padding: 0 var(--s4); }
.places-row > li { flex: 0 0 min(220px, 70vw); scroll-snap-align: start; display: flex; }
.place-card { width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }
.place-card:hover { border-color: var(--accent); }
.place-name { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.place-where { font-size: .8rem; color: var(--muted); }
.place-why { margin-top: var(--s1, 4px); font-size: .88rem; line-height: 1.4; color: var(--soft); }
.places-note { margin-top: var(--s3); font-size: .85rem; line-height: 1.45; color: var(--soft); }

.sum-example { font-size: .88rem; line-height: 1.45; color: var(--soft); background: var(--accent-bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s2) var(--s3); margin-bottom: var(--s3); }
.sum-example strong { color: var(--ink); }
#summary { scroll-margin-top: 64px; }   /* keep the top of the result clear of the sticky header after the auto-scroll */

/* ---------- Start screen: blurred fossil and rock backdrop (original inline SVG, decorative only) ---------- */
.start { overflow: hidden; isolation: isolate; }

/* Try these places as a one-row slider at every width, so the start screen fits without scrolling */
.places-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.places-head .places-h { margin-bottom: 0; }
.places-nav { display: none; gap: var(--s2); }
.places-row { scrollbar-width: none; }
.places-row::-webkit-scrollbar { display: none; }
.place-why { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 640px) {
  .places { width: min(100%, 760px); }
  .start-inner { max-width: 760px; }
  .start-actions { max-width: 520px; }
  .places-nav { display: flex; }
  .places-row { margin: 0; padding: 2px 0 var(--s2); }
  .places-row > li { flex: 0 0 236px; }
}
@media (max-height: 760px) {
  .start { padding-top: var(--s4); padding-bottom: var(--s3); }
  .start-mark { width: 56px; height: 56px; }
  .start-q { margin-top: var(--s3); }
  .start-actions { margin-top: var(--s3); gap: var(--s2); }
  .start-status { margin-top: 0; min-height: 0; }
  .places { margin-top: var(--s3); }
}

/* Fit the start screen into one screen: tighter spacing everywhere, less on short screens */
.start { padding-top: var(--s4); padding-bottom: var(--s3); }
.start-word { margin-top: var(--s3); }
.start-q { margin-top: var(--s4); }
.start-actions { margin-top: var(--s4); gap: var(--s2); }
.btn-start { min-height: 56px; }
.btn-map { min-height: 48px; }
.start-status { margin-top: 0; min-height: 0; }
.places { margin-top: var(--s3); }
@media (max-height: 800px) {
  .start-mark { display: none; }
  .start-word { margin-top: var(--s2); }
}
@media (max-height: 700px) {
  .start-hook { margin-top: var(--s2); font-size: .98rem; line-height: 1.45; }
  .start-q { margin-top: var(--s3); font-size: 1.2rem; }
  .place-why { -webkit-line-clamp: 2; }
}
@media (max-height: 760px) {
  .start-hook { margin-top: var(--s2); font-size: .98rem; line-height: 1.45; }
  .place-why { -webkit-line-clamp: 2; }
  .place-card { padding: var(--s2) var(--s3); }
  .places-note { margin-top: var(--s2); font-size: .8rem; }
}
@media (max-height: 700px) {
  .start-word { font-size: clamp(2rem, 9vw, 2.6rem); }
  .start-actions { margin-top: var(--s3); }
  .start-q { font-size: 1.1rem; }
}

/* ---------- How it works pop-up ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 1700; display: grid; place-items: center; padding: var(--s4); }
.modal-scrim { position: absolute; inset: 0; background: rgba(20, 12, 4, .6); }
.modal { position: relative; width: 100%; max-width: 440px; max-height: 90dvh; overflow-y: auto; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 50px rgba(0, 0, 0, .4); padding: var(--s5); animation: modalin .18s ease-out both; }
.modal h2 { font-family: var(--display); font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s3); }
.modal ul { margin: 0 0 var(--s4); padding-left: var(--s5); line-height: 1.5; }
.modal li + li { margin-top: var(--s2); }
.modal .btn { width: 100%; }
@keyframes modalin { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal { animation: none; } }



/* Start screen backdrop: vintage parchment with quiet engraved line art (pyramid, Anubis, ammonites). Original inline SVG and
 * a generated paper grain (a data: URI, no image file, no new data source). Decorative only. */
.start-bg { --paper1: #f6ebd0; --paper2: #e7d2a3; --ink: #6b4a22; --grain: .55;
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--paper1) 0%, var(--paper2) 100%); }
.start-bg::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .24  0 0 0 0 .1  1.3 0 0 0 -.62'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"); opacity: var(--grain); }
:root[data-theme="dark"] .start-bg { --paper1: #241c13; --paper2: #130e09; --ink: #d3ae66; --grain: .16; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .start-bg { --paper1: #241c13; --paper2: #130e09; --ink: #d3ae66; --grain: .16; } }
.start-bg::after { content: ""; position: absolute; inset: 10px; border: 1px solid var(--ink); opacity: .4; outline: 1px solid var(--ink); outline-offset: -16px; }
.bg-m { position: absolute; height: auto; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.bg-m * { vector-effect: non-scaling-stroke; }
.bg-m .thin { stroke-width: 1px; }
.bg-m .dot { fill: var(--ink); stroke: none; }
.m-pyr { width: clamp(84px, 22vw, 170px); left: 7%; top: 3.5%; }
.m-anu { width: clamp(58px, 15vw, 96px); right: 16%; top: 3%; }
.m-amm { width: min(76vw, 440px); right: -20%; bottom: -16%; }
.m-amm2 { width: clamp(70px, 18vw, 130px); left: 5%; bottom: 3%; }
@media (min-width: 640px) { .m-pyr { left: 12%; top: 8%; } .m-anu { right: 12%; top: 6%; width: 112px; } .m-amm { right: 3%; bottom: -8%; } .m-amm2 { left: 10%; bottom: 8%; } }
.m-amm { opacity: .38; }
@media (min-width: 640px) { .m-pyr { width: 150px; top: 5%; } .m-anu { top: 5%; } }

/* Start screen: lighter, quieter typography (less dense) */
.start-tag { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.start-q { font-family: var(--display); font-weight: 500; font-size: 1.5rem; line-height: 1.3; letter-spacing: .005em; text-wrap: balance; margin-top: var(--s5); }
.start-hook { font-size: .95rem; line-height: 1.65; font-weight: 400; color: var(--muted); max-width: 34ch; text-wrap: balance; margin-top: var(--s2); }
.start-actions { margin-top: var(--s5); gap: var(--s3); }
.btn-start { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 1rem; }
.btn-map { font-weight: 500; border-color: var(--line); }
.link-btn { font-weight: 500; font-size: .9rem; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.places-h { font-weight: 600; letter-spacing: .14em; font-size: .72rem; }
.place-name { font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
.place-where { font-size: .74rem; letter-spacing: .04em; }
.place-why { font-size: .84rem; line-height: 1.5; color: var(--muted); -webkit-line-clamp: 2; }
.places-note { font-size: .76rem; line-height: 1.5; color: var(--muted); font-style: italic; }
@media (max-height: 800px) { .start-tag { display: none; } .start-q { margin-top: var(--s4); } }
@media (max-height: 700px) { .start-q { font-size: 1.25rem; margin-top: var(--s3); } .start-hook { font-size: .9rem; line-height: 1.5; } }
.start-tag { letter-spacing: .1em; font-size: .68rem; white-space: nowrap; }
.start-q { font-family: inherit; font-weight: 500; font-size: 1.3rem; letter-spacing: 0; line-height: 1.35; }
.start-hook { max-width: 42ch; text-wrap: pretty; }
.btn-map { border-color: var(--muted); }
.place-name { font-family: inherit; font-weight: 700; font-size: 1rem; }
@media (max-height: 700px) {
  .start-q { font-size: 1.15rem; margin-top: var(--s2); }
  .start-hook { margin-top: var(--s1, 4px); line-height: 1.4; }
  .start-actions { margin-top: var(--s2); gap: var(--s2); }
  .btn-start { min-height: 50px; } .btn-map { min-height: 44px; }
  .places { margin-top: var(--s2); }
}

/* ---------- Start screen: interactive buttons (CSS only, no sound; motion is off under prefers-reduced-motion) ---------- */
.btn-start { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; box-shadow: 0 2px 0 rgba(0, 0, 0, .18), 0 8px 18px rgba(14, 84, 80, .22); }
.btn-start::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%); pointer-events: none; }
.go-arrow { width: 20px; height: 20px; flex: none; transition: transform .18s ease; }
.btn-map, .link-btn, .place-card { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease; }
.btn-map:active { transform: scale(.985); }
.btn-start:active:not(:disabled) { transform: translateY(1px) scale(.985); box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 2px 8px rgba(14, 84, 80, .2); }
.place-card:active { transform: scale(.975); }
@media (hover: hover) {
  .btn-start:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 4px 0 rgba(0, 0, 0, .16), 0 14px 26px rgba(14, 84, 80, .3); }
  .btn-start:hover:not(:disabled) .go-arrow { transform: translateX(5px); }
  .btn-start:hover:not(:disabled)::after { transform: translateX(120%); transition: transform .55s ease; }
  .btn-map:hover { background: var(--accent-bg); border-color: var(--accent); transform: translateY(-1px); }
  .link-btn:hover { text-decoration-thickness: 2px; }
  .place-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(60, 40, 10, .18); border-color: var(--accent); }
}
.btn-start:focus-visible, .btn-map:focus-visible, .place-card:focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; }
/* waiting for the browser's location prompt: the arrow goes and three dots pulse */
.btn-start[aria-busy="true"] .go-arrow { display: none; }
.btn-start[aria-busy="true"] .lbl::after { content: "..."; display: inline-block; width: 1.2em; text-align: left; animation: dots 1s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes dots { 0% { width: 0; } 100% { width: 1.2em; } }
@media (prefers-reduced-motion: reduce) {
  .btn-start, .btn-map, .link-btn, .place-card, .go-arrow { transition: none; }
  .btn-start:hover:not(:disabled), .btn-start:active:not(:disabled), .btn-map:hover, .btn-map:active, .place-card:hover, .place-card:active { transform: none; }
  .btn-start::after { display: none; }
  .btn-start[aria-busy="true"] .lbl::after { animation: none; width: 1.2em; }
}
/* the busy message is for screen readers: the button itself shows "Finding you..." */
.start-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }