/* ---------- Theme tokens ---------- */
:root {
  --bg: #0d0e14;
  --surface: #151621;
  --surface-hover: #1b1c2a;
  --border: rgba(255, 255, 255, 0.09);
  --fg: #f4f2ee;
  --muted: #a3a1ad;
  --accent: #b8a6ff;
  --accent-2: #f0a37a;
  --btn-solid-bg: #f4f2ee;
  --btn-solid-fg: #111;
  --scrim: 13, 14, 20;

  /* mountain backdrop */
  --sky1: #12131f;
  --sky2: #3a3050;
  --sky3: #d2826a;
  --sun: #ffb48a;
  --night1: #04050a;
  --night2: #141729;
  --night-max: 0.9;
  --star: 0.9;
  --far1: #3a3149;
  --far2: #231f30;
  --m-lit-top: #8a6a78;
  --m-lit: #3d3349;
  --m-shade: #241f30;
  --m-snow: #efe3e6;
  --m-front: #121119;
  --m-dark: #05050a;
  --trail: rgba(244, 242, 238, 0.32);
  --rock: #5a5266;
  --fig: #f4f2ee;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f6f3ee;
  --surface: #ffffff;
  --surface-hover: #fbf9f6;
  --border: rgba(20, 18, 30, 0.1);
  --fg: #17161c;
  --muted: #5f5c68;
  --accent: #6a55d8;
  --accent-2: #d9764b;
  --btn-solid-bg: #17161c;
  --btn-solid-fg: #fff;
  --scrim: 246, 243, 238;

  --sky1: #9fb8d6;
  --sky2: #e6d5da;
  --sky3: #f6c7a6;
  --sun: #fff3df;
  --night1: #3c3f66;
  --night2: #d69a8c;
  --night-max: 0.6;
  --star: 0.6;
  --far1: #b3b6cc;
  --far2: #959bb5;
  --m-lit-top: #d9cfd8;
  --m-lit: #9ea4bd;
  --m-shade: #7b819e;
  --m-snow: #ffffff;
  --m-front: #5d6680;
  --m-dark: #2b2d4a;
  --trail: rgba(23, 22, 28, 0.35);
  --rock: #6b6a80;
  --fig: #17161c;

  color-scheme: light;
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
}
a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-solid { background: var(--btn-solid-bg); color: var(--btn-solid-fg); }
.btn-ghost { border: 1px solid color-mix(in srgb, var(--fg) 45%, transparent); }
.btn-ghost:hover { border-color: var(--fg); }
.btn-sm { padding: 0.55rem 1.3rem; font-size: 0.9rem; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(16px, 5vw, 64px);
  transition: background 0.3s, backdrop-filter 0.3s;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.logo-mark { width: 30px; height: 30px; color: var(--fg); }
.logo em { font-style: normal; color: var(--accent); font-weight: 500; }
.links { display: flex; gap: 36px; font-size: 0.93rem; }
.links a { opacity: 0.85; }
.links a:hover { opacity: 1; }
.actions { display: flex; align-items: center; gap: 14px; }
.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  color: var(--fg); cursor: pointer;
}
.icon-btn:hover { background: var(--border); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.i-moon { display: none; }
:root[data-theme="light"] .i-sun { display: none; }
:root[data-theme="light"] .i-moon { display: block; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-content {
  position: relative;
  padding: 120px clamp(16px, 5vw, 64px) 80px;
  max-width: 880px;
}
.eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.eyebrow i { font-style: normal; opacity: 0.6; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
h1 {
  margin-top: 18px;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.035em;
}
h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, var(--accent-2)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead { margin-top: 22px; max-width: 460px; font-size: 1.08rem; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Mountain backdrop (animated by journey.js) ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.backdrop svg { position: absolute; }
.sky { inset: 0; width: 100%; height: 100%; }
.sky .night { opacity: calc(var(--night, 0) * var(--night-max)); }
.sky .stars { fill: #fff; opacity: calc(var(--star) * (0.25 + var(--night, 0) * 0.75)); }
.sky .far1 { fill: var(--far1); }
.sky .far2 { fill: var(--far2); }
.mountain { right: 0; bottom: 0; height: 100%; width: min(100%, 92vh); }
.mountain .m-shade { fill: var(--m-shade); }
.mountain .m-snow { fill: var(--m-snow); opacity: 0.9; }
.mountain .m-rock { fill: none; stroke: var(--m-shade); stroke-width: 3; stroke-linecap: round; opacity: 0.6; }
.mountain .m-night { fill: var(--m-dark); opacity: calc(var(--night, 0) * 0.5); }
.mountain .m-front { fill: var(--m-front); }
.mountain .trail { fill: none; stroke: var(--trail); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; stroke-linejoin: round; }
.mountain .camp path { fill: var(--accent-2); }
.mountain .camp .camp-door { fill: var(--m-front); }
.mountain .ob-rock { fill: var(--rock); }
.mountain .ob-log { fill: #7a5a3c; }
.mountain .ob-ring { fill: #b08a5f; }
.mountain .ob-gap { fill: var(--m-dark); }
.mountain .cairn ellipse { fill: var(--rock); }
.fig polyline, .fig line { fill: none; stroke: var(--fig); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.fig #h-head { fill: var(--fig); }
.fig .pole, .fig .torch-stick { stroke: #a07a52; stroke-width: 2.2; }
.fig .cloth { fill: var(--accent); }
.fig .flame-o { fill: #ffa646; }
.fig .flame-i { fill: #fff1c4; }
.veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--scrim), 0.82) 0%, rgba(var(--scrim), 0.55) 38%, rgba(var(--scrim), 0) 62%);
}
.nav, .hero, main, .footer { position: relative; z-index: 1; }
.nav { position: fixed; z-index: 10; }

/* ---------- Sections ---------- */
.section { padding: 100px clamp(16px, 5vw, 64px); max-width: 1200px; margin: 0 auto; scroll-margin-top: 40px; }
.section-head { max-width: 560px; margin-bottom: 44px; }
.kicker { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
h2 { margin: 8px 0 12px; font-size: clamp(1.8rem, 3.5vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.15; }

/* ---------- App cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--surface-hover); }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.4rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 25%, transparent), color-mix(in srgb, var(--accent) 30%, transparent));
}
.card h3 { font-size: 1.1rem; letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: 0.93rem; flex: 1; }
.card-foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--muted); }
.tag { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); }
.card-foot .open { color: var(--fg); font-weight: 500; }
.card.soon { opacity: 0.55; border-style: dashed; pointer-events: none; }

/* ---------- About ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.pillars div {
  padding: 24px; border: 1px solid var(--border); border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pillars b { font-size: 0.8rem; color: var(--accent); }
.pillars h3 { margin: 6px 0 6px; font-size: 1.1rem; }
.pillars p { color: var(--muted); font-size: 0.93rem; }

/* ---------- Contact / footer ---------- */
.contact { text-align: left; }
.contact p { margin-bottom: 28px; }
.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 28px clamp(16px, 5vw, 64px);
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

/* ---------- Small screens ---------- */
/* Wide screens: keep the content on the left so the mountain stays in view. */
@media (min-width: 1100px) {
  .section { margin: 0; max-width: min(1200px, 58vw); }
  .hero-content { max-width: min(880px, 58vw); }
}

@media (max-width: 860px) {
  .veil { background: linear-gradient(180deg, rgba(var(--scrim), 0.7) 0%, rgba(var(--scrim), 0.45) 55%, rgba(var(--scrim), 0.2) 100%); }
}
@media (max-width: 640px) {
  .links { display: none; }
  .actions { gap: 6px; }
  .section { padding-top: 72px; padding-bottom: 72px; }
}