/* =====================================================================
   Meridian Studio house style  (v1, Oct 29, 2026)
   Extracted from the land-map look. Rules + reasoning: ../DESIGN-SYSTEM.md
   Dark is the default. Light variant: <html data-theme="light">.
   Client accent: set --accent / --accent-2 / --on-accent on :root (see "Client theming").
   Fonts (load once per page):
   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
   ===================================================================== */

:root {
  /* ---- surfaces ---- */
  --bg: #0b0d10;                         /* page / scene background */
  --bg-2: #101318;                       /* a section one step lighter */
  --glass: rgba(14, 16, 21, 0.68);       /* panels over 3D */
  --glass-strong: rgba(14, 16, 21, 0.86);/* menus, modals, chapter cards */
  --tint: rgba(255, 255, 255, 0.04);     /* tiles inside a panel */
  --tint-2: rgba(255, 255, 255, 0.07);   /* hover */
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);

  /* ---- ink ---- */
  --ink: #f3efe7;
  --ink-2: rgba(243, 239, 231, 0.74);
  --ink-3: rgba(243, 239, 231, 0.5);

  /* ---- accents (warm amber is THE brand accent) ---- */
  --sun: #f5b96a;          /* fills: primary button, dots, lines, thumbs */
  --sun-2: #ffd9a1;        /* amber text on dark */
  --on-sun: #1b1206;       /* text on an amber fill */
  --accent: var(--sun);    /* per-mode / per-client accent (fills, glows) */
  --accent-2: var(--sun-2);/* accent used as text */
  --on-accent: var(--on-sun);
  --accent-soft: rgba(245, 185, 106, 0.12);
  --accent-line: rgba(245, 185, 106, 0.35);

  /* ---- data colors (maps, legends, chips) ---- */
  --shade: #8fa3ff;  /* shadow / night */
  --water: #6cc6ff;
  --mint: #6fd9bf;   /* good */
  --rose: #f0707a;   /* bad */
  --slope-1: #6fae3c; --slope-2: #f0ad4c; --slope-3: #d4532a;

  /* ---- type ---- */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(46px, 6.2vw, 96px);  /* website hero only */
  --fs-display: 66px;   /* app title (34px on phones) */
  --fs-h2: 40px;        /* chapter / section title (31px on phones) */
  --fs-h3: 34px;        /* panel title (24px on phones) */
  --fs-h4: 27px;        /* inspector title */
  --fs-big: 46px;       /* one big number */
  --fs-stat: 23px;      /* stat tile number */
  --fs-narr: 25px;      /* italic narration (17px on phones) */
  --fs-body: 14.5px; --fs-ui: 13.5px; --fs-small: 12px; --fs-micro: 10.5px;

  /* ---- shape, depth, motion ---- */
  --radius: 22px; --radius-sm: 14px; --radius-xs: 10px; --pill: 999px;
  --blur: blur(26px) saturate(150%);
  --shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-pop: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
  --glow: 0 6px 24px -6px rgba(245, 185, 106, 0.7);
  --ease: cubic-bezier(.22, .8, .2, 1);
  --t-fast: .2s; --t-ui: .3s; --t-lens: .55s; --t-reveal: .8s; --t-grade: 1.1s; --t-veil: 1.2s;
  --cam-mode: 2000ms; --cam-fly: 2600ms; --cam-intro: 6500ms;
  --side-w: 360px; --gut: 32px;
  color-scheme: dark;
}

/* ---- Light palette: client pages that sell bright and warm (venues, campgrounds) ---- */
:root[data-theme="light"] {
  --bg: #f4efe6;
  --bg-2: #ebe4d7;
  --glass: rgba(255, 252, 246, 0.72);
  --glass-strong: rgba(255, 252, 246, 0.9);
  --tint: rgba(40, 30, 15, 0.04);
  --tint-2: rgba(40, 30, 15, 0.07);
  --line: rgba(40, 30, 15, 0.10);
  --line-2: rgba(40, 30, 15, 0.18);
  --ink: #1d1a15;
  --ink-2: rgba(29, 26, 21, 0.74);
  --ink-3: rgba(29, 26, 21, 0.54);
  --sun: #e39a3b;
  --sun-2: #9a5a12;         /* amber text needs to be darker on light */
  --accent-soft: rgba(227, 154, 59, 0.14);
  --accent-line: rgba(180, 110, 30, 0.40);
  --shade: #5566c8; --water: #1f8fd6; --mint: #1f9c7d; --rose: #c8414d;
  --shadow: 0 24px 60px -24px rgba(60, 40, 10, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-pop: 0 20px 50px -18px rgba(60, 40, 10, 0.3);
  --glow: 0 6px 24px -8px rgba(227, 154, 59, 0.6);
  color-scheme: light;
}

/* ---------- base ---------- */
.ms-base { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
:where(.ms-base) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:where(.ms-base) :where(b, strong) { font-weight: 600; }
.ms-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.ms-hero-title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-hero); line-height: .95; letter-spacing: -.015em; margin: 0; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.ms-hero-title em, .ms-h2 em { font-style: italic; color: var(--accent-2); }
.ms-h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.02; margin: 0; letter-spacing: -.01em; }
.ms-h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1; margin: 0; }
.ms-eyebrow { margin: 0; font-size: var(--fs-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ms-lede { font-size: var(--fs-ui); line-height: 1.55; color: var(--ink-2); margin: 0; }
.ms-lede b { color: var(--ink); }
.ms-num { font-family: var(--serif); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------- glass ---------- */
.ms-glass { background: var(--glass); border: 1px solid var(--line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.ms-card { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow); }
.ms-card.strong { background: var(--glass-strong); }
.ms-tile { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--tint); border: 1px solid var(--line); }

/* ---------- badge, pills, buttons ---------- */
.ms-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 9px; border-radius: var(--pill); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--accent-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ms-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--pill); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease), box-shadow var(--t-fast); }
.ms-btn:active { transform: scale(.96); }
.ms-btn-sun { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow); }
.ms-btn-sun:hover { filter: brightness(1.06); }
.ms-btn-glass { background: var(--glass); color: var(--ink); border: 1px solid var(--line-2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-weight: 500; }
.ms-btn-glass:hover { background: var(--glass-strong); }
.ms-pill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 12px; border-radius: var(--pill); font-size: 13px; font-weight: 500; color: var(--accent-2); background: var(--glass); border: 1px solid var(--accent-line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); text-decoration: none; transition: background var(--t-fast), transform var(--t-fast) var(--ease); }
.ms-pill:hover { background: var(--glass-strong); }
.ms-tool { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease); }
.ms-tool:hover { background: var(--glass-strong); border-color: var(--line-2); }
.ms-tool:active, .ms-pill:active { transform: scale(.95); }
.ms-tool svg, .ms-ico { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ms-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--pill); font-size: 11px; font-weight: 500; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
.ms-chip.good { color: #9ff0d6; border-color: rgba(111, 217, 191, .45); background: rgba(111, 217, 191, .1); }
.ms-chip.mid { color: var(--sun-2); border-color: var(--accent-line); background: var(--accent-soft); }
.ms-chip.bad { color: #ffb3b9; border-color: rgba(240, 112, 122, .45); background: rgba(240, 112, 122, .1); }

/* segmented control (inside a card) */
.ms-seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--tint); border: 1px solid var(--line); }
.ms-seg button { flex: 1; padding: 8px 6px; border-radius: var(--radius-xs); font-size: 12px; font-weight: 500; color: var(--ink-3); transition: background .25s, color .25s; white-space: nowrap; }
.ms-seg button:hover { color: var(--ink); }
.ms-seg button[aria-checked="true"], .ms-seg button.is-on { background: rgba(255, 255, 255, .1); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
:root[data-theme="light"] .ms-seg button[aria-checked="true"], :root[data-theme="light"] .ms-seg button.is-on { background: #fff; box-shadow: 0 1px 3px rgba(60, 40, 10, .15); }

/* ---------- bottom mode bar ---------- */
.ms-modes { position: relative; display: inline-flex; gap: 2px; padding: 6px; border-radius: var(--pill); background: var(--glass); border: 1px solid var(--line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .7); user-select: none; -webkit-user-select: none; }
.ms-modes .lens { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: var(--pill); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 30px -6px var(--accent); transition: left var(--t-lens) var(--ease), width var(--t-lens) var(--ease), box-shadow var(--t-lens); pointer-events: none; }
.ms-mode { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 13px; border-radius: var(--pill); font-size: 13.5px; font-weight: 500; color: var(--ink-3); transition: color var(--t-ui); }
.ms-mode:hover { color: var(--ink-2); }
.ms-mode.is-on { color: var(--ink); }
.ms-mode svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--t-ui); }
.ms-mode.is-on svg { stroke: var(--accent); }
.ms-narration { font-family: var(--serif); font-style: italic; font-size: var(--fs-narr); line-height: 1.25; margin: 0 auto 16px; max-width: 640px; text-shadow: 0 2px 24px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .6); text-wrap: balance; }
.ms-narration.swap { animation: ms-narr .7s var(--ease); }

