/* ═══════════════════════════════════════════════════════════
   Ukulele Buddha — shared base stylesheet
   Design tokens, four themes, and primitives shared across every
   page (nav, footer helpers, buttons, typography). Page-specific
   section styles live inline in each page's <style> block.

   Theme model: the default (Sand & Linen) tokens live on `.site`.
   Dark themes are opt-in modifier classes toggled on <body> by the
   theme switcher: `.site.t-strata`, `.site.t-terra`, `.site.t-obsidian`.
   Persisted in localStorage under the key `ub-theme`.
   ═══════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}

.site{
  --fd:'Bricolage Grotesque',sans-serif;--fm:'DM Mono',monospace;--fh:'Caveat',cursive;--fb:'DM Sans',sans-serif;
  --bg:#f7f3ed;--bg2:#ede8df;--surface:rgba(255,252,246,.66);--surface2:rgba(255,252,246,.85);--border:rgba(58,49,40,.12);--border2:rgba(58,49,40,.18);
  --tp:#160e04;--tb:#3d3028;--tm:#5e554b;--ru:#c8802e;--ruh:#e0a24f;--ink:#9a5a1e;--cream:#faf7f2;
  --glow:rgba(200,128,46,.14);--glow2:rgba(200,128,46,.22);--shlg:0 6px 24px rgba(90,70,50,.16);--shxl:0 14px 44px rgba(90,70,50,.22);
  --navbg:linear-gradient(180deg,rgba(247,243,237,.92) 0%,rgba(247,243,237,.55) 60%,transparent 100%);
  --phoneBg:rgba(247,243,237,.98);--phoneTab:rgba(237,232,223,.99);--phoneText:#160e04;--phoneSub:#5e554b;--phoneCard:rgba(255,252,246,.82);--phoneBorder:rgba(58,49,40,.10);--phoneChip:rgba(200,128,46,.12);
  font-family:var(--fb);background:var(--bg);color:var(--tb);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100%;overflow-x:hidden;position:relative;margin:0}

.site.t-strata{--bg:#1e2124;--bg2:#2a2d32;--surface:rgba(79,86,92,.25);--surface2:rgba(79,86,92,.45);--border:rgba(255,255,255,.12);--border2:rgba(255,255,255,.16);--tp:#e8dfd0;--tb:#9aa0a7;--tm:#6d7278;--ru:#cf8236;--ruh:#e6a552;--ink:#e6a552;--cream:#fff;--glow:rgba(207,130,54,.12);--glow2:rgba(207,130,54,.22);--shlg:0 8px 32px rgba(0,0,0,.35);--shxl:0 16px 48px rgba(0,0,0,.5);--navbg:linear-gradient(180deg,rgba(30,33,36,.85) 0%,rgba(30,33,36,.5) 60%,transparent 100%);--phoneBg:rgba(42,45,50,.96);--phoneTab:rgba(42,45,50,.94);--phoneText:#e8dfd0;--phoneSub:#8a9199;--phoneCard:rgba(79,86,92,.3);--phoneBorder:rgba(255,255,255,.08);--phoneChip:rgba(207,130,54,.16)}
.site.t-terra{--bg:#151009;--bg2:#282724;--surface:rgba(76,75,66,.28);--surface2:rgba(76,75,66,.46);--border:rgba(255,255,255,.10);--border2:rgba(255,255,255,.14);--tp:#eae0cd;--tb:#a8a397;--tm:#847c74;--ru:#d0842f;--ruh:#e6a552;--ink:#e6a552;--cream:#fff;--glow:rgba(208,132,47,.13);--glow2:rgba(208,132,47,.24);--shlg:0 8px 32px rgba(0,0,0,.4);--shxl:0 16px 48px rgba(0,0,0,.55);--navbg:linear-gradient(180deg,rgba(21,16,9,.9) 0%,rgba(21,16,9,.5) 60%,transparent 100%);--phoneBg:rgba(40,39,36,.96);--phoneTab:rgba(40,39,36,.94);--phoneText:#eae0cd;--phoneSub:#9e9a90;--phoneCard:rgba(76,75,66,.3);--phoneBorder:rgba(255,255,255,.07);--phoneChip:rgba(208,132,47,.16)}
.site.t-obsidian{--bg:#111110;--bg2:#1a1918;--surface:rgba(46,45,43,.28);--surface2:rgba(46,45,43,.46);--border:rgba(255,255,255,.09);--border2:rgba(255,255,255,.13);--tp:#edebe6;--tb:#a8a59e;--tm:#6b6862;--ru:#cf7d38;--ruh:#e0a24f;--ink:#e0a24f;--cream:#fff;--glow:rgba(207,125,56,.12);--glow2:rgba(207,125,56,.22);--shlg:0 8px 32px rgba(0,0,0,.45);--shxl:0 16px 48px rgba(0,0,0,.6);--navbg:linear-gradient(180deg,rgba(17,17,16,.9) 0%,rgba(17,17,16,.5) 60%,transparent 100%);--phoneBg:rgba(26,25,24,.96);--phoneTab:rgba(26,25,24,.94);--phoneText:#edebe6;--phoneSub:#a8a59e;--phoneCard:rgba(46,45,43,.32);--phoneBorder:rgba(255,255,255,.06);--phoneChip:rgba(207,125,56,.16)}

/* ── Layout + typography ─────────────────────────────────── */
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.eye{font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.d{font-family:var(--fd);font-weight:700;letter-spacing:-.02em;color:var(--tp)}
.dxl{font-family:var(--fd);font-weight:700;font-size:clamp(46px,7vw,94px);line-height:1;letter-spacing:-.02em;color:var(--tp);margin:0}
.dlg{font-family:var(--fd);font-weight:700;font-size:clamp(34px,5vw,60px);line-height:1.05;letter-spacing:-.015em;color:var(--tp);margin:0}
.hand{font-family:var(--fh);font-style:italic;color:var(--ink)}
.hl{color:var(--ink)}
a{color:inherit;text-decoration:none}

/* ── Components ───────────────────────────────────────────── */
.glass{background:var(--surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);box-shadow:var(--shlg);border-radius:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:12px;font-size:14px;font-weight:600;font-family:var(--fb);cursor:pointer;white-space:nowrap;border:0;transition:transform .15s,box-shadow .2s,filter .2s}
.btnp{background:var(--ru);color:var(--cream);box-shadow:0 6px 20px var(--glow2)}
.btnp:hover{filter:brightness(1.06);transform:translateY(-1px)}
.appstore{display:inline-flex;align-items:center;gap:12px;padding:11px 18px;border-radius:14px;background:var(--bg2);color:var(--tp);border:1px solid var(--border2);transition:transform .15s}
.appstore:hover{transform:translateY(-2px)}
.appstore svg{width:26px;height:26px;flex-shrink:0}
.aslines{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.aslines .sm{font-size:10px;letter-spacing:.04em;color:var(--tm)}
.aslines .bg{font-size:16px;font-weight:600}

/* ── Mark image light/dark toggle ─────────────────────────── */
.mk-l{display:none}
.site.t-strata .mk-d,.site.t-terra .mk-d,.site.t-obsidian .mk-d{display:none}
.site.t-strata .mk-l,.site.t-terra .mk-l,.site.t-obsidian .mk-l{display:inline-block}

/* ── Navigation ───────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:var(--navbg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.navin{display:flex;align-items:center;gap:22px;padding:16px 0}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:44px;height:44px;object-fit:contain}
.brandtx{font-family:var(--fd);font-weight:700;font-size:22px;color:var(--tp);letter-spacing:-.015em;white-space:nowrap}
.navlinks{display:flex;gap:26px;margin-left:auto}
.navlinks a{font-size:15px;color:var(--tb);transition:color .2s}
.navlinks a:hover{color:var(--tp)}
.navlinks a.on{color:var(--tp)}
.sws{display:flex;gap:6px;padding:4px;border-radius:10px;background:var(--surface);border:1px solid var(--border)}
.sw{width:20px;height:20px;border-radius:6px;border:1px solid var(--border2);cursor:pointer;transition:transform .15s,box-shadow .15s;padding:0}
.sw:hover{transform:scale(1.12)}
.sw.on{box-shadow:0 0 0 2px var(--ru)}
.soon-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;background:var(--glow);border:1px solid var(--border2);font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.soon-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ru);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

@media(max-width:820px){.navlinks{display:none}}
@media(max-width:700px){.wrap{padding:0 20px}}