/* ---------- stats, notes, lists ---------- */
.ms-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ms-stats > div { padding: 10px 10px 9px; border-radius: var(--radius-sm); background: var(--tint); border: 1px solid var(--line); }
.ms-stats b { display: block; font-family: var(--serif); font-size: var(--fs-stat); font-weight: 400; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ms-stats span { font-size: var(--fs-micro); color: var(--ink-3); line-height: 1.3; display: block; }
.ms-note { padding: 10px 12px; border-radius: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); background: var(--tint); border: 1px solid var(--line); }
.ms-note.warn { border-color: var(--accent-line); background: var(--accent-soft); }
.ms-note.info { border-color: rgba(108, 198, 255, .35); background: rgba(108, 198, 255, .07); }
.ms-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); transition: background .25s, border-color .25s; }
.ms-row:hover { background: var(--tint-2); border-color: var(--line-2); }
.ms-row .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 18px; border: 1px solid var(--line-2); }
.ms-keys { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ms-keys li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.ms-keys i { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.ms-keys i.line { height: 3px; border-radius: 2px; }

/* map labels */
.ms-lbl { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 5px 10px; border-radius: var(--pill); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); white-space: nowrap; }
.ms-lbl em { font-style: normal; font-weight: 500; opacity: .7; letter-spacing: .06em; }
.ms-spot-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 18px; color: var(--on-sun); background: #ffd27a; box-shadow: 0 0 0 6px rgba(255, 210, 122, .22), 0 0 30px rgba(255, 210, 122, .7); }

/* ---------- disclaimer + source line ---------- */
.ms-source { font-size: var(--fs-micro); line-height: 1.5; color: rgba(243, 239, 231, .6); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.ms-disclaimer { display: block; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .02em; color: rgba(255, 217, 161, .85); }
:root[data-theme="light"] .ms-source { color: var(--ink-3); text-shadow: none; }
:root[data-theme="light"] .ms-disclaimer { color: var(--sun-2); }

/* ---------- scene overlays ---------- */
.ms-vignette { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(5, 6, 8, .55) 100%),
  linear-gradient(180deg, rgba(5, 6, 8, .5) 0%, transparent 20%, transparent 62%, rgba(5, 6, 8, .62) 100%); }
.ms-grade { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity var(--t-grade) var(--ease), background var(--t-grade) var(--ease); }

/* ---------- motion ---------- */
@keyframes ms-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ms-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ms-narr { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ms-draw { 0% { stroke-dashoffset: 120; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -120; } }
@keyframes ms-grow { from { transform: scaleX(0); } }
.ms-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay: var(--d, 0s); }
.ms-reveal.in { opacity: 1; transform: none; }

/* ---------- phone ---------- */
@media (max-width: 720px) {
  :root { --fs-display: 34px; --fs-h2: 31px; --fs-h3: 24px; --fs-h4: 23px; --fs-big: 38px; --fs-stat: 20px; --fs-narr: 17px; --fs-body: 13.5px; --radius: 20px; --side-w: 0px; --gut: 16px; }
  .ms-modes { display: flex; width: 100%; justify-content: space-between; padding: 5px; gap: 0; }
  .ms-mode { flex: 1; flex-direction: column; gap: 3px; padding: 8px 0 7px; font-size: 10.5px; justify-content: center; }
  .ms-mode svg { width: 20px; height: 20px; }
  .ms-modes .lens { top: 5px; bottom: 5px; }
  .ms-narration { line-height: 1.3; margin: 0 6px 10px; }
  .ms-btn { height: 44px; padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) { .ms-base *, .ms-base *::before, .ms-base *::after { animation: none !important; transition: none !important; } .ms-reveal { opacity: 1; transform: none; } }